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

package/lib/features/initPlayerWidgets/index.d.ts

@@ -8,18 +8,12 @@ export type InitPlayerWidgetsOptions = {
     hideScreenShotMenu?: boolean;
     hideRecordVideoMenu?: boolean;
     hideResolutionMenu?: boolean;
-    hideTryExperienceMenu?: boolean;
     hideKbsMenu?: boolean;
     hideSignalMenu?: boolean;
     showToggleVerticalFull?: boolean;
     showRealTimeMagnification?: boolean;
     directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
-    smartImageQualityState?: {
-        isPurchase: boolean;
-        buttonState: number;
-        trialRemainingSec: number;
-        canOpenSettings: boolean;
-    };
+    hideSmartImageQualityState?: boolean;
     topLeftContent?: ComponentConfig[];
     topRightContent?: ComponentConfig[];
     bottomLeftContent?: ComponentConfig[];

package/lib/features/initPlayerWidgets/index.js

@@ -21,12 +21,10 @@ export async function initPlayerWidgets(ctx, options) {
   const screenShotIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'Screenshot');
   const recordVideoIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'RecordVideo');
   if (tryExperienceIndex !== -1) {
-    var _options$smartImageQu, _options$smartImageQu2;
+    var _options$hideSmartIma;
     // @ts-ignore
     newDefaultBottomLeftContent[tryExperienceIndex].initProps = {
-      hideTryExperienceMenu: options.hideTryExperienceMenu,
-      buttonState: (_options$smartImageQu = options.smartImageQualityState) === null || _options$smartImageQu === void 0 ? void 0 : _options$smartImageQu.buttonState,
-      trialRemainingSec: (_options$smartImageQu2 = options.smartImageQualityState) === null || _options$smartImageQu2 === void 0 ? void 0 : _options$smartImageQu2.trialRemainingSec
+      hideTryExperienceMenu: (_options$hideSmartIma = options.hideSmartImageQualityState) !== null && _options$hideSmartIma !== void 0 ? _options$hideSmartIma : true
     };
   }
   if (resolutionIndex !== -1) {
@@ -54,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

@@ -32,6 +32,8 @@ declare const Strings: kit.I18N<{
         ipc_player_trial_in_use: string;
         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;
@@ -65,6 +67,8 @@ declare const Strings: kit.I18N<{
         ipc_player_trial_in_use: string;
         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;
@@ -98,6 +102,8 @@ declare const Strings: kit.I18N<{
     ipc_player_trial_in_use: string;
     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;
@@ -130,5 +136,7 @@ declare const Strings: kit.I18N<{
     ipc_player_trial_in_use: string;
     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

@@ -31,6 +31,8 @@ declare const _default: {
         ipc_player_trial_in_use: string;
         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;
@@ -64,6 +66,8 @@ declare const _default: {
         ipc_player_trial_in_use: string;
         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

@@ -29,8 +29,10 @@ export default {
     ipc_player_ptz_moveable_tip_text: 'Hold the middle to drag the direction control area',
     ipc_player_flow_low_tip: 'The device’s remaining data is below 200MB. Please recharge as soon as possible.',
     ipc_player_trial_in_use: 'Trial',
-    ipc_player_trial_preview_text: 'Preview',
-    ipc_player_trial_subscribe: 'Open'
+    ipc_player_trial_preview_text: 'End',
+    ipc_player_trial_subscribe: 'Open',
+    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: '高清',
@@ -62,7 +64,9 @@ export default {
     ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域',
     ipc_player_flow_low_tip: '设备当前剩余流量不足200M，请尽快充值',
     ipc_player_trial_in_use: '试用中',
-    ipc_player_trial_preview_text: '试看剩余',
-    ipc_player_trial_subscribe: '开通'
+    ipc_player_trial_preview_text: '后结束',
+    ipc_player_trial_subscribe: '开通',
+    ipc_player_fetch_error: '获取异常',
+    ipc_player_low_phone_not_support: '当前设备不支持此功能'
   }
 };

package/lib/ui/bottomLeftContent.d.ts

@@ -5,6 +5,7 @@ type Props = {
     children: React.ReactNode;
     /** 右下角组件占据的宽度（px），左下角通过该值约束自身可视宽度，避免与右下角重叠 */
     reservedRight?: number;
+    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';
@@ -8,34 +7,17 @@ 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%)';
+const FADE_MASK = 'linear-gradient(to right, #000 calc(100% - 48px), transparent 100%)';
 
-/**
- * 试用徽章在不同 screenType 下的容器样式。
- * 「贴在底栏顶部」的策略一致（bottom: 100%），只是 left / marginBottom
- * 等数值按横竖屏不同的边距规则做差异化处理。
- */
-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'
-};
+/** TrialBadge 组件高度 40px + 间距 */
+const BADGE_HEIGHT_VERTICAL = 44;
+const BADGE_HEIGHT_FULL = 48;
 const BottomLeftContent = _ref => {
   let {
     ctx,
     children,
-    reservedRight = 0
+    reservedRight = 0,
+    canOpenSettings = true
   } = _ref;
   const {
     screenType,
@@ -47,38 +29,59 @@ const BottomLeftContent = _ref => {
     brandColor: ctx.brandColor,
     bottomLeftContent: ctx.bottomLeftContent
   });
+  const showSmartImageQuality = useMemo(() => {
+    var _tryExp$initProps;
+    const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
+    return !(tryExp !== null && tryExp !== void 0 && (_tryExp$initProps = tryExp.initProps) !== null && _tryExp$initProps !== void 0 && _tryExp$initProps.hideTryExperienceMenu);
+  }, [bottomLeftContent]);
   const trialRemainingSec = useMemo(() => {
-    var _trialRemainingSec, _tryExp$initProps;
+    var _trialRemainingSec, _tryExp$initProps2;
+    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 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 (_trialRemainingSec = tryExp === null || tryExp === void 0 || (_tryExp$initProps = tryExp.initProps) === null || _tryExp$initProps === void 0 ? void 0 : _tryExp$initProps.trialRemainingSec) !== null && _trialRemainingSec !== void 0 ? _trialRemainingSec : 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();
-
-  // 横竖屏共用同一份徽章状态、回调；TrialBadge 实例不随 screenType 切换而重挂载，
-  // 倒计时与可见性可在横竖屏切换之间保持一致
   const {
     showTrialBadge,
     handleTrialSubscribe,
     handleCountdownEnd
-  } = useTrialBadge(ctx.event, trialRemainingSec);
+  } = 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 bottomBarHeight = screenType === 'vertical' ? 40 : 58;
+  const badgeAreaHeight = screenType === 'vertical' ? BADGE_HEIGHT_VERTICAL : BADGE_HEIGHT_FULL;
+  const containerHeight = showBadge ? `${bottomBarHeight + badgeAreaHeight}px` : `${bottomBarHeight}px`;
   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'
-    }
-  }, showTrialBadge && /*#__PURE__*/React.createElement(View, {
-    className: clsx('bottom-left-item-container'),
-    style: _objectSpread(_objectSpread({}, trialBadgeWrapStyle), {}, {
-      transform: shouldHide ? 'translateY(40px)' : 'translateY(0)',
+      height: containerHeight,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
       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: {
+      paddingLeft: screenType === 'vertical' ? '0px' : '25px',
+      marginBottom: screenType === 'vertical' ? '4px' : '8px',
+      marginLeft: '12px'
+    }
   }, /*#__PURE__*/React.createElement(TrialBadge, {
     brandColor: brandColor,
     trialRemainingSec: trialRemainingSec,
@@ -88,6 +91,7 @@ const BottomLeftContent = _ref => {
     style: {
       paddingBottom: screenType === 'vertical' ? '14px' : '32px',
       paddingLeft: `${paddingLeftPx}px`,
+      paddingRight: '16px',
       width: '100%',
       overflowX: 'auto',
       overflowY: 'hidden',
@@ -96,10 +100,7 @@ const BottomLeftContent = _ref => {
       WebkitMaskImage: FADE_MASK,
       maskImage: FADE_MASK
     },
-    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/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';

package/lib/ui/ui.js

@@ -12,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';
@@ -22,7 +22,7 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { isSmallScreen } from '../utils';
+import { getNgRawData, getSmartImageQualityState, isLowPhone } from '../utils/ttt';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -103,18 +103,37 @@ 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);
   const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
-  // 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);
@@ -406,8 +425,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);
@@ -416,14 +435,47 @@ 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 () => {
+    const res = await getSmartImageQualityState(devId);
+    if (res === undefined) return;
+    // 调试时使用
+    // res = {
+    //   isPurchase: false,
+    //   buttonState: 0,
+    //   trialRemainingSec: 20,
+    //   canOpenSettings: true,
+    // };
+    const getNgRes = await getNgRawData();
+    console.log('res===getNgRes111', res, getNgRes);
+    updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
+      isPurchase: res.isPurchase,
+      buttonState: res.buttonState,
+      trialRemainingSec: res.trialRemainingSec,
+      canOpenSettings: res.canOpenSettings,
+      gRawData: !!getNgRes,
+      isLowPhone: isLowPhoneRef.current
+    });
+  });
+  const siqInitRef = useRef(false);
+  useEffect(() => {
+    if (playState === PlayState.PLAYING) {
+      if (!siqInitRef.current) {
+        siqInitRef.current = true;
+        refreshSmartImageQuality();
+      }
+    } else {
+      siqInitRef.current = false;
+    }
+  }, [instance, playState]);
   const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
@@ -453,6 +505,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 监听播放器实例创建完成
    */
 
+  /**
+   * 页面 onLoad 后才能拿到准确的 systemInfo，这里第一次确定小屏状态
+   */
+  usePageEvent('onLoad', () => {
+    setIsSmallScreen(computeIsSmallScreen());
+  });
+
   /**
    * 监听屏幕布局变化
    */
@@ -466,8 +525,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');
@@ -482,19 +546,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');
     }
@@ -658,10 +711,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;
       }
     }
@@ -738,6 +793,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);
@@ -747,6 +807,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);
@@ -756,6 +818,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;
@@ -770,14 +834,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,
@@ -788,30 +844,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;
@@ -878,7 +923,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         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;
@@ -956,7 +1001,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     style: {
       height: screenType === 'vertical' ? '48px' : '72px'
     }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, playerReady && /*#__PURE__*/React.createElement(BottomLeftContent, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
     ctx: instance,
     reservedRight: bottomRightWidth
   }, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {

package/lib/ui/ui.less

@@ -157,7 +157,7 @@
   // 左下角子元素内容区域样式
   .ipc-player-bottom-left-content-container {
     display: flex;
-    flex-direction: inherit;
+    flex-direction: row;
   }
 
   // 右下角子元素内容区域样式

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);
+  const rgbColor = color.rgb().toString();
+  const url = `godzilla://${miniIdLabs.aiDrawMini}?deviceId=${devId}&themeColor=${rgbColor}`;
+  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,43 @@
+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>;
+export declare function getNgRawData(): Promise<unknown>;

package/lib/utils/ttt.js

@@ -0,0 +1,139 @@
+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 => {
+          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);
+    }
+  });
+}
+export function getNgRawData() {
+  return new Promise(resolve => {
+    try {
+      ty.getNgRawData({
+        rawKey: 'is_smart_image_quality',
+        success: res => {
+          resolve(res);
+        },
+        fail: () => {
+          resolve(false);
+        }
+      });
+    } catch (e) {
+      resolve(false);
+    }
+  });
+}

package/lib/widgets/trialBadge/index.js

@@ -22,15 +22,21 @@ export const TrialBadge = _ref => {
     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(() => {
-    setRemainingSec(Math.max(0, Math.floor(trialRemainingSec)));
+    console.log('res===trialRemainingSec', trialRemainingSec);
+    const sec = Math.max(0, Math.floor(trialRemainingSec));
+    endedRef.current = false;
+    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;
@@ -39,19 +45,17 @@ 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]);
@@ -68,15 +72,12 @@ export const TrialBadge = _ref => {
     className: "ipc-player-trial-badge-divider"
   }, "|"), /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-trial-badge-preview"
-  }, `${Strings.getLang('ipc_player_trial_preview_text')} ${countdownText}`), /*#__PURE__*/React.createElement(View, {
+  }, `${countdownText} ${Strings.getLang('ipc_player_trial_preview_text')}`), /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-trial-badge-cta",
     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,9 +1,9 @@
 .ipc-player-trial-badge {
   display: inline-flex;
   align-items: center;
-  height: 28px;
-  padding: 0 4px 0 8px;
-  border-radius: 6px;
+  height: 40px;
+  padding: 0 6px 0 8px;
+  border-radius: 8px;
   background: rgba(0, 0, 0, 0.65);
   flex-shrink: 0;
   vertical-align: middle;
@@ -43,9 +43,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;
 }
 

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

@@ -1,16 +1,8 @@
 /// <reference types="react" />
 import type { EventInstance } from '../../interface';
-/**
- * 试用徽章共享 Hook：vertical / full 两种 screenType 下共用同一份状态、回调和方法。
- *
- * - `showTrialBadge`：是否展示徽章；仅当 0 < trialRemainingSec < 300 时展示，倒计时归零会自动置 false。
- * - `handleTrialSubscribe`：「开通」按钮点击回调。
- * - `handleCountdownEnd`：倒计时归零回调，内部会广播 `trialCountdownEnd`
- *   事件给其它控件（例如 TryExperience）刷新自身状态。
- */
-export declare const useTrialBadge: (event: EventInstance, trialRemainingSec: number) => {
+export declare const useTrialBadge: (event: EventInstance, devId: string, trialRemainingSec: number) => {
     showTrialBadge: boolean;
     setShowTrialBadge: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    handleTrialSubscribe: () => void;
-    handleCountdownEnd: () => void;
+    handleTrialSubscribe: () => Promise<void>;
+    handleCountdownEnd: () => Promise<void>;
 };

package/lib/widgets/trialBadge/useTrialBadge.js

@@ -1,37 +1,41 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { setTrailFinish } from '../../utils/ttt';
+import { gotoSecurityCloudService2 } from '../../utils';
 import { trialCountdownEnd } from '../../ui/constant';
-
-/**
- * 试看倒计时归零后的业务 hook 点（mock）。
- * 后续接入业务校验 / 上报时替换该实现。横竖屏共用同一份逻辑。
- */
-const trialEndedTest = () => {
-  console.log('res===[TrialBadge] countdown end -> test()');
-};
-
-/**
- * 试用徽章共享 Hook：vertical / full 两种 screenType 下共用同一份状态、回调和方法。
- *
- * - `showTrialBadge`：是否展示徽章；仅当 0 < trialRemainingSec < 300 时展示，倒计时归零会自动置 false。
- * - `handleTrialSubscribe`：「开通」按钮点击回调。
- * - `handleCountdownEnd`：倒计时归零回调，内部会广播 `trialCountdownEnd`
- *   事件给其它控件（例如 TryExperience）刷新自身状态。
- */
-export const useTrialBadge = (event, trialRemainingSec) => {
+import Strings from '../../i18n';
+export const useTrialBadge = (event, devId, trialRemainingSec) => {
   const [showTrialBadge, setShowTrialBadge] = useState(false);
+  const prevTrialSecRef = useRef(trialRemainingSec);
   useEffect(() => {
     if (trialRemainingSec > 0 && trialRemainingSec < 300) {
-      setShowTrialBadge(true);
+      if (trialRemainingSec !== prevTrialSecRef.current) {
+        setShowTrialBadge(true);
+      }
     }
+    prevTrialSecRef.current = trialRemainingSec;
   }, [trialRemainingSec]);
-  const handleTrialSubscribe = useCallback(() => {
-    console.log('[TrialBadge] click subscribe');
-  }, []);
-  const handleCountdownEnd = useCallback(() => {
-    trialEndedTest();
-    event.emit(trialCountdownEnd);
-    setShowTrialBadge(false);
-  }, [event]);
+  const handleTrialSubscribe = useCallback(async () => {
+    try {
+      await gotoSecurityCloudService2(devId);
+    } catch (error) {
+      ty.showToast({
+        title: Strings.getLang('ipc_player_fetch_error'),
+        icon: 'none'
+      });
+    }
+  }, [devId]);
+  const handleCountdownEnd = useCallback(async () => {
+    try {
+      setShowTrialBadge(false);
+      event.emit(trialCountdownEnd);
+      await setTrailFinish(devId);
+    } catch (error) {
+      ty.showToast({
+        title: Strings.getLang('ipc_player_fetch_error'),
+        icon: 'none'
+      });
+    }
+  }, [devId, event]);
   return {
     showTrialBadge,
     setShowTrialBadge,

package/lib/widgets/tryExperience/tryExperience.d.ts

@@ -5,6 +5,11 @@ type Props = ComponentConfigProps & {
     className?: string;
     hideTryExperienceMenu?: boolean;
     buttonState?: number;
+    trialRemainingSec?: number;
+    isPurchase?: boolean;
+    canOpenSettings?: boolean;
+    gRawData?: boolean;
+    isLowPhone?: boolean;
 };
 export declare const TryExperience: (props: Props) => React.JSX.Element | null;
 export {};

package/lib/widgets/tryExperience/tryExperience.js

@@ -1,8 +1,11 @@
-import { View, Image, getSystemInfoSync } from '@ray-js/ray';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { View, Image, getSystemInfoSync, showToast } from '@ray-js/ray';
 import clsx from 'clsx';
-import React, { useContext } from 'react';
-import { pauseTimeToHideAllComponent, widgetClick, widgetLabs, tryExperienceBtnClick } from '../../ui/constant';
-import { UIEventContext } from '../../ui/context';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useStore } from '../../ctx/store';
+import Strings from '../../i18n';
+import { getAIFrameFeature, gotoAIDrawMiniProgram, setAIFrameFeature } from '../../utils';
+import { refreshSmartImageQualityEvent } from '../../ui/constant';
 import tryZh from '../../res/try/try_zh.png';
 import tryEn from '../../res/try/try_en.png';
 import tryOpen from '../../res/try/try_open.png';
@@ -33,39 +36,127 @@ const pickIconByStatus = buttonState => {
     case TryExperienceStatus.Close:
       return tryClose;
     case TryExperienceStatus.Default:
-    default:
       return getDefaultLangIcon();
+    default:
+      return '';
   }
 };
 export const TryExperience = props => {
   const {
     className,
     hideTryExperienceMenu,
-    buttonState = 0,
-    event: propsEvent
+    buttonState,
+    trialRemainingSec,
+    isPurchase,
+    canOpenSettings,
+    gRawData,
+    isLowPhone,
+    devId
   } = props;
   const {
-    event: ctxEvent
-  } = useContext(UIEventContext);
-  const event = propsEvent !== null && propsEvent !== void 0 ? propsEvent : ctxEvent;
-  const iconUrl = pickIconByStatus(buttonState);
+    brandColor,
+    recording
+  } = useStore({
+    brandColor: props.brandColor,
+    recording: props.recording
+  });
+  const [imgSrc, setImgSrc] = useState();
+  const lockRef = useRef(false);
+  useEffect(() => {
+    updateImgSrc();
+  }, [buttonState]);
+  const updateImgSrc = useCallback(() => {
+    console.log('res===updateImgSrc', buttonState, isLowPhone);
+    if (isLowPhone) {
+      setImgSrc(tryClose);
+      return;
+    }
+    if (buttonState === 0 || buttonState) {
+      const iconUrl = pickIconByStatus(buttonState);
+      setImgSrc(iconUrl);
+    } else {
+      setImgSrc(undefined);
+    }
+  }, [buttonState]);
+  const onTryExperience = useCallback(async () => {
+    console.log('res===onTryExperience', lockRef.current, isLowPhone);
+    if (lockRef.current) return;
+    if (isLowPhone) {
+      showToast({
+        title: Strings.getLang('ipc_player_low_phone_not_support'),
+        icon: 'none'
+      });
+      return;
+    }
+    if (recording) {
+      showToast({
+        title: Strings.getLang('ipc_player_recording_now_tip'),
+        icon: 'none'
+      });
+      return;
+    }
+    lockRef.current = true;
+    try {
+      const getAI = await getAIFrameFeature(devId);
+      if (buttonState === TryExperienceStatus.Open) {
+        var _getAI$aiFrameFeature, _getAI$aiFrameFeature2, _getAI$aiFrameFeature3, _props$event;
+        // 由开变关的时候，只关inPreview
+        const scope = _objectSpread(_objectSpread({}, (_getAI$aiFrameFeature = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature === void 0 ? void 0 : _getAI$aiFrameFeature.scope), {}, {
+          inPreview: false
+        });
+        await setAIFrameFeature({
+          devId,
+          scene: 'inPreview',
+          // 实时预览场景
+          enabled: getAI.enabled,
+          aiFrameFeature: {
+            scope,
+            feature: (_getAI$aiFrameFeature2 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature2 === void 0 ? void 0 : _getAI$aiFrameFeature2.feature,
+            exportEnabled: (_getAI$aiFrameFeature3 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature3 === void 0 ? void 0 : _getAI$aiFrameFeature3.exportEnabled
+          }
+        });
+        (_props$event = props.event) === null || _props$event === void 0 || _props$event.emit(refreshSmartImageQualityEvent);
+      } else if (buttonState === TryExperienceStatus.Close && isPurchase || buttonState === TryExperienceStatus.Close && trialRemainingSec < 300 && trialRemainingSec > 0) {
+        var _getAI$aiFrameFeature4, _getAI$aiFrameFeature5, _getAI$aiFrameFeature6, _props$event2;
+        const scope = _objectSpread(_objectSpread({}, (_getAI$aiFrameFeature4 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature4 === void 0 ? void 0 : _getAI$aiFrameFeature4.scope), {}, {
+          inPreview: true
+        });
+        // 由关变开的时候，enabled和inPreview两个都开
+        await setAIFrameFeature({
+          devId,
+          scene: 'inPreview',
+          // 实时预览场景
+          enabled: true,
+          aiFrameFeature: {
+            scope,
+            feature: (_getAI$aiFrameFeature5 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature5 === void 0 ? void 0 : _getAI$aiFrameFeature5.feature,
+            exportEnabled: (_getAI$aiFrameFeature6 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature6 === void 0 ? void 0 : _getAI$aiFrameFeature6.exportEnabled
+          }
+        });
+        (_props$event2 = props.event) === null || _props$event2 === void 0 || _props$event2.emit(refreshSmartImageQualityEvent);
+      } else {
+        gotoAIDrawMiniProgram(devId, brandColor);
+      }
+    } catch (error) {
+      //
+    } finally {
+      lockRef.current = false;
+    }
+  }, [buttonState, recording, isPurchase, trialRemainingSec]);
   if (hideTryExperienceMenu) {
     return null;
   }
+  if (!imgSrc || !canOpenSettings || !gRawData) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(className),
-    onClick: () => {
-      event.emit(widgetClick, {
-        widgetId: widgetLabs.TRY_EXPERIENCE
-      });
-      event.emit(tryExperienceBtnClick);
-      event.emit(pauseTimeToHideAllComponent);
-    }
+    onClick: onTryExperience
   }, /*#__PURE__*/React.createElement(View, {
     className: "try-experience-box"
   }, /*#__PURE__*/React.createElement(Image, {
     className: "try-experience-icon",
-    src: iconUrl,
+    src: imgSrc,
     mode: "heightFix"
   })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.35-beta.2",
+  "version": "0.0.35-beta.21",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -64,7 +64,7 @@
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
-      "pre-commit": "lint-staged"
+      "pre-commit": "node ./scripts/check-protected-files.js && lint-staged"
     }
   },
   "lint-staged": {