@ray-js/ipc-player-integration 0.0.30 → 0.0.31-beta.2

package/lib/widgets/realTimeMagnification/realTimeMagnification.js

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { PlayState } from '../../interface';
+import { useStore } from '../../ctx/store';
+import { zoomLevelChange, setScaleMultipleEvent, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import './realTimeMagnification.less';
+
+/** 全量档位列表 */
+const ALL_ZOOM_LEVELS = [1, 2, 4, 6, 8, 12];
+export const RealTimeMagnification = props => {
+  const {
+    playState,
+    event,
+    className,
+    screenType: screenTypeAtom,
+    maxZoomSettings: maxZoomAtom
+  } = props;
+  const {
+    playState: currentPlayState,
+    screenType,
+    maxZoomSettings
+  } = useStore({
+    playState,
+    screenType: screenTypeAtom,
+    maxZoomSettings: maxZoomAtom
+  });
+  const [currentZoom, setCurrentZoom] = useState(1);
+
+  /** 根据 maxZoomSettings 动态生成可用档位列表 */
+  const zoomLevels = useMemo(() => {
+    const max = maxZoomSettings || 6;
+    const levels = ALL_ZOOM_LEVELS.filter(level => level <= max);
+    // 若最大值不在预设档位中，追加到末尾
+    if (max > 1 && levels[levels.length - 1] !== max) {
+      levels.push(max);
+    }
+    return levels;
+  }, [maxZoomSettings]);
+  useEffect(() => {
+    const onZoomChange = zoomLevel => {
+      if (zoomLevel > 0) {
+        setCurrentZoom(zoomLevel);
+      }
+    };
+    event.on(zoomLevelChange, onZoomChange);
+    return () => {
+      event.off(zoomLevelChange, onZoomChange);
+    };
+  }, [event]);
+
+  /** 获取当前倍数对应的档位显示值（取最接近且 <= currentZoom 的档位） */
+  const getDisplayZoom = useCallback(() => {
+    for (let i = zoomLevels.length - 1; i >= 0; i--) {
+      if (currentZoom >= zoomLevels[i]) {
+        return zoomLevels[i];
+      }
+    }
+    return zoomLevels[0];
+  }, [currentZoom, zoomLevels]);
+
+  /** 获取下一档倍数，循环切换 */
+  const getNextZoom = useCallback(() => {
+    const display = getDisplayZoom();
+    const currentIndex = zoomLevels.indexOf(display);
+    const nextIndex = (currentIndex + 1) % zoomLevels.length;
+    return zoomLevels[nextIndex];
+  }, [getDisplayZoom, zoomLevels]);
+
+  /** 点击切换到下一档倍数 */
+  const handleClick = useCallback(() => {
+    event.emit(pauseTimeToHideAllComponent);
+    const nextZoom = getNextZoom();
+    console.log('RealTimeMagnification click', 'currentZoom:', currentZoom, 'nextZoom:', nextZoom);
+    event.emit(setScaleMultipleEvent, nextZoom);
+    event.emit(startTimeToHideAllComponent);
+  }, [getNextZoom, event, currentZoom]);
+  if (currentPlayState !== PlayState.PLAYING) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: handleClick,
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-realtime-magnification', {
+      'ipc-player-plugin-realtime-magnification-full': screenType === 'full'
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "magnificationText"
+  }, currentZoom.toFixed(1), "X")));
+};

package/lib/widgets/realTimeMagnification/realTimeMagnification.less

@@ -0,0 +1,20 @@
+.ipc-player-plugin-realtime-magnification {
+  background-color: rgba(255, 255, 255, 0.3);
+  padding: calc(4px * var(--ipc-player-size-scale, 1)) calc(5px * var(--ipc-player-size-scale, 1));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  .magnificationText {
+    color: var(--iconColor);
+    font-weight: 600;
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  }
+}
+.ipc-player-plugin-realtime-magnification-full {
+  padding-left: calc(8px * var(--ipc-player-size-scale, 1));
+  padding-right: calc(8px * var(--ipc-player-size-scale, 1));
+  border-radius: calc(5px * var(--ipc-player-size-scale, 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.30",
+  "version": "0.0.31-beta.2",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [