From 2b98a5460daba6a064157b7c8c9f3283cf5fc525 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sun, 4 Jan 2026 11:17:38 +0700
Subject: [PATCH] Fix video reloading issue by memoizing video source and
 resetting resume prompt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Memoize video source object in Bootcamp to prevent unnecessary re-renders
- Reset resume prompt flag when videoId changes to allow prompt for new lessons
- Remove key prop from VideoPlayerWithChapters to prevent unmounting
- Video now plays correctly without reloading on every interaction

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/VideoPlayerWithChapters.tsx | 6 ++++++
 src/pages/Bootcamp.tsx                     | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoPlayerWithChapters.tsx b/src/components/VideoPlayerWithChapters.tsx
index f498bf6..566a736 100644
--- a/src/components/VideoPlayerWithChapters.tsx
+++ b/src/components/VideoPlayerWithChapters.tsx
@@ -253,6 +253,12 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
     return currentTime;
   };
 
+  // Reset resume prompt flag when videoId changes (switching lessons)
+  useEffect(() => {
+    hasShownResumePromptRef.current = false;
+    setShowResumePrompt(false);
+  }, [videoId]);
+
   // Check for saved progress and show resume prompt (only once on mount)
   useEffect(() => {
     if (!hasShownResumePromptRef.current && !progressLoading && hasProgress && progress && progress.last_position > 5) {
diff --git a/src/pages/Bootcamp.tsx b/src/pages/Bootcamp.tsx
index 20db97d..432b579 100644
--- a/src/pages/Bootcamp.tsx
+++ b/src/pages/Bootcamp.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
@@ -355,7 +355,8 @@ export default function Bootcamp() {
       } : null;
     };
 
-    const video = getVideoSource();
+    // Memoize video source to prevent unnecessary re-renders
+    const video = useMemo(getVideoSource, [lesson.id, lesson.video_host, lesson.m3u8_url, lesson.mp4_url, lesson.youtube_url, lesson.video_url, lesson.embed_code]);
 
     // Show warning if no video available
     if (!video) {
@@ -398,7 +399,6 @@ export default function Bootcamp() {
         {/* Video Player - Full Width */}
         <div className="mb-6">
           <VideoPlayerWithChapters
-            key={lesson.id}
             ref={playerRef}
             videoUrl={isYouTube ? video.url : undefined}
             m3u8Url={isAdilo ? video.m3u8Url : undefined}