@ray-js/ipc-player-integration 0.0.29-beta.9 → 0.0.30

package/lib/ui/ui.js

@@ -9,17 +9,19 @@ 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 { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId } from './constant';
 import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
 import TopRightContent from './topRightContent';
+import { FlowLowTip } from '../widgets';
 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
@@ -63,6 +65,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     playerRoute = 'pages/home/index',
     defaultAutoPlay = true,
     limitFlow = false,
+    showFlowLowTip = false,
     extend = {}
   } = props;
   const {
@@ -87,6 +90,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   */
   const [componentHideState, setComponentHideState] = useState(false);
   prevTriggerEvent.current = componentHideState ? hideAllComponent : showAllComponent;
+
+  // 记录切换横屏前的竖屏全屏状态，用于从横屏切回竖屏时恢复
+  const prevVerticalFullLayoutRef = useRef(false);
   const eventRef = useRef(instance.event);
   if (eventRef.current !== instance.event) {
     eventRef.current = instance.event;
@@ -111,11 +117,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;
@@ -123,29 +127,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');
       }
@@ -204,7 +215,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     screenMode,
     layoutStyle,
     ptzStatus,
-    selectedLenInfo
+    selectedLenInfo,
+    isVerticalFullLayout
   } = useStore({
     topLeftContent: instance.topLeftContent,
     topRightContent: instance.topRightContent,
@@ -218,7 +230,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
   });
 
   /* ---------------------------------多目相关副作用统一处理开始----------------------------------------- */
@@ -233,10 +246,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);
@@ -259,9 +278,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);
@@ -276,9 +304,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);
           }
@@ -351,8 +385,32 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     }
   }, [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);
@@ -369,6 +427,25 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     event.current.emit(playerTap);
   };
 
+  /** 标记流量不足提示是否已添加过，只允许 addContent 一次 */
+  const flowLowTipAddedRef = useRef(false);
+
+  /**
+   * 监听显示流量不足200MB的提示
+   */
+  useEffect(() => {
+    if (playState !== PlayState.PLAYING || !showFlowLowTip || flowLowTipAddedRef.current) return;
+    if (!instance.hasContent('absolute', showFlowLowTipId)) {
+      instance.addContent('absolute', {
+        id: showFlowLowTipId,
+        content: props => /*#__PURE__*/React.createElement(FlowLowTip, props),
+        absoluteContentClassName: 'ipc-player-plugin-flow-low-tip-wrap',
+        initProps: _objectSpread({}, props)
+      });
+      flowLowTipAddedRef.current = true;
+    }
+  }, [instance, playState, showFlowLowTip]);
+
   /**
    * 监听播放器实例创建完成
    */
@@ -386,15 +463,20 @@ 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') {
+          // 记录切换横屏前的竖屏全屏状态
+          prevVerticalFullLayoutRef.current = isVerticalFullLayout;
+          // 横屏时重置竖屏全屏状态
+          updateAtom(instance.isVerticalFullLayout, false);
+        } else if (!instance.multiCameraCtx.isSupport) {
+          // 单目设备从横屏切回竖屏时，恢复之前的竖屏全屏状态
+          updateAtom(instance.isVerticalFullLayout, prevVerticalFullLayoutRef.current);
+        }
         triggerEvent(showAllComponent);
       }
       // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
@@ -441,11 +523,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
     });
   });
-  const systemInfo = useRef(null);
-  if (!systemInfo.current) {
-    systemInfo.current = getSystemInfoSync();
-  }
-
   // 监听物理返回按键
   const hackHandle = () => {
     setPageOrientation({
@@ -582,6 +659,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;
   };
@@ -651,6 +731,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;
@@ -707,19 +791,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,
@@ -769,8 +854,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 {
@@ -803,7 +913,7 @@ 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'

package/lib/ui/ui.less

@@ -26,11 +26,11 @@
   }
 
   .ipc-player-bottom-content-full {
-    @media (prefers-color-scheme: dark) {
+    :root[theme='dark'] & {
       background: #000;
     }
 
-    @media (prefers-color-scheme: light) {
+    :root[theme='light'] & {
       background: #fff;
       --iconColor: #000;
 

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/flowLowTip/flowLowTip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './flowLowTip.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare const FlowLowTip: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/flowLowTip/flowLowTip.js

@@ -0,0 +1,65 @@
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { getServiceUrl } from '@ray-js/ray-ipc-utils';
+import { useMemoizedFn } from 'ahooks';
+import Strings from '../../i18n';
+import { useStore } from '../../ctx/store';
+import { showFlowLowTipId } from '../../ui/constant';
+import './flowLowTip.less';
+// 5秒后自动隐藏
+const AUTO_HIDE_MS = 5000;
+export const FlowLowTip = props => {
+  const {
+    screenType: screenTypeAtom,
+    hideContent,
+    className,
+    brandColor: brandColorProp,
+    devId
+  } = props;
+  const {
+    screenType,
+    brandColor
+  } = useStore({
+    screenType: screenTypeAtom,
+    brandColor: brandColorProp
+  });
+  const [hideFlowLowTip, setHideFlowLowTip] = useState(false);
+  const timerRef = useRef(null);
+  const handleClose = useMemoizedFn(async function () {
+    let jump = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setHideFlowLowTip(true);
+    if (jump) {
+      await getServiceUrl(devId, 'traffic_service', {}, true);
+    }
+    hideContent('absolute', showFlowLowTipId);
+  });
+  useEffect(() => {
+    timerRef.current = setTimeout(handleClose, AUTO_HIDE_MS);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [handleClose]);
+  if (screenType === 'full') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className, 'ipc-player-plugin-flow-low-tip-content', {
+      'ipc-player-plugin-full-screen-ptz-control-hide': hideFlowLowTip
+    }),
+    onClick: () => handleClose(true)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-flow-low-tip-text-wrap"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-tip-circle', 'ipc-player-plugin-flow-low-tip-icon')
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-flow-low-tip-text"
+  }, Strings.getLang('ipc_player_flow_low_tip'))), /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-flow-low-tip-button-wrap"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-tip-right-arrow', 'ipc-player-plugin-flow-low-tip-button-icon')
+  })));
+};

package/lib/widgets/flowLowTip/flowLowTip.less

@@ -0,0 +1,73 @@
+@animation-time: 0.3s;
+
+.ipc-player-plugin-flow-low-tip-wrap {
+  position: absolute;
+  top: calc(10px * var(--ipc-player-size-scale, 1));
+  left: calc(16px * var(--ipc-player-size-scale, 1));
+  right: calc(16px * var(--ipc-player-size-scale, 1));
+  background-color: #262626;
+  z-index: 350;
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));
+  overflow: hidden;
+  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(12px * var(--ipc-player-size-scale, 1));
+  font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  color: #ffffff;
+  transform: translate(0, 0);
+  transition: @animation-time ease-in;
+  animation: ipc-player-plugin-flow-low-tip-move-in @animation-time ease-in-out forwards;
+  &.ipc-player-plugin-flow-low-tip-hide {
+    animation: ipc-player-plugin-flow-low-tip-move-out @animation-time ease-in-out forwards;
+  }
+}
+
+.ipc-player-plugin-flow-low-tip-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ipc-player-plugin-flow-low-tip-text-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ipc-player-plugin-flow-low-tip-icon {
+  color: #ffa000;
+}
+
+.ipc-player-plugin-flow-low-tip-text {
+  flex: 1;
+  min-width: 0;
+  padding: 0 calc(4px * var(--ipc-player-size-scale, 1));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
+.ipc-player-plugin-flow-low-tip-button-wrap {
+  width: calc(32px * var(--ipc-player-size-scale, 1));
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@keyframes ipc-player-plugin-flow-low-tip-move-in {
+  0% {
+    transform: translate(0, -100vh); /* 从上方滑入 */
+  }
+  100% {
+    transform: translate(0, 0); /* 移动到目标位置 */
+  }
+}
+
+@keyframes ipc-player-plugin-flow-low-tip-move-out {
+  0% {
+    transform: translate(0, 0); /* 从当前位置开始 */
+  }
+  100% {
+    transform: translate(0, -100vh); /* 向上滑出，隐藏 */
+  }
+}

package/lib/widgets/flowLowTip/index.d.ts

@@ -0,0 +1 @@
+export * from './flowLowTip';

package/lib/widgets/flowLowTip/index.js

@@ -0,0 +1 @@
+export * from './flowLowTip';

package/lib/widgets/fullScreen/fullScreen.js

@@ -1,7 +1,6 @@
 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';
@@ -118,7 +117,7 @@ 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]);

package/lib/widgets/fullScreen/fullVoiceIntercom.js

@@ -47,7 +47,7 @@ export function FullVoiceIntercom(props) {
     })
   }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
     talkingColor: "#FFFFFF",
-    scale: 0.14,
+    scale: 1.2,
     mode: "circle",
     onTouchStart: () => {
       event.emit(widgetClick, {

package/lib/widgets/fullScreen/verticalScreen.js

@@ -10,7 +10,7 @@ export function VerticalScreen(_ref) {
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(className),
-    onClick: onClick,
+    onTouchStart: onClick,
     style: {
       paddingRight: '10px'
     }

package/lib/widgets/index.d.ts

@@ -16,3 +16,5 @@ export * from './moveInteractiveControl';
 export * from './ptzControlTip';
 export * from './multiCamera';
 export * from './smallIntercom';
+export * from './toggleVerticalFull';
+export * from './flowLowTip';