arrow keys for changing volume of video

public/s/js/v0ck.js

@@ -527,6 +527,38 @@ class v0ck {
     document.addEventListener('fullscreenchange', toggleFullScreenClasses);
     toggleFullScreenClasses(); // Check initial state (important for transitions)
 
+    function handleKeyDown(e) {
+      if (!document.body.contains(video)) {
+        document.removeEventListener('keydown', handleKeyDown);
+        return;
+      }
+
+      // Block interaction if content warning is visible
+      const cwModal = document.getElementById('content-warning-modal');
+      if (cwModal && cwModal.style.display !== 'none') return;
+
+      // Don't fire if user is typing in an input, textarea or editing content
+      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA" || e.target.isContentEditable) return;
+
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        let newVol = video.volume;
+        if (e.key === "ArrowUp") {
+          newVol = Math.min(1, newVol + 0.05);
+        } else {
+          newVol = Math.max(0, newVol - 0.05);
+        }
+        video.volume = newVol;
+        if (volumeSlider) {
+          volumeSlider.value = newVol;
+        }
+        _volume = newVol;
+        handleVolumeButton(newVol);
+        showHUD(newVol);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+
     video.volume = _volume = volumeSlider.value = +(localStorage.getItem('volume') ?? defaultVolume);
     handleVolumeButton(video.volume);
 

src/inc/locales/de.json

@@ -288,6 +288,7 @@
     "toggle_rating": "Beitragsbewertung umschalten",
     "play_pause": "Abspielen/Pause",
     "next_prev": "Weiter/Zurück",
+    "volume": "Lautstärke",
     "scroll_nav": "Weiter/Zurück",
     "show_help": "Hilfe anzeigen"
   },

src/inc/locales/en.json

@@ -288,6 +288,7 @@
     "toggle_rating": "toggle item rating",
     "play_pause": "play/pause",
     "next_prev": "next/prev",
+    "volume": "volume",
     "scroll_nav": "next/prev",
     "show_help": "show help"
   },

src/inc/locales/nl.json

@@ -288,6 +288,7 @@
     "toggle_rating": "itembeoordeling omschakelen",
     "play_pause": "afspelen/pauzeren",
     "next_prev": "volgende/vorige",
+    "volume": "volume",
     "scroll_nav": "next/prev",
     "show_help": "help tonen"
   },

src/inc/locales/zange.json

@@ -286,6 +286,7 @@
     "toggle_rating": "Elementbewertung umschalten",
     "play_pause": "Abspielen/Pause",
     "next_prev": "nächster/vorheriger",
+    "volume": "Lautstärke",
     "scroll_nav": "nächster/vorheriger",
     "show_help": "Hilfe anzeigen"
   },

views/snippets/navbar.html

@@ -316,7 +316,8 @@
         <div class="shortcut-item"><span><kbd>p</kbd></span><span>{{ t('shortcuts.toggle_rating') }}</span></div>
         @endif
         <div class="shortcut-item"><span><kbd>Space</kbd></span><span>{{ t('shortcuts.play_pause') }}</span></div>
-        <div class="shortcut-item"><span><kbd>Arrows</kbd></span><span>{{ t('shortcuts.next_prev') }}</span></div>
+        <div class="shortcut-item"><span><kbd>←</kbd> <kbd>→</kbd></span><span>{{ t('shortcuts.next_prev') }}</span></div>
+        <div class="shortcut-item"><span><kbd>↑</kbd> <kbd>↓</kbd></span><span>{{ t('shortcuts.volume') }}</span></div>
         <div class="shortcut-item"><span><kbd>Scroll</kbd></span><span>{{ t('shortcuts.scroll_nav') }}</span></div>
         <div class="shortcut-item"><span><kbd>?</kbd></span><span>{{ t('shortcuts.show_help') }}</span></div>
       </div>