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

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,15 +21,45 @@ 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';
 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';
+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
@@ -153,10 +186,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     });
   }, []);
 
-  // 设备离线时通知宿主视频流状态；isOfflineForStream 内部兼容没有该 TTT 方法的宿主。
+  // 监听设备在线状态，离线提示展示时通知宿主；notifyOfflineShown 内部兼容没有该 TTT 方法的宿主。
   useEffect(() => {
     if (!deviceOnline) {
-      isOfflineForStream(devId);
+      notifyOfflineShown(devId);
     }
   }, [deviceOnline, devId]);
 
@@ -661,8 +694,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setRecording(false, true);
     setIntercom(false, true);
     instance === null || instance === void 0 || instance.stopRecordingOnUnload().then(async result => {
-      var _instance$multiCamera;
-      const summary = await getCaptureResultSummary(result, instance === null || instance === void 0 || (_instance$multiCamera = instance.multiCameraCtx) === null || _instance$multiCamera === void 0 || (_instance$multiCamera = _instance$multiCamera.protocol) === null || _instance$multiCamera === void 0 ? void 0 : _instance$multiCamera.total_split_num, devId);
+      var _instance$multiLens, _instance$multiCamera;
+      const summary = await getCaptureResultSummary(result, {
+        multiLens: (_instance$multiLens = instance === null || instance === void 0 ? void 0 : instance.multiLens) !== null && _instance$multiLens !== void 0 ? _instance$multiLens : false,
+        protocolCount: instance === null || instance === void 0 || (_instance$multiCamera = instance.multiCameraCtx) === null || _instance$multiCamera === void 0 || (_instance$multiCamera = _instance$multiCamera.protocol) === null || _instance$multiCamera === void 0 ? void 0 : _instance$multiCamera.total_split_num,
+        devId
+      });
       ipcTTTOperatorLog(summary !== null && summary !== void 0 && summary.isMultiLens ? `hide: stop recording succeeded with ${summary.count} files` : 'hide: 调用停止录制方法成功');
     }).catch(() => {
       ipcTTTOperatorLog('hide: 调用停止录制方法失败');
@@ -1009,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比例状态
    */
@@ -1202,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/captureResult.d.ts

@@ -4,6 +4,11 @@ export type CaptureResultSummary = {
     isMultiLens: boolean;
     thumbnailPath: string;
 };
+export type CaptureResultOptions = {
+    multiLens: boolean;
+    protocolCount?: number | string;
+    devId: string;
+};
 /** 从新多目高级能力配置获取当前设备的总镜头数 */
 export declare function getMultiLensCountFromAbility(devId: string): Promise<number>;
-export declare function getCaptureResultSummary(result: CaptureResult, fallbackCount: number | undefined, devId: string): Promise<CaptureResultSummary | null>;
+export declare function getCaptureResultSummary(result: CaptureResult, { multiLens, protocolCount, devId }: CaptureResultOptions): Promise<CaptureResultSummary | null>;

package/lib/utils/captureResult.js

@@ -33,36 +33,38 @@ const extractPath = item => {
   if (typeof (item === null || item === void 0 ? void 0 : item.value) === 'string') return item.value;
   return '';
 };
-export async function getCaptureResultSummary(result, fallbackCount, devId) {
+export async function getCaptureResultSummary(result, _ref) {
+  let {
+    multiLens,
+    protocolCount,
+    devId
+  } = _ref;
   if (!result || typeof result === 'boolean') return null;
-  const rawResult = result;
-  const singleThumb = extractPath(rawResult.tempImagePath) || extractPath(rawResult.thumbPath) || extractPath(rawResult.filePath) || '';
-  if ('items' in result && Array.isArray(result.items) && result.items.length > 0) {
-    const firstItem = result.items[0];
-    const firstThumb = extractPath(firstItem === null || firstItem === void 0 ? void 0 : firstItem.tempImagePath) || extractPath(firstItem === null || firstItem === void 0 ? void 0 : firstItem.thumbPath) || extractPath(firstItem === null || firstItem === void 0 ? void 0 : firstItem.filePath) || singleThumb;
+  const thumbnailPath = extractPath(result.tempImagePath) || extractPath(result.thumbPath) || extractPath(result.filePath) || '';
+  if (!multiLens) {
     return {
-      count: result.items.length,
-      isMultiLens: true,
-      thumbnailPath: firstThumb
+      count: 1,
+      isMultiLens: false,
+      thumbnailPath
     };
   }
-  const legacySplitCount = fallbackCount && fallbackCount > 1 ? fallbackCount : 0;
+  const splitCount = Number(protocolCount) > 1 ? Number(protocolCount) : 0;
   const multiLensAbilityCount = await getMultiLensCountFromAbility(devId);
 
   // The native multi-lens snapshot can return one object while writing lens-specific
   // files. Use the ability result to distinguish that file-name convention from the
   // legacy split protocol.
-  const multiCount = legacySplitCount || multiLensAbilityCount;
+  const multiCount = splitCount || multiLensAbilityCount;
   if (multiCount > 1) {
     return {
       count: multiCount,
       isMultiLens: true,
-      thumbnailPath: multiLensAbilityCount > 1 ? normalizeMultiLensThumbnailPath(singleThumb) : singleThumb
+      thumbnailPath: multiLensAbilityCount > 1 ? normalizeMultiLensThumbnailPath(thumbnailPath) : thumbnailPath
     };
   }
   return {
     count: 1,
     isMultiLens: false,
-    thumbnailPath: singleThumb
+    thumbnailPath
   };
 }

package/lib/utils/captureResult.test.js

@@ -24,14 +24,33 @@ describe('getCaptureResultSummary', () => {
         }
       }
     });
-    await expect(getCaptureResultSummary(createCaptureResult(basePath), undefined, 'dev-1')).resolves.toEqual({
+    await expect(getCaptureResultSummary(createCaptureResult(basePath), {
+      multiLens: true,
+      devId: 'dev-1'
+    })).resolves.toEqual({
       count: 4,
       isMultiLens: true,
       thumbnailPath: 'thingfile://tmp/capture_123_lens1.jpg'
     });
   });
-  it('keeps the legacy path when the ability is unavailable', async () => {
-    await expect(getCaptureResultSummary(createCaptureResult(basePath), 4, 'dev-1')).resolves.toEqual({
+  it('keeps the single-lens result for a legacy multi-camera device', async () => {
+    await expect(getCaptureResultSummary(createCaptureResult(basePath), {
+      multiLens: false,
+      protocolCount: 4,
+      devId: 'dev-1'
+    })).resolves.toEqual({
+      count: 1,
+      isMultiLens: false,
+      thumbnailPath: basePath
+    });
+    expect(mockGetDeviceInfo).not.toHaveBeenCalled();
+  });
+  it('uses the protocol count when the multi-lens mode is enabled', async () => {
+    await expect(getCaptureResultSummary(createCaptureResult(basePath), {
+      multiLens: true,
+      protocolCount: 4,
+      devId: 'dev-1'
+    })).resolves.toEqual({
       count: 4,
       isMultiLens: true,
       thumbnailPath: basePath
@@ -46,7 +65,11 @@ describe('getCaptureResultSummary', () => {
         }
       }
     });
-    await expect(getCaptureResultSummary(createCaptureResult(basePath), 4, 'dev-1')).resolves.toEqual({
+    await expect(getCaptureResultSummary(createCaptureResult(basePath), {
+      multiLens: true,
+      protocolCount: 4,
+      devId: 'dev-1'
+    })).resolves.toEqual({
       count: 4,
       isMultiLens: true,
       thumbnailPath: 'thingfile://tmp/capture_123_lens1.jpg'
@@ -61,29 +84,33 @@ describe('getCaptureResultSummary', () => {
       }
     });
     const path = 'thingfile://tmp/capture_123_lens1.jpg';
-    await expect(getCaptureResultSummary(createCaptureResult(path), undefined, 'dev-1')).resolves.toEqual({
+    await expect(getCaptureResultSummary(createCaptureResult(path), {
+      multiLens: true,
+      devId: 'dev-1'
+    })).resolves.toEqual({
       count: 4,
       isMultiLens: true,
       thumbnailPath: path
     });
   });
   it('keeps a mono result unchanged', async () => {
-    await expect(getCaptureResultSummary(createCaptureResult(basePath), undefined, 'dev-1')).resolves.toEqual({
+    await expect(getCaptureResultSummary(createCaptureResult(basePath), {
+      multiLens: false,
+      devId: 'dev-1'
+    })).resolves.toEqual({
       count: 1,
       isMultiLens: false,
       thumbnailPath: basePath
     });
   });
-  it('keeps item paths unchanged', async () => {
-    await expect(getCaptureResultSummary({
-      items: [{
-        index: 1,
-        tempImagePath: basePath,
-        filePath: basePath
-      }]
-    }, undefined, 'dev-1')).resolves.toEqual({
+  it('keeps a single-lens result when multi-lens mode has one lens', async () => {
+    await expect(getCaptureResultSummary(createCaptureResult(basePath), {
+      multiLens: true,
+      protocolCount: 1,
+      devId: 'dev-1'
+    })).resolves.toEqual({
       count: 1,
-      isMultiLens: true,
+      isMultiLens: false,
       thumbnailPath: basePath
     });
   });

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

@@ -1,3 +1,4 @@
+import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 export type SmartImageQualityResult = {
     isPurchase: boolean;
     buttonState: number;
@@ -39,15 +40,28 @@ 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 getCachedAutoClarity(devId: string): ClarityType | null;
+export declare function setCachedAutoClarity(devId: string, clarity: ClarityType): 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,87 @@ 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);
+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;
+  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 (!actualClarityTypes.includes(clarity)) {
+      console.warn('[resolution] onClarityChanged 未返回实际清晰度');
       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/captureResult/captureResult.js

@@ -1,11 +1,9 @@
-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';
 import Strings from '../../i18n';
 import './captureResult.less';
-const THUMBNAIL_LAYERS = ['back', 'middle', 'front'];
+const BACKDROP_LAYERS = ['back', 'middle'];
 const TEXT_KEYS = {
   record: {
     check: 'ipc_player_record_success_check',
@@ -59,14 +57,12 @@ export function CaptureResultToast(_ref) {
     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 ? THUMBNAIL_LAYERS.slice(0, count).map((layer, index) => /*#__PURE__*/React.createElement(Image, {
+  }, isMultiLens ? /*#__PURE__*/React.createElement(React.Fragment, null, BACKDROP_LAYERS.map(layer => /*#__PURE__*/React.createElement(View, {
     key: layer,
-    className: imageClassName,
-    src: thumbnailPath,
-    style: {
-      left: `${index * 5}px`,
-      zIndex: index + 1
-    }
+    className: clsx('ipc-player-plugin-capture-result-backdrop', `ipc-player-plugin-capture-result-image-${layer}`)
+  })), /*#__PURE__*/React.createElement(Image, {
+    className: clsx(imageClassName, 'ipc-player-plugin-capture-result-image-front'),
+    src: thumbnailPath
   })) : /*#__PURE__*/React.createElement(Image, {
     className: imageClassName,
     src: thumbnailPath