fixed stuttering, refactored to storing the current module instead of the current module name, added indices to modules.

modulearn/src/App.svelte

@@ -3,10 +3,11 @@
   import { onMount } from 'svelte';
 
   import Modules from './Modules.svelte'
-  import currentModule from './stores'
+  import { position, currentModule } from './stores'
+  import { getModuleIndex, getModule } from './utils'
   import DATA from './data'
 
-  let video; let position; let interval; let timeout;
+  let video; let interval; let timeout; let firstUpdate;
 
   // TODO: load data from JSON or an API
   // TODO: validate the data: overlaps? gaps? (gaps should be ok).
@@ -15,39 +16,31 @@
   // TODO: (depends on above) enable search
 
   const positionUpdater = () => {
-    interval = setInterval(() => {
-      position = video.position()
-      const newModule = getModule(position)
-      if (newModule !== $currentModule) {
-        currentModule.update(() => newModule)
+      if (firstUpdate) {
+          firstUpdate = false
+          return 
       }
+    interval = setInterval(() => {
+      const newModule = getModule($position)
+      const pos = video.position()
+      position.update(() => pos)
+        if (!newModule 
+            || newModule && !$currentModule 
+            || newModule && $currentModule && newModule.name !== $currentModule.name)
+        { currentModule.update(() => newModule) }
     }, 100)
   }
 
   const onSelectModule = event => {
     const { module } = event.detail
-    if (module.name !== $currentModule) {
-      if (timeout) clearTimeout(timeout)
+    if (module && !$currentModule || module.name !== $currentModule.name) {
+      clearTimeout(timeout)
       clearInterval(interval)
-      currentModule.update(() => module.name)
+      currentModule.update(() => module)
+      position.update(() => module.start)
       video.jumpTo(module.start)
-      timeout = setTimeout(() => positionUpdater(), 1000)
-    }
-  }
-
-  const getModuleIndex = moduleName => {
-    for (const index in DATA.modules) {
-      if (DATA.modules[index].name === moduleName) {
-        return parseInt(index)
-      }
-    }
-  }
-
-  const getModule = position => {
-    for (const module of DATA.modules) {
-      if (position > module.start && position < module.end) {
-        return module.name
-      }
+      firstUpdate = true
+      timeout = setTimeout(positionUpdater, 500)
     }
   }
 
@@ -63,27 +56,32 @@
       } else if ([32, "Space"].includes(code)) {
           video.toggle()
       } else if (["l", "ArrowRight"].includes(key)) {
-          video.jumpTo(position + 5)
+          video.jumpTo($position + 5)
+          clearInterval(interval)
+          positionUpdater()
       } else if (["h", "ArrowLeft"].includes(key)) {
-          video.jumpTo(position - 5)
+          video.jumpTo($position - 5)
+          clearInterval(interval)
+          positionUpdater()
       }
   }
 
   const nextModule = () => {
-    const currentModuleIndex = getModuleIndex($currentModule)
-    if (currentModuleIndex < DATA.modules.length - 1) {
-      const mod = DATA.modules[currentModuleIndex + 1]
-      onSelectModule({detail: {module: mod}})
-    } else if (currentModuleIndex === undefined) {
-      const mod = DATA.modules[0]
+    if (!$currentModule) {
+      return onSelectModule({detail: {module: DATA.modules[0]}})
+    }
+    const idx = $currentModule.index
+    if (idx < DATA.modules.length - 1) {
+      const mod = DATA.modules[idx + 1]
       onSelectModule({detail: {module: mod}})
     }
   }
 
   const prevModule = () => {
-    const currentModuleIndex = getModuleIndex($currentModule) || 1
-    if (currentModuleIndex > 0) {
-      const mod = DATA.modules[currentModuleIndex - 1]
+    if (!$currentModule) return
+    const idx = $currentModule.index || 1
+    if (idx > 0) {
+      const mod = DATA.modules[idx - 1]
       onSelectModule({detail: {module: mod}})
     }
   }

modulearn/src/Module.svelte

@@ -1,12 +1,11 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import currentModule from "./stores"
+  import { currentModule } from "./stores"
 
   const dispatcher = createEventDispatcher()
 
   export let module
-  let klass
-  $: klass = $currentModule === module.name ? "current" : ""
+  $: klass = $currentModule && $currentModule.name === module.name ? "current" : ""
 
   // TODO: add checkboxes for 'want to watch'
   // TODO: gray out watched modules

modulearn/src/data.js

@@ -10,54 +10,63 @@ export default {
   ],
   modules: [
     {
+	  index: 0,
       name: 'Intro: Tom Goldenberg',
       start: 29,
       end: 116,
       outcome: 'know who Tom Goldenberg is',
     },
     {
+	  index: 1,
       name: 'Intro: QuantumBlack',
       start: 116,
       end: 177,
       outcome: 'know something about QuantumBlack',
     },
     {
+	  index: 2,
       name: 'Intro: Agenda',
       start: 177,
       end: 242,
       outcome: 'know what the agenda is',
     },
     {
+	  index: 3,
       name: 'Intro: Kedro',
       start: 242,
       end: 523,
       outcome: 'know what Kedro is',
     },
     {
+	  index: 4,
       name: 'Intro: kedro-viz',
       start: 523,
       end: 558,
       outcome: 'know what kedro-viz is',
     },
     {
+	  index: 5,
       name: 'Intro: MLFlow',
       start: 558,
       end: 871,
       outcome: 'know what MLFlow is',
     },
     {
+	  index: 6,
       name: 'installing Kedro and prereqs',
       start: 871,
       end: 939,
       outcome: 'have pandas/conda and kedro installed',
     },
     {
+	  index: 7,
       name: 'create a virtual environment',
       start: 939,
       end: 1038,
       outcome: 'have an activated virtual environment for playing with kedro (`kedro info` produces something)',
     },
     {
+	  index: 8,
       name: 'create a kedro project',
       start: 1038,
       end: 1175,

modulearn/src/stores.js

@@ -1,5 +1,4 @@
-import { writable } from 'svelte/store';
+import { writable } from 'svelte/store'
 
-const currentModule = writable(null);
-
-export default currentModule
+export const currentModule = writable(null)
+export const position = writable(0)

modulearn/src/utils.js

@@ -0,0 +1,18 @@
+import DATA 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) {
+    if (position > module.start && position < module.end) {
+      return module
+    }
+  }
+}
+