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

package/lib/ui/bottomLeftContent.js

@@ -27,6 +27,12 @@ const VERTICAL_PEEK_WIDTH = 34;
 // 平铺档内容与右下角按钮之间的最小安全间距
 const VERTICAL_FLAT_SAFE_GAP = 8;
 
+// 收紧态（.ipc-player-bottom-left-content-container-tight）下每项省下的宽度：
+// 竖屏 item 左右 padding 由 12px 收到 10px，中间项左右各省 2px；
+// 首项只省右侧 2px —— 左侧 16px 是内容起始留白，要和其余三个角落对齐，不能动。
+const TIGHT_SAVE_FIRST = 2;
+const TIGHT_SAVE_OTHER = 4;
+
 // 左下角子元素统一类名（由 ui.tsx 渲染时挂上），用于 selectAll 逐项测量
 const ITEM_CLASS = 'bottom-left-item-container';
 const BottomLeftContent = _ref => {
@@ -113,13 +119,16 @@ const BottomLeftContent = _ref => {
   // 这类变化 bottomLeftContent.length 捕获不到，由 widget 主动 emit。
   const [resizeSignal, setResizeSignal] = useState(0);
 
+  // 是否收紧 item 间距（窄屏专用，判定见下方 useEffect）。
+  // 只升不降：收紧后各项变窄 → 重测 → 可能又判成“放得下”→ 取消收紧 → 又放不下，
+  // 那就是一个自激振荡。锁存住，只在横竖屏切换时随其余测量值一起清零。
+  const [tightened, setTightened] = useState(false);
+
   // 滑动期间暂停整体的自动隐藏，滑动停止后再恢复（无原生 scrollend，用防抖判定结束）
   const scrollingRef = useRef(false);
   const scrollEndTimerRef = useRef();
   // 测量时需要叠加当前滚动量，用 ref 避免闭包拿到过期值
   const scrollLeftRef = useRef(0);
-  // 仅用于在可见项数变化时打一条日志，便于真机核对分档结果
-  const lastCountRef = useRef(-1);
   useEffect(() => {
     setScrollResetKey(k => k + 1);
     setScrollLeft(0);
@@ -130,6 +139,7 @@ const BottomLeftContent = _ref => {
     setContentWidth(0);
     setWrapWidth(0);
     setItemWidths([]);
+    setTightened(false);
   }, [screenType]);
 
   // 程序化滚动目标只在动画期间短暂受控，之后释放为非受控，避免回弹影响手动拖动
@@ -168,11 +178,13 @@ const BottomLeftContent = _ref => {
   // 避免估算失准把本来放得下的元素裁掉。
   const isFlat = isVertical && (measuredCount > 0 ? measuredCount <= VERTICAL_FLAT_MAX && contentFits : contentFits);
   const isCompact = isVertical && !isFlat && measuredCount > 0 && measuredCount <= VERTICAL_FLAT_MAX;
+  const isScrollMode = isVertical && !isFlat && !isCompact;
+
   // 前 4 项实际累计宽（元素按自身内容撑开，不做等分）
   const firstFourWidth = itemWidths.slice(0, VERTICAL_FLAT_MAX).reduce((sum, w) => sum + w, 0);
   // 滚动档可视宽 = 前 4 项宽 + 第 5 项的露出区（箭头就压在这段上）
   const verticalScrollWidth = (() => {
-    if (!(isVertical && !isFlat && !isCompact) || measuredCount === 0) return 0;
+    if (!isScrollMode || measuredCount === 0) return 0;
     const want = firstFourWidth + VERTICAL_PEEK_WIDTH;
     if (!(availableWidth > 0)) return want;
     // 前 4 项 + 露出区塞不下 —— 前 4 项里有宽 widget（焦距转盘的倍率胶囊、清晰度文案）时很常见。
@@ -180,7 +192,48 @@ const BottomLeftContent = _ref => {
     if (want > availableWidth) return 0;
     return want;
   })();
-  // 竖屏只有锁住宽度时箭头才有专属的露出区可压；否则箭头一定会盖到前 4 项上，索性不出
+  /**
+   * 收紧后前 4 项能省下多少（估算：按每项的 padding 差值累加）。
+   * 逐项宽是实测值，收紧后的真实宽度未必精确等于这个差值，作为“够不够”的预判足够。
+   */
+  const tightenSaving = (() => {
+    const n = Math.min(measuredCount, VERTICAL_FLAT_MAX);
+    if (n <= 0) return 0;
+    return TIGHT_SAVE_FIRST + TIGHT_SAVE_OTHER * (n - 1);
+  })();
+
+  /**
+   * 是否要把 item 间距从 12px 收到 10px。
+   *
+   * 两头都不收：
+   * - **本来就放得下**（宽屏）：不动，保持 12px 的宽松间距 —— 不为个别窄屏机型
+   *   让全量机型的图标挤在一起；
+   * - **收紧了也放不下**（更窄的屏 / 3 镜头的转盘胶囊）：白挤一遍换不回箭头的
+   *   专属落位区，不如保住观感，让箭头压在第 4 项右缘上（见下方 hasArrowRoom）。
+   *
+   * 只有“差一点、收紧刚好够”这一段才收 —— 这正是真机上遇到的那一档。
+   */
+  useEffect(() => {
+    if (tightened) return;
+    if (!isScrollMode || measuredCount === 0 || !(availableWidth > 0)) return;
+    const want = firstFourWidth + VERTICAL_PEEK_WIDTH;
+    if (want <= availableWidth) return;
+    if (want - tightenSaving > availableWidth) return;
+    setTightened(true);
+  }, [tightened, isScrollMode, measuredCount, availableWidth, firstFourWidth, tightenSaving]);
+
+  /**
+   * 竖屏 scroll 档一律出箭头。
+   *
+   * 曾要求「锁宽成功（verticalScrollWidth > 0）才出箭头」，理由是没锁宽时箭头会盖到前 4 项上。
+   * 真机上这条判断反而更糟：前 4 项里有宽 widget（焦距转盘胶囊 2 镜头约 100px、
+   * 3 镜头约 138px）时，`前 4 项 + 34` 很容易超过可用宽，于是箭头连同窄渐变一起消失 ——
+   * 右边还藏着两三个 widget，却没有任何可滑提示（6 个 widget、可用宽 256、内容宽 359 的实测 case）。
+   *
+   * 宁可让箭头压在第 4 项右缘那 26px 上：那块本来就落在淡出渐变里，
+   * 观感是「内容淡出 + 箭头」，正好是「右边还有」的暗示。
+   * 想既保住前 4 项完整、又给箭头留出专属位，在窄屏上物理上做不到。
+   */
 
   // 滚动末端的安全距离：滑到最右时最后一个元素与右边缘留更宽松的间距（横屏更宽）。
   // 只有真正锁宽滚动的那一档需要；平铺 / 紧凑 / 塞不下而没锁宽的情况，
@@ -230,10 +283,6 @@ const BottomLeftContent = _ref => {
         }
         if (Array.isArray(itemRects)) {
           const widths = itemRects.map(r => (r === null || r === void 0 ? void 0 : r.width) || 0).filter(w => w > 0);
-          if (widths.length !== lastCountRef.current) {
-            lastCountRef.current = widths.length;
-            console.log('[ipc-player] 左下角可见 widget 数 =', widths.length, widths);
-          }
           // 值没变时保持同一引用，避免轮询期间无谓重渲染
           setItemWidths(prev => prev.length === widths.length && prev.every((w, i) => w === widths[i]) ? prev : widths);
         }
@@ -271,7 +320,9 @@ const BottomLeftContent = _ref => {
   // reservedRight 决定 ScrollView 可视宽度（右下角内容异步加载后会从 0 变为实际宽度）
   reservedRight,
   // playState：视频就绪后 overlay 可能重新布局，需重新测量
-  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, wrapCls, scrollCls, contentCls, scrollResetKey, resizeSignal]);
+  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, wrapCls, scrollCls, contentCls, scrollResetKey, resizeSignal,
+  // 收紧后各项 padding 变小，必须重测一遍逐项宽，否则分档还在用收紧前的旧值
+  tightened]);
 
   // 子元素主动上报宽度变化 → 重跑测量，及时更新横滑箭头与右边缘淡出
   useEffect(() => {
@@ -337,19 +388,6 @@ const BottomLeftContent = _ref => {
     if (!(availableWidth > 0) || !(scrollViewWidth > 0)) return 4;
     return Math.max(availableWidth - scrollViewWidth + 4, 4);
   })();
-
-  // 真机核对分档结果用，确认无误后可摘掉
-  useEffect(() => {
-    if (!isVertical) return;
-    console.log('[ipc-player] 左下角分档', {
-      个数: measuredCount,
-      档位: isFlat ? 'flat 平铺' : isCompact ? 'compact 紧凑' : 'scroll 滚动',
-      可用宽: availableWidth,
-      内容宽: naturalWidth,
-      可视宽: verticalScrollWidth || availableWidth,
-      逐项宽: itemWidths
-    });
-  }, [isVertical, measuredCount, isFlat, isCompact, availableWidth, naturalWidth, verticalScrollWidth, itemWidths]);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-left-content-wrap', wrapCls),
     style: {
@@ -408,8 +446,11 @@ const BottomLeftContent = _ref => {
     },
     className: clsx(scrollCls, {
       'ipc-player-bottom-left-scroll-fademask': fadeRightEdge,
-      // 锁宽档可视区只有“前 4 项 + 一角”，渐变区要跟着收窄，否则会把第 4 项也淡掉一大半
-      'ipc-player-bottom-left-scroll-fademask--narrow': fadeRightEdge && verticalScrollWidth > 0
+      // 竖屏 scroll 档一律用窄渐变（34px，只覆盖箭头那块）。
+      // 原条件是「锁宽成功」，可没锁宽时可视区右缘同样压着第 4 项，
+      // 72px 的宽渐变会把宽 widget（转盘胶囊约 100px）淡掉一大半。
+      // 横屏 isScrollMode 恒为 false，仍走 72px 宽渐变，行为不变。
+      'ipc-player-bottom-left-scroll-fademask--narrow': fadeRightEdge && isScrollMode
     }),
     style: {
       paddingBottom: `${paddingBottomPx}px`,
@@ -421,7 +462,9 @@ const BottomLeftContent = _ref => {
       whiteSpace: 'nowrap'
     }
   }, /*#__PURE__*/React.createElement(View, {
-    className: clsx('ipc-player-bottom-left-content-container', contentCls),
+    className: clsx('ipc-player-bottom-left-content-container', contentCls, {
+      'ipc-player-bottom-left-content-container-tight': tightened
+    }),
     style: {
       display: 'inline-flex',
       flexDirection: 'row',
@@ -436,7 +479,7 @@ const BottomLeftContent = _ref => {
       height: '1px',
       flexShrink: 0
     }
-  }))), isOverflow && !atEnd && !isCompact && (!isVertical || verticalScrollWidth > 0) && (isButtonHint || !isDismissed) && /*#__PURE__*/React.createElement(CoverView, {
+  }))), isOverflow && !atEnd && !isCompact && (!isVertical || isScrollMode) && (isButtonHint || !isDismissed) && /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-left-scroll-hint', {
       'ipc-player-bottom-left-scroll-hint--button': isButtonHint
     }),

package/lib/ui/bottomRightContent.js

@@ -69,7 +69,9 @@ const BottomRightContent = _ref => {
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-right-content-wrap', wrapCls),
     style: _objectSpread({
-      paddingLeft: screenType === 'vertical' ? '10px' : '0',
+      // 竖屏归 0：这 10px 是纯空白，且计入实测宽后又被 reservedRight 带给左下角，
+      // 等于左下角白让 10px。与右下角按钮的间距统一由 BOTTOM_RIGHT_SAFE_GAP 负责。
+      paddingLeft: '0',
       height: screenType === 'vertical' ? shouldHide ? '49px' : '48px' : shouldHide ? '59px' : '58px'
     }, widthStyle)
   }, /*#__PURE__*/React.createElement(View, {

package/lib/ui/ui.js

@@ -59,7 +59,10 @@ const SET_SCALE_ALIGN_TIMEOUT = 1500;
 const SCALE_MATCH_EPS = 0.01;
 
 /** 竖屏左下角内容与右下角按钮之间的安全间距（px） */
-const BOTTOM_RIGHT_SAFE_GAP = 12;
+// 左下角内容右缘与右下角按钮之间的安全间距。
+// 原为 12px：右下角 wrap 当时还带 10px paddingLeft，两段叠起来是 22px 空白，窄屏上太奢侈。
+// paddingLeft 已归 0，这里收到 4px —— 右下角按钮自身还有 16px 的右留白撑着，不会显挤。
+const BOTTOM_RIGHT_SAFE_GAP = 4;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const {
     className,
@@ -803,13 +806,17 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     if (screenType === 'full') {
       return bottomRightWidth;
     }
+    // 安卓上 CoverView 的 boundingClientRect 可能一直测不出宽度，轮询跑完仍是 0
+    if (!(bottomRightMeasuredWidth > 0)) {
+      return bottomRightWidth;
+    }
     // 封顶保护：个别宿主里不设宽度的 CoverView 可能撑满整行，实测值会异常放大，
     // 那样左下角会被挤没。超过屏宽一半就当测量不可信，退回常量估算。
     const maxReserved = windowWidthRef.current ? windowWidthRef.current / 2 : 0;
-    if (bottomRightMeasuredWidth > 0 && (!maxReserved || bottomRightMeasuredWidth <= maxReserved)) {
-      return Math.ceil(bottomRightMeasuredWidth) + BOTTOM_RIGHT_SAFE_GAP;
+    if (maxReserved && bottomRightMeasuredWidth > maxReserved) {
+      return bottomRightWidth;
     }
-    return bottomRightWidth;
+    return Math.ceil(bottomRightMeasuredWidth) + BOTTOM_RIGHT_SAFE_GAP;
   }, [screenType, bottomRightWidth, bottomRightMeasuredWidth]);
 
   /**

package/lib/ui/ui.less

@@ -311,7 +311,7 @@
     padding: 0 16px 0 0;
   }
 
-  // 左下角子元素容器
+  // 左下角子元素容器（竖屏；横屏另叠 .bottom-left-item-full-container 且带 !important）
   .bottom-left-item-container {
     padding: 0 12px;
     display: flex;
@@ -334,6 +334,30 @@
     padding: 0 0 0 16px;
   }
 
+  // 收紧态：左右各 10px（默认 12px）。
+  //
+  // 只有窄屏上「前 4 项 + 34 露出区」放不下、且收紧后刚好放得下时才挂这个类
+  // （判定见 bottomLeftContent.tsx 的 tightened）。宽屏本来就放得下，
+  // 保持 12px 的宽松间距，不为个别机型让全量机型变紧。
+  //
+  // 中间项左右各省 2px = 4px；首项只省右侧 2px —— 左侧 16px 是内容起始留白，
+  // 要和其余三个角落对齐，不能动。10px 是不显挤的下限。
+  //
+  // 横屏叠的 .bottom-left-item-full-container 带 !important，优先级更高，不受影响。
+  .ipc-player-bottom-left-content-container-tight {
+    .bottom-left-item-container {
+      padding: 0 10px;
+    }
+
+    .bottom-left-item-container:first-of-type {
+      padding: 0 10px 0 16px;
+    }
+
+    .bottom-left-item-container:last-of-type {
+      padding: 0 0 0 10px;
+    }
+  }
+
   // 左下角全屏子元素容器
   .bottom-left-item-full-container {
     padding: 0 16px !important;

package/package.json

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