@applicaster/zapp-react-native-utils 12.0.0-alpha.5606245605 → 12.0.0-alpha.5624518702

package/appUtils/playerManager/index.ts

@@ -3,7 +3,6 @@ import * as R from "ramda";
 import { subscriber } from "../../functionUtils";
 import { utilsLogger, createLogger } from "../../logger";
 import { Player } from "./player";
-import { AnalyticsTracker } from "../../analyticsUtils/analyticsTracker";
 import {
   hasTizenAPIs,
   subscribeToDeviceNetworkChanges,
@@ -36,7 +35,10 @@ export interface PlayerLifecycleListener {
 }
 
 type PlayersMap = {
-  [id: string]: { player: Player; isInViewport: boolean };
+  [id: string]: {
+    player: Player;
+    isInViewport: boolean;
+  };
 };
 
 export class PlayerManager {
@@ -45,7 +47,6 @@ export class PlayerManager {
   private playersMap: PlayersMap = {};
   private manager = subscriber();
   private castingReceiver: Player;
-  private analyticsTracker: AnalyticsTracker;
   private lifecycleListeners: PlayerLifecycleListener[] = [];
 
   public static getInstance() {
@@ -56,7 +57,7 @@ export class PlayerManager {
     return PlayerManager.instance;
   }
 
-  public getActivePlayerId = (): String | null => {
+  public getActivePlayerId = (): string | null => {
     return this.activePlayerId;
   };
 
@@ -101,7 +102,10 @@ export class PlayerManager {
   }
 
   private addPlayer = (id: string, player: Player) => {
-    this.playersMap[id] = { player: player, isInViewport: false };
+    this.playersMap[id] = {
+      player: player,
+      isInViewport: false,
+    };
   };
 
   public isPlayerRegistered = (id: string) => !!this.playersMap[id];
@@ -246,28 +250,6 @@ export class PlayerManager {
     this.castingReceiver = null;
   }
 
-  /**
-   * Handles analytic events, generates a new analytics tracker and transmits events
-   * Passes entry data, and playerState to the tracker for additional context
-   * The end result is an event formatted and passed to AnalyticsBridge.postEvent
-   * When we get the synthetic event we need to pull the data in the e object
-   * e contains the return value from native
-   */
-  public handleAnalyticEvent(event, data = {}, entry: ZappEntry) {
-    const playerState = this.getActivePlayer()?.getState();
-
-    if (!this.analyticsTracker?.handleAnalyticEvent) {
-      this.analyticsTracker = new AnalyticsTracker(entry);
-    }
-
-    this.analyticsTracker?.handleAnalyticEvent?.(
-      event,
-      data,
-      entry,
-      playerState
-    );
-  }
-
   /**
    * Method retrieves the instantiated player instance controller
    * Instance controller exposes methods like getContentDuration, getContentPosision

package/appUtils/playerManager/player.ts

@@ -321,7 +321,7 @@ export class Player {
    * You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
    * This allows you to use one method for everything.
    */
-  onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
+  onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
     const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
@@ -336,10 +336,11 @@ export class Player {
     });
   };
 
-  onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
+  onPlayerSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
     const { isLive, seekableDuration, currentTime, duration } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
+
     this.playerState.seekPosition = null;
 
     if (!isLive) {
@@ -414,6 +415,32 @@ export class Player {
     });
   };
 
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
+    });
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
+    });
+  };
+
   public invokeListenersUpdate = ({
     callbackName,
     event = {},
@@ -620,8 +647,8 @@ export class Player {
   };
 
   public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
-    onPlayerSeekStart: this.onSeekStart,
-    onPlayerSeekComplete: this.onSeekComplete,
+    onPlayerSeekStart: this.onPlayerSeekStart,
+    onPlayerSeekComplete: this.onPlayerSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
     onLoad: this.onLoad,
@@ -634,6 +661,12 @@ export class Player {
     onBufferStart: this.onBufferStart,
     onBufferComplete: this.onBufferComplete,
 
+    onPlayerClose: this.onPlayerClose,
+    onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
+    onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+    onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+
     // Ads Callbacks:
     onAdBegin: this.onAdBegin,
     onAdBreakBegin: this.onAdBreakBegin,
@@ -693,4 +726,13 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
+
+  public isInDelayedSeek = (): boolean => false;
+  public enterDelayedSeek() {
+  }
+
+  public exitDelayedSeek() {}
 }

package/appUtils/playerManager/playerFactory.ts

@@ -9,21 +9,23 @@ type PlayerFactoryItem = {
 };
 
 type PlayerFactoryProps = {
-  player: any,
-  playerId: string,
-  autoplay: boolean,
-  entry: ZappEntry,
-  muted: boolean,
-  playerPluginId: string,
-  screenConfig: Record<string, any>,
-  playerRole: PlayerRole,
-}
+  player: any;
+  playerId: string;
+  autoplay: boolean;
+  entry: ZappEntry;
+  muted: boolean;
+  playerPluginId: string;
+  screenConfig: Record<string, any>;
+  playerRole: PlayerRole;
+};
 
 interface PlayerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (config: PlayerFactoryProps): PlayerFactoryItem | null => {
+export const playerFactory = (
+  config: PlayerFactoryProps
+): PlayerFactoryItem | null => {
   const IDENTIFIER = config?.playerPluginId;
 
   if (!IDENTIFIER) {

package/appUtils/playerManager/playerNative.ts

@@ -5,6 +5,7 @@ import { Player } from "./player";
 import { findNodeHandle, NativeModules } from "react-native";
 import { isApplePlatform } from "../../reactUtils";
 import { PlayerRole } from "./conts";
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -69,7 +70,7 @@ export class PlayerNative extends Player {
   currentPlayerComponent = (): ReactComponent<PlayerProps> =>
     this.playerComponent?.current;
 
-  getState = () => this.currentPlayerComponent()?.["getState"]?.() ?? {};
+  getState = () => this.playerState;
 
   // TODO: Try to add module interface
   invokeNativeFunction = (funcName: string, ...params: any[]): boolean => {
@@ -110,7 +111,7 @@ export class PlayerNative extends Player {
       return;
     }
 
-    const newPosition = R.clamp(0, position, this.playerState.seekableDuration);
+    const newPosition = R.clamp(0, this.playerState.seekableDuration, position);
 
     if (
       !this.invokeNativeFunction(
@@ -291,4 +292,12 @@ export class PlayerNative extends Player {
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
+
+  supportsNativeControls = (): boolean =>
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+
+  supportNativeCast = (): boolean =>
+    toBooleanWithDefaultFalse(
+      this.playerPluginId === "quick-brick-player-brightcove"
+    );
 }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -4,6 +4,9 @@ import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+import { isTV } from "../../reactUtils";
+import { DelayedSeekPlayerWrapper } from "./DelayedSeekPlayerWrapper";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,17 +37,33 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
-    const newPlayerController = new ControllerType({
+    const newConfig = isAppleTV()
+      ? { supports_native_controls: true, ...config }
+      : config;
+
+    const combinedProps = {
       player: ref,
       listener: props as any,
-      config,
+      config: newConfig,
       playerId,
       entry,
       playerPluginId: pluginId,
       playerRole: PlayerRole.Primary,
-    });
+    };
 
-    setPlayerController(newPlayerController);
+    if (isTV()) {
+      const wrappedPlayerController = new ControllerType({
+        ...combinedProps,
+        playerRole: PlayerRole.Unspecified,
+        playerId: playerId + "." + "wrapped",
+      });
+
+      setPlayerController(
+        new DelayedSeekPlayerWrapper(combinedProps, wrappedPlayerController)
+      );
+    } else {
+      setPlayerController(new ControllerType(combinedProps));
+    }
   }, [playerId, entry?.id]);
 
   React.useEffect(() => {

package/cellUtils/__tests__/cellUtils.test.ts

@@ -24,7 +24,6 @@ import {
   EMPTY,
   FALLBACK,
   TRANSFORM,
-  defaultColor,
 } from "./fixtures";
 
 describe("getKeyForLabel", () => {
@@ -395,9 +394,7 @@ describe("getColorFromData", () => {
   it("should return value directly if valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: "background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "#123456",
     });
 
     expect(result).toBe("#123456");
@@ -406,9 +403,7 @@ describe("getColorFromData", () => {
   it("should return valid rgba color name", () => {
     const result = getColorFromData({
       data: entry,
-      key: "component_background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "rgba(255, 255, 255, 0)",
     });
 
     expect(result).toBe("rgba(255, 255, 255, 0)");
@@ -417,33 +412,27 @@ describe("getColorFromData", () => {
   it("should return path value if path value is set and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.colorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "background_color",
     });
 
     expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if key value and path value are invalid", () => {
+  it("should return path value if path value is set, nested and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKey,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "extensions.background_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if path does not exist", () => {
+  it("should return valueFromLayout if path does not exist", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "invalid_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("invalid_color");
   });
 });

package/cellUtils/index.ts

@@ -182,8 +182,8 @@ export const getHeight = (width, aspectRatio) => {
  * @returns {string} duration
  */
 
-export const getDurationInMinutes = (seconds: number): string => {
-  if (seconds === (null || undefined)) return "00:00";
+export const getDurationInMinutes = (seconds?: number): string => {
+  if (!seconds) return "00:00";
   const minutes = Math.floor(Number(seconds) / 60);
   const secondsReminder = Math.floor(Number(seconds)) % 60;
   const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;
@@ -447,28 +447,24 @@ export const toResizeMode = (
 
 type GetColorFromData = {
   data: Record<string, any>;
-  key: string;
-  getValue: Function;
-  defaultColor: string;
+  valueFromLayout: string;
 };
 
 export const getColorFromData = ({
   data,
-  key,
-  getValue,
-  defaultColor,
+  valueFromLayout,
 }: GetColorFromData): string => {
-  const value = getValue(key);
-
-  if (validateColor(value)) {
-    return value;
+  // 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", ""))) {
+    return valueFromLayout;
   }
 
-  const pathValue = R.path(value.split("."), data);
+  const pathValue = R.path(valueFromLayout.split("."), data);
 
   if (pathValue && validateColor(pathValue)) {
     return pathValue;
   }
 
-  return defaultColor;
+  return valueFromLayout;
 };

package/dateUtils/index.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import isoWeek from "dayjs/plugin/isoWeek";
+
+// Extend dayjs with plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isoWeek);
+
+export { dayjs };

package/headersUtils/index.ts

@@ -28,5 +28,6 @@ export const getAppDataHeaders = (screenId: string) => {
     "x-applicaster-signed-device-info-token": appData.signedDeviceInfoToken,
     "x-applicaster-device-make": appData.deviceMake,
     "x-applicaster-device-model": appData.deviceModel,
+    "x-applicaster-uuid": appData?.uuid,
   };
 };

package/inflatedUrlUtils/index.ts

@@ -1,4 +1,4 @@
-import { last, head, isNil, includes, all, pathOr } from "ramda";
+import { last, head, isNil, includes, pathOr } from "ramda";
 
 const stripBrackets = (path) => {
   const withoutPrepened = last(path.split("{{"));
@@ -13,15 +13,15 @@ const hasValue = (context) => (path) => {
   return !isNil(value);
 };
 
-export const isEnoughDataToInflateString = (context, string): boolean => {
+export const getMissingValues = (context, string): string[] => {
   if (!includes("{{", string)) {
-    return true;
+    return [];
   }
 
   const SEARCH_REGEX = new RegExp(/{{.*?}}/g);
   const paths = string.toString().match(SEARCH_REGEX);
 
-  return all(hasValue(context), paths);
+  return paths.filter((path) => !hasValue(context)(path));
 };
 
 export const isNonInflatedUrl = (url: string): boolean =>

package/localizationUtils/__tests__/localizationUtils.test.ts

@@ -1,59 +1,59 @@
-import * as ReactNative from "react-native";
-
-const mocked_state = {
-  remoteConfigurations: { localizations: {} },
-  appData: {
-    languageCode: "en",
-    countryCode: "US",
-  },
-};
-
-let mocked_locale = ["en-US"];
-
-jest.doMock("react-redux", () => ({
-  useSelector: jest.fn((fn) => fn(mocked_state)),
-}));
+import { NativeModules } from "react-native";
 
-const SettingsManager = {
+const settingsManagerMock = {
   getConstants: jest.fn(() => ({
-    settings: { AppleLanguages: mocked_locale },
+    settings: { AppleLanguages: ["en-US"] },
   })),
 };
 
-const QuickBrickCommunicationModule = {
+const qbCommunicationModuleMock = {
   languageLocale: "en",
   countryLocale: "US",
+  uiLanguage: "en-US",
 };
 
-ReactNative.NativeModules.SettingsManager = SettingsManager;
-
-ReactNative.NativeModules.QuickBrickCommunicationModule =
-  QuickBrickCommunicationModule;
-
-const { useIsRTL } = require("../index");
+NativeModules.SettingsManager = settingsManagerMock;
+NativeModules.QuickBrickCommunicationModule = qbCommunicationModuleMock;
 
 describe("localizationUtils", () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
   describe("when the app has a single locale", () => {
     describe("when the app has only a RTL language as locale", () => {
       beforeEach(() => {
-        mocked_state.remoteConfigurations.localizations = {
-          he: "http://url.com",
+        jest.resetModules();
+        const RN = require("react-native");
+
+        RN.NativeModules.QuickBrickCommunicationModule = {
+          languageLocale: "he",
+          countryLocale: "IL",
+          uiLanguage: "he-HE",
         };
       });
 
       it("useIsRTL returns true", () => {
+        const { useIsRTL } = require("../index");
         expect(useIsRTL()).toBe(true);
       });
     });
 
     describe("when the app has only a LTR language as locale", () => {
       beforeEach(() => {
-        mocked_state.remoteConfigurations.localizations = {
-          en: "http://url.com",
+        jest.resetModules();
+
+        const RN = require("react-native");
+
+        RN.NativeModules.QuickBrickCommunicationModule = {
+          languageLocale: "en",
+          countryLocale: "US",
+          uiLanguage: "en",
         };
       });
 
       it("useIsRTL returns false", () => {
+        const { useIsRTL } = require("../index");
         expect(useIsRTL()).toBe(false);
       });
     });
@@ -63,45 +63,56 @@ describe("localizationUtils", () => {
     describe("when device locale is in the app's locales", () => {
       describe("when device locale is LTR", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            he: "http://url.com",
-            en: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["en-US"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "en",
+            countryLocale: "US",
+            uiLanguage: "en-US",
+          };
         });
 
         it("useIsRTL returns false", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(false);
         });
       });
 
       describe("when device locale is RTL", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            he: "http://url.com",
-            en: "http://url.com",
-          };
+          jest.resetModules();
+          const RN = require("react-native");
 
-          mocked_locale = ["he-HE"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "he",
+            countryLocale: "IL",
+            uiLanguage: "he",
+          };
         });
 
         it("useIsRTL returns true", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(true);
         });
       });
 
       describe("when a device has a secondary language in a supported language", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            en: "http://url.com",
-            he: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["es-SP", "he-HE"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "he",
+            countryLocale: "IL",
+            uiLanguage: "he",
+          };
         });
 
         it("useIsRTL returns true", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(true);
         });
       });
@@ -110,30 +121,38 @@ describe("localizationUtils", () => {
     describe("when device locale is not in the app's locales", () => {
       describe("when first app locale is LTR", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            en: "http://url.com",
-            he: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["fr-FR"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "fr",
+            countryLocale: "FR",
+            uiLanguage: "fr-FR",
+          };
         });
 
         it("useIsRTL returns false", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(false);
         });
       });
 
       describe("when first app locale is RTL", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            he: "http://url.com",
-            en: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["fr-FR"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "he",
+            countryLocale: "HE",
+            uiLanguage: "he",
+          };
         });
 
         it("useIsRTL returns true", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(true);
         });
       });