Fix React error #310 by ensuring hooks are called before conditional returns
- Moved useMemo calls before early returns in VideoPlayer component - This ensures hooks are always called in the same order on every render - Fixed violation of Rules of Hooks that caused error in production 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -155,6 +155,16 @@ const VideoPlayer = ({
|
|||||||
// Memoize video source to prevent unnecessary re-renders
|
// 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]);
|
const video = useMemo(getVideoSource, [lesson.id, lesson.video_host, lesson.m3u8_url, lesson.mp4_url, lesson.youtube_url, lesson.video_url, lesson.embed_code]);
|
||||||
|
|
||||||
|
// Determine video type - must be computed before conditional returns
|
||||||
|
const isYouTube = video?.type === 'youtube';
|
||||||
|
const isAdilo = video?.type === 'adilo';
|
||||||
|
const isEmbed = video?.type === 'embed';
|
||||||
|
|
||||||
|
// Memoize URL values BEFORE any conditional returns (Rules of Hooks)
|
||||||
|
const videoUrl = useMemo(() => (isYouTube ? video?.url : undefined), [isYouTube, video?.url]);
|
||||||
|
const m3u8Url = useMemo(() => (isAdilo ? video?.m3u8Url : undefined), [isAdilo, video?.m3u8Url]);
|
||||||
|
const mp4Url = useMemo(() => (isAdilo ? video?.mp4Url : undefined), [isAdilo, video?.mp4Url]);
|
||||||
|
|
||||||
// Show warning if no video available
|
// Show warning if no video available
|
||||||
if (!video) {
|
if (!video) {
|
||||||
return (
|
return (
|
||||||
@@ -168,7 +178,7 @@ const VideoPlayer = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Render based on video type
|
// Render based on video type
|
||||||
if (video.type === 'embed') {
|
if (isEmbed) {
|
||||||
return (
|
return (
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<div className="aspect-video bg-muted rounded-none overflow-hidden border-2 border-border">
|
<div className="aspect-video bg-muted rounded-none overflow-hidden border-2 border-border">
|
||||||
@@ -187,15 +197,6 @@ const VideoPlayer = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Adilo or YouTube with chapters support
|
|
||||||
const isYouTube = video.type === 'youtube';
|
|
||||||
const isAdilo = video.type === 'adilo';
|
|
||||||
|
|
||||||
// Memoize URL values to ensure they're stable across renders
|
|
||||||
const videoUrl = useMemo(() => (isYouTube ? video.url : undefined), [isYouTube, video.url]);
|
|
||||||
const m3u8Url = useMemo(() => (isAdilo ? video.m3u8Url : undefined), [isAdilo, video.m3u8Url]);
|
|
||||||
const mp4Url = useMemo(() => (isAdilo ? video.mp4Url : undefined), [isAdilo, video.mp4Url]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Video Player - Full Width */}
|
{/* Video Player - Full Width */}
|
||||||
|
|||||||
Reference in New Issue
Block a user