diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx index 15392dcc..9ec8371f 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx +++ b/com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx @@ -133,6 +133,14 @@ export default function TReactPlayer({ } handle.forward('onLoadStart', { type, ev }, rest); } + if (type === 'onEnded' && rest?.isYoutube && rest?.type === 'VOD') { + // YouTube 재생 종료 시 iframe이 포커스를 가져가는 문제를 방지 + const iframeEl = + typeof playerRef.current?.getInternalPlayer === 'function' + ? playerRef.current.getInternalPlayer('iframe') + : null; + iframeEl?.blur(); + } handle.forward('onUpdate', { type, ev }, rest); }, [videoRef, playing, config] // ✅ 주요 의존성 추가 diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 42809934..6c7398a8 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -169,6 +169,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }); const videoPlayer = useRef(null); + const focusReturnRef = useRef(null); const modalPrevRef = useRef(panelInfo?.modal); const prevIsTopPanelDetailFromPlayerRef = useRef(false); const [playListInfo, setPlayListInfo] = USE_STATE('playListInfo', ''); @@ -1959,40 +1960,84 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }; }, []); - const onEnded = useCallback((e) => { - if (panelInfoRef.current.shptmBanrTpNm === 'MEDIA') { - dispatch( - updatePanel({ - name: panel_names.DETAIL_PANEL, - panelInfo: { - launchedFromPlayer: true, - isPlayerFinished: true, - }, - }) - ); - Spotlight.pause(); - setTimeout(() => { - Spotlight.resume(); - dispatch(PanelActions.popPanel()); - }, VIDEO_END_ACTION_DELAY); + const focusBackToPanel = useCallback(() => { + // 포커스를 PlayerPanel 쪽으로 강제 이동해 YouTube iframe이 포커스를 가져가는 것을 차단 + if (focusReturnRef.current) { + focusReturnRef.current.focus(); + return true; + } + return false; + }, []); + + const focusBackButtonOrFallback = useCallback(() => { + // 종료 시 Back 아이콘으로 포커스를 이동시키되 실패하면 센티넬로 폴백 + if (Spotlight.focus('player-back-button')) { + return true; + } + return focusBackToPanel(); + }, [focusBackToPanel]); + + const stopExternalPlayer = useCallback(() => { + const playerInstance = videoPlayer.current; + const media = playerInstance?.video; + + if (!media) { return; } - if (panelInfoRef.current.shptmBanrTpNm === 'VOD') { - Spotlight.pause(); - setTimeout(() => { - Spotlight.resume(); - if (panelInfoRef.current.modal) { - videoPlayer.current.play(); - } else { - dispatch(PanelActions.popPanel(panel_names.PLAYER_PANEL)); - } - }, VIDEO_END_ACTION_DELAY); - e?.stopPropagation(); - e?.preventDefault(); - return; + + // ReactPlayer의 YouTube 인스턴스 대응: 종료 직후 리플레이 오버레이가 뜨지 않도록 정지/초기화 시도 + if (typeof media.stopVideo === 'function') { + media.stopVideo(); + } + if (typeof media.seekTo === 'function') { + media.seekTo(0); + } + if (typeof media.pause === 'function') { + media.pause(); } }, []); + const onEnded = useCallback( + (e) => { + if (panelInfoRef.current.shptmBanrTpNm === 'MEDIA') { + dispatch( + updatePanel({ + name: panel_names.DETAIL_PANEL, + panelInfo: { + launchedFromPlayer: true, + isPlayerFinished: true, + }, + }) + ); + Spotlight.pause(); + setTimeout(() => { + Spotlight.resume(); + dispatch(PanelActions.popPanel()); + }, VIDEO_END_ACTION_DELAY); + return; + } + if (panelInfoRef.current.shptmBanrTpNm === 'VOD') { + Spotlight.pause(); + setTimeout(() => { + stopExternalPlayer(); + if (panelInfoRef.current.modal) { + // 모달 모드에서는 종료 후 화면을 유지하고 Back 아이콘으로 포커스 이동 + videoPlayer.current?.showControls?.(); + } else { + // 전체화면 모드에서도 종료 후 즉시 닫지 않고 제어권 회수 + videoPlayer.current?.showControls?.(); + } + Spotlight.resume(); + focusBackButtonOrFallback(); + }, VIDEO_END_ACTION_DELAY); + e?.stopPropagation(); + e?.preventDefault(); + return; + } + }, + [dispatch, focusBackButtonOrFallback, stopExternalPlayer] + ); + const onKeyDown = (ev) => { if (ev.keyCode === 34) { handleIndicatorDownClick(); @@ -2512,6 +2557,12 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // } // }} > +
{isReadyToPlay && (