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

package/lib/ctx/ctx.js

@@ -12,7 +12,7 @@ import { changeIgnoreHideStopPreview } from '../ui/constant';
 import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { getEventInstance } from './event';
 import { isMultiCameraTileSupported, useMultiCameraCtx } from './multiCameraCtx';
-import { isClarityChangedSupported } from '../utils/ttt';
+import { isClarityChangedSupported, subscribeClarityChanged } from '../utils/ttt';
 const SAVE_TO_ALBUM = 1;
 export const createUseCtx = _ref => {
   let {
@@ -75,6 +75,8 @@ export const createUseCtx = _ref => {
     const [resolution] = useAtom('HD');
     // resolution 清晰度列表
     const [resolutionList, setResolutionList] = useAtom([]);
+    // 自动模式下宿主上报的实际清晰度，供横竖屏码率区域共用
+    const [autoClarity] = useAtom(null);
 
     // 单向对讲还是双向对讲
     const [intercomMode, setIntercomMode] = useAtom(IntercomMode.TwoWay);
@@ -102,10 +104,19 @@ export const createUseCtx = _ref => {
     const [bottomRightContent] = useAtom(initBottomRightContent || defaultBottomRightContent || []);
     const [absoluteContent] = useAtom(initAbsoluteContent || defaultAbsoluteContent || []);
     const {
-      _playState
+      _playState,
+      currentResolution
     } = useStore({
-      _playState: playState
+      _playState: playState,
+      currentResolution: resolution
     });
+    useEffect(() => {
+      updateAtom(autoClarity, null);
+      if (currentResolution !== ClarityType.AUTO || !devId) return undefined;
+      return subscribeClarityChanged(devId, res => {
+        updateAtom(autoClarity, res.clarity);
+      });
+    }, [autoClarity, currentResolution, devId]);
     const eventRef = useRef();
     if (!eventRef.current) {
       eventRef.current = getEventInstance();
@@ -325,6 +336,7 @@ export const createUseCtx = _ref => {
       mute,
       resolution,
       resolutionList,
+      autoClarity,
       intercom,
       intercomMode,
       intercomSupported,

package/lib/interface.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PrimitiveAtom } from 'jotai';
+import type { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import type { Toast, IntercomMode } from './ports.output';
 import { useMultiCameraCtx } from './ctx/multiCameraCtx';
 import type { ZoomSkill } from './widgets/zoomTurntable/lensSkill';
@@ -74,6 +75,7 @@ export type UseCtx = (options: {
     setZoomLensIndex: (value: number) => void;
     resolution: RetAtom<string>;
     resolutionList: RetAtom<string[]>;
+    autoClarity: RetAtom<ClarityType | null>;
     playState: RetAtom<PlayState>;
     IPCPlayerInstance: IpcContext;
     topLeftContent: RetAtom<ComponentConfig[]>;

package/lib/ui/constant.d.ts

@@ -60,12 +60,6 @@ export declare const widgetLabs: {
  */
 export declare const bottomLeftContentResize = "bottomLeftContentResize";
 export declare const zoomLevelChange = "zoomLevelChange";
-/**
- * 自动清晰度状态变化事件：Resolution 控件检测到清晰度进入/退出自动模式或收到
- * onClarityChanged 事件时触发，携带 { enabled, clarity }（clarity 为 ClarityType | null）。
- * VideoBitKBP 监听此事件，在码率前展示当前高清/标清文案。
- */
-export declare const autoClarityChange = "autoClarityChange";
 export declare const setScaleMultipleEvent = "setScaleMultipleEvent";
 export declare const decodeClarityDic: {
     SS: string;

package/lib/ui/constant.js

@@ -63,13 +63,6 @@ export const widgetLabs = {
  */
 export const bottomLeftContentResize = 'bottomLeftContentResize';
 export const zoomLevelChange = 'zoomLevelChange';
-
-/**
- * 自动清晰度状态变化事件：Resolution 控件检测到清晰度进入/退出自动模式或收到
- * onClarityChanged 事件时触发，携带 { enabled, clarity }（clarity 为 ClarityType | null）。
- * VideoBitKBP 监听此事件，在码率前展示当前高清/标清文案。
- */
-export const autoClarityChange = 'autoClarityChange';
 export const setScaleMultipleEvent = 'setScaleMultipleEvent';
 export const decodeClarityDic = {
   SS: 'ss',

package/lib/widgets/resolution/resolution.js

@@ -1,19 +1,16 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { View, Text } from '@ray-js/ray';
 import clsx from 'clsx';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext } from 'react';
 import { useMemoizedFn } from 'ahooks';
-import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import Strings from '../../i18n';
 import { FullResolutionControl } from './fullResolutionControl';
-import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick, autoClarityChange } from '../../ui/constant';
+import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
 import { UIEventContext } from '../../ui/context';
 import { useStore } from '../../ctx/store';
-import { subscribeClarityChanged } from '../../utils/ttt';
 import './resolution.less';
 export const Resolution = props => {
   const {
-    devId,
     setResolution,
     addContent,
     hasContent,
@@ -31,30 +28,6 @@ export const Resolution = props => {
   const {
     event
   } = useContext(UIEventContext);
-  const autoClarityRef = useRef(null);
-
-  // 广播自动清晰度状态给 VideoBitKBP 等监听方；
-  // 自动模式下监听当前实际清晰度，仅用于码率区域展示。
-  useEffect(() => {
-    const emitClarity = (enabled, clarity) => {
-      event.emit(autoClarityChange, {
-        enabled,
-        clarity
-      });
-    };
-    if (resolution !== ClarityType.AUTO) {
-      autoClarityRef.current = null;
-      emitClarity(false, null);
-      return undefined;
-    }
-    // 横竖屏切换会重新布局码率区域，重放最近一次实际清晰度，避免前缀丢失。
-    emitClarity(true, autoClarityRef.current);
-    if (!devId) return undefined;
-    return subscribeClarityChanged(devId, res => {
-      autoClarityRef.current = res.clarity;
-      emitClarity(true, res.clarity);
-    });
-  }, [devId, event, resolution, screenType]);
   const onResolution = useMemoizedFn(() => {
     event.emit(widgetClick, {
       widgetId: widgetLabs.RESOLUTION

package/lib/widgets/videoBitKBP/videoBitKBP.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { 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';
@@ -7,8 +7,6 @@ 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';
 export const VideoBitKBP = props => {
   const {
     devId,
@@ -19,31 +17,12 @@ export const VideoBitKBP = props => {
   } = props;
   const [bitKBP, setBitKBP] = useState('');
   const [signalStrength, setSignalStrength] = useState(null);
-  // 自动清晰度当前实际档位：null 表示未开启自动模式，不展示
-  const [autoClarity, setAutoClarity] = useState(null);
   const store = useStore({
     playState,
-    resolution: props.resolution
+    resolution: props.resolution,
+    autoClarity: props.autoClarity
   });
-  const {
-    event
-  } = useContext(UIEventContext);
   const timerRef = useRef();
-  // 监听 Resolution 控件广播的自动清晰度状态
-  useEffect(() => {
-    const onAutoClarityChange = payload => {
-      setAutoClarity(payload.enabled ? payload.clarity : null);
-    };
-    event.on(autoClarityChange, onAutoClarityChange);
-    return () => {
-      event.off(autoClarityChange, onAutoClarityChange);
-    };
-  }, [event]);
-  useEffect(() => {
-    if (store.resolution !== ClarityType.AUTO) {
-      setAutoClarity(null);
-    }
-  }, [store.resolution]);
   useEffect(() => {
     if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
       init();
@@ -79,6 +58,7 @@ export const VideoBitKBP = props => {
   };
   const hasKbps = !hideKbsMenu && bitKBP !== '' && bitKBP !== '0';
   const hasSignal = !hideSignalMenu && signalStrength !== null;
+  const activeClarity = store.resolution === ClarityType.AUTO ? store.autoClarity : null;
   if (!hasKbps && !hasSignal || store.playState !== PlayState.PLAYING) {
     return null;
   }
@@ -100,7 +80,7 @@ export const VideoBitKBP = props => {
     className: "ipc-player-plugin-videoBitKBP-divider"
   }), hasKbps && /*#__PURE__*/React.createElement(View, {
     className: "ipc-player-plugin-videoBitKBP-kbps"
-  }, autoClarity && /*#__PURE__*/React.createElement(Text, {
+  }, activeClarity && /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-videoBitKBP-clarity"
   }, (clarity => {
     switch (clarity) {
@@ -121,7 +101,7 @@ export const VideoBitKBP = props => {
       default:
         return clarity;
     }
-  })(autoClarity)), /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
+  })(activeClarity)), /*#__PURE__*/React.createElement(Text, null, bitKBP), /*#__PURE__*/React.createElement(Text, {
     className: "ipc-player-plugin-videoBitKBP-unit-kbs"
   }, "KB/S"))));
 };

package/package.json

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