@ray-js/ipc-player-integration 0.0.53-beta.11 → 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/package.json

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