@ray-js/ipc-player-integration 0.0.29-beta.7 → 0.0.29-beta.8

package/lib/ui/ui.js

@@ -297,7 +297,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
 
           // 横屏 ptz 靠右展示
           updatePlayerWidgetProps(instance, 'absolute', moveablePtzControlId, {
-            positionLeft: systemInfo.current.screenHeight - 32 - 250
+            positionLeft: getSystemInfoSync().screenWidth - 100 - 250
           });
           break;
         default:
@@ -331,6 +331,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [instance, ptzStatus]);
   useEffect(() => {
     if (!instance.multiCameraCtx.isSupport) return;
+    if (!ptzStatus || screenMode !== MultiCameraScreenMode.full) {
+      instance.hideContent('absolute', ptzMoveableTipId);
+    }
 
     // ptz 激活状态下，需要根据组件隐藏状态来决定是否展示 moveablePtzControl
     if (ptzStatus) {
@@ -342,11 +345,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
 
       // ptz 提示
       const storage = new Storage(devId);
-      if (!storage.getSync(ptzMoveableTipId) && selectedLenInfo.supportPTZ) {
+      if (!storage.getSync(ptzMoveableTipId) && selectedLenInfo.supportPTZ && screenMode === MultiCameraScreenMode.full) {
         instance.showContent('absolute', ptzMoveableTipId);
       }
     }
-  }, [instance, ptzStatus, selectedLenInfo, componentHideState]);
+  }, [instance, ptzStatus, selectedLenInfo, componentHideState, screenMode]);
 
   /* ---------------------------------多目相关副作用统一处理结束----------------------------------------- */
 
@@ -805,7 +808,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     style: {
       height: screenType === 'vertical' ? '48px' : '72px'
     }
-  }, playerReady && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance

package/lib/ui/ui.less

@@ -12,6 +12,7 @@
     height: 60px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
   }
+
   // 底部长条
   .ipc-player-bottom-content {
     position: absolute;
@@ -24,6 +25,21 @@
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
   }
 
+  .ipc-player-bottom-content-full {
+    @media (prefers-color-scheme: dark) {
+      background: #000;
+    }
+
+    @media (prefers-color-scheme: light) {
+      background: #fff;
+      --iconColor: #000;
+
+      .ipc-player-plugin-resolution {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+
   // 顶部整条内容隐藏
   .ipc-player-top-content-show {
     transform: translate(0, 0);
@@ -53,6 +69,7 @@
     top: 0;
     z-index: 100;
   }
+
   // 右上角容器样式
   .ipc-player-top-right-content-wrap {
     position: absolute;
@@ -60,6 +77,7 @@
     top: 0;
     z-index: 100;
   }
+
   // 左下角容器样式
   .ipc-player-bottom-left-content-wrap {
     position: absolute;
@@ -69,6 +87,7 @@
     display: flex;
     flex-direction: row;
   }
+
   // 右下角容器样式
   .ipc-player-bottom-right-content-wrap {
     position: absolute;
@@ -159,12 +178,15 @@
   .top-left-item-container {
     padding: 0 8px;
   }
+
   .top-left-item-container:first-of-type {
     padding: 0 8px 0 16px;
   }
+
   .top-left-item-container:last-of-type {
     padding: 0 0 0 8px;
   }
+
   .top-left-item-container:only-of-type {
     padding: 0 0 0 16px;
   }
@@ -173,12 +195,15 @@
   .top-right-item-container {
     padding: 0 8px;
   }
+
   .top-right-item-container:first-of-type {
     padding: 0 8px 0 0;
   }
+
   .top-right-item-container:last-of-type {
     padding: 0 16px 0 8px;
   }
+
   .top-right-item-container:only-of-type {
     padding: 0 16px 0 0;
   }
@@ -194,9 +219,11 @@
   .bottom-left-item-container:first-of-type {
     padding: 0 12px 0 16px;
   }
+
   .bottom-left-item-container:last-of-type {
     padding: 0 0 0 12px;
   }
+
   .bottom-left-item-container:only-of-type {
     padding: 0 0 0 16px;
   }
@@ -209,9 +236,11 @@
   .bottom-left-item-full-container:first-of-type {
     padding: 0 24px 0 16px !important;
   }
+
   .bottom-left-item-full-container:last-of-type {
     padding: 0 0 0 24px !important;
   }
+
   .bottom-left-item-full-container:only-of-type {
     padding: 0 0 0 16px !important;
   }
@@ -227,9 +256,11 @@
   .bottom-right-item-container:first-of-type {
     padding: 0 12px 0 0;
   }
+
   .bottom-right-item-container:last-of-type {
     padding: 0 16px 0 12px;
   }
+
   .bottom-right-item-container:only-of-type {
     padding: 0 16px 0 0;
   }
@@ -247,6 +278,7 @@
   from {
     transform: translate(calc(100vw), 0);
   }
+
   to {
     transform: translate(0, 0);
   }
@@ -259,13 +291,10 @@
   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;
   }
 }
-
-.ipc-player-bottom-content-full {
-  background-color: #000 !important;
-}

package/lib/widgets/multiCamera/index.less

@@ -74,7 +74,7 @@
 
     &.@{prefix}-step2 {
       right: 10px;
-      bottom: 91px;
+      bottom: 57px;
     }
 
     &.@{prefix}-ptz-tip {
@@ -171,7 +171,7 @@
 
     &.@{prefix}-step2 {
       right: 130px;
-      bottom: 110px;
+      bottom: 76px;
     }
 
     &.@{prefix}-ptz-tip {
@@ -198,7 +198,7 @@
 
     &.@{prefix}-step2 {
       right: 130px;
-      bottom: 50px;
+      bottom: 16px;
     }
 
     &.@{prefix}-ptz-tip {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.29-beta.7",
+  "version": "0.0.29-beta.8",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [