[251113] feat: MediaPanel ref Video Control

🕐 커밋 시간: 2025. 11. 13. 20:51:15

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +41줄
  • 삭제: -3줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx (javascript):
    ❌ Deleted: MediaPanel()

com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
 
 import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
@@ -56,7 +63,8 @@ const YOUTUBECONFIG = {
   },
 };
 
-const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }) => {
+const MediaPanel = React.forwardRef(
+  ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props }, ref) => {
     const dispatch = useDispatch();
 
     const videoPlayer = useRef(null);
@@ -124,6 +132,46 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
       return null;
     }, []);
 
+    const playViaRef = useCallback(() => safePlayerCall('play'), [safePlayerCall]);
+    const pauseViaRef = useCallback(() => safePlayerCall('pause'), [safePlayerCall]);
+    const seekViaRef = useCallback(
+      (seconds = 0) => safePlayerCall('seek', seconds),
+      [safePlayerCall]
+    );
+    const showControlsViaRef = useCallback(() => safePlayerCall('showControls'), [safePlayerCall]);
+    const hideControlsViaRef = useCallback(() => safePlayerCall('hideControls'), [safePlayerCall]);
+    const toggleControlsViaRef = useCallback(
+      () => safePlayerCall('toggleControls'),
+      [safePlayerCall]
+    );
+    const getMediaStateViaRef = useCallback(
+      () => safePlayerCall('getMediaState'),
+      [safePlayerCall]
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: playViaRef,
+        pause: pauseViaRef,
+        seek: seekViaRef,
+        showControls: showControlsViaRef,
+        hideControls: hideControlsViaRef,
+        toggleControls: toggleControlsViaRef,
+        getMediaState: getMediaStateViaRef,
+        getInternalPlayer: () => videoPlayer.current,
+      }),
+      [
+        playViaRef,
+        pauseViaRef,
+        seekViaRef,
+        showControlsViaRef,
+        hideControlsViaRef,
+        toggleControlsViaRef,
+        getMediaStateViaRef,
+      ]
+    );
+
     // VideoPlayer가 MEDIA 타입에서 setIsVODPaused를 호출하므로 더미 함수 제공
     const setIsVODPaused = useCallback(() => {
       // MediaPanel에서는 VOD pause 상태 관리 불필요 (단순 재생만)
@@ -516,7 +564,9 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
                 reactPlayerConfig={reactPlayerSubtitleConfig}
                 thumbnailUrl={videoLoaded ? '' : videoThumbnailUrl}
                 videoComponent={
-                (typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
+                  (typeof window === 'object' && !window.PalmSystem) || isYoutube
+                    ? TReactPlayer
+                    : Media
                 }
                 // VideoOverlay props - 간소화
                 type="MEDIA"
@@ -548,6 +598,7 @@ const MediaPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
         </Container>
       </TPanel>
     );
-};
+  }
+);
 
 export default React.memo(MediaPanel);