added a modifier to ffwd/rewind (ctrl) to take bigger steps. made progress bar clickable. added duration to modules

modulearn/src/App.svelte

@@ -33,6 +33,13 @@
     }
   }
 
+  const onRepositionInModule = event => {
+    const { percentage } = event.detail
+    const pos = $currentModule.start + ($currentModule.duration * percentage / 100)
+    console.log(pos)
+    jumpTo(pos)
+  }
+
   onMount(() => positionUpdater())
 
   const toggle = video => {
@@ -43,12 +50,18 @@
       }
   }
 
-  const handleKeyDown = e => {
+  const jumpTo = pos => {
-      const { key, code, ctrlKey } = e
+      clearInterval(interval)
-      if (e.shiftKey || e.altKey || e.metaKey) {
+      video.jumpTo(pos)
-          return
+      positionUpdater()
   }
-      let amount = 5
+
+  const handleKeyDown = e => {
+      const { key, code, ctrlKey, shiftKey, altKey, metaKey } = e
+
+      if (shiftKey || altKey || metaKey) return
+
+      const amount = ctrlKey ? 30 : 5
       if (["j", "ArrowDown"].includes(key)) {
           e.preventDefault()
           nextModule()
@@ -60,20 +73,10 @@
           toggle(video)
       } else if (["l", "ArrowRight"].includes(key)) {
           e.preventDefault()
-          clearInterval(interval)
+          jumpTo($position + amount)
-          if (ctrlKey) {
-              amount = 30
-          }
-          video.jumpTo($position + amount)
-          positionUpdater()
       } else if (["h", "ArrowLeft"].includes(key)) {
           e.preventDefault()
-          clearInterval(interval)
+          jumpTo($position - amount)
-          if (ctrlKey) {
-              amount = 30
-          }
-          video.jumpTo($position - amount)
-          positionUpdater()
       }
   }
 
@@ -104,7 +107,7 @@
 
 <main>
   <Youtube bind:this={video} videoId={DATA.uid} />
-  <Modules on:selectModule={onSelectModule} modules={DATA.modules} />
+  <Modules on:repositionInModule={onRepositionInModule} on:selectModule={onSelectModule} modules={DATA.modules} />
 </main>
 
 <style>

modulearn/src/Module.svelte

@@ -5,8 +5,8 @@
   const dispatch = createEventDispatcher()
 
   export let module
-  const duration = module.end - module.start
+  let progressBar
-  const getProgress = pos => (pos - module.start) / duration * 100
+  const getProgress = pos => (pos - module.start) / module.duration * 100
 
   let selected; let progress; let klass;
 
@@ -18,12 +18,28 @@
       progress = null;
       klass = ""
     }
+
+  const progressClick = e => {
+	// https://stackoverflow.com/a/28311723/4386191
+	const max = 160
+	const pos = e.pageX - progressBar.offsetLeft
+	let dual = Math.round(pos / max * 100)
+
+	if (dual > 100) {
+      console.log(dual)
+	  dual = 100;
+	}
+
+    dispatch("repositionInModule", {percentage: dual})
+
+	}
+
 </script>
 
 <div on:click={() => dispatch("selectModule", { module })} >
   <span class="{klass}">I want to {module.outcome}.</span>
   {#if progress}
-    <progress value={progress} max=100>Hi</progress>
+      <progress bind:this={progressBar} on:click={progressClick} value={progress} max=100>Hi</progress>
   {/if}
 </div>
 

modulearn/src/Modules.svelte

@@ -5,7 +5,7 @@
 
 <span style="float: left">
   {#each modules as module}
-    <Module on:selectModule {module} />
+    <Module on:repositionInModule on:selectModule {module} />
   {/each}
 </span>
 

modulearn/src/data.js

@@ -1,4 +1,5 @@
 const add_indices = objects => objects.map((object, index) => ({...{index}, ...object}))
+const add_durations = objects => objects.map(object => ({...{duration: object.end - object.start}, ...object}))
 
 const _modules = [
     {
@@ -58,7 +59,7 @@ const _modules = [
     {
       name: 'create a kedro project',
       start: 1038,
-      end: 1175,
+      end: 2932,
       outcome: 'create a new kedro project',
     },
   ]
@@ -72,5 +73,5 @@ export default {
   outcomes: [
     'I know how to use Kedro in a basic way.',
   ],
-  modules: add_indices(_modules)
+  modules: add_durations(add_indices(_modules))
 };