From 54a770ffcf7a96d5405cfeec3e3752e3537a8176 Mon Sep 17 00:00:00 2001 From: km0 Date: Wed, 22 Feb 2023 23:19:46 +0100 Subject: [PATCH] readme and functions as module --- .index.js.swp => .functions.js.swp | Bin 12288 -> 12288 bytes .index.html.swp => .readme.md.swp | Bin 12288 -> 12288 bytes functions.js | 20 +++++++++++++++++++ index.html | 1 + index.js | 30 ++++++++--------------------- readme.md | 15 +++++++++++++-- 6 files changed, 42 insertions(+), 24 deletions(-) rename .index.js.swp => .functions.js.swp (80%) rename .index.html.swp => .readme.md.swp (90%) create mode 100644 functions.js diff --git a/.index.js.swp b/.functions.js.swp similarity index 80% rename from .index.js.swp rename to .functions.js.swp index 694c394f5da6eb0fd5b8e688401715da83c6bbd1..a3efca12a133e57c7bd14c29dfeb243154674f52 100644 GIT binary patch delta 397 zcmYk%u}Z^W5C`zHbrD({H*FLT5lkSqO?0SA#X$szx><2+t*sU`2~8rRNLzgYV{ldU z4J4zJZy+u{ga}2eqxw%nz=PlL-F38Ft7!dst;WO2`P7;j`hXcf55aKIE)PqMjhYrlc zFaG_&JG{aZ+`%o}fD4y!0^6_!C0Kz;n1FE*Ar08;PYD}I??V}lY3#iynHZ7RRnp-r z-%{DGSvIRPGF5Sb-G8cFU`gh}GM^GJ{g}#yYPzd*K~rtVFQ4STW6pzDIwdcwET< literal 12288 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 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 + +