sets playback toggle button to pause when selecting a new video

jack-laverty · Jan 24, 2025 · 84440d0 · 84440d0
1 parent 6dead79
commit 84440d0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/app/(sidebar)/session/[sessionId]/components/video-container.tsx b/app/(sidebar)/session/[sessionId]/components/video-container.tsx
@@ -17,6 +17,7 @@ export default function VideoContainer({ clips, session }: VideoContainerProps)
 
   const [comments, setComments] = useState<Comment[]>([]);
   const [selectedVideo, setSelectedVideo] = useState<VideoMetadata | null>(null);
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const { fetchComments, addComment } = useComments(
     setComments,
     selectedVideo?.id);
@@ -37,6 +38,7 @@ export default function VideoContainer({ clips, session }: VideoContainerProps)
 
   const handleSelectVideo = (video: VideoMetadata) => {
     setSelectedVideo(video);
+    setIsPlaying(false);
   };
 
   return (
@@ -46,7 +48,11 @@ export default function VideoContainer({ clips, session }: VideoContainerProps)
 
         <div className="flex flex-col rounded-xl max-w-screen-md pb-2 bg-background">
           <VideoHeader session={session} />
-          <VideoPlayer title={selectedVideo ? selectedVideo.title : ''} />
+          <VideoPlayer 
+            title={selectedVideo ? selectedVideo.title : ''}
+            isPlaying={isPlaying}
+            setIsPlaying={setIsPlaying}
+          />
         </div>
 
         <VideoList

diff --git a/app/(sidebar)/session/[sessionId]/components/video-player.tsx b/app/(sidebar)/session/[sessionId]/components/video-player.tsx
@@ -19,12 +19,14 @@ import {
 
 interface VideoPlayerProps {
   title: string;
+  isPlaying: boolean;
+  setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
+
 }
 
-const VideoPlayer: React.FC<VideoPlayerProps> = ({ title }) => {
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ title, isPlaying, setIsPlaying }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [error, setError] = useState<string>('');
-  const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [currentTime, setCurrentTime] = useState<number[]>([0]);
   const [duration, setDuration] = useState<number>(0);
   const [playbackRate, setPlaybackRate] = useState<number[]>([1]);