@ray-js/ipc-player-integration 0.0.53-beta.0 → 0.0.53-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ctx/ctx.composition.js +1 -6
- package/lib/ctx/ctx.js +21 -3
- package/lib/features/initPlayerWidgets/index.js +0 -9
- package/lib/i18n/index.d.ts +4 -4
- package/lib/i18n/strings.d.ts +2 -2
- package/lib/i18n/strings.js +2 -2
- package/lib/interface.d.ts +1 -1
- package/lib/ui/constant.d.ts +2 -3
- package/lib/ui/constant.js +2 -3
- package/lib/ui/ui.js +3 -3
- package/lib/utils/ttt.d.ts +2 -2
- package/lib/utils/ttt.js +5 -7
- package/lib/widgets/resolution/index.d.ts +0 -1
- package/lib/widgets/resolution/index.js +1 -2
- package/lib/widgets/resolution/resolution.js +29 -3
- package/lib/widgets/resolution/resolution.less +0 -4
- package/lib/widgets/videoBitKBP/videoBitKBP.js +11 -10
- package/package.json +1 -1
- package/lib/widgets/resolution/autoClarity.d.ts +0 -13
- package/lib/widgets/resolution/autoClarity.js +0 -110
|
@@ -4,7 +4,7 @@ const _excluded = ["title", "duration"];
|
|
|
4
4
|
import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
|
|
5
5
|
import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
|
|
6
6
|
import { createUseCtx } from './ctx';
|
|
7
|
-
import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, TryExperience, Resolution,
|
|
7
|
+
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';
|
|
8
8
|
import { authorizeStatus } from '../utils/authorize';
|
|
9
9
|
import { PlayState } from '../interface';
|
|
10
10
|
import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
|
|
@@ -74,11 +74,6 @@ export const defaultBottomLeftContent = [{
|
|
|
74
74
|
id: 'RealTimeMagnification',
|
|
75
75
|
content: RealTimeMagnification,
|
|
76
76
|
hidden: true
|
|
77
|
-
}, /* 自动清晰度:仅宿主存在 ttt 方法 clarityChanged 时由 widget 内部渲染 */
|
|
78
|
-
{
|
|
79
|
-
id: 'AutoClarity',
|
|
80
|
-
content: AutoClarity,
|
|
81
|
-
hidden: true
|
|
82
77
|
}];
|
|
83
78
|
export const defaultBottomRightContent = [{
|
|
84
79
|
id: 'SwitchLayout',
|
package/lib/ctx/ctx.js
CHANGED
|
@@ -109,6 +109,15 @@ export const createUseCtx = _ref => {
|
|
|
109
109
|
if (!eventRef.current) {
|
|
110
110
|
eventRef.current = getEventInstance();
|
|
111
111
|
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* 自动清晰度作为独立档位并入清晰度列表:
|
|
115
|
+
* 竖屏宿主弹框(由 resolutionList 构建 actionData)与横屏 FullResolutionControl 共用。
|
|
116
|
+
*/
|
|
117
|
+
const withAutoClarity = function () {
|
|
118
|
+
let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
119
|
+
return list.includes(ClarityType.AUTO) ? list : [...list, ClarityType.AUTO];
|
|
120
|
+
};
|
|
112
121
|
useEffect(() => {
|
|
113
122
|
// 初始化获取缓存值
|
|
114
123
|
|
|
@@ -117,7 +126,7 @@ export const createUseCtx = _ref => {
|
|
|
117
126
|
try {
|
|
118
127
|
var _res$maxZoomSettings;
|
|
119
128
|
const res = await getMemoryState(devId);
|
|
120
|
-
setResolutionList(res.resolutionList);
|
|
129
|
+
setResolutionList(withAutoClarity(res.resolutionList));
|
|
121
130
|
_setResolution(res.resolution, true);
|
|
122
131
|
_setMute(res.mute, true);
|
|
123
132
|
setIntercomMode(res.intercomMode);
|
|
@@ -133,7 +142,7 @@ export const createUseCtx = _ref => {
|
|
|
133
142
|
// 获取缓存的值且同步
|
|
134
143
|
getMemoryState(devId).then(res => {
|
|
135
144
|
var _res$maxZoomSettings2;
|
|
136
|
-
setResolutionList(res.resolutionList);
|
|
145
|
+
setResolutionList(withAutoClarity(res.resolutionList));
|
|
137
146
|
// 传true表示值即可,会取播放器的值
|
|
138
147
|
_setResolution(res.resolution, true);
|
|
139
148
|
_setMute(res.mute, true);
|
|
@@ -238,8 +247,17 @@ export const createUseCtx = _ref => {
|
|
|
238
247
|
return false;
|
|
239
248
|
}
|
|
240
249
|
return new Promise((resolve, reject) => {
|
|
250
|
+
const clarityMap = {
|
|
251
|
+
[ClarityType.SS]: 'ss',
|
|
252
|
+
[ClarityType.SD]: 'normal',
|
|
253
|
+
[ClarityType.HD]: 'hd',
|
|
254
|
+
[ClarityType.UD]: 'ud',
|
|
255
|
+
[ClarityType.SSP]: 'ssp',
|
|
256
|
+
[ClarityType.AUTO]: 'auto',
|
|
257
|
+
[ClarityType.AUDIO]: 'audio'
|
|
258
|
+
};
|
|
241
259
|
IPCPlayerInstance.current.setClarity({
|
|
242
|
-
clarity: target
|
|
260
|
+
clarity: clarityMap[target] || 'normal',
|
|
243
261
|
success: () => {
|
|
244
262
|
setResolutionMemoryState(devId, target);
|
|
245
263
|
updateAtom(resolution, target);
|
|
@@ -52,15 +52,6 @@ export async function initPlayerWidgets(ctx, options) {
|
|
|
52
52
|
newDefaultBottomLeftContent[magnificationIndex].hidden = false;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
// 自动清晰度入口:这里只放开占位,真正是否渲染由 widget 内部按
|
|
56
|
-
// 「宿主有 ttt 方法 clarityChanged」+「设备支持的清晰度档位 ≥ 2」决定
|
|
57
|
-
{
|
|
58
|
-
const autoClarityIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'AutoClarity');
|
|
59
|
-
console.log('res===autoClarityIndex', autoClarityIndex);
|
|
60
|
-
if (autoClarityIndex !== -1) {
|
|
61
|
-
newDefaultBottomLeftContent[autoClarityIndex].hidden = false;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
55
|
// 焦距转盘入口:这里只放开占位,真正是否渲染由 widget 内部按
|
|
65
56
|
// 「宿主有 ty.ipc.switchChannel」+「ipc_multi_zoom 解析出 cnt > 1」决定
|
|
66
57
|
// (单镜头设备、不支持切镜头的老宿主都不出现)
|
package/lib/i18n/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ declare const Strings: kit.I18N<{
|
|
|
3
3
|
en: {
|
|
4
4
|
ipc_player_resolution_HD: string;
|
|
5
5
|
ipc_player_resolution_SD: string;
|
|
6
|
-
|
|
6
|
+
ipc_player_resolution_AUTO: string;
|
|
7
7
|
ipc_player_current_resolution_is_equal: string;
|
|
8
8
|
ipc_player_screenshot_success_tip: string;
|
|
9
9
|
ipc_player_screenshot_multi_success_tip: string;
|
|
@@ -44,7 +44,7 @@ declare const Strings: kit.I18N<{
|
|
|
44
44
|
zh: {
|
|
45
45
|
ipc_player_resolution_HD: string;
|
|
46
46
|
ipc_player_resolution_SD: string;
|
|
47
|
-
|
|
47
|
+
ipc_player_resolution_AUTO: string;
|
|
48
48
|
ipc_player_current_resolution_is_equal: string;
|
|
49
49
|
ipc_player_screenshot_success_tip: string;
|
|
50
50
|
ipc_player_screenshot_multi_success_tip: string;
|
|
@@ -85,7 +85,7 @@ declare const Strings: kit.I18N<{
|
|
|
85
85
|
}, {
|
|
86
86
|
ipc_player_resolution_HD: string;
|
|
87
87
|
ipc_player_resolution_SD: string;
|
|
88
|
-
|
|
88
|
+
ipc_player_resolution_AUTO: string;
|
|
89
89
|
ipc_player_current_resolution_is_equal: string;
|
|
90
90
|
ipc_player_screenshot_success_tip: string;
|
|
91
91
|
ipc_player_screenshot_multi_success_tip: string;
|
|
@@ -125,7 +125,7 @@ declare const Strings: kit.I18N<{
|
|
|
125
125
|
} | {
|
|
126
126
|
ipc_player_resolution_HD: string;
|
|
127
127
|
ipc_player_resolution_SD: string;
|
|
128
|
-
|
|
128
|
+
ipc_player_resolution_AUTO: string;
|
|
129
129
|
ipc_player_current_resolution_is_equal: string;
|
|
130
130
|
ipc_player_screenshot_success_tip: string;
|
|
131
131
|
ipc_player_screenshot_multi_success_tip: string;
|
package/lib/i18n/strings.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ declare const _default: {
|
|
|
2
2
|
en: {
|
|
3
3
|
ipc_player_resolution_HD: string;
|
|
4
4
|
ipc_player_resolution_SD: string;
|
|
5
|
-
|
|
5
|
+
ipc_player_resolution_AUTO: string;
|
|
6
6
|
ipc_player_current_resolution_is_equal: string;
|
|
7
7
|
ipc_player_screenshot_success_tip: string;
|
|
8
8
|
ipc_player_screenshot_multi_success_tip: string;
|
|
@@ -43,7 +43,7 @@ declare const _default: {
|
|
|
43
43
|
zh: {
|
|
44
44
|
ipc_player_resolution_HD: string;
|
|
45
45
|
ipc_player_resolution_SD: string;
|
|
46
|
-
|
|
46
|
+
ipc_player_resolution_AUTO: string;
|
|
47
47
|
ipc_player_current_resolution_is_equal: string;
|
|
48
48
|
ipc_player_screenshot_success_tip: string;
|
|
49
49
|
ipc_player_screenshot_multi_success_tip: string;
|
package/lib/i18n/strings.js
CHANGED
|
@@ -2,7 +2,7 @@ export default {
|
|
|
2
2
|
en: {
|
|
3
3
|
ipc_player_resolution_HD: 'HD',
|
|
4
4
|
ipc_player_resolution_SD: 'SD',
|
|
5
|
-
|
|
5
|
+
ipc_player_resolution_AUTO: 'Auto',
|
|
6
6
|
ipc_player_current_resolution_is_equal: 'Already at current clarity',
|
|
7
7
|
ipc_player_screenshot_success_tip: 'Screenshot saved to album',
|
|
8
8
|
ipc_player_screenshot_multi_success_tip: 'Screenshots saved to album',
|
|
@@ -43,7 +43,7 @@ export default {
|
|
|
43
43
|
zh: {
|
|
44
44
|
ipc_player_resolution_HD: '高清',
|
|
45
45
|
ipc_player_resolution_SD: '标清',
|
|
46
|
-
|
|
46
|
+
ipc_player_resolution_AUTO: '自动',
|
|
47
47
|
ipc_player_current_resolution_is_equal: '已是当前清晰度',
|
|
48
48
|
ipc_player_screenshot_success_tip: '截图已保存在APP相册',
|
|
49
49
|
ipc_player_screenshot_multi_success_tip: '图片已保存至相册',
|
package/lib/interface.d.ts
CHANGED
|
@@ -87,7 +87,7 @@ export type UseCtx = (options: {
|
|
|
87
87
|
setVerticalMic: (value: boolean) => void;
|
|
88
88
|
setScreenType: (type: ScreenType) => void;
|
|
89
89
|
setRecordingDisabled: (type: boolean) => void;
|
|
90
|
-
setResolution: (type: string) =>
|
|
90
|
+
setResolution: (type: string) => Promise<boolean>;
|
|
91
91
|
setResolutionList: (type: string[]) => void;
|
|
92
92
|
setRecording: (value: boolean, onlyUpdateAtom?: boolean) => Promise<CaptureResult>;
|
|
93
93
|
stopRecordingOnUnload: () => Promise<CaptureResult>;
|
package/lib/ui/constant.d.ts
CHANGED
|
@@ -33,7 +33,6 @@ export declare const widgetLabs: {
|
|
|
33
33
|
readonly SCREENSHOT: "Screenshot";
|
|
34
34
|
readonly RECORD_VIDEO: "RecordVideo";
|
|
35
35
|
readonly RESOLUTION: "Resolution";
|
|
36
|
-
readonly AUTO_CLARITY: "AutoClarity";
|
|
37
36
|
readonly TRY_EXPERIENCE: "TryExperience";
|
|
38
37
|
readonly FULL_RESOLUTION_CONTROL: "FullResolutionControl";
|
|
39
38
|
readonly MUTED: "Muted";
|
|
@@ -62,8 +61,8 @@ export declare const widgetLabs: {
|
|
|
62
61
|
export declare const bottomLeftContentResize = "bottomLeftContentResize";
|
|
63
62
|
export declare const zoomLevelChange = "zoomLevelChange";
|
|
64
63
|
/**
|
|
65
|
-
* 自动清晰度状态变化事件:
|
|
66
|
-
* 回调结果时触发,携带 { enabled, clarity }(clarity 为 'HD' | 'SD' | null)。
|
|
64
|
+
* 自动清晰度状态变化事件:Resolution 控件检测到清晰度进入/退出自动模式或收到
|
|
65
|
+
* clarityChanged 回调结果时触发,携带 { enabled, clarity }(clarity 为 'HD' | 'SD' | null)。
|
|
67
66
|
* VideoBitKBP 监听此事件,在码率前展示当前高清/标清文案。
|
|
68
67
|
*/
|
|
69
68
|
export declare const autoClarityChange = "autoClarityChange";
|
package/lib/ui/constant.js
CHANGED
|
@@ -35,7 +35,6 @@ export const widgetLabs = {
|
|
|
35
35
|
SCREENSHOT: 'Screenshot',
|
|
36
36
|
RECORD_VIDEO: 'RecordVideo',
|
|
37
37
|
RESOLUTION: 'Resolution',
|
|
38
|
-
AUTO_CLARITY: 'AutoClarity',
|
|
39
38
|
TRY_EXPERIENCE: 'TryExperience',
|
|
40
39
|
FULL_RESOLUTION_CONTROL: 'FullResolutionControl',
|
|
41
40
|
MUTED: 'Muted',
|
|
@@ -66,8 +65,8 @@ export const bottomLeftContentResize = 'bottomLeftContentResize';
|
|
|
66
65
|
export const zoomLevelChange = 'zoomLevelChange';
|
|
67
66
|
|
|
68
67
|
/**
|
|
69
|
-
* 自动清晰度状态变化事件:
|
|
70
|
-
* 回调结果时触发,携带 { enabled, clarity }(clarity 为 'HD' | 'SD' | null)。
|
|
68
|
+
* 自动清晰度状态变化事件:Resolution 控件检测到清晰度进入/退出自动模式或收到
|
|
69
|
+
* clarityChanged 回调结果时触发,携带 { enabled, clarity }(clarity 为 'HD' | 'SD' | null)。
|
|
71
70
|
* VideoBitKBP 监听此事件,在码率前展示当前高清/标清文案。
|
|
72
71
|
*/
|
|
73
72
|
export const autoClarityChange = 'autoClarityChange';
|
package/lib/ui/ui.js
CHANGED
|
@@ -23,7 +23,7 @@ import { useMemoizedFn } from '../hooks';
|
|
|
23
23
|
import { Storage } from '../utils/storage';
|
|
24
24
|
import './ui.less';
|
|
25
25
|
import { updatePlayerWidgetProps } from '../features';
|
|
26
|
-
import { getNgRawData, getSmartImageQualityState, isLowPhone,
|
|
26
|
+
import { getNgRawData, getSmartImageQualityState, isLowPhone, notifyOfflineShown } from '../utils/ttt';
|
|
27
27
|
import { getCaptureResultSummary } from '../utils/captureResult';
|
|
28
28
|
import { lensCount } from '../widgets/zoomTurntable/lensSkill';
|
|
29
29
|
import { shouldRenderContent } from './absoluteContent';
|
|
@@ -153,10 +153,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
153
153
|
});
|
|
154
154
|
}, []);
|
|
155
155
|
|
|
156
|
-
//
|
|
156
|
+
// 监听设备在线状态,离线提示展示时通知宿主;notifyOfflineShown 内部兼容没有该 TTT 方法的宿主。
|
|
157
157
|
useEffect(() => {
|
|
158
158
|
if (!deviceOnline) {
|
|
159
|
-
|
|
159
|
+
notifyOfflineShown(devId);
|
|
160
160
|
}
|
|
161
161
|
}, [deviceOnline, devId]);
|
|
162
162
|
|
package/lib/utils/ttt.d.ts
CHANGED
|
@@ -39,12 +39,12 @@ export declare function setAIFrameFeature(params: SetAIFrameFeatureParams): Prom
|
|
|
39
39
|
export declare function setTrailFinish(devId: string): Promise<unknown>;
|
|
40
40
|
export declare function isLowPhone(): Promise<boolean>;
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
42
|
+
* 通知宿主离线提示已经展示。
|
|
43
43
|
*
|
|
44
44
|
* 这个 TTT 方法不是所有宿主都提供,因此调用前必须做能力判断;
|
|
45
45
|
* 老宿主或 Web 环境下直接跳过,不能影响播放器自身的离线处理。
|
|
46
46
|
*/
|
|
47
|
-
export declare function
|
|
47
|
+
export declare function notifyOfflineShown(deviceId: string): boolean;
|
|
48
48
|
export declare function getNgRawData(): Promise<unknown>;
|
|
49
49
|
export declare function isClarityChangedSupported(): boolean;
|
|
50
50
|
export type ClarityChangedResult = {
|
package/lib/utils/ttt.js
CHANGED
|
@@ -122,24 +122,22 @@ export function isLowPhone() {
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
/**
|
|
125
|
-
*
|
|
125
|
+
* 通知宿主离线提示已经展示。
|
|
126
126
|
*
|
|
127
127
|
* 这个 TTT 方法不是所有宿主都提供,因此调用前必须做能力判断;
|
|
128
128
|
* 老宿主或 Web 环境下直接跳过,不能影响播放器自身的离线处理。
|
|
129
129
|
*/
|
|
130
|
-
export function
|
|
130
|
+
export function notifyOfflineShown(deviceId) {
|
|
131
131
|
var _ty3;
|
|
132
|
-
const method = (_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.
|
|
132
|
+
const method = typeof ty !== 'undefined' ? (_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.notifyOfflineShown : undefined;
|
|
133
133
|
if (typeof method !== 'function') {
|
|
134
134
|
return false;
|
|
135
135
|
}
|
|
136
136
|
try {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
});
|
|
137
|
+
console.warn('res===notifyOfflineShown');
|
|
138
|
+
method(deviceId, 'preview_mini');
|
|
140
139
|
return true;
|
|
141
140
|
} catch (error) {
|
|
142
|
-
console.warn('res===isOfflineForStream fail', error);
|
|
143
141
|
return false;
|
|
144
142
|
}
|
|
145
143
|
}
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from './resolution';
|
|
2
|
-
export * from './autoClarity';
|
|
1
|
+
export * from './resolution';
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import { View, Text } from '@ray-js/ray';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import React, { useContext } from 'react';
|
|
4
|
+
import React, { useContext, useEffect } from 'react';
|
|
5
5
|
import { useMemoizedFn } from 'ahooks';
|
|
6
|
+
import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
|
|
6
7
|
import Strings from '../../i18n';
|
|
7
8
|
import { FullResolutionControl } from './fullResolutionControl';
|
|
8
|
-
import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick } from '../../ui/constant';
|
|
9
|
+
import { fullResolutionId, pauseTimeToHideAllComponent, hideAllComponent, widgetLabs, widgetClick, autoClarityChange } from '../../ui/constant';
|
|
9
10
|
import { UIEventContext } from '../../ui/context';
|
|
10
11
|
import { useStore } from '../../ctx/store';
|
|
12
|
+
import { clarityChanged } from '../../utils/ttt';
|
|
11
13
|
import './resolution.less';
|
|
12
14
|
export const Resolution = props => {
|
|
13
15
|
const {
|
|
14
|
-
|
|
16
|
+
devId,
|
|
15
17
|
setResolution,
|
|
16
18
|
addContent,
|
|
17
19
|
hasContent,
|
|
@@ -29,6 +31,30 @@ export const Resolution = props => {
|
|
|
29
31
|
const {
|
|
30
32
|
event
|
|
31
33
|
} = useContext(UIEventContext);
|
|
34
|
+
|
|
35
|
+
// 广播自动清晰度状态给 VideoBitKBP 等监听方;
|
|
36
|
+
// 自动模式下读取一次当前实际清晰度,仅用于码率区域展示。
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
const emitClarity = (enabled, clarity) => {
|
|
39
|
+
event.emit(autoClarityChange, {
|
|
40
|
+
enabled,
|
|
41
|
+
clarity
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
if (resolution !== ClarityType.AUTO) {
|
|
45
|
+
emitClarity(false, null);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
emitClarity(true, null);
|
|
49
|
+
if (devId) {
|
|
50
|
+
clarityChanged(devId).then(res => {
|
|
51
|
+
if (res !== null && res !== void 0 && res.clarity) {
|
|
52
|
+
emitClarity(true, res.clarity);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
57
|
+
}, [devId, resolution]);
|
|
32
58
|
const onResolution = useMemoizedFn(() => {
|
|
33
59
|
event.emit(widgetClick, {
|
|
34
60
|
widgetId: widgetLabs.RESOLUTION
|
|
@@ -21,10 +21,6 @@
|
|
|
21
21
|
border-radius: calc(5px * var(--ipc-player-size-scale, 1));
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.ipc-player-plugin-resolution-active {
|
|
25
|
-
background-color: var(--brandColor, rgba(255, 89, 42, 0.9));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
24
|
.ipc-player-plugin-full-resolution-control {
|
|
29
25
|
height: 100%;
|
|
30
26
|
width: 200px;
|
|
@@ -2,14 +2,13 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import { View, Text, usePageEvent } from '@ray-js/ray';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { getVideoBitrateKbps, requestWifiSignal } from '@ray-js/ray-ipc-utils';
|
|
5
|
+
import { ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
|
|
5
6
|
import { PlayState } from '../../interface';
|
|
6
7
|
import './videoBitKBP.less';
|
|
7
8
|
import { useStore } from '../../ctx/store';
|
|
8
9
|
import Strings from '../../i18n';
|
|
9
10
|
import { UIEventContext } from '../../ui/context';
|
|
10
11
|
import { autoClarityChange } from '../../ui/constant';
|
|
11
|
-
import { storage } from '../../utils/storage';
|
|
12
|
-
import { AUTO_CLARITY_STORAGE_KEY } from '../resolution/autoClarity';
|
|
13
12
|
export const VideoBitKBP = props => {
|
|
14
13
|
const {
|
|
15
14
|
devId,
|
|
@@ -20,21 +19,18 @@ export const VideoBitKBP = props => {
|
|
|
20
19
|
} = props;
|
|
21
20
|
const [bitKBP, setBitKBP] = useState('');
|
|
22
21
|
const [signalStrength, setSignalStrength] = useState(null);
|
|
23
|
-
//
|
|
24
|
-
const [autoClarity, setAutoClarity] = useState(
|
|
25
|
-
var _cached$clarity;
|
|
26
|
-
const cached = storage.getSync(AUTO_CLARITY_STORAGE_KEY);
|
|
27
|
-
return cached !== null && cached !== void 0 && cached.enabled ? (_cached$clarity = cached.clarity) !== null && _cached$clarity !== void 0 ? _cached$clarity : null : null;
|
|
28
|
-
});
|
|
22
|
+
// 自动清晰度当前实际档位:null 表示未开启自动模式,不展示
|
|
23
|
+
const [autoClarity, setAutoClarity] = useState(null);
|
|
29
24
|
const store = useStore({
|
|
30
|
-
playState
|
|
25
|
+
playState,
|
|
26
|
+
resolution: props.resolution
|
|
31
27
|
});
|
|
32
28
|
const {
|
|
33
29
|
event
|
|
34
30
|
} = useContext(UIEventContext);
|
|
35
31
|
const timerRef = useRef();
|
|
36
32
|
|
|
37
|
-
// 监听
|
|
33
|
+
// 监听 Resolution 控件广播的自动清晰度状态
|
|
38
34
|
useEffect(() => {
|
|
39
35
|
const onAutoClarityChange = payload => {
|
|
40
36
|
setAutoClarity(payload.enabled ? payload.clarity : null);
|
|
@@ -44,6 +40,11 @@ export const VideoBitKBP = props => {
|
|
|
44
40
|
event.off(autoClarityChange, onAutoClarityChange);
|
|
45
41
|
};
|
|
46
42
|
}, [event]);
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
if (store.resolution !== ClarityType.AUTO) {
|
|
45
|
+
setAutoClarity(null);
|
|
46
|
+
}
|
|
47
|
+
}, [store.resolution]);
|
|
47
48
|
useEffect(() => {
|
|
48
49
|
if (store.playState === PlayState.PLAYING && (!hideKbsMenu || !hideSignalMenu)) {
|
|
49
50
|
init();
|
package/package.json
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentConfigProps } from '../../interface';
|
|
3
|
-
import './resolution.less';
|
|
4
|
-
type Props = ComponentConfigProps & {
|
|
5
|
-
className?: string;
|
|
6
|
-
};
|
|
7
|
-
export declare const AUTO_CLARITY_STORAGE_KEY = "autoClarity";
|
|
8
|
-
export type AutoClarityMemory = {
|
|
9
|
-
enabled: boolean;
|
|
10
|
-
clarity: 'HD' | 'SD' | null;
|
|
11
|
-
};
|
|
12
|
-
export declare const AutoClarity: (props: Props) => React.JSX.Element;
|
|
13
|
-
export {};
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import React, { useContext, useEffect, useState } from 'react';
|
|
2
|
-
import { View, Text } from '@ray-js/ray';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
|
-
import Strings from '../../i18n';
|
|
5
|
-
import { useStore } from '../../ctx/store';
|
|
6
|
-
import { storage } from '../../utils/storage';
|
|
7
|
-
import { UIEventContext } from '../../ui/context';
|
|
8
|
-
import { widgetClick, widgetLabs, autoClarityChange } from '../../ui/constant';
|
|
9
|
-
import { clarityChanged } from '../../utils/ttt';
|
|
10
|
-
import './resolution.less';
|
|
11
|
-
// 自动清晰度记忆 storage key(按设备维度隔离由 storage 内部 prefix 处理)
|
|
12
|
-
export const AUTO_CLARITY_STORAGE_KEY = 'autoClarity';
|
|
13
|
-
export const AutoClarity = props => {
|
|
14
|
-
const {
|
|
15
|
-
className,
|
|
16
|
-
devId
|
|
17
|
-
} = props;
|
|
18
|
-
const {
|
|
19
|
-
screenType,
|
|
20
|
-
resolutionList
|
|
21
|
-
} = useStore({
|
|
22
|
-
screenType: props.screenType,
|
|
23
|
-
resolutionList: props.resolutionList
|
|
24
|
-
});
|
|
25
|
-
const {
|
|
26
|
-
event
|
|
27
|
-
} = useContext(UIEventContext);
|
|
28
|
-
|
|
29
|
-
// 是否处于自动模式
|
|
30
|
-
const [auto, setAuto] = useState(false);
|
|
31
|
-
|
|
32
|
-
// 广播自动清晰度状态给 VideoBitKBP 等监听方
|
|
33
|
-
const emitClarity = (enabled, clarity) => {
|
|
34
|
-
event.emit(autoClarityChange, {
|
|
35
|
-
enabled,
|
|
36
|
-
clarity
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// 进入时恢复上次退出时的选择
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
const cached = storage.getSync(AUTO_CLARITY_STORAGE_KEY);
|
|
43
|
-
if (cached !== null && cached !== void 0 && cached.enabled) {
|
|
44
|
-
var _cached$clarity;
|
|
45
|
-
setAuto(true);
|
|
46
|
-
emitClarity(true, (_cached$clarity = cached.clarity) !== null && _cached$clarity !== void 0 ? _cached$clarity : null);
|
|
47
|
-
// 恢复自动模式后重新拉取一次当前清晰度
|
|
48
|
-
clarityChanged(devId).then(res => {
|
|
49
|
-
if (res !== null && res !== void 0 && res.clarity) {
|
|
50
|
-
emitClarity(true, res.clarity);
|
|
51
|
-
storage.set(AUTO_CLARITY_STORAGE_KEY, {
|
|
52
|
-
enabled: true,
|
|
53
|
-
clarity: res.clarity
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
} else {
|
|
58
|
-
emitClarity(false, null);
|
|
59
|
-
}
|
|
60
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
|
-
}, [devId]);
|
|
62
|
-
|
|
63
|
-
// TODO: 后面取消注释 宿主不存在 ttt 方法 clarityChanged 时整个入口不渲染
|
|
64
|
-
// if (!isClarityChangedSupported()) {
|
|
65
|
-
// return null;
|
|
66
|
-
// }
|
|
67
|
-
|
|
68
|
-
// TODO: 后面取消注释 设备支持的清晰度档位数量 ≥ 2 时才展示自动
|
|
69
|
-
// if (!resolutionList || resolutionList.length < 2) {
|
|
70
|
-
// return null;
|
|
71
|
-
// }
|
|
72
|
-
|
|
73
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
74
|
-
onClick: async () => {
|
|
75
|
-
var _res$clarity;
|
|
76
|
-
event.emit(widgetClick, {
|
|
77
|
-
widgetId: widgetLabs.AUTO_CLARITY
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
// 关闭自动模式
|
|
81
|
-
if (auto) {
|
|
82
|
-
setAuto(false);
|
|
83
|
-
emitClarity(false, null);
|
|
84
|
-
storage.set(AUTO_CLARITY_STORAGE_KEY, {
|
|
85
|
-
enabled: false,
|
|
86
|
-
clarity: null
|
|
87
|
-
});
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// 开启自动模式并读取回调结果
|
|
92
|
-
setAuto(true);
|
|
93
|
-
const res = await clarityChanged(devId);
|
|
94
|
-
const next = (_res$clarity = res === null || res === void 0 ? void 0 : res.clarity) !== null && _res$clarity !== void 0 ? _res$clarity : null;
|
|
95
|
-
emitClarity(true, next);
|
|
96
|
-
storage.set(AUTO_CLARITY_STORAGE_KEY, {
|
|
97
|
-
enabled: true,
|
|
98
|
-
clarity: next
|
|
99
|
-
});
|
|
100
|
-
},
|
|
101
|
-
className: clsx(className)
|
|
102
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
103
|
-
className: clsx('ipc-player-plugin-resolution', {
|
|
104
|
-
'ipc-player-plugin-resolution-full': screenType === 'full',
|
|
105
|
-
'ipc-player-plugin-resolution-active': auto
|
|
106
|
-
})
|
|
107
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
108
|
-
className: "resolutionText"
|
|
109
|
-
}, Strings.getLang('ipc_player_resolution_auto'))));
|
|
110
|
-
};
|