@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 16.0.0-rc.1

package/Components/MasterCell/DefaultComponents/LiveImage/__tests__/prepareEntry.test.ts

@@ -0,0 +1,352 @@
+import { prepareEntry } from "../index";
+
+const makeEntry = (overrides = {}): any => ({
+  content: { src: "https://example.com/video.mp4", type: "video/mp4" },
+  extensions: {},
+  ...overrides,
+});
+
+describe("prepareEntry", () => {
+  it("should return null when entry is null or undefined", () => {
+    expect(prepareEntry(null)).toBeNull();
+    expect(prepareEntry(undefined)).toBeNull();
+  });
+
+  describe("preview_playback_override", () => {
+    it("should deep merge override with entry, override taking precedence", () => {
+      const override = {
+        link: { href: "https://video-preload.com/id", rel: "self" },
+        extensions: {
+          brightcove: { video_id: 1234 },
+          preview: true,
+          free: true,
+          requires_authentication: false,
+        },
+      };
+
+      const entry = makeEntry({
+        extensions: {
+          preview_playback_override: override,
+          existing_field: "keep-me",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.extensions.brightcove.video_id).toBe(1234);
+      expect(result.extensions.preview).toBe(true);
+      expect(result.extensions.existing_field).toBe("keep-me");
+
+      expect(result.link).toEqual({
+        href: "https://video-preload.com/id",
+        rel: "self",
+      });
+
+      expect(result.content).toEqual(entry.content);
+    });
+
+    it("should override entry fields when both have the same key", () => {
+      const override = {
+        extensions: {
+          brightcove: { video_id: 9999 },
+        },
+        content: { src: "https://override.com/video.mp4" },
+      };
+
+      const entry = makeEntry({
+        extensions: {
+          preview_playback_override: override,
+          brightcove: { video_id: 1111, account_id: "abc" },
+        },
+        content: { src: "https://original.com/video.mp4", type: "video/mp4" },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.extensions.brightcove.video_id).toBe(9999);
+      expect(result.extensions.brightcove.account_id).toBe("abc");
+      expect(result.content.src).toBe("https://override.com/video.mp4");
+      expect(result.content.type).toBe("video/mp4");
+    });
+
+    it("should take priority over other playback sources", () => {
+      const override = {
+        link: { href: "https://override.com" },
+        extensions: { brightcove: { video_id: 5555 } },
+      };
+
+      const entry = makeEntry({
+        extensions: {
+          preview_playback_override: override,
+          brightcove: { preview_playback: "other-id" },
+          preview_playback: "https://other.com/video.mp4",
+        },
+        content: {
+          src: "https://example.com/video.mp4",
+          teaser: "https://teaser.com/video.mp4",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.link).toEqual({ href: "https://override.com" });
+      expect(result.extensions.brightcove.video_id).toBe(5555);
+    });
+  });
+
+  describe("brightcove preview_playback", () => {
+    it("should return entry with brightcove video_id replaced by preview_playback", () => {
+      const entry = makeEntry({
+        extensions: {
+          brightcove: {
+            video_id: "original-id",
+            preview_playback: "preview-id",
+          },
+          some_other: "value",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result).toEqual({
+        ...entry,
+        extensions: {
+          ...entry.extensions,
+          brightcove: {
+            video_id: "preview-id",
+            preview_playback: "preview-id",
+          },
+        },
+      });
+    });
+
+    it("should preserve other extensions", () => {
+      const entry = makeEntry({
+        extensions: {
+          brightcove: { preview_playback: "preview-id" },
+          custom_field: "keep-me",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.extensions.custom_field).toBe("keep-me");
+    });
+  });
+
+  describe("extensions.preview_playback (non-brightcove)", () => {
+    it("should return entry with content.src set to preview_playback URL", () => {
+      const entry = makeEntry({
+        extensions: { preview_playback: "https://preview.com/video.m3u8" },
+        content: { src: "https://original.com/video.mp4" },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.content.src).toBe("https://preview.com/video.m3u8");
+    });
+
+    it("should preserve other content fields", () => {
+      const entry = makeEntry({
+        extensions: { preview_playback: "https://preview.com/video.m3u8" },
+        content: { src: "https://original.com/video.mp4", type: "video/mp4" },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.content.type).toBe("video/mp4");
+    });
+  });
+
+  describe("content.teaser", () => {
+    it("should return entry with content.src set to teaser URL", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: {
+          src: "https://original.com/video.mp4",
+          teaser: "https://teaser.com/teaser.mp4",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.content.src).toBe("https://teaser.com/teaser.mp4");
+    });
+  });
+
+  describe("brightcove video_id (without preview_playback)", () => {
+    it("should return the entry as-is when brightcove video_id exists", () => {
+      const entry = makeEntry({
+        extensions: { brightcove: { video_id: "some-id" } },
+        content: { src: "" },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result).toBe(entry);
+    });
+  });
+
+  describe("content.src fallback", () => {
+    it("should return null when content.src is missing", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: {},
+      });
+
+      expect(prepareEntry(entry)).toBeNull();
+    });
+
+    it("should return null when content.src is empty", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: { src: "" },
+      });
+
+      expect(prepareEntry(entry)).toBeNull();
+    });
+
+    it("should return entry when content.type starts with video", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: { src: "https://example.com/stream", type: "video/mp4" },
+      });
+
+      expect(prepareEntry(entry)).toBe(entry);
+    });
+
+    it("should return entry when src has a known video extension", () => {
+      const extensions = ["m3u8", "mp4", "m4v", "mkv", "mov", "mpd", "ogv"];
+
+      for (const ext of extensions) {
+        const entry = makeEntry({
+          extensions: {},
+          content: { src: `https://example.com/video.${ext}` },
+        });
+
+        expect(prepareEntry(entry)).toBe(entry);
+      }
+    });
+
+    it("should return entry for audio extensions", () => {
+      const extensions = ["mp3", "oga", "opus"];
+
+      for (const ext of extensions) {
+        const entry = makeEntry({
+          extensions: {},
+          content: { src: `https://example.com/audio.${ext}` },
+        });
+
+        expect(prepareEntry(entry)).toBe(entry);
+      }
+    });
+
+    it("should return null for non-video/non-audio URLs", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: { src: "https://example.com/page.html" },
+      });
+
+      expect(prepareEntry(entry)).toBeNull();
+    });
+
+    it("should return null for URLs without extensions", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: { src: "https://example.com/stream" },
+      });
+
+      expect(prepareEntry(entry)).toBeNull();
+    });
+  });
+
+  describe("priority order", () => {
+    it("should prefer brightcove.preview_playback over extensions.preview_playback", () => {
+      const entry = makeEntry({
+        extensions: {
+          brightcove: { preview_playback: "bc-preview" },
+          preview_playback: "ext-preview",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.extensions.brightcove.video_id).toBe("bc-preview");
+    });
+
+    it("should prefer extensions.preview_playback over content.teaser", () => {
+      const entry = makeEntry({
+        extensions: { preview_playback: "https://preview.com/video.mp4" },
+        content: {
+          src: "https://original.com/video.mp4",
+          teaser: "https://teaser.com/video.mp4",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.content.src).toBe("https://preview.com/video.mp4");
+    });
+
+    it("should prefer preview_playback_override over all other sources", () => {
+      const override = {
+        extensions: { brightcove: { video_id: "override-id" } },
+      };
+
+      const entry = makeEntry({
+        extensions: {
+          preview_playback_override: override,
+          brightcove: { preview_playback: "bc-preview", video_id: "original" },
+          preview_playback: "https://ext-preview.com/video.mp4",
+        },
+        content: {
+          src: "https://original.com/video.mp4",
+          teaser: "https://teaser.com/video.mp4",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.extensions.brightcove.video_id).toBe("override-id");
+    });
+
+    it("should prefer content.teaser over brightcove.video_id", () => {
+      const entry = makeEntry({
+        extensions: { brightcove: { video_id: "some-id" } },
+        content: {
+          src: "https://original.com/video.mp4",
+          teaser: "https://teaser.com/teaser.mp4",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.content.src).toBe("https://teaser.com/teaser.mp4");
+    });
+
+    it("should prefer content.teaser over content.src URL check", () => {
+      const entry = makeEntry({
+        extensions: {},
+        content: {
+          src: "https://original.com/video.mp4",
+          teaser: "https://teaser.com/teaser.m3u8",
+        },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result.content.src).toBe("https://teaser.com/teaser.m3u8");
+    });
+
+    it("should prefer brightcove.video_id over content.src URL check", () => {
+      const entry = makeEntry({
+        extensions: { brightcove: { video_id: "bc-id" } },
+        content: { src: "https://example.com/page.html" },
+      });
+
+      const result = prepareEntry(entry);
+
+      expect(result).toBe(entry);
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -0,0 +1,136 @@
+import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
+
+const { log_debug, log_error } = loggerLiveImageManager;
+
+export type PreloadHookConfig = ZappPreloadPlugins & {
+  configuration: any;
+};
+
+function runHookWithCallback(
+  invoke: (
+    payload: any,
+    callback: (result: hookCallbackArgs) => void,
+    abortCallback: () => void
+  ) => void,
+  payload: any
+): Promise<{ payload: any; aborted: boolean }> {
+  return new Promise((resolve, reject) => {
+    const abortCallback = () => {
+      resolve({ payload, aborted: true });
+    };
+
+    try {
+      invoke(
+        payload,
+        ({
+          success,
+          error,
+          payload: resultPayload,
+          abort,
+        }: hookCallbackArgs) => {
+          if (error) {
+            reject(error);
+          } else if (!success || abort) {
+            resolve({ payload: resultPayload ?? payload, aborted: true });
+          } else {
+            resolve({ payload: resultPayload ?? payload, aborted: false });
+          }
+        },
+        abortCallback
+      );
+    } catch (error) {
+      log_error(`Error running preload hook: ${error.message}`, { error });
+      reject(error);
+    }
+  });
+}
+
+// TODO: Move this function to a more generic place,
+//  as it can be used by other components that want to run preload hooks
+//  and add test coverage for it
+export async function executePreloadHooks({
+  preloadHooks,
+  entry,
+}: {
+  preloadHooks: PreloadHookConfig[];
+  entry: ZappEntry;
+}): Promise<ZappEntry | null> {
+  if (!preloadHooks?.length) {
+    return entry;
+  }
+
+  const sortedHooks = [...preloadHooks].sort(
+    (a, b) => (a.weight || 0) - (b.weight || 0)
+  );
+
+  const hookNames = sortedHooks.map((hook) => hook.identifier).join(", ");
+
+  log_debug(
+    `Preload hook sequence: ${hookNames}, entry: ${entry.id} - ${entry.title}`
+  );
+
+  let payload: any = entry;
+
+  let needsAbort = false;
+  const plugins = appStore.get("plugins");
+
+  for (const hookConfig of sortedHooks) {
+    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+
+    if (!plugin?.module) {
+      log_debug(
+        `Preload hook plugin not found: ${hookConfig.identifier}, skipping`
+      );
+
+      continue;
+    }
+
+    const { module: hookModule } = plugin;
+
+    if (hookModule.skipHook?.(payload)) {
+      log_debug(`Skipping hook: ${hookConfig.identifier}`);
+
+      continue;
+    }
+
+    if (hookModule.runInBackground) {
+      log_debug(
+        `Running background hook: ${hookConfig.identifier}, entry: ${payload?.id} - ${payload?.title}`
+      );
+
+      const result = await runHookWithCallback(
+        (item, callback, abortCallback) =>
+          hookModule
+            .runInBackground(item, callback, hookConfig, abortCallback)
+            ?.catch?.((error: Error) => {
+              log_error(
+                `Error running background preload hook: ${hookConfig.identifier}, error: ${error.message}`,
+                { error }
+              );
+
+              callback({ success: false, payload: item, error });
+            }),
+        payload
+      );
+
+      payload = result.payload;
+      needsAbort = result.aborted;
+    }
+
+    if (needsAbort) {
+      log_debug(
+        `Preload hook requested abort: ${hookConfig.identifier}, stopping chain`
+      );
+
+      break;
+    }
+  }
+
+  if (needsAbort) {
+    return null;
+  }
+
+  return payload;
+}

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { merge, clone } from "@applicaster/zapp-react-native-utils/utils";
 import { Platform, View, ViewStyle } from "react-native";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -83,30 +83,22 @@ const removeAdsFromEntry = (entry) => {
     return entry;
   }
 
-  const newEntry = R.clone(entry);
+  const newEntry = clone(entry);
 
   delete newEntry.extensions.video_ads;
 
   return newEntry;
 };
 
-const prepareEntry = (entry) => {
+export const prepareEntry = (entry: ZappEntry) => {
   if (!entry) {
     return null;
   }
 
-  if (entry.extensions?.preview_playback) {
-    return {
-      ...entry,
-      content: { ...entry?.content, src: entry?.extensions?.preview_playback },
-    };
-  }
+  const previewPlaybackOverride = entry.extensions?.preview_playback_override;
 
-  if (entry.content?.teaser) {
-    return {
-      ...entry,
-      content: { ...entry?.content, src: entry?.content?.teaser },
-    };
+  if (previewPlaybackOverride) {
+    return merge({}, entry, previewPlaybackOverride);
   }
 
   const previewPlayback = entry.extensions?.brightcove?.preview_playback;
@@ -124,6 +116,20 @@ const prepareEntry = (entry) => {
     };
   }
 
+  if (entry.extensions?.preview_playback) {
+    return {
+      ...entry,
+      content: { ...entry?.content, src: entry?.extensions?.preview_playback },
+    };
+  }
+
+  if (entry.content?.teaser) {
+    return {
+      ...entry,
+      content: { ...entry?.content, src: entry?.content?.teaser },
+    };
+  }
+
   if (entry.extensions?.brightcove?.video_id) {
     return entry;
   }
@@ -167,14 +173,24 @@ function getFocusedState(
 const getPlayerConfig = (player_screen_id, actionIdentifier) => {
   if (player_screen_id) {
     const rivers = appStore.get("rivers");
+    const plugins = appStore.get("plugins");
     const playerScreen = rivers?.[player_screen_id] ?? null;
 
+    const preloadHooks = playerScreen?.hooks?.preload_plugins?.map((hook) => {
+      const configuration =
+        plugins.find((plugin) => plugin.identifier === hook.identifier)
+          ?.configuration || {};
+
+      return { ...hook, configuration, ...rivers[hook.screen_id] };
+    });
+
     // TODO: Check is it a player later
 
     // TODO: Add more dict if needed from the screen component, styles, data etc
     return {
       playerPluginId: playerScreen?.type ?? DEFAULT_PLAYER_IDENTIFIER,
       screenConfig: playerScreen?.general,
+      preloadHooks,
     };
   }
 
@@ -229,7 +245,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   const isCurrentlyFocused = useTrackCurrentAutoScrollingElement(componentId);
 
-  const { playerPluginId, screenConfig } =
+  const { playerPluginId, screenConfig, preloadHooks } =
     getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
 
   const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
@@ -239,8 +255,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   const isShouldRender =
     playerPlugin &&
-    getFocusedState(state, componentType, isCurrentlyFocused) &&
     playableEntry &&
+    getFocusedState(state, componentType, isCurrentlyFocused) &&
     cellUUID &&
     isSupportedTVForLiveImage() &&
     !isScreenReaderEnabled;
@@ -259,6 +275,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             imageKey={imageKey}
             item={playableEntry}
             audioMutedByDefault={audio_muted_by_default}
+            preloadHooks={preloadHooks}
           />
         </View>
       ) : null}

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+type Props = {
+  children?: React.ReactNode;
+  style?: Record<string, unknown>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onPress?: () => void;
+};
+
+export function PressableView({
+  children,
+  style = {},
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+  onPress,
+}: Props) {
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onPress}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={style}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+}

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -45,6 +45,7 @@ export const useTextLabel = ({ label, entry }): string => {
   const [entryStateLocal, setEntryStateLocal] =
     React.useState(initialEntryState);
 
+  // For favourites
   React.useEffect(() => {
     return action?.addListeners?.(({ entryState, entry: actionEntry }) => {
       if (entry.id === actionEntry.id) {
@@ -53,6 +54,16 @@ export const useTextLabel = ({ label, entry }): string => {
     });
   }, []);
 
+  // For rest actions
+  React.useEffect(() => {
+    // Update entryStateLocal when action state changes. Example: state change when pressing the download button.
+    if (typeof action?.addListener === "function") {
+      return action.addListener(String(entry?.id), (nextState) => {
+        setEntryStateLocal(nextState);
+      });
+    }
+  }, []);
+
   if (context && name && action) {
     return prepareHebrewText(extractLabel(entryStateLocal.label, name), isRTL);
   }

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -7,7 +7,6 @@ import {
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
-import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
@@ -70,12 +69,9 @@ const _Text = ({
 
   return (
     <Text
-      style={[
-        withScaledLineHeight(withFocusedStyles({ style, otherProps })),
-        { height },
-      ]}
-      allowFontScaling={false}
+      style={[withFocusedStyles({ style, otherProps }), { height }]}
       {...withoutLabel(otherProps)}
+      allowFontScaling={false}
     >
       {textLabel}
     </Text>