removed a lot of workarounds and experiments

modulearn/src/App.svelte

@@ -7,7 +7,7 @@
   import { getModuleIndex, getModule } from './utils'
   import DATA from './data'
 
-  let video; let interval; let timeout; let firstUpdate;
+  let video; let interval; let timeout;
 
   // TODO: load data from JSON or an API
   // TODO: validate the data: overlaps? gaps? (gaps should be ok).
@@ -16,16 +16,12 @@
   // TODO: (depends on above) enable search
 
   const positionUpdater = () => {
-      if (firstUpdate) {
-          firstUpdate = false
-          return 
-      }
     interval = setInterval(() => {
-      const newModule = getModule($position)
       const pos = video.position()
+      const newModule = getModule(pos)
+      if (!pos) return console.log('no pos')
       position.update(() => pos)
-        if (!newModule 
+        if (newModule && !$currentModule 
-            || newModule && !$currentModule 
             || newModule && $currentModule && newModule.name !== $currentModule.name)
         { currentModule.update(() => newModule) }
     }, 100)
@@ -39,8 +35,7 @@
       currentModule.update(() => module)
       position.update(() => module.start)
       video.jumpTo(module.start)
-      firstUpdate = true
+      positionUpdater()
-      timeout = setTimeout(positionUpdater, 500)
     }
   }
 
@@ -56,12 +51,12 @@
       } else if ([32, "Space"].includes(code)) {
           video.toggle()
       } else if (["l", "ArrowRight"].includes(key)) {
-          video.jumpTo($position + 5)
           clearInterval(interval)
+          video.jumpTo($position + 5)
           positionUpdater()
       } else if (["h", "ArrowLeft"].includes(key)) {
-          video.jumpTo($position - 5)
           clearInterval(interval)
+          video.jumpTo($position - 5)
           positionUpdater()
       }
   }
@@ -86,6 +81,7 @@
     }
   }
 
+
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />

modulearn/src/Module.svelte

@@ -2,24 +2,29 @@
   import { createEventDispatcher } from 'svelte';
   import { currentModule, position } from "./stores"
 
-  const dispatcher = createEventDispatcher()
+  const dispatch = createEventDispatcher()
 
   export let module
   const duration = module.end - module.start
   const getProgress = pos => (pos - module.start) / duration * 100
 
-  let styl; let selected; let progress;
+  let selected; let progress; let klass;
+
   $: selected = $currentModule && $currentModule.name === module.name
   $: if (selected) {
       progress = getProgress($position)
+      klass = "current"
+    } else {
+      progress = null;
+      klass = ""
     }
   // TODO: add checkboxes for 'want to watch'
   // TODO: gray out watched modules
 </script>
 
-<div on:click={() => dispatcher("selectModule", { module })} >
+<div on:click={() => dispatch("selectModule", { module })} >
-  <span style="{styl}" >I want to {module.outcome}.</span>
+  <span class="{klass}">I want to {module.outcome}.</span>
-  {#if selected}
+  {#if progress}
     <progress value={progress} max=100>Hi</progress>
   {/if}
 </div>
@@ -28,21 +33,12 @@
 
 <style>
   @media (prefers-color-scheme: light) {
-    /* span.current { background-color: yellow;} */
+    span.current { background-color: yellow;}
     span.current:hover { background-color: lightgrey; }
-	:root {
-	  --pending-bg: yellow; 
-      --finished-bg: white;
-	}
   }
 
   @media (prefers-color-scheme: dark) {
-	 :root {
+    span.current { background-color: blue; }
-	  --pending-bg: #222; 
-      --finished-bg: blue;
-	}
-
-    /* span.current { background-color: blue; } */
     span:hover {
       background-color: lavender;
       color: #222;