@applicaster/zapp-react-native-utils 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/appUtils/playerManager/index.ts

@@ -33,6 +33,7 @@ function deprecationWarning(method) {
 export interface PlayerLifecycleListener {
   onRegistered?: (player: Player) => void;
   onUnRegistered?: (player: Player) => void;
+  onCastingChanged?: (isCasting: boolean) => void;
 }
 
 type PlayersMap = {
@@ -253,10 +254,18 @@ export class PlayerManager {
 
   public registerCastingReceiver(receiver: Player) {
     this.castingReceiver = receiver;
+
+    this.lifecycleListeners.forEach((listener) => {
+      listener.onCastingChanged?.(true);
+    });
   }
 
   public unregisterCastingReceiver() {
     this.castingReceiver = null;
+
+    this.lifecycleListeners.forEach((listener) => {
+      listener.onCastingChanged?.(false);
+    });
   }
 
   /**

package/appUtils/playerManager/player.ts

@@ -250,15 +250,11 @@ export class Player {
       return false;
     }
 
-    if (!Number.isFinite(duration)) {
-      return this.getSeekableDuration() > 0;
-    }
-
     return duration > 0;
   };
 
   isAd = () => {
-    return !!this.playerState.adState || this.playerState.isInAdBreak;
+    return !!this.playerState.adState || !!this.playerState.isInAdBreak;
   };
 
   isSeeking = () => {

package/appUtils/playerManager/playerFactory.ts

@@ -19,52 +19,35 @@ type PlayerFactoryProps = {
   playerRole: PlayerRole;
 };
 
-interface PlayerConstructor {
+interface PlayerControllerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (
-  config: PlayerFactoryProps
-): PlayerFactoryItem | null => {
-  const IDENTIFIER = config?.playerPluginId;
+type PlayerProtocol = {
+  Component: any;
+  controllerClass: PlayerControllerConstructor;
+};
 
-  if (!IDENTIFIER) {
-    return null;
-  }
+export const playerFactory = async (
+  config: PlayerFactoryProps
+): Promise<PlayerFactoryItem | null> => {
+  if (!config?.playerPluginId) return null;
 
   const plugins = appStore.get("plugins");
+  if (!plugins) return null;
 
-  if (!plugins) {
-    return null;
-  }
-
-  const playerPlugin = findPluginByIdentifier(IDENTIFIER, plugins);
+  const playerPlugin = findPluginByIdentifier(config.playerPluginId, plugins);
+  if (!playerPlugin?.module?.playerProtocol) return null;
 
-  if (!playerPlugin?.module?.playerProtocol) {
-    return null;
-  }
-
-  const playerProtocol: PlayerConstructor = playerPlugin.module.playerProtocol(
-    config?.screenConfig,
-    config?.entry
-  );
+  const playerProtocol: PlayerProtocol | null =
+    await playerPlugin.module.playerProtocol(config.screenConfig, config.entry);
 
-  const playerView = (playerProtocol as any)?.Component || null;
-
-  if (!playerView) {
+  if (!playerProtocol?.Component || !playerProtocol.controllerClass) {
     return null;
   }
 
-  const Controller = (playerProtocol as any)?.controllerClass || null;
-
-  if (Controller === null) {
-    return null;
-  }
-
-  const controller = new Controller(config);
-
   return {
-    controller,
-    Component: playerView,
+    controller: new playerProtocol.controllerClass(config),
+    Component: playerProtocol.Component,
   };
 };

package/appUtils/playerManager/playerNative.ts

@@ -15,22 +15,6 @@ const logger = createLogger({
 
 const { log_warning } = logger;
 
-interface PlayerMethods {
-  seeking?: (position: number) => void;
-  forward?: (deltaTime: number) => void;
-  rewind?: (deltaTime: number) => void;
-  startSleepTimer?: (sleepTimestamp: number) => void;
-  selectTrack?: (
-    selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
-  ) => void;
-  setPlaybackRate?: (rate: number) => void;
-  appStateChange?: (appState: string, previousAppState: string) => void;
-  closeNativePlayer?: () => void;
-  togglePlayPause?: () => void;
-}
-
-type PlayerComponent = ReactComponent<PlayerRefProps> & PlayerMethods;
-
 type PlayerPlugnId = "QuickBrickPlayerPlugin" | "KalturaPlayerPlugin";
 
 type Props = {
@@ -78,7 +62,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): PlayerComponent | null =>
+  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;
@@ -137,7 +121,7 @@ export class PlayerNative extends Player {
 
       this.playerState.seekPosition = newPosition;
 
-      this.currentPlayerComponent()?.seeking?.(this.playerState.seekPosition);
+      this.currentPlayerComponent()?.["seeking"](this.playerState.seekPosition);
     }
 
     this.logState(PlayerModuleFuncNames.seekTo, { position });
@@ -151,7 +135,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.forward, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.forward?.(deltaTime);
+      this.currentPlayerComponent()?.["forward"](deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -167,7 +151,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.rewind, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.rewind?.(deltaTime);
+      this.currentPlayerComponent()?.["rewind"](deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -194,7 +178,7 @@ export class PlayerNative extends Player {
         sleepTimestamp
       )
     ) {
-      this.currentPlayerComponent()?.startSleepTimer?.(sleepTimestamp);
+      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
     }
   };
 
@@ -211,11 +195,11 @@ export class PlayerNative extends Player {
   selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.selectTrack?.(selected);
+    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
   };
 
   setPlaybackRate = (rate: number) => {
-    this.currentPlayerComponent()?.setPlaybackRate?.(rate);
+    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
   };
 
   getPluginConfiguration = () => {
@@ -225,16 +209,24 @@ export class PlayerNative extends Player {
   getProps = () => (this.currentPlayerComponent() as any)?.props;
 
   appStateChange = (appState, previousAppState) => {
-    this.currentPlayerComponent()?.appStateChange?.(appState, previousAppState);
+    this.currentPlayerComponent()?.["appStateChange"]?.(
+      appState,
+      previousAppState
+    );
   };
 
   closeNativePlayer = () => {
-    // TODO: Delete does not work
-    this.currentPlayerComponent()?.closeNativePlayer?.();
+    // The player component ref may be null (for example, when the native player view is not mounted),
+    // so calling closeNativePlayer on the component is best‑effort only. We cannot use invokeNativeFunction
+    // here because it prepends the view id, while the native closeNativePlayer implementation does not
+    // expect a view id argument. As a reliable fallback we always call stopBackgroundPlayback on the
+    // native module to ensure background playback is stopped.
+    this.currentPlayerComponent()?.["closeNativePlayer"]?.();
+    this.getPlayerModule()?.stopBackgroundPlayback?.();
   };
 
   togglePlayPause = () => {
-    this.currentPlayerComponent()?.togglePlayPause?.();
+    this.currentPlayerComponent()?.["togglePlayPause"]?.();
   };
 
   onVideoLoad = (event) => {
@@ -302,19 +294,19 @@ export class PlayerNative extends Player {
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();
 
-    const disableFullScreen = config?.disable_fullscreen;
+    const disableFullScreen = config?.["disable_fullscreen"];
 
     if (disableFullScreen) {
       return false;
     }
 
-    const isFullScreenAudioPlayer = config?.full_screen_audio_player;
+    const isFullScreenAudioPlayer = config?.["full_screen_audio_player"];
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
 
   supportsNativeControls = (): boolean =>
-    toBooleanWithDefaultFalse(this.getConfig()?.supports_native_controls);
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
 
   supportNativeCast = (): boolean =>
     toBooleanWithDefaultFalse(

package/appUtils/playerManager/usePlayer.tsx

@@ -22,7 +22,6 @@ export const usePlayer = (playerId?: string): Player => {
 
   const isCasting = playerManager.isCasting();
 
-  // TODO: We need to prerender when we start/stop casting, fix this
   const getPlayer = (playerId, isCasting) =>
     getControlledPlayer(playerId, isCasting);
 
@@ -46,7 +45,7 @@ export const usePlayer = (playerId?: string): Player => {
     return playerManager.addLifecycleListener({
       onRegistered: (player) => {
         if (playerIdToUse === player.playerId) {
-          setPlayer(getPlayer(playerIdToUse, isCasting));
+          setPlayer(getPlayer(playerIdToUse, playerManager.isCasting()));
         }
       },
       onUnRegistered: (player) => {
@@ -54,8 +53,11 @@ export const usePlayer = (playerId?: string): Player => {
           setPlayer(null);
         }
       },
+      onCastingChanged: () => {
+        setPlayer(getPlayer(playerIdToUse, playerManager.isCasting()));
+      },
     } as PlayerLifecycleListener);
-  }, [playerIdToUse, isCasting]);
+  }, [playerIdToUse]);
 
   return player;
 };

package/appUtils/playerManager/usePlayerState.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Player } from "./player";
 import { usePlayer } from "./usePlayer";
 
-export type PlayerState = {
+type PlayerState = {
   currentTime: number;
   duration: number;
   seekableDuration: number;
@@ -10,8 +10,6 @@ export type PlayerState = {
   isPaused: boolean;
   isBuffering: boolean;
   isReadyToPlay: boolean;
-  trackState?: QuickBrickPlayer.TracksState;
-  isAd: boolean;
 };
 
 export const usePlayerState = (
@@ -26,8 +24,6 @@ export const usePlayerState = (
     isPaused: null,
     isBuffering: false,
     isReadyToPlay: false,
-    trackState: null,
-    isAd: false,
   });
 
   const player: Player = usePlayer(playerId);
@@ -41,8 +37,6 @@ export const usePlayerState = (
       isPaused: player.isPaused(),
       isBuffering: player.isBuffering(),
       isReadyToPlay: player.isReadyToPlay(),
-      trackState: player.getTracksState(),
-      isAd: player.isAd(),
     });
   }, [player]);
 
@@ -60,16 +54,10 @@ export const usePlayerState = (
           onPlayerPause: onPlayerChangeState,
           onPlayerResume: onPlayerChangeState,
           onPlayerSeekComplete: onPlayerChangeState,
-          onTracksChanged: onPlayerChangeState,
-          onAdBreakBegin: onPlayerChangeState,
-          onAdBreakEnd: onPlayerChangeState,
-          onAdBegin: onPlayerChangeState,
-          onAdEnd: onPlayerChangeState,
-          onAdError: onPlayerChangeState,
         },
       });
     }
-  }, [listenerId, onPlayerChangeState, player]);
+  }, [player]);
 
   return state;
 };

package/cellUtils/__tests__/cellUtils.test.ts

@@ -3,6 +3,7 @@ import {
   ifEmptyUseFallback,
   textTransform,
   getKeyForLabel,
+  getDataTransformForLabel,
   getLabel,
   getAspectRatio,
   getCellWidth,
@@ -56,6 +57,44 @@ describe("getKeyForLabel", () => {
   });
 });
 
+describe("getDataTransformForLabel", () => {
+  it("returns dataKey when dataKey is not other", () => {
+    expect(getDataTransformForLabel(VAL.dataKey, VAL.customKey)).toEqual(
+      VAL.dataKey
+    );
+  });
+
+  it("returns customKey when dataKey is other", () => {
+    expect(getDataTransformForLabel(VAL.other, VAL.customKey)).toEqual(
+      VAL.customKey
+    );
+  });
+
+  it("preserves full date formats containing dots", () => {
+    expect(getDataTransformForLabel(VAL.other, "DD.MM.YYYY")).toEqual(
+      "DD.MM.YYYY"
+    );
+  });
+
+  it("returns default date format when selected key is null or undefined", () => {
+    expect(getDataTransformForLabel(EMPTY.nulls, VAL.customKey)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(EMPTY.undef, VAL.customKey)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(VAL.other, EMPTY.nulls)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(VAL.other, EMPTY.undef)).toEqual(
+      "DD/MM/YYYY"
+    );
+  });
+});
+
 describe("getLabel", () => {
   it("returns a string from dataKey's path", () => {
     expect(getLabel(VAL.dataKey, VAL.customKey)(entry)).toEqual(entry.id);

package/cellUtils/index.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
-import dayjs from "dayjs";
-import validateColor from "validate-color";
+import { dayjs } from "../dateUtils";
 
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import {
   capitalize,
@@ -31,6 +31,16 @@ export const getKeyForLabel = (dataKey, customKey) => {
   return keyToUse.split(".");
 };
 
+/**
+ * Provides `format` for date formatting. Returns customKey if dataKey is "other", otherwise it returns dataKey.
+ * Should consist of valid dayjs tokens - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
+ */
+export const getDataTransformForLabel = (dataKey, customKey) => {
+  const keyToUse = dataKey === CUSTOM_KEY ? customKey : dataKey;
+
+  return keyToUse ?? "DD/MM/YYYY";
+};
+
 /**
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition
@@ -458,15 +468,13 @@ export const getColorFromData = ({
   data,
   valueFromLayout,
 }: GetColorFromData): string => {
-  // Temporary hack to fix color validation when alpha is floating point number
-  // https://github.com/dreamyguy/validate-color/issues/44
-  if (validateColor(valueFromLayout.replace(".00", ""))) {
+  if (isValidColor(valueFromLayout)) {
     return valueFromLayout;
   }
 
   const pathValue = R.path(valueFromLayout.split("."), data);
 
-  if (pathValue && validateColor(pathValue)) {
+  if (pathValue && isValidColor(pathValue)) {
     return pathValue;
   }
 

package/cloudEventsUtils/index.ts

@@ -3,41 +3,6 @@ import { RequestBuilder } from "@applicaster/zapp-pipes-v2-client";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { getAppUrlScheme } from "@applicaster/zapp-react-native-utils/appDataUtils";
 
-/**
- * CloudEvents v1.0 compliant event object
- * @see https://github.com/cloudevents/spec/blob/v1.0/spec.md
- */
-export interface CloudEvent<T = any> {
-  /** CloudEvents specification version (always "1.0") */
-  specversion: "1.0";
-  /** Type of event (e.g., "user.action", "commerce.purchase") */
-  type: string;
-  /** Identifier for the entity that produced the event */
-  source: string;
-  /** Unique identifier for the event */
-  id: string;
-  /** Subject of the event in the context of the event producer */
-  subject: string;
-  /** Timestamp of when the event occurred (ISO 8601 format) */
-  time: string;
-  /** Content type of the data attribute (always "application/json") */
-  datacontenttype: "application/json";
-  /** Event payload */
-  data: T;
-}
-
-/**
- * Parameters required to create a cloud event
- */
-export interface CreateCloudEventParams<T = any> {
-  /** Type of event (e.g., "user.action", "commerce.purchase") */
-  type: string;
-  /** Subject of the event in the context of the event producer */
-  subject: string;
-  /** Event payload */
-  data: T;
-}
-
 let source: string | null = null;
 
 const addSource = async () => {
@@ -61,36 +26,7 @@ const addSource = async () => {
   return source;
 };
 
-/**
- * Resets the cached CloudEvents source.
- *
- * @internal
- * @testonly This function is intended for test use only and will only work in test environments.
- *
- * @remarks
- * This function clears the cached source value, forcing the next call to `createCloudEvent`
- * to regenerate the source from app metadata. It only operates when NODE_ENV is set to "test"
- * to prevent accidental misuse in production code.
- *
- * @example
- * ```typescript
- * // In Jest tests
- * beforeEach(() => {
- *   resetCloudEventsSource();
- * });
- * ```
- */
-export const resetCloudEventsSource = (): void => {
-  if (process.env.NODE_ENV === "test") {
-    source = null;
-  }
-};
-
-export const createCloudEvent = async <T = any>({
-  type,
-  subject,
-  data,
-}: CreateCloudEventParams<T>): Promise<CloudEvent<T>> => {
+export const createCloudEvent = async ({ type, subject, data }) => {
   return {
     specversion: "1.0",
     type,

package/colorUtils/__tests__/isTransparentColor.test.ts

@@ -0,0 +1,76 @@
+import { isTransparentColor } from "..";
+
+describe("isTransparentColor", () => {
+  it("returns true for transparent keyword and rgba colors with zero alpha", () => {
+    const transparentColors = [
+      "transparent",
+      "rgba(0,0,0,0)",
+      "rgba(255, 255, 255, 0)",
+      "rgba(0,0,0,0.0)",
+      "rgba(0,0,0,0.00)",
+      "rgba(0,0,0, 0)",
+      "hsla(0,0%,0%,0)",
+    ];
+
+    expect.assertions(transparentColors.length);
+
+    transparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(true);
+    });
+  });
+
+  it("returns false for valid colors that are not fully transparent", () => {
+    const nonTransparentColors = [
+      "red",
+      "#fff",
+      "#ffffff",
+      "rgb(0,0,0)",
+      "rgba(0,0,0)",
+      "rgba(0,0,0,0.5)",
+      "rgba(255, 255, 255, 0.3)",
+      "rgba(255, 255, 255, 1.0)",
+      "rgba(239,239,239,1.0)",
+      "currentColor",
+      "inherit",
+      "#00000000",
+      "#fff0",
+    ];
+
+    expect.assertions(nonTransparentColors.length);
+
+    nonTransparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for case variants of the transparent keyword", () => {
+    expect(isTransparentColor("Transparent")).toBe(false);
+    expect(isTransparentColor("TRANSPARENT")).toBe(false);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      " rgba(0,0,0,0) ",
+      "transparent ",
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for nullish and non-string values", () => {
+    expect(isTransparentColor(undefined)).toBe(false);
+    expect(isTransparentColor(null)).toBe(false);
+    expect(isTransparentColor(123)).toBe(false);
+    expect(isTransparentColor({})).toBe(false);
+    expect(isTransparentColor([])).toBe(false);
+  });
+});

package/colorUtils/__tests__/isValidColor.test.ts

@@ -0,0 +1,70 @@
+import { isValidColor } from "..";
+
+describe("isValidColor", () => {
+  it("returns true for valid hex colors", () => {
+    const validHexColors = ["#fff", "#ffffff", "#FF0000", "#000", "#abc123"];
+
+    expect.assertions(validHexColors.length);
+
+    validHexColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = [
+      "rgb(255,0,0)",
+      "rgb(255, 0, 0)",
+      "rgba(255,0,0,0.5)",
+      "rgba(255, 0, 0, 0.5)",
+    ];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid named and special CSS colors", () => {
+    const validNamedColors = ["red", "transparent", "currentColor", "inherit"];
+
+    expect.assertions(validNamedColors.length);
+
+    validNamedColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid hsl colors", () => {
+    expect(isValidColor("hsl(0, 100%, 50%)")).toBe(true);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      undefined,
+      null,
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(false);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = ["rgba(239,239,239,1.0)"];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+});