@ray-js/ipc-player-integration 0.0.1-beta-21 → 0.0.1-beta-23

package/lib/ui/ui.js

@@ -9,8 +9,10 @@ import { useStore, getDefaultStore } from '../ctx/store';
 import { getEventInstance } from './event';
 import { UIEventContext } from './context';
 import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent } from './constant';
-import { BottomContent } from './bottomContent';
-import { TopContent } from './topContent';
+import BottomLeftContent from './bottomLeftContent';
+import BottomRightContent from './bottomRightContent';
+import TopLeftContent from './topLeftContent';
+import TopRightContent from './topRightContent';
 import './ui.less';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -27,13 +29,15 @@ const defaultCSSVariable = {
   // 有需要点击呈现不同颜色的icon
   '--iconActiveColor': '#ec653c',
   '--iconFontSize': '20px',
+  '--iconPlayerSize': '22px',
+  '--iconBoxSize': '24px',
   '--bg-color': '#000',
+  '--shot-card-bg-color': '#262626',
   '--fontColor': '#fff',
   '--fontSize': '12px'
 };
 const HIDE_COMPONENT_TIME = 5000;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
-  console.log(props, 'props');
   const {
     className,
     devId,
@@ -73,8 +77,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     systemInfo.current = getSystemInfoSync();
   }
   const {
-    topContent,
-    bottomContent,
+    topLeftContent,
+    topRightContent,
+    bottomLeftContent,
+    bottomRightContent,
     absoluteContent,
     screenType,
     playState,
@@ -82,8 +88,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     resolution,
     mute
   } = useStore({
-    topContent: instance.topContent,
-    bottomContent: instance.bottomContent,
+    topLeftContent: instance.topLeftContent,
+    topRightContent: instance.topRightContent,
+    bottomLeftContent: instance.bottomLeftContent,
+    bottomRightContent: instance.bottomRightContent,
     absoluteContent: instance.absoluteContent,
     screenType: instance.screenType,
     playState: instance.playState,
@@ -91,22 +99,66 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     resolution: instance.resolution,
     mute: instance.mute
   });
-  const renderTopContent = useMemo(() => {
-    if (!topContent || !(topContent !== null && topContent !== void 0 && topContent.length)) return null;
-    return topContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+
+  /**
+   * 渲染随机定位播放器内容
+   */
+
+  /**
+   * 渲染播放器左上角内容
+   */
+  const renderTopLeftContent = useMemo(() => {
+    if (!topLeftContent || !(topLeftContent !== null && topLeftContent !== void 0 && topLeftContent.length)) return null;
+    return topLeftContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
+      key: item.id
+    }, item.initProps), instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('top-left-item-container')
+    })));
+  }, [topLeftContent, instance]);
+
+  /**
+   * 渲染播放器右上角内容
+   */
+  const renderTopRightContent = useMemo(() => {
+    if (!topRightContent || !(topRightContent !== null && topRightContent !== void 0 && topRightContent.length)) return null;
+    return topRightContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
       key: item.id
     }, item.initProps), instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('top-right-item-container')
     })));
-  }, [topContent, instance]);
-  const renderBottomContent = useMemo(() => {
-    if (!bottomContent || !(bottomContent !== null && bottomContent !== void 0 && bottomContent.length)) return null;
-    return bottomContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+  }, [topRightContent, instance]);
+
+  /**
+   * 渲染播放器左下角内容
+   */
+  const renderBottomLeftContent = useMemo(() => {
+    if (!bottomLeftContent || !(bottomLeftContent !== null && bottomLeftContent !== void 0 && bottomLeftContent.length)) return null;
+    return bottomLeftContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
       key: item.id
     }, instance), {}, {
-      IPCPlayerContext: instance.IPCPlayerInstance
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('bottom-left-item-container')
     })));
-  }, [bottomContent, instance]);
+  }, [bottomLeftContent, instance]);
+
+  /**
+   * 渲染播放器右下角内容
+   */
+  const renderBottomRightContent = useMemo(() => {
+    if (!bottomRightContent || !(bottomRightContent !== null && bottomRightContent !== void 0 && bottomRightContent.length)) return null;
+    return bottomRightContent.map(item => /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({}, item.initProps), {}, {
+      key: item.id
+    }, instance), {}, {
+      IPCPlayerContext: instance.IPCPlayerInstance,
+      // 添加通用变量单独组件类名
+      className: clsx('bottom-right-item-container')
+    })));
+  }, [bottomLeftContent, instance]);
 
   /**
    * 视频流加载状态封装
@@ -117,27 +169,27 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     const store = getDefaultStore();
     const _screenType = store.get(instance.screenType);
     eventRef.current.emit(playerTap);
-    if (_screenType === 'full') {
-      // 如果全屏清晰度展开, 则点击关闭全屏清晰度, 展示所有组件
-      if (fullResolutionActive) {
-        setFullResolutionActive(false);
-        // 展示相应菜单启动自动隐藏定时
-        triggerEvent(showAllComponent);
-        // event.emit(startTimeToHideAllComponent);
-        return false;
-      }
-      if (prevTriggerEvent.current === hideAllComponent) {
-        triggerEvent(showAllComponent);
-      } else {
-        triggerEvent(hideAllComponent);
-      }
+    // if (_screenType === 'full') {
+    // 如果全屏清晰度展开, 则点击关闭全屏清晰度, 展示所有组件
+    if (fullResolutionActive && _screenType === 'full') {
+      setFullResolutionActive(false);
+      // 展示相应菜单启动自动隐藏定时
+      triggerEvent(showAllComponent);
+      // event.emit(startTimeToHideAllComponent);
+      return false;
+    }
+    console.log(prevTriggerEvent.current, 'prevTriggerEvent.current');
+    if (prevTriggerEvent.current === hideAllComponent) {
+      triggerEvent(showAllComponent);
+    } else {
+      triggerEvent(hideAllComponent);
     }
     return false;
   }, [fullResolutionActive]);
   const triggerEvent = type => {
     const store = getDefaultStore();
-    const _screenType = store.get(instance.screenType);
-    if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
+    store.get(instance.screenType); // if (prevTriggerEvent.current === type || _screenType === 'vertical') return;
+    if (prevTriggerEvent.current === type) return;
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
@@ -183,6 +235,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-content', className),
     style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultCSSVariable), CSSVariable), style), {}, {
+      // backgroundColor: 'rgba(0,0,0,0.2)',
       height: screenType === 'vertical' ? (style === null || style === void 0 ? void 0 : style.height) || '100%' : '100vh'
     })
   }, /*#__PURE__*/React.createElement(IPCPlayer, {
@@ -193,6 +246,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ipcPlayerContext: instance.IPCPlayerInstance,
     onChangeStreamStatus: code => {
       var _props$onPlayStatus;
+      console.log(code, 'code');
       const playStateMap = {
         [PlayerStreamStatus.PreviewSuccess]: PlayState.PLAYING,
         // 播放中
@@ -213,41 +267,44 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ,
     onZoomChange: data => {
       console.log(`zoomChange事件: ${JSON.stringify(data)}`);
-      ty.showToast({
-        title: `zoomChange事件: ${JSON.stringify(data)}`
-      });
-      setTimeout(() => {
-        ty.hideToast();
-      }, 3000);
+      // ty.showToast({
+      //   title: `zoomChange事件: ${JSON.stringify(data)}`,
+      // });
+      // setTimeout(() => {
+      //   ty.hideToast();
+      // }, 3000);
     },
     onCameraPreviewFailure: data => {
       console.log(`onCameraPreviewFailure事件: ${JSON.stringify(data)}`);
-      ty.showToast({
-        title: `onCameraPreviewFailure事件: ${JSON.stringify(data)}`
-      });
-      setTimeout(() => {
-        ty.hideToast();
-      }, 3000);
+      // ty.showToast({
+      //   title: `onCameraPreviewFailure事件: ${JSON.stringify(data)}`,
+      // });
+      // setTimeout(() => {
+      //   ty.hideToast();
+      // }, 3000);
     },
     onCameraNotifyWeakNetwork: data => {
       console.log(`onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`);
-      ty.showToast({
-        title: `onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`
-      });
-      setTimeout(() => {
-        ty.hideToast();
-      }, 3000);
+      // ty.showToast({
+      //   title: `onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`,
+      // });
+      // setTimeout(() => {
+      //   ty.hideToast();
+      // }, 3000);
     },
     clarity: resolution === 'HD' ? 'hd' : 'normal',
     privateState: privateState,
     onPlayerTap: handPlayerTap // 对应原来的onVideoTap
-  }), playerReady && /*#__PURE__*/React.createElement(TopContent, {
+  }), /*#__PURE__*/React.createElement(TopLeftContent, {
+    ctx: instance
+  }, renderTopLeftContent), /*#__PURE__*/React.createElement(TopRightContent, {
+    ctx: instance
+  }, renderTopRightContent), /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance
-  }, renderTopContent), playerReady && /*#__PURE__*/React.createElement(BottomContent, {
+  }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance
-  }, renderBottomContent), playerReady && (() => {
+  }, renderBottomRightContent), playerReady && (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
-    console.log(absoluteContent, 'absoluteContent');
     return absoluteContent.map(item => {
       return /*#__PURE__*/React.createElement(CoverView, {
         key: item.id,
@@ -258,7 +315,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }, /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
         key: item.id
       }, item.initProps), instance), {}, {
-        IPCPlayerContext: instance.IPCPlayerInstance
+        IPCPlayerContext: instance.IPCPlayerInstance,
+        // 添加通用变量单独组件类名
+        className: clsx('absolute-item-container')
       })));
     });
   })()));

package/lib/ui/ui.less

@@ -2,48 +2,185 @@
   position: relative;
   overflow: hidden;
 
-  .ipc-player-top-content-warp {
+  // 左上角容器样式
+  .ipc-player-top-left-content-wrap {
     position: absolute;
-    width: 100%;
     left: 0;
     top: 0;
     z-index: 100;
   }
-
-  .ipc-player-bottom-content-warp {
+  // 右上角容器样式
+  .ipc-player-top-right-content-wrap {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 100;
+  }
+  // 左下角容器样式
+  .ipc-player-bottom-left-content-wrap {
     position: absolute;
     z-index: 100;
-    width: 100%;
     left: 0;
     bottom: 0;
+    display: flex;
+    flex-direction: row;
   }
-
-  .ipc-player-content-item {
-    --height: 48px;
-    --gap: 10px;
+   // 右下角容器样式
+   .ipc-player-bottom-right-content-wrap {
+    position: absolute;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
     display: flex;
-    width: 100%;
-    height: calc(var(--height) * var(--ipc-player-size-scale, 1));
-    align-items: center;
-    gap: calc(var(--gap) * var(--ipc-player-size-scale, 1));
-    padding: 0 calc(16px * var(--ipc-player-size-scale, 1));
+    flex-direction: row;
+  }
+
+  
+  // 左上角隐藏
+  .ipc-player-top-left-content-show {
+    transform: translate(0, 0);
+    transition: transform ease-in 0.3s;
+  }
+
+  .ipc-player-top-left-content-hide {
+    transform: translate(0, -110%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  // 右上角隐藏
+  .ipc-player-top-right-content-show {
     transform: translate(0, 0);
     transition: transform ease-in 0.3s;
+  }
+
+  .ipc-player-top-right-content-hide {
+    transform: translate(0, -110%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  
+  // 左下角隐藏
+  .ipc-player-bottom-left-content-hide {
+    transform: translate(0, 110%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .ipc-player-bottom-left-content-show {
+    transform: translate(0, 0);
+    transition: transform ease-in 0.3s;
+  }
+
+  // 右下角隐藏
+  .ipc-player-bottom-right-content-hide {
+    transform: translate(0, 110%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .ipc-player-bottom-right-content-show {
+    transform: translate(0, 0);
+    transition: transform ease-in 0.3s;
+  }
+
+  
+  // 左上角子元素内容区域样式
+  .ipc-player-top-left-content-container {
+    display: flex;
+    flex-direction: inherit;
+  }
 
-    &.ipc-player-top-content {
-      justify-content: flex-end;
+  // 右上角子元素内容区域样式
+  .ipc-player-top-right-content-container {
+    display: flex;
+    flex-direction: inherit;
+  }
+
+  // 左下角子元素内容区域样式
+  .ipc-player-bottom-left-content-container {
+    display: flex;
+    flex-direction: inherit;
+  }
 
-      &.ipc-player-top-content-hide {
-        transform: translate(0, -110%);
-      }
-    }
+  // 右下角子元素内容区域样式
+  .ipc-player-bottom-right-content-container {
+    display: flex;
+    flex-direction: inherit;
+  }
 
-    &.ipc-player-bottom-content {
-      &.ipc-player-bottom-content-hide {
-        transform: translate(0, 110%)
-      }
-    }
+  .ipc-player-bottom-right-content-wrap {
+    position: absolute;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+  }
+
+  .ipc-player-bottom-right-item-container {
+    padding: 0 8px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+ // 左上角子元素容器
+  .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;
+  }
+ 
+
+  // 右上角子元素容器
+  .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;
+  }
+
+   // 左下角子元素容器
+   .bottom-left-item-container {
+    padding: 0 8px;
+  }
+
+  .bottom-left-item-container:first-of-type {
+    padding: 0 8px 0 16px;
+  }
+  .bottom-left-item-container:last-of-type {
+    padding: 0 0 0 8px;
+  }
+  .bottom-left-item-container:only-of-type{
+    padding: 0 0 0 16px;
+  }
+
+  // 右下角子元素容器
+  .bottom-right-item-container {
+    padding: 0 8px;
+  }
+
+  .bottom-right-item-container:first-of-type {
+    padding: 0 8px 0 0;
+  }
+  .bottom-right-item-container:last-of-type {
+    padding: 0 16px 0 8px;
+  }
+  .bottom-right-item-container:only-of-type {
+    padding: 0 16px 0 0;
   }
+ 
 }
 
 

package/lib/utils/device/index.d.ts

@@ -11,3 +11,9 @@ export interface IDpCode {
 }
 export declare function getDpIdsByCodes<T extends string>(devId: string, dpIds: T[]): Promise<Record<T, string>>;
 export declare const showMathPowValue: (value: any, scale: any) => string | 0;
+export declare const getDevInfo: <T>(deviceId: string) => Promise<any>;
+/**
+ * 根据DpCode获取枚举型DP的range是否包含对应项
+ * @param result: {code: number, msg: string}
+ */
+export declare const getEnumRangeIsValid: (devId: any, dpCode: any, rangValue: any) => Promise<any>;

package/lib/utils/device/index.js

@@ -1,3 +1,4 @@
+import IpcUtils from '@ray-js/ray-ipc-utils';
 export function getDpValue(options) {
   return new Promise((resolve, reject) => {
     ty.device.getDeviceInfo({
@@ -52,4 +53,55 @@ export const showMathPowValue = (value, scale) => {
     v = (Number(value) / Math.pow(10, scale)).toFixed(1);
   }
   return v;
+};
+export const getDevInfo = deviceId => {
+  return new Promise(resolve => {
+    try {
+      ty.device.getDeviceInfo({
+        deviceId,
+        success: res => {
+          resolve({
+            code: 0,
+            data: res
+          });
+        },
+        fail: err => {
+          resolve({
+            code: -1,
+            msg: err
+          });
+        }
+      });
+    } catch (err) {
+      resolve({
+        code: -1,
+        msg: String(err)
+      });
+    }
+  });
+};
+
+/**
+ * 根据DpCode获取枚举型DP的range是否包含对应项
+ * @param result: {code: number, msg: string}
+ */
+
+export const getEnumRangeIsValid = async (devId, dpCode, rangValue) => {
+  const infoData = await IpcUtils.getDevInfo(devId);
+  if (infoData.code === 0) {
+    var _targetSchema$propert;
+    const {
+      schema
+    } = infoData.data;
+    const arrayFromValues = Object.values(schema);
+    const targetSchema = arrayFromValues.find(item => item.code === dpCode);
+    if ((targetSchema === null || targetSchema === void 0 || (_targetSchema$propert = targetSchema.property) === null || _targetSchema$propert === void 0 ? void 0 : _targetSchema$propert.type) === 'enum') {
+      const {
+        range
+      } = targetSchema.property;
+      return range.includes(rangValue);
+    }
+    return false;
+  }
+  return false;
 };

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+/** 美克风对讲按钮径向渐变 */
+export declare const radialGradient: (color: any) => string;
+export declare const adjustBrightness: (hex: any, factor: any) => string;

package/lib/utils/index.js

@@ -0,0 +1,15 @@
+/** 美克风对讲按钮径向渐变 */
+export const radialGradient = color => {
+  return `radial-gradient(at center, ${adjustBrightness(color, 0.88)}, ${adjustBrightness(color, 1.2)})`;
+};
+export const adjustBrightness = (hex, factor) => {
+  const color = parseInt(hex.slice(1), 16); // 去掉 # 转为数字
+  let r = color >> 16 & 0xff;
+  let g = color >> 8 & 0xff;
+  let b = color >> 0 & 0xff;
+  r = Math.min(255, Math.max(30, Math.floor(r * factor)));
+  g = Math.min(255, Math.max(30, Math.floor(g * factor)));
+  b = Math.min(255, Math.max(30, Math.floor(b * factor)));
+  const hexString = 1 << 24 | r << 16 | g << 8 | b;
+  return `#${hexString.toString(16).slice(1)}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-21",
+  "version": "0.0.1-beta-23",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [
@@ -31,21 +31,19 @@
     "release-it": "standard-version",
     "test": "yarn jest"
   },
-  "peerDependencies": {
-    "@ray-js/ray": "^1.4.9"
-  },
+  "peerDependencies": {},
   "dependencies": {
-    "@ray-js/ray-ipc-player": "2.0.18-beta-3",
+    "@ray-js/ray-ipc-player": "2.0.19-beta-beta-1",
     "@ray-js/ray-ipc-utils": "1.1.0-beta-12",
-    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-1",
+    "@ray-js/ipc-ptz-zoom": "0.0.2-beta-3",
     "clsx": "^1.2.1",
-    "jotai": "^2.10.2"
+    "jotai": "^2.10.2",
+    "@ray-js/panel-sdk": "^1.13.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
-    "@ray-js/panel-sdk": "^1.13.0-storage.7",
     "@ray-js/ray": "^1.4.9",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
@@ -56,7 +54,7 @@
     "standard-version": "9.3.2"
   },
   "resolutions": {
-    "@ray-js/builder-mp": "1.5.37"
+    "@ray-js/builder-mp": "1.6.2"
   },
   "husky": {
     "hooks": {

package/lib/plugins/videoBitKbps/index.d.ts

@@ -1 +0,0 @@
-export * from './videoBitKbps';

package/lib/plugins/videoBitKbps/index.js

@@ -1 +0,0 @@
-export * from './videoBitKbps';