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

package/lib/widgets/zoomTurntable/zoomTurntableEntry.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.map.js";
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { View, Text } from '@ray-js/ray';
+import { View, Text, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useMemoizedFn } from 'ahooks';
 import { useStore } from '../../ctx/store';
@@ -13,9 +13,9 @@ import { Storage } from '../../utils/storage';
 import { useLensZoom } from './useLensZoom';
 import { ZoomTurntableDock } from './zoomTurntableDock';
 import { ZoomTurntableTip } from './zoomTurntableTip';
-import { measureEntryVisible } from './measureVisible';
+import { measureBottomBarHeight, measureEntryVisible } from './measureVisible';
 import { ZOOM_ENTRY_ANCHOR_CLS } from './entryAnchor';
-import { LONG_PRESS_MS, MOVE_TOLERANCE, ZOOM_DOCK_BOTTOM, ZOOM_DOCK_HEIGHT, ZOOM_DOCK_RIGHT, ZOOM_DOCK_Z_INDEX, zoomTurntableClose, zoomTurntableDockId, zoomTurntableOpen, zoomTurntableTipId } from './constants';
+import { FORCE_SHOW_ZOOM_TIP, LONG_PRESS_MS, MOVE_TOLERANCE, TIP_RESHOW_DELAY, getZoomDockBottom, getZoomDockHeight, getZoomDockRight, ZOOM_DOCK_Z_INDEX, zoomTurntableClose, zoomTurntableDockId, zoomTurntableOpen, zoomTurntableTipId } from './constants';
 import './zoomTurntableEntry.less';
 /**
  * 焦距转盘入口：左下角工具条中的图标，长按弹出转盘。
@@ -39,12 +39,22 @@ export const ZoomTurntableEntry = props => {
   const {
     playState,
     screenType,
-    brandColor
+    isVerticalFullLayout
   } = useStore({
     playState: props.playState,
     screenType: props.screenType,
-    brandColor: props.brandColor
+    isVerticalFullLayout: props.isVerticalFullLayout
   });
+
+  /**
+   * 竖屏两种布局，转盘的落位与是否让路完全不同：
+   * - 竖屏全屏（isVerticalFullLayout）：底部工具条常驻在屏幕底部，转盘停在工具条**之上**，
+   *   工具条保持可见（能看到当前镜头、能直接点右下角那排按钮）；
+   * - 普通竖屏：播放器只是页面顶部的一块，长按 tab 时把底部元素藏掉，
+   *   转盘**贴播放器底边**显示。
+   * 两种方式下转盘都落在播放器的底部区域。
+   */
+  const isVerticalFull = screenType === 'vertical' && isVerticalFullLayout;
   const {
     multiLensReady,
     lenses,
@@ -82,22 +92,39 @@ export const ZoomTurntableEntry = props => {
     dockVisibleRef.current = false;
     setDockVisible(false);
     deleteContent('absolute', zoomTurntableDockId);
+    // 竖屏没藏过，这一发是幂等的（横屏才真正需要它恢复右侧控件）
     event.emit(showAllComponent);
     event.emit(startTimeToHideAllComponent);
   });
-  const openDock = useMemoizedFn(() => {
+  const openDock = useMemoizedFn(async () => {
     if (dockVisibleRef.current) {
       closeDock();
       return;
     }
+    /**
+     * 竖屏全屏要让出底部工具条，高度按**实测**取：ui.tsx 给它写的是 48px，
+     * 而 `-full` 变体在 less 里还叠了 `padding-bottom: env(safe-area-inset-bottom)`，
+     * 实际占位跟机型 safe-area 有关，硬编码必然对不上。
+     * 长按本身已经等了 500ms，这里再等一帧测量，体感无差别；测不到就退回 48。
+     */
+    const barHeight = isVerticalFull ? await measureBottomBarHeight() : null;
     event.emit(widgetClick, {
       widgetId: widgetLabs.ZOOM_TURNTABLE
     });
     // PTZ 与转盘都占底部 / 右侧，互斥
     event.emit('ptzControlHide');
-    // 其余元素隐藏并暂停自动隐藏倒计时。
-    // 不要 emit('disablePlayerTap', true)：点播放器收起转盘依赖 ui.tsx 正常派发 playerTap。
-    event.emit(hideAllComponent);
+    /**
+     * 只有竖屏全屏**不隐藏**其余元素：底部工具条常驻，转盘停在它上方 ——
+     * 这样能看到当前在哪个镜头，也能直接点右下角那排按钮，收起不必先点画面。
+     *
+     * 普通竖屏与横屏仍旧先藏：前者转盘要贴播放器底边、正压在工具条位置上，
+     * 后者转盘占右侧、与右侧控件正面重叠。
+     *
+     * 不要 emit('disablePlayerTap', true)：点播放器收起转盘依赖 ui.tsx 正常派发 playerTap。
+     */
+    if (!isVerticalFull) {
+      event.emit(hideAllComponent);
+    }
     event.emit(pauseTimeToHideAllComponent);
     if (!hasContent('absolute', zoomTurntableDockId)) {
       // 必须用 CoverView 承载（不能设 absoluteNoCoverView）：播放器是原生组件、层级更高，
@@ -107,14 +134,17 @@ export const ZoomTurntableEntry = props => {
         content: dockProps => /*#__PURE__*/React.createElement(ZoomTurntableDock, dockProps),
         absolutePosition: screenType === 'full' ? {
           top: 0,
-          right: ZOOM_DOCK_RIGHT,
+          right: getZoomDockRight(),
           bottom: 0,
           zIndex: ZOOM_DOCK_Z_INDEX
         } : {
           left: 0,
           right: 0,
-          bottom: ZOOM_DOCK_BOTTOM,
-          height: ZOOM_DOCK_HEIGHT,
+          // 一律是带单位的 px 字符串 —— 裸数字会被当 rpx，见 constants 里 px() 的说明。
+          // 竖屏全屏让出底部工具条（实测高度，避免与 ui.tsx 的写死值不同步）；
+          // 普通竖屏工具条已藏，直接下沉一份底部触摸余量贴住播放器底边。
+          bottom: getZoomDockBottom(isVerticalFull, barHeight),
+          height: getZoomDockHeight(isVerticalFull),
           zIndex: ZOOM_DOCK_Z_INDEX
         },
         initProps: _objectSpread(_objectSpread({}, props), {}, {
@@ -138,6 +168,17 @@ export const ZoomTurntableEntry = props => {
     };
   }, [event, closeDock]);
 
+  /**
+   * 横竖屏切换、竖屏布局切换（展开/收起竖屏全屏）时都先收起转盘。
+   *
+   * dock 的 absolutePosition 只在 addContent 那一刻定死，三套落位差别很大
+   * （横屏右侧 / 竖屏全屏的工具条之上 / 普通竖屏贴播放器底边），
+   * 不收起的话浮层会留在旧位置上 —— 横竖屏之间尤其明显，连朝向都不对。
+   */
+  useEffect(() => {
+    if (dockVisibleRef.current) closeDock();
+  }, [screenType, isVerticalFull, closeDock]);
+
   // 卸载 / 停流时兜底收起
   useEffect(() => {
     if (playState !== PlayState.PLAYING && dockVisibleRef.current) {
@@ -160,19 +201,58 @@ export const ZoomTurntableEntry = props => {
   }, [multiLensReady, lenses.length, event]);
 
   // ---------------- 圈选引导 ----------------
+
+  /**
+   * 把引导收起，并允许之后重新判定一次。
+   *
+   * 引导是挂在 absolute 槽位的浮层，停流 / 进入后台时它还留在最上层 ——
+   * 回到前台会先看见它盖在画面上，紧接着重新拉流把 playState 打断，它又消失，
+   * 观感就是「闪一下」。所以离开时主动收起，等重新出流稳定后再按可见性重新判定。
+   * 注意不写已读标记：用户还没点「知道了」，下次仍应提示。
+   */
+  const dismissTipForRestart = useMemoizedFn(() => {
+    if (!hasContent('absolute', zoomTurntableTipId)) return;
+    deleteContent('absolute', zoomTurntableTipId);
+    tipCheckedRef.current = false;
+  });
+
+  // 进入后台：先收起，避免回前台的第一帧就看到它压在重连画面上
+  usePageEvent('onHide', dismissTipForRestart);
+
+  // 停流 / 重连：同样先收起，等回到 PLAYING 再重新判定
+  useEffect(() => {
+    if (playState !== PlayState.PLAYING) {
+      dismissTipForRestart();
+    }
+  }, [playState, dismissTipForRestart]);
+
+  // 横竖屏切换：入口位置整个变了，旧引导的圈选坐标已失效，必须先收起再按新布局重测。
+  // 不收的话横屏、竖屏两套引导会同时留在屏幕上（absolute 槽位不会自动清理）。
+  useEffect(() => {
+    dismissTipForRestart();
+  }, [screenType, dismissTipForRestart]);
+
   // 入口在横向 ScrollView 内可能被裁掉，只有真正可见时才提示；能力异步就绪，故判定在 multiLensReady 之后
   useEffect(() => {
     if (disableTip || !multiLensReady || playState !== PlayState.PLAYING) return undefined;
     if (tipCheckedRef.current) return undefined;
     let cancelled = false;
     const storage = new Storage(devId);
-    (async () => {
+    // 刚出流时布局还在沉降（左下角元素陆续渲染、宽度还在长），等一小会儿再测再展示，
+    // 免得引导刚画好就因为入口位置变化而歪掉，也避免出流瞬间弹出来
+    const timer = setTimeout(async () => {
       // key 不存在时 getStorage 会 fail，这里不能让它把整条链路带崩
       const read = await storage.get(zoomTurntableTipId).catch(() => null);
-      if (cancelled || read) return;
+      if (cancelled) return;
+      // 调试开关打开时忽略已读记录，每次都展示
+      if (read && !FORCE_SHOW_ZOOM_TIP) return;
       const rect = await measureEntryVisible();
       if (cancelled || !rect) return;
       tipCheckedRef.current = true;
+      // ctx.addContent 不按 id 去重，重复添加会在屏幕上留下两份引导，这里先清一次
+      if (hasContent('absolute', zoomTurntableTipId)) {
+        deleteContent('absolute', zoomTurntableTipId);
+      }
       addContent('absolute', {
         id: zoomTurntableTipId,
         content: tipProps => /*#__PURE__*/React.createElement(ZoomTurntableTip, tipProps),
@@ -181,9 +261,10 @@ export const ZoomTurntableEntry = props => {
           anchorRect: rect
         })
       });
-    })();
+    }, TIP_RESHOW_DELAY);
     return () => {
       cancelled = true;
+      clearTimeout(timer);
     };
   }, [disableTip, multiLensReady, playState, screenType, devId]);
 
@@ -254,9 +335,6 @@ export const ZoomTurntableEntry = props => {
         'ipc-player-plugin-zoom-turntable-tab-full': screenType === 'full',
         'ipc-player-plugin-zoom-turntable-tab-active': active
       }),
-      style: active && dockVisible ? {
-        backgroundColor: brandColor
-      } : undefined,
       onTouchStart: onTouchStart,
       onTouchMove: onTouchMove,
       onTouchEnd: () => onTouchEnd(index),

package/lib/widgets/zoomTurntable/zoomTurntableTip.js

@@ -7,7 +7,7 @@ import { widgetClick, widgetLabs } from '../../ui/constant';
 import { Storage } from '../../utils/storage';
 import Strings from '../../i18n';
 import { measurePlayerRect } from './measureVisible';
-import { TIP_RING_SIZE, zoomTurntableTipId } from './constants';
+import { FORCE_SHOW_ZOOM_TIP, TIP_LINE_TOTAL, TIP_PANEL_EDGE_GAP, TIP_PANEL_LINE_GAP, TIP_PANEL_WIDTH, TIP_RING_PADDING, zoomTurntableTipId } from './constants';
 import './zoomTurntableTip.less';
 /**
  * 焦距入口圈选引导（一次性）。
@@ -26,51 +26,63 @@ export const ZoomTurntableTip = props => {
   } = useStore({
     playState: props.playState
   });
-  const [ringStyle, setRingStyle] = useState(null);
+  const [layout, setLayout] = useState(null);
 
-  // 把入口的视口坐标换算成播放器容器内坐标
+  // 把入口的视口坐标换算成播放器容器内坐标。
+  // 圈选框按入口实测 rect 自适应：入口是横向倍率胶囊，宽度随镜头数（2 个约 96px、
+  // 3 个约 132px）变化，用固定尺寸框不住。
   useEffect(() => {
     if (!anchorRect) return undefined;
     let cancelled = false;
     measurePlayerRect().then(player => {
       if (cancelled || !player) return;
-      const centerX = anchorRect.left - player.left + anchorRect.width / 2;
-      setRingStyle({
-        left: `${centerX - TIP_RING_SIZE / 2}px`,
-        bottom: `${player.bottom - anchorRect.bottom - (TIP_RING_SIZE - anchorRect.height) / 2}px`,
-        width: `${TIP_RING_SIZE}px`,
-        height: `${TIP_RING_SIZE}px`
+      const ringWidth = anchorRect.width + TIP_RING_PADDING * 2;
+      const ringHeight = anchorRect.height + TIP_RING_PADDING * 2;
+      const ringLeft = anchorRect.left - player.left - TIP_RING_PADDING;
+      const ringBottom = player.bottom - anchorRect.bottom - TIP_RING_PADDING;
+      // 文案面板以圈选中心对齐，但不越出播放器左右边缘
+      const maxLeft = Math.max(player.width - TIP_PANEL_WIDTH - TIP_PANEL_EDGE_GAP, TIP_PANEL_EDGE_GAP);
+      const panelLeft = Math.min(Math.max(ringLeft + ringWidth / 2 - TIP_PANEL_WIDTH / 2, TIP_PANEL_EDGE_GAP), maxLeft);
+      setLayout({
+        ring: {
+          left: `${ringLeft}px`,
+          bottom: `${ringBottom}px`,
+          width: `${ringWidth}px`,
+          height: `${ringHeight}px`
+        },
+        panel: {
+          left: `${panelLeft}px`,
+          bottom: `${ringBottom + ringHeight + TIP_LINE_TOTAL + TIP_PANEL_LINE_GAP}px`,
+          width: `${TIP_PANEL_WIDTH}px`
+        }
       });
     });
     return () => {
       cancelled = true;
     };
   }, [anchorRect]);
-  if (playState !== PlayState.PLAYING || !ringStyle) {
+  if (playState !== PlayState.PLAYING || !layout) {
     return null;
   }
   return /*#__PURE__*/React.createElement(CoverView, null, /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-zoom-turntable-tip-ring'),
-    style: ringStyle
-  }), /*#__PURE__*/React.createElement(Text, {
-    className: clsx('ipc-player-plugin-zoom-turntable-tip-text'),
-    style: {
-      left: ringStyle.left,
-      bottom: `calc(${ringStyle.bottom} + 116px)`
-    }
+    style: layout.ring
+  }), /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-zoom-turntable-tip-panel'),
+    style: layout.panel
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('ipc-player-plugin-zoom-turntable-tip-text')
   }, Strings.getLang('ipc_player_zoom_turntable_tip_text')), /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-plugin-zoom-turntable-tip-button'),
-    style: {
-      left: ringStyle.left,
-      bottom: `calc(${ringStyle.bottom} + 56px)`
-    },
     onClick: () => {
       props.event.emit(widgetClick, {
         widgetId: widgetLabs.ZOOM_TURNTABLE_TIP
       });
       deleteContent('absolute', zoomTurntableTipId);
+      // 调试开关打开时不落已读标记，免得自测一次就再也看不到
+      if (FORCE_SHOW_ZOOM_TIP) return;
       const storage = new Storage(devId);
       storage.set(zoomTurntableTipId, true);
     }
-  }, Strings.getLang('ipc_player_tip_confirm')));
+  }, Strings.getLang('ipc_player_tip_confirm'))));
 };

package/lib/widgets/zoomTurntable/zoomTurntableTip.less

@@ -10,10 +10,13 @@
   font-size: 14px;
   color: #fff;
 
+  // 圈选框：尺寸与位置按入口实测 rect 由 JS 内联注入。
+  // 入口是横向倍率胶囊，用圆角矩形贴合，不用正圆（正圆框不住宽度、上下还会超出）。
   .ipc-player-plugin-zoom-turntable-tip-ring {
     position: absolute;
+    box-sizing: border-box;
     border: 1px dashed rgba(255, 255, 255, 0.5);
-    border-radius: 50%;
+    border-radius: 12px;
     // 超大扩散阴影把全屏压暗，只露出被圈选的入口
     box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
 
@@ -23,13 +26,13 @@
       position: absolute;
       left: 50%;
       width: 1px;
-      height: 40px;
+      height: 17px;
       box-sizing: border-box;
       border-left: 1px dashed rgba(255, 255, 255, 0.5);
       transform: translateX(-50%) translateY(-100%);
     }
 
-    // 引线末端的小圆点
+    // 引线末端的小圆点：17 虚线 + 4 圆点
     &::before {
       content: '';
       position: absolute;
@@ -38,18 +41,31 @@
       height: 4px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.5);
-      transform: translateX(-50%) translateY(-44px);
+      transform: translateX(-50%) translateY(-21px);
     }
   }
 
-  .ipc-player-plugin-zoom-turntable-tip-text {
+  // 文案 + 按钮面板：整体定位一次并对齐圈选框中心，内部居中堆叠，
+  // 间距交给布局，不再靠魔法数各自偏移
+  .ipc-player-plugin-zoom-turntable-tip-panel {
     position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .ipc-player-plugin-zoom-turntable-tip-text {
     max-width: 200px;
+    line-height: 1.4;
+    text-align: center;
   }
 
   .ipc-player-plugin-zoom-turntable-tip-button {
-    position: absolute;
-    padding: 12px 32px;
+    margin-top: 12px;
+    // 比 multiCamera 的 tile-tip（12/32）收紧一圈：引导只是一句短提示，按钮不必那么重
+    padding: 7px 20px;
+    font-size: 12px;
+    line-height: 1.4;
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 250px;
   }

package/package.json

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