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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-62",
+  "version": "0.0.1-beta-63",
   "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",