@applicaster/zapp-react-native-utils 14.0.0-alpha.1101330035 → 14.0.0-alpha.1152359078

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -5,6 +5,7 @@ import { createLogger, utilsLogger } from "../../../logger";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import {
   findPluginByIdentifier,
+  loadFeedEntry,
   loadFeedAndPrefetchThumbnailImage,
   parseTimeToSeconds,
   retrieveFeedUrl,
@@ -26,6 +27,19 @@ type ChapterMarkerOriginal = {
   actions: ActionChapter[];
 };
 
+export type LiveMetadataEvent = {
+  programId: string;
+  assetId: string;
+  title: string;
+  programStartTime: string;
+  programEndTime: string;
+};
+
+export type LiveMetadataConfig = {
+  updateUrl: string;
+  updateInterval: number;
+};
+
 export type TitleSummaryEvent = {
   title: string | number;
   summary: string | number;
@@ -50,11 +64,13 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private liveMetadataSubject: BehaviorSubject<LiveMetadataEvent>;
   private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
   private feedUrl: string;
   private reloadData: () => void;
   private updateTitleAndDescription: (data: any) => void;
   private feedDataInterval: any;
+  private liveMetadataUpdateInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -66,13 +82,17 @@ export class OverlaysObserver {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
 
+    this.player = player;
+    this.entry = player.getEntry();
+
     this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
-      title: player.getEntry()?.title || "",
-      summary: player.getEntry()?.summary || "",
+      title: this.entry?.title || "",
+      summary: this.entry?.summary || "",
     });
 
-    this.entry = player.getEntry();
-    this.player = player;
+    this.liveMetadataSubject = new BehaviorSubject<LiveMetadataEvent>(
+      this.entry?.extensions?.liveMetadata || null
+    );
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
@@ -80,7 +100,9 @@ export class OverlaysObserver {
     this.reloadData = () => {};
     this.updateTitleAndDescription = () => {};
     this.feedDataInterval = null;
+    this.liveMetadataUpdateInterval = null;
     void this.preparePlayNext();
+    void this.prepareLiveMetadata();
   }
 
   private setupFeedDataInterval(interval: number) {
@@ -98,6 +120,13 @@ export class OverlaysObserver {
     }
   }
 
+  public clearLiveMetadataUpdateInterval() {
+    if (this.liveMetadataUpdateInterval) {
+      clearInterval(this.liveMetadataUpdateInterval);
+      this.liveMetadataUpdateInterval = null;
+    }
+  }
+
   public setFeedDataHandlers(
     feedUrl: string,
     reloadData: () => void,
@@ -197,6 +226,48 @@ export class OverlaysObserver {
     }
   };
 
+  prepareLiveMetadata = async () => {
+    if (!this.player?.isLive?.()) {
+      log_debug("prepareLiveMetadata: Player is not live. Skipping...");
+
+      return;
+    }
+
+    const config: LiveMetadataConfig =
+      this.entry?.extensions?.liveMetadataConfig;
+
+    if (!config?.updateUrl || !config?.updateInterval) {
+      log_debug(
+        "prepareLiveMetadata: Live metadata configuration is not available. Skipping...",
+        { config }
+      );
+
+      return;
+    }
+
+    const reloadData = async () => {
+      try {
+        const entry = await loadFeedEntry(config.updateUrl, this.entry);
+
+        this.onLiveMetadataUpdated(entry?.extensions?.liveMetadata || null);
+      } catch (error) {
+        log_error("prepareLiveMetadata: Metadata fetching failed", {
+          error,
+          config,
+        });
+      }
+    };
+
+    log_debug("prepareLiveMetadata: Setting up live metadata observer update", {
+      config,
+    });
+
+    const interval = Number(config?.updateInterval) || 60;
+
+    this.clearLiveMetadataUpdateInterval();
+    this.liveMetadataUpdateInterval = setInterval(reloadData, interval * 1000);
+  };
+
   // TODO: Hack for video end, will be replaced with playlist prev/next in the future
   getPlayNextEntry = () =>
     !this.isCanceledByUser ? this.playNextConfig?.entry : null;
@@ -317,9 +388,11 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.liveMetadataSubject.complete();
     this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
     this.clearFeedDataInterval();
+    this.clearLiveMetadataUpdateInterval();
     this.releasePlayerObserver = null;
   };
 
@@ -352,4 +425,21 @@ export class OverlaysObserver {
         (prev, curr) => prev?.triggerTime === curr?.triggerTime
       )
     );
+
+  private onLiveMetadataUpdated = (liveMetadataEvent: LiveMetadataEvent) => {
+    this.liveMetadataSubject.next(liveMetadataEvent);
+  };
+
+  public getLiveMetadataObservable = (): Observable<LiveMetadataEvent> => {
+    return this.liveMetadataSubject.pipe(
+      distinctUntilChanged(
+        (prev, curr) =>
+          prev?.programId === curr?.programId && prev?.assetId === curr?.assetId
+      )
+    );
+  };
+
+  public getLiveMetadataValue = (): LiveMetadataEvent => {
+    return this.liveMetadataSubject.value;
+  };
 }

package/appUtils/playerManager/OverlayObserver/utils.ts

@@ -92,22 +92,26 @@ export const prefetchImage = (playableItem: ZappEntry, config: any = {}) => {
   }
 };
 
-export const loadFeedAndPrefetchThumbnailImage = async (
-  playNextFeedUrl: string,
-  entry: ZappEntry,
-  playNextPlugin
-) => {
+/**
+ * Loads a feed entry from the given feed URL using the provided Zapp entry as context.
+ *
+ * @param {string} feedUrl - The URL of the feed to load the entry from.
+ * @param {ZappEntry} entry - The Zapp entry to use as context for the request.
+ * @returns {Promise<ZappEntry>} A promise that resolves to the loaded Zapp entry.
+ * @throws {Error} If the feed loading fails or no entry is found in the response.
+ */
+export const loadFeedEntry = async (feedUrl: string, entry: ZappEntry) => {
   const requestBuilder = new RequestBuilder()
     .setEntryContext(entry)
     .setScreenContext({} as ZappRiver)
-    .setUrl(playNextFeedUrl);
+    .setUrl(feedUrl);
 
   const responseObject = await requestBuilder.call<ZappEntry>();
   const responseHelper = new PipesClientResponseHelper(responseObject);
 
   if (responseHelper.error) {
     log_error(
-      `loadFeedAndPrefetchThumbnailImage: loading failed with error: ${responseHelper.error.message}. Play next observer, will not be executed`,
+      `loadFeedEntry: loading failed with error: ${responseHelper.error.message}. Observer will not be executed`,
       {
         response: responseHelper.getLogsData(),
       }
@@ -116,29 +120,37 @@ export const loadFeedAndPrefetchThumbnailImage = async (
     throw responseHelper.error;
   } else {
     log_info(
-      `loadFeedAndPrefetchThumbnailImage: Play next url was successfully loaded for url: ${playNextFeedUrl}. Prefetching image`,
+      `loadFeedEntry: Feed was successfully loaded for url: ${feedUrl}`,
       responseHelper.getLogsData()
     );
 
-    const playNextEntry = responseHelper.responseData?.entry[0];
+    const entry = responseHelper.responseData?.entry[0];
 
-    if (!playNextEntry) {
-      log_error(
-        "loadFeedAndPrefetchThumbnailImage: Can not retrieve play next entry, feed was loaded but no entry was found",
-        responseHelper.getLogsData()
-      );
+    if (!entry) {
+      const error =
+        "loadFeedEntry: Can not retrieve entry, feed was loaded but no entry was found";
 
-      throw new Error(
-        "Can not retrieve play next entry, feed was loaded but no entry was found"
-      );
-    }
+      log_error(error, responseHelper.getLogsData());
 
-    prefetchImage(playNextEntry, playNextPlugin?.configuration);
+      throw new Error(error);
+    }
 
-    return playNextEntry;
+    return entry;
   }
 };
 
+export const loadFeedAndPrefetchThumbnailImage = async (
+  playNextFeedUrl: string,
+  entry: ZappEntry,
+  playNextPlugin
+) => {
+  const playNextEntry = await loadFeedEntry(playNextFeedUrl, entry);
+
+  prefetchImage(playNextEntry, playNextPlugin?.configuration);
+
+  return playNextEntry;
+};
+
 export const findPluginByIdentifier = (
   identifier: string,
   plugins: ZappPlugin[]

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

@@ -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);
 };
 
@@ -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/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;

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();

package/focusManager/aux/index.ts

@@ -0,0 +1,98 @@
+import { isNil, pathOr } from "@applicaster/zapp-react-native-utils/utils";
+
+import {
+  QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_NAVBAR_SECTIONS,
+} from "@applicaster/quick-brick-core/const";
+
+const isNavBar = (node) => QUICK_BRICK_NAVBAR === node?.id;
+const isContent = (node) => QUICK_BRICK_CONTENT === node?.id;
+
+// SCREEN_PICKER_SELECTOR_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerSelectorContainerId;
+
+export const onRegisterScreenPickerSelectorContainer = (id) => {
+  screenPickerSelectorContainerId = id;
+};
+
+export const onUnregisterScreenPickerSelectorContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerSelectorContainerId === id) {
+    screenPickerSelectorContainerId = undefined;
+  }
+};
+// SCREEN_PICKER_SELECTOR_CONTAINER
+
+// SCREEN_PICKER_CONTENT_CONTAINER(we assume there is only one SCREEN_PICKER)
+let screenPickerContentContainerId;
+
+export const onRegisterScreenPickerContentContainer = (id) => {
+  screenPickerContentContainerId = id;
+};
+
+export const onUnregisterScreenPickerContentContainer = (id) => {
+  // reset screenSelectorId on unregistration
+  if (screenPickerContentContainerId === id) {
+    screenPickerContentContainerId = undefined;
+  }
+};
+
+const isScreenPickerContentContainer = (node) =>
+  screenPickerContentContainerId === node?.id;
+
+// SCREEN_PICKER_CONTENT_CONTAINER
+
+export const findSelectedMenuId = (
+  focusableTree,
+  { index, sectionKey }: { index: number; sectionKey: string }
+) => {
+  const sectionName = QUICK_BRICK_NAVBAR_SECTIONS[sectionKey];
+
+  return pathOr(
+    undefined,
+    ["children", index, "id"],
+    focusableTree.find(sectionName)
+  );
+};
+
+export const findSelectedTabId = (focusableTree, index: number): string => {
+  const screenSelectorContainerNode = focusableTree.find(
+    screenPickerSelectorContainerId
+  );
+
+  const selectedTabId = screenSelectorContainerNode.children[index]?.id;
+
+  return selectedTabId;
+};
+
+export const isTabsScreenContentFocused = (focusableTree, id) => {
+  const node = focusableTree.find(id);
+
+  if (isNil(node)) {
+    return false;
+  }
+
+  if (isNavBar(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScreenPickerContentContainer(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(focusableTree, node.parentId);
+};
+
+export const contextWithoutScrolling = (
+  source: FocusManager.FocusContext["source"]
+): FocusManager.FocusContext => {
+  return {
+    source,
+    preserveScroll: true,
+  };
+};