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

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/interface.d.ts

@@ -121,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>;

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

@@ -26,6 +26,7 @@ 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
@@ -1212,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,
@@ -1226,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/widgets/captureResult/captureResult.d.ts

@@ -1,12 +1,16 @@
 import React from 'react';
 import './captureResult.less';
-type CaptureKind = 'record' | 'screenshot';
-type Props = {
+export type CaptureKind = 'record' | 'screenshot';
+export interface CaptureResultToastProps {
     brandColor: string;
-    count: number;
     kind: CaptureKind;
-    onCheck: () => void;
     thumbnailPath: string;
-};
-export declare function CaptureResultToast({ brandColor, count, kind, onCheck, thumbnailPath }: Props): React.JSX.Element;
-export {};
+    onCheck: () => void;
+    count?: number;
+    /** 自定义标题（可选），不传时使用默认文案 */
+    title?: React.ReactNode;
+    /** 自定义操作按钮文案（可选），不传时默认为“查看” */
+    checkText?: string;
+    className?: string;
+}
+export declare function CaptureResultToast({ brandColor, count, kind, onCheck, thumbnailPath, title, checkText, className, }: CaptureResultToastProps): React.JSX.Element;

package/lib/widgets/captureResult/captureResult.js

@@ -18,47 +18,72 @@ const TEXT_KEYS = {
     single: 'ipc_player_screenshot_success_tip'
   }
 };
+const LEGACY_CLASS_MAP = {
+  record: {
+    toast: 'ipc-player-plugin-record-success-toast',
+    imageBox: 'ipc-player-plugin-record-success-toast-image-box',
+    imageBoxMulti: 'ipc-player-plugin-record-success-toast-image-box-multi',
+    image: 'ipc-player-plugin-record-success-toast-image',
+    playIconBox: 'ipc-player-plugin-record-success-play-icon-box',
+    playIcon: 'ipc-player-plugin-record-success-play-icon',
+    title: 'ipc-player-plugin-record-success-toast-title',
+    check: 'ipc-player-plugin-record-success-toast-bottom'
+  },
+  screenshot: {
+    toast: 'ipc-player-plugin-screenshot-toast',
+    imageBox: 'ipc-player-plugin-screenshot-toast-image-box',
+    imageBoxMulti: 'ipc-player-plugin-screenshot-toast-image-box-multi',
+    image: 'ipc-player-plugin-screenshot-toast-image',
+    playIconBox: '',
+    playIcon: '',
+    title: 'ipc-player-plugin-screenshot-toast-title',
+    check: 'ipc-player-plugin-screenshot-toast-bottom'
+  }
+};
 export function CaptureResultToast(_ref) {
   let {
     brandColor,
-    count,
+    count = 0,
     kind,
     onCheck,
-    thumbnailPath
+    thumbnailPath,
+    title,
+    checkText,
+    className
   } = _ref;
-  const isMultiLens = count > 0;
+  const isMultiLens = count > 1;
   const textKeys = TEXT_KEYS[kind];
+  const legacyCls = LEGACY_CLASS_MAP[kind];
+  const imageClassName = clsx('ipc-player-plugin-capture-result-image', legacyCls.image);
   return /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-capture-result-toast"
+    className: clsx('ipc-player-plugin-capture-result-toast', legacyCls.toast, className)
   }, /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-plugin-capture-result-image-box', {
-      'ipc-player-plugin-capture-result-image-box-multi': isMultiLens
-    })
+    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, {
     key: layer,
-    className: "ipc-player-plugin-capture-result-image",
+    className: imageClassName,
     src: thumbnailPath,
     style: {
       left: `${index * 5}px`,
       zIndex: index + 1
     }
   })) : /*#__PURE__*/React.createElement(Image, {
-    className: "ipc-player-plugin-capture-result-image",
+    className: imageClassName,
     src: thumbnailPath
   }), kind === 'record' && /*#__PURE__*/React.createElement(View, {
-    className: "ipc-player-plugin-capture-result-play-icon-box"
+    className: clsx('ipc-player-plugin-capture-result-play-icon-box', legacyCls.playIconBox)
   }, /*#__PURE__*/React.createElement(Text, {
-    className: clsx('icon-panel', 'icon-panel-record-play', 'ipc-player-plugin-capture-result-play-icon')
+    className: clsx('icon-panel', 'icon-panel-record-play', 'ipc-player-plugin-capture-result-play-icon', legacyCls.playIcon)
   }))), /*#__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: clsx('ipc-player-plugin-capture-result-title', legacyCls.title)
+  }, title ? typeof title === 'string' ? /*#__PURE__*/React.createElement(Text, null, title) : 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",
+    className: clsx('ipc-player-plugin-capture-result-check', legacyCls.check),
     style: {
       color: brandColor,
       borderColor: brandColor
     }
-  }, Strings.getLang(textKeys.check)));
+  }, checkText || Strings.getLang(textKeys.check)));
 }

package/lib/widgets/captureResult/captureResult.less

@@ -1,4 +1,6 @@
-.ipc-player-plugin-capture-result-toast {
+.ipc-player-plugin-capture-result-toast,
+.ipc-player-plugin-record-success-toast,
+.ipc-player-plugin-screenshot-toast {
   z-index: 100;
   display: flex;
   flex: 1;
@@ -9,7 +11,9 @@
   border-radius: calc(8px * var(--ipc-player-size-scale, 1));
 }
 
-.ipc-player-plugin-capture-result-image-box {
+.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));
@@ -17,13 +21,17 @@
   border-radius: calc(4px * var(--ipc-player-size-scale, 1));
 }
 
-.ipc-player-plugin-capture-result-image {
+.ipc-player-plugin-capture-result-image,
+.ipc-player-plugin-record-success-toast-image,
+.ipc-player-plugin-screenshot-toast-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.ipc-player-plugin-capture-result-image-box-multi .ipc-player-plugin-capture-result-image {
+.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 {
   position: absolute;
   top: 0;
   width: calc(56px * var(--ipc-player-size-scale, 1));
@@ -32,7 +40,8 @@
   border-radius: calc(4px * var(--ipc-player-size-scale, 1));
 }
 
-.ipc-player-plugin-capture-result-play-icon-box {
+.ipc-player-plugin-capture-result-play-icon-box,
+.ipc-player-plugin-record-success-play-icon-box {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -48,12 +57,15 @@
   transform: translate(-50%, -50%);
 }
 
-.ipc-player-plugin-capture-result-play-icon {
+.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;
 }
 
-.ipc-player-plugin-capture-result-title {
+.ipc-player-plugin-capture-result-title,
+.ipc-player-plugin-record-success-toast-title,
+.ipc-player-plugin-screenshot-toast-title {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -71,7 +83,9 @@
   opacity: 0.5;
 }
 
-.ipc-player-plugin-capture-result-check {
+.ipc-player-plugin-capture-result-check,
+.ipc-player-plugin-record-success-toast-bottom,
+.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));
   padding: calc(5px * var(--ipc-player-size-scale, 1))

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

@@ -0,0 +1,2 @@
+export * from './captureResult';
+export type { CaptureResultToastProps, CaptureKind } from './captureResult';

package/lib/widgets/captureResult/index.js

@@ -0,0 +1,2 @@
+export * from './captureResult';
+export {};

package/lib/widgets/index.d.ts

@@ -24,3 +24,4 @@ export * from './toggleVerticalFull';
 export * from './flowLowTip';
 export * from './realTimeMagnification';
 export * from './zoomTurntable';
+export * from './captureResult';

package/lib/widgets/index.js

@@ -23,4 +23,5 @@ export * from './smallIntercom';
 export * from './toggleVerticalFull';
 export * from './flowLowTip';
 export * from './realTimeMagnification';
-export * from './zoomTurntable';
+export * from './zoomTurntable';
+export * from './captureResult';

package/lib/widgets/zoomTurntable/lensSkill.js

@@ -126,7 +126,10 @@ export const isSwitchChannelSupported = () => {
   const supported = typeof ((_ty = ty) === null || _ty === void 0 || (_ty = _ty.ipc) === null || _ty === void 0 ? void 0 : _ty.switchChannel) === 'function';
   if (!supported && !switchChannelMissingLogged) {
     switchChannelMissingLogged = true;
-    console.warn('[zoomTurntable] 宿主不支持 ty.ipc.switchChannel，焦距转盘入口不展示');
+    // 只能用 log：本判定会在 render 期被调用，而 IDE 宿主下 render 期的 console.warn
+    // 会打坏 Ray 运行时，整个面板崩在 areHookInputsEqual / TDZ —— 且症状伪装成
+    // 「hook 顺序错位」（报 change in the order of Hooks），极难归因，勿改回 warn
+    console.log('[zoomTurntable] 宿主不支持 ty.ipc.switchChannel，焦距转盘入口不展示');
     dumpChannelApis();
   }
   return supported;

package/package.json

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