[251122] fix: Youtube 비디오 반복재생

🕐 커밋 시간: 2025. 11. 22. 05:24:47

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +60줄
  • 삭제: -4줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/TReactPlayer.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선

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
         //   }
         // }}
       >
+        <div
+          ref={focusReturnRef}
+          tabIndex={-1}
+          aria-hidden="true"
+          style={{ width: 1, height: 1, opacity: 0, position: 'absolute' }}
+        />
         {isReadyToPlay && (
           <VideoPlayer
             key={currentPlayingUrl}