@24i/bigscreen-sdk 1.0.8-alpha.2201 → 1.0.8
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/package.json +7 -7
- package/packages/analytics/README.md +2 -2
- package/packages/analytics/src/A.ts +2 -2
- package/packages/analytics/src/Analytics.ts +1 -1
- package/packages/analytics/src/clients/GoogleAnalytics/GoogleAnalytics.ts +1 -1
- package/packages/analytics/src/clients/GoogleAnalytics/constants.ts +17 -17
- package/packages/analytics/src/constants.ts +2 -2
- package/packages/analytics/src/interface.ts +1 -1
- package/packages/epg/src/v2/DataManager.ts +0 -1
- package/packages/epg/src/v2/DatePicker.tsx +1 -1
- package/packages/epg/src/v2/Epg.tsx +4 -2
- package/packages/focus/src/Layout/Matrix.tsx +18 -18
- package/packages/grid/src/Base/Base.tsx +10 -10
- package/packages/icon/src/Icon.tsx +2 -1
- package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.tsx +18 -20
- package/packages/l10n/src/date/de.ts +6 -6
- package/packages/l10n/src/date/en-common.ts +1 -1
- package/packages/l10n/src/date/fr.ts +4 -5
- package/packages/l10n/src/date/he.ts +6 -6
- package/packages/l10n/src/date/types.ts +1 -1
- package/packages/list/src/Base/Base.tsx +8 -8
- package/packages/player-ui/src/PlayerUI.tsx +5 -5
- package/packages/player-ui/src/Seekbar.tsx +3 -6
- package/packages/player-ui/src/Seeking.ts +2 -2
- package/packages/player-ui/src/mocks.ts +2 -2
- package/packages/player-ui/src/timeUtils.ts +3 -3
- package/packages/time/src/adapters/24iMediaTimeApi.ts +2 -2
- package/packages/types-bigscreen-jsx/index.d.ts +6 -9
- package/packages/utils/src/textUtils.ts +7 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@24i/bigscreen-sdk",
|
|
3
|
-
"version": "1.0.8
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "SmartApps BIGscreen SDK monorepo",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
"@babel/core": "^7.19.0",
|
|
55
55
|
"@babel/preset-env": "^7.19.0",
|
|
56
56
|
"@types/fs-extra": "^9.0.13",
|
|
57
|
-
"@types/inquirer": "^9.0.
|
|
58
|
-
"@types/jest": "^29.2
|
|
57
|
+
"@types/inquirer": "^9.0.1",
|
|
58
|
+
"@types/jest": "^29.0.2",
|
|
59
59
|
"@types/minimist": "^1.2.2",
|
|
60
60
|
"@types/node": "^18.7.18",
|
|
61
|
-
"@types/react": "^18.0.
|
|
61
|
+
"@types/react": "^18.0.20",
|
|
62
62
|
"babel-jest": "^29.0.3",
|
|
63
63
|
"chalk": "^5.0.1",
|
|
64
64
|
"coveralls": "^3.1.1",
|
|
@@ -66,15 +66,15 @@
|
|
|
66
66
|
"fs-extra": "^10.1.0",
|
|
67
67
|
"full-icu": "^1.5.0",
|
|
68
68
|
"identity-obj-proxy": "^3.0.0",
|
|
69
|
-
"inquirer": "^9.1.
|
|
70
|
-
"jest": "^29.3
|
|
69
|
+
"inquirer": "^9.1.1",
|
|
70
|
+
"jest": "^29.0.3",
|
|
71
71
|
"jest-canvas-mock": "^2.4.0",
|
|
72
72
|
"jest-environment-jsdom": "^29.0.3",
|
|
73
73
|
"minimist": "^1.2.6",
|
|
74
74
|
"patch-package": "^6.4.7",
|
|
75
75
|
"sass": "^1.54.9",
|
|
76
76
|
"sass-true": "^6.1.0",
|
|
77
|
-
"ts-jest": "^29.0.
|
|
77
|
+
"ts-jest": "^29.0.1",
|
|
78
78
|
"ts-node": "^10.9.1",
|
|
79
79
|
"tsconfig-paths-jest": "0.0.1",
|
|
80
80
|
"typescript": "^4.8.3"
|
|
@@ -44,7 +44,7 @@ class DetailScene {
|
|
|
44
44
|
});
|
|
45
45
|
this.a('buffering_stop');
|
|
46
46
|
// render
|
|
47
|
-
this.a('
|
|
47
|
+
this.a('screen_view');
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
```
|
|
@@ -60,6 +60,6 @@ Clients have to opt-in to events they wish to listen to. This can be done by lis
|
|
|
60
60
|
using a regular expression.
|
|
61
61
|
|
|
62
62
|
```typescript
|
|
63
|
-
analytics.addClient(new GoogleAnalytics(), ['
|
|
63
|
+
analytics.addClient(new GoogleAnalytics(), ['screen_view', 'buffering_start', 'buffering_stop']);
|
|
64
64
|
analytics.addClient(new ConsoleAnalytics(), /.*/);
|
|
65
65
|
```
|
|
@@ -16,8 +16,8 @@ export class A {
|
|
|
16
16
|
* // Creates a function and sets the basic payload.
|
|
17
17
|
* const a = A.of({ sceneType: 'HOME', sceneId: 'home' });
|
|
18
18
|
*
|
|
19
|
-
* // Sends '
|
|
20
|
-
* a('
|
|
19
|
+
* // Sends 'screen_view' event with the basic payload.
|
|
20
|
+
* a('screen_view');
|
|
21
21
|
*
|
|
22
22
|
* // Sends 'buffering_stop' with shallow merge of the basic payload and { asset } object.
|
|
23
23
|
* a('buffering_stop', { asset });
|
|
@@ -80,7 +80,7 @@ export class GoogleAnalytics implements AnalyticsClient {
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
async startSession() {
|
|
83
|
-
const sessionNumber = parseInt(await Storage.getItem(GA_SESSION_COUNTER) ?? '0'
|
|
83
|
+
const sessionNumber = parseInt(await Storage.getItem(GA_SESSION_COUNTER) ?? '0') + 1;
|
|
84
84
|
this.constantUrlParams.sct = sessionNumber;
|
|
85
85
|
this.constantUrlParams.sid = generateSessionId();
|
|
86
86
|
await Storage.setItem(GA_SESSION_COUNTER, sessionNumber.toString());
|
|
@@ -12,7 +12,7 @@ export const GOOGLE_ANALYTICS_TRIGGERS = [
|
|
|
12
12
|
'playback_stop',
|
|
13
13
|
'player_close',
|
|
14
14
|
'player_open',
|
|
15
|
-
'
|
|
15
|
+
'screen_view',
|
|
16
16
|
'scroll_25',
|
|
17
17
|
'scroll_50',
|
|
18
18
|
'scroll_75',
|
|
@@ -23,31 +23,31 @@ export const TRIGGER_NAME_TO_GA_EVENTS: Record<
|
|
|
23
23
|
typeof GOOGLE_ANALYTICS_TRIGGERS[number], GAEventsNames[]
|
|
24
24
|
> = {
|
|
25
25
|
// App
|
|
26
|
-
app_close: ['app_close', 'video_progress'],
|
|
26
|
+
'app_close': ['app_close', 'video_progress'],
|
|
27
27
|
|
|
28
28
|
// Playback
|
|
29
|
-
playback_10: ['video_progress'],
|
|
30
|
-
playback_25: ['video_progress'],
|
|
31
|
-
playback_50: ['video_progress'],
|
|
32
|
-
playback_75: ['video_progress'],
|
|
33
|
-
playback_90: ['video_progress'],
|
|
34
|
-
playback_pause: ['video_progress'],
|
|
35
|
-
playback_start: ['video_start'],
|
|
36
|
-
playback_stop: ['video_progress'],
|
|
29
|
+
'playback_10': ['video_progress'],
|
|
30
|
+
'playback_25': ['video_progress'],
|
|
31
|
+
'playback_50': ['video_progress'],
|
|
32
|
+
'playback_75': ['video_progress'],
|
|
33
|
+
'playback_90': ['video_progress'],
|
|
34
|
+
'playback_pause': ['video_progress'],
|
|
35
|
+
'playback_start': ['video_start'],
|
|
36
|
+
'playback_stop': ['video_progress'],
|
|
37
37
|
|
|
38
38
|
// Player
|
|
39
|
-
player_close: ['a24i_content', 'video_progress'],
|
|
40
|
-
player_open: ['a24i_content'],
|
|
39
|
+
'player_close': ['a24i_content', 'video_progress'],
|
|
40
|
+
'player_open': ['a24i_content'],
|
|
41
41
|
|
|
42
42
|
// Scenes
|
|
43
|
-
|
|
43
|
+
'screen_view': [
|
|
44
44
|
'page_view',
|
|
45
45
|
'a24i_operational',
|
|
46
46
|
],
|
|
47
47
|
|
|
48
48
|
// Scrolling in scene
|
|
49
|
-
scroll_25: ['scroll'],
|
|
50
|
-
scroll_50: ['scroll'],
|
|
51
|
-
scroll_75: ['scroll'],
|
|
52
|
-
scroll_90: ['scroll'],
|
|
49
|
+
'scroll_25': ['scroll'],
|
|
50
|
+
'scroll_50': ['scroll'],
|
|
51
|
+
'scroll_75': ['scroll'],
|
|
52
|
+
'scroll_90': ['scroll'],
|
|
53
53
|
};
|
|
@@ -26,7 +26,7 @@ export const EVENT_NAMES = [
|
|
|
26
26
|
'player_open',
|
|
27
27
|
|
|
28
28
|
// Scenes
|
|
29
|
-
'
|
|
29
|
+
'screen_view',
|
|
30
30
|
|
|
31
31
|
// Scrolling in scene
|
|
32
32
|
'scroll_25',
|
|
@@ -52,5 +52,5 @@ export const ONLY_ONCE_EVENTS: AnalyticsEventsNames[] = [
|
|
|
52
52
|
|
|
53
53
|
export const UNREPEATABLE_EVENTS: AnalyticsEventsNames[] = [
|
|
54
54
|
// Scenes
|
|
55
|
-
'
|
|
55
|
+
'screen_view',
|
|
56
56
|
];
|
|
@@ -47,7 +47,7 @@ export type AnalyticsEventsMap = {
|
|
|
47
47
|
'player_open': (payload: void) => void,
|
|
48
48
|
|
|
49
49
|
// Scenes
|
|
50
|
-
'
|
|
50
|
+
'screen_view': (payload: SceneInfo) => void,
|
|
51
51
|
|
|
52
52
|
// Scrolling in scene
|
|
53
53
|
'scroll_25': (payload: SceneInfo) => void,
|
|
@@ -47,7 +47,7 @@ const prepareDateData = ({
|
|
|
47
47
|
const defaultFormat = (date: Date) => {
|
|
48
48
|
const locale = i18n.getLanguage();
|
|
49
49
|
return l10n.date(date, locale).toLocaleDateString(
|
|
50
|
-
{ weekday: 'short', day: 'numeric', month: 'short' }
|
|
50
|
+
{ weekday: 'short', day: 'numeric', month: 'short' }
|
|
51
51
|
);
|
|
52
52
|
};
|
|
53
53
|
|
|
@@ -297,8 +297,6 @@ export class Epg<
|
|
|
297
297
|
return ref;
|
|
298
298
|
}
|
|
299
299
|
|
|
300
|
-
isFocusInRows = () => this.focused === 'epg';
|
|
301
|
-
|
|
302
300
|
focus(options?: FocusOptions) {
|
|
303
301
|
if (this.focused === 'datepicker') {
|
|
304
302
|
this.datePickerComponent.current!.focus(options);
|
|
@@ -378,6 +376,10 @@ export class Epg<
|
|
|
378
376
|
return this.inputEvents.isVerticallyFastScrolling();
|
|
379
377
|
}
|
|
380
378
|
|
|
379
|
+
isFocusInRows = () => {
|
|
380
|
+
return this.focused === 'epg';
|
|
381
|
+
};
|
|
382
|
+
|
|
381
383
|
render() {
|
|
382
384
|
const {
|
|
383
385
|
datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
|
|
@@ -144,6 +144,24 @@ export class Matrix extends Component<Props> implements IFocusable {
|
|
|
144
144
|
return false;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
+
isDirectionLeft(event: KeyboardEvent) {
|
|
148
|
+
const { dir } = this.props;
|
|
149
|
+
const rtl = isRtl(dir);
|
|
150
|
+
return (
|
|
151
|
+
(!rtl && LEFT.is(event))
|
|
152
|
+
|| (rtl && RIGHT.is(event))
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
isDirectionRight(event: KeyboardEvent) {
|
|
157
|
+
const { dir } = this.props;
|
|
158
|
+
const rtl = isRtl(dir);
|
|
159
|
+
return (
|
|
160
|
+
(!rtl && RIGHT.is(event))
|
|
161
|
+
|| (rtl && LEFT.is(event))
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
|
|
147
165
|
moveForwards = (isCircular: boolean) => (x: number, length: number) => {
|
|
148
166
|
if (x === length - 1) {
|
|
149
167
|
return isCircular ? 0 : length - 1;
|
|
@@ -186,24 +204,6 @@ export class Matrix extends Component<Props> implements IFocusable {
|
|
|
186
204
|
return this.searchVertical(column, fromY, this.moveForwards(!!isCircular));
|
|
187
205
|
};
|
|
188
206
|
|
|
189
|
-
isDirectionLeft(event: KeyboardEvent) {
|
|
190
|
-
const { dir } = this.props;
|
|
191
|
-
const rtl = isRtl(dir);
|
|
192
|
-
return (
|
|
193
|
-
(!rtl && LEFT.is(event))
|
|
194
|
-
|| (rtl && RIGHT.is(event))
|
|
195
|
-
);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
isDirectionRight(event: KeyboardEvent) {
|
|
199
|
-
const { dir } = this.props;
|
|
200
|
-
const rtl = isRtl(dir);
|
|
201
|
-
return (
|
|
202
|
-
(!rtl && RIGHT.is(event))
|
|
203
|
-
|| (rtl && LEFT.is(event))
|
|
204
|
-
);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
207
|
isDifferentReferenceFromCurrent(index: Index2D): boolean {
|
|
208
208
|
const { current } = this.getRefAt(this.index);
|
|
209
209
|
const { current: searched } = this.getRefAt(index);
|
|
@@ -178,6 +178,16 @@ export class GridBase<T extends Item<U>, U>
|
|
|
178
178
|
}
|
|
179
179
|
};
|
|
180
180
|
|
|
181
|
+
shouldPreventBlur(event: KeyboardEvent) {
|
|
182
|
+
const { horizontal, preventBlurOnLongPress } = this.props;
|
|
183
|
+
return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
|
|
184
|
+
(preventBlurOnLongPress.forward && isForward(event, horizontal))
|
|
185
|
+
|| (preventBlurOnLongPress.backward && isBackward(event, horizontal))
|
|
186
|
+
|| (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
|
|
187
|
+
|| (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
|
|
188
|
+
));
|
|
189
|
+
}
|
|
190
|
+
|
|
181
191
|
getRefAtIndex(i: number): Reference<T> {
|
|
182
192
|
const ref = this.itemRefs[i];
|
|
183
193
|
if (!ref) {
|
|
@@ -243,16 +253,6 @@ export class GridBase<T extends Item<U>, U>
|
|
|
243
253
|
this.fastScrollingCounter.reset();
|
|
244
254
|
};
|
|
245
255
|
|
|
246
|
-
shouldPreventBlur(event: KeyboardEvent) {
|
|
247
|
-
const { horizontal, preventBlurOnLongPress } = this.props;
|
|
248
|
-
return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
|
|
249
|
-
(preventBlurOnLongPress.forward && isForward(event, horizontal))
|
|
250
|
-
|| (preventBlurOnLongPress.backward && isBackward(event, horizontal))
|
|
251
|
-
|| (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
|
|
252
|
-
|| (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
|
|
253
|
-
));
|
|
254
|
-
}
|
|
255
|
-
|
|
256
256
|
animatedScrollStarted() {
|
|
257
257
|
this.isAnimatedScrollRunning = true;
|
|
258
258
|
}
|
|
@@ -62,7 +62,8 @@ export class Icon<T> extends Component<Props<T>> {
|
|
|
62
62
|
return (
|
|
63
63
|
<div
|
|
64
64
|
ref={this.ref}
|
|
65
|
-
className={`${className
|
|
65
|
+
className={`${className
|
|
66
|
+
? className : ''} icon ${icon
|
|
66
67
|
? this.getClass(icon) : ''} ${initialIsHidden
|
|
67
68
|
? DISPLAY_NONE : ''}`}
|
|
68
69
|
/>
|
|
@@ -56,7 +56,7 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
|
|
|
56
56
|
createLanguageFocusMatrix() {
|
|
57
57
|
const { languageLayout } = this.props;
|
|
58
58
|
this.languageFocusMatrix = generateFocusMatrixFromStringMatrix(
|
|
59
|
-
this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true)
|
|
59
|
+
this.keyRefs, languageLayout!.makeFocusStrings(languageLayout!.layout, true)
|
|
60
60
|
);
|
|
61
61
|
}
|
|
62
62
|
|
|
@@ -257,25 +257,23 @@ export class Keyboard extends KeyboardBase<Layouts, Props> {
|
|
|
257
257
|
<div className="key-row">
|
|
258
258
|
<div className="key key-wide key-empty"> </div>
|
|
259
259
|
</div>
|
|
260
|
-
{languageLayout
|
|
261
|
-
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
>
|
|
268
|
-
<div className="key-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
</div>
|
|
278
|
-
)}
|
|
260
|
+
{!!languageLayout ?
|
|
261
|
+
<div className="key-row rounded-border-container">
|
|
262
|
+
<Interactable
|
|
263
|
+
ref={this.keyRefs.language}
|
|
264
|
+
className="key key-wide key-with-icon key-language"
|
|
265
|
+
onPress={() => this.onLanguage()}
|
|
266
|
+
>
|
|
267
|
+
<div className="key-background">
|
|
268
|
+
<div className="key-mask-icon" />
|
|
269
|
+
</div>
|
|
270
|
+
</Interactable>
|
|
271
|
+
</div>
|
|
272
|
+
:
|
|
273
|
+
<div className="key-row">
|
|
274
|
+
<div className="key key-wide key-empty"> </div>
|
|
275
|
+
</div>
|
|
276
|
+
}
|
|
279
277
|
</div>
|
|
280
278
|
<div className="keys-container key-layout">
|
|
281
279
|
{layout}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { processYear, dateFormatter, toTwoDigitLocaleTimeString } from './common';
|
|
2
2
|
import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
|
|
3
3
|
|
|
4
|
-
//
|
|
4
|
+
//https://web.library.yale.edu/cataloging/months
|
|
5
5
|
const DE_MONTHS = {
|
|
6
6
|
narrow: [
|
|
7
7
|
'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
|
|
@@ -40,7 +40,7 @@ const processMonth = (
|
|
|
40
40
|
) => {
|
|
41
41
|
if (typeof month === 'undefined') return;
|
|
42
42
|
if (month === '2-digit' || month === 'numeric') {
|
|
43
|
-
const strMonth =
|
|
43
|
+
const strMonth = (date.getMonth() + 1).toString() + '.';
|
|
44
44
|
dateParts.push(strMonth);
|
|
45
45
|
} else {
|
|
46
46
|
const finalMonth = DE_MONTHS[month][date.getMonth()];
|
|
@@ -80,10 +80,10 @@ const toLocaleDateString = (date: Date) => (
|
|
|
80
80
|
const dateConnection = '';
|
|
81
81
|
const dateParts: string[] = [];
|
|
82
82
|
processDay(dateParts, day, date);
|
|
83
|
-
if ((month === 'narrow'
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
if ((month === 'narrow' ||
|
|
84
|
+
month === 'short' ||
|
|
85
|
+
month === 'long') &&
|
|
86
|
+
day != null
|
|
87
87
|
) {
|
|
88
88
|
dateParts.push(' ');
|
|
89
89
|
}
|
|
@@ -32,7 +32,7 @@ export const processWeekday = (
|
|
|
32
32
|
day: Day | undefined,
|
|
33
33
|
weekday: Weekday | undefined,
|
|
34
34
|
date: Date,
|
|
35
|
-
weekdaysLocaleData: LocaleData = EN_WEEKDAYS
|
|
35
|
+
weekdaysLocaleData: LocaleData = EN_WEEKDAYS
|
|
36
36
|
) => {
|
|
37
37
|
if (typeof weekday === 'undefined') return;
|
|
38
38
|
let weekdayString = weekdaysLocaleData[weekday][date.getDay()];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { dateFormatter, processYear, toTwoDigitLocaleTimeString } from './common';
|
|
2
2
|
import { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
|
|
3
3
|
|
|
4
|
-
//
|
|
4
|
+
//https://web.library.yale.edu/cataloging/months
|
|
5
5
|
const FR_MONTHS = {
|
|
6
6
|
narrow: [
|
|
7
7
|
'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D',
|
|
@@ -38,7 +38,7 @@ const processWeekday = (
|
|
|
38
38
|
if (typeof weekday === 'undefined') return;
|
|
39
39
|
let weekdayString = FR_WEEKDAYS[weekday][date.getDay()];
|
|
40
40
|
if (
|
|
41
|
-
(typeof year !== 'undefined'
|
|
41
|
+
( typeof year !== 'undefined'
|
|
42
42
|
|| typeof month !== 'undefined'
|
|
43
43
|
|| typeof day !== 'undefined') && weekday !== 'long'
|
|
44
44
|
) {
|
|
@@ -48,12 +48,11 @@ const processWeekday = (
|
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
const processDay = (
|
|
51
|
-
dateParts: string[], day: Day | undefined, month: Month | undefined, date: Date
|
|
52
|
-
) => {
|
|
51
|
+
dateParts: string[], day: Day | undefined, month: Month | undefined, date: Date) => {
|
|
53
52
|
if (typeof day === 'undefined') return;
|
|
54
53
|
const strDate = date.getDate().toString();
|
|
55
54
|
dateParts.push(
|
|
56
|
-
strDate.length === 1 && month !== 'short' && month !== 'long'
|
|
55
|
+
strDate.length === 1 && month !== 'short' && month !== 'long' ? `0${strDate}` : strDate
|
|
57
56
|
);
|
|
58
57
|
};
|
|
59
58
|
|
|
@@ -81,14 +81,14 @@ const toLocaleDateString = (date: Date) => (
|
|
|
81
81
|
},
|
|
82
82
|
) => {
|
|
83
83
|
const dateStringParts: string[] = [];
|
|
84
|
-
processWeekday(dateStringParts,
|
|
85
|
-
const dateConnection = month === 'numeric' || month === '2-digit' ?
|
|
84
|
+
processWeekday(dateStringParts, weekday, date);
|
|
85
|
+
const dateConnection = month === 'numeric' || month === '2-digit' ? '.' : '';
|
|
86
86
|
const dateParts: string[] = [];
|
|
87
87
|
processDay(dateParts, day, date);
|
|
88
|
-
if ((month === 'narrow'
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
if ((month === 'narrow' ||
|
|
89
|
+
month === 'short' ||
|
|
90
|
+
month === 'long') &&
|
|
91
|
+
day != null
|
|
92
92
|
) {
|
|
93
93
|
dateParts.push(' ');
|
|
94
94
|
}
|
|
@@ -152,6 +152,14 @@ export class ListBase<T extends Item<U>, U>
|
|
|
152
152
|
}
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
+
shouldPreventBlur(event: KeyboardEvent) {
|
|
156
|
+
const { horizontal, preventBlurOnLongPress } = this.props;
|
|
157
|
+
return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
|
|
158
|
+
(preventBlurOnLongPress.forward && isForward(event, horizontal))
|
|
159
|
+
|| (preventBlurOnLongPress.backward && isBackward(event, horizontal))
|
|
160
|
+
));
|
|
161
|
+
}
|
|
162
|
+
|
|
155
163
|
getRefAtIndex(i: number): Reference<T> {
|
|
156
164
|
const ref = this.itemRefs[i];
|
|
157
165
|
if (!ref) {
|
|
@@ -193,14 +201,6 @@ export class ListBase<T extends Item<U>, U>
|
|
|
193
201
|
this.fastScrollingCounter.reset();
|
|
194
202
|
}
|
|
195
203
|
|
|
196
|
-
shouldPreventBlur(event: KeyboardEvent) {
|
|
197
|
-
const { horizontal, preventBlurOnLongPress } = this.props;
|
|
198
|
-
return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
|
|
199
|
-
(preventBlurOnLongPress.forward && isForward(event, horizontal))
|
|
200
|
-
|| (preventBlurOnLongPress.backward && isBackward(event, horizontal))
|
|
201
|
-
));
|
|
202
|
-
}
|
|
203
|
-
|
|
204
204
|
animatedScrollStarted() {
|
|
205
205
|
this.isAnimatedScrollRunning = true;
|
|
206
206
|
}
|
|
@@ -113,8 +113,7 @@ export class PlayerUI extends Component<Props>
|
|
|
113
113
|
};
|
|
114
114
|
|
|
115
115
|
onKeyPause = () => {
|
|
116
|
-
|
|
117
|
-
if (!isPauseAllowed()) return false;
|
|
116
|
+
if (!this.props.isPauseAllowed()) return false;
|
|
118
117
|
if (this.seeking.isAutomaticallySeeking()) {
|
|
119
118
|
this.seeking.stopAutomaticSeek();
|
|
120
119
|
if (this.isPlaying()) this.trigger(PlayerAction.PAUSE);
|
|
@@ -129,8 +128,7 @@ export class PlayerUI extends Component<Props>
|
|
|
129
128
|
};
|
|
130
129
|
|
|
131
130
|
onKeyPlayPause = () => {
|
|
132
|
-
|
|
133
|
-
if (!isPauseAllowed()) return false;
|
|
131
|
+
if (!this.props.isPauseAllowed()) return false;
|
|
134
132
|
if (this.seeking.isSeeking()) {
|
|
135
133
|
this.seeking.confirmSeek();
|
|
136
134
|
if (!this.isPlaying()) this.trigger(PlayerAction.PLAY);
|
|
@@ -163,7 +161,9 @@ export class PlayerUI extends Component<Props>
|
|
|
163
161
|
|
|
164
162
|
};
|
|
165
163
|
|
|
166
|
-
getPlayer = () =>
|
|
164
|
+
getPlayer = () => {
|
|
165
|
+
return this.player!;
|
|
166
|
+
};
|
|
167
167
|
|
|
168
168
|
setPlayer(player: PlayerBase<any>) {
|
|
169
169
|
this.player = player;
|
|
@@ -137,8 +137,8 @@ export class Seekbar extends Component<Props> implements IFocusable {
|
|
|
137
137
|
}
|
|
138
138
|
const isFastSeeking = this.rightConsecutiveness >= FAST_TRESHOLD;
|
|
139
139
|
if (
|
|
140
|
-
(seekTime != null
|
|
141
|
-
|
|
140
|
+
(seekTime != null &&
|
|
141
|
+
(seekTime + SLOW_TIME >= this.duration - SAFE_END_MARGIN
|
|
142
142
|
|| (isFastSeeking && seekTime + FAST_TIME >= this.duration - SAFE_END_MARGIN)))
|
|
143
143
|
|| (seekTime == null && this.currentTime >= this.duration - SAFE_END_MARGIN)
|
|
144
144
|
) {
|
|
@@ -165,10 +165,7 @@ export class Seekbar extends Component<Props> implements IFocusable {
|
|
|
165
165
|
this.updateSeekBar();
|
|
166
166
|
};
|
|
167
167
|
|
|
168
|
-
onStopAutomaticSeek = () =>
|
|
169
|
-
const { ui } = this.props;
|
|
170
|
-
ui.enableHiding();
|
|
171
|
-
};
|
|
168
|
+
onStopAutomaticSeek = () => this.props.ui.enableHiding();
|
|
172
169
|
|
|
173
170
|
onTimeUpdate = ({ currentTime }: ITimeUpdateEvent) => {
|
|
174
171
|
const { ui } = this.props;
|
|
@@ -96,7 +96,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
|
|
|
96
96
|
if (this.ffConsecutiveness === FAST_THRESHOLD) {
|
|
97
97
|
this.automaticSeekInterval.set(
|
|
98
98
|
() => this.seekForward(FAST_SEEK_TIME),
|
|
99
|
-
AUTOMATIC_SEEK_INTERVAL
|
|
99
|
+
AUTOMATIC_SEEK_INTERVAL
|
|
100
100
|
);
|
|
101
101
|
}
|
|
102
102
|
return;
|
|
@@ -116,7 +116,7 @@ export class Seeking implements IEvents<SeekingEventsMap> {
|
|
|
116
116
|
if (this.rewConsecutiveness === FAST_THRESHOLD) {
|
|
117
117
|
this.automaticSeekInterval.set(
|
|
118
118
|
() => this.seekBackward(FAST_SEEK_TIME),
|
|
119
|
-
AUTOMATIC_SEEK_INTERVAL
|
|
119
|
+
AUTOMATIC_SEEK_INTERVAL
|
|
120
120
|
);
|
|
121
121
|
}
|
|
122
122
|
return;
|
|
@@ -35,8 +35,8 @@ const getSeekingMock = (): jest.Mocked<IPlayerUI['seeking']> => ({
|
|
|
35
35
|
|
|
36
36
|
const PLAYER_MOCK_DURATION = 60000;
|
|
37
37
|
|
|
38
|
-
export const getPlayerMock = (): PlayerBase<any> =>
|
|
39
|
-
const playerMock =
|
|
38
|
+
export const getPlayerMock = (): PlayerBase<any> =>{
|
|
39
|
+
const playerMock = new PlayerBaseMock();
|
|
40
40
|
jest.spyOn(playerMock, 'duration', 'get').mockReturnValue(PLAYER_MOCK_DURATION);
|
|
41
41
|
|
|
42
42
|
return playerMock;
|
|
@@ -63,9 +63,9 @@ export const formatTime = (duration: number, pattern: string) => {
|
|
|
63
63
|
const unitValues = calculateUnitValues(duration, units);
|
|
64
64
|
let result: string = pattern;
|
|
65
65
|
forEach(matches, (match) => {
|
|
66
|
-
const formatedValue = Number.isNaN(unitValues[match.unit])
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
const formatedValue = Number.isNaN(unitValues[match.unit]) ?
|
|
67
|
+
'--' :
|
|
68
|
+
unitValues[match.unit]!.toString().padStart(match.count, '0');
|
|
69
69
|
result = result.replace(
|
|
70
70
|
match.completeMatch,
|
|
71
71
|
formatedValue,
|
|
@@ -22,8 +22,8 @@ const getIsoDateString = (resp: TwentyFourIMediaTimeApi.ServiceDataResponse): st
|
|
|
22
22
|
const sign = offset > 0 ? '+' : '-';
|
|
23
23
|
const hours = Math.abs(offset);
|
|
24
24
|
const minutes = Math.floor((resp.timezone_offset % HOUR_IN_MS) / MINUTE_IN_MS);
|
|
25
|
-
// eslint-disable-next-line no-magic-numbers
|
|
26
|
-
const timeString =
|
|
25
|
+
// eslint-disable-next-line no-magic-numbers
|
|
26
|
+
const timeString = sign + `0${hours}`.slice(-2) + ':' + `0${minutes}`.slice(-2);
|
|
27
27
|
datetime = datetime.replace('Z', timeString);
|
|
28
28
|
}
|
|
29
29
|
return datetime;
|
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
// Victor Magalhães <https://github.com/vhfmag>
|
|
28
28
|
// Dale Tan <https://github.com/hellatan>
|
|
29
29
|
// Priyanshu Rav <https://github.com/priyanshurav>
|
|
30
|
-
// Dmitry Semigradsky <https://github.com/Semigradsky>
|
|
31
30
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
32
31
|
// TypeScript Version: 2.8
|
|
33
32
|
|
|
@@ -1251,8 +1250,6 @@ declare namespace React {
|
|
|
1251
1250
|
target: EventTarget & T;
|
|
1252
1251
|
}
|
|
1253
1252
|
|
|
1254
|
-
export type ModifierKey = "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Hyper" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Super" | "Symbol" | "SymbolLock";
|
|
1255
|
-
|
|
1256
1253
|
interface KeyboardEvent<T = Element> extends UIEvent<T, NativeKeyboardEvent> {
|
|
1257
1254
|
altKey: boolean;
|
|
1258
1255
|
/** @deprecated */
|
|
@@ -1262,7 +1259,7 @@ declare namespace React {
|
|
|
1262
1259
|
/**
|
|
1263
1260
|
* See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
|
|
1264
1261
|
*/
|
|
1265
|
-
getModifierState(key:
|
|
1262
|
+
getModifierState(key: string): boolean;
|
|
1266
1263
|
/**
|
|
1267
1264
|
* See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
|
|
1268
1265
|
*/
|
|
@@ -1288,7 +1285,7 @@ declare namespace React {
|
|
|
1288
1285
|
/**
|
|
1289
1286
|
* See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
|
|
1290
1287
|
*/
|
|
1291
|
-
getModifierState(key:
|
|
1288
|
+
getModifierState(key: string): boolean;
|
|
1292
1289
|
metaKey: boolean;
|
|
1293
1290
|
movementX: number;
|
|
1294
1291
|
movementY: number;
|
|
@@ -1307,7 +1304,7 @@ declare namespace React {
|
|
|
1307
1304
|
/**
|
|
1308
1305
|
* See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
|
|
1309
1306
|
*/
|
|
1310
|
-
getModifierState(key:
|
|
1307
|
+
getModifierState(key: string): boolean;
|
|
1311
1308
|
metaKey: boolean;
|
|
1312
1309
|
shiftKey: boolean;
|
|
1313
1310
|
targetTouches: TouchList;
|
|
@@ -1462,8 +1459,6 @@ declare namespace React {
|
|
|
1462
1459
|
onProgressCapture?: ReactEventHandler<T> | undefined;
|
|
1463
1460
|
onRateChange?: ReactEventHandler<T> | undefined;
|
|
1464
1461
|
onRateChangeCapture?: ReactEventHandler<T> | undefined;
|
|
1465
|
-
onResize?: ReactEventHandler<T> | undefined;
|
|
1466
|
-
onResizeCapture?: ReactEventHandler<T> | undefined;
|
|
1467
1462
|
onSeeked?: ReactEventHandler<T> | undefined;
|
|
1468
1463
|
onSeekedCapture?: ReactEventHandler<T> | undefined;
|
|
1469
1464
|
onSeeking?: ReactEventHandler<T> | undefined;
|
|
@@ -1863,7 +1858,6 @@ declare namespace React {
|
|
|
1863
1858
|
hidden?: boolean | undefined;
|
|
1864
1859
|
id?: string | undefined;
|
|
1865
1860
|
lang?: string | undefined;
|
|
1866
|
-
nonce?: string | undefined;
|
|
1867
1861
|
placeholder?: string | undefined;
|
|
1868
1862
|
slot?: string | undefined;
|
|
1869
1863
|
spellCheck?: Booleanish | undefined;
|
|
@@ -1984,6 +1978,7 @@ declare namespace React {
|
|
|
1984
1978
|
multiple?: boolean | undefined;
|
|
1985
1979
|
muted?: boolean | undefined;
|
|
1986
1980
|
name?: string | undefined;
|
|
1981
|
+
nonce?: string | undefined;
|
|
1987
1982
|
noValidate?: boolean | undefined;
|
|
1988
1983
|
open?: boolean | undefined;
|
|
1989
1984
|
optimum?: number | undefined;
|
|
@@ -2396,6 +2391,7 @@ declare namespace React {
|
|
|
2396
2391
|
defer?: boolean | undefined;
|
|
2397
2392
|
integrity?: string | undefined;
|
|
2398
2393
|
noModule?: boolean | undefined;
|
|
2394
|
+
nonce?: string | undefined;
|
|
2399
2395
|
referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
|
|
2400
2396
|
src?: string | undefined;
|
|
2401
2397
|
type?: string | undefined;
|
|
@@ -2426,6 +2422,7 @@ declare namespace React {
|
|
|
2426
2422
|
|
|
2427
2423
|
interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
2428
2424
|
media?: string | undefined;
|
|
2425
|
+
nonce?: string | undefined;
|
|
2429
2426
|
scoped?: boolean | undefined;
|
|
2430
2427
|
type?: string | undefined;
|
|
2431
2428
|
}
|
|
@@ -4,7 +4,7 @@ const trimWithEllipsis = (
|
|
|
4
4
|
row: HTMLSpanElement | HTMLDivElement,
|
|
5
5
|
requestedNumberOfLines: number,
|
|
6
6
|
ellipsis = ELLIPSIS,
|
|
7
|
-
ending = false
|
|
7
|
+
ending = false
|
|
8
8
|
) : void => {
|
|
9
9
|
if (!row.textContent) {
|
|
10
10
|
return;
|
|
@@ -48,10 +48,14 @@ export const trimWithLeadingEllipsis = (
|
|
|
48
48
|
row: HTMLSpanElement | HTMLDivElement,
|
|
49
49
|
requestedNumberOfLines: number,
|
|
50
50
|
ellipsis = ELLIPSIS,
|
|
51
|
-
) =>
|
|
51
|
+
) => {
|
|
52
|
+
return trimWithEllipsis(row, requestedNumberOfLines, ellipsis, false);
|
|
53
|
+
};
|
|
52
54
|
|
|
53
55
|
export const trimWithEndingEllipsis = (
|
|
54
56
|
row: HTMLSpanElement | HTMLDivElement,
|
|
55
57
|
requestedNumberOfLines: number,
|
|
56
58
|
ellipsis = ELLIPSIS,
|
|
57
|
-
) =>
|
|
59
|
+
) => {
|
|
60
|
+
return trimWithEllipsis(row, requestedNumberOfLines, ellipsis, true);
|
|
61
|
+
};
|