@applicaster/zapp-react-native-utils 14.0.0-alpha.3514550494 → 14.0.0-alpha.3652810444

package/analyticsUtils/playerAnalyticsTracker.ts

@@ -105,7 +105,8 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
       return this.getDateTimestamp();
     }
 
-    this.mediaTime = this.playerState?.currentTime || eventData?.currentTime;
+    this.mediaTime =
+      this.playerState?.contentPosition || eventData?.currentTime;
 
     return this.mediaTime;
   }

package/appUtils/accessibilityManager/const.ts

@@ -65,17 +65,4 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
     label: "accessibility_menu_item_label",
     hint: "accessibility_menu_item_hint",
   },
-  skip_intro: {
-    label: "accessibility_skip_intro_label",
-    hint: "accessibility_skip_intro_hint",
-  },
-  // Top Menu Bar-specific buttons
-  top_menu_bar_item_selected: {
-    label: "accessibility_top_menu_bar_item_selected_label",
-    hint: "accessibility_top_menu_bar_item_selected_hint",
-  },
-  top_menu_title: {
-    label: "accessibility_top_menu_title_label",
-    hint: "accessibility_top_menu_hint",
-  },
 } as const;

package/appUtils/accessibilityManager/hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { AccessibilityManager } from "./index";
 
 /**
@@ -38,37 +38,3 @@ export const useAccessibilityManager = (
 
   return accessibilityManager;
 };
-
-export const useInitialAnnouncementReady = (
-  accessibilityManager: AccessibilityManager
-) => {
-  const [isReady, setIsReady] = useState(
-    accessibilityManager.isInitialPlayerAnnouncementReady
-  );
-
-  useEffect(() => {
-    const subscription = accessibilityManager
-      .getInitialAnnouncementReadyObservable()
-      .subscribe(setIsReady);
-
-    return () => subscription.unsubscribe();
-  }, [accessibilityManager]);
-
-  return isReady;
-};
-
-export const useAnnouncementActive = (
-  accessibilityManager: AccessibilityManager
-) => {
-  const [isActive, setIsActive] = useState(false);
-
-  useEffect(() => {
-    const subscription = accessibilityManager
-      .getTTSStateObservable()
-      .subscribe(setIsActive);
-
-    return () => subscription.unsubscribe();
-  }, [accessibilityManager]);
-
-  return isActive;
-};

package/appUtils/accessibilityManager/index.ts

@@ -1,19 +1,15 @@
-import * as R from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
 import { toString } from "../../utils";
-import { calculateReadingTime } from "./utils";
 import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
   private headingTimeout: NodeJS.Timeout | null = null;
-  private announcementDelayTimeout: NodeJS.Timeout | null = null;
-  private WORDS_PER_MINUTE = 140;
+  private WORDS_PER_MINUTE = 160;
   private MINIMUM_PAUSE = 500;
-  private ANNOUNCEMENT_DELAY = 700;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -29,12 +25,6 @@ export class AccessibilityManager {
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
   private headingQueue: string[] = [];
-  private currentFocusId: string | null = null;
-  private headingFocusMap: Map<string, string> = new Map();
-  private pendingFocusId: string | null = null;
-  private isInitialPlayerAnnouncementReady$ = new BehaviorSubject<boolean>(
-    false
-  );
 
   private constructor() {}
 
@@ -46,26 +36,6 @@ export class AccessibilityManager {
     return AccessibilityManager._instance;
   }
 
-  public get isInitialPlayerAnnouncementReady(): boolean {
-    return this.isInitialPlayerAnnouncementReady$.getValue();
-  }
-
-  public setInitialPlayerAnnouncementReady(): void {
-    this.isInitialPlayerAnnouncementReady$.next(true);
-  }
-
-  public resetInitialPlayerAnnouncementReady(): void {
-    this.isInitialPlayerAnnouncementReady$.next(false);
-  }
-
-  public getInitialAnnouncementReadyObservable() {
-    return this.isInitialPlayerAnnouncementReady$.asObservable();
-  }
-
-  public getTTSStateObservable() {
-    return this.ttsManager.getStateAsObservable();
-  }
-
   /**
    * The method now accepts any object with localizations using a flattened structure
    *
@@ -76,9 +46,7 @@ export class AccessibilityManager {
    * i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
    */
   public updateLocalizations(localizations: { [key: string]: string }) {
-    if (!R.isEmpty(localizations)) {
-      this.localizations = localizations;
-    }
+    this.localizations = localizations;
   }
 
   public getState(): AccessibilityState {
@@ -89,25 +57,31 @@ export class AccessibilityManager {
     return this.state$.asObservable();
   }
 
+  /** Calculates the reading time for a given text
+   * This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
+   * @param text - The text to calculate the reading time for
+   * @returns The reading time in milliseconds
+   */
+  private calculateReadingTime(text: string): number {
+    const words = text.trim().split(/\s+/).length;
+
+    return Math.max(
+      this.MINIMUM_PAUSE,
+      (words / this.WORDS_PER_MINUTE) * 60 * 1000
+    );
+  }
+
   /**
    * Adds a heading to the queue, headings will be read before the next text
    * Each heading will be read once and removed from the queue
    */
   public addHeading(heading: string) {
-    if (!this.pendingFocusId) {
-      this.pendingFocusId = Date.now().toString();
-    }
-
-    this.headingFocusMap.set(heading, this.pendingFocusId);
     this.headingQueue.push(heading);
   }
 
   /**
    * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
    * keyOfLocalizedText is the key to the localized text
-   *
-   * Implements a delay mechanism to reduce noise during rapid navigation.
-   * Only the most recent announcement will be read after the delay period.
    */
   public readText({
     text,
@@ -138,27 +112,19 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    const focusId = this.pendingFocusId || Date.now().toString();
-    this.currentFocusId = focusId;
-    this.pendingFocusId = null;
+    if (this.headingQueue.length > 0) {
+      const heading = this.headingQueue.shift()!;
+      this.ttsManager?.readText(heading);
 
-    this.clearAnnouncement();
+      if (this.headingTimeout) {
+        clearTimeout(this.headingTimeout);
+      }
 
-    this.announcementDelayTimeout = setTimeout(() => {
-      this.executeAnnouncement(textToRead, keyOfLocalizedText, focusId);
-    }, this.ANNOUNCEMENT_DELAY);
-  }
+      const pauseTime = this.calculateReadingTime(heading);
 
-  /**
-   * Internal method to execute the actual announcement after the delay
-   */
-  private executeAnnouncement(
-    textToRead: string,
-    keyOfLocalizedText?: string,
-    focusId?: string
-  ) {
-    if (this.headingQueue.length > 0) {
-      this.processHeadingQueue(textToRead, focusId);
+      this.headingTimeout = setTimeout(() => {
+        this.ttsManager?.readText(textToRead);
+      }, pauseTime);
     } else {
       this.ttsManager?.readText(textToRead);
     }
@@ -170,54 +136,6 @@ export class AccessibilityManager {
     });
   }
 
-  /**
-   * Recursively processes all headings in the queue, reading them one by one
-   */
-  private processHeadingQueue(textToRead: string, focusId?: string) {
-    // If focus has changed, abort this announcement
-    if (focusId && this.currentFocusId !== focusId) {
-      return;
-    }
-
-    if (this.headingQueue.length === 0) {
-      if (focusId && this.currentFocusId === focusId) {
-        this.ttsManager?.readText(textToRead);
-      }
-
-      return;
-    }
-
-    const heading = this.headingQueue.shift()!;
-
-    const headingFocusId = this.headingFocusMap.get(heading);
-
-    if (headingFocusId && headingFocusId !== focusId) {
-      // This heading belongs to a previous focus, skip it
-      this.headingFocusMap.delete(heading);
-      this.processHeadingQueue(textToRead, focusId);
-
-      return;
-    }
-
-    this.ttsManager?.readText(heading);
-    this.headingFocusMap.delete(heading); // Clean up after reading
-
-    if (this.headingTimeout) {
-      clearTimeout(this.headingTimeout);
-    }
-
-    const pauseTime = calculateReadingTime(
-      heading,
-      this.WORDS_PER_MINUTE,
-      this.MINIMUM_PAUSE,
-      this.ANNOUNCEMENT_DELAY
-    );
-
-    this.headingTimeout = setTimeout(() => {
-      this.processHeadingQueue(textToRead, focusId);
-    }, pauseTime);
-  }
-
   public getButtonAccessibilityProps(name: string): AccessibilityProps {
     const buttonName = toString(name);
 
@@ -225,15 +143,12 @@ export class AccessibilityManager {
 
     if (!buttonConfig) {
       return {
-        accessible: true,
         accessibilityLabel: buttonName,
         accessibilityHint: `Press button to perform action on ${buttonName}`,
         "aria-label": buttonName,
         "aria-description": `Press button to perform action on ${buttonName}`,
-        accessibilityRole: "button" as AccessibilityRole,
+        accessibilityRole: "button",
         "aria-role": "button",
-        role: "button",
-        tabindex: 0,
       };
     }
 
@@ -247,52 +162,23 @@ export class AccessibilityManager {
       `Press button to perform action on ${buttonName}`;
 
     return {
-      accessible: true,
       accessibilityLabel: label,
       accessibilityHint: hint,
       "aria-label": label,
       "aria-description": hint,
-      accessibilityRole: "button" as AccessibilityRole,
+      accessibilityRole: "button",
       "aria-role": "button",
-      role: "button",
-      tabindex: 0,
     };
   }
 
   public getInputAccessibilityProps(inputName: string): AccessibilityProps {
     return {
-      accessible: true,
       accessibilityLabel: inputName,
       accessibilityHint: `Enter text into ${inputName}`,
       "aria-label": inputName,
       "aria-description": `Enter text into ${inputName}`,
-      accessibilityRole: "searchbox" as AccessibilityRole,
-      "aria-role": "searchbox",
-      role: "searchbox",
-      tabindex: 0,
-    };
-  }
-
-  /**
-   * Extracts accessibility props from component props and returns them as HTML attributes
-   * @param props - Component props containing accessibility properties
-   * @returns Object with accessibility HTML attributes
-   */
-  public getWebAccessibilityProps(props: any): AccessibilityProps {
-    const {
-      "aria-label": ariaLabel,
-      "aria-description": ariaDescription,
-      "aria-role": ariaRole,
-      role,
-      tabindex,
-    } = props;
-
-    return {
-      "aria-label": ariaLabel,
-      "aria-description": ariaDescription,
-      "aria-role": ariaRole,
-      role: role || ariaRole,
-      tabindex,
+      accessibilityRole: "textbox" as AccessibilityRole,
+      "aria-role": "textbox",
     };
   }
 
@@ -310,11 +196,4 @@ export class AccessibilityManager {
 
     return this.localizations[key];
   }
-
-  private clearAnnouncement() {
-    if (this.announcementDelayTimeout) {
-      clearTimeout(this.announcementDelayTimeout);
-      this.announcementDelayTimeout = null;
-    }
-  }
 }

package/appUtils/focusManager/events.ts

@@ -9,3 +9,5 @@ export const WILL_LOSE_FOCUS = "willLoseFocus";
 export const BLUR = "blur";
 
 export const HAS_LOST_FOCUS = "hasLostFocus";
+
+export const RESET = "reset";

package/appUtils/platform/platformUtils.ts

@@ -10,7 +10,6 @@ import { PLATFORM_KEYS, PLATFORMS, ZappPlatform } from "./const";
 import { createLogger, utilsLogger } from "../../logger";
 import { getPlatform } from "../../reactUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { calculateReadingTime } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/utils";
 
 const { log_debug } = createLogger({
   category: "General",
@@ -213,16 +212,9 @@ export class TTSManager {
   }
 
   readText(text: string) {
-    this.ttsState$.next(true);
-
     if (isSamsungPlatform() && window.speechSynthesis) {
       const utterance = new SpeechSynthesisUtterance(text);
-
-      window.speechSynthesis.cancel(); // Cancel previous speech before speaking new text
       window.speechSynthesis.speak(utterance);
-
-      // Estimate reading time and set inactive when done
-      this.scheduleTTSComplete(text);
     }
 
     if (isLgPlatform() && window.webOS?.service) {
@@ -233,45 +225,23 @@ export class TTSManager {
             log_debug("There was a failure setting up webOS TTS service", {
               error,
             });
-
-            this.ttsState$.next(false);
           },
           onSuccess(response: any) {
             log_debug("webOS TTS service is configured successfully", {
               response,
             });
-
-            // Estimate reading time and set inactive when done
-            this.scheduleTTSComplete(text);
           },
           parameters: {
             text,
-            clear: true, // Clear any previous speech before speaking new text
           },
         });
       } catch (error) {
         log_debug("webOS TTS service error", { error });
-        this.ttsState$.next(false);
       }
     }
 
-    if (!window.VIZIO?.Chromevox) {
-      // For platforms without TTS, estimate reading time
-      this.scheduleTTSComplete(text);
-
-      return;
-    }
+    if (!window.VIZIO?.Chromevox) return;
 
     window.VIZIO.Chromevox.play(text);
-    // Estimate reading time and set inactive when done
-    this.scheduleTTSComplete(text);
-  }
-
-  private scheduleTTSComplete(text: string) {
-    const readingTime = calculateReadingTime(text);
-
-    setTimeout(() => {
-      this.ttsState$.next(false);
-    }, readingTime);
   }
 }

package/focusManager/FocusManager.ts

@@ -7,6 +7,16 @@ import { TreeNode } from "./TreeNode";
 import { Tree } from "./Tree";
 import { subscriber } from "../functionUtils";
 import { getFocusableId, toFocusDirection } from "./utils";
+import {
+  isCurrentFocusOnMenu,
+  isCurrentFocusOnContent,
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  findSelectedTabId,
+  contextWithoutScrolling,
+} from "./aux";
+
+export { contextWithoutScrolling } from "./aux";
 
 export {
   toFocusDirection,
@@ -221,7 +231,8 @@ class FocusManager {
 
   private setNextFocus(
     nextFocus: FocusManager.TouchableReactRef,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     if (nextFocus?.current?.props?.blockFocus) {
       return;
@@ -250,7 +261,7 @@ class FocusManager {
 
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
-      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
+      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {}, context);
     }
   }
 
@@ -291,7 +302,8 @@ class FocusManager {
 
   setFocus(
     newFocus: FocusManager.TouchableReactRef | string,
-    options?: FocusManager.Android.CallbackOptions
+    options?: FocusManager.Android.CallbackOptions,
+    context?: FocusManager.FocusContext
   ) {
     // Checks if element is focusable
     const { isFocusable, error } = FocusManager.isFocusable(newFocus);
@@ -316,7 +328,7 @@ class FocusManager {
       }
 
       if (newFocusRef) {
-        FocusManager.instance.setNextFocus(newFocusRef, options);
+        FocusManager.instance.setNextFocus(newFocusRef, options, context);
       }
     }
   }
@@ -351,6 +363,11 @@ class FocusManager {
       FocusManager.instance.focused.onBlur(FocusManager.instance.focused, {});
     }
 
+    // send reset event to some handler to reset their internal state, before real reset happens
+    this.eventHandler?.invokeHandler?.(FOCUS_EVENTS.RESET, {
+      focusedId: FocusManager.instance.focusedId,
+    });
+
     FocusManager.instance.setFocusLocal({ current: null });
   }
 
@@ -417,6 +434,48 @@ class FocusManager {
       throw new Error(`Group with id ${id} not found`);
     }
   }
+
+  isFocusOnMenu(): boolean {
+    return isCurrentFocusOnMenu(this.tree, FocusManager.instance.focusedId);
+  }
+
+  isFocusOnContent(): boolean {
+    return isCurrentFocusOnContent(this.tree, FocusManager.instance.focusedId);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  focusTopNavigation(isTabsScreen: boolean, item: ZappEntry): void {
+    const landFocusTo = (id) => {
+      if (id) {
+        // set focus on selected menu item
+        const direction = undefined;
+
+        const context: FocusManager.FocusContext =
+          contextWithoutScrolling("back");
+
+        logger.log({ message: "landFocusTo", data: { id } });
+
+        this.setFocus(id, direction, context);
+      }
+    };
+
+    if (
+      isTabsScreen &&
+      isTabsScreenContentFocused(this.tree, FocusManager.instance.focusedId)
+    ) {
+      const selectedTabId = findSelectedTabId(this.tree, item);
+
+      // Set focus with back button context to tabs-menu
+      landFocusTo(selectedTabId);
+
+      return;
+    }
+
+    const selectedMenuItemId = findSelectedMenuId(this.tree);
+
+    // Set focus with back button context to top-menu
+    landFocusTo(selectedMenuItemId);
+  }
 }
 
 export const focusManager = FocusManager.getInstance();