@applicaster/zapp-react-native-utils 14.0.3-rc.0 → 14.0.3
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/hooks.ts +20 -13
- package/appUtils/accessibilityManager/index.ts +28 -1
- package/appUtils/accessibilityManager/utils.ts +33 -3
- package/appUtils/platform/platformUtils.ts +114 -15
- package/cellUtils/index.ts +32 -0
- package/package.json +2 -2
- package/playerUtils/usePlayerTTS.ts +8 -3
|
@@ -23,19 +23,6 @@ export const useAccessibilityManager = (
|
|
|
23
23
|
}
|
|
24
24
|
}, [pluginConfiguration, accessibilityManager]);
|
|
25
25
|
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
const subscription = accessibilityManager.getStateAsObservable().subscribe({
|
|
28
|
-
next: () => {
|
|
29
|
-
// TODO: handle accessibility states
|
|
30
|
-
// screenReaderEnabled: false
|
|
31
|
-
// reduceMotionEnabled: false
|
|
32
|
-
// boldTextEnabled: false
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
return () => subscription.unsubscribe();
|
|
37
|
-
}, [accessibilityManager]);
|
|
38
|
-
|
|
39
26
|
return accessibilityManager;
|
|
40
27
|
};
|
|
41
28
|
|
|
@@ -72,3 +59,23 @@ export const useAnnouncementActive = (
|
|
|
72
59
|
|
|
73
60
|
return isActive;
|
|
74
61
|
};
|
|
62
|
+
|
|
63
|
+
export const useAccessibilityState = (
|
|
64
|
+
pluginConfiguration: Record<string, any> = {}
|
|
65
|
+
) => {
|
|
66
|
+
const accessibilityManager = useAccessibilityManager(pluginConfiguration);
|
|
67
|
+
|
|
68
|
+
const [state, setState] = useState<AccessibilityState>(
|
|
69
|
+
accessibilityManager.getState()
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const subscription = accessibilityManager
|
|
74
|
+
.getStateAsObservable()
|
|
75
|
+
.subscribe(setState);
|
|
76
|
+
|
|
77
|
+
return () => subscription.unsubscribe();
|
|
78
|
+
}, [accessibilityManager]);
|
|
79
|
+
|
|
80
|
+
return state;
|
|
81
|
+
};
|
|
@@ -36,7 +36,20 @@ export class AccessibilityManager {
|
|
|
36
36
|
false
|
|
37
37
|
);
|
|
38
38
|
|
|
39
|
-
private constructor() {
|
|
39
|
+
private constructor() {
|
|
40
|
+
this.ttsManager
|
|
41
|
+
.getScreenReaderEnabledAsObservable()
|
|
42
|
+
.subscribe((enabled) => {
|
|
43
|
+
const state = this.state$.getValue();
|
|
44
|
+
|
|
45
|
+
if (state.screenReaderEnabled !== enabled) {
|
|
46
|
+
this.state$.next({
|
|
47
|
+
...state,
|
|
48
|
+
screenReaderEnabled: enabled,
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
40
53
|
|
|
41
54
|
public static getInstance(): AccessibilityManager {
|
|
42
55
|
if (!AccessibilityManager._instance) {
|
|
@@ -92,8 +105,15 @@ export class AccessibilityManager {
|
|
|
92
105
|
/**
|
|
93
106
|
* Adds a heading to the queue, headings will be read before the next text
|
|
94
107
|
* Each heading will be read once and removed from the queue
|
|
108
|
+
* Does nothing if screen reader is not enabled
|
|
95
109
|
*/
|
|
96
110
|
public addHeading(heading: string) {
|
|
111
|
+
const state = this.state$.getValue();
|
|
112
|
+
|
|
113
|
+
if (!state.screenReaderEnabled) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
|
|
97
117
|
if (!this.pendingFocusId) {
|
|
98
118
|
this.pendingFocusId = Date.now().toString();
|
|
99
119
|
}
|
|
@@ -108,6 +128,7 @@ export class AccessibilityManager {
|
|
|
108
128
|
*
|
|
109
129
|
* Implements a delay mechanism to reduce noise during rapid navigation.
|
|
110
130
|
* Only the most recent announcement will be read after the delay period.
|
|
131
|
+
* Does nothing if screen reader is not enabled
|
|
111
132
|
*/
|
|
112
133
|
public readText({
|
|
113
134
|
text,
|
|
@@ -116,6 +137,12 @@ export class AccessibilityManager {
|
|
|
116
137
|
text: string;
|
|
117
138
|
keyOfLocalizedText?: string;
|
|
118
139
|
}) {
|
|
140
|
+
const state = this.state$.getValue();
|
|
141
|
+
|
|
142
|
+
if (!state.screenReaderEnabled) {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
|
|
119
146
|
let textToRead = text;
|
|
120
147
|
|
|
121
148
|
if (keyOfLocalizedText) {
|
|
@@ -35,12 +35,42 @@ export function calculateReadingTime(
|
|
|
35
35
|
return 0;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
// Count words (split on whitespace and punctuation, keep alnum boundaries)
|
|
38
39
|
const words = trimmed
|
|
39
40
|
.split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
|
|
40
41
|
.filter(Boolean).length;
|
|
41
42
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
// Count spaces - multiple consecutive spaces add extra pause time
|
|
44
|
+
const spaceMatches: string[] = trimmed.match(/\s+/g) || [];
|
|
45
|
+
|
|
46
|
+
const totalSpaces = spaceMatches.reduce(
|
|
47
|
+
(sum: number, match: string) => sum + match.length,
|
|
48
|
+
0
|
|
45
49
|
);
|
|
50
|
+
|
|
51
|
+
const extraSpaces = Math.max(0, totalSpaces - (words - 1)); // words-1 is normal spacing
|
|
52
|
+
|
|
53
|
+
// Heuristic: punctuation increases TTS duration beyond word-based WPM.
|
|
54
|
+
// Commas typically introduce short pauses, sentence terminators longer ones.
|
|
55
|
+
const commaCount = (trimmed.match(/,/g) || []).length;
|
|
56
|
+
const semicolonCount = (trimmed.match(/;/g) || []).length;
|
|
57
|
+
const colonCount = (trimmed.match(/:/g) || []).length;
|
|
58
|
+
const dashCount = (trimmed.match(/\u2013|\u2014|-/g) || []).length; // – — -
|
|
59
|
+
const sentenceEndCount = (trimmed.match(/[.!?](?!\d)/g) || []).length;
|
|
60
|
+
|
|
61
|
+
const commaPauseMs = 220; // short prosody pause for ","
|
|
62
|
+
const midPauseMs = 260; // for ";", ":", dashes
|
|
63
|
+
const sentenceEndPauseMs = 420; // for ".", "!", "?"
|
|
64
|
+
const extraSpacePauseMs = 50; // per extra space beyond normal spacing
|
|
65
|
+
|
|
66
|
+
const punctuationPause =
|
|
67
|
+
commaCount * commaPauseMs +
|
|
68
|
+
(semicolonCount + colonCount + dashCount) * midPauseMs +
|
|
69
|
+
sentenceEndCount * sentenceEndPauseMs +
|
|
70
|
+
extraSpaces * extraSpacePauseMs;
|
|
71
|
+
|
|
72
|
+
const baseByWordsMs = (words / wordsPerMinute) * 60 * 1000;
|
|
73
|
+
const estimatedMs = Math.max(minimumPause, baseByWordsMs + punctuationPause);
|
|
74
|
+
|
|
75
|
+
return estimatedMs + announcementDelay;
|
|
46
76
|
}
|
|
@@ -170,7 +170,9 @@ export const getClosedCaptionState = () => {
|
|
|
170
170
|
*/
|
|
171
171
|
export class TTSManager {
|
|
172
172
|
private ttsState$ = new BehaviorSubject<boolean>(false);
|
|
173
|
+
private screenReaderEnabled$ = new BehaviorSubject<boolean>(false);
|
|
173
174
|
private static ttsManagerInstance: TTSManager;
|
|
175
|
+
private samsungListenerId: number | null = null;
|
|
174
176
|
|
|
175
177
|
private constructor() {
|
|
176
178
|
this.initialize();
|
|
@@ -185,23 +187,116 @@ export class TTSManager {
|
|
|
185
187
|
}
|
|
186
188
|
|
|
187
189
|
async initialize() {
|
|
188
|
-
if (
|
|
190
|
+
if (isVizioPlatform()) {
|
|
191
|
+
document.addEventListener(
|
|
192
|
+
"VIZIO_TTS_ENABLED",
|
|
193
|
+
() => {
|
|
194
|
+
log_debug("Vizio screen reader enabled");
|
|
195
|
+
this.screenReaderEnabled$.next(true);
|
|
196
|
+
},
|
|
197
|
+
false
|
|
198
|
+
);
|
|
189
199
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
200
|
+
document.addEventListener(
|
|
201
|
+
"VIZIO_TTS_DISABLED",
|
|
202
|
+
() => {
|
|
203
|
+
log_debug("Vizio screen reader disabled");
|
|
204
|
+
this.screenReaderEnabled$.next(false);
|
|
205
|
+
},
|
|
206
|
+
false
|
|
207
|
+
);
|
|
208
|
+
}
|
|
197
209
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
210
|
+
if (isLgPlatform() && window.webOS?.service) {
|
|
211
|
+
try {
|
|
212
|
+
// https://webostv.developer.lge.com/develop/references/settings-service
|
|
213
|
+
window.webOS.service.request("luna://com.webos.settingsservice", {
|
|
214
|
+
method: "getSystemSettings",
|
|
215
|
+
parameters: {
|
|
216
|
+
category: "option",
|
|
217
|
+
keys: ["audioGuidance"],
|
|
218
|
+
subscribe: true, // Request a subscription to changes
|
|
219
|
+
},
|
|
220
|
+
onSuccess: (response: any) => {
|
|
221
|
+
const isEnabled = response?.settings?.audioGuidance === "on";
|
|
222
|
+
|
|
223
|
+
log_debug("LG Audio Guidance status changed", {
|
|
224
|
+
isEnabled,
|
|
225
|
+
response,
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
this.screenReaderEnabled$.next(isEnabled);
|
|
229
|
+
},
|
|
230
|
+
onFailure: (error: any) => {
|
|
231
|
+
log_debug("webOS settings subscription failed", { error });
|
|
232
|
+
this.screenReaderEnabled$.next(false);
|
|
233
|
+
},
|
|
234
|
+
});
|
|
235
|
+
} catch (error) {
|
|
236
|
+
log_debug("webOS settings service request error", { error });
|
|
237
|
+
// Fallback to false if the service is not available
|
|
238
|
+
this.screenReaderEnabled$.next(false);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
if (isSamsungPlatform() && typeof window.webapis !== "undefined") {
|
|
243
|
+
try {
|
|
244
|
+
if (
|
|
245
|
+
window.webapis?.tvinfo &&
|
|
246
|
+
typeof window.webapis.tvinfo.getMenuValue === "function" &&
|
|
247
|
+
typeof window.webapis.tvinfo.addCaptionChangeListener === "function"
|
|
248
|
+
) {
|
|
249
|
+
// Get initial Voice Guide status
|
|
250
|
+
const initialStatus = window.webapis.tvinfo.getMenuValue(
|
|
251
|
+
window.webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY
|
|
252
|
+
);
|
|
253
|
+
|
|
254
|
+
const isEnabled =
|
|
255
|
+
initialStatus === window.webapis.tvinfo.TvInfoMenuValue.ON;
|
|
256
|
+
|
|
257
|
+
log_debug("Samsung Voice Guide initial status", {
|
|
258
|
+
isEnabled,
|
|
259
|
+
initialStatus,
|
|
260
|
+
});
|
|
261
|
+
|
|
262
|
+
this.screenReaderEnabled$.next(isEnabled);
|
|
263
|
+
|
|
264
|
+
// Listen for Voice Guide status changes
|
|
265
|
+
const onChange = () => {
|
|
266
|
+
const currentStatus = window.webapis.tvinfo.getMenuValue(
|
|
267
|
+
window.webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY
|
|
268
|
+
);
|
|
269
|
+
|
|
270
|
+
const enabled =
|
|
271
|
+
currentStatus === window.webapis.tvinfo.TvInfoMenuValue.ON;
|
|
272
|
+
|
|
273
|
+
log_debug("Samsung Voice Guide status changed", {
|
|
274
|
+
enabled,
|
|
275
|
+
currentStatus,
|
|
276
|
+
});
|
|
277
|
+
|
|
278
|
+
this.screenReaderEnabled$.next(enabled);
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
this.samsungListenerId =
|
|
282
|
+
window.webapis.tvinfo.addCaptionChangeListener(
|
|
283
|
+
window.webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY,
|
|
284
|
+
onChange
|
|
285
|
+
);
|
|
286
|
+
|
|
287
|
+
log_debug("Samsung Voice Guide listener registered", {
|
|
288
|
+
listenerId: this.samsungListenerId,
|
|
289
|
+
});
|
|
290
|
+
} else {
|
|
291
|
+
log_debug("Samsung TvInfo API not available");
|
|
292
|
+
this.screenReaderEnabled$.next(false);
|
|
293
|
+
}
|
|
294
|
+
} catch (error) {
|
|
295
|
+
log_debug("Samsung Voice Guide listener error", { error });
|
|
296
|
+
// Fallback to false if the service is not available
|
|
297
|
+
this.screenReaderEnabled$.next(false);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
205
300
|
}
|
|
206
301
|
|
|
207
302
|
getCurrentState(): boolean {
|
|
@@ -212,6 +307,10 @@ export class TTSManager {
|
|
|
212
307
|
return this.ttsState$.asObservable();
|
|
213
308
|
}
|
|
214
309
|
|
|
310
|
+
getScreenReaderEnabledAsObservable() {
|
|
311
|
+
return this.screenReaderEnabled$.asObservable();
|
|
312
|
+
}
|
|
313
|
+
|
|
215
314
|
readText(text: string) {
|
|
216
315
|
this.ttsState$.next(true);
|
|
217
316
|
|
package/cellUtils/index.ts
CHANGED
|
@@ -505,3 +505,35 @@ export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
|
|
|
505
505
|
marginRight: value("image_margin_right"),
|
|
506
506
|
};
|
|
507
507
|
};
|
|
508
|
+
|
|
509
|
+
export const isTextLabel = (key: string): boolean =>
|
|
510
|
+
key.includes("text_label_") && key.endsWith("_switch");
|
|
511
|
+
|
|
512
|
+
export const hasTextLabelsEnabled = (
|
|
513
|
+
configuration: Record<string, any>
|
|
514
|
+
): boolean => {
|
|
515
|
+
const textLabelsKeys = Object.keys(configuration).filter(isTextLabel);
|
|
516
|
+
|
|
517
|
+
const picked = textLabelsKeys.reduce(
|
|
518
|
+
(acc, key) => {
|
|
519
|
+
acc[key] = configuration[key];
|
|
520
|
+
|
|
521
|
+
return acc;
|
|
522
|
+
},
|
|
523
|
+
{} as Record<string, any>
|
|
524
|
+
);
|
|
525
|
+
|
|
526
|
+
const pickedValues = Object.values(picked);
|
|
527
|
+
|
|
528
|
+
return pickedValues.some((value) => {
|
|
529
|
+
if (typeof value === "boolean") {
|
|
530
|
+
return value === true;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
if (typeof value === "string") {
|
|
534
|
+
return value !== "" && value.toLowerCase() !== "false";
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
return Boolean(value);
|
|
538
|
+
});
|
|
539
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-utils",
|
|
3
|
-
"version": "14.0.3
|
|
3
|
+
"version": "14.0.3",
|
|
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.3
|
|
30
|
+
"@applicaster/applicaster-types": "14.0.3",
|
|
31
31
|
"buffer": "^5.2.1",
|
|
32
32
|
"camelize": "^1.0.0",
|
|
33
33
|
"dayjs": "^1.11.10",
|
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
useAccessibilityManager,
|
|
5
|
+
useAccessibilityState,
|
|
6
|
+
} from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
|
|
4
7
|
import { PlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/PlayerTTS";
|
|
5
8
|
|
|
6
9
|
export const usePlayerTTS = () => {
|
|
7
10
|
const player = usePlayer();
|
|
8
11
|
const accessibilityManager = useAccessibilityManager({});
|
|
12
|
+
const accessibilityState = useAccessibilityState();
|
|
13
|
+
const isScreenReaderEnabled = accessibilityState.screenReaderEnabled;
|
|
9
14
|
|
|
10
15
|
React.useEffect(() => {
|
|
11
|
-
if (player && accessibilityManager) {
|
|
16
|
+
if (player && accessibilityManager && isScreenReaderEnabled) {
|
|
12
17
|
const playerTTS = new PlayerTTS(player, accessibilityManager);
|
|
13
18
|
const unsubscribe = playerTTS.init();
|
|
14
19
|
|
|
@@ -17,5 +22,5 @@ export const usePlayerTTS = () => {
|
|
|
17
22
|
playerTTS.destroy();
|
|
18
23
|
};
|
|
19
24
|
}
|
|
20
|
-
}, [player, accessibilityManager]);
|
|
25
|
+
}, [player, accessibilityManager, isScreenReaderEnabled]);
|
|
21
26
|
};
|