@applicaster/zapp-react-native-utils 12.0.0-rc.87 → 12.0.0-rc.89

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

@@ -11,6 +11,9 @@ declare global {
   interface Window {
     VIZIO?: {
       exitApplication: () => void;
+      Chromevox: {
+        play: (text: string) => void;
+      };
       setClosedCaptionHandler: (
         callback: (isCCEnabled: boolean) => void
       ) => void;
@@ -63,7 +66,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;
 
@@ -221,3 +224,58 @@ export class TextTrackManager {
     return this.controller.getTracksState().textTrackId !== null;
   }
 }
+
+/**
+ * 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;
+
+  private constructor() {
+    this.initialize();
+  }
+
+  static getInstance(): TTSManager {
+    if (!TTSManager.ttsManagerInstance) {
+      TTSManager.ttsManagerInstance = new TTSManager();
+    }
+
+    return TTSManager.ttsManagerInstance;
+  }
+
+  async initialize() {
+    if (!isVizioPlatform()) return;
+
+    document.addEventListener(
+      "VIZIO_TTS_ENABLED",
+      () => {
+        this.ttsState$.next(true);
+      },
+      false
+    );
+
+    document.addEventListener(
+      "VIZIO_TTS_DISABLED",
+      () => {
+        this.ttsState$.next(false);
+      },
+      false
+    );
+  }
+
+  getCurrentState(): boolean {
+    return this.ttsState$.getValue();
+  }
+
+  getStateAsObservable() {
+    return this.ttsState$.asObservable();
+  }
+
+  readText(text: string) {
+    if (!window.VIZIO?.Chromevox) return;
+
+    window.VIZIO.Chromevox.play(text);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-rc.87",
+  "version": "12.0.0-rc.89",
   "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-rc.87",
+    "@applicaster/applicaster-types": "12.0.0-rc.89",
     "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