@applicaster/zapp-react-native-utils 15.0.0-rc.99 → 15.1.0-rc.1

package/appUtils/orientationHelper.ts

@@ -1,5 +1,5 @@
 import * as ReactNative from "react-native";
-import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { isTV, platformSelect } from "../reactUtils";
 import { useIsTablet } from "../reactHooks";
@@ -184,7 +184,9 @@ export const getScreenOrientation = ({
 
 export const useGetScreenOrientation = (screenData) => {
   const isTablet = useIsTablet();
-  const { isTabletPortrait } = useAppData();
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
 
   return getScreenOrientation({
     screenData,

package/appUtils/platform/platformUtils.ts

@@ -79,7 +79,7 @@ export class ClosedCaptioningManager {
   private constructor() {
     this.initialize();
 
-    window.vizioDebug = {
+    window["vizioDebug"] = {
       setCCEnabled: (isCCEnabled: boolean) => {
         this.ccState$.next(isCCEnabled);
       },

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/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,5 +1,5 @@
 import * as R from "ramda";
-import dayjs from "dayjs";
+import { dayjs } from "../dateUtils";
 import validateColor from "validate-color";
 
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
@@ -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

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/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -50,7 +50,7 @@ describe("getAllSpecificStyles", () => {
       });
 
       expect(outStyles).toHaveProperty("default");
-      expect(outStyles.default).toEqual({});
+      expect(outStyles["default"]).toEqual({});
     });
 
     it("should handle empty configuration", () => {
@@ -83,7 +83,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FF0000",
         borderWidth: 2,
       });
@@ -104,7 +104,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FF0000",
         textSize: 16,
       });
@@ -126,7 +126,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FF0000",
       });
     });
@@ -148,11 +148,11 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FF0000",
       });
 
-      expect(outStyles.pressed).toEqual({
+      expect(outStyles["pressed"]).toEqual({
         backgroundColor: "#00FF00",
       });
     });
@@ -171,7 +171,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.focused).toEqual({
+      expect(outStyles["focused"]).toEqual({
         borderWidth: 3,
       });
     });
@@ -190,7 +190,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.selected).toEqual({
+      expect(outStyles["selected"]).toEqual({
         opacity: 0.5,
       });
     });
@@ -209,7 +209,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.focused_selected).toEqual({
+      expect(outStyles["focused_selected"]).toEqual({
         scale: 1.2,
       });
     });
@@ -232,21 +232,21 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FF0000",
         borderWidth: 1,
         opacity: 1,
       });
 
       // Pressed should have default styles merged with its specific override
-      expect(outStyles.pressed).toEqual({
+      expect(outStyles["pressed"]).toEqual({
         backgroundColor: "#00FF00", // Override
         borderWidth: 1, // From default
         opacity: 1, // From default
       });
 
       // Focused should have default styles merged with its specific override
-      expect(outStyles.focused).toEqual({
+      expect(outStyles["focused"]).toEqual({
         backgroundColor: "#FF0000", // From default
         borderWidth: 1, // From default
         opacity: 0.8, // Override
@@ -270,7 +270,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.pressed).toEqual({
+      expect(outStyles["pressed"]).toEqual({
         existingKey: "existingValue", // Should be preserved
         backgroundColor: "#FF0000", // From default
         textColor: "#FFFFFF", // New pressed style
@@ -294,7 +294,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FF0000", // Samsung-specific should be included
       });
     });
@@ -317,7 +317,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FFFFFF", // Only non-platform specific
       });
     });
@@ -336,7 +336,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         color: "#FF0000",
       });
     });
@@ -356,7 +356,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.pressed).toEqual({
+      expect(outStyles["pressed"]).toEqual({
         backgroundColor: "#FF0000", // Only samsung style
       });
     });
@@ -377,7 +377,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#00FF00", // Samsung-specific should win
       });
     });
@@ -412,14 +412,14 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         backgroundColor: "#FFFFFF",
         textColor: "#000000",
         borderWidth: 1,
         padding: 10,
       });
 
-      expect(outStyles.pressed).toEqual({
+      expect(outStyles["pressed"]).toEqual({
         backgroundColor: "#EEEEEE",
         textColor: "#000000",
         borderWidth: 1,
@@ -427,7 +427,7 @@ describe("getAllSpecificStyles", () => {
         opacity: 0.8,
       });
 
-      expect(outStyles.focused).toEqual({
+      expect(outStyles["focused"]).toEqual({
         backgroundColor: "#FFFFFF",
         textColor: "#000000",
         borderWidth: 1,
@@ -453,7 +453,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         validKey: "included",
       });
     });
@@ -474,11 +474,11 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.focused_selected).toEqual({
+      expect(outStyles["focused_selected"]).toEqual({
         test: "focused_selected_value",
       });
 
-      expect(outStyles.focused).toEqual({
+      expect(outStyles["focused"]).toEqual({
         another: "focused_value",
       });
     });
@@ -517,7 +517,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles.pressed.backgroundColor).toBe("#222222");
+      expect(outStyles["pressed"]["backgroundColor"]).toBe("#222222");
     });
 
     it("should handle frozen outStyles properties", () => {
@@ -537,7 +537,7 @@ describe("getAllSpecificStyles", () => {
       });
 
       // Should create new object instead of mutating frozen one
-      expect(outStyles.default).toEqual({
+      expect(outStyles["default"]).toEqual({
         existingProp: "value",
         backgroundColor: "#FF0000",
       });

package/dateUtils/__tests__/dayjs.test.ts

@@ -1,7 +1,4 @@
 import { dayjs } from "../index";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-
-dayjs.extend(customParseFormat);
 
 describe("dayjs", () => {
   describe("basic functionality", () => {

package/dateUtils/index.ts

@@ -4,12 +4,14 @@ import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
 import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
+import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
 dayjs.extend(duration);
+dayjs.extend(customParseFormat);
 
 dayjs.extend(relativeTime, {
   thresholds: [