@ray-js/ipc-player-integration 0.0.49 → 0.0.50-beta.1

package/lib/ctx/ctx.composition.js

@@ -4,7 +4,7 @@ const _excluded = ["title", "duration"];
 import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 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 } from '../widgets';
+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 { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
 import { multiPrefix } from '../widgets/multiCamera/constants';
@@ -68,6 +68,11 @@ export const defaultBottomLeftContent = [{
   id: 'RealTimeMagnification',
   content: RealTimeMagnification,
   hidden: true
+}, /* 焦距转盘入口：仅多镜头设备（ipc_multi_zoom 上报值 cnt > 1）会真正渲染 */
+{
+  id: 'ZoomTurntableEntry',
+  content: ZoomTurntableEntry,
+  hidden: true
 }];
 export const defaultBottomRightContent = [{
   id: 'SwitchLayout',

package/lib/ctx/ctx.js

@@ -81,6 +81,12 @@ export const createUseCtx = _ref => {
     // 最大缩放倍数
     const [maxZoomSettings, setMaxZoomSettings] = useAtom(6);
 
+    // 多镜头变焦能力（zoom_skill），null 表示不支持 / 尚未拉到；由 ZoomTurntableEntry 写入
+    const [zoomSkill, setZoomSkill] = useAtom(null);
+
+    // 当前使用的物理镜头下标，用于双层缩放换算（curM = lens.value + (d-1) * Δ）
+    const [zoomLensIndex, setZoomLensIndex] = useAtom(0);
+
     // 对讲中
     const [intercom] = useAtom(false);
     const [playState] = useAtom(PlayState.CONNECTING);
@@ -268,6 +274,10 @@ export const createUseCtx = _ref => {
       intercomMode,
       intercomSupported,
       maxZoomSettings,
+      zoomSkill,
+      setZoomSkill,
+      zoomLensIndex,
+      setZoomLensIndex,
       playState,
       setPlayState,
       setPtzControlTipDisabled,
@@ -505,7 +515,7 @@ export const createUseCtx = _ref => {
         } else if (type === 'bottomLeft') {
           updateAtom(bottomLeftContent, prevValue => prevValue.filter(item => item.id !== id));
         } else if (type === 'bottomRight') {
-          updateAtom(bottomLeftContent, prevValue => prevValue.filter(item => item.id !== id));
+          updateAtom(bottomRightContent, prevValue => prevValue.filter(item => item.id !== id));
         } else {
           updateAtom(absoluteContent, prevValue => prevValue.filter(item => item.id !== id));
         }

package/lib/features/initPlayerWidgets/index.d.ts

@@ -12,6 +12,11 @@ export type InitPlayerWidgetsOptions = {
     hideSignalMenu?: boolean;
     showToggleVerticalFull?: boolean;
     showRealTimeMagnification?: boolean;
+    /**
+     * 允许展示焦距转盘入口（长按图标弹出转盘）。
+     * 仅为功能开关；实际渲染还要 ipc_multi_zoom 解析出 cnt > 1，单镜头设备传 true 也不出现。
+     */
+    showZoomTurntable?: boolean;
     directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
     hideSmartImageQualityState?: boolean;
     topLeftContent?: ComponentConfig[];

package/lib/features/initPlayerWidgets/index.js

@@ -52,6 +52,18 @@ export async function initPlayerWidgets(ctx, options) {
       newDefaultBottomLeftContent[magnificationIndex].hidden = false;
     }
   }
+  // 焦距转盘入口：这里只放开占位，真正是否渲染由 widget 内部按
+  // ipc_multi_zoom 上报值解析出的 cnt > 1 决定（单镜头设备不出现）
+  if (options.showZoomTurntable) {
+    const zoomTurntableIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'ZoomTurntableEntry');
+    if (zoomTurntableIndex !== -1) {
+      newDefaultBottomLeftContent[zoomTurntableIndex].hidden = false;
+      // @ts-ignore
+      newDefaultBottomLeftContent[zoomTurntableIndex].initProps = {
+        showZoomTurntable: true
+      };
+    }
+  }
   ctx.addContent('bottomLeft', newDefaultBottomLeftContent);
   const newDefaultBottomRightContent = _cloneDeep(options.bottomRightContent || defaultBottomRightContent);
   const fullScreenIndex = newDefaultBottomRightContent.findIndex(item => item.id === 'FullScreen');

package/lib/i18n/index.d.ts

@@ -28,6 +28,8 @@ declare const Strings: kit.I18N<{
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_zoom_turntable_tip_text: string;
+        ipc_player_zoom_turntable_switch_failed: string;
         ipc_player_flow_low_tip: string;
         ipc_player_trial_in_use: string;
         ipc_player_trial_preview_text: string;
@@ -63,6 +65,8 @@ declare const Strings: kit.I18N<{
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_zoom_turntable_tip_text: string;
+        ipc_player_zoom_turntable_switch_failed: string;
         ipc_player_flow_low_tip: string;
         ipc_player_trial_in_use: string;
         ipc_player_trial_preview_text: string;
@@ -98,6 +102,8 @@ declare const Strings: kit.I18N<{
     ipc_player_tip_next: string;
     ipc_player_tip_confirm: string;
     ipc_player_ptz_moveable_tip_text: string;
+    ipc_player_zoom_turntable_tip_text: string;
+    ipc_player_zoom_turntable_switch_failed: string;
     ipc_player_flow_low_tip: string;
     ipc_player_trial_in_use: string;
     ipc_player_trial_preview_text: string;
@@ -132,6 +138,8 @@ declare const Strings: kit.I18N<{
     ipc_player_tip_next: string;
     ipc_player_tip_confirm: string;
     ipc_player_ptz_moveable_tip_text: string;
+    ipc_player_zoom_turntable_tip_text: string;
+    ipc_player_zoom_turntable_switch_failed: string;
     ipc_player_flow_low_tip: string;
     ipc_player_trial_in_use: string;
     ipc_player_trial_preview_text: string;

package/lib/i18n/strings.d.ts

@@ -27,6 +27,8 @@ declare const _default: {
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_zoom_turntable_tip_text: string;
+        ipc_player_zoom_turntable_switch_failed: string;
         ipc_player_flow_low_tip: string;
         ipc_player_trial_in_use: string;
         ipc_player_trial_preview_text: string;
@@ -62,6 +64,8 @@ declare const _default: {
         ipc_player_tip_next: string;
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
+        ipc_player_zoom_turntable_tip_text: string;
+        ipc_player_zoom_turntable_switch_failed: string;
         ipc_player_flow_low_tip: string;
         ipc_player_trial_in_use: string;
         ipc_player_trial_preview_text: string;

package/lib/i18n/strings.js

@@ -27,6 +27,8 @@ export default {
     ipc_player_tip_next: 'Next',
     ipc_player_tip_confirm: 'Got it',
     ipc_player_ptz_moveable_tip_text: 'Hold the middle to drag the direction control area',
+    ipc_player_zoom_turntable_tip_text: 'Press and hold here to switch zoom',
+    ipc_player_zoom_turntable_switch_failed: 'Failed to switch lens. Please try again.',
     ipc_player_flow_low_tip: 'The device’s remaining data is below 200MB. Please recharge as soon as possible.',
     ipc_player_trial_in_use: 'Trial',
     ipc_player_trial_preview_text: 'End',
@@ -62,6 +64,8 @@ export default {
     ipc_player_tip_next: '下一步',
     ipc_player_tip_confirm: '知道了',
     ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域',
+    ipc_player_zoom_turntable_tip_text: '长按此处可切换焦距',
+    ipc_player_zoom_turntable_switch_failed: '切换镜头失败，请重试',
     ipc_player_flow_low_tip: '设备当前剩余流量不足200M，请尽快充值',
     ipc_player_trial_in_use: '试用中',
     ipc_player_trial_preview_text: '后结束',

package/lib/interface.d.ts

@@ -2,7 +2,9 @@ import React from 'react';
 import { PrimitiveAtom } from 'jotai';
 import type { Toast, IntercomMode } from './ports.output';
 import { useMultiCameraCtx } from './ctx/multiCameraCtx';
+import type { ZoomSkill } from './widgets/zoomTurntable/lensSkill';
 export { IntercomMode } from './ports.output';
+export type { ZoomSkill, Lens } from './widgets/zoomTurntable/lensSkill';
 type WithInitialValue<Value> = {
     init: Value;
 };
@@ -11,7 +13,7 @@ export type IpcContext = {
 };
 export type RetAtom<T> = PrimitiveAtom<T> & WithInitialValue<T>;
 export type ScreenType = 'full' | 'vertical';
-export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'TryExperience' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
+export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'TryExperience' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'RealTimeMagnification' | 'ZoomTurntableEntry' | 'moveablePtzControlId';
 export declare const enum PlayerStreamStatus {
     UnknownException = -1000,
     ConnectSuccess = 1001,
@@ -62,6 +64,12 @@ export type UseCtx = (options: {
     intercomMode: RetAtom<IntercomMode>;
     intercomSupported: RetAtom<boolean>;
     maxZoomSettings: RetAtom<number>;
+    /** 多镜头变焦能力（zoom_skill）；null 表示不支持 / 尚未拉到 */
+    zoomSkill: RetAtom<ZoomSkill | null>;
+    setZoomSkill: (value: ZoomSkill | null) => void;
+    /** 当前使用的物理镜头下标 */
+    zoomLensIndex: RetAtom<number>;
+    setZoomLensIndex: (value: number) => void;
     resolution: RetAtom<string>;
     resolutionList: RetAtom<string[]>;
     playState: RetAtom<PlayState>;

package/lib/ui/bottomLeftContent.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import { useStore } from '../ctx/store';
 import { useComponentHideState } from './hooks';
 import { TrialBadge, useTrialBadge } from '../widgets/trialBadge';
-import { pauseTimeToHideAllComponent, startTimeToHideAllComponent } from './constant';
+import { bottomLeftContentResize, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from './constant';
 
 // 用唯一 className 在 createSelectorQuery 中区分多个实例，避免互相干扰
 let scrollClsSeq = 0;
@@ -85,6 +85,10 @@ const BottomLeftContent = _ref => {
     full: false
   });
 
+  // 子元素自身显隐变化（widget 数量不变、但内部从 return null 变为渲染）时的重测信号。
+  // 这类变化 bottomLeftContent.length 捕获不到，由 widget 主动 emit。
+  const [resizeSignal, setResizeSignal] = useState(0);
+
   // 滑动期间暂停整体的自动隐藏，滑动停止后再恢复（无原生 scrollend，用防抖判定结束）
   const scrollingRef = useRef(false);
   const scrollEndTimerRef = useRef();
@@ -173,7 +177,18 @@ const BottomLeftContent = _ref => {
   // reservedRight 决定 ScrollView 可视宽度（右下角内容异步加载后会从 0 变为实际宽度）
   reservedRight,
   // playState：视频就绪后 overlay 可能重新布局，需重新测量
-  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, scrollCls, contentCls, scrollResetKey]);
+  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, scrollCls, contentCls, scrollResetKey, resizeSignal]);
+
+  // 子元素主动上报宽度变化 → 重跑测量，及时更新横滑箭头与右边缘淡出
+  useEffect(() => {
+    var _ctx$event;
+    const onResize = () => setResizeSignal(value => value + 1);
+    (_ctx$event = ctx.event) === null || _ctx$event === void 0 || _ctx$event.on(bottomLeftContentResize, onResize);
+    return () => {
+      var _ctx$event2;
+      (_ctx$event2 = ctx.event) === null || _ctx$event2 === void 0 || _ctx$event2.off(bottomLeftContentResize, onResize);
+    };
+  }, [ctx.event]);
   // 卸载时清理防抖定时器；若仍处于滑动中则恢复自动隐藏，避免遗留暂停态
   useEffect(() => {
     return () => {
@@ -181,9 +196,9 @@ const BottomLeftContent = _ref => {
         clearTimeout(scrollEndTimerRef.current);
       }
       if (scrollingRef.current) {
-        var _ctx$event3;
+        var _ctx$event5;
         scrollingRef.current = false;
-        (_ctx$event3 = ctx.event) === null || _ctx$event3 === void 0 || _ctx$event3.emit(startTimeToHideAllComponent);
+        (_ctx$event5 = ctx.event) === null || _ctx$event5 === void 0 || _ctx$event5.emit(startTimeToHideAllComponent);
       }
     };
   }, [ctx.event]);
@@ -253,17 +268,17 @@ const BottomLeftContent = _ref => {
       var _e$detail;
       // 滑动开始时暂停自动隐藏（仅在一次滑动会话内触发一次），滑动停止后恢复
       if (!scrollingRef.current) {
-        var _ctx$event;
+        var _ctx$event3;
         scrollingRef.current = true;
-        (_ctx$event = ctx.event) === null || _ctx$event === void 0 || _ctx$event.emit(pauseTimeToHideAllComponent);
+        (_ctx$event3 = ctx.event) === null || _ctx$event3 === void 0 || _ctx$event3.emit(pauseTimeToHideAllComponent);
       }
       if (scrollEndTimerRef.current) {
         clearTimeout(scrollEndTimerRef.current);
       }
       scrollEndTimerRef.current = setTimeout(() => {
-        var _ctx$event2;
+        var _ctx$event4;
         scrollingRef.current = false;
-        (_ctx$event2 = ctx.event) === null || _ctx$event2 === void 0 || _ctx$event2.emit(startTimeToHideAllComponent);
+        (_ctx$event4 = ctx.event) === null || _ctx$event4 === void 0 || _ctx$event4.emit(startTimeToHideAllComponent);
       }, 200);
 
       // Ray ScrollView 在不同实现下，scrollLeft 可能直接挂在事件上，也可能在 detail 内

package/lib/ui/constant.d.ts

@@ -48,7 +48,17 @@ export declare const widgetLabs: {
     readonly FULL_TRAVEL_ROUTE_CONTROL: "FullTravelRouteControl";
     readonly FULL_SCREEN: "FullScreen";
     readonly VERTICAL_SCREEN: "VerticalScreen";
+    readonly ZOOM_TURNTABLE: "ZoomTurntable";
+    readonly ZOOM_TURNTABLE_TIP: "ZoomTurntableTip";
 };
+/**
+ * 左下角内容宽度可能已变化，请求重新测量横滑状态。
+ *
+ * 用于「widget 数量没变、但某个 widget 从 return null 变成真正渲染」的场景
+ * （如焦距转盘入口要等 Skill 异步就绪后才出现），
+ * 这类变化 bottomLeftContent.length 捕获不到。
+ */
+export declare const bottomLeftContentResize = "bottomLeftContentResize";
 export declare const zoomLevelChange = "zoomLevelChange";
 export declare const setScaleMultipleEvent = "setScaleMultipleEvent";
 export declare const decodeClarityDic: {

package/lib/ui/constant.js

@@ -49,8 +49,19 @@ export const widgetLabs = {
   FULL_VOICE_INTERCOM: 'FullVoiceIntercom',
   FULL_TRAVEL_ROUTE_CONTROL: 'FullTravelRouteControl',
   FULL_SCREEN: 'FullScreen',
-  VERTICAL_SCREEN: 'VerticalScreen'
+  VERTICAL_SCREEN: 'VerticalScreen',
+  ZOOM_TURNTABLE: 'ZoomTurntable',
+  ZOOM_TURNTABLE_TIP: 'ZoomTurntableTip'
 };
+
+/**
+ * 左下角内容宽度可能已变化，请求重新测量横滑状态。
+ *
+ * 用于「widget 数量没变、但某个 widget 从 return null 变成真正渲染」的场景
+ * （如焦距转盘入口要等 Skill 异步就绪后才出现），
+ * 这类变化 bottomLeftContent.length 捕获不到。
+ */
+export const bottomLeftContentResize = 'bottomLeftContentResize';
 export const zoomLevelChange = 'zoomLevelChange';
 export const setScaleMultipleEvent = 'setScaleMultipleEvent';
 export const decodeClarityDic = {

package/lib/ui/ui.js

@@ -24,6 +24,7 @@ import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
 import { getNgRawData, getSmartImageQualityState, isLowPhone } from '../utils/ttt';
+import { lensCount } from '../widgets/zoomTurntable/lensSkill';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -47,6 +48,15 @@ const defaultCSSVariable = {
   '--fontSize': '12px'
 };
 const HIDE_COMPONENT_TIME = 5000;
+
+/** 下发缩放前「先对齐画面实际值」与「再设目标值」之间的间隔（ms），太短会被 setData 合并 */
+const SET_SCALE_ALIGN_DELAY = 120;
+
+/** 对齐态最长抑制时长（ms）：目标值迟迟不回读时兜底恢复，避免回读被永久吞掉 */
+const SET_SCALE_ALIGN_TIMEOUT = 1500;
+
+/** 回读值与对齐值 / 目标值的比对容差 */
+const SCALE_MATCH_EPS = 0.01;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const {
     className,
@@ -107,8 +117,23 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const reGetOrientationTimer = useRef(null);
   // 统一调整为1倍缩放，保证画面展示完全
   const [scaleMultiple, setScaleMultiple] = useState(1);
+  const scaleMultipleRef = useRef(1);
   // 统一调整为1倍缩放，保证画面展示完全
   const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
+  /** 画面实际缩放（onZoomChange 回读），手势缩放不经过 scaleMultiple，故单独记一份 */
+  const currentZoomLevelRef = useRef(1);
+  /** 下发缩放的对齐态：{ 对齐值, 目标值, 兜底恢复时刻 }，用于抑制中间态回读 */
+  const alignPendingRef = useRef(null);
+  const applyScaleMultiple = value => {
+    console.log('[scaleMultiple] setState', `${scaleMultipleRef.current} -> ${value}`);
+    scaleMultipleRef.current = value;
+    setScaleMultiple(value);
+  };
+
+  // 属性真的变了才会重渲染并下发给原生播放器；没有这条日志就说明属性没变化
+  useEffect(() => {
+    console.log('[scaleMultiple] 属性已下发给播放器 scaleMultiple =', scaleMultiple);
+  }, [scaleMultiple]);
   const [createCtx, setCreateCtx] = useState(false);
   // 是否需要忽略进入后台停止预览
   const [ignoreStopOnHide, setIgnoreStopOnHide] = useState(ignoreHideStopPreview);
@@ -241,7 +266,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     layoutStyle,
     ptzStatus,
     selectedLenInfo,
-    isVerticalFullLayout
+    isVerticalFullLayout,
+    maxZoomSettings,
+    zoomSkill
   } = useStore({
     topLeftContent: instance.topLeftContent,
     topRightContent: instance.topRightContent,
@@ -256,9 +283,21 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     layoutStyle: instance.multiCameraCtx.layoutStyle,
     ptzStatus: instance.multiCameraCtx.ptzStatus,
     selectedLenInfo: instance.multiCameraCtx.selectedLenInfo,
-    isVerticalFullLayout: instance.isVerticalFullLayout
+    isVerticalFullLayout: instance.isVerticalFullLayout,
+    maxZoomSettings: instance.maxZoomSettings,
+    zoomSkill: instance.zoomSkill
   });
 
+  // 默认最大缩放倍数下发给播放器；多镜头设备的上限要按当前镜头换算，交给 zoomTurntable 下发
+  useEffect(() => {
+    var _instance$IPCPlayerIn;
+    if (lensCount(zoomSkill) > 1) return;
+    if (typeof ((_instance$IPCPlayerIn = instance.IPCPlayerInstance) === null || _instance$IPCPlayerIn === void 0 ? void 0 : _instance$IPCPlayerIn.setMaxScaleMultiple) !== 'function') return;
+    instance.IPCPlayerInstance.setMaxScaleMultiple({
+      maxScaleMultiple: maxZoomSettings
+    });
+  }, [maxZoomSettings, zoomSkill]);
+
   /* ---------------------------------多目相关副作用统一处理开始----------------------------------------- */
   useEffect(() => {
     if (!instance.multiCameraCtx.isSupport) return;
@@ -754,7 +793,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       console.log(scaleMultiple, 'scaleMultiple');
       console.log(hasPlayedRef.current, 'hasPlayedRef.current');
       if (hasPlayedRef.current) {
-        setScaleMultiple(currentZoomLevel);
+        applyScaleMultiple(currentZoomLevel);
       }
     }
     if (playState === PlayState.PLAYING) {
@@ -834,7 +873,25 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setIgnoreStopOnHide(state);
   };
   const onSetScaleMultiple = value => {
-    setScaleMultiple(value);
+    // 手势缩放只走 onZoomChange 回读、不写本 state，属性会停在旧值（甚至恰好等于目标值），
+    // 直接设目标时「值没变化」，播放器收不到。
+    // 故下发前先把属性对齐画面实际值 currentZoomLevel，再设目标值，保证属性确实变化一次。
+    // 两次更新要拉开间隔，挨太近会被 setData 合并，原生层看到的还是「没变化」。
+    const actual = currentZoomLevelRef.current;
+    console.log('[scaleMultiple] 收到 setScaleMultipleEvent', `目标=${value}`, `当前属性=${scaleMultipleRef.current}`, `画面实际=${actual}`);
+    if (actual === value) {
+      // 画面已在目标缩放，对齐属性即可
+      applyScaleMultiple(value);
+      return;
+    }
+    // 对齐这一步是我们自己制造的中间态，回读时不要广播出去（否则倍率读数会先闪一下 actual）
+    alignPendingRef.current = {
+      align: actual,
+      target: value,
+      expireAt: Date.now() + SET_SCALE_ALIGN_TIMEOUT
+    };
+    applyScaleMultiple(actual);
+    setTimeout(() => applyScaleMultiple(value), SET_SCALE_ALIGN_DELAY);
   };
   const onTrialCountdownEnd = useMemoizedFn(() => {
     // updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience' as any, {
@@ -899,7 +956,24 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     // }
 
     // 直接记录当前缩放比例
+    console.log('[scaleMultiple] onZoomChange 回读画面实际缩放 =', zoomLevel);
+    currentZoomLevelRef.current = zoomLevel;
     setCurrentZoomLevel(zoomLevel);
+
+    // 抑制「先对齐再设目标」这一步产生的中间态回读：广播出去会让倍率读数先闪一下对齐值
+    const pending = alignPendingRef.current;
+    if (pending) {
+      if (Date.now() > pending.expireAt) {
+        // 目标值迟迟没回来，兜底恢复，别把后续回读一直吞掉
+        console.warn('[scaleMultiple] 对齐态超时恢复', JSON.stringify(pending));
+        alignPendingRef.current = null;
+      } else if (Math.abs(zoomLevel - pending.align) < SCALE_MATCH_EPS) {
+        console.log('[scaleMultiple] 中间态回读已抑制，不广播', zoomLevel);
+        return false;
+      } else if (Math.abs(zoomLevel - pending.target) < SCALE_MATCH_EPS) {
+        alignPendingRef.current = null;
+      }
+    }
     instance.event.emit(zoomLevelChange, zoomLevel);
     return false;
   });

package/lib/ui/ui.less

@@ -43,6 +43,21 @@
       .ipc-player-plugin-realtime-magnification {
         background-color: rgba(0, 0, 0, 0.2);
       }
+
+      // 焦距 tab：底部条变白底后整体反相 —— 未选中用浅灰底（同上面两个控件），
+      // 选中态不能沿用白底（会与白色底部条糊在一起），改为深色底 + 白字。
+      // 文字默认色走 --iconColor，已在上面被覆盖为 #000，无需单独处理。
+      .ipc-player-plugin-zoom-turntable-tab {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+
+      .ipc-player-plugin-zoom-turntable-tab-active {
+        background-color: rgba(0, 0, 0, 0.85);
+
+        .ipc-player-plugin-zoom-turntable-tab-text {
+          color: #fff;
+        }
+      }
     }
   }
 

package/lib/utils/content/dpCode.d.ts

@@ -11,3 +11,4 @@ export declare const ZOOM_CONTROL = "zoom_control";
 export declare const MULTI_GUN_BALL = "ipc_multi_locate_coors";
 export declare const MULTI_PTZ_CONTROL = "ipc_multi_ptz_control";
 export declare const MULTI_ZOOM_CONTROL = "ipc_multi_zoom_control";
+export declare const MULTI_ZOOM = "ipc_multi_zoom";

package/lib/utils/content/dpCode.js

@@ -22,4 +22,8 @@ export const MULTI_GUN_BALL = 'ipc_multi_locate_coors'; // 多目枪球联动-
 
 export const MULTI_PTZ_CONTROL = 'ipc_multi_ptz_control'; // 多目 PTZ 控制
 
-export const MULTI_ZOOM_CONTROL = 'ipc_multi_zoom_control'; // 多目 变焦控制
+export const MULTI_ZOOM_CONTROL = 'ipc_multi_zoom_control'; // 多目 变焦控制
+
+// 多镜头变焦（切换焦距）门控 DP：存在才拉 zoom_skill、才显示转盘入口，不解析其内容。
+// 注意与上面的 ipc_multi_zoom_control 不是同一个 DP。
+export const MULTI_ZOOM = 'ipc_multi_zoom';

package/lib/utils/storage/index.d.ts

@@ -3,8 +3,8 @@ export declare class Storage {
     constructor(prefix: string);
     get(key: string): Promise<any>;
     getSync(key: string): any;
-    set(key: string, value: any): Promise<null>;
-    remove(key: string): Promise<null>;
+    set(key: string, value: any): Promise<any>;
+    remove(key: string): Promise<any>;
     private getFullKey;
 }
 export declare const storage: Storage;

package/lib/widgets/index.d.ts

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

package/lib/widgets/index.js

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

package/lib/widgets/realTimeMagnification/realTimeMagnification.js

@@ -3,13 +3,19 @@ import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
 import { PlayState } from '../../interface';
 import { useStore } from '../../ctx/store';
+import { useDpSupport } from '../../hooks/useDpSupport';
 import { zoomLevelChange, setScaleMultipleEvent, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import { MULTI_ZOOM_DP_CODE } from '../zoomTurntable/lensSkill';
 import './realTimeMagnification.less';
 
 /** 全量档位列表 */
 const ALL_ZOOM_LEVELS = [1, 2, 4, 6, 8, 12];
+
+/** 放模块级：useDpSupport 把 dpCodes 直接当 effect 依赖，行内数组会每次渲染重查一遍 schema */
+const MULTI_ZOOM_DP_CODES = [MULTI_ZOOM_DP_CODE];
 export const RealTimeMagnification = props => {
   const {
+    devId,
     playState,
     event,
     className,
@@ -27,6 +33,17 @@ export const RealTimeMagnification = props => {
   });
   const [currentZoom, setCurrentZoom] = useState(1);
 
+  /**
+   * 设备带 ipc_multi_zoom（多镜头变焦能力 DP）时本组件让位：
+   * 倍率的显示与交互都交给焦距转盘（ZoomTurntableEntry / Dock），两者同时出现会给两套读数。
+   * 这里只看设备 schema 里有没有这个 DP，不解析值、也不管业务侧的 showZoomTurntable 开关。
+   */
+  const dpSupportMap = useDpSupport({
+    devId,
+    dpCodes: MULTI_ZOOM_DP_CODES
+  });
+  const hasMultiZoomDp = dpSupportMap[MULTI_ZOOM_DP_CODE];
+
   /** 根据 maxZoomSettings 动态生成可用档位列表 */
   const zoomLevels = useMemo(() => {
     const max = maxZoomSettings || 6;
@@ -75,7 +92,7 @@ export const RealTimeMagnification = props => {
     event.emit(setScaleMultipleEvent, nextZoom);
     event.emit(startTimeToHideAllComponent);
   }, [getNextZoom, event, currentZoom]);
-  if (currentPlayState !== PlayState.PLAYING) {
+  if (currentPlayState !== PlayState.PLAYING || hasMultiZoomDp) {
     return null;
   }
   return /*#__PURE__*/React.createElement(View, {

package/lib/widgets/toggleVerticalFull/toggleVerticalFull.less

@@ -1,4 +1,4 @@
 .toggle-vertical-full {
-  font-size: var(--iconPlayerSize);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
   color: var(--iconColor);
 }