@ray-js/ipc-player-integration 0.0.18-beta-5 → 0.0.18-beta-7

package/lib/ui/ui.js

@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
 import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
-import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation } from '@ray-js/ray';
+import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation, getCurrentPages } from '@ray-js/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
 import { ipcTTTOperatorLog } from '@ray-js/ray-ipc-utils';
@@ -74,6 +74,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   } = instance;
   const prevTriggerEvent = useRef();
   const hasPlayedRef = useRef(false);
+
   /*
     player 的UI效果期望有一些控件在初始化的时候都展示，在点击 Player 之后隐藏：
     在控件显示时，点击播放器期望隐藏控件
@@ -88,6 +89,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);
@@ -95,6 +97,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
   // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
+  const getPlayerRoute = () => {
+    const pages = getCurrentPages(); // 获取当前页面栈
+    const currentPage = pages[pages.length - 1]; // 获取当前页面实例
+    return currentPage.route;
+  };
   const {
     topLeftContent,
     topRightContent,
@@ -116,44 +123,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;
@@ -189,35 +211,39 @@ 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);
-      }
+      // 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,
@@ -235,8 +261,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 监听屏幕布局变化
    */
   usePageEvent('onResize', useMemoizedFn(sizeData => {
-    var _ty4;
-    if (typeof ((_ty4 = ty) === null || _ty4 === void 0 ? void 0 : _ty4.onOrientationChange) === 'function') {
+    // if (typeof ty?.onOrientationChange === 'function') {
+    //   return;
+    // }
+    console.log(getPlayerRoute(), 'getPlayerRoute()');
+    if (getPlayerRoute() !== 'pages/home/index') {
+      // 不是Player首页的话，禁止以下行为
       return;
     }
     try {

package/package.json

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