@applicaster/zapp-react-native-utils 14.0.0-rc.59 → 14.0.0-rc.60
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/appUtils/accessibilityManager/const.ts +13 -0
- package/appUtils/accessibilityManager/hooks.ts +35 -1
- package/appUtils/accessibilityManager/index.ts +151 -30
- package/appUtils/accessibilityManager/utils.ts +24 -0
- package/appUtils/platform/platformUtils.ts +31 -1
- package/configurationUtils/index.ts +1 -1
- package/index.d.ts +1 -1
- package/manifestUtils/defaultManifestConfigurations/player.js +16 -2
- package/package.json +2 -2
- package/playerUtils/PlayerTTS/PlayerTTS.ts +359 -0
- package/playerUtils/PlayerTTS/index.ts +1 -0
- package/playerUtils/usePlayerTTS.ts +21 -0
|
@@ -65,4 +65,17 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
|
|
|
65
65
|
label: "accessibility_menu_item_label",
|
|
66
66
|
hint: "accessibility_menu_item_hint",
|
|
67
67
|
},
|
|
68
|
+
skip_intro: {
|
|
69
|
+
label: "accessibility_skip_intro_label",
|
|
70
|
+
hint: "accessibility_skip_intro_hint",
|
|
71
|
+
},
|
|
72
|
+
// Top Menu Bar-specific buttons
|
|
73
|
+
top_menu_bar_item_selected: {
|
|
74
|
+
label: "accessibility_top_menu_bar_item_selected_label",
|
|
75
|
+
hint: "accessibility_top_menu_bar_item_selected_hint",
|
|
76
|
+
},
|
|
77
|
+
top_menu_title: {
|
|
78
|
+
label: "accessibility_top_menu_title_label",
|
|
79
|
+
hint: "accessibility_top_menu_hint",
|
|
80
|
+
},
|
|
68
81
|
} as const;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useMemo } from "react";
|
|
1
|
+
import { useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { AccessibilityManager } from "./index";
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -38,3 +38,37 @@ export const useAccessibilityManager = (
|
|
|
38
38
|
|
|
39
39
|
return accessibilityManager;
|
|
40
40
|
};
|
|
41
|
+
|
|
42
|
+
export const useInitialAnnouncementReady = (
|
|
43
|
+
accessibilityManager: AccessibilityManager
|
|
44
|
+
) => {
|
|
45
|
+
const [isReady, setIsReady] = useState(
|
|
46
|
+
accessibilityManager.isInitialPlayerAnnouncementReady
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
const subscription = accessibilityManager
|
|
51
|
+
.getInitialAnnouncementReadyObservable()
|
|
52
|
+
.subscribe(setIsReady);
|
|
53
|
+
|
|
54
|
+
return () => subscription.unsubscribe();
|
|
55
|
+
}, [accessibilityManager]);
|
|
56
|
+
|
|
57
|
+
return isReady;
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const useAnnouncementActive = (
|
|
61
|
+
accessibilityManager: AccessibilityManager
|
|
62
|
+
) => {
|
|
63
|
+
const [isActive, setIsActive] = useState(false);
|
|
64
|
+
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
const subscription = accessibilityManager
|
|
67
|
+
.getTTSStateObservable()
|
|
68
|
+
.subscribe(setIsActive);
|
|
69
|
+
|
|
70
|
+
return () => subscription.unsubscribe();
|
|
71
|
+
}, [accessibilityManager]);
|
|
72
|
+
|
|
73
|
+
return isActive;
|
|
74
|
+
};
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
+
import * as R from "ramda";
|
|
1
2
|
import { BehaviorSubject } from "rxjs";
|
|
2
3
|
import { accessibilityManagerLogger as logger } from "./logger";
|
|
3
4
|
import { TTSManager } from "../platform";
|
|
4
5
|
import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
|
|
5
6
|
import { toString } from "../../utils";
|
|
7
|
+
import { calculateReadingTime } from "./utils";
|
|
6
8
|
import { AccessibilityRole } from "react-native";
|
|
7
9
|
|
|
8
10
|
export class AccessibilityManager {
|
|
9
11
|
private static _instance: AccessibilityManager | null = null;
|
|
10
12
|
private headingTimeout: NodeJS.Timeout | null = null;
|
|
11
|
-
private
|
|
13
|
+
private announcementDelayTimeout: NodeJS.Timeout | null = null;
|
|
14
|
+
private WORDS_PER_MINUTE = 140;
|
|
12
15
|
private MINIMUM_PAUSE = 500;
|
|
16
|
+
private ANNOUNCEMENT_DELAY = 700;
|
|
13
17
|
private state$ = new BehaviorSubject<AccessibilityState>({
|
|
14
18
|
screenReaderEnabled: false,
|
|
15
19
|
reduceMotionEnabled: false,
|
|
@@ -25,6 +29,12 @@ export class AccessibilityManager {
|
|
|
25
29
|
private ttsManager = TTSManager.getInstance();
|
|
26
30
|
private localizations: { [key: string]: string } = {};
|
|
27
31
|
private headingQueue: string[] = [];
|
|
32
|
+
private currentFocusId: string | null = null;
|
|
33
|
+
private headingFocusMap: Map<string, string> = new Map();
|
|
34
|
+
private pendingFocusId: string | null = null;
|
|
35
|
+
private isInitialPlayerAnnouncementReady$ = new BehaviorSubject<boolean>(
|
|
36
|
+
false
|
|
37
|
+
);
|
|
28
38
|
|
|
29
39
|
private constructor() {}
|
|
30
40
|
|
|
@@ -36,6 +46,26 @@ export class AccessibilityManager {
|
|
|
36
46
|
return AccessibilityManager._instance;
|
|
37
47
|
}
|
|
38
48
|
|
|
49
|
+
public get isInitialPlayerAnnouncementReady(): boolean {
|
|
50
|
+
return this.isInitialPlayerAnnouncementReady$.getValue();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
public setInitialPlayerAnnouncementReady(): void {
|
|
54
|
+
this.isInitialPlayerAnnouncementReady$.next(true);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
public resetInitialPlayerAnnouncementReady(): void {
|
|
58
|
+
this.isInitialPlayerAnnouncementReady$.next(false);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
public getInitialAnnouncementReadyObservable() {
|
|
62
|
+
return this.isInitialPlayerAnnouncementReady$.asObservable();
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
public getTTSStateObservable() {
|
|
66
|
+
return this.ttsManager.getStateAsObservable();
|
|
67
|
+
}
|
|
68
|
+
|
|
39
69
|
/**
|
|
40
70
|
* The method now accepts any object with localizations using a flattened structure
|
|
41
71
|
*
|
|
@@ -46,7 +76,9 @@ export class AccessibilityManager {
|
|
|
46
76
|
* i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
|
|
47
77
|
*/
|
|
48
78
|
public updateLocalizations(localizations: { [key: string]: string }) {
|
|
49
|
-
|
|
79
|
+
if (!R.isEmpty(localizations)) {
|
|
80
|
+
this.localizations = localizations;
|
|
81
|
+
}
|
|
50
82
|
}
|
|
51
83
|
|
|
52
84
|
public getState(): AccessibilityState {
|
|
@@ -57,31 +89,25 @@ export class AccessibilityManager {
|
|
|
57
89
|
return this.state$.asObservable();
|
|
58
90
|
}
|
|
59
91
|
|
|
60
|
-
/** Calculates the reading time for a given text
|
|
61
|
-
* This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
|
|
62
|
-
* @param text - The text to calculate the reading time for
|
|
63
|
-
* @returns The reading time in milliseconds
|
|
64
|
-
*/
|
|
65
|
-
private calculateReadingTime(text: string): number {
|
|
66
|
-
const words = text.trim().split(/\s+/).length;
|
|
67
|
-
|
|
68
|
-
return Math.max(
|
|
69
|
-
this.MINIMUM_PAUSE,
|
|
70
|
-
(words / this.WORDS_PER_MINUTE) * 60 * 1000
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
92
|
/**
|
|
75
93
|
* Adds a heading to the queue, headings will be read before the next text
|
|
76
94
|
* Each heading will be read once and removed from the queue
|
|
77
95
|
*/
|
|
78
96
|
public addHeading(heading: string) {
|
|
97
|
+
if (!this.pendingFocusId) {
|
|
98
|
+
this.pendingFocusId = Date.now().toString();
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
this.headingFocusMap.set(heading, this.pendingFocusId);
|
|
79
102
|
this.headingQueue.push(heading);
|
|
80
103
|
}
|
|
81
104
|
|
|
82
105
|
/**
|
|
83
106
|
* text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
|
|
84
107
|
* keyOfLocalizedText is the key to the localized text
|
|
108
|
+
*
|
|
109
|
+
* Implements a delay mechanism to reduce noise during rapid navigation.
|
|
110
|
+
* Only the most recent announcement will be read after the delay period.
|
|
85
111
|
*/
|
|
86
112
|
public readText({
|
|
87
113
|
text,
|
|
@@ -112,19 +138,27 @@ export class AccessibilityManager {
|
|
|
112
138
|
textToRead = localizedMessage;
|
|
113
139
|
}
|
|
114
140
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
141
|
+
const focusId = this.pendingFocusId || Date.now().toString();
|
|
142
|
+
this.currentFocusId = focusId;
|
|
143
|
+
this.pendingFocusId = null;
|
|
118
144
|
|
|
119
|
-
|
|
120
|
-
clearTimeout(this.headingTimeout);
|
|
121
|
-
}
|
|
145
|
+
this.clearAnnouncement();
|
|
122
146
|
|
|
123
|
-
|
|
147
|
+
this.announcementDelayTimeout = setTimeout(() => {
|
|
148
|
+
this.executeAnnouncement(textToRead, keyOfLocalizedText, focusId);
|
|
149
|
+
}, this.ANNOUNCEMENT_DELAY);
|
|
150
|
+
}
|
|
124
151
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
152
|
+
/**
|
|
153
|
+
* Internal method to execute the actual announcement after the delay
|
|
154
|
+
*/
|
|
155
|
+
private executeAnnouncement(
|
|
156
|
+
textToRead: string,
|
|
157
|
+
keyOfLocalizedText?: string,
|
|
158
|
+
focusId?: string
|
|
159
|
+
) {
|
|
160
|
+
if (this.headingQueue.length > 0) {
|
|
161
|
+
this.processHeadingQueue(textToRead, focusId);
|
|
128
162
|
} else {
|
|
129
163
|
this.ttsManager?.readText(textToRead);
|
|
130
164
|
}
|
|
@@ -136,6 +170,54 @@ export class AccessibilityManager {
|
|
|
136
170
|
});
|
|
137
171
|
}
|
|
138
172
|
|
|
173
|
+
/**
|
|
174
|
+
* Recursively processes all headings in the queue, reading them one by one
|
|
175
|
+
*/
|
|
176
|
+
private processHeadingQueue(textToRead: string, focusId?: string) {
|
|
177
|
+
// If focus has changed, abort this announcement
|
|
178
|
+
if (focusId && this.currentFocusId !== focusId) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
if (this.headingQueue.length === 0) {
|
|
183
|
+
if (focusId && this.currentFocusId === focusId) {
|
|
184
|
+
this.ttsManager?.readText(textToRead);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
const heading = this.headingQueue.shift()!;
|
|
191
|
+
|
|
192
|
+
const headingFocusId = this.headingFocusMap.get(heading);
|
|
193
|
+
|
|
194
|
+
if (headingFocusId && headingFocusId !== focusId) {
|
|
195
|
+
// This heading belongs to a previous focus, skip it
|
|
196
|
+
this.headingFocusMap.delete(heading);
|
|
197
|
+
this.processHeadingQueue(textToRead, focusId);
|
|
198
|
+
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
this.ttsManager?.readText(heading);
|
|
203
|
+
this.headingFocusMap.delete(heading); // Clean up after reading
|
|
204
|
+
|
|
205
|
+
if (this.headingTimeout) {
|
|
206
|
+
clearTimeout(this.headingTimeout);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
const pauseTime = calculateReadingTime(
|
|
210
|
+
heading,
|
|
211
|
+
this.WORDS_PER_MINUTE,
|
|
212
|
+
this.MINIMUM_PAUSE,
|
|
213
|
+
this.ANNOUNCEMENT_DELAY
|
|
214
|
+
);
|
|
215
|
+
|
|
216
|
+
this.headingTimeout = setTimeout(() => {
|
|
217
|
+
this.processHeadingQueue(textToRead, focusId);
|
|
218
|
+
}, pauseTime);
|
|
219
|
+
}
|
|
220
|
+
|
|
139
221
|
public getButtonAccessibilityProps(name: string): AccessibilityProps {
|
|
140
222
|
const buttonName = toString(name);
|
|
141
223
|
|
|
@@ -143,12 +225,15 @@ export class AccessibilityManager {
|
|
|
143
225
|
|
|
144
226
|
if (!buttonConfig) {
|
|
145
227
|
return {
|
|
228
|
+
accessible: true,
|
|
146
229
|
accessibilityLabel: buttonName,
|
|
147
230
|
accessibilityHint: `Press button to perform action on ${buttonName}`,
|
|
148
231
|
"aria-label": buttonName,
|
|
149
232
|
"aria-description": `Press button to perform action on ${buttonName}`,
|
|
150
|
-
accessibilityRole: "button",
|
|
233
|
+
accessibilityRole: "button" as AccessibilityRole,
|
|
151
234
|
"aria-role": "button",
|
|
235
|
+
role: "button",
|
|
236
|
+
tabindex: 0,
|
|
152
237
|
};
|
|
153
238
|
}
|
|
154
239
|
|
|
@@ -162,23 +247,52 @@ export class AccessibilityManager {
|
|
|
162
247
|
`Press button to perform action on ${buttonName}`;
|
|
163
248
|
|
|
164
249
|
return {
|
|
250
|
+
accessible: true,
|
|
165
251
|
accessibilityLabel: label,
|
|
166
252
|
accessibilityHint: hint,
|
|
167
253
|
"aria-label": label,
|
|
168
254
|
"aria-description": hint,
|
|
169
|
-
accessibilityRole: "button",
|
|
255
|
+
accessibilityRole: "button" as AccessibilityRole,
|
|
170
256
|
"aria-role": "button",
|
|
257
|
+
role: "button",
|
|
258
|
+
tabindex: 0,
|
|
171
259
|
};
|
|
172
260
|
}
|
|
173
261
|
|
|
174
262
|
public getInputAccessibilityProps(inputName: string): AccessibilityProps {
|
|
175
263
|
return {
|
|
264
|
+
accessible: true,
|
|
176
265
|
accessibilityLabel: inputName,
|
|
177
266
|
accessibilityHint: `Enter text into ${inputName}`,
|
|
178
267
|
"aria-label": inputName,
|
|
179
268
|
"aria-description": `Enter text into ${inputName}`,
|
|
180
|
-
accessibilityRole: "
|
|
181
|
-
"aria-role": "
|
|
269
|
+
accessibilityRole: "searchbox" as AccessibilityRole,
|
|
270
|
+
"aria-role": "searchbox",
|
|
271
|
+
role: "searchbox",
|
|
272
|
+
tabindex: 0,
|
|
273
|
+
};
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/**
|
|
277
|
+
* Extracts accessibility props from component props and returns them as HTML attributes
|
|
278
|
+
* @param props - Component props containing accessibility properties
|
|
279
|
+
* @returns Object with accessibility HTML attributes
|
|
280
|
+
*/
|
|
281
|
+
public getWebAccessibilityProps(props: any): AccessibilityProps {
|
|
282
|
+
const {
|
|
283
|
+
"aria-label": ariaLabel,
|
|
284
|
+
"aria-description": ariaDescription,
|
|
285
|
+
"aria-role": ariaRole,
|
|
286
|
+
role,
|
|
287
|
+
tabindex,
|
|
288
|
+
} = props;
|
|
289
|
+
|
|
290
|
+
return {
|
|
291
|
+
"aria-label": ariaLabel,
|
|
292
|
+
"aria-description": ariaDescription,
|
|
293
|
+
"aria-role": ariaRole,
|
|
294
|
+
role: role || ariaRole,
|
|
295
|
+
tabindex,
|
|
182
296
|
};
|
|
183
297
|
}
|
|
184
298
|
|
|
@@ -196,4 +310,11 @@ export class AccessibilityManager {
|
|
|
196
310
|
|
|
197
311
|
return this.localizations[key];
|
|
198
312
|
}
|
|
313
|
+
|
|
314
|
+
private clearAnnouncement() {
|
|
315
|
+
if (this.announcementDelayTimeout) {
|
|
316
|
+
clearTimeout(this.announcementDelayTimeout);
|
|
317
|
+
this.announcementDelayTimeout = null;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
199
320
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the reading time for a given text based on word count
|
|
3
|
+
* @param text - The text to calculate the reading time for
|
|
4
|
+
* @param wordsPerMinute - Words per minute reading speed (default: 160)
|
|
5
|
+
* @param minimumPause - Minimum pause time in milliseconds (default: 500)
|
|
6
|
+
* @param announcementDelay - Additional delay for announcement in milliseconds (default: 700)
|
|
7
|
+
* @returns The reading time in milliseconds
|
|
8
|
+
*/
|
|
9
|
+
export function calculateReadingTime(
|
|
10
|
+
text: string,
|
|
11
|
+
wordsPerMinute: number = 140,
|
|
12
|
+
minimumPause: number = 500,
|
|
13
|
+
announcementDelay: number = 700
|
|
14
|
+
): number {
|
|
15
|
+
const words = text
|
|
16
|
+
.trim()
|
|
17
|
+
.split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
|
|
18
|
+
.filter(Boolean).length;
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
Math.max(minimumPause, (words / wordsPerMinute) * 60 * 1000) +
|
|
22
|
+
announcementDelay
|
|
23
|
+
);
|
|
24
|
+
}
|
|
@@ -10,6 +10,7 @@ import { PLATFORM_KEYS, PLATFORMS, ZappPlatform } from "./const";
|
|
|
10
10
|
import { createLogger, utilsLogger } from "../../logger";
|
|
11
11
|
import { getPlatform } from "../../reactUtils";
|
|
12
12
|
import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
|
|
13
|
+
import { calculateReadingTime } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/utils";
|
|
13
14
|
|
|
14
15
|
const { log_debug } = createLogger({
|
|
15
16
|
category: "General",
|
|
@@ -212,9 +213,16 @@ export class TTSManager {
|
|
|
212
213
|
}
|
|
213
214
|
|
|
214
215
|
readText(text: string) {
|
|
216
|
+
this.ttsState$.next(true);
|
|
217
|
+
|
|
215
218
|
if (isSamsungPlatform() && window.speechSynthesis) {
|
|
216
219
|
const utterance = new SpeechSynthesisUtterance(text);
|
|
220
|
+
|
|
221
|
+
window.speechSynthesis.cancel(); // Cancel previous speech before speaking new text
|
|
217
222
|
window.speechSynthesis.speak(utterance);
|
|
223
|
+
|
|
224
|
+
// Estimate reading time and set inactive when done
|
|
225
|
+
this.scheduleTTSComplete(text);
|
|
218
226
|
}
|
|
219
227
|
|
|
220
228
|
if (isLgPlatform() && window.webOS?.service) {
|
|
@@ -225,23 +233,45 @@ export class TTSManager {
|
|
|
225
233
|
log_debug("There was a failure setting up webOS TTS service", {
|
|
226
234
|
error,
|
|
227
235
|
});
|
|
236
|
+
|
|
237
|
+
this.ttsState$.next(false);
|
|
228
238
|
},
|
|
229
239
|
onSuccess(response: any) {
|
|
230
240
|
log_debug("webOS TTS service is configured successfully", {
|
|
231
241
|
response,
|
|
232
242
|
});
|
|
243
|
+
|
|
244
|
+
// Estimate reading time and set inactive when done
|
|
245
|
+
this.scheduleTTSComplete(text);
|
|
233
246
|
},
|
|
234
247
|
parameters: {
|
|
235
248
|
text,
|
|
249
|
+
clear: true, // Clear any previous speech before speaking new text
|
|
236
250
|
},
|
|
237
251
|
});
|
|
238
252
|
} catch (error) {
|
|
239
253
|
log_debug("webOS TTS service error", { error });
|
|
254
|
+
this.ttsState$.next(false);
|
|
240
255
|
}
|
|
241
256
|
}
|
|
242
257
|
|
|
243
|
-
if (!window.VIZIO?.Chromevox)
|
|
258
|
+
if (!window.VIZIO?.Chromevox) {
|
|
259
|
+
// For platforms without TTS, estimate reading time
|
|
260
|
+
this.scheduleTTSComplete(text);
|
|
261
|
+
|
|
262
|
+
return;
|
|
263
|
+
}
|
|
244
264
|
|
|
245
265
|
window.VIZIO.Chromevox.play(text);
|
|
266
|
+
// Estimate reading time and set inactive when done
|
|
267
|
+
this.scheduleTTSComplete(text);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
private scheduleTTSComplete(text: string) {
|
|
271
|
+
const readingTime = calculateReadingTime(text);
|
|
272
|
+
|
|
273
|
+
setTimeout(() => {
|
|
274
|
+
this.ttsState$.next(false);
|
|
275
|
+
}, readingTime);
|
|
246
276
|
}
|
|
247
277
|
}
|
|
@@ -399,7 +399,7 @@ export const populateConfigurationValues =
|
|
|
399
399
|
flattenAndPopulateFields(fields, configuration, skipDefaults)
|
|
400
400
|
);
|
|
401
401
|
|
|
402
|
-
export const
|
|
402
|
+
export const getAccessibilityProps = (item: ZappEntry) => ({
|
|
403
403
|
accessible: item?.extensions?.accessibility,
|
|
404
404
|
accessibilityLabel: item?.extensions?.accessibility?.label || item?.title,
|
|
405
405
|
accessibilityHint: item?.extensions?.accessibility?.hint,
|
package/index.d.ts
CHANGED
|
@@ -208,7 +208,7 @@ function getPlayerConfiguration({ platform, version }) {
|
|
|
208
208
|
{
|
|
209
209
|
key: "accessibility_forward_label",
|
|
210
210
|
label: "Accessibility forward label",
|
|
211
|
-
initial_value: "
|
|
211
|
+
initial_value: "Fast forward button",
|
|
212
212
|
label_tooltip: "Label for forward button accessibility",
|
|
213
213
|
type: "text_input",
|
|
214
214
|
},
|
|
@@ -292,7 +292,7 @@ function getPlayerConfiguration({ platform, version }) {
|
|
|
292
292
|
{
|
|
293
293
|
key: "accessibility_back_label",
|
|
294
294
|
label: "Accessibility back label",
|
|
295
|
-
initial_value: "
|
|
295
|
+
initial_value: "Exit player button",
|
|
296
296
|
label_tooltip: "Label for back button accessibility",
|
|
297
297
|
type: "text_input",
|
|
298
298
|
},
|
|
@@ -317,6 +317,20 @@ function getPlayerConfiguration({ platform, version }) {
|
|
|
317
317
|
label_tooltip: "Hint for fullscreen button accessibility",
|
|
318
318
|
type: "text_input",
|
|
319
319
|
},
|
|
320
|
+
{
|
|
321
|
+
key: "accessibility_skip_intro_label",
|
|
322
|
+
label: "Accessibility skip intro label",
|
|
323
|
+
initial_value: "Skip intro - button",
|
|
324
|
+
label_tooltip: "Label for skip intro button accessibility",
|
|
325
|
+
type: "text_input",
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
key: "accessibility_skip_intro_hint",
|
|
329
|
+
label: "Accessibility skip intro hint",
|
|
330
|
+
initial_value: "Press to skip intro",
|
|
331
|
+
label_tooltip: "Hint for skip intro button accessibility",
|
|
332
|
+
type: "text_input",
|
|
333
|
+
},
|
|
320
334
|
],
|
|
321
335
|
};
|
|
322
336
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "14.0.0-rc.
|
|
3
|
+
"version": "14.0.0-rc.60",
|
|
4
4
|
"description": "Applicaster Zapp React Native utilities package",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@applicaster/applicaster-types": "14.0.0-rc.
|
|
30
|
+
"@applicaster/applicaster-types": "14.0.0-rc.60",
|
|
31
31
|
"buffer": "^5.2.1",
|
|
32
32
|
"camelize": "^1.0.0",
|
|
33
33
|
"dayjs": "^1.11.10",
|
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
import uuidv4 from "uuid/v4";
|
|
2
|
+
import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
|
|
3
|
+
import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
|
|
4
|
+
import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
|
|
5
|
+
|
|
6
|
+
const { log_debug, log_error } = createLogger({
|
|
7
|
+
subsystem: "Player",
|
|
8
|
+
category: "PlayerTTS",
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
enum SEEK_DIRECTION {
|
|
12
|
+
FORWARD = "forward",
|
|
13
|
+
REWIND = "back",
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const hasPrerollAds = (entry: ZappEntry): boolean => {
|
|
17
|
+
const videoAds = entry?.extensions?.video_ads;
|
|
18
|
+
|
|
19
|
+
if (!videoAds) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// If it's a string (VMAP URL), assume it might have preroll
|
|
24
|
+
if (typeof videoAds === "string") {
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// If it's an array, check for preroll offset
|
|
29
|
+
if (Array.isArray(videoAds)) {
|
|
30
|
+
return videoAds.some(
|
|
31
|
+
(ad: ZappVideoAdExtension) => ad.offset === "preroll" || ad.offset === 0
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return false;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export class PlayerTTS {
|
|
39
|
+
private player: Player;
|
|
40
|
+
private accessibilityManager: AccessibilityManager;
|
|
41
|
+
private seekStartPosition: number | null = null;
|
|
42
|
+
private isSeeking: boolean = false;
|
|
43
|
+
private listenerId: string;
|
|
44
|
+
private isInitialPlayerOpen: boolean = true;
|
|
45
|
+
private isPrerollActive: boolean = false;
|
|
46
|
+
private hasPrerollAds: boolean = false; // Track if preroll ads are expected
|
|
47
|
+
|
|
48
|
+
constructor(player: Player, accessibilityManager: AccessibilityManager) {
|
|
49
|
+
this.player = player;
|
|
50
|
+
this.accessibilityManager = accessibilityManager;
|
|
51
|
+
this.listenerId = `player-tts-${uuidv4()}`;
|
|
52
|
+
this.hasPrerollAds = hasPrerollAds(player.entry);
|
|
53
|
+
|
|
54
|
+
log_debug("PlayerTTS initialized", {
|
|
55
|
+
hasPrerollAds: this.hasPrerollAds,
|
|
56
|
+
listenerId: this.listenerId,
|
|
57
|
+
entryTitle: player.entry.title,
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
private numberToWords(num: number): string {
|
|
62
|
+
const ones = [
|
|
63
|
+
"",
|
|
64
|
+
"one",
|
|
65
|
+
"two",
|
|
66
|
+
"three",
|
|
67
|
+
"four",
|
|
68
|
+
"five",
|
|
69
|
+
"six",
|
|
70
|
+
"seven",
|
|
71
|
+
"eight",
|
|
72
|
+
"nine",
|
|
73
|
+
"ten",
|
|
74
|
+
"eleven",
|
|
75
|
+
"twelve",
|
|
76
|
+
"thirteen",
|
|
77
|
+
"fourteen",
|
|
78
|
+
"fifteen",
|
|
79
|
+
"sixteen",
|
|
80
|
+
"seventeen",
|
|
81
|
+
"eighteen",
|
|
82
|
+
"nineteen",
|
|
83
|
+
];
|
|
84
|
+
|
|
85
|
+
const tens = [
|
|
86
|
+
"",
|
|
87
|
+
"",
|
|
88
|
+
"twenty",
|
|
89
|
+
"thirty",
|
|
90
|
+
"forty",
|
|
91
|
+
"fifty",
|
|
92
|
+
"sixty",
|
|
93
|
+
"seventy",
|
|
94
|
+
"eighty",
|
|
95
|
+
"ninety",
|
|
96
|
+
];
|
|
97
|
+
|
|
98
|
+
if (num === 0) return "zero";
|
|
99
|
+
if (num < 20) return ones[num];
|
|
100
|
+
|
|
101
|
+
const ten = Math.floor(num / 10);
|
|
102
|
+
const one = num % 10;
|
|
103
|
+
|
|
104
|
+
return one === 0 ? tens[ten] : `${tens[ten]} ${ones[one]}`;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
private secondsToTime(
|
|
108
|
+
seconds: number,
|
|
109
|
+
format: "natural" | "standard" = "natural"
|
|
110
|
+
): string {
|
|
111
|
+
if (seconds < 0) return format === "natural" ? "zero" : "0";
|
|
112
|
+
|
|
113
|
+
const minutes = Math.floor(seconds / 60);
|
|
114
|
+
const remainingSeconds = Math.floor(seconds % 60);
|
|
115
|
+
|
|
116
|
+
if (format === "standard") {
|
|
117
|
+
const parts = [];
|
|
118
|
+
|
|
119
|
+
if (minutes > 0) {
|
|
120
|
+
parts.push(`${minutes} minute${minutes !== 1 ? "s" : ""}`);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
if (remainingSeconds > 0) {
|
|
124
|
+
parts.push(
|
|
125
|
+
`${remainingSeconds} second${remainingSeconds !== 1 ? "s" : ""}`
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
return parts.length > 0 ? parts.join(" ") : "0";
|
|
130
|
+
} else {
|
|
131
|
+
if (minutes === 0) {
|
|
132
|
+
if (remainingSeconds === 0) return "zero";
|
|
133
|
+
|
|
134
|
+
if (remainingSeconds < 10) {
|
|
135
|
+
return `zero o ${this.numberToWords(remainingSeconds)}`;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
return `zero ${this.numberToWords(remainingSeconds)}`;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
if (remainingSeconds === 0) {
|
|
142
|
+
return `${this.numberToWords(minutes)}`;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
if (remainingSeconds < 10) {
|
|
146
|
+
return `${this.numberToWords(minutes)} o ${this.numberToWords(remainingSeconds)}`;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
return `${this.numberToWords(minutes)} ${this.numberToWords(remainingSeconds)}`;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
private announcePause = () => {
|
|
154
|
+
if (!this.isSeeking) {
|
|
155
|
+
this.accessibilityManager.addHeading(
|
|
156
|
+
`Paused - ${this.secondsToTime(this.player.playerState.contentPosition, "standard")}`
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
private announceContentStart(
|
|
162
|
+
options: {
|
|
163
|
+
currentTime?: number;
|
|
164
|
+
duration?: number;
|
|
165
|
+
useReadText?: boolean;
|
|
166
|
+
} = {}
|
|
167
|
+
): void {
|
|
168
|
+
const { currentTime, duration, useReadText = false } = options;
|
|
169
|
+
const state = this.player.playerState;
|
|
170
|
+
|
|
171
|
+
const timeRemaining =
|
|
172
|
+
(duration || state?.contentDuration || 0) -
|
|
173
|
+
(currentTime || state?.contentPosition || 0);
|
|
174
|
+
|
|
175
|
+
const title = (this.player.entry.title as string) || "";
|
|
176
|
+
const summary = (this.player.entry.summary as string) || "";
|
|
177
|
+
|
|
178
|
+
log_debug("Announcing content start", {
|
|
179
|
+
title,
|
|
180
|
+
currentTime: currentTime || state?.contentPosition || 0,
|
|
181
|
+
duration: duration || state?.contentDuration || 0,
|
|
182
|
+
timeRemaining,
|
|
183
|
+
useReadText,
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
this.accessibilityManager.addHeading(`Playing - ${title}`);
|
|
187
|
+
if (summary) this.accessibilityManager.addHeading(summary);
|
|
188
|
+
|
|
189
|
+
this.accessibilityManager.addHeading(
|
|
190
|
+
`Playing from ${this.secondsToTime(currentTime || state?.contentPosition || 0, "standard")}`
|
|
191
|
+
);
|
|
192
|
+
|
|
193
|
+
const remainingText = `${this.secondsToTime(Math.max(0, Math.floor(timeRemaining)), "standard")} remaining.`;
|
|
194
|
+
|
|
195
|
+
if (useReadText) {
|
|
196
|
+
this.accessibilityManager.readText({ text: remainingText });
|
|
197
|
+
} else {
|
|
198
|
+
this.accessibilityManager.addHeading(remainingText);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
this.accessibilityManager.setInitialPlayerAnnouncementReady();
|
|
202
|
+
this.isInitialPlayerOpen = false;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
private announceBufferComplete = (event: any) => {
|
|
206
|
+
// If preroll ads are expected, wait for them to finish before announcing content
|
|
207
|
+
if (this.hasPrerollAds && this.isInitialPlayerOpen) {
|
|
208
|
+
log_debug("Waiting for preroll ads to finish", {
|
|
209
|
+
hasPrerollAds: this.hasPrerollAds,
|
|
210
|
+
isInitialPlayerOpen: this.isInitialPlayerOpen,
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
// Gate content announcement until preroll finishes
|
|
217
|
+
if (this.isInitialPlayerOpen && !this.isPrerollActive) {
|
|
218
|
+
log_debug("Buffer complete - announcing content", {
|
|
219
|
+
currentTime: event.currentTime,
|
|
220
|
+
duration: event.duration,
|
|
221
|
+
isPrerollActive: this.isPrerollActive,
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
this.announceContentStart({
|
|
225
|
+
currentTime: event.currentTime,
|
|
226
|
+
duration: event.duration,
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
private announceResume = () => {
|
|
232
|
+
if (!this.isSeeking && !this.isInitialPlayerOpen) {
|
|
233
|
+
log_debug("Player resumed", {
|
|
234
|
+
contentPosition: this.player.playerState.contentPosition,
|
|
235
|
+
isSeeking: this.isSeeking,
|
|
236
|
+
isInitialPlayerOpen: this.isInitialPlayerOpen,
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
this.accessibilityManager.addHeading(
|
|
240
|
+
`Playing - ${this.secondsToTime(this.player.playerState.contentPosition, "standard")}`
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
private handleVideoProgress = (event: any) => {
|
|
246
|
+
if (event.currentTime > 0) {
|
|
247
|
+
this.seekStartPosition = event.currentTime;
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
private handleSeekComplete = (event: any) => {
|
|
252
|
+
if (this.seekStartPosition !== null) {
|
|
253
|
+
const seekDirection =
|
|
254
|
+
event.currentTime > this.seekStartPosition
|
|
255
|
+
? SEEK_DIRECTION.FORWARD
|
|
256
|
+
: SEEK_DIRECTION.REWIND;
|
|
257
|
+
|
|
258
|
+
const seekAmount = Math.round(
|
|
259
|
+
Math.abs(event.currentTime - this.seekStartPosition)
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
log_debug("Seek completed", {
|
|
263
|
+
seekDirection,
|
|
264
|
+
seekAmount,
|
|
265
|
+
fromPosition: this.seekStartPosition,
|
|
266
|
+
toPosition: event.currentTime,
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
this.accessibilityManager.readText({
|
|
270
|
+
text: `Skipped ${seekDirection} ${this.secondsToTime(seekAmount, "standard")}`,
|
|
271
|
+
});
|
|
272
|
+
|
|
273
|
+
this.seekStartPosition = event.currentTime;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
this.isSeeking = false;
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
private handleSeekStart = () => {
|
|
280
|
+
log_debug("Seek started");
|
|
281
|
+
this.isSeeking = true;
|
|
282
|
+
};
|
|
283
|
+
|
|
284
|
+
private handlePlayerClose = () => {
|
|
285
|
+
log_debug("Player closed - resetting state");
|
|
286
|
+
this.isInitialPlayerOpen = true;
|
|
287
|
+
this.accessibilityManager.resetInitialPlayerAnnouncementReady();
|
|
288
|
+
};
|
|
289
|
+
|
|
290
|
+
private announceAdBegin = (event: any) => {
|
|
291
|
+
this.isPrerollActive = true;
|
|
292
|
+
|
|
293
|
+
log_debug("Ad started", {
|
|
294
|
+
adDuration: event?.ad?.data?.duration,
|
|
295
|
+
isPrerollActive: this.isPrerollActive,
|
|
296
|
+
});
|
|
297
|
+
|
|
298
|
+
if (event?.ad?.data?.duration) {
|
|
299
|
+
this.accessibilityManager.readText({
|
|
300
|
+
text: `Sponsored. Ends in ${this.secondsToTime(event.ad.data.duration, "standard")}`,
|
|
301
|
+
});
|
|
302
|
+
}
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
private handleAdEnd = (_event: any) => {
|
|
306
|
+
this.isPrerollActive = false;
|
|
307
|
+
|
|
308
|
+
log_debug("Ad ended", {
|
|
309
|
+
isPrerollActive: this.isPrerollActive,
|
|
310
|
+
isInitialPlayerOpen: this.isInitialPlayerOpen,
|
|
311
|
+
});
|
|
312
|
+
|
|
313
|
+
// If initial entry still pending, trigger content announcement using latest player state
|
|
314
|
+
if (this.isInitialPlayerOpen) {
|
|
315
|
+
this.announceContentStart({ useReadText: true });
|
|
316
|
+
}
|
|
317
|
+
};
|
|
318
|
+
|
|
319
|
+
public init(): () => void {
|
|
320
|
+
if (!this.player) {
|
|
321
|
+
log_error("Failed to initialize PlayerTTS - no player provided");
|
|
322
|
+
|
|
323
|
+
return () => {};
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
log_debug("Initializing PlayerTTS listeners", {
|
|
327
|
+
listenerId: this.listenerId,
|
|
328
|
+
});
|
|
329
|
+
|
|
330
|
+
return this.player.addListener({
|
|
331
|
+
id: this.listenerId,
|
|
332
|
+
listener: {
|
|
333
|
+
onBufferComplete: this.announceBufferComplete,
|
|
334
|
+
onPlayerResume: this.announceResume,
|
|
335
|
+
onPlayerPause: this.announcePause,
|
|
336
|
+
onVideoProgress: this.handleVideoProgress,
|
|
337
|
+
onPlayerSeekStart: this.handleSeekStart,
|
|
338
|
+
onPlayerSeekComplete: this.handleSeekComplete,
|
|
339
|
+
onPlayerClose: this.handlePlayerClose,
|
|
340
|
+
onAdBegin: this.announceAdBegin,
|
|
341
|
+
onAdEnd: this.handleAdEnd,
|
|
342
|
+
onAdBreakEnd: this.handleAdEnd,
|
|
343
|
+
},
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
public destroy(): void {
|
|
348
|
+
log_debug("Destroying PlayerTTS", {
|
|
349
|
+
listenerId: this.listenerId,
|
|
350
|
+
});
|
|
351
|
+
|
|
352
|
+
if (this.player) {
|
|
353
|
+
this.player.removeListener(this.listenerId);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
this.seekStartPosition = null;
|
|
357
|
+
this.handlePlayerClose();
|
|
358
|
+
}
|
|
359
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PlayerTTS } from "./PlayerTTS";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
|
|
3
|
+
import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
|
|
4
|
+
import { PlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/PlayerTTS";
|
|
5
|
+
|
|
6
|
+
export const usePlayerTTS = () => {
|
|
7
|
+
const player = usePlayer();
|
|
8
|
+
const accessibilityManager = useAccessibilityManager({});
|
|
9
|
+
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
if (player && accessibilityManager) {
|
|
12
|
+
const playerTTS = new PlayerTTS(player, accessibilityManager);
|
|
13
|
+
const unsubscribe = playerTTS.init();
|
|
14
|
+
|
|
15
|
+
return () => {
|
|
16
|
+
unsubscribe();
|
|
17
|
+
playerTTS.destroy();
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
}, [player, accessibilityManager]);
|
|
21
|
+
};
|