Fix video reloading issue by memoizing video source and resetting resume prompt
- 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>
This commit is contained in:
@@ -253,6 +253,12 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
|
|||||||
return currentTime;
|
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)
|
// Check for saved progress and show resume prompt (only once on mount)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!hasShownResumePromptRef.current && !progressLoading && hasProgress && progress && progress.last_position > 5) {
|
if (!hasShownResumePromptRef.current && !progressLoading && hasProgress && progress && progress.last_position > 5) {
|
||||||
|
|||||||
@@ -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 { useParams, useNavigate } from 'react-router-dom';
|
||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
import { useAuth } from '@/hooks/useAuth';
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
@@ -355,7 +355,8 @@ export default function Bootcamp() {
|
|||||||
} : null;
|
} : 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
|
// Show warning if no video available
|
||||||
if (!video) {
|
if (!video) {
|
||||||
@@ -398,7 +399,6 @@ export default function Bootcamp() {
|
|||||||
{/* Video Player - Full Width */}
|
{/* Video Player - Full Width */}
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<VideoPlayerWithChapters
|
<VideoPlayerWithChapters
|
||||||
key={lesson.id}
|
|
||||||
ref={playerRef}
|
ref={playerRef}
|
||||||
videoUrl={isYouTube ? video.url : undefined}
|
videoUrl={isYouTube ? video.url : undefined}
|
||||||
m3u8Url={isAdilo ? video.m3u8Url : undefined}
|
m3u8Url={isAdilo ? video.m3u8Url : undefined}
|
||||||
|
|||||||
Reference in New Issue
Block a user