@ray-js/ipc-player-integration 0.0.52-beta.5 → 0.0.53-beta.0

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, TryExperience, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification, ZoomTurntableEntry } from '../widgets';
+import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, TryExperience, Resolution, AutoClarity, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification, ZoomTurntableEntry } from '../widgets';
 import { authorizeStatus } from '../utils/authorize';
 import { PlayState } from '../interface';
 import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
@@ -74,6 +74,11 @@ export const defaultBottomLeftContent = [{
   id: 'RealTimeMagnification',
   content: RealTimeMagnification,
   hidden: true
+}, /* 自动清晰度：仅宿主存在 ttt 方法 clarityChanged 时由 widget 内部渲染 */
+{
+  id: 'AutoClarity',
+  content: AutoClarity,
+  hidden: true
 }];
 export const defaultBottomRightContent = [{
   id: 'SwitchLayout',

package/lib/features/initPlayerWidgets/index.js

@@ -52,6 +52,15 @@ export async function initPlayerWidgets(ctx, options) {
       newDefaultBottomLeftContent[magnificationIndex].hidden = false;
     }
   }
+  // 自动清晰度入口：这里只放开占位，真正是否渲染由 widget 内部按
+  // 「宿主有 ttt 方法 clarityChanged」+「设备支持的清晰度档位 ≥ 2」决定
+  {
+    const autoClarityIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'AutoClarity');
+    console.log('res===autoClarityIndex', autoClarityIndex);
+    if (autoClarityIndex !== -1) {
+      newDefaultBottomLeftContent[autoClarityIndex].hidden = false;
+    }
+  }
   // 焦距转盘入口：这里只放开占位，真正是否渲染由 widget 内部按
   // 「宿主有 ty.ipc.switchChannel」+「ipc_multi_zoom 解析出 cnt > 1」决定
   // （单镜头设备、不支持切镜头的老宿主都不出现）

package/lib/i18n/index.d.ts

@@ -3,6 +3,7 @@ declare const Strings: kit.I18N<{
     en: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
+        ipc_player_resolution_auto: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;
@@ -43,6 +44,7 @@ declare const Strings: kit.I18N<{
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
+        ipc_player_resolution_auto: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;
@@ -83,6 +85,7 @@ declare const Strings: kit.I18N<{
 }, {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
+    ipc_player_resolution_auto: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
     ipc_player_screenshot_multi_success_tip: string;
@@ -122,6 +125,7 @@ declare const Strings: kit.I18N<{
 } | {
     ipc_player_resolution_HD: string;
     ipc_player_resolution_SD: string;
+    ipc_player_resolution_auto: string;
     ipc_player_current_resolution_is_equal: string;
     ipc_player_screenshot_success_tip: string;
     ipc_player_screenshot_multi_success_tip: string;

package/lib/i18n/strings.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     en: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
+        ipc_player_resolution_auto: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;
@@ -42,6 +43,7 @@ declare const _default: {
     zh: {
         ipc_player_resolution_HD: string;
         ipc_player_resolution_SD: string;
+        ipc_player_resolution_auto: string;
         ipc_player_current_resolution_is_equal: string;
         ipc_player_screenshot_success_tip: string;
         ipc_player_screenshot_multi_success_tip: string;

package/lib/i18n/strings.js

@@ -2,6 +2,7 @@ export default {
   en: {
     ipc_player_resolution_HD: 'HD',
     ipc_player_resolution_SD: 'SD',
+    ipc_player_resolution_auto: 'Auto',
     ipc_player_current_resolution_is_equal: 'Already at current clarity',
     ipc_player_screenshot_success_tip: 'Screenshot saved to album',
     ipc_player_screenshot_multi_success_tip: 'Screenshots saved to album',
@@ -42,6 +43,7 @@ export default {
   zh: {
     ipc_player_resolution_HD: '高清',
     ipc_player_resolution_SD: '标清',
+    ipc_player_resolution_auto: '自动',
     ipc_player_current_resolution_is_equal: '已是当前清晰度',
     ipc_player_screenshot_success_tip: '截图已保存在APP相册',
     ipc_player_screenshot_multi_success_tip: '图片已保存至相册',

package/lib/ui/constant.d.ts

@@ -33,6 +33,7 @@ export declare const widgetLabs: {
     readonly SCREENSHOT: "Screenshot";
     readonly RECORD_VIDEO: "RecordVideo";
     readonly RESOLUTION: "Resolution";
+    readonly AUTO_CLARITY: "AutoClarity";
     readonly TRY_EXPERIENCE: "TryExperience";
     readonly FULL_RESOLUTION_CONTROL: "FullResolutionControl";
     readonly MUTED: "Muted";
@@ -60,6 +61,12 @@ export declare const widgetLabs: {
  */
 export declare const bottomLeftContentResize = "bottomLeftContentResize";
 export declare const zoomLevelChange = "zoomLevelChange";
+/**
+ * 自动清晰度状态变化事件：AutoClarity 控件开启/关闭自动模式或收到 clarityChanged
+ * 回调结果时触发，携带 { enabled, clarity }（clarity 为 'HD' | 'SD' | null）。
+ * VideoBitKBP 监听此事件，在码率前展示当前高清/标清文案。
+ */
+export declare const autoClarityChange = "autoClarityChange";
 export declare const setScaleMultipleEvent = "setScaleMultipleEvent";
 export declare const decodeClarityDic: {
     SS: string;

package/lib/ui/constant.js

@@ -35,6 +35,7 @@ export const widgetLabs = {
   SCREENSHOT: 'Screenshot',
   RECORD_VIDEO: 'RecordVideo',
   RESOLUTION: 'Resolution',
+  AUTO_CLARITY: 'AutoClarity',
   TRY_EXPERIENCE: 'TryExperience',
   FULL_RESOLUTION_CONTROL: 'FullResolutionControl',
   MUTED: 'Muted',
@@ -63,6 +64,13 @@ export const widgetLabs = {
  */
 export const bottomLeftContentResize = 'bottomLeftContentResize';
 export const zoomLevelChange = 'zoomLevelChange';
+
+/**
+ * 自动清晰度状态变化事件：AutoClarity 控件开启/关闭自动模式或收到 clarityChanged
+ * 回调结果时触发，携带 { enabled, clarity }（clarity 为 'HD' | 'SD' | null）。
+ * VideoBitKBP 监听此事件，在码率前展示当前高清/标清文案。
+ */
+export const autoClarityChange = 'autoClarityChange';
 export const setScaleMultipleEvent = 'setScaleMultipleEvent';
 export const decodeClarityDic = {
   SS: 'ss',

package/lib/ui/ui.js

@@ -23,7 +23,7 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { getNgRawData, getSmartImageQualityState, isLowPhone } from '../utils/ttt';
+import { getNgRawData, getSmartImageQualityState, isLowPhone, isOfflineForStream } from '../utils/ttt';
 import { getCaptureResultSummary } from '../utils/captureResult';
 import { lensCount } from '../widgets/zoomTurntable/lensSkill';
 import { shouldRenderContent } from './absoluteContent';
@@ -153,6 +153,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     });
   }, []);
 
+  // 设备离线时通知宿主视频流状态；isOfflineForStream 内部兼容没有该 TTT 方法的宿主。
+  useEffect(() => {
+    if (!deviceOnline) {
+      isOfflineForStream(devId);
+    }
+  }, [deviceOnline, devId]);
+
   // 展示顶部内容
   const [showTopContent, setShowTopContent] = useState(true);
 

package/lib/utils/ttt.d.ts

@@ -38,4 +38,16 @@ export declare function getAIFrameFeature(devId: string): Promise<GetAIFrameFeat
 export declare function setAIFrameFeature(params: SetAIFrameFeatureParams): Promise<any>;
 export declare function setTrailFinish(devId: string): Promise<unknown>;
 export declare function isLowPhone(): Promise<boolean>;
+/**
+ * 通知宿主当前视频流对应的设备已离线。
+ *
+ * 这个 TTT 方法不是所有宿主都提供，因此调用前必须做能力判断；
+ * 老宿主或 Web 环境下直接跳过，不能影响播放器自身的离线处理。
+ */
+export declare function isOfflineForStream(devId: string): boolean;
 export declare function getNgRawData(): Promise<unknown>;
+export declare function isClarityChangedSupported(): boolean;
+export type ClarityChangedResult = {
+    clarity: 'HD' | 'SD';
+};
+export declare function clarityChanged(devId: string): Promise<ClarityChangedResult | null>;

package/lib/utils/ttt.js

@@ -120,10 +120,33 @@ export function isLowPhone() {
     }
   });
 }
+
+/**
+ * 通知宿主当前视频流对应的设备已离线。
+ *
+ * 这个 TTT 方法不是所有宿主都提供，因此调用前必须做能力判断；
+ * 老宿主或 Web 环境下直接跳过，不能影响播放器自身的离线处理。
+ */
+export function isOfflineForStream(devId) {
+  var _ty3;
+  const method = (_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.isOfflineForStream;
+  if (typeof method !== 'function') {
+    return false;
+  }
+  try {
+    method({
+      devId
+    });
+    return true;
+  } catch (error) {
+    console.warn('res===isOfflineForStream fail', error);
+    return false;
+  }
+}
 export function getNgRawData() {
   return new Promise(resolve => {
-    var _ty3;
-    const isSupport = typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.getNgRawData) === 'function';
+    var _ty4;
+    const isSupport = typeof ((_ty4 = ty) === null || _ty4 === void 0 ? void 0 : _ty4.getNgRawData) === 'function';
     if (!isSupport) {
       resolve(false);
       return;
@@ -142,4 +165,37 @@ export function getNgRawData() {
       resolve(false);
     }
   });
+}
+
+// 是否支持自动清晰度（ttt 方法 clarityChanged 存在即支持）
+export function isClarityChangedSupported() {
+  var _ty$ipc6;
+  return typeof ((_ty$ipc6 = ty.ipc) === null || _ty$ipc6 === void 0 ? void 0 : _ty$ipc6.clarityChanged) === 'function';
+}
+export function clarityChanged(devId) {
+  return new Promise(resolve => {
+    var _ty$ipc7;
+    if (typeof ((_ty$ipc7 = ty.ipc) === null || _ty$ipc7 === void 0 ? void 0 : _ty$ipc7.clarityChanged) !== 'function') {
+      resolve(null);
+      return;
+    }
+    if (!isClarityChangedSupported()) {
+      resolve(null);
+      return;
+    }
+    try {
+      ty.ipc.clarityChanged({
+        devId,
+        success: res => {
+          resolve(res !== null && res !== void 0 ? res : null);
+        },
+        fail: e => {
+          console.warn('res===clarityChanged fail', e);
+          resolve(null);
+        }
+      });
+    } catch (e) {
+      resolve(null);
+    }
+  });
 }

package/lib/widgets/resolution/autoClarity.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './resolution.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare const AUTO_CLARITY_STORAGE_KEY = "autoClarity";
+export type AutoClarityMemory = {
+    enabled: boolean;
+    clarity: 'HD' | 'SD' | null;
+};
+export declare const AutoClarity: (props: Props) => React.JSX.Element;
+export {};

package/lib/widgets/resolution/autoClarity.js

@@ -0,0 +1,110 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import Strings from '../../i18n';
+import { useStore } from '../../ctx/store';
+import { storage } from '../../utils/storage';
+import { UIEventContext } from '../../ui/context';
+import { widgetClick, widgetLabs, autoClarityChange } from '../../ui/constant';
+import { clarityChanged } from '../../utils/ttt';
+import './resolution.less';
+// 自动清晰度记忆 storage key（按设备维度隔离由 storage 内部 prefix 处理）
+export const AUTO_CLARITY_STORAGE_KEY = 'autoClarity';
+export const AutoClarity = props => {
+  const {
+    className,
+    devId
+  } = props;
+  const {
+    screenType,
+    resolutionList
+  } = useStore({
+    screenType: props.screenType,
+    resolutionList: props.resolutionList
+  });
+  const {
+    event
+  } = useContext(UIEventContext);
+
+  // 是否处于自动模式
+  const [auto, setAuto] = useState(false);
+
+  // 广播自动清晰度状态给 VideoBitKBP 等监听方
+  const emitClarity = (enabled, clarity) => {
+    event.emit(autoClarityChange, {
+      enabled,
+      clarity
+    });
+  };
+
+  // 进入时恢复上次退出时的选择
+  useEffect(() => {
+    const cached = storage.getSync(AUTO_CLARITY_STORAGE_KEY);
+    if (cached !== null && cached !== void 0 && cached.enabled) {
+      var _cached$clarity;
+      setAuto(true);
+      emitClarity(true, (_cached$clarity = cached.clarity) !== null && _cached$clarity !== void 0 ? _cached$clarity : null);
+      // 恢复自动模式后重新拉取一次当前清晰度
+      clarityChanged(devId).then(res => {
+        if (res !== null && res !== void 0 && res.clarity) {
+          emitClarity(true, res.clarity);
+          storage.set(AUTO_CLARITY_STORAGE_KEY, {
+            enabled: true,
+            clarity: res.clarity
+          });
+        }
+      });
+    } else {
+      emitClarity(false, null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [devId]);
+
+  // TODO: 后面取消注释  宿主不存在 ttt 方法 clarityChanged 时整个入口不渲染
+  // if (!isClarityChangedSupported()) {
+  //   return null;
+  // }
+
+  // TODO: 后面取消注释 设备支持的清晰度档位数量 ≥ 2 时才展示自动
+  // if (!resolutionList || resolutionList.length < 2) {
+  //   return null;
+  // }
+
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: async () => {
+      var _res$clarity;
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.AUTO_CLARITY
+      });
+
+      // 关闭自动模式
+      if (auto) {
+        setAuto(false);
+        emitClarity(false, null);
+        storage.set(AUTO_CLARITY_STORAGE_KEY, {
+          enabled: false,
+          clarity: null
+        });
+        return;
+      }
+
+      // 开启自动模式并读取回调结果
+      setAuto(true);
+      const res = await clarityChanged(devId);
+      const next = (_res$clarity = res === null || res === void 0 ? void 0 : res.clarity) !== null && _res$clarity !== void 0 ? _res$clarity : null;
+      emitClarity(true, next);
+      storage.set(AUTO_CLARITY_STORAGE_KEY, {
+        enabled: true,
+        clarity: next
+      });
+    },
+    className: clsx(className)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-plugin-resolution', {
+      'ipc-player-plugin-resolution-full': screenType === 'full',
+      'ipc-player-plugin-resolution-active': auto
+    })
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "resolutionText"
+  }, Strings.getLang('ipc_player_resolution_auto'))));
+};

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

@@ -1 +1,2 @@
 export * from './resolution';
+export * from './autoClarity';

package/lib/widgets/resolution/index.js

@@ -1 +1,2 @@
-export * from './resolution';
+export * from './resolution';
+export * from './autoClarity';

package/lib/widgets/resolution/resolution.less

@@ -21,6 +21,10 @@
   border-radius: calc(5px * var(--ipc-player-size-scale, 1));
 }
 
+.ipc-player-plugin-resolution-active {
+  background-color: var(--brandColor, rgba(255, 89, 42, 0.9));
+}
+
 .ipc-player-plugin-full-resolution-control {
   height: 100%;
   width: 200px;

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,10 +1,15 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { View, Text, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import { getVideoBitrateKbps, requestWifiSignal } from '@ray-js/ray-ipc-utils';
 import { PlayState } from '../../interface';
 import './videoBitKBP.less';
 import { useStore } from '../../ctx/store';
+import Strings from '../../i18n';
+import { UIEventContext } from '../../ui/context';
+import { autoClarityChange } from '../../ui/constant';
+import { storage } from '../../utils/storage';
+import { AUTO_CLARITY_STORAGE_KEY } from '../resolution/autoClarity';
 export const VideoBitKBP = props => {
   const {
     devId,
@@ -15,10 +20,30 @@ export const VideoBitKBP = props => {
   } = props;
   const [bitKBP, setBitKBP] = useState('');
   const [signalStrength, setSignalStrength] = useState(null);
+  // 自动清晰度当前档位：null 表示未开启自动模式，不展示
+  const [autoClarity, setAutoClarity] = useState(() => {
+    var _cached$clarity;
+    const cached = storage.getSync(AUTO_CLARITY_STORAGE_KEY);
+    return cached !== null && cached !== void 0 && cached.enabled ? (_cached$clarity = cached.clarity) !== null && _cached$clarity !== void 0 ? _cached$clarity : null : null;
+  });
   const store = useStore({
     playState
   });
+  const {
+    event
+  } = useContext(UIEventContext);
   const timerRef = useRef();
+
+  // 监听 AutoClarity 控件广播的自动清晰度状态
+  useEffect(() => {
+    const onAutoClarityChange = payload => {
+      setAutoClarity(payload.enabled ? payload.clarity : null);
+    };
+    event.on(autoClarityChange, onAutoClarityChange);
+    return () => {
+      event.off(autoClarityChange, onAutoClarityChange);
+    };
+  }, [event]);
   useEffect(() => {
     if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
       init();
@@ -75,7 +100,9 @@ export const VideoBitKBP = props => {
     className: "ipc-player-plugin-videoBitKBP-divider"
   }), hasKbps && /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP-kbps"
-  }, /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
+  }, autoClarity && /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-videoBitKBP-clarity"
+  }, autoClarity === 'HD' ? Strings.getLang('ipc_player_resolution_HD') : Strings.getLang('ipc_player_resolution_SD')), /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-videoBitKBP-unit-kbs"
   }, "KB/S"))));
 };

package/lib/widgets/videoBitKBP/videoBitKBP.less

@@ -36,6 +36,9 @@
   display: flex;
   align-items: center;
 }
+.ipc-player-plugin-videoBitKBP-clarity {
+  margin-right: calc(4px * var(--ipc-player-size-scale, 1));
+}
 .ipc-player-plugin-videoBitKBP-unit-kbs {
   margin-left: calc(4px * var(--ipc-player-size-scale, 1));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.52-beta.5",
+  "version": "0.0.53-beta.0",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [