@ray-js/ipc-player-integration 0.0.29-beta.2 → 0.0.29-beta.21

package/lib/ui/ui.js

@@ -9,7 +9,7 @@ import IPCPlayer from '@ray-js/ray-ipc-player';
 import { ipcTTTOperatorLog } from '@ray-js/ray-ipc-utils';
 import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interface';
 import { useCtx } from '../ctx/ctx.composition';
-import { useStore } from '../ctx/store';
+import { useStore, updateAtom } from '../ctx/store';
 import { UIEventContext } from './context';
 import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId } from './constant';
 import BottomLeftContent from './bottomLeftContent';
@@ -20,6 +20,7 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
+import { isSmallScreen } from '../utils';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -61,6 +62,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     awakeStatus = undefined,
     onPlayerTap,
     playerRoute = 'pages/home/index',
+    defaultAutoPlay = true,
+    limitFlow = false,
     extend = {}
   } = props;
   const {
@@ -109,11 +112,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setIgnoreStopOnHide(ignoreHideStopPreview);
   }, [ignoreHideStopPreview]);
   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;
@@ -121,29 +122,36 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         // 不是Player首页的话，禁止以下行为
         return;
       }
-      console.log('屏幕方向变化调用吗');
+      console.log('屏幕方向变化调用');
       setPageOrientation({
         pageOrientation: orientation === 'landscape-left' || orientation === 'landscape-right' ? 'landscape' : 'portrait',
         reverse: orientation === 'landscape-left',
         success: () => {
-          console.log('set page orientation success');
+          console.log('setPageOrientation success');
         },
         fail: err => {
-          console.log('set page orientation fail', err);
+          console.log('setPageOrientation fail', err);
         }
       });
     }
   });
   useEffect(() => {
     var _ty2;
-    console.log('getDeviceOrientationSync =======');
     if (typeof ((_ty2 = ty) === null || _ty2 === void 0 ? void 0 : _ty2.getDeviceOrientationSync) !== 'function') return undefined;
     try {
+      const {
+        deviceType
+      } = getSystemInfoSync();
+      //  针对pad 暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
+      if (deviceType === 'pad') {
+        setScreenType('vertical');
+        return undefined;
+      }
       ty.onOrientationChange(handleOrientationChange);
       const {
         orientation
       } = ty.getDeviceOrientationSync();
-      console.log(orientation, 'initial orientation');
+      console.log('initial orientation', orientation);
       if (orientation === 'landscape-left' || orientation === 'landscape-right') {
         setScreenType('full');
       }
@@ -202,7 +210,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     screenMode,
     layoutStyle,
     ptzStatus,
-    selectedLenInfo
+    selectedLenInfo,
+    isVerticalFullLayout
   } = useStore({
     topLeftContent: instance.topLeftContent,
     topRightContent: instance.topRightContent,
@@ -216,7 +225,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     screenMode: instance.multiCameraCtx.screenMode,
     layoutStyle: instance.multiCameraCtx.layoutStyle,
     ptzStatus: instance.multiCameraCtx.ptzStatus,
-    selectedLenInfo: instance.multiCameraCtx.selectedLenInfo
+    selectedLenInfo: instance.multiCameraCtx.selectedLenInfo,
+    isVerticalFullLayout: instance.isVerticalFullLayout
   });
 
   /* ---------------------------------多目相关副作用统一处理开始----------------------------------------- */
@@ -231,10 +241,16 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     batchedUpdates(() => {
       switch (screenMode) {
         case MultiCameraScreenMode.full:
+          // 同步竖屏全屏布局状态
+          updateAtom(instance.isVerticalFullLayout, true);
+
           // widgets 常驻显示
-          eventRef.current.emit(showAllComponent);
-          eventRef.current.emit('disablePlayerTap', true);
-          eventRef.current.emit(pauseTimeToHideAllComponent);
+          // eventRef.current.emit(showAllComponent);
+          // eventRef.current.emit('disablePlayerTap', true);
+          // eventRef.current.emit(pauseTimeToHideAllComponent);
+
+          // 隐藏landscapeTip
+          hideContent('absolute', landscapeTipId);
 
           // 展示右侧插件
           showContent('absolute', tileActionsId);
@@ -257,9 +273,18 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
           });
           break;
         case MultiCameraScreenMode.short:
+          // 同步竖屏全屏布局状态
+          updateAtom(instance.isVerticalFullLayout, false);
+
           // 恢复 widgets 展示逻辑
-          eventRef.current.emit('disablePlayerTap', false);
-          showComponents();
+          // eventRef.current.emit('disablePlayerTap', false);
+          // showComponents();
+
+          // 隐藏tileTip
+          hideContent('absolute', tileTipId);
+
+          // 隐藏landscapeTip
+          hideContent('absolute', landscapeTipId);
 
           // 隐藏右侧插件
           hideContent('absolute', tileActionsId);
@@ -274,9 +299,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
           hideContent('bottomLeft', 'SmallIntercom');
           break;
         case MultiCameraScreenMode.landscape:
+          // 同步竖屏全屏布局状态
+          updateAtom(instance.isVerticalFullLayout, false);
+
           // 恢复 widgets 展示逻辑
-          eventRef.current.emit('disablePlayerTap', false);
-          showComponents();
+          // eventRef.current.emit('disablePlayerTap', false);
+          // showComponents();
+
+          // 隐藏tileTip
+          hideContent('absolute', tileTipId);
           if (multiCameraCtx.protocol.total_split_num === 2 && !storage.getSync(landscapeTipId)) {
             showContent('absolute', landscapeTipId);
           }
@@ -292,8 +323,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
 
           // 展示小对讲
           showContent('bottomLeft', 'SmallIntercom');
+
+          // 横屏 ptz 靠右展示
           updatePlayerWidgetProps(instance, 'absolute', moveablePtzControlId, {
-            positionLeft: 60
+            positionLeft: getSystemInfoSync().screenWidth - 100 - 250
           });
           break;
         default:
@@ -327,6 +360,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [instance, ptzStatus]);
   useEffect(() => {
     if (!instance.multiCameraCtx.isSupport) return;
+    if (!ptzStatus || screenMode !== MultiCameraScreenMode.full) {
+      instance.hideContent('absolute', ptzMoveableTipId);
+    }
 
     // ptz 激活状态下，需要根据组件隐藏状态来决定是否展示 moveablePtzControl
     if (ptzStatus) {
@@ -338,14 +374,38 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
 
       // ptz 提示
       const storage = new Storage(devId);
-      if (!storage.getSync(ptzMoveableTipId) && selectedLenInfo.supportPTZ) {
+      if (!storage.getSync(ptzMoveableTipId) && selectedLenInfo.supportPTZ && screenMode === MultiCameraScreenMode.full) {
         instance.showContent('absolute', ptzMoveableTipId);
       }
     }
-  }, [instance, ptzStatus, selectedLenInfo, componentHideState]);
+  }, [instance, ptzStatus, selectedLenInfo, componentHideState, screenMode]);
+
+  // 适配横屏进入面板的情况
+  useEffect(() => {
+    if (!instance.multiCameraCtx.isSupport) return;
+    if (hasInitializedLandscapeMultiRef.current) return;
+    if (screenType !== 'full') return;
+    hasInitializedLandscapeMultiRef.current = true;
+    instance.multiCameraCtx.setScreenMode(MultiCameraScreenMode.landscape);
+  }, [screenType, instance, layoutStyle]);
 
   /* ---------------------------------多目相关副作用统一处理结束----------------------------------------- */
 
+  // 竖屏全屏副作用处理
+  useEffect(() => {
+    if (isVerticalFullLayout && screenType === 'vertical') {
+      // 竖屏全屏时，控件常驻显示
+      eventRef.current.emit(showAllComponent);
+      eventRef.current.emit('disablePlayerTap', true);
+      eventRef.current.emit(pauseTimeToHideAllComponent);
+      // 按宽填充，保证播放流宽度为屏幕宽度，高度自适应
+      setScaleMultiple(-1);
+    } else {
+      // 短屏或横屏时，恢复自动隐藏
+      eventRef.current.emit('disablePlayerTap', false);
+      showComponents();
+    }
+  }, [isVerticalFullLayout, screenType, playerFit, instance]);
   useEffect(() => {
     if (createCtx) {
       setScaleMultiple(playerFit === 'contain' ? 1 : -2);
@@ -379,15 +439,15 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       const {
         type
       } = sizeData;
-      console.log('监听到屏幕布局变化', type);
-      const {
-        deviceType
-      } = systemInfo.current;
-      //  针对pad 暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
-      if (deviceType === 'pad') {
+      //  针对pad 和折叠屏展开的情况暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
+      if (isSmallScreen) {
         setScreenType('vertical');
       } else {
         setScreenType(type === 'landscape' ? 'full' : 'vertical');
+        // 横屏时重置竖屏全屏状态
+        if (type === 'landscape') {
+          updateAtom(instance.isVerticalFullLayout, false);
+        }
         triggerEvent(showAllComponent);
       }
       // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
@@ -434,11 +494,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
     });
   });
-  const systemInfo = useRef(null);
-  if (!systemInfo.current) {
-    systemInfo.current = getSystemInfoSync();
-  }
-
   // 监听物理返回按键
   const hackHandle = () => {
     setPageOrientation({
@@ -575,6 +630,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     instance.changeStreamStatus(code);
   });
   const disablePlayerTap = useRef(false);
+  const hasInitializedLandscapeMultiRef = useRef(false);
+  const multiTapTimerRef = useRef(null);
+  const prevSelectedIndexRef = useRef(selectedLenInfo.index);
   const handDisablePlayerTap = value => {
     disablePlayerTap.current = !!value;
   };
@@ -644,6 +702,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.off('disablePlayerTap', handDisablePlayerTap);
       eventRef.current.off('refreshBottomLeft', refreshBottomLeft);
       eventRef.current.off(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
+      if (multiTapTimerRef.current) {
+        clearTimeout(multiTapTimerRef.current);
+        multiTapTimerRef.current = null;
+      }
       if (reGetOrientationTimer.current) {
         clearTimeout(reGetOrientationTimer.current);
         reGetOrientationTimer.current = null;
@@ -700,19 +762,20 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     return false;
   });
   const playerContainerHeight = screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh';
+  const isVerticalFullMode = isVerticalFullLayout && screenType === 'vertical';
   return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
     value: {
       event: eventRef.current,
       componentHideState
     }
   }, /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-content', className),
+    className: clsx('ipc-player-content', isSmallScreen && 'ipc-player-content-small-screen', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
       height: playerContainerHeight
     })
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      height: screenMode === MultiCameraScreenMode.full ? `calc(${playerContainerHeight} - 48px)` : playerContainerHeight
+      height: isVerticalFullMode ? `calc(${playerContainerHeight} - 48px)` : playerContainerHeight
     }
   }, /*#__PURE__*/React.createElement(IPCPlayer, {
     defaultMute: mute,
@@ -762,8 +825,33 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.emit(playerTap);
       console.log(prevTriggerEvent.current, 'prevTriggerEvent.current');
       if (instance.multiCameraCtx.isSupport) {
-        // 处理多目选中窗口手势冲突
-        showComponents();
+        var _instance$multiCamera, _instance$multiCamera2;
+        const preTapIndex = (_instance$multiCamera = (_instance$multiCamera2 = instance.multiCameraCtx.selectedLenInfoRef.current) === null || _instance$multiCamera2 === void 0 ? void 0 : _instance$multiCamera2.index) !== null && _instance$multiCamera !== void 0 ? _instance$multiCamera : prevSelectedIndexRef.current;
+        instance.multiCameraCtx.selectVideoFiredRef.current = false;
+        if (multiTapTimerRef.current) {
+          clearTimeout(multiTapTimerRef.current);
+        }
+        multiTapTimerRef.current = setTimeout(() => {
+          var _instance$multiCamera3, _instance$multiCamera4;
+          const selectFired = !!instance.multiCameraCtx.selectVideoFiredRef.current;
+          const currentIndex = (_instance$multiCamera3 = (_instance$multiCamera4 = instance.multiCameraCtx.selectedLenInfoRef.current) === null || _instance$multiCamera4 === void 0 ? void 0 : _instance$multiCamera4.index) !== null && _instance$multiCamera3 !== void 0 ? _instance$multiCamera3 : preTapIndex;
+          if (selectFired && currentIndex === preTapIndex) {
+            if (componentHideState) {
+              showComponents();
+            } else {
+              if (timer.current) {
+                clearTimeout(timer.current);
+                timer.current = null;
+              }
+              setComponentHideState(true);
+            }
+          } else {
+            // 点击不同镜头或非镜头区域时，保持现有行为
+            showComponents();
+          }
+          prevSelectedIndexRef.current = currentIndex;
+          multiTapTimerRef.current = null;
+        }, 50);
       } else if (prevTriggerEvent.current === hideAllComponent) {
         triggerEvent(showAllComponent);
       } else {
@@ -775,7 +863,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ,
     brandColor: brandColor,
     playerRoute: playerRoute,
-    extend: _objectSpread(_objectSpread({}, instance.multiCameraCtx.extendProps), extend)
+    defaultAutoPlay: defaultAutoPlay,
+    limitFlow: limitFlow,
+    extend: _objectSpread(_objectSpread({
+      backgroundColor: '#262626'
+    }, instance.multiCameraCtx.extendProps), extend)
   })), showTopContent && /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-top-content', {
       'ipc-player-top-content-hide': componentHideState,
@@ -792,12 +884,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     className: clsx('ipc-player-bottom-content', {
       'ipc-player-bottom-content-hide': componentHideState,
       'ipc-player-bottom-content-show': !componentHideState,
-      'ipc-player-bottom-content-full': screenMode === MultiCameraScreenMode.full
+      'ipc-player-bottom-content-full': isVerticalFullMode
     }),
     style: {
       height: screenType === 'vertical' ? '48px' : '72px'
     }
-  }, playerReady && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance

package/lib/ui/ui.less

@@ -12,6 +12,7 @@
     height: 60px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
   }
+
   // 底部长条
   .ipc-player-bottom-content {
     position: absolute;
@@ -24,6 +25,21 @@
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
   }
 
+  .ipc-player-bottom-content-full {
+    :root[theme='dark'] & {
+      background: #000;
+    }
+
+    :root[theme='light'] & {
+      background: #fff;
+      --iconColor: #000;
+
+      .ipc-player-plugin-resolution {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+
   // 顶部整条内容隐藏
   .ipc-player-top-content-show {
     transform: translate(0, 0);
@@ -53,6 +69,7 @@
     top: 0;
     z-index: 100;
   }
+
   // 右上角容器样式
   .ipc-player-top-right-content-wrap {
     position: absolute;
@@ -60,6 +77,7 @@
     top: 0;
     z-index: 100;
   }
+
   // 左下角容器样式
   .ipc-player-bottom-left-content-wrap {
     position: absolute;
@@ -69,6 +87,7 @@
     display: flex;
     flex-direction: row;
   }
+
   // 右下角容器样式
   .ipc-player-bottom-right-content-wrap {
     position: absolute;
@@ -159,12 +178,15 @@
   .top-left-item-container {
     padding: 0 8px;
   }
+
   .top-left-item-container:first-of-type {
     padding: 0 8px 0 16px;
   }
+
   .top-left-item-container:last-of-type {
     padding: 0 0 0 8px;
   }
+
   .top-left-item-container:only-of-type {
     padding: 0 0 0 16px;
   }
@@ -173,12 +195,15 @@
   .top-right-item-container {
     padding: 0 8px;
   }
+
   .top-right-item-container:first-of-type {
     padding: 0 8px 0 0;
   }
+
   .top-right-item-container:last-of-type {
     padding: 0 16px 0 8px;
   }
+
   .top-right-item-container:only-of-type {
     padding: 0 16px 0 0;
   }
@@ -194,9 +219,11 @@
   .bottom-left-item-container:first-of-type {
     padding: 0 12px 0 16px;
   }
+
   .bottom-left-item-container:last-of-type {
     padding: 0 0 0 12px;
   }
+
   .bottom-left-item-container:only-of-type {
     padding: 0 0 0 16px;
   }
@@ -209,9 +236,11 @@
   .bottom-left-item-full-container:first-of-type {
     padding: 0 24px 0 16px !important;
   }
+
   .bottom-left-item-full-container:last-of-type {
     padding: 0 0 0 24px !important;
   }
+
   .bottom-left-item-full-container:only-of-type {
     padding: 0 0 0 16px !important;
   }
@@ -227,9 +256,11 @@
   .bottom-right-item-container:first-of-type {
     padding: 0 12px 0 0;
   }
+
   .bottom-right-item-container:last-of-type {
     padding: 0 16px 0 12px;
   }
+
   .bottom-right-item-container:only-of-type {
     padding: 0 16px 0 0;
   }
@@ -247,6 +278,7 @@
   from {
     transform: translate(calc(100vw), 0);
   }
+
   to {
     transform: translate(0, 0);
   }
@@ -259,13 +291,10 @@
   animation: absolute-move-in-right-animation @animation-time ease-in-out;
   transition: transform @animation-time ease-in, opacity @animation-time ease-in,
     width @animation-time ease-in;
+
   &.ipc-plugin-absolute-move-in-right-hide {
     transform: translate(var(--translate-length), 0);
     opacity: 0;
     width: 0;
   }
 }
-
-.ipc-player-bottom-content-full {
-  background-color: #000 !important;
-}

package/lib/ui/widgetClick.d.ts

@@ -0,0 +1,2 @@
+/** 仅导出事件名，触发时使用 ctx.event / UIEventContext 的 event，即 eventRef.current.emit(widgetClick, payload) */
+export { widgetClick } from './constant';

package/lib/ui/widgetClick.js

@@ -0,0 +1,2 @@
+/** 仅导出事件名，触发时使用 ctx.event / UIEventContext 的 event，即 eventRef.current.emit(widgetClick, payload) */
+export { widgetClick } from './constant';

package/lib/utils/content/dpCode.d.ts

@@ -3,3 +3,8 @@ export declare const TEMP_REPORT_F = "temp_report_f";
 export declare const SENSOR_TEMPERATURE = "sensor_temperature";
 export declare const SENSOR_HUMIDITY = "sensor_humidity";
 export declare const PTZ_CONTROL = "ptz_control";
+export declare const GUN_BALL = "ipc_multi_locate_coor";
+export declare const ZOOM_CONTROL = "zoom_control";
+export declare const MULTI_GUN_BALL = "ipc_multi_locate_coors";
+export declare const MULTI_PTZ_CONTROL = "ipc_multi_ptz_control";
+export declare const MULTI_ZOOM_CONTROL = "ipc_multi_zoom_control";

package/lib/utils/content/dpCode.js

@@ -6,4 +6,14 @@ export const SENSOR_TEMPERATURE = 'sensor_temperature'; //  摄氏度
 
 export const SENSOR_HUMIDITY = 'sensor_humidity'; // 湿度
 
-export const PTZ_CONTROL = 'ptz_control'; // ptz
+export const PTZ_CONTROL = 'ptz_control'; // ptz
+
+export const GUN_BALL = 'ipc_multi_locate_coor'; // 旧枪球联动-定位器
+
+export const ZOOM_CONTROL = 'zoom_control'; // 变焦控制
+
+export const MULTI_GUN_BALL = 'ipc_multi_locate_coors'; // 多目枪球联动-定位器
+
+export const MULTI_PTZ_CONTROL = 'ipc_multi_ptz_control'; // 多目 PTZ 控制
+
+export const MULTI_ZOOM_CONTROL = 'ipc_multi_zoom_control'; // 多目 变焦控制

package/lib/utils/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="jest" />
+export declare const isSmallScreen: boolean;
 /**
  * 麦克风对讲按钮径向渐变
  */
@@ -13,3 +14,4 @@ export declare const promisify: <TParams extends Record<string, any>, TSuccessRe
     fail?: ((error: any) => void) | undefined;
     complete?: (() => void) | undefined;
 }) => void) => (params: Omit<TParams, "complete" | "success" | "fail">) => Promise<TSuccessResult>;
+export * from './videoSplitHelper';

package/lib/utils/index.js

@@ -1,4 +1,14 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { getSystemInfoSync } from '@ray-js/ray';
+const {
+  windowWidth,
+  screenWidth,
+  windowHeight
+} = getSystemInfoSync();
+
+// pad和折叠屏小窗口展示面板的情况
+export const isSmallScreen = !(screenWidth === windowWidth || screenWidth === windowHeight);
+
 /**
  * 麦克风对讲按钮径向渐变
  */
@@ -36,4 +46,5 @@ export const promisify = apiFunction => {
       }));
     });
   };
-};
+};
+export * from './videoSplitHelper';

package/lib/utils/videoSplitHelper.d.ts

@@ -0,0 +1,18 @@
+import type { VideoSplitProtocol } from '../interface';
+export type FourDirectionShow = {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+};
+export declare function getLensInfoByIndex(protocol: VideoSplitProtocol | undefined, index?: number): import("../interface").VideoSplitInfoItem | undefined;
+export declare function getLensSupportDirections(protocol: VideoSplitProtocol | undefined, index?: number): number[];
+export declare function getPtzShowMapByProtocol(protocol: VideoSplitProtocol | undefined, index?: number): FourDirectionShow;
+export declare function patchPtzDataShowByProtocol<T extends {
+    type: string;
+    show: boolean;
+}>(ptzData: T[], protocol: VideoSplitProtocol | undefined, index?: number, isMultiCamera?: boolean): T[];
+export declare function patchZoomDataShowByProtocol<T extends {
+    show: boolean;
+}>(zoomData: T[], isMultiCamera?: boolean): T[];
+export declare function isSwipeDirectionSupported(protocol: VideoSplitProtocol | undefined, index: number | undefined, direction: unknown): boolean;

package/lib/utils/videoSplitHelper.js

@@ -0,0 +1,48 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.map.js";
+export function getLensInfoByIndex(protocol, index) {
+  if (!protocol || !index) return undefined;
+  return protocol.split_info.find(item => item.index === index);
+}
+export function getLensSupportDirections(protocol, index) {
+  const lensInfo = getLensInfoByIndex(protocol, index);
+  if (!Array.isArray(lensInfo === null || lensInfo === void 0 ? void 0 : lensInfo.support_directions)) return [];
+  return lensInfo.support_directions.filter(direction => Number.isInteger(direction) && direction >= 0 && direction <= 7);
+}
+export function getPtzShowMapByProtocol(protocol, index) {
+  const supportSet = new Set(getLensSupportDirections(protocol, index));
+  return {
+    top: supportSet.has(0),
+    right: supportSet.has(2),
+    bottom: supportSet.has(4),
+    left: supportSet.has(6)
+  };
+}
+export function patchPtzDataShowByProtocol(ptzData, protocol, index) {
+  let isMultiCamera = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  if (!isMultiCamera) return ptzData;
+  const showMap = getPtzShowMapByProtocol(protocol, index);
+  return ptzData.map(item => {
+    let show = false;
+    if (item.type === 'top') show = showMap.top;else if (item.type === 'right') show = showMap.right;else if (item.type === 'bottom') show = showMap.bottom;else if (item.type === 'left') show = showMap.left;
+    return _objectSpread(_objectSpread({}, item), {}, {
+      show
+    });
+  });
+}
+export function patchZoomDataShowByProtocol(zoomData) {
+  let isMultiCamera = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (!isMultiCamera) return zoomData;
+  return zoomData.map(item => _objectSpread(_objectSpread({}, item), {}, {
+    show: true
+  }));
+}
+export function isSwipeDirectionSupported(protocol, index, direction) {
+  const directionValue = Number(direction);
+  if (!Number.isInteger(directionValue)) return false;
+  const supportDirections = getLensSupportDirections(protocol, index);
+  return supportDirections.includes(directionValue);
+}

package/lib/widgets/fullScreen/fullScreen.js

@@ -1,11 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { View, setPageOrientation, Text, hideMenuButton, showMenuButton, showStatusBar, hideStatusBar, setNavigationBarBack } from '@ray-js/ray';
-import { useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
 import { unstable_batchedUpdates as batchedUpdates } from '@ray-core/ray';
 import { UIEventContext } from '../../ui/context';
-import { showAllComponent, voiceIntercomId, verticalScreenId, fullTravelRouteControlId, ptzControlId, fullResolutionId, fullSmallIntercomId, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { showAllComponent, voiceIntercomId, verticalScreenId, fullTravelRouteControlId, ptzControlId, fullResolutionId, fullSmallIntercomId, pauseTimeToHideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 import { VerticalScreen } from './verticalScreen';
 import { FullVoiceIntercom } from './fullVoiceIntercom';
@@ -118,13 +117,16 @@ export function FullScreen(props) {
       deleteContent('absolute', fullTravelRouteControlId);
     }
   };
-  useUpdateEffect(() => {
+  useEffect(() => {
     var _handlers$screenType;
     (_handlers$screenType = handlers[screenType]) === null || _handlers$screenType === void 0 || _handlers$screenType.call(handlers);
   }, [screenType]);
 
   // 点击事件处理函数
   const handClick = target => {
+    event.emit(widgetClick, {
+      widgetId: target === 'full' ? widgetLabs.FULL_SCREEN : widgetLabs.VERTICAL_SCREEN
+    });
     // 根据target的值设置pageOrientation的值
     const pageOrientation = target === 'vertical' ? 'portrait' : 'landscape';
     // 发射事件