diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx index d5b6a42f..8cdffe7b 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx +++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx @@ -135,7 +135,18 @@ const MediaPlayerV2 = forwardRef((props, ref) => { // ========== Computed Values ========== const isYoutube = useMemo(() => { - return src && src.includes('youtu'); + if (!src) return false; + + try { + // URL 파싱 시도 + const url = new URL(src); + return ['youtube.com', 'youtu.be', 'm.youtube.com'].some(domain => + url.hostname.includes(domain) + ); + } catch { + // URL 파싱 실패 시 정규식 검사 + return /https?:\/\/(www\.|m\.)?youtu(\.be|be\.com)/.test(src); + } }, [src]); const isModal = panelInfo?.modal; @@ -214,7 +225,11 @@ const MediaPlayerV2 = forwardRef((props, ref) => { setPaused(el.paused); setLoading(el.loading || false); setError(el.error || null); - setSourceUnavailable((el.loading && sourceUnavailable) || el.error); + + // 함수형 업데이트로 stale closure 방지 + setSourceUnavailable((prevUnavailable) => + (el.loading && prevUnavailable) || el.error + ); // Proportion 계산 updateProportionLoaded(); // 플랫폼별 계산 함수 호출 @@ -233,7 +248,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => { if (ev.type === 'durationchange' && onDurationChange) { onDurationChange(ev); } - }, [onTimeUpdate, onLoadedData, onLoadedMetadata, onDurationChange, sourceUnavailable, updateProportionLoaded]); + }, [onTimeUpdate, onLoadedData, onLoadedMetadata, onDurationChange, updateProportionLoaded]); const handleEnded = useCallback((e) => { if (onEnded) { @@ -249,18 +264,18 @@ const MediaPlayerV2 = forwardRef((props, ref) => { }, [onError]); // ========== Controls Management ========== - const showControls = useCallback(() => { + const showControls = useCallback((timeout = 3000) => { if (disabled || isModal) return; setControlsVisible(true); - // 3초 후 자동 숨김 + // timeout 후 자동 숨김 (기본 3초, Modal 전환 시 10초) if (controlsTimeoutRef.current) { clearTimeout(controlsTimeoutRef.current); } controlsTimeoutRef.current = setTimeout(() => { setControlsVisible(false); - }, 3000); + }, timeout); }, [disabled, isModal]); const hideControls = useCallback(() => { @@ -375,7 +390,8 @@ const MediaPlayerV2 = forwardRef((props, ref) => { if (videoRef.current?.paused) { play(); } - showControls(); + // Fullscreen 전환 시 controls를 10초로 연장 표시 + showControls(10000); } prevModalRef.current = isModal; }, [isModal, play, showControls]);