@ray-js/ipc-player-integration 0.0.29 → 0.0.31-beta.1

package/lib/widgets/videoBitKBP/videoBitKBP.d.ts

@@ -4,6 +4,7 @@ import './videoBitKBP.less';
 type Props = ComponentConfigProps & {
     className?: string;
     hideKbsMenu?: boolean;
+    hideSignalMenu?: boolean;
 };
 export declare const VideoBitKBP: (props: Props) => React.JSX.Element | null;
 export {};

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, usePageEvent } from '@ray-js/ray';
+import { View, Text, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
-import { getVideoBitrateKbps } from '@ray-js/ray-ipc-utils';
+import { getVideoBitrateKbps, requestWifiSignal } from '@ray-js/ray-ipc-utils';
 import { PlayState } from '../../interface';
 import './videoBitKBP.less';
 import { useStore } from '../../ctx/store';
@@ -10,15 +10,17 @@ export const VideoBitKBP = props => {
     devId,
     playState,
     className,
-    hideKbsMenu
+    hideKbsMenu,
+    hideSignalMenu
   } = props;
   const [bitKBP, setBitKBP] = useState('');
+  const [signalStrength, setSignalStrength] = useState(null);
   const store = useStore({
     playState
   });
   const timerRef = useRef();
   useEffect(() => {
-    if (store.playState === PlayState.PLAYING && !hideKbsMenu) {
+    if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
       init();
       timerRef.current = setInterval(() => {
         init();
@@ -29,20 +31,33 @@ export const VideoBitKBP = props => {
     return () => {
       clearInterval(timerRef.current);
     };
-  }, [store.playState, hideKbsMenu]);
+  }, [store.playState, hideKbsMenu, hideSignalMenu]);
   usePageEvent('onUnload', () => {
     clearInterval(timerRef.current);
   });
   const init = async () => {
-    const res = await getVideoBitrateKbps(devId);
-    if (res.code !== -1) {
-      setBitKBP(`${res.data.kbps}KB/S`);
+    if (!hideKbsMenu) {
+      const res = await getVideoBitrateKbps(devId);
+      if (res.code !== -1) {
+        setBitKBP(res.data.kbps);
+      }
+    }
+    if (!hideSignalMenu) {
+      const signalRes = await requestWifiSignal(devId);
+      if (signalRes.code !== -1) {
+        const val = Number(signalRes.data);
+        if (!isNaN(val)) {
+          setSignalStrength(val);
+        }
+      }
     }
   };
-  if (bitKBP === '' || bitKBP === '0KB/S' || store.playState !== PlayState.PLAYING) {
+  const hasKbps = !hideKbsMenu && bitKBP !== '' && bitKBP !== '0';
+  const hasSignal = !hideSignalMenu && signalStrength !== null;
+  if (!hasKbps && !hasSignal || store.playState !== PlayState.PLAYING) {
     return null;
   }
-  if (hideKbsMenu) return null;
+  if (hideKbsMenu && hideSignalMenu) return null;
   return /*#__PURE__*/React.createElement(View, {
     className: clsx({
       'ipc-player-plugin-videoBitKBP-container': true,
@@ -50,5 +65,17 @@ export const VideoBitKBP = props => {
     })
   }, /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP"
-  }, bitKBP));
+  }, hasSignal && /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-videoBitKBP-signal"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-wi-Fi', 'ipc-player-plugin-videoBitKBP-signal-icon')
+  }), /*#__PURE__*/React.createElement(Text, null, signalStrength), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-videoBitKBP-unit-percent"
+  }, signalStrength > 0 ? '%' : 'dBm')), hasSignal && hasKbps && /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-videoBitKBP-divider"
+  }), hasKbps && /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-videoBitKBP-kbps"
+  }, /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-videoBitKBP-unit-kbs"
+  }, "KB/S"))));
 };

package/lib/widgets/videoBitKBP/videoBitKBP.less

@@ -1,19 +1,44 @@
 .ipc-player-plugin-videoBitKBP-container {
-    min-width: calc(92px * var(--ipc-player-size-scale, 1));
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  min-width: calc(92px * var(--ipc-player-size-scale, 1));
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .ipc-player-plugin-videoBitKBP {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: calc(24px * var(--ipc-player-size-scale, 1));
-    padding: 0 calc(6px * var(--ipc-player-size-scale, 1));
-    border-radius: calc(24px * var(--ipc-player-size-scale, 1));
-    color: var(--iconColor);
-    font-size: calc(12px * var(--ipc-player-size-scale, 1));
-    background-color: rgba(255, 255, 255, 0.2);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(24px * var(--ipc-player-size-scale, 1));
+  padding: 0 calc(6px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(24px * var(--ipc-player-size-scale, 1));
+  color: var(--iconColor);
+  font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  font-weight: 500;
+  background-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.ipc-player-plugin-videoBitKBP-signal {
+  display: flex;
+  align-items: center;
+}
+.ipc-player-plugin-videoBitKBP-signal-icon {
+  font-size: calc(14px * var(--ipc-player-size-scale, 1));
+  margin-right: calc(4px * var(--ipc-player-size-scale, 1));
+}
+.ipc-player-plugin-videoBitKBP-divider {
+  width: 1px;
+  height: calc(10px * var(--ipc-player-size-scale, 1));
+  background-color: var(--iconColor);
+  margin: 0 calc(4px * var(--ipc-player-size-scale, 1));
+}
+.ipc-player-plugin-videoBitKBP-kbps {
+  display: flex;
+  align-items: center;
+}
+.ipc-player-plugin-videoBitKBP-unit-kbs {
+  margin-left: calc(4px * var(--ipc-player-size-scale, 1));
+}
+.ipc-player-plugin-videoBitKBP-unit-percent {
+  margin-left: calc(2px * var(--ipc-player-size-scale, 1));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.29",
+  "version": "0.0.31-beta.1",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -38,7 +38,7 @@
     "@ray-js/direction-control": "^0.0.8",
     "@ray-js/ipc-ptz-zoom": "^0.0.3",
     "@ray-js/ray-ipc-player": "^2.1.0",
-    "@ray-js/ray-ipc-utils": "^1.1.13",
+    "@ray-js/ray-ipc-utils": "^1.1.14",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
     "color": "^5.0.2",