diff --git a/modulearn/TODO.md b/modulearn/TODO.md index aa619d4..e3c5048 100644 --- a/modulearn/TODO.md +++ b/modulearn/TODO.md @@ -16,3 +16,4 @@ - [Svelte Wrapper](https://github.com/benwoodward/svelte-plyr#readme) - [ ] either don't allow going before the first module, or fix it so that the first module isn't highlighted when watching the pre-module content (first solution is easier) - [ ] add "flat" drop shadow to progress bar and modules +- [ ] add a diagonally oriented aqua triangle at the upper right, as the logo diff --git a/modulearn/src/App.svelte b/modulearn/src/App.svelte index dd202aa..854d6bd 100644 --- a/modulearn/src/App.svelte +++ b/modulearn/src/App.svelte @@ -4,17 +4,19 @@ import Modules from './Modules.svelte' import { position, currentModule } from './stores' - import { getModuleIndex, getModule } from './utils' - import DATA from './data' + import { getModule } from './utils' + import { kedro_modules } from './data' let video; let interval; let timeout; + $: _currentModule = $currentModule || kedro_modules[0] const positionUpdater = () => { interval = setInterval(() => { const pos = video.position() const newModule = getModule(pos) position.update(() => pos) - if ((newModule && !$currentModule) || (newModule && $currentModule && newModule.name !== $currentModule.name)) { + if ((newModule && !$currentModule) || (newModule && $currentModule && newModule.index !== + $currentModule.index)) { currentModule.update(() => newModule) } }, 100) @@ -22,7 +24,7 @@ const onSelectModule = event => { const { module } = event.detail - if (module && !$currentModule || module.name !== $currentModule.name) { + if (module && !$currentModule || module.index !== $currentModule.index) { clearTimeout(timeout) clearInterval(interval) currentModule.update(() => module) @@ -80,11 +82,11 @@ const nextModule = () => { if (!$currentModule) { - return onSelectModule({detail: {module: DATA.modules[0]}}) + return onSelectModule({detail: {module: kedro_modules[0]}}) } const idx = $currentModule.index - if (idx < DATA.modules.length - 1) { - const mod = DATA.modules[idx + 1] + if (idx < kedro_modules.length - 1) { + const mod = kedro_modules[idx + 1] onSelectModule({detail: {module: mod}}) } } @@ -93,7 +95,7 @@ if (!$currentModule) return const idx = $currentModule.index || 1 if (idx > 0) { - const mod = DATA.modules[idx - 1] + const mod = kedro_modules[idx - 1] onSelectModule({detail: {module: mod}}) } } @@ -104,8 +106,9 @@
- - + +