add keyboard control for and video progress handling

code100x · May 16, 2024 · 471602e · 471602e
1 parent bcc1401
commit 471602e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -109,6 +109,6 @@
     "prettier": "^3.2.4",
     "prisma": "^5.6.0",
     "tailwindcss": "^3.3.0",
-    "ts-node": "^10.9.2",
+    "ts-node": "^10.9.2"
   }
 }
diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
@@ -40,6 +40,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   const [player, setPlayer] = useState<any>(null);
   const searchParams = useSearchParams();
   const vidUrl = options.sources[0].src;
+
   useEffect(() => {
     const t = searchParams.get('timestamp');
     if (contentId && player && !t) {
@@ -146,7 +147,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
             player.currentTime(player.currentTime() - 5);
             event.stopPropagation();
             break;
-          case 'ArrowUp': // Arrow up for increasing volume
+            case 'ArrowUp': // Arrow up for increasing volume
             event.preventDefault();
             player.volume(player.volume() + 0.1);
             event.stopPropagation();
@@ -202,6 +203,46 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
               }
             }
             break;
+          case 'Digit1':
+            player.currentTime(player.duration() * 0.1);
+            event.stopPropagation();
+            break;
+          case 'Digit2':
+            player.currentTime(player.duration() * 0.2);
+            event.stopPropagation();
+            break;
+          case 'Digit3':
+            player.currentTime(player.duration() * 0.3);
+            event.stopPropagation();
+            break;
+          case 'Digit4':
+            player.currentTime(player.duration() * 0.4);
+            event.stopPropagation();
+            break;
+          case 'Digit5':
+            player.currentTime(player.duration() * 0.5);
+            event.stopPropagation();
+            break;
+          case 'Digit6':
+            player.currentTime(player.duration() * 0.6);
+            event.stopPropagation();
+            break;
+          case 'Digit7':
+            player.currentTime(player.duration() * 0.7);
+            event.stopPropagation();
+            break;
+          case 'Digit8':
+            player.currentTime(player.duration() * 0.8);
+            event.stopPropagation();
+            break;
+          case 'Digit9':
+            player.currentTime(player.duration() * 0.9);
+            event.stopPropagation();
+            break;
+          case 'Digit0':
+            player.currentTime(0);
+            event.stopPropagation();
+            break;
         }
       }
     };