@ray-js/ipc-player-integration 0.0.1-beta-61 → 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/ui/ui.js

@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
 import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
-import { View, CoverView, getSystemInfoSync, usePageEvent } from '@ray-js/ray';
+import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation } from '@ray-js/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
 import { PlayState, PlayerStreamStatus } from '../interface';
@@ -74,7 +74,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     这里用一个统一的状态标志期望控件是否展示
   */
   const [componentHideState, setComponentHideState] = useState(false);
-  const [showRightContent, setShowRightContent] = useState(true);
   prevTriggerEvent.current = componentHideState ? hideAllComponent : showAllComponent;
   const eventRef = useRef(instance.event);
   if (eventRef.current !== instance.event) {
@@ -88,11 +87,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, []);
-  const refreshBottomLeft = value => {
+  const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
     event.current.emit(playerTap);
-    setShowRightContent(value);
   };
 
   /**
@@ -154,6 +152,43 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     mute: instance.mute
   });
 
+  // 监听物理返回按键
+  const hackHandle = () => {
+    setPageOrientation({
+      pageOrientation: 'portrait',
+      success: () => {
+        console.log('set success');
+      }
+    });
+    setScreenType('vertical');
+  };
+  useEffect(() => {
+    // 针对安卓使用系统按键导航
+    if (screenType === 'full') {
+      const {
+        platform
+      } = getSystemInfoSync();
+      if (platform !== 'ios') {
+        setNavigationBarBack({
+          type: 'custom'
+        });
+      }
+    } else {
+      setNavigationBarBack({
+        type: 'system'
+      });
+    }
+  }, [screenType]);
+  useEffect(() => {
+    ty.onNavigationBarBack(hackHandle);
+    return () => {
+      ty.offNavigationBarBack(hackHandle);
+      setNavigationBarBack({
+        type: 'system'
+      });
+    };
+  }, []);
+
   /**
    * 渲染随机定位播放器内容
    */

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);
@@ -29,13 +31,11 @@ export function FullTravelRouteControl(props) {
     brandColor: props.brandColor
   });
   const timerRef = useRef();
-  const [touching, setTouching] = useState(false);
   const [state, _, sendDp] = useDpState({
     devId: props.devId,
     dpCodes: [DIRECTION_CONTROL_DP_CODE],
     listenDpChange: true
   });
-  console.log('touching', touching);
   const onPtzControlShow = useMemoizedFn(() => {
     setIsPtzActive(true);
   });
@@ -75,28 +75,24 @@ export function FullTravelRouteControl(props) {
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-screen-voice', {
       'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive
-    }),
-    style: {
-      width: touching ? '100vw' : 'auto',
-      height: touching ? '100vh' : 'auto',
-      backgroundColor: 'transparent'
-    }
-  }, /*#__PURE__*/React.createElement(RectDirectionControl, {
+    })
+  }, /*#__PURE__*/React.createElement(RectDirectionControl, _extends({
     className: "ipc-plugin-full-travel-route-control",
     value: 0,
     onTouchStart: value => {
-      setTouching(true);
+      pauseTimeToHideAllComponentFn();
       sendDpValue(String(value));
+      ty.nativeDisabled(true);
     },
     onTouchMove: value => {
-      setTouching(true);
       pauseTimeToHideAllComponentFn();
       sendDpValue(String(value));
+      ty.nativeDisabled(true);
     },
     onTouchEnd: () => {
       event.emit(startTimeToHideAllComponent);
-      setTouching(false);
       sendDpValue('-1');
+      ty.nativeDisabled(false);
     },
     onMoveNonIntersection: () => {
       sendDpValue('-1');
@@ -104,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-61",
+  "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",