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

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/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.17",
   "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.25",
     "@ray-js/ray-ipc-utils": "^1.1.10",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",