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

package/lib/widgets/captureResult/captureResult.less

@@ -1,22 +1,36 @@
 .ipc-player-plugin-capture-result-toast,
 .ipc-player-plugin-record-success-toast,
 .ipc-player-plugin-screenshot-toast {
+  --capture-result-text-color: var(--fontColor, #fff);
+  --capture-result-near-backdrop-color: rgba(255, 255, 255, 0.2);
+  --capture-result-far-backdrop-color: rgba(255, 255, 255, 0.1);
+
   z-index: 100;
   display: flex;
   flex: 1;
   align-items: center;
-  padding: calc(8px * var(--ipc-player-size-scale, 1))
+  padding: calc(7px * var(--ipc-player-size-scale, 1))
+    calc(16px * var(--ipc-player-size-scale, 1))
+    calc(7px * var(--ipc-player-size-scale, 1))
     calc(12px * var(--ipc-player-size-scale, 1));
   background-color: var(--shot-card-bg-color);
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));
 }
 
+:root[theme='light'] .ipc-player-plugin-capture-result-toast {
+  --capture-result-text-color: #1a1a1a;
+  --capture-result-near-backdrop-color: rgba(0, 0, 0, 0.1);
+  --capture-result-far-backdrop-color: rgba(0, 0, 0, 0.05);
+
+  background-color: #fff;
+}
+
 .ipc-player-plugin-capture-result-image-box,
 .ipc-player-plugin-record-success-toast-image-box,
 .ipc-player-plugin-screenshot-toast-image-box {
   position: relative;
   width: calc(66px * var(--ipc-player-size-scale, 1));
-  height: calc(66px * 0.57 * var(--ipc-player-size-scale, 1));
+  height: calc(39px * var(--ipc-player-size-scale, 1));
   overflow: hidden;
   border-radius: calc(4px * var(--ipc-player-size-scale, 1));
 }
@@ -29,17 +43,39 @@
   object-fit: cover;
 }
 
-.ipc-player-plugin-capture-result-image-box-multi .ipc-player-plugin-capture-result-image,
-.ipc-player-plugin-record-success-toast-image-box-multi .ipc-player-plugin-record-success-toast-image,
-.ipc-player-plugin-screenshot-toast-image-box-multi .ipc-player-plugin-screenshot-toast-image {
+.ipc-player-plugin-capture-result-backdrop,
+.ipc-player-plugin-capture-result-image-front {
   position: absolute;
-  top: 0;
-  width: calc(56px * var(--ipc-player-size-scale, 1));
   box-sizing: border-box;
-  border: 1px solid var(--shot-card-bg-color);
   border-radius: calc(4px * var(--ipc-player-size-scale, 1));
 }
 
+.ipc-player-plugin-capture-result-image-back {
+  top: calc(1px * var(--ipc-player-size-scale, 1));
+  left: calc(5px * var(--ipc-player-size-scale, 1));
+  z-index: 1;
+  width: calc(56px * var(--ipc-player-size-scale, 1));
+  height: calc(28px * var(--ipc-player-size-scale, 1));
+  background: var(--capture-result-far-backdrop-color);
+}
+
+.ipc-player-plugin-capture-result-image-middle {
+  top: calc(3px * var(--ipc-player-size-scale, 1));
+  left: calc(2.5px * var(--ipc-player-size-scale, 1));
+  z-index: 2;
+  width: calc(61px * var(--ipc-player-size-scale, 1));
+  height: calc(30.5px * var(--ipc-player-size-scale, 1));
+  background: var(--capture-result-near-backdrop-color);
+}
+
+.ipc-player-plugin-capture-result-image-front {
+  top: calc(5px * var(--ipc-player-size-scale, 1));
+  left: 0;
+  z-index: 3;
+  width: calc(66px * var(--ipc-player-size-scale, 1));
+  height: calc(33px * var(--ipc-player-size-scale, 1));
+}
+
 .ipc-player-plugin-capture-result-play-icon-box,
 .ipc-player-plugin-record-success-play-icon-box {
   position: absolute;
@@ -49,18 +85,23 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
+  width: calc(16px * var(--ipc-player-size-scale, 1));
+  height: calc(16px * var(--ipc-player-size-scale, 1));
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 50%;
   transform: translate(-50%, -50%);
 }
 
+.ipc-player-plugin-capture-result-image-box-multi
+  .ipc-player-plugin-capture-result-play-icon-box {
+  top: calc(50% + 2px * var(--ipc-player-size-scale, 1));
+}
+
 .ipc-player-plugin-capture-result-play-icon,
 .ipc-player-plugin-record-success-play-icon {
   color: #ffffff;
-  font-size: calc(18px * var(--ipc-player-size-scale, 1)) !important;
+  font-size: calc(9px * var(--ipc-player-size-scale, 1)) !important;
 }
 
 .ipc-player-plugin-capture-result-title,
@@ -69,17 +110,20 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  min-width: 0;
   margin-right: calc(12px * var(--ipc-player-size-scale, 1));
-  margin-left: calc(12px * var(--ipc-player-size-scale, 1));
-  color: var(--fontColor);
+  margin-left: calc(8px * var(--ipc-player-size-scale, 1));
+  color: var(--capture-result-text-color, var(--fontColor));
   font-size: calc(14px * var(--ipc-player-size-scale, 1));
+  line-height: calc(20px * var(--ipc-player-size-scale, 1));
   word-break: break-word;
 }
 
 .ipc-player-plugin-capture-result-count {
   margin-top: calc(2px * var(--ipc-player-size-scale, 1));
-  color: var(--fontColor);
+  color: var(--capture-result-text-color, var(--fontColor));
   font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  line-height: calc(17px * var(--ipc-player-size-scale, 1));
   opacity: 0.5;
 }
 
@@ -88,6 +132,7 @@
 .ipc-player-plugin-screenshot-toast-bottom {
   min-width: calc(52px * var(--ipc-player-size-scale, 1));
   max-width: calc(100px * var(--ipc-player-size-scale, 1));
+  flex-shrink: 0;
   padding: calc(5px * var(--ipc-player-size-scale, 1))
     calc(11px * var(--ipc-player-size-scale, 1));
   overflow: hidden;

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

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

package/lib/widgets/captureResult/captureResult.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+jest.mock('@ray-js/ray', () => {
+  const React = require('react');
+  return {
+    Image: _ref => {
+      let {
+        className,
+        src
+      } = _ref;
+      return /*#__PURE__*/React.createElement("img", {
+        alt: "",
+        className: className,
+        src: src
+      });
+    },
+    Text: _ref2 => {
+      let {
+        children,
+        className
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("span", {
+        className: className
+      }, children);
+    },
+    View: _ref3 => {
+      let {
+        children,
+        className
+      } = _ref3;
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      }, children);
+    }
+  };
+});
+jest.mock('../../i18n', () => ({
+  __esModule: true,
+  default: {
+    getLang: key => key,
+    formatString: (template, count) => `${template}:${count}`
+  }
+}));
+jest.mock('./captureResult.less', () => ({}));
+const {
+  CaptureResultToast
+} = require('./captureResult');
+const renderToast = count => renderToStaticMarkup(/*#__PURE__*/React.createElement(CaptureResultToast, {
+  brandColor: "#ff592a",
+  count: count,
+  kind: "screenshot",
+  onCheck: () => undefined,
+  thumbnailPath: "thingfile://capture.jpg"
+}));
+const countClass = (markup, className) => [...markup.matchAll(/class="([^"]*)"/g)].filter(_ref4 => {
+  let [, names] = _ref4;
+  return names.split(/\s+/).includes(className);
+}).length;
+describe('CaptureResultToast', () => {
+  it('keeps the single-item thumbnail unchanged', () => {
+    const markup = renderToast(1);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-backdrop')).toBe(0);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-front')).toBe(0);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image')).toBe(1);
+  });
+  it('renders both backdrops for two captured items', () => {
+    const markup = renderToast(2);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-backdrop')).toBe(2);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-back')).toBe(1);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-middle')).toBe(1);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-front')).toBe(1);
+  });
+  it('caps the backdrop count at two', () => {
+    const markup = renderToast(4);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-backdrop')).toBe(2);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-back')).toBe(1);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-middle')).toBe(1);
+    expect(countClass(markup, 'ipc-player-plugin-capture-result-image-front')).toBe(1);
+  });
+});

package/lib/widgets/recordVideo/recordVideo.js

@@ -117,7 +117,11 @@ export function RecordVideo(props) {
     var _props$multiCameraCtx;
     const requestId = ++recordResultRequestIdRef.current;
     const splitNum = (_props$multiCameraCtx = props.multiCameraCtx) === null || _props$multiCameraCtx === void 0 || (_props$multiCameraCtx = _props$multiCameraCtx.protocol) === null || _props$multiCameraCtx === void 0 ? void 0 : _props$multiCameraCtx.total_split_num;
-    const summary = await getCaptureResultSummary(recordInfo, splitNum, devId);
+    const summary = await getCaptureResultSummary(recordInfo, {
+      multiLens: props.multiLens,
+      protocolCount: splitNum,
+      devId
+    });
     if (requestId !== recordResultRequestIdRef.current) return;
     if (!summary) return;
     setState({

package/lib/widgets/resolution/index.d.ts

@@ -1,2 +1 @@
 export * from './resolution';
-export * from './autoClarity';

package/lib/widgets/resolution/index.js

@@ -1,2 +1 @@
-export * from './resolution';
-export * from './autoClarity';
+export * from './resolution';

package/lib/widgets/resolution/resolution.js

@@ -11,7 +11,6 @@ import { useStore } from '../../ctx/store';
 import './resolution.less';
 export const Resolution = props => {
   const {
-    IPCPlayerContext,
     setResolution,
     addContent,
     hasContent,

package/lib/widgets/resolution/resolution.less

@@ -21,10 +21,6 @@
   border-radius: calc(5px * var(--ipc-player-size-scale, 1));
 }
 
-.ipc-player-plugin-resolution-active {
-  background-color: var(--brandColor, rgba(255, 89, 42, 0.9));
-}
-
 .ipc-player-plugin-full-resolution-control {
   height: 100%;
   width: 200px;

package/lib/widgets/screenshot/screenshot.js

@@ -139,7 +139,11 @@ export function Screenshot(props) {
           var _props$multiCameraCtx;
           setIgnoreHideStopPreview(false);
           const splitNum = (_props$multiCameraCtx = props.multiCameraCtx) === null || _props$multiCameraCtx === void 0 || (_props$multiCameraCtx = _props$multiCameraCtx.protocol) === null || _props$multiCameraCtx === void 0 ? void 0 : _props$multiCameraCtx.total_split_num;
-          const summary = await getCaptureResultSummary(res, splitNum, devId);
+          const summary = await getCaptureResultSummary(res, {
+            multiLens: props.multiLens,
+            protocolCount: splitNum,
+            devId
+          });
           if (requestId !== snapshotRequestIdRef.current) return;
           if (!summary) {
             handleSnapshotFail({});

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,15 +1,12 @@
-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';
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 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';
-import { storage } from '../../utils/storage';
-import { AUTO_CLARITY_STORAGE_KEY } from '../resolution/autoClarity';
 export const VideoBitKBP = props => {
   const {
     devId,
@@ -20,30 +17,12 @@ export const VideoBitKBP = props => {
   } = props;
   const [bitKBP, setBitKBP] = useState('');
   const [signalStrength, setSignalStrength] = useState(null);
-  // 自动清晰度当前档位：null 表示未开启自动模式，不展示
-  const [autoClarity, setAutoClarity] = useState(() => {
-    var _cached$clarity;
-    const cached = storage.getSync(AUTO_CLARITY_STORAGE_KEY);
-    return cached !== null && cached !== void 0 && cached.enabled ? (_cached$clarity = cached.clarity) !== null && _cached$clarity !== void 0 ? _cached$clarity : null : null;
-  });
   const store = useStore({
-    playState
+    playState,
+    resolution: props.resolution,
+    autoClarity: props.autoClarity
   });
-  const {
-    event
-  } = useContext(UIEventContext);
   const timerRef = useRef();
-
-  // 监听 AutoClarity 控件广播的自动清晰度状态
-  useEffect(() => {
-    const onAutoClarityChange = payload => {
-      setAutoClarity(payload.enabled ? payload.clarity : null);
-    };
-    event.on(autoClarityChange, onAutoClarityChange);
-    return () => {
-      event.off(autoClarityChange, onAutoClarityChange);
-    };
-  }, [event]);
   useEffect(() => {
     if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
       init();
@@ -77,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,
@@ -96,13 +97,11 @@ export const VideoBitKBP = props => {
     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, {
+  }, 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

@@ -36,11 +36,8 @@
   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,112 @@
+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';
+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('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.0",
+  "version": "0.0.53-beta.10",
   "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",

package/lib/widgets/resolution/autoClarity.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ComponentConfigProps } from '../../interface';
-import './resolution.less';
-type Props = ComponentConfigProps & {
-    className?: string;
-};
-export declare const AUTO_CLARITY_STORAGE_KEY = "autoClarity";
-export type AutoClarityMemory = {
-    enabled: boolean;
-    clarity: 'HD' | 'SD' | null;
-};
-export declare const AutoClarity: (props: Props) => React.JSX.Element;
-export {};

package/lib/widgets/resolution/autoClarity.js

@@ -1,110 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { View, Text } from '@ray-js/ray';
-import clsx from 'clsx';
-import Strings from '../../i18n';
-import { useStore } from '../../ctx/store';
-import { storage } from '../../utils/storage';
-import { UIEventContext } from '../../ui/context';
-import { widgetClick, widgetLabs, autoClarityChange } from '../../ui/constant';
-import { clarityChanged } from '../../utils/ttt';
-import './resolution.less';
-// 自动清晰度记忆 storage key（按设备维度隔离由 storage 内部 prefix 处理）
-export const AUTO_CLARITY_STORAGE_KEY = 'autoClarity';
-export const AutoClarity = props => {
-  const {
-    className,
-    devId
-  } = props;
-  const {
-    screenType,
-    resolutionList
-  } = useStore({
-    screenType: props.screenType,
-    resolutionList: props.resolutionList
-  });
-  const {
-    event
-  } = useContext(UIEventContext);
-
-  // 是否处于自动模式
-  const [auto, setAuto] = useState(false);
-
-  // 广播自动清晰度状态给 VideoBitKBP 等监听方
-  const emitClarity = (enabled, clarity) => {
-    event.emit(autoClarityChange, {
-      enabled,
-      clarity
-    });
-  };
-
-  // 进入时恢复上次退出时的选择
-  useEffect(() => {
-    const cached = storage.getSync(AUTO_CLARITY_STORAGE_KEY);
-    if (cached !== null && cached !== void 0 && cached.enabled) {
-      var _cached$clarity;
-      setAuto(true);
-      emitClarity(true, (_cached$clarity = cached.clarity) !== null && _cached$clarity !== void 0 ? _cached$clarity : null);
-      // 恢复自动模式后重新拉取一次当前清晰度
-      clarityChanged(devId).then(res => {
-        if (res !== null && res !== void 0 && res.clarity) {
-          emitClarity(true, res.clarity);
-          storage.set(AUTO_CLARITY_STORAGE_KEY, {
-            enabled: true,
-            clarity: res.clarity
-          });
-        }
-      });
-    } else {
-      emitClarity(false, null);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [devId]);
-
-  // TODO: 后面取消注释  宿主不存在 ttt 方法 clarityChanged 时整个入口不渲染
-  // if (!isClarityChangedSupported()) {
-  //   return null;
-  // }
-
-  // TODO: 后面取消注释 设备支持的清晰度档位数量 ≥ 2 时才展示自动
-  // if (!resolutionList || resolutionList.length < 2) {
-  //   return null;
-  // }
-
-  return /*#__PURE__*/React.createElement(View, {
-    onClick: async () => {
-      var _res$clarity;
-      event.emit(widgetClick, {
-        widgetId: widgetLabs.AUTO_CLARITY
-      });
-
-      // 关闭自动模式
-      if (auto) {
-        setAuto(false);
-        emitClarity(false, null);
-        storage.set(AUTO_CLARITY_STORAGE_KEY, {
-          enabled: false,
-          clarity: null
-        });
-        return;
-      }
-
-      // 开启自动模式并读取回调结果
-      setAuto(true);
-      const res = await clarityChanged(devId);
-      const next = (_res$clarity = res === null || res === void 0 ? void 0 : res.clarity) !== null && _res$clarity !== void 0 ? _res$clarity : null;
-      emitClarity(true, next);
-      storage.set(AUTO_CLARITY_STORAGE_KEY, {
-        enabled: true,
-        clarity: next
-      });
-    },
-    className: clsx(className)
-  }, /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-plugin-resolution', {
-      'ipc-player-plugin-resolution-full': screenType === 'full',
-      'ipc-player-plugin-resolution-active': auto
-    })
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "resolutionText"
-  }, Strings.getLang('ipc_player_resolution_auto'))));
-};