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

package/lib/widgets/zoomTurntable/useLensZoom.js

@@ -5,8 +5,8 @@ import { PlayState } from '../../interface';
 import { useDpState } from '../../hooks/useDpState';
 import { setScaleMultipleEvent, zoomLevelChange } from '../../ui/constant';
 import { MOCK_ZOOM_SKILL, MULTI_ZOOM_DP_CODE, dumpChannelApis, isChannelChangeSupported, isZoomSkillValid, lensCount, parseZoomSkill, queryCurrentLens, showSmallMonitor, subscribeChannelChange, switchLens } from './lensSkill';
-import { DEFAULT_STEP, D_MIN, buildMarks, buildTickValues, indexOfLensId, matchLens, maxScaleMultiple, toDisplayZoom, toScaleMultiple, zoomBounds } from './lensModel';
-import { CHANNEL_SETTLE_TIMEOUT, D_MATCH_EPS, GESTURE_SWITCH_DEBOUNCE, SWITCH_LENS_TIMEOUT, zoomTurntableLensChange, zoomTurntableZoomChange } from './constants';
+import { DEFAULT_STEP, D_MIN, buildMarks, buildTickValues, indexOfLensId, lensRange, matchLens, maxScaleMultiple, toDisplayZoom, toScaleMultiple, zoomBounds } from './lensModel';
+import { CHANNEL_SETTLE_TIMEOUT, D_MATCH_EPS, GESTURE_SWITCH_DEBOUNCE, SWITCH_LENS_TIMEOUT, ZOOM_PREVIEW_THROTTLE, zoomTurntableLensChange, zoomTurntableSwitching, zoomTurntableZoomChange } from './constants';
 /**
  * 内部调试开关：置 true 时用 MOCK_ZOOM_SKILL 顶替 ipc_multi_zoom 的上报值。
  *
@@ -89,15 +89,43 @@ export const useLensZoom = options => {
 
   /** 画面绝对倍率；挂载时按已记录的 d 恢复读数 */
   const [curM, setCurM] = useState(() => zoomSkill ? toDisplayZoom(zoomSkill, zoomLensIndex, getLastD(devId)) : D_MIN);
+  /**
+   * 正在切往的目标镜头下标（-1 表示没有切换进行中）。
+   * 切换真空期里镜头下标还没动，倍率 tab 要靠它把高亮提前落到目标镜头，
+   * 免得原镜头的 tab 上冒出目标镜头的数值。
+   */
+  const [switchingIndex, setSwitchingIndex] = useState(-1);
   /** 拖动中：屏蔽回读，避免指针被拽回 */
   const draggingRef = useRef(false);
   /** 手势缩放跨临界点判定的 trailing 防抖 */
   const gestureTimerRef = useRef();
+  /** 拖动中连续下发的节流时间戳 */
+  const previewAtRef = useRef(0);
   const lensIndexRef = useRef(zoomLensIndex);
   lensIndexRef.current = zoomLensIndex;
   const skillRef = useRef(zoomSkill);
   skillRef.current = zoomSkill;
 
+  /** 标记 / 清除「切换进行中」，并广播给其它 hook 实例 */
+  const markSwitching = useMemoizedFn(index => {
+    setSwitchingIndex(index);
+    event.emit(zoomTurntableSwitching, {
+      index
+    });
+  });
+  useEffect(() => {
+    const onSwitching = _ref => {
+      let {
+        index
+      } = _ref;
+      return setSwitchingIndex(index);
+    };
+    event.on(zoomTurntableSwitching, onSwitching);
+    return () => {
+      event.off(zoomTurntableSwitching, onSwitching);
+    };
+  }, [event]);
+
   // ---------------- 能力加载 ----------------
   useEffect(() => {
     if (skipLoad || !devId || !showZoomTurntable) return undefined;
@@ -181,9 +209,37 @@ export const useLensZoom = options => {
   }, [devId, multiLensReady, playState, skipLoad, syncToLens, syncSmallMonitorByD]);
 
   // ---------------- 下发：curM → 切镜头 + d ----------------
+
+  /**
+   * 拖动过程中的连续下发：画面跟着转盘实时变倍，松手才落地的话中间是"死"的。
+   *
+   * 只在当前镜头区间内下发本地数字缩放 d，超出区间的部分夹到边界 ——
+   * 跨镜头要 switchChannel，逐帧下发扛不住，留给松手后的 applyZoom。
+   */
+  const previewZoom = useMemoizedFn(targetM => {
+    const skill = skillRef.current;
+    if (!skill) return;
+    const now = Date.now();
+    if (now - previewAtRef.current < ZOOM_PREVIEW_THROTTLE) return;
+    previewAtRef.current = now;
+    const index = lensIndexRef.current;
+    const [lo, hi] = lensRange(skill, index);
+    const clamped = Math.min(hi, Math.max(lo, targetM));
+    const d = toScaleMultiple(skill, index, clamped);
+    setLastD(devId, d);
+    // immediate：连续拖动时属性本来就在变，不需要 ui.tsx 那套"先对齐再设目标"的中间态，
+    // 走对齐反而会插入一帧 actual 值，画面看起来会抖
+    event.emit(setScaleMultipleEvent, {
+      value: d,
+      immediate: true
+    });
+    // 小窗按下发值切换，内部按 devId 去重，只在跨过 d=1 时真正调一次
+    syncSmallMonitorByD(d);
+  });
   const beginDrag = useMemoizedFn(value => {
     draggingRef.current = true;
     setCurM(value);
+    previewZoom(value);
   });
 
   /**
@@ -198,6 +254,7 @@ export const useLensZoom = options => {
     console.log('[scaleMultiple] zoomTurntable emit setScaleMultipleEvent', D_MIN, `lensIndex=${index}`, `lastD=${getLastD(devId)}`);
     event.emit(setScaleMultipleEvent, D_MIN);
     syncToLens(index, D_MIN);
+    markSwitching(-1);
     // 切镜头即回到该镜头的光学正倍数，小窗关掉（onChannelChange / 超时兜底都会走到这里）
     applySmallMonitor(false);
     event.emit(zoomTurntableLensChange, {
@@ -236,6 +293,9 @@ export const useLensZoom = options => {
     // 切物理镜头：从下发到 channelChange 回来这段屏蔽回读
     console.log('[zoomTurntable] 切换镜头', `${prevIndex} -> ${nextIndex}`, `channel=${skill.lenses[nextIndex].id}`, `targetM=${targetM.toFixed(2)}`);
     takePendingSwitch(devId); // 上一次没结算完的直接作废，以最新这次为准
+    // 高亮先落到目标镜头：这段真空期里 lensIndex 还是原镜头，
+    // 不提前挪的话原 tab 会显示目标镜头的读数，看起来就是数值跳变
+    markSwitching(nextIndex);
     switchSeq += 1;
     const seq = switchSeq;
     /** 读数退回「当前镜头 + 已记录的 d」；切没切成不确定时才用 */
@@ -247,6 +307,7 @@ export const useLensZoom = options => {
       index: nextIndex,
       timer: setTimeout(() => {
         pendingSwitchStore.delete(devId);
+        markSwitching(-1);
         rollback();
         console.warn('[zoomTurntable] switchChannel 无回调，读数已回滚', `${prevIndex} -> ${nextIndex}`, `${SWITCH_LENS_TIMEOUT}ms`);
       }, SWITCH_LENS_TIMEOUT)
@@ -257,6 +318,7 @@ export const useLensZoom = options => {
 
     if (!ok) {
       takePendingSwitch(devId);
+      markSwitching(-1);
       console.warn('[zoomTurntable] 切换镜头失败，读数已回滚', `${prevIndex} -> ${nextIndex}`);
       setCurM(toDisplayZoom(skill, prevIndex, getLastD(devId)));
       return;
@@ -287,6 +349,18 @@ export const useLensZoom = options => {
     }, CHANNEL_SETTLE_TIMEOUT);
   });
 
+  /**
+   * 拖动状态兜底复位。
+   *
+   * `beginDrag` 置上的 draggingRef 正常由 `applyZoom`（onChangeEnd）复位，但异常路径下
+   * onChangeEnd 可能永远不来 —— 拖动中转盘被收起（点画面 / 切横竖屏 / 停流）就是这种情况。
+   * draggingRef 只要还挂着 true，本实例后续所有 zoomLevelChange 都会被 early return 丢掉，
+   * 手势缩放的读数就再也不更新了。挂载方在收尾路径上调一次它即可。
+   */
+  const endDrag = useMemoizedFn(() => {
+    draggingRef.current = false;
+  });
+
   /** 拖动结束：按倍率匹配镜头后落地 */
   const applyZoom = useMemoizedFn(async targetM => {
     draggingRef.current = false;
@@ -310,10 +384,10 @@ export const useLensZoom = options => {
    * 切镜头的统一收尾入口：自己下发的（switchChannel）与外部来源（设备侧 / 其他端）都走这里。
    * 自己下发的那次不在 switchChannel 回调里收尾，就是为了等这条事件 —— 设备真的切过去了再动画面。
    */
-  const onChannelChange = useMemoizedFn(_ref => {
+  const onChannelChange = useMemoizedFn(_ref2 => {
     let {
       channel
-    } = _ref;
+    } = _ref2;
     const skill = skillRef.current;
     if (!skill) {
       console.warn('[zoomTurntable] 收到 channelChange 但镜头能力未就绪，已忽略', channel);
@@ -383,6 +457,21 @@ export const useLensZoom = options => {
       d,
       lensIndex: lensIndexRef.current
     });
+
+    // 画面已经顶到当前镜头区间的上界（也就是下一个镜头的光学倍数，如 1x 镜头放到 3.0）：
+    // 这个边界值在归属上属于下一个镜头，必须立刻切过去。
+    // 走 trailing 防抖的话，那 500ms 里 tab 会挂着「下一镜头的值」显示在当前镜头上。
+    const [, upperBound] = lensRange(skill, lensIndexRef.current);
+    const nextIndex = matchLens(skill, next);
+    if (nextIndex !== lensIndexRef.current && next >= upperBound - D_MATCH_EPS) {
+      if (gestureTimerRef.current) {
+        clearTimeout(gestureTimerRef.current);
+        gestureTimerRef.current = undefined;
+      }
+      console.log('[zoomTurntable] 触到镜头区间上界，立即切换', `curM=${next.toFixed(2)}`, `${lensIndexRef.current} -> ${nextIndex}`);
+      applyToLens(nextIndex, next);
+      return;
+    }
     scheduleGestureLensSwitch(next);
   });
   useEffect(() => {
@@ -405,6 +494,8 @@ export const useLensZoom = options => {
     /** 镜头列表（按 value 升序），用于渲染倍率 tab */
     lenses: (_zoomSkill$lenses$sli = zoomSkill === null || zoomSkill === void 0 || (_zoomSkill$lenses = zoomSkill.lenses) === null || _zoomSkill$lenses === void 0 ? void 0 : _zoomSkill$lenses.slice(0, lensCount(zoomSkill))) !== null && _zoomSkill$lenses$sli !== void 0 ? _zoomSkill$lenses$sli : [],
     lensIndex: zoomLensIndex,
+    /** 正在切往的目标镜头下标；-1 表示没有切换进行中 */
+    switchingIndex,
     /** 画面绝对倍率 */
     curM,
     min,
@@ -416,6 +507,7 @@ export const useLensZoom = options => {
     ticks: zoomSkill ? buildTickValues(zoomSkill) : [],
     beginDrag,
     applyZoom,
+    endDrag,
     switchToLens
   };
 };

package/lib/widgets/zoomTurntable/zoomTurntableDock.js

@@ -12,7 +12,7 @@ import { PlayState } from '../../interface';
 import { pauseTimeToHideAllComponent, playerTap } from '../../ui/constant';
 import { useLensZoom } from './useLensZoom';
 import ZoomTurntable from './turntable';
-import { CROP_RATIO_BOTTOM, CROP_RATIO_RIGHT, RELAYOUT_DELAYS, STYLE_OPTIONS_BOTTOM, STYLE_OPTIONS_RIGHT, VIBRATE_THROTTLE, zoomTurntableClose } from './constants';
+import { CROP_RATIO_BOTTOM, CROP_RATIO_RIGHT, RELAYOUT_DELAYS, VIBRATE_FAST_STEPS, getStyleOptionsBottom, getVerticalPlayerHeight, getZoomLayoutDebugPx, getZoomVisibleHeightBottom, STYLE_OPTIONS_RIGHT, VIBRATE_THROTTLE, zoomTurntableClose } from './constants';
 import './zoomTurntableDock.less';
 /**
  * 当前页面 id，ty.nativeDisabled 需要它定位要禁用手势分发的页面。
@@ -40,17 +40,27 @@ const getPageId = () => {
  * 定位与层级由承载的 CoverView 通过 absolutePosition 提供。
  */
 export const ZoomTurntableDock = props => {
+  var _initialValueRef$curr;
   const {
     event,
     className
   } = props;
   const {
     screenType,
-    playState
+    playState,
+    isVerticalFullLayout
   } = useStore({
     screenType: props.screenType,
-    playState: props.playState
+    playState: props.playState,
+    isVerticalFullLayout: props.isVerticalFullLayout
   });
+
+  /**
+   * 竖屏全屏：底部工具条常驻，转盘停在它之上（canvas 底部不留触摸余量，否则会盖住按钮）。
+   * 普通竖屏：工具条已被 Entry 藏掉，转盘贴播放器底边（余量上下对称，底部那份沉到播放器外）。
+   * 判断必须与 Entry 的 absolutePosition 用同一套，否则 canvas 高度与 dock 位置对不上。
+   */
+  const isVerticalFull = screenType === 'vertical' && isVerticalFullLayout;
   const {
     multiLensReady,
     curM,
@@ -60,7 +70,8 @@ export const ZoomTurntableDock = props => {
     marks,
     ticks,
     beginDrag,
-    applyZoom
+    applyZoom,
+    endDrag
   } = useLensZoom(_objectSpread(_objectSpread({}, props), {}, {
     skipLoad: true
   }));
@@ -73,6 +84,28 @@ export const ZoomTurntableDock = props => {
   /** 上次震动时间与上次震动对应的倍率，用于节流与跨刻度判定 */
   const lastVibrateAtRef = useRef(0);
   const lastVibrateValueRef = useRef(curM);
+
+  /**
+   * 转盘起始值：只在打开转盘 / 重建画布时取一次，作为首帧的 defaultValue。
+   *
+   * 取值时机要等镜头能力就绪：能力没就绪时 curM 只是 D_MIN 占位，
+   * 拿它当起点会让转盘停在错误刻度。
+   *
+   * 稳态读数由下面的受控 `value={curM}` 负责跟随（手势缩放画面时读数要跟着动）。
+   * 早先只传 defaultValue、完全不回写，是担心「回写在拖动中把指针拽走」——
+   * 而 rjs 的 setValue 本身就有拖动中 + 松手后 300ms 冷却期的双重忽略，这个顾虑不成立。
+   */
+  const initialValueRef = useRef(null);
+  const lastRemountRef = useRef(remountKey);
+  if (lastRemountRef.current !== remountKey) {
+    lastRemountRef.current = remountKey;
+    initialValueRef.current = null;
+  }
+  if (initialValueRef.current == null && multiLensReady && curM > 0) {
+    initialValueRef.current = curM;
+  }
+  // 兜底夹到 [min, max]：起点绝不能落在倍率域之外（曾出现过 0.0X）
+  const initialValue = Math.min(max, Math.max(min, (_initialValueRef$curr = initialValueRef.current) !== null && _initialValueRef$curr !== void 0 ? _initialValueRef$curr : min));
   const requestClose = useMemoizedFn(() => {
     event.emit(zoomTurntableClose);
   });
@@ -108,9 +141,64 @@ export const ZoomTurntableDock = props => {
       relayoutTimersRef.current = [];
       // 卸载兜底：手指还按着就被收起时，必须恢复原生手势
       setNativeDisabled(false);
+      // 拖动中被收起的话 onChangeEnd 不会来，draggingRef 会挂着 true 把后续的
+      // zoomLevelChange 全丢掉（手势缩放读数就不动了），这里补一次复位
+      endDrag();
     };
   }, []);
 
+  // 诊断：把浮层、canvas 与播放器容器的真实布局打出来，逐项核对两类历史坑：
+  //   1. dock 实测高 ≈ 期望_dock高 → absolutePosition 的 rpx 换算对了
+  //      （曾经给 194 只量到 101px，dock 只有 canvas 一半高，canvas 顶部被裁、收不到 touch）
+  //   2. canvas 实测高 ≈ 期望_canvas高 → rjs/index.js 的 computeCanvasViewport 读到了 ellipseRx/Ry
+  //      （曾经它硬编码 258×175.5，DOM 208 高、绘制 186 高，画面被拉伸且顶部溢出被裁）
+  // canvas顶溢出 > 0 就是「手势不生效」的直接信号：溢出 dock 的那部分收不到 touch。
+  // canvas底距播底 应 ≈ 48（让出底部工具条）：小于它就说明 canvas 压在按钮上、会吃掉按钮点击。
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const query = ty.createSelectorQuery();
+      query.select('.ipc-player-plugin-zoom-turntable-dock').boundingClientRect();
+      query.select('.ipc-zoom-turntable-canvas').boundingClientRect();
+      query.select('.ipc-player-content').boundingClientRect();
+      query.exec(res => {
+        const dock = res === null || res === void 0 ? void 0 : res[0];
+        const canvas = res === null || res === void 0 ? void 0 : res[1];
+        const player = res === null || res === void 0 ? void 0 : res[2];
+        const visibleH = getZoomVisibleHeightBottom();
+        const expect = getZoomLayoutDebugPx(isVerticalFull);
+        console.log('[zoomTurntable] 浮层布局诊断', JSON.stringify({
+          dock: dock && {
+            top: dock.top,
+            w: dock.width,
+            h: dock.height
+          },
+          canvas: canvas && {
+            top: canvas.top,
+            w: canvas.width,
+            h: canvas.height
+          },
+          player: player && {
+            w: player.width,
+            h: player.height
+          },
+          // 16:9 推导值 vs 实测值，两者差得多说明容器不是满宽 16:9
+          播放器高_推导: Math.round(getVerticalPlayerHeight()),
+          竖屏全屏: isVerticalFull,
+          期望_dock高: expect.dock高,
+          期望_canvas高: expect.canvas高,
+          背景带高: visibleH,
+          背景带占比: player !== null && player !== void 0 && player.height ? +(visibleH / player.height).toFixed(3) : null,
+          // 竖屏全屏期望 ≈ 底部工具条高度（canvas 底边 = 工具条顶边）；
+          // 普通竖屏期望 ≈ -HIT_PADDING_Y（沉到播放器底边以下）
+          canvas底距播底: canvas && player ? +(player.bottom - canvas.bottom).toFixed(1) : null,
+          // > 0 说明 canvas 顶部露在 dock 外被裁，那部分收不到 touch
+          canvas顶溢出: dock && canvas ? +(dock.top - canvas.top).toFixed(1) : null
+        }));
+      });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [remountKey]);
+
   // 点击播放器 → 收起转盘。
   // ui.tsx 的 handPlayerTap 会在此时把其余控件重新显示出来（componentHideState → false）
   // 并 emit(playerTap)，所以这里只需负责关掉转盘。
@@ -156,7 +244,8 @@ export const ZoomTurntableDock = props => {
     lastVibrateValueRef.current = value;
     beginDrag(value);
 
-    // 跨过主刻度（各镜头光学倍数 / 上限）时给更明显的反馈，形成挡位感
+    // 跨过主刻度（各镜头光学倍数 / 上限）时给更明显的反馈，形成挡位感。
+    // 这一下不受节流约束 —— 挡位感是转盘手感的骨架，丢一次就没了
     const crossedMark = marks.some(mark => prev < mark.value && value >= mark.value || prev > mark.value && value <= mark.value);
     const now = Date.now();
     if (crossedMark) {
@@ -164,10 +253,17 @@ export const ZoomTurntableDock = props => {
       vibrate('medium');
       return;
     }
-    if (now - lastVibrateAtRef.current >= VIBRATE_THROTTLE) {
-      lastVibrateAtRef.current = now;
-      vibrate('light');
-    }
+
+    // 距上一次震动太近就跳过。也顺带给 medium 留出静默期：
+    // 刚过主刻度又紧跟一下 light，会把挡位那一下的辨识度糊掉
+    if (now - lastVibrateAtRef.current < VIBRATE_THROTTLE) return;
+
+    // 一次 onChange 跨了好几格 = 正在快速甩动，逐格震分辨不出来，只会连成一片。
+    // 这时不震普通刻度，把反馈让给主刻度的挡位感
+    const movedSteps = step > 0 ? Math.abs(value - prev) / step : 1;
+    if (movedSteps > VIBRATE_FAST_STEPS) return;
+    lastVibrateAtRef.current = now;
+    vibrate('light');
   });
   const handleChangeEnd = useMemoizedFn(value => {
     applyZoom(value);
@@ -184,6 +280,18 @@ export const ZoomTurntableDock = props => {
     setNativeDisabled(false);
   });
 
+  /**
+   * 点在转盘空白处（未命中刻度带）= 点画面 → 收起转盘。
+   *
+   * canvas 覆盖了播放器下部很大一片，且 touch 事件被它 preventDefault + stopPropagation，
+   * 播放器收不到这一下 tap，「点画面收起」在转盘范围内整个失效 ——
+   * 表现就是第一次点没反应、第二次点（落到画面上部）才收起。
+   */
+  const handleBlankTap = useMemoizedFn(() => {
+    setNativeDisabled(false);
+    requestClose();
+  });
+
   // 定位由承载的 CoverView 负责（absolutePosition），这里只做布局容器。
   const turntableStyle = useMemo(() => ({
     width: isRight ? 'auto' : '100%',
@@ -193,6 +301,21 @@ export const ZoomTurntableDock = props => {
     alignItems: 'center',
     justifyContent: 'flex-end'
   }), [isRight]);
+
+  /**
+   * canvas 的承载层：只负责居中，不再用负 margin 把 canvas 往下推 ——
+   * 实测负 margin 在 CoverView 里不生效，探出去的那截会原地显示出来，
+   * 转盘整体被顶高一截、底边还留一条透明缝。
+   * 现在椭圆截面精确等于可见高度（CROP_RATIO_BOTTOM），整体下沉交给 dock 的
+   * dock 的 bottom（竖屏全屏为正、普通竖屏为负），canvas 尺寸与命中区保持原样，手势不受影响。
+   */
+  const canvasHolderStyle = useMemo(() => ({
+    display: 'flex',
+    justifyContent: 'center'
+  }), []);
+
+  /** 竖屏几何按容器 16:9 推导（转盘占播放器高的 1/3），横屏沿用设计稿比例 */
+  const styleOptions = useMemo(() => isRight ? STYLE_OPTIONS_RIGHT : getStyleOptionsBottom(isVerticalFull), [isRight, isVerticalFull]);
   if (!multiLensReady || playState !== PlayState.PLAYING) {
     return null;
   }
@@ -205,10 +328,16 @@ export const ZoomTurntableDock = props => {
       'ipc-player-plugin-zoom-turntable-dock-right': isRight
     }),
     style: turntableStyle
+  }, /*#__PURE__*/React.createElement(View, {
+    style: canvasHolderStyle
   }, /*#__PURE__*/React.createElement(ZoomTurntable, {
     key: `${isRight ? 'right' : 'bottom'}-${remountKey}`,
+    defaultValue: initialValue
+    // 受控回写：手势缩放画面时读数要跟着走。
+    // rjs 的 setValue 自带保护 —— 拖动中、以及松手后 300ms 冷却期内一律忽略回写，
+    // 所以不会出现「拖动被回写拽走」（那正是当初只传 defaultValue 的顾虑）。
+    ,
     value: curM,
-    defaultValue: curM,
     min: min,
     max: max,
     step: step,
@@ -219,10 +348,11 @@ export const ZoomTurntableDock = props => {
     orientation: isRight ? 'right' : 'bottom',
     cropRatio: isRight ? CROP_RATIO_RIGHT : CROP_RATIO_BOTTOM,
     activeColor: "#FFFFFF",
-    styleOptions: isRight ? STYLE_OPTIONS_RIGHT : STYLE_OPTIONS_BOTTOM,
+    styleOptions: styleOptions,
     onChange: handleChange,
     onChangeEnd: handleChangeEnd,
     onTouchStart: handleTouchStart,
-    onTouchEnd: handleTouchEnd
-  }));
+    onTouchEnd: handleTouchEnd,
+    onBlankTap: handleBlankTap
+  })));
 };