@ray-js/ipc-player-integration 0.0.1-beta-31 → 0.0.1-beta-33

package/lib/plugins/fullScreen/fullScreen.js

@@ -49,6 +49,7 @@ export function FullScreen(props) {
       absoluteContentClassName: 'ipc-player-plugin-vertical-screen-wrap',
       initProps: _objectSpread(_objectSpread({}, props), {}, {
         onClick: () => {
+          event.emit(pauseTimeToHideAllComponent);
           event.emit(showAllComponent);
           handClick('vertical');
         }
@@ -79,13 +80,13 @@ export function FullScreen(props) {
       });
       ty.showMenuButton();
       ty.showStatusBar();
+      event.emit(pauseTimeToHideAllComponent);
       deleteContent('topLeft', verticalScreenId);
       deleteContent('absolute', voiceIntercomId);
       deleteContent('absolute', ptzControlId);
       deleteContent('absolute', fullResolutionId);
       // 还原Ptz点击状态值
       setPtzActive(false);
-      console.log('_________dshadhsah');
       // 还原全屏清晰度状态值
       setFullResolutionActive(false);
     }

package/lib/plugins/ptz/ptzControl.js

@@ -40,10 +40,12 @@ export const PtzControl = props => {
   } = props;
   const {
     screenType,
-    brandColor
+    brandColor,
+    fullResolutionActive
   } = useStore({
     screenType: props.screenType,
-    brandColor: props.brandColor
+    brandColor: props.brandColor,
+    fullResolutionActive: props.fullResolutionActive
   });
   const [shouldHide] = useComponentHideState(screenType);
   const {
@@ -61,7 +63,7 @@ export const PtzControl = props => {
   }, []);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-plugin-full-screen-ptz-control', {
-      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide
+      'ipc-player-plugin-full-screen-ptz-control-hide': shouldHide || fullResolutionActive
     })
   }, /*#__PURE__*/React.createElement(IpcPtzZoom, {
     ptzSize: "172px",

package/lib/plugins/resolution/fullResolutionControl.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Text, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import Strings from '../../i18n';
@@ -24,8 +24,7 @@ export const FullResolutionControl = props => {
     resolution: props.resolution
   });
   const [shouldHide] = useComponentHideState(screenType);
-  const changeResolution = value => {
-    console.log('________', value);
+  const changeResolution = useCallback(value => {
     if (value === resolution) {
       ty.showToast({
         icon: 'none',
@@ -33,11 +32,12 @@ export const FullResolutionControl = props => {
       });
     } else {
       setResolution(value);
-      setFullResolutionActive(false);
+      // setFullResolutionActive(false);
     }
-  };
+  }, [resolution]);
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-full-resolution-control', {
+      'ipc-player-plugin-full-resolution-control-show': fullResolutionActive,
       'ipc-player-plugin-full-resolution-control-hide': shouldHide || !fullResolutionActive
     })
   }, resolutionList.map(item => /*#__PURE__*/React.createElement(Text, {

package/lib/plugins/resolution/resolution.less

@@ -1,3 +1,5 @@
+@animation-time: 0.3s;
+
 .ipc-player-plugin-resolution {
   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)) !important;
@@ -15,15 +17,16 @@
 }
 
 .ipc-player-plugin-full-resolution-control {
-  transform: translate(0, 0);
+  transform: translate(300%, 0);
   height: 100%;
-  transition: transform 0.3s ease-in, opacity 0.3s ease-in, width 0.3s ease-in;
+  transition: transform @animation-time ease-in, opacity @animation-time ease-in, width @animation-time ease-in;
   width: 200px; 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: rgba(0,0,0,0.9);
+  animation: ipc-player-plugin-full-resolution-control-move-in @animation-time ease-in-out forwards;
     &.ipc-player-plugin-full-resolution-control-hide {
       transform: translate(300%, 0);
       opacity: 0;
@@ -43,6 +46,15 @@
   z-index: 345;
 }
 
+@keyframes ipc-player-plugin-full-resolution-control-move-in {
+  form {
+    transform: translate(300%, 0);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
 .ipc-player-plugin-full-resolution-control-text {
   font-size: 14px;
   font-weight: 400;

package/lib/ui/ui.js

@@ -36,7 +36,7 @@ const defaultCSSVariable = {
   '--fontColor': '#fff',
   '--fontSize': '12px'
 };
-const HIDE_COMPONENT_TIME = 10000;
+const HIDE_COMPONENT_TIME = 5000;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const {
     className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-31",
+  "version": "0.0.1-beta-33",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -35,7 +35,7 @@
   "dependencies": {
     "@ray-js/ipc-ptz-zoom": "0.0.2-beta-4",
     "@ray-js/panel-sdk": "^1.13.1",
-    "@ray-js/ray-ipc-player": "2.0.20-beta-5",
+    "@ray-js/ray-ipc-player": "2.0.20-beta-6",
     "@ray-js/ray-ipc-utils": "1.1.0-beta-13",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",