@ray-js/ipc-player-integration 0.0.35-beta.3 → 0.0.35-beta.31

package/lib/ctx/ctx.js

@@ -205,7 +205,6 @@ export const createUseCtx = _ref => {
           fail: err => {
             IPCPlayerInstance.current.isMuted({
               success(res) {
-                console.log('==== 当前静音状态 ====', res);
                 updateAtom(mute, res);
               }
             });

package/lib/features/initPlayerWidgets/index.js

@@ -24,7 +24,7 @@ export async function initPlayerWidgets(ctx, options) {
     var _options$hideSmartIma;
     // @ts-ignore
     newDefaultBottomLeftContent[tryExperienceIndex].initProps = {
-      hideTryExperienceMenu: (_options$hideSmartIma = options.hideSmartImageQualityState) !== null && _options$hideSmartIma !== void 0 ? _options$hideSmartIma : true
+      hideSmartImageQualityState: (_options$hideSmartIma = options.hideSmartImageQualityState) !== null && _options$hideSmartIma !== void 0 ? _options$hideSmartIma : true
     };
   }
   if (resolutionIndex !== -1) {
@@ -52,7 +52,6 @@ export async function initPlayerWidgets(ctx, options) {
       newDefaultBottomLeftContent[magnificationIndex].hidden = false;
     }
   }
-  console.log('res===1', newDefaultBottomLeftContent);
   ctx.addContent('bottomLeft', newDefaultBottomLeftContent);
   const newDefaultBottomRightContent = _cloneDeep(options.bottomRightContent || defaultBottomRightContent);
   const fullScreenIndex = newDefaultBottomRightContent.findIndex(item => item.id === 'FullScreen');

package/lib/i18n/index.d.ts

@@ -33,6 +33,7 @@ declare const Strings: kit.I18N<{
         ipc_player_trial_preview_text: string;
         ipc_player_trial_subscribe: string;
         ipc_player_fetch_error: string;
+        ipc_player_low_phone_not_support: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -67,6 +68,7 @@ declare const Strings: kit.I18N<{
         ipc_player_trial_preview_text: string;
         ipc_player_trial_subscribe: string;
         ipc_player_fetch_error: string;
+        ipc_player_low_phone_not_support: string;
     };
 }, {
     ipc_player_resolution_HD: string;
@@ -101,6 +103,7 @@ declare const Strings: kit.I18N<{
     ipc_player_trial_preview_text: string;
     ipc_player_trial_subscribe: string;
     ipc_player_fetch_error: string;
+    ipc_player_low_phone_not_support: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
@@ -134,5 +137,6 @@ declare const Strings: kit.I18N<{
     ipc_player_trial_preview_text: string;
     ipc_player_trial_subscribe: string;
     ipc_player_fetch_error: string;
+    ipc_player_low_phone_not_support: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -32,6 +32,7 @@ declare const _default: {
         ipc_player_trial_preview_text: string;
         ipc_player_trial_subscribe: string;
         ipc_player_fetch_error: string;
+        ipc_player_low_phone_not_support: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -66,6 +67,7 @@ declare const _default: {
         ipc_player_trial_preview_text: string;
         ipc_player_trial_subscribe: string;
         ipc_player_fetch_error: string;
+        ipc_player_low_phone_not_support: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -31,7 +31,8 @@ export default {
     ipc_player_trial_in_use: 'Trial',
     ipc_player_trial_preview_text: 'End',
     ipc_player_trial_subscribe: 'Open',
-    ipc_player_fetch_error: 'Failed to fetch data'
+    ipc_player_fetch_error: 'Failed to fetch data',
+    ipc_player_low_phone_not_support: 'This feature is not supported on this device'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
@@ -65,6 +66,7 @@ export default {
     ipc_player_trial_in_use: '试用中',
     ipc_player_trial_preview_text: '后结束',
     ipc_player_trial_subscribe: '开通',
-    ipc_player_fetch_error: '获取异常'
+    ipc_player_fetch_error: '获取异常',
+    ipc_player_low_phone_not_support: '当前设备不支持此功能'
   }
 };

package/lib/ui/bottomLeftContent.d.ts

@@ -3,8 +3,19 @@ import { UseCtx } from '../interface';
 type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
-    /** 右下角组件占据的宽度（px），左下角通过该值约束自身可视宽度，避免与右下角重叠 */
-    reservedRight?: number;
+    /**
+     * 右下角组件占据的宽度，左下角通过该值约束自身可视宽度避免与右下角重叠。
+     * - number: 视为 px
+     * - string: 视为合法的 CSS 长度（例如 "35%"），用于横屏按百分比预留
+     */
+    reservedRight?: number | string;
+    canOpenSettings?: boolean;
+    /**
+     * 横滑提示箭头的交互模式：
+     * - 'button': 白色小圆底 + 黑色箭头，溢出后常显、可点击滑动（不随拖动消失）
+     * - 'pulse' : 旧版渐隐渐显提示箭头，拖动一次后当前屏幕模式不再展示
+     */
+    scrollHintMode?: 'button' | 'pulse';
 };
-declare const BottomLeftContent: ({ ctx, children, reservedRight }: Props) => React.JSX.Element;
+declare const BottomLeftContent: ({ ctx, children, reservedRight, canOpenSettings, scrollHintMode, }: Props) => React.JSX.Element;
 export default BottomLeftContent;

package/lib/ui/bottomLeftContent.js

@@ -1,44 +1,27 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.find.js";
-import React, { useMemo } from 'react';
-import { CoverView, View } from '@ray-js/ray';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { CoverView, ScrollView, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../ctx/store';
 import { useComponentHideState } from './hooks';
 import { TrialBadge, useTrialBadge } from '../widgets/trialBadge';
-/** 右侧透明渐变宽度，用于提示横向可滑动 */
-const FADE_MASK = 'linear-gradient(to right, #000 calc(100% - 16px), transparent 100%)';
+import { pauseTimeToHideAllComponent, startTimeToHideAllComponent } from './constant';
 
-/**
- * 试用徽章在不同 screenType 下的容器样式。
- * 「贴在底栏顶部」的策略一致（bottom: 100%），只是 left / marginBottom
- * 等数值按横竖屏不同的边距规则做差异化处理。
- */
-const TRIAL_BADGE_WRAP_STYLE_VERTICAL = {
-  position: 'absolute',
-  left: '0px',
-  bottom: '100%',
-  marginBottom: 4,
-  zIndex: 2,
-  width: 'max-content'
-};
-const TRIAL_BADGE_WRAP_STYLE_FULL = {
-  position: 'absolute',
-  left: '25px',
-  bottom: '100%',
-  marginBottom: 8,
-  zIndex: 2,
-  width: 'max-content'
-};
+// 用唯一 className 在 createSelectorQuery 中区分多个实例，避免互相干扰
+let scrollClsSeq = 0;
 const BottomLeftContent = _ref => {
   let {
     ctx,
     children,
-    reservedRight = 0
+    reservedRight = 0,
+    canOpenSettings = true,
+    scrollHintMode = 'button'
   } = _ref;
   const {
     screenType,
+    playState,
     brandColor,
     bottomLeftContent
   } = useStore({
@@ -50,17 +33,27 @@ const BottomLeftContent = _ref => {
   const showSmartImageQuality = useMemo(() => {
     var _tryExp$initProps;
     const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
-    return !(tryExp !== null && tryExp !== void 0 && (_tryExp$initProps = tryExp.initProps) !== null && _tryExp$initProps !== void 0 && _tryExp$initProps.hideTryExperienceMenu);
+    return !(tryExp !== null && tryExp !== void 0 && (_tryExp$initProps = tryExp.initProps) !== null && _tryExp$initProps !== void 0 && _tryExp$initProps.hideSmartImageQualityState);
   }, [bottomLeftContent]);
   const trialRemainingSec = useMemo(() => {
     var _trialRemainingSec, _tryExp$initProps2;
     const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
     return (_trialRemainingSec = tryExp === null || tryExp === void 0 || (_tryExp$initProps2 = tryExp.initProps) === null || _tryExp$initProps2 === void 0 ? void 0 : _tryExp$initProps2.trialRemainingSec) !== null && _trialRemainingSec !== void 0 ? _trialRemainingSec : 0;
   }, [bottomLeftContent]);
-  const refreshToken = useMemo(() => {
-    var _refreshToken, _tryExp$initProps3;
+  const buttonState = useMemo(() => {
+    var _tryExp$initProps3;
+    const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
+    return tryExp === null || tryExp === void 0 || (_tryExp$initProps3 = tryExp.initProps) === null || _tryExp$initProps3 === void 0 ? void 0 : _tryExp$initProps3.buttonState;
+  }, [bottomLeftContent]);
+  const isLowPhone = useMemo(() => {
+    var _isLowPhone, _tryExp$initProps4;
+    const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
+    return (_isLowPhone = tryExp === null || tryExp === void 0 || (_tryExp$initProps4 = tryExp.initProps) === null || _tryExp$initProps4 === void 0 ? void 0 : _tryExp$initProps4.isLowPhone) !== null && _isLowPhone !== void 0 ? _isLowPhone : false;
+  }, []);
+  const gRawData = useMemo(() => {
+    var _gRawData, _tryExp$initProps5;
     const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
-    return (_refreshToken = tryExp === null || tryExp === void 0 || (_tryExp$initProps3 = tryExp.initProps) === null || _tryExp$initProps3 === void 0 ? void 0 : _tryExp$initProps3.refreshToken) !== null && _refreshToken !== void 0 ? _refreshToken : 0;
+    return (_gRawData = tryExp === null || tryExp === void 0 || (_tryExp$initProps5 = tryExp.initProps) === null || _tryExp$initProps5 === void 0 ? void 0 : _tryExp$initProps5.gRawData) !== null && _gRawData !== void 0 ? _gRawData : false;
   }, [bottomLeftContent]);
   const [shouldHide] = useComponentHideState();
   const {
@@ -68,46 +61,272 @@ const BottomLeftContent = _ref => {
     handleTrialSubscribe,
     handleCountdownEnd
   } = useTrialBadge(ctx.event, ctx.devId, trialRemainingSec);
+
+  // 横向滚动状态：内容溢出且未滑到对应边缘时，显示左 / 右箭头提示
+  const idRef = useRef(++scrollClsSeq);
+  const scrollCls = `ipc-bl-scroll-${idRef.current}`;
+  const contentCls = `ipc-bl-scroll-content-${idRef.current}`;
+  // 内容末尾哨兵节点：用它的真实横坐标反推子项总宽，避免内容容器被撑满导致测不出溢出
+  const endCls = `ipc-bl-scroll-end-${idRef.current}`;
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const [clientWidth, setClientWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  // 点击箭头时的受控滚动目标；仅在程序化滚动期间为数值，结束后置回 undefined，
+  // 避免持续受控导致用户手动拖动被回弹
+  const [scrollTo, setScrollTo] = useState(undefined);
+  // 横竖屏切换后，强制 ScrollView 重新挂载并把滚动状态重置为初始值
+  const [scrollResetKey, setScrollResetKey] = useState(0);
+  // 用户在某种屏幕模式下拖动过一次之后，该模式不再展示箭头（竖屏 / 横屏各自独立记录）
+  const [dismissed, setDismissed] = useState({
+    vertical: false,
+    full: false
+  });
+
+  // 滑动期间暂停整体的自动隐藏，滑动停止后再恢复（无原生 scrollend，用防抖判定结束）
+  const scrollingRef = useRef(false);
+  const scrollEndTimerRef = useRef();
+  // 测量时需要叠加当前滚动量，用 ref 避免闭包拿到过期值
+  const scrollLeftRef = useRef(0);
+  useEffect(() => {
+    setScrollResetKey(k => k + 1);
+    setScrollLeft(0);
+    setScrollTo(undefined);
+  }, [screenType]);
+
+  // 程序化滚动目标只在动画期间短暂受控，之后释放为非受控，避免回弹影响手动拖动
+  useEffect(() => {
+    if (scrollTo === undefined) {
+      return undefined;
+    }
+    const t = setTimeout(() => setScrollTo(undefined), 600);
+    return () => clearTimeout(t);
+  }, [scrollTo]);
   const paddingLeftPx = screenType === 'vertical' ? 0 : 25;
-  const trialBadgeWrapStyle = screenType === 'vertical' ? TRIAL_BADGE_WRAP_STYLE_VERTICAL : TRIAL_BADGE_WRAP_STYLE_FULL;
+  // 滚动末端的安全距离：滑到最右时最后一个元素与右边缘留更宽松的间距（横屏更宽）
+  const paddingRightPx = screenType === 'vertical' ? 22 : 32;
+  const paddingBottomPx = screenType === 'vertical' ? 0 : 25;
+  const showBadge = showSmartImageQuality && showTrialBadge && canOpenSettings && gRawData && !isLowPhone && buttonState === 1 && trialRemainingSec > 0;
+
+  // 测量滚动容器可视宽度与内部内容宽度。
+  // 首屏漏判溢出的根因：左下角子元素（画质菜单 / 试用角标等）是异步加载的，宽度会在
+  // 首次测量之后才“长大”，而固定几次延时跑完就不再测，导致 contentWidth 偏小、判不出溢出。
+  // 这里在一段时间窗内持续轮询（每 400ms 测一次，约 6s），每次都用最新读数更新；
+  // 值未变化时 React 会自动跳过重渲染，因此持续轮询不会带来额外开销，
+  // 同时能兜住异步内容撑开与 overlay 布局滞后导致的尺寸变化。
+  useEffect(() => {
+    let timer;
+    let attempts = 0;
+    const measure = () => {
+      const query = ty.createSelectorQuery();
+      query.select(`.${scrollCls}`).boundingClientRect();
+      query.select(`.${contentCls}`).boundingClientRect();
+      query.select(`.${endCls}`).boundingClientRect();
+      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 cw = (scrollRect === null || scrollRect === void 0 ? void 0 : scrollRect.width) || 0;
+        if (cw) {
+          setClientWidth(cw);
+        }
+
+        // 优先用末尾哨兵反推子项真实总宽：
+        //   哨兵视口 x = 滚动容器左 + 左padding + 子项总宽 - 当前 scrollLeft
+        //   => 子项总宽 = 哨兵.left - 滚动容器.left - 左padding + scrollLeft
+        // 这样即使内容容器被撑满到可视内盒宽，也能拿到真实内容宽；哨兵不可用时回退到容器宽。
+        let tw = 0;
+        if (scrollRect && endRect && typeof endRect.left === 'number') {
+          tw = endRect.left - scrollRect.left - paddingLeftPx + scrollLeftRef.current;
+        }
+        if (!(tw > 0)) {
+          tw = (contentRect === null || contentRect === void 0 ? void 0 : contentRect.width) || 0;
+        }
+        if (tw > 0) {
+          setContentWidth(tw);
+        }
+        attempts += 1;
+        // 最多轮询 15 次（约 6s）兜底，避免无限轮询
+        if (attempts >= 15) {
+          return;
+        }
+        timer = setTimeout(measure, 400);
+      });
+    };
+    timer = setTimeout(measure, 200);
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [screenType,
+  // reservedRight 决定 ScrollView 可视宽度（右下角内容异步加载后会从 0 变为实际宽度）
+  reservedRight,
+  // playState：视频就绪后 overlay 可能重新布局，需重新测量
+  playState, bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.length, shouldHide, showBadge, scrollCls, contentCls, scrollResetKey]);
+  // 卸载时清理防抖定时器；若仍处于滑动中则恢复自动隐藏，避免遗留暂停态
+  useEffect(() => {
+    return () => {
+      if (scrollEndTimerRef.current) {
+        clearTimeout(scrollEndTimerRef.current);
+      }
+      if (scrollingRef.current) {
+        var _ctx$event3;
+        scrollingRef.current = false;
+        (_ctx$event3 = ctx.event) === null || _ctx$event3 === void 0 || _ctx$event3.emit(startTimeToHideAllComponent);
+      }
+    };
+  }, [ctx.event]);
+
+  // ScrollView 的实际可滚动宽度 = 左右 padding + 子元素总宽
+  const totalContentWidth = contentWidth > 0 ? paddingLeftPx + contentWidth + paddingRightPx : 0;
+  const isOverflow = totalContentWidth > clientWidth + 1;
+  const atEnd = !isOverflow || scrollLeft + clientWidth >= totalContentWidth - 2;
+  const isDismissed = dismissed[screenType];
+  const isButtonHint = scrollHintMode === 'button';
+  // button 模式：溢出且未到末端即常显（不受 dismissed 影响）；pulse 模式：保留拖动后消失的旧逻辑
+
+  // 右侧还有未滚到头的内容时，启用右边缘淡出，把没完全露出的元素渐隐隐藏（横竖屏都生效）
+
+  // 点击右箭头：直接滚动到最右端。
+  // 给一个足够大的目标值，交由 ScrollView 自身夹取到真实最右端，避免测量误差导致滚不到底。
+
+  const coverHeight = screenType === 'vertical' ? shouldHide ? 49 : 48 : shouldHide ? 84 : 83;
+  const containerHeight = screenType === 'vertical' ? 48 : 58;
+
+  // reservedRight 兼容 number（px）与 string（任意 CSS 长度，例如 "35%"）
+  const rightCss = typeof reservedRight === 'number' ? `${reservedRight}px` : reservedRight;
+
+  // 与 bottomRightContent 对齐：bottomRight 的 icon 行是贴在 wrap 顶部（不居中）的，
+  // 这里 wrap 用 flex-start，让 ScrollView 也贴顶；icon 在 ScrollView 内通过 align-items
+  // 居中到可视行中线，从而和右侧 icon 在同一水平线上。
+  // hintBottom 锚定 wrap 底部：
+  //   icon 中心到 wrap 底部 = (wrap底部→SV底部空隙) + SV的paddingBottom + 可视行高/2
+  //   竖屏:  0  + 0  + 24   = 24，箭头 16 → bottom = 16
+  //   横屏:  25 + 25 + 16.5 = 66.5，箭头 16 → bottom = 58
+
+  const hintBottom = screenType === 'vertical' ? 16 : 58;
+  // button 模式用半透明圆做点击热区，比 pulse 提示大；下移半个差值以保持图标中心不变
+  const hintSize = isButtonHint ? 26 : 16;
+  // 竖屏 button 模式给 ScrollView 右侧留一条较窄的“箭头槽”：只裁掉内容最右一小段，
+  // 箭头压住最后一个元素的少量边缘（不完全遮挡），整体更贴近内容
+  const arrowGutter = isButtonHint && screenType === 'vertical' ? 12 : 0;
+  // 箭头贴右边缘放置（竖屏 4px / 横屏 6px），不再随 gutter 居中
+  const hintRight = arrowGutter > 0 ? 4 : 6;
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-bottom-left-content-wrap')
-    // 注意：不要在这里覆盖 position，CSS 类已经设置 position: absolute; left: 0; bottom: 0
-    // 否则 children 会失去贴底定位，从而与 bottomRightContent 不对齐
-    ,
+    className: clsx('ipc-player-bottom-left-content-wrap'),
     style: {
-      right: `${reservedRight}px`,
-      height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
-    }
-  }, showSmartImageQuality && showTrialBadge && /*#__PURE__*/React.createElement(View, {
-    className: clsx('bottom-left-item-container'),
-    style: _objectSpread(_objectSpread({}, trialBadgeWrapStyle), {}, {
-      transform: shouldHide ? 'translateY(40px)' : 'translateY(0)',
+      right: rightCss,
+      height: showBadge ? `${coverHeight + 30}px` : `${coverHeight}px`,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
       opacity: shouldHide ? 0 : 1,
-      transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out'
-    })
+      pointerEvents: shouldHide ? 'none' : 'auto'
+    }
+  }, showBadge && /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: '32px',
+      marginLeft: screenType === 'vertical' ? '12px' : '25px'
+    }
   }, /*#__PURE__*/React.createElement(TrialBadge, {
     brandColor: brandColor,
     trialRemainingSec: trialRemainingSec,
-    refreshToken: refreshToken,
     onSubscribe: handleTrialSubscribe,
     onCountdownEnd: handleCountdownEnd
-  })), /*#__PURE__*/React.createElement(View, {
+  })), /*#__PURE__*/React.createElement(ScrollView, {
+    key: scrollResetKey,
+    scrollX: true,
+    scrollLeft: scrollTo,
+    scrollWithAnimation: true,
+    onScroll: e => {
+      var _e$detail;
+      // 滑动开始时暂停自动隐藏（仅在一次滑动会话内触发一次），滑动停止后恢复
+      if (!scrollingRef.current) {
+        var _ctx$event;
+        scrollingRef.current = true;
+        (_ctx$event = ctx.event) === null || _ctx$event === void 0 || _ctx$event.emit(pauseTimeToHideAllComponent);
+      }
+      if (scrollEndTimerRef.current) {
+        clearTimeout(scrollEndTimerRef.current);
+      }
+      scrollEndTimerRef.current = setTimeout(() => {
+        var _ctx$event2;
+        scrollingRef.current = false;
+        (_ctx$event2 = ctx.event) === null || _ctx$event2 === void 0 || _ctx$event2.emit(startTimeToHideAllComponent);
+      }, 200);
+
+      // Ray ScrollView 在不同实现下，scrollLeft 可能直接挂在事件上，也可能在 detail 内
+      const sl = typeof (e === null || e === void 0 ? void 0 : e.scrollLeft) === 'number' ? e.scrollLeft : e === null || e === void 0 || (_e$detail = e.detail) === null || _e$detail === void 0 ? void 0 : _e$detail.scrollLeft;
+      if (typeof sl === 'number') {
+        scrollLeftRef.current = sl;
+        setScrollLeft(sl);
+        // 一旦真的拖动过（>2px 阈值过滤抖动 / 重置触发的 0 值），当前屏幕模式下不再展示箭头
+        if (sl > 2 && !dismissed[screenType]) {
+          setDismissed(d => _objectSpread(_objectSpread({}, d), {}, {
+            [screenType]: true
+          }));
+        }
+      }
+    },
+    className: clsx(scrollCls, {
+      'ipc-player-bottom-left-scroll-fademask': isOverflow && !atEnd
+    }),
     style: {
-      paddingBottom: screenType === 'vertical' ? '14px' : '32px',
+      paddingBottom: `${paddingBottomPx}px`,
       paddingLeft: `${paddingLeftPx}px`,
-      width: '100%',
-      overflowX: 'auto',
-      overflowY: 'hidden',
-      whiteSpace: 'nowrap',
-      WebkitOverflowScrolling: 'touch',
-      WebkitMaskImage: FADE_MASK,
-      maskImage: FADE_MASK
+      paddingRight: `${paddingRightPx}px`,
+      width: arrowGutter > 0 ? `calc(100% - ${arrowGutter}px)` : '100%',
+      height: `${containerHeight}px`,
+      marginTop: showBadge ? '-2px' : 0,
+      whiteSpace: 'nowrap'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-bottom-left-content-container', contentCls),
+    style: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      height: `${containerHeight - paddingBottomPx}px`,
+      alignItems: 'center'
+    }
+  }, children, /*#__PURE__*/React.createElement(View, {
+    className: endCls,
+    style: {
+      width: '1px',
+      height: '1px',
+      flexShrink: 0
+    }
+  }))), isOverflow && !atEnd && (isButtonHint || !isDismissed) && /*#__PURE__*/React.createElement(CoverView, {
+    className: clsx('ipc-player-bottom-left-scroll-hint', {
+      'ipc-player-bottom-left-scroll-hint--button': isButtonHint
+    }),
+    style: {
+      position: 'absolute',
+      right: `${hintRight}px`,
+      bottom: `${hintBottom - (hintSize - 16) / 2}px`,
+      width: `${hintSize}px`,
+      height: `${hintSize}px`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      pointerEvents: isButtonHint ? 'auto' : 'none'
     },
-    className: clsx('ipc-player-bottom-left-content-container', {
-      // 'ipc-player-bottom-left-content-hide': shouldHide,
-      // 'ipc-player-bottom-left-content-show': !shouldHide,
+    onClick: isButtonHint ? () => {
+      if (!isOverflow) {
+        return;
+      }
+      setScrollTo(totalContentWidth + clientWidth + 9999);
+    } : undefined
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-bottom-left-scroll-hint-arrow', {
+      'ipc-player-bottom-left-scroll-hint-arrow--right': true,
+      'ipc-player-bottom-left-scroll-hint-arrow--light': isButtonHint,
+      'ipc-player-bottom-left-scroll-hint-arrow--static': isButtonHint
     })
-  }, children));
+    // 右向 chevron 由 top+right 描边旋转而成，视觉重心偏右；放大并整体左移使其在圆内居中
+    ,
+    style: isButtonHint ? {
+      width: '9px',
+      height: '9px',
+      transform: 'translate(-1px, 0) rotate(45deg)'
+    } : undefined
+  })));
 };
 export default BottomLeftContent;

package/lib/ui/bottomRightContent.d.ts

@@ -3,8 +3,12 @@ import { UseCtx } from '../interface';
 type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
-    /** 由 ui.tsx 计算得到的右下角组件宽度（与左下角的 reservedRight 保持一致） */
-    width?: number;
+    /**
+     * 由 ui.tsx 计算得到的右下角组件宽度（与左下角的 reservedRight 保持一致）
+     * - number: 视为 px
+     * - string: 视为合法的 CSS width 值（例如 "35%" / "20vw"）
+     */
+    width?: number | string;
 };
 declare const BottomRightContent: ({ ctx, children, width }: Props) => React.JSX.Element;
 export default BottomRightContent;

package/lib/ui/bottomRightContent.js

@@ -17,20 +17,29 @@ const BottomRightContent = _ref => {
     playState: ctx.playState
   });
   const [shouldHide] = useComponentHideState();
+  const containerHeight = screenType === 'vertical' ? 48 : 58;
+
+  // 将 width 统一规范成 CSS 合法值。number → "${n}px"，string → 原样透传。
+  // 0 / 空串视为「没有传宽度」，沿用默认布局（不设 width）。
+  const widthStyle = typeof width === 'number' && width > 0 ? {
+    width: `${width}px`,
+    boxSizing: 'border-box'
+  } : typeof width === 'string' && width ? {
+    width,
+    boxSizing: 'border-box'
+  } : null;
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-right-content-wrap'),
     style: _objectSpread({
       paddingLeft: screenType === 'vertical' ? '10px' : '0',
-      height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
-    }, typeof width === 'number' && width > 0 ? {
-      width: `${width}px`,
-      boxSizing: 'border-box'
-    } : null)
+      height: screenType === 'vertical' ? shouldHide ? '49px' : '48px' : shouldHide ? '84px' : '83px'
+    }, widthStyle)
   }, /*#__PURE__*/React.createElement(View, {
     style: {
-      paddingBottom: screenType === 'vertical' ? '14px' : '32px',
+      paddingBottom: screenType === 'vertical' ? 0 : '25px',
       paddingRight: screenType === 'vertical' ? 0 : '25px',
       width: '100%',
+      height: `${containerHeight}px`,
       justifyContent: 'flex-end'
     },
     className: clsx('ipc-player-bottom-right-content-container', {

package/lib/ui/constant.d.ts

@@ -21,13 +21,13 @@ export declare const landscapeTipId = "landscapeTipId";
 export declare const multiPtzId = "multiPtzId";
 /** 控件点击统一事件：任意播放器内控件被点击时触发，可用于埋点或统一处理 */
 export declare const widgetClick = "widgetClick";
-/** 「去体验」按钮业务事件，与清晰度 resolutionBtnControlClick 用法一致 */
-export declare const tryExperienceBtnClick = "tryExperienceBtnClick";
 /**
  * 试看倒计时结束事件：试看徽章倒计时归零时触发，
  * 业务侧/相关控件可监听此事件刷新自己的状态（例如 TryExperience 重新拉取状态）
  */
 export declare const trialCountdownEnd = "trialCountdownEnd";
+export declare const hideTrialBadgeEvent = "hideTrialBadge";
+export declare const refreshSmartImageQualityEvent = "refreshSmartImageQuality";
 /** 控件点击事件用的 widgetId，统一在此维护 */
 export declare const widgetLabs: {
     readonly SCREENSHOT: "Screenshot";

package/lib/ui/constant.js

@@ -22,14 +22,13 @@ export const multiPtzId = 'multiPtzId';
 /** 控件点击统一事件：任意播放器内控件被点击时触发，可用于埋点或统一处理 */
 export const widgetClick = 'widgetClick';
 
-/** 「去体验」按钮业务事件，与清晰度 resolutionBtnControlClick 用法一致 */
-export const tryExperienceBtnClick = 'tryExperienceBtnClick';
-
 /**
  * 试看倒计时结束事件：试看徽章倒计时归零时触发，
  * 业务侧/相关控件可监听此事件刷新自己的状态（例如 TryExperience 重新拉取状态）
  */
 export const trialCountdownEnd = 'trialCountdownEnd';
+export const hideTrialBadgeEvent = 'hideTrialBadge';
+export const refreshSmartImageQualityEvent = 'refreshSmartImageQuality';
 
 /** 控件点击事件用的 widgetId，统一在此维护 */
 export const widgetLabs = {

package/lib/ui/index.d.ts

@@ -3,4 +3,4 @@ export * from './hooks';
 export * from './context';
 export type * from './event';
 export { widgetClick } from './widgetClick';
-export { widgetLabs, tryExperienceBtnClick, trialCountdownEnd } from './constant';
+export { widgetLabs, trialCountdownEnd } from './constant';

package/lib/ui/index.js

@@ -2,4 +2,4 @@ export * from './ui';
 export * from './hooks';
 export * from './context';
 export { widgetClick } from './widgetClick';
-export { widgetLabs, tryExperienceBtnClick, trialCountdownEnd } from './constant';
+export { widgetLabs, trialCountdownEnd } from './constant';

package/lib/ui/ui.d.ts

@@ -32,12 +32,13 @@ type Props = {
     awakeStatus?: boolean | undefined;
     eventRef?: React.RefObject<EventInstance>;
     onPlayerTap?: (data: any) => void;
-    defaultAutoPlay?: boolean;
     limitFlow?: boolean;
     showFlowLowTip?: boolean;
     extend?: Record<string, any>;
     refreshElement?: boolean;
     autoWakeUp?: boolean;
+    previewEnabled?: boolean;
+    onPreviewEnabledChange?: (enabled: boolean) => void;
 };
 export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};