changed modules to be independent from each other, changed code accordingly

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

modulearn/src/App.svelte

@@ -4,17 +4,19 @@
 
   import Modules from './Modules.svelte'
   import { position, currentModule } from './stores'
-  import { getModuleIndex, getModule } from './utils'
+  import { getModule } from './utils'
-  import DATA from './data'
+  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) {
+    if (idx < kedro_modules.length - 1) {
-      const mod = DATA.modules[idx + 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 @@
 <svelte:window on:keydown={handleKeyDown} />
 
 <main>
-  <Youtube bind:this={video} videoId={DATA.uid} />
+  <Youtube bind:this={video} videoId={_currentModule.uid} />
-  <Modules on:repositionInModule={onRepositionInModule} on:selectModule={onSelectModule} modules={DATA.modules} />
+  <Modules on:repositionInModule={onRepositionInModule} on:selectModule={onSelectModule}
+      modules={kedro_modules} />
 </main>
 
 <style>

modulearn/src/Module.svelte

@@ -10,7 +10,7 @@
 
   let selected; let progress; let klass; let progressBar
 
-  $: selected = $currentModule && $currentModule.name === module.name
+  $: selected = $currentModule && $currentModule.index === module.index
   $: if (selected) {
       progress = getProgress($position)
       klass = "current"

modulearn/src/data.js

@@ -1,77 +1,58 @@
-const add_indices = objects => objects.map((object, index) => ({...{index}, ...object}))
+const enrichObjects = (platform, uid, objects) => objects.map((object, index) => ({...{index, duration: object.end - object.start, uid, platform}, ...object}))
-const add_durations = objects => objects.map(object => ({...{duration: object.end - object.start}, ...object}))
 
-const _modules = [
+export const kedro_modules = enrichObjects(
+  'YouTube',
+  'ZPxuohy5SoU',
+  [
     {
-      name: 'Chaff',
       start: 0,
       end: 29,
       outcome: 'skip this part',
     },
     {
-      name: 'Intro: Tom Goldenberg',
       start: 29,
       end: 116,
       outcome: 'know who Tom Goldenberg is',
     },
     {
-      name: 'Intro: QuantumBlack',
       start: 116,
       end: 177,
       outcome: 'know something about QuantumBlack',
     },
     {
-      name: 'Intro: Agenda',
       start: 177,
       end: 242,
       outcome: 'know what the agenda is',
     },
     {
-      name: 'Intro: Kedro',
       start: 242,
       end: 523,
       outcome: 'know what Kedro is',
     },
     {
-      name: 'Intro: kedro-viz',
       start: 523,
       end: 558,
       outcome: 'know what kedro-viz is',
     },
     {
-      name: 'Intro: MLFlow',
       start: 558,
       end: 871,
       outcome: 'know what MLFlow is',
     },
     {
-      name: 'installing Kedro and prereqs',
       start: 871,
       end: 939,
       outcome: 'have pandas/conda and kedro installed',
     },
     {
-      name: 'create a virtual environment',
       start: 939,
       end: 1038,
       outcome: 'have an activated virtual environment for playing with kedro (`kedro info` produces something)',
     },
     {
-      name: 'create a kedro project',
       start: 1038,
       end: 2932,
       outcome: 'create a new kedro project',
     },
   ]
-export default {
+)
-  platform: 'YouTube',
-  uid: 'ZPxuohy5SoU',
-  prereqs: [
-    'I know Python to some extent.',
-    'I know data science and ETL to some extent.',
-  ],
-  outcomes: [
-    'I know how to use Kedro in a basic way.',
-  ],
-  modules: add_durations(add_indices(_modules))
-};

modulearn/src/utils.js

@@ -1,15 +1,7 @@
-import DATA from './data'
+import { kedro_modules } from './data'
-
-export const getModuleIndex = moduleName => {
-  for (const module of DATA.modules) {
-    if (module.name === moduleName) {
-      return module.index
-    }
-  }
-}
 
 export const getModule = position => {
-  for (const module of DATA.modules) {
+  for (const module of kedro_modules) {
     if (position > module.start && position < module.end) {
       return module
     }