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

package/lib/ui/ui.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.constructor.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 React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
 import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation, getCurrentPages } from '@ray-js/ray';
@@ -12,7 +13,7 @@ import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interfa
 import { useCtx } from '../ctx/ctx.composition';
 import { useStore, updateAtom } from '../ctx/store';
 import { UIEventContext } from './context';
-import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId, zoomLevelChange, setScaleMultipleEvent, trialCountdownEnd } from './constant';
+import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId, zoomLevelChange, setScaleMultipleEvent, trialCountdownEnd, refreshSmartImageQualityEvent } from './constant';
 import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
@@ -22,7 +23,7 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { getSmartImageQualityState } from '../utils/ttt';
+import { getNgRawData, getSmartImageQualityState, isLowPhone } from '../utils/ttt';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -64,12 +65,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     awakeStatus = undefined,
     onPlayerTap,
     playerRoute = 'pages/home/index',
-    defaultAutoPlay = true,
     limitFlow = false,
     showFlowLowTip = false,
     extend = {},
     refreshElement = false,
-    autoWakeUp = false
+    autoWakeUp = false,
+    previewEnabled = undefined,
+    onPreviewEnabledChange
   } = props;
   const {
     event
@@ -111,6 +113,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   // 是否需要忽略进入后台停止预览
   const [ignoreStopOnHide, setIgnoreStopOnHide] = useState(ignoreHideStopPreview);
   const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
+  const isLowPhoneRef = useRef(false);
+  useEffect(() => {
+    isLowPhone().then(res => {
+      isLowPhoneRef.current = !!res;
+    });
+  }, []);
 
   // 展示顶部内容
   const [showTopContent, setShowTopContent] = useState(true);
@@ -209,7 +217,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     return () => {
       var _ty3;
       if (typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.offOrientationChange) === 'function') {
-        ty.offOrientationChange(handleOrientationChange);
+        var _ty4;
+        (_ty4 = ty) === null || _ty4 === void 0 || _ty4.offOrientationChange(handleOrientationChange);
       }
     };
   }, []);
@@ -438,24 +447,45 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, [brandColor, verticalMic]);
-  const refreshSmartImageQuality = useMemoizedFn(() => {
-    getSmartImageQualityState(devId).then(res => {
-      if (res === undefined) return;
-      updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
-        isPurchase: res.isPurchase,
-        buttonState: res.buttonState,
-        trialRemainingSec: res.trialRemainingSec,
-        refreshToken: Date.now()
-      }).catch(() => {
-        // ignore
-      });
+
+  // 是否隐藏画质（试用）功能：取 TryExperience widget 的 hideSmartImageQualityState
+  // （由 initPlayerWidgets 的 hideSmartImageQualityState ?? true 映射而来）
+  const hideSmartImageQualityState = useMemo(() => {
+    var _hideSmartImageQualit, _tryExp$initProps;
+    const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
+    return (_hideSmartImageQualit = tryExp === null || tryExp === void 0 || (_tryExp$initProps = tryExp.initProps) === null || _tryExp$initProps === void 0 ? void 0 : _tryExp$initProps.hideSmartImageQualityState) !== null && _hideSmartImageQualit !== void 0 ? _hideSmartImageQualit : true;
+  }, [bottomLeftContent]);
+  const refreshSmartImageQuality = useMemoizedFn(async () => {
+    // 隐藏画质功能时直接跳过，不发起请求与更新
+    console.log('hideSmartImageQualityState');
+    if (hideSmartImageQualityState) return;
+    console.log('refreshSmartImageQuality');
+    const res = await getSmartImageQualityState(devId);
+    if (!res) return;
+    // 调试时使用
+    // res = {
+    //   isPurchase: false,
+    //   buttonState: 0,
+    //   trialRemainingSec: 20,
+    //   canOpenSettings: true,
+    // };
+    const getNgRes = await getNgRawData();
+    console.log('res===getSmartImageQualityState', res);
+    updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
+      isPurchase: res.isPurchase,
+      buttonState: res.buttonState,
+      trialRemainingSec: res.trialRemainingSec,
+      canOpenSettings: res.canOpenSettings,
+      gRawData: !!getNgRes,
+      isLowPhone: isLowPhoneRef.current
     });
   });
+
+  // 首次进入即执行；hideSmartImageQualityState 变化时重新执行。
+  // 是否隐藏的判定在 refreshSmartImageQuality 内部，hide 为 true 时方法内直接 return。
   useEffect(() => {
-    if (playState === PlayState.PLAYING) {
-      refreshSmartImageQuality();
-    }
-  }, [playState]);
+    refreshSmartImageQuality();
+  }, [hideSmartImageQualityState]);
   const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
@@ -492,6 +522,33 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setIsSmallScreen(computeIsSmallScreen());
   });
 
+  // 页面是否处于前台；自动隐藏倒计时要等播放器正常出流（PLAYING）后再启动
+  const pageShownRef = useRef(false);
+  // 用 ref 同步最新 playState，避免 usePageEvent 回调闭包拿到过期值
+  const playStateRef = useRef(playState);
+  playStateRef.current = playState;
+  usePageEvent('onShow', () => {
+    pageShownRef.current = true;
+    // 回到前台时刷新画质（试用）状态（方法内部会按 hideSmartImageQualityState 自行短路）
+    refreshSmartImageQuality();
+    // 已经在出流就直接启动；否则等 playState 变为 PLAYING 的 effect 再启动
+    if (playStateRef.current === PlayState.PLAYING) {
+      eventRef.current.emit(startTimeToHideAllComponent);
+    }
+  });
+  // 进入后台 停止播放器元素动画计时
+  usePageEvent('onHide', () => {
+    pageShownRef.current = false;
+    eventRef.current.emit(pauseTimeToHideAllComponent);
+  });
+
+  // 播放器正常出流后再开始自动隐藏倒计时（仅在前台时）
+  useEffect(() => {
+    if (pageShownRef.current && playState === PlayState.PLAYING) {
+      eventRef.current.emit(startTimeToHideAllComponent);
+    }
+  }, [playState]);
+
   /**
    * 监听屏幕布局变化
    */
@@ -660,14 +717,18 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
 
   /**
    * 右下角可见按钮数 → 右下角组件宽度（左下角同时用作右侧预留宽度）
-   * 1 个按钮: 115px / 2 个按钮: 132px / 0 个按钮: 0
+   * - 横屏: 固定 40%（用百分比，左下角自动按 100% - 40% = 60% 可视，溢出走横向滚动）
+   * - 竖屏: 1 个按钮 115px / 2+ 个按钮 132px / 0 个按钮 0
    */
   const bottomRightWidth = useMemo(() => {
+    if (screenType === 'full') {
+      return '40%';
+    }
     const visibleCount = (bottomRightContent || []).filter(item => !item.hidden).length;
     if (visibleCount <= 0) return 0;
     if (visibleCount === 1) return 115;
     return 132;
-  }, [bottomRightContent]);
+  }, [bottomRightContent, screenType]);
 
   /**
    * 视频流加载状态封装
@@ -774,9 +835,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setScaleMultiple(value);
   };
   const onTrialCountdownEnd = useMemoizedFn(() => {
-    updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
-      buttonState: 2
-    });
+    // updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience' as any, {
+    //   buttonState: 2,
+    // });
+    refreshSmartImageQuality();
   });
   useEffect(() => {
     eventRef.current.on(startTimeToHideAllComponent, listenStart);
@@ -788,6 +850,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     eventRef.current.on(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
     eventRef.current.on(setScaleMultipleEvent, onSetScaleMultiple);
     eventRef.current.on(trialCountdownEnd, onTrialCountdownEnd);
+    eventRef.current.on(refreshSmartImageQualityEvent, refreshSmartImageQuality);
     return () => {
       eventRef.current.off(startTimeToHideAllComponent, listenStart);
       eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
@@ -798,6 +861,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.off(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
       eventRef.current.off(setScaleMultipleEvent, onSetScaleMultiple);
       eventRef.current.off(trialCountdownEnd, onTrialCountdownEnd);
+      eventRef.current.off(refreshSmartImageQualityEvent, refreshSmartImageQuality);
       if (multiTapTimerRef.current) {
         clearTimeout(multiTapTimerRef.current);
         multiTapTimerRef.current = null;
@@ -896,12 +960,12 @@ 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;
       }
-      console.log('res===on onVideoTap', data);
+      console.log('res===on onVideoTap1', data);
       if (instance.multiCameraCtx.isSupport) {
         var _instance$multiCamera, _instance$multiCamera2;
         const preTapIndex = (_instance$multiCamera = (_instance$multiCamera2 = instance.multiCameraCtx.selectedLenInfoRef.current) === null || _instance$multiCamera2 === void 0 ? void 0 : _instance$multiCamera2.index) !== null && _instance$multiCamera !== void 0 ? _instance$multiCamera : prevSelectedIndexRef.current;
@@ -952,7 +1016,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     ,
     brandColor: brandColor,
     playerRoute: playerRoute,
-    defaultAutoPlay: defaultAutoPlay,
+    previewEnabled: previewEnabled,
+    onPreviewEnabledChange: onPreviewEnabledChange,
     limitFlow: limitFlow,
     autoWakeUp: autoWakeUp,
     extend: _objectSpread(_objectSpread({

package/lib/ui/ui.less

@@ -19,7 +19,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding-top: 12px;
+    // padding-top: 12px;
     z-index: 90;
     height: 60px;
     background: linear-gradient(360deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
@@ -157,7 +157,71 @@
   // 左下角子元素内容区域样式
   .ipc-player-bottom-left-content-container {
     display: flex;
-    flex-direction: inherit;
+    flex-direction: row;
+  }
+
+  // 左下角横滑提示箭头：仅在内容溢出且未滑到对应边缘时由 JS 控制显示
+  .ipc-player-bottom-left-scroll-hint-arrow {
+    width: 7px;
+    height: 7px;
+    animation: ipc-player-bottom-left-scroll-hint-pulse 1.4s ease-in-out infinite;
+  }
+
+  .ipc-player-bottom-left-scroll-hint-arrow--right {
+    border-top: 2px solid rgba(255, 255, 255, 0.95);
+    border-right: 2px solid rgba(255, 255, 255, 0.95);
+    transform: rotate(45deg);
+  }
+
+  .ipc-player-bottom-left-scroll-hint-arrow--left {
+    border-top: 2px solid rgba(255, 255, 255, 0.95);
+    border-left: 2px solid rgba(255, 255, 255, 0.95);
+    transform: rotate(-45deg);
+  }
+
+  // button 模式：半透明黑圆底（点击热区）
+  .ipc-player-bottom-left-scroll-hint--button {
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 50%;
+  }
+
+  // button 模式：白色箭头
+  .ipc-player-bottom-left-scroll-hint-arrow--light {
+    border-top-color: rgba(255, 255, 255, 0.95);
+    border-right-color: rgba(255, 255, 255, 0.95);
+    border-left-color: rgba(255, 255, 255, 0.95);
+  }
+
+  // button 模式：常显、不做渐隐渐显动画
+  .ipc-player-bottom-left-scroll-hint-arrow--static {
+    animation: none;
+    opacity: 1;
+  }
+
+  // 右边缘淡出：把没完全露出的元素渐隐到透明。写成静态类，避免内联 mask 在原生层反复重绘闪烁
+  .ipc-player-bottom-left-scroll-fademask {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - 72px),
+      rgba(0, 0, 0, 0.25) calc(100% - 24px),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - 72px),
+      rgba(0, 0, 0, 0.25) calc(100% - 24px),
+      transparent 100%
+    );
+  }
+
+  @keyframes ipc-player-bottom-left-scroll-hint-pulse {
+    0%,
+    100% {
+      opacity: 0.55;
+    }
+    50% {
+      opacity: 1;
+    }
   }
 
   // 右下角子元素内容区域样式
@@ -233,20 +297,20 @@
 
   // 左下角全屏子元素容器
   .bottom-left-item-full-container {
-    padding: 0 24px !important;
+    padding: 0 20px !important;
     flex-shrink: 0;
   }
 
   .bottom-left-item-full-container:first-of-type {
-    padding: 0 24px 0 16px !important;
+    padding: 0 20px 0 12px !important;
   }
 
   .bottom-left-item-full-container:last-of-type {
-    padding: 0 0 0 24px !important;
+    padding: 0 0 0 20px !important;
   }
 
   .bottom-left-item-full-container:only-of-type {
-    padding: 0 0 0 16px !important;
+    padding: 0 0 0 12px !important;
   }
 
   // 右下角子元素容器

package/lib/utils/navigation.js

@@ -11,7 +11,7 @@ export const miniIdLabs = {
 export function gotoAIDrawMiniProgram(devId, brandColor) {
   const color = new Color(brandColor);
   const rgbColor = color.rgb().toString();
-  const url = `godzilla://${miniIdLabs.aiDrawMini}${'/pages/home/index'}?deviceId=${devId}&themeColor=${rgbColor}`;
+  const url = `godzilla://${miniIdLabs.aiDrawMini}?deviceId=${devId}&themeColor=${rgbColor}`;
   goToMiniProgramByShortLink(url, 'right');
 }
 export async function gotoSecurityCloudService(homeId, uuid) {

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;
@@ -25,6 +25,7 @@ export type SetAIFrameFeatureParams = {
     devId: string;
     enabled: boolean;
     aiFrameFeature: AIFrameFeatureConfig;
+    scene: string;
 };
 export type GetAIFrameFeatureResult = {
     enabled: boolean;
@@ -33,8 +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 getDeviceInfoRay(devId: string): Promise<unknown>;
-export declare function getCurrentHomeInfoRay(): Promise<unknown>;
 export declare function setTrailFinish(devId: string): Promise<unknown>;
+export declare function isLowPhone(): Promise<boolean>;
+export declare function getNgRawData(): Promise<unknown>;

package/lib/utils/ttt.js

@@ -1,25 +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 => {
-          console.log('res===getSmartImageQualityState data', 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,
@@ -29,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 => {
@@ -47,61 +65,81 @@ export function setAIFrameFeature(params) {
         },
         fail: e => {
           console.warn('res===setAIFrameFeature fail', e);
-          resolve(undefined);
+          resolve(null);
         }
       }));
     } catch (e) {
-      resolve(undefined);
+      resolve(null);
     }
   });
 }
-export function getDeviceInfoRay(devId) {
+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.device.getDeviceInfo({
-        deviceId: devId,
+      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 getCurrentHomeInfoRay() {
+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.home.getCurrentHomeInfo({
+      ty.ipc.isLowPhone({
         success: res => {
-          resolve(res);
+          var _res$isLow;
+          resolve((_res$isLow = res === null || res === void 0 ? void 0 : res.isLow) !== null && _res$isLow !== void 0 ? _res$isLow : false);
         },
         fail: () => {
-          resolve(undefined);
+          resolve(false);
         }
       });
     } catch (e) {
-      resolve(undefined);
+      resolve(false);
     }
   });
 }
-export function setTrailFinish(devId) {
+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.ipc.setTrailFinish({
-        devId,
+      ty.getNgRawData({
+        rawKey: 'is_smart_image_quality',
         success: res => {
-          resolve(res);
+          resolve((res === null || res === void 0 ? void 0 : res.rawData) === 'true');
         },
         fail: () => {
-          resolve(undefined);
+          resolve(false);
         }
       });
     } catch (e) {
-      resolve(undefined);
+      resolve(false);
     }
   });
 }

package/lib/widgets/trialBadge/index.d.ts

@@ -6,12 +6,10 @@ type Props = {
     brandColor?: string;
     /** 试看倒计时初始秒数，来源于 smartImageQualityState.trialRemainingSec */
     trialRemainingSec?: number;
-    /** 刷新令牌，变化时重置倒计时状态 */
-    refreshToken?: number;
     /** 点击「开通」按钮回调 */
     onSubscribe?: () => void;
     /** 倒计时归零时触发，本组件保证整个生命周期内只回调一次 */
     onCountdownEnd?: () => void;
 };
-export declare const TrialBadge: ({ className, brandColor, trialRemainingSec, refreshToken, onSubscribe, onCountdownEnd, }: Props) => React.JSX.Element;
+export declare const TrialBadge: ({ className, brandColor, trialRemainingSec, onSubscribe, onCountdownEnd, }: Props) => React.JSX.Element;
 export { useTrialBadge } from './useTrialBadge';

package/lib/widgets/trialBadge/index.js

@@ -18,21 +18,24 @@ export const TrialBadge = _ref => {
     className,
     brandColor = FALLBACK_BRAND_COLOR,
     trialRemainingSec = 0,
-    refreshToken,
     onSubscribe,
     onCountdownEnd
   } = _ref;
   const [remainingSec, setRemainingSec] = useState(Math.max(0, Math.floor(trialRemainingSec)));
-  /** 防止 onCountdownEnd 被重复触发；同时持有最新回调，避免依赖变化导致 effect 重跑 */
   const endedRef = useRef(false);
   const onCountdownEndRef = useRef(onCountdownEnd);
   onCountdownEndRef.current = onCountdownEnd;
+  const startTimeRef = useRef(Date.now());
+  const initialSecRef = useRef(Math.max(0, Math.floor(trialRemainingSec)));
   useEffect(() => {
+    const sec = Math.max(0, Math.floor(trialRemainingSec));
     endedRef.current = false;
-    setRemainingSec(Math.max(0, Math.floor(trialRemainingSec)));
-  }, [trialRemainingSec, refreshToken]);
+    initialSecRef.current = sec;
+    startTimeRef.current = Date.now();
+    setRemainingSec(sec);
+  }, [trialRemainingSec]);
   useEffect(() => {
-    if (remainingSec <= 0) {
+    if (trialRemainingSec <= 0) {
       if (!endedRef.current) {
         var _onCountdownEndRef$cu;
         endedRef.current = true;
@@ -41,22 +44,20 @@ export const TrialBadge = _ref => {
       return undefined;
     }
     const timer = setInterval(() => {
-      setRemainingSec(prev => {
-        const next = prev - 1;
-        if (next <= 0) {
-          clearInterval(timer);
-          if (!endedRef.current) {
-            var _onCountdownEndRef$cu2;
-            endedRef.current = true;
-            (_onCountdownEndRef$cu2 = onCountdownEndRef.current) === null || _onCountdownEndRef$cu2 === void 0 || _onCountdownEndRef$cu2.call(onCountdownEndRef);
-          }
-          return 0;
+      const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+      const next = Math.max(0, initialSecRef.current - elapsed);
+      setRemainingSec(next);
+      if (next <= 0) {
+        clearInterval(timer);
+        if (!endedRef.current) {
+          var _onCountdownEndRef$cu2;
+          endedRef.current = true;
+          (_onCountdownEndRef$cu2 = onCountdownEndRef.current) === null || _onCountdownEndRef$cu2 === void 0 || _onCountdownEndRef$cu2.call(onCountdownEndRef);
         }
-        return next;
-      });
+      }
     }, 1000);
     return () => clearInterval(timer);
-  }, [trialRemainingSec, refreshToken]);
+  }, [trialRemainingSec]);
   const countdownText = formatCountdown(remainingSec);
   return /*#__PURE__*/React.createElement(View, {
     className: clsx('ipc-player-trial-badge', className)
@@ -75,10 +76,7 @@ export const TrialBadge = _ref => {
     style: {
       backgroundColor: brandColor
     },
-    onClick: e => {
-      if (e && typeof e.stopPropagation === 'function') {
-        e.stopPropagation();
-      }
+    onClick: () => {
       onSubscribe === null || onSubscribe === void 0 || onSubscribe();
     }
   }, /*#__PURE__*/React.createElement(Text, {

package/lib/widgets/trialBadge/index.less

@@ -1,13 +1,23 @@
+@keyframes ipc-player-trial-badge-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
 .ipc-player-trial-badge {
   display: inline-flex;
   align-items: center;
-  height: 28px;
-  padding: 0 4px 0 8px;
-  border-radius: 6px;
+  height: 32px;
+  padding: 0 6px 0 8px;
+  border-radius: 8px;
   background: rgba(0, 0, 0, 0.65);
   flex-shrink: 0;
   vertical-align: middle;
   white-space: nowrap;
+  animation: ipc-player-trial-badge-slide-in 0.3s linear;
 }
 
 .ipc-player-trial-badge-icon {
@@ -43,9 +53,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 22px;
-  padding: 0 10px;
-  border-radius: 11px;
+  min-width: 44px;
+  min-height: 28px;
+  padding: 0 12px;
+  border-radius: 14px;
   flex-shrink: 0;
 }