@ray-js/ipc-player-integration 0.0.1-beta-64 → 0.0.1-beta-66

package/lib/ui/ui.d.ts

@@ -25,7 +25,7 @@ type Props = {
     brandColor?: string;
     verticalMic?: boolean;
     landscapeMode?: 'fill' | 'standard';
-    playerMode: 'portrait' | 'landscape';
+    playerFit: 'contain' | 'cover';
     eventRef?: React.RefObject<EventInstance>;
     onPlayerTap?: (data: any) => void;
     extend?: Record<string, any>;

package/lib/ui/ui.js

@@ -52,7 +52,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     verticalMic = true,
     eventRef: eventRefProp,
     landscapeMode = 'standard',
-    playerMode = 'portrait',
+    playerFit = 'contain',
     onPlayerTap,
     extend = {}
   } = props;
@@ -67,7 +67,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setVerticalMic
   } = instance;
   const prevTriggerEvent = useRef();
-
+  const landscapeModeRef = useRef(landscapeMode);
+  const playerFitRef = useRef(playerFit);
   /*
     player 的UI效果期望有一些控件在初始化的时候都展示，在点击 Player 之后隐藏：
     在控件显示时，点击播放器期望隐藏控件
@@ -82,18 +83,22 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }
   useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
-  const [scaleMultiple, setScaleMultiple] = useState(playerMode === 'portrait' ? 1 : -2);
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(playerMode === 'portrait' ? 1 : -2);
+  const [scaleMultiple, setScaleMultiple] = useState(playerFit === 'contain' ? 1 : -2);
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
   // 监听playerMode的变化，更新scaleMultiple
   useEffect(() => {
-    setScaleMultiple(playerMode === 'portrait' ? 1 : -2);
-    setCurrentZoomLevel(playerMode === 'portrait' ? 1 : -2);
-  }, [playerMode]);
+    setScaleMultiple(playerFit === 'contain' ? 1 : -2);
+    setCurrentZoomLevel(playerFit === 'contain' ? 1 : -2);
+  }, [playerFit]);
   useEffect(() => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, []);
+  useEffect(() => {
+    landscapeModeRef.current = landscapeMode;
+    playerFitRef.current = playerFit;
+  }, [landscapeMode, playerFit]);
   const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
@@ -122,12 +127,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
 
       // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
-      if (type === 'landscape' && landscapeMode === 'fill') {
-        console.log('横屏时充满');
+      if (type === 'landscape' && landscapeModeRef.current === 'fill') {
+        console.log(landscapeModeRef, 'landscapeModeRef');
         setScaleMultiple(-1);
       } else {
         // 将屏幕播放比例设为1
-        setScaleMultiple(playerMode === 'portrait' ? 1 : -2);
+        setScaleMultiple(playerFitRef.current === 'contain' ? 1 : -2);
       }
     } catch (err) {
       console.log(err, 'err');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-64",
+  "version": "0.0.1-beta-66",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [