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

package/lib/ctx/ctx.js

@@ -12,6 +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 } from '../utils/ttt';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
@@ -111,12 +112,21 @@ export const createUseCtx = _ref => {
     }
 
     /**
-     * 自动清晰度作为独立档位并入清晰度列表：
+     * 只有宿主支持自动清晰度事件，且接口返回的清晰度档位数量不少于 2 个时，才展示 AUTO：
      * 竖屏宿主弹框（由 resolutionList 构建 actionData）与横屏 FullResolutionControl 共用。
      */
+    const canShowAutoClarity = function () {
+      let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return isClarityChangedSupported() && list.length >= 2;
+    };
     const withAutoClarity = function () {
       let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      return list.includes(ClarityType.AUTO) ? list : [...list, ClarityType.AUTO];
+      const withoutAuto = list.filter(clarity => clarity !== ClarityType.AUTO);
+      return canShowAutoClarity(list) ? [...withoutAuto, ClarityType.AUTO] : withoutAuto;
+    };
+    const normalizeResolution = (resolution, list) => {
+      if (resolution !== ClarityType.AUTO || canShowAutoClarity(list)) return resolution;
+      return list.find(clarity => clarity !== ClarityType.AUTO) || ClarityType.HD;
     };
     useEffect(() => {
       // 初始化获取缓存值
@@ -127,7 +137,7 @@ export const createUseCtx = _ref => {
           var _res$maxZoomSettings;
           const res = await getMemoryState(devId);
           setResolutionList(withAutoClarity(res.resolutionList));
-          _setResolution(res.resolution, true);
+          _setResolution(normalizeResolution(res.resolution, res.resolutionList), true);
           _setMute(res.mute, true);
           setIntercomMode(res.intercomMode);
           setIntercomSupported(res.isIntercomSupported);
@@ -144,7 +154,7 @@ export const createUseCtx = _ref => {
           var _res$maxZoomSettings2;
           setResolutionList(withAutoClarity(res.resolutionList));
           // 传true表示值即可,会取播放器的值
-          _setResolution(res.resolution, true);
+          _setResolution(normalizeResolution(res.resolution, res.resolutionList), true);
           _setMute(res.mute, true);
           setIntercomMode(res.intercomMode);
           setIntercomSupported(res.isIntercomSupported);

package/lib/interface.d.ts

@@ -143,12 +143,7 @@ export type CaptureFileInfo = {
     height?: number;
     data?: string;
 };
-export type MultiCaptureFileInfo = CaptureFileInfo & {
-    index: number;
-};
-export type CaptureResult = boolean | CaptureFileInfo | {
-    items: MultiCaptureFileInfo[];
-};
+export type CaptureResult = boolean | CaptureFileInfo;
 export type RecordInfoData = CaptureResult;
 /**
  * 多目屏幕模式

package/lib/ui/ui.js

@@ -661,8 +661,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: 调用停止录制方法失败');

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/widgets/captureResult/captureResult.js

@@ -5,7 +5,7 @@ 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',
@@ -55,18 +55,17 @@ 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 ? THUMBNAIL_LAYERS.slice(0, count).map((layer, index) => /*#__PURE__*/React.createElement(Image, {
+  }, isMultiLens ? /*#__PURE__*/React.createElement(React.Fragment, null, backdropLayers.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

package/lib/widgets/captureResult/captureResult.less

@@ -29,17 +29,47 @@
   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-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;
-  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-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));
+  z-index: 1;
+  width: calc(52px * var(--ipc-player-size-scale, 1));
+  height: calc(28px * var(--ipc-player-size-scale, 1));
+}
+
+.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));
+}
+
+.ipc-player-plugin-capture-result-image-front {
+  top: calc(6px * 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;

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

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

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

@@ -0,0 +1,79 @@
+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 one backdrop 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-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/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/package.json

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