@applicaster/zapp-react-native-utils 15.0.0-rc.39 → 15.0.0-rc.40

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.
@@ -31,6 +31,10 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
31
31
  hint: "accessibility_close_mini_hint",
32
32
  },
33
33
  },
34
+ back_to_live: {
35
+ label: "back_to_live_label",
36
+ hint: "",
37
+ },
34
38
  maximize: {
35
39
  label: "accessibility_maximize_label",
36
40
  hint: "accessibility_maximize_hint",
@@ -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) {
@@ -12,13 +12,44 @@ export function calculateReadingTime(
12
12
  minimumPause: number = 500,
13
13
  announcementDelay: number = 700
14
14
  ): number {
15
- const words = text
16
- .trim()
15
+ const trimmed = text.trim();
16
+
17
+ // Count words (split on whitespace and punctuation, keep alnum boundaries)
18
+ const words = trimmed
17
19
  .split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
18
20
  .filter(Boolean).length;
19
21
 
20
- return (
21
- Math.max(minimumPause, (words / wordsPerMinute) * 60 * 1000) +
22
- announcementDelay
22
+ // Count spaces - multiple consecutive spaces add extra pause time
23
+ const spaceMatches: string[] = trimmed.match(/\s+/g) || [];
24
+
25
+ const totalSpaces = spaceMatches.reduce(
26
+ (sum: number, match: string) => sum + match.length,
27
+ 0
23
28
  );
29
+
30
+ const extraSpaces = Math.max(0, totalSpaces - (words - 1)); // words-1 is normal spacing
31
+
32
+ // Heuristic: punctuation increases TTS duration beyond word-based WPM.
33
+ // Commas typically introduce short pauses, sentence terminators longer ones.
34
+ const commaCount = (trimmed.match(/,/g) || []).length;
35
+ const semicolonCount = (trimmed.match(/;/g) || []).length;
36
+ const colonCount = (trimmed.match(/:/g) || []).length;
37
+ const dashCount = (trimmed.match(/\u2013|\u2014|-/g) || []).length; // – — -
38
+ const sentenceEndCount = (trimmed.match(/[.!?](?!\d)/g) || []).length;
39
+
40
+ const commaPauseMs = 220; // short prosody pause for ","
41
+ const midPauseMs = 260; // for ";", ":", dashes
42
+ const sentenceEndPauseMs = 420; // for ".", "!", "?"
43
+ const extraSpacePauseMs = 50; // per extra space beyond normal spacing
44
+
45
+ const punctuationPause =
46
+ commaCount * commaPauseMs +
47
+ (semicolonCount + colonCount + dashCount) * midPauseMs +
48
+ sentenceEndCount * sentenceEndPauseMs +
49
+ extraSpaces * extraSpacePauseMs;
50
+
51
+ const baseByWordsMs = (words / wordsPerMinute) * 60 * 1000;
52
+ const estimatedMs = Math.max(minimumPause, baseByWordsMs + punctuationPause);
53
+
54
+ return estimatedMs + announcementDelay;
24
55
  }
@@ -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 (!isVizioPlatform()) return;
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
- document.addEventListener(
191
- "VIZIO_TTS_ENABLED",
192
- () => {
193
- this.ttsState$.next(true);
194
- },
195
- false
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
- document.addEventListener(
199
- "VIZIO_TTS_DISABLED",
200
- () => {
201
- this.ttsState$.next(false);
202
- },
203
- false
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
 
@@ -250,6 +250,10 @@ export class Player {
250
250
  return false;
251
251
  }
252
252
 
253
+ if (!Number.isFinite(duration)) {
254
+ return this.getSeekableDuration() > 0;
255
+ }
256
+
253
257
  return duration > 0;
254
258
  };
255
259
 
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { Player } from "./player";
3
3
  import { usePlayer } from "./usePlayer";
4
4
 
5
- type PlayerState = {
5
+ export type PlayerState = {
6
6
  currentTime: number;
7
7
  duration: number;
8
8
  seekableDuration: number;
@@ -10,6 +10,8 @@ type PlayerState = {
10
10
  isPaused: boolean;
11
11
  isBuffering: boolean;
12
12
  isReadyToPlay: boolean;
13
+ trackState?: QuickBrickPlayer.TracksState;
14
+ isAd: boolean;
13
15
  };
14
16
 
15
17
  export const usePlayerState = (
@@ -24,6 +26,8 @@ export const usePlayerState = (
24
26
  isPaused: null,
25
27
  isBuffering: false,
26
28
  isReadyToPlay: false,
29
+ trackState: null,
30
+ isAd: false,
27
31
  });
28
32
 
29
33
  const player: Player = usePlayer(playerId);
@@ -37,6 +41,8 @@ export const usePlayerState = (
37
41
  isPaused: player.isPaused(),
38
42
  isBuffering: player.isBuffering(),
39
43
  isReadyToPlay: player.isReadyToPlay(),
44
+ trackState: player.getTracksState(),
45
+ isAd: player.isAd(),
40
46
  });
41
47
  }, [player]);
42
48
 
@@ -54,10 +60,16 @@ export const usePlayerState = (
54
60
  onPlayerPause: onPlayerChangeState,
55
61
  onPlayerResume: onPlayerChangeState,
56
62
  onPlayerSeekComplete: onPlayerChangeState,
63
+ onTracksChanged: onPlayerChangeState,
64
+ onAdBreakBegin: onPlayerChangeState,
65
+ onAdBreakEnd: onPlayerChangeState,
66
+ onAdBegin: onPlayerChangeState,
67
+ onAdEnd: onPlayerChangeState,
68
+ onAdError: onPlayerChangeState,
57
69
  },
58
70
  });
59
71
  }
60
- }, [player]);
72
+ }, [listenerId, onPlayerChangeState, player]);
61
73
 
62
74
  return state;
63
75
  };
@@ -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
+ };
@@ -335,6 +335,20 @@ function getPlayerConfiguration({ platform, version }) {
335
335
  };
336
336
 
337
337
  if (isTV(platform)) {
338
+ localizations.fields.push({
339
+ key: "back_to_live_label",
340
+ label: "Back to live label",
341
+ initial_value: "Back To Live",
342
+ type: "text_input",
343
+ });
344
+
345
+ localizations.fields.push({
346
+ key: "start_over_label",
347
+ label: "Start over label",
348
+ initial_value: "Start Over",
349
+ type: "text_input",
350
+ });
351
+
338
352
  styles.fields.push(
339
353
  fieldsGroup("Always Show Scrub Bar & Timestamp", "", [
340
354
  {
@@ -447,7 +461,7 @@ function getPlayerConfiguration({ platform, version }) {
447
461
  ),
448
462
  fieldsGroup(
449
463
  "Skip Button",
450
- "This section allows you to configure the skip button styles for tv",
464
+ "This section allows you to configure the skip button behaviour",
451
465
  [
452
466
  {
453
467
  type: "switch",
@@ -464,6 +478,12 @@ function getPlayerConfiguration({ platform, version }) {
464
478
  label: "Persistent Button Toggle",
465
479
  initial_value: true,
466
480
  },
481
+ ]
482
+ ),
483
+ fieldsGroup(
484
+ "Labeled Button Style",
485
+ "This section allows you to configure the labeled button styles",
486
+ [
467
487
  {
468
488
  type: "color_picker_rgba",
469
489
  label_tooltip: "",
@@ -619,6 +639,44 @@ function getPlayerConfiguration({ platform, version }) {
619
639
  );
620
640
  }
621
641
 
642
+ if (isTV(platform)) {
643
+ general.fields.push(
644
+ {
645
+ key: "liveSeekingEnabled",
646
+ label: "Live Seeking Enabled",
647
+ initial_value: false,
648
+ type: "switch",
649
+ label_tooltip: "Enable Live Seek",
650
+ },
651
+ {
652
+ key: "minimumAllowedSeekableDurationInSeconds",
653
+ label: "Minimum allowed seekable duration in seconds",
654
+ initial_value: 300,
655
+ type: "number_input",
656
+ label_tooltip:
657
+ "If duration less than this value, player will disable 'liveSeekingEnabled' value",
658
+ },
659
+ {
660
+ key: "live_image",
661
+ label: "Live badge",
662
+ type: "uploader",
663
+ label_tooltip: "Override default live badge / icon",
664
+ },
665
+ {
666
+ key: "live_width",
667
+ label: "Live badge width",
668
+ type: "number_input",
669
+ initial_value: 85,
670
+ },
671
+ {
672
+ key: "live_height",
673
+ label: "Live badge height",
674
+ type: "number_input",
675
+ initial_value: 50,
676
+ }
677
+ );
678
+ }
679
+
622
680
  if (isMobile(platform)) {
623
681
  general.fields.push(
624
682
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-utils",
3
- "version": "15.0.0-rc.39",
3
+ "version": "15.0.0-rc.40",
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": "15.0.0-rc.39",
30
+ "@applicaster/applicaster-types": "15.0.0-rc.40",
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 { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
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
  };
@@ -147,17 +147,34 @@ export class TVSeekController
147
147
 
148
148
  let targetPos = currentPos;
149
149
 
150
- if (this.currentSeekType === SEEK_TYPE.FORWARD) {
151
- targetPos = Math.min(
152
- currentPos + offset,
153
- this.playerController.getSeekableDuration()
154
- );
155
- } else if (this.currentSeekType === SEEK_TYPE.REWIND) {
156
- targetPos = Math.max(0, currentPos - offset);
150
+ const isLive = this.playerController.isLive();
151
+
152
+ if (isLive) {
153
+ if (this.currentSeekType === SEEK_TYPE.REWIND) {
154
+ targetPos = Math.min(
155
+ currentPos + offset,
156
+ this.playerController.getSeekableDuration()
157
+ );
158
+ } else if (this.currentSeekType === SEEK_TYPE.FORWARD) {
159
+ targetPos = Math.max(0, currentPos - offset);
160
+ } else {
161
+ log_warning(
162
+ `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
163
+ );
164
+ }
157
165
  } else {
158
- log_warning(
159
- `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
160
- );
166
+ if (this.currentSeekType === SEEK_TYPE.FORWARD) {
167
+ targetPos = Math.min(
168
+ currentPos + offset,
169
+ this.playerController.getSeekableDuration()
170
+ );
171
+ } else if (this.currentSeekType === SEEK_TYPE.REWIND) {
172
+ targetPos = Math.max(0, currentPos - offset);
173
+ } else {
174
+ log_warning(
175
+ `TVSeekController: handleDelayedSeek - invalid seek type: ${this.currentSeekType}`
176
+ );
177
+ }
161
178
  }
162
179
 
163
180
  log_debug(