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

package/lib/widgets/recordVideo/recordVideo.js

@@ -6,7 +6,7 @@ import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { PlayState } from '../../interface';
 import { UIEventContext } from '../../ui/context';
-import { pauseTimeToHideAllComponent, changeIgnoreHideStopPreview } from '../../ui/constant';
+import { pauseTimeToHideAllComponent, changeIgnoreHideStopPreview, widgetLabs, widgetClick } from '../../ui/constant';
 import { useStore, getDefaultStore } from '../../ctx/store';
 import './recordVideo.less';
 const CLOSE_TIME = 5000;
@@ -230,6 +230,11 @@ export function RecordVideo(props) {
     });
   };
   const handRecordVideo = async () => {
+    var _props$event, _props$event2;
+    (_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event;
+    ((_props$event2 = props.event) !== null && _props$event2 !== void 0 ? _props$event2 : event).emit(widgetClick, {
+      widgetId: widgetLabs.RECORD_VIDEO
+    });
     event.emit(pauseTimeToHideAllComponent);
     const store = getDefaultStore();
     const _recording = store.get(recordingAtom);

package/lib/widgets/resolution/fullResolutionControl.js

@@ -7,7 +7,7 @@ import Strings from '../../i18n';
 import { useMemoizedFn } from '../../hooks';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
-import { playerTap, showAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
+import { playerTap, showAllComponent, pauseTimeToHideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import './resolution.less';
 export const FullResolutionControl = props => {
   const {
@@ -69,7 +69,15 @@ export const FullResolutionControl = props => {
       'ipc-plugin-absolute-move-in-right-hide': hide
     })
   }, resolutionList.map(item => /*#__PURE__*/React.createElement(Text, {
-    onClick: () => changeResolution(item),
+    onClick: () => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.FULL_RESOLUTION_CONTROL,
+        extra: {
+          resolution: item
+        }
+      });
+      changeResolution(item);
+    },
     key: item,
     className: clsx('ipc-player-plugin-full-resolution-control-text'),
     style: item === resolution && {

package/lib/widgets/resolution/resolution.js

@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import Strings from '../../i18n';
 import { FullResolutionControl } from './fullResolutionControl';
-import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent } from '../../ui/constant';
+import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
 import './resolution.less';
@@ -30,6 +30,9 @@ export const Resolution = props => {
     event
   } = useContext(UIEventContext);
   const onResolution = useMemoizedFn(() => {
+    event.emit(widgetClick, {
+      widgetId: widgetLabs.RESOLUTION
+    });
     event.emit('resolutionBtnControlClick');
     console.log(`screenType: ${screenType}`);
     if (screenType === 'full') {

package/lib/widgets/screenshot/screenshot.js

@@ -6,7 +6,7 @@ import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
-import { pauseTimeToHideAllComponent, changeIgnoreHideStopPreview } from '../../ui/constant';
+import { pauseTimeToHideAllComponent, changeIgnoreHideStopPreview, widgetLabs, widgetClick } from '../../ui/constant';
 import './screenshot.less';
 const CLOSE_TIME = 5000;
 export function Screenshot(props) {
@@ -102,6 +102,11 @@ export function Screenshot(props) {
     timeToCloseToast();
   };
   const handClick = useMemoizedFn(() => {
+    var _props$event, _props$event2;
+    (_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event;
+    ((_props$event2 = props.event) !== null && _props$event2 !== void 0 ? _props$event2 : event).emit(widgetClick, {
+      widgetId: widgetLabs.SCREENSHOT
+    });
     console.log('截屏！！！');
     setState({
       showShot: false

package/lib/widgets/signal4G/index.d.ts

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

package/lib/widgets/signal4G/index.js

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

package/lib/widgets/signal4G/signal4G.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './signal4G.less';
+interface IProp extends ComponentConfigProps {
+    className?: string;
+}
+export declare const Signal4G: (props: IProp) => React.JSX.Element | null;
+export {};

package/lib/widgets/signal4G/signal4G.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, Image } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useSignal4G } from '../../hooks';
+import { signalSvgMap } from '../../res';
+import './signal4G.less';
+export const Signal4G = props => {
+  const {
+    className,
+    devId
+  } = props;
+  const {
+    dpValue,
+    signalKey
+  } = useSignal4G(devId);
+  if (dpValue === '' || !signalSvgMap[signalKey]) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-signal4g')
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: clsx('ipc-player-plugin-signal4g-icon'),
+    src: signalSvgMap[signalKey],
+    mode: "aspectFit"
+  })));
+};

package/lib/widgets/signal4G/signal4G.less

@@ -0,0 +1,15 @@
+.ipc-player-plugin-signal4g {
+  display: flex;
+  align-items: center;
+  height: calc(24px * var(--ipc-player-size-scale, 1));
+  padding: 0 calc(12px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(24px * var(--ipc-player-size-scale, 1));
+  color: var(--iconColor);
+  font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.ipc-player-plugin-signal4g-icon {
+  width: calc(20px * var(--ipc-player-size-scale, 1));
+  height: calc(20px * var(--ipc-player-size-scale, 1));
+}

package/lib/widgets/toggleVerticalFull/index.d.ts

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

package/lib/widgets/toggleVerticalFull/index.js

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

package/lib/widgets/toggleVerticalFull/toggleVerticalFull.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ComponentConfigProps } from '../../interface';
+import './toggleVerticalFull.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare function ToggleVerticalFull(props: Props): React.JSX.Element | null;
+export {};

package/lib/widgets/toggleVerticalFull/toggleVerticalFull.js

@@ -0,0 +1,32 @@
+import { Text, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import React from 'react';
+import { useStore } from '../../ctx/store';
+import './toggleVerticalFull.less';
+export function ToggleVerticalFull(props) {
+  const {
+    className,
+    screenType: screenTypeAtom,
+    isVerticalFullLayout: isVerticalFullLayoutAtom,
+    setIsVerticalFullLayout
+  } = props;
+  const {
+    screenType,
+    isVerticalFullLayout
+  } = useStore({
+    screenType: screenTypeAtom,
+    isVerticalFullLayout: isVerticalFullLayoutAtom
+  });
+
+  // 横屏时隐藏
+  if (screenType === 'full') return null;
+  const iconClassName = isVerticalFullLayout ? 'icon-panel-collapse' : 'icon-panel-expand';
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onTouchStart: () => {
+      setIsVerticalFullLayout(!isVerticalFullLayout);
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx(['icon-panel', iconClassName, 'toggle-vertical-full'])
+  }));
+}

package/lib/widgets/toggleVerticalFull/toggleVerticalFull.less

@@ -0,0 +1,4 @@
+.toggle-vertical-full {
+  font-size: var(--iconPlayerSize);
+  color: var(--iconColor);
+}

package/lib/widgets/verticalSmallIntercom/verticalSmallIntercom.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 './verticalSmallIntercom.less';
@@ -27,6 +27,9 @@ export function VerticalSmallIntercom(props) {
     event
   } = useContext(UIEventContext);
   const onTouchStart = () => {
+    event.emit(widgetClick, {
+      widgetId: widgetLabs.VERTICAL_SMALL_INTERCOM
+    });
     event.emit(pauseTimeToHideAllComponent);
   };
   const onTouchEnd = () => {

package/lib/widgets/voiceIntercom/voiceIntercom.js

@@ -2,13 +2,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 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';
 import './voiceIntercom.less';
 import { PlayerStreamStatus, IntercomMode, PlayState } from '../../interface';
 import { UIEventContext } from '../../ui/context';
 import { radialGradient } from '../../utils';
-import { startTimeToHideAllComponent, pauseTimeToHideAllComponent, changeIgnoreHideStopPreview } from '../../ui/constant';
+import { startTimeToHideAllComponent, pauseTimeToHideAllComponent, changeIgnoreHideStopPreview, widgetLabs, widgetClick } from '../../ui/constant';
 const NILL = () => null;
 export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -27,8 +26,7 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     onTouchStart = NILL,
     onTouchEnd = NILL,
     mode = 'circle',
-    widthScale = 0.11,
-    heightScale = 0.12,
+    scale = 1,
     talkingColor = '#ffffff',
     bgColor,
     disabled = false
@@ -106,7 +104,12 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     event.emit(startTimeToHideAllComponent);
   };
   const handTouchStart = async e => {
+    var _props$event, _props$event2;
     if (disabled) return;
+    (_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event;
+    ((_props$event2 = props.event) !== null && _props$event2 !== void 0 ? _props$event2 : event).emit(widgetClick, {
+      widgetId: widgetLabs.VOICE_INTERCOM
+    });
     onTouchStart(e);
     getDefaultStore();
     if (loading.current) return;
@@ -177,10 +180,6 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
   }, [intercom]);
 
   // 根据当前帧和矩形索引计算高度
-  const getHeight = (frame, index) => {
-    const animationFactor = Math.sin((frame + index) / 5) * 20; // 使用正弦波来模拟动态变化
-    return [50, 130, 180, 130, 50][index] + animationFactor; // 可以根据需求修改此逻辑
-  };
 
   // 渲染对讲中的动画
 
@@ -200,20 +199,18 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
     className: clsx({
       'ipc-player-plugin-voice-small-ing-intercom': mode !== 'circle'
     })
-  }, /*#__PURE__*/React.createElement(Svg, {
-    width: `${200 * widthScale}px`,
-    height: `${200 * heightScale}px`,
-    viewBox: `0 0 ${200 * widthScale} ${200 * heightScale}`
-  }, [0, 1, 2, 3, 4].map(index => /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('bars'),
+    style: {
+      transform: `scale(${scale})`,
+      transformOrigin: 'center'
+    }
+  }, [0, 1, 2, 3, 4].map(index => /*#__PURE__*/React.createElement(View, {
     key: index,
-    x: (index * 34 + 20) * widthScale,
-    y: (200 - getHeight(frame, index)) / 2 * heightScale,
-    width: 20 * widthScale,
-    height: getHeight(frame, index) * heightScale,
-    fill: talkingColor,
-    rx: index === 0 || index === 4 ? 1 : 2 // 控制圆角
-    ,
-    ry: index === 0 || index === 4 ? 1 : 2
+    className: clsx('bar'),
+    style: {
+      background: talkingColor
+    }
   })))))() : (() => {
     if (icon) {
       if (typeof icon === 'string') {

package/lib/widgets/voiceIntercom/voiceIntercom.less

@@ -66,3 +66,88 @@
   width: 42%;
   height: 42%;
 }
+
+.bars {
+  padding: 0 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bar {
+  width: 2px;
+  background: white;
+  margin: 0 1px;
+  border-radius: 5px;
+  animation-duration: 0.5s !important;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.bar:nth-child(1) {
+  height: 5px;
+  animation-name: bounce1;
+  animation-delay: -0.4s;
+}
+
+.bar:nth-child(2) {
+  height: 10px;
+  animation-name: bounce2;
+  animation-delay: -0.2s;
+}
+
+.bar:nth-child(3) {
+  height: 16px;
+  animation-name: bounce3;
+}
+
+.bar:nth-child(4) {
+  height: 10px;
+  animation-name: bounce2;
+  animation-delay: -0.2s;
+}
+
+.bar:nth-child(5) {
+  height: 5px;
+  animation-name: bounce1;
+  animation-delay: -0.4s;
+}
+
+@keyframes bounce1 {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(1.5);
+  }
+}
+
+@keyframes bounce2 {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(1.4);
+  }
+}
+
+@keyframes bounce3 {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(1.2);
+  }
+}
+
+// @keyframes bars-move {
+//   0% {
+//     transform: translateX(0) translateY(-50%) rotate(45deg);
+//   }
+//   100% {
+//     transform: translateX(10px) translateY(-50%) rotate(45deg);
+//   }
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.29-beta.2",
+  "version": "0.0.29-beta.21",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -36,10 +36,9 @@
   },
   "dependencies": {
     "@ray-js/direction-control": "^0.0.8",
-    "@ray-js/ipc-ptz-zoom": "0.0.3-beta-1",
-    "@ray-js/panel-sdk": "^1.13.1",
-    "@ray-js/ray-ipc-player": "^2.0.31",
-    "@ray-js/ray-ipc-utils": "^1.1.10",
+    "@ray-js/ipc-ptz-zoom": "0.0.3-beta-2",
+    "@ray-js/ray-ipc-player": "2.1.0-beta.2",
+    "@ray-js/ray-ipc-utils": "1.1.13-beta.1",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
     "color": "^5.0.2",
@@ -48,8 +47,8 @@
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/cli": "^1.7.53",
-    "@ray-js/ray": "^1.7.53",
+    "@ray-js/cli": "^1.7.61",
+    "@ray-js/ray": "^1.7.61",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
     "ahooks": "^3.8.4",

package/lib/features/initPlayerWidgets/multiCamera.d.ts

@@ -1,8 +0,0 @@
-import { UseCtx } from '../../interface';
-import { InitPlayerWidgetsOptions } from '.';
-type Ctx = ReturnType<UseCtx>;
-/**
- * 多目设备初始化控件
- */
-export declare function initMultiCameraPlayerWidgets(ctx: Ctx, options: InitPlayerWidgetsOptions): void;
-export {};

package/lib/features/initPlayerWidgets/multiCamera.js

@@ -1,78 +0,0 @@
-import { FullScreen, MultiPtz, Muted, RecordVideo, Resolution, Screenshot, SmallIntercom, SwitchLayout, VideoBitKBP, TileTip, TileActions, LandscapeTip, MoveablePtzControl, PtzMoveableTip } from '../../widgets';
-import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../../ui/constant';
-import { multiPrefix } from '../../widgets/multiCamera/constants';
-/**
- * 多目设备初始化控件
- */
-export function initMultiCameraPlayerWidgets(ctx, options) {
-  const topRightContent = [{
-    id: 'VideoBitKBP',
-    content: VideoBitKBP
-  }];
-  const bottomLeftContent = [{
-    id: 'Screenshot',
-    content: Screenshot
-  }, {
-    id: 'RecordVideo',
-    content: RecordVideo
-  }, {
-    id: 'Muted',
-    content: Muted
-  }, {
-    id: 'SmallIntercom',
-    content: SmallIntercom
-  }, {
-    id: multiPtzId,
-    content: MultiPtz,
-    hidden: true
-  }, {
-    id: 'Resolution',
-    content: Resolution,
-    initProps: {
-      verticalResolutionCustomClick: options.verticalResolutionCustomClick
-    }
-  }];
-  const bottomRightContent = [{
-    id: 'SwitchLayout',
-    content: SwitchLayout
-  }, {
-    id: 'FullScreen',
-    content: FullScreen
-  }];
-  const removeContentById = (content, id) => {
-    content.splice(content.findIndex(item => item.id === id), 1);
-  };
-  options.hideKbsMenu && removeContentById(topRightContent, 'VideoBitKBP');
-  options.hideScreenShotMenu && removeContentById(bottomLeftContent, 'Screenshot');
-  options.hideRecordVideoMenu && removeContentById(bottomLeftContent, 'RecordVideo');
-  options.hideHorizontalMenu && removeContentById(bottomRightContent, 'FullScreen');
-  ctx.addContent('topLeft', []);
-  ctx.addContent('topRight', topRightContent);
-  ctx.addContent('bottomLeft', bottomLeftContent);
-  ctx.addContent('bottomRight', bottomRightContent);
-  ctx.addContent('absolute', [{
-    id: tileTipId,
-    content: TileTip,
-    absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
-    hidden: true
-  }, {
-    id: ptzMoveableTipId,
-    content: PtzMoveableTip,
-    absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
-    hidden: true
-  }, {
-    id: landscapeTipId,
-    content: LandscapeTip,
-    absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
-    hidden: true
-  }, {
-    id: tileActionsId,
-    absoluteContentClassName: `${multiPrefix}-actions-wrap`,
-    content: TileActions
-  }, {
-    id: moveablePtzControlId,
-    content: MoveablePtzControl,
-    absoluteNoCoverView: true,
-    hidden: true
-  }]);
-}