@ray-js/ipc-player-integration 0.0.28 → 0.0.29-beta.1

package/lib/widgets/multiCamera/tileTip.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { View, CoverView, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
+import { tileTipId } from '../../ui/constant';
+import { PlayState } from '../../interface';
+import Strings from '../../i18n';
+import { multiPrefix } from './constants';
+import { Storage } from '../../utils/storage';
+import './index.less';
+export const TileTip = props => {
+  const {
+    devId,
+    deleteContent,
+    multiCameraCtx
+  } = props;
+  const {
+    protocol
+  } = multiCameraCtx;
+  const [showTipModal, setShowTipModal] = useState('step1');
+  const {
+    playState
+  } = useStore({
+    playState: props.playState
+  });
+  // 获取缓存状态
+  const hideTipModal = () => {
+    deleteContent('absolute', tileTipId);
+    const storage = new Storage(devId);
+    storage.set(tileTipId, true);
+  };
+  const handleConfirm = () => {
+    if (showTipModal === 'step1' && protocol.total_split_num > 2) {
+      setShowTipModal('step2');
+    } else {
+      hideTipModal();
+    }
+  };
+  if (playState === PlayState.PLAYING) {
+    return /*#__PURE__*/React.createElement(CoverView, null, /*#__PURE__*/React.createElement(View, {
+      className: clsx(`${multiPrefix}-tile-tip-content`, `${multiPrefix}-${showTipModal}`)
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: clsx(`${multiPrefix}-tile-tip-text`, `${multiPrefix}-${showTipModal}`)
+    }, Strings.getLang(`ipc_player_tile_tip_text_${showTipModal}`)), /*#__PURE__*/React.createElement(View, {
+      className: clsx(`${multiPrefix}-tile-tip-button`, `${multiPrefix}-${showTipModal}`),
+      onClick: handleConfirm
+    }, protocol.total_split_num > 2 && showTipModal === 'step1' ? Strings.getLang('ipc_player_tip_next') : Strings.getLang('ipc_player_tip_confirm')));
+  }
+  return null;
+};

package/lib/widgets/ptz/ptz.less

@@ -17,14 +17,13 @@
   position: absolute;
   bottom: 32px;
   // transform: translate(0, -20%);
-  right: calc(32px * var(--ipc-player-size-scale, 1));;
+  right: calc(32px * var(--ipc-player-size-scale, 1));
   z-index: 348;
 }
 
-
 @keyframes ipc-player-plugin-full-screen-ptz-control-move-in {
   0% {
-    transform: translate(0, 200%); /* 从下方滑入 */
+    transform: translate(0, 100vh); /* 从下方滑入 */
   }
   100% {
     transform: translate(0, 0); /* 移动到目标位置 */
@@ -36,7 +35,7 @@
     transform: translate(0, 0); /* 从当前位置开始 */
   }
   100% {
-    transform: translate(0, 200%); /* 向下滑出，隐藏 */
+    transform: translate(0, 100vh); /* 向下滑出，隐藏 */
   }
 }
 
@@ -44,9 +43,10 @@
   transform: translate(0, 0);
   transition: @animation-time ease-in;
   animation: ipc-player-plugin-full-screen-ptz-control-move-in @animation-time ease-in-out forwards;
-    &.ipc-player-plugin-full-screen-ptz-control-hide {
-      animation: ipc-player-plugin-full-screen-ptz-control-move-out @animation-time ease-in-out forwards;
-    }
+  &.ipc-player-plugin-full-screen-ptz-control-hide {
+    animation: ipc-player-plugin-full-screen-ptz-control-move-out @animation-time ease-in-out
+      forwards;
+  }
 }
 
 .ipc-player-plugin-full-screen-ptz-disappear {
@@ -69,4 +69,11 @@
   bottom: 0;
 }
 
-
+.ipc-player-plugin-moveable-ptz-control {
+  --ptz-bg-color: rgba(0, 0, 0, 0.4);
+  --ptz-arrow-bg-color: rgba(0, 0, 0, 0.4);
+  --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);
+}

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

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

package/lib/widgets/smallIntercom/index.js

@@ -0,0 +1,38 @@
+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 './index.less';
+export function SmallIntercom(props) {
+  const {
+    className
+  } = props;
+  const {
+    brandColor,
+    intercomSupported
+  } = useStore({
+    intercomMode: props.intercomMode,
+    brandColor: props.brandColor,
+    intercomSupported: props.intercomSupported
+  });
+  const {
+    event
+  } = useContext(UIEventContext);
+  if (!intercomSupported) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(VoiceIntercom, _extends({}, props, {
+    talkingColor: brandColor,
+    mode: "verticalSmall",
+    onTouchStart: () => {
+      event.emit(pauseTimeToHideAllComponent);
+    },
+    onTouchEnd: () => {
+      // event.emit(startTimeToHideAllComponent);
+    }
+  })));
+}

package/lib/widgets/smallIntercom/index.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/widgets/voiceIntercom/voiceIntercom.d.ts

@@ -26,7 +26,8 @@ export declare const VoiceIntercom: React.ForwardRefExoticComponent<{
     bottomLeftContent: import("../../interface").RetAtom<import("../../interface").ComponentConfig<any & Record<string, any>>[]>;
     bottomRightContent: import("../../interface").RetAtom<import("../../interface").ComponentConfig<any & Record<string, any>>[]>;
     absoluteContent: import("../../interface").RetAtom<import("../../interface").ComponentConfig<any & Record<string, any>>[]>;
-    setShowPtzControlTip: (value: boolean) => void;
+    ptzControlTipDisabled: import("../../interface").RetAtom<boolean>;
+    setPtzControlTipDisabled: (value: boolean) => void;
     setBrandColor: (color: string) => void;
     setVerticalMic: (value: boolean) => void;
     setScreenType: (type: import("../../interface").ScreenType) => void;
@@ -41,13 +42,43 @@ export declare const VoiceIntercom: React.ForwardRefExoticComponent<{
     setPlayState: (value: PlayState) => void;
     addContent: <T>(type: import("../../interface").ContentPlaceType, config: import("../../interface").ComponentConfig<T> | import("../../interface").ComponentConfig<T>[], position?: number | undefined) => void;
     deleteContent: (type: import("../../interface").ContentPlaceType, id: string) => void;
-    getContent: () => import("../../interface").ComponentConfig<any & Record<string, any>>[];
+    getContent: () => {
+        topLeft: import("../../interface").ComponentConfig<any & Record<string, any>>[];
+        topRight: import("../../interface").ComponentConfig<any & Record<string, any>>[];
+        bottomLeft: import("../../interface").ComponentConfig<any & Record<string, any>>[];
+        bottomRight: import("../../interface").ComponentConfig<any & Record<string, any>>[];
+        absolute: import("../../interface").ComponentConfig<any & Record<string, any>>[];
+    };
     updateContent: (type: import("../../interface").ContentPlaceType, data: import("../../interface").ComponentConfig<any & Record<string, any>>[]) => void;
     hasContent: (type: import("../../interface").ContentPlaceType, id: string) => boolean;
     hideContent: (type: import("../../interface").ContentPlaceType, id: string) => void;
     showContent: (type: import("../../interface").ContentPlaceType, id: string) => void;
     toast: import("../../ports.output").Toast;
     event: import("../../interface").EventInstance;
+    multiCameraCtx: {
+        isSupport: boolean;
+        protocol: import("../../interface").VideoSplitProtocol;
+        layoutStyle: import("../../interface").RetAtom<import("../../interface").MultiCameraLayoutStyle>;
+        screenMode: import("../../interface").RetAtom<import("../../interface").MultiCameraScreenMode>;
+        nextLayoutStyle: import("../../interface").RetAtom<import("../../interface").MultiCameraLayoutStyle>;
+        selectedLenInfo: import("../../interface").RetAtom<import("../../interface").MultiCameraLenInfo>;
+        ptzStatus: import("../../interface").RetAtom<boolean>;
+        extendProps: {
+            type: number | undefined;
+            onSelectVideoIndex: (this: any, event: any) => void;
+            onLayoutStatusChanged: (this: any, event: any) => void;
+            onLocalizerViewLocated: (this: any, event: any) => Promise<void>;
+        };
+        setLayoutStyle: (style: import("../../interface").MultiCameraLayoutStyle) => void;
+        setScreenMode: (mode: import("../../interface").MultiCameraScreenMode) => void;
+        setPtzStatus: (value: boolean | ((prevValue: boolean) => boolean)) => void;
+        showLenNames: (value: boolean) => void;
+        /**
+         * 处理对讲中动画
+         */
+        setNextLayoutStyle: (value: import("../../interface").MultiCameraLayoutStyle | ((prevValue: import("../../interface").MultiCameraLayoutStyle) => import("../../interface").MultiCameraLayoutStyle)) => void;
+        getNextLayoutStyle: () => Promise<import("../../interface").MultiCameraLayoutStyle>;
+    };
 } & {
     style?: React.CSSProperties | undefined;
     intercomClassName?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.28",
+  "version": "0.0.29-beta.1",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -35,20 +35,21 @@
     "ahooks": "^3.1.6"
   },
   "dependencies": {
-    "@ray-js/ipc-ptz-zoom": "^0.0.2",
-    "@ray-js/panel-sdk": "^1.13.1",
     "@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/svg": "0.2.0",
     "clsx": "^1.2.1",
+    "color": "^5.0.2",
     "jotai": "^2.10.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/cli": "^1.7.14",
-    "@ray-js/ray": "^1.7.14",
+    "@ray-js/cli": "^1.7.53",
+    "@ray-js/ray": "^1.7.53",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
     "ahooks": "^3.8.4",