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

package/lib/ui/bottomLeftContent.js

@@ -1,6 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.every.js";
+import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.iterator.reduce.js";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { CoverView, ScrollView, View } from '@ray-js/ray';
 import clsx from 'clsx';
@@ -12,8 +16,19 @@ import { bottomLeftContentResize, pauseTimeToHideAllComponent, startTimeToHideAl
 // 用唯一 className 在 createSelectorQuery 中区分多个实例，避免互相干扰
 let scrollClsSeq = 0;
 
-// 竖屏下单个 widget 的占位宽度：icon 22px(--iconPlayerSize) + .bottom-left-item-container 左右各 12px
-const VERTICAL_WIDGET_WIDTH = 46;
+// 竖屏最多平铺展示的 widget 数：<= 4 个全部平铺，> 4 个从第 5 个开始横滑
+const VERTICAL_FLAT_MAX = 4;
+
+// 竖屏滚动档：可视区在前 4 项之外多留出的露出区宽度。
+// 这段同时也是箭头的落位区 —— 箭头贴着内容压在第 5 项露出的一角上（和改动前的观感一致），
+// 因此至少要放得下箭头本体 26 + 左右各 4 的间隙。
+const VERTICAL_PEEK_WIDTH = 34;
+
+// 平铺档内容与右下角按钮之间的最小安全间距
+const VERTICAL_FLAT_SAFE_GAP = 8;
+
+// 左下角子元素统一类名（由 ui.tsx 渲染时挂上），用于 selectAll 逐项测量
+const ITEM_CLASS = 'bottom-left-item-container';
 const BottomLeftContent = _ref => {
   let {
     ctx,
@@ -67,6 +82,9 @@ const BottomLeftContent = _ref => {
 
   // 横向滚动状态：内容溢出且未滑到对应边缘时，显示左 / 右箭头提示
   const idRef = useRef(++scrollClsSeq);
+  // wrap 是左下角的可用区（left:0 ~ right:reservedRight），宽度不随 ScrollView 收窄而变，
+  // 因此用它、而不是 ScrollView 自身，作为“能摆多宽”的基准，避免收窄与分档互相依赖
+  const wrapCls = `ipc-bl-wrap-${idRef.current}`;
   const scrollCls = `ipc-bl-scroll-${idRef.current}`;
   const contentCls = `ipc-bl-scroll-content-${idRef.current}`;
   // 内容末尾哨兵节点：用它的真实横坐标反推子项总宽，避免内容容器被撑满导致测不出溢出
@@ -74,6 +92,12 @@ const BottomLeftContent = _ref => {
   const [scrollLeft, setScrollLeft] = useState(0);
   const [clientWidth, setClientWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
+  // 左下角可用区宽度（wrap 的实测宽）
+  const [wrapWidth, setWrapWidth] = useState(0);
+  // 真实渲染出来的每个 widget 的宽度：长度即真实可见个数。
+  // 不能用 bottomLeftContent 的配置长度推算 —— 组件一直在列表里，只是内部按 dp /
+  // 异步能力 return null，长度不变。
+  const [itemWidths, setItemWidths] = useState([]);
   // 点击箭头时的受控滚动目标；仅在程序化滚动期间为数值，结束后置回 undefined，
   // 避免持续受控导致用户手动拖动被回弹
   const [scrollTo, setScrollTo] = useState(undefined);
@@ -94,6 +118,8 @@ const BottomLeftContent = _ref => {
   const scrollEndTimerRef = useRef();
   // 测量时需要叠加当前滚动量，用 ref 避免闭包拿到过期值
   const scrollLeftRef = useRef(0);
+  // 仅用于在可见项数变化时打一条日志，便于真机核对分档结果
+  const lastCountRef = useRef(-1);
   useEffect(() => {
     setScrollResetKey(k => k + 1);
     setScrollLeft(0);
@@ -102,6 +128,8 @@ const BottomLeftContent = _ref => {
     // 清零上一屏的测量值，避免用旧 clientWidth/contentWidth 在重新测量前误判溢出导致箭头闪现
     setClientWidth(0);
     setContentWidth(0);
+    setWrapWidth(0);
+    setItemWidths([]);
   }, [screenType]);
 
   // 程序化滚动目标只在动画期间短暂受控，之后释放为非受控，避免回弹影响手动拖动
@@ -112,13 +140,52 @@ const BottomLeftContent = _ref => {
     const t = setTimeout(() => setScrollTo(undefined), 600);
     return () => clearTimeout(t);
   }, [scrollTo]);
+  const isVertical = screenType === 'vertical';
   const paddingLeftPx = 0;
   // 左侧留白必须挂内容容器：ScrollView 的 host 不是滚动器，host 上的 padding 内容滚不进去，
   // 最左 icon 贴不到屏幕边缘
-  const contentPaddingLeftPx = screenType === 'vertical' ? 0 : 25;
-  // 滚动末端的安全距离：滑到最右时最后一个元素与右边缘留更宽松的间距（横屏更宽）
-  const paddingRightPx = screenType === 'vertical' ? 22 : 32;
-  const paddingBottomPx = screenType === 'vertical' ? 0 : 25;
+  const contentPaddingLeftPx = isVertical ? 0 : 25;
+  const paddingBottomPx = isVertical ? 0 : 25;
+
+  // ---- 竖屏分档：<= 4 个平铺，> 4 个锁在前 4 项并从第 5 项起横滑 ----
+  // 分档依据是“真实渲染了几个”，不是像素比对，因此不会再出现少量元素被误折叠。
+  const measuredCount = itemWidths.length;
+  const measuredItemsWidth = itemWidths.reduce((sum, w) => sum + w, 0);
+  // 可用宽以 wrap 为准；wrap 还没测出来时退回 ScrollView 自身宽度
+  const availableWidth = wrapWidth || clientWidth;
+  // 自然排布（不收窄）时内容需要的总宽。
+  // 逐项宽度不含内容容器的左留白，要补上 contentPaddingLeftPx 才和哨兵反推的口径一致（横屏 25px）
+  const naturalWidth = measuredItemsWidth > 0 ? measuredItemsWidth + contentPaddingLeftPx : contentWidth;
+  // “放得下”这层保险：小屏 + 宽 widget（清晰度文案 / 试用胶囊）会让 4 个也摆不下，
+  // 这种情况一样走滚动，避免平铺后压到右下角按钮
+  const contentFits = !(availableWidth > 0) || !(naturalWidth > 0) || naturalWidth + VERTICAL_FLAT_SAFE_GAP <= availableWidth;
+  // 竖屏三档：
+  //   flat    —— 个数 <= 4 且放得下：全部平铺，不滚动、无箭头、无淡出
+  //   compact —— 个数 <= 4 但放不下（小屏 / 宽 widget）：用满可用宽，允许轻微横滑，
+  //              但不出箭头，尽量把这 4 个展示全
+  //   scroll  —— 个数 > 4：可视区锁在“前 4 项 + 露出区”，箭头压在露出区上
+  // 个数测不出来时（原生层不支持 selectAll）退回“纯按内容溢出滚动”，不锁宽，
+  // 避免估算失准把本来放得下的元素裁掉。
+  const isFlat = isVertical && (measuredCount > 0 ? measuredCount <= VERTICAL_FLAT_MAX && contentFits : contentFits);
+  const isCompact = isVertical && !isFlat && measuredCount > 0 && measuredCount <= VERTICAL_FLAT_MAX;
+  // 前 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;
+    const want = firstFourWidth + VERTICAL_PEEK_WIDTH;
+    if (!(availableWidth > 0)) return want;
+    // 前 4 项 + 露出区塞不下 —— 前 4 项里有宽 widget（焦距转盘的倍率胶囊、清晰度文案）时很常见。
+    // 这时锁宽只会把第 4 项裁掉，改为用满可用宽，优先保证前 4 项完整
+    if (want > availableWidth) return 0;
+    return want;
+  })();
+  // 竖屏只有锁住宽度时箭头才有专属的露出区可压；否则箭头一定会盖到前 4 项上，索性不出
+
+  // 滚动末端的安全距离：滑到最右时最后一个元素与右边缘留更宽松的间距（横屏更宽）。
+  // 只有真正锁宽滚动的那一档需要；平铺 / 紧凑 / 塞不下而没锁宽的情况，
+  // 留这段只会白白挤占可视宽，置 0 全部让给元素。
+  const paddingRightPx = isVertical ? verticalScrollWidth > 0 ? 22 : 0 : 32;
   const showBadge = showSmartImageQuality && showTrialBadge && canOpenSettings && gRawData && !isLowPhone && buttonState === 1 && trialRemainingSec > 0;
 
   // 测量滚动容器可视宽度与内部内容宽度。
@@ -132,17 +199,44 @@ const BottomLeftContent = _ref => {
     let attempts = 0;
     const measure = () => {
       const query = ty.createSelectorQuery();
+      query.select(`.${wrapCls}`).boundingClientRect();
       query.select(`.${scrollCls}`).boundingClientRect();
       query.select(`.${contentCls}`).boundingClientRect();
       query.select(`.${endCls}`).boundingClientRect();
+      // 逐项测量：一次拿到“真实渲染了几个 widget”以及每个的实际宽度。
+      // 原生层若不支持 selectAll，这里不入队，后续按哨兵总宽兜底走老路径。
+      try {
+        query.selectAll(`.${contentCls} .${ITEM_CLASS}`).boundingClientRect();
+        // 后代选择器不被原生层支持时会返回空，再用全局类名兜一次（同屏单实例场景足够）
+        query.selectAll(`.${ITEM_CLASS}`).boundingClientRect();
+      } catch (e) {
+        // ignore: 宿主不支持 selectAll，下面按哨兵总宽走老路径
+      }
       query.exec(res => {
-        const scrollRect = res === null || res === void 0 ? void 0 : res[0];
-        const contentRect = res === null || res === void 0 ? void 0 : res[1];
-        const endRect = res === null || res === void 0 ? void 0 : res[2];
+        const wrapRect = res === null || res === void 0 ? void 0 : res[0];
+        const scrollRect = res === null || res === void 0 ? void 0 : res[1];
+        const contentRect = res === null || res === void 0 ? void 0 : res[2];
+        const endRect = res === null || res === void 0 ? void 0 : res[3];
+        const scopedItemRects = res === null || res === void 0 ? void 0 : res[4];
+        const globalItemRects = res === null || res === void 0 ? void 0 : res[5];
+        const itemRects = Array.isArray(scopedItemRects) && scopedItemRects.length ? scopedItemRects : globalItemRects;
+        const ww = (wrapRect === null || wrapRect === void 0 ? void 0 : wrapRect.width) || 0;
+        if (ww) {
+          setWrapWidth(ww);
+        }
         const cw = (scrollRect === null || scrollRect === void 0 ? void 0 : scrollRect.width) || 0;
         if (cw) {
           setClientWidth(cw);
         }
+        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);
+        }
 
         // 优先用末尾哨兵反推子项真实总宽：
         //   哨兵视口 x = 滚动容器左 + 左padding + 子项总宽 - 当前 scrollLeft
@@ -177,7 +271,7 @@ const BottomLeftContent = _ref => {
   // reservedRight 决定 ScrollView 可视宽度（右下角内容异步加载后会从 0 变为实际宽度）
   reservedRight,
   // playState：视频就绪后 overlay 可能重新布局，需重新测量
-  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, scrollCls, contentCls, scrollResetKey, resizeSignal]);
+  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, wrapCls, scrollCls, contentCls, scrollResetKey, resizeSignal]);
 
   // 子元素主动上报宽度变化 → 重跑测量，及时更新横滑箭头与右边缘淡出
   useEffect(() => {
@@ -203,15 +297,19 @@ const BottomLeftContent = _ref => {
     };
   }, [ctx.event]);
 
-  // ScrollView 的实际可滚动宽度 = 左右 padding + 子元素总宽
-  const totalContentWidth = contentWidth > 0 ? paddingLeftPx + contentWidth + paddingRightPx : 0;
-  const isOverflow = totalContentWidth > clientWidth + 1;
-  const atEnd = !isOverflow || scrollLeft + clientWidth >= totalContentWidth - 2;
+  // ScrollView 的实际可滚动宽度 = 左右 padding + 子元素总宽（逐项实测优先，哨兵总宽兜底）
+  const totalContentWidth = naturalWidth > 0 ? paddingLeftPx + naturalWidth + paddingRightPx : 0;
+  // 竖屏由“个数”决定是否溢出（平铺档恒不溢出）；横屏保持原来的像素比对
+  const isOverflow = isVertical ? !isFlat : totalContentWidth > clientWidth + 1;
+  const scrollViewWidth = verticalScrollWidth > 0 ? verticalScrollWidth : clientWidth;
+  const atEnd = !isOverflow || scrollLeft + scrollViewWidth >= totalContentWidth - 2;
   const isDismissed = dismissed[screenType];
   const isButtonHint = scrollHintMode === 'button';
-  // button 模式：溢出且未到末端即常显（不受 dismissed 影响）；pulse 模式：保留拖动后消失的旧逻辑
+  // button 模式：溢出且未到末端即常显（不受 dismissed 影响）；pulse 模式：保留拖动后消失的旧逻辑。
+  // compact 档（<= 4 个但摆不下）不出箭头：那点空间要留给元素本身，箭头只会遮更多
 
   // 右侧还有未滚到头的内容时，启用右边缘淡出，把没完全露出的元素渐隐隐藏（横竖屏都生效）
+  const fadeRightEdge = isOverflow && !atEnd;
 
   // 点击右箭头：直接滚动到最右端。
   // 给一个足够大的目标值，交由 ScrollView 自身夹取到真实最右端，避免测量误差导致滚不到底。
@@ -230,16 +328,30 @@ const BottomLeftContent = _ref => {
   const visibleRowHeight = containerHeight - paddingBottomPx;
   // button 模式用半透明圆做点击热区，比 pulse 提示大；下移半个差值以保持图标中心不变
   const hintSize = isButtonHint ? 26 : 16;
-  // 竖屏 button 模式给 ScrollView 右侧留一条较窄的“箭头槽”：只裁掉内容最右一小段，
-  // 箭头压住最后一个元素的少量边缘（不完全遮挡），整体更贴近内容
-  const arrowGutter = isButtonHint && screenType === 'vertical' ? 12 : 0;
-  // 竖屏再额外收窄一个 widget 的宽度，让可滑动区域整体左缩一格
-  const verticalShrink = screenType === 'vertical' ? VERTICAL_WIDGET_WIDTH : 0;
-  const scrollShrink = arrowGutter + verticalShrink;
-  // 箭头贴滚动可视区右边缘放置（竖屏 4px / 横屏 6px），随收窄量一起左移
-  const hintRight = (arrowGutter > 0 ? 4 : 6) + verticalShrink;
+  // 竖屏：箭头贴着可视区右缘、压在第 5 项露出的那一角上（改动前就是这个观感）。
+  //   箭头右缘距可视区右缘 4px  =>  right = 可用宽 - 可视宽 + 4
+  // 可视宽是“前 4 项 + 34 露出区”，箭头宽 26，因此箭头左缘落在第 4 项之后 4px，碰不到它。
+  // 横屏维持原来的 6px
+  const hintRight = (() => {
+    if (!isVertical) return 6;
+    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'),
+    className: clsx('ipc-player-bottom-left-content-wrap', wrapCls),
     style: {
       right: rightCss,
       height: showBadge ? `${coverHeight + 30}px` : `${coverHeight}px`,
@@ -295,13 +407,15 @@ const BottomLeftContent = _ref => {
       }
     },
     className: clsx(scrollCls, {
-      'ipc-player-bottom-left-scroll-fademask': isOverflow && !atEnd
+      'ipc-player-bottom-left-scroll-fademask': fadeRightEdge,
+      // 锁宽档可视区只有“前 4 项 + 一角”，渐变区要跟着收窄，否则会把第 4 项也淡掉一大半
+      'ipc-player-bottom-left-scroll-fademask--narrow': fadeRightEdge && verticalScrollWidth > 0
     }),
     style: {
       paddingBottom: `${paddingBottomPx}px`,
       paddingLeft: `${paddingLeftPx}px`,
       paddingRight: `${paddingRightPx}px`,
-      width: scrollShrink > 0 ? `calc(100% - ${scrollShrink}px)` : '100%',
+      width: verticalScrollWidth > 0 ? `${verticalScrollWidth}px` : '100%',
       height: `${containerHeight}px`,
       marginTop: showBadge ? '-2px' : 0,
       whiteSpace: 'nowrap'
@@ -322,7 +436,7 @@ const BottomLeftContent = _ref => {
       height: '1px',
       flexShrink: 0
     }
-  }))), isOverflow && !atEnd && (isButtonHint || !isDismissed) && /*#__PURE__*/React.createElement(CoverView, {
+  }))), isOverflow && !atEnd && !isCompact && (!isVertical || verticalScrollWidth > 0) && (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.d.ts

@@ -9,6 +9,11 @@ type Props = {
      * - string: 视为合法的 CSS width 值（例如 "35%" / "20vw"）
      */
     width?: number | string;
+    /**
+     * 右下角实际渲染宽度的上报回调（竖屏用）。
+     * 左下角据此决定自己能摆多宽 —— 右边挂几个功能都能自动让位，不再靠固定常量拍脑袋。
+     */
+    onWidthChange?: (width: number) => void;
 };
-declare const BottomRightContent: ({ ctx, children, width }: Props) => React.JSX.Element;
+declare const BottomRightContent: ({ ctx, children, width, onWidthChange }: Props) => React.JSX.Element;
 export default BottomRightContent;

package/lib/ui/bottomRightContent.js

@@ -1,22 +1,60 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { CoverView, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../ctx/store';
 import { useComponentHideState } from './hooks';
+
+// 用唯一 className 在 createSelectorQuery 中区分多个实例，避免互相干扰
+let rightClsSeq = 0;
 const BottomRightContent = _ref => {
   let {
     ctx,
     children,
-    width
+    width,
+    onWidthChange
   } = _ref;
   const {
-    screenType
+    screenType,
+    playState,
+    bottomRightContent
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState
+    playState: ctx.playState,
+    bottomRightContent: ctx.bottomRightContent
   });
   const [shouldHide] = useComponentHideState();
+  const idRef = useRef(++rightClsSeq);
+  const wrapCls = `ipc-br-wrap-${idRef.current}`;
+  const lastWidthRef = useRef(0);
+
+  // 实测自身宽度并上报。按钮是异步 / 按 dp 条件渲染的，宽度会在首测之后才长大，
+  // 因此和左下角一样在时间窗内轮询，值没变时不重复上报。
+  useEffect(() => {
+    let timer;
+    let attempts = 0;
+    const measure = () => {
+      const query = ty.createSelectorQuery();
+      query.select(`.${wrapCls}`).boundingClientRect();
+      query.exec(res => {
+        var _res$;
+        const w = (res === null || res === void 0 || (_res$ = res[0]) === null || _res$ === void 0 ? void 0 : _res$.width) || 0;
+        if (w > 0 && Math.abs(w - lastWidthRef.current) >= 1) {
+          lastWidthRef.current = w;
+          onWidthChange === null || onWidthChange === void 0 || onWidthChange(w);
+        }
+        attempts += 1;
+        if (attempts >= 15) {
+          return;
+        }
+        timer = setTimeout(measure, 400);
+      });
+    };
+    timer = setTimeout(measure, 60);
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [screenType, playState, bottomRightContent === null || bottomRightContent === void 0 ? void 0 : bottomRightContent.length, shouldHide, wrapCls, onWidthChange]);
   const containerHeight = screenType === 'vertical' ? 48 : 58;
 
   // 将 width 统一规范成 CSS 合法值。number → "${n}px"，string → 原样透传。
@@ -29,7 +67,7 @@ const BottomRightContent = _ref => {
     boxSizing: 'border-box'
   } : null;
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-bottom-right-content-wrap'),
+    className: clsx('ipc-player-bottom-right-content-wrap', wrapCls),
     style: _objectSpread({
       paddingLeft: screenType === 'vertical' ? '10px' : '0',
       height: screenType === 'vertical' ? shouldHide ? '49px' : '48px' : shouldHide ? '59px' : '58px'

package/lib/ui/ui.js

@@ -57,6 +57,9 @@ const SET_SCALE_ALIGN_TIMEOUT = 1500;
 
 /** 回读值与对齐值 / 目标值的比对容差 */
 const SCALE_MATCH_EPS = 0.01;
+
+/** 竖屏左下角内容与右下角按钮之间的安全间距（px） */
+const BOTTOM_RIGHT_SAFE_GAP = 12;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const {
     className,
@@ -761,7 +764,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [bottomRightContent, instance]);
 
   /**
-   * 右下角可见按钮数 → 右下角组件宽度（左下角同时用作右侧预留宽度）
+   * 右下角可见按钮数 → 右下角组件宽度的兜底估算值（实测拿不到时才用）
    * - 横屏: 固定 40%（用百分比，左下角自动按 100% - 40% = 60% 可视，溢出走横向滚动）
    * - 竖屏: 1 个按钮 115px / 2+ 个按钮 132px / 0 个按钮 0
    */
@@ -775,6 +778,43 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     return 132;
   }, [bottomRightContent, screenType]);
 
+  // 右下角实测宽度（竖屏）。按钮数量 / 是否渲染都是动态的，固定常量会白白吃掉左下角可用宽，
+  // 这里由 BottomRightContent 实测上报，右边挂几个功能左边就自动让多少位。
+  const [bottomRightMeasuredWidth, setBottomRightMeasuredWidth] = useState(0);
+  const handleBottomRightWidthChange = useMemoizedFn(w => {
+    setBottomRightMeasuredWidth(prev => Math.abs(prev - w) >= 1 ? w : prev);
+  });
+
+  // 屏幕宽只用于给实测值封顶，取一次即可
+  const windowWidthRef = useRef(0);
+  if (!windowWidthRef.current) {
+    var _getSystemInfoSync;
+    windowWidthRef.current = ((_getSystemInfoSync = getSystemInfoSync()) === null || _getSystemInfoSync === void 0 ? void 0 : _getSystemInfoSync.windowWidth) || 0;
+  }
+
+  /**
+   * 左下角右侧要预留的宽度：竖屏优先用实测值 + 安全间距，实测不到再退回常量估算；
+   * 横屏保持原来的 40% 不变。
+   */
+  const bottomRightReserved = useMemo(() => {
+    if (screenType === 'full') {
+      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;
+    }
+    return bottomRightWidth;
+  }, [screenType, bottomRightWidth, bottomRightMeasuredWidth]);
+
+  /**
+   * 传给右下角自身的 width：竖屏不再强制固定宽（否则测出来的永远是那个常量），
+   * 让它按内容自然收缩；横屏维持 40%。
+   */
+  const bottomRightStyleWidth = screenType === 'full' ? bottomRightWidth : undefined;
+
   /**
    * 视频流加载状态封装
    */
@@ -872,7 +912,20 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const onChangeIgnoreHideStopPreview = state => {
     setIgnoreStopOnHide(state);
   };
-  const onSetScaleMultiple = value => {
+  const onSetScaleMultiple = payload => {
+    // 载荷兼容两种形态：数字（一次性落地，走对齐流程）、
+    // { value, immediate }（转盘拖动中的连续下发，跳过对齐）
+    const value = typeof payload === 'number' ? payload : payload === null || payload === void 0 ? void 0 : payload.value;
+    const immediate = typeof payload === 'object' && !!(payload !== null && payload !== void 0 && payload.immediate);
+    if (!(value > 0)) return;
+
+    // 连续下发：属性每次都在变，播放器一定收得到，不需要中间态；
+    // 反而插一帧 actual 会让画面在拖动中抖一下。
+    if (immediate) {
+      applyScaleMultiple(value);
+      return;
+    }
+
     // 手势缩放只走 onZoomChange 回读、不写本 state，属性会停在旧值（甚至恰好等于目标值），
     // 直接设目标时「值没变化」，播放器收不到。
     // 故下发前先把属性对齐画面实际值 currentZoomLevel，再设目标值，保证属性确实变化一次。
@@ -1120,10 +1173,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     }
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance,
-    reservedRight: bottomRightWidth
+    reservedRight: bottomRightReserved
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
     ctx: instance,
-    width: bottomRightWidth
+    width: bottomRightStyleWidth,
+    onWidthChange: handleBottomRightWidthChange
   }, renderBottomRightContent))), (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
     return absoluteContent.map(item => {

package/lib/ui/ui.less

@@ -235,6 +235,23 @@
     );
   }
 
+  // 竖屏滚动档：可视区被收窄到“前 4 项 + 露一角”，渐变区同步收窄到只覆盖那一角，
+  // 否则 72px 的渐变会把第 4 项也淡掉一大半
+  .ipc-player-bottom-left-scroll-fademask--narrow {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - 34px),
+      rgba(0, 0, 0, 0.3) calc(100% - 14px),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - 34px),
+      rgba(0, 0, 0, 0.3) calc(100% - 14px),
+      transparent 100%
+    );
+  }
+
   @keyframes ipc-player-bottom-left-scroll-hint-pulse {
     0%,
     100% {

package/lib/widgets/battery/battery.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
+import { PowerMode } from '../../ports.output';
 import './battery.less';
 export const createBattery = _ref => {
   let {
@@ -19,8 +20,13 @@ export const createBattery = _ref => {
     });
     const {
       batteryValue,
-      batteryCharging
+      batteryCharging,
+      powerMode,
+      solarCharging
     } = useBattery(devId);
+
+    // powerMode 缺省时（外部注入的 useBattery 未透传）回退到 batteryCharging 判断
+    const isSolar = powerMode ? powerMode === PowerMode.Solar : !!solarCharging;
     const batteryColor = useMemo(() => {
       if (!batteryValue) return '#eb3223';
       if (batteryValue >= 60) {
@@ -38,7 +44,7 @@ export const createBattery = _ref => {
       className: clsx(className)
     }, /*#__PURE__*/React.createElement(View, {
       className: "ipc-player-plugin-battery"
-    }, batteryCharging ? /*#__PURE__*/React.createElement(View, {
+    }, !isSolar && batteryCharging ? /*#__PURE__*/React.createElement(View, {
       className: "icon-panel icon-panel-charging ipc-player-plugin-battery-charging"
     }) : /*#__PURE__*/React.createElement(View, {
       className: "ipc-player-plugin-battery-border"
@@ -52,7 +58,9 @@ export const createBattery = _ref => {
         backgroundColor: batteryColor
       },
       className: "ipc-player-plugin-battery-value-value"
-    }))), /*#__PURE__*/React.createElement(Text, {
+    })), isSolar && /*#__PURE__*/React.createElement(View, {
+      className: "icon-panel icon-panel-solar ipc-player-plugin-battery-solar"
+    })), /*#__PURE__*/React.createElement(Text, {
       className: "ipc-player-plugin-battery-text"
     }, batteryValue, "%")));
   });

package/lib/widgets/battery/battery.less

@@ -44,6 +44,17 @@
         border-radius: 1rpx;
       }
     }
+    /* 太阳能充电：叠在电池正中央，压在电量条之上 */
+    .ipc-player-plugin-battery-solar {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+      font-size: calc(8px * var(--ipc-player-size-scale, 1));
+      line-height: 1;
+      color: #fff;
+    }
   }
 }
 

package/lib/widgets/battery/batteryFull.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../../ctx/store';
+import { PowerMode } from '../../ports.output';
 import './battery.less';
 export const createBattery = _ref => {
   let {
@@ -19,8 +20,13 @@ export const createBattery = _ref => {
     });
     const {
       batteryValue,
-      batteryCharging
+      batteryCharging,
+      powerMode,
+      solarCharging
     } = useBattery(devId);
+
+    // powerMode 缺省时（外部注入的 useBattery 未透传）回退到 batteryCharging 判断
+    const isSolar = powerMode ? powerMode === PowerMode.Solar : !!solarCharging;
     const batteryColor = useMemo(() => {
       if (!batteryValue) return '#eb3223';
       if (batteryValue >= 60) {
@@ -38,7 +44,7 @@ export const createBattery = _ref => {
       className: clsx(className)
     }, /*#__PURE__*/React.createElement(View, {
       className: "ipc-player-plugin-battery"
-    }, batteryCharging ? /*#__PURE__*/React.createElement(View, {
+    }, !isSolar && batteryCharging ? /*#__PURE__*/React.createElement(View, {
       className: "icon-panel icon-panel-charging ipc-player-plugin-battery-charging"
     }) : /*#__PURE__*/React.createElement(View, {
       className: "ipc-player-plugin-battery-border"
@@ -52,7 +58,9 @@ export const createBattery = _ref => {
         backgroundColor: batteryColor
       },
       className: "ipc-player-plugin-battery-value-value"
-    }))), /*#__PURE__*/React.createElement(Text, {
+    })), isSolar && /*#__PURE__*/React.createElement(View, {
+      className: "icon-panel icon-panel-solar ipc-player-plugin-battery-solar"
+    })), /*#__PURE__*/React.createElement(Text, {
       className: "ipc-player-plugin-battery-text"
     }, batteryValue, "%")));
   });