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

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/ui/bottomLeftContent.d.ts

@@ -3,8 +3,12 @@ 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;
 };
 declare const BottomLeftContent: ({ ctx, children, reservedRight, canOpenSettings }: Props) => React.JSX.Element;

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,12 +67,17 @@ 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' ? 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: {
-      right: `${reservedRight}px`,
-      height: showBadge ? `${containerHeight + 30}px` : `${containerHeight}px`,
+      right: rightCss,
+      height: showBadge ? `${coverHeight + 30}px` : `${coverHeight}px`,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -92,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/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,18 +17,26 @@ const BottomRightContent = _ref => {
     playState: ctx.playState
   });
   const [shouldHide] = useComponentHideState();
-  const containerHeight = screenType === 'vertical' ? 48 : 83;
+  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 ? '49px' : '48px' : shouldHide ? '84px' : '83px'
-    }, typeof width === 'number' && width > 0 ? {
-      width: `${width}px`,
-      boxSizing: 'border-box'
-    } : null)
+    }, widthStyle)
   }, /*#__PURE__*/React.createElement(View, {
     style: {
+      paddingBottom: screenType === 'vertical' ? 0 : '25px',
       paddingRight: screenType === 'vertical' ? 0 : '25px',
       width: '100%',
       height: `${containerHeight}px`,

package/lib/ui/ui.js

@@ -446,7 +446,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [brandColor, verticalMic]);
   const refreshSmartImageQuality = useMemoizedFn(async () => {
     const res = await getSmartImageQualityState(devId);
-    if (res === undefined) return;
+    if (!res) return;
     // 调试时使用
     // res = {
     //   isPurchase: false,
@@ -455,7 +455,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     //   canOpenSettings: true,
     // };
     const getNgRes = await getNgRawData();
-    console.log('res===getNgRes111', res, getNgRes);
+    console.log('res===getSmartImageQualityState', res);
     updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
       isPurchase: res.isPurchase,
       buttonState: res.buttonState,
@@ -680,14 +680,18 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
 
   /**
    * 右下角可见按钮数 → 右下角组件宽度（左下角同时用作右侧预留宽度）
-   * 1 个按钮: 115px / 2 个按钮: 132px / 0 个按钮: 0
+   * - 横屏: 固定 35%（用百分比，左下角自动按 100% - 35% = 65% 可视，溢出走横向滚动）
+   * - 竖屏: 1 个按钮 115px / 2+ 个按钮 132px / 0 个按钮 0
    */
   const bottomRightWidth = useMemo(() => {
+    if (screenType === 'full') {
+      return '35%';
+    }
     const visibleCount = (bottomRightContent || []).filter(item => !item.hidden).length;
     if (visibleCount <= 0) return 0;
     if (visibleCount === 1) return 115;
     return 132;
-  }, [bottomRightContent]);
+  }, [bottomRightContent, screenType]);
 
   /**
    * 视频流加载状态封装
@@ -919,7 +923,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ,
     privateState: privateState,
     onPlayerTap: data => {
-      console.log('sdhsajdhsahdsa=========');
+      console.log('playerTap event');
       if (disablePlayerTap.current) {
         console.log('playerTap 事件已禁止');
         return;

package/lib/utils/ttt.d.ts

@@ -4,7 +4,7 @@ export type SmartImageQualityResult = {
     trialRemainingSec: number;
     canOpenSettings: boolean;
 };
-export declare function getSmartImageQualityState(devId: string): Promise<SmartImageQualityResult>;
+export declare function getSmartImageQualityState(devId: string): Promise<SmartImageQualityResult | null>;
 export type AIFrameFeatureScope = {
     inPreview: boolean;
     inMessage: boolean;
@@ -34,10 +34,8 @@ export type GetAIFrameFeatureResult = {
     localPath: string;
     thingFileUri: string;
 };
-export declare function getAIFrameFeature(devId: string): Promise<GetAIFrameFeatureResult>;
+export declare function getAIFrameFeature(devId: string): Promise<GetAIFrameFeatureResult | null>;
 export declare function setAIFrameFeature(params: SetAIFrameFeatureParams): Promise<any>;
-export declare function getDeviceInfo(devId: string): Promise<unknown>;
-export declare function getCurrentHomeInfo(): Promise<unknown>;
 export declare function setTrailFinish(devId: string): Promise<unknown>;
-export declare function isLowPhone(): Promise<unknown>;
+export declare function isLowPhone(): Promise<boolean>;
 export declare function getNgRawData(): Promise<unknown>;

package/lib/utils/ttt.js

@@ -1,24 +1,37 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 export function getSmartImageQualityState(devId) {
   return new Promise(resolve => {
+    var _ty$ipc;
+    const isSupport = typeof ((_ty$ipc = ty.ipc) === null || _ty$ipc === void 0 ? void 0 : _ty$ipc.getSmartImageQualityState) === 'function';
+    if (!isSupport) {
+      resolve(null);
+      return;
+    }
     try {
-      ty.ipc.getSmartImageQualityState({
+      var _ty;
+      (_ty = ty) === null || _ty === void 0 || (_ty = _ty.ipc) === null || _ty === void 0 || _ty.getSmartImageQualityState({
         devId,
         scene: 'inPreview',
         success: data => {
           resolve(data);
         },
         fail: () => {
-          resolve(undefined);
+          resolve(null);
         }
       });
     } catch (e) {
-      resolve(undefined);
+      resolve(null);
     }
   });
 }
 export function getAIFrameFeature(devId) {
   return new Promise(resolve => {
+    var _ty$ipc2;
+    const isSupport = typeof ((_ty$ipc2 = ty.ipc) === null || _ty$ipc2 === void 0 ? void 0 : _ty$ipc2.getAIFrameFeature) === 'function';
+    if (!isSupport) {
+      resolve(null);
+      return;
+    }
     try {
       ty.ipc.getAIFrameFeature({
         devId,
@@ -28,16 +41,22 @@ export function getAIFrameFeature(devId) {
         },
         fail: e => {
           console.warn('res===getAIFrameFeature fail', e);
-          resolve(undefined);
+          resolve(null);
         }
       });
     } catch (e) {
-      resolve(undefined);
+      resolve(null);
     }
   });
 }
 export function setAIFrameFeature(params) {
   return new Promise(resolve => {
+    var _ty$ipc3;
+    const isSupport = typeof ((_ty$ipc3 = ty.ipc) === null || _ty$ipc3 === void 0 ? void 0 : _ty$ipc3.setAIFrameFeature) === 'function';
+    if (!isSupport) {
+      resolve(null);
+      return;
+    }
     try {
       ty.ipc.setAIFrameFeature(_objectSpread(_objectSpread({}, params), {}, {
         success: data => {
@@ -46,70 +65,50 @@ export function setAIFrameFeature(params) {
         },
         fail: e => {
           console.warn('res===setAIFrameFeature fail', e);
-          resolve(undefined);
+          resolve(null);
         }
       }));
     } catch (e) {
-      resolve(undefined);
-    }
-  });
-}
-export function getDeviceInfo(devId) {
-  return new Promise(resolve => {
-    try {
-      ty.device.getDeviceInfo({
-        deviceId: devId,
-        success: res => {
-          resolve(res);
-        },
-        fail: () => {
-          resolve(undefined);
-        }
-      });
-    } catch (e) {
-      resolve(undefined);
-    }
-  });
-}
-export function getCurrentHomeInfo() {
-  return new Promise(resolve => {
-    try {
-      ty.home.getCurrentHomeInfo({
-        success: res => {
-          resolve(res);
-        },
-        fail: () => {
-          resolve(undefined);
-        }
-      });
-    } catch (e) {
-      resolve(undefined);
+      resolve(null);
     }
   });
 }
 export function setTrailFinish(devId) {
   return new Promise(resolve => {
+    var _ty$ipc4;
+    const isSupport = typeof ((_ty$ipc4 = ty.ipc) === null || _ty$ipc4 === void 0 ? void 0 : _ty$ipc4.setTrailFinish) === 'function';
+    if (!isSupport) {
+      resolve(null);
+      return;
+    }
     try {
-      ty.ipc.setTrailFinish({
+      var _ty2;
+      (_ty2 = ty) === null || _ty2 === void 0 || (_ty2 = _ty2.ipc) === null || _ty2 === void 0 || _ty2.setTrailFinish({
         devId,
         success: res => {
           resolve(res);
         },
         fail: () => {
-          resolve(undefined);
+          resolve(null);
         }
       });
     } catch (e) {
-      resolve(undefined);
+      resolve(null);
     }
   });
 }
 export function isLowPhone() {
   return new Promise(resolve => {
+    var _ty$ipc5;
+    const isSupport = typeof ((_ty$ipc5 = ty.ipc) === null || _ty$ipc5 === void 0 ? void 0 : _ty$ipc5.isLowPhone) === 'function';
+    if (!isSupport) {
+      resolve(false);
+      return;
+    }
     try {
-      ty.device.isLowPhone({
+      ty.ipc.isLowPhone({
         success: res => {
-          resolve(res);
+          resolve(!!res);
         },
         fail: () => {
           resolve(false);
@@ -122,11 +121,17 @@ export function isLowPhone() {
 }
 export function getNgRawData() {
   return new Promise(resolve => {
+    var _ty3;
+    const isSupport = typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.getNgRawData) === 'function';
+    if (!isSupport) {
+      resolve(false);
+      return;
+    }
     try {
       ty.getNgRawData({
         rawKey: 'is_smart_image_quality',
         success: res => {
-          resolve(res);
+          resolve((res === null || res === void 0 ? void 0 : res.rawData) === 'true');
         },
         fail: () => {
           resolve(false);

package/lib/widgets/trialBadge/index.js

@@ -28,7 +28,6 @@ export const TrialBadge = _ref => {
   const startTimeRef = useRef(Date.now());
   const initialSecRef = useRef(Math.max(0, Math.floor(trialRemainingSec)));
   useEffect(() => {
-    console.log('res===trialRemainingSec', trialRemainingSec);
     const sec = Math.max(0, Math.floor(trialRemainingSec));
     endedRef.current = false;
     initialSecRef.current = sec;

package/lib/widgets/tryExperience/tryExperience.js

@@ -66,7 +66,6 @@ export const TryExperience = props => {
     updateImgSrc();
   }, [buttonState]);
   const updateImgSrc = useCallback(() => {
-    console.log('res===updateImgSrc', buttonState, isLowPhone);
     if (isLowPhone) {
       setImgSrc(tryClose);
       return;
@@ -98,6 +97,7 @@ export const TryExperience = props => {
     lockRef.current = true;
     try {
       const getAI = await getAIFrameFeature(devId);
+      if (!getAI) return;
       if (buttonState === TryExperienceStatus.Open) {
         var _getAI$aiFrameFeature, _getAI$aiFrameFeature2, _getAI$aiFrameFeature3, _props$event;
         // 由开变关的时候，只关inPreview

package/package.json

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