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

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, 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;
 
@@ -16,6 +18,9 @@ export const defaultTopLeftContent = [{
 export const defaultTopRightContent = [{
   id: 'BatteryFull',
   content: BatteryFull
+}, {
+  id: 'Signal4G',
+  content: Signal4G
 }, {
   id: 'TempHumidity',
   content: TempHumidity
@@ -42,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,27 +44,46 @@ export declare const useMultiCameraCtx: (props: Props) => {
      * 选中镜头信息
      */
     selectedLenInfo: import("../interface").RetAtom<MultiCameraLenInfo>;
+    /**
+     * 本轮点击周期内是否触发了镜头选中事件
+     */
+    selectVideoFiredRef: import("react").MutableRefObject<boolean>;
+    /**
+     * 最新选中镜头信息（同步引用，避免依赖渲染时机）
+     */
+    selectedLenInfoRef: import("react").MutableRefObject<MultiCameraLenInfo>;
     /**
      * ptz状态
      */
     ptzStatus: import("../interface").RetAtom<boolean>;
+    /**
+     * 多目设备支持的 dp
+     */
+    dpSupportMap: Record<"ptz_control" | "ipc_multi_locate_coor" | "zoom_control" | "ipc_multi_locate_coors" | "ipc_multi_ptz_control" | "ipc_multi_zoom_control", boolean>;
     /**
      * 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;
     };
     /**
      * 设置布局样式
      */
-    setLayoutStyle: (style: MultiCameraLayoutStyle) => void;
+    setLayoutStyle: (this: unknown, style: MultiCameraLayoutStyle) => void;
     /**
      * 设置屏幕模式
      */
-    setScreenMode: (mode: MultiCameraScreenMode) => void;
+    setScreenMode: (this: unknown, mode: MultiCameraScreenMode) => void;
     /**
      * 设置ptz状态
      */
@@ -60,7 +91,7 @@ export declare const useMultiCameraCtx: (props: Props) => {
     /**
      * 显示/隐藏镜头名称
      */
-    showLenNames: (value: boolean) => void;
+    showLenNames: (this: unknown, value: boolean) => void;
     /**
      * 设置下一个布局样式
      */
@@ -68,6 +99,10 @@ export declare const useMultiCameraCtx: (props: Props) => {
     /**
      * 获取下一个布局样式
      */
-    getNextLayoutStyle: () => Promise<MultiCameraLayoutStyle>;
+    getNextLayoutStyle: (this: unknown) => Promise<MultiCameraLayoutStyle>;
+    /**
+     * 设置多目镜头视图数据
+     */
+    setViewData: (this: unknown, dataSource: MultiCameraViewDataSource) => void;
 };
 export {};

package/lib/ctx/multiCameraCtx.js

@@ -1,14 +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 } from 'react';
+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
+};
 /**
  * 多目摄像头相关状态、方法维护
  */
@@ -21,19 +37,24 @@ export const useMultiCameraCtx = 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 dpSupportMap = useDpSupport({
+    devId,
+    dpCodes: DP_CODES
+  });
+
+  // PTZ控制定时器
+  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 => {
@@ -46,25 +67,123 @@ export const useMultiCameraCtx = props => {
     setScreenMode(screenMode);
   });
   const handleLocalizerViewLocated = useMemoizedFn(async event => {
+    var _event$detail;
     console.info('onLocalizerViewLocated', JSON.stringify(event === null || event === void 0 ? void 0 : event.detail));
-    const dpData = await getDpIdByCode(devId, 'ipc_multi_locate_coors');
+    const locateDpConfig = dpSupportMap.ipc_multi_locate_coors ? {
+      code: 'ipc_multi_locate_coors',
+      value: JSON.stringify(event.detail)
+    } : dpSupportMap.ipc_multi_locate_coor ? {
+      code: 'ipc_multi_locate_coor',
+      value: String((_event$detail = event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.coor)
+    } // 兼容老 dp
+    : null;
+    if (!locateDpConfig) return;
+    const dpData = await getDpIdByCode(devId, locateDpConfig.code);
     if (dpData.code === 0) {
-      const dpId = dpData.data;
-      const sndDpValue = JSON.stringify(event.detail);
       publishDps(devId, {
-        [dpId]: sndDpValue
+        [dpData.data]: locateDpConfig.value
       });
     }
   });
+  const handleSwipeAtVideoIndex = useMemoizedFn(async event => {
+    console.info('onSwipeAtVideoIndex', JSON.stringify(event === null || event === void 0 ? void 0 : event.detail));
+    const {
+      index,
+      direction,
+      isStop
+    } = (event === null || event === void 0 ? void 0 : event.detail) || {};
+
+    // 停止当前PTZ的通用方法
+    const stopPtz = async () => {
+      const stopConfig = dpSupportMap.ipc_multi_ptz_control ? {
+        code: 'ipc_multi_ptz_stop',
+        value: JSON.stringify({
+          index
+        })
+      } : dpSupportMap.ptz_control ? {
+        code: 'ptz_stop',
+        value: true
+      } : null;
+      if (stopConfig) {
+        const ptzStopData = await getDpIdByCode(devId, stopConfig.code);
+        if (ptzStopData.code === 0) {
+          publishDps(devId, {
+            [ptzStopData.data]: stopConfig.value
+          });
+        }
+      }
+
+      // 清除定时器
+      if (ptzTimerRef.current) {
+        clearInterval(ptzTimerRef.current);
+        ptzTimerRef.current = null;
+      }
+    };
+
+    // isStop === true 表示结束事件，只需停止PTZ
+    if (isStop) {
+      await stopPtz();
+      return;
+    }
+
+    // !isStop 表示开始事件或方向变化事件
+    // 先停止旧方向，再启动新方向
+    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(directionValue)
+        })
+      } : dpSupportMap.ptz_control ? {
+        code: 'ptz_control',
+        value: String(directionValue)
+      } : null;
+      if (!ptzConfig) return;
+
+      // 3. 启动新方向的PTZ控制
+      const dpData = await getDpIdByCode(devId, ptzConfig.code);
+      if (dpData.code === 0) {
+        const ptzControlId = dpData.data;
+
+        // 立即发送一次新方向
+        publishDps(devId, {
+          [ptzControlId]: ptzConfig.value
+        });
+
+        // 每秒持续发送新方向
+        ptzTimerRef.current = setInterval(() => {
+          publishDps(devId, {
+            [ptzControlId]: ptzConfig.value
+          });
+        }, 1000);
+      }
+    }
+  });
   const extendProps = useMemo(() => {
-    return {
-      // type: 4 表示多目摄像头
-      type: isSupport ? 4 : undefined,
+    return isSupport ? {
+      type: 4,
+      // 表示多目摄像头
       onSelectVideoIndex: handleSelectVideoIndex,
       onLayoutStatusChanged: handleLayoutStatusChanged,
-      onLocalizerViewLocated: handleLocalizerViewLocated
-    };
-  }, [videoSplitProtocol]);
+      onLocalizerViewLocated: handleLocalizerViewLocated,
+      onSwipeAtVideoIndex: handleSwipeAtVideoIndex
+    } : {};
+  }, [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, {
@@ -116,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 {
     /**
      * 是否支持多目
@@ -141,10 +271,22 @@ export const useMultiCameraCtx = props => {
      * 选中镜头信息
      */
     selectedLenInfo: selectedLenInfoAtom,
+    /**
+     * 本轮点击周期内是否触发了镜头选中事件
+     */
+    selectVideoFiredRef,
+    /**
+     * 最新选中镜头信息（同步引用，避免依赖渲染时机）
+     */
+    selectedLenInfoRef,
     /**
      * ptz状态
      */
     ptzStatus: ptzStatusAtom,
+    /**
+     * 多目设备支持的 dp
+     */
+    dpSupportMap,
     /**
      * ipcPlayer extendProps
      */
@@ -172,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/hooks/index.d.ts

@@ -1,7 +1,9 @@
 export * from './useBattery';
 export * from './useHumidity';
 export * from './useTemperature';
+export * from './useSignal4G';
 export * from './useDpState';
 export * from './useMemoizedFn';
 export * from './usePtz';
 export * from './useSchemaInfo.tsx';
+export * from './useDpSupport';

package/lib/hooks/index.js

@@ -1,7 +1,9 @@
 export * from './useBattery';
 export * from './useHumidity';
 export * from './useTemperature';
+export * from './useSignal4G';
 export * from './useDpState';
 export * from './useMemoizedFn';
 export * from './usePtz';
-export * from './useSchemaInfo.tsx';
+export * from './useSchemaInfo.tsx';
+export * from './useDpSupport';

package/lib/hooks/useDpSupport/index.d.ts

@@ -0,0 +1,6 @@
+interface Options {
+    devId?: string;
+    dpCodes: string[];
+}
+export declare function useDpSupport(options: Options): Record<string, boolean>;
+export {};

package/lib/hooks/useDpSupport/index.js

@@ -0,0 +1,47 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.iterator.reduce.js";
+import { useEffect, useState } from 'react';
+import { getDeviceInfo } from '@ray-js/ray';
+export function useDpSupport(options) {
+  const {
+    devId,
+    dpCodes
+  } = options;
+  const [supportedMap, setSupportedMap] = useState(() => {
+    var _dpCodes$reduce;
+    return (_dpCodes$reduce = dpCodes === null || dpCodes === void 0 ? void 0 : dpCodes.reduce((acc, code) => {
+      acc[code] = false;
+      return acc;
+    }, {})) !== null && _dpCodes$reduce !== void 0 ? _dpCodes$reduce : {};
+  });
+  useEffect(() => {
+    if (!devId || !Array.isArray(dpCodes) || dpCodes.length === 0) {
+      var _dpCodes$reduce2;
+      setSupportedMap((_dpCodes$reduce2 = dpCodes === null || dpCodes === void 0 ? void 0 : dpCodes.reduce((acc, code) => {
+        acc[code] = false;
+        return acc;
+      }, {})) !== null && _dpCodes$reduce2 !== void 0 ? _dpCodes$reduce2 : {});
+      return;
+    }
+    getDeviceInfo({
+      deviceId: devId,
+      success: res => {
+        const schemaList = Array.isArray(res === null || res === void 0 ? void 0 : res.schema) ? res.schema : [];
+        const schemaCodes = new Set(schemaList.map(item => item.code));
+        const nextMap = dpCodes.reduce((acc, code) => {
+          acc[code] = schemaCodes.has(code);
+          return acc;
+        }, {});
+        setSupportedMap(nextMap);
+      },
+      fail: () => {
+        setSupportedMap(dpCodes.reduce((acc, code) => {
+          acc[code] = false;
+          return acc;
+        }, {}));
+      }
+    });
+  }, [devId, dpCodes]);
+  return supportedMap;
+}

package/lib/hooks/useSignal4G/index.d.ts

@@ -0,0 +1,2 @@
+import type { UseSignal4G } from '../../ports.output';
+export declare const useSignal4G: UseSignal4G;

package/lib/hooks/useSignal4G/index.js

@@ -0,0 +1,35 @@
+import { useCallback, useMemo } from 'react';
+import { useDpState } from '../useDpState';
+const CELLULAR_SIGNAL_DP_CODE = 'ipc_cellular_signal';
+export const useSignal4G = devId => {
+  const [dpState, dpSchema] = useDpState({
+    devId,
+    dpCodes: [CELLULAR_SIGNAL_DP_CODE]
+  });
+
+  /**
+   * 获取信号图片key
+   */
+
+  const getSignalKey = useCallback(dpValue => {
+    var _dpSchema$CELLULAR_SI;
+    const range = (_dpSchema$CELLULAR_SI = dpSchema[CELLULAR_SIGNAL_DP_CODE]) === null || _dpSchema$CELLULAR_SI === void 0 || (_dpSchema$CELLULAR_SI = _dpSchema$CELLULAR_SI.property) === null || _dpSchema$CELLULAR_SI === void 0 ? void 0 : _dpSchema$CELLULAR_SI.range;
+    if (range.length <= 4) {
+      return `signalThree${dpValue}`;
+    }
+    return `signalFour${dpValue}`;
+  }, [dpSchema]);
+  const signalInfo = useMemo(() => {
+    if (dpState[CELLULAR_SIGNAL_DP_CODE] !== undefined) {
+      return {
+        dpValue: dpState[CELLULAR_SIGNAL_DP_CODE],
+        signalKey: getSignalKey(dpState[CELLULAR_SIGNAL_DP_CODE])
+      };
+    }
+    return {
+      dpValue: '',
+      signalKey: ''
+    };
+  }, [dpState]);
+  return signalInfo;
+};

package/lib/index.d.ts

@@ -3,4 +3,5 @@ export * from './ctx';
 export * from './interface';
 import * as Widgets from './widgets';
 import * as Features from './features';
-export { Widgets, Features };
+import * as Utils from './utils';
+export { Widgets, Features, Utils };

package/lib/index.js

@@ -3,4 +3,5 @@ export * from './ctx';
 export * from './interface';
 import * as Widgets from './widgets';
 import * as Features from './features';
-export { Widgets, Features };
+import * as Utils from './utils';
+export { Widgets, Features, Utils };