@playkit-js/playkit-js-ui 0.78.3 → 0.78.4-canary.0-fa0437a
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/dist/playkit-js-ui.d.ts +14 -0
- package/dist/playkit-ui.js +1 -1
- package/dist/playkit-ui.js.map +1 -1
- package/package.json +1 -1
- package/src/components/cvaa-overlay/_cvaa-overlay.scss +1 -0
- package/src/components/cvaa-overlay/custom-captions-window.tsx +13 -0
- package/src/components/engine-connector/engine-connector.tsx +1 -0
- package/src/components/error-overlay/_error-overlay.scss +20 -8
- package/src/components/error-overlay/error-message-provider.ts +40 -0
- package/src/components/error-overlay/error-overlay.tsx +23 -3
- package/src/reducers/engine.ts +16 -0
- package/translations/ar.i18n.json +1 -1
- package/translations/de.i18n.json +3 -1
- package/translations/en.i18n.json +20 -2
- package/translations/es.i18n.json +1 -1
- package/translations/fi.i18n.json +1 -1
- package/translations/fr.i18n.json +1 -1
- package/translations/fr_ca.i18n.json +1 -1
- package/translations/he.i18n.json +1 -1
- package/translations/hi_in.i18n.json +1 -1
- package/translations/it.i18n.json +1 -1
- package/translations/ja.i18n.json +1 -1
- package/translations/ko.i18n.json +1 -1
- package/translations/nl.i18n.json +1 -1
- package/translations/pt_br.i18n.json +1 -1
- package/translations/ru.i18n.json +1 -1
- package/translations/zh_cn.i18n.json +1 -1
- package/translations/zh_tw.i18n.json +1 -1
package/package.json
CHANGED
|
@@ -100,6 +100,11 @@ class CustomCaptionsWindow extends Component<any, any> {
|
|
|
100
100
|
active: props.customTextStyle.backgroundColor.every((value, index) => value === standardColors[key][index])
|
|
101
101
|
}));
|
|
102
102
|
|
|
103
|
+
const fontAlignmentOption = player.TextStyle.FontAlignment.map(fontAlignment => ({
|
|
104
|
+
...fontAlignment,
|
|
105
|
+
active: props.customTextStyle.textAlign === fontAlignment.value
|
|
106
|
+
}));
|
|
107
|
+
|
|
103
108
|
return (
|
|
104
109
|
<div className={[style.overlayScreen, style.active].join(' ')}>
|
|
105
110
|
<form className={[style.form, style.customCaptionForm].join(' ')}>
|
|
@@ -111,6 +116,14 @@ class CustomCaptionsWindow extends Component<any, any> {
|
|
|
111
116
|
styleName="fontSize"
|
|
112
117
|
changeCustomStyle={props.changeCustomStyle}
|
|
113
118
|
/>
|
|
119
|
+
<DropDownCaptionsStyle
|
|
120
|
+
addAccessibleChild={props.addAccessibleChild}
|
|
121
|
+
labelId="cvaa.font_alignment_label"
|
|
122
|
+
options={fontAlignmentOption}
|
|
123
|
+
classNames={[style.formGroupRow, style.fontAlignment]}
|
|
124
|
+
styleName="textAlign"
|
|
125
|
+
changeCustomStyle={props.changeCustomStyle}
|
|
126
|
+
/>
|
|
114
127
|
<DropDownCaptionsStyle
|
|
115
128
|
addAccessibleChild={props.addAccessibleChild}
|
|
116
129
|
labelId="cvaa.font_color_label"
|
|
@@ -273,6 +273,7 @@ class EngineConnector extends Component<EngineConnectorProps, any> {
|
|
|
273
273
|
if (e.payload.severity === player.Error.Severity.CRITICAL) {
|
|
274
274
|
this.props.updateIsIdle(false);
|
|
275
275
|
this.props.updateHasError(true);
|
|
276
|
+
this.props.updateErrorDetails(e.payload.category || undefined, e.payload.errorDetails?.errorTitle, e.payload.errorDetails?.errorMessage);
|
|
276
277
|
}
|
|
277
278
|
});
|
|
278
279
|
|
|
@@ -26,12 +26,23 @@
|
|
|
26
26
|
|
|
27
27
|
.headline {
|
|
28
28
|
color: $tone-1-color;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
margin-bottom: 16px;
|
|
30
|
+
|
|
31
|
+
.error-title {
|
|
32
|
+
font-weight: 700;
|
|
33
|
+
font-size: 20px;
|
|
34
|
+
font-style: normal;
|
|
35
|
+
line-height: 22px;
|
|
36
|
+
margin: 0 0 4px 0;
|
|
37
|
+
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.error-message {
|
|
41
|
+
font-weight: 400;
|
|
42
|
+
font-size: 16px;
|
|
43
|
+
font-style: normal;
|
|
44
|
+
line-height: 22px;
|
|
45
|
+
}
|
|
35
46
|
}
|
|
36
47
|
|
|
37
48
|
.error-session {
|
|
@@ -60,8 +71,9 @@
|
|
|
60
71
|
color: $tone-1-color;
|
|
61
72
|
border: none;
|
|
62
73
|
font-size: 14px;
|
|
63
|
-
font-weight:
|
|
64
|
-
|
|
74
|
+
font-weight: 700;
|
|
75
|
+
font-style: normal;
|
|
76
|
+
line-height: normal;
|
|
65
77
|
cursor: pointer;
|
|
66
78
|
}
|
|
67
79
|
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
type ErrorDetails = {
|
|
2
|
+
title: string;
|
|
3
|
+
message: string;
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
const errorsMap: Map<number, ErrorDetails> = new Map<number, ErrorDetails>([
|
|
7
|
+
/** NETWORK */
|
|
8
|
+
[1, {title: 'network_error_title', message: 'network_error_message'}],
|
|
9
|
+
/** TEXT */
|
|
10
|
+
[2, {title: 'text_error_title', message: 'text_error_message'}],
|
|
11
|
+
/** MEDIA */
|
|
12
|
+
[3, {title: 'media_error_title', message: 'media_error_message'}],
|
|
13
|
+
/** MANIFEST */
|
|
14
|
+
[4, {title: 'manifest_error_title', message: 'manifest_error_message'}],
|
|
15
|
+
/** STREAMING */
|
|
16
|
+
[5, {title: 'streaming_error_title', message: 'streaming_error_message'}],
|
|
17
|
+
/** DRM */
|
|
18
|
+
[6, {title: 'media_unavailable_error_title', message: 'drm_error_message'}],
|
|
19
|
+
/** PLAYER */
|
|
20
|
+
[7, {title: 'default_error_title', message: 'default_error_message'}],
|
|
21
|
+
/** ADS */
|
|
22
|
+
[8, {title: 'default_error_title', message: 'default_error_message'}],
|
|
23
|
+
/** STORAGE */
|
|
24
|
+
[9, {title: 'default_error_title', message: 'default_error_message'}],
|
|
25
|
+
/** MEDIA NOT READY */
|
|
26
|
+
[12, {title: 'media_not_ready_error_title', message: 'media_not_ready_error_message'}],
|
|
27
|
+
/** GEOLOCATION */
|
|
28
|
+
[13, {title: 'geo_location_error_title', message: 'geo_location_error_message'}],
|
|
29
|
+
/** KS RESTRICTION */
|
|
30
|
+
[14, {title: 'media_unavailable_error_title', message: 'media_unavailable_error_message'}]
|
|
31
|
+
]);
|
|
32
|
+
|
|
33
|
+
const defaultError: ErrorDetails = {
|
|
34
|
+
title: 'default_error_title',
|
|
35
|
+
message: 'default_error_message'
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const getErrorDetailsByCategory = (errorCategory: number): ErrorDetails => {
|
|
39
|
+
return errorsMap.get(errorCategory) || defaultError;
|
|
40
|
+
};
|
|
@@ -9,6 +9,7 @@ import {CopyButton} from '../copy-button';
|
|
|
9
9
|
import {withLogger} from '../../components/logger';
|
|
10
10
|
import {withPlayer} from '../../components/player';
|
|
11
11
|
import {Button} from '../../components/button';
|
|
12
|
+
import {getErrorDetailsByCategory} from "./error-message-provider";
|
|
12
13
|
|
|
13
14
|
/**
|
|
14
15
|
* mapping state to props
|
|
@@ -17,7 +18,8 @@ import {Button} from '../../components/button';
|
|
|
17
18
|
*/
|
|
18
19
|
const mapStateToProps = state => ({
|
|
19
20
|
hasError: state.engine.hasError,
|
|
20
|
-
errorOverlaConfig: state.config.components?.errorOverlay
|
|
21
|
+
errorOverlaConfig: state.config.components?.errorOverlay,
|
|
22
|
+
errorDetails: state.engine.errorDetails
|
|
21
23
|
});
|
|
22
24
|
|
|
23
25
|
const COMPONENT_NAME = 'ErrorOverlay';
|
|
@@ -123,8 +125,26 @@ class ErrorOverlay extends Component<any, any> {
|
|
|
123
125
|
* @memberof ErrorOverlay
|
|
124
126
|
*/
|
|
125
127
|
renderErrorHead(): VNode<any> | undefined {
|
|
126
|
-
const errorMessage =
|
|
127
|
-
|
|
128
|
+
const {errorCategory, errorTitle, errorMessage} = this.props.errorDetails;
|
|
129
|
+
let errorTitleRes: any = '',
|
|
130
|
+
errorMessageRes: any = '';
|
|
131
|
+
if (errorTitle && errorMessage) {
|
|
132
|
+
// error title and message were provided from an external resource
|
|
133
|
+
errorTitleRes = errorTitle;
|
|
134
|
+
errorMessageRes = errorMessage;
|
|
135
|
+
} else {
|
|
136
|
+
// error title and message are core related - get them by the error category
|
|
137
|
+
const error = getErrorDetailsByCategory(errorCategory);
|
|
138
|
+
errorTitleRes = <Text id={`error.${error.title}`} />;
|
|
139
|
+
errorMessageRes = <Text id={`error.${error.message}`} />;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
return (
|
|
143
|
+
<div className={style.headline}>
|
|
144
|
+
<div className={style.errorTitle}>{this.props.errorHead || errorTitleRes}</div>
|
|
145
|
+
{errorMessageRes ? <div className={style.errorMessage}>{errorMessageRes}</div> : undefined}
|
|
146
|
+
</div>
|
|
147
|
+
);
|
|
128
148
|
}
|
|
129
149
|
|
|
130
150
|
/**
|
package/src/reducers/engine.ts
CHANGED
|
@@ -42,6 +42,7 @@ export const types = {
|
|
|
42
42
|
UPDATE_IS_IMG: `${component}/UPDATE_IS_IMG`,
|
|
43
43
|
UPDATE_IS_DOCUMENT: `${component}/UPDATE_IS_DOCUMENT`,
|
|
44
44
|
UPDATE_ERROR: `${component}/ERROR`,
|
|
45
|
+
UPDATE_ERROR_DETAILS: `${component}/ERROR_DETAILS`,
|
|
45
46
|
UPDATE_IS_IDLE: `${component}/UPDATE_IS_IDLE`,
|
|
46
47
|
UPDATE_FALLBACK_TO_MUTED_AUTOPLAY: `${component}/UPDATE_FALLBACK_TO_MUTED_AUTOPLAY`,
|
|
47
48
|
UPDATE_IS_VR: `${component}/UPDATE_IS_VR`,
|
|
@@ -99,6 +100,11 @@ export const initialState = {
|
|
|
99
100
|
},
|
|
100
101
|
adUrl: '',
|
|
101
102
|
hasError: false,
|
|
103
|
+
errorDetails: {
|
|
104
|
+
errorCategory: undefined,
|
|
105
|
+
errorTitle: undefined,
|
|
106
|
+
errorMessage: undefined
|
|
107
|
+
},
|
|
102
108
|
isVr: false,
|
|
103
109
|
vrStereoMode: false,
|
|
104
110
|
isCasting: false,
|
|
@@ -124,6 +130,12 @@ export default (state: EngineState = initialState, action: any) => {
|
|
|
124
130
|
hasError: action.hasError
|
|
125
131
|
};
|
|
126
132
|
|
|
133
|
+
case types.UPDATE_ERROR_DETAILS:
|
|
134
|
+
return {
|
|
135
|
+
...state,
|
|
136
|
+
errorDetails: action.errorDetails
|
|
137
|
+
};
|
|
138
|
+
|
|
127
139
|
case types.UPDATE_PLAYER_STATE:
|
|
128
140
|
return {
|
|
129
141
|
...state,
|
|
@@ -410,6 +422,10 @@ export default (state: EngineState = initialState, action: any) => {
|
|
|
410
422
|
|
|
411
423
|
export const actions = {
|
|
412
424
|
updateHasError: (hasError: boolean) => ({type: types.UPDATE_ERROR, hasError: hasError}),
|
|
425
|
+
updateErrorDetails: (errorCategory: number, errorTitle = '', errorMessage = '') => ({
|
|
426
|
+
type: types.UPDATE_ERROR_DETAILS,
|
|
427
|
+
errorDetails: {errorCategory, errorTitle, errorMessage}
|
|
428
|
+
}),
|
|
413
429
|
updatePlayerState: (prevoiusState: string, currentState: string) => ({
|
|
414
430
|
type: types.UPDATE_PLAYER_STATE,
|
|
415
431
|
playerState: {prevoiusState, currentState}
|
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
"fullscreen": "Vollbild",
|
|
9
9
|
"fullscreenExit": "Vollbild beenden",
|
|
10
10
|
"rewind": "Zurückspulen",
|
|
11
|
+
"secondsRewind": "{{seconds}} Sekunden zurückspulen",
|
|
11
12
|
"forward": "Vorspulen",
|
|
13
|
+
"secondsForward": "{{seconds}} Sekunden vorspulen",
|
|
12
14
|
"vrStereo": "vrStereo",
|
|
13
15
|
"closedCaptionsOn": "Untertitel deaktivieren",
|
|
14
16
|
"closedCaptionsOff": "Untertitel aktivieren",
|
|
@@ -48,7 +50,7 @@
|
|
|
48
50
|
"close": "Schließen"
|
|
49
51
|
},
|
|
50
52
|
"error": {
|
|
51
|
-
"
|
|
53
|
+
"default_error_title": "Etwas ist schiefgegangen"
|
|
52
54
|
},
|
|
53
55
|
"ads": {
|
|
54
56
|
"ad_notice": "Anzeige",
|
|
@@ -66,8 +66,25 @@
|
|
|
66
66
|
"close": "Close"
|
|
67
67
|
},
|
|
68
68
|
"error": {
|
|
69
|
-
"
|
|
70
|
-
"
|
|
69
|
+
"default_error_title": "Something went wrong",
|
|
70
|
+
"default_error_message": "An error occurred, please try again later.",
|
|
71
|
+
"network_error_title": "There’s a problem with your network",
|
|
72
|
+
"network_error_message": "Please check your network connection and try again.",
|
|
73
|
+
"media_unavailable_error_title": "Media unavailable",
|
|
74
|
+
"media_unavailable_error_message": "This media has been restricted. Please obtain relevant permissions to access content.",
|
|
75
|
+
"text_error_title": "Text stream error",
|
|
76
|
+
"text_error_message": "Text stream error occurred",
|
|
77
|
+
"media_error_title": "Media stream error",
|
|
78
|
+
"media_error_message": "One or more media streams have failed.",
|
|
79
|
+
"manifest_error_title": "Play manifest error",
|
|
80
|
+
"manifest_error_message": "Error processing the play manifest.",
|
|
81
|
+
"streaming_error_title": "Cannot load stream",
|
|
82
|
+
"streaming_error_message": "A streaming protocol error occurred.",
|
|
83
|
+
"drm_error_message": "You don’t have permissions to view this media.",
|
|
84
|
+
"media_not_ready_error_title": "Media is being processed",
|
|
85
|
+
"media_not_ready_error_message": "Media is processing, check back soon.",
|
|
86
|
+
"geo_location_error_title": "Geo location unavailable",
|
|
87
|
+
"geo_location_error_message": "This content is unavailable in your region.",
|
|
71
88
|
"default_session_text": "Copy for customer care: session ID",
|
|
72
89
|
"retry": "Try again"
|
|
73
90
|
},
|
|
@@ -85,6 +102,7 @@
|
|
|
85
102
|
"edit_caption": "Edit caption",
|
|
86
103
|
"size_label": "Size",
|
|
87
104
|
"font_color_label": "Font color",
|
|
105
|
+
"font_alignment_label": "Font alignment",
|
|
88
106
|
"font_family_label": "Font family",
|
|
89
107
|
"font_style_label": "Font style",
|
|
90
108
|
"font_opacity_label": "Font opacity",
|