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

package/lib/ui/ui.js

@@ -1,5 +1,6 @@
 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.map.js";
 import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
 import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation, getCurrentPages } from '@ray-js/ray';
@@ -11,7 +12,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 } 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';
@@ -21,7 +22,7 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { isSmallScreen } from '../utils';
+import { getSmartImageQualityState, isLowPhone } from '../utils/ttt';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -102,8 +103,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
   const reGetOrientationTimer = useRef(null);
-  const [scaleMultiple, setScaleMultiple] = useState(playerFit === 'contain' ? 1 : -2);
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
+  // 统一调整为1倍缩放，保证画面展示完全
+  const [scaleMultiple, setScaleMultiple] = useState(1);
+  // 统一调整为1倍缩放，保证画面展示完全
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
   const [createCtx, setCreateCtx] = useState(false);
   // 是否需要忽略进入后台停止预览
   const [ignoreStopOnHide, setIgnoreStopOnHide] = useState(ignoreHideStopPreview);
@@ -111,9 +114,29 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
   // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
+  const isLowPhoneRef = useRef(false);
+  useEffect(() => {
+    isLowPhone().then(res => {
+      isLowPhoneRef.current = !!res;
+    });
+  }, []);
+
   // 展示顶部内容
   const [showTopContent, setShowTopContent] = useState(true);
 
+  // pad / 折叠屏小窗口展示面板的情况；getSystemInfoSync 在 onLoad 之后才有准确值，
+  // 这里给安全默认 false，由 onLoad / onResize 实际计算并更新
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const computeIsSmallScreen = useMemoizedFn(() => {
+    const {
+      windowWidth,
+      screenWidth,
+      windowHeight
+    } = getSystemInfoSync();
+    // 取小屏值判断是最准确的 pad / 折叠屏小窗口情况
+    return !(screenWidth === windowWidth || screenWidth === windowHeight);
+  });
+
   // 外部传入的ignoreHideStopPreview变化时，同步更新
   useEffect(() => {
     setIgnoreStopOnHide(ignoreHideStopPreview);
@@ -405,8 +428,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.emit(showAllComponent);
       eventRef.current.emit('disablePlayerTap', true);
       eventRef.current.emit(pauseTimeToHideAllComponent);
-      // 按宽填充，保证播放流宽度为屏幕宽度，高度自适应
-      setScaleMultiple(-1);
+      // 按宽填充，保证播放流宽度为屏幕宽度，高度自适应设为1倍
+      setScaleMultiple(1);
     } else {
       // 短屏或横屏时，恢复自动隐藏
       eventRef.current.emit('disablePlayerTap', false);
@@ -415,14 +438,42 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [isVerticalFullLayout, screenType, playerFit]);
   useEffect(() => {
     if (createCtx) {
-      setScaleMultiple(playerFit === 'contain' ? 1 : -2);
-      setCurrentZoomLevel(playerFit === 'contain' ? 1 : -2);
+      // 统一调整为1倍缩放，保证画面展示完全
+      setScaleMultiple(1);
+      setCurrentZoomLevel(1);
     }
   }, [playerFit, createCtx]);
   useEffect(() => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, [brandColor, verticalMic]);
+  const refreshSmartImageQuality = useMemoizedFn(async () => {
+    let res = await getSmartImageQualityState(devId);
+    console.log('res===refreshSmartImageQuality1', res);
+    // if (res === undefined) return;
+    // TODO: TEST
+    if (res === undefined) {
+      res = {
+        isPurchase: false,
+        buttonState: 0,
+        trialRemainingSec: 20,
+        canOpenSettings: true
+      };
+    }
+    updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
+      isPurchase: res.isPurchase,
+      buttonState: res.buttonState,
+      trialRemainingSec: res.trialRemainingSec,
+      canOpenSettings: res.canOpenSettings,
+      isLowPhone: isLowPhoneRef.current,
+      refreshToken: Date.now()
+    });
+  });
+  useEffect(() => {
+    if (playState === PlayState.PLAYING) {
+      refreshSmartImageQuality();
+    }
+  }, [instance, playState]);
   const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
@@ -452,6 +503,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 监听播放器实例创建完成
    */
 
+  /**
+   * 页面 onLoad 后才能拿到准确的 systemInfo，这里第一次确定小屏状态
+   */
+  usePageEvent('onLoad', () => {
+    setIsSmallScreen(computeIsSmallScreen());
+  });
+
   /**
    * 监听屏幕布局变化
    */
@@ -465,8 +523,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       const {
         type
       } = sizeData;
+
+      // 折叠屏展开/收起、pad 多窗口拖拽等场景，需要重新计算并同步
+      const small = computeIsSmallScreen();
+      setIsSmallScreen(small);
+
       //  针对pad 和折叠屏展开的情况暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
-      if (isSmallScreen) {
+      if (small) {
         setScreenType('vertical');
       } else {
         setScreenType(type === 'landscape' ? 'full' : 'vertical');
@@ -481,19 +544,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         }
         triggerEvent(showAllComponent);
       }
-      // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
-      if (type === 'landscape' && landscapeMode === 'fill') {
-        console.log(scaleMultiple, '===========fill');
-        setScaleMultiple(-1);
-      } else if (type === 'landscape' && landscapeMode === 'standard') {
-        console.log(scaleMultiple, '===========landscape');
-        setScaleMultiple(-2);
-      } else {
-        // 竖屏时 将屏幕播放比例设为按宽按高
-
-        console.log(scaleMultiple, '===========landscape');
-        setScaleMultiple(playerFit === 'contain' ? scaleMultiple === 1 ? -1 : 1 : -2);
-      }
+      // 横屏（fill/standard）与竖屏均统一调整为 1 倍缩放，保证画面完整展示
+      setScaleMultiple(1);
     } catch (err) {
       console.log(err, 'err');
     }
@@ -622,7 +674,18 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       // 添加通用变量单独组件类名
       className: clsx('bottom-right-item-container')
     })));
-  }, [bottomLeftContent, instance]);
+  }, [bottomRightContent, instance]);
+
+  /**
+   * 右下角可见按钮数 → 右下角组件宽度（左下角同时用作右侧预留宽度）
+   * 1 个按钮: 115px / 2 个按钮: 132px / 0 个按钮: 0
+   */
+  const bottomRightWidth = useMemo(() => {
+    const visibleCount = (bottomRightContent || []).filter(item => !item.hidden).length;
+    if (visibleCount <= 0) return 0;
+    if (visibleCount === 1) return 115;
+    return 132;
+  }, [bottomRightContent]);
 
   /**
    * 视频流加载状态封装
@@ -646,10 +709,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
     }
     if (playState === PlayState.PLAYING) {
-      // 仅在第一次播放成功时，针对竖屏并且为cover模式时，设置为-2
+      // 仅在第一次播放成功时，针对竖屏并且为cover模式时，设置为-2 修改为只针对第一次播放成功时
       console.log('Playing状态');
-      if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
-        setScaleMultiple(-2);
+      // if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
+      if (!hasPlayedRef.current) {
+        // 统一调整为1倍缩放，保证画面展示完全
+        setScaleMultiple(1);
         hasPlayedRef.current = true;
       }
     }
@@ -726,6 +791,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   const onSetScaleMultiple = value => {
     setScaleMultiple(value);
   };
+  const onTrialCountdownEnd = useMemoizedFn(() => {
+    updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
+      buttonState: 2
+    });
+  });
   useEffect(() => {
     eventRef.current.on(startTimeToHideAllComponent, listenStart);
     eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
@@ -735,6 +805,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     eventRef.current.on('refreshBottomLeft', refreshBottomLeft);
     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);
@@ -744,6 +816,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.off('refreshBottomLeft', refreshBottomLeft);
       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;
@@ -758,14 +832,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   /**
    * 监听当前的zoom比例状态
    */
-  // useEffect(() => {
-  //   if (screenType === 'vertical') {
-  //     console.log(currentZoomLevel, '竖屏时的缩放比例');
-  //     setVerticalZoomLevel(currentZoomLevel);
-  //     // setScaleMultiple(currentZoomLevel);
-  //   }
-  // }, [screenType, currentZoomLevel]);
-
   const onZoomChange = useMemoizedFn(data => {
     const {
       zoomLevel,
@@ -776,30 +842,19 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     if (zoomLevel === 0) {
       return false;
     }
-    /**
-     * 针对竖屏为cover模式时，横屏为standard模式时，主动设置缩放比例，避免因值不能正常变化
-     */
-    if (scaleMode === -2 && playerFit === 'cover' && screenType === 'vertical' && landscapeMode === 'standard') {
-      console.log('dsadsadsad----', zoomLevel);
-      setScaleMultiple(zoomLevel);
-    }
     /**
      * 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
      */
-    if (scaleMode === -1 && playerFit === 'contain' && screenType === 'vertical' && landscapeMode === 'fill') {
-      setVerticalCoverZoom(zoomLevel);
-    }
+    // if (
+    //   scaleMode === -1 &&
+    //   playerFit === 'contain' &&
+    //   screenType === 'vertical' &&
+    //   landscapeMode === 'fill'
+    // ) {
+    //   setVerticalCoverZoom(zoomLevel);
+    // }
 
-    /**
-     * 横屏情况下 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
-     */
-    if (scaleMode === -2 && playerFit === 'cover' && screenType !== 'vertical' && landscapeMode === 'standard') {
-      setScaleMultiple(zoomLevel);
-    }
-    if (scaleMode === -1 && playerFit === 'contain' && screenType !== 'vertical' && landscapeMode === 'fill') {
-      setVerticalCoverZoom(zoomLevel);
-      setScaleMultiple(zoomLevel);
-    }
+    // 直接记录当前缩放比例
     setCurrentZoomLevel(zoomLevel);
     instance.event.emit(zoomLevelChange, zoomLevel);
     return false;
@@ -945,9 +1000,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       height: screenType === 'vertical' ? '48px' : '72px'
     }
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
-    ctx: instance
+    ctx: instance,
+    reservedRight: bottomRightWidth
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
-    ctx: instance
+    ctx: instance,
+    width: bottomRightWidth
   }, renderBottomRightContent))), (() => {
     if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
     return absoluteContent.map(item => {

package/lib/ui/ui.less

@@ -58,7 +58,7 @@
   }
 
   .ipc-player-bottom-content-hide {
-    transform: translate(0, 110%);
+    transform: translate(0, 100%);
     transition: transform 0.3s ease-in-out;
   }
 
@@ -214,6 +214,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    // 左下角支持横向滚动；不允许子项被压缩，否则在 width:100% 的滚动容器里
+    // 子项会被挤而不是触发横滑
+    flex-shrink: 0;
   }
 
   .bottom-left-item-container:first-of-type {
@@ -231,6 +234,7 @@
   // 左下角全屏子元素容器
   .bottom-left-item-full-container {
     padding: 0 24px !important;
+    flex-shrink: 0;
   }
 
   .bottom-left-item-full-container:first-of-type {

package/lib/utils/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="jest" />
-export declare const isSmallScreen: boolean;
 /**
  * 麦克风对讲按钮径向渐变
  */
@@ -15,3 +14,5 @@ export declare const promisify: <TParams extends Record<string, any>, TSuccessRe
     complete?: (() => void) | undefined;
 }) => void) => (params: Omit<TParams, "complete" | "success" | "fail">) => Promise<TSuccessResult>;
 export * from './videoSplitHelper';
+export * from './navigation';
+export * from './ttt';

package/lib/utils/index.js

@@ -1,14 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { getSystemInfoSync } from '@ray-js/ray';
-const {
-  windowWidth,
-  screenWidth,
-  windowHeight
-} = getSystemInfoSync();
-
-// pad和折叠屏小窗口展示面板的情况
-export const isSmallScreen = !(screenWidth === windowWidth || screenWidth === windowHeight);
-
 /**
  * 麦克风对讲按钮径向渐变
  */
@@ -47,4 +37,6 @@ export const promisify = apiFunction => {
     });
   };
 };
-export * from './videoSplitHelper';
+export * from './videoSplitHelper';
+export * from './navigation';
+export * from './ttt';

package/lib/utils/navigation.d.ts

@@ -0,0 +1,7 @@
+export declare const miniIdLabs: {
+    aiDrawMini: string;
+    securityCloudService: string;
+};
+export declare function gotoAIDrawMiniProgram(devId: string, brandColor: string): void;
+export declare function gotoSecurityCloudService(homeId: string, uuid: string): Promise<void>;
+export declare function gotoSecurityCloudService2(devId: string): Promise<import("@ray-js/ray-ipc-utils/lib/interface").IRes<unknown>>;

package/lib/utils/navigation.js

@@ -0,0 +1,23 @@
+import { getServiceUrl, goToMiniProgramByShortLink } from '@ray-js/ray-ipc-utils';
+import Color from 'color';
+
+// 小程序ID集合
+export const miniIdLabs = {
+  // ai智能画质
+  aiDrawMini: 'tyjo8cvir22cc0yech',
+  // security_cloud_service, 增值服务商城小程序ID
+  securityCloudService: 'tyeavwo0j4oocvdrf1'
+};
+export function gotoAIDrawMiniProgram(devId, brandColor) {
+  const color = new Color(brandColor);
+  color.rgb().toString();
+  const url = `godzilla://${miniIdLabs.aiDrawMini}${'/pages/smartImageQuality/index'}?deviceId=${devId}`;
+  goToMiniProgramByShortLink(url, 'right');
+}
+export async function gotoSecurityCloudService(homeId, uuid) {
+  const url = `godzilla://${miniIdLabs.securityCloudService}${'/pages/serviceList/index'}?homeId=${homeId}&deviceId=${uuid}&categoryCode=${'security_cloud_service'}`;
+  goToMiniProgramByShortLink(url, 'right');
+}
+export async function gotoSecurityCloudService2(devId) {
+  return getServiceUrl(devId, 'security_cloud_service', {}, true);
+}

package/lib/utils/ttt.d.ts

@@ -0,0 +1,42 @@
+export type SmartImageQualityResult = {
+    isPurchase: boolean;
+    buttonState: number;
+    trialRemainingSec: number;
+    canOpenSettings: boolean;
+};
+export declare function getSmartImageQualityState(devId: string): Promise<SmartImageQualityResult>;
+export type AIFrameFeatureScope = {
+    inPreview: boolean;
+    inMessage: boolean;
+    inPlayback: boolean;
+    inCloudData: boolean;
+};
+export type AIFrameFeatureDetail = {
+    srModelStatus: number;
+    lightModelStatus: number;
+    filterStatus: number;
+};
+export type AIFrameFeatureConfig = {
+    scope: AIFrameFeatureScope;
+    feature: AIFrameFeatureDetail;
+    exportEnabled: boolean;
+};
+export type SetAIFrameFeatureParams = {
+    devId: string;
+    enabled: boolean;
+    aiFrameFeature: AIFrameFeatureConfig;
+    scene: string;
+};
+export type GetAIFrameFeatureResult = {
+    enabled: boolean;
+    aiFrameFeature: AIFrameFeatureConfig;
+    requestId: string;
+    localPath: string;
+    thingFileUri: string;
+};
+export declare function getAIFrameFeature(devId: string): Promise<GetAIFrameFeatureResult>;
+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>;

package/lib/utils/ttt.js

@@ -0,0 +1,123 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export function getSmartImageQualityState(devId) {
+  return new Promise(resolve => {
+    try {
+      ty.ipc.getSmartImageQualityState({
+        devId,
+        scene: 'inPreview',
+        success: data => {
+          console.log('res===getSmartImageQualityState data', data);
+          resolve(data);
+        },
+        fail: () => {
+          resolve(undefined);
+        }
+      });
+    } catch (e) {
+      resolve(undefined);
+    }
+  });
+}
+export function getAIFrameFeature(devId) {
+  return new Promise(resolve => {
+    try {
+      ty.ipc.getAIFrameFeature({
+        devId,
+        success: data => {
+          console.log('res===getAIFrameFeature data', data);
+          resolve(data);
+        },
+        fail: e => {
+          console.warn('res===getAIFrameFeature fail', e);
+          resolve(undefined);
+        }
+      });
+    } catch (e) {
+      resolve(undefined);
+    }
+  });
+}
+export function setAIFrameFeature(params) {
+  return new Promise(resolve => {
+    try {
+      ty.ipc.setAIFrameFeature(_objectSpread(_objectSpread({}, params), {}, {
+        success: data => {
+          console.log('res===setAIFrameFeature data', data);
+          resolve(data);
+        },
+        fail: e => {
+          console.warn('res===setAIFrameFeature fail', e);
+          resolve(undefined);
+        }
+      }));
+    } 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);
+    }
+  });
+}
+export function setTrailFinish(devId) {
+  return new Promise(resolve => {
+    try {
+      ty.ipc.setTrailFinish({
+        devId,
+        success: res => {
+          resolve(res);
+        },
+        fail: () => {
+          resolve(undefined);
+        }
+      });
+    } catch (e) {
+      resolve(undefined);
+    }
+  });
+}
+export function isLowPhone() {
+  return new Promise(resolve => {
+    try {
+      ty.device.isLowPhone({
+        success: res => {
+          resolve(res);
+        },
+        fail: () => {
+          resolve(false);
+        }
+      });
+    } catch (e) {
+      resolve(false);
+    }
+  });
+}

package/lib/widgets/index.d.ts

@@ -10,6 +10,8 @@ export * from './voiceIntercom';
 export * from './muted';
 export * from './floodlight';
 export * from './siren';
+export * from './tryExperience';
+export * from './trialBadge';
 export * from './ptz';
 export * from './resolution';
 export * from './fullSmallIntercom';

package/lib/widgets/index.js

@@ -10,6 +10,8 @@ export * from './voiceIntercom';
 export * from './muted';
 export * from './floodlight';
 export * from './siren';
+export * from './tryExperience';
+export * from './trialBadge';
 export * from './ptz';
 export * from './resolution';
 export * from './fullSmallIntercom';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+type Props = {
+    className?: string;
+    /** 主题色（用于「开通」按钮背景）。默认与 player brandColor 一致 */
+    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 { useTrialBadge } from './useTrialBadge';