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

package/lib/widgets/fullScreen/fullTravelRouteControl.js

@@ -11,7 +11,7 @@ import { useMemoizedFn } from 'ahooks';
 import { UIEventContext } from '../../ui/context';
 import { useDpState } from '../../hooks';
 import { useComponentHideState } from '../../ui/hooks';
-import { pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import { pauseTimeToHideAllComponent, startTimeToHideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { DIRECTION_CONTROL_DP_CODE } from './constant';
 import { useStore } from '../../ctx/store';
 export function FullTravelRouteControl(props) {
@@ -80,6 +80,9 @@ export function FullTravelRouteControl(props) {
   }, directionControlProps, {
     onTouchStart: value => {
       var _directionControlProp2;
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.FULL_TRAVEL_ROUTE_CONTROL
+      });
       pauseTimeToHideAllComponentFn();
       sendDpValueFn(String(value));
       // @ts-ignore

package/lib/widgets/fullScreen/fullVoiceIntercom.js

@@ -9,7 +9,7 @@ import { VoiceIntercom } from '../voiceIntercom';
 import { useComponentHideState } from '../../ui/hooks';
 import { useMemoizedFn } from '../../hooks';
 import { UIEventContext } from '../../ui/context';
-import { pauseTimeToHideAllComponent } from '../../ui/constant';
+import { pauseTimeToHideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 export function FullVoiceIntercom(props) {
   const [shouldHide] = useComponentHideState();
@@ -47,9 +47,12 @@ export function FullVoiceIntercom(props) {
     })
   }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
     talkingColor: "#FFFFFF",
-    scale: 0.14,
+    scale: 1.2,
     mode: "circle",
     onTouchStart: () => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.FULL_VOICE_INTERCOM
+      });
       event.emit(pauseTimeToHideAllComponent);
     },
     onTouchEnd: () => {

package/lib/widgets/fullScreen/verticalScreen.js

@@ -10,7 +10,7 @@ export function VerticalScreen(_ref) {
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(className),
-    onClick: onClick,
+    onTouchStart: onClick,
     style: {
       paddingRight: '10px'
     }

package/lib/widgets/fullSmallIntercom/fullSmallIntercom.js

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import { View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
-import { pauseTimeToHideAllComponent } from '../../ui/constant';
+import { pauseTimeToHideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { VoiceIntercom } from '../voiceIntercom';
 import './fullSmallIntercom.less';
@@ -27,6 +27,9 @@ export function FullSmallIntercom(props) {
     return null;
   }
   const onTouchStart = () => {
+    event.emit(widgetClick, {
+      widgetId: widgetLabs.FULL_SMALL_INTERCOM
+    });
     event.emit(pauseTimeToHideAllComponent);
   };
   const onTouchEnd = () => {

package/lib/widgets/index.d.ts

@@ -1,4 +1,5 @@
 export * from './battery';
+export * from './signal4G';
 export * from './battery/batteryFull';
 export * from './screenshot';
 export * from './tempHumidity';
@@ -15,3 +16,4 @@ export * from './moveInteractiveControl';
 export * from './ptzControlTip';
 export * from './multiCamera';
 export * from './smallIntercom';
+export * from './toggleVerticalFull';

package/lib/widgets/index.js

@@ -1,4 +1,5 @@
 export * from './battery';
+export * from './signal4G';
 export * from './battery/batteryFull';
 export * from './screenshot';
 export * from './tempHumidity';
@@ -14,4 +15,5 @@ export * from './verticalSmallIntercom';
 export * from './moveInteractiveControl';
 export * from './ptzControlTip';
 export * from './multiCamera';
-export * from './smallIntercom';
+export * from './smallIntercom';
+export * from './toggleVerticalFull';

package/lib/widgets/moveInteractiveControl/controlButton.js

@@ -3,7 +3,7 @@ import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
-import { hideAllComponent } from '../../ui/constant';
+import { hideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { MoveInteractiveControl } from './moveInteractiveControl';
 import './controlButton.less';
 const ID = 'MoveInteractiveControl';
@@ -26,6 +26,9 @@ export function MoveInteractiveControlButton(props) {
   if (screenType === 'vertical') return null;
   return /*#__PURE__*/React.createElement(View, {
     onClick: () => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.MOVE_INTERACTIVE_CONTROL
+      });
       event.emit(hideAllComponent);
       if (hasContent('absolute', ID)) {
         event.emit('showMoveInteractiveControl');

package/lib/widgets/moveInteractiveControl/moveInteractiveControl.js

@@ -3,7 +3,7 @@ import "core-js/modules/esnext.iterator.map.js";
 import React, { useCallback, useContext, useEffect, useState, useRef, useMemo } from 'react';
 import clsx from 'clsx';
 import { MoveInterActiveControlUI } from './moveInteractiveControlUI';
-import { playerTap, showAllComponent } from '../../ui/constant';
+import { playerTap, showAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { useDpState, useSchemaInfo } from '../../hooks';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
@@ -80,6 +80,12 @@ export function MoveInteractiveControl(props) {
     }),
     menu: menu,
     onClick: value => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.MOVE_INTERACTIVE_CONTROL,
+        extra: {
+          key: value
+        }
+      });
       sendDp({
         [TYPE_CODE]: value
       });

package/lib/widgets/multiCamera/index.less

@@ -15,7 +15,7 @@
 
 .@{prefix}-actions-wrap {
   position: absolute;
-  bottom: 98px;
+  bottom: 64px;
   right: 16px;
   z-index: 340;
 }
@@ -44,9 +44,10 @@
   --app-native-btn-bg-color: transparent;
   --ptz-border-color: rgba(255, 255, 255, 0.2);
   --ptz-arrow-icon-color: #fff;
-  --ptz-circle-inner-bg-color: rgba(255, 255, 255, 0.65);
+  --ptz-circle-inner-bg-color: rgba(255, 255, 255, 1);
 }
 
+
 .@{prefix}-tile-tip-wrap {
   position: absolute;
   top: 0;
@@ -74,7 +75,7 @@
 
     &.@{prefix}-step2 {
       right: 10px;
-      bottom: 91px;
+      bottom: 57px;
     }
 
     &.@{prefix}-ptz-tip {
@@ -171,7 +172,7 @@
 
     &.@{prefix}-step2 {
       right: 130px;
-      bottom: 110px;
+      bottom: 76px;
     }
 
     &.@{prefix}-ptz-tip {
@@ -198,7 +199,7 @@
 
     &.@{prefix}-step2 {
       right: 130px;
-      bottom: 50px;
+      bottom: 16px;
     }
 
     &.@{prefix}-ptz-tip {
@@ -212,3 +213,25 @@
     }
   }
 }
+
+.ipc-player-content-small-screen {
+  .@{prefix}-tile-tip-wrap {
+    .@{prefix}-tile-tip-content {
+      &.@{prefix}-step1 {
+        right: 0px;
+      }
+    }
+  }
+
+  .@{prefix}-tile-tip-text {
+    &.@{prefix}-step1 {
+      right: 14px;
+    }
+  }
+
+  .@{prefix}-tile-tip-button {
+    &.@{prefix}-step1 {
+      right: 14px;
+    }
+  }
+}

package/lib/widgets/multiCamera/moveablePtzControl.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
 import { CoverView, View } from '@ray-js/ray';
 import { getDpIdByCode, publishDps } from '@ray-js/ray-ipc-utils';
 import _find from 'lodash/find';
 import _get from 'lodash/get';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
 import { useStore } from '../../ctx/store';
 import { useMemoizedFn } from '../../hooks';
@@ -12,6 +14,7 @@ import { MultiCameraScreenMode } from '../../interface';
 import { pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { getEnumRangeIsValid } from '../../utils/device';
+import { patchPtzDataShowByProtocol, patchZoomDataShowByProtocol } from '../../utils';
 import Styles from '../ptz/ptz.less';
 import { multiPrefix } from './constants';
 import './index.less';
@@ -74,6 +77,9 @@ export const MoveablePtzControlItem = props => {
     selectedLenInfo: multiCameraCtx.selectedLenInfo,
     screenMode: multiCameraCtx.screenMode
   });
+  const {
+    dpSupportMap
+  } = multiCameraCtx;
   const [style, setStyle] = useState({
     positionLeft,
     positionBottom,
@@ -85,18 +91,156 @@ export const MoveablePtzControlItem = props => {
     pageY: 0
   });
   const canMoveRef = useRef(false);
+
+  // 获取播放器容器尺寸用于边界限制
+  const containerInfo = useRef({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  });
+  // 动态获取组件实际尺寸
+  const componentSizeRef = useRef({
+    width: 0,
+    height: 0
+  });
+  // 控制栏高度：竖屏 48px，横屏 72px
+  const controlBarHeight = screenMode === MultiCameraScreenMode.landscape ? 72 : 48;
+  useEffect(() => {
+    // 使用 createSelectorQuery 查询播放器容器和组件的实际尺寸
+    const query = ty.createSelectorQuery();
+    query.select('.ipc-player-content').boundingClientRect().exec(res => {
+      const rect = res === null || res === void 0 ? void 0 : res[0];
+      if (rect) {
+        containerInfo.current = {
+          width: rect.width,
+          height: rect.height,
+          top: rect.top,
+          left: rect.left
+        };
+      }
+    });
+
+    // 查询 PTZ 控件的实际尺寸
+    setTimeout(() => {
+      const ptzQuery = ty.createSelectorQuery();
+      ptzQuery.select(`.${multiPrefix}-moveable-ptz-control`).boundingClientRect().exec(res => {
+        const rect = res === null || res === void 0 ? void 0 : res[0];
+        if (rect) {
+          componentSizeRef.current = {
+            width: rect.width,
+            height: rect.height
+          };
+        }
+      });
+    }, 100);
+  }, [screenMode, selectedLenInfo]);
+
+  // 边界限制函数
+  // 注意：组件使用 bottom 定位，bottom 值越大组件越往上
+  const clampPosition = (left, bottom) => {
+    const {
+      width,
+      height
+    } = containerInfo.current;
+    const componentSize = componentSizeRef.current;
+
+    // 如果还没获取到组件尺寸，使用默认值
+    const compWidth = componentSize.width || 238;
+    const compHeight = componentSize.height || 172;
+
+    // 左右边界：0 到 容器宽度 - 组件宽度
+    const clampedLeft = Math.max(0, Math.min(left, width - compWidth));
+    // bottom 边界：
+    // - 最小值：控制栏高度（底部不能被控制栏遮挡）
+    // - 最大值：容器高度 - 组件高度（顶部不能超出容器）
+    const clampedBottom = Math.max(controlBarHeight, Math.min(bottom, height - compHeight));
+    return {
+      positionLeft: clampedLeft,
+      positionBottom: clampedBottom
+    };
+  };
   const {
     event
   } = useContext(UIEventContext);
   const ptzTimeId = useRef(null);
-  const ptzData = useRef(getPtzData(devId));
-  const zoomData = useRef(getZoomData(devId));
+  const ptzData = useMemo(() => {
+    const data = getPtzData(devId);
+    return patchPtzDataShowByProtocol(data, multiCameraCtx.protocol, selectedLenInfo.index, multiCameraCtx.isSupport);
+  }, [devId, multiCameraCtx.isSupport, multiCameraCtx.protocol, selectedLenInfo.index]);
+  const zoomData = useMemo(() => {
+    const data = patchZoomDataShowByProtocol(getZoomData(devId), multiCameraCtx.isSupport);
+    return data.filter(item => item.show);
+  }, [devId, multiCameraCtx.isSupport]);
   useEffect(() => {
     const pages = getCurrentPages();
     const page = pages[pages.length - 1];
     const compTime = page.selectComponent('#moveable-ptz-control-move-view');
     moveDomRef.current = compTime;
   }, []);
+
+  // 停止所有 PTZ/Zoom 控制的方法
+  const stopAllControl = useMemoizedFn(async () => {
+    // 清除定时器
+    if (ptzTimeId.current) {
+      clearInterval(ptzTimeId.current);
+      ptzTimeId.current = null;
+    }
+
+    // 发送 PTZ 停止命令
+    const ptzStopConfig = dpSupportMap.ipc_multi_ptz_control ? {
+      code: 'ipc_multi_ptz_stop',
+      value: JSON.stringify({
+        index: selectedLenInfo.index
+      })
+    } : dpSupportMap.ptz_control ? {
+      code: 'ptz_stop',
+      value: true
+    } : null;
+    if (ptzStopConfig) {
+      const ptzStopData = await getDpIdByCode(devId, ptzStopConfig.code);
+      if (ptzStopData.code === 0) {
+        publishDps(devId, {
+          [ptzStopData.data]: ptzStopConfig.value
+        });
+      }
+    }
+
+    // 发送 Zoom 停止命令
+    const zoomStopConfig = dpSupportMap.ipc_multi_zoom_control ? {
+      code: 'ipc_multi_zoom_stop',
+      value: JSON.stringify({
+        index: selectedLenInfo.index
+      })
+    } : dpSupportMap.zoom_control ? {
+      code: 'zoom_stop',
+      value: true
+    } : null;
+    if (zoomStopConfig) {
+      const zoomStopData = await getDpIdByCode(devId, zoomStopConfig.code);
+      if (zoomStopData.code === 0) {
+        publishDps(devId, {
+          [zoomStopData.data]: zoomStopConfig.value
+        });
+      }
+    }
+    console.info('PTZ/Zoom 控制已中止');
+  });
+
+  // 记录上一次的镜头 index
+  const prevLenIndexRef = useRef(selectedLenInfo.index);
+
+  // 监听选中镜头变化，如果改变则停止 PTZ/Zoom 控制
+  useEffect(() => {
+    if (prevLenIndexRef.current !== selectedLenInfo.index) {
+      console.info('镜头切换，中止 PTZ/Zoom 控制', {
+        from: prevLenIndexRef.current,
+        to: selectedLenInfo.index
+      });
+      stopAllControl();
+      prevLenIndexRef.current = selectedLenInfo.index;
+    }
+  }, [selectedLenInfo.index, stopAllControl]);
   useEffect(() => {
     return () => {
       if (ptzTimeId.current) {
@@ -112,22 +256,29 @@ export const MoveablePtzControlItem = props => {
       event: touchEvent
     } = data;
     touchEvent.stopPropagation();
-    const dpData = await getDpIdByCode(devId, 'ipc_multi_ptz_control');
+    const dpValue = _get(_find(ptzData, {
+      type
+    }), 'dpValue', null);
+    const ptzConfig = dpSupportMap.ipc_multi_ptz_control ? {
+      code: 'ipc_multi_ptz_control',
+      value: JSON.stringify({
+        index: selectedLenInfo.index,
+        direction: dpValue
+      })
+    } : dpSupportMap.ptz_control ? {
+      code: 'ptz_control',
+      value: dpValue
+    } : null;
+    if (!ptzConfig) return;
+    const dpData = await getDpIdByCode(devId, ptzConfig.code);
     if (dpData.code === 0) {
       const ptzControlId = dpData.data;
-      const direction = _get(_find(ptzData.current, {
-        type
-      }), 'dpValue', null);
-      const sndDpValue = JSON.stringify({
-        index: selectedLenInfo.index,
-        direction
-      });
       publishDps(devId, {
-        [ptzControlId]: sndDpValue
+        [ptzControlId]: ptzConfig.value
       });
       ptzTimeId.current = setInterval(() => {
         publishDps(devId, {
-          [ptzControlId]: sndDpValue
+          [ptzControlId]: ptzConfig.value
         });
       }, 1000);
     }
@@ -139,22 +290,29 @@ export const MoveablePtzControlItem = props => {
       event: touchEvent
     } = data;
     touchEvent.stopPropagation();
-    const dpData = await getDpIdByCode(devId, 'ipc_multi_zoom_control');
-    if (dpData.code === 0) {
-      const ptzControlId = dpData.data;
-      const control = _get(_find(ptzData.current, {
-        type
-      }), 'dpValue', null);
-      const sndDpValue = JSON.stringify({
+    const dpValue = _get(_find(zoomData, {
+      type
+    }), 'dpValue', null);
+    const zoomConfig = dpSupportMap.ipc_multi_zoom_control ? {
+      code: 'ipc_multi_zoom_control',
+      value: JSON.stringify({
         index: selectedLenInfo.index,
-        control
-      });
+        control: dpValue
+      })
+    } : dpSupportMap.zoom_control ? {
+      code: 'zoom_control',
+      value: dpValue
+    } : null;
+    if (!zoomConfig) return;
+    const dpData = await getDpIdByCode(devId, zoomConfig.code);
+    if (dpData.code === 0) {
+      const zoomControlId = dpData.data;
       publishDps(devId, {
-        [ptzControlId]: sndDpValue
+        [zoomControlId]: zoomConfig.value
       });
       ptzTimeId.current = setInterval(() => {
         publishDps(devId, {
-          [ptzControlId]: sndDpValue
+          [zoomControlId]: zoomConfig.value
         });
       }, 1000);
     }
@@ -177,8 +335,17 @@ export const MoveablePtzControlItem = props => {
         pageX,
         pageY
       } = event.changedTouches[0];
+      const deltaX = pageX - pageStartRef.current.pageX;
+      const deltaY = pageY - pageStartRef.current.pageY;
+      const newLeft = style.positionLeft + deltaX;
+      const newBottom = style.positionBottom - deltaY;
+
+      // 应用边界限制
+      const clamped = clampPosition(newLeft, newBottom);
+      const clampedDeltaX = clamped.positionLeft - style.positionLeft;
+      const clampedDeltaY = style.positionBottom - clamped.positionBottom;
       (_moveDomRef$current = moveDomRef.current) === null || _moveDomRef$current === void 0 || _moveDomRef$current.setStyle({
-        transform: `translateY(${pageY - pageStartRef.current.pageY}px) translateX(${pageX - pageStartRef.current.pageX}px)`
+        transform: `translateY(${clampedDeltaY}px) translateX(${clampedDeltaX}px)`
       });
     },
     onTouchStart: event => {
@@ -208,30 +375,38 @@ export const MoveablePtzControlItem = props => {
       const deltaY = pageY - pageStartRef.current.pageY;
       const newPositionLeft = deltaX + style.positionLeft;
       const newPositionBottom = style.positionBottom - deltaY;
-      onDragEnd === null || onDragEnd === void 0 || onDragEnd({
-        positionLeft: newPositionLeft,
-        positionBottom: newPositionBottom
-      });
+
+      // 应用边界限制
+      const clamped = clampPosition(newPositionLeft, newPositionBottom);
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd(clamped);
       ty.nativeDisabled(false);
     }
   }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
+    key: `ptz-zoom-${selectedLenInfo.index}`,
     className: `${multiPrefix}-moveable-ptz-control`,
     ptzSize: "172px",
     zoomSize: "66px",
-    zoomData: selectedLenInfo.supportZoom ? zoomData.current : [],
-    ptzData: selectedLenInfo.supportPTZ ? ptzData.current : [],
+    zoomData: selectedLenInfo.supportZoom ? zoomData : [],
+    ptzData: selectedLenInfo.supportPTZ ? ptzData : [],
     onTouchPtzStart: onTouchPtzStart,
     onTouchPtzEnd: async () => {
       screenMode === MultiCameraScreenMode.landscape && event.emit(startTimeToHideAllComponent);
-      const ptzStopData = await getDpIdByCode(devId, 'ipc_multi_ptz_stop');
-      if (ptzStopData.code === 0) {
-        const ptzStopId = ptzStopData.data;
-        const sendDpValue = JSON.stringify({
+      const stopConfig = dpSupportMap.ipc_multi_ptz_control ? {
+        code: 'ipc_multi_ptz_stop',
+        value: JSON.stringify({
           index: selectedLenInfo.index
-        });
-        publishDps(devId, {
-          [ptzStopId]: sendDpValue
-        });
+        })
+      } : 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 (ptzTimeId.current) {
         clearInterval(ptzTimeId.current);
@@ -241,15 +416,22 @@ export const MoveablePtzControlItem = props => {
     onTouchZoomStart: onTouchZoomStart,
     onTouchZoomEnd: async () => {
       screenMode === MultiCameraScreenMode.landscape && event.emit(startTimeToHideAllComponent);
-      const ptzStopData = await getDpIdByCode(devId, 'ipc_multi_zoom_stop');
-      if (ptzStopData.code === 0) {
-        const ptzStopId = ptzStopData.data;
-        const sendDpValue = JSON.stringify({
+      const stopConfig = dpSupportMap.ipc_multi_zoom_control ? {
+        code: 'ipc_multi_zoom_stop',
+        value: JSON.stringify({
           index: selectedLenInfo.index
-        });
-        publishDps(devId, {
-          [ptzStopId]: sendDpValue
-        });
+        })
+      } : dpSupportMap.zoom_control ? {
+        code: 'zoom_stop',
+        value: true
+      } : null;
+      if (stopConfig) {
+        const zoomStopData = await getDpIdByCode(devId, stopConfig.code);
+        if (zoomStopData.code === 0) {
+          publishDps(devId, {
+            [zoomStopData.data]: stopConfig.value
+          });
+        }
       }
       if (ptzTimeId.current) {
         clearInterval(ptzTimeId.current);

package/lib/widgets/multiCamera/tileActions.js

@@ -9,7 +9,7 @@ import './index.less';
 export function TileActions(props) {
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(`${multiPrefix}-actions`)
-  }, /*#__PURE__*/React.createElement(TileSwitchLayout, props), /*#__PURE__*/React.createElement(TileMultiPtz, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(TileMultiPtz, _extends({}, props, {
     className: `${multiPrefix}-action-wrap`
-  })));
+  })), /*#__PURE__*/React.createElement(TileSwitchLayout, props));
 }

package/lib/widgets/muted/muted.js

@@ -1,14 +1,21 @@
 import { View, Text } from '@ray-js/ray';
-import React from 'react';
+import React, { useContext } from 'react';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
+import { UIEventContext } from '../../ui/context';
+import { widgetLabs, widgetClick } from '../../ui/constant';
 import './muted.less';
 export const Muted = props => {
   const {
     mute,
     setMute,
-    className
+    className,
+    event: propsEvent
   } = props;
+  const {
+    event: ctxEvent
+  } = useContext(UIEventContext);
+  const event = propsEvent !== null && propsEvent !== void 0 ? propsEvent : ctxEvent;
   const {
     isMuted
   } = useStore({
@@ -17,15 +24,9 @@ export const Muted = props => {
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(className),
     onClick: () => {
-      // IPCPlayerContext.setMuted({
-      //   mute: !isMuted,
-      //   success: res => {
-      //     setIsMuted(!isMuted);
-      //   },
-      //   fail: res => {
-      //     console.log('res===setMuted err', res);
-      //   },
-      // });
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.MUTED
+      });
       setMute(!isMuted);
     }
   }, isMuted ? /*#__PURE__*/React.createElement(Text, {

package/lib/widgets/ptz/ptz.js

@@ -6,7 +6,7 @@ import { useMemoizedFn } from 'ahooks';
 import { UIEventContext } from '../../ui/context';
 import { usePtz } from '../../hooks';
 import { useStore } from '../../ctx/store';
-import { ptzControlId } from '../../ui/constant';
+import { ptzControlId, widgetLabs, widgetClick } from '../../ui/constant';
 import './ptz.less';
 import { PtzControl } from './ptzControl';
 export const Ptz = props => {
@@ -40,6 +40,9 @@ export const Ptz = props => {
     }
   }, [screenType]);
   const onPtz = useMemoizedFn(() => {
+    event.emit(widgetClick, {
+      widgetId: widgetLabs.PTZ
+    });
     if (!isPtzActive) {
       showContent('bottomLeft', 'FullSmallIntercom');
       if (!hasContent('absolute', ptzControlId)) {

package/lib/widgets/ptzControlTip/ptzControlTip.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { View, Image, CoverView, Text, setStorage } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
-import { ptzControlTipId } from '../../ui/constant';
+import { ptzControlTipId, widgetLabs, widgetClick } from '../../ui/constant';
 import { PlayState } from '../../interface';
 import './ptzControlTip.less';
 import { playerPtzControlTip } from '../../res';
@@ -20,6 +20,9 @@ export const PtzControlTip = props => {
   });
   // 获取缓存状态
   const changeShowTipModal = () => {
+    props.event.emit(widgetClick, {
+      widgetId: widgetLabs.PTZ_CONTROL_TIP
+    });
     setShowTipModal(false);
     deleteContent('absolute', ptzControlTipId);
     setStorage({