@applicaster/zapp-react-native-utils 12.0.0-alpha.4337072244 → 12.0.0-alpha.4342457208

package/appUtils/focusManager/index.ts

@@ -8,18 +8,11 @@ import { Tree } from "./treeDataStructure/Tree";
 import {
   findFocusableNode,
   findPriorityItem,
-  isTransitionHappening,
+  haveSameParentBeforeRoot,
 } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
-import {
-  waitForActiveScreen,
-  waitForContent,
-  getContentNode,
-  getNavbarNode,
-} from "./utils";
-
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -416,77 +409,19 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  async function setFocusOnMenu(currentRoute: string) {
-    try {
-      await waitForActiveScreen(currentRoute, focusableTree);
-
-      const navbar = getNavbarNode(focusableTree);
-
-      const selectedMenuItemId = R.find(
-        (child) => child.component.props.selected,
-        navbar.children
-      )?.id;
-
-      if (selectedMenuItemId) {
-        // set focus on selected menu item
-        setFocus(selectedMenuItemId);
-
-        return;
-      }
-
-      const firstMenuItemId = R.path(["children", 0, "id"], navbar);
-
-      if (firstMenuItemId) {
-        // set focus on first menu item
-        setFocus(firstMenuItemId);
-      }
-    } catch (error) {
-      logger.log({
-        message: "setFocusOnMenu – failed to put focus on top-menu",
-        data: {
-          currentRoute,
-          error,
-        },
-      });
-    }
-  }
-
-  async function setFocusOnContent(currentRoute: string) {
-    // we need to put focus on content here
-    // For doing it we have to wait registration of first focusable node into focusableTree
-    // we wait until content node starts having children
-    try {
-      await waitForActiveScreen(currentRoute, focusableTree);
-      await waitForContent(focusableTree);
-
-      const content = getContentNode(focusableTree);
-
-      const { success } = setInitialFocus(content);
-
-      if (!success) {
-        // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
-        throw Error(
-          "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
-        );
-      }
-    } catch (error) {
-      setFocusOnContent(currentRoute);
-    }
-  }
-
-  function isTransitionInProgress() {
+  function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
     if (routes.length <= 1) {
       // there is only one or zero routes
-      return false;
+      return true;
     }
 
-    return isTransitionHappening(currentFocusNode, R.last(routes));
+    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
   function recoverFocus() {
-    if (isTransitionInProgress()) {
+    if (!isCurrentFocusOnTheTopScreen()) {
       // We've failed to set focused node on the new screen => run focus recovery
       setInitialFocus();
     }
@@ -498,7 +433,7 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (isTransitionInProgress()) {
+    if (!isCurrentFocusOnTheTopScreen()) {
       // We are opening new screen. We need to ignore movement of focus.
       return false;
     }
@@ -600,8 +535,7 @@ export const focusManager = (function () {
     focusableTree,
     getGroupRootById,
     isGroupItemFocused,
-    setFocusOnMenu,
-    setFocusOnContent,
     recoverFocus,
+    isCurrentFocusOnTheTopScreen,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,6 +1,7 @@
 import { allPass, pathOr, startsWith, isNil } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { isZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { QUICK_BRICK_NAVBAR } from "@applicaster/quick-brick-core/const";
 
 import { rejectItemByPath } from "../../../../objectUtils";
 import {
@@ -154,10 +155,10 @@ const excludeFromFocusSearching = pathOr(false, [
   "excludeFromFocusSearching",
 ]);
 
-const isNavBar = (target) => startsWith("navbar", target?.id);
+const isNavBar = (target) => startsWith(QUICK_BRICK_NAVBAR, target?.id);
 
 const ignoreMenuIfMultipleTargets = (nodes) => {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+  if (nodes.length > 1) {
     return nodes.filter((n) => !isNavBar(n?.target));
   }
 
@@ -205,7 +206,7 @@ export function getTargetInDirection(
   const overrideTarget = currentNode?.component?.props[overridePropName];
 
   if (overrideTarget) {
-    const target = targetNodes.find((n) => n.id === overrideTarget);
+    const target = targetNodes.find((n) => n?.id === overrideTarget);
 
     if (target) return target;
   }
@@ -333,9 +334,9 @@ export const getNodeBeforeRoot = (node) => {
   return getNodeBeforeRoot(node.parent);
 };
 
-export const isTransitionHappening = (currentNode, nextNode) => {
+export const haveSameParentBeforeRoot = (currentNode, nextNode) => {
   const routeForCurrentNode = getNodeBeforeRoot(currentNode);
   const routeForNextNode = getNodeBeforeRoot(nextNode);
 
-  return routeForCurrentNode?.id !== routeForNextNode?.id;
+  return routeForCurrentNode?.id === routeForNextNode?.id;
 };

package/appUtils/focusManager/utils/index.ts

@@ -1,5 +1,9 @@
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 
 // run check each 300 ms
 // run this check too often could lead to performance penalty on low-end devices
@@ -60,7 +64,9 @@ const getActiveScreenChildren = (focusableTree) => {
 
 export const getContentNode = (focusableTree) => {
   const content = find(
-    (child) => startsWith("content", child.id),
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
     getActiveScreenChildren(focusableTree)
   );
 
@@ -69,7 +75,7 @@ export const getContentNode = (focusableTree) => {
 
 export const getNavbarNode = (focusableTree) => {
   const navbar = find(
-    (child) => startsWith("navbar", child.id),
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
     getActiveScreenChildren(focusableTree)
   );
 

package/appUtils/focusManagerAux/index.ts

@@ -0,0 +1,76 @@
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { find, path } from "ramda";
+
+import {
+  waitForActiveScreen,
+  waitForContent,
+  getContentNode,
+  getNavbarNode,
+} from "./utils";
+
+import { coreLogger } from "../../logger";
+
+const logger = coreLogger.addSubsystem("focusManagerAux");
+
+export async function setFocusOnMenu(currentRoute: string) {
+  const { setFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+
+    const navbar = getNavbarNode(focusableTree);
+
+    const selectedMenuItemId = find(
+      (child) => child.component.props.selected,
+      navbar.children
+    )?.id;
+
+    if (selectedMenuItemId) {
+      // set focus on selected menu item
+      setFocus(selectedMenuItemId);
+
+      return;
+    }
+
+    const firstMenuItemId = path(["children", 0, "id"], navbar);
+
+    if (firstMenuItemId) {
+      // set focus on first menu item
+      setFocus(firstMenuItemId);
+    }
+  } catch (error) {
+    logger.log({
+      message: "setFocusOnMenu – failed to put focus on top-menu",
+      data: {
+        currentRoute,
+        error,
+      },
+    });
+  }
+}
+
+export async function setFocusOnContent(currentRoute: string) {
+  // we need to put focus on content here
+  // For doing it we have to wait registration of first focusable node into focusableTree
+  // we wait until content node starts having children
+
+  const { setInitialFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+    await waitForContent(focusableTree);
+
+    const content = getContentNode(focusableTree);
+
+    const { success } = setInitialFocus(content);
+
+    if (!success) {
+      // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
+      throw Error(
+        "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
+      );
+    }
+  } catch (error) {
+    setFocusOnContent(currentRoute);
+  }
+}

package/appUtils/focusManagerAux/utils/index.ts

@@ -0,0 +1,100 @@
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
+
+// run check each 300 ms
+// run this check too often could lead to performance penalty on low-end devices
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

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/keyCodes/keys.web.js

@@ -1,6 +1,7 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
 
+import { isVizioPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 
@@ -21,6 +22,13 @@ export const ARROW_KEYS = [
   KEYS.ArrowRight,
 ];
 
+/**
+ * Platform.OS currently identifies Vizio as LG_TV, therefore we are using isVizioPlatform to identify platform and add keys.
+ */
+if (isVizioPlatform()) {
+  Object.assign(KEYS, platformKeys.vizio);
+}
+
 /**
  * In TizenOS we need to register all of the keys that we are going to use.
  * You need to register using the name Tizen has for the key.

package/appUtils/keyCodes/keysByPlatform.js

@@ -102,4 +102,14 @@ const tvos = {
   Menu: { code: "Menu", eventType: "menu" },
 };
 
-export { lg_tv, samsung_tv, web, tvos, android_tv };
+const vizio = {
+  ...samsung_tv,
+  Exit: { code: "Exit", keyCode: 27 },
+  PageUp: { code: "PageUp", keyCode: 33 },
+  PageDown: { code: "PageDown", keyCode: 34 },
+  MediaTrackNext: { code: "MediaTrackNext", keyCode: 418 },
+  MediaTrackPrevious: { code: "MediaTrackPrevious", keyCode: 419 },
+  PrevCh: { code: "PrevCh", keyCode: 500 },
+};
+
+export { lg_tv, samsung_tv, web, tvos, android_tv, vizio };

package/appUtils/platform/const.ts

@@ -0,0 +1,25 @@
+/**
+ * Platforms found in userAgent string, please note that simulators
+ * might not have the same agents that the devices have
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};
+
+/**
+ * Keys used to store the platform / device state in the session storage
+ */
+export const PLATFORM_KEYS = {
+  deviceClosedCaptioningEnabled: "device_closed_captioning_enabled",
+};

package/appUtils/platform/index.ts

@@ -0,0 +1,3 @@
+export * from "./platformUtils";
+
+export * from "./const";

package/appUtils/platform/platformUtils.ts

@@ -0,0 +1,217 @@
+import { BehaviorSubject } from "rxjs";
+
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import {
+  isLgPlatform,
+  isSamsungPlatform,
+} from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
+
+import { PLATFORM_KEYS, PLATFORMS } from "./const";
+import { createLogger, utilsLogger } from "../../logger";
+
+declare global {
+  interface Window {
+    VIZIO?: {
+      exitApplication: () => void;
+      Chromevox: {
+        play: (text: string) => void;
+      };
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
+const { log_debug } = createLogger({
+  category: "General",
+  subsystem: "PlatformUtils",
+  parent: utilsLogger,
+});
+
+export const getUserAgent = () =>
+  window?.navigator?.userAgent || global?.navigator?.userAgent;
+
+/** VIZIO UTILS */
+
+/**
+ * Checks if we are on the Vizio platform by using the userAgent string
+ *
+ * Use this method when you need to identify the platform on runtime
+ * before the VIZIO Companion Library has loaded
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * Checks if we are on the Vizio platform by checking for the global VIZIO object
+ * and the VIZIO Companion Library. This method does not use the userAgent string,
+ * because it mainly checks whether we have access to apis, which may not be available yet
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};
+
+/**
+ * Manages device based closed captioning state
+ * Returns an observable that emits the current state and updates whenever it changes
+ */
+export class ClosedCaptioningManager {
+  private ccState$ = new BehaviorSubject<boolean>(false);
+  private static ccManagerInstance: ClosedCaptioningManager;
+
+  private constructor() {
+    this.initialize();
+  }
+
+  static getInstance(): ClosedCaptioningManager {
+    if (!ClosedCaptioningManager.ccManagerInstance) {
+      ClosedCaptioningManager.ccManagerInstance = new ClosedCaptioningManager();
+    }
+
+    return ClosedCaptioningManager.ccManagerInstance;
+  }
+
+  async initialize() {
+    const existingState = await sessionStorage.getItem(
+      PLATFORM_KEYS.deviceClosedCaptioningEnabled
+    );
+
+    log_debug("Initializing closed captioning manager", { existingState });
+
+    if (existingState !== null) {
+      this.ccState$.next(existingState === "true" || existingState === true);
+    }
+
+    if (hasVizioAPIs()) {
+      window.VIZIO!.setClosedCaptionHandler((isCCEnabled) => {
+        log_debug("CC state changed", { isCCEnabled });
+
+        sessionStorage.setItem(
+          PLATFORM_KEYS.deviceClosedCaptioningEnabled,
+          isCCEnabled
+        );
+
+        this.ccState$.next(isCCEnabled);
+      });
+    }
+  }
+
+  getCurrentState(): boolean {
+    return this.ccState$.getValue();
+  }
+
+  getStateAsObservable() {
+    return this.ccState$.asObservable();
+  }
+}
+
+/**
+ * Subscribe to closed captioning state changes
+ * @returns Observable<boolean>
+ * @example
+ * const subscription = getClosedCaptionState().subscribe(
+ *   isEnabled => setClosedCaptionState(isEnabled)
+ * );
+ * subscription.unsubscribe(), []);
+ */
+export const getClosedCaptionState = () => {
+  const ccManager = ClosedCaptioningManager.getInstance();
+
+  return ccManager.getStateAsObservable();
+};
+
+/**
+ * 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 (isSamsungPlatform() && window.speechSynthesis) {
+      const utterance = new SpeechSynthesisUtterance(text);
+      window.speechSynthesis.speak(utterance);
+    }
+
+    if (isLgPlatform() && window.webOS?.service) {
+      try {
+        window.webOS.service.request("luna://com.webos.service.tts", {
+          method: "speak",
+          onFailure(error: any) {
+            log_debug("There was a failure setting up webOS TTS service", {
+              error,
+            });
+          },
+          onSuccess(response: any) {
+            log_debug("webOS TTS service is configured successfully", {
+              response,
+            });
+          },
+          parameters: {
+            text,
+          },
+        });
+      } catch (error) {
+        log_debug("webOS TTS service error", { error });
+      }
+    }
+
+    if (!window.VIZIO?.Chromevox) return;
+
+    window.VIZIO.Chromevox.play(text);
+  }
+}

package/appUtils/playerManager/conts.ts

@@ -7,6 +7,7 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerPause = "onPlayerPause",
   OnLoad = "onLoad",
   OnError = "onError",
+  OnVideoError = "onVideoError",
   OnVideoEnd = "onVideoEnd",
   OnPlaybackRateChange = "onPlaybackRateChange",
   OnVideoLoad = "onVideoLoad",