fixed some weird module navigation bugs

modulearn/TODO.md

@@ -1,6 +1,14 @@
-- [ ] fix bug where the "current Module" no longer updates after you've navigated outside the bounds
+- [x] unmute the player on each module change?
-  of the modules' timestamps
+- [ ] bug: when you go backwards on the YouTube timeline, it doesn't update the selected module
-    - [ ] or (easier) require the modules' timestamps to cover the entirety of the recording
+  (forwards is fine)
+    - [ ] related bug: when you go 5/30 seconds back to an earlier module, it doesn't switch to highlighting
+      that module (forwards is fine)
+- [ ] ` for pause/unpause
+- [ ] `m` for mute/unmute
+- [ ] possible to "hide" iframes that have already been loaded and "show" them on selection?
+  - [ ] if so, can you load all the iframes in the background on first page load?
+- [ ] remove unused code now that we're totally modular
+- [ ] show the module name in a header
 - [ ] load data from JSON or an API
 - [ ] validate the data: overlaps? gaps?
 - [ ] support segments from multiple videos
@@ -14,11 +22,16 @@
 - [ ] make it work decently for mobile!
   - [Plyr.js](https://github.com/sampotts/plyr#api) might help with this
     - [Svelte Wrapper](https://github.com/benwoodward/svelte-plyr#readme)
+- [ ] add a diagonally oriented aqua triangle at the upper right, as the logo
+- [ ] support modules from the same UID in a different order
+
 - [x] either don't allow going before the first module, or fix it so that the first module isn't highlighted when watching the pre-module content (first solution is easier)
 - [x] add "flat" drop shadow to progress bar and modules
-- [ ] add a diagonally oriented aqua triangle at the upper right, as the logo
+- [x] fix bug where the "current Module" no longer updates after you've navigated outside the bounds
-- [ ] bug: when the newly seleted module is from a different YouTube UID, it doesn't autoplay and it
+  of the modules' timestamps
-  doesn't advance
+    - [x] or (easier) require the modules' timestamps to cover the entirety of the recording
-- [ ] bug: when you go backwards on the YouTube timeline, it doesn't update the selected module
+- [x] most of these should be fixed by changing it so a new iframe with start/end is rendered on
-  (forwards is fine)
+  every module change
-- [ ] show the module name in a header
+    - [x] bug: when the newly seleted module is from a different YouTube UID, it doesn't autoplay and it
+      doesn't advance
+

modulearn/src/App.svelte

@@ -5,7 +5,7 @@
   import YouTube from './YouTube.svelte'
   import { position, currentModule, uid } from './stores'
   import { getModule } from './utils'
-  import { modules } from './data'
+  import modules from './data'
 
   let video; let interval; let timeout;
 
@@ -14,6 +14,8 @@
       const pos = video.position()
       if (pos == null) return
       const newModule = getModule(pos, $currentModule)
+
+      if (video.muted()) video.unMute()
       position.update(() => pos)
         if ((newModule && !$currentModule) || (newModule && $currentModule && newModule.id !==
             $currentModule.id)) { 
@@ -108,8 +110,8 @@
 <svelte:window on:keydown={handleKeyDown} />
 
 <main>
-  {#key $uid}
+  {#key $currentModule}
-    <YouTube bind:this={video} videoId={$uid} />
+    <YouTube bind:this={video} videoId={$uid} start={$currentModule.start} end={$currentModule.end}/>
   {/key}
   <Modules 
       on:repositionInModule={onRepositionInModule} 

modulearn/src/YouTube.svelte

@@ -8,7 +8,8 @@
 
   let divId = `player_${parseInt(Math.random() * 100000).toString()}`
 
-  export let videoId; export let height = "390"; export let width = "640"
+  export let videoId; export let height = "390"; export let width = "640"; export let start;
+  export let end;
 
   let player;
 
@@ -23,7 +24,6 @@
     }
 
     window.onYouTubeIframeAPIReady = function() {
-      //console.log('hello')
       window.dispatchEvent(new Event("YouTubeIframeAPIReady"));
     };
 
@@ -46,7 +46,9 @@
         events: {
           //'onReady': onPlayerReady,
           onStateChange: onPlayerStateChange
-        }
+        },
+        playerVars: { 'autoplay': 1, start, end, mute: 1 },
+
       });
     }
     if (YouTubeIframeAPIReady) {
@@ -69,6 +71,8 @@
   export function paused() { return [5, 2, -1].includes(player.getPlayerState()) }
   export function buffering() { return player.getPlayerState() === 3 }
   export function state() { return player.getPlayerState() }
+  export function unMute() { return player.unMute() }
+  export function muted() { return player.isMuted() }
 </script>
 
 <span class="yt-component" style="float: left">

modulearn/src/data.js

@@ -101,4 +101,4 @@ const airflow_modules = enrichObjects(
 	kedro_modules.length,
 )
 
-export const modules = kedro_modules.concat(airflow_modules)
+export default kedro_modules.concat(airflow_modules)

modulearn/src/stores.js

@@ -1,5 +1,6 @@
 import { writable, derived } from 'svelte/store'
+import modules from './data'
 
-export const currentModule = writable(null)
+export const currentModule = writable(modules[0])
 export const position = writable(0)
 export const uid = derived(currentModule, $currentModule => $currentModule && $currentModule.uid)

modulearn/src/utils.js

@@ -1,4 +1,4 @@
-import { modules } from './data'
+import modules from './data'
 import { uid } from './stores'
 import { get } from 'svelte/store';