@applicaster/zapp-react-native-utils 14.0.0-alpha.2247415563 → 14.0.0-alpha.2292190333

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/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/index.ts

@@ -93,7 +93,7 @@ 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);
 };
 

package/componentsUtils/__tests__/isTabsScreen.test.ts

@@ -0,0 +1,38 @@
+import { isTabsScreen } from "..";
+
+describe("isTabsScreen", () => {
+  it("should return true if the component type is 'screen-picker-qb-tv' and tabs_screen=true", () => {
+    const item = { component_type: "screen-picker-qb-tv", tabs_screen: true };
+    expect(isTabsScreen(item)).toBe(true);
+  });
+
+  it("should return true if the component type is 'screen-picker-qb-tv' and tabs_screen=false", () => {
+    const item = { component_type: "screen-picker-qb-tv", tabs_screen: false };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the component type is not 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "other-component" };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isTabsScreen(item)).toBe(false);
+  });
+});

package/componentsUtils/index.ts

@@ -5,7 +5,7 @@ const EMPTY_GROUP_COMPONENT = "empty_group_component";
 
 const GALLERY = "gallery-qb";
 
-const SCREEN_PICKER = "screen-picker-qb-tv";
+export const SCREEN_PICKER = "screen-picker-qb-tv";
 
 const HORIZONTAL_LIST = "horizontal_list_qb";
 
@@ -37,3 +37,6 @@ export const isEmptyGroup = (item): boolean =>
 export const isGroupInfo = (item): boolean =>
   item?.component_type === GROUP_INFO ||
   item?.component_type === GROUP_INFO_OLD;
+
+export const isTabsScreen = (item): boolean =>
+  isScreenPicker(item) && item?.tabs_screen;