@ray-js/ipc-player-integration 0.0.18-beta-4 → 0.0.18-beta-6

package/lib/ui/ui.js

@@ -88,6 +88,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }
   useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
+  const reGetOrientationTimer = useRef(null);
   const [scaleMultiple, setScaleMultiple] = useState(playerFit === 'contain' ? 1 : -2);
   const [currentZoomLevel, setCurrentZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
   const [createCtx, setCreateCtx] = useState(false);
@@ -116,44 +117,59 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     resolution: instance.resolution,
     mute: instance.mute
   });
-  useEffect(() => {
-    // 首次进来强制为竖屏
-    if (createCtx) {
-      // 获取屏幕方向比例
-      try {
-        var _ty;
-        if (typeof ((_ty = ty) === null || _ty === void 0 ? void 0 : _ty.getOrientationSync) === 'function') {
+  const getAndSetOrientation = () => {
+    try {
+      var _ty;
+      if (typeof ((_ty = ty) === null || _ty === void 0 ? void 0 : _ty.getOrientationSync) === 'function') {
+        const {
+          orientation
+        } = ty.getOrientationSync();
+        console.log(`同步获取屏幕方向: ${orientation}`);
+        ipcTTTOperatorLog(`同步获取屏幕方向: ${orientation}`);
+        if (orientation === 'unknown') {
+          // 1秒后重试一次
+          reGetOrientationTimer.current = setTimeout(getAndSetOrientation, 500);
+          return;
+        }
+        if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right', 'landscape'].includes(orientation)) {
           const {
-            orientation
-          } = ty.getOrientationSync();
-          console.log(`同步获取屏幕方向: ${orientation}`);
-          ipcTTTOperatorLog(`同步获取屏幕方向: ${orientation}`);
-          if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right', 'landscape'].includes(orientation)) {
-            const {
-              deviceType
-            } = systemInfo.current;
-            if (deviceType === 'pad') {
-              setScreenType('vertical');
-              return;
-            }
-            const pageOrientation = orientation === 'landscape-left' || orientation === 'landscape-right' || orientation === 'landscape' ? 'landscape' : 'portrait';
+            deviceType
+          } = systemInfo.current;
+          if (deviceType === 'pad') {
+            setScreenType('vertical');
+            return;
+          }
+          const pageOrientation = orientation === 'landscape-left' || orientation === 'landscape-right' || orientation === 'landscape' ? 'landscape' : 'portrait';
+          if (pageOrientation === 'landscape') {
+            // 如果为横屏的情况下，直接设置为全屏
             setScreenType(pageOrientation === 'landscape' ? 'full' : 'vertical');
-            // 强制更改页面转向
-            setPageOrientation({
-              pageOrientation,
-              success: () => {
-                console.log('success');
-              },
-              fail: err => {
-                console.log('err', err);
-              }
-            });
           }
+
+          // setPageOrientation({
+          //   pageOrientation,
+          //   success: () => {
+          //     console.log('success');
+          //   },
+          //   fail: err => {
+          //     console.log('err', err);
+          //   },
+          // });
         }
-      } catch (e) {
-        console.log('获取屏幕方向失败');
       }
+    } catch (e) {
+      console.log('获取屏幕方向失败');
     }
+  };
+  useEffect(() => {
+    // 首次进来强制为竖屏
+    if (createCtx) {
+      getAndSetOrientation();
+    }
+    return () => {
+      if (reGetOrientationTimer.current) {
+        clearTimeout(reGetOrientationTimer.current);
+      }
+    };
   }, [createCtx]);
   useEffect(() => {
     var _ty2;
@@ -187,23 +203,36 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 监听播放器实例创建完成
    */
 
-  const handleOrientationChange = data => {
+  const handleOrientationChange = useMemoizedFn(data => {
+    console.log(data, 'data=====');
     const {
       orientation
     } = data;
     if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right'].includes(orientation)) {
-      // setScreenType(
-      //   orientation === 'landscape-left' || orientation === 'landscape-right' ? 'full' : 'vertical'
-      // );
+      setScreenType(orientation === 'landscape-left' || orientation === 'landscape-right' ? 'full' : 'vertical');
       const pageOrientation = orientation === 'landscape-left' || orientation === 'landscape-right' ? 'landscape' : 'portrait';
-      const {
-        deviceType
-      } = systemInfo.current;
-      //  针对pad 暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
-      if (deviceType === 'pad') {
-        setScreenType('vertical');
-        return;
-      }
+
+      // const { deviceType } = systemInfo.current;
+      // //  针对pad 暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
+      // if (deviceType === 'pad') {
+      //   setScreenType('vertical');
+      // } else {
+      //   setScreenType(pageOrientation === 'landscape' ? 'full' : 'vertical');
+      //   triggerEvent(showAllComponent);
+      // }
+      // // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
+      // if (pageOrientation === 'landscape' && landscapeMode === 'fill') {
+      //   console.log(scaleMultiple, '===========fill');
+      //   setScaleMultiple(-1);
+      // } else if (pageOrientation === 'landscape' && landscapeMode === 'standard') {
+      //   console.log(scaleMultiple, '===========landscape');
+      //   setScaleMultiple(-2);
+      // } else {
+      //   // 竖屏时 将屏幕播放比例设为按宽按高
+
+      //   console.log(scaleMultiple, '===========landscape');
+      //   setScaleMultiple(playerFit === 'contain' ? (scaleMultiple === 1 ? -1 : 1) : -2);
+      // }
       // 强制更改页面转向
       setPageOrientation({
         pageOrientation,
@@ -215,12 +244,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         }
       });
     }
-  };
+  });
 
   /**
    * 监听屏幕布局变化
    */
   usePageEvent('onResize', useMemoizedFn(sizeData => {
+    // if (typeof ty?.onOrientationChange === 'function') {
+    //   return;
+    // }
     try {
       const {
         type
@@ -238,34 +270,16 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
       // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-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 {
         // 竖屏时 将屏幕播放比例设为按宽按高
-        // 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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.18-beta-4",
+  "version": "0.0.18-beta-6",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [