@ray-js/ipc-player-integration 0.0.16-beta-2 → 0.0.18-beta-1

package/lib/ui/bottomLeftContent.js

@@ -18,7 +18,8 @@ const BottomLeftContent = _ref => {
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-left-content-wrap'),
     style: {
-      paddingRight: screenType === 'vertical' ? '0' : '50px'
+      paddingRight: screenType === 'vertical' ? '0' : '50px',
+      height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {

package/lib/ui/bottomRightContent.js

@@ -18,7 +18,8 @@ const BottomRightContent = _ref => {
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-right-content-wrap'),
     style: {
-      paddingLeft: screenType === 'vertical' ? '10px' : '0'
+      paddingLeft: screenType === 'vertical' ? '10px' : '0',
+      height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {

package/lib/ui/topLeftContent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { CoverView, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../ctx/store';
+import { useComponentHideState } from './hooks';
 const TopLeftContent = _ref => {
   let {
     ctx,
@@ -13,10 +14,12 @@ const TopLeftContent = _ref => {
     screenType: ctx.screenType,
     playState: ctx.playState
   });
+  const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-top-left-content-wrap'),
     style: {
-      paddingRight: screenType === 'vertical' ? '0' : '20px'
+      paddingRight: screenType === 'vertical' ? '0' : '20px',
+      height: screenType === 'vertical' ? shouldHide ? '37px' : '36px' : shouldHide ? '41px' : '40px'
     }
   }, /*#__PURE__*/React.createElement(View, {
     style: {

package/lib/ui/topRightContent.js

@@ -16,7 +16,10 @@ const TopRightContent = _ref => {
   });
   const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-top-right-content-wrap')
+    className: clsx('ipc-player-top-right-content-wrap'),
+    style: {
+      height: screenType === 'vertical' ? shouldHide ? '37px' : '36px' : shouldHide ? '41px' : '40px'
+    }
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       paddingTop: screenType === 'vertical' ? '12px' : '16px',

package/lib/ui/ui.js

@@ -73,6 +73,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setRecording
   } = instance;
   const prevTriggerEvent = useRef();
+  const hasPlayedRef = useRef(false);
   /*
     player 的UI效果期望有一些控件在初始化的时候都展示，在点击 Player 之后隐藏：
     在控件显示时，点击播放器期望隐藏控件
@@ -94,6 +95,53 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
   // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
+  useEffect(() => {
+    if (createCtx) {
+      // 获取屏幕方向比例
+      try {
+        var _ty;
+        if (typeof ((_ty = ty) === null || _ty === void 0 ? void 0 : _ty.getOrientationSync) === 'function') {
+          const {
+            orientation
+          } = ty.getOrientationSync();
+          ipcTTTOperatorLog(`同步获取屏幕方向: ${orientation}`);
+          setScreenType(orientation === 'landscape' ? 'full' : 'vertical');
+        }
+      } catch (e) {
+        console.log('获取屏幕方向失败');
+      }
+    }
+  }, [createCtx]);
+  const handleOrientationChange = data => {
+    const {
+      orientation
+    } = data;
+    if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right'].includes(orientation)) {
+      setScreenType(orientation === 'landscape-left' || orientation === 'landscape-right' ? 'full' : 'vertical');
+      const pageOrientation = orientation === 'landscape-left' || orientation === 'landscape-right' ? 'landscape' : 'portrait';
+      setPageOrientation({
+        pageOrientation,
+        success: () => {
+          console.log('success');
+        },
+        fail: err => {
+          console.log('err', err);
+        }
+      });
+    }
+  };
+  useEffect(() => {
+    var _ty2;
+    if (typeof ((_ty2 = ty) === null || _ty2 === void 0 ? void 0 : _ty2.onOrientationChange) === 'function') {
+      ty.onOrientationChange(handleOrientationChange);
+    }
+    return () => {
+      var _ty3;
+      if (typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.offOrientationChange) === 'function') {
+        ty.offOrientationChange(handleOrientationChange);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (createCtx) {
       setScaleMultiple(playerFit === 'contain' ? 1 : -2);
@@ -122,6 +170,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       const {
         type
       } = sizeData;
+      console.log(type, 'type');
       console.log('监听到屏幕布局变化', type);
       const {
         platform,
@@ -336,7 +385,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     if (playState !== PlayState.PLAYING) {
       console.log('非播放状态=======');
       console.log(currentZoomLevel, 'currentZoomLevel');
-      setScaleMultiple(currentZoomLevel);
+      if (hasPlayedRef.current) {
+        setScaleMultiple(currentZoomLevel);
+      }
+    } else if (!hasPlayedRef.current) {
+      hasPlayedRef.current = true;
     }
     setPlayState(playState);
     (_props$onPlayStatus = props.onPlayStatus) === null || _props$onPlayStatus === void 0 || _props$onPlayStatus.call(props, {

package/lib/widgets/ptz/ptzControl.js

@@ -108,6 +108,8 @@ export const PtzControl = props => {
       const res = await storage.get('ptzControlTip');
       showPtzControlTip.current = false;
       if (!res) {
+        // 结束操作提示
+        onTouchPtzEnd();
         addContent('absolute', {
           id: ptzControlTipId,
           content: props => {
@@ -119,6 +121,19 @@ export const PtzControl = props => {
       }
     }
   });
+  const onTouchPtzEnd = async () => {
+    const ptzStopData = await getDpIdByCode(devId, 'ptz_stop');
+    if (ptzStopData.code === 0) {
+      const ptzStopId = ptzStopData.data;
+      publishDps(devId, {
+        [ptzStopId]: true
+      });
+    }
+    if (ptzTimeId.current) {
+      clearInterval(ptzTimeId.current);
+      ptzTimeId.current = null;
+    }
+  };
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
       'ipc-player-plugin-full-screen-ptz-control-hide': !isPtzActive || shouldHide,
@@ -129,19 +144,7 @@ export const PtzControl = props => {
     zoomData: [],
     ptzData: ptzData.current,
     onTouchPtzStart: onTouchPtzStart,
-    onTouchPtzEnd: async () => {
-      const ptzStopData = await getDpIdByCode(devId, 'ptz_stop');
-      if (ptzStopData.code === 0) {
-        const ptzStopId = ptzStopData.data;
-        publishDps(devId, {
-          [ptzStopId]: true
-        });
-      }
-      if (ptzTimeId.current) {
-        clearInterval(ptzTimeId.current);
-        ptzTimeId.current = null;
-      }
-    },
+    onTouchPtzEnd: onTouchPtzEnd,
     brandColor: brandColor,
     iconClassName: Styles['arrow-icon-wrapper'],
     darkMode: true

package/lib/widgets/resolution/fullResolutionControl.js

@@ -1,20 +1,19 @@
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
-import React, { useCallback, useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { Text, View, showToast } from '@ray-js/ray';
 import clsx from 'clsx';
 import Strings from '../../i18n';
 import { useMemoizedFn } from '../../hooks';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
-import { playerTap } from '../../ui/constant';
+import { playerTap, showAllComponent, pauseTimeToHideAllComponent } from '../../ui/constant';
 import './resolution.less';
 export const FullResolutionControl = props => {
   const {
     setResolution
   } = props;
   const {
-    screenType,
     resolution,
     resolutionList,
     brandColor
@@ -42,7 +41,7 @@ export const FullResolutionControl = props => {
       event.off(playerTap, onPlayerTap);
     };
   }, []);
-  const changeResolution = useCallback(value => {
+  const changeResolution = useMemoizedFn(value => {
     if (value === resolution) {
       showToast({
         icon: 'none',
@@ -54,6 +53,8 @@ export const FullResolutionControl = props => {
           icon: 'none',
           title: Strings.getLang('ipc_player_change_resolution_success')
         });
+        event.emit(pauseTimeToHideAllComponent);
+        event.emit(showAllComponent);
         setHide(true);
       }).catch(() => {
         showToast({
@@ -62,7 +63,7 @@ export const FullResolutionControl = props => {
         });
       });
     }
-  }, [resolution]);
+  });
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-resolution-control', 'ipc-plugin-absolute-move-in-right', {
       'ipc-plugin-absolute-move-in-right-hide': hide

package/lib/widgets/resolution/resolution.less

@@ -1,7 +1,7 @@
 @animation-time: 0.3s;
 
 .ipc-player-plugin-resolution {
-  background-color: rgba(255,255,255,0.2);
+  background-color: rgba(255, 255, 255, 0.2);
   padding: calc(4px * var(--ipc-player-size-scale, 1)) calc(5px * var(--ipc-player-size-scale, 1));
   display: flex;
   justify-content: center;
@@ -24,12 +24,12 @@
 
 .ipc-player-plugin-full-resolution-control {
   height: 100%;
-  width: 200px; 
+  width: 200px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0,0,0,0.9);
+  background-color: rgba(0, 0, 0, 0.9);
 }
 
 .ipc-player-plugin-full-resolution-control-wrap {
@@ -60,4 +60,9 @@
   color: #ffffff;
   min-height: 40px;
   width: 100%;
+  margin-bottom: 5px;
+}
+
+.ipc-player-plugin-full-resolution-control-text:last-child {
+  margin-bottom: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.16-beta-2",
+  "version": "0.0.18-beta-1",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -38,7 +38,7 @@
     "@ray-js/ipc-ptz-zoom": "^0.0.2",
     "@ray-js/panel-sdk": "^1.13.1",
     "@ray-js/direction-control": "^0.0.8",
-    "@ray-js/ray-ipc-player": "^2.0.24",
+    "@ray-js/ray-ipc-player": "2.0.26-beta-1",
     "@ray-js/ray-ipc-utils": "^1.1.10",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",