@ray-js/ipc-player-integration 0.0.1-beta-22 → 0.0.1-beta-23

package/lib/ctx/ctx.js

@@ -1,4 +1,5 @@
 import { useRef, useCallback, useEffect } from 'react';
+import Strings from '../i18n';
 import { useAtom, updateAtom, getDefaultStore, useStore } from './store';
 import { PlayState, IntercomMode } from '../interface';
 import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
@@ -33,11 +34,14 @@ export const createUseCtx = _ref => {
     // 录像中
     const [recording] = useAtom(false);
 
+    // 录像是否不可点击
+    const [recordingDisabled, setRecordingDisabled] = useAtom(false);
+
     // 静音 true 代表静音 false 代表不静音
     const [mute] = useAtom(true);
 
     // 品牌色 默认
-    const [brandColor, setBrandColor] = useAtom('#FF592A');
+    const [brandColor, setBrandColor] = useAtom('#4b9ae9');
 
     // ptz 是否点击
     const [ptzActive, setPtzActive] = useAtom(false);
@@ -141,6 +145,7 @@ export const createUseCtx = _ref => {
       saveToAlbum,
       screenType,
       recording,
+      recordingDisabled,
       mute,
       resolution,
       resolutionList,
@@ -196,7 +201,9 @@ export const createUseCtx = _ref => {
         const store = getDefaultStore();
         const _recording = store.get(recording);
         if (target && target === _recording) {
-          console.log('Cannot record during video recording');
+          toast({
+            title: Strings.getLang('ipc_player_recording_now_tip')
+          });
           return false;
         }
         return new Promise((resolve, reject) => {
@@ -214,15 +221,15 @@ export const createUseCtx = _ref => {
           } else {
             IPCPlayerInstance.current.stopRecord({
               saveToAlbum,
-              success: () => {
+              success: res => {
                 updateAtom(recording, false);
-                resolve(true);
+                resolve(res);
               },
               fail: err => {
-                updateAtom(recording, true);
+                updateAtom(recording, false);
                 reject(err);
                 const errObj = err.innerError || err || {};
-                const errMsg = errObj.errorMsg || I18n.t('error_recording');
+                const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_stop_recording_err');
                 toast({
                   title: errMsg
                 });
@@ -231,6 +238,7 @@ export const createUseCtx = _ref => {
           }
         });
       },
+      setRecordingDisabled,
       setPtzActive,
       setFullResolutionActive,
       setScreenType,

package/lib/i18n/index.d.ts

@@ -5,30 +5,46 @@ declare const Strings: kit.I18N<{
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
 }, {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
-    ipc_player_recording_success_tip: string;
-    ipc_player_shot_or_record_check: string;
+    ipc_player_error_screenshot_error_tip: string;
+    ipc_player_record_success_tip: string;
+    ipc_player_shot_success_check: string;
+    ipc_player_record_success_check: string;
+    ipc_player_recording_now_tip: string;
+    ipc_player_stop_recording_err: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
-    ipc_player_recording_success_tip: string;
-    ipc_player_shot_or_record_check: string;
+    ipc_player_error_screenshot_error_tip: string;
+    ipc_player_record_success_tip: string;
+    ipc_player_shot_success_check: string;
+    ipc_player_record_success_check: string;
+    ipc_player_recording_now_tip: string;
+    ipc_player_stop_recording_err: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -4,16 +4,24 @@ declare const _default: {
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
-        ipc_player_recording_success_tip: string;
-        ipc_player_shot_or_record_check: string;
+        ipc_player_error_screenshot_error_tip: string;
+        ipc_player_record_success_tip: string;
+        ipc_player_shot_success_check: string;
+        ipc_player_record_success_check: string;
+        ipc_player_recording_now_tip: string;
+        ipc_player_stop_recording_err: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -4,15 +4,23 @@ export default {
     ipc_player_resolution_SD: 'SD',
     ipc_player_current_resolution_is_equal: 'Already at current clarity',
     ipc_player_screenshot_success_tip: 'Screenshot saved to album',
-    ipc_player_recording_success_tip: 'Recording saved to album',
-    ipc_player_shot_or_record_check: 'View'
+    ipc_player_error_screenshot_error_tip: 'Screenshot failed. Please try again later.',
+    ipc_player_record_success_tip: 'Recording saved to album',
+    ipc_player_shot_success_check: 'View',
+    ipc_player_record_success_check: 'View',
+    ipc_player_recording_now_tip: 'Recording in progress...',
+    ipc_player_stop_recording_err: 'Failed to stop recording. Please exit and try again.'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
     ipc_player_resolution_SD: '标清',
     ipc_player_current_resolution_is_equal: '已是当前清晰度',
     ipc_player_screenshot_success_tip: '截图已保存在APP相册',
-    ipc_player_recording_success_tip: '录像已保存在APP相册',
-    ipc_player_shot_or_record_check: '查看'
+    ipc_player_error_screenshot_error_tip: '截图失败了，请稍后再试',
+    ipc_player_record_success_tip: '录像已保存在APP相册',
+    ipc_player_shot_success_check: '查看',
+    ipc_player_record_success_check: '查看',
+    ipc_player_recording_now_tip: '正在录像中...',
+    ipc_player_stop_recording_err: '结束录像失败，请退出重试'
   }
 };

package/lib/interface.d.ts

@@ -72,8 +72,9 @@ export type ComponentConfig<T = ReturnType<UseCtx> & Record<string, any>> = {
     id: string;
     content: (props: T) => React.ReactElement;
     initProps?: T;
-    absolutePosition?: Pick<React.CSSProperties, 'top' | 'left' | 'right' | 'bottom'>;
+    absolutePosition?: React.CSSProperties;
     absoluteContentClassName?: string;
+    absoluteContentStyle?: React.CSSProperties;
 };
 export type ComponentConfigProps = {
     IPCPlayerContext: IpcContext;
@@ -82,3 +83,8 @@ export type PlayStatusData = {
     playState: PlayState;
     playCode: number;
 };
+export type RecordInfoData = boolean | {
+    tempImagePath: string;
+    filePath: string;
+    thumbPath: string;
+};

package/lib/plugins/fullScreen/fullScreen.js

@@ -58,9 +58,7 @@ export function FullScreen(props) {
     addContent('absolute', {
       id: voiceIntercomId,
       content: props => {
-        return /*#__PURE__*/React.createElement(View, {
-          className: clsx('ipc-player-plugin-full-screen-voice')
-        }, /*#__PURE__*/React.createElement(VoiceIntercom, props));
+        return /*#__PURE__*/React.createElement(VoiceIntercom, props);
       },
       absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
       initProps: _objectSpread({}, props)

package/lib/plugins/fullScreen/fullScreen.less

@@ -11,8 +11,9 @@
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
+  // transform: translate(180%, 0);
   right: calc(36px * var(--ipc-player-size-scale, 1));;
-  z-index: 3;
+  z-index: 340;
 }
 
 .ipc-player-plugin-full-screen-voice {

package/lib/plugins/fullScreen/voiceIntercom.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import { CoverView } from '@ray-js/ray';
+import { View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { VoiceIntercom as Component } from '../voiceIntercom';
 import { useComponentHideState } from '../../ui/hooks';
@@ -21,7 +21,7 @@ export function VoiceIntercom(props) {
   const {
     event
   } = useContext(UIEventContext);
-  return /*#__PURE__*/React.createElement(CoverView, {
+  return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-screen-voice', {
       'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive || fullResolutionActive
     })

package/lib/plugins/ptz/ptz.js

@@ -17,10 +17,12 @@ export const Ptz = props => {
   } = props;
   const {
     screenType,
-    isPtzActive
+    isPtzActive,
+    brandColor
   } = useStore({
     screenType: screenTypeAtom,
-    isPtzActive: ptzActive
+    isPtzActive: ptzActive,
+    brandColor: props.brandColor
   });
   if (screenType === 'vertical') {
     return null;
@@ -33,9 +35,7 @@ export const Ptz = props => {
         addContent('absolute', {
           id: ptzControlId,
           content: props => {
-            return /*#__PURE__*/React.createElement(View, {
-              className: "ipc-player-plugin-full-screen-ptz-control"
-            }, /*#__PURE__*/React.createElement(PtzControl, props));
+            return /*#__PURE__*/React.createElement(PtzControl, props);
           },
           absoluteContentClassName: 'ipc-player-plugin-full-screen-ptz-control-warp',
           initProps: _objectSpread({}, props)
@@ -46,6 +46,9 @@ export const Ptz = props => {
       updateAtom(ptzActive, !isPtzActive);
     }
   }, /*#__PURE__*/React.createElement(Text, {
-    className: clsx('icon-panel', 'icon-panel-ptz', 'ipc-player-plugin-ptz-text-icon', isPtzActive && 'ipc-ptz-active')
+    className: clsx('icon-panel', 'icon-panel-ptz', 'ipc-player-plugin-ptz-text-icon'),
+    style: _objectSpread({}, isPtzActive && {
+      color: brandColor
+    })
   }));
 };

package/lib/plugins/ptz/ptz.less

@@ -2,11 +2,6 @@
   color: var(--iconColor);
   font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }
-
-.ipc-ptz-active {
-  color: var(--iconActiveColor);
-}
-
 // .ipc-player-plugin-full-screen-ptz {
 //   position: absolute;
 //   top: 60%;
@@ -35,7 +30,7 @@
 }
 
 .arrow-icon-wrapper {
-  font-size: 12px;
+  font-size: 25px;
   color: #707070;
 }
 

package/lib/plugins/ptz/ptzControl.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { ComponentConfigProps } from '../../interface';
-import './ptz.less';
 export declare const PtzControl: (props: ComponentConfigProps) => React.JSX.Element;

package/lib/plugins/ptz/ptzControl.js

@@ -1,13 +1,43 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { CoverView } from '@ray-js/ray';
 import clsx from 'clsx';
+import _find from 'lodash/find';
+import _get from 'lodash/get';
 import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
+import IpcUtils from '@ray-js/ray-ipc-utils';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
+import { getEnumRangeIsValid } from '../../utils/device';
 import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
-import './ptz.less';
+import Styles from './ptz.less';
+const getPtzData = devId => {
+  return [{
+    type: 'top',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '0'),
+    dpValue: '0',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'right',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '2'),
+    dpValue: '2',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'left',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '6'),
+    dpValue: '6',
+    icon: 'ptz-arrow'
+  }, {
+    type: 'bottom',
+    show: getEnumRangeIsValid(devId, 'ptz_control', '4'),
+    dpValue: '4',
+    icon: 'ptz-arrow'
+  }];
+};
 export const PtzControl = props => {
+  const {
+    devId
+  } = props;
   const {
     screenType,
     brandColor
@@ -19,6 +49,16 @@ export const PtzControl = props => {
   const {
     event
   } = useContext(UIEventContext);
+  const ptzTimeId = useRef(null);
+  const ptzData = useRef(getPtzData(devId));
+  useEffect(() => {
+    return () => {
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
       'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide
@@ -26,38 +66,44 @@ export const PtzControl = props => {
   }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
     ptzSize: "172px",
     zoomData: [],
-    ptzData: [{
-      type: 'top',
-      // show: getEnumRangeIsValid('ptz_control', '0'),
-      show: true,
-      dpValue: '0',
-      icon: 'ptz-arrow'
-    }, {
-      type: 'right',
-      // show: getEnumRangeIsValid('ptz_control', '2'),
-      show: true,
-      dpValue: '2',
-      icon: 'ptz-arrow'
-    }, {
-      type: 'left',
-      // show: getEnumRangeIsValid('ptz_control', '6'),
-      show: true,
-      dpValue: '6',
-      icon: 'ptz-arrow'
-    }, {
-      type: 'bottom',
-      // show: getEnumRangeIsValid('ptz_control', '4'),
-      show: true,
-      dpValue: '4',
-      icon: 'ptz-arrow'
-    }],
-    onTouchPtzStart: () => {
+    ptzData: ptzData.current,
+    onTouchPtzStart: async data => {
       event.emit(pauseTimeToHideAllComponent);
+      const {
+        type
+      } = data;
+      const dpData = await IpcUtils.getDpIdByCode(devId, 'ptz_control');
+      if (dpData.code === 0) {
+        const ptzControlId = dpData.data;
+        const sndDpValue = _get(_find(ptzData.current, {
+          type
+        }), 'dpValue', null);
+        IpcUtils.publishDps(devId, {
+          [ptzControlId]: sndDpValue
+        });
+        ptzTimeId.current = setInterval(() => {
+          IpcUtils.publishDps(devId, {
+            [ptzControlId]: sndDpValue
+          });
+        }, 1000);
+      }
     },
-    onTouchPtzEnd: () => {
+    onTouchPtzEnd: async () => {
+      const ptzStopData = await IpcUtils.getDpIdByCode(devId, 'ptz_stop');
+      if (ptzStopData.code === 0) {
+        const ptzStopId = ptzStopData.data;
+        IpcUtils.publishDps(devId, {
+          [ptzStopId]: true
+        });
+      }
+      if (ptzTimeId.current) {
+        clearInterval(ptzTimeId.current);
+        ptzTimeId.current = null;
+      }
       event.emit(startTimeToHideAllComponent);
     },
     brandColor: brandColor,
-    iconClassName: clsx('arrow-icon-wrapper')
+    iconClassName: Styles['arrow-icon-wrapper'],
+    darkMode: true
   }));
 };

package/lib/plugins/recordVideo/recordVideo.js

@@ -1,11 +1,16 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
-import { View, Text } from '@ray-js/ray';
+import { View, Text, Image } from '@ray-js/ray';
+import { useSetState, useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
+import IpcUtils from '@ray-js/ray-ipc-utils';
+import Strings from '../../i18n';
 import { UIEventContext } from '../../ui/context';
-import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
 import { useStore, getDefaultStore } from '../../ctx/store';
 import './recordVideo.less';
-const RECORD_VIDEO_TOAST_ID = 'record_video_toast_id';
+const CLOSE_TIME = 5000;
+const RESET_TIMER = 3000;
+const RECORD_VIDEO_SUCCESS_TOAST_ID = 'record_video_SUCCESS_toast_id';
+const RECORD_VIDEO_TIMER_ID = 'record_video_timer_id';
 function formatTimeDiff(diff) {
   const padWithZero = true;
   const diffMs = Math.abs(diff);
@@ -49,11 +54,18 @@ function useTime() {
   };
 }
 function TimeRecord() {
+  // const { showTimer } = props;
   const {
     min,
     sec,
     cancel
   } = useTime();
+  // useEffect(() => {
+  //   console.log('____________', showTimer);
+  //   if (!showTimer) {
+  //     cancel();
+  //   }
+  // }, [showTimer]);
   return /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-record-video-toast-time"
   }, /*#__PURE__*/React.createElement(View, {
@@ -73,44 +85,159 @@ export function RecordVideo(props) {
     deleteContent,
     recording: recordingAtom,
     setRecording,
+    setRecordingDisabled,
+    devId,
     className
   } = props;
   const {
-    recording
+    recording,
+    brandColor,
+    screenType,
+    recordingDisabled
   } = useStore({
-    recording: recordingAtom
+    recording: recordingAtom,
+    brandColor: props.brandColor,
+    screenType: props.screenType,
+    recordingDisabled: props.recordingDisabled
+  });
+  const [state, setState] = useSetState({
+    showTimer: false,
+    showShot: false,
+    shotUrl: ''
   });
+
+  /** 设置5秒后关闭录制成功弹窗 */
+  const timer = useRef();
+  const timeToCloseRecordToast = () => {
+    clearTimeout(timer.current);
+    // @ts-ignore
+    timer.current = setTimeout(() => {
+      setState({
+        showShot: false,
+        shotUrl: ''
+      });
+      deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
+    }, CLOSE_TIME);
+  };
+
+  /** 设置3秒后还原禁止结束录像状态 */
+  const recordDisabledTimer = useRef();
+  const timeToResetRecordDisabled = () => {
+    clearTimeout(recordDisabledTimer.current);
+    // @ts-ignore
+    recordDisabledTimer.current = setTimeout(() => {
+      setRecordingDisabled(false);
+    }, RESET_TIMER);
+  };
+  useUpdateEffect(() => {
+    if (state.showShot && screenType) {
+      showRecordToast();
+    }
+  }, [state.showShot, screenType]);
+
+  /** 根据showTimer的显示定时器 */
+  useUpdateEffect(() => {
+    if (state.showTimer) {
+      showRecordTimer();
+    } else {
+      deleteContent('absolute', RECORD_VIDEO_TIMER_ID);
+      // 清除定时器，元素移除
+    }
+  }, [state.showTimer]);
+
+  /** 跳转相册 */
+  const handCheck = () => {
+    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+  };
+
+  /** 添加录制成功弹窗 */
+  const showRecordToast = () => {
+    deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
+    addContent('absolute', {
+      id: RECORD_VIDEO_SUCCESS_TOAST_ID,
+      absoluteContentClassName: 'ipc-player-plugin-record-success-toast-wrap',
+      absolutePosition: {
+        top: screenType === 'vertical' ? '12px' : '60px',
+        left: screenType === 'vertical' ? '16px' : '50%',
+        right: screenType === 'vertical' ? '16px' : 'unset',
+        display: 'flex',
+        width: screenType === 'vertical' ? 'auto' : '400px',
+        marginLeft: screenType === 'vertical' ? '0' : '-200px'
+      },
+      content: () => {
+        return /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-record-success-toast"
+        }, /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-record-success-toast-image-box"
+        }, /*#__PURE__*/React.createElement(Image, {
+          className: "ipc-player-plugin-record-success-toast-image",
+          src: state.shotUrl
+        })), /*#__PURE__*/React.createElement(View, {
+          className: "ipc-player-plugin-record-success-toast-title"
+        }, Strings.getLang('ipc_player_record_success_tip')), /*#__PURE__*/React.createElement(View, {
+          onClick: handCheck,
+          className: "ipc-player-plugin-record-success-toast-bottom",
+          style: {
+            color: brandColor,
+            borderColor: brandColor
+          }
+        }, Strings.getLang('ipc_player_record_success_check')));
+      }
+    });
+    timeToCloseRecordToast();
+  };
+  const showRecordTimer = () => {
+    deleteContent('absolute', RECORD_VIDEO_TIMER_ID);
+    addContent('absolute', {
+      id: RECORD_VIDEO_TIMER_ID,
+      absoluteContentClassName: 'ipc-player-plugin-record-video-toast-wrap',
+      content: () => /*#__PURE__*/React.createElement(View, {
+        className: clsx('ipc-player-plugin-record-video-toast', {
+          'ipc-player-plugin-record-video-toast-show': state.showTimer,
+          'ipc-player-plugin-record-video-toast-hide': !state.showTimer
+        })
+      }, /*#__PURE__*/React.createElement(View, {
+        className: "ipc-player-plugin-record-video-toast-point",
+        style: {
+          backgroundColor: brandColor
+        }
+      }), /*#__PURE__*/React.createElement(TimeRecord, null))
+    });
+  };
   const handRecordVideo = async () => {
     const store = getDefaultStore();
     const _recording = store.get(recordingAtom);
     const target = !_recording;
-    if (target) {
-      event.emit(pauseTimeToHideAllComponent);
-    } else {
-      event.emit(startTimeToHideAllComponent);
+    if (recordingDisabled) {
+      return false;
     }
-    await setRecording(target);
+    const recordInfo = await setRecording(target);
     if (target) {
-      addContent('absolute', {
-        id: RECORD_VIDEO_TOAST_ID,
-        absoluteContentClassName: 'ipc-player-plugin-record-video-toast-wrap',
-        content: () => /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-record-video-toast"
-        }, /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-record-video-toast-point"
-        }), /*#__PURE__*/React.createElement(TimeRecord, null))
+      setRecordingDisabled(true);
+      setState({
+        showTimer: true
       });
+      /** 录制开始后3秒后才可结束 */
+      timeToResetRecordDisabled();
     } else {
-      deleteContent('absolute', RECORD_VIDEO_TOAST_ID);
+      setState({
+        showTimer: false,
+        showShot: true,
+        shotUrl: recordInfo.tempImagePath
+      });
     }
+    return true;
   };
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => handRecordVideo(),
-    className: clsx(className, '')
+    className: clsx(className, ''),
+    style: {
+      opacity: recordingDisabled ? 0.5 : 1
+    }
   }, /*#__PURE__*/React.createElement(Text, {
     className: clsx('icon-panel', 'ipc-player-plugin-record-video-icon', recording ? 'icon-panel-record-stop' : 'icon-panel-record'),
     style: {
-      color: recording ? 'rgba(255, 56, 56, 1)' : undefined
+      color: recording ? brandColor : undefined
     }
   }));
 }

package/lib/plugins/recordVideo/recordVideo.less

@@ -3,13 +3,26 @@
   color: var(--iconColor);
 }
 .ipc-player-plugin-record-video-toast-wrap {
-  z-index: 110;
+  z-index: 400;
   position: absolute;
   top: calc(7px * var(--ipc-player-size-scale, 1));
   left: 50%;
   transform: translateX(-50%);
 }
+
+// 计时器显示
+.ipc-player-plugin-record-video-toast-show {
+  transform: translate(0, 0) !important;
+  transition: transform ease-in 3s;
+}
+// 计时器隐藏
+.ipc-player-plugin-record-video-toast-hide {
+  transform: translate(0, -110%) !important;
+  transition: transform 0.3s ease-in-out;
+}
+
 .ipc-player-plugin-record-video-toast {
+  transform: translate(0, -110%);
   display: flex;
   padding: calc(12px * var(--ipc-player-size-scale, 1));
   align-items: center;
@@ -21,21 +34,65 @@
     width: calc(6px * var(--ipc-player-size-scale, 1));
     height: calc(6px * var(--ipc-player-size-scale, 1));
     border-radius: calc(6px * var(--ipc-player-size-scale, 1));
-    background-color: #FF3838;
   }
   .ipc-player-plugin-record-video-toast-time {
     font-size: calc(12px * var(--ipc-player-size-scale, 1));;
-    font-weight: 600;
+    font-weight: 700;
     color: var(--fontColor);
     margin-left: calc(8px * var(--ipc-player-size-scale, 1));;
     display: flex;
     align-items: center;
+    font-family: Manrope !important;
     .ipc-player-plugin-record-video-toast-time-warp {
-      width: calc(17px * var(--ipc-player-size-scale, 1));;
       text-align: center;
     }
     .ipc-player-plugin-record-video-toast-time-delimiter {
       margin: 0 calc(2px * var(--ipc-player-size-scale, 1));;
     }
   }
+}
+
+/** 录制成功弹窗 */
+.ipc-player-plugin-record-success-toast-wrap {
+  position: absolute;
+}
+.ipc-player-plugin-record-success-toast {
+  flex: 1;
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
+  background-color: var(--shot-card-bg-color);
+  display: flex;
+  align-items: center;
+  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(12px * var(--ipc-player-size-scale, 1));
+  z-index: 100;
+  .ipc-player-plugin-record-success-toast-image-box {
+    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+    overflow: hidden;
+    width: calc(66px * var(--ipc-player-size-scale, 1));
+    height: calc(66px * 0.57 * var(--ipc-player-size-scale, 1));
+  }
+  .ipc-player-plugin-record-success-toast-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .ipc-player-plugin-record-success-toast-title {
+    flex: 1;
+    margin-left: calc(12px * var(--ipc-player-size-scale, 1));
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
+    color: var(--fontColor);
+    margin-right: calc(12px * var(--ipc-player-size-scale, 1));
+    word-break: break-word;
+    
+  }
+  .ipc-player-plugin-record-success-toast-bottom {
+    border: 1px solid #1989FA;
+    min-width: calc(52px * var(--ipc-player-size-scale, 1));
+    max-width: calc(100px * var(--ipc-player-size-scale, 1));
+    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+    padding: calc(5px * var(--ipc-player-size-scale, 1)) calc(11px * var(--ipc-player-size-scale, 1));
+    font-size: calc(14px * var(--ipc-player-size-scale, 1));
+    white-space: nowrap;
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+  }
 }

package/lib/plugins/resolution/fullResolutionControl.js

@@ -12,6 +12,7 @@ export const FullResolutionControl = props => {
     setResolution,
     setFullResolutionActive
   } = props;
+  console.log(props, 'props========');
   const {
     screenType,
     fullResolutionActive,
@@ -51,5 +52,5 @@ export const FullResolutionControl = props => {
     style: item === resolution && {
       color: brandColor
     }
-  }, I18n.t(`ipc_player_resolution_${item}`))));
+  }, Strings.getLang(`ipc_player_resolution_${item}`))));
 };

package/lib/plugins/resolution/resolution.js

@@ -13,6 +13,7 @@ export const Resolution = props => {
     IPCPlayerContext,
     setResolution,
     addContent,
+    deleteContent,
     setFullResolutionActive,
     className
   } = props;
@@ -30,6 +31,8 @@ export const Resolution = props => {
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
       if (screenType === 'full') {
+        // 移除全屏清晰度空间
+        deleteContent('absolute', fullResolutionId);
         // 添加全屏清晰度空间
         addContent('absolute', {
           id: fullResolutionId,

package/lib/plugins/resolution/resolution.less

@@ -40,8 +40,7 @@
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  // transform: translate(200%, 0);
-  z-index: 3;
+  z-index: 345;
 }
 
 .ipc-player-plugin-full-resolution-control-text {

package/lib/plugins/screenshot/screenshot.js

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react';
 import { View, Image, Text } from '@ray-js/ray';
+import { useSetState, useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
 import IpcUtils from '@ray-js/ray-ipc-utils';
-import Strings from '@/i18n';
+import Strings from '../../i18n';
 import { useStore } from '../../ctx/store';
 import './screenshot.less';
 const CLOSE_TIME = 5000;
@@ -23,18 +24,37 @@ export function Screenshot(props) {
     screenType: props.screenType,
     brandColor: props.brandColor
   });
-  useRef();
+
+  /** 记录截屏url */
+  const [state, setState] = useSetState({
+    showShot: false,
+    shotUrl: ''
+  });
+  useUpdateEffect(() => {
+    if (state.showShot && screenType) {
+      showShotToast();
+    }
+  }, [state.showShot, screenType]);
+  const timer = useRef();
   const timeToCloseToast = () => {
-    // clearInterval(timer.current);
-    // // @ts-ignore
-    // timer.current = setTimeout(() => {
-    //   deleteContent('absolute', 'plugin-screenshot-toast');
-    // }, CLOSE_TIME);
+    clearInterval(timer.current);
+    // @ts-ignore
+    timer.current = setTimeout(() => {
+      setState({
+        showShot: false,
+        shotUrl: ''
+      });
+      deleteContent('absolute', 'plugin-screenshot-toast');
+    }, CLOSE_TIME);
   };
+
+  /** 跳转相册 */
   const handCheck = () => {
     IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
   };
-  const showToast = str => {
+
+  /** 添加截屏成功弹窗 */
+  const showShotToast = () => {
     deleteContent('absolute', 'plugin-screenshot-toast');
     addContent('absolute', {
       id: 'plugin-screenshot-toast',
@@ -42,7 +62,10 @@ export function Screenshot(props) {
       absolutePosition: {
         top: screenType === 'vertical' ? '12px' : '60px',
         left: screenType === 'vertical' ? '16px' : '50%',
-        right: screenType === 'vertical' ? '16px' : '50%'
+        right: screenType === 'vertical' ? '16px' : 'unset',
+        display: 'flex',
+        width: screenType === 'vertical' ? 'auto' : '400px',
+        marginLeft: screenType === 'vertical' ? '0' : '-200px'
       },
       content: () => {
         return /*#__PURE__*/React.createElement(View, {
@@ -51,7 +74,7 @@ export function Screenshot(props) {
           className: "ipc-player-plugin-screenshot-toast-image-box"
         }, /*#__PURE__*/React.createElement(Image, {
           className: "ipc-player-plugin-screenshot-toast-image",
-          src: str
+          src: state.shotUrl
         })), /*#__PURE__*/React.createElement(View, {
           className: "ipc-player-plugin-screenshot-toast-title"
         }, Strings.getLang('ipc_player_screenshot_success_tip')), /*#__PURE__*/React.createElement(View, {
@@ -61,7 +84,7 @@ export function Screenshot(props) {
             color: brandColor,
             borderColor: brandColor
           }
-        }, Strings.getLang('ipc_player_shot_or_record_check')));
+        }, Strings.getLang('ipc_player_shot_success_check')));
       }
     });
     timeToCloseToast();
@@ -74,11 +97,15 @@ export function Screenshot(props) {
         saveToAlbum,
         // 保存到 IPC 相册
         success: res => {
-          showToast(res.tempImagePath);
+          console.log(res, 'res');
+          setState({
+            showShot: true,
+            shotUrl: res.tempImagePath
+          });
         },
         fail: err => {
           const errObj = err.innerError || err || {};
-          const errMsg = errObj.errorMsg || I18n.t('error_screenshot');
+          const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_screenshot_error_tip');
           toast({
             title: errMsg
           });

package/lib/plugins/screenshot/screenshot.less

@@ -4,12 +4,9 @@
 }
 .ipc-player-plugin-screenshot-toast-wrap {
   position: absolute;
-  // max-width: 300px;
-  // left: 50%;
-  // transform: translateX(-50%);
-  // top: calc(16px * var(--ipc-player-size-scale, 1));
 }
 .ipc-player-plugin-screenshot-toast {
+  flex: 1;
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
   background-color: var(--shot-card-bg-color);
   display: flex;

package/lib/plugins/voiceIntercom/voiceIntercom.d.ts

@@ -9,5 +9,5 @@ type Props = ComponentConfigProps & {
     onTouchStart?: TouchEventHandler['onTouchStart'];
     onTouchEnd?: TouchEventHandler['onTouchEnd'];
 };
-export declare function VoiceIntercom({ style, className, iconClassName, recording: recordingAtom, intercom: intercomAtom, intercomMode: intercomModeAtom, setIntercom, mute: muteAtom, setMute, getStreamStatus, onTouchStart, onTouchEnd, }: Props): React.JSX.Element;
+export declare const VoiceIntercom: (props: Props) => React.JSX.Element;
 export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -7,34 +7,39 @@ import { useStore, getDefaultStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus, IntercomMode } from '../../interface';
 import { UIEventContext } from '../../ui/context';
+import { radialGradient } from '../../utils';
 import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
 const NILL = () => null;
-export function VoiceIntercom(_ref) {
-  let {
+export const VoiceIntercom = props => {
+  const {
     style,
     className,
     iconClassName,
-    recording: recordingAtom,
-    intercom: intercomAtom,
-    intercomMode: intercomModeAtom,
+    // recording: recordingAtom,
+    // intercom: intercomAtom,
+    // intercomMode: intercomModeAtom,
     setIntercom,
-    mute: muteAtom,
+    // mute: muteAtom,
     setMute,
     getStreamStatus,
     onTouchStart = NILL,
     onTouchEnd = NILL
-  } = _ref;
+  } = props;
   const {
     event
   } = useContext(UIEventContext);
   const {
+    recording,
     mute,
     intercom,
-    intercomMode
+    intercomMode,
+    brandColor
   } = useStore({
-    mute: muteAtom,
-    intercom: intercomAtom,
-    intercomMode: intercomModeAtom
+    recording: props.recording,
+    mute: props.mute,
+    intercom: props.intercom,
+    intercomMode: props.intercomMode,
+    brandColor: props.brandColor
   });
   // 对讲开始之前的静音状态
   const originMuteStatusBeforeVoice = useRef(mute);
@@ -70,17 +75,19 @@ export function VoiceIntercom(_ref) {
     event.emit(startTimeToHideAllComponent);
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: _objectSpread({}, style),
+    style: _objectSpread(_objectSpread({}, style), {
+      background: radialGradient(brandColor)
+    }),
     className: clsx('ipc-player-plugin-voice-intercom', className),
     onTouchStart: async e => {
       onTouchStart(e);
-      const store = getDefaultStore();
+      getDefaultStore();
       if (loading.current) return;
       loading.current = true;
-      const _intercom = store.get(intercomAtom);
-      const _recording = store.get(recordingAtom);
-      const target = !_intercom;
-      if (target && _recording) {
+      // const _intercom = store.get(intercomAtom);
+      // const _recording = store.get(recordingAtom);
+      const target = !intercom;
+      if (target && recording) {
         console.log('录制中，无法对讲');
         loading.current = false;
         return;
@@ -104,4 +111,4 @@ export function VoiceIntercom(_ref) {
   }) : /*#__PURE__*/React.createElement(View, {
     className: clsx('icon-panel', 'icon-panel-one-way-intercom', 'intercom-default-icon', iconClassName)
   }));
-}
+};

package/lib/ui/bottomLeftContent.js

@@ -18,16 +18,16 @@ const BottomLeftContent = _ref => {
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-bottom-left-content-wrap', {
-      'ipc-player-bottom-left-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-bottom-left-content-show': !shouldHide && !fullResolutionActive
-    })
+    className: clsx('ipc-player-bottom-left-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       paddingBottom: screenType === 'vertical' ? '14px' : '20px',
       paddingLeft: screenType === 'vertical' ? 0 : '25px'
     },
-    className: clsx('ipc-player-bottom-left-content-container')
+    className: clsx('ipc-player-bottom-left-content-container', {
+      'ipc-player-bottom-left-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-bottom-left-content-show': !shouldHide && !fullResolutionActive
+    })
   }, children));
 };
 export default BottomLeftContent;

package/lib/ui/bottomRightContent.js

@@ -18,16 +18,16 @@ const BottomRightContent = _ref => {
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-bottom-right-content-wrap', {
-      'ipc-player-bottom-right-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-bottom-right-content-show': !shouldHide && !fullResolutionActive
-    })
+    className: clsx('ipc-player-bottom-right-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       paddingBottom: screenType === 'vertical' ? '14px' : '20px',
       paddingRight: screenType === 'vertical' ? 0 : '25px'
     },
-    className: clsx('ipc-player-bottom-right-content-container')
+    className: clsx('ipc-player-bottom-right-content-container', {
+      'ipc-player-bottom-right-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-bottom-right-content-show': !shouldHide && !fullResolutionActive
+    })
   }, children));
 };
 export default BottomRightContent;

package/lib/ui/topLeftContent.js

@@ -18,20 +18,16 @@ const TopLeftContent = _ref => {
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-top-left-content-wrap', {
-      'ipc-player-top-left-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-top-left-content-show': !shouldHide && !fullResolutionActive
-    })
+    className: clsx('ipc-player-top-left-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       paddingTop: screenType === 'vertical' ? '12px' : '16px',
       paddingLeft: screenType === 'vertical' ? 0 : '25px'
-    }
-    // className={clsx('ipc-player-content-item', 'ipc-player-top-content', {
-    //   'ipc-player-top-content-hide': shouldHide || fullResolutionActive,
-    // })}
-    ,
-    className: clsx('ipc-player-top-left-content-container')
+    },
+    className: clsx('ipc-player-top-left-content-container', {
+      'ipc-player-top-left-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-top-left-content-show': !shouldHide && !fullResolutionActive
+    })
   }, children));
 };
 export default TopLeftContent;

package/lib/ui/topRightContent.js

@@ -18,16 +18,16 @@ const TopRightContent = _ref => {
   });
   const [shouldHide] = useComponentHideState(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-top-right-content-wrap', {
-      'ipc-player-top-right-content-hide': shouldHide || fullResolutionActive,
-      'ipc-player-top-right-content-show': !shouldHide && !fullResolutionActive
-    })
+    className: clsx('ipc-player-top-right-content-wrap')
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       paddingTop: screenType === 'vertical' ? '12px' : '16px',
       paddingRight: screenType === 'vertical' ? 0 : '25px'
     },
-    className: clsx('ipc-player-top-right-content-container')
+    className: clsx('ipc-player-top-right-content-container', {
+      'ipc-player-top-right-content-hide': shouldHide || fullResolutionActive,
+      'ipc-player-top-right-content-show': !shouldHide && !fullResolutionActive
+    })
   }, children));
 };
 export default TopRightContent;

package/lib/ui/ui.js

@@ -267,30 +267,30 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ,
     onZoomChange: data => {
       console.log(`zoomChange事件: ${JSON.stringify(data)}`);
-      ty.showToast({
-        title: `zoomChange事件: ${JSON.stringify(data)}`
-      });
-      setTimeout(() => {
-        ty.hideToast();
-      }, 3000);
+      // ty.showToast({
+      //   title: `zoomChange事件: ${JSON.stringify(data)}`,
+      // });
+      // setTimeout(() => {
+      //   ty.hideToast();
+      // }, 3000);
     },
     onCameraPreviewFailure: data => {
       console.log(`onCameraPreviewFailure事件: ${JSON.stringify(data)}`);
-      ty.showToast({
-        title: `onCameraPreviewFailure事件: ${JSON.stringify(data)}`
-      });
-      setTimeout(() => {
-        ty.hideToast();
-      }, 3000);
+      // ty.showToast({
+      //   title: `onCameraPreviewFailure事件: ${JSON.stringify(data)}`,
+      // });
+      // setTimeout(() => {
+      //   ty.hideToast();
+      // }, 3000);
     },
     onCameraNotifyWeakNetwork: data => {
       console.log(`onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`);
-      ty.showToast({
-        title: `onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`
-      });
-      setTimeout(() => {
-        ty.hideToast();
-      }, 3000);
+      // ty.showToast({
+      //   title: `onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`,
+      // });
+      // setTimeout(() => {
+      //   ty.hideToast();
+      // }, 3000);
     },
     clarity: resolution === 'HD' ? 'hd' : 'normal',
     privateState: privateState,
@@ -305,7 +305,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ctx: instance
   }, renderBottomRightContent), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
-    console.log(absoluteContent, 'absoluteContent');
     return absoluteContent.map(item => {
       return /*#__PURE__*/React.createElement(CoverView, {
         key: item.id,

package/lib/utils/device/index.d.ts

@@ -11,3 +11,9 @@ export interface IDpCode {
 }
 export declare function getDpIdsByCodes<T extends string>(devId: string, dpIds: T[]): Promise<Record<T, string>>;
 export declare const showMathPowValue: (value: any, scale: any) => string | 0;
+export declare const getDevInfo: <T>(deviceId: string) => Promise<any>;
+/**
+ * 根据DpCode获取枚举型DP的range是否包含对应项
+ * @param result: {code: number, msg: string}
+ */
+export declare const getEnumRangeIsValid: (devId: any, dpCode: any, rangValue: any) => Promise<any>;

package/lib/utils/device/index.js

@@ -1,3 +1,4 @@
+import IpcUtils from '@ray-js/ray-ipc-utils';
 export function getDpValue(options) {
   return new Promise((resolve, reject) => {
     ty.device.getDeviceInfo({
@@ -52,4 +53,55 @@ export const showMathPowValue = (value, scale) => {
     v = (Number(value) / Math.pow(10, scale)).toFixed(1);
   }
   return v;
+};
+export const getDevInfo = deviceId => {
+  return new Promise(resolve => {
+    try {
+      ty.device.getDeviceInfo({
+        deviceId,
+        success: res => {
+          resolve({
+            code: 0,
+            data: res
+          });
+        },
+        fail: err => {
+          resolve({
+            code: -1,
+            msg: err
+          });
+        }
+      });
+    } catch (err) {
+      resolve({
+        code: -1,
+        msg: String(err)
+      });
+    }
+  });
+};
+
+/**
+ * 根据DpCode获取枚举型DP的range是否包含对应项
+ * @param result: {code: number, msg: string}
+ */
+
+export const getEnumRangeIsValid = async (devId, dpCode, rangValue) => {
+  const infoData = await IpcUtils.getDevInfo(devId);
+  if (infoData.code === 0) {
+    var _targetSchema$propert;
+    const {
+      schema
+    } = infoData.data;
+    const arrayFromValues = Object.values(schema);
+    const targetSchema = arrayFromValues.find(item => item.code === dpCode);
+    if ((targetSchema === null || targetSchema === void 0 || (_targetSchema$propert = targetSchema.property) === null || _targetSchema$propert === void 0 ? void 0 : _targetSchema$propert.type) === 'enum') {
+      const {
+        range
+      } = targetSchema.property;
+      return range.includes(rangValue);
+    }
+    return false;
+  }
+  return false;
 };

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+/** 美克风对讲按钮径向渐变 */
+export declare const radialGradient: (color: any) => string;
+export declare const adjustBrightness: (hex: any, factor: any) => string;

package/lib/utils/index.js

@@ -0,0 +1,15 @@
+/** 美克风对讲按钮径向渐变 */
+export const radialGradient = color => {
+  return `radial-gradient(at center, ${adjustBrightness(color, 0.88)}, ${adjustBrightness(color, 1.2)})`;
+};
+export const adjustBrightness = (hex, factor) => {
+  const color = parseInt(hex.slice(1), 16); // 去掉 # 转为数字
+  let r = color >> 16 & 0xff;
+  let g = color >> 8 & 0xff;
+  let b = color >> 0 & 0xff;
+  r = Math.min(255, Math.max(30, Math.floor(r * factor)));
+  g = Math.min(255, Math.max(30, Math.floor(g * factor)));
+  b = Math.min(255, Math.max(30, Math.floor(b * factor)));
+  const hexString = 1 << 24 | r << 16 | g << 8 | b;
+  return `#${hexString.toString(16).slice(1)}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-22",
+  "version": "0.0.1-beta-23",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -35,7 +35,7 @@
   "dependencies": {
     "@ray-js/ray-ipc-player": "2.0.19-beta-beta-1",
     "@ray-js/ray-ipc-utils": "1.1.0-beta-12",
-    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-1",
+    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-3",
     "clsx": "^1.2.1",
     "jotai": "^2.10.2",
     "@ray-js/panel-sdk": "^1.13.1"