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

package/lib/ctx/ctx.composition.d.ts

@@ -1,10 +1,16 @@
-import { FullScreen } from '../widgets';
+import { FullScreen, ToggleVerticalFull } from '../widgets';
 import { ComponentConfig } from '../interface';
 export declare const defaultTopLeftContent: ComponentConfig[];
 export declare const defaultTopRightContent: ComponentConfig[];
 export declare const defaultBottomLeftContent: ComponentConfig[];
-export declare const defaultBottomRightContent: {
+export declare const defaultBottomRightContent: ({
+    id: string;
+    content: typeof ToggleVerticalFull;
+    hidden: boolean;
+} | {
     id: string;
     content: typeof FullScreen;
-}[];
+    hidden?: undefined;
+})[];
+export declare const multiCameraAbsoluteContent: ComponentConfig[];
 export declare const useCtx: import("../interface").UseCtx;

package/lib/ctx/ctx.composition.js

@@ -4,8 +4,10 @@ const _excluded = ["title", "duration"];
 import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz } from '../widgets';
+import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull } from '../widgets';
 import { authorizeStatus } from '../utils/authorize';
+import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
+import { multiPrefix } from '../widgets/multiCamera/constants';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
 
@@ -45,15 +47,52 @@ export const defaultBottomLeftContent = [{
 }, {
   id: 'Ptz',
   content: Ptz
+}, {
+  id: multiPtzId,
+  content: MultiPtz,
+  hidden: true
 }, {
   id: 'Resolution',
   content: Resolution
 }];
 export const defaultBottomRightContent = [{
+  id: 'SwitchLayout',
+  content: SwitchLayout,
+  hidden: true
+}, {
+  id: 'ToggleVerticalFull',
+  content: ToggleVerticalFull,
+  hidden: true
+}, {
   id: 'FullScreen',
   content: FullScreen
 }];
 const absoluteContent = [];
+export const multiCameraAbsoluteContent = [{
+  id: tileTipId,
+  content: TileTip,
+  absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
+  hidden: true
+}, {
+  id: ptzMoveableTipId,
+  content: PtzMoveableTip,
+  absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
+  hidden: true
+}, {
+  id: landscapeTipId,
+  content: LandscapeTip,
+  absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
+  hidden: true
+}, {
+  id: tileActionsId,
+  absoluteContentClassName: `${multiPrefix}-actions-wrap`,
+  content: TileActions
+}, {
+  id: moveablePtzControlId,
+  content: MoveablePtzControl,
+  absoluteNoCoverView: true,
+  hidden: true
+}];
 const toast = _ref => {
   let {
       title,

package/lib/ctx/ctx.js

@@ -43,6 +43,9 @@ export const createUseCtx = _ref => {
     // 全屏、竖屏
     const [screenType, setScreenType] = useAtom('vertical');
 
+    // 是否处于竖屏填充布局
+    const [isVerticalFullLayout, setIsVerticalFullLayout] = useAtom(false);
+
     // 录像中
     const [recording] = useAtom(false);
 
@@ -244,6 +247,8 @@ export const createUseCtx = _ref => {
       verticalMic,
       saveToAlbum,
       screenType,
+      isVerticalFullLayout,
+      setIsVerticalFullLayout,
       recording,
       recordingDisabled,
       ptzControlTipDisabled,

package/lib/ctx/multiCameraCtx.d.ts

@@ -1,4 +1,16 @@
+/// <reference types="react" />
 import { MultiCameraLayoutStyle, MultiCameraLenInfo, MultiCameraScreenMode, VideoSplitProtocol } from '../interface';
+interface MultiCameraViewLenName {
+    index: number;
+    name: string;
+}
+interface MultiCameraViewDataSource {
+    selectedVideoBorderColor?: string;
+    localizerLineColor?: string;
+    localizeCrosshairColor?: string;
+    localizerTip?: string;
+    lenNames?: MultiCameraViewLenName[];
+}
 interface Props {
     devId: string;
     IPCPlayerInstance: IpcContext;
@@ -32,6 +44,14 @@ export declare const useMultiCameraCtx: (props: Props) => {
      * 选中镜头信息
      */
     selectedLenInfo: import("../interface").RetAtom<MultiCameraLenInfo>;
+    /**
+     * 本轮点击周期内是否触发了镜头选中事件
+     */
+    selectVideoFiredRef: import("react").MutableRefObject<boolean>;
+    /**
+     * 最新选中镜头信息（同步引用，避免依赖渲染时机）
+     */
+    selectedLenInfoRef: import("react").MutableRefObject<MultiCameraLenInfo>;
     /**
      * ptz状态
      */
@@ -44,11 +64,17 @@ export declare const useMultiCameraCtx: (props: Props) => {
      * ipcPlayer extendProps
      */
     extendProps: {
-        type: number | undefined;
+        type: number;
         onSelectVideoIndex: (this: any, event: any) => void;
         onLayoutStatusChanged: (this: any, event: any) => void;
         onLocalizerViewLocated: (this: any, event: any) => Promise<void>;
         onSwipeAtVideoIndex: (this: any, event: any) => Promise<void>;
+    } | {
+        type?: undefined;
+        onSelectVideoIndex?: undefined;
+        onLayoutStatusChanged?: undefined;
+        onLocalizerViewLocated?: undefined;
+        onSwipeAtVideoIndex?: undefined;
     };
     /**
      * 设置布局样式
@@ -74,5 +100,9 @@ export declare const useMultiCameraCtx: (props: Props) => {
      * 获取下一个布局样式
      */
     getNextLayoutStyle: (this: unknown) => Promise<MultiCameraLayoutStyle>;
+    /**
+     * 设置多目镜头视图数据
+     */
+    setViewData: (this: unknown, dataSource: MultiCameraViewDataSource) => void;
 };
 export {};

package/lib/ctx/multiCameraCtx.js

@@ -1,17 +1,30 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { getDpIdByCode, publishDps } from '@ray-js/ray-ipc-utils';
 import { useMemoizedFn } from 'ahooks';
 import { useMemo, useRef } from 'react';
 import { MultiCameraLayoutStyle, MultiCameraScreenMode } from '../interface';
 import { useDpSupport } from '../hooks';
 import { GUN_BALL, MULTI_GUN_BALL, MULTI_PTZ_CONTROL, MULTI_ZOOM_CONTROL, PTZ_CONTROL, ZOOM_CONTROL } from '../utils/content/dpCode';
+import { getLensSupportDirections, isSwipeDirectionSupported } from '../utils';
 import { useAtom } from './store';
 const DEFAULT_VIDEO_SPLIT_PROTOCOL = {
   total_split_num: 1,
   split_info: [],
-  align_info: [],
+  align_info: {
+    align_group: [],
+    linked_group: [],
+    localizer_group: []
+  },
   p_v: 3
 };
 const DP_CODES = [PTZ_CONTROL, GUN_BALL, ZOOM_CONTROL, MULTI_GUN_BALL, MULTI_PTZ_CONTROL, MULTI_ZOOM_CONTROL];
+const DEFAULT_SELECTED_LEN_INFO = {
+  index: 1,
+  videoName: '',
+  supportPTZ: false,
+  supportLocalizer: false,
+  supportZoom: false
+};
 /**
  * 多目摄像头相关状态、方法维护
  */
@@ -33,17 +46,15 @@ export const useMultiCameraCtx = props => {
   const ptzTimerRef = useRef(null);
   const [layoutStyleAtom, setLayoutStyle] = useAtom(isSupport ? MultiCameraLayoutStyle.tile : MultiCameraLayoutStyle.pip);
   const [screenModeAtom, setScreenMode] = useAtom(isSupport ? MultiCameraScreenMode.full : MultiCameraScreenMode.short);
-  const [selectedLenInfoAtom, setSelectedLenInfo] = useAtom({
-    index: 1,
-    videoName: '',
-    supportPTZ: false,
-    supportLocalizer: false,
-    supportZoom: false
-  });
+  const [selectedLenInfoAtom, setSelectedLenInfo] = useAtom(DEFAULT_SELECTED_LEN_INFO);
   const [nextLayoutStyleAtom, setNextLayoutStyle] = useAtom(MultiCameraLayoutStyle.invalid);
   const [ptzStatusAtom, setPtzStatus] = useAtom(false);
+  const selectVideoFiredRef = useRef(false);
+  const selectedLenInfoRef = useRef(DEFAULT_SELECTED_LEN_INFO);
   const handleSelectVideoIndex = useMemoizedFn(event => {
     console.info('onSelectVideoIndex', JSON.stringify(event === null || event === void 0 ? void 0 : event.detail));
+    selectVideoFiredRef.current = true;
+    selectedLenInfoRef.current = event.detail;
     setSelectedLenInfo(event.detail);
   });
   const handleLayoutStatusChanged = useMemoizedFn(event => {
@@ -120,17 +131,27 @@ export const useMultiCameraCtx = props => {
     if (!isStop) {
       // 1. 先停止之前的PTZ控制（如果有）
       await stopPtz();
+      const directionValue = Number(direction);
+      if (!isSwipeDirectionSupported(videoSplitProtocol, index, directionValue)) {
+        const supportDirections = getLensSupportDirections(videoSplitProtocol, index);
+        console.info('onSwipeAtVideoIndex direction not supported', {
+          index,
+          direction,
+          supportDirections
+        });
+        return;
+      }
 
       // 2. 构建新方向的PTZ配置
       const ptzConfig = dpSupportMap.ipc_multi_ptz_control ? {
         code: 'ipc_multi_ptz_control',
         value: JSON.stringify({
           index,
-          direction: String(direction)
+          direction: String(directionValue)
         })
       } : dpSupportMap.ptz_control ? {
         code: 'ptz_control',
-        value: String(direction)
+        value: String(directionValue)
       } : null;
       if (!ptzConfig) return;
 
@@ -154,15 +175,15 @@ export const useMultiCameraCtx = props => {
     }
   });
   const extendProps = useMemo(() => {
-    return {
-      // type: 4 表示多目摄像头
-      type: isSupport ? 4 : undefined,
+    return isSupport ? {
+      type: 4,
+      // 表示多目摄像头
       onSelectVideoIndex: handleSelectVideoIndex,
       onLayoutStatusChanged: handleLayoutStatusChanged,
       onLocalizerViewLocated: handleLocalizerViewLocated,
       onSwipeAtVideoIndex: handleSwipeAtVideoIndex
-    };
-  }, [videoSplitProtocol]);
+    } : {};
+  }, [isSupport]);
   const _setLayoutStyle = useMemoizedFn(style => {
     var _IPCPlayerInstance$sw;
     IPCPlayerInstance === null || IPCPlayerInstance === void 0 || (_IPCPlayerInstance$sw = IPCPlayerInstance.switchLayoutStyle) === null || _IPCPlayerInstance$sw === void 0 || _IPCPlayerInstance$sw.call(IPCPlayerInstance, {
@@ -214,6 +235,17 @@ export const useMultiCameraCtx = props => {
       }
     });
   });
+  const setViewData = useMemoizedFn(dataSource => {
+    var _IPCPlayerInstance$se;
+    IPCPlayerInstance === null || IPCPlayerInstance === void 0 || (_IPCPlayerInstance$se = IPCPlayerInstance.setMultiCameraViewDataSource) === null || _IPCPlayerInstance$se === void 0 || _IPCPlayerInstance$se.call(IPCPlayerInstance, _objectSpread(_objectSpread({}, dataSource), {}, {
+      success: () => {
+        console.info('setMultiCameraViewDataSource success', JSON.stringify(dataSource));
+      },
+      fail: err => {
+        console.error('setMultiCameraViewDataSource fail', err);
+      }
+    }));
+  });
   return {
     /**
      * 是否支持多目
@@ -239,6 +271,14 @@ export const useMultiCameraCtx = props => {
      * 选中镜头信息
      */
     selectedLenInfo: selectedLenInfoAtom,
+    /**
+     * 本轮点击周期内是否触发了镜头选中事件
+     */
+    selectVideoFiredRef,
+    /**
+     * 最新选中镜头信息（同步引用，避免依赖渲染时机）
+     */
+    selectedLenInfoRef,
     /**
      * ptz状态
      */
@@ -274,6 +314,10 @@ export const useMultiCameraCtx = props => {
     /**
      * 获取下一个布局样式
      */
-    getNextLayoutStyle
+    getNextLayoutStyle,
+    /**
+     * 设置多目镜头视图数据
+     */
+    setViewData
   };
 };

package/lib/features/initPlayerWidgets/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UseCtx, WidgetId } from '../../interface';
+import { ComponentConfig, UseCtx, WidgetId } from '../../interface';
 import { FullScreen } from '../../widgets';
 type Ctx = ReturnType<UseCtx>;
 export type InitPlayerWidgetsOptions = {
@@ -9,7 +9,13 @@ export type InitPlayerWidgetsOptions = {
     hideRecordVideoMenu?: boolean;
     hideResolutionMenu?: boolean;
     hideKbsMenu?: boolean;
+    showToggleVerticalFull?: boolean;
     directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
+    topLeftContent?: ComponentConfig[];
+    topRightContent?: ComponentConfig[];
+    bottomLeftContent?: ComponentConfig[];
+    bottomRightContent?: ComponentConfig[];
+    absoluteContent?: ComponentConfig[];
 };
 export declare function initPlayerWidgets(ctx: Ctx, options: InitPlayerWidgetsOptions): Promise<boolean>;
 export declare function updatePlayerWidgetProps(ctx: Ctx, area: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'absolute', widgetId: WidgetId, newProps: Record<string, any>): Promise<void>;

package/lib/features/initPlayerWidgets/index.js

@@ -1,19 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _cloneDeep from 'lodash/cloneDeep';
-import { defaultTopLeftContent, defaultTopRightContent, defaultBottomLeftContent, defaultBottomRightContent } from '../../ctx';
+import { defaultTopLeftContent, defaultTopRightContent, defaultBottomLeftContent, defaultBottomRightContent, multiCameraAbsoluteContent } from '../../ctx';
 import { hasDpCode } from '../../utils/device';
 import { MoveInteractiveControlButton } from '../../widgets/moveInteractiveControl';
-import { initMultiCameraPlayerWidgets } from './multiCamera';
 // 根据当前 dp 信息决定设置哪些 plugin
 export async function initPlayerWidgets(ctx, options) {
-  // 初始化多目设备控件
-  if (ctx.multiCameraCtx.isSupport) {
-    initMultiCameraPlayerWidgets(ctx, options);
-    return true;
-  }
-  ctx.addContent('topLeft', defaultTopLeftContent);
-  const newDefaultBottomLeftContent = _cloneDeep(defaultBottomLeftContent);
-  const newDefaultTopRightContent = _cloneDeep(defaultTopRightContent);
+  ctx.addContent('topLeft', options.topLeftContent || defaultTopLeftContent);
+  const newDefaultBottomLeftContent = _cloneDeep(options.bottomLeftContent || defaultBottomLeftContent);
+  const newDefaultTopRightContent = _cloneDeep(options.topRightContent || defaultTopRightContent);
   const videoKbsIndex = newDefaultTopRightContent.findIndex(item => item.id === 'VideoBitKBP');
   if (videoKbsIndex !== -1) {
     newDefaultTopRightContent[videoKbsIndex].initProps = {
@@ -44,7 +38,7 @@ export async function initPlayerWidgets(ctx, options) {
     };
   }
   ctx.addContent('bottomLeft', newDefaultBottomLeftContent);
-  const newDefaultBottomRightContent = _cloneDeep(defaultBottomRightContent);
+  const newDefaultBottomRightContent = _cloneDeep(options.bottomRightContent || defaultBottomRightContent);
   const fullScreenIndex = newDefaultBottomRightContent.findIndex(item => item.id === 'FullScreen');
   if (fullScreenIndex !== -1) {
     // @ts-ignore
@@ -64,6 +58,15 @@ export async function initPlayerWidgets(ctx, options) {
       }, -1);
     }
   });
+
+  // 初始化多目设备控件
+  if (ctx.multiCameraCtx.isSupport) {
+    ctx.hideContent('bottomLeft', 'Ptz'); // 隐藏单路云台
+    ctx.showContent('bottomRight', 'SwitchLayout'); // 多目默认展示切换竖屏组件
+    ctx.addContent('absolute', multiCameraAbsoluteContent);
+  } else if (options.showToggleVerticalFull) {
+    ctx.showContent('bottomRight', 'ToggleVerticalFull');
+  }
   return true;
 }
 export async function updatePlayerWidgetProps(ctx, area, widgetId, newProps) {

package/lib/i18n/index.d.ts

@@ -27,6 +27,7 @@ declare const Strings: kit.I18N<{
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_flow_low_tip: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -55,6 +56,7 @@ declare const Strings: kit.I18N<{
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_flow_low_tip: string;
     };
 }, {
     ipc_player_resolution_HD: string;
@@ -83,6 +85,7 @@ declare const Strings: kit.I18N<{
     ipc_player_tip_next: string;
     ipc_player_tip_confirm: string;
     ipc_player_ptz_moveable_tip_text: string;
+    ipc_player_flow_low_tip: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
@@ -110,5 +113,6 @@ declare const Strings: kit.I18N<{
     ipc_player_tip_next: string;
     ipc_player_tip_confirm: string;
     ipc_player_ptz_moveable_tip_text: string;
+    ipc_player_flow_low_tip: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -26,6 +26,7 @@ declare const _default: {
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_flow_low_tip: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -54,6 +55,7 @@ declare const _default: {
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_flow_low_tip: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -25,7 +25,8 @@ export default {
     ipc_player_tile_tip_text_step2: 'Click here to switch the multiple viewing modes of the lens',
     ipc_player_tip_next: 'Next',
     ipc_player_tip_confirm: 'Got it',
-    ipc_player_ptz_moveable_tip_text: 'Hold the middle to drag the direction control area'
+    ipc_player_ptz_moveable_tip_text: 'Hold the middle to drag the direction control area',
+    ipc_player_flow_low_tip: 'The device’s remaining data is below 200MB. Please recharge as soon as possible.'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
@@ -53,6 +54,7 @@ export default {
     ipc_player_tile_tip_text_step2: '点击此处可切换镜头的多种查看方式',
     ipc_player_tip_next: '下一步',
     ipc_player_tip_confirm: '知道了',
-    ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域'
+    ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域',
+    ipc_player_flow_low_tip: '设备当前剩余流量不足200M，请尽快充值'
   }
 };

package/lib/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "icon-panel"; /* Project id 4727767 */
-  src: url('iconfont.woff2?t=1761875257617') format('woff2'),
-       url('iconfont.woff?t=1761875257617') format('woff'),
-       url('iconfont.ttf?t=1761875257617') format('truetype');
+  src: url('iconfont.woff2?t=1772529309738') format('woff2'),
+       url('iconfont.woff?t=1772529309738') format('woff'),
+       url('iconfont.ttf?t=1772529309738') format('truetype');
 }
 
 .icon-panel {
@@ -13,14 +13,134 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-panel-gun-ball:before {
-  content: "\e68c";
+.icon-panel-tip-right-arrow:before {
+  content: "\e697";
+}
+
+.icon-panel-tip-circle:before {
+  content: "\e698";
+}
+
+.icon-panel-night-light:before {
+  content: "\e60e";
+}
+
+.icon-panel-feed-reminder:before {
+  content: "\e60c";
+}
+
+.icon-panel-baby-core:before {
+  content: "\e611";
+}
+
+.icon-panel-door-close-small:before {
+  content: "\e6671";
+}
+
+.icon-panel-door-close-large:before {
+  content: "\e6672";
+}
+
+.icon-panel-door-open-small:before {
+  content: "\e6673";
+}
+
+.icon-panel-door-open-large:before {
+  content: "\e6674";
+}
+
+.icon-panel-common-error:before {
+  content: "\e696";
+}
+
+.icon-panel-traffic-top-up:before {
+  content: "\e693";
+}
+
+.icon-panel-elevator-up:before {
+  content: "\e6666";
+}
+
+.icon-panel-elevator-down:before {
+  content: "\e6667";
+}
+
+.icon-panel-access-elevator:before {
+  content: "\e6668";
+}
+
+.icon-panel-elevator-updown:before {
+  content: "\e6669";
+}
+
+.icon-panel-traffic-unauthorized:before {
+  content: "\e692";
 }
 
-.icon-panel-gun-ball-2:before {
+.icon-panel-traffic-low-data:before {
+  content: "\e691";
+}
+
+.icon-panel-traffic-not-obtain:before {
+  content: "\e690";
+}
+
+.icon-panel-swimming-anomaly:before {
+  content: "\e67a";
+}
+
+.icon-panel-feed-fish:before {
+  content: "\e67b";
+}
+
+.icon-panel-water-temp:before {
+  content: "\e67c";
+}
+
+.icon-panel-fun-fish-TV:before {
+  content: "\e67d";
+}
+
+.icon-panel-fish-care-expert:before {
+  content: "\e67e";
+}
+
+.icon-panel-water-quality:before {
   content: "\e68b";
 }
 
+.icon-panel-swimming-issue:before {
+  content: "\e68d";
+}
+
+.icon-panel-fish-anomaly:before {
+  content: "\e68e";
+}
+
+.icon-panel-a-AI-fish-healthcheck:before {
+  content: "\e68f";
+}
+
+.icon-panel-favorites1:before {
+  content: "\e69f";
+}
+
+.icon-panel-belly-up1:before {
+  content: "\e6a0";
+}
+
+.icon-panel-favorite1:before {
+  content: "\e694";
+}
+
+.icon-panel-replay1:before {
+  content: "\e695";
+}
+
+.icon-panel-gun-ball:before {
+  content: "\e68c";
+}
+
 .icon-panel-thumbnail:before {
   content: "\e67f";
 }