format

modulearn/src/App.svelte

@@ -1,74 +1,74 @@
 <script>
-    import Youtube from "svelte-youtube";
+  import Youtube from "svelte-youtube";
-	import { onMount } from 'svelte';
+  import { onMount } from 'svelte';
 
-    import Modules from "./Modules.svelte"
+  import Modules from "./Modules.svelte"
-    import { currentModule } from "./stores"
+  import { currentModule } from "./stores"
-    import DATA from "./data"
+  import DATA from "./data"
 
-    let video, position, interval;
+  let video, position, interval;
 
-    // TODO: load data from JSON or an API
+  // TODO: load data from JSON or an API
-    // TODO: validate the data: overlaps? gaps? (gaps should be ok).
+  // TODO: validate the data: overlaps? gaps? (gaps should be ok).
-    // TODO: support segments from multiple videos
+  // TODO: support segments from multiple videos
-    //   - youtube iframes can have a start/end time, for example
+  //   - youtube iframes can have a start/end time, for example
-    // TODO: (depends on above) enable search
+  // TODO: (depends on above) enable search
 
-    onMount(() => positionUpdater())
+  onMount(() => positionUpdater())
 
-    const positionUpdater = () => {
+  const positionUpdater = () => {
-        interval = setInterval(() => {
+    interval = setInterval(() => {
-            position = video.position()
+      position = video.position()
-            const newModule = getModule(position)
+      const newModule = getModule(position)
-            if (newModule !== $currentModule) {
+      if (newModule !== $currentModule) {
-              currentModule.update(() => newModule)
+        currentModule.update(() => newModule)
-            }
-          }, 100)
       }
+    }, 100)
+  }
 
-    const onSelectModule = event => {
+  const onSelectModule = event => {
-      const module = event.detail.module
+    const module = event.detail.module
-      if (module.name !== $currentModule) {
+    if (module.name !== $currentModule) {
-        clearInterval(interval)
+      clearInterval(interval)
-        currentModule.update(() => module.name)
+      currentModule.update(() => module.name)
-        video.jumpTo(module.start)
+      video.jumpTo(module.start)
-        positionUpdater()
+      positionUpdater()
-      }
+    }
-    }
+  }
-
+
-    const getModule = position => {
+  const getModule = position => {
-      for (const module of DATA.modules) {
+    for (const module of DATA.modules) {
-        if (position > module.start && position < module.end) {
+      if (position > module.start && position < module.end) {
-          return module.name
+        return module.name
-        }
       }
     }
+  }
 
 </script>
 
 <main>
-    <Youtube bind:this={video} videoId={DATA.uid} />
+  <Youtube bind:this={video} videoId={DATA.uid} />
-    <Modules on:selectModule={onSelectModule} modules={DATA.modules} />
+  <Modules on:selectModule={onSelectModule} modules={DATA.modules} />
 </main>
 
 <style>
-	main {
+  main {
-		text-align: center;
+    text-align: center;
-		padding: 1em;
+    padding: 1em;
-		max-width: 240px;
+    max-width: 240px;
-		margin: 0 auto;
+    margin: 0 auto;
-	}
+  }
 
-	h1 {
+  h1 {
-		color: #ff3e00;
+    color: #ff3e00;
-		text-transform: uppercase;
+    text-transform: uppercase;
-		font-size: 4em;
+    font-size: 4em;
-		font-weight: 100;
+    font-weight: 100;
-	}
+  }
 
-	@media (min-width: 640px) {
+  @media (min-width: 640px) {
-		main {
+    main {
-			max-width: none;
+        max-width: none;
-		}
+    }
-	}
+  }
 </style>

modulearn/src/Module.svelte

@@ -9,8 +9,6 @@
   $: class_ = $currentModule === module.name ? "current" : ""
 
   // TODO: add checkboxes for 'want to watch'
-  // TODO: add links to jump to that module
-      // TODO: fire events 
   // TODO: gray out watched modules
 
 </script>
@@ -27,10 +25,6 @@
     background-color: yellow;
   }
 
-  /* div.current:hover { */
-  /*   background-color: #FFFF99; */
-  /* } */
-
   div:hover {
     background-color: lightgrey;
   }