@ray-js/ipc-player-integration 0.0.53-beta.6 → 0.0.53-beta.8

package/lib/ctx/ctx.autoClarity.test.d.ts

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

package/lib/ctx/ctx.autoClarity.test.js

@@ -0,0 +1,150 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { act, renderHook } from '@testing-library/react-hooks';
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
+import { createUseCtx } from './ctx';
+import { useStore } from './store';
+import { PlayState } from '../interface';
+import { getCachedAutoClarity, setCachedAutoClarity, subscribeClarityChanged } from '../utils/ttt';
+jest.mock('@ray-js/ray', () => ({}));
+jest.mock('@ray-js/ray-ipc-utils/lib/interface', () => ({
+  ClarityType: {
+    SS: 'SS',
+    SD: 'SD',
+    HD: 'HD',
+    UD: 'UD',
+    SSP: 'SSP',
+    AUTO: 'AUTO',
+    AUDIO: 'AUDIO'
+  },
+  IntercomMode: {
+    OneWay: 'OneWay',
+    TwoWay: 'TwoWay'
+  }
+}));
+jest.mock('../i18n', () => ({
+  __esModule: true,
+  default: {
+    getLang: key => key
+  }
+}));
+jest.mock('./multiCameraCtx', () => ({
+  isMultiCameraTileSupported: () => false,
+  useMultiCameraCtx: () => ({})
+}));
+jest.mock('../utils/ttt', () => ({
+  getCachedAutoClarity: jest.fn(),
+  isClarityChangedSupported: () => true,
+  setCachedAutoClarity: jest.fn(),
+  subscribeClarityChanged: jest.fn(() => () => undefined)
+}));
+const cameraState = resolution => ({
+  resolution,
+  resolutionList: [ClarityType.HD, ClarityType.SD],
+  mute: true,
+  intercomMode: 'TwoWay',
+  isIntercomSupported: false,
+  maxZoomSettings: 6
+});
+describe('cached auto clarity restoration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  const mountContext = resolution => {
+    const setClarity = jest.fn();
+    const getMemoryState = jest.fn().mockResolvedValue(cameraState(resolution));
+    const useCtx = createUseCtx({
+      createPlayContext: () => ({
+        setClarity
+      }),
+      getMemoryState,
+      setResolutionMemoryState: jest.fn(),
+      setMuteMemoryState: jest.fn(),
+      authorizeStatus: jest.fn(),
+      toast: jest.fn()
+    });
+    const hook = renderHook(() => {
+      const ctx = useCtx({
+        devId: 'camera-1'
+      });
+      const state = useStore({
+        resolution: ctx.resolution,
+        autoClarity: ctx.autoClarity
+      });
+      return _objectSpread(_objectSpread({}, ctx), {}, {
+        state
+      });
+    });
+    return _objectSpread(_objectSpread({}, hook), {}, {
+      setClarity
+    });
+  };
+  it('shows last listener value on reopening AUTO and refreshes it after preview', async () => {
+    getCachedAutoClarity.mockReturnValue(ClarityType.HD);
+    const {
+      result,
+      setClarity,
+      unmount
+    } = mountContext(ClarityType.AUTO);
+    await act(async () => Promise.resolve());
+    expect(result.current.state).toEqual({
+      resolution: ClarityType.AUTO,
+      autoClarity: ClarityType.HD
+    });
+    act(() => result.current.setPlayState(PlayState.PLAYING));
+    await act(async () => Promise.resolve());
+    expect(setClarity).toHaveBeenCalledTimes(1);
+    expect(setClarity).toHaveBeenCalledWith(expect.objectContaining({
+      clarity: 'auto'
+    }));
+    const onReport = subscribeClarityChanged.mock.calls[0][1];
+    act(() => onReport({
+      deviceId: 'camera-1',
+      clarity: ClarityType.SD
+    }));
+    expect(result.current.state.autoClarity).toBe(ClarityType.SD);
+    expect(setCachedAutoClarity).toHaveBeenCalledWith('camera-1', ClarityType.SD);
+    unmount();
+  });
+  it('does not restore cached actual clarity in manual mode', async () => {
+    getCachedAutoClarity.mockReturnValue(ClarityType.HD);
+    const {
+      result,
+      unmount
+    } = mountContext(ClarityType.SD);
+    await act(async () => Promise.resolve());
+    expect(result.current.state).toEqual({
+      resolution: ClarityType.SD,
+      autoClarity: null
+    });
+    expect(getCachedAutoClarity).not.toHaveBeenCalled();
+    const onReport = subscribeClarityChanged.mock.calls[0][1];
+    act(() => onReport({
+      deviceId: 'camera-1',
+      clarity: ClarityType.HD
+    }));
+    expect(result.current.state.autoClarity).toBeNull();
+    expect(setCachedAutoClarity).not.toHaveBeenCalled();
+    unmount();
+  });
+  it('requests a fresh report when reopening AUTO without an actual clarity cache', async () => {
+    getCachedAutoClarity.mockReturnValue(null);
+    const {
+      result,
+      setClarity,
+      unmount
+    } = mountContext(ClarityType.AUTO);
+    await act(async () => Promise.resolve());
+    expect(result.current.state.autoClarity).toBeNull();
+    act(() => result.current.setPlayState(PlayState.PLAYING));
+    expect(setClarity).toHaveBeenCalledWith(expect.objectContaining({
+      clarity: 'auto'
+    }));
+    const onReport = subscribeClarityChanged.mock.calls[0][1];
+    act(() => onReport({
+      deviceId: 'camera-1',
+      clarity: ClarityType.HD
+    }));
+    expect(result.current.state.autoClarity).toBe(ClarityType.HD);
+    unmount();
+  });
+});

package/lib/ctx/ctx.js

@@ -12,7 +12,7 @@ import { changeIgnoreHideStopPreview } from '../ui/constant';
 import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { getEventInstance } from './event';
 import { isMultiCameraTileSupported, useMultiCameraCtx } from './multiCameraCtx';
-import { isClarityChangedSupported, subscribeClarityChanged } from '../utils/ttt';
+import { getCachedAutoClarity, isClarityChangedSupported, setCachedAutoClarity, subscribeClarityChanged } from '../utils/ttt';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
@@ -110,13 +110,27 @@ export const createUseCtx = _ref => {
       _playState: playState,
       currentResolution: resolution
     });
+    const restoredAutoRef = useRef(false);
+    const refreshedAutoRef = useRef(false);
+    const freshAutoClarityRef = useRef(false);
+    const pendingAutoSelectionRef = useRef(false);
+    const userSelectedResolutionRef = useRef(false);
     useEffect(() => {
       updateAtom(autoClarity, null);
-      if (currentResolution !== ClarityType.AUTO || !devId) return undefined;
+      restoredAutoRef.current = false;
+      refreshedAutoRef.current = false;
+      freshAutoClarityRef.current = false;
+      userSelectedResolutionRef.current = false;
+      if (!devId) return undefined;
       return subscribeClarityChanged(devId, res => {
+        if (getDefaultStore().get(resolution) !== ClarityType.AUTO && !pendingAutoSelectionRef.current) {
+          return;
+        }
+        freshAutoClarityRef.current = true;
         updateAtom(autoClarity, res.clarity);
+        setCachedAutoClarity(devId, res.clarity);
       });
-    }, [autoClarity, currentResolution, devId]);
+    }, [autoClarity, devId, resolution]);
     const eventRef = useRef();
     if (!eventRef.current) {
       eventRef.current = getEventInstance();
@@ -139,6 +153,18 @@ export const createUseCtx = _ref => {
       if (resolution !== ClarityType.AUTO || canShowAutoClarity(list)) return resolution;
       return list.find(clarity => clarity !== ClarityType.AUTO) || ClarityType.HD;
     };
+    const restoreResolution = (cachedResolution, list) => {
+      if (userSelectedResolutionRef.current) return;
+      const target = normalizeResolution(cachedResolution, list);
+      if (target === ClarityType.AUTO) {
+        restoredAutoRef.current = true;
+        const cachedClarity = getCachedAutoClarity(devId);
+        if (cachedClarity && list.includes(cachedClarity) && !getDefaultStore().get(autoClarity)) {
+          updateAtom(autoClarity, cachedClarity);
+        }
+      }
+      _setResolution(target, true);
+    };
     useEffect(() => {
       // 初始化获取缓存值
 
@@ -148,7 +174,7 @@ export const createUseCtx = _ref => {
           var _res$maxZoomSettings;
           const res = await getMemoryState(devId);
           setResolutionList(withAutoClarity(res.resolutionList));
-          _setResolution(normalizeResolution(res.resolution, res.resolutionList), true);
+          restoreResolution(res.resolution, res.resolutionList);
           _setMute(res.mute, true);
           setIntercomMode(res.intercomMode);
           setIntercomSupported(res.isIntercomSupported);
@@ -165,7 +191,7 @@ export const createUseCtx = _ref => {
           var _res$maxZoomSettings2;
           setResolutionList(withAutoClarity(res.resolutionList));
           // 传true表示值即可,会取播放器的值
-          _setResolution(normalizeResolution(res.resolution, res.resolutionList), true);
+          restoreResolution(res.resolution, res.resolutionList);
           _setMute(res.mute, true);
           setIntercomMode(res.intercomMode);
           setIntercomSupported(res.isIntercomSupported);
@@ -173,6 +199,18 @@ export const createUseCtx = _ref => {
         });
       }
     }, [devId, _playState]);
+    useEffect(() => {
+      var _IPCPlayerInstance$cu;
+      if (!devId || _playState !== PlayState.PLAYING || currentResolution !== ClarityType.AUTO || !restoredAutoRef.current || freshAutoClarityRef.current || refreshedAutoRef.current) {
+        return;
+      }
+      refreshedAutoRef.current = true;
+      // 缓存只保证首屏有上次档位；出流后重申自动，让宿主回报本次实际档位。
+      (_IPCPlayerInstance$cu = IPCPlayerInstance.current) === null || _IPCPlayerInstance$cu === void 0 || _IPCPlayerInstance$cu.setClarity({
+        clarity: 'auto',
+        fail: error => console.warn('res===restore auto clarity fail', error)
+      });
+    }, [devId, _playState, currentResolution]);
     // 获取content数据
     const getContent = () => {
       const store = getDefaultStore();
@@ -267,6 +305,13 @@ export const createUseCtx = _ref => {
         updateAtom(resolution, target);
         return false;
       }
+      userSelectedResolutionRef.current = true;
+      // 清晰度事件可能在 setClarity 的 success 回调前到达，进入自动前先清掉上次的值。
+      restoredAutoRef.current = false;
+      if (target === ClarityType.AUTO) {
+        pendingAutoSelectionRef.current = true;
+        updateAtom(autoClarity, null);
+      }
       return new Promise((resolve, reject) => {
         const clarityMap = {
           [ClarityType.SS]: 'ss',
@@ -280,11 +325,13 @@ export const createUseCtx = _ref => {
         IPCPlayerInstance.current.setClarity({
           clarity: clarityMap[target] || 'normal',
           success: () => {
+            pendingAutoSelectionRef.current = false;
             setResolutionMemoryState(devId, target);
             updateAtom(resolution, target);
             resolve(true);
           },
           fail: err => {
+            pendingAutoSelectionRef.current = false;
             console.log(err, 'setClarity err');
             // updateAtom(mute, !target);
             reject(err);

package/lib/ui/ui.js

@@ -1,14 +1,17 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.find.js";
 import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.iterator.some.js";
 import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
 import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation, getCurrentPages } from '@ray-js/ray';
 import { unstable_batchedUpdates as batchedUpdates } from '@ray-core/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
 import { ipcTTTOperatorLog } from '@ray-js/ray-ipc-utils';
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interface';
 import { useCtx } from '../ctx/ctx.composition';
 import { useStore, updateAtom, getDefaultStore } from '../ctx/store';
@@ -18,7 +21,7 @@ import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
 import TopRightContent from './topRightContent';
-import { FlowLowTip } from '../widgets';
+import { FlowLowTip, VideoBitKBP } from '../widgets';
 import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
@@ -27,6 +30,36 @@ import { getNgRawData, getSmartImageQualityState, isLowPhone, notifyOfflineShown
 import { getCaptureResultSummary } from '../utils/captureResult';
 import { lensCount } from '../widgets/zoomTurntable/lensSkill';
 import { shouldRenderContent } from './absoluteContent';
+const AutoClarityOnly = _ref => {
+  let {
+    instance
+  } = _ref;
+  return /*#__PURE__*/React.createElement(VideoBitKBP, _extends({}, instance, {
+    IPCPlayerContext: instance.IPCPlayerInstance,
+    className: "top-right-item-container",
+    hideKbsMenu: true,
+    hideSignalMenu: true
+  }));
+};
+const StandaloneAutoClarity = _ref2 => {
+  let {
+    instance,
+    show
+  } = _ref2;
+  const {
+    resolution,
+    autoClarity
+  } = useStore({
+    resolution: instance.resolution,
+    autoClarity: instance.autoClarity
+  });
+  if (!show || resolution !== ClarityType.AUTO || !autoClarity) return null;
+  return /*#__PURE__*/React.createElement(TopRightContent, {
+    ctx: instance
+  }, /*#__PURE__*/React.createElement(AutoClarityOnly, {
+    instance: instance
+  }));
+};
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -1013,6 +1046,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     };
   }, []);
   const playerReady = playState === PlayState.PLAYING;
+  const hasVisibleBitrateWidget = topRightContent === null || topRightContent === void 0 ? void 0 : topRightContent.some(item => item.id === 'VideoBitKBP' && !item.hidden);
   /**
    * 监听当前的zoom比例状态
    */
@@ -1206,7 +1240,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ctx: instance
   }, renderTopLeftContent), /*#__PURE__*/React.createElement(TopRightContent, {
     ctx: instance
-  }, renderTopRightContent))), /*#__PURE__*/React.createElement(View, {
+  }, renderTopRightContent, !hasVisibleBitrateWidget && /*#__PURE__*/React.createElement(AutoClarityOnly, {
+    instance: instance
+  })))), /*#__PURE__*/React.createElement(StandaloneAutoClarity, {
+    instance: instance,
+    show: !showTopContent || componentHideState || !playerReady
+  }), /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-bottom-content', {
       'ipc-player-bottom-content-hide': componentHideState,
       'ipc-player-bottom-content-show': !componentHideState,

package/lib/utils/ttt.autoClarity.test.d.ts

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

package/lib/utils/ttt.autoClarity.test.js

@@ -0,0 +1,75 @@
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
+import { getCachedAutoClarity, setCachedAutoClarity, subscribeClarityChanged } from './ttt';
+jest.mock('@ray-js/ray-ipc-utils/lib/interface', () => ({
+  ClarityType: {
+    SS: 'SS',
+    SD: 'SD',
+    HD: 'HD',
+    UD: 'UD',
+    SSP: 'SSP',
+    AUTO: 'AUTO',
+    AUDIO: 'AUDIO'
+  }
+}));
+describe('auto clarity cache and listener', () => {
+  const storage = new Map();
+  let listener;
+  beforeEach(() => {
+    storage.clear();
+    globalThis.ty = {
+      getStorageSync: jest.fn(_ref => {
+        let {
+          key
+        } = _ref;
+        return storage.get(key);
+      }),
+      setStorageSync: jest.fn(_ref2 => {
+        let {
+          key,
+          data
+        } = _ref2;
+        return storage.set(key, data);
+      }),
+      ipc: {
+        onClarityChanged: jest.fn(callback => {
+          listener = callback;
+        }),
+        offClarityChanged: jest.fn()
+      }
+    };
+  });
+  it('restores the last reported actual clarity only for its device', () => {
+    setCachedAutoClarity('camera-1', ClarityType.HD);
+    expect(getCachedAutoClarity('camera-1')).toBe(ClarityType.HD);
+    expect(getCachedAutoClarity('camera-2')).toBeNull();
+    setCachedAutoClarity('camera-1', ClarityType.AUTO);
+    expect(getCachedAutoClarity('camera-1')).toBe(ClarityType.HD);
+    globalThis.ty.getStorageSync = jest.fn(() => ({
+      data: ClarityType.SD
+    }));
+    expect(getCachedAutoClarity('camera-1')).toBe(ClarityType.SD);
+  });
+  it('accepts a new actual clarity report for the same device', () => {
+    const handler = jest.fn();
+    const unsubscribe = subscribeClarityChanged('camera-1', handler);
+    listener({
+      deviceId: 'camera-2',
+      clarity: ClarityType.SD
+    });
+    listener({
+      deviceId: 'camera-1',
+      clarity: ClarityType.AUTO
+    });
+    listener({
+      deviceId: 'camera-1',
+      clarity: ClarityType.SD
+    });
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith({
+      deviceId: 'camera-1',
+      clarity: ClarityType.SD
+    });
+    unsubscribe();
+    expect(globalThis.ty.ipc.offClarityChanged).toHaveBeenCalledWith(listener);
+  });
+});

package/lib/utils/ttt.d.ts

@@ -54,6 +54,8 @@ export type ClarityChangedResult = {
 };
 export type ClarityChangedHandler = (result: ClarityChangedResult) => void;
 type ClarityChangedListener = (payload: ClarityChangedResult) => void;
+export declare function getCachedAutoClarity(devId: string): ClarityType | null;
+export declare function setCachedAutoClarity(devId: string, clarity: ClarityType): void;
 export declare function offClarityChanged(listener: ClarityChangedListener): void;
 /**
  * 监听自动清晰度变化，返回取消监听函数。

package/lib/utils/ttt.js

@@ -171,6 +171,30 @@ export function isClarityChangedSupported() {
   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';
 }
+const actualClarityTypes = [ClarityType.SS, ClarityType.SD, ClarityType.HD, ClarityType.UD, ClarityType.SSP];
+const autoClarityStorageKey = devId => `${devId}_auto_clarity`;
+export function getCachedAutoClarity(devId) {
+  try {
+    const stored = ty.getStorageSync({
+      key: autoClarityStorageKey(devId)
+    });
+    const clarity = typeof stored === 'string' ? stored : stored === null || stored === void 0 ? void 0 : stored.data;
+    return actualClarityTypes.includes(clarity) ? clarity : null;
+  } catch (error) {
+    return null;
+  }
+}
+export function setCachedAutoClarity(devId, clarity) {
+  if (!actualClarityTypes.includes(clarity)) return;
+  try {
+    ty.setStorageSync({
+      key: autoClarityStorageKey(devId),
+      data: clarity
+    });
+  } catch (error) {
+    console.warn('res===setCachedAutoClarity fail', error);
+  }
+}
 export function offClarityChanged(listener) {
   var _ty6;
   const ipc = typeof ty !== 'undefined' ? (_ty6 = ty) === null || _ty6 === void 0 ? void 0 : _ty6.ipc : undefined;
@@ -202,8 +226,8 @@ export function subscribeClarityChanged(devId, handler) {
       deviceId,
       clarity
     } = payload || {};
-    if (!Object.values(ClarityType).includes(clarity)) {
-      console.warn('[resolution] onClarityChanged 缺少 clarity');
+    if (!actualClarityTypes.includes(clarity)) {
+      console.warn('[resolution] onClarityChanged 未返回实际清晰度');
       return;
     }
     // 一页多设备时只认自己的；宿主没带 deviceId 就不过滤

package/lib/widgets/captureResult/captureResult.js

@@ -1,5 +1,3 @@
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.map.js";
 import React from 'react';
 import { Image, Text, View } from '@ray-js/ray';
 import clsx from 'clsx';
@@ -55,12 +53,11 @@ export function CaptureResultToast(_ref) {
   const textKeys = TEXT_KEYS[kind];
   const legacyCls = LEGACY_CLASS_MAP[kind];
   const imageClassName = clsx('ipc-player-plugin-capture-result-image', legacyCls.image);
-  const backdropLayers = BACKDROP_LAYERS.slice(-Math.min(count - 1, BACKDROP_LAYERS.length));
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-capture-result-toast', legacyCls.toast, className)
   }, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-capture-result-image-box', legacyCls.imageBox, isMultiLens && ['ipc-player-plugin-capture-result-image-box-multi', legacyCls.imageBoxMulti])
-  }, isMultiLens ? /*#__PURE__*/React.createElement(React.Fragment, null, backdropLayers.map(layer => /*#__PURE__*/React.createElement(View, {
+  }, isMultiLens ? /*#__PURE__*/React.createElement(React.Fragment, null, BACKDROP_LAYERS.map(layer => /*#__PURE__*/React.createElement(View, {
     key: layer,
     className: clsx('ipc-player-plugin-capture-result-backdrop', `ipc-player-plugin-capture-result-image-${layer}`)
   })), /*#__PURE__*/React.createElement(Image, {

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,12 +43,6 @@
   object-fit: cover;
 }
 
-.ipc-player-plugin-capture-result-image-box-multi,
-.ipc-player-plugin-record-success-toast-image-box-multi,
-.ipc-player-plugin-screenshot-toast-image-box-multi {
-  height: calc(39px * var(--ipc-player-size-scale, 1));
-}
-
 .ipc-player-plugin-capture-result-backdrop,
 .ipc-player-plugin-capture-result-image-front {
   position: absolute;
@@ -42,16 +50,13 @@
   border-radius: calc(4px * var(--ipc-player-size-scale, 1));
 }
 
-.ipc-player-plugin-capture-result-backdrop {
-  background: rgba(255, 255, 255, 0.2);
-}
-
 .ipc-player-plugin-capture-result-image-back {
-  top: 0;
-  left: calc(7px * var(--ipc-player-size-scale, 1));
+  top: calc(1px * var(--ipc-player-size-scale, 1));
+  left: calc(5px * var(--ipc-player-size-scale, 1));
   z-index: 1;
-  width: calc(52px * var(--ipc-player-size-scale, 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 {
@@ -60,10 +65,11 @@
   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(6px * var(--ipc-player-size-scale, 1));
+  top: calc(5px * var(--ipc-player-size-scale, 1));
   left: 0;
   z-index: 3;
   width: calc(66px * var(--ipc-player-size-scale, 1));
@@ -79,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,
@@ -99,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;
 }
 
@@ -118,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.js

@@ -63,9 +63,10 @@ describe('CaptureResultToast', () => {
     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 one backdrop for two captured items', () => {
+  it('renders both backdrops for two captured items', () => {
     const markup = renderToast(2);
-    expect(countClass(markup, 'ipc-player-plugin-capture-result-backdrop')).toBe(1);
+    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/videoBitKBP/videoBitKBP.js

@@ -56,13 +56,14 @@ export const VideoBitKBP = props => {
       }
     }
   };
-  const hasKbps = !hideKbsMenu && bitKBP !== '' && bitKBP !== '0';
-  const hasSignal = !hideSignalMenu && signalStrength !== null;
+  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;
-  if (!hasKbps && !hasSignal || store.playState !== PlayState.PLAYING) {
+  const hasClarity = Boolean(activeClarity);
+  if (!hasKbps && !hasSignal && !hasClarity) {
     return null;
   }
-  if (hideKbsMenu && hideSignalMenu) return null;
   return /*#__PURE__*/React.createElement(View, {
     className: clsx({
       'ipc-player-plugin-videoBitKBP-container': true,
@@ -76,12 +77,14 @@ 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"
   }, activeClarity && /*#__PURE__*/React.createElement(Text, {
-    className: "ipc-player-plugin-videoBitKBP-clarity"
+    className: clsx('ipc-player-plugin-videoBitKBP-clarity', {
+      'ipc-player-plugin-videoBitKBP-clarity-only': !hasKbps
+    })
   }, (clarity => {
     switch (clarity) {
       case ClarityType.SS:
@@ -101,7 +104,7 @@ export const VideoBitKBP = props => {
       default:
         return clarity;
     }
-  })(activeClarity)), /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
+  })(activeClarity)), hasKbps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-videoBitKBP-unit-kbs"
-  }, "KB/S"))));
+  }, "KB/S")))));
 };

package/lib/widgets/videoBitKBP/videoBitKBP.less

@@ -39,6 +39,9 @@
 .ipc-player-plugin-videoBitKBP-clarity {
   margin-right: calc(4px * var(--ipc-player-size-scale, 1));
 }
+.ipc-player-plugin-videoBitKBP-clarity-only {
+  margin-right: 0;
+}
 .ipc-player-plugin-videoBitKBP-unit-kbs {
   margin-left: calc(4px * 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,81 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+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;
+  mockStoreState = {
+    resolution,
+    autoClarity,
+    playState
+  };
+  return renderToStaticMarkup(/*#__PURE__*/React.createElement(VideoBitKBP, {
+    devId: 'device',
+    playState: {},
+    resolution: {},
+    autoClarity: {},
+    hideKbsMenu: true,
+    hideSignalMenu: true
+  }));
+};
+describe('VideoBitKBP auto clarity', () => {
+  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');
+  });
+  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.6",
+  "version": "0.0.53-beta.8",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [