@applicaster/zapp-react-native-utils 14.0.0-alpha.5974411329 → 14.0.0-alpha.6000342231

package/appUtils/focusManager/index.ts

@@ -3,6 +3,7 @@ import {
   isNilOrEmpty,
   isNotNil,
 } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { getFocusableId } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 import { Tree } from "./treeDataStructure/Tree";
 import {
@@ -14,6 +15,13 @@ import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
+import {
+  isTabsScreenOnContentFocused,
+  isCurrentFocusOnContent,
+  isCurrentFocusOnMenu,
+  isCurrentFocusOn,
+} from "../focusManagerAux/utils";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -100,7 +108,7 @@ export const focusManager = (function () {
    * @private
    * @param {Object} direction of the navigation which led to this action
    */
-  function focus(direction) {
+  function focus(direction, context?: FocusManager.FocusContext) {
     const currentFocusable = getCurrentFocus();
 
     if (
@@ -108,7 +116,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.setFocus(direction);
+      currentFocusable.setFocus(direction, context);
     }
   }
 
@@ -205,7 +213,7 @@ export const focusManager = (function () {
    * @param {Array<string>} ids - An array of node IDs to update.
    * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
    */
-  const updateNodeFocus = (ids, action) => {
+  const updateNodeFocus = (ids, action, context: FocusManager.FocusContext) => {
     if (!ids || ids.length === 0) {
       return; // Nothing to do
     }
@@ -222,11 +230,13 @@ export const focusManager = (function () {
 
     // Function to apply the action (focus or blur)
     const applyAction = (node) => {
+      const direction = undefined;
+
       if (node && node.component) {
         if (action === "focus") {
-          node.component.setFocus();
+          node.component.setFocus(direction, context);
         } else if (action === "blur") {
-          node.component.setBlur();
+          node.component.setBlur(direction, context);
         }
       }
     };
@@ -253,7 +263,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the navigation, which led to this focus change
    * to another group or not. defaults to false
    */
-  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
+  function setFocus(
+    id: string,
+    direction?: FocusManager.Web.Direction,
+    context?: FocusManager.FocusContext
+  ) {
     if (focusDisabled) return false;
 
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
@@ -266,21 +280,68 @@ export const focusManager = (function () {
       );
 
       // Set focus on current node parents and blur on previous node parents
-      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
-      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS, context);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR, context);
 
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    focus(direction);
+    focus(direction, context);
+  }
+
+  function isFocusOnContent() {
+    return isCurrentFocusOnContent(currentFocusNode);
+  }
+
+  function isFocusOnMenu() {
+    return isCurrentFocusOnMenu(currentFocusNode);
+  }
+
+  function landFocusToWithoutScrolling(id) {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext = {
+        source: "back",
+        preserveScroll: true,
+      };
+
+      logger.log({ message: "landFocusTo", data: { id } });
+
+      blur(direction);
+      setFocus(id, direction, context);
+    }
+  }
+
+  function isTabsScreenContentFocused() {
+    return isTabsScreenOnContentFocused(currentFocusNode);
+  }
+
+  function focusOnSelectedTab(item: ZappEntry): void {
+    // Move focus to appropriate top navigation tab with context
+    const selectedTabId = getFocusableId(item.id);
+
+    // Set focus with back button context to tabs-menu
+    landFocusToWithoutScrolling(selectedTabId);
+  }
+
+  function focusOnSelectedTopMenuItem(
+    selectedMenuItemId: Option<string>
+  ): void {
+    // Set focus with back button context to top-menu
+    landFocusToWithoutScrolling(selectedMenuItemId);
   }
 
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(
+    lastAddedParentNode?: any,
+    context?: FocusManager.FocusContext
+  ) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
@@ -326,7 +387,7 @@ export const focusManager = (function () {
         },
       });
 
-      focusableItem && setFocus(focusCandidate.id, null);
+      focusableItem && setFocus(focusCandidate.id, null, context);
 
       return { success: true };
     }
@@ -546,6 +607,14 @@ export const focusManager = (function () {
     return preferredFocus[0];
   }
 
+  function isFocusOn(id): boolean {
+    return (
+      id &&
+      isCurrentFocusOnTheTopScreen() &&
+      isCurrentFocusOn(id, currentFocusNode)
+    );
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -576,5 +645,11 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
+    isFocusOnContent,
+    isFocusOnMenu,
+    isFocusOn,
+    focusOnSelectedTopMenuItem,
+    focusOnSelectedTab,
+    isTabsScreenContentFocused,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,14 +1,31 @@
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, pathOr, startsWith } from "ramda";
+import {
+  isNil,
+  last,
+  startsWith,
+  find,
+  pathOr,
+} from "@applicaster/zapp-react-native-utils/utils";
+
 import {
   QUICK_BRICK_CONTENT,
   QUICK_BRICK_NAVBAR,
 } from "@applicaster/quick-brick-core/const";
 
+import {
+  getFocusableId,
+  SCREEN_PICKER_CONTAINER,
+} from "@applicaster/zapp-react-native-utils/screenPickerUtils";
+
 // 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
 
+const isTopMenu = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
+const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
+const isRoot = (node) => node?.id === "root";
+
+const isScrenPicker = (node) => startsWith(SCREEN_PICKER_CONTAINER, node?.id);
+
 type Props = {
   maxTimeout: number;
   conditionFn: () => boolean;
@@ -49,7 +66,7 @@ export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
 
     const route = find((route) => route.id === currentRoute, routes);
 
-    return isNotNil(route);
+    return !isNil(route);
   };
 
   return waitUntil({
@@ -99,3 +116,95 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findSelectedTabId = (item: ZappEntry): string => {
+  const selectedTabId = getFocusableId(item.id);
+
+  return selectedTabId;
+};
+
+export const isTabsScreenOnContentFocused = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScrenPicker(node)) {
+    return true;
+  }
+
+  return isTabsScreenOnContentFocused(node.parent);
+};
+
+export const isCurrentFocusOnMenu = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return true;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  return isCurrentFocusOnMenu(node.parent);
+};
+
+export const isCurrentFocusOnContent = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return true;
+  }
+
+  return isCurrentFocusOnContent(node.parent);
+};
+
+export const isCurrentFocusOn = (id, node) => {
+  if (!node) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (node?.id === id) {
+    return true;
+  }
+
+  return isCurrentFocusOn(id, node.parent);
+};
+
+export const isChildOf = (focusableTree, childId, parentId) => {
+  if (isNil(childId) || isNil(parentId)) {
+    return false;
+  }
+
+  const childNode = focusableTree.findInTree(childId);
+
+  if (isNil(childNode)) {
+    return false;
+  }
+
+  if (childNode.parent?.id === parentId) {
+    return true;
+  }
+
+  return isChildOf(focusableTree, childNode.parent?.id, parentId);
+};

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -0,0 +1,35 @@
+import { ReplaySubject } from "rxjs";
+import { filter } from "rxjs/operators";
+import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+
+type FocusableID = string;
+type RegistrationEvent = {
+  id: FocusableID;
+  registered: boolean;
+};
+
+const isFocusableButton = (id: Option<FocusableID>): boolean =>
+  id && id.includes?.(BUTTON_PREFIX);
+
+const registeredSubject$ = new ReplaySubject<RegistrationEvent>(1);
+
+export const focusableButtonsRegistration$ = (focusableGroupId: string) =>
+  registeredSubject$.pipe(
+    filter(
+      (value) =>
+        value.registered && focusManager.isChildOf(value.id, focusableGroupId)
+    )
+  );
+
+export const emitRegistered = (id: Option<FocusableID>): void => {
+  if (isFocusableButton(id)) {
+    registeredSubject$.next({ id, registered: true });
+  }
+};
+
+export const emitUnregistered = (id: Option<FocusableID>): void => {
+  if (isFocusableButton(id)) {
+    registeredSubject$.next({ id, registered: false });
+  }
+};

package/appUtils/platform/platformUtils.ts

@@ -10,6 +10,7 @@ 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",
@@ -212,36 +213,65 @@ 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) {
       try {
         window.webOS.service.request("luna://com.webos.service.tts", {
           method: "speak",
-          onFailure(error: any) {
+          onFailure: (error: any) => {
             log_debug("There was a failure setting up webOS TTS service", {
               error,
             });
+
+            this.ttsState$.next(false);
           },
-          onSuccess(response: any) {
+          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) return;
+    if (!window.VIZIO?.Chromevox) {
+      // For platforms without TTS, estimate reading time
+      this.scheduleTTSComplete(text);
+
+      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/appUtils/playerManager/conts.ts

@@ -2,6 +2,27 @@ export const userPreferencesNamespace = "user_preferences";
 
 export const skipActionType = "show_skip";
 
+export class PlayerError
+  extends Error
+  implements QuickBrickPlayer.PlayerErrorI
+{
+  description: string;
+
+  constructor(message: string, description: string) {
+    super(message);
+    this.description = description;
+
+    Object.setPrototypeOf(this, PlayerError.prototype);
+  }
+
+  toObject() {
+    return {
+      error: this.message,
+      message: this.description,
+    };
+  }
+}
+
 export enum SharedPlayerCallBacksKeys {
   OnPlayerResume = "onPlayerResume",
   OnPlayerPause = "onPlayerPause",

package/arrayUtils/__tests__/allTruthy.test.ts

@@ -0,0 +1,24 @@
+import { allTruthy } from "..";
+
+describe("allTruthy", () => {
+  it("should return true when all values are true", () => {
+    expect(allTruthy([true, true, true])).toBe(true);
+  });
+
+  it("should return false when at least one value is false", () => {
+    expect(allTruthy([true, false, true])).toBe(false);
+  });
+
+  it("should return false when all values are false", () => {
+    expect(allTruthy([false, false, false])).toBe(false);
+  });
+
+  it("should return false for an empty array", () => {
+    expect(allTruthy([])).toBe(false);
+  });
+
+  it("should handle single-element arrays correctly", () => {
+    expect(allTruthy([true])).toBe(true);
+    expect(allTruthy([false])).toBe(false);
+  });
+});

package/arrayUtils/__tests__/anyThruthy.test.ts

@@ -0,0 +1,24 @@
+import { anyTruthy } from "..";
+
+describe("anyTruthy", () => {
+  it("should return true when at least one value is true", () => {
+    expect(anyTruthy([false, true, false])).toBe(true);
+  });
+
+  it("should return false when all values are false", () => {
+    expect(anyTruthy([false, false, false])).toBe(false);
+  });
+
+  it("should return true when all values are true", () => {
+    expect(anyTruthy([true, true, true])).toBe(true);
+  });
+
+  it("should return false for an empty array", () => {
+    expect(anyTruthy([])).toBe(false);
+  });
+
+  it("should handle single-element arrays correctly", () => {
+    expect(anyTruthy([true])).toBe(true);
+    expect(anyTruthy([false])).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -116,3 +116,8 @@ export const sample = (xs: unknown[]): unknown => {
 
   return xs[index];
 };
+
+export const allTruthy = (xs: boolean[]) =>
+  isFilledArray(xs) && xs.every(Boolean);
+
+export const anyTruthy = (xs: boolean[]) => xs.some(Boolean);

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -1,6 +1,5 @@
 import { getAllSpecificStyles } from "../manifestKeyParser";
 
-// Mock the dependencies
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   platformSelect: jest.fn((platforms) => platforms.samsung_tv), // Default to samsung for tests
 }));

package/configurationUtils/index.ts

@@ -399,7 +399,7 @@ export const populateConfigurationValues =
       flattenAndPopulateFields(fields, configuration, skipDefaults)
   );
 
-export const getAccesabilityProps = (item: ZappEntry) => ({
+export const getAccessibilityProps = (item: ZappEntry) => ({
   accessible: item?.extensions?.accessibility,
   accessibilityLabel: item?.extensions?.accessibility?.label || item?.title,
   accessibilityHint: item?.extensions?.accessibility?.hint,

package/focusManager/FocusManager.ts

@@ -2,11 +2,24 @@ import { path } from "ramda";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+} from "@applicaster/quick-brick-core/const";
+
 import { logger } from "./logger";
 import { TreeNode } from "./TreeNode";
 import { Tree } from "./Tree";
 import { subscriber } from "../functionUtils";
 import { getFocusableId, toFocusDirection } from "./utils";
+import {
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  findSelectedTabId,
+  contextWithoutScrolling,
+} from "./aux";
+
+export { contextWithoutScrolling } from "./aux";
 
 export {
   toFocusDirection,
@@ -221,7 +234,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 +264,7 @@ class FocusManager {
 
       FocusManager.instance.setPreviousNavigationDirection(options ?? null);
 
-      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {});
+      nextFocus?.current?.onFocus?.(nextFocus.current, options ?? {}, context);
     }
   }
 
@@ -291,7 +305,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 +331,7 @@ class FocusManager {
       }
 
       if (newFocusRef) {
-        FocusManager.instance.setNextFocus(newFocusRef, options);
+        FocusManager.instance.setNextFocus(newFocusRef, options, context);
       }
     }
   }
@@ -351,6 +366,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 +437,60 @@ class FocusManager {
       throw new Error(`Group with id ${id} not found`);
     }
   }
+
+  isFocusOnMenu(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_NAVBAR
+    );
+  }
+
+  isFocusOnContent(): boolean {
+    return this.isFocusableChildOf(
+      FocusManager.instance.focusedId,
+      QUICK_BRICK_CONTENT
+    );
+  }
+
+  private landFocusToWithoutScrolling = (id) => {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext =
+        contextWithoutScrolling("back");
+
+      logger.log({ message: "landFocusToWithoutScrolling", data: { id } });
+
+      this.setFocus(id, direction, context);
+    }
+  };
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTab(index: number): void {
+    const selectedTabId = findSelectedTabId(this.tree, index);
+
+    // Set focus with back button context to tabs-menu
+    this.landFocusToWithoutScrolling(selectedTabId);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  focusOnSelectedTopMenuItem(index: number, sectionKey: string): void {
+    const selectedMenuItemId = findSelectedMenuId(this.tree, {
+      index,
+      sectionKey,
+    });
+
+    // Set focus with back button context to top-menu
+    this.landFocusToWithoutScrolling(selectedMenuItemId);
+  }
+
+  isTabsScreenContentFocused(): boolean {
+    return isTabsScreenContentFocused(
+      this.tree,
+      FocusManager.instance.focusedId
+    );
+  }
 }
 
 export const focusManager = FocusManager.getInstance();