@applicaster/zapp-react-native-utils 12.0.0-alpha.8521132326 → 12.0.0-alpha.8818231309

package/appUtils/accessibilityManager/const.ts

@@ -0,0 +1,50 @@
+export const BUTTON_ACCESSIBILITY_KEYS = {
+  play: {
+    label: "accessibility_play_label",
+    hint: "accessibility_play_hint",
+    mini: {
+      label: "accessibility_play_mini_label",
+      hint: "accessibility_play_mini_hint",
+    },
+  },
+  pause: {
+    label: "accessibility_pause_label",
+    hint: "accessibility_pause_hint",
+    mini: {
+      label: "accessibility_pause_mini_label",
+      hint: "accessibility_pause_mini_hint",
+    },
+  },
+  rewind: {
+    label: "accessibility_rewind_label",
+    hint: "accessibility_rewind_hint",
+  },
+  forward: {
+    label: "accessibility_forward_label",
+    hint: "accessibility_forward_hint",
+  },
+  close: {
+    label: "accessibility_close_label",
+    hint: "accessibility_close_hint",
+    mini: {
+      label: "accessibility_close_mini_label",
+      hint: "accessibility_close_mini_hint",
+    },
+  },
+  maximize: {
+    label: "accessibility_maximize_label",
+    hint: "accessibility_maximize_hint",
+  },
+  subtitles: {
+    label: "accessibility_subtitle_label",
+    hint: "accessibility_subtitle_hint",
+  },
+  back: {
+    label: "accessibility_back_label",
+    hint: "accessibility_back_hint",
+  },
+  fullscreen: {
+    label: "accessibility_fullscreen_label",
+    hint: "accessibility_fullscreen_hint",
+  },
+} as const;

package/appUtils/accessibilityManager/hooks.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo } from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { AccessibilityManager } from "./index";
+
+export const useAccessibilityManager = () => {
+  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+  const { localizations } = remoteConfigurations;
+
+  const accessibilityManager = useMemo(() => {
+    return AccessibilityManager.getInstance();
+  }, []);
+
+  useEffect(() => {
+    accessibilityManager.updateLocalizations(localizations);
+  }, [localizations]);
+
+  useEffect(() => {
+    const subscription = accessibilityManager.getStateAsObservable().subscribe({
+      next: () => {
+        // TODO: handle accessibility states
+        // screenReaderEnabled: false
+        // reduceMotionEnabled: false
+        // boldTextEnabled: false
+      },
+    });
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return accessibilityManager;
+};

package/appUtils/accessibilityManager/index.ts

@@ -0,0 +1,150 @@
+import { BehaviorSubject } from "rxjs";
+import { accessibilityManagerLogger as logger } from "./logger";
+import { TTSManager } from "../platform/platformUtils";
+import { getLocalizations } from "../../localizationUtils";
+import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
+
+export interface AccessibilityState {
+  screenReaderEnabled: boolean;
+  reduceMotionEnabled: boolean;
+  boldTextEnabled: boolean;
+}
+
+export interface AccessibilityProps {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  "aria-label"?: string;
+  "aria-description"?: string;
+}
+
+export class AccessibilityManager {
+  private static _instance: AccessibilityManager | null = null;
+  private state$ = new BehaviorSubject<AccessibilityState>({
+    screenReaderEnabled: false,
+    reduceMotionEnabled: false,
+    boldTextEnabled: false,
+  });
+
+  private announcements$ = new BehaviorSubject<{
+    message: string;
+    localizedMessage?: string | undefined;
+    timestamp: number;
+  } | null>(null);
+
+  private ttsManager = TTSManager.getInstance();
+  private localizations: { [key: string]: string };
+
+  private constructor(localizations?: { [key: string]: string }) {
+    if (localizations) {
+      this.localizations = getLocalizations({ localizations });
+    }
+  }
+
+  public static getInstance(): AccessibilityManager {
+    if (!AccessibilityManager._instance) {
+      AccessibilityManager._instance = new AccessibilityManager();
+    }
+
+    return AccessibilityManager._instance;
+  }
+
+  public updateLocalizations(localizations: { [key: string]: string }) {
+    this.localizations = getLocalizations({ localizations });
+  }
+
+  public getState(): AccessibilityState {
+    return this.state$.getValue();
+  }
+
+  public getStateAsObservable() {
+    return this.state$.asObservable();
+  }
+
+  /**
+   * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
+   * keyOfLocalizedText is the key to the localized text
+   */
+  public readText({
+    text,
+    keyOfLocalizedText,
+  }: {
+    text: string;
+    keyOfLocalizedText?: string;
+  }) {
+    logger.debug("Reading text", { text, keyOfLocalizedText });
+
+    if (keyOfLocalizedText) {
+      if (!this.localizations) {
+        logger.error(
+          "Attempting to use localized key without initialized localizations"
+        );
+
+        return;
+      }
+
+      const localizedMessage = this.getLocalizedMessage(keyOfLocalizedText);
+
+      if (!localizedMessage) {
+        logger.warn(`No localization found for key: ${keyOfLocalizedText}`);
+
+        return;
+      }
+
+      text = localizedMessage;
+    }
+
+    if (this.ttsManager) {
+      this.ttsManager.readText(text);
+    }
+
+    this.announcements$.next({
+      message: text,
+      localizedMessage: keyOfLocalizedText ? text : undefined,
+      timestamp: Date.now(),
+    });
+  }
+
+  public getButtonAccessibilityProps(buttonName: string): AccessibilityProps {
+    const buttonConfig = BUTTON_ACCESSIBILITY_KEYS[buttonName];
+
+    if (!buttonConfig) {
+      return {
+        accessibilityLabel: buttonName,
+        accessibilityHint: `Press button to perform action on ${buttonName}`,
+        "aria-label": buttonName,
+        "aria-description": `Press button to perform action on ${buttonName}`,
+      };
+    }
+
+    const labelKey = buttonConfig.label;
+    const hintKey = buttonConfig.hint;
+
+    const label = this.getLocalizedMessage(labelKey) || buttonName;
+
+    const hint =
+      this.getLocalizedMessage(hintKey) ||
+      `Press button to perform action on ${buttonName}`;
+
+    return {
+      accessibilityLabel: label,
+      accessibilityHint: hint,
+      "aria-label": label,
+      "aria-description": hint,
+    };
+  }
+
+  public getLocalizedMessage(key: string): string | void {
+    if (!key) return;
+
+    if (!this.localizations) {
+      logger.error(
+        "Attempting to use localized key without initialized localizations",
+        { key }
+      );
+
+      return;
+    }
+
+    return this.localizations[key];
+  }
+}

package/appUtils/accessibilityManager/logger.ts

@@ -0,0 +1,5 @@
+import { utilsLogger } from "../../logger";
+
+export const accessibilityManagerLogger = utilsLogger.addSubsystem(
+  "accessibilityManager"
+);

package/appUtils/focusManager/index.ts

@@ -13,7 +13,6 @@ import {
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
-
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {

package/appUtils/index.js

@@ -9,6 +9,8 @@ export { KEYS, ARROW_KEYS } from "./keyCodes/keys";
 
 export { playerManager } from "./playerManager";
 
+export { accessibilityManager } from "./accessibilityManager";
+
 export function deprecationMessage(fn, replacement) {
   if (__DEV__ && process.env.NODE_ENV !== "test") {
     console.warn("/**  DEPRECATION WARNING  **/");

package/appUtils/platform/platformUtils.ts

@@ -1,8 +1,6 @@
 import { BehaviorSubject } from "rxjs";
 
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import { PlayerWebController } from "@applicaster/zapp-react-native-default-player/src/playerFactory/players/playerWebController";
 
 import { PLATFORM_KEYS, PLATFORMS } from "./const";
 import { createLogger, utilsLogger } from "../../logger";
@@ -11,6 +9,9 @@ declare global {
   interface Window {
     VIZIO?: {
       exitApplication: () => void;
+      Chromevox: {
+        play: (text: string) => void;
+      };
       setClosedCaptionHandler: (
         callback: (isCCEnabled: boolean) => void
       ) => void;
@@ -18,7 +19,7 @@ declare global {
   }
 }
 
-const { log_debug, log_error } = createLogger({
+const { log_debug } = createLogger({
   category: "General",
   subsystem: "PlatformUtils",
   parent: utilsLogger,
@@ -63,7 +64,7 @@ export const hasVizioAPIs = () => {
  * Manages device based closed captioning state
  * Returns an observable that emits the current state and updates whenever it changes
  */
-class ClosedCaptioningManager {
+export class ClosedCaptioningManager {
   private ccState$ = new BehaviorSubject<boolean>(false);
   private static ccManagerInstance: ClosedCaptioningManager;
 
@@ -128,96 +129,57 @@ export const getClosedCaptionState = () => {
   return ccManager.getStateAsObservable();
 };
 
-export class TextTrackManager {
-  private controller?: PlayerWebController;
-  private static instance: TextTrackManager;
-
-  private constructor() {}
-
-  static getInstance(): TextTrackManager {
-    if (!TextTrackManager.instance) {
-      TextTrackManager.instance = new TextTrackManager();
-    }
-
-    return TextTrackManager.instance;
-  }
-
-  initialize(controller: PlayerWebController) {
-    if (!controller) {
-      throw new Error(
-        "Controller is required for TextTrackManager initialization"
-      );
-    }
+/**
+ * Manages device based closed captioning state
+ * Returns an observable that emits the current state and updates whenever it changes
+ */
+export class TTSManager {
+  private ttsState$ = new BehaviorSubject<boolean>(false);
+  private static ttsManagerInstance: TTSManager;
 
-    this.controller = controller;
+  private constructor() {
+    this.initialize();
   }
 
-  async setTextTrackBasedOnCaptions(closedCaptionsState: boolean) {
-    if (!this.controller) {
-      log_error("Controller is not initialized");
-
-      return;
+  static getInstance(): TTSManager {
+    if (!TTSManager.ttsManagerInstance) {
+      TTSManager.ttsManagerInstance = new TTSManager();
     }
 
-    if (closedCaptionsState) {
-      const textTracks = this.controller.getTracksState().textTracks;
-      const preferredTextTrack = await this.getPreferredTextTrack(textTracks);
-
-      if (preferredTextTrack) {
-        this.controller.selectTrack(preferredTextTrack);
-      }
-    } else {
-      this.controller.selectTrack(null);
-    }
+    return TTSManager.ttsManagerInstance;
   }
 
-  async getPreferredTextTrack(
-    textTracks: QuickBrickPlayer.TextTrack[]
-  ): Promise<QuickBrickPlayer.TextTrack | undefined> {
-    if (!this.controller) return;
-
-    const userPreferredTextLanguageLocalStorage = await localStorage.getItem(
-      "preferred_text_language",
-      "user_preferences"
+  async initialize() {
+    if (!isVizioPlatform()) return;
+
+    document.addEventListener(
+      "VIZIO_TTS_ENABLED",
+      () => {
+        this.ttsState$.next(true);
+      },
+      false
     );
 
-    let userPreferredTextLanguage;
-
-    if (userPreferredTextLanguageLocalStorage) {
-      userPreferredTextLanguage = textTracks.find(
-        (track) => track.language === userPreferredTextLanguageLocalStorage
-      );
-    }
-
-    if (userPreferredTextLanguage?.id) {
-      return userPreferredTextLanguage;
-    }
-
-    const enableAutoTextTrackSelection =
-      this.controller.getPluginConfiguration()
-        ?.enable_auto_text_track_selection ||
-      this.controller.getTracksState().textTracks.length > 0;
-
-    if (enableAutoTextTrackSelection) {
-      const languageCode = await sessionStorage.getItem("languageCode");
-
-      if (languageCode) {
-        const chosenTextTrackBySystemLanguage = textTracks.find(
-          (track) => track.language === languageCode
-        );
+    document.addEventListener(
+      "VIZIO_TTS_DISABLED",
+      () => {
+        this.ttsState$.next(false);
+      },
+      false
+    );
+  }
 
-        if (chosenTextTrackBySystemLanguage?.id) {
-          return chosenTextTrackBySystemLanguage;
-        }
-      }
-    }
+  getCurrentState(): boolean {
+    return this.ttsState$.getValue();
+  }
 
-    return textTracks?.[0];
+  getStateAsObservable() {
+    return this.ttsState$.asObservable();
   }
 
-  isTextTrackEnabled(): boolean {
-    if (!this.controller) return false;
+  readText(text: string) {
+    if (!window.VIZIO?.Chromevox) return;
 
-    return this.controller.getTracksState().textTrackId !== null;
+    window.VIZIO.Chromevox.play(text);
   }
 }

package/appUtils/playerManager/player.ts

@@ -733,4 +733,5 @@ export class Player {
 
   public supportsNativeControls = (): boolean => false;
   public supportNativeCast = (): boolean => false;
+  public destroy = () => {};
 }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -72,6 +72,7 @@ export const usePlayerControllerSetup = ({
 
     return () => {
       playerManager.unregisterPlayer(playerId);
+      playerController.destroy?.();
     };
   }, [playerId, playerController]);
 

package/navigationUtils/index.ts

@@ -592,3 +592,51 @@ export function isMenuDisabled(
 export function routeIsPlayerScreen(currentRoute) {
   return currentRoute?.includes("/playable");
 }
+
+export const getNavBarProps =
+  (currentRiver: ZappRiver, pathname: string, title: string) => () => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  };
+
+export const findMenuPlugin = (
+  navigations: ZappNavigation[],
+  plugins
+): QuickBrickPlugin => {
+  return resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+};
+
+export const shouldNavBarDisplayMenu = (currentRiver: ZappRiver, plugins) =>
+  findMenuPlugin(currentRiver.navigations, plugins)?.identifier ===
+    "quick_brick_side_menu" ||
+  currentRiver?.navigations.findIndex(
+    (nav) => nav.category === "nav_bar" && nav.general?.override_menu_target
+  ) > -1;
+
+export const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.8521132326",
+  "version": "12.0.0-alpha.8818231309",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.8521132326",
+    "@applicaster/applicaster-types": "12.0.0-alpha.8818231309",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/pluginUtils/index.ts

@@ -245,3 +245,12 @@ export function generateManifest({ manifestConfig, version }) {
 
   return manifestConfig({ platform, version });
 }
+
+const getPluginType = R.pathOr("unknown_plugin_type", [
+  "state",
+  "screen",
+  "plugin_type",
+]);
+
+export const isPlayerPlugin = (routeState): boolean =>
+  getPluginType(routeState) === "player";

package/reactHooks/navigation/index.ts

@@ -78,6 +78,10 @@ export function isNavBarVisible(
     return false;
   }
 
+  if (screenData?.plugin_type === "login" && isTV()) {
+    return false;
+  }
+
   /* Match if screen is Hook */
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;

package/reactUtils/index.ts

@@ -112,6 +112,9 @@ export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 declare global {
   interface Window {
     VIZIO?: {
+      Chromevox: {
+        play: (text: string) => void;
+      };
       exitApplication: () => void;
       setClosedCaptionHandler: (
         callback: (isCCEnabled: boolean) => void