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

package/lib/ctx/ctx.composition.js

@@ -4,7 +4,7 @@ const _excluded = ["title", "duration"];
 import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, TryExperience, Resolution, AutoClarity, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification, ZoomTurntableEntry } from '../widgets';
+import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, TryExperience, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification, ZoomTurntableEntry } from '../widgets';
 import { authorizeStatus } from '../utils/authorize';
 import { PlayState } from '../interface';
 import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
@@ -74,11 +74,6 @@ export const defaultBottomLeftContent = [{
   id: 'RealTimeMagnification',
   content: RealTimeMagnification,
   hidden: true
-}, /* 自动清晰度：仅宿主存在 ttt 方法 clarityChanged 时由 widget 内部渲染 */
-{
-  id: 'AutoClarity',
-  content: AutoClarity,
-  hidden: true
 }];
 export const defaultBottomRightContent = [{
   id: 'SwitchLayout',

package/lib/ctx/ctx.js

@@ -109,6 +109,15 @@ export const createUseCtx = _ref => {
     if (!eventRef.current) {
       eventRef.current = getEventInstance();
     }
+
+    /**
+     * 自动清晰度作为独立档位并入清晰度列表：
+     * 竖屏宿主弹框（由 resolutionList 构建 actionData）与横屏 FullResolutionControl 共用。
+     */
+    const withAutoClarity = function () {
+      let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return list.includes(ClarityType.AUTO) ? list : [...list, ClarityType.AUTO];
+    };
     useEffect(() => {
       // 初始化获取缓存值
 
@@ -117,7 +126,7 @@ export const createUseCtx = _ref => {
         try {
           var _res$maxZoomSettings;
           const res = await getMemoryState(devId);
-          setResolutionList(res.resolutionList);
+          setResolutionList(withAutoClarity(res.resolutionList));
           _setResolution(res.resolution, true);
           _setMute(res.mute, true);
           setIntercomMode(res.intercomMode);
@@ -133,7 +142,7 @@ export const createUseCtx = _ref => {
         // 获取缓存的值且同步
         getMemoryState(devId).then(res => {
           var _res$maxZoomSettings2;
-          setResolutionList(res.resolutionList);
+          setResolutionList(withAutoClarity(res.resolutionList));
           // 传true表示值即可,会取播放器的值
           _setResolution(res.resolution, true);
           _setMute(res.mute, true);
@@ -238,8 +247,17 @@ export const createUseCtx = _ref => {
         return false;
       }
       return new Promise((resolve, reject) => {
+        const clarityMap = {
+          [ClarityType.SS]: 'ss',
+          [ClarityType.SD]: 'normal',
+          [ClarityType.HD]: 'hd',
+          [ClarityType.UD]: 'ud',
+          [ClarityType.SSP]: 'ssp',
+          [ClarityType.AUTO]: 'auto',
+          [ClarityType.AUDIO]: 'audio'
+        };
         IPCPlayerInstance.current.setClarity({
-          clarity: target === ClarityType.HD ? 'hd' : 'normal',
+          clarity: clarityMap[target] || 'normal',
           success: () => {
             setResolutionMemoryState(devId, target);
             updateAtom(resolution, target);

package/lib/features/initPlayerWidgets/index.js

@@ -52,15 +52,6 @@ export async function initPlayerWidgets(ctx, options) {
       newDefaultBottomLeftContent[magnificationIndex].hidden = false;
     }
   }
-  // 自动清晰度入口：这里只放开占位，真正是否渲染由 widget 内部按
-  // 「宿主有 ttt 方法 clarityChanged」+「设备支持的清晰度档位 ≥ 2」决定
-  {
-    const autoClarityIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'AutoClarity');
-    console.log('res===autoClarityIndex', autoClarityIndex);
-    if (autoClarityIndex !== -1) {
-      newDefaultBottomLeftContent[autoClarityIndex].hidden = false;
-    }
-  }
   // 焦距转盘入口：这里只放开占位，真正是否渲染由 widget 内部按
   // 「宿主有 ty.ipc.switchChannel」+「ipc_multi_zoom 解析出 cnt > 1」决定
   // （单镜头设备、不支持切镜头的老宿主都不出现）

package/lib/i18n/index.d.ts

@@ -1,9 +1,13 @@
 import { kit } from '@ray-js/panel-sdk';
 declare const Strings: kit.I18N<{
     en: {
+        ipc_player_resolution_SS: string;
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
-        ipc_player_resolution_auto: string;
+        ipc_player_resolution_UD: string;
+        ipc_player_resolution_SSP: string;
+        ipc_player_resolution_AUTO: string;
+        ipc_player_resolution_AUDIO: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;
@@ -42,9 +46,13 @@ declare const Strings: kit.I18N<{
         ipc_player_low_phone_not_support: string;
     };
     zh: {
+        ipc_player_resolution_SS: string;
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
-        ipc_player_resolution_auto: string;
+        ipc_player_resolution_UD: string;
+        ipc_player_resolution_SSP: string;
+        ipc_player_resolution_AUTO: string;
+        ipc_player_resolution_AUDIO: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;
@@ -83,9 +91,13 @@ declare const Strings: kit.I18N<{
         ipc_player_low_phone_not_support: string;
     };
 }, {
+    ipc_player_resolution_SS: string;
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
-    ipc_player_resolution_auto: string;
+    ipc_player_resolution_UD: string;
+    ipc_player_resolution_SSP: string;
+    ipc_player_resolution_AUTO: string;
+    ipc_player_resolution_AUDIO: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
     ipc_player_screenshot_multi_success_tip: string;
@@ -123,9 +135,13 @@ declare const Strings: kit.I18N<{
     ipc_player_fetch_error: string;
     ipc_player_low_phone_not_support: string;
 } | {
+    ipc_player_resolution_SS: string;
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
-    ipc_player_resolution_auto: string;
+    ipc_player_resolution_UD: string;
+    ipc_player_resolution_SSP: string;
+    ipc_player_resolution_AUTO: string;
+    ipc_player_resolution_AUDIO: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
     ipc_player_screenshot_multi_success_tip: string;

package/lib/i18n/strings.d.ts

@@ -1,8 +1,12 @@
 declare const _default: {
     en: {
+        ipc_player_resolution_SS: string;
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
-        ipc_player_resolution_auto: string;
+        ipc_player_resolution_UD: string;
+        ipc_player_resolution_SSP: string;
+        ipc_player_resolution_AUTO: string;
+        ipc_player_resolution_AUDIO: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;
@@ -41,9 +45,13 @@ declare const _default: {
         ipc_player_low_phone_not_support: string;
     };
     zh: {
+        ipc_player_resolution_SS: string;
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
-        ipc_player_resolution_auto: string;
+        ipc_player_resolution_UD: string;
+        ipc_player_resolution_SSP: string;
+        ipc_player_resolution_AUTO: string;
+        ipc_player_resolution_AUDIO: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;

package/lib/i18n/strings.js

@@ -1,8 +1,12 @@
 export default {
   en: {
+    ipc_player_resolution_SS: 'Data Saver',
     ipc_player_resolution_HD: 'HD',
     ipc_player_resolution_SD: 'SD',
-    ipc_player_resolution_auto: 'Auto',
+    ipc_player_resolution_UD: 'Ultra HD',
+    ipc_player_resolution_SSP: 'Super Ultra HD',
+    ipc_player_resolution_AUTO: 'Auto',
+    ipc_player_resolution_AUDIO: 'Audio Mode',
     ipc_player_current_resolution_is_equal: 'Already at current clarity',
     ipc_player_screenshot_success_tip: 'Screenshot saved to album',
     ipc_player_screenshot_multi_success_tip: 'Screenshots saved to album',
@@ -41,9 +45,13 @@ export default {
     ipc_player_low_phone_not_support: 'This feature is not supported on this device'
   },
   zh: {
+    ipc_player_resolution_SS: '省流量',
     ipc_player_resolution_HD: '高清',
     ipc_player_resolution_SD: '标清',
-    ipc_player_resolution_auto: '自动',
+    ipc_player_resolution_UD: '超清',
+    ipc_player_resolution_SSP: '超超清',
+    ipc_player_resolution_AUTO: '自动',
+    ipc_player_resolution_AUDIO: '音频模式',
     ipc_player_current_resolution_is_equal: '已是当前清晰度',
     ipc_player_screenshot_success_tip: '截图已保存在APP相册',
     ipc_player_screenshot_multi_success_tip: '图片已保存至相册',

package/lib/interface.d.ts

@@ -87,7 +87,7 @@ export type UseCtx = (options: {
     setVerticalMic: (value: boolean) => void;
     setScreenType: (type: ScreenType) => void;
     setRecordingDisabled: (type: boolean) => void;
-    setResolution: (type: string) => void;
+    setResolution: (type: string) => Promise<boolean>;
     setResolutionList: (type: string[]) => void;
     setRecording: (value: boolean, onlyUpdateAtom?: boolean) => Promise<CaptureResult>;
     stopRecordingOnUnload: () => Promise<CaptureResult>;

package/lib/ui/constant.d.ts

@@ -33,7 +33,6 @@ export declare const widgetLabs: {
     readonly SCREENSHOT: "Screenshot";
     readonly RECORD_VIDEO: "RecordVideo";
     readonly RESOLUTION: "Resolution";
-    readonly AUTO_CLARITY: "AutoClarity";
     readonly TRY_EXPERIENCE: "TryExperience";
     readonly FULL_RESOLUTION_CONTROL: "FullResolutionControl";
     readonly MUTED: "Muted";
@@ -62,8 +61,8 @@ export declare const widgetLabs: {
 export declare const bottomLeftContentResize = "bottomLeftContentResize";
 export declare const zoomLevelChange = "zoomLevelChange";
 /**
- * 自动清晰度状态变化事件：AutoClarity 控件开启/关闭自动模式或收到 clarityChanged
- * 回调结果时触发，携带 { enabled, clarity }（clarity 为 'HD' | 'SD' | null）。
+ * 自动清晰度状态变化事件：Resolution 控件检测到清晰度进入/退出自动模式或收到
+ * onClarityChanged 事件时触发，携带 { enabled, clarity }（clarity 为 ClarityType | null）。
  * VideoBitKBP 监听此事件，在码率前展示当前高清/标清文案。
  */
 export declare const autoClarityChange = "autoClarityChange";

package/lib/ui/constant.js

@@ -35,7 +35,6 @@ export const widgetLabs = {
   SCREENSHOT: 'Screenshot',
   RECORD_VIDEO: 'RecordVideo',
   RESOLUTION: 'Resolution',
-  AUTO_CLARITY: 'AutoClarity',
   TRY_EXPERIENCE: 'TryExperience',
   FULL_RESOLUTION_CONTROL: 'FullResolutionControl',
   MUTED: 'Muted',
@@ -66,8 +65,8 @@ export const bottomLeftContentResize = 'bottomLeftContentResize';
 export const zoomLevelChange = 'zoomLevelChange';
 
 /**
- * 自动清晰度状态变化事件：AutoClarity 控件开启/关闭自动模式或收到 clarityChanged
- * 回调结果时触发，携带 { enabled, clarity }（clarity 为 'HD' | 'SD' | null）。
+ * 自动清晰度状态变化事件：Resolution 控件检测到清晰度进入/退出自动模式或收到
+ * onClarityChanged 事件时触发，携带 { enabled, clarity }（clarity 为 ClarityType | null）。
  * VideoBitKBP 监听此事件，在码率前展示当前高清/标清文案。
  */
 export const autoClarityChange = 'autoClarityChange';

package/lib/ui/ui.js

@@ -23,7 +23,7 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { getNgRawData, getSmartImageQualityState, isLowPhone, isOfflineForStream } from '../utils/ttt';
+import { getNgRawData, getSmartImageQualityState, isLowPhone, notifyOfflineShown } from '../utils/ttt';
 import { getCaptureResultSummary } from '../utils/captureResult';
 import { lensCount } from '../widgets/zoomTurntable/lensSkill';
 import { shouldRenderContent } from './absoluteContent';
@@ -153,10 +153,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     });
   }, []);
 
-  // 设备离线时通知宿主视频流状态；isOfflineForStream 内部兼容没有该 TTT 方法的宿主。
+  // 监听设备在线状态，离线提示展示时通知宿主；notifyOfflineShown 内部兼容没有该 TTT 方法的宿主。
   useEffect(() => {
     if (!deviceOnline) {
-      isOfflineForStream(devId);
+      notifyOfflineShown(devId);
     }
   }, [deviceOnline, devId]);
 

package/lib/utils/ttt.d.ts

@@ -1,3 +1,4 @@
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 export type SmartImageQualityResult = {
     isPurchase: boolean;
     buttonState: number;
@@ -39,15 +40,26 @@ export declare function setAIFrameFeature(params: SetAIFrameFeatureParams): Prom
 export declare function setTrailFinish(devId: string): Promise<unknown>;
 export declare function isLowPhone(): Promise<boolean>;
 /**
- * 通知宿主当前视频流对应的设备已离线。
+ * 通知宿主离线提示已经展示。
  *
  * 这个 TTT 方法不是所有宿主都提供，因此调用前必须做能力判断；
  * 老宿主或 Web 环境下直接跳过，不能影响播放器自身的离线处理。
  */
-export declare function isOfflineForStream(devId: string): boolean;
+export declare function notifyOfflineShown(deviceId: string): boolean;
 export declare function getNgRawData(): Promise<unknown>;
 export declare function isClarityChangedSupported(): boolean;
 export type ClarityChangedResult = {
-    clarity: 'HD' | 'SD';
+    deviceId?: string;
+    clarity: ClarityType;
 };
-export declare function clarityChanged(devId: string): Promise<ClarityChangedResult | null>;
+export type ClarityChangedHandler = (result: ClarityChangedResult) => void;
+type ClarityChangedListener = (payload: ClarityChangedResult) => void;
+export declare function offClarityChanged(listener: ClarityChangedListener): void;
+/**
+ * 监听自动清晰度变化，返回取消监听函数。
+ *
+ * onClarityChanged / offClarityChanged 均使用同一个 listener 引用，
+ * 否则宿主无法正确移除监听。
+ */
+export declare function subscribeClarityChanged(devId: string, handler: ClarityChangedHandler): () => void;
+export {};

package/lib/utils/ttt.js

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 export function getSmartImageQualityState(devId) {
   return new Promise(resolve => {
     var _ty$ipc;
@@ -122,24 +123,22 @@ export function isLowPhone() {
 }
 
 /**
- * 通知宿主当前视频流对应的设备已离线。
+ * 通知宿主离线提示已经展示。
  *
  * 这个 TTT 方法不是所有宿主都提供，因此调用前必须做能力判断；
  * 老宿主或 Web 环境下直接跳过，不能影响播放器自身的离线处理。
  */
-export function isOfflineForStream(devId) {
+export function notifyOfflineShown(deviceId) {
   var _ty3;
-  const method = (_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.isOfflineForStream;
+  const method = typeof ty !== 'undefined' ? (_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.notifyOfflineShown : undefined;
   if (typeof method !== 'function') {
     return false;
   }
   try {
-    method({
-      devId
-    });
+    console.warn('res===notifyOfflineShown');
+    method(deviceId, 'preview_mini');
     return true;
   } catch (error) {
-    console.warn('res===isOfflineForStream fail', error);
     return false;
   }
 }
@@ -167,35 +166,63 @@ export function getNgRawData() {
   });
 }
 
-// 是否支持自动清晰度（ttt 方法 clarityChanged 存在即支持）
+// 是否支持自动清晰度（ttt 方法 onClarityChanged 存在即支持）
 export function isClarityChangedSupported() {
-  var _ty$ipc6;
-  return typeof ((_ty$ipc6 = ty.ipc) === null || _ty$ipc6 === void 0 ? void 0 : _ty$ipc6.clarityChanged) === 'function';
+  var _ty5;
+  return typeof ty !== 'undefined' && typeof ((_ty5 = ty) === null || _ty5 === void 0 || (_ty5 = _ty5.ipc) === null || _ty5 === void 0 ? void 0 : _ty5.onClarityChanged) === 'function';
 }
-export function clarityChanged(devId) {
-  return new Promise(resolve => {
-    var _ty$ipc7;
-    if (typeof ((_ty$ipc7 = ty.ipc) === null || _ty$ipc7 === void 0 ? void 0 : _ty$ipc7.clarityChanged) !== 'function') {
-      resolve(null);
+export function offClarityChanged(listener) {
+  var _ty6;
+  const ipc = typeof ty !== 'undefined' ? (_ty6 = ty) === null || _ty6 === void 0 ? void 0 : _ty6.ipc : undefined;
+  if (!ipc || typeof ipc.offClarityChanged !== 'function') {
+    return;
+  }
+  try {
+    ipc.offClarityChanged(listener);
+  } catch (error) {
+    console.warn('res===offClarityChanged fail', error);
+  }
+}
+
+/**
+ * 监听自动清晰度变化，返回取消监听函数。
+ *
+ * onClarityChanged / offClarityChanged 均使用同一个 listener 引用，
+ * 否则宿主无法正确移除监听。
+ */
+export function subscribeClarityChanged(devId, handler) {
+  var _ty7;
+  const ipc = typeof ty !== 'undefined' ? (_ty7 = ty) === null || _ty7 === void 0 ? void 0 : _ty7.ipc : undefined;
+  if (!ipc || typeof ipc.onClarityChanged !== 'function') {
+    return () => undefined;
+  }
+  const listener = payload => {
+    console.log('[resolution] onClarityChanged 事件到达', JSON.stringify(payload !== null && payload !== void 0 ? payload : null));
+    const {
+      deviceId,
+      clarity
+    } = payload || {};
+    if (!Object.values(ClarityType).includes(clarity)) {
+      console.warn('[resolution] onClarityChanged 缺少 clarity');
       return;
     }
-    if (!isClarityChangedSupported()) {
-      resolve(null);
+    // 一页多设备时只认自己的；宿主没带 deviceId 就不过滤
+    if (deviceId && deviceId !== devId) {
+      console.warn('[resolution] onClarityChanged 非本设备，已忽略', `${deviceId} != ${devId}`);
       return;
     }
-    try {
-      ty.ipc.clarityChanged({
-        devId,
-        success: res => {
-          resolve(res !== null && res !== void 0 ? res : null);
-        },
-        fail: e => {
-          console.warn('res===clarityChanged fail', e);
-          resolve(null);
-        }
-      });
-    } catch (e) {
-      resolve(null);
-    }
-  });
+    handler({
+      deviceId,
+      clarity
+    });
+  };
+  try {
+    ipc.onClarityChanged(listener);
+  } catch (error) {
+    console.warn('res===onClarityChanged fail', error);
+    return () => undefined;
+  }
+  return () => {
+    offClarityChanged(listener);
+  };
 }

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

@@ -1,17 +1,19 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useMemoizedFn } from 'ahooks';
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import Strings from '../../i18n';
 import { FullResolutionControl } from './fullResolutionControl';
-import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
+import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick, autoClarityChange } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
+import { subscribeClarityChanged } from '../../utils/ttt';
 import './resolution.less';
 export const Resolution = props => {
   const {
-    IPCPlayerContext,
+    devId,
     setResolution,
     addContent,
     hasContent,
@@ -29,6 +31,26 @@ export const Resolution = props => {
   const {
     event
   } = useContext(UIEventContext);
+
+  // 广播自动清晰度状态给 VideoBitKBP 等监听方；
+  // 自动模式下监听当前实际清晰度，仅用于码率区域展示。
+  useEffect(() => {
+    const emitClarity = (enabled, clarity) => {
+      event.emit(autoClarityChange, {
+        enabled,
+        clarity
+      });
+    };
+    if (resolution !== ClarityType.AUTO) {
+      emitClarity(false, null);
+      return undefined;
+    }
+    emitClarity(true, null);
+    if (!devId) return undefined;
+    return subscribeClarityChanged(devId, res => {
+      emitClarity(true, res.clarity);
+    });
+  }, [devId, event, resolution]);
   const onResolution = useMemoizedFn(() => {
     event.emit(widgetClick, {
       widgetId: widgetLabs.RESOLUTION

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/videoBitKBP/videoBitKBP.js

@@ -2,14 +2,13 @@ import React, { useContext, 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,21 +19,17 @@ 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;
-  });
+  // 自动清晰度当前实际档位：null 表示未开启自动模式，不展示
+  const [autoClarity, setAutoClarity] = useState(null);
   const store = useStore({
-    playState
+    playState,
+    resolution: props.resolution
   });
   const {
     event
   } = useContext(UIEventContext);
   const timerRef = useRef();
-
-  // 监听 AutoClarity 控件广播的自动清晰度状态
+  // 监听 Resolution 控件广播的自动清晰度状态
   useEffect(() => {
     const onAutoClarityChange = payload => {
       setAutoClarity(payload.enabled ? payload.clarity : null);
@@ -44,6 +39,11 @@ export const VideoBitKBP = props => {
       event.off(autoClarityChange, onAutoClarityChange);
     };
   }, [event]);
+  useEffect(() => {
+    if (store.resolution !== ClarityType.AUTO) {
+      setAutoClarity(null);
+    }
+  }, [store.resolution]);
   useEffect(() => {
     if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
       init();
@@ -102,7 +102,26 @@ export const VideoBitKBP = props => {
     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, {
+  }, (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;
+    }
+  })(autoClarity)), /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-videoBitKBP-unit-kbs"
   }, "KB/S"))));
 };

package/package.json

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

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'))));
-};