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

package/lib/ctx/ctx.composition.js

@@ -4,7 +4,7 @@ const _excluded = ["title", "duration"];
 import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification } from '../widgets';
+import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, TryExperience, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification } from '../widgets';
 import { authorizeStatus } from '../utils/authorize';
 import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
 import { multiPrefix } from '../widgets/multiCamera/constants';
@@ -47,6 +47,10 @@ export const defaultBottomLeftContent = [{
 }, {
   id: 'Siren',
   content: Siren
+}, /* TryExperience 必须紧跟 Muted，在 VerticalSmallIntercom 之前 */
+{
+  id: 'TryExperience',
+  content: TryExperience
 }, {
   id: 'VerticalSmallIntercom',
   content: VerticalSmallIntercom

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

@@ -13,6 +13,7 @@ export type InitPlayerWidgetsOptions = {
     showToggleVerticalFull?: boolean;
     showRealTimeMagnification?: boolean;
     directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
+    hideSmartImageQualityState?: boolean;
     topLeftContent?: ComponentConfig[];
     topRightContent?: ComponentConfig[];
     bottomLeftContent?: ComponentConfig[];

package/lib/features/initPlayerWidgets/index.js

@@ -17,8 +17,16 @@ export async function initPlayerWidgets(ctx, options) {
   }
   ctx.addContent('topRight', newDefaultTopRightContent);
   const resolutionIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'Resolution');
+  const tryExperienceIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'TryExperience');
   const screenShotIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'Screenshot');
   const recordVideoIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'RecordVideo');
+  if (tryExperienceIndex !== -1) {
+    var _options$hideSmartIma;
+    // @ts-ignore
+    newDefaultBottomLeftContent[tryExperienceIndex].initProps = {
+      hideTryExperienceMenu: (_options$hideSmartIma = options.hideSmartImageQualityState) !== null && _options$hideSmartIma !== void 0 ? _options$hideSmartIma : true
+    };
+  }
   if (resolutionIndex !== -1) {
     // @ts-ignore
     newDefaultBottomLeftContent[resolutionIndex].initProps = {
@@ -44,6 +52,7 @@ 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

@@ -20,6 +20,7 @@ declare const Strings: kit.I18N<{
         ipc_player_authorize_confirm_text: string;
         ipc_player_error_record_tip: string;
         ipc_player_change_resolution_success: string;
+        ipc_player_try_experience: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
         ipc_player_tile_tip_text_step1: string;
@@ -28,6 +29,10 @@ declare const Strings: kit.I18N<{
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
         ipc_player_flow_low_tip: string;
+        ipc_player_trial_in_use: string;
+        ipc_player_trial_preview_text: string;
+        ipc_player_trial_subscribe: string;
+        ipc_player_fetch_error: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -49,6 +54,7 @@ declare const Strings: kit.I18N<{
         ipc_player_authorize_confirm_text: string;
         ipc_player_error_record_tip: string;
         ipc_player_change_resolution_success: string;
+        ipc_player_try_experience: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
         ipc_player_tile_tip_text_step1: string;
@@ -57,6 +63,10 @@ declare const Strings: kit.I18N<{
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
         ipc_player_flow_low_tip: string;
+        ipc_player_trial_in_use: string;
+        ipc_player_trial_preview_text: string;
+        ipc_player_trial_subscribe: string;
+        ipc_player_fetch_error: string;
     };
 }, {
     ipc_player_resolution_HD: string;
@@ -78,6 +88,7 @@ declare const Strings: kit.I18N<{
     ipc_player_authorize_confirm_text: string;
     ipc_player_error_record_tip: string;
     ipc_player_change_resolution_success: string;
+    ipc_player_try_experience: string;
     ipc_player_ptz_control_tip: string;
     ipc_player_ptz_close_control_tip: string;
     ipc_player_tile_tip_text_step1: string;
@@ -86,6 +97,10 @@ declare const Strings: kit.I18N<{
     ipc_player_tip_confirm: string;
     ipc_player_ptz_moveable_tip_text: string;
     ipc_player_flow_low_tip: string;
+    ipc_player_trial_in_use: string;
+    ipc_player_trial_preview_text: string;
+    ipc_player_trial_subscribe: string;
+    ipc_player_fetch_error: string;
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
@@ -106,6 +121,7 @@ declare const Strings: kit.I18N<{
     ipc_player_authorize_confirm_text: string;
     ipc_player_error_record_tip: string;
     ipc_player_change_resolution_success: string;
+    ipc_player_try_experience: string;
     ipc_player_ptz_control_tip: string;
     ipc_player_ptz_close_control_tip: string;
     ipc_player_tile_tip_text_step1: string;
@@ -114,5 +130,9 @@ declare const Strings: kit.I18N<{
     ipc_player_tip_confirm: string;
     ipc_player_ptz_moveable_tip_text: string;
     ipc_player_flow_low_tip: string;
+    ipc_player_trial_in_use: string;
+    ipc_player_trial_preview_text: string;
+    ipc_player_trial_subscribe: string;
+    ipc_player_fetch_error: string;
 }>;
 export default Strings;

package/lib/i18n/strings.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
         ipc_player_authorize_confirm_text: string;
         ipc_player_error_record_tip: string;
         ipc_player_change_resolution_success: string;
+        ipc_player_try_experience: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
         ipc_player_tile_tip_text_step1: string;
@@ -27,6 +28,10 @@ declare const _default: {
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
         ipc_player_flow_low_tip: string;
+        ipc_player_trial_in_use: string;
+        ipc_player_trial_preview_text: string;
+        ipc_player_trial_subscribe: string;
+        ipc_player_fetch_error: string;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -48,6 +53,7 @@ declare const _default: {
         ipc_player_authorize_confirm_text: string;
         ipc_player_error_record_tip: string;
         ipc_player_change_resolution_success: string;
+        ipc_player_try_experience: string;
         ipc_player_ptz_control_tip: string;
         ipc_player_ptz_close_control_tip: string;
         ipc_player_tile_tip_text_step1: string;
@@ -56,6 +62,10 @@ declare const _default: {
         ipc_player_tip_confirm: string;
         ipc_player_ptz_moveable_tip_text: string;
         ipc_player_flow_low_tip: string;
+        ipc_player_trial_in_use: string;
+        ipc_player_trial_preview_text: string;
+        ipc_player_trial_subscribe: string;
+        ipc_player_fetch_error: string;
     };
 };
 export default _default;

package/lib/i18n/strings.js

@@ -19,6 +19,7 @@ export default {
     ipc_player_authorize_confirm_text: 'Go to Settings',
     ipc_player_error_record_tip: 'The recording has failed, please try again later.',
     ipc_player_change_resolution_success: 'Switch successful',
+    ipc_player_try_experience: 'Try it',
     ipc_player_ptz_control_tip: 'Swipe up, down, left, or right to control the PTZ direction.',
     ipc_player_ptz_close_control_tip: 'Close',
     ipc_player_tile_tip_text_step1: 'Click here to expand/collapse the player',
@@ -26,7 +27,11 @@ export default {
     ipc_player_tip_next: 'Next',
     ipc_player_tip_confirm: 'Got it',
     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_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: 'End',
+    ipc_player_trial_subscribe: 'Open',
+    ipc_player_fetch_error: 'Failed to fetch data'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
@@ -48,6 +53,7 @@ export default {
     ipc_player_authorize_confirm_text: '去设置',
     ipc_player_error_record_tip: '录制出错了，请稍后再试',
     ipc_player_change_resolution_success: '切换成功',
+    ipc_player_try_experience: '去体验',
     ipc_player_ptz_control_tip: '上下左右滑动，控制云台方向',
     ipc_player_ptz_close_control_tip: '关闭',
     ipc_player_tile_tip_text_step1: '点击此处可展开/收起播放窗口',
@@ -55,6 +61,10 @@ export default {
     ipc_player_tip_next: '下一步',
     ipc_player_tip_confirm: '知道了',
     ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域',
-    ipc_player_flow_low_tip: '设备当前剩余流量不足200M，请尽快充值'
+    ipc_player_flow_low_tip: '设备当前剩余流量不足200M，请尽快充值',
+    ipc_player_trial_in_use: '试用中',
+    ipc_player_trial_preview_text: '后结束',
+    ipc_player_trial_subscribe: '开通',
+    ipc_player_fetch_error: '获取异常'
   }
 };

package/lib/interface.d.ts

@@ -11,7 +11,7 @@ export type IpcContext = {
 };
 export type RetAtom<T> = PrimitiveAtom<T> & WithInitialValue<T>;
 export type ScreenType = 'full' | 'vertical';
-export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
+export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'TryExperience' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
 export declare const enum PlayerStreamStatus {
     UnknownException = -1000,
     ConnectSuccess = 1001,

package/lib/ui/bottomLeftContent.d.ts

@@ -3,6 +3,8 @@ import { UseCtx } from '../interface';
 type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
+    /** 右下角组件占据的宽度（px），左下角通过该值约束自身可视宽度，避免与右下角重叠 */
+    reservedRight?: number;
 };
-declare const BottomLeftContent: ({ ctx, children }: Props) => React.JSX.Element;
+declare const BottomLeftContent: ({ ctx, children, reservedRight }: Props) => React.JSX.Element;
 export default BottomLeftContent;

package/lib/ui/bottomLeftContent.js

@@ -1,30 +1,108 @@
-import React from 'react';
+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';
 import { CoverView, View } from '@ray-js/ray';
 import clsx from 'clsx';
 import { useStore } from '../ctx/store';
 import { useComponentHideState } from './hooks';
+import { TrialBadge, useTrialBadge } from '../widgets/trialBadge';
+/** 右侧透明渐变宽度，用于提示横向可滑动 */
+const FADE_MASK = 'linear-gradient(to right, #000 calc(100% - 16px), transparent 100%)';
+
+/**
+ * 试用徽章在不同 screenType 下的容器样式。
+ * 「贴在底栏顶部」的策略一致（bottom: 100%），只是 left / marginBottom
+ * 等数值按横竖屏不同的边距规则做差异化处理。
+ */
+const TRIAL_BADGE_WRAP_STYLE_VERTICAL = {
+  position: 'absolute',
+  left: '0px',
+  bottom: '100%',
+  marginBottom: 4,
+  zIndex: 2,
+  width: 'max-content'
+};
+const TRIAL_BADGE_WRAP_STYLE_FULL = {
+  position: 'absolute',
+  left: '25px',
+  bottom: '100%',
+  marginBottom: 8,
+  zIndex: 2,
+  width: 'max-content'
+};
 const BottomLeftContent = _ref => {
   let {
     ctx,
-    children
+    children,
+    reservedRight = 0
   } = _ref;
   const {
-    screenType
+    screenType,
+    brandColor,
+    bottomLeftContent
   } = useStore({
     screenType: ctx.screenType,
-    playState: ctx.playState
+    playState: ctx.playState,
+    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$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 refreshToken = useMemo(() => {
+    var _refreshToken, _tryExp$initProps3;
+    const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
+    return (_refreshToken = tryExp === null || tryExp === void 0 || (_tryExp$initProps3 = tryExp.initProps) === null || _tryExp$initProps3 === void 0 ? void 0 : _tryExp$initProps3.refreshToken) !== null && _refreshToken !== void 0 ? _refreshToken : 0;
+  }, [bottomLeftContent]);
   const [shouldHide] = useComponentHideState();
+  const {
+    showTrialBadge,
+    handleTrialSubscribe,
+    handleCountdownEnd
+  } = useTrialBadge(ctx.event, ctx.devId, trialRemainingSec);
+  const paddingLeftPx = screenType === 'vertical' ? 0 : 25;
+  const trialBadgeWrapStyle = screenType === 'vertical' ? TRIAL_BADGE_WRAP_STYLE_VERTICAL : TRIAL_BADGE_WRAP_STYLE_FULL;
   return /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx('ipc-player-bottom-left-content-wrap'),
+    className: clsx('ipc-player-bottom-left-content-wrap')
+    // 注意：不要在这里覆盖 position，CSS 类已经设置 position: absolute; left: 0; bottom: 0
+    // 否则 children 会失去贴底定位，从而与 bottomRightContent 不对齐
+    ,
     style: {
-      paddingRight: screenType === 'vertical' ? '0' : '50px',
+      right: `${reservedRight}px`,
       height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
     }
-  }, /*#__PURE__*/React.createElement(View, {
+  }, showSmartImageQuality && showTrialBadge && /*#__PURE__*/React.createElement(View, {
+    className: clsx('bottom-left-item-container'),
+    style: _objectSpread(_objectSpread({}, trialBadgeWrapStyle), {}, {
+      transform: shouldHide ? 'translateY(40px)' : 'translateY(0)',
+      opacity: shouldHide ? 0 : 1,
+      transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out'
+    })
+  }, /*#__PURE__*/React.createElement(TrialBadge, {
+    brandColor: brandColor,
+    trialRemainingSec: trialRemainingSec,
+    refreshToken: refreshToken,
+    onSubscribe: handleTrialSubscribe,
+    onCountdownEnd: handleCountdownEnd
+  })), /*#__PURE__*/React.createElement(View, {
     style: {
       paddingBottom: screenType === 'vertical' ? '14px' : '32px',
-      paddingLeft: screenType === 'vertical' ? 0 : '25px'
+      paddingLeft: `${paddingLeftPx}px`,
+      width: '100%',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      whiteSpace: 'nowrap',
+      WebkitOverflowScrolling: 'touch',
+      WebkitMaskImage: FADE_MASK,
+      maskImage: FADE_MASK
     },
     className: clsx('ipc-player-bottom-left-content-container', {
       // 'ipc-player-bottom-left-content-hide': shouldHide,

package/lib/ui/bottomRightContent.d.ts

@@ -3,6 +3,8 @@ import { UseCtx } from '../interface';
 type Props = {
     ctx: ReturnType<UseCtx>;
     children: React.ReactNode;
+    /** 由 ui.tsx 计算得到的右下角组件宽度（与左下角的 reservedRight 保持一致） */
+    width?: number;
 };
-declare const BottomRightContent: ({ ctx, children }: Props) => React.JSX.Element;
+declare const BottomRightContent: ({ ctx, children, width }: Props) => React.JSX.Element;
 export default BottomRightContent;

package/lib/ui/bottomRightContent.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { CoverView, View } from '@ray-js/ray';
 import clsx from 'clsx';
@@ -6,7 +7,8 @@ import { useComponentHideState } from './hooks';
 const BottomRightContent = _ref => {
   let {
     ctx,
-    children
+    children,
+    width
   } = _ref;
   const {
     screenType
@@ -17,14 +19,19 @@ const BottomRightContent = _ref => {
   const [shouldHide] = useComponentHideState();
   return /*#__PURE__*/React.createElement(CoverView, {
     className: clsx('ipc-player-bottom-right-content-wrap'),
-    style: {
+    style: _objectSpread({
       paddingLeft: screenType === 'vertical' ? '10px' : '0',
       height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
-    }
+    }, typeof width === 'number' && width > 0 ? {
+      width: `${width}px`,
+      boxSizing: 'border-box'
+    } : null)
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       paddingBottom: screenType === 'vertical' ? '14px' : '32px',
-      paddingRight: screenType === 'vertical' ? 0 : '25px'
+      paddingRight: screenType === 'vertical' ? 0 : '25px',
+      width: '100%',
+      justifyContent: 'flex-end'
     },
     className: clsx('ipc-player-bottom-right-content-container', {
       // 'ipc-player-bottom-right-content-hide': shouldHide,

package/lib/ui/constant.d.ts

@@ -21,11 +21,19 @@ 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";
 /** 控件点击事件用的 widgetId，统一在此维护 */
 export declare const widgetLabs: {
     readonly SCREENSHOT: "Screenshot";
     readonly RECORD_VIDEO: "RecordVideo";
     readonly RESOLUTION: "Resolution";
+    readonly TRY_EXPERIENCE: "TryExperience";
     readonly FULL_RESOLUTION_CONTROL: "FullResolutionControl";
     readonly MUTED: "Muted";
     readonly FLOODLIGHT: "Floodlight";

package/lib/ui/constant.js

@@ -22,11 +22,21 @@ export const multiPtzId = 'multiPtzId';
 /** 控件点击统一事件：任意播放器内控件被点击时触发，可用于埋点或统一处理 */
 export const widgetClick = 'widgetClick';
 
+/** 「去体验」按钮业务事件，与清晰度 resolutionBtnControlClick 用法一致 */
+export const tryExperienceBtnClick = 'tryExperienceBtnClick';
+
+/**
+ * 试看倒计时结束事件：试看徽章倒计时归零时触发，
+ * 业务侧/相关控件可监听此事件刷新自己的状态（例如 TryExperience 重新拉取状态）
+ */
+export const trialCountdownEnd = 'trialCountdownEnd';
+
 /** 控件点击事件用的 widgetId，统一在此维护 */
 export const widgetLabs = {
   SCREENSHOT: 'Screenshot',
   RECORD_VIDEO: 'RecordVideo',
   RESOLUTION: 'Resolution',
+  TRY_EXPERIENCE: 'TryExperience',
   FULL_RESOLUTION_CONTROL: 'FullResolutionControl',
   MUTED: 'Muted',
   FLOODLIGHT: 'Floodlight',

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 } from './constant';
+export { widgetLabs, tryExperienceBtnClick, 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 } from './constant';
+export { widgetLabs, tryExperienceBtnClick, trialCountdownEnd } from './constant';

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';
@@ -22,6 +23,7 @@ import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
 import { isSmallScreen } from '../utils';
+import { getSmartImageQualityState } from '../utils/ttt';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -423,6 +425,19 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     setBrandColor(brandColor);
     setVerticalMic(verticalMic);
   }, [brandColor, verticalMic]);
+  const refreshSmartImageQuality = useMemoizedFn(() => {
+    getSmartImageQualityState(devId).then(res => {
+      console.log('res===getSmartImageQualityState', res);
+      updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
+        buttonState: res.buttonState,
+        trialRemainingSec: res.trialRemainingSec,
+        refreshToken: Date.now()
+      });
+    });
+  });
+  useEffect(() => {
+    refreshSmartImageQuality();
+  }, [instance]);
   const refreshBottomLeft = () => {
     event.current.emit(startTimeToHideAllComponent);
     event.current.emit(showAllComponent);
@@ -622,7 +637,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]);
 
   /**
    * 视频流加载状态封装
@@ -945,9 +971,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

@@ -15,3 +15,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

@@ -47,4 +47,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,6 @@
+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>;

package/lib/utils/navigation.js

@@ -0,0 +1,20 @@
+import { 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}${'/pages/home/index'}?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');
+}

package/lib/utils/ttt.d.ts

@@ -0,0 +1,39 @@
+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;
+};
+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(devId: string, params: Omit<SetAIFrameFeatureParams, 'devId'>): Promise<any>;
+export declare function getDeviceInfoRay(devId: string): Promise<unknown>;
+export declare function getCurrentHomeInfoRay(): Promise<unknown>;

package/lib/utils/ttt.js

@@ -0,0 +1,87 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export function getSmartImageQualityState(devId) {
+  // const mockData: SmartImageQualityResult = {
+  //   isPurchase: false,
+  //   buttonState: 1,
+  //   trialRemainingSec: 200,
+  //   canOpenSettings: false,
+  // };
+  // if (typeof ty?.ipc?.getSmartImageQualityState !== 'function') {
+  //   console.log('res===getSmartImageQualityState not exist, use mockData', mockData);
+  //   return Promise.resolve(mockData);
+  // }
+  return new Promise((resolve, reject) => {
+    ty.ipc.getSmartImageQualityState({
+      params: {
+        devId
+      },
+      success: data => {
+        console.log('res===getSmartImageQualityState data', data);
+        resolve(data);
+      },
+      fail: e => {
+        console.warn('res===getSmartImageQualityState fail', e);
+        reject(e);
+      }
+    });
+  });
+}
+export function getAIFrameFeature(devId) {
+  return new Promise((resolve, reject) => {
+    ty.ipc.getAIFrameFeature({
+      params: {
+        devId
+      },
+      success: data => {
+        console.log('res===getAIFrameFeature data', data);
+        resolve(data);
+      },
+      fail: e => {
+        console.warn('res===getAIFrameFeature fail', e);
+        reject(e);
+      }
+    });
+  });
+}
+export function setAIFrameFeature(devId, params) {
+  return new Promise((resolve, reject) => {
+    ty.ipc.setAIFrameFeature({
+      params: _objectSpread({
+        devId
+      }, params),
+      success: data => {
+        console.log('res===setAIFrameFeature data', data);
+        resolve(data);
+      },
+      fail: e => {
+        console.warn('res===setAIFrameFeature fail', e);
+        reject(e);
+      }
+    });
+  });
+}
+export function getDeviceInfoRay(devId) {
+  return new Promise((resolve, reject) => {
+    ty.device.getDeviceInfo({
+      deviceId: devId,
+      success: res => {
+        resolve(res);
+      },
+      fail: error => {
+        reject(error);
+      }
+    });
+  });
+}
+export function getCurrentHomeInfoRay() {
+  return new Promise((resolve, reject) => {
+    ty.home.getCurrentHomeInfo({
+      success: res => {
+        resolve(res);
+      },
+      fail: error => {
+        reject(error);
+      }
+    });
+  });
+}

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';

package/lib/widgets/trialBadge/index.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Image, Text, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import Strings from '../../i18n';
+import tryOpen from '../../res/try/try_open.png';
+import './index.less';
+/** 兜底主题色，与 player ctx 中 brandColor 默认值保持一致 */
+const FALLBACK_BRAND_COLOR = '#FF592A';
+
+/** 将秒数格式化为 mm:ss */
+const formatCountdown = seconds => {
+  const safe = Math.max(0, Math.floor(seconds));
+  const m = Math.floor(safe / 60);
+  return `${String(m).padStart(2, '0')}:${String(safe % 60).padStart(2, '0')}`;
+};
+export const TrialBadge = _ref => {
+  let {
+    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;
+  useEffect(() => {
+    endedRef.current = false;
+    setRemainingSec(Math.max(0, Math.floor(trialRemainingSec)));
+  }, [trialRemainingSec, refreshToken]);
+  useEffect(() => {
+    if (remainingSec <= 0) {
+      if (!endedRef.current) {
+        var _onCountdownEndRef$cu;
+        endedRef.current = true;
+        (_onCountdownEndRef$cu = onCountdownEndRef.current) === null || _onCountdownEndRef$cu === void 0 || _onCountdownEndRef$cu.call(onCountdownEndRef);
+      }
+      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;
+        }
+        return next;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [trialRemainingSec, refreshToken]);
+  const countdownText = formatCountdown(remainingSec);
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-trial-badge', className)
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: "ipc-player-trial-badge-icon",
+    src: tryOpen,
+    mode: "heightFix"
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-status"
+  }, Strings.getLang('ipc_player_trial_in_use')), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-divider"
+  }, "|"), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-preview"
+  }, `${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();
+      }
+      onSubscribe === null || onSubscribe === void 0 || onSubscribe();
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-cta-text"
+  }, Strings.getLang('ipc_player_trial_subscribe'))));
+};
+export { useTrialBadge } from './useTrialBadge';

package/lib/widgets/trialBadge/index.less

@@ -0,0 +1,57 @@
+.ipc-player-trial-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 4px 0 8px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.65);
+  flex-shrink: 0;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ipc-player-trial-badge-icon {
+  display: block;
+  height: 20px;
+  width: auto;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.ipc-player-trial-badge-status {
+  font-size: 12px;
+  color: #ffffff;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.ipc-player-trial-badge-divider {
+  margin: 0 6px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 1;
+}
+
+.ipc-player-trial-badge-preview {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.78);
+  line-height: 1;
+  margin-right: 8px;
+}
+
+.ipc-player-trial-badge-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  padding: 0 10px;
+  border-radius: 11px;
+  flex-shrink: 0;
+}
+
+.ipc-player-trial-badge-cta-text {
+  font-size: 12px;
+  color: #ffffff;
+  font-weight: 600;
+  line-height: 1;
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { EventInstance } from '../../interface';
+export declare const useTrialBadge: (event: EventInstance, devId: string, trialRemainingSec: number) => {
+    showTrialBadge: boolean;
+    setShowTrialBadge: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleTrialSubscribe: () => Promise<void>;
+    handleCountdownEnd: () => Promise<void>;
+};

package/lib/widgets/trialBadge/useTrialBadge.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getAIFrameFeature, getCurrentHomeInfoRay, getDeviceInfoRay, setAIFrameFeature } from '../../utils/ttt';
+import { gotoSecurityCloudService } from '../../utils';
+import Strings from '../../i18n';
+export const useTrialBadge = (event, devId, trialRemainingSec) => {
+  const [showTrialBadge, setShowTrialBadge] = useState(false);
+  useEffect(() => {
+    if (trialRemainingSec > 0 && trialRemainingSec < 300) {
+      setShowTrialBadge(true);
+    }
+  }, [trialRemainingSec]);
+  const handleTrialSubscribe = useCallback(async () => {
+    try {
+      const homeInfo = await getCurrentHomeInfoRay();
+      const deviceInfo = await getDeviceInfoRay(devId);
+      console.log('res===', deviceInfo, homeInfo);
+      gotoSecurityCloudService(homeInfo.homeId, deviceInfo.uuid);
+    } catch (error) {
+      console.log('res===handleTrialSubscribe error', error);
+      ty.showToast({
+        title: Strings.getLang('ipc_player_fetch_error'),
+        icon: 'none'
+      });
+    }
+  }, [devId]);
+  const handleCountdownEnd = useCallback(async () => {
+    try {
+      const getAI = await getAIFrameFeature(devId);
+      console.log('res===handleCountdownEnd', getAI);
+      setAIFrameFeature(devId, {
+        enabled: false,
+        aiFrameFeature: getAI.aiFrameFeature
+      });
+      setShowTrialBadge(false);
+    } catch (error) {
+      ty.showToast({
+        title: Strings.getLang('ipc_player_fetch_error'),
+        icon: 'none'
+      });
+    }
+  }, [devId, event]);
+  return {
+    showTrialBadge,
+    setShowTrialBadge,
+    handleTrialSubscribe,
+    handleCountdownEnd
+  };
+};

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

@@ -0,0 +1 @@
+export * from './tryExperience';

package/lib/widgets/tryExperience/index.js

@@ -0,0 +1 @@
+export * from './tryExperience';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './tryExperience.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+    hideTryExperienceMenu?: boolean;
+    buttonState?: number;
+};
+export declare const TryExperience: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/tryExperience/tryExperience.js

@@ -0,0 +1,68 @@
+import { View, Image, getSystemInfoSync } from '@ray-js/ray';
+import clsx from 'clsx';
+import React from 'react';
+import { useStore } from '../../ctx/store';
+import { gotoAIDrawMiniProgram } from '../../utils';
+import tryZh from '../../res/try/try_zh.png';
+import tryEn from '../../res/try/try_en.png';
+import tryOpen from '../../res/try/try_open.png';
+import tryClose from '../../res/try/try_close.png';
+import './tryExperience.less';
+/** ty.ipc.test1 返回的体验状态 */
+var TryExperienceStatus = /*#__PURE__*/function (TryExperienceStatus) {
+  TryExperienceStatus[TryExperienceStatus["Default"] = 0] = "Default";
+  TryExperienceStatus[TryExperienceStatus["Open"] = 1] = "Open";
+  TryExperienceStatus[TryExperienceStatus["Close"] = 2] = "Close";
+  return TryExperienceStatus;
+}(TryExperienceStatus || {});
+const ZH_LANG_REGEX = /^zh(_|-|$)/i;
+const getDefaultLangIcon = () => {
+  try {
+    const {
+      language = ''
+    } = getSystemInfoSync() || {};
+    return ZH_LANG_REGEX.test(String(language)) ? tryZh : tryEn;
+  } catch {
+    return tryEn;
+  }
+};
+const pickIconByStatus = buttonState => {
+  switch (buttonState) {
+    case TryExperienceStatus.Open:
+      return tryOpen;
+    case TryExperienceStatus.Close:
+      return tryClose;
+    case TryExperienceStatus.Default:
+    default:
+      return getDefaultLangIcon();
+  }
+};
+export const TryExperience = props => {
+  const {
+    className,
+    hideTryExperienceMenu,
+    buttonState = 0
+  } = props;
+  const {
+    brandColor
+  } = useStore({
+    brandColor: props.brandColor
+  });
+  const iconUrl = pickIconByStatus(buttonState);
+  if (hideTryExperienceMenu) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onClick: () => {
+      console.log('res===onTryExperience', props.devId, brandColor);
+      gotoAIDrawMiniProgram(props.devId, brandColor);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "try-experience-box"
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: "try-experience-icon",
+    src: iconUrl,
+    mode: "heightFix"
+  })));
+};

package/lib/widgets/tryExperience/tryExperience.less

@@ -0,0 +1,13 @@
+.try-experience-box {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(var(--iconBoxSize) * var(--ipc-player-size-scale, 1));
+}
+
+.try-experience-icon {
+  display: block;
+  height: calc(var(--iconBoxSize) * var(--ipc-player-size-scale, 1));
+  width: auto;
+  flex-shrink: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.35-beta.1",
+  "version": "0.0.35-beta.3",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -37,7 +37,7 @@
   "dependencies": {
     "@ray-js/direction-control": "^0.0.8",
     "@ray-js/ipc-ptz-zoom": "^0.0.3",
-    "@ray-js/ray-ipc-player": "2.1.1-beta.1",
+    "@ray-js/ray-ipc-player": "2.1.1-beta.3",
     "@ray-js/ray-ipc-utils": "^1.1.15",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",