@ray-js/ipc-player-integration 0.0.1-beta-26 → 0.0.1-beta-27

package/lib/ctx/ctx.composition.js

@@ -4,7 +4,7 @@ const _excluded = ["title", "duration"];
 import IPCUtils from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { SmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz } from '../plugins';
+import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz } from '../plugins';
 import { authorizeStatus } from '../utils/authorize';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
@@ -24,8 +24,8 @@ const topRightContent = [{
   content: VideoBitKBP
 }];
 const bottomLeftContent = [{
-  id: 'SmallIntercom',
-  content: SmallIntercom
+  id: 'FullSmallIntercom',
+  content: FullSmallIntercom
 }, {
   id: 'Screenshot',
   content: Screenshot
@@ -35,6 +35,9 @@ const bottomLeftContent = [{
 }, {
   id: 'Muted',
   content: Muted
+}, {
+  id: 'VerticalSmallIntercom',
+  content: VerticalSmallIntercom
 }, {
   id: 'Ptz',
   content: Ptz

package/lib/ctx/ctx.js

@@ -43,6 +43,9 @@ export const createUseCtx = _ref => {
     // 品牌色 默认
     const [brandColor, setBrandColor] = useAtom('#FF592A');
 
+    // 竖屏下是否展示对讲, 默认展示
+    const [verticalMic, setVerticalMic] = useAtom(true);
+
     // ptz 是否点击
     const [ptzActive, setPtzActive] = useAtom(false);
 
@@ -142,6 +145,7 @@ export const createUseCtx = _ref => {
     return {
       devId,
       brandColor,
+      verticalMic,
       saveToAlbum,
       screenType,
       recording,
@@ -156,6 +160,7 @@ export const createUseCtx = _ref => {
       playState,
       setPlayState,
       setBrandColor,
+      setVerticalMic,
       setIntercom: async target => {
         const store = getDefaultStore();
         const _intercom = store.get(intercom);

package/lib/interface.d.ts

@@ -36,6 +36,7 @@ export type UseCtx = (options: {
     className: string;
     devId: string;
     brandColor: RetAtom<string>;
+    verticalMic: RetAtom<boolean>;
     saveToAlbum: 0 | 1;
     screenType: RetAtom<ScreenType>;
     recording: RetAtom<boolean>;
@@ -55,6 +56,7 @@ export type UseCtx = (options: {
     bottomRightContent: RetAtom<ComponentConfig[]>;
     absoluteContent: RetAtom<ComponentConfig[]>;
     setBrandColor: (color: string) => void;
+    setVerticalMic: (color: string) => void;
     setScreenType: (type: ScreenType) => void;
     setRecordingDisabled: (type: boolean) => void;
     setPtzActive: (type: boolean) => void;

package/lib/plugins/battery/battery.composition.d.ts

@@ -5,6 +5,7 @@ export declare const Battery: import("react").FunctionComponent<{
     className: string;
     devId: string;
     brandColor: import("../..").RetAtom<string>;
+    verticalMic: import("../..").RetAtom<boolean>;
     saveToAlbum: 0 | 1;
     screenType: import("../..").RetAtom<import("../..").ScreenType>;
     recording: import("../..").RetAtom<boolean>;
@@ -24,6 +25,7 @@ export declare const Battery: import("react").FunctionComponent<{
     bottomRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     setBrandColor: (color: string) => void;
+    setVerticalMic: (color: string) => void;
     setScreenType: (type: import("../..").ScreenType) => void;
     setRecordingDisabled: (type: boolean) => void;
     setPtzActive: (type: boolean) => void;
@@ -48,6 +50,7 @@ export declare const BatteryFull: import("react").FunctionComponent<{
     className: string;
     devId: string;
     brandColor: import("../..").RetAtom<string>;
+    verticalMic: import("../..").RetAtom<boolean>;
     saveToAlbum: 0 | 1;
     screenType: import("../..").RetAtom<import("../..").ScreenType>;
     recording: import("../..").RetAtom<boolean>;
@@ -67,6 +70,7 @@ export declare const BatteryFull: import("react").FunctionComponent<{
     bottomRightContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../..").RetAtom<import("../..").ComponentConfig<any & Record<string, any>>[]>;
     setBrandColor: (color: string) => void;
+    setVerticalMic: (color: string) => void;
     setScreenType: (type: import("../..").ScreenType) => void;
     setRecordingDisabled: (type: boolean) => void;
     setPtzActive: (type: boolean) => void;

package/lib/plugins/fullScreen/fullScreen.js

@@ -4,10 +4,10 @@ import { View, setPageOrientation, Text } from '@ray-js/ray';
 import { useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
 import { UIEventContext } from '../../ui/context';
-import { startTimeToHideAllComponent, showAllComponent, voiceIntercomId, verticalScreenId, ptzControlId, fullResolutionId } from '../../ui/constant';
+import { showAllComponent, voiceIntercomId, verticalScreenId, ptzControlId, fullResolutionId, pauseTimeToHideAllComponent } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
 import { VerticalScreen } from './verticalScreen';
-import { VoiceIntercom } from './voiceIntercom';
+import { FullVoiceIntercom } from './fullVoiceIntercom';
 import './fullScreen.less';
 export function FullScreen(props) {
   const {
@@ -58,7 +58,7 @@ export function FullScreen(props) {
     addContent('absolute', {
       id: voiceIntercomId,
       content: props => {
-        return /*#__PURE__*/React.createElement(VoiceIntercom, props);
+        return /*#__PURE__*/React.createElement(FullVoiceIntercom, props);
       },
       absoluteContentClassName: 'ipc-player-plugin-full-screen-voice-wrap',
       initProps: _objectSpread({}, props)
@@ -71,9 +71,9 @@ export function FullScreen(props) {
   const handlers = {
     full: () => {
       handleFull();
-      event.emit(startTimeToHideAllComponent);
     },
     vertical: () => {
+      event.emit(pauseTimeToHideAllComponent);
       ty.setNavigationBarBack({
         type: 'system'
       });
@@ -95,14 +95,11 @@ export function FullScreen(props) {
   }, [screenType]);
   const handClick = target => {
     const pageOrientation = target === 'vertical' ? 'portrait' : 'landscape';
+    event.emit(pauseTimeToHideAllComponent);
     setPageOrientation({
       pageOrientation,
       success: () => {
         setScreenType(target);
-        if (target === 'full') {
-          // handFull();
-          // event.emit(startTimeToHideAllComponent);
-        }
       }
     });
   };

package/lib/plugins/fullScreen/{voiceIntercom.d.ts → fullVoiceIntercom.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps;
-export declare function VoiceIntercom(props: Props): React.JSX.Element;
+export declare function FullVoiceIntercom(props: Props): React.JSX.Element;
 export {};

package/lib/plugins/fullScreen/{voiceIntercom.js → fullVoiceIntercom.js}

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import { View } from '@ray-js/ray';
 import clsx from 'clsx';
-import { VoiceIntercom as Component } from '../voiceIntercom';
+import { VoiceIntercom } from '../voiceIntercom';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
-import { startTimeToHideAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { pauseTimeToHideAllComponent } from '../../ui/constant';
 import { useStore } from '../../ctx/store';
-export function VoiceIntercom(props) {
+export function FullVoiceIntercom(props) {
   const {
     screenType,
     isPtzActive,
@@ -25,12 +25,15 @@ export function VoiceIntercom(props) {
     className: clsx('ipc-player-plugin-full-screen-voice', {
       'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive || fullResolutionActive
     })
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
+    talkingColor: "#FFFFFF",
+    scale: 0.14,
+    mode: "circle",
     onTouchStart: () => {
       event.emit(pauseTimeToHideAllComponent);
     },
     onTouchEnd: () => {
-      event.emit(startTimeToHideAllComponent);
+      // event.emit(startTimeToHideAllComponent);
     }
   })));
 }

package/lib/plugins/{smallIntercom/smallIntercom.d.ts → fullSmallIntercom/fullSmallIntercom.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentConfigProps } from '../../interface';
-import './smallIntercom.less';
+import './fullSmallIntercom.less';
 type Props = ComponentConfigProps;
-export declare function SmallIntercom(props: Props): React.JSX.Element | null;
+export declare function FullSmallIntercom(props: Props): React.JSX.Element | null;
 export {};

package/lib/plugins/fullSmallIntercom/fullSmallIntercom.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 { UIEventContext } from '../../ui/context';
+import { VoiceIntercom } from '../voiceIntercom';
+import './fullSmallIntercom.less';
+export function FullSmallIntercom(props) {
+  const {
+    className
+  } = props;
+  const {
+    screenType,
+    ptzActive,
+    brandColor
+  } = useStore({
+    screenType: props.screenType,
+    ptzActive: props.ptzActive,
+    brandColor: props.brandColor
+  });
+  const {
+    event
+  } = useContext(UIEventContext);
+  if (screenType === 'vertical' && !ptzActive) {
+    return null;
+  }
+  const onTouchStart = () => {
+    event.emit(pauseTimeToHideAllComponent);
+  };
+  const onTouchEnd = () => {
+    // event.emit(startTimeToHideAllComponent);
+  };
+  if (screenType === 'full' && ptzActive) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(className)
+    }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
+      talkingColor: brandColor,
+      mode: "fullSmall",
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd
+    })));
+  }
+  return null;
+}

package/lib/plugins/fullSmallIntercom/index.d.ts

@@ -0,0 +1 @@
+export * from './fullSmallIntercom';

package/lib/plugins/fullSmallIntercom/index.js

@@ -0,0 +1 @@
+export * from './fullSmallIntercom';

package/lib/plugins/index.d.ts

@@ -9,4 +9,5 @@ export * from './voiceIntercom';
 export * from './muted';
 export * from './ptz';
 export * from './resolution';
-export * from './smallIntercom';
+export * from './fullSmallIntercom';
+export * from './verticalSmallIntercom';

package/lib/plugins/index.js

@@ -11,4 +11,5 @@ export * from './voiceIntercom';
 export * from './muted';
 export * from './ptz';
 export * from './resolution';
-export * from './smallIntercom';
+export * from './fullSmallIntercom';
+export * from './verticalSmallIntercom';

package/lib/plugins/ptz/ptz.js

@@ -37,7 +37,7 @@ export const Ptz = props => {
           content: props => {
             return /*#__PURE__*/React.createElement(PtzControl, props);
           },
-          absoluteContentClassName: 'ipc-player-plugin-full-screen-ptz-control-warp',
+          absoluteContentClassName: 'ipc-player-plugin-full-screen-ptz-control-wrap',
           initProps: _objectSpread({}, props)
         });
       } else {

package/lib/plugins/ptz/ptz.less

@@ -11,7 +11,7 @@
 //   font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
 // }
 
-.ipc-player-plugin-full-screen-ptz-control-warp {
+.ipc-player-plugin-full-screen-ptz-control-wrap {
   position: absolute;
   bottom: 10px;
   // transform: translate(0, -20%);

package/lib/plugins/ptz/ptzControl.js

@@ -9,7 +9,7 @@ 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 { pauseTimeToHideAllComponent } from '../../ui/constant';
 import Styles from './ptz.less';
 const getPtzData = devId => {
   return [{
@@ -100,7 +100,6 @@ export const PtzControl = props => {
         clearInterval(ptzTimeId.current);
         ptzTimeId.current = null;
       }
-      event.emit(startTimeToHideAllComponent);
     },
     brandColor: brandColor,
     iconClassName: Styles['arrow-icon-wrapper'],

package/lib/plugins/recordVideo/recordVideo.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import IpcUtils from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { UIEventContext } from '../../ui/context';
+import { pauseTimeToHideAllComponent } from '../../ui/constant';
 import { useStore, getDefaultStore } from '../../ctx/store';
 import './recordVideo.less';
 const CLOSE_TIME = 5000;
@@ -202,6 +203,7 @@ export function RecordVideo(props) {
     });
   };
   const handRecordVideo = async () => {
+    event.emit(pauseTimeToHideAllComponent);
     const store = getDefaultStore();
     const _recording = store.get(recordingAtom);
     const target = !_recording;

package/lib/plugins/resolution/resolution.js

@@ -46,6 +46,7 @@ export const Resolution = props => {
         event.emit(pauseTimeToHideAllComponent);
         return false;
       }
+      event.emit(pauseTimeToHideAllComponent);
       setResolution(resolution === 'HD' ? 'SD' : 'HD');
       return true;
     },

package/lib/plugins/screenshot/screenshot.js

@@ -1,10 +1,12 @@
-import React, { useRef } from 'react';
+import React, { useContext, 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 { useStore } from '../../ctx/store';
+import { UIEventContext } from '../../ui/context';
+import { pauseTimeToHideAllComponent } from '../../ui/constant';
 import './screenshot.less';
 const CLOSE_TIME = 5000;
 export function Screenshot(props) {
@@ -24,6 +26,9 @@ export function Screenshot(props) {
     screenType: props.screenType,
     brandColor: props.brandColor
   });
+  const {
+    event
+  } = useContext(UIEventContext);
 
   /** 记录截屏url */
   const [state, setState] = useSetState({
@@ -93,6 +98,7 @@ export function Screenshot(props) {
     className: clsx(className),
     onClick: () => {
       console.log('截屏！！！');
+      event.emit(pauseTimeToHideAllComponent);
       IPCPlayerContext.snapshot({
         saveToAlbum,
         // 保存到 IPC 相册

package/lib/plugins/tempHumidity/tempHumidity.less

@@ -4,11 +4,10 @@
     height: calc(24px * var(--ipc-player-size-scale, 1));
     padding: 0 calc(8px * var(--ipc-player-size-scale, 1));
     border-radius: calc(24px * var(--ipc-player-size-scale, 1));
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
     color: var(--iconColor);
     font-size: calc(12px * var(--ipc-player-size-scale, 1));
+    background-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 .ipc-player-plugin-tempHumidity-divider {

package/lib/plugins/verticalSmallIntercom/index.d.ts

@@ -0,0 +1 @@
+export * from './verticalSmallIntercom';

package/lib/plugins/verticalSmallIntercom/index.js

@@ -0,0 +1 @@
+export * from './verticalSmallIntercom';

package/lib/plugins/verticalSmallIntercom/verticalSmallIntercom.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './verticalSmallIntercom.less';
+type Props = ComponentConfigProps;
+export declare function VerticalSmallIntercom(props: Props): React.JSX.Element | null;
+export {};

package/lib/plugins/verticalSmallIntercom/verticalSmallIntercom.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 { UIEventContext } from '../../ui/context';
+import { VoiceIntercom } from '../voiceIntercom';
+import './verticalSmallIntercom.less';
+export function VerticalSmallIntercom(props) {
+  const {
+    className
+  } = props;
+  const {
+    screenType,
+    verticalMic,
+    brandColor
+  } = useStore({
+    screenType: props.screenType,
+    ptzActive: props.ptzActive,
+    verticalMic: props.verticalMic,
+    intercomMode: props.intercomMode,
+    brandColor: props.brandColor
+  });
+  const {
+    event
+  } = useContext(UIEventContext);
+  const onTouchStart = () => {
+    event.emit(pauseTimeToHideAllComponent);
+  };
+  const onTouchEnd = () => {
+    // event.emit(startTimeToHideAllComponent);
+  };
+  if (screenType === 'vertical' && verticalMic) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(className)
+    }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
+      talkingColor: brandColor,
+      mode: "verticalSmall",
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd
+    })));
+  }
+  if (screenType === 'full') {
+    return null;
+  }
+  return null;
+}

package/lib/plugins/verticalSmallIntercom/verticalSmallIntercom.less

@@ -0,0 +1,4 @@
+.ipc-player-plugin-small-intercom-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
+}

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

@@ -4,10 +4,13 @@ import './voiceIntercom.less';
 import { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps & {
     style?: React.CSSProperties;
-    className?: string;
+    intercomClassName?: string;
     iconClassName?: string;
+    scale?: number;
     onTouchStart?: TouchEventHandler['onTouchStart'];
     onTouchEnd?: TouchEventHandler['onTouchEnd'];
+    talkingColor?: string;
+    mode?: 'verticalSmall' | 'fullSmall' | 'circle';
 };
 export declare const VoiceIntercom: (props: Props) => React.JSX.Element;
 export {};

package/lib/plugins/voiceIntercom/voiceIntercom.js

@@ -1,8 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef, useContext } from 'react';
-import { View, Image } from '@ray-js/ray';
+import React, { useRef, useContext, useState, useEffect } from 'react';
+import { View } from '@ray-js/ray';
 import clsx from 'clsx';
-import Res from './voice.gif';
+import Svg from '@ray-js/svg';
 import { useStore, getDefaultStore } from '../../ctx/store';
 import './voiceIntercom.less';
 import { PlayerStreamStatus, IntercomMode } from '../../interface';
@@ -13,7 +13,7 @@ const NILL = () => null;
 export const VoiceIntercom = props => {
   const {
     style,
-    className,
+    intercomClassName,
     iconClassName,
     // recording: recordingAtom,
     // intercom: intercomAtom,
@@ -23,8 +23,13 @@ export const VoiceIntercom = props => {
     setMute,
     getStreamStatus,
     onTouchStart = NILL,
-    onTouchEnd = NILL
+    onTouchEnd = NILL,
+    mode = 'circle',
+    scale = 0.12,
+    talkingColor = '#ffffff'
   } = props;
+  const [frame, setFrame] = useState(0);
+  const talkingInterval = useRef(null);
   const {
     event
   } = useContext(UIEventContext);
@@ -74,11 +79,33 @@ export const VoiceIntercom = props => {
     await setIntercom(false);
     event.emit(startTimeToHideAllComponent);
   };
+  /**
+   * 处理对讲中动画
+   */
+  useEffect(() => {
+    if (intercom) {
+      talkingInterval.current = setInterval(() => {
+        setFrame(prevFrame => (prevFrame + 1) % 124); // 循环播放帧
+      }, 30); // 每帧间隔 15ms，加快动画速度
+    } else {
+      talkingInterval.current && clearInterval(talkingInterval.current);
+    }
+    return () => clearInterval(talkingInterval.current);
+  }, [intercom]);
+
+  // 根据当前帧和矩形索引计算高度
+  const getHeight = (frame, index) => {
+    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), {
+    style: _objectSpread(_objectSpread({}, style), mode === 'circle' && {
       background: radialGradient(brandColor)
     }),
-    className: clsx('ipc-player-plugin-voice-intercom', className),
+    className: clsx({
+      'ipc-player-plugin-voice-intercom': mode === 'circle',
+      'ipc-player-plugin-voice-small-intercom': mode !== 'circle'
+    }, intercomClassName),
     onTouchStart: async e => {
       onTouchStart(e);
       getDefaultStore();
@@ -105,10 +132,25 @@ export const VoiceIntercom = props => {
       }
     },
     onTouchEnd: onTouchEnd
-  }, intercom ? /*#__PURE__*/React.createElement(Image, {
-    src: Res,
-    className: clsx('ipc-player-plugin-voice-intercom-img', 'intercom-ing-default-size', iconClassName)
-  }) : /*#__PURE__*/React.createElement(View, {
-    className: clsx('icon-panel', 'icon-panel-one-way-intercom', 'intercom-default-icon', iconClassName)
+  }, intercom ? /*#__PURE__*/React.createElement(View, {
+    className: clsx({
+      'ipc-player-plugin-voice-small-ing-intercom': mode !== 'circle'
+    })
+  }, /*#__PURE__*/React.createElement(Svg, {
+    width: `${200 * scale}px`,
+    height: `${200 * scale}px`,
+    viewBox: `0 0 ${200 * scale} ${200 * scale}`
+  }, [0, 1, 2, 3, 4].map(index => /*#__PURE__*/React.createElement("rect", {
+    key: index,
+    x: (index * 34 + 20) * scale,
+    y: (200 - getHeight(frame, index)) / 2 * scale,
+    width: 20 * scale,
+    height: getHeight(frame, index) * scale,
+    fill: talkingColor,
+    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)
   }));
 };

package/lib/plugins/voiceIntercom/voiceIntercom.less

@@ -11,16 +11,44 @@
   font-size: calc(@size * var(--ipc-player-size-scale, 1));
   color: #fff;
 }
+.ipc-player-plugin-voice-small-intercom {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ipc-player-plugin-voice-small-intercom {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
+}
+.ipc-player-plugin-voice-small-ing-intercom {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
 .ipc-player-plugin-voice-intercom-img {
   width: calc(@size * var(--ipc-player-size-scale, 1));
-  height: calc(@size * var(--ipc-player-size-scale, 1));;
+  height: calc(@size * var(--ipc-player-size-scale, 1));
+}
+
+.ipc-player-plugin-small-voice-intercom-img {
+  width: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
+  height: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
 }
 
-.intercom-default-icon {
+.intercom-default-size {
   font-size: calc(@size * var(--ipc-player-size-scale, 1.5)) !important;
 }
 
 .intercom-ing-default-size {
   width: calc(@size * var(--ipc-player-size-scale, 1.5));
   height: calc(@size * var(--ipc-player-size-scale, 1.5));
+}
+
+.intercom-ing-small-size {
+  width: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
+  height: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
 }

package/lib/ui/ui.d.ts

@@ -23,6 +23,7 @@ type Props = {
     deviceOnline?: boolean;
     CSSVariable?: Partial<CSSVariable>;
     brandColor?: string;
+    verticalMic?: boolean;
 };
 export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

package/lib/ui/ui.js

@@ -45,14 +45,16 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     CSSVariable = defaultCSSVariable,
     privateState = false,
     deviceOnline = true,
-    brandColor = '#FF592A'
+    brandColor = '#FF592A',
+    verticalMic = true
   } = props;
   const instance = getCtxInstance(props.instance, devId);
   const {
     setPlayState,
     setScreenType,
     setFullResolutionActive,
-    setBrandColor
+    setBrandColor,
+    setVerticalMic
   } = instance;
   const prevTriggerEvent = useRef();
   const eventRef = useRef();
@@ -62,6 +64,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }
   useEffect(() => {
     setBrandColor(brandColor);
+    setVerticalMic(verticalMic);
   }, []);
   const {
     event

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -1,4 +1,6 @@
-/** 美克风对讲按钮径向渐变 */
+/**
+ * 麦克风对讲按钮径向渐变
+ */
 export const radialGradient = color => {
   return `radial-gradient(at center, ${adjustBrightness(color, 0.88)}, ${adjustBrightness(color, 1.2)})`;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-26",
+  "version": "0.0.1-beta-27",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -33,12 +33,13 @@
   },
   "peerDependencies": {},
   "dependencies": {
+    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-4",
+    "@ray-js/panel-sdk": "^1.13.1",
     "@ray-js/ray-ipc-player": "2.0.20-beta-3",
     "@ray-js/ray-ipc-utils": "1.1.0-beta-12",
-    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-3",
+    "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
-    "jotai": "^2.10.2",
-    "@ray-js/panel-sdk": "^1.13.1"
+    "jotai": "^2.10.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",

package/lib/plugins/smallIntercom/index.d.ts

@@ -1 +0,0 @@
-export * from './smallIntercom';

package/lib/plugins/smallIntercom/index.js

@@ -1 +0,0 @@
-export * from './smallIntercom';

package/lib/plugins/smallIntercom/smallIntercom.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { View, Text } from '@ray-js/ray';
-import clsx from 'clsx';
-import { useStore } from '../../ctx/store';
-import './smallIntercom.less';
-export function SmallIntercom(props) {
-  const {
-    IPCPlayerContext,
-    addContent,
-    saveToAlbum,
-    deleteContent,
-    devId,
-    toast,
-    className
-  } = props;
-  const {
-    screenType,
-    ptzActive
-  } = useStore({
-    screenType: props.screenType,
-    ptzActive: props.ptzActive
-  });
-  const handClick = () => {
-    console.log('截屏！！！');
-    // IPCPlayerContext.snapshot({
-    //   saveToAlbum, // 保存到 IPC 相册
-    //   success: res => {
-    //     showToast(res.tempImagePath);
-    //   },
-    //   fail: err => {
-    //     const errObj = err.innerError || err || {};
-    //     const errMsg = errObj.errorMsg || I18n.t('error_screenshot');
-    //     toast({ title: errMsg });
-    //   },
-    // });
-  };
-  if (screenType === 'vertical' && !ptzActive) {
-    return null;
-  }
-  if (screenType === 'full' && ptzActive) {
-    return /*#__PURE__*/React.createElement(View, {
-      className: clsx(className),
-      onClick: handClick
-    }, /*#__PURE__*/React.createElement(Text, {
-      className: clsx('icon-panel', 'icon-panel-one-way-intercom', 'ipc-player-plugin-small-intercom-icon')
-    }));
-  }
-  return null;
-}

package/lib/plugins/smallIntercom/smallIntercom.less

@@ -1,50 +0,0 @@
-.ipc-player-plugin-small-intercom-icon {
-  color: var(--iconColor);
-  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
-}
-.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 {
-  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-screenshot-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-screenshot-toast-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .ipc-player-plugin-screenshot-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-screenshot-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/voiceIntercom/type.d.ts

@@ -1,4 +0,0 @@
-declare module '*.gif' {
-  const content: any;
-  export default content;
-}