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

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

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

package/lib/ui/bottomLeftContent.js

@@ -1,4 +1,3 @@
-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';
@@ -7,35 +6,23 @@ 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%)';
-
 /**
- * 试用徽章在不同 screenType 下的容器样式。
- * 「贴在底栏顶部」的策略一致（bottom: 100%），只是 left / marginBottom
- * 等数值按横竖屏不同的边距规则做差异化处理。
+ * 右侧透明渐变 mask，用于提示横向可滑动。
+ * - 竖屏容器窄，48px 渐变区已足够明显
+ * - 横屏容器约占 65% 宽度（≥ 500px），且单个按钮就有 ~72px，
+ *   渐变区需大于一个按钮宽度才能让最右侧按钮"半隐半现"，
+ *   暗示后面还有内容
  */
-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'
+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,
     children,
-    reservedRight = 0
+    reservedRight = 0,
+    canOpenSettings = true
   } = _ref;
   const {
     screenType,
@@ -57,10 +44,20 @@ const BottomLeftContent = _ref => {
     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 {
@@ -69,45 +66,50 @@ const BottomLeftContent = _ref => {
     handleCountdownEnd
   } = useTrialBadge(ctx.event, ctx.devId, trialRemainingSec);
   const paddingLeftPx = screenType === 'vertical' ? 0 : 25;
-  const trialBadgeWrapStyle = screenType === 'vertical' ? TRIAL_BADGE_WRAP_STYLE_VERTICAL : TRIAL_BADGE_WRAP_STYLE_FULL;
+  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')
-    // 注意：不要在这里覆盖 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: 'center',
       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, {
     style: {
-      paddingBottom: screenType === 'vertical' ? '14px' : '32px',
+      paddingBottom: screenType === 'vertical' ? 0 : '25px',
       paddingLeft: `${paddingLeftPx}px`,
+      paddingRight: '16px',
       width: '100%',
+      height: `${containerHeight}px`,
+      marginTop: showBadge ? '-2px' : 0,
       overflowX: 'auto',
       overflowY: 'hidden',
       whiteSpace: 'nowrap',
       WebkitOverflowScrolling: 'touch',
-      WebkitMaskImage: FADE_MASK,
-      maskImage: FADE_MASK
+      WebkitMaskImage: fadeMask,
+      maskImage: fadeMask
     },
-    className: clsx('ipc-player-bottom-left-content-container', {
-      // 'ipc-player-bottom-left-content-hide': shouldHide,
-      // 'ipc-player-bottom-left-content-show': !shouldHide,
-    })
+    className: clsx('ipc-player-bottom-left-content-container')
   }, children));
 };
 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';