@applicaster/zapp-react-native-utils 13.0.9-rc.3 → 13.0.10-alpha.9045951059
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/analyticsUtils/playerAnalyticsTracker.ts +2 -1
- package/appUtils/accessibilityManager/const.ts +13 -0
- package/appUtils/accessibilityManager/hooks.ts +35 -1
- package/appUtils/accessibilityManager/index.ts +149 -28
- package/appUtils/accessibilityManager/utils.ts +24 -0
- package/appUtils/platform/platformUtils.ts +31 -1
- package/index.d.ts +4 -1
- 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
|
@@ -105,7 +105,8 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
|
|
|
105
105
|
return this.getDateTimestamp();
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
this.mediaTime =
|
|
108
|
+
this.mediaTime =
|
|
109
|
+
this.playerState?.contentPosition || eventData?.currentTime;
|
|
109
110
|
|
|
110
111
|
return this.mediaTime;
|
|
111
112
|
}
|
|
@@ -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/platformUtils";
|
|
4
5
|
import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
|
|
6
|
+
import { calculateReadingTime } from "./utils";
|
|
5
7
|
import { AccessibilityRole } from "react-native";
|
|
6
8
|
import _ from "lodash";
|
|
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
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
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: "text" as AccessibilityRole,
|
|
270
|
+
"aria-role": "text",
|
|
271
|
+
role: "text",
|
|
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
|
}
|
package/index.d.ts
CHANGED
|
@@ -69,7 +69,7 @@ declare type ExtraProps = ZappUIComponentProps & {
|
|
|
69
69
|
};
|
|
70
70
|
|
|
71
71
|
declare type WebConfirmationDialog = {
|
|
72
|
-
message
|
|
72
|
+
message?: string;
|
|
73
73
|
confirmCompletion?: () => void;
|
|
74
74
|
cancelCompletion?: () => void;
|
|
75
75
|
};
|
|
@@ -139,10 +139,13 @@ declare type AccessibilityState = {
|
|
|
139
139
|
};
|
|
140
140
|
|
|
141
141
|
declare type AccessibilityProps = {
|
|
142
|
+
accessible?: boolean;
|
|
142
143
|
accessibilityLabel?: string;
|
|
143
144
|
accessibilityHint?: string;
|
|
144
145
|
"aria-label"?: string;
|
|
145
146
|
"aria-description"?: string;
|
|
146
147
|
accessibilityRole?: string;
|
|
147
148
|
"aria-role"?: string;
|
|
149
|
+
role?: string;
|
|
150
|
+
tabindex?: number;
|
|
148
151
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.10-alpha.9045951059",
|
|
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": "13.0.
|
|
30
|
+
"@applicaster/applicaster-types": "13.0.10-alpha.9045951059",
|
|
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
|
+
};
|