diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js index c460525b..f29d1b28 100644 --- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js +++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js @@ -776,6 +776,7 @@ const VideoPlayerBase = class extends React.Component { this.sliderKnobProportion = 0; this.mediaControlsSpotlightId = props.spotlightId + '_mediaControls'; this.jumpButtonPressed = null; + this.focusTimer = null; // Re-render-necessary State this.state = { @@ -1038,6 +1039,7 @@ const VideoPlayerBase = class extends React.Component { this.stopDelayedTitleHide(); this.stopDelayedFeedbackHide(); this.stopDelayedMiniFeedbackHide(); + if (this.focusTimer) clearTimeout(this.focusTimer); this.announceJob.stop(); this.renderBottomControl.stop(); this.slider5WayPressJob.stop(); @@ -2603,11 +2605,11 @@ const VideoPlayerBase = class extends React.Component { this.showControls(); if (this.state.lastFocusedTarget) { - setTimeout(() => { + this.focusTimer = setTimeout(() => { Spotlight.focus(this.state.lastFocusedTarget); }); } else { - setTimeout(() => { + this.focusTimer = setTimeout(() => { Spotlight.focus(SpotlightIds.PLAYER_TAB_BUTTON); }); } diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx index 58430c82..f12e9602 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx +++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx @@ -282,6 +282,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const watchIntervalLive = useRef(null); const watchIntervalVod = useRef(null); const watchIntervalMedia = useRef(null); + const timeoutRef = useRef(null); // useEffect(() => { // console.log("###videoLoaded", videoLoaded); // if (nowMenu) { @@ -619,7 +620,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (lastFocusedTargetId) { // ShopNowContents가 렌더링될 때까지 대기 후 포커스 복원 - setTimeout(() => { + timeoutRef.current = setTimeout(() => { dlog('[PlayerPanel] 🔍 800ms 후 포커스 복원 시도:', lastFocusedTargetId); Spotlight.focus(lastFocusedTargetId); }, 800); @@ -1147,7 +1148,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props //딮링크로 플레이어 진입 후 이전버튼 클릭시 if (panels.length === 1) { - setTimeout(() => { + timeoutRef.current = setTimeout(() => { Spotlight.focus(SpotlightIds.HOME_TBODY); }); } @@ -1685,7 +1686,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props useEffect(() => { if (currentLiveTimeSeconds > liveTotalTime) { - setTimeout(() => { + timeoutRef.current = setTimeout(() => { dispatch(getMainLiveShow()); setShopNowInfo(''); dispatch( @@ -1694,8 +1695,21 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }) ); }, 3000); + + return () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + }; } - }, [currentLiveTimeSeconds, liveTotalTime]); + }, [currentLiveTimeSeconds, liveTotalTime, dispatch, playListInfo, selectedIndex]); + + useEffect(() => { + return () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + if (watchIntervalLive.current) clearInterval(watchIntervalLive.current); + if (watchIntervalVod.current) clearInterval(watchIntervalVod.current); + if (watchIntervalMedia.current) clearInterval(watchIntervalMedia.current); + }; + }, []); const mediainfoHandler = useCallback( (ev) => { @@ -1994,7 +2008,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props const handlePopupClose = useCallback(() => { dispatch(setHidePopup()); - setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON)); + timeoutRef.current = setTimeout(() => Spotlight.focus(SpotlightIds.PLAYER_SUBTITLE_BUTTON)); }, [dispatch]); const reactPlayerSubtitleConfig = useMemo(() => { if (isSubtitleActive && currentSubtitleBlob) { @@ -2324,7 +2338,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }) ); Spotlight.pause(); - setTimeout(() => { + timeoutRef.current = setTimeout(() => { Spotlight.resume(); dispatch(PanelActions.popPanel()); }, VIDEO_END_ACTION_DELAY); @@ -2332,7 +2346,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props } if (panelInfoRef.current.shptmBanrTpNm === 'VOD') { Spotlight.pause(); - setTimeout(() => { + timeoutRef.current = setTimeout(() => { stopExternalPlayer(); if (panelInfoRef.current.modal) { // 모달 모드에서는 종료 후 화면을 유지하고 Back 아이콘으로 포커스 이동 @@ -2582,7 +2596,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props if (lastFocusedTargetId) { // ShopNowContents가 렌더링될 때까지 잠시 대기 후 포커스 복원 - setTimeout(() => { + timeoutRef.current = setTimeout(() => { dlog('[PlayerPanel] 🔍 500ms 후 포커스 복원 시도:', lastFocusedTargetId); Spotlight.focus(lastFocusedTargetId); }, 500); @@ -2591,6 +2605,10 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props // 한 번 처리한 복귀 플래그는 즉시 해제해 중복 영향을 막는다. prevIsTopPanelDetailFromPlayerRef.current = false; } + + return () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + }; } }, [ isOnTop,