@applicaster/zapp-react-native-utils 14.0.0-alpha.1661204539 → 14.0.0-alpha.1740013076

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,89 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findSelectedTabId = (item: ZappEntry): string => {
+  const selectedTabId = getFocusableId(item.id);
+
+  return selectedTabId;
+};
+
+export const findSelectedMenuId = (focusableTree) => {
+  // Set focus with back button context
+  const navbar = getNavbarNode(focusableTree);
+
+  const selectedMenuItemId = find(
+    (child) => child.component.props.selected,
+    navbar.children
+  )?.id;
+
+  return selectedMenuItemId;
+};
+
+export const isTabsScreenContentFocused = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScrenPicker(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(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);
+};

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,9 +213,16 @@ 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) {
@@ -225,23 +233,45 @@ export class TTSManager {
             log_debug("There was a failure setting up webOS TTS service", {
               error,
             });
+
+            this.ttsState$.next(false);
           },
           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/OverlayObserver/OverlaysObserver.ts

@@ -18,13 +18,6 @@ export const { log_verbose, log_debug, log_info, log_error } = createLogger({
   parent: utilsLogger,
 });
 
-type ActionChapter = {
-  type: string;
-  options?: {
-    title: string;
-  };
-};
-
 type ChapterMarkerOriginal = {
   id: string;
   title: string;
@@ -33,14 +26,6 @@ type ChapterMarkerOriginal = {
   actions: ActionChapter[];
 };
 
-export type ChapterMarkerEvent = {
-  id: string;
-  title: string;
-  start_time: number;
-  end_time: number;
-  actions: ActionChapter[];
-};
-
 export type TitleSummaryEvent = {
   title: string | number;
   summary: string | number;

package/appUtils/playerManager/useChapterMarker.tsx

@@ -1,4 +1,3 @@
-import { ChapterMarkerEvent } from "./OverlayObserver/OverlaysObserver";
 import { usePlayer } from "./usePlayer";
 import * as React from "react";
 

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -5,6 +5,9 @@ import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
+import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";
+import { isTV } from "../../reactUtils";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -76,5 +79,18 @@ export const usePlayerControllerSetup = ({
     };
   }, [playerId, playerController]);
 
+  useEffect(() => {
+    if (!isTV()) {
+      return;
+    }
+
+    if (playerController) {
+      const seekController = new TVSeekController(playerController);
+      playerController.seekController = seekController;
+
+      return KeyInputHandler.getInstance().addListener(seekController);
+    }
+  }, [playerController]);
+
   return playerController;
 };

package/arrayUtils/__tests__/isEmptyArray.test.ts

@@ -0,0 +1,63 @@
+import { isEmptyArray } from "..";
+
+describe("isEmptyArray", () => {
+  it("non-empty array is not empty", () => {
+    const value = [1, 2, 3];
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("empty array is empty", () => {
+    const value = [];
+
+    expect(isEmptyArray(value)).toBe(true);
+  });
+
+  it("number is not array", () => {
+    const value = 123;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("string is not array", () => {
+    const value = "vfnjdk";
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("empty string is not array", () => {
+    const value = "";
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("NaN is not array", () => {
+    const value = NaN;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("object is not array", () => {
+    const value = { test: 1 };
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("empty object is not array", () => {
+    const value = {};
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("undefined is not array", () => {
+    const value = undefined;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+
+  it("null is not array", () => {
+    const value = null;
+
+    expect(isEmptyArray(value)).toBe(false);
+  });
+});

package/arrayUtils/__tests__/isFilledArray.test.ts

@@ -32,7 +32,7 @@ describe("isFilledArray", () => {
   });
 
   it("NaN is not array", () => {
-    const value = "";
+    const value = NaN;
 
     expect(isFilledArray(value)).toBe(false);
   });

package/arrayUtils/index.ts

@@ -93,18 +93,23 @@ export const isIndexInRange = (index: number, length: number): boolean => {
 export const makeListOfIndexes = (size: number): number[] =>
   Array.from({ length: size }, (_, index) => index);
 
-export const makeListOf = (value: unknown, size: number): number[] => {
+export const makeListOf = <T>(value: T, size: number): T[] => {
   return Array(size).fill(value);
 };
 
 /** Checks if a value is a non-empty array */
 export function isFilledArray(value: unknown): boolean {
-  return R.is(Array, value) && R.length(value) > 0;
+  return Array.isArray(value) && value.length > 0;
+}
+
+/** Checks if a value is a empty array */
+export function isEmptyArray(value: unknown): boolean {
+  return Array.isArray(value) && value.length === 0;
 }
 
 // get random item from the list
 export const sample = (xs: unknown[]): unknown => {
-  invariant(R.is(Array, xs), `input value is not a array: ${xs}`);
+  invariant(Array.isArray(xs), `input value is not an array: ${xs}`);
   invariant(isFilledArray(xs), `input array is empty: ${xs}`);
 
   const index = Math.floor(Math.random() * xs.length);

package/audioPlayerUtils/__tests__/getArtworkImage.test.ts

@@ -0,0 +1,144 @@
+import { getArtworkImage } from "..";
+import { DEFAULT_IMAGE } from "../assets";
+
+describe("getArtworkImage", () => {
+  const entryWithImage = {
+    media_group: [
+      {
+        type: "image",
+        media_item: [
+          { key: "artwork_key", src: "image_from_entry" },
+          { key: "other_key", src: "other_image" },
+        ],
+      },
+    ],
+    extensions: {
+      artwork_key: "artwork_key",
+    },
+  };
+
+  const entryWithoutImage = {
+    media_group: [
+      {
+        type: "image",
+        media_item: [{ key: "other_key", src: "other_image" }],
+      },
+    ],
+    extensions: {
+      artwork_key: "artwork_key",
+    },
+  };
+
+  const pluginConfigWithImage = {
+    artwork_key: "plugin_artwork_key",
+  };
+
+  it("returns image from entry extensions key", () => {
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: entryWithImage,
+      plugin_configuration: {},
+    });
+
+    expect(result).toBe("image_from_entry");
+  });
+
+  it("returns image from plugin configuration key if not in entry", () => {
+    const entryNoMatch = {
+      ...entryWithoutImage,
+      extensions: { artwork_key: "not_found_key" },
+    };
+
+    const pluginConfig = {
+      artwork_key: "plugin_artwork_key",
+    };
+
+    const entryWithPluginImage = {
+      ...entryNoMatch,
+      media_group: [
+        {
+          type: "image",
+          media_item: [{ key: "plugin_artwork_key", src: "image_from_plugin" }],
+        },
+      ],
+    };
+
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: entryWithPluginImage,
+      plugin_configuration: pluginConfig,
+    });
+
+    expect(result).toBe("image_from_plugin");
+  });
+
+  it("returns DEFAULT_IMAGE if neither entry nor plugin configuration has image", () => {
+    const entryNoImage = {
+      media_group: [
+        {
+          type: "image",
+          media_item: [{ key: "other_key", src: "other_image" }],
+        },
+      ],
+      extensions: { artwork_key: "not_found_key" },
+    };
+
+    const pluginConfig = { artwork_key: "not_found_key" };
+
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: entryNoImage,
+      plugin_configuration: pluginConfig,
+    });
+
+    expect(result).toBe(DEFAULT_IMAGE);
+  });
+
+  it("handles undefined key gracefully", () => {
+    const result = getArtworkImage({
+      key: undefined,
+      entry: entryWithImage,
+      plugin_configuration: pluginConfigWithImage,
+    });
+
+    expect(result).toBe(DEFAULT_IMAGE);
+  });
+
+  it("handles missing entry or plugin_configuration gracefully", () => {
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: undefined,
+      plugin_configuration: undefined,
+    });
+
+    expect(result).toBe(DEFAULT_IMAGE);
+  });
+
+  it("handles empty media_group", () => {
+    const entryEmptyMedia = {
+      media_group: [],
+      extensions: { artwork_key: "artwork_key" },
+    };
+
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: entryEmptyMedia,
+      plugin_configuration: pluginConfigWithImage,
+    });
+
+    expect(result).toBe(DEFAULT_IMAGE);
+  });
+
+  it("handles missing extensions/config keys", () => {
+    const entryNoExt = { media_group: [], extensions: {} };
+    const pluginConfig = {};
+
+    const result = getArtworkImage({
+      key: "artwork_key",
+      entry: entryNoExt,
+      plugin_configuration: pluginConfig,
+    });
+
+    expect(result).toBe(DEFAULT_IMAGE);
+  });
+});

package/audioPlayerUtils/__tests__/getBackgroundImage.test.ts

@@ -0,0 +1,72 @@
+import { getBackgroundImage } from "..";
+import { DEFAULT_IMAGE } from "../assets";
+
+describe("getBackgroundImage", () => {
+  const entryBase = {
+    media_group: [
+      {
+        media_item: [
+          { key: "image_key_1", src: "image_src_1" },
+          { key: "image_key_2", src: "image_src_2" },
+        ],
+        type: "image",
+      },
+    ],
+    extensions: {},
+  };
+
+  const pluginConfigBase = {};
+
+  it("returns image from entry.extensions.image_key if present", () => {
+    const entry = {
+      ...entryBase,
+      extensions: { image_key: "image_key_2" },
+    };
+
+    const result = getBackgroundImage({
+      entry,
+      plugin_configuration: pluginConfigBase,
+    });
+
+    expect(result).toBe("image_src_2");
+  });
+
+  it("returns audio_player_background_image from entry.extensions if present and no image_key image", () => {
+    const entry = {
+      ...entryBase,
+      extensions: { audio_player_background_image: "audio_img_ext" },
+    };
+
+    const result = getBackgroundImage({
+      entry,
+      plugin_configuration: pluginConfigBase,
+    });
+
+    expect(result).toBe("audio_img_ext");
+  });
+
+  it("returns image from plugin_configuration.audio_player_image_key if present and not found in entry.extensions", () => {
+    const entry = { ...entryBase };
+    const plugin_configuration = { audio_player_image_key: "image_key_1" };
+    const result = getBackgroundImage({ entry, plugin_configuration });
+    expect(result).toBe("image_src_1");
+  });
+
+  it("returns audio_player_background_image from plugin_configuration if present and not found in entry/extensions", () => {
+    const entry = { ...entryBase };
+
+    const plugin_configuration = {
+      audio_player_background_image: "audio_img_conf",
+    };
+
+    const result = getBackgroundImage({ entry, plugin_configuration });
+    expect(result).toBe("audio_img_conf");
+  });
+
+  it("returns DEFAULT_IMAGE if nothing is found", () => {
+    const entry = { media_group: [], extensions: {} };
+    const plugin_configuration = {};
+    const result = getBackgroundImage({ entry, plugin_configuration });
+    expect(result).toBe(DEFAULT_IMAGE);
+  });
+});

package/audioPlayerUtils/__tests__/getImageFromEntry.test.ts

@@ -0,0 +1,110 @@
+import { getImageFromEntry } from "..";
+
+const entry = {
+  media_group: [
+    {
+      media_item: [
+        {
+          key: "image_base_key",
+          src: "image_base_src",
+        },
+        {
+          key: "thumb_1",
+          src: null,
+        },
+        {
+          key: "thumb_2",
+          src: null,
+        },
+        {
+          key: "thumb_3",
+          src: null,
+        },
+      ],
+      type: "image",
+    },
+  ],
+};
+
+describe("getImageFromEntry", () => {
+  it("returns the src value for existing key", () => {
+    const result = getImageFromEntry({
+      entry,
+      imageKey: "image_base_key",
+    });
+
+    expect(result).toEqual("image_base_src");
+  });
+
+  it("returns undefined for non-existing key", () => {
+    const result = getImageFromEntry({
+      entry,
+      imageKey: "non_existing_key",
+    });
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for undefined key", () => {
+    const result = getImageFromEntry({
+      entry,
+      imageKey: undefined,
+    });
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for non string src", () => {
+    const entryWithNonStringSrc = {
+      media_group: [
+        {
+          media_item: [
+            {
+              key: "image_base_key",
+              src: 123,
+            },
+            {
+              key: "thumb_1",
+              src: null,
+            },
+          ],
+          type: "image",
+        },
+      ],
+    };
+
+    const result = getImageFromEntry({
+      entry: entryWithNonStringSrc,
+      imageKey: "image_base_key",
+    });
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for empty src", () => {
+    const entryWithEmptySrc = {
+      media_group: [
+        {
+          media_item: [
+            {
+              key: "image_base_key",
+              src: "",
+            },
+            {
+              key: "thumb_1",
+              src: null,
+            },
+          ],
+          type: "image",
+        },
+      ],
+    };
+
+    const result = getImageFromEntry({
+      entry: entryWithEmptySrc,
+      imageKey: "image_base_key",
+    });
+
+    expect(result).toBeUndefined();
+  });
+});