@ray-js/ipc-player-integration 0.0.1-beta-32 → 0.0.1-beta-34

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

@@ -1 +1,10 @@
+import { FullScreen } from '../plugins';
+import { ComponentConfig } from '../interface';
+export declare const defaultTopLeftContent: ComponentConfig[];
+export declare const defaultTopRightContent: ComponentConfig[];
+export declare const defaultBottomLeftContent: ComponentConfig[];
+export declare const defaultBottomRightContent: {
+    id: string;
+    content: typeof FullScreen;
+}[];
 export declare const useCtx: import("../interface").UseCtx;

package/lib/ctx/ctx.composition.js

@@ -9,11 +9,11 @@ import { authorizeStatus } from '../utils/authorize';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
 
-const topLeftContent = [{
+export const defaultTopLeftContent = [{
   id: 'Battery',
   content: Battery
 }];
-const topRightContent = [{
+export const defaultTopRightContent = [{
   id: 'BatteryFull',
   content: BatteryFull
 }, {
@@ -23,9 +23,10 @@ const topRightContent = [{
   id: 'VideoBitKBP',
   content: VideoBitKBP
 }];
-const bottomLeftContent = [{
+export const defaultBottomLeftContent = [{
   id: 'FullSmallIntercom',
-  content: FullSmallIntercom
+  content: FullSmallIntercom,
+  hidden: true
 }, {
   id: 'Screenshot',
   content: Screenshot
@@ -45,7 +46,7 @@ const bottomLeftContent = [{
   id: 'Resolution',
   content: Resolution
 }];
-const bottomRightContent = [{
+export const defaultBottomRightContent = [{
   id: 'FullScreen',
   content: FullScreen
 }];
@@ -105,10 +106,10 @@ const setMuteMemoryState = (devId, value) => {
 };
 export const useCtx = createUseCtx({
   createPlayContext,
-  defaultTopLeftContent: topLeftContent,
-  defaultTopRightContent: topRightContent,
-  defaultBottomLeftContent: bottomLeftContent,
-  defaultBottomRightContent: bottomRightContent,
+  defaultTopLeftContent: [],
+  defaultTopRightContent: [],
+  defaultBottomLeftContent: [],
+  defaultBottomRightContent: [],
   defaultAbsoluteContent: absoluteContent,
   authorizeStatus: authorizeStatus,
   toast,

package/lib/ctx/ctx.js

@@ -46,9 +46,6 @@ export const createUseCtx = _ref => {
     // 竖屏下是否展示对讲, 默认展示
     const [verticalMic, setVerticalMic] = useAtom(true);
 
-    // ptz 是否点击
-    const [ptzActive, setPtzActive] = useAtom(false);
-
     // resolution 当前清晰度
     const [resolution] = useAtom('HD');
     // resolution 清晰度列表
@@ -57,9 +54,6 @@ export const createUseCtx = _ref => {
     // 单向对讲还是双向对讲
     const [intercomMode, setIntercomMode] = useAtom(IntercomMode.TwoWay);
 
-    // 全屏清晰度UI切换是否展示
-    const [fullResolutionActive, setFullResolutionActive] = useAtom(false);
-
     // 对讲中
     const [intercom] = useAtom(false);
     const [playState] = useAtom(PlayState.CONNECTING);
@@ -83,11 +77,41 @@ export const createUseCtx = _ref => {
           console.log('==== getMemoryState ====', res);
           _setMute(res.mute);
           setIntercomMode(res.intercomMode);
-          _setResolution(res.resolution, 'res.resolution');
+          _setResolution(res.resolution);
           setResolutionList(res.resolutionList);
         });
       }
     }, [devId, _playState]);
+    const changeContentHiddenData = (type, id, hidden) => {
+      const store = getDefaultStore();
+      let targetStore;
+      if (type === 'topLeft') {
+        targetStore = topLeftContent;
+      } else if (type === 'topRight') {
+        targetStore = topRightContent;
+      } else if (type === 'bottomLeft') {
+        targetStore = bottomLeftContent;
+      } else if (type === 'bottomRight') {
+        targetStore = bottomRightContent;
+      } else {
+        targetStore = absoluteContent;
+      }
+      const contentList = store.get(targetStore);
+      let hasChange = false;
+      const newData = contentList.map(item => {
+        if (item.id === id && item.hidden !== hidden) {
+          item.hidden = hidden;
+          hasChange = true;
+        }
+        return item;
+      });
+      if (hasChange) {
+        updateAtom(targetStore, newData);
+      }
+    };
+
+    // 判断是否已经有了对应id的content
+
     const IPCPlayerInstance = useRef();
     if (!IPCPlayerInstance.current) {
       IPCPlayerInstance.current = createPlayContext(devId);
@@ -153,8 +177,6 @@ export const createUseCtx = _ref => {
       mute,
       resolution,
       resolutionList,
-      ptzActive,
-      fullResolutionActive,
       intercom,
       intercomMode,
       playState,
@@ -244,8 +266,6 @@ export const createUseCtx = _ref => {
         });
       },
       setRecordingDisabled,
-      setPtzActive,
-      setFullResolutionActive,
       setScreenType,
       topLeftContent,
       topRightContent,
@@ -256,11 +276,9 @@ export const createUseCtx = _ref => {
         let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
         // 组合数据, 保存到对应位置, 并去重
         const createNewData = (originData, newData, position) => {
-          // 如果newData是数组, 则插入整个数组
-          if (Array.isArray(newData)) {
-            return [...originData.slice(0, position), ...newData, ...originData.slice(position)];
-          }
-          return [...originData.slice(0, position), newData, ...originData.slice(position)];
+          const _newData = Array.isArray(newData) ? newData : [newData];
+          if (position === -1) return [...originData, ..._newData];
+          return [...originData.slice(0, position), ..._newData, ...originData.slice(position)];
         };
         if (type === 'topLeft') {
           updateAtom(topLeftContent, prevValue => createNewData(prevValue, config, position));
@@ -287,6 +305,29 @@ export const createUseCtx = _ref => {
           updateAtom(absoluteContent, prevValue => prevValue.filter(item => item.id !== id));
         }
       },
+      hideContent: (type, id) => {
+        changeContentHiddenData(type, id, true);
+      },
+      showContent: (type, id) => {
+        changeContentHiddenData(type, id, false);
+      },
+      hasContent: (type, id) => {
+        const store = getDefaultStore();
+        let contentList;
+        if (type === 'topLeft') {
+          contentList = store.get(topLeftContent);
+        } else if (type === 'topRight') {
+          contentList = store.get(topRightContent);
+        } else if (type === 'bottomLeft') {
+          contentList = store.get(bottomLeftContent);
+        } else if (type === 'bottomRight') {
+          contentList = store.get(bottomRightContent);
+        } else {
+          contentList = store.get(absoluteContent);
+        }
+        const target = contentList.find(item => item.id === id);
+        return !!target;
+      },
       IPCPlayerInstance: IPCPlayerInstance.current,
       changeStreamStatus: status => {
         streamStatus.current = status;

package/lib/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './useBattery';
 export * from './useHumidity';
 export * from './useTemperature';
 export * from './useDpState';
+export * from './useMemoizedFn';

package/lib/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useBattery';
 export * from './useHumidity';
 export * from './useTemperature';
-export * from './useDpState';
+export * from './useDpState';
+export * from './useMemoizedFn';

package/lib/hooks/useDpState/useDpState.d.ts

@@ -1,6 +1,7 @@
 type Options<T> = {
     devId: string;
     dpCodes: T[];
+    listenDpChange?: boolean;
 };
 type Schema = {
     id: number;
@@ -16,5 +17,9 @@ type Schema = {
         range?: Array<unknown>;
     };
 };
-export declare function useDpState<T extends string>(options: Options<T>): [Record<T, number | string | boolean>, Record<string, Schema>];
+export declare function useDpState<T extends string>(options: Options<T>): [
+    Record<T, number | string | boolean>,
+    Record<string, Schema>,
+    (data: Partial<Record<T, number | string | boolean>>) => void
+];
 export {};

package/lib/hooks/useDpState/useDpState.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { getDeviceInfo, onDpDataChange, offDpDataChange } from '@ray-js/ray';
+import { useMemoizedFn } from '../useMemoizedFn';
 function getInitData(codes) {
   return codes.reduce((ret, key) => {
     return _objectSpread(_objectSpread({}, ret), {}, {
@@ -11,9 +12,11 @@ function getInitData(codes) {
 export function useDpState(options) {
   const {
     devId,
-    dpCodes
+    dpCodes,
+    listenDpChange: listenDpChangeFlag = true
   } = options;
   const codeMapToIdRef = useRef();
+  const idMapToCode = useRef();
   const dpCodeSchemaMapsRef = useRef();
   const [values, setValues] = useState(() => {
     return getInitData(options.dpCodes);
@@ -30,7 +33,7 @@ export function useDpState(options) {
       let hasChange = false;
       const newValue = _objectSpread({}, valueRef.current);
       Object.keys(dps).forEach(dpId => {
-        const dpCode = codeMapToIdRef.current[dpId];
+        const dpCode = idMapToCode.current[dpId];
         const currentValue = dps[dpId];
         if (dpCode && typeof currentValue !== 'undefined') {
           hasChange = hasChange || true;
@@ -51,6 +54,7 @@ export function useDpState(options) {
             schema
           } = res;
           const IdMapToCode = {};
+          const codeMapToId = {};
           const dpCodeSchemaMaps = {};
           let count = 0;
           for (const schemaItem of schema) {
@@ -60,11 +64,14 @@ export function useDpState(options) {
               IdMapToCode[schemaItem.id] = schemaItem.code;
               // @ts-ignore
               dpCodeSchemaMaps[schemaItem.code] = schemaItem;
+              // @ts-ignore
+              codeMapToId[schemaItem.code] = schemaItem.id;
               count += 1;
             }
             if (count >= dpCodes.length) break;
           }
-          codeMapToIdRef.current = IdMapToCode;
+          idMapToCode.current = IdMapToCode;
+          codeMapToIdRef.current = codeMapToId;
           dpCodeSchemaMapsRef.current = dpCodeSchemaMaps;
           const initValue = options.dpCodes.reduce((ret, key) => {
             return _objectSpread(_objectSpread({}, ret), {}, {
@@ -77,10 +84,31 @@ export function useDpState(options) {
     }
   }, [devId]);
   useEffect(() => {
-    onDpDataChange(listenDpChange);
+    if (listenDpChangeFlag) {
+      onDpDataChange(listenDpChange);
+    }
     return () => {
       offDpDataChange(listenDpChange);
     };
   }, [listenDpChange]);
-  return [values, dpCodeSchemaMapsRef.current];
+  const sendDp = useMemoizedFn(data => {
+    const sendData = {};
+    Object.keys(data).forEach(key => {
+      sendData[codeMapToIdRef.current[key]] = data[key];
+    });
+    ty.device.publishDps({
+      deviceId: devId,
+      mode: 1,
+      dps: sendData,
+      pipelines: [0, 1, 2, 3, 4, 5, 6],
+      options: {},
+      success: res => {
+        console.log('publishDps success', res);
+      },
+      fail: error => {
+        console.log('publishDps fail', error);
+      }
+    });
+  });
+  return [values, dpCodeSchemaMapsRef.current, sendDp];
 }

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

@@ -0,0 +1 @@
+export { useMemoizedFn } from 'ahooks';

package/lib/hooks/useMemoizedFn/index.js

@@ -0,0 +1 @@
+export { useMemoizedFn } from 'ahooks';

package/lib/iconfont/iconfont.css

@@ -1,18 +1,81 @@
 @font-face {
   font-family: "icon-panel"; /* Project id 4727767 */
-  src: url('iconfont.woff2?t=1736394199505') format('woff2'),
-       url('iconfont.woff?t=1736394199505') format('woff'),
-       url('iconfont.ttf?t=1736394199505') format('truetype');
+  src: url('iconfont.woff2?t=1739342026633') format('woff2'),
+       url('iconfont.woff?t=1739342026633') format('woff'),
+       url('iconfont.ttf?t=1739342026633') format('truetype');
 }
 
 .icon-panel {
   font-family: "icon-panel" !important;
-  font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-panel-close:before {
+  content: "\e646";
+}
+
+.icon-panel-move-control-interactive:before {
+  content: "\e645";
+}
+
+.icon-panel-move-control-waltz:before {
+  content: "\e642";
+}
+
+.icon-panel-move-control-8:before {
+  content: "\e648";
+}
+
+.icon-panel-move-control-p-steering:before {
+  content: "\e649";
+}
+
+.icon-panel-move-control-straight-line:before {
+  content: "\e64a";
+}
+
+.icon-panel-move-control-rotate-place:before {
+  content: "\e64b";
+}
+
+.icon-panel-move-control-chacha:before {
+  content: "\e64c";
+}
+
+.icon-panel-tange1:before {
+  content: "\e64e";
+}
+
+.icon-panel-move-control-big-rotation:before {
+  content: "\e64f";
+}
+
+.icon-panel-move-control-wave:before {
+  content: "\e650";
+}
+
+.icon-panel-move-control-z:before {
+  content: "\e651";
+}
+
+.icon-panel-move-control-rotation:before {
+  content: "\e647";
+}
+
+.icon-panel-yuyin:before {
+  content: "\e63c";
+}
+
+.icon-panel-cloud-storage:before {
+  content: "\e63b";
+}
+
+.icon-panel-talking:before {
+  content: "\e63a";
+}
+
 .icon-panel-record-play:before {
   content: "\e637";
 }
@@ -125,10 +188,6 @@
   content: "\e612";
 }
 
-.icon-panel-one-way-intercom:before {
-  content: "\e611";
-}
-
 .icon-panel-playback:before {
   content: "\e610";
 }