@ray-js/ipc-player-integration 0.0.18-beta-8 → 0.0.20-beta-1

package/lib/ui/ui.d.ts

@@ -26,6 +26,7 @@ type Props = {
     CSSVariable?: Partial<CSSVariable>;
     brandColor?: string;
     verticalMic?: boolean;
+    playerRoute?: string;
     landscapeMode?: 'fill' | 'standard';
     playerFit: 'contain' | 'cover';
     awakeStatus?: boolean | undefined;

package/lib/ui/ui.js

@@ -58,6 +58,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     playerFit = 'contain',
     awakeStatus = undefined,
     onPlayerTap,
+    playerRoute = 'pages/home/index',
     extend = {}
   } = props;
   const {
@@ -97,6 +98,82 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
   // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
+  const handleOrientationChange = useMemoizedFn(data => {
+    console.log(data, 'data=============');
+    const {
+      orientation
+    } = data;
+    console.log(orientation, 'orientation=-====');
+    if (['portrait', 'landscape-left', 'landscape-right'].includes(orientation)) {
+      var _ty;
+      if (typeof ((_ty = ty) === null || _ty === void 0 ? void 0 : _ty.getDeviceOrientationSync) !== 'function') return;
+      if (getPlayerRoute() !== playerRoute) {
+        // 不是Player首页的话，禁止以下行为
+        return;
+      }
+      console.log('屏幕方向变化调用吗');
+      setPageOrientation({
+        pageOrientation: orientation === 'landscape-left' || orientation === 'landscape-right' ? 'landscape' : 'portrait',
+        reverse: orientation === 'landscape-left',
+        success: () => {
+          console.log('set page orientation success');
+        },
+        fail: err => {
+          console.log('set page orientation fail', err);
+        }
+      });
+    }
+  });
+  useEffect(() => {
+    var _ty2;
+    console.log('getDeviceOrientationSync =======');
+    if (typeof ((_ty2 = ty) === null || _ty2 === void 0 ? void 0 : _ty2.getDeviceOrientationSync) !== 'function') return undefined;
+    try {
+      ty.onOrientationChange(handleOrientationChange);
+      const {
+        orientation
+      } = ty.getDeviceOrientationSync();
+      console.log(orientation, 'initial orientation');
+      if (orientation === 'landscape-left' || orientation === 'landscape-right') {
+        setScreenType('full');
+      }
+      if (orientation === 'unknown' || orientation === undefined) {
+        // 1秒后重试一次
+        const retryGetOrientation = () => {
+          const {
+            orientation
+          } = ty.getDeviceOrientationSync();
+          console.log(orientation, 'retry orientation');
+          if (orientation !== 'unknown' && orientation !== undefined) {
+            // 获取到有效方向，清除定时器并处理
+            if (reGetOrientationTimer.current) {
+              clearTimeout(reGetOrientationTimer.current);
+              reGetOrientationTimer.current = null;
+            }
+            if (orientation === 'landscape-left' || orientation === 'landscape-right') {
+              setScreenType('full');
+            }
+            handleOrientationChange({
+              orientation
+            });
+          } else {
+            // 仍然无效，继续重试
+            reGetOrientationTimer.current = setTimeout(retryGetOrientation, 1000);
+          }
+        };
+        reGetOrientationTimer.current = setTimeout(retryGetOrientation, 1000);
+      }
+      handleOrientationChange(orientation);
+    } catch (e) {
+      console.log('获取屏幕方向失败', e);
+    }
+    return () => {
+      var _ty3;
+      if (typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.offOrientationChange) === 'function') {
+        ty.offOrientationChange(handleOrientationChange);
+      }
+    };
+  }, []);
   const getPlayerRoute = () => {
     const pages = getCurrentPages(); // 获取当前页面栈
     const currentPage = pages[pages.length - 1]; // 获取当前页面实例
@@ -123,72 +200,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     resolution: instance.resolution,
     mute: instance.mute
   });
-  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 {
-            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);
-          //   },
-          // });
-        }
-      }
-    } catch (e) {
-      console.log('获取屏幕方向失败');
-    }
-  };
-  useEffect(() => {
-    // 首次进来强制为竖屏
-    if (createCtx) {
-      getAndSetOrientation();
-    }
-    return () => {
-      if (reGetOrientationTimer.current) {
-        clearTimeout(reGetOrientationTimer.current);
-      }
-    };
-  }, [createCtx]);
-  useEffect(() => {
-    var _ty2;
-    if (typeof ((_ty2 = ty) === null || _ty2 === void 0 ? void 0 : _ty2.onOrientationChange) === 'function') {
-      ty.onOrientationChange(handleOrientationChange);
-    }
-    return () => {
-      var _ty3;
-      if (typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.offOrientationChange) === 'function') {
-        ty.offOrientationChange(handleOrientationChange);
-      }
-    };
-  }, []);
   useEffect(() => {
     if (createCtx) {
       setScaleMultiple(playerFit === 'contain' ? 1 : -2);
@@ -209,65 +220,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 监听播放器实例创建完成
    */
 
-  const handleOrientationChange = useMemoizedFn(data => {
-    console.log(data, 'data=====');
-    console.log(getPlayerRoute(), 'getPlayerRoute()');
-    if (getPlayerRoute() !== 'pages/home/index') {
-      // 不是首页的话，禁止以下行为
-      return;
-    }
-    const {
-      orientation
-    } = data;
-    if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right'].includes(orientation)) {
-      // 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');
-      // } 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,
-        success: () => {
-          console.log('success');
-        },
-        fail: err => {
-          console.log('err', err);
-        }
-      });
-    }
-  });
-
   /**
    * 监听屏幕布局变化
    */
   usePageEvent('onResize', useMemoizedFn(sizeData => {
-    // if (typeof ty?.onOrientationChange === 'function') {
-    //   return;
-    // }
     console.log(getPlayerRoute(), 'getPlayerRoute()');
-    if (getPlayerRoute() !== 'pages/home/index') {
+    if (getPlayerRoute() !== playerRoute) {
       // 不是Player首页的话，禁止以下行为
       return;
     }
@@ -522,6 +480,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.off(hideAllComponent, listenHideEvent);
       eventRef.current.off('disablePlayerTap', handDisablePlayerTap);
       eventRef.current.off('refreshBottomLeft', refreshBottomLeft);
+      if (reGetOrientationTimer.current) {
+        clearTimeout(reGetOrientationTimer.current);
+        reGetOrientationTimer.current = null;
+      }
     };
   }, []);
   playState === PlayState.PLAYING;
@@ -552,7 +514,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     if (scaleMode === -2 && playerFit === 'cover' && screenType === 'vertical' && landscapeMode === 'standard') {
       console.log('dsadsadsad----', zoomLevel);
       setScaleMultiple(zoomLevel);
-      // setVerticalCoverZoom(zoomLevel);
     }
     /**
      * 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
@@ -571,14 +532,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       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;
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.18-beta-8",
+  "version": "0.0.20-beta-1",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -38,7 +38,7 @@
     "@ray-js/ipc-ptz-zoom": "^0.0.2",
     "@ray-js/panel-sdk": "^1.13.1",
     "@ray-js/direction-control": "^0.0.8",
-    "@ray-js/ray-ipc-player": "2.0.26-beta-1",
+    "@ray-js/ray-ipc-player": "2.0.26",
     "@ray-js/ray-ipc-utils": "^1.1.10",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
@@ -48,7 +48,6 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.7.14",
-    "@ray-js/direction-control": "^0.0.7",
     "@ray-js/ray": "^1.7.14",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",