Merge pull request #50 from dhruvilmehta/videoplayer2

Added keyboard functionalities of playback speed and volume control to video
code100x · Feb 4, 2024 · 76109d1 · 76109d1
2 parents 68538bc + 022ada1
commit 76109d1
Showing 1 changed file with 82 additions and 23 deletions.
diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
@@ -16,6 +16,9 @@ interface VideoPlayerProps {
   contentId: number
 }
 
+const PLAYBACK_RATES: number[] = [0.5, 1, 1.25, 1.5, 1.75, 2];
+const VOLUME_LEVELS: number[] = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
+
 export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   options,
   contentId,
@@ -41,34 +44,90 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     if (!player) {
       return;
     }
+    let volumeSetTimeout;
     const handleKeyPress = (event: any) => {
-      switch (event.code) {
-      case 'Space': // Space bar for play/pause
-        if (player.paused()) {
-          player.play();
+      const isShiftPressed = event.shiftKey;
+      if (isShiftPressed) {
+        const currentIndexPeriod: number = PLAYBACK_RATES.indexOf(
+          player.playbackRate(),
+        );
+        const newIndexPeriod: number =
+          currentIndexPeriod !== PLAYBACK_RATES.length - 1
+            ? currentIndexPeriod + 1
+            : currentIndexPeriod;
+        const currentIndexComma = PLAYBACK_RATES.indexOf(player.playbackRate());
+        const newIndexComma =
+          currentIndexComma !== 0 ? currentIndexComma - 1 : currentIndexComma;
+        const currentIndexUp = VOLUME_LEVELS.indexOf(player.volume());
+        const newIndexUp =
+          currentIndexUp !== VOLUME_LEVELS.length - 1
+            ? currentIndexUp + 1
+            : currentIndexUp;
+        const currentIndexDown = VOLUME_LEVELS.indexOf(player.volume());
+        const newIndexDown =
+          currentIndexDown !== 0 ? currentIndexDown - 1 : currentIndexDown;
+        switch (event.code) {
+        case 'Period': // Increase playback speed
+          player.playbackRate(PLAYBACK_RATES[newIndexPeriod]);
+          event.stopPropagation();
+          break;
+        case 'Comma': // Decrease playback speed
+          player.playbackRate(PLAYBACK_RATES[newIndexComma]);
           event.stopPropagation();
-        } else {
-          player.pause();
+          break;
+        case 'ArrowUp': // Increase volume
+          videoRef.current?.children[0].children[6].children[3].classList.add(
+            'vjs-hover',
+          );
+          if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
+          volumeSetTimeout = setTimeout(() => {
+            videoRef.current?.children[0].children[6].children[3].classList.remove(
+              'vjs-hover',
+            );
+          }, 1000);
+          player.volume(VOLUME_LEVELS[newIndexUp]);
           event.stopPropagation();
+          break;
+        case 'ArrowDown': // Decrease volume
+          videoRef.current?.children[0].children[6].children[3].classList.add(
+            'vjs-hover',
+          );
+          if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
+          volumeSetTimeout = setTimeout(() => {
+            videoRef.current?.children[0].children[6].children[3].classList.remove(
+              'vjs-hover',
+            );
+          }, 1000);
+          player.volume(VOLUME_LEVELS[newIndexDown]);
+          event.stopPropagation();
+          break;
         }
-        event.preventDefault();
-        break;
-      case 'ArrowRight': // Right arrow for seeking forward 5 seconds
-        player.currentTime(player.currentTime() + 5);
-        event.stopPropagation();
-        break;
-      case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
-        player.currentTime(player.currentTime() - 5);
-        event.stopPropagation();
-        break;
-      case 'KeyF': // F key for fullscree
-        if (player.isFullscreen_) {
-          document.exitFullscreen();
-        } else {
-          player.requestFullscreen();
+      } else {
+        switch (event.code) {
+        case 'Space': // Space bar for play/pause
+          if (player.paused()) {
+            player.play();
+            event.stopPropagation();
+          } else {
+            player.pause();
+            event.stopPropagation();
+          }
+          event.preventDefault();
+          break;
+        case 'ArrowRight': // Right arrow for seeking forward 5 seconds
+          player.currentTime(player.currentTime() + 5);
+          event.stopPropagation();
+          break;
+        case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
+          player.currentTime(player.currentTime() - 5);
+          event.stopPropagation();
+          break;
+        case 'KeyF': // F key for fullscree
+          if (player.isFullscreen_) document.exitFullscreen();
+          else player.requestFullscreen();
+          event.stopPropagation();
+          break;
         }
-        event.stopPropagation();
-        break;
       }
     };