@ray-js/ipc-player-integration 0.0.35-beta.1 → 0.0.35-beta.11
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 +5 -1
- package/lib/features/initPlayerWidgets/index.d.ts +1 -0
- package/lib/features/initPlayerWidgets/index.js +8 -0
- package/lib/i18n/index.d.ts +24 -0
- package/lib/i18n/strings.d.ts +12 -0
- package/lib/i18n/strings.js +14 -2
- package/lib/interface.d.ts +1 -1
- package/lib/res/try/try_close.png +0 -0
- package/lib/res/try/try_en.png +0 -0
- package/lib/res/try/try_open.png +0 -0
- package/lib/res/try/try_zh.png +0 -0
- package/lib/ui/bottomLeftContent.d.ts +4 -1
- package/lib/ui/bottomLeftContent.js +93 -8
- package/lib/ui/bottomRightContent.d.ts +3 -1
- package/lib/ui/bottomRightContent.js +11 -4
- package/lib/ui/constant.d.ts +7 -0
- package/lib/ui/constant.js +8 -0
- package/lib/ui/index.d.ts +1 -1
- package/lib/ui/index.js +1 -1
- package/lib/ui/ui.js +113 -56
- package/lib/ui/ui.less +5 -1
- package/lib/utils/index.d.ts +2 -1
- package/lib/utils/index.js +3 -11
- package/lib/utils/navigation.d.ts +7 -0
- package/lib/utils/navigation.js +23 -0
- package/lib/utils/ttt.d.ts +42 -0
- package/lib/utils/ttt.js +123 -0
- package/lib/widgets/index.d.ts +2 -0
- package/lib/widgets/index.js +2 -0
- package/lib/widgets/trialBadge/index.d.ts +17 -0
- package/lib/widgets/trialBadge/index.js +88 -0
- package/lib/widgets/trialBadge/index.less +57 -0
- package/lib/widgets/trialBadge/useTrialBadge.d.ts +8 -0
- package/lib/widgets/trialBadge/useTrialBadge.js +42 -0
- package/lib/widgets/tryExperience/index.d.ts +1 -0
- package/lib/widgets/tryExperience/index.js +1 -0
- package/lib/widgets/tryExperience/tryExperience.d.ts +14 -0
- package/lib/widgets/tryExperience/tryExperience.js +150 -0
- package/lib/widgets/tryExperience/tryExperience.less +13 -0
- package/package.json +3 -3
|
@@ -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, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification } from '../widgets';
|
|
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 } from '../widgets';
|
|
8
8
|
import { authorizeStatus } from '../utils/authorize';
|
|
9
9
|
import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
|
|
10
10
|
import { multiPrefix } from '../widgets/multiCamera/constants';
|
|
@@ -47,6 +47,10 @@ export const defaultBottomLeftContent = [{
|
|
|
47
47
|
}, {
|
|
48
48
|
id: 'Siren',
|
|
49
49
|
content: Siren
|
|
50
|
+
}, /* TryExperience 必须紧跟 Muted,在 VerticalSmallIntercom 之前 */
|
|
51
|
+
{
|
|
52
|
+
id: 'TryExperience',
|
|
53
|
+
content: TryExperience
|
|
50
54
|
}, {
|
|
51
55
|
id: 'VerticalSmallIntercom',
|
|
52
56
|
content: VerticalSmallIntercom
|
|
@@ -13,6 +13,7 @@ export type InitPlayerWidgetsOptions = {
|
|
|
13
13
|
showToggleVerticalFull?: boolean;
|
|
14
14
|
showRealTimeMagnification?: boolean;
|
|
15
15
|
directionControlProps?: Partial<React.ComponentProps<typeof FullScreen>['directionControlProps']>;
|
|
16
|
+
hideSmartImageQualityState?: boolean;
|
|
16
17
|
topLeftContent?: ComponentConfig[];
|
|
17
18
|
topRightContent?: ComponentConfig[];
|
|
18
19
|
bottomLeftContent?: ComponentConfig[];
|
|
@@ -17,8 +17,16 @@ export async function initPlayerWidgets(ctx, options) {
|
|
|
17
17
|
}
|
|
18
18
|
ctx.addContent('topRight', newDefaultTopRightContent);
|
|
19
19
|
const resolutionIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'Resolution');
|
|
20
|
+
const tryExperienceIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'TryExperience');
|
|
20
21
|
const screenShotIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'Screenshot');
|
|
21
22
|
const recordVideoIndex = newDefaultBottomLeftContent.findIndex(item => item.id === 'RecordVideo');
|
|
23
|
+
if (tryExperienceIndex !== -1) {
|
|
24
|
+
var _options$hideSmartIma;
|
|
25
|
+
// @ts-ignore
|
|
26
|
+
newDefaultBottomLeftContent[tryExperienceIndex].initProps = {
|
|
27
|
+
hideTryExperienceMenu: (_options$hideSmartIma = options.hideSmartImageQualityState) !== null && _options$hideSmartIma !== void 0 ? _options$hideSmartIma : true
|
|
28
|
+
};
|
|
29
|
+
}
|
|
22
30
|
if (resolutionIndex !== -1) {
|
|
23
31
|
// @ts-ignore
|
|
24
32
|
newDefaultBottomLeftContent[resolutionIndex].initProps = {
|
package/lib/i18n/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ declare const Strings: kit.I18N<{
|
|
|
20
20
|
ipc_player_authorize_confirm_text: string;
|
|
21
21
|
ipc_player_error_record_tip: string;
|
|
22
22
|
ipc_player_change_resolution_success: string;
|
|
23
|
+
ipc_player_try_experience: string;
|
|
23
24
|
ipc_player_ptz_control_tip: string;
|
|
24
25
|
ipc_player_ptz_close_control_tip: string;
|
|
25
26
|
ipc_player_tile_tip_text_step1: string;
|
|
@@ -28,6 +29,11 @@ declare const Strings: kit.I18N<{
|
|
|
28
29
|
ipc_player_tip_confirm: string;
|
|
29
30
|
ipc_player_ptz_moveable_tip_text: string;
|
|
30
31
|
ipc_player_flow_low_tip: string;
|
|
32
|
+
ipc_player_trial_in_use: string;
|
|
33
|
+
ipc_player_trial_preview_text: string;
|
|
34
|
+
ipc_player_trial_subscribe: string;
|
|
35
|
+
ipc_player_fetch_error: string;
|
|
36
|
+
ipc_player_low_phone_not_support: string;
|
|
31
37
|
};
|
|
32
38
|
zh: {
|
|
33
39
|
ipc_player_resolution_HD: string;
|
|
@@ -49,6 +55,7 @@ declare const Strings: kit.I18N<{
|
|
|
49
55
|
ipc_player_authorize_confirm_text: string;
|
|
50
56
|
ipc_player_error_record_tip: string;
|
|
51
57
|
ipc_player_change_resolution_success: string;
|
|
58
|
+
ipc_player_try_experience: string;
|
|
52
59
|
ipc_player_ptz_control_tip: string;
|
|
53
60
|
ipc_player_ptz_close_control_tip: string;
|
|
54
61
|
ipc_player_tile_tip_text_step1: string;
|
|
@@ -57,6 +64,11 @@ declare const Strings: kit.I18N<{
|
|
|
57
64
|
ipc_player_tip_confirm: string;
|
|
58
65
|
ipc_player_ptz_moveable_tip_text: string;
|
|
59
66
|
ipc_player_flow_low_tip: string;
|
|
67
|
+
ipc_player_trial_in_use: string;
|
|
68
|
+
ipc_player_trial_preview_text: string;
|
|
69
|
+
ipc_player_trial_subscribe: string;
|
|
70
|
+
ipc_player_fetch_error: string;
|
|
71
|
+
ipc_player_low_phone_not_support: string;
|
|
60
72
|
};
|
|
61
73
|
}, {
|
|
62
74
|
ipc_player_resolution_HD: string;
|
|
@@ -78,6 +90,7 @@ declare const Strings: kit.I18N<{
|
|
|
78
90
|
ipc_player_authorize_confirm_text: string;
|
|
79
91
|
ipc_player_error_record_tip: string;
|
|
80
92
|
ipc_player_change_resolution_success: string;
|
|
93
|
+
ipc_player_try_experience: string;
|
|
81
94
|
ipc_player_ptz_control_tip: string;
|
|
82
95
|
ipc_player_ptz_close_control_tip: string;
|
|
83
96
|
ipc_player_tile_tip_text_step1: string;
|
|
@@ -86,6 +99,11 @@ declare const Strings: kit.I18N<{
|
|
|
86
99
|
ipc_player_tip_confirm: string;
|
|
87
100
|
ipc_player_ptz_moveable_tip_text: string;
|
|
88
101
|
ipc_player_flow_low_tip: string;
|
|
102
|
+
ipc_player_trial_in_use: string;
|
|
103
|
+
ipc_player_trial_preview_text: string;
|
|
104
|
+
ipc_player_trial_subscribe: string;
|
|
105
|
+
ipc_player_fetch_error: string;
|
|
106
|
+
ipc_player_low_phone_not_support: string;
|
|
89
107
|
} | {
|
|
90
108
|
ipc_player_resolution_HD: string;
|
|
91
109
|
ipc_player_resolution_SD: string;
|
|
@@ -106,6 +124,7 @@ declare const Strings: kit.I18N<{
|
|
|
106
124
|
ipc_player_authorize_confirm_text: string;
|
|
107
125
|
ipc_player_error_record_tip: string;
|
|
108
126
|
ipc_player_change_resolution_success: string;
|
|
127
|
+
ipc_player_try_experience: string;
|
|
109
128
|
ipc_player_ptz_control_tip: string;
|
|
110
129
|
ipc_player_ptz_close_control_tip: string;
|
|
111
130
|
ipc_player_tile_tip_text_step1: string;
|
|
@@ -114,5 +133,10 @@ declare const Strings: kit.I18N<{
|
|
|
114
133
|
ipc_player_tip_confirm: string;
|
|
115
134
|
ipc_player_ptz_moveable_tip_text: string;
|
|
116
135
|
ipc_player_flow_low_tip: string;
|
|
136
|
+
ipc_player_trial_in_use: string;
|
|
137
|
+
ipc_player_trial_preview_text: string;
|
|
138
|
+
ipc_player_trial_subscribe: string;
|
|
139
|
+
ipc_player_fetch_error: string;
|
|
140
|
+
ipc_player_low_phone_not_support: string;
|
|
117
141
|
}>;
|
|
118
142
|
export default Strings;
|
package/lib/i18n/strings.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ declare const _default: {
|
|
|
19
19
|
ipc_player_authorize_confirm_text: string;
|
|
20
20
|
ipc_player_error_record_tip: string;
|
|
21
21
|
ipc_player_change_resolution_success: string;
|
|
22
|
+
ipc_player_try_experience: string;
|
|
22
23
|
ipc_player_ptz_control_tip: string;
|
|
23
24
|
ipc_player_ptz_close_control_tip: string;
|
|
24
25
|
ipc_player_tile_tip_text_step1: string;
|
|
@@ -27,6 +28,11 @@ declare const _default: {
|
|
|
27
28
|
ipc_player_tip_confirm: string;
|
|
28
29
|
ipc_player_ptz_moveable_tip_text: string;
|
|
29
30
|
ipc_player_flow_low_tip: string;
|
|
31
|
+
ipc_player_trial_in_use: string;
|
|
32
|
+
ipc_player_trial_preview_text: string;
|
|
33
|
+
ipc_player_trial_subscribe: string;
|
|
34
|
+
ipc_player_fetch_error: string;
|
|
35
|
+
ipc_player_low_phone_not_support: string;
|
|
30
36
|
};
|
|
31
37
|
zh: {
|
|
32
38
|
ipc_player_resolution_HD: string;
|
|
@@ -48,6 +54,7 @@ declare const _default: {
|
|
|
48
54
|
ipc_player_authorize_confirm_text: string;
|
|
49
55
|
ipc_player_error_record_tip: string;
|
|
50
56
|
ipc_player_change_resolution_success: string;
|
|
57
|
+
ipc_player_try_experience: string;
|
|
51
58
|
ipc_player_ptz_control_tip: string;
|
|
52
59
|
ipc_player_ptz_close_control_tip: string;
|
|
53
60
|
ipc_player_tile_tip_text_step1: string;
|
|
@@ -56,6 +63,11 @@ declare const _default: {
|
|
|
56
63
|
ipc_player_tip_confirm: string;
|
|
57
64
|
ipc_player_ptz_moveable_tip_text: string;
|
|
58
65
|
ipc_player_flow_low_tip: string;
|
|
66
|
+
ipc_player_trial_in_use: string;
|
|
67
|
+
ipc_player_trial_preview_text: string;
|
|
68
|
+
ipc_player_trial_subscribe: string;
|
|
69
|
+
ipc_player_fetch_error: string;
|
|
70
|
+
ipc_player_low_phone_not_support: string;
|
|
59
71
|
};
|
|
60
72
|
};
|
|
61
73
|
export default _default;
|
package/lib/i18n/strings.js
CHANGED
|
@@ -19,6 +19,7 @@ export default {
|
|
|
19
19
|
ipc_player_authorize_confirm_text: 'Go to Settings',
|
|
20
20
|
ipc_player_error_record_tip: 'The recording has failed, please try again later.',
|
|
21
21
|
ipc_player_change_resolution_success: 'Switch successful',
|
|
22
|
+
ipc_player_try_experience: 'Try it',
|
|
22
23
|
ipc_player_ptz_control_tip: 'Swipe up, down, left, or right to control the PTZ direction.',
|
|
23
24
|
ipc_player_ptz_close_control_tip: 'Close',
|
|
24
25
|
ipc_player_tile_tip_text_step1: 'Click here to expand/collapse the player',
|
|
@@ -26,7 +27,12 @@ export default {
|
|
|
26
27
|
ipc_player_tip_next: 'Next',
|
|
27
28
|
ipc_player_tip_confirm: 'Got it',
|
|
28
29
|
ipc_player_ptz_moveable_tip_text: 'Hold the middle to drag the direction control area',
|
|
29
|
-
ipc_player_flow_low_tip: 'The device’s remaining data is below 200MB. Please recharge as soon as possible.'
|
|
30
|
+
ipc_player_flow_low_tip: 'The device’s remaining data is below 200MB. Please recharge as soon as possible.',
|
|
31
|
+
ipc_player_trial_in_use: 'Trial',
|
|
32
|
+
ipc_player_trial_preview_text: 'End',
|
|
33
|
+
ipc_player_trial_subscribe: 'Open',
|
|
34
|
+
ipc_player_fetch_error: 'Failed to fetch data',
|
|
35
|
+
ipc_player_low_phone_not_support: 'This feature is not supported on this device'
|
|
30
36
|
},
|
|
31
37
|
zh: {
|
|
32
38
|
ipc_player_resolution_HD: '高清',
|
|
@@ -48,6 +54,7 @@ export default {
|
|
|
48
54
|
ipc_player_authorize_confirm_text: '去设置',
|
|
49
55
|
ipc_player_error_record_tip: '录制出错了,请稍后再试',
|
|
50
56
|
ipc_player_change_resolution_success: '切换成功',
|
|
57
|
+
ipc_player_try_experience: '去体验',
|
|
51
58
|
ipc_player_ptz_control_tip: '上下左右滑动,控制云台方向',
|
|
52
59
|
ipc_player_ptz_close_control_tip: '关闭',
|
|
53
60
|
ipc_player_tile_tip_text_step1: '点击此处可展开/收起播放窗口',
|
|
@@ -55,6 +62,11 @@ export default {
|
|
|
55
62
|
ipc_player_tip_next: '下一步',
|
|
56
63
|
ipc_player_tip_confirm: '知道了',
|
|
57
64
|
ipc_player_ptz_moveable_tip_text: '长按中间可拖动方向控制区域',
|
|
58
|
-
ipc_player_flow_low_tip: '设备当前剩余流量不足200M,请尽快充值'
|
|
65
|
+
ipc_player_flow_low_tip: '设备当前剩余流量不足200M,请尽快充值',
|
|
66
|
+
ipc_player_trial_in_use: '试用中',
|
|
67
|
+
ipc_player_trial_preview_text: '后结束',
|
|
68
|
+
ipc_player_trial_subscribe: '开通',
|
|
69
|
+
ipc_player_fetch_error: '获取异常',
|
|
70
|
+
ipc_player_low_phone_not_support: '当前设备不支持此功能'
|
|
59
71
|
}
|
|
60
72
|
};
|
package/lib/interface.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export type IpcContext = {
|
|
|
11
11
|
};
|
|
12
12
|
export type RetAtom<T> = PrimitiveAtom<T> & WithInitialValue<T>;
|
|
13
13
|
export type ScreenType = 'full' | 'vertical';
|
|
14
|
-
export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
|
|
14
|
+
export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'TryExperience' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
|
|
15
15
|
export declare const enum PlayerStreamStatus {
|
|
16
16
|
UnknownException = -1000,
|
|
17
17
|
ConnectSuccess = 1001,
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -3,6 +3,9 @@ import { UseCtx } from '../interface';
|
|
|
3
3
|
type Props = {
|
|
4
4
|
ctx: ReturnType<UseCtx>;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
/** 右下角组件占据的宽度(px),左下角通过该值约束自身可视宽度,避免与右下角重叠 */
|
|
7
|
+
reservedRight?: number;
|
|
8
|
+
canOpenSettings?: boolean;
|
|
6
9
|
};
|
|
7
|
-
declare const BottomLeftContent: ({ ctx, children }: Props) => React.JSX.Element;
|
|
10
|
+
declare const BottomLeftContent: ({ ctx, children, reservedRight, canOpenSettings }: Props) => React.JSX.Element;
|
|
8
11
|
export default BottomLeftContent;
|
|
@@ -1,30 +1,115 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import "core-js/modules/esnext.iterator.constructor.js";
|
|
3
|
+
import "core-js/modules/esnext.iterator.find.js";
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
2
5
|
import { CoverView, View } from '@ray-js/ray';
|
|
3
6
|
import clsx from 'clsx';
|
|
4
7
|
import { useStore } from '../ctx/store';
|
|
5
8
|
import { useComponentHideState } from './hooks';
|
|
9
|
+
import { TrialBadge, useTrialBadge } from '../widgets/trialBadge';
|
|
10
|
+
/** 右侧透明渐变宽度,用于提示横向可滑动 */
|
|
11
|
+
const FADE_MASK = 'linear-gradient(to right, #000 calc(100% - 16px), transparent 100%)';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* 试用徽章在不同 screenType 下的容器样式。
|
|
15
|
+
* 「贴在底栏顶部」的策略一致(bottom: 100%),只是 left / marginBottom
|
|
16
|
+
* 等数值按横竖屏不同的边距规则做差异化处理。
|
|
17
|
+
*/
|
|
18
|
+
const TRIAL_BADGE_WRAP_STYLE_VERTICAL = {
|
|
19
|
+
position: 'absolute',
|
|
20
|
+
left: '0px',
|
|
21
|
+
bottom: '100%',
|
|
22
|
+
marginBottom: 4,
|
|
23
|
+
zIndex: 2,
|
|
24
|
+
width: 'max-content'
|
|
25
|
+
};
|
|
26
|
+
const TRIAL_BADGE_WRAP_STYLE_FULL = {
|
|
27
|
+
position: 'absolute',
|
|
28
|
+
left: '25px',
|
|
29
|
+
bottom: '100%',
|
|
30
|
+
marginBottom: 8,
|
|
31
|
+
zIndex: 2,
|
|
32
|
+
width: 'max-content'
|
|
33
|
+
};
|
|
6
34
|
const BottomLeftContent = _ref => {
|
|
7
35
|
let {
|
|
8
36
|
ctx,
|
|
9
|
-
children
|
|
37
|
+
children,
|
|
38
|
+
reservedRight = 0,
|
|
39
|
+
canOpenSettings = true
|
|
10
40
|
} = _ref;
|
|
11
41
|
const {
|
|
12
|
-
screenType
|
|
42
|
+
screenType,
|
|
43
|
+
brandColor,
|
|
44
|
+
bottomLeftContent
|
|
13
45
|
} = useStore({
|
|
14
46
|
screenType: ctx.screenType,
|
|
15
|
-
playState: ctx.playState
|
|
47
|
+
playState: ctx.playState,
|
|
48
|
+
brandColor: ctx.brandColor,
|
|
49
|
+
bottomLeftContent: ctx.bottomLeftContent
|
|
16
50
|
});
|
|
51
|
+
const showSmartImageQuality = useMemo(() => {
|
|
52
|
+
var _tryExp$initProps;
|
|
53
|
+
const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
|
|
54
|
+
return !(tryExp !== null && tryExp !== void 0 && (_tryExp$initProps = tryExp.initProps) !== null && _tryExp$initProps !== void 0 && _tryExp$initProps.hideTryExperienceMenu);
|
|
55
|
+
}, [bottomLeftContent]);
|
|
56
|
+
const trialRemainingSec = useMemo(() => {
|
|
57
|
+
var _trialRemainingSec, _tryExp$initProps2;
|
|
58
|
+
const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
|
|
59
|
+
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;
|
|
60
|
+
}, [bottomLeftContent]);
|
|
61
|
+
const refreshToken = useMemo(() => {
|
|
62
|
+
var _refreshToken, _tryExp$initProps3;
|
|
63
|
+
const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
|
|
64
|
+
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;
|
|
65
|
+
}, [bottomLeftContent]);
|
|
66
|
+
const isLowPhone = useMemo(() => {
|
|
67
|
+
var _isLowPhone, _tryExp$initProps4;
|
|
68
|
+
const tryExp = bottomLeftContent === null || bottomLeftContent === void 0 ? void 0 : bottomLeftContent.find(item => item.id === 'TryExperience');
|
|
69
|
+
return (_isLowPhone = tryExp === null || tryExp === void 0 || (_tryExp$initProps4 = tryExp.initProps) === null || _tryExp$initProps4 === void 0 ? void 0 : _tryExp$initProps4.isLowPhone) !== null && _isLowPhone !== void 0 ? _isLowPhone : false;
|
|
70
|
+
}, []);
|
|
17
71
|
const [shouldHide] = useComponentHideState();
|
|
72
|
+
const {
|
|
73
|
+
showTrialBadge,
|
|
74
|
+
handleTrialSubscribe,
|
|
75
|
+
handleCountdownEnd
|
|
76
|
+
} = useTrialBadge(ctx.event, ctx.devId, trialRemainingSec);
|
|
77
|
+
const paddingLeftPx = screenType === 'vertical' ? 0 : 25;
|
|
78
|
+
const trialBadgeWrapStyle = screenType === 'vertical' ? TRIAL_BADGE_WRAP_STYLE_VERTICAL : TRIAL_BADGE_WRAP_STYLE_FULL;
|
|
18
79
|
return /*#__PURE__*/React.createElement(CoverView, {
|
|
19
|
-
className: clsx('ipc-player-bottom-left-content-wrap')
|
|
80
|
+
className: clsx('ipc-player-bottom-left-content-wrap')
|
|
81
|
+
// 注意:不要在这里覆盖 position,CSS 类已经设置 position: absolute; left: 0; bottom: 0
|
|
82
|
+
// 否则 children 会失去贴底定位,从而与 bottomRightContent 不对齐
|
|
83
|
+
,
|
|
20
84
|
style: {
|
|
21
|
-
|
|
85
|
+
right: `${reservedRight}px`,
|
|
22
86
|
height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
|
|
23
87
|
}
|
|
24
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
88
|
+
}, showSmartImageQuality && showTrialBadge && canOpenSettings && !isLowPhone && /*#__PURE__*/React.createElement(View, {
|
|
89
|
+
className: clsx('bottom-left-item-container'),
|
|
90
|
+
style: _objectSpread(_objectSpread({}, trialBadgeWrapStyle), {}, {
|
|
91
|
+
transform: shouldHide ? 'translateY(40px)' : 'translateY(0)',
|
|
92
|
+
opacity: shouldHide ? 0 : 1,
|
|
93
|
+
transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out'
|
|
94
|
+
})
|
|
95
|
+
}, /*#__PURE__*/React.createElement(TrialBadge, {
|
|
96
|
+
brandColor: brandColor,
|
|
97
|
+
trialRemainingSec: trialRemainingSec,
|
|
98
|
+
refreshToken: refreshToken,
|
|
99
|
+
onSubscribe: handleTrialSubscribe,
|
|
100
|
+
onCountdownEnd: handleCountdownEnd
|
|
101
|
+
})), /*#__PURE__*/React.createElement(View, {
|
|
25
102
|
style: {
|
|
26
103
|
paddingBottom: screenType === 'vertical' ? '14px' : '32px',
|
|
27
|
-
paddingLeft:
|
|
104
|
+
paddingLeft: `${paddingLeftPx}px`,
|
|
105
|
+
paddingRight: '16px',
|
|
106
|
+
width: '100%',
|
|
107
|
+
overflowX: 'auto',
|
|
108
|
+
overflowY: 'hidden',
|
|
109
|
+
whiteSpace: 'nowrap',
|
|
110
|
+
WebkitOverflowScrolling: 'touch',
|
|
111
|
+
WebkitMaskImage: FADE_MASK,
|
|
112
|
+
maskImage: FADE_MASK
|
|
28
113
|
},
|
|
29
114
|
className: clsx('ipc-player-bottom-left-content-container', {
|
|
30
115
|
// 'ipc-player-bottom-left-content-hide': shouldHide,
|
|
@@ -3,6 +3,8 @@ import { UseCtx } from '../interface';
|
|
|
3
3
|
type Props = {
|
|
4
4
|
ctx: ReturnType<UseCtx>;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
/** 由 ui.tsx 计算得到的右下角组件宽度(与左下角的 reservedRight 保持一致) */
|
|
7
|
+
width?: number;
|
|
6
8
|
};
|
|
7
|
-
declare const BottomRightContent: ({ ctx, children }: Props) => React.JSX.Element;
|
|
9
|
+
declare const BottomRightContent: ({ ctx, children, width }: Props) => React.JSX.Element;
|
|
8
10
|
export default BottomRightContent;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { CoverView, View } from '@ray-js/ray';
|
|
3
4
|
import clsx from 'clsx';
|
|
@@ -6,7 +7,8 @@ import { useComponentHideState } from './hooks';
|
|
|
6
7
|
const BottomRightContent = _ref => {
|
|
7
8
|
let {
|
|
8
9
|
ctx,
|
|
9
|
-
children
|
|
10
|
+
children,
|
|
11
|
+
width
|
|
10
12
|
} = _ref;
|
|
11
13
|
const {
|
|
12
14
|
screenType
|
|
@@ -17,14 +19,19 @@ const BottomRightContent = _ref => {
|
|
|
17
19
|
const [shouldHide] = useComponentHideState();
|
|
18
20
|
return /*#__PURE__*/React.createElement(CoverView, {
|
|
19
21
|
className: clsx('ipc-player-bottom-right-content-wrap'),
|
|
20
|
-
style: {
|
|
22
|
+
style: _objectSpread({
|
|
21
23
|
paddingLeft: screenType === 'vertical' ? '10px' : '0',
|
|
22
24
|
height: screenType === 'vertical' ? shouldHide ? '41px' : '40px' : shouldHide ? '57px' : '58px'
|
|
23
|
-
}
|
|
25
|
+
}, typeof width === 'number' && width > 0 ? {
|
|
26
|
+
width: `${width}px`,
|
|
27
|
+
boxSizing: 'border-box'
|
|
28
|
+
} : null)
|
|
24
29
|
}, /*#__PURE__*/React.createElement(View, {
|
|
25
30
|
style: {
|
|
26
31
|
paddingBottom: screenType === 'vertical' ? '14px' : '32px',
|
|
27
|
-
paddingRight: screenType === 'vertical' ? 0 : '25px'
|
|
32
|
+
paddingRight: screenType === 'vertical' ? 0 : '25px',
|
|
33
|
+
width: '100%',
|
|
34
|
+
justifyContent: 'flex-end'
|
|
28
35
|
},
|
|
29
36
|
className: clsx('ipc-player-bottom-right-content-container', {
|
|
30
37
|
// 'ipc-player-bottom-right-content-hide': shouldHide,
|
package/lib/ui/constant.d.ts
CHANGED
|
@@ -21,11 +21,18 @@ export declare const landscapeTipId = "landscapeTipId";
|
|
|
21
21
|
export declare const multiPtzId = "multiPtzId";
|
|
22
22
|
/** 控件点击统一事件:任意播放器内控件被点击时触发,可用于埋点或统一处理 */
|
|
23
23
|
export declare const widgetClick = "widgetClick";
|
|
24
|
+
/**
|
|
25
|
+
* 试看倒计时结束事件:试看徽章倒计时归零时触发,
|
|
26
|
+
* 业务侧/相关控件可监听此事件刷新自己的状态(例如 TryExperience 重新拉取状态)
|
|
27
|
+
*/
|
|
28
|
+
export declare const trialCountdownEnd = "trialCountdownEnd";
|
|
29
|
+
export declare const refreshSmartImageQualityEvent = "refreshSmartImageQuality";
|
|
24
30
|
/** 控件点击事件用的 widgetId,统一在此维护 */
|
|
25
31
|
export declare const widgetLabs: {
|
|
26
32
|
readonly SCREENSHOT: "Screenshot";
|
|
27
33
|
readonly RECORD_VIDEO: "RecordVideo";
|
|
28
34
|
readonly RESOLUTION: "Resolution";
|
|
35
|
+
readonly TRY_EXPERIENCE: "TryExperience";
|
|
29
36
|
readonly FULL_RESOLUTION_CONTROL: "FullResolutionControl";
|
|
30
37
|
readonly MUTED: "Muted";
|
|
31
38
|
readonly FLOODLIGHT: "Floodlight";
|
package/lib/ui/constant.js
CHANGED
|
@@ -22,11 +22,19 @@ export const multiPtzId = 'multiPtzId';
|
|
|
22
22
|
/** 控件点击统一事件:任意播放器内控件被点击时触发,可用于埋点或统一处理 */
|
|
23
23
|
export const widgetClick = 'widgetClick';
|
|
24
24
|
|
|
25
|
+
/**
|
|
26
|
+
* 试看倒计时结束事件:试看徽章倒计时归零时触发,
|
|
27
|
+
* 业务侧/相关控件可监听此事件刷新自己的状态(例如 TryExperience 重新拉取状态)
|
|
28
|
+
*/
|
|
29
|
+
export const trialCountdownEnd = 'trialCountdownEnd';
|
|
30
|
+
export const refreshSmartImageQualityEvent = 'refreshSmartImageQuality';
|
|
31
|
+
|
|
25
32
|
/** 控件点击事件用的 widgetId,统一在此维护 */
|
|
26
33
|
export const widgetLabs = {
|
|
27
34
|
SCREENSHOT: 'Screenshot',
|
|
28
35
|
RECORD_VIDEO: 'RecordVideo',
|
|
29
36
|
RESOLUTION: 'Resolution',
|
|
37
|
+
TRY_EXPERIENCE: 'TryExperience',
|
|
30
38
|
FULL_RESOLUTION_CONTROL: 'FullResolutionControl',
|
|
31
39
|
MUTED: 'Muted',
|
|
32
40
|
FLOODLIGHT: 'Floodlight',
|
package/lib/ui/index.d.ts
CHANGED
package/lib/ui/index.js
CHANGED