@ray-js/ipc-player-integration 0.0.1-beta-74 → 0.0.1-beta-76

package/lib/ui/ui.js

@@ -440,19 +440,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       console.log(`onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`);
     },
     clarity: decodeClarityDic[resolution],
-    onZoomChange: onZoomChange
-    // objectFit={
-    //   screenType === 'vertical'
-    //     ? playerFit === 'contain'
-    //       ? 'fillCrop'
-    //       : 'contain'
-    //     : landscapeMode === 'standard'
-    //     ? 'contain'
-    //     : 'fillCrop'
-    // }
-    ,
-    objectFit: "fillCrop",
-    scaleMultiple: scaleMultiple
+    onZoomChange: onZoomChange,
+    objectFit: screenType === 'vertical' ? playerFit === 'contain' ? 'fillCrop' : 'contain' : landscapeMode === 'standard' ? 'contain' : 'fillCrop',
+    scaleMultiple: 0
+    // objectFit="fillCrop"
     // scaleMultiple={-100}
     // 安卓横屏问题
     // ptzControllable={screenType === 'vertical'}

package/lib/ui/ui.less

@@ -248,4 +248,26 @@
 
 .ipc-player-element-hidden {
   // visibility: hidden !important;
+}
+
+@keyframes absolute-move-in-right-animation {
+  from {
+    transform: translate(calc(100vw), 0);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+
+@animation-time: 0.3s;
+
+.ipc-plugin-absolute-move-in-right {
+  --translate-length: calc(50 * 1vw);
+  animation: absolute-move-in-right-animation @animation-time ease-in-out;
+  transition: transform @animation-time ease-in, opacity @animation-time ease-in, width @animation-time ease-in;
+  &.ipc-plugin-absolute-move-in-right-hide {
+    transform: translate(var(--translate-length), 0);
+    opacity: 0;
+    width: 0;
+  }
 }

package/lib/widgets/fullScreen/fullScreen.less

@@ -9,9 +9,7 @@
 
 .ipc-player-plugin-full-screen-voice-wrap {
   position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  // transform: translate(180%, 0);
+  bottom: calc(24px * var(--ipc-player-size-scale, 1));
   right: calc(50px * var(--ipc-player-size-scale, 1));
   z-index: 340;
 }
@@ -21,11 +19,7 @@
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
-  transform: translate(0, 0);
-  transition: transform ease-in 0.3s;
-  &.ipc-player-plugin-full-screen-voice-hide {
-    transform: translate(180%, 0);
-  }
+  width: auto;
 }
 
 .ipc-player-plugin-full-screen-voice-disappear {
@@ -35,6 +29,6 @@
 }
 
 .ipc-plugin-full-travel-route-control {
-  width: calc(172px * var(--ipc-player-size-scale, 1));
-  height: calc(172px * var(--ipc-player-size-scale, 1));
+  // width: calc(172px * var(--ipc-player-size-scale, 1));
+  // height: calc(172px * var(--ipc-player-size-scale, 1));
 }

package/lib/widgets/fullScreen/fullTravelRouteControl.js

@@ -66,8 +66,8 @@ export function FullTravelRouteControl(props) {
     prevRotate.current = value;
   };
   return /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-plugin-full-screen-voice', {
-      'ipc-player-plugin-full-screen-voice-hide': shouldHide || isPtzActive
+    className: clsx('ipc-player-plugin-full-screen-voice', 'ipc-plugin-absolute-move-in-right', {
+      'ipc-plugin-absolute-move-in-right-hide': shouldHide || isPtzActive
     })
   }, /*#__PURE__*/React.createElement(RectDirectionControl, _extends({
     className: "ipc-plugin-full-travel-route-control",

package/lib/widgets/moveInteractiveControl/moveInteractiveControl.js

@@ -28,8 +28,7 @@ export function MoveInteractiveControl(props) {
   } = props;
   const [state, _, sendDp] = useDpState({
     devId,
-    dpCodes: [TYPE_CODE, STATE_CODE],
-    listenDpChange: false
+    dpCodes: [TYPE_CODE, STATE_CODE]
   });
   const [schemaInfo] = useSchemaInfo(devId, [TYPE_CODE]);
   const menu = useMemo(() => {
@@ -62,8 +61,8 @@ export function MoveInteractiveControl(props) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(MoveInterActiveControlUI, {
-    wrapClsName: clsx('ipc-player-plugin-move-control', {
-      'ipc-player-plugin-move-control-hide': hide
+    wrapClsName: clsx('ipc-player-plugin-move-control', 'ipc-plugin-absolute-move-in-right', {
+      'ipc-plugin-absolute-move-in-right-hide': hide
     }),
     menu: menu,
     onClick: value => {

package/lib/widgets/moveInteractiveControl/moveInteractiveControl.less

@@ -21,18 +21,7 @@
 }
 
 .ipc-player-plugin-move-control {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  transition: transform @animation-time ease-in, opacity @animation-time ease-in;
-  animation: ipc-player-plugin-move-interactive 0.3s ease-in-out;
+  flex: 1;
   width: calc(288px * var(--ipc-player-size-scale, 1));
-  &.ipc-player-plugin-move-control-hide {
-    transform: translate(100%, 0);
-    opacity: 0;
-  }
-  &.ipc-player-plugin-move-control-show {
-    transform: translate(0, 0);
-  }
+  z-index: 345;
 }

package/lib/widgets/moveInteractiveControl/moveInteractiveControlUI.d.ts

@@ -18,6 +18,7 @@ export type MoveInterActiveControlUIProps = {
     menu?: MenuItem[];
     onClick?: (key: MenuItem['key']) => void;
     activeKey?: string;
+    coverView?: boolean;
 };
 type MenuItem = {
     key: string;

package/lib/widgets/moveInteractiveControl/moveInteractiveControlUI.js

@@ -2,7 +2,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 from 'react';
-import { View, ScrollView } from '@ray-js/ray';
+import { View, ScrollView, CoverView } from '@ray-js/ray';
 import clsx from 'clsx';
 import './moveInteractiveControlUI.less';
 const defaultMenu = [{
@@ -68,20 +68,22 @@ export function MoveInterActiveControlUI(props) {
     CSSVariable = defaultCSSVariable,
     menu = defaultMenu,
     activeKey,
-    onClick
+    onClick,
+    coverView
   } = props;
   const handClick = (item, e) => {
     e.origin.stopPropagation();
     onClick && onClick(item.key);
   };
-  return /*#__PURE__*/React.createElement(View
+  const WrapComponent = coverView ? CoverView : View;
+  return /*#__PURE__*/React.createElement(WrapComponent
   // @ts-ignore
   , {
     style: _objectSpread({}, CSSVariable),
     className: clsx('ipc-player-plugin-active-control-wrap', wrapClsName)
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-active-control-title')
-  }, I18n.t('interactive')), /*#__PURE__*/React.createElement(ScrollView, {
+  }, I18n.t('homeFeatureInteractiveMenuTitle')), /*#__PURE__*/React.createElement(ScrollView, {
     style: {
       flex: 1
     },

package/lib/widgets/resolution/fullResolutionControl.js

@@ -64,8 +64,8 @@ export const FullResolutionControl = props => {
     }
   }, [resolution]);
   return /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-plugin-full-resolution-control', {
-      'ipc-player-plugin-full-resolution-control-hide': hide
+    className: clsx('ipc-player-plugin-full-resolution-control', 'ipc-plugin-absolute-move-in-right', {
+      'ipc-plugin-absolute-move-in-right-hide': hide
     })
   }, resolutionList.map(item => /*#__PURE__*/React.createElement(Text, {
     onClick: () => changeResolution(item),

package/lib/widgets/resolution/resolution.js

@@ -60,6 +60,7 @@ export const Resolution = props => {
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-resolution', {
       'ipc-player-plugin-resolution-full': screenType === 'full'
+      // 'ipc-plugin-absolute-move-in-right-hide': screenType === 'full',
     })
   }, /*#__PURE__*/React.createElement(Text, {
     className: "resolutionText"

package/lib/widgets/resolution/resolution.less

@@ -24,19 +24,12 @@
 
 .ipc-player-plugin-full-resolution-control {
   height: 100%;
-  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;
-    &.ipc-player-plugin-full-resolution-control-hide {
-      transform: translate(300%, 0);
-      opacity: 0;
-      width: 0;
-  }
 }
 
 .ipc-player-plugin-full-resolution-control-wrap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-74",
+  "version": "0.0.1-beta-76",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [