add video reload shortcut

eyaler · Oct 14, 2024 · 24c7ae0 · 24c7ae0
1 parent 82c3202
commit 24c7ae0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 <body onload="video_url.value = location.hash.slice(1); const loop_mode = location.search.slice(1); if (['loop', 'random'].includes(loop_mode)) {effect.value = loop_mode; effect.dispatchEvent(new Event('change'))}; video_url.select(); video_url.dispatchEvent(new Event('change'))">  <!-- Chromium allows requesting screen capture without user gesture (against the spec). See: https://issues.chromium.org/issues/40177563 -->
     <div id="inputs">
-        <input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="40" placeholder="Enter YouTube / Vimeo ID + params or any URL">
+        <input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="40" placeholder="Enter YouTube / Vimeo ID + params or any URL" title="Reload with Alt+Enter" aria-keyshortcuts="Alt+Enter">
         <select id="effect" title="Browse with Alt+↑ / Alt+↓" aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown">
             <optgroup label="Wasm (MediaPipe)">
                 <option value="pose_landmarks_recode">Pose landmarks overlay</option>

diff --git a/script.js b/script.js
@@ -86,11 +86,15 @@ effect.addEventListener('change', e => {
     }
 })
 document.addEventListener('keydown', e => {
-    if (e.altKey && (e.key == 'ArrowUp' || e.key == 'ArrowDown')) {
+    if (e.altKey && (e.key == 'ArrowUp' || e.key == 'ArrowDown' || e.target != video_url && e.key == 'Enter')) {
         e.preventDefault()
-        const effects = [...effect.querySelectorAll('option:not([disabled])')].map(e => e.value)
-        effect.value = effects[(effects.length+effects.indexOf(effect.value)+(e.key == 'ArrowUp' ? -1 : 1)) % effects.length]
-        effect.dispatchEvent(new Event('change'))
+        if (e.key == 'Enter')
+            get_video(video_url, false)
+        else {
+            const effects = [...effect.querySelectorAll('option:not([disabled])')].map(e => e.value)
+            effect.value = effects[(effects.length+effects.indexOf(effect.value)+(e.key == 'ArrowUp' ? -1 : 1)) % effects.length]
+            effect.dispatchEvent(new Event('change'))
+        }
     }
 })
 
@@ -103,8 +107,8 @@ function loop_effects() {
     setTimeout(loop_effects, loop_secs * 1000)
 }
 
-function get_video(input_elem) {
-    location.hash = load_video(input_elem, orig_video)[0]
+function get_video(input_elem, reload_youtube) {
+    location.hash = load_video(input_elem, orig_video, reload_youtube)[0]
     capture()
 }
 
@@ -590,6 +594,5 @@ async function capture() {
     })
     trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable)
     out_video.srcObject = new MediaStream([trackGenerator])
-    if (loop_mode)
-        loop_effects()
+    loop_effects()
 }
diff --git a/utils/videoloader.js b/utils/videoloader.js
@@ -1,4 +1,4 @@
-export default function load_video(input, video_elem) {
+export default function load_video(input, video_elem, reload_youtube=true) {
     input = (input.value ?? input).trim()
     let [vid_id, params, hash_params] = [...input.split(/(?:[?&]|(?=#))([^#]*)/), '', '']
     if (vid_id.includes('=')) {
@@ -66,7 +66,7 @@ export default function load_video(input, video_elem) {
         }
         url = `https://www.youtube-nocookie.com/embed/${vid_id}?autoplay=1&loop=1${playlist_params}&playsinline=1&rel=0${params}&mute=1`
         hash = vid_id + params
-        if (video_elem)
+        if (video_elem && reload_youtube)
             video_elem.onload = () => {video_elem.onload = ''; video_elem.src = url}  // Reload to overcome "This video is unavailable" error on first load of video with playlist parameter. See: https://issuetracker.google.com/issues/249707272
     }
     if (video_elem)