@ray-js/ipc-player-integration 0.0.28 → 0.0.29-beta.1

package/lib/ui/ui.js

@@ -1,23 +1,25 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 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, getCurrentPages } from '@ray-js/ray';
+import { unstable_batchedUpdates as batchedUpdates } from '@ray-core/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
 import { ipcTTTOperatorLog } from '@ray-js/ray-ipc-utils';
-import { PlayState, PlayerStreamStatus } from '../interface';
+import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interface';
 import { useCtx } from '../ctx/ctx.composition';
 import { useStore } from '../ctx/store';
 import { UIEventContext } from './context';
-import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview } from './constant';
+import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId } from './constant';
 import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
 import TopRightContent from './topRightContent';
 import { useMemoizedFn } from '../hooks';
+import { Storage } from '../utils/storage';
 import './ui.less';
+import { updatePlayerWidgetProps } from '../features';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -75,7 +77,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   } = instance;
   const prevTriggerEvent = useRef();
   const hasPlayedRef = useRef(false);
-
   /*
     player 的UI效果期望有一些控件在初始化的时候都展示，在点击 Player 之后隐藏：
     在控件显示时，点击播放器期望隐藏控件
@@ -100,6 +101,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
   // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
+  // 展示顶部内容
+  const [showTopContent, setShowTopContent] = useState(true);
+
   // 外部传入的ignoreHideStopPreview变化时，同步更新
   useEffect(() => {
     setIgnoreStopOnHide(ignoreHideStopPreview);
@@ -194,7 +198,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     screenType,
     playState,
     resolution,
-    mute
+    mute,
+    screenMode,
+    layoutStyle,
+    ptzStatus,
+    selectedLenInfo
   } = useStore({
     topLeftContent: instance.topLeftContent,
     topRightContent: instance.topRightContent,
@@ -204,8 +212,140 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     screenType: instance.screenType,
     playState: instance.playState,
     resolution: instance.resolution,
-    mute: instance.mute
+    mute: instance.mute,
+    screenMode: instance.multiCameraCtx.screenMode,
+    layoutStyle: instance.multiCameraCtx.layoutStyle,
+    ptzStatus: instance.multiCameraCtx.ptzStatus,
+    selectedLenInfo: instance.multiCameraCtx.selectedLenInfo
   });
+
+  /* ---------------------------------多目相关副作用统一处理开始----------------------------------------- */
+  useEffect(() => {
+    if (!instance.multiCameraCtx.isSupport) return;
+    const {
+      multiCameraCtx,
+      showContent,
+      hideContent
+    } = instance;
+    const storage = new Storage(devId);
+    batchedUpdates(() => {
+      switch (screenMode) {
+        case MultiCameraScreenMode.full:
+          // widgets 常驻显示
+          eventRef.current.emit(showAllComponent);
+          eventRef.current.emit('disablePlayerTap', true);
+          eventRef.current.emit(pauseTimeToHideAllComponent);
+
+          // 展示右侧插件
+          showContent('absolute', tileActionsId);
+
+          // 展示tileTip
+          if (!storage.getSync(tileTipId)) {
+            showContent('absolute', tileTipId);
+          }
+
+          // 展示顶部内容
+          setShowTopContent(true);
+
+          // 隐藏多目ptz
+          hideContent('bottomLeft', multiPtzId);
+
+          // 展示小对讲
+          showContent('bottomLeft', 'SmallIntercom');
+          updatePlayerWidgetProps(instance, 'absolute', moveablePtzControlId, {
+            positionLeft: 24
+          });
+          break;
+        case MultiCameraScreenMode.short:
+          // 恢复 widgets 展示逻辑
+          eventRef.current.emit('disablePlayerTap', false);
+          showComponents();
+
+          // 隐藏右侧插件
+          hideContent('absolute', tileActionsId);
+
+          // 隐藏顶部内容
+          setShowTopContent(false);
+
+          // 隐藏多目ptz
+          hideContent('bottomLeft', multiPtzId);
+
+          // 隐藏小对讲
+          hideContent('bottomLeft', 'SmallIntercom');
+          break;
+        case MultiCameraScreenMode.landscape:
+          // 恢复 widgets 展示逻辑
+          eventRef.current.emit('disablePlayerTap', false);
+          showComponents();
+          if (multiCameraCtx.protocol.total_split_num === 2 && !storage.getSync(landscapeTipId)) {
+            showContent('absolute', landscapeTipId);
+          }
+
+          // 隐藏右侧插件
+          hideContent('absolute', tileActionsId);
+
+          // 展示多目ptz
+          showContent('bottomLeft', multiPtzId);
+
+          // 展示顶部内容
+          setShowTopContent(true);
+
+          // 展示小对讲
+          showContent('bottomLeft', 'SmallIntercom');
+          updatePlayerWidgetProps(instance, 'absolute', moveablePtzControlId, {
+            positionLeft: 60
+          });
+          break;
+        default:
+      }
+
+      // 重置 ptz
+      multiCameraCtx.setPtzStatus(false);
+    }, null);
+  }, [screenMode, instance]);
+  useEffect(() => {
+    if (!instance.multiCameraCtx.isSupport) return;
+
+    // 更新 nextLayoutStyle
+    instance.multiCameraCtx.getNextLayoutStyle().then(res => {
+      instance.multiCameraCtx.setNextLayoutStyle(res);
+    });
+  }, [layoutStyle, screenMode, instance]);
+  useEffect(() => {
+    if (!instance.multiCameraCtx.isSupport) return;
+
+    // 组件隐藏时也隐藏镜头名
+    instance.multiCameraCtx.showLenNames(!componentHideState);
+  }, [componentHideState, instance]);
+  useEffect(() => {
+    if (!instance.multiCameraCtx.isSupport) return;
+    if (ptzStatus) {
+      instance.showContent('absolute', moveablePtzControlId);
+    } else {
+      instance.hideContent('absolute', moveablePtzControlId);
+    }
+  }, [instance, ptzStatus]);
+  useEffect(() => {
+    if (!instance.multiCameraCtx.isSupport) return;
+
+    // ptz 激活状态下，需要根据组件隐藏状态来决定是否展示 moveablePtzControl
+    if (ptzStatus) {
+      if (!componentHideState) {
+        instance.showContent('absolute', moveablePtzControlId);
+      } else {
+        instance.hideContent('absolute', moveablePtzControlId);
+      }
+
+      // ptz 提示
+      const storage = new Storage(devId);
+      if (!storage.getSync(ptzMoveableTipId) && selectedLenInfo.supportPTZ) {
+        instance.showContent('absolute', ptzMoveableTipId);
+      }
+    }
+  }, [instance, ptzStatus, selectedLenInfo, componentHideState]);
+
+  /* ---------------------------------多目相关副作用统一处理结束----------------------------------------- */
+
   useEffect(() => {
     if (createCtx) {
       setScaleMultiple(playerFit === 'contain' ? 1 : -2);
@@ -438,6 +578,19 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const handDisablePlayerTap = value => {
     disablePlayerTap.current = !!value;
   };
+  /**
+   * 展示所有组件，一段时间后自动关闭
+   */
+  const showComponents = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setComponentHideState(false);
+    timer.current = setTimeout(() => {
+      setComponentHideState(true);
+    }, HIDE_COMPONENT_TIME);
+  };
   const triggerEvent = type => {
     if (prevTriggerEvent.current === type) return;
     if (timer.current) {
@@ -497,7 +650,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
     };
   }, []);
-  playState === PlayState.PLAYING;
+  const playerReady = playState === PlayState.PLAYING;
   /**
    * 监听当前的zoom比例状态
    */
@@ -546,6 +699,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setCurrentZoomLevel(zoomLevel);
     return false;
   });
+  const playerContainerHeight = screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh';
   return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
     value: {
       event: eventRef.current,
@@ -554,9 +708,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
-      height: screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh'
+      height: playerContainerHeight
     })
-  }, /*#__PURE__*/React.createElement(IPCPlayer, _extends({
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: screenMode === MultiCameraScreenMode.full ? `calc(${playerContainerHeight} - 48px)` : playerContainerHeight
+    }
+  }, /*#__PURE__*/React.createElement(IPCPlayer, {
     defaultMute: mute,
     devId: devId,
     onlineStatus: deviceOnline,
@@ -603,7 +761,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       console.log('res===on onVideoTap', data);
       eventRef.current.emit(playerTap);
       console.log(prevTriggerEvent.current, 'prevTriggerEvent.current');
-      if (prevTriggerEvent.current === hideAllComponent) {
+      if (instance.multiCameraCtx.isSupport) {
+        // 处理多目选中窗口手势冲突
+        showComponents();
+      } else if (prevTriggerEvent.current === hideAllComponent) {
         triggerEvent(showAllComponent);
       } else {
         triggerEvent(hideAllComponent);
@@ -613,8 +774,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     } // 对应原来的onVideoTap
     ,
     brandColor: brandColor,
-    playerRoute: playerRoute
-  }, extend)), /*#__PURE__*/React.createElement(View, {
+    playerRoute: playerRoute,
+    extend: _objectSpread(_objectSpread({}, instance.multiCameraCtx.extendProps), extend)
+  })), showTopContent && /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-top-content', {
       'ipc-player-top-content-hide': componentHideState,
       'ipc-player-top-content-show': !componentHideState
@@ -622,26 +784,34 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     style: {
       height: screenType === 'vertical' ? '48px' : '60px'
     }
-  }, /*#__PURE__*/React.createElement(TopLeftContent, {
+  }, playerReady && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TopLeftContent, {
     ctx: instance
   }, renderTopLeftContent), /*#__PURE__*/React.createElement(TopRightContent, {
     ctx: instance
-  }, renderTopRightContent)), /*#__PURE__*/React.createElement(View, {
+  }, renderTopRightContent))), /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-bottom-content', {
       'ipc-player-bottom-content-hide': componentHideState,
-      'ipc-player-bottom-content-show': !componentHideState
+      'ipc-player-bottom-content-show': !componentHideState,
+      'ipc-player-bottom-content-full': screenMode === MultiCameraScreenMode.full
     }),
     style: {
       height: screenType === 'vertical' ? '48px' : '72px'
     }
-  }, /*#__PURE__*/React.createElement(BottomLeftContent, {
+  }, playerReady && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance
-  }, renderBottomRightContent)), (() => {
+  }, renderBottomRightContent))), (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
     return absoluteContent.map(item => {
       if (item.hidden) return null;
+      if (item.absoluteNoCoverView) {
+        return /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+          key: item.id
+        }, item.initProps), instance), {}, {
+          IPCPlayerContext: instance.IPCPlayerInstance
+        }));
+      }
       return /*#__PURE__*/React.createElement(CoverView, {
         key: item.id,
         style: _objectSpread({

package/lib/ui/ui.less

@@ -12,7 +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;
     bottom: 0;
@@ -21,7 +21,7 @@
     padding-top: 12px;
     z-index: 90;
     height: 60px;
-    background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);;
+    background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
   }
 
   // 顶部整条内容隐藏
@@ -40,7 +40,7 @@
     transform: translate(0, 0);
     transition: transform ease-in 0.3s;
   }
-  
+
   .ipc-player-bottom-content-hide {
     transform: translate(0, 110%);
     transition: transform 0.3s ease-in-out;
@@ -69,8 +69,8 @@
     display: flex;
     flex-direction: row;
   }
-   // 右下角容器样式
-   .ipc-player-bottom-right-content-wrap {
+  // 右下角容器样式
+  .ipc-player-bottom-right-content-wrap {
     position: absolute;
     z-index: 100;
     right: 0;
@@ -79,7 +79,6 @@
     flex-direction: row;
   }
 
-  
   // 左上角隐藏
   .ipc-player-top-left-content-show {
     transform: translate(0, 0);
@@ -102,7 +101,6 @@
     transition: transform 0.3s ease-in-out;
   }
 
-  
   // 左下角隐藏
   .ipc-player-bottom-left-content-hide {
     transform: translate(0, 110%);
@@ -125,7 +123,6 @@
     transition: transform ease-in 0.3s;
   }
 
-  
   // 左上角子元素内容区域样式
   .ipc-player-top-left-content-container {
     display: flex;
@@ -158,8 +155,7 @@
     align-items: center;
   }
 
-
- // 左上角子元素容器
+  // 左上角子元素容器
   .top-left-item-container {
     padding: 0 8px;
   }
@@ -172,7 +168,6 @@
   .top-left-item-container:only-of-type {
     padding: 0 0 0 16px;
   }
- 
 
   // 右上角子元素容器
   .top-right-item-container {
@@ -188,8 +183,8 @@
     padding: 0 16px 0 0;
   }
 
-   // 左下角子元素容器
-   .bottom-left-item-container {
+  // 左下角子元素容器
+  .bottom-left-item-container {
     padding: 0 12px;
     display: flex;
     justify-content: center;
@@ -202,12 +197,12 @@
   .bottom-left-item-container:last-of-type {
     padding: 0 0 0 12px;
   }
-  .bottom-left-item-container:only-of-type{
+  .bottom-left-item-container:only-of-type {
     padding: 0 0 0 16px;
   }
 
-   // 左下角全屏子元素容器
-   .bottom-left-item-full-container {
+  // 左下角全屏子元素容器
+  .bottom-left-item-full-container {
     padding: 0 24px !important;
   }
 
@@ -217,7 +212,7 @@
   .bottom-left-item-full-container:last-of-type {
     padding: 0 0 0 24px !important;
   }
-  .bottom-left-item-full-container:only-of-type{
+  .bottom-left-item-full-container:only-of-type {
     padding: 0 0 0 16px !important;
   }
 
@@ -238,10 +233,8 @@
   .bottom-right-item-container:only-of-type {
     padding: 0 16px 0 0;
   }
- 
 }
 
-
 .ipc-player-element-visible {
   visibility: visible !important;
 }
@@ -264,10 +257,15 @@
 .ipc-plugin-absolute-move-in-right {
   --translate-length: calc(50 * 1vw);
   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;
+  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/utils/storage/index.d.ts

@@ -2,6 +2,7 @@ export declare class Storage {
     private prefix;
     constructor(prefix: string);
     get(key: string): Promise<any>;
+    getSync(key: string): any;
     set(key: string, value: any): Promise<null>;
     remove(key: string): Promise<null>;
     private getFullKey;

package/lib/utils/storage/index.js

@@ -1,4 +1,4 @@
-import { getStorage, setStorage, removeStorage, getLaunchOptionsSync } from '@ray-js/ray';
+import { getStorage, setStorage, removeStorage, getLaunchOptionsSync, getStorageSync } from '@ray-js/ray';
 import { promisify } from '..';
 export class Storage {
   constructor(prefix) {
@@ -11,6 +11,13 @@ export class Storage {
     });
     return JSON.parse((_res$data = res.data) !== null && _res$data !== void 0 ? _res$data : 'null');
   }
+  getSync(key) {
+    const res = getStorageSync({
+      key: this.getFullKey(key)
+    });
+    // @ts-ignore
+    return JSON.parse(res !== null && res !== void 0 ? res : 'null');
+  }
   set(key, value) {
     return promisify(setStorage)({
       key: this.getFullKey(key),

package/lib/widgets/battery/battery.composition.d.ts

@@ -23,7 +23,8 @@ export declare const Battery: import("react").FunctionComponent<{
     bottomLeftContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     bottomRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
-    setShowPtzControlTip: (value: boolean) => void;
+    ptzControlTipDisabled: import("../..").RetAtom<boolean>;
+    setPtzControlTipDisabled: (value: boolean) => void;
     setBrandColor: (color: string) => void;
     setVerticalMic: (value: boolean) => void;
     setScreenType: (type: import("../..").ScreenType) => void;
@@ -38,13 +39,40 @@ export declare const Battery: import("react").FunctionComponent<{
     setPlayState: (value: import("../..").PlayState) => void;
     addContent: <T>(type: import("../..").ContentPlaceType, config: import("../..").ComponentConfig<T> | import("../..").ComponentConfig<T>[], position?: number | undefined) => void;
     deleteContent: (type: import("../..").ContentPlaceType, id: string) => void;
-    getContent: () => import("../..").ComponentConfig<any & Record<string, any>>[];
+    getContent: () => {
+        topLeft: import("../..").ComponentConfig<any & Record<string, any>>[];
+        topRight: import("../..").ComponentConfig<any & Record<string, any>>[];
+        bottomLeft: import("../..").ComponentConfig<any & Record<string, any>>[];
+        bottomRight: import("../..").ComponentConfig<any & Record<string, any>>[];
+        absolute: import("../..").ComponentConfig<any & Record<string, any>>[];
+    };
     updateContent: (type: import("../..").ContentPlaceType, data: import("../..").ComponentConfig<any & Record<string, any>>[]) => void;
     hasContent: (type: import("../..").ContentPlaceType, id: string) => boolean;
     hideContent: (type: import("../..").ContentPlaceType, id: string) => void;
     showContent: (type: import("../..").ContentPlaceType, id: string) => void;
     toast: import("../../ports.output").Toast;
     event: import("../..").EventInstance;
+    multiCameraCtx: {
+        isSupport: boolean;
+        protocol: import("../..").VideoSplitProtocol;
+        layoutStyle: import("../..").RetAtom<import("../..").MultiCameraLayoutStyle>;
+        screenMode: import("../..").RetAtom<import("../..").MultiCameraScreenMode>;
+        nextLayoutStyle: import("../..").RetAtom<import("../..").MultiCameraLayoutStyle>;
+        selectedLenInfo: import("../..").RetAtom<import("../..").MultiCameraLenInfo>;
+        ptzStatus: import("../..").RetAtom<boolean>;
+        extendProps: {
+            type: number | undefined;
+            onSelectVideoIndex: (this: any, event: any) => void;
+            onLayoutStatusChanged: (this: any, event: any) => void;
+            onLocalizerViewLocated: (this: any, event: any) => Promise<void>;
+        };
+        setLayoutStyle: (style: import("../..").MultiCameraLayoutStyle) => void;
+        setScreenMode: (mode: import("../..").MultiCameraScreenMode) => void;
+        setPtzStatus: (value: boolean | ((prevValue: boolean) => boolean)) => void;
+        showLenNames: (value: boolean) => void;
+        setNextLayoutStyle: (value: import("../..").MultiCameraLayoutStyle | ((prevValue: import("../..").MultiCameraLayoutStyle) => import("../..").MultiCameraLayoutStyle)) => void;
+        getNextLayoutStyle: () => Promise<import("../..").MultiCameraLayoutStyle>;
+    };
 } & {
     className?: string | undefined;
 }>;
@@ -72,7 +100,8 @@ export declare const BatteryFull: import("react").FunctionComponent<{
     bottomLeftContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     bottomRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
-    setShowPtzControlTip: (value: boolean) => void;
+    ptzControlTipDisabled: import("../..").RetAtom<boolean>;
+    setPtzControlTipDisabled: (value: boolean) => void;
     setBrandColor: (color: string) => void;
     setVerticalMic: (value: boolean) => void;
     setScreenType: (type: import("../..").ScreenType) => void;
@@ -87,13 +116,40 @@ export declare const BatteryFull: import("react").FunctionComponent<{
     setPlayState: (value: import("../..").PlayState) => void;
     addContent: <T>(type: import("../..").ContentPlaceType, config: import("../..").ComponentConfig<T> | import("../..").ComponentConfig<T>[], position?: number | undefined) => void;
     deleteContent: (type: import("../..").ContentPlaceType, id: string) => void;
-    getContent: () => import("../..").ComponentConfig<any & Record<string, any>>[];
+    getContent: () => {
+        topLeft: import("../..").ComponentConfig<any & Record<string, any>>[];
+        topRight: import("../..").ComponentConfig<any & Record<string, any>>[];
+        bottomLeft: import("../..").ComponentConfig<any & Record<string, any>>[];
+        bottomRight: import("../..").ComponentConfig<any & Record<string, any>>[];
+        absolute: import("../..").ComponentConfig<any & Record<string, any>>[];
+    };
     updateContent: (type: import("../..").ContentPlaceType, data: import("../..").ComponentConfig<any & Record<string, any>>[]) => void;
     hasContent: (type: import("../..").ContentPlaceType, id: string) => boolean;
     hideContent: (type: import("../..").ContentPlaceType, id: string) => void;
     showContent: (type: import("../..").ContentPlaceType, id: string) => void;
     toast: import("../../ports.output").Toast;
     event: import("../..").EventInstance;
+    multiCameraCtx: {
+        isSupport: boolean;
+        protocol: import("../..").VideoSplitProtocol;
+        layoutStyle: import("../..").RetAtom<import("../..").MultiCameraLayoutStyle>;
+        screenMode: import("../..").RetAtom<import("../..").MultiCameraScreenMode>;
+        nextLayoutStyle: import("../..").RetAtom<import("../..").MultiCameraLayoutStyle>;
+        selectedLenInfo: import("../..").RetAtom<import("../..").MultiCameraLenInfo>;
+        ptzStatus: import("../..").RetAtom<boolean>;
+        extendProps: {
+            type: number | undefined;
+            onSelectVideoIndex: (this: any, event: any) => void;
+            onLayoutStatusChanged: (this: any, event: any) => void;
+            onLocalizerViewLocated: (this: any, event: any) => Promise<void>;
+        };
+        setLayoutStyle: (style: import("../..").MultiCameraLayoutStyle) => void;
+        setScreenMode: (mode: import("../..").MultiCameraScreenMode) => void;
+        setPtzStatus: (value: boolean | ((prevValue: boolean) => boolean)) => void;
+        showLenNames: (value: boolean) => void;
+        setNextLayoutStyle: (value: import("../..").MultiCameraLayoutStyle | ((prevValue: import("../..").MultiCameraLayoutStyle) => import("../..").MultiCameraLayoutStyle)) => void;
+        getNextLayoutStyle: () => Promise<import("../..").MultiCameraLayoutStyle>;
+    };
 } & {
     className?: string | undefined;
 }>;

package/lib/widgets/fullScreen/fullScreen.js

@@ -23,7 +23,8 @@ export function FullScreen(props) {
     className,
     showContent,
     devId,
-    hideHorizontalMenu
+    hideHorizontalMenu,
+    multiCameraCtx
   } = props;
   const {
     screenType
@@ -80,7 +81,8 @@ export function FullScreen(props) {
             initProps: _objectSpread({}, props)
           });
           showContent('bottomLeft', 'FullSmallIntercom');
-        } else {
+        } else if (!multiCameraCtx.isSupport) {
+          // 单目设备，添加语音对讲控件
           addContent('absolute', {
             id: voiceIntercomId,
             content: props => {
@@ -143,6 +145,6 @@ export function FullScreen(props) {
     className: clsx(className),
     onTouchStart: () => handClick('full')
   }, /*#__PURE__*/React.createElement(Text, {
-    className: clsx('icon-panel', 'icon-panel-landscape', 'ipc-player-plugin-full-screen')
+    className: clsx('icon-panel', 'icon-panel-landscape-new', 'ipc-player-plugin-full-screen')
   }));
 }

package/lib/widgets/index.d.ts

@@ -13,3 +13,5 @@ export * from './fullSmallIntercom';
 export * from './verticalSmallIntercom';
 export * from './moveInteractiveControl';
 export * from './ptzControlTip';
+export * from './multiCamera';
+export * from './smallIntercom';

package/lib/widgets/index.js

@@ -12,4 +12,6 @@ export * from './resolution';
 export * from './fullSmallIntercom';
 export * from './verticalSmallIntercom';
 export * from './moveInteractiveControl';
-export * from './ptzControlTip';
+export * from './ptzControlTip';
+export * from './multiCamera';
+export * from './smallIntercom';

package/lib/widgets/multiCamera/constants.d.ts

@@ -0,0 +1 @@
+export declare const multiPrefix = "ipc-player-plugin-multi";

package/lib/widgets/multiCamera/constants.js

@@ -0,0 +1 @@
+export const multiPrefix = 'ipc-player-plugin-multi';

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

@@ -0,0 +1,8 @@
+export * from './switchLayout';
+export * from './tileActions';
+export * from './tileMultiPtz';
+export * from './moveablePtzControl';
+export * from './multiPtz';
+export * from './ptzMoveableTip';
+export * from './tileTip';
+export * from './landscapeTip';

package/lib/widgets/multiCamera/index.js

@@ -0,0 +1,8 @@
+export * from './switchLayout';
+export * from './tileActions';
+export * from './tileMultiPtz';
+export * from './moveablePtzControl';
+export * from './multiPtz';
+export * from './ptzMoveableTip';
+export * from './tileTip';
+export * from './landscapeTip';