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

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 {
@@ -15,12 +16,10 @@ import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
 import {
-  isTabsScreen,
-  findSelectedTabId,
-  findSelectedMenuId,
-  isTabsMenuFocused,
+  isTabsScreenOnContentFocused,
   isCurrentFocusOnContent,
   isCurrentFocusOnMenu,
+  isCurrentFocusOn,
 } from "../focusManagerAux/utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
@@ -300,7 +299,7 @@ export const focusManager = (function () {
     return isCurrentFocusOnMenu(currentFocusNode);
   }
 
-  function landFocusTo(id) {
+  function landFocusToWithoutScrolling(id) {
     if (id) {
       // set focus on selected menu item
       const direction = undefined;
@@ -310,38 +309,39 @@ export const focusManager = (function () {
         preserveScroll: true,
       };
 
+      logger.log({ message: "landFocusTo", data: { id } });
+
       blur(direction);
       setFocus(id, direction, context);
     }
   }
 
-  // Move focus to appropriate top navigation tab with context
-  function focusTopNavigation() {
-    // Store current focus for restoration
-    // this.storeFocusState();
-
-    if (isTabsScreen(focusableTree) && !isTabsMenuFocused(currentFocusNode)) {
-      const selectedTabId = findSelectedTabId(focusableTree);
-
-      console.log("debug_2", "FM - moveFocusToSelectedTab", { selectedTabId });
-
-      landFocusTo(selectedTabId);
-
-      return;
-    }
+  function isTabsScreenContentFocused() {
+    return isTabsScreenOnContentFocused(currentFocusNode);
+  }
 
-    // Set focus with back button context
-    const selectedMenuItemId = findSelectedMenuId(focusableTree);
+  function focusOnSelectedTab(item: ZappEntry): void {
+    // Move focus to appropriate top navigation tab with context
+    const selectedTabId = getFocusableId(item.id);
 
-    console.log("debug_2", "IM - moveFocusToTopMenu", { selectedMenuItemId });
+    // Set focus with back button context to tabs-menu
+    landFocusToWithoutScrolling(selectedTabId);
+  }
 
-    landFocusTo(selectedMenuItemId);
+  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
     );
@@ -387,7 +387,7 @@ export const focusManager = (function () {
         },
       });
 
-      focusableItem && setFocus(focusCandidate.id, null);
+      focusableItem && setFocus(focusCandidate.id, null, context);
 
       return { success: true };
     }
@@ -544,12 +544,6 @@ export const focusManager = (function () {
     return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
-  function isOnRootScreen() {
-    const routes = R.pathOr([], ["root", "children"], focusableTree);
-
-    return routes.length <= 1;
-  }
-
   function recoverFocus() {
     if (!isCurrentFocusOnTheTopScreen()) {
       // We've failed to set focused node on the new screen => run focus recovery
@@ -613,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
@@ -643,10 +645,11 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
-
-    focusTopNavigation,
     isFocusOnContent,
     isFocusOnMenu,
-    isOnRootScreen,
+    isFocusOn,
+    focusOnSelectedTopMenuItem,
+    focusOnSelectedTab,
+    isTabsScreenContentFocused,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Tree/index.js

@@ -142,7 +142,7 @@ export class Tree {
           this.hasGroupID(node)
             ? "Make sure that there are no id duplicates inside the " +
               existingNode.parent.id +
-              " group."
+              " group. This can as well happen when the component is re-mounted"
             : ""
         }`,
       });

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,15 +1,30 @@
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
-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 TABS_GROUP_ID = "PickerSelector.sp-river";
+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;
@@ -102,46 +117,94 @@ export const waitForContent = (focusableTree) => {
   });
 };
 
-export function isTabsScreen(focusableTree) {
-  const tabsGroup = focusableTree.findInTree(TABS_GROUP_ID);
+export const findSelectedTabId = (item: ZappEntry): string => {
+  const selectedTabId = getFocusableId(item.id);
 
-  return !!tabsGroup;
-}
+  return selectedTabId;
+};
 
-export const findSelectedTabId = (focusableTree) => {
-  // FIXME - find elegant way how to get ID of selected tab
-  const tabsGroup = focusableTree.findInTree(TABS_GROUP_ID);
+export const isTabsScreenOnContentFocused = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
 
-  const selectedTabId = tabsGroup.children.find(
-    (child) => child.component.props.preferredFocus // ?? selected
-  )?.id;
+  if (isTopMenu(node)) {
+    return false;
+  }
 
-  return selectedTabId;
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScrenPicker(node)) {
+    return true;
+  }
+
+  return isTabsScreenOnContentFocused(node.parent);
 };
 
-export const findSelectedMenuId = (focusableTree) => {
-  // Set focus with back button context
-  const navbar = getNavbarNode(focusableTree);
+export const isCurrentFocusOnMenu = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return true;
+  }
 
-  const selectedMenuItemId = find(
-    (child) => child.component.props.selected,
-    navbar.children
-  )?.id;
+  if (isContent(node)) {
+    return false;
+  }
 
-  return selectedMenuItemId;
+  return isCurrentFocusOnMenu(node.parent);
 };
 
-export const isTabsMenuFocused = (node) => {
-  // FIXME - find elegant way how to get ID of selected tab
-  return node.parent.id === TABS_GROUP_ID;
+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 isCurrentFocusOnMenu = (node) => {
-  // FIXME
-  return node.parent.id.startsWith(QUICK_BRICK_NAVBAR);
+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 isCurrentFocusOnContent = (node) => {
-  // FIXME
-  return !isCurrentFocusOnMenu(node);
+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/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[]