@ray-js/ipc-player-integration 0.0.1-beta-71 → 0.0.1-beta-73

package/lib/ui/ui.js

@@ -83,9 +83,14 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const timer = useRef();
   const [scaleMultiple, setScaleMultiple] = useState(playerFit === 'contain' ? 1 : -2);
   const [currentZoomLevel, setCurrentZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
+  const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
+  // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
+  // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
+
   useEffect(() => {
     setScaleMultiple(playerFit === 'contain' ? 1 : -2);
     setCurrentZoomLevel(playerFit === 'contain' ? 1 : -2);
+    // setVerticalZoomLevel(playerFit === 'contain' ? 1 : -2);
   }, [playerFit]);
   useEffect(() => {
     setBrandColor(brandColor);
@@ -111,21 +116,41 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         deviceType
       } = systemInfo.current;
       //  针对pad 暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
-
       if (deviceType === 'pad') {
         setScreenType('vertical');
       } else {
         setScreenType(type === 'landscape' ? 'full' : 'vertical');
       }
-
       // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
       if (type === 'landscape' && landscapeMode === 'fill') {
+        // instance.IPCPlayerInstance.setObjectFit({
+        //   objectFit: 'fillCrop',
+        // });
+        console.log(scaleMultiple, '===========fill');
         setScaleMultiple(-1);
       } else if (type === 'landscape' && landscapeMode === 'standard') {
+        // instance.IPCPlayerInstance.setObjectFit({
+        //   objectFit: 'contain',
+        // });
+        // setTimeout(() => {
+        //   console.log('dsahdjsahjdhsajhdjh==');
+        //   instance.IPCPlayerInstance.setScaleMultiple({
+        //     scaleMultiple: -2,
+        //   });
+        // }, 3000);
+        console.log(scaleMultiple, '===========landscape');
         setScaleMultiple(-2);
       } else {
         // 竖屏时 将屏幕播放比例设为按宽按高
-        setScaleMultiple(playerFit === 'contain' ? -1 : -2);
+        // console.log(verticalZoomLevel, 'verticalZoomLevel======');
+        // instance.IPCPlayerInstance.setScaleMultiple({
+        //   scaleMultiple: playerFit === 'contain' ? -1 : -2,
+        // });
+        console.log(scaleMultiple, '===========landscape');
+        setScaleMultiple(playerFit === 'contain' ? scaleMultiple === 1 ? -1 : 1 : -2);
+        // instance.IPCPlayerInstance.setObjectFit({
+        //   objectFit: playerFit === 'contain' ? 'fillCrop' : 'contain',
+        // });
       }
     } catch (err) {
       console.log(err, 'err');
@@ -269,6 +294,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     // 合并为三种状态 连接中 暂停 播放中
     const playState = playStateMap[code] || PlayState.CONNECTING;
     if (playState !== PlayState.PLAYING) {
+      console.log('非播放状态=======');
+      console.log(currentZoomLevel, 'currentZoomLevel');
       setScaleMultiple(currentZoomLevel);
     }
     setPlayState(playState);
@@ -333,7 +360,63 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     };
   }, []);
   playState === PlayState.PLAYING;
-  console.log(scaleMultiple, 'scaleMultiple===');
+  /**
+   * 监听当前的zoom比例状态
+   */
+  // useEffect(() => {
+  //   if (screenType === 'vertical') {
+  //     console.log(currentZoomLevel, '竖屏时的缩放比例');
+  //     setVerticalZoomLevel(currentZoomLevel);
+  //     // setScaleMultiple(currentZoomLevel);
+  //   }
+  // }, [screenType, currentZoomLevel]);
+
+  const onZoomChange = useMemoizedFn(data => {
+    const {
+      zoomLevel,
+      scaleMode
+    } = data === null || data === void 0 ? void 0 : data.detail;
+    //  针对返回0的情况，忽略
+    console.log('推送的zoomChange', JSON.stringify(data));
+    if (zoomLevel === 0) {
+      return false;
+    }
+    /**
+     * 针对竖屏为cover模式时，横屏为standard模式时，主动设置缩放比例，避免因值不能正常变化
+     */
+    if (scaleMode === -2 && playerFit === 'cover' && screenType === 'vertical' && landscapeMode === 'standard') {
+      console.log('dsadsadsad----', zoomLevel);
+      setScaleMultiple(zoomLevel);
+      // setVerticalCoverZoom(zoomLevel);
+    }
+    /**
+     * 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
+     */
+    if (scaleMode === -1 && playerFit === 'contain' && screenType === 'vertical' && landscapeMode === 'fill') {
+      setVerticalCoverZoom(zoomLevel);
+    }
+
+    /**
+     * 横屏情况下 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
+     */
+    if (scaleMode === -2 && playerFit === 'cover' && screenType !== 'vertical' && landscapeMode === 'standard') {
+      setScaleMultiple(zoomLevel);
+    }
+    if (scaleMode === -1 && playerFit === 'contain' && screenType !== 'vertical' && landscapeMode === 'fill') {
+      setVerticalCoverZoom(zoomLevel);
+      setScaleMultiple(zoomLevel);
+    }
+
+    // if (screenType === 'vertical' && scaleMode === -1) {
+    //   console.log('dsadsadsad----');
+    //   // setVerticalCoverZoom(zoomLevel);
+    //   setScaleMultiple(zoomLevel);
+    // }
+    console.log(data === null || data === void 0 ? void 0 : data.detail, 'data?.detail');
+    console.log(zoomLevel, 'zoomLevel======');
+    setCurrentZoomLevel(zoomLevel);
+    return false;
+  });
   return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
     value: {
       event: eventRef.current,
@@ -357,14 +440,20 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       console.log(`onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`);
     },
     clarity: decodeClarityDic[resolution],
-    onZoomChange: data => {
-      const {
-        zoomLevel
-      } = data === null || data === void 0 ? void 0 : data.detail;
-      console.log(zoomLevel, 'zoomLevel======');
-      setCurrentZoomLevel(zoomLevel);
-    },
+    onZoomChange: onZoomChange
+    // objectFit={
+    //   screenType === 'vertical'
+    //     ? playerFit === 'contain'
+    //       ? 'fillCrop'
+    //       : 'contain'
+    //     : landscapeMode === 'standard'
+    //     ? 'contain'
+    //     : 'fillCrop'
+    // }
+    ,
+    objectFit: "fillCrop",
     scaleMultiple: scaleMultiple
+    // scaleMultiple={-100}
     // 安卓横屏问题
     // ptzControllable={screenType === 'vertical'}
     ,
@@ -429,5 +518,26 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         className: clsx('absolute-item-container')
       })));
     });
-  })()));
+  })(), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: '30px',
+      right: '20px',
+      backgroundColor: 'red'
+    }
+  }, "scaleMultiple: ", scaleMultiple), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: '50px',
+      right: '20px',
+      backgroundColor: 'blue'
+    }
+  }, "\u5C4F\u5E55\u65B9\u5411: ", screenType), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: '100px',
+      right: '20px',
+      backgroundColor: 'blue'
+    }
+  }, "\u5F53\u524D\u6BD4\u4F8B: ", currentZoomLevel)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-71",
+  "version": "0.0.1-beta-73",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -38,7 +38,7 @@
   "dependencies": {
     "@ray-js/ipc-ptz-zoom": "0.0.2-beta-7",
     "@ray-js/panel-sdk": "^1.13.1",
-    "@ray-js/ray-ipc-player": "2.0.20-beta-13",
+    "@ray-js/ray-ipc-player": "2.0.20-beta-17",
     "@ray-js/ray-ipc-utils": "1.1.0-beta-17",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",