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

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, ZOOM_CANVAS_OVERSHOOT_BOTTOM, STYLE_OPTIONS_BOTTOM, STYLE_OPTIONS_RIGHT, VIBRATE_THROTTLE, zoomTurntableClose } from './constants';
 import './zoomTurntableDock.less';
 /**
  * 当前页面 id，ty.nativeDisabled 需要它定位要禁用手势分发的页面。
@@ -40,6 +40,7 @@ const getPageId = () => {
  * 定位与层级由承载的 CoverView 通过 absolutePosition 提供。
  */
 export const ZoomTurntableDock = props => {
+  var _initialValueRef$curr;
   const {
     event,
     className
@@ -73,6 +74,27 @@ export const ZoomTurntableDock = props => {
   /** 上次震动时间与上次震动对应的倍率，用于节流与跨刻度判定 */
   const lastVibrateAtRef = useRef(0);
   const lastVibrateValueRef = useRef(curM);
+
+  /**
+   * 转盘起始值：只在打开转盘 / 重建画布时取一次，之后不再跟随 curM 回写。
+   *
+   * curM 会因为切镜头收尾、画面回读而变，受控回写会在拖动中把指针拽走 ——
+   * 转盘自己维护值、只在落位时把结果下发出去，手感才连续。
+   *
+   * 取值时机要等镜头能力就绪：能力没就绪时 curM 只是 D_MIN 占位，
+   * 拿它当起点会让转盘停在错误刻度（非受控之后没有回写能纠正了）。
+   */
+  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);
   });
@@ -111,6 +133,41 @@ export const ZoomTurntableDock = props => {
     };
   }, []);
 
+  // 诊断：把浮层与 canvas 的真实布局打出来，核对可拖区域到底覆盖到哪。
+  // 期望（竖屏 HIT_PADDING_Y=56）：dock 高 296、canvas 高 288，canvas 顶距 dock 顶约 8px。
+  // 若 canvas 实际高度远小于 288，说明 rjs 的 canvasWidth/Height 没随 styleOptions 更新，
+  // 上半部分自然收不到 touch，会直接落到播放器上。
+  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.selectViewport().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 viewport = res === null || res === void 0 ? void 0 : res[2];
+        console.log('[zoomTurntable] 浮层布局诊断', JSON.stringify({
+          dock: dock && {
+            top: dock.top,
+            left: dock.left,
+            w: dock.width,
+            h: dock.height
+          },
+          canvas: canvas && {
+            top: canvas.top,
+            left: canvas.left,
+            w: canvas.width,
+            h: canvas.height
+          },
+          canvas顶距dock顶: dock && canvas ? canvas.top - dock.top : null,
+          viewportH: viewport === null || viewport === void 0 ? void 0 : viewport.height
+        }));
+      });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [remountKey]);
+
   // 点击播放器 → 收起转盘。
   // ui.tsx 的 handPlayerTap 会在此时把其余控件重新显示出来（componentHideState → false）
   // 并 emit(playerTap)，所以这里只需负责关掉转盘。
@@ -193,6 +250,20 @@ export const ZoomTurntableDock = props => {
     alignItems: 'center',
     justifyContent: 'flex-end'
   }), [isRight]);
+
+  /**
+   * canvas 的承载层。竖屏用负 margin 让 canvas 底边探出播放器底边，
+   * 浮层本身则贴底不下沉 —— 这样 canvas 顶部（刻度线那一带）才不会被 CoverView 裁掉，
+   * 而绘制内容的视觉位置与探出效果都和原来一致。
+   */
+  const canvasHolderStyle = useMemo(() => isRight ? {
+    display: 'flex',
+    justifyContent: 'center'
+  } : {
+    display: 'flex',
+    justifyContent: 'center',
+    marginBottom: `-${ZOOM_CANVAS_OVERSHOOT_BOTTOM}px`
+  }, [isRight]);
   if (!multiLensReady || playState !== PlayState.PLAYING) {
     return null;
   }
@@ -205,10 +276,11 @@ 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}`,
-    value: curM,
-    defaultValue: curM,
+    defaultValue: initialValue,
     min: min,
     max: max,
     step: step,
@@ -224,5 +296,5 @@ export const ZoomTurntableDock = props => {
     onChangeEnd: handleChangeEnd,
     onTouchStart: handleTouchStart,
     onTouchEnd: handleTouchEnd
-  }));
+  })));
 };

package/lib/widgets/zoomTurntable/zoomTurntableEntry.js

@@ -49,9 +49,16 @@ export const ZoomTurntableEntry = props => {
     multiLensReady,
     lenses,
     lensIndex,
+    switchingIndex,
     curM,
     switchToLens
   } = useLensZoom(props);
+
+  // 切换真空期（下发成功 ~ channelChange / 超时收尾）里镜头下标还没动，
+  // 高亮提前落到目标镜头，且各 tab 一律显示自己的光学倍数：
+  // 否则原镜头的 tab 上会先冒出目标镜头的读数，收尾后再跳回去。
+  const isLensSwitching = switchingIndex >= 0;
+  const activeIndex = isLensSwitching ? switchingIndex : lensIndex;
   const [dockVisible, setDockVisible] = useState(false);
   const timerRef = useRef();
   const startRef = useRef();
@@ -61,6 +68,9 @@ export const ZoomTurntableEntry = props => {
   const cancelledRef = useRef(false);
   const dockVisibleRef = useRef(false);
   const tipCheckedRef = useRef(false);
+  /** onTouchEnd 是稳定引用，用 ref 取最新的高亮下标 */
+  const activeIndexRef = useRef(activeIndex);
+  activeIndexRef.current = activeIndex;
   const clearTimer = () => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
@@ -211,13 +221,17 @@ export const ZoomTurntableEntry = props => {
     clearTimer();
     // firedRef：长按已出转盘，不再当作点击处理
     if (!firedRef.current && !cancelledRef.current) {
-      if (index !== lensIndex) {
+      // 与 activeIndex 比：正在切往的那个 tab 再点一次不该重复下发
+      if (index !== activeIndexRef.current) {
         event.emit(widgetClick, {
           widgetId: widgetLabs.ZOOM_TURNTABLE
         });
         switchToLens(index);
       }
-      event.emit(startTimeToHideAllComponent);
+      // 点过 tab 之后不重启自动隐藏倒计时（onTouchStart 已 pause，这里保持暂停）：
+      // 切镜头真正生效要等 channelChange / 超时收尾，5s 倒计时会在切换过程中把工具条藏掉，
+      // 用户看不到读数落位。收起交给用户点播放器（ui.tsx handPlayerTap 直接置隐藏，
+      // 不依赖倒计时，暂停状态下照常生效）。
     }
   });
   if (playState !== PlayState.PLAYING || !multiLensReady) {
@@ -230,9 +244,10 @@ export const ZoomTurntableEntry = props => {
       'ipc-player-plugin-zoom-turntable-tabs-full': screenType === 'full'
     })
   }, lenses.map((lens, index) => {
-    const active = index === lensIndex;
-    // 当前镜头实时显示画面绝对倍率（手势放大时 1.0X → 2.5X），其余显示各自光学倍数
-    const text = `${(active ? curM : lens.basicRatio).toFixed(1)}X`;
+    const active = index === activeIndex;
+    // 当前镜头实时显示画面绝对倍率（手势放大时 1.0X → 2.5X），其余显示各自光学倍数；
+    // 切换进行中则一律显示光学倍数 —— 此时 curM 已指向目标值，挂谁身上都是跳变
+    const text = `${(active && !isLensSwitching ? curM : lens.basicRatio).toFixed(1)}X`;
     return /*#__PURE__*/React.createElement(View, {
       key: lens.id,
       className: clsx('ipc-player-plugin-zoom-turntable-tab', {

package/lib/widgets/zoomTurntable/zoomTurntableEntry.less

@@ -27,18 +27,28 @@
   align-items: center;
   padding: calc(4px * var(--ipc-player-size-scale, 1)) calc(5px * var(--ipc-player-size-scale, 1));
   background-color: rgba(255, 255, 255, 0.3);
+  // 读数每帧都在变（4.1X → 4.8X），比例字体下 1 比 8 窄，胶囊宽度会跟着抖，
+  // 还会连带触发左下角工具条的重测。min-width 撑住 "N.NX" 的最宽排布，
+  // 加上 box-sizing 让 padding 计入，宽度就不再随数字变化。
+  // 超过 4 字符（10.0X）时自然撑开，那是跨十倍才发生一次的变化。
+  box-sizing: border-box;
+  min-width: calc(38px * var(--ipc-player-size-scale, 1));
 
   .ipc-player-plugin-zoom-turntable-tab-text {
     color: var(--iconColor);
     font-weight: 600;
     font-size: calc(12px * var(--ipc-player-size-scale, 1));
+    // 等宽数字：让 0-9 占同样的字身宽，从根上消掉逐帧抖动（渲染层支持时生效）
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'tnum';
   }
 }
 
-// 横屏：左右 padding 放宽，同 RealTimeMagnification 的 full 态
+// 横屏：左右 padding 放宽，同 RealTimeMagnification 的 full 态；min-width 同步加宽
 .ipc-player-plugin-zoom-turntable-tab-full {
   padding-left: calc(8px * var(--ipc-player-size-scale, 1));
   padding-right: calc(8px * var(--ipc-player-size-scale, 1));
+  min-width: calc(44px * var(--ipc-player-size-scale, 1));
 }
 
 // 选中态：白底黑字（须在基础态之后定义，同优先级下后者生效）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.50-beta.1",
+  "version": "0.0.50-beta.2",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -48,7 +48,7 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.7.61",
-    "@ray-js/ray": "1.7.83-beta.0",
+    "@ray-js/ray": "^1.7.83",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
     "ahooks": "^3.8.4",