@ray-js/ipc-player-integration 0.0.53-beta.1 → 0.0.53-beta.11

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View, Text, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import { getVideoBitrateKbps, requestWifiSignal } from '@ray-js/ray-ipc-utils';
@@ -7,8 +7,6 @@ import { PlayState } from '../../interface';
 import './videoBitKBP.less';
 import { useStore } from '../../ctx/store';
 import Strings from '../../i18n';
-import { UIEventContext } from '../../ui/context';
-import { autoClarityChange } from '../../ui/constant';
 export const VideoBitKBP = props => {
   const {
     devId,
@@ -19,32 +17,12 @@ export const VideoBitKBP = props => {
   } = props;
   const [bitKBP, setBitKBP] = useState('');
   const [signalStrength, setSignalStrength] = useState(null);
-  // 自动清晰度当前实际档位：null 表示未开启自动模式，不展示
-  const [autoClarity, setAutoClarity] = useState(null);
   const store = useStore({
     playState,
-    resolution: props.resolution
+    resolution: props.resolution,
+    autoClarity: props.autoClarity
   });
-  const {
-    event
-  } = useContext(UIEventContext);
   const timerRef = useRef();
-
-  // 监听 Resolution 控件广播的自动清晰度状态
-  useEffect(() => {
-    const onAutoClarityChange = payload => {
-      setAutoClarity(payload.enabled ? payload.clarity : null);
-    };
-    event.on(autoClarityChange, onAutoClarityChange);
-    return () => {
-      event.off(autoClarityChange, onAutoClarityChange);
-    };
-  }, [event]);
-  useEffect(() => {
-    if (store.resolution !== ClarityType.AUTO) {
-      setAutoClarity(null);
-    }
-  }, [store.resolution]);
   useEffect(() => {
     if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
       init();
@@ -78,12 +56,34 @@ export const VideoBitKBP = props => {
       }
     }
   };
-  const hasKbps = !hideKbsMenu && bitKBP !== '' && bitKBP !== '0';
-  const hasSignal = !hideSignalMenu && signalStrength !== null;
-  if (!hasKbps && !hasSignal || store.playState !== PlayState.PLAYING) {
+  const isPlaying = store.playState === PlayState.PLAYING;
+  const hasKbps = isPlaying && !hideKbsMenu && bitKBP !== '' && bitKBP !== '0';
+  const hasSignal = isPlaying && !hideSignalMenu && signalStrength !== null;
+  const activeClarity = store.resolution === ClarityType.AUTO ? store.autoClarity : null;
+  const hasClarity = Boolean(activeClarity);
+  const bitrateLabel = [activeClarity ? (clarity => {
+    switch (clarity) {
+      case ClarityType.SS:
+        return Strings.getLang('ipc_player_resolution_SS');
+      case ClarityType.SD:
+        return Strings.getLang('ipc_player_resolution_SD');
+      case ClarityType.HD:
+        return Strings.getLang('ipc_player_resolution_HD');
+      case ClarityType.UD:
+        return Strings.getLang('ipc_player_resolution_UD');
+      case ClarityType.SSP:
+        return Strings.getLang('ipc_player_resolution_SSP');
+      case ClarityType.AUTO:
+        return Strings.getLang('ipc_player_resolution_AUTO');
+      case ClarityType.AUDIO:
+        return Strings.getLang('ipc_player_resolution_AUDIO');
+      default:
+        return clarity;
+    }
+  })(activeClarity) : '', hasKbps ? `${bitKBP} KB/S` : ''].filter(Boolean).join(' ');
+  if (!hasKbps && !hasSignal && !hasClarity) {
     return null;
   }
-  if (hideKbsMenu && hideSignalMenu) return null;
   return /*#__PURE__*/React.createElement(View, {
     className: clsx({
       'ipc-player-plugin-videoBitKBP-container': true,
@@ -91,19 +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"
-  }, signalStrength > 0 ? '%' : 'dBm')), hasSignal && hasKbps && /*#__PURE__*/React.createElement(View, {
+  }), /*#__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 && /*#__PURE__*/React.createElement(View, {
+  }), (hasKbps || hasClarity) && /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP-kbps"
-  }, autoClarity && /*#__PURE__*/React.createElement(Text, {
-    className: "ipc-player-plugin-videoBitKBP-clarity"
-  }, autoClarity === 'HD' ? Strings.getLang('ipc_player_resolution_HD') : Strings.getLang('ipc_player_resolution_SD')), /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
-    className: "ipc-player-plugin-videoBitKBP-unit-kbs"
-  }, "KB/S"))));
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-videoBitKBP-kbps-text"
+  }, bitrateLabel)))));
 };

package/lib/widgets/videoBitKBP/videoBitKBP.less

@@ -18,29 +18,35 @@
   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-clarity {
-  margin-right: calc(4px * var(--ipc-player-size-scale, 1));
-}
-.ipc-player-plugin-videoBitKBP-unit-kbs {
-  margin-left: calc(4px * var(--ipc-player-size-scale, 1));
+.ipc-player-plugin-videoBitKBP-kbps-text {
+  white-space: nowrap;
 }
 .ipc-player-plugin-videoBitKBP-unit-percent {
   margin-left: calc(2px * var(--ipc-player-size-scale, 1));

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

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

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

@@ -0,0 +1,156 @@
+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, requestWifiSignal } from '@ray-js/ray-ipc-utils';
+let mockStoreState;
+jest.mock('@ray-js/ray', () => ({
+  View: _ref => {
+    let {
+      children,
+      className
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, children);
+  },
+  Text: _ref2 => {
+    let {
+      children,
+      className
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("span", {
+      className: className
+    }, children);
+  },
+  usePageEvent: () => undefined
+}));
+jest.mock('@ray-js/ray-ipc-utils', () => ({
+  getVideoBitrateKbps: jest.fn(),
+  requestWifiSignal: jest.fn()
+}));
+jest.mock('@ray-js/ray-ipc-utils/lib/interface', () => ({
+  ClarityType: {
+    SS: 'SS',
+    SD: 'SD',
+    HD: 'HD',
+    UD: 'UD',
+    SSP: 'SSP',
+    AUTO: 'AUTO',
+    AUDIO: 'AUDIO'
+  }
+}));
+jest.mock('../../ctx/store', () => ({
+  useStore: () => mockStoreState
+}));
+jest.mock('../../i18n', () => ({
+  __esModule: true,
+  default: {
+    getLang: key => key
+  }
+}));
+jest.mock('./videoBitKBP.less', () => ({}));
+const {
+  VideoBitKBP
+} = require('./videoBitKBP');
+const renderWidget = function (resolution, autoClarity) {
+  let playState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let hideKbsMenu = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  mockStoreState = {
+    resolution,
+    autoClarity,
+    playState
+  };
+  return renderToStaticMarkup(/*#__PURE__*/React.createElement(VideoBitKBP, {
+    devId: 'device',
+    playState: {},
+    resolution: {},
+    autoClarity: {},
+    hideKbsMenu,
+    hideSignalMenu: true
+  }));
+};
+describe('VideoBitKBP auto clarity', () => {
+  it('renders clarity, bitrate and unit in one text line', async () => {
+    const container = document.createElement('div');
+    getVideoBitrateKbps.mockResolvedValue({
+      code: 0,
+      data: {
+        kbps: '128'
+      }
+    });
+    mockStoreState = {
+      resolution: 'AUTO',
+      autoClarity: 'HD',
+      playState: 1
+    };
+    try {
+      await act(async () => {
+        ReactDOM.render(/*#__PURE__*/React.createElement(VideoBitKBP, {
+          devId: 'device',
+          hideKbsMenu: false,
+          hideSignalMenu: true
+        }), container);
+      });
+      expect(container.innerHTML).toContain('<span class="ipc-player-plugin-videoBitKBP-kbps-text">ipc_player_resolution_HD 128 KB/S</span>');
+    } finally {
+      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');
+    expect(markup).not.toContain('KB/S');
+    expect(markup).toContain('<span class="ipc-player-plugin-videoBitKBP-kbps-text">ipc_player_resolution_HD</span>');
+  });
+  it('does not show clarity outside auto mode', () => {
+    expect(renderWidget('SD', 'HD')).toBe('');
+  });
+  it('waits for the native clarity report in auto mode', () => {
+    expect(renderWidget('AUTO', null)).toBe('');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.53-beta.1",
+  "version": "0.0.53-beta.11",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -37,7 +37,7 @@
   "dependencies": {
     "@ray-js/direction-control": "^0.0.8",
     "@ray-js/ipc-ptz-zoom": "^0.0.3",
-    "@ray-js/ray-ipc-player": "^2.1.3",
+    "@ray-js/ray-ipc-player": "2.1.4-beta.0",
     "@ray-js/ray-ipc-utils": "^1.1.16",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",