@ray-js/ipc-player-integration 0.0.1-beta-62 → 0.0.1-beta-64

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

@@ -1,8 +1,11 @@
+/// <reference types="react" />
 import { UseCtx } from '../../interface';
+import { FullScreen } from '../../widgets/fullScreen';
 type Ctx = ReturnType<UseCtx>;
 export declare function initPlayerWidgets(ctx: Ctx, options: {
     verticalResolutionCustomClick?: boolean;
     hideHorizontalMenu?: boolean;
     throttleTime?: number;
+    directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
 }): Promise<void>;
 export {};

package/lib/features/initPlayerWidgets/index.js

@@ -21,7 +21,8 @@ export async function initPlayerWidgets(ctx, options) {
     // @ts-ignore
     newDefaultBottomRightContent[fullScreenIndex].initProps = {
       hideHorizontalMenu: options.hideHorizontalMenu,
-      throttleTime: options.throttleTime
+      throttleTime: options.throttleTime,
+      directionControlProps: options.directionControlProps
     };
   }
   ctx.addContent('bottomRight', newDefaultBottomRightContent);

package/lib/ui/ui.d.ts

@@ -25,6 +25,7 @@ type Props = {
     brandColor?: string;
     verticalMic?: boolean;
     landscapeMode?: 'fill' | 'standard';
+    playerMode: 'portrait' | 'landscape';
     eventRef?: React.RefObject<EventInstance>;
     onPlayerTap?: (data: any) => void;
     extend?: Record<string, any>;

package/lib/ui/ui.js

@@ -52,6 +52,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     verticalMic = true,
     eventRef: eventRefProp,
     landscapeMode = 'standard',
+    playerMode = 'portrait',
     onPlayerTap,
     extend = {}
   } = props;
@@ -81,8 +82,14 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }
   useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
-  const [scaleMultiple, setScaleMultiple] = useState(1);
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
+  const [scaleMultiple, setScaleMultiple] = useState(playerMode === 'portrait' ? 1 : -2);
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(playerMode === 'portrait' ? 1 : -2);
+
+  // 监听playerMode的变化，更新scaleMultiple
+  useEffect(() => {
+    setScaleMultiple(playerMode === 'portrait' ? 1 : -2);
+    setCurrentZoomLevel(playerMode === 'portrait' ? 1 : -2);
+  }, [playerMode]);
   useEffect(() => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
@@ -120,7 +127,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         setScaleMultiple(-1);
       } else {
         // 将屏幕播放比例设为1
-        setScaleMultiple(1);
+        setScaleMultiple(playerMode === 'portrait' ? 1 : -2);
       }
     } catch (err) {
       console.log(err, 'err');
@@ -328,6 +335,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     };
   }, []);
   playState === PlayState.PLAYING;
+  console.log(scaleMultiple, 'scaleMultiple===');
   return /*#__PURE__*/React.createElement(UIEventContext.Provider, {
     value: {
       event: eventRef.current,
@@ -355,6 +363,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       const {
         zoomLevel
       } = data === null || data === void 0 ? void 0 : data.detail;
+      console.log(zoomLevel, 'zoomLevel======');
       setCurrentZoomLevel(zoomLevel);
     },
     scaleMultiple: scaleMultiple

package/lib/widgets/fullScreen/fullScreen.d.ts

@@ -5,6 +5,6 @@ import type { ComponentConfigProps } from '../../interface';
 type Props = ComponentConfigProps & {
     className?: string;
     hideHorizontalMenu?: boolean;
-} & Pick<FullTravelRouteControlProps, 'throttleTime'>;
+} & Pick<FullTravelRouteControlProps, 'throttleTime' | 'directionControlProps'>;
 export declare function FullScreen(props: Props): React.JSX.Element | null;
 export {};

package/lib/widgets/fullScreen/fullTravelRouteControl.d.ts

@@ -2,8 +2,12 @@
  * 全屏状态下要添加的摄像机行进路线控件
  */
 import React from 'react';
+import RectDirectionControl from '@ray-js/direction-control';
 import type { ComponentConfigProps } from '../../interface';
+type RectDirectionControlProps = React.ComponentProps<typeof RectDirectionControl>;
 export type FullTravelRouteControlProps = ComponentConfigProps & {
     throttleTime?: number;
+    directionControlProps?: Partial<RectDirectionControlProps>;
 };
 export declare function FullTravelRouteControl(props: FullTravelRouteControlProps): React.JSX.Element;
+export {};

package/lib/widgets/fullScreen/fullTravelRouteControl.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 /**
  * 全屏状态下要添加的摄像机行进路线控件
  */
@@ -15,7 +16,8 @@ import { DIRECTION_CONTROL_DP_CODE } from './constant';
 import { useStore } from '../../ctx/store';
 export function FullTravelRouteControl(props) {
   const {
-    throttleTime = 300
+    throttleTime = 300,
+    directionControlProps
   } = props;
   const [shouldHide] = useComponentHideState();
   const [isPtzActive, setIsPtzActive] = useState(false);
@@ -74,7 +76,7 @@ export function FullTravelRouteControl(props) {
     className: clsx('ipc-player-plugin-full-screen-voice', {
       'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive
     })
-  }, /*#__PURE__*/React.createElement(RectDirectionControl, {
+  }, /*#__PURE__*/React.createElement(RectDirectionControl, _extends({
     className: "ipc-plugin-full-travel-route-control",
     value: 0,
     onTouchStart: value => {
@@ -98,5 +100,5 @@ export function FullTravelRouteControl(props) {
     showArcOnTouchInEdgeProximity: true,
     arcEdgeProximityColor: brandColor,
     touchDistanceThreshold: 50
-  }));
+  }, directionControlProps)));
 }

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { View } from '@ray-js/ray';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import { getVideoBitrateKbps } from '@ray-js/ray-ipc-utils';
 import { PlayState } from '../../interface';
@@ -15,20 +15,23 @@ export const VideoBitKBP = props => {
   const store = useStore({
     playState
   });
+  const timerRef = useRef();
   useEffect(() => {
-    let timer;
     if (store.playState === PlayState.PLAYING) {
       init();
-      timer = setInterval(() => {
+      timerRef.current = setInterval(() => {
         init();
       }, 3000);
     } else {
-      clearInterval(timer);
+      clearInterval(timerRef.current);
     }
     return () => {
-      clearInterval(timer);
+      clearInterval(timerRef.current);
     };
   }, [store.playState]);
+  usePageEvent('onUnload', () => {
+    clearInterval(timerRef.current);
+  });
   const init = async () => {
     const res = await getVideoBitrateKbps(devId);
     if (res.code !== -1) {

package/lib/widgets/videoBitKBP/videoBitKBP.less

@@ -1,5 +1,5 @@
 .ipc-player-plugin-videoBitKBP-container {
-    min-width: calc(100px * var(--ipc-player-size-scale, 1));
+    min-width: calc(92px * var(--ipc-player-size-scale, 1));
     display: flex;
     justify-content: center;
     align-items: center;
@@ -10,7 +10,7 @@
     justify-content: center;
     width: 100%;
     height: calc(24px * var(--ipc-player-size-scale, 1));
-    padding: 0 calc(9px * var(--ipc-player-size-scale, 1));
+    padding: 0 calc(6px * 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));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-62",
+  "version": "0.0.1-beta-64",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -32,7 +32,7 @@
     "test": "yarn jest"
   },
   "peerDependencies": {
-    "@ray-js/direction-control": "0.0.7-beta-3",
+    "@ray-js/direction-control": "0.0.7-beta-7",
     "ahooks": "^3.1.6"
   },
   "dependencies": {
@@ -48,7 +48,7 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
-    "@ray-js/direction-control": "0.0.7-beta-5",
+    "@ray-js/direction-control": "0.0.7-beta-7",
     "@ray-js/ray": "^1.4.9",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",