@ray-js/ipc-player-integration 0.0.51 → 0.0.52-beta.1

package/lib/ctx/ctx.composition.js

@@ -6,6 +6,7 @@ import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/i
 import { createUseCtx } from './ctx';
 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';
 import { multiPrefix } from '../widgets/multiCamera/constants';
 const createPlayContext = ty.createIpcPlayerContext;
@@ -87,20 +88,29 @@ export const defaultBottomRightContent = [{
   content: FullScreen
 }];
 const absoluteContent = [];
+const renderWhenPlaying = _ref => {
+  let {
+    playState
+  } = _ref;
+  return playState === PlayState.PLAYING;
+};
 export const multiCameraAbsoluteContent = [{
   id: tileTipId,
   content: TileTip,
   absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
+  renderWhen: renderWhenPlaying,
   hidden: true
 }, {
   id: ptzMoveableTipId,
   content: PtzMoveableTip,
   absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
+  renderWhen: renderWhenPlaying,
   hidden: true
 }, {
   id: landscapeTipId,
   content: LandscapeTip,
   absoluteContentClassName: `${multiPrefix}-tile-tip-wrap`,
+  renderWhen: renderWhenPlaying,
   hidden: true
 }, {
   id: tileActionsId,
@@ -112,12 +122,12 @@ export const multiCameraAbsoluteContent = [{
   absoluteNoCoverView: true,
   hidden: true
 }];
-const toast = _ref => {
+const toast = _ref2 => {
   let {
       title,
       duration
-    } = _ref,
-    config = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    config = _objectWithoutProperties(_ref2, _excluded);
   ty.showToast(_objectSpread({
     title,
     duration,

package/lib/ctx/ctx.js

@@ -36,6 +36,7 @@ export const createUseCtx = _ref => {
       initBottomRightContent,
       initAbsoluteContent,
       saveToAlbum = SAVE_TO_ALBUM,
+      multiLens = false,
       showPtzControlTip = false,
       videoSplitProtocol
     } = _ref2;
@@ -55,6 +56,7 @@ export const createUseCtx = _ref => {
 
     // 录像中
     const [recording] = useAtom(false);
+    const recordingMultiLensRef = useRef(false);
 
     // 录像是否不可点击
     const [recordingDisabled, setRecordingDisabled] = useAtom(false);
@@ -251,6 +253,34 @@ export const createUseCtx = _ref => {
         });
       });
     };
+    const stopRecording = showError => {
+      const sessionMultiLens = recordingMultiLensRef.current;
+      return new Promise((resolve, reject) => {
+        IPCPlayerInstance.current.stopRecord(_objectSpread(_objectSpread({
+          saveToAlbum
+        }, sessionMultiLens ? {
+          multiLens: true
+        } : {}), {}, {
+          success: res => {
+            recordingMultiLensRef.current = false;
+            updateAtom(recording, false);
+            resolve(res);
+          },
+          fail: err => {
+            recordingMultiLensRef.current = false;
+            updateAtom(recording, false);
+            reject(err);
+            if (showError) {
+              const errObj = err.innerError || err || {};
+              const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_stop_recording_err');
+              toast({
+                title: errMsg
+              });
+            }
+          }
+        }));
+      });
+    };
     const multiCameraCtx = useMultiCameraCtx({
       devId,
       IPCPlayerInstance: IPCPlayerInstance.current,
@@ -261,6 +291,7 @@ export const createUseCtx = _ref => {
       brandColor,
       verticalMic,
       saveToAlbum,
+      multiLens,
       screenType,
       isVerticalFullLayout,
       setIsVerticalFullLayout,
@@ -404,82 +435,64 @@ export const createUseCtx = _ref => {
           eventRef.current.emit(changeIgnoreHideStopPreview, false);
           return false;
         }
+        if (!target) return stopRecording(true);
         return new Promise((resolve, reject) => {
-          if (target) {
-            // 写入相册
-            ty.authorizeStatus({
-              scope: 'scope.writePhotosAlbum',
+          const sessionMultiLens = multiLens;
+          const startRecord = () => {
+            IPCPlayerInstance.current.startRecord(_objectSpread(_objectSpread({
+              saveToAlbum
+            }, sessionMultiLens ? {
+              multiLens: true
+            } : {}), {}, {
               success: () => {
-                eventRef.current.emit(changeIgnoreHideStopPreview, false);
-                IPCPlayerInstance.current.startRecord({
-                  saveToAlbum,
-                  success: () => {
-                    updateAtom(recording, true);
-                    resolve(true);
-                  },
-                  fail: err => {
-                    eventRef.current.emit(changeIgnoreHideStopPreview, false);
-                    reject(err);
-                  }
-                });
-              },
-              fail: () => {
-                ty.authorize({
-                  scope: 'scope.writePhotosAlbum',
-                  success: () => {
-                    IPCPlayerInstance.current.startRecord({
-                      saveToAlbum,
-                      success: () => {
-                        updateAtom(recording, true);
-                        resolve(true);
-                      },
-                      fail: err => {
-                        reject(err);
-                      }
-                    });
-                  },
-                  fail: () => {
-                    showModal({
-                      title: '',
-                      content: Strings.getLang('ipc_player_no_album_permission'),
-                      cancelText: Strings.getLang('ipc_player_authorize_cancel_text'),
-                      confirmText: Strings.getLang('ipc_player_authorize_confirm_text'),
-                      isShowGlobal: true,
-                      success: res => {
-                        if (res.confirm) {
-                          openAppSystemSettingPage({
-                            scope: 'App-Settings',
-                            success: () => {
-                              console.log('跳转成功');
-                            }
-                          });
-                        }
-                      }
-                    });
-                  }
-                });
-              }
-            });
-          } else {
-            IPCPlayerInstance.current.stopRecord({
-              saveToAlbum,
-              success: res => {
-                updateAtom(recording, false);
-                resolve(res);
+                recordingMultiLensRef.current = sessionMultiLens;
+                updateAtom(recording, true);
+                resolve(true);
               },
               fail: err => {
-                updateAtom(recording, false);
+                eventRef.current.emit(changeIgnoreHideStopPreview, false);
                 reject(err);
-                const errObj = err.innerError || err || {};
-                const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_stop_recording_err');
-                toast({
-                  title: errMsg
-                });
               }
-            });
-          }
+            }));
+          };
+          // 写入相册
+          ty.authorizeStatus({
+            scope: 'scope.writePhotosAlbum',
+            success: () => {
+              eventRef.current.emit(changeIgnoreHideStopPreview, false);
+              startRecord();
+            },
+            fail: () => {
+              ty.authorize({
+                scope: 'scope.writePhotosAlbum',
+                success: () => {
+                  startRecord();
+                },
+                fail: () => {
+                  showModal({
+                    title: '',
+                    content: Strings.getLang('ipc_player_no_album_permission'),
+                    cancelText: Strings.getLang('ipc_player_authorize_cancel_text'),
+                    confirmText: Strings.getLang('ipc_player_authorize_confirm_text'),
+                    isShowGlobal: true,
+                    success: res => {
+                      if (res.confirm) {
+                        openAppSystemSettingPage({
+                          scope: 'App-Settings',
+                          success: () => {
+                            console.log('跳转成功');
+                          }
+                        });
+                      }
+                    }
+                  });
+                }
+              });
+            }
+          });
         });
       },
+      stopRecordingOnUnload: () => stopRecording(false),
       setRecordingDisabled,
       setScreenType,
       topLeftContent,

package/lib/i18n/index.d.ts

@@ -5,8 +5,11 @@ declare const Strings: kit.I18N<{
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
+        ipc_player_screenshot_multi_success_tip: string;
         ipc_player_error_screenshot_error_tip: string;
         ipc_player_record_success_tip: string;
+        ipc_player_record_multi_success_tip: string;
+        ipc_player_multi_capture_success_count: string;
         ipc_player_shot_success_check: string;
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
@@ -42,8 +45,11 @@ declare const Strings: kit.I18N<{
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
+        ipc_player_screenshot_multi_success_tip: string;
         ipc_player_error_screenshot_error_tip: string;
         ipc_player_record_success_tip: string;
+        ipc_player_record_multi_success_tip: string;
+        ipc_player_multi_capture_success_count: string;
         ipc_player_shot_success_check: string;
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
@@ -79,8 +85,11 @@ declare const Strings: kit.I18N<{
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
+    ipc_player_screenshot_multi_success_tip: string;
     ipc_player_error_screenshot_error_tip: string;
     ipc_player_record_success_tip: string;
+    ipc_player_record_multi_success_tip: string;
+    ipc_player_multi_capture_success_count: string;
     ipc_player_shot_success_check: string;
     ipc_player_record_success_check: string;
     ipc_player_recording_now_tip: string;
@@ -115,8 +124,11 @@ declare const Strings: kit.I18N<{
     ipc_player_resolution_SD: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
+    ipc_player_screenshot_multi_success_tip: string;
     ipc_player_error_screenshot_error_tip: string;
     ipc_player_record_success_tip: string;
+    ipc_player_record_multi_success_tip: string;
+    ipc_player_multi_capture_success_count: string;
     ipc_player_shot_success_check: string;
     ipc_player_record_success_check: string;
     ipc_player_recording_now_tip: string;

package/lib/i18n/strings.d.ts

@@ -4,8 +4,11 @@ declare const _default: {
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
+        ipc_player_screenshot_multi_success_tip: string;
         ipc_player_error_screenshot_error_tip: string;
         ipc_player_record_success_tip: string;
+        ipc_player_record_multi_success_tip: string;
+        ipc_player_multi_capture_success_count: string;
         ipc_player_shot_success_check: string;
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;
@@ -41,8 +44,11 @@ declare const _default: {
         ipc_player_resolution_SD: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
+        ipc_player_screenshot_multi_success_tip: string;
         ipc_player_error_screenshot_error_tip: string;
         ipc_player_record_success_tip: string;
+        ipc_player_record_multi_success_tip: string;
+        ipc_player_multi_capture_success_count: string;
         ipc_player_shot_success_check: string;
         ipc_player_record_success_check: string;
         ipc_player_recording_now_tip: string;

package/lib/i18n/strings.js

@@ -4,8 +4,11 @@ export default {
     ipc_player_resolution_SD: 'SD',
     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',
     ipc_player_error_screenshot_error_tip: 'Screenshot failed. Please try again later.',
     ipc_player_record_success_tip: 'Recording saved to album',
+    ipc_player_record_multi_success_tip: 'Recordings saved to album',
+    ipc_player_multi_capture_success_count: '{0} items',
     ipc_player_shot_success_check: 'View',
     ipc_player_record_success_check: 'View',
     ipc_player_recording_now_tip: 'Recording in progress...',
@@ -41,8 +44,11 @@ export default {
     ipc_player_resolution_SD: '标清',
     ipc_player_current_resolution_is_equal: '已是当前清晰度',
     ipc_player_screenshot_success_tip: '截图已保存在APP相册',
+    ipc_player_screenshot_multi_success_tip: '图片已保存至相册',
     ipc_player_error_screenshot_error_tip: '截图失败了，请稍后再试',
     ipc_player_record_success_tip: '录像已保存在APP相册',
+    ipc_player_record_multi_success_tip: '视频已保存至相册',
+    ipc_player_multi_capture_success_count: '共{0}个',
     ipc_player_shot_success_check: '查看',
     ipc_player_record_success_check: '查看',
     ipc_player_recording_now_tip: '正在录像中...',

package/lib/interface.d.ts

@@ -46,6 +46,7 @@ export type UseCtx = (options: {
     initBottomRightContent?: ComponentConfig[];
     initAbsoluteContent?: ComponentConfig[];
     saveToAlbum?: 0 | 1;
+    multiLens?: boolean;
     showPtzControlTip?: boolean;
     videoSplitProtocol?: VideoSplitProtocol;
 }) => {
@@ -53,6 +54,7 @@ export type UseCtx = (options: {
     brandColor: RetAtom<string>;
     verticalMic: RetAtom<boolean>;
     saveToAlbum: 0 | 1;
+    multiLens: boolean;
     showPtzControlTip: boolean;
     screenType: RetAtom<ScreenType>;
     isVerticalFullLayout: RetAtom<boolean>;
@@ -87,7 +89,8 @@ export type UseCtx = (options: {
     setRecordingDisabled: (type: boolean) => void;
     setResolution: (type: string) => void;
     setResolutionList: (type: string[]) => void;
-    setRecording: (value: boolean, onlyUpdateAtom?: boolean) => Promise<RecordInfoData>;
+    setRecording: (value: boolean, onlyUpdateAtom?: boolean) => Promise<CaptureResult>;
+    stopRecordingOnUnload: () => Promise<CaptureResult>;
     setIntercom: (value: boolean, onlyUpdateAtom?: boolean) => Promise<boolean>;
     setMute: (value: boolean) => Promise<boolean>;
     changeStreamStatus: (value: PlayerStreamStatus) => void;
@@ -118,8 +121,12 @@ export type ComponentConfig<T = ReturnType<UseCtx> & Record<string, any>> = {
     absoluteContentClassName?: string;
     absoluteContentStyle?: React.CSSProperties;
     absoluteNoCoverView?: boolean;
+    renderWhen?: (state: ComponentRenderState) => boolean;
     hidden?: boolean;
 };
+export type ComponentRenderState = {
+    playState: PlayState;
+};
 export type ComponentConfigProps = {
     IPCPlayerContext: IpcContext;
 } & ReturnType<UseCtx>;
@@ -127,11 +134,22 @@ export type PlayStatusData = {
     playState: PlayState;
     playCode: number;
 };
-export type RecordInfoData = boolean | {
+export type CaptureFileInfo = {
+    index?: number;
     tempImagePath: string;
     filePath: string;
-    thumbPath: string;
+    thumbPath?: string;
+    width?: number;
+    height?: number;
+    data?: string;
+};
+export type MultiCaptureFileInfo = CaptureFileInfo & {
+    index: number;
+};
+export type CaptureResult = boolean | CaptureFileInfo | {
+    items: MultiCaptureFileInfo[];
 };
+export type RecordInfoData = CaptureResult;
 /**
  * 多目屏幕模式
  */

package/lib/ui/absoluteContent.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig, ComponentRenderState } from '../interface';
+export declare function shouldRenderContent<T>(item: ComponentConfig<T>, state: ComponentRenderState): boolean;

package/lib/ui/absoluteContent.js

@@ -0,0 +1,3 @@
+export function shouldRenderContent(item, state) {
+  return !item.hidden && (!item.renderWhen || item.renderWhen(state));
+}

package/lib/ui/ui.js

@@ -24,7 +24,9 @@ import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
 import { getNgRawData, getSmartImageQualityState, isLowPhone } from '../utils/ttt';
+import { getCaptureResultSummary } from '../utils/captureResult';
 import { lensCount } from '../widgets/zoomTurntable/lensSkill';
+import { shouldRenderContent } from './absoluteContent';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -651,14 +653,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ipcTTTOperatorLog('hide: 调用停止录制方法');
     setRecording(false, true);
     setIntercom(false, true);
-    instance === null || instance === void 0 || instance.IPCPlayerInstance.stopRecord({
-      saveToAlbum: 1,
-      success: () => {
-        ipcTTTOperatorLog('hide: 调用停止录制方法成功');
-      },
-      fail: () => {
-        ipcTTTOperatorLog('hide: 调用停止录制方法失败');
-      }
+    instance === null || instance === void 0 || instance.stopRecordingOnUnload().then(result => {
+      const summary = getCaptureResultSummary(result);
+      ipcTTTOperatorLog(summary !== null && summary !== void 0 && summary.isMultiLens ? `hide: stop recording succeeded with ${summary.count} files` : 'hide: 调用停止录制方法成功');
+    }).catch(() => {
+      ipcTTTOperatorLog('hide: 调用停止录制方法失败');
     });
     ipcTTTOperatorLog('hide: 调用停止对讲方法');
     instance === null || instance === void 0 || instance.IPCPlayerInstance.stopTalk({
@@ -1214,13 +1213,16 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, renderBottomRightContent))), (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
     return absoluteContent.map(item => {
-      if (item.hidden) return null;
+      if (!shouldRenderContent(item, {
+        playState
+      })) return null;
+      const contentProps = _objectSpread(_objectSpread(_objectSpread({
+        key: item.id
+      }, item.initProps), instance), {}, {
+        IPCPlayerContext: instance.IPCPlayerInstance
+      });
       if (item.absoluteNoCoverView) {
-        return /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
-          key: item.id
-        }, item.initProps), instance), {}, {
-          IPCPlayerContext: instance.IPCPlayerInstance
-        }));
+        return /*#__PURE__*/React.createElement(item.content, contentProps);
       }
       return /*#__PURE__*/React.createElement(CoverView, {
         key: item.id,
@@ -1228,10 +1230,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
           position: 'absolute'
         }, item.absolutePosition),
         className: item.absoluteContentClassName
-      }, /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread(_objectSpread({
-        key: item.id
-      }, item.initProps), instance), {}, {
-        IPCPlayerContext: instance.IPCPlayerInstance,
+      }, /*#__PURE__*/React.createElement(item.content, _objectSpread(_objectSpread({}, contentProps), {}, {
         // 添加通用变量单独组件类名
         className: clsx('absolute-item-container')
       })));

package/lib/utils/captureResult.d.ts

@@ -0,0 +1,7 @@
+import type { CaptureResult } from '../interface';
+export type CaptureResultSummary = {
+    count: number;
+    isMultiLens: boolean;
+    thumbnailPath: string;
+};
+export declare function getCaptureResultSummary(result: CaptureResult): CaptureResultSummary | null;

package/lib/utils/captureResult.js

@@ -0,0 +1,17 @@
+export function getCaptureResultSummary(result) {
+  if (!result || typeof result === 'boolean') return null;
+  if ('items' in result) {
+    const firstItem = result.items[0];
+    if (!firstItem) return null;
+    return {
+      count: result.items.length,
+      isMultiLens: true,
+      thumbnailPath: firstItem.tempImagePath || firstItem.thumbPath || firstItem.filePath
+    };
+  }
+  return {
+    count: 1,
+    isMultiLens: false,
+    thumbnailPath: result.tempImagePath || result.thumbPath || result.filePath
+  };
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import './captureResult.less';
+type CaptureKind = 'record' | 'screenshot';
+type Props = {
+    brandColor: string;
+    count: number;
+    kind: CaptureKind;
+    onCheck: () => void;
+    thumbnailPath: string;
+};
+export declare function CaptureResultToast({ brandColor, count, kind, onCheck, thumbnailPath }: Props): React.JSX.Element;
+export {};

package/lib/widgets/captureResult/captureResult.js

@@ -0,0 +1,64 @@
+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 TEXT_KEYS = {
+  record: {
+    check: 'ipc_player_record_success_check',
+    multi: 'ipc_player_record_multi_success_tip',
+    single: 'ipc_player_record_success_tip'
+  },
+  screenshot: {
+    check: 'ipc_player_shot_success_check',
+    multi: 'ipc_player_screenshot_multi_success_tip',
+    single: 'ipc_player_screenshot_success_tip'
+  }
+};
+export function CaptureResultToast(_ref) {
+  let {
+    brandColor,
+    count,
+    kind,
+    onCheck,
+    thumbnailPath
+  } = _ref;
+  const isMultiLens = count > 0;
+  const textKeys = TEXT_KEYS[kind];
+  return /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-capture-result-toast"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-capture-result-image-box', {
+      'ipc-player-plugin-capture-result-image-box-multi': isMultiLens
+    })
+  }, isMultiLens ? THUMBNAIL_LAYERS.slice(0, count).map((layer, index) => /*#__PURE__*/React.createElement(Image, {
+    key: layer,
+    className: "ipc-player-plugin-capture-result-image",
+    src: thumbnailPath,
+    style: {
+      left: `${index * 5}px`,
+      zIndex: index + 1
+    }
+  })) : /*#__PURE__*/React.createElement(Image, {
+    className: "ipc-player-plugin-capture-result-image",
+    src: thumbnailPath
+  }), kind === 'record' && /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-capture-result-play-icon-box"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-record-play', 'ipc-player-plugin-capture-result-play-icon')
+  }))), /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-capture-result-title"
+  }, isMultiLens ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, null, Strings.getLang(textKeys.multi)), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-capture-result-count"
+  }, Strings.formatString(Strings.getLang('ipc_player_multi_capture_success_count'), count))) : Strings.getLang(textKeys.single)), /*#__PURE__*/React.createElement(View, {
+    onClick: onCheck,
+    className: "ipc-player-plugin-capture-result-check",
+    style: {
+      color: brandColor,
+      borderColor: brandColor
+    }
+  }, Strings.getLang(textKeys.check)));
+}

package/lib/widgets/captureResult/captureResult.less

@@ -0,0 +1,85 @@
+.ipc-player-plugin-capture-result-toast {
+  z-index: 100;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: calc(8px * 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));
+}
+
+.ipc-player-plugin-capture-result-image-box {
+  position: relative;
+  width: calc(66px * var(--ipc-player-size-scale, 1));
+  height: calc(66px * 0.57 * var(--ipc-player-size-scale, 1));
+  overflow: hidden;
+  border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+}
+
+.ipc-player-plugin-capture-result-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ipc-player-plugin-capture-result-image-box-multi .ipc-player-plugin-capture-result-image {
+  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-play-icon-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ipc-player-plugin-capture-result-play-icon {
+  color: #ffffff;
+  font-size: calc(18px * var(--ipc-player-size-scale, 1)) !important;
+}
+
+.ipc-player-plugin-capture-result-title {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin-right: calc(12px * var(--ipc-player-size-scale, 1));
+  margin-left: calc(12px * var(--ipc-player-size-scale, 1));
+  color: var(--fontColor);
+  font-size: calc(14px * 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);
+  font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  opacity: 0.5;
+}
+
+.ipc-player-plugin-capture-result-check {
+  min-width: calc(52px * var(--ipc-player-size-scale, 1));
+  max-width: calc(100px * var(--ipc-player-size-scale, 1));
+  padding: calc(5px * var(--ipc-player-size-scale, 1))
+    calc(11px * var(--ipc-player-size-scale, 1));
+  overflow: hidden;
+  font-size: calc(14px * var(--ipc-player-size-scale, 1));
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border: 1px solid #1989fa;
+  border-radius: calc(4px * var(--ipc-player-size-scale, 1));
+}

package/lib/widgets/recordVideo/recordVideo.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
-import { View, Text, Image, getSystemInfoSync } from '@ray-js/ray';
+import { View, Text, getSystemInfoSync } from '@ray-js/ray';
 import { useSetState, useUpdateEffect } from 'ahooks';
 import clsx from 'clsx';
 import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
 import Strings from '../../i18n';
 import { PlayState } from '../../interface';
+import { getCaptureResultSummary } from '../../utils/captureResult';
+import { CaptureResultToast } from '../captureResult/captureResult';
 import { UIEventContext } from '../../ui/context';
 import { pauseTimeToHideAllComponent, changeIgnoreHideStopPreview, widgetLabs, widgetClick } from '../../ui/constant';
 import { useStore, getDefaultStore } from '../../ctx/store';
@@ -102,20 +104,34 @@ export function RecordVideo(props) {
   const [state, setState] = useSetState({
     showTimer: false,
     showShot: false,
-    shotUrl: ''
+    shotUrl: '',
+    shotCount: 0
   });
+  const showRecordResult = recordInfo => {
+    const summary = getCaptureResultSummary(recordInfo);
+    if (!summary) return;
+    setState({
+      showTimer: false,
+      showShot: true,
+      shotUrl: summary.thumbnailPath,
+      shotCount: summary.isMultiLens ? summary.count : 0
+    });
+  };
 
   /**
    * 针对 playState为非连接中状态时，如果处于录制中, 结束录制
    */
   useEffect(() => {
     (async () => {
-      if (playState !== PlayState.PLAYING) {
-        if (recording) {
+      if (playState !== PlayState.PLAYING && recording) {
+        try {
           setState({
             showTimer: false
           });
-          await setRecording(false);
+          const recordInfo = await setRecording(false);
+          showRecordResult(recordInfo);
+        } catch {
+          // setRecording reports the native failure through the configured toast.
         }
       }
     })();
@@ -129,7 +145,8 @@ export function RecordVideo(props) {
     timer.current = setTimeout(() => {
       setState({
         showShot: false,
-        shotUrl: ''
+        shotUrl: '',
+        shotCount: 0
       });
       deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
     }, CLOSE_TIME);
@@ -164,7 +181,8 @@ export function RecordVideo(props) {
   const handCheck = () => {
     setState({
       showShot: false,
-      shotUrl: ''
+      shotUrl: '',
+      shotCount: 0
     });
     deleteContent('absolute', RECORD_VIDEO_SUCCESS_TOAST_ID);
     clearInterval(timer.current);
@@ -186,27 +204,13 @@ export function RecordVideo(props) {
         marginLeft: screenType === 'vertical' ? '0' : '-200px'
       },
       content: () => {
-        return /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-record-success-toast"
-        }, /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-record-success-toast-image-box"
-        }, /*#__PURE__*/React.createElement(Image, {
-          className: "ipc-player-plugin-record-success-toast-image",
-          src: state.shotUrl
-        }), /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-record-success-play-icon-box"
-        }, /*#__PURE__*/React.createElement(Text, {
-          className: clsx('icon-panel', 'icon-panel-record-play', 'ipc-player-plugin-record-success-play-icon')
-        }))), /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-record-success-toast-title"
-        }, Strings.getLang('ipc_player_record_success_tip')), /*#__PURE__*/React.createElement(View, {
-          onClick: handCheck,
-          className: "ipc-player-plugin-record-success-toast-bottom",
-          style: {
-            color: brandColor,
-            borderColor: brandColor
-          }
-        }, Strings.getLang('ipc_player_record_success_check')));
+        return /*#__PURE__*/React.createElement(CaptureResultToast, {
+          brandColor: brandColor,
+          count: state.shotCount,
+          kind: "record",
+          onCheck: handCheck,
+          thumbnailPath: state.shotUrl
+        });
       }
     });
     timeToCloseRecordToast();
@@ -230,9 +234,8 @@ export function RecordVideo(props) {
     });
   };
   const handRecordVideo = async () => {
-    var _props$event, _props$event2;
-    (_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event;
-    ((_props$event2 = props.event) !== null && _props$event2 !== void 0 ? _props$event2 : event).emit(widgetClick, {
+    var _props$event;
+    ((_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event).emit(widgetClick, {
       widgetId: widgetLabs.RECORD_VIDEO
     });
     event.emit(pauseTimeToHideAllComponent);
@@ -265,11 +268,7 @@ export function RecordVideo(props) {
         timeToResetRecordDisabled();
       } else {
         props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
-        setState({
-          showTimer: false,
-          showShot: true,
-          shotUrl: recordInfo.tempImagePath
-        });
+        showRecordResult(recordInfo);
       }
     } catch (err) {
       props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);

package/lib/widgets/recordVideo/recordVideo.less

@@ -1,116 +1,59 @@
 .ipc-player-plugin-record-video-icon {
-  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
   color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }
+
 .ipc-player-plugin-record-video-toast-wrap {
-  z-index: 400;
   position: absolute;
   top: calc(7px * var(--ipc-player-size-scale, 1));
   left: 50%;
+  z-index: 400;
   transform: translateX(-50%);
 }
 
-// 计时器显示
 .ipc-player-plugin-record-video-toast-show {
   transform: translate(0, 0) !important;
   transition: transform ease-in 3s;
 }
-// 计时器隐藏
+
 .ipc-player-plugin-record-video-toast-hide {
   transform: translate(0, -110%) !important;
   transition: transform 0.3s ease-in-out;
 }
 
 .ipc-player-plugin-record-video-toast {
-  transform: translate(0, -110%);
   display: flex;
-  padding: calc(12px * var(--ipc-player-size-scale, 1));
   align-items: center;
-  background-color: var(--shot-card-bg-color);
+  padding: calc(12px * var(--ipc-player-size-scale, 1));
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)),
+    #000000;
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));
-  // background-color: #fff;
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), #000000;
+  transform: translate(0, -110%);
+
   .ipc-player-plugin-record-video-toast-point {
     width: calc(6px * var(--ipc-player-size-scale, 1));
     height: calc(6px * var(--ipc-player-size-scale, 1));
     border-radius: calc(6px * var(--ipc-player-size-scale, 1));
   }
+
   .ipc-player-plugin-record-video-toast-time {
-    font-size: calc(12px * var(--ipc-player-size-scale, 1));;
-    font-weight: 700;
-    color: var(--fontColor);
-    margin-left: calc(8px * var(--ipc-player-size-scale, 1));;
     display: flex;
     align-items: center;
+    margin-left: calc(8px * var(--ipc-player-size-scale, 1));
+    color: var(--fontColor);
+    font-weight: 700;
+    font-size: calc(12px * var(--ipc-player-size-scale, 1));
+
     .ipc-player-plugin-record-video-toast-time-warp {
       text-align: center;
     }
+
     .ipc-player-plugin-record-video-toast-time-delimiter {
-      margin: 0 calc(2px * var(--ipc-player-size-scale, 1));;
+      margin: 0 calc(2px * var(--ipc-player-size-scale, 1));
     }
   }
 }
 
-/** 录制成功弹窗 */
 .ipc-player-plugin-record-success-toast-wrap {
   position: absolute;
 }
-.ipc-player-plugin-record-success-toast {
-  flex: 1;
-  border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
-  background-color: var(--shot-card-bg-color);
-  display: flex;
-  align-items: center;
-  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(12px * var(--ipc-player-size-scale, 1));
-  z-index: 100;
-  .ipc-player-plugin-record-success-toast-image-box {
-    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
-    overflow: hidden;
-    width: calc(66px * var(--ipc-player-size-scale, 1));
-    height: calc(66px * 0.57 * var(--ipc-player-size-scale, 1));
-    position: relative;
-  }
-  .ipc-player-plugin-record-success-toast-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .ipc-player-plugin-record-success-play-icon-box {
-    width: 30px;
-    height: 30px;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    overflow: hidden;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .ipc-player-plugin-record-success-play-icon {
-    font-size: calc(18px * var(--ipc-player-size-scale, 1)) !important;
-    color: #ffffff;
-  }
-  .ipc-player-plugin-record-success-toast-title {
-    flex: 1;
-    margin-left: calc(12px * var(--ipc-player-size-scale, 1));
-    font-size: calc(14px * var(--ipc-player-size-scale, 1));
-    color: var(--fontColor);
-    margin-right: calc(12px * var(--ipc-player-size-scale, 1));
-    word-break: break-word;
-    
-  }
-  .ipc-player-plugin-record-success-toast-bottom {
-    border: 1px solid #1989FA;
-    min-width: calc(52px * var(--ipc-player-size-scale, 1));
-    max-width: calc(100px * var(--ipc-player-size-scale, 1));
-    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
-    padding: calc(5px * var(--ipc-player-size-scale, 1)) calc(11px * var(--ipc-player-size-scale, 1));
-    font-size: calc(14px * var(--ipc-player-size-scale, 1));
-    white-space: nowrap;
-    overflow: hidden; 
-    text-overflow: ellipsis; 
-  }
-}

package/lib/widgets/screenshot/screenshot.js

@@ -1,5 +1,6 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useContext, useRef } from 'react';
-import { View, Image, Text, showModal, openAppSystemSettingPage, getSystemInfoSync } from '@ray-js/ray';
+import { View, Text, showModal, openAppSystemSettingPage, getSystemInfoSync } from '@ray-js/ray';
 import { useSetState, useUpdateEffect, useMemoizedFn } from 'ahooks';
 import clsx from 'clsx';
 import { goToIpcPageNativeRoute } from '@ray-js/ray-ipc-utils';
@@ -7,6 +8,8 @@ import Strings from '../../i18n';
 import { useStore } from '../../ctx/store';
 import { UIEventContext } from '../../ui/context';
 import { pauseTimeToHideAllComponent, changeIgnoreHideStopPreview, widgetLabs, widgetClick } from '../../ui/constant';
+import { getCaptureResultSummary } from '../../utils/captureResult';
+import { CaptureResultToast } from '../captureResult/captureResult';
 import './screenshot.less';
 const CLOSE_TIME = 5000;
 export function Screenshot(props) {
@@ -34,7 +37,8 @@ export function Screenshot(props) {
   /** 记录截屏url */
   const [state, setState] = useSetState({
     showShot: false,
-    shotUrl: ''
+    shotUrl: '',
+    shotCount: 0
   });
   useUpdateEffect(() => {
     if (state.showShot && screenType) {
@@ -48,7 +52,8 @@ export function Screenshot(props) {
     timer.current = setTimeout(() => {
       setState({
         showShot: false,
-        shotUrl: ''
+        shotUrl: '',
+        shotCount: 0
       });
       deleteContent('absolute', 'plugin-screenshot-toast');
     }, CLOSE_TIME);
@@ -58,7 +63,8 @@ export function Screenshot(props) {
   const handCheck = () => {
     setState({
       showShot: false,
-      shotUrl: ''
+      shotUrl: '',
+      shotCount: 0
     });
     deleteContent('absolute', 'plugin-screenshot-toast');
     clearInterval(timer.current);
@@ -80,31 +86,20 @@ export function Screenshot(props) {
         marginLeft: screenType === 'vertical' ? '0' : '-200px'
       },
       content: () => {
-        return /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-screenshot-toast"
-        }, /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-screenshot-toast-image-box"
-        }, /*#__PURE__*/React.createElement(Image, {
-          className: "ipc-player-plugin-screenshot-toast-image",
-          src: state.shotUrl
-        })), /*#__PURE__*/React.createElement(View, {
-          className: "ipc-player-plugin-screenshot-toast-title"
-        }, Strings.getLang('ipc_player_screenshot_success_tip')), /*#__PURE__*/React.createElement(View, {
-          onClick: handCheck,
-          className: "ipc-player-plugin-screenshot-toast-bottom",
-          style: {
-            color: brandColor,
-            borderColor: brandColor
-          }
-        }, Strings.getLang('ipc_player_shot_success_check')));
+        return /*#__PURE__*/React.createElement(CaptureResultToast, {
+          brandColor: brandColor,
+          count: state.shotCount,
+          kind: "screenshot",
+          onCheck: handCheck,
+          thumbnailPath: state.shotUrl
+        });
       }
     });
     timeToCloseToast();
   };
   const handClick = useMemoizedFn(() => {
-    var _props$event, _props$event2;
-    (_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event;
-    ((_props$event2 = props.event) !== null && _props$event2 !== void 0 ? _props$event2 : event).emit(widgetClick, {
+    var _props$event;
+    ((_props$event = props.event) !== null && _props$event !== void 0 ? _props$event : event).emit(widgetClick, {
       widgetId: widgetLabs.SCREENSHOT
     });
     console.log('截屏！！！');
@@ -118,56 +113,53 @@ export function Screenshot(props) {
       props.event ? props.event.emit(changeIgnoreHideStopPreview, true) : event.emit(changeIgnoreHideStopPreview, true);
     }
     event.emit(pauseTimeToHideAllComponent);
+    const setIgnoreHideStopPreview = value => {
+      var _props$event2;
+      ((_props$event2 = props.event) !== null && _props$event2 !== void 0 ? _props$event2 : event).emit(changeIgnoreHideStopPreview, value);
+    };
+    const handleSnapshotFail = err => {
+      setIgnoreHideStopPreview(false);
+      console.log(err, 'err');
+      const errObj = err.innerError || err || {};
+      const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_screenshot_error_tip');
+      toast({
+        title: errMsg
+      });
+    };
+    const takeSnapshot = () => {
+      IPCPlayerContext.snapshot(_objectSpread(_objectSpread({
+        saveToAlbum
+      }, props.multiLens ? {
+        multiLens: true
+      } : {}), {}, {
+        success: res => {
+          setIgnoreHideStopPreview(false);
+          const summary = getCaptureResultSummary(res);
+          if (!summary) {
+            handleSnapshotFail({});
+            return;
+          }
+          setState({
+            showShot: true,
+            shotUrl: summary.thumbnailPath,
+            shotCount: summary.isMultiLens ? summary.count : 0
+          });
+        },
+        fail: handleSnapshotFail
+      }));
+    };
     ty.authorizeStatus({
       // 相册写入权限
       scope: 'scope.writePhotosAlbum',
       success: () => {
-        props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
-        IPCPlayerContext.snapshot({
-          saveToAlbum,
-          // 保存到 IPC 相册
-          success: res => {
-            console.log(res, 'res');
-            props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
-            setState({
-              showShot: true,
-              shotUrl: res.tempImagePath
-            });
-          },
-          fail: err => {
-            props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
-            console.log(err, 'err');
-            const errObj = err.innerError || err || {};
-            const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_screenshot_error_tip');
-            toast({
-              title: errMsg
-            });
-          }
-        });
+        setIgnoreHideStopPreview(false);
+        takeSnapshot();
       },
       fail: () => {
         ty.authorize({
           scope: 'scope.writePhotosAlbum',
           success: () => {
-            IPCPlayerContext.snapshot({
-              saveToAlbum,
-              // 保存到 IPC 相册
-              success: res => {
-                console.log(res, 'res');
-                setState({
-                  showShot: true,
-                  shotUrl: res.tempImagePath
-                });
-              },
-              fail: err => {
-                console.log(err, 'err');
-                const errObj = err.innerError || err || {};
-                const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_screenshot_error_tip');
-                toast({
-                  title: errMsg
-                });
-              }
-            });
+            takeSnapshot();
           },
           fail: () => {
             showModal({

package/lib/widgets/screenshot/screenshot.less

@@ -2,46 +2,7 @@
   color: var(--iconColor);
   font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
 }
+
 .ipc-player-plugin-screenshot-toast-wrap {
   position: absolute;
 }
-.ipc-player-plugin-screenshot-toast {
-  flex: 1;
-  border-radius: calc(8px * var(--ipc-player-size-scale, 1));;
-  background-color: var(--shot-card-bg-color);
-  display: flex;
-  align-items: center;
-  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(12px * var(--ipc-player-size-scale, 1));
-  z-index: 100;
-  .ipc-player-plugin-screenshot-toast-image-box {
-    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
-    overflow: hidden;
-    width: calc(66px * var(--ipc-player-size-scale, 1));
-    height: calc(66px * 0.57 * var(--ipc-player-size-scale, 1));
-  }
-  .ipc-player-plugin-screenshot-toast-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .ipc-player-plugin-screenshot-toast-title {
-    flex: 1;
-    margin-left: calc(12px * var(--ipc-player-size-scale, 1));
-    font-size: calc(14px * var(--ipc-player-size-scale, 1));
-    color: var(--fontColor);
-    margin-right: calc(12px * var(--ipc-player-size-scale, 1));
-    word-break: break-word;
-    
-  }
-  .ipc-player-plugin-screenshot-toast-bottom {
-    border: 1px solid #1989FA;
-    min-width: calc(52px * var(--ipc-player-size-scale, 1));
-    max-width: calc(100px * var(--ipc-player-size-scale, 1));
-    border-radius: calc(4px * var(--ipc-player-size-scale, 1));
-    padding: calc(5px * var(--ipc-player-size-scale, 1)) calc(11px * var(--ipc-player-size-scale, 1));
-    font-size: calc(14px * var(--ipc-player-size-scale, 1));
-    white-space: nowrap;
-    overflow: hidden; 
-    text-overflow: ellipsis; 
-  }
-}

package/package.json

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