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

package/lib/ctx/ctx.composition.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["title", "duration"];
-import IPCUtils from '@ray-js/ray-ipc-utils';
+import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
 import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz } from '../widgets';
@@ -72,7 +72,7 @@ const getMemoryState = devId => {
     isIntercomSupported: false
   };
   return new Promise(resolve => {
-    IPCUtils.getCameraConfigInfo(devId).then(res => {
+    getCameraConfigInfo(devId).then(res => {
       if (res.code === -1) {
         return resolve(defaultValue);
       }

package/lib/ports.output.js

@@ -1,6 +1,6 @@
 export { IntercomMode } from '@ray-js/ray-ipc-utils/lib/interface';
 
-// plugin 获取电池电量 todo
+// plugin 获取电池电量
 
 // plugin 获取是否支持Ptz
 

package/lib/ui/ui.d.ts

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

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';
@@ -51,6 +51,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     brandColor = '#FF592A',
     verticalMic = true,
     eventRef: eventRefProp,
+    landscapeMode = 'standard',
     onPlayerTap,
     extend = {}
   } = props;
@@ -73,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) {
@@ -81,15 +81,16 @@ 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);
   useEffect(() => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, []);
-  const refreshBottomLeft = value => {
+  const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
     event.current.emit(playerTap);
-    setShowRightContent(value);
   };
 
   /**
@@ -106,11 +107,21 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         deviceType
       } = systemInfo.current;
       //  针对pad 暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
+
       if (deviceType === 'pad') {
         setScreenType('vertical');
       } else {
         setScreenType(type === 'landscape' ? 'full' : 'vertical');
       }
+
+      // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
+      if (type === 'landscape' && landscapeMode === 'fill') {
+        console.log('横屏时充满');
+        setScaleMultiple(-1);
+      } else {
+        // 将屏幕播放比例设为1
+        setScaleMultiple(1);
+      }
     } catch (err) {
       console.log(err, 'err');
     }
@@ -141,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'
+      });
+    };
+  }, []);
+
   /**
    * 渲染随机定位播放器内容
    */
@@ -206,7 +254,25 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   /**
    * 视频流加载状态封装
    */
-
+  const onChangeStreamStatus = useMemoizedFn(code => {
+    var _props$onPlayStatus;
+    const playStateMap = {
+      [PlayerStreamStatus.PreviewSuccess]: PlayState.PLAYING,
+      // 播放中
+      [PlayerStreamStatus.PAUSE]: PlayState.PAUSE // 暂停
+    };
+    // 合并为三种状态 连接中 暂停 播放中
+    const playState = playStateMap[code] || PlayState.CONNECTING;
+    if (playState !== PlayState.PLAYING) {
+      setScaleMultiple(currentZoomLevel);
+    }
+    setPlayState(playState);
+    (_props$onPlayStatus = props.onPlayStatus) === null || _props$onPlayStatus === void 0 || _props$onPlayStatus.call(props, {
+      playState,
+      playCode: code
+    });
+    instance.changeStreamStatus(code);
+  });
   const disablePlayerTap = useRef(false);
   const handDisablePlayerTap = value => {
     disablePlayerTap.current = !!value;
@@ -277,29 +343,21 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     devId: devId,
     onlineStatus: deviceOnline,
     ipcPlayerContext: instance.IPCPlayerInstance,
-    onChangeStreamStatus: code => {
-      var _props$onPlayStatus;
-      const playStateMap = {
-        [PlayerStreamStatus.PreviewSuccess]: PlayState.PLAYING,
-        // 播放中
-        [PlayerStreamStatus.PAUSE]: PlayState.PAUSE // 暂停
-      };
-      // 合并为三种状态 连接中 暂停 播放中
-      const playState = playStateMap[code] || PlayState.CONNECTING;
-      setPlayState(playState);
-      (_props$onPlayStatus = props.onPlayStatus) === null || _props$onPlayStatus === void 0 || _props$onPlayStatus.call(props, {
-        playState,
-        playCode: code
-      });
-      instance.changeStreamStatus(code);
-    }
-    // onCtx={getIpcPlayer}
+    onChangeStreamStatus: onChangeStreamStatus
+    // onCtx={getIpcPlayerCtx}
     // onPlayerTap={handlePlayerClick}
     ,
     onCameraNotifyWeakNetwork: data => {
       console.log(`onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`);
     },
-    clarity: decodeClarityDic[resolution]
+    clarity: decodeClarityDic[resolution],
+    onZoomChange: data => {
+      const {
+        zoomLevel
+      } = data === null || data === void 0 ? void 0 : data.detail;
+      setCurrentZoomLevel(zoomLevel);
+    },
+    scaleMultiple: scaleMultiple
     // 安卓横屏问题
     // ptzControllable={screenType === 'vertical'}
     ,

package/lib/utils/device/index.js

@@ -1,7 +1,7 @@
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.find.js";
 import "core-js/modules/esnext.iterator.for-each.js";
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { getDevInfo } from '@ray-js/ray-ipc-utils';
 export function getDpValue(options) {
   return new Promise((resolve, reject) => {
     ty.device.getDeviceInfo({
@@ -90,32 +90,6 @@ export const showMathPowValue = (value, scale) => {
   }
   return v;
 };
-export const getDevInfo = deviceId => {
-  return new Promise(resolve => {
-    try {
-      ty.device.getDeviceInfo({
-        deviceId,
-        success: res => {
-          resolve({
-            code: 0,
-            data: res
-          });
-        },
-        fail: err => {
-          resolve({
-            code: -1,
-            msg: err
-          });
-        }
-      });
-    } catch (err) {
-      resolve({
-        code: -1,
-        msg: String(err)
-      });
-    }
-  });
-};
 
 /**
  * 根据DpCode获取枚举型DP的range是否包含对应项
@@ -123,7 +97,7 @@ export const getDevInfo = deviceId => {
  */
 
 export const getEnumRangeIsValid = async (devId, dpCode, rangValue) => {
-  const infoData = await IpcUtils.getDevInfo(devId);
+  const infoData = await getDevInfo(devId);
   if (infoData.code === 0) {
     var _targetSchema$propert;
     const {

package/lib/widgets/fullScreen/fullTravelRouteControl.js

@@ -29,13 +29,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 +73,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, {
     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');

package/lib/widgets/ptz/ptzControl.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import _find from 'lodash/find';
 import _get from 'lodash/get';
 import IpcPtzZoom from '@ray-js/ipc-ptz-zoom';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { getDpIdByCode, publishDps } from '@ray-js/ray-ipc-utils';
 import { useMemoizedFn } from '../../hooks';
 import { useComponentHideState } from '../../ui/hooks';
 import { UIEventContext } from '../../ui/context';
@@ -106,17 +106,17 @@ export const PtzControl = props => {
       const {
         type
       } = data;
-      const dpData = await IpcUtils.getDpIdByCode(devId, 'ptz_control');
+      const dpData = await getDpIdByCode(devId, 'ptz_control');
       if (dpData.code === 0) {
         const ptzControlId = dpData.data;
         const sndDpValue = _get(_find(ptzData.current, {
           type
         }), 'dpValue', null);
-        IpcUtils.publishDps(devId, {
+        publishDps(devId, {
           [ptzControlId]: sndDpValue
         });
         ptzTimeId.current = setInterval(() => {
-          IpcUtils.publishDps(devId, {
+          publishDps(devId, {
             [ptzControlId]: sndDpValue
           });
         }, 1000);
@@ -133,10 +133,10 @@ export const PtzControl = props => {
       }
     },
     onTouchPtzEnd: async () => {
-      const ptzStopData = await IpcUtils.getDpIdByCode(devId, 'ptz_stop');
+      const ptzStopData = await getDpIdByCode(devId, 'ptz_stop');
       if (ptzStopData.code === 0) {
         const ptzStopId = ptzStopData.data;
-        IpcUtils.publishDps(devId, {
+        publishDps(devId, {
           [ptzStopId]: true
         });
       }

package/lib/widgets/recordVideo/recordVideo.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from 'react';
 import { View, Text, Image } from '@ray-js/ray';
 import { useSetState, useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { PlayState } from '../../interface';
 import { UIEventContext } from '../../ui/context';
@@ -167,7 +167,7 @@ export function RecordVideo(props) {
     });
     deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
     clearInterval(timer.current);
-    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+    goToIpcPageNativeRoute('ipc_album_panel', devId);
   };
 
   /** 添加录制成功弹窗 */

package/lib/widgets/screenshot/screenshot.js

@@ -2,7 +2,7 @@ import React, { useContext, useRef } from 'react';
 import { View, Image, Text, showModal, openAppSystemSettingPage } from '@ray-js/ray';
 import { useSetState, useUpdateEffect, useMemoizedFn } from 'ahooks';
 import clsx from 'clsx';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
@@ -61,7 +61,7 @@ export function Screenshot(props) {
     });
     deleteContent('absolute', 'plugin-screenshot-toast');
     clearInterval(timer.current);
-    IpcUtils.goToIpcPageNativeRoute('ipc_album_panel', devId);
+    goToIpcPageNativeRoute('ipc_album_panel', devId);
   };
 
   /** 添加截屏成功弹窗 */

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View } from '@ray-js/ray';
 import clsx from 'clsx';
-import IpcUtils from '@ray-js/ray-ipc-utils';
+import { getVideoBitrateKbps } from '@ray-js/ray-ipc-utils';
 import { PlayState } from '../../interface';
 import './videoBitKBP.less';
 import { useStore } from '../../ctx/store';
@@ -30,7 +30,7 @@ export const VideoBitKBP = props => {
     };
   }, [store.playState]);
   const init = async () => {
-    const res = await IpcUtils.getVideoBitrateKbps(devId);
+    const res = await getVideoBitrateKbps(devId);
     if (res.code !== -1) {
       setBitKBP(`${res.data.kbps}KB/S`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-60",
+  "version": "0.0.1-beta-62",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -39,7 +39,7 @@
     "@ray-js/ipc-ptz-zoom": "0.0.2-beta-7",
     "@ray-js/panel-sdk": "^1.13.1",
     "@ray-js/ray-ipc-player": "2.0.20-beta-13",
-    "@ray-js/ray-ipc-utils": "1.1.0-beta-16",
+    "@ray-js/ray-ipc-utils": "1.1.0-beta-17",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
     "jotai": "^2.10.2"