@ray-js/ipc-player-integration 0.0.26 → 0.0.27

package/lib/widgets/fullScreen/fullScreen.less

@@ -13,14 +13,14 @@
   top: 50%;
   transform: translateY(-50%);
   right: calc(50px * var(--ipc-player-size-scale, 1));
-  z-index: 340;
+  z-index: 348;
 }
 
 .ipc-player-plugin-remote-control-wrap {
   position: absolute;
   bottom: calc(24px * var(--ipc-player-size-scale, 1));
   right: calc(50px * var(--ipc-player-size-scale, 1));
-  z-index: 340;
+  z-index: 348;
 }
 
 .ipc-player-plugin-full-screen-voice {
@@ -34,4 +34,4 @@
 .ipc-plugin-full-travel-route-control {
   // width: calc(172px * var(--ipc-player-size-scale, 1));
   // height: calc(172px * var(--ipc-player-size-scale, 1));
-}
+}

package/lib/widgets/voiceIntercom/voiceIntercom.d.ts

@@ -52,11 +52,14 @@ export declare const VoiceIntercom: React.ForwardRefExoticComponent<{
     style?: React.CSSProperties | undefined;
     intercomClassName?: string | undefined;
     iconClassName?: string | undefined;
+    iconImageClassName?: string | undefined;
+    icon?: string | React.ReactNode;
     widthScale?: number | undefined;
     heightScale?: number | undefined;
     onTouchStart?: TouchEventHandler['onTouchStart'];
     onTouchEnd?: TouchEventHandler['onTouchEnd'];
     talkingColor?: string | undefined;
+    bgColor?: string | undefined;
     mode?: "circle" | "verticalSmall" | "fullSmall" | undefined;
     disabled?: boolean | undefined;
 } & React.RefAttributes<unknown>>;

package/lib/widgets/voiceIntercom/voiceIntercom.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { View, getSystemInfoSync } from '@ray-js/ray';
+import { View, Image, getSystemInfoSync } from '@ray-js/ray';
 import clsx from 'clsx';
 import Svg from '@ray-js/svg';
 import { useStore, getDefaultStore, updateAtom } from '../../ctx/store';
@@ -15,6 +15,8 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     style,
     intercomClassName,
     iconClassName,
+    iconImageClassName,
+    icon,
     // recording: recordingAtom,
     // intercom: intercomAtom,
     // intercomMode: intercomModeAtom,
@@ -28,6 +30,7 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     widthScale = 0.11,
     heightScale = 0.12,
     talkingColor = '#ffffff',
+    bgColor,
     disabled = false
   } = props;
   const [frame, setFrame] = useState(0);
@@ -178,9 +181,14 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     const animationFactor = Math.sin((frame + index) / 5) * 20; // 使用正弦波来模拟动态变化
     return [50, 130, 180, 130, 50][index] + animationFactor; // 可以根据需求修改此逻辑
   };
+
+  // 渲染对讲中的动画
+
+  // 渲染非对讲状态的图标
+
   return /*#__PURE__*/React.createElement(View, {
     style: _objectSpread(_objectSpread({}, style), mode === 'circle' && {
-      background: radialGradient(brandColor)
+      background: bgColor || radialGradient(brandColor)
     }),
     className: clsx({
       'ipc-player-plugin-voice-intercom': mode === 'circle',
@@ -188,7 +196,7 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     }, intercomClassName),
     onTouchStart: handTouchStart,
     onTouchEnd: onTouchEnd
-  }, intercom ? /*#__PURE__*/React.createElement(View, {
+  }, intercom ? (() => /*#__PURE__*/React.createElement(View, {
     className: clsx({
       'ipc-player-plugin-voice-small-ing-intercom': mode !== 'circle'
     })
@@ -206,7 +214,22 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     rx: index === 0 || index === 4 ? 1 : 2 // 控制圆角
     ,
     ry: index === 0 || index === 4 ? 1 : 2
-  })))) : /*#__PURE__*/React.createElement(View, {
-    className: clsx('icon-panel', 'icon-panel-one-way-intercom', mode === 'circle' && 'intercom-default-size', mode !== 'circle' && 'ipc-player-plugin-voice-small-intercom', iconClassName)
-  }));
+  })))))() : (() => {
+    if (icon) {
+      if (typeof icon === 'string') {
+        return /*#__PURE__*/React.createElement(View, {
+          className: clsx('icon-image-default-container', iconClassName)
+        }, /*#__PURE__*/React.createElement(Image, {
+          src: icon,
+          className: clsx('icon-image-default-size', iconImageClassName)
+        }));
+      }
+      return /*#__PURE__*/React.createElement(View, {
+        className: clsx('icon-image-default-container', iconClassName)
+      }, icon);
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx('icon-panel', 'icon-panel-one-way-intercom', mode === 'circle' && 'intercom-default-size', mode !== 'circle' && 'ipc-player-plugin-voice-small-intercom', iconClassName)
+    });
+  })());
 });

package/lib/widgets/voiceIntercom/voiceIntercom.less

@@ -1,7 +1,10 @@
 @size: 24px;
 
 .ipc-player-plugin-voice-intercom {
-  background: var(--ipc-player-plugin-voice-bg, radial-gradient(77% 77% at 34% 28%, #FF997C 0%, #FF592A 99%));
+  background: var(
+    --ipc-player-plugin-voice-bg,
+    radial-gradient(77% 77% at 34% 28%, #ff997c 0%, #ff592a 99%)
+  );
   width: calc(72px * var(--ipc-player-size-scale, 1));
   height: calc(72px * var(--ipc-player-size-scale, 1));
   border-radius: 50%;
@@ -51,4 +54,15 @@
 .intercom-ing-small-size {
   width: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
   height: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
-}
+}
+.icon-image-default-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon-image-default-size {
+  width: 42%;
+  height: 42%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -38,7 +38,7 @@
     "@ray-js/ipc-ptz-zoom": "^0.0.2",
     "@ray-js/panel-sdk": "^1.13.1",
     "@ray-js/direction-control": "^0.0.8",
-    "@ray-js/ray-ipc-player": "^2.0.30",
+    "@ray-js/ray-ipc-player": "^2.0.31",
     "@ray-js/ray-ipc-utils": "^1.1.10",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",