From 12b20d8b5cc2fc660c69212dfad65a4aad2b4449 Mon Sep 17 00:00:00 2001
From: Jack Laverty <jacktlaverty@gmail.com>
Date: Sun, 19 Jan 2025 15:55:52 +1100
Subject: [PATCH] video selection on side, playback rate fixed

---
 .../components/video-container.tsx            | 16 ++---
 .../[sessionId]/components/video-list.tsx     |  6 +-
 .../[sessionId]/components/video-player.tsx   | 61 +++++++++++--------
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/app/(sidebar)/session/[sessionId]/components/video-container.tsx b/app/(sidebar)/session/[sessionId]/components/video-container.tsx
index 2baa27a..83338c3 100644
--- a/app/(sidebar)/session/[sessionId]/components/video-container.tsx
+++ b/app/(sidebar)/session/[sessionId]/components/video-container.tsx
@@ -42,23 +42,23 @@ export default function VideoContainer({ clips, session }: VideoContainerProps)
   return (
     <div className="flex flex-col justify-between md:mx-auto p-4 max-w-fit">
       
-      <div className="flex justify-center gap-4">
+      <div className="flex justify-center gap-4 max-h-[720px]">
 
         <div className="flex flex-col rounded-xl max-w-screen-md pb-2 bg-background">
           <VideoHeader session={session} />
           <VideoPlayer title={selectedVideo ? selectedVideo.title : ''} />
-          <VideoList
-            videos={clips}
-            selectedVideo={selectedVideo}
-            onSelectVideo={handleSelectVideo}
-          />
         </div>
 
-        <CommentsSection 
+        <VideoList
+          videos={clips}
+          selectedVideo={selectedVideo}
+          onSelectVideo={handleSelectVideo}
+        />
+        {/* <CommentsSection 
           className="rounded-xl"
           comments={comments}
           addComment={addComment}
-        />
+        /> */}
       </div>
       
     </div>
diff --git a/app/(sidebar)/session/[sessionId]/components/video-list.tsx b/app/(sidebar)/session/[sessionId]/components/video-list.tsx
index 5e4a815..8d55acb 100644
--- a/app/(sidebar)/session/[sessionId]/components/video-list.tsx
+++ b/app/(sidebar)/session/[sessionId]/components/video-list.tsx
@@ -14,8 +14,8 @@ interface VideoListProps {
 const VideoList: React.FC<VideoListProps> = ({ videos, selectedVideo, onSelectVideo }) => {
   return (
 
-    <ScrollArea className="bg-background whitespace-nowrap">
-      <div className="p-2 space-x-2">
+    <ScrollArea className="bg-background rounded-lg">
+      <div className="p-4 gap-2 flex flex-col">
         {videos.map((video, index) => (
           <VideoThumbnail
             key={index}
@@ -25,7 +25,7 @@ const VideoList: React.FC<VideoListProps> = ({ videos, selectedVideo, onSelectVi
           />
         ))}
       </div>
-      <ScrollBar orientation="horizontal" />
+      <ScrollBar orientation="vertical" />
     </ScrollArea>
 
   );
diff --git a/app/(sidebar)/session/[sessionId]/components/video-player.tsx b/app/(sidebar)/session/[sessionId]/components/video-player.tsx
index c7a0dfe..65d3821 100644
--- a/app/(sidebar)/session/[sessionId]/components/video-player.tsx
+++ b/app/(sidebar)/session/[sessionId]/components/video-player.tsx
@@ -4,7 +4,18 @@ import React, { useRef, useState, useEffect, ChangeEvent } from 'react';
 import { Slider } from "@/components/ui/slider"
 import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
-import { Play, Pause, StepBack, StepForward, Pencil, MessageSquarePlus } from "lucide-react";
+import { 
+  Play,
+  Pause,
+  StepBack,
+  StepForward,
+  Timer
+} from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 interface VideoPlayerProps {
   title: string;
@@ -115,6 +126,9 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ title }) => {
   
   const handlePlaybackRateChange = (newValue: number[]) => {
     setPlaybackRate(newValue);
+    if (videoRef.current) {
+      videoRef.current.playbackRate = newValue[0];
+    }
   };
 
   const formatTime = (time: number): string => {
@@ -189,29 +203,28 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ title }) => {
             <StepForward size={18} />
           </Button>
 
-
-          {/* <div className="space-x-2">
-            <Button variant="ghost" size="icon">
-              <Pencil />
-            </Button>
-
-            <Button variant="ghost" size="icon">
-              <MessageSquarePlus />
-            </Button>
-          </div> */}
-
-          {/* playback rate */}
-          {/* <div className="flex-shrink-0 w-32">
-            <div className="flex items-center space-x-2">
-              <Slider 
-                defaultValue={playbackRate}
-                max={1} 
-                step={0.01}
-                onValueChange={handlePlaybackRateChange}
-              />
-              <div className="text-sm w-6 text-right">{playbackRate[0].toFixed(1)}x</div>
-            </div>
-          </div> */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant={"ghost"}
+              >
+                <Timer size={18} />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0">
+              <div className="flex-shrink-0 w-32">
+                <div className="flex items-center space-x-2">
+                  <Slider 
+                    defaultValue={playbackRate}
+                    max={1} 
+                    step={0.01}
+                    onValueChange={handlePlaybackRateChange}
+                  />
+                  <div className="text-sm w-6 text-right">{playbackRate[0].toFixed(1)}x</div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
 
         </div>
       </div>