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

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.11",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [