From 373065dc43fb26791d35cb1e9f521258de192a85 Mon Sep 17 00:00:00 2001
From: zevav <zev@averba.ch>
Date: Fri, 2 Oct 2020 22:20:42 +0200
Subject: [PATCH] added a modifier to ffwd/rewind (ctrl) to take bigger steps.
 made progress bar clickable. added duration to modules

---
 modulearn/src/App.svelte     | 39 +++++++++++++++++++-----------------
 modulearn/src/Module.svelte  | 22 +++++++++++++++++---
 modulearn/src/Modules.svelte |  2 +-
 modulearn/src/data.js        |  5 +++--
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/modulearn/src/App.svelte b/modulearn/src/App.svelte
index 84856cf..d00e437 100644
--- a/modulearn/src/App.svelte
+++ b/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 jumpTo = pos => {
+      clearInterval(interval)
+      video.jumpTo(pos)
+      positionUpdater()
+  }
+
   const handleKeyDown = e => {
-      const { key, code, ctrlKey } = e
-      if (e.shiftKey || e.altKey || e.metaKey) {
-          return
-      }
-      let amount = 5
+      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)
-          if (ctrlKey) {
-              amount = 30
-          }
-          video.jumpTo($position + amount)
-          positionUpdater()
+          jumpTo($position + amount)
       } else if (["h", "ArrowLeft"].includes(key)) {
           e.preventDefault()
-          clearInterval(interval)
-          if (ctrlKey) {
-              amount = 30
-          }
-          video.jumpTo($position - amount)
-          positionUpdater()
+          jumpTo($position - amount)
       }
   }
 
@@ -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>
diff --git a/modulearn/src/Module.svelte b/modulearn/src/Module.svelte
index d46927a..426018d 100644
--- a/modulearn/src/Module.svelte
+++ b/modulearn/src/Module.svelte
@@ -5,8 +5,8 @@
   const dispatch = createEventDispatcher()
 
   export let module
-  const duration = module.end - module.start
-  const getProgress = pos => (pos - module.start) / duration * 100
+  let progressBar
+  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>
 
diff --git a/modulearn/src/Modules.svelte b/modulearn/src/Modules.svelte
index 3af34d9..7658c94 100644
--- a/modulearn/src/Modules.svelte
+++ b/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>
 
diff --git a/modulearn/src/data.js b/modulearn/src/data.js
index 8c0a0ea..4caebb8 100644
--- a/modulearn/src/data.js
+++ b/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))
 };