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

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

@@ -8,11 +8,18 @@ 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;
+    };
     topLeftContent?: ComponentConfig[];
     topRightContent?: ComponentConfig[];
     bottomLeftContent?: ComponentConfig[];

package/lib/features/initPlayerWidgets/index.js

@@ -17,8 +17,18 @@ 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$smartImageQu, _options$smartImageQu2;
+    // @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
+    };
+  }
   if (resolutionIndex !== -1) {
     // @ts-ignore
     newDefaultBottomLeftContent[resolutionIndex].initProps = {
@@ -44,6 +54,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,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;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -49,6 +53,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 +62,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_resolution_HD: string;
@@ -78,6 +86,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 +95,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_resolution_HD: string;
     ipc_player_resolution_SD: string;
@@ -106,6 +118,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 +127,8 @@ 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;
 }>;
 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,9 @@ 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;
     };
     zh: {
         ipc_player_resolution_HD: string;
@@ -48,6 +52,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 +61,9 @@ 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;
     };
 };
 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,10 @@ 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: 'Preview',
+    ipc_player_trial_subscribe: 'Open'
   },
   zh: {
     ipc_player_resolution_HD: '高清',
@@ -48,6 +52,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 +60,9 @@ 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: '开通'
   }
 };

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,100 @@
-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 trialRemainingSec = useMemo(() => {
+    var _trialRemainingSec, _tryExp$initProps;
+    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;
+  }, [bottomLeftContent]);
   const [shouldHide] = useComponentHideState();
+
+  // 横竖屏共用同一份徽章状态、回调；TrialBadge 实例不随 screenType 切换而重挂载，
+  // 倒计时与可见性可在横竖屏切换之间保持一致
+  const {
+    showTrialBadge,
+    handleTrialSubscribe,
+    handleCountdownEnd
+  } = useTrialBadge(ctx.event, 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, {
+  }, 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,
+    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';
@@ -622,7 +623,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]);
 
   /**
    * 视频流加载状态封装
@@ -944,10 +956,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     style: {
       height: screenType === 'vertical' ? '48px' : '72px'
     }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
-    ctx: instance
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, playerReady && /*#__PURE__*/React.createElement(BottomLeftContent, {
+    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/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,15 @@
+import React from 'react';
+import './index.less';
+type Props = {
+    className?: string;
+    /** 主题色（用于「开通」按钮背景）。默认与 player brandColor 一致 */
+    brandColor?: string;
+    /** 试看倒计时初始秒数，来源于 smartImageQualityState.trialRemainingSec */
+    trialRemainingSec?: number;
+    /** 点击「开通」按钮回调 */
+    onSubscribe?: () => void;
+    /** 倒计时归零时触发，本组件保证整个生命周期内只回调一次 */
+    onCountdownEnd?: () => void;
+};
+export declare const TrialBadge: ({ className, brandColor, trialRemainingSec, onSubscribe, onCountdownEnd, }: Props) => React.JSX.Element;
+export { useTrialBadge } from './useTrialBadge';

package/lib/widgets/trialBadge/index.js

@@ -0,0 +1,86 @@
+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,
+    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(() => {
+    setRemainingSec(Math.max(0, Math.floor(trialRemainingSec)));
+  }, [trialRemainingSec]);
+  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]);
+  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"
+  }, `${Strings.getLang('ipc_player_trial_preview_text')} ${countdownText}`), /*#__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,16 @@
+/// <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) => {
+    showTrialBadge: boolean;
+    setShowTrialBadge: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleTrialSubscribe: () => void;
+    handleCountdownEnd: () => void;
+};

package/lib/widgets/trialBadge/useTrialBadge.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react';
+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) => {
+  const [showTrialBadge, setShowTrialBadge] = useState(false);
+  useEffect(() => {
+    if (trialRemainingSec > 0 && trialRemainingSec < 300) {
+      setShowTrialBadge(true);
+    }
+  }, [trialRemainingSec]);
+  const handleTrialSubscribe = useCallback(() => {
+    console.log('[TrialBadge] click subscribe');
+  }, []);
+  const handleCountdownEnd = useCallback(() => {
+    trialEndedTest();
+    event.emit(trialCountdownEnd);
+    setShowTrialBadge(false);
+  }, [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,71 @@
+import { View, Image, getSystemInfoSync } 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 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,
+    event: propsEvent
+  } = props;
+  const {
+    event: ctxEvent
+  } = useContext(UIEventContext);
+  const event = propsEvent !== null && propsEvent !== void 0 ? propsEvent : ctxEvent;
+  const iconUrl = pickIconByStatus(buttonState);
+  if (hideTryExperienceMenu) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onClick: () => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.TRY_EXPERIENCE
+      });
+      event.emit(tryExperienceBtnClick);
+      event.emit(pauseTimeToHideAllComponent);
+    }
+  }, /*#__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.2",
   "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",