diff --git a/src/components/VideoPlayerWithChapters.tsx b/src/components/VideoPlayerWithChapters.tsx index 63b7880..a589f39 100644 --- a/src/components/VideoPlayerWithChapters.tsx +++ b/src/components/VideoPlayerWithChapters.tsx @@ -90,63 +90,82 @@ export const VideoPlayerWithChapters = forwardRef { - if (!isYouTube || !plyrRef.current) return; + if (!isYouTube) return; - const plyrElement = plyrRef.current; - const player = plyrElement?.plyr; - - if (!player) { - // Wait for player to be ready - const timeout = setTimeout(() => { - const p = plyrElement?.plyr; - if (p) { - setPlayerInstance(p); - setupTimeTracking(p); - } - }, 100); - return () => clearTimeout(timeout); - } - - setPlayerInstance(player); - setupTimeTracking(player); - - function setupTimeTracking(plyr: any) { - // Track time updates for chapter highlighting - plyr.on('timeupdate', (event: any) => { - const time = plyr.currentTime; - setCurrentTime(time); - - if (onTimeUpdate) { - onTimeUpdate(time); - } - - // Find current chapter - if (chapters.length > 0) { - let index = chapters.findIndex((chapter, i) => { - const nextChapter = chapters[i + 1]; - return time >= chapter.time && (!nextChapter || time < nextChapter.time); - }); - - // If before first chapter, no active chapter - if (index === -1 && time < chapters[0].time) { - index = -1; - } - - if (index !== currentChapterIndex) { - setCurrentChapterIndex(index); - if (index >= 0 && onChapterChange) { - onChapterChange(chapters[index]); - } - } - } - }); - } - - return () => { + // Wait for player to initialize + const checkPlayer = setInterval(() => { + const player = plyrRef.current?.plyr; if (player) { - player.off('timeupdate'); + clearInterval(checkPlayer); + setPlayerInstance(player); + + // Set up time tracking using Plyr's event API + if (typeof player.on === 'function') { + player.on('timeupdate', () => { + const time = player.currentTime; + setCurrentTime(time); + + if (onTimeUpdate) { + onTimeUpdate(time); + } + + // Find current chapter + if (chapters.length > 0) { + let index = chapters.findIndex((chapter, i) => { + const nextChapter = chapters[i + 1]; + return time >= chapter.time && (!nextChapter || time < nextChapter.time); + }); + + // If before first chapter, no active chapter + if (index === -1 && time < chapters[0].time) { + index = -1; + } + + if (index !== currentChapterIndex) { + setCurrentChapterIndex(index); + if (index >= 0 && onChapterChange) { + onChapterChange(chapters[index]); + } + } + } + }); + } else { + // Fallback: poll for time updates + const interval = setInterval(() => { + const time = player.currentTime; + setCurrentTime(time); + + if (onTimeUpdate) { + onTimeUpdate(time); + } + + // Find current chapter + if (chapters.length > 0) { + let index = chapters.findIndex((chapter, i) => { + const nextChapter = chapters[i + 1]; + return time >= chapter.time && (!nextChapter || time < nextChapter.time); + }); + + if (index === -1 && time < chapters[0].time) { + index = -1; + } + + if (index !== currentChapterIndex) { + setCurrentChapterIndex(index); + if (index >= 0 && onChapterChange) { + onChapterChange(chapters[index]); + } + } + } + }, 500); + + // Store interval ID for cleanup + return () => clearInterval(interval); + } } - }; + }, 100); + + return () => clearInterval(checkPlayer); }, [isYouTube, chapters, currentChapterIndex, onChapterChange, onTimeUpdate]); // Jump to specific time using Plyr API