readme and functions as module

2 years ago · 54a770ffcf
parent 4b8c76bb76
commit 54a770ffcf
6 changed files with 42 additions and 24 deletions
--- a/.functions.js.swp
+++ b/.functions.js.swp
--- a/.index.html.swp
+++ b/.index.html.swp
--- a/functions.js
+++ b/functions.js
@ -0,0 +1,20 @@
+// Mapping
+export default {
+    1: () => test1(),
+    2: () => test2(),
+    3: () => {test1(); test2()}
+}
+
+// Functions
+
+const test1 = () => {
+    console.log('test 1 test 1')
+}
+
+const test2 = () => {
+    console.log('test 2 test 2')
+}
+
+
+
+
--- a/index.html
+++ b/index.html
@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <title>Subtitles player</title>
    <link rel="stylesheet" href="style.css">
+    <script type="module" defer src="functions.js"></script>
    <script type="module" defer src="index.js" ></script>
 </head>
 <body>
--- a/index.js
+++ b/index.js
@ -1,33 +1,19 @@
 // 1. Import dependencies, select DOM elements, define global var
 import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2';
+
+// 4. Interactive functions to attach to the subtitle id
+// see functions.js for more info
+import functions from './functions.js'
+
+
 const player = document.querySelector('#player')
 const sub = document.querySelector('#sub')

-// 4. Interactive functions to attach to the subtitle id
-// a. note that there can be more functions for every id
-// using the syntax id: () => {function1(); function2()}
-// b. note that to pass params to the functions you need to pass them to all
-// using the syntax: id: (param) => function1(param)
-//
-const srtFunctions = {
-// id: () => callback()
-    1: () => testFunction(),
-    2: () => testFunction(),
-    3: () => test2()
-}

 const printText = (text) => {
    sub.innerHTML = text
 }

-const testFunction = () => {
-    console.log('test function eheh')
-}
-
-const test2 = () => {
-    console.log('test 2')
-}
-
 // 3. Parse .srt file and setup audio player callback
 const readSRT = (srt) => {
    let parser = new srtParser2();
@ -46,8 +32,8 @@ const readSRT = (srt) => {
            currentId = parseInt(current.id)
            printText(current.text)
            // Check if the srtFunctions object has some callback for the current index
-            if(srtFunctions.hasOwnProperty(current.id))
-                srtFunctions[current.id]()
+            if(functions.hasOwnProperty(current.id))
+                functions[current.id]()
        }
    })
 }
--- a/readme.md
+++ b/readme.md
@ -1,11 +1,22 @@
 # Sub player

+Use subtitles file (.srt) as timeline, attaching custom functions to the captions to build time-based web pages.
   
-Use .srt file as timeline.   
-Test for La Jeetee VR.
+`Test for La Jeetee VR.`
+
+## Process

 1. Load audio player
 2. Load subtitles .srt file
 3. Parse .srt files into array of subtitles
 4. Add timeupdate callback on audio player to update current subtitle
 5. Create an object to map the id of the subtitle to callback functions
+
+## Files
+
+- `index.html` is the entry point  
+- `index.js` takes care of loading and parsing the SRT file, calling the functions from
+- `functions.js` custom list of functions to map onto the subtitles defined in
+- `jeetee.srt`, that is a standard .srt file for subtitles
+
+