Merge pull request #652 from punyakrit/videoplayer

keyboard control for video progress handling
code100x · May 19, 2024 · 6838573 · 6838573
2 parents f27ef33 + 471602e
commit 6838573
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/src/app/questions/page.tsx b/src/app/questions/page.tsx
@@ -140,7 +140,7 @@ export default async function Home({
 
   return (
     <>
-      <div className="h-screen md:p-8 transition-colors duration-500">
+      <div className="h-max pb-4 md:p-8 transition-colors duration-500">
         <div className="flex justify-between items-center mb-6 px-8 pt-3">
           <div className="text-3xl dark:text-white  text-black transition-colors duration-500">
             <h1 className="text-black  dark:text-white">Questions</h1>
@@ -159,7 +159,7 @@ export default async function Home({
         </div>
         <NewPostDialog />
         <div className="md:mx-[15%] mx-auto md:p-10 ">
-          <div className="flex flex-col items-center p-4 dark:text-white">
+          <div className="flex flex-col  items-center p-4 dark:text-white">
             <div className="flex ">
               <Search />
               <div className="px-3">
@@ -215,7 +215,7 @@ export default async function Home({
                 </DropdownMenu>
               </div>
             </div>
-            <div className="w-full m-auto">
+            <div className="w-full overflow-y-scroll h-[500px] m-auto">
               <div className="space-y-4 w-full">
                 {response?.data?.map((post) => (
                   <PostCard

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;
         }
       }
     };