removed controls and keyboard control of youtube iframe, implemented 'm'm for mute

modulearn/TODO.md

@@ -1,10 +1,14 @@
 - [x] unmute the player on each module change?
-- [ ] bug: when you go backwards on the YouTube timeline, it doesn't update the selected module
-  (forwards is fine)
-    - [ ] related bug: when you go 5/30 seconds back to an earlier module, it doesn't switch to highlighting
+- [x] ` for pause/unpause
+- [x] `m` for mute/unmute
+- [ ] add a 'muted' indicator outside the iframe
+- [ ] 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
+- [ ] resolve the 'flashing'/re-rendering of the progress bars
+   - [ ] hide the progress bar until maybe "unmute"?
+- [x] remove controls, since we want to be nonlinear
+- [ ] don't let the YouTube iframe take control of keyboard events
+  - [ ] make it unclickable if possible
 - [ ] 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
@@ -16,7 +20,6 @@
 - [ ] (depends on above) enable search
 - [ ] add checkboxes for 'want to watch'
 - [ ] gray out watched modules
-- [ ] resolve the 'flashing'/re-rendering of the progress bars
 - [ ] related to above: don't re-render the progress bar to "done" or "empty" in current module
   right before switch
 - [ ] make it work decently for mobile!

modulearn/src/App.svelte

@@ -3,7 +3,7 @@
 
   import Modules from './Modules.svelte'
   import YouTube from './YouTube.svelte'
-  import { position, currentModule, uid } from './stores'
+  import { position, currentModule, uid, muted } from './stores'
   import { getModule } from './utils'
   import modules from './data'
 
@@ -15,7 +15,11 @@
       if (pos == null) return
       const newModule = getModule(pos, $currentModule)
 
-      if (video.muted()) video.unMute()
+      if ($muted && !video.muted()) {
+          video.mute()
+      } else if (!$muted && video.muted()) {
+          video.unMute()
+      }
       position.update(() => pos)
         if ((newModule && !$currentModule) || (newModule && $currentModule && newModule.id !==
             $currentModule.id)) { 
@@ -64,6 +68,7 @@
     const { key, code, ctrlKey, shiftKey, altKey, metaKey } = e
 
     if (shiftKey || altKey || metaKey) return
+    if (!video) return
 
     const amount = ctrlKey ? 30 : 5
     if (["j", "ArrowDown"].includes(key)) {
@@ -72,7 +77,7 @@
     } else if (["k", "ArrowUp"].includes(key)) {
       e.preventDefault()
       prevModule()
-    } else if ([32, "Space"].includes(code)) {
+    } else if ([32, "Space"].includes(code) || key === "`") {
       e.preventDefault()
       toggle(video)
     } else if (["l", "ArrowRight"].includes(key)) {
@@ -81,6 +86,16 @@
     } else if (["h", "ArrowLeft"].includes(key)) {
       e.preventDefault()
       jumpTo($position - amount)
+    } else if (key === "m") {
+      e.preventDefault()
+      muted.update(m => !m)
+    } else if (key === ";") {
+      e.preventDefault()
+        if (video.paused()) {
+            toggle(video)
+        } else {
+          jumpTo($position - 5)
+        }
     }
   }
 
@@ -111,7 +126,13 @@
 
 <main>
   {#key $currentModule}
-    <YouTube bind:this={video} videoId={$uid} start={$currentModule.start} end={$currentModule.end}/>
+    <YouTube 
+      bind:this={video} 
+      videoId={$uid} 
+      start={$currentModule.start} 
+      end={$currentModule.end}
+      controls={0}
+    />
   {/key}
   <Modules 
       on:repositionInModule={onRepositionInModule} 

modulearn/src/YouTube.svelte

@@ -9,7 +9,7 @@
   let divId = `player_${parseInt(Math.random() * 100000).toString()}`
 
   export let videoId; export let height = "390"; export let width = "640"; export let start;
-  export let end;
+  export let end; export let controls = 1;
 
   let player;
 
@@ -47,7 +47,7 @@
           //'onReady': onPlayerReady,
           onStateChange: onPlayerStateChange
         },
-        playerVars: { 'autoplay': 1, start, end, mute: 1 },
+        playerVars: { 'autoplay': 1, start, end, mute: 1, controls, disablekb: 1 },
 
       });
     }
@@ -73,6 +73,7 @@
   export function state() { return player.getPlayerState() }
   export function unMute() { return player.unMute() }
   export function muted() { return player.isMuted() }
+  export function mute() { return player.mute() }
 </script>
 
 <span class="yt-component" style="float: left">

modulearn/src/stores.js

@@ -3,4 +3,5 @@ import modules from './data'
 
 export const currentModule = writable(modules[0])
 export const position = writable(0)
+export const muted = writable(false)
 export const uid = derived(currentModule, $currentModule => $currentModule && $currentModule.uid)