@applicaster/zapp-react-native-utils 12.0.0-rc.14 → 12.0.0-rc.140

package/analyticsUtils/{analyticsTracker.ts → playerAnalyticsTracker.ts}

@@ -5,16 +5,25 @@ import { postAnalyticEvent } from "./manager";
 import { isLive } from "../playerUtils";
 import { extensionsEvents } from "./AnalyticsEvents/helper";
 import { AD_EVENT, EVENT_TYPES, PLAYER_DISPLAY_STATES } from "./events";
+import { Player } from "../appUtils/playerManager/player";
 
-export class AnalyticsTracker {
+export interface PlayerAnalyticsTrackerI {
+  handleAnalyticEvent(
+    event: QuickBrickPlayer.Events,
+    eventData?: QuickBrickPlayer.EventData
+  ): void;
+  setPlayer(player: Player): void;
+}
+
+export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
   adTime: number | string;
   mediaTime: number | string;
-  entry: ZappEntry;
   eventType: string;
   playerState: QuickBrickPlayer.NativePlayerState;
+  private player: Player;
 
-  constructor(entry: any) {
-    this.entry = entry;
+  setPlayer(player: Player) {
+    this.player = player;
   }
 
   isAdBreak(event: string): boolean {
@@ -30,6 +39,10 @@ export class AnalyticsTracker {
     return !!isAdBreak;
   }
 
+  get entry(): ZappEntry {
+    return this.player?.getEntry();
+  }
+
   getDuration(
     event: QuickBrickPlayer.Events,
     eventData: QuickBrickPlayer.EventData
@@ -215,13 +228,9 @@ export class AnalyticsTracker {
 
   handleAnalyticEvent(
     event: QuickBrickPlayer.Events,
-    eventData: QuickBrickPlayer.EventData = {},
-    entry: ZappEntry,
-    playerState = null
+    eventData: QuickBrickPlayer.EventData = {}
   ) {
-    this.entry = entry;
-    this.playerState = playerState;
-
+    this.playerState = this.player?.getState();
     postAnalyticEvent(event, this.prepareAnalyticPayload(event, eventData));
   }
 }

package/appUtils/HooksManager/index.js

@@ -270,7 +270,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation

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,40 @@
+import { useEffect, useMemo } from "react";
+import { AccessibilityManager } from "./index";
+
+/**
+ * This hook is used to instantiate the accessibility manager and update localizations used by the class.
+ * If the plugin config is not provided or it does not contain any localizations, the accessibility manager will not be updated.
+ * We use the plugin configuration because it offers a flattened structure where we can easily access the accessibility labels and hints
+ * i.e. pluginConfiguration = {
+ *   accessibility_close_label: "Close",
+ *   accessibility_close_hint: "Press here to close",
+ * }
+ */
+export const useAccessibilityManager = (
+  pluginConfiguration: Record<string, any> = {}
+) => {
+  const accessibilityManager = useMemo(() => {
+    return AccessibilityManager.getInstance();
+  }, []);
+
+  useEffect(() => {
+    if (pluginConfiguration) {
+      accessibilityManager.updateLocalizations(pluginConfiguration);
+    }
+  }, [pluginConfiguration, accessibilityManager]);
+
+  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,155 @@
+import { BehaviorSubject } from "rxjs";
+import { accessibilityManagerLogger as logger } from "./logger";
+import { TTSManager } from "../platform/platformUtils";
+import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
+import { AccessibilityRole } from "react-native";
+
+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() {}
+
+  public static getInstance(): AccessibilityManager {
+    if (!AccessibilityManager._instance) {
+      AccessibilityManager._instance = new AccessibilityManager();
+    }
+
+    return AccessibilityManager._instance;
+  }
+
+  /**
+   * The method now accepts any object with localizations using a flattened structure
+   *
+   * i.e. { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" }
+   *
+   * No longer accepts:
+   *
+   * i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
+   */
+  public updateLocalizations(localizations: { [key: string]: string }) {
+    this.localizations = 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;
+  }) {
+    let textToRead = text;
+
+    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;
+      }
+
+      textToRead = localizedMessage;
+    }
+
+    this.ttsManager && this.ttsManager.readText(textToRead);
+
+    this.announcements$.next({
+      message: textToRead,
+      localizedMessage: keyOfLocalizedText ? textToRead : 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}`,
+        accessibilityRole: "button" as AccessibilityRole,
+        "aria-role": "button",
+      };
+    }
+
+    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,
+      accessibilityRole: "button" as AccessibilityRole,
+      "aria-role": "button",
+    };
+  }
+
+  public getInputAccessibilityProps(inputName: string): AccessibilityProps {
+    return {
+      accessibilityLabel: inputName,
+      accessibilityHint: `Enter text into ${inputName}`,
+      "aria-label": inputName,
+      "aria-description": `Enter text into ${inputName}`,
+      accessibilityRole: "textbox" as AccessibilityRole,
+      "aria-role": "textbox",
+    };
+  }
+
+  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/__tests__/__snapshots__/focusManager.test.js.snap

@@ -3,9 +3,7 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
-  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
-  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -23,6 +21,7 @@ Object {
   "getGroupById": [Function],
   "getGroupRootById": [Function],
   "invokeHandler": [Function],
+  "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
@@ -30,11 +29,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
+  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
-  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -14,10 +14,8 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("enableAutomaticFocus should not block setting focus", () => {
+  it("manages to land initial focus", () => {
     const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -31,31 +29,13 @@ describe("focusManager", () => {
       },
     });
 
+    const { success } = focusManager.setInitialFocus();
+
+    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
-  it("enableAutomaticFocus should block setting focus", () => {
-    const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.disableAutomaticFocus();
-
-    focusManager.register({
-      id: "1",
-      component: {
-        setFocus: mockSetFocus,
-        willReceiveFocus: function () {},
-        isMounted: function () {
-          return true;
-        },
-        props: { groupId: "121" },
-      },
-    });
-
-    expect(mockSetFocus).toBeCalledTimes(0);
-    expect(mockSetFocus).not.toBeCalledWith(null);
-  });
-
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

package/appUtils/focusManager/__tests__/index.test.ts

@@ -18,7 +18,6 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
-      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -27,10 +26,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
-      "disableAutomaticFocus",
-      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
+      "recoverFocus",
+      "isCurrentFocusOnTheTopScreen",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -1,10 +1,18 @@
 import * as R from "ramda";
+import {
+  isNilOrEmpty,
+  isNotNil,
+} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { Tree } from "./treeDataStructure/Tree";
-import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
+import {
+  findFocusableNode,
+  findPriorityItem,
+  haveSameParentBeforeRoot,
+} from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
-
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -44,21 +52,9 @@ export const focusManager = (function () {
   // focusable node which currently holds the focus
   let currentFocusNode = null;
   let lastFocusedId = null;
-  let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
-  function disableAutomaticFocus() {
-    logger.log({ message: "disableAutomaticFocus" });
-    focusAutoEnabled = false;
-  }
-
-  function enableAutomaticFocus() {
-    logger.log({ message: "focusManager: enableAutomaticFocus" });
-    focusAutoEnabled = true;
-  }
-
   function enableFocus() {
     focusDisabled = false;
   }
@@ -93,7 +89,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(currentFocusable, direction);
+      currentFocusable.blur(direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -226,32 +222,52 @@ export const focusManager = (function () {
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (preferredFocus && preferredFocus.length > 0) {
-      const focusCandidate = preferredFocus[0];
-      const focusableItem = focusCandidate.component;
-
-      if (
-        focusableItem &&
-        !focusableItem.isGroup &&
-        isFocusEnabled(focusableItem)
-      ) {
-        if (initialFocusOnContent) {
-          blur();
-          initialFocusOnContent = false;
-        }
+    if (isNilOrEmpty(preferredFocus)) {
+      return { success: false };
+    }
 
-        logger.log({
-          message: "setInitialFocus – currentFocusNode",
-          data: {
-            focusableItem,
-          },
-        });
+    const focusCandidate = preferredFocus[0];
+    const focusableItem = focusCandidate.component;
 
-        currentFocusNode = focusCandidate;
-        focusableItem.willReceiveFocus(focusableItem, null);
-        focusableItem && setFocus(focusCandidate.id, null);
-      }
+    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
+    const nextFocusedId = R.path(["props", "id"], focusableItem);
+
+    if (
+      isNotNil(currentFocusedId) &&
+      isNotNil(nextFocusedId) &&
+      currentFocusedId === nextFocusedId
+    ) {
+      // we are going to move focus to the same node(already focused) -> nothing to do
+      return { success: true };
+    }
+
+    if (focusableItem?.isGroup) {
+      // focusCandidate is a FocusableGroup, we are not able to land focus on group(only on Focusable)
+      return { success: false };
+    }
+
+    if (
+      focusableItem &&
+      !focusableItem.isGroup &&
+      isFocusEnabled(focusableItem)
+    ) {
+      blur();
+
+      logger.log({
+        message: "setInitialFocus – currentFocusNode",
+        data: {
+          focusableItem,
+        },
+      });
+
+      currentFocusNode = focusCandidate;
+      focusableItem.willReceiveFocus(focusableItem, null);
+      focusableItem && setFocus(focusCandidate.id, null);
+
+      return { success: true };
     }
+
+    return { success: false };
   }
 
   function treeLoaded(val, node) {
@@ -261,17 +277,8 @@ export const focusManager = (function () {
         val,
         node,
         currentFocusNode,
-        initialFocusOnContent,
       },
     });
-
-    if ((val && !currentFocusNode) || initialFocusOnContent) {
-      logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
-
-      if (focusAutoEnabled) {
-        setInitialFocus(initialFocusOnContent ? node : undefined);
-      }
-    }
   }
 
   /**
@@ -402,11 +409,21 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  function setupInitialFocus(id: string, focusOnContent?: boolean) {
-    if (focusOnContent) {
-      initialFocusOnContent = focusOnContent;
-    } else {
-      setFocus(id);
+  function isCurrentFocusOnTheTopScreen() {
+    const routes = R.pathOr([], ["root", "children"], focusableTree);
+
+    if (routes.length <= 1) {
+      // there is only one or zero routes
+      return true;
+    }
+
+    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
+  }
+
+  function recoverFocus() {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We've failed to set focused node on the new screen => run focus recovery
+      setInitialFocus();
     }
   }
 
@@ -416,6 +433,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We are opening new screen. We need to ignore movement of focus.
+      return false;
+    }
+
     if (focusDisabled) return false;
 
     if (currentFocusNode) {
@@ -444,8 +466,6 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
-    } else {
-      setInitialFocus();
     }
   }
 
@@ -505,7 +525,6 @@ export const focusManager = (function () {
     on,
     invokeHandler,
     removeHandler,
-    setupInitialFocus,
     longPress,
     pressOut,
     enableFocus,
@@ -514,9 +533,9 @@ export const focusManager = (function () {
     isFocusDisabled,
     getCurrentFocusNode,
     focusableTree,
-    disableAutomaticFocus,
-    enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
+    recoverFocus,
+    isCurrentFocusOnTheTopScreen,
   };
 })();