@ray-js/ipc-player-integration 0.0.53-beta.10 → 0.0.53-beta.12

package/lib/ui/ui.js

@@ -21,12 +21,13 @@ import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
 import TopRightContent from './topRightContent';
+import { useOfflineShownNotification } from './useOfflineShownNotification';
 import { FlowLowTip, VideoBitKBP } from '../widgets';
 import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { getNgRawData, getSmartImageQualityState, isLowPhone, notifyOfflineShown } from '../utils/ttt';
+import { getNgRawData, getSmartImageQualityState, isLowPhone } from '../utils/ttt';
 import { getCaptureResultSummary } from '../utils/captureResult';
 import { lensCount } from '../widgets/zoomTurntable/lensSkill';
 import { shouldRenderContent } from './absoluteContent';
@@ -185,13 +186,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       isLowPhoneRef.current = !!res;
     });
   }, []);
-
-  // 监听设备在线状态，离线提示展示时通知宿主；notifyOfflineShown 内部兼容没有该 TTT 方法的宿主。
-  useEffect(() => {
-    if (!deviceOnline) {
-      notifyOfflineShown(devId);
-    }
-  }, [deviceOnline, devId]);
+  useOfflineShownNotification(devId, deviceOnline);
 
   // 展示顶部内容
   const [showTopContent, setShowTopContent] = useState(true);

package/lib/ui/useOfflineShownNotification.d.ts

@@ -0,0 +1 @@
+export declare function useOfflineShownNotification(deviceId: string, deviceOnline: boolean): void;

package/lib/ui/useOfflineShownNotification.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+import { usePageEvent } from '@ray-js/ray';
+import { notifyOfflineShown } from '../utils/ttt';
+export function useOfflineShownNotification(deviceId, deviceOnline) {
+  const latestDeviceRef = useRef({
+    deviceId,
+    deviceOnline
+  });
+  latestDeviceRef.current = {
+    deviceId,
+    deviceOnline
+  };
+  const pageWasHiddenRef = useRef(false);
+  useEffect(() => {
+    if (!deviceOnline) {
+      notifyOfflineShown(deviceId);
+    }
+  }, [deviceId, deviceOnline]);
+  usePageEvent('onHide', () => {
+    pageWasHiddenRef.current = true;
+  });
+  usePageEvent('onShow', () => {
+    if (!pageWasHiddenRef.current) return;
+    pageWasHiddenRef.current = false;
+    const {
+      deviceId: currentDeviceId,
+      deviceOnline: isOnline
+    } = latestDeviceRef.current;
+    if (!isOnline) {
+      notifyOfflineShown(currentDeviceId);
+    }
+  });
+}

package/lib/ui/useOfflineShownNotification.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ui/useOfflineShownNotification.test.js

@@ -0,0 +1,71 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import { act, renderHook } from '@testing-library/react-hooks';
+import { notifyOfflineShown } from '../utils/ttt';
+import { useOfflineShownNotification } from './useOfflineShownNotification';
+const mockPageEventHandlers = {};
+jest.mock('@ray-js/ray', () => ({
+  usePageEvent: (event, handler) => {
+    // Keep the first callback to also verify that it reads the latest props after rerenders.
+    if (!mockPageEventHandlers[event]) mockPageEventHandlers[event] = handler;
+  }
+}));
+jest.mock('../utils/ttt', () => ({
+  notifyOfflineShown: jest.fn()
+}));
+describe('useOfflineShownNotification', () => {
+  beforeEach(() => {
+    Object.keys(mockPageEventHandlers).forEach(event => delete mockPageEventHandlers[event]);
+    notifyOfflineShown.mockClear();
+  });
+  it('notifies once on initial offline state and once per foreground return', () => {
+    renderHook(() => useOfflineShownNotification('camera-1', false));
+    expect(notifyOfflineShown).toHaveBeenCalledTimes(1);
+    act(() => mockPageEventHandlers.onShow());
+    expect(notifyOfflineShown).toHaveBeenCalledTimes(1);
+    act(() => {
+      mockPageEventHandlers.onHide();
+      mockPageEventHandlers.onShow();
+    });
+    expect(notifyOfflineShown).toHaveBeenCalledTimes(2);
+    expect(notifyOfflineShown).toHaveBeenLastCalledWith('camera-1');
+    act(() => mockPageEventHandlers.onShow());
+    expect(notifyOfflineShown).toHaveBeenCalledTimes(2);
+  });
+  it('uses the latest online state and device id on foreground return', () => {
+    const {
+      rerender
+    } = renderHook(_ref => {
+      let {
+        deviceId,
+        deviceOnline
+      } = _ref;
+      return useOfflineShownNotification(deviceId, deviceOnline);
+    }, {
+      initialProps: {
+        deviceId: 'camera-1',
+        deviceOnline: false
+      }
+    });
+    rerender({
+      deviceId: 'camera-2',
+      deviceOnline: true
+    });
+    act(() => {
+      mockPageEventHandlers.onHide();
+      mockPageEventHandlers.onShow();
+    });
+    expect(notifyOfflineShown).toHaveBeenCalledTimes(1);
+    rerender({
+      deviceId: 'camera-2',
+      deviceOnline: false
+    });
+    expect(notifyOfflineShown).toHaveBeenLastCalledWith('camera-2');
+    act(() => {
+      mockPageEventHandlers.onHide();
+      mockPageEventHandlers.onShow();
+    });
+    expect(notifyOfflineShown).toHaveBeenCalledTimes(3);
+    expect(notifyOfflineShown).toHaveBeenLastCalledWith('camera-2');
+  });
+});

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -91,17 +91,21 @@ export const VideoBitKBP = props => {
     })
   }, /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-videoBitKBP-content"
   }, 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"
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-videoBitKBP-signal-text"
+  }, signalStrength), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-videoBitKBP-signal-text ipc-player-plugin-videoBitKBP-unit-percent"
   }, signalStrength > 0 ? '%' : 'dBm')), hasSignal && (hasKbps || hasClarity) && /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP-divider"
   }), (hasKbps || hasClarity) && /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP-kbps"
   }, /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-videoBitKBP-kbps-text"
-  }, bitrateLabel))));
+  }, bitrateLabel)))));
 };

package/lib/widgets/videoBitKBP/videoBitKBP.less

@@ -18,24 +18,33 @@
   background-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
-.ipc-player-plugin-videoBitKBP-signal {
+.ipc-player-plugin-videoBitKBP-content {
   display: flex;
-  align-items: center;
+  align-items: baseline;
+}
+.ipc-player-plugin-videoBitKBP-signal,
+.ipc-player-plugin-videoBitKBP-kbps {
+  display: flex;
+  align-items: baseline;
+  height: calc(16px * var(--ipc-player-size-scale, 1));
+  line-height: calc(16px * var(--ipc-player-size-scale, 1));
 }
 .ipc-player-plugin-videoBitKBP-signal-icon {
+  align-self: center;
   font-size: calc(14px * var(--ipc-player-size-scale, 1));
   margin-right: calc(4px * var(--ipc-player-size-scale, 1));
 }
+.ipc-player-plugin-videoBitKBP-signal-text,
+.ipc-player-plugin-videoBitKBP-kbps-text {
+  line-height: calc(16px * var(--ipc-player-size-scale, 1));
+}
 .ipc-player-plugin-videoBitKBP-divider {
+  align-self: center;
   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-kbps-text {
   white-space: nowrap;
 }

package/lib/widgets/videoBitKBP/videoBitKBP.test.js

@@ -1,8 +1,10 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { act } from 'react-dom/test-utils';
-import { getVideoBitrateKbps } from '@ray-js/ray-ipc-utils';
+import { getVideoBitrateKbps, requestWifiSignal } from '@ray-js/ray-ipc-utils';
 let mockStoreState;
 jest.mock('@ray-js/ray', () => ({
   View: _ref => {
@@ -97,6 +99,48 @@ describe('VideoBitKBP auto clarity', () => {
       ReactDOM.unmountComponentAtNode(container);
     }
   });
+  it('keeps signal and auto clarity in the same bitrate badge', async () => {
+    const container = document.createElement('div');
+    getVideoBitrateKbps.mockResolvedValue({
+      code: 0,
+      data: {
+        kbps: '128'
+      }
+    });
+    requestWifiSignal.mockResolvedValue({
+      code: 0,
+      data: '-60'
+    });
+    mockStoreState = {
+      resolution: 'AUTO',
+      autoClarity: 'HD',
+      playState: 1
+    };
+    try {
+      var _container$querySelec, _container$querySelec2, _container$querySelec3, _container$querySelec4, _container$querySelec5;
+      await act(async () => {
+        ReactDOM.render(/*#__PURE__*/React.createElement(VideoBitKBP, {
+          devId: 'device'
+        }), container);
+      });
+      expect((_container$querySelec = container.querySelector('.ipc-player-plugin-videoBitKBP-signal')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.textContent).toBe('-60dBm');
+      expect((_container$querySelec2 = container.querySelector('.ipc-player-plugin-videoBitKBP-kbps')) === null || _container$querySelec2 === void 0 ? void 0 : _container$querySelec2.textContent).toBe('ipc_player_resolution_HD 128 KB/S');
+      expect(Array.from((_container$querySelec3 = (_container$querySelec4 = container.querySelector('.ipc-player-plugin-videoBitKBP-content')) === null || _container$querySelec4 === void 0 ? void 0 : _container$querySelec4.children) !== null && _container$querySelec3 !== void 0 ? _container$querySelec3 : []).map(element => element.className)).toEqual(['ipc-player-plugin-videoBitKBP-signal', 'ipc-player-plugin-videoBitKBP-divider', 'ipc-player-plugin-videoBitKBP-kbps']);
+      mockStoreState = {
+        resolution: 'HD',
+        autoClarity: 'HD',
+        playState: 1
+      };
+      act(() => {
+        ReactDOM.render(/*#__PURE__*/React.createElement(VideoBitKBP, {
+          devId: 'device'
+        }), container);
+      });
+      expect((_container$querySelec5 = container.querySelector('.ipc-player-plugin-videoBitKBP-kbps')) === null || _container$querySelec5 === void 0 ? void 0 : _container$querySelec5.textContent).toBe('128 KB/S');
+    } finally {
+      ReactDOM.unmountComponentAtNode(container);
+    }
+  });
   it('shows actual clarity independently of bitrate, signal and play state', () => {
     const markup = renderWidget('AUTO', 'HD', 2);
     expect(markup).toContain('ipc_player_resolution_HD');

package/package.json

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