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

package/lib/ctx/ctx.js

@@ -11,6 +11,7 @@ import { PlayState, IntercomMode } from '../interface';
 import { changeIgnoreHideStopPreview } from '../ui/constant';
 import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { getEventInstance } from './event';
+import { useMultiCameraCtx } from './multiCameraCtx';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
@@ -35,7 +36,8 @@ export const createUseCtx = _ref => {
       initBottomRightContent,
       initAbsoluteContent,
       saveToAlbum = SAVE_TO_ALBUM,
-      showPtzControlTip = false
+      showPtzControlTip = false,
+      videoSplitProtocol
     } = _ref2;
     const streamStatus = useRef();
     // 全屏、竖屏
@@ -231,6 +233,11 @@ export const createUseCtx = _ref => {
         });
       });
     };
+    const multiCameraCtx = useMultiCameraCtx({
+      devId,
+      IPCPlayerInstance: IPCPlayerInstance.current,
+      videoSplitProtocol
+    });
     return {
       devId,
       brandColor,
@@ -530,7 +537,8 @@ export const createUseCtx = _ref => {
         return streamStatus.current;
       },
       toast,
-      event: eventRef.current
+      event: eventRef.current,
+      multiCameraCtx
     };
   };
 };

package/lib/ctx/multiCameraCtx.d.ts

@@ -0,0 +1,73 @@
+import { MultiCameraLayoutStyle, MultiCameraLenInfo, MultiCameraScreenMode, VideoSplitProtocol } from '../interface';
+interface Props {
+    devId: string;
+    IPCPlayerInstance: IpcContext;
+    videoSplitProtocol?: VideoSplitProtocol;
+}
+/**
+ * 多目摄像头相关状态、方法维护
+ */
+export declare const useMultiCameraCtx: (props: Props) => {
+    /**
+     * 是否支持多目
+     */
+    isSupport: boolean;
+    /**
+     * 多目分割协议
+     */
+    protocol: VideoSplitProtocol;
+    /**
+     * 布局样式
+     */
+    layoutStyle: import("../interface").RetAtom<MultiCameraLayoutStyle>;
+    /**
+     * 屏幕模式
+     */
+    screenMode: import("../interface").RetAtom<MultiCameraScreenMode>;
+    /**
+     * 下一个布局样式
+     */
+    nextLayoutStyle: import("../interface").RetAtom<MultiCameraLayoutStyle>;
+    /**
+     * 选中镜头信息
+     */
+    selectedLenInfo: import("../interface").RetAtom<MultiCameraLenInfo>;
+    /**
+     * ptz状态
+     */
+    ptzStatus: import("../interface").RetAtom<boolean>;
+    /**
+     * ipcPlayer extendProps
+     */
+    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: MultiCameraLayoutStyle) => void;
+    /**
+     * 设置屏幕模式
+     */
+    setScreenMode: (mode: MultiCameraScreenMode) => void;
+    /**
+     * 设置ptz状态
+     */
+    setPtzStatus: (value: boolean | ((prevValue: boolean) => boolean)) => void;
+    /**
+     * 显示/隐藏镜头名称
+     */
+    showLenNames: (value: boolean) => void;
+    /**
+     * 设置下一个布局样式
+     */
+    setNextLayoutStyle: (value: MultiCameraLayoutStyle | ((prevValue: MultiCameraLayoutStyle) => MultiCameraLayoutStyle)) => void;
+    /**
+     * 获取下一个布局样式
+     */
+    getNextLayoutStyle: () => Promise<MultiCameraLayoutStyle>;
+};
+export {};

package/lib/ctx/multiCameraCtx.js

@@ -0,0 +1,177 @@
+import { getDpIdByCode, publishDps } from '@ray-js/ray-ipc-utils';
+import { useMemoizedFn } from 'ahooks';
+import { useMemo } from 'react';
+import { MultiCameraLayoutStyle, MultiCameraScreenMode } from '../interface';
+import { useAtom } from './store';
+const DEFAULT_VIDEO_SPLIT_PROTOCOL = {
+  total_split_num: 1,
+  split_info: [],
+  align_info: [],
+  p_v: 3
+};
+/**
+ * 多目摄像头相关状态、方法维护
+ */
+export const useMultiCameraCtx = props => {
+  const {
+    devId,
+    IPCPlayerInstance,
+    videoSplitProtocol = DEFAULT_VIDEO_SPLIT_PROTOCOL
+  } = props;
+  const isSupport = useMemo(() => {
+    return (videoSplitProtocol === null || videoSplitProtocol === void 0 ? void 0 : videoSplitProtocol.total_split_num) > 1 && (videoSplitProtocol === null || videoSplitProtocol === void 0 ? void 0 : videoSplitProtocol.p_v) >= 3 && typeof (IPCPlayerInstance === null || IPCPlayerInstance === void 0 ? void 0 : IPCPlayerInstance.switchLayoutStyle) === 'function';
+  }, [IPCPlayerInstance, videoSplitProtocol]);
+  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 [nextLayoutStyleAtom, setNextLayoutStyle] = useAtom(MultiCameraLayoutStyle.invalid);
+  const [ptzStatusAtom, setPtzStatus] = useAtom(false);
+  const handleSelectVideoIndex = useMemoizedFn(event => {
+    console.info('onSelectVideoIndex', JSON.stringify(event === null || event === void 0 ? void 0 : event.detail));
+    setSelectedLenInfo(event.detail);
+  });
+  const handleLayoutStatusChanged = useMemoizedFn(event => {
+    console.info('onLayoutStatusChanged', JSON.stringify(event === null || event === void 0 ? void 0 : event.detail));
+    const {
+      layoutStyle,
+      screenMode
+    } = event.detail || {};
+    setLayoutStyle(layoutStyle);
+    setScreenMode(screenMode);
+  });
+  const handleLocalizerViewLocated = useMemoizedFn(async event => {
+    console.info('onLocalizerViewLocated', JSON.stringify(event === null || event === void 0 ? void 0 : event.detail));
+    const dpData = await getDpIdByCode(devId, 'ipc_multi_locate_coors');
+    if (dpData.code === 0) {
+      const dpId = dpData.data;
+      const sndDpValue = JSON.stringify(event.detail);
+      publishDps(devId, {
+        [dpId]: sndDpValue
+      });
+    }
+  });
+  const extendProps = useMemo(() => {
+    return {
+      // type: 4 表示多目摄像头
+      type: isSupport ? 4 : undefined,
+      onSelectVideoIndex: handleSelectVideoIndex,
+      onLayoutStatusChanged: handleLayoutStatusChanged,
+      onLocalizerViewLocated: handleLocalizerViewLocated
+    };
+  }, [videoSplitProtocol]);
+  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, {
+      layoutStyle: style,
+      success: () => {
+        console.info('switchLayoutStyle success');
+      },
+      fail: err => {
+        console.error('switchLayoutStyle fail', err);
+      }
+    });
+  });
+  const _setScreenMode = useMemoizedFn(mode => {
+    var _IPCPlayerInstance$sw2;
+    IPCPlayerInstance === null || IPCPlayerInstance === void 0 || (_IPCPlayerInstance$sw2 = IPCPlayerInstance.switchScreenMode) === null || _IPCPlayerInstance$sw2 === void 0 || _IPCPlayerInstance$sw2.call(IPCPlayerInstance, {
+      screenMode: mode,
+      success: () => {
+        console.info('switchScreenMode success');
+      },
+      fail: err => {
+        console.error('switchScreenMode fail', err);
+      }
+    });
+  });
+  const getNextLayoutStyle = useMemoizedFn(() => {
+    return new Promise((resolve, reject) => {
+      var _IPCPlayerInstance$ne;
+      IPCPlayerInstance === null || IPCPlayerInstance === void 0 || (_IPCPlayerInstance$ne = IPCPlayerInstance.nextLayoutStyle) === null || _IPCPlayerInstance$ne === void 0 || _IPCPlayerInstance$ne.call(IPCPlayerInstance, {
+        success: result => {
+          console.info('get nextLayoutStyle success', result);
+          resolve(result);
+        },
+        fail: err => {
+          console.error('get nextLayoutStyle fail', err);
+          reject(err);
+        }
+      });
+    });
+  });
+  const showLenNames = useMemoizedFn(value => {
+    var _IPCPlayerInstance$sh;
+    IPCPlayerInstance === null || IPCPlayerInstance === void 0 || (_IPCPlayerInstance$sh = IPCPlayerInstance.showLenNames) === null || _IPCPlayerInstance$sh === void 0 || _IPCPlayerInstance$sh.call(IPCPlayerInstance, {
+      isShow: value,
+      success: () => {
+        console.info('showLenNames success', value);
+      },
+      fail: err => {
+        console.error('showLenNames fail', err);
+      }
+    });
+  });
+  return {
+    /**
+     * 是否支持多目
+     */
+    isSupport,
+    /**
+     * 多目分割协议
+     */
+    protocol: videoSplitProtocol,
+    /**
+     * 布局样式
+     */
+    layoutStyle: layoutStyleAtom,
+    /**
+     * 屏幕模式
+     */
+    screenMode: screenModeAtom,
+    /**
+     * 下一个布局样式
+     */
+    nextLayoutStyle: nextLayoutStyleAtom,
+    /**
+     * 选中镜头信息
+     */
+    selectedLenInfo: selectedLenInfoAtom,
+    /**
+     * ptz状态
+     */
+    ptzStatus: ptzStatusAtom,
+    /**
+     * ipcPlayer extendProps
+     */
+    extendProps,
+    /**
+     * 设置布局样式
+     */
+    setLayoutStyle: _setLayoutStyle,
+    /**
+     * 设置屏幕模式
+     */
+    setScreenMode: _setScreenMode,
+    /**
+     * 设置ptz状态
+     */
+    setPtzStatus,
+    /**
+     * 显示/隐藏镜头名称
+     */
+    showLenNames,
+    /**
+     * 设置下一个布局样式
+     */
+    setNextLayoutStyle,
+    /**
+     * 获取下一个布局样式
+     */
+    getNextLayoutStyle
+  };
+};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { UseCtx, WidgetId } from '../../interface';
-import { FullScreen } from '../../widgets/fullScreen';
+import { FullScreen } from '../../widgets';
 type Ctx = ReturnType<UseCtx>;
-export declare function initPlayerWidgets(ctx: Ctx, options: {
+export type InitPlayerWidgetsOptions = {
     verticalResolutionCustomClick?: boolean;
     hideHorizontalMenu?: boolean;
     hideScreenShotMenu?: boolean;
@@ -10,6 +10,7 @@ export declare function initPlayerWidgets(ctx: Ctx, options: {
     hideResolutionMenu?: boolean;
     hideKbsMenu?: boolean;
     directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
-}): Promise<void>;
-export declare function updatePlayerWidgetProps(ctx: Ctx, area: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', widgetId: WidgetId, newProps: Record<string, any>): Promise<void>;
+};
+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>;
 export {};

package/lib/features/initPlayerWidgets/index.js

@@ -3,8 +3,14 @@ import _cloneDeep from 'lodash/cloneDeep';
 import { defaultTopLeftContent, defaultTopRightContent, defaultBottomLeftContent, defaultBottomRightContent } 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);
@@ -58,6 +64,7 @@ export async function initPlayerWidgets(ctx, options) {
       }, -1);
     }
   });
+  return true;
 }
 export async function updatePlayerWidgetProps(ctx, area, widgetId, newProps) {
   const areaContent = ctx.getContent();

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

@@ -0,0 +1,8 @@
+import { UseCtx } from '../../interface';
+import { InitPlayerWidgetsOptions } from '.';
+type Ctx = ReturnType<UseCtx>;
+/**
+ * 多目设备初始化控件
+ */
+export declare function initMultiCameraPlayerWidgets(ctx: Ctx, options: InitPlayerWidgetsOptions): void;
+export {};

package/lib/features/initPlayerWidgets/multiCamera.js

@@ -0,0 +1,78 @@
+import { FullScreen, MultiPtz, Muted, RecordVideo, Resolution, Screenshot, SmallIntercom, SwitchLayout, VideoBitKBP, TileTip, TileActions, LandscapeTip, MoveablePtzControl, PtzMoveableTip } from '../../widgets';
+import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../../ui/constant';
+import { multiPrefix } from '../../widgets/multiCamera/constants';
+/**
+ * 多目设备初始化控件
+ */
+export function initMultiCameraPlayerWidgets(ctx, options) {
+  const topRightContent = [{
+    id: 'VideoBitKBP',
+    content: VideoBitKBP
+  }];
+  const bottomLeftContent = [{
+    id: 'Screenshot',
+    content: Screenshot
+  }, {
+    id: 'RecordVideo',
+    content: RecordVideo
+  }, {
+    id: 'Muted',
+    content: Muted
+  }, {
+    id: 'SmallIntercom',
+    content: SmallIntercom
+  }, {
+    id: multiPtzId,
+    content: MultiPtz,
+    hidden: true
+  }, {
+    id: 'Resolution',
+    content: Resolution,
+    initProps: {
+      verticalResolutionCustomClick: options.verticalResolutionCustomClick
+    }
+  }];
+  const bottomRightContent = [{
+    id: 'SwitchLayout',
+    content: SwitchLayout
+  }, {
+    id: 'FullScreen',
+    content: FullScreen
+  }];
+  const removeContentById = (content, id) => {
+    content.splice(content.findIndex(item => item.id === id), 1);
+  };
+  options.hideKbsMenu && removeContentById(topRightContent, 'VideoBitKBP');
+  options.hideScreenShotMenu && removeContentById(bottomLeftContent, 'Screenshot');
+  options.hideRecordVideoMenu && removeContentById(bottomLeftContent, 'RecordVideo');
+  options.hideHorizontalMenu && removeContentById(bottomRightContent, 'FullScreen');
+  ctx.addContent('topLeft', []);
+  ctx.addContent('topRight', topRightContent);
+  ctx.addContent('bottomLeft', bottomLeftContent);
+  ctx.addContent('bottomRight', bottomRightContent);
+  ctx.addContent('absolute', [{
+    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
+  }]);
+}

package/lib/i18n/index.d.ts

@@ -22,6 +22,11 @@ declare const Strings: kit.I18N<{
         ipc_player_change_resolution_success: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
+        ipc_player_tile_tip_text_step1: string;
+        ipc_player_tile_tip_text_step2: string;
+        ipc_player_tip_next: string;
+        ipc_player_tip_confirm: string;
+        ipc_player_ptz_moveable_tip_text: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -45,6 +50,11 @@ declare const Strings: kit.I18N<{
         ipc_player_change_resolution_success: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
+        ipc_player_tile_tip_text_step1: string;
+        ipc_player_tile_tip_text_step2: string;
+        ipc_player_tip_next: string;
+        ipc_player_tip_confirm: string;
+        ipc_player_ptz_moveable_tip_text: string;
     };
 }, {
     ipc_player_resolution_HD: string;
@@ -68,6 +78,11 @@ declare const Strings: kit.I18N<{
     ipc_player_change_resolution_success: string;
     ipc_player_ptz_control_tip: string;
     ipc_player_ptz_close_control_tip: string;
+    ipc_player_tile_tip_text_step1: string;
+    ipc_player_tile_tip_text_step2: string;
+    ipc_player_tip_next: string;
+    ipc_player_tip_confirm: string;
+    ipc_player_ptz_moveable_tip_text: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
@@ -90,5 +105,10 @@ declare const Strings: kit.I18N<{
     ipc_player_change_resolution_success: string;
     ipc_player_ptz_control_tip: string;
     ipc_player_ptz_close_control_tip: string;
+    ipc_player_tile_tip_text_step1: string;
+    ipc_player_tile_tip_text_step2: string;
+    ipc_player_tip_next: string;
+    ipc_player_tip_confirm: string;
+    ipc_player_ptz_moveable_tip_text: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
         ipc_player_change_resolution_success: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
+        ipc_player_tile_tip_text_step1: string;
+        ipc_player_tile_tip_text_step2: string;
+        ipc_player_tip_next: string;
+        ipc_player_tip_confirm: string;
+        ipc_player_ptz_moveable_tip_text: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -44,6 +49,11 @@ declare const _default: {
         ipc_player_change_resolution_success: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
+        ipc_player_tile_tip_text_step1: string;
+        ipc_player_tile_tip_text_step2: string;
+        ipc_player_tip_next: string;
+        ipc_player_tip_confirm: string;
+        ipc_player_ptz_moveable_tip_text: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -20,7 +20,12 @@ export default {
     ipc_player_error_record_tip: 'The recording has failed, please try again later.',
     ipc_player_change_resolution_success: 'Switch successful',
     ipc_player_ptz_control_tip: 'Swipe up, down, left, or right to control the PTZ direction.',
-    ipc_player_ptz_close_control_tip: 'Close'
+    ipc_player_ptz_close_control_tip: 'Close',
+    ipc_player_tile_tip_text_step1: 'Click here to expand/collapse the player',
+    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'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
@@ -43,6 +48,11 @@ export default {
     ipc_player_error_record_tip: '录制出错了，请稍后再试',
     ipc_player_change_resolution_success: '切换成功',
     ipc_player_ptz_control_tip: '上下左右滑动，控制云台方向',
-    ipc_player_ptz_close_control_tip: '关闭'
+    ipc_player_ptz_close_control_tip: '关闭',
+    ipc_player_tile_tip_text_step1: '点击此处可展开/收起播放窗口',
+    ipc_player_tile_tip_text_step2: '点击此处可切换镜头的多种查看方式',
+    ipc_player_tip_next: '下一步',
+    ipc_player_tip_confirm: '知道了',
+    ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域'
   }
 };