diff --git a/.index.js.swp b/.functions.js.swp
similarity index 80%
rename from .index.js.swp
rename to .functions.js.swp
index 694c394..a3efca1 100644
Binary files a/.index.js.swp and b/.functions.js.swp differ
diff --git a/.index.html.swp b/.readme.md.swp
similarity index 90%
rename from .index.html.swp
rename to .readme.md.swp
index a9970f2..1058ce1 100644
Binary files a/.index.html.swp and b/.readme.md.swp differ
diff --git a/functions.js b/functions.js
new file mode 100644
index 0000000..6480f82
--- /dev/null
+++ 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')
+}
+
+
+
+
diff --git a/index.html b/index.html
index fe1169b..9a3dc3d 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
Subtitles player
+
diff --git a/index.js b/index.js
index fe79852..b1add48 100644
--- 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]()
}
})
}
diff --git a/readme.md b/readme.md
index d4d65c5..d102261 100644
--- 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.
+
+`Test for La Jeetee VR.`
-Use .srt file as timeline.
-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
+
+