@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4429053208 → 15.0.0-alpha.4435057569

package/Components/Cell/Cell.tsx

@@ -26,11 +26,15 @@ type Props = {
     componentAnchorPointY: number;
     headerOffset?: number;
     extraAnchorPointYOffset?: number;
+    componentPaddingTop?: number;
   }) => void;
   offsetUpdater: (arg1: string, arg2: number, arg3: number) => number;
   componentId: string;
   component: {
     id: string;
+    styles?: {
+      component_padding_top?: number;
+    };
   };
   selected?: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -178,6 +182,8 @@ export class CellComponent extends React.Component<Props, State> {
         componentAnchorPointY,
         headerOffset,
         extraAnchorPointYOffset,
+        componentPaddingTop:
+          this.props?.component?.styles?.component_padding_top,
       });
     }
   }

package/Components/Cell/CellWithFocusable.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { useCellState } from "../MasterCell/utils";
 import { FocusableGroup } from "../FocusableGroup";
@@ -26,6 +27,13 @@ type Props = {
 
 const addPrefix = (id: string) => `focusable-cell-wrapper-${id}`;
 
+const wrapperStyles = {
+  flex: platformSelect({
+    tvos: 1,
+    default: undefined,
+  }),
+};
+
 export function CellWithFocusable(props: Props) {
   const {
     index,
@@ -94,6 +102,7 @@ export function CellWithFocusable(props: Props) {
       onFocus={onGroupFocus}
       onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
+      style={wrapperStyles}
     >
       <CellWrapper style={styles.cellWrapper}>
         <CellRenderer

package/Components/Focusable/FocusableTvOS.tsx

@@ -13,7 +13,7 @@ import { findNodeHandle, ViewStyle } from "react-native";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
-  emitDidFocused,
+  emitFocused,
   emitNativeRegistered,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
@@ -91,7 +91,7 @@ export class Focusable extends BaseFocusable<Props> {
     }
 
     const id: string = nativeEvent.itemID;
-    emitDidFocused(id);
+    emitFocused(id);
 
     onFocus(nativeEvent);
   }

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { compose } from "@applicaster/zapp-react-native-utils/utils";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -7,9 +6,6 @@ import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/L
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
-import { withAboveTabsScreenContextConsumer } from "@applicaster/zapp-react-native-ui-components/Contexts/AboveTabsScreenContext";
-
-import { useIsFocusEnabled } from "./hooks";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -91,8 +87,8 @@ class FocusableGroupComponent extends BaseFocusable<Props> {
   }
 }
 
-export const withFocusDisabledHOC = (Component) => {
-  return function WithFocusDisabledHOC(props) {
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
     // @ts-ignore
     const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
 
@@ -102,27 +98,8 @@ export const withFocusDisabledHOC = (Component) => {
 
     const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
 
-    return (
-      <Component
-        {...props}
-        isFocusDisabled={blockScreenFocus || props.isFocusDisabled}
-      />
-    );
-  };
-};
-
-const withAboveTabsScreenHOC = (Component) => {
-  return function WithAboveTabsScreenHOC(props) {
-    const { aboveTabsScreen } = props;
-
-    const isFocusEnabled = useIsFocusEnabled(aboveTabsScreen);
-
-    return <Component {...props} isFocusDisabled={!isFocusEnabled} />;
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
   };
 };
 
-export const FocusableGroup = compose(
-  withAboveTabsScreenContextConsumer,
-  withAboveTabsScreenHOC,
-  withFocusDisabledHOC
-)(FocusableGroupComponent);
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 import {
   getTransformedPreset,

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -9,10 +9,9 @@ import {
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import {
-  ZappPipesEntryContext,
   ZappPipesScreenContext,
   ZappPipesSearchContext,
 } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -136,7 +135,6 @@ export const useCurationAPI = (
     [components]
   );
 
-  const { pathname } = useRoute();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
@@ -146,10 +144,12 @@ export const useCurationAPI = (
     screenContextType === TABS_SCREEN_TYPE ||
     screenContextType === QB_TABS_SCREEN_TYPE;
 
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
-    pathname,
-    isNestedScreen
-  );
+  const screenContextData = useScreenContext();
+
+  const entryContext = ((isNestedScreen && screenContextData?.nested?.entry
+    ? screenContextData?.nested?.entry
+    : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+    {}) as ZappEntry;
 
   const urlsMap = useMemo<{ [key: string]: string }>(() => {
     const map = {};

package/Components/HandlePlayable/utils.ts

@@ -5,6 +5,14 @@ import {
 
 import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
 import { omit } from "@applicaster/zapp-react-native-utils/utils";
+import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+
+const { Logger } = getXray();
+
+const logger = new Logger(
+  "QuickBrick",
+  "packages/zapp-react-native-ui-components/Components/HandlePlayable"
+);
 
 const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
   if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
@@ -52,10 +60,25 @@ export const getPlayer = (
     if (type) {
       PlayerModule = findPluginByIdentifier(type, plugins)?.module;
 
+      if (!PlayerModule) {
+        logger.error({
+          message:
+            "PlayerModule is undefined – type mapping may be wrong or type not set for player",
+          data: {
+            type,
+            screen_id,
+            item_type_value: item?.type?.value,
+          },
+        });
+
+        return [null, {}];
+      }
+
       return getPlayerWithModuleProperties(PlayerModule);
     }
   }
 
+  // TODO: Probably should be removed, Youtube plugin is deprecated
   if (item?.content?.type === "youtube-id") {
     PlayerModule = findYoutubePlugin(plugins)?.module;
 
@@ -70,5 +93,13 @@ export const getPlayer = (
     )
   );
 
+  if (!PlayerModule) {
+    logger.error({
+      message: "PlayerModule is undefined – playable plugin not found",
+    });
+
+    return [null, {}];
+  }
+
   return getPlayerWithModuleProperties(PlayerModule);
 };

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,112 @@
+import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+
+const { log_debug } = createLogger({
+  category: "LiveImagePreloadHooks",
+  subsystem: "LiveVideo",
+});
+
+export type PreloadHookConfig = {
+  screen_id: string;
+  identifier: string;
+  type: string;
+  weight: number;
+  configuration: any;
+};
+
+type HookCallbackResult = {
+  success?: boolean;
+  error?: Error;
+  payload?: any;
+  callback?: Function;
+  cancelled?: boolean;
+  abort?: boolean;
+};
+
+function runHookWithCallback(
+  invoke: (
+    payload: any,
+    callback: (result: HookCallbackResult) => void
+  ) => void,
+  payload: any
+): Promise<any> {
+  return new Promise((resolve, reject) => {
+    invoke(payload, ({ error, payload: resultPayload }: HookCallbackResult) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(resultPayload ?? payload);
+      }
+    });
+  });
+}
+
+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)
+  );
+
+  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 preload hook: ${hookConfig.identifier}, entry: ${payload?.id} - ${payload?.title}`
+      );
+
+      payload = await runHookWithCallback(
+        (item, callback) =>
+          hookModule.runInBackground(item, callback, hookConfig, () => {
+            needsAbort = true;
+          }),
+        payload
+      );
+    }
+
+    if (needsAbort) {
+      log_debug(
+        `Preload hook requested abort: ${hookConfig.identifier}, stopping chain`
+      );
+
+      break;
+    }
+  }
+
+  if (needsAbort) {
+    return null;
+  }
+
+  return payload;
+}