@ray-js/ipc-player-integration 0.0.35-beta.27 → 0.0.35-beta.28

package/lib/ui/bottomLeftContent.js

@@ -6,8 +6,17 @@ 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% - 48px), transparent 100%)';
+/**
+ * 右侧透明渐变 mask，用于提示横向可滑动。
+ * - 竖屏容器窄，48px 渐变区已足够明显
+ * - 横屏容器约占 65% 宽度（≥ 500px），且单个按钮就有 ~72px，
+ *   渐变区需大于一个按钮宽度才能让最右侧按钮"半隐半现"，
+ *   暗示后面还有内容
+ */
+const getFadeMask = screenType => {
+  const fadeWidth = screenType === 'vertical' ? 60 : 120;
+  return `linear-gradient(to right, #000 calc(100% - ${fadeWidth}px), transparent 100%)`;
+};
 const BottomLeftContent = _ref => {
   let {
     ctx,
@@ -58,11 +67,12 @@ const BottomLeftContent = _ref => {
   } = useTrialBadge(ctx.event, ctx.devId, trialRemainingSec);
   const paddingLeftPx = screenType === 'vertical' ? 0 : 25;
   const showBadge = showSmartImageQuality && showTrialBadge && canOpenSettings && gRawData && !isLowPhone && buttonState === 1 && trialRemainingSec > 0;
-  const coverHeight = screenType === 'vertical' ? 48 : 83;
+  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;
+  const fadeMask = getFadeMask(screenType);
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-left-content-wrap'),
     style: {
@@ -96,8 +106,8 @@ const BottomLeftContent = _ref => {
       overflowY: 'hidden',
       whiteSpace: 'nowrap',
       WebkitOverflowScrolling: 'touch',
-      WebkitMaskImage: FADE_MASK,
-      maskImage: FADE_MASK
+      WebkitMaskImage: fadeMask,
+      maskImage: fadeMask
     },
     className: clsx('ipc-player-bottom-left-content-container')
   }, children));

package/lib/ui/ui.js

@@ -455,6 +455,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     //   canOpenSettings: true,
     // };
     const getNgRes = await getNgRawData();
+    console.log('res===getSmartImageQualityState', res);
     updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
       isPurchase: res.isPurchase,
       buttonState: res.buttonState,

package/package.json

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