@applicaster/zapp-react-native-utils 12.0.0-alpha.3977160850 → 12.0.0-alpha.4337072244

package/appUtils/playerManager/conts.ts

@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/player.ts

@@ -414,6 +414,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 = {},
@@ -634,6 +660,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 +725,7 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
 }

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()
@@ -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/arrayUtils/__tests__/isFilledArray.test.ts

@@ -0,0 +1,63 @@
+import { isFilledArray } from "..";
+
+describe("isFilledArray", () => {
+  it("non-empty array is not empty", () => {
+    const value = [1, 2, 3];
+
+    expect(isFilledArray(value)).toBe(true);
+  });
+
+  it("empty array is empty", () => {
+    const value = [];
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("number is not array", () => {
+    const value = 123;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("string is not array", () => {
+    const value = "vfnjdk";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty string is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("NaN is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("object is not array", () => {
+    const value = { test: 1 };
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty object is not array", () => {
+    const value = {};
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("undefined is not array", () => {
+    const value = undefined;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("null is not array", () => {
+    const value = null;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -95,3 +95,8 @@ export const makeListOfIndexes = (size: number): number[] =>
 export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
+
+/** Checks if a value is a non-empty array */
+export function isFilledArray(value: unknown): boolean {
+  return R.is(Array, value) && R.length(value) > 0;
+}

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);
         });
       });

package/localizationUtils/index.ts

@@ -1,10 +1,9 @@
 import * as R from "ramda";
 import { ViewStyle } from "react-native";
-import { useSelector } from "react-redux";
 
-import { getDeviceLocales } from "./deviceLocales";
 import { useMemo } from "react";
 import { getUILanguage } from "../appUtils/localizationsHelper";
+import { utilsLogger } from "../logger";
 
 export {
   getLocale,
@@ -45,34 +44,26 @@ export function useLocalizedStrings({ localizations }) {
   return result;
 }
 
-function getLocaleToUse(languageCodes, localizations) {
-  const matchingLanguages = languageCodes.filter(
-    R.contains(R.__, localizations)
-  );
+export function getIsRTL(): boolean {
+  const uiLanguage = getUILanguage();
+
+  if (!uiLanguage) {
+    utilsLogger.error({ message: "getUILanguage returned null or undefined" });
 
-  if (matchingLanguages?.length) {
-    return R.head(matchingLanguages);
+    return false;
   }
 
-  return R.head(localizations);
-}
+  const [languageCode] = uiLanguage.split("-");
 
-export function getIsRTLFromLocalizations(localizations): boolean {
-  const deviceLocales = getDeviceLocales() || [];
-  const localeToUse = getLocaleToUse(deviceLocales, R.keys(localizations));
+  const lowerCaseLanguageCode = languageCode.toLocaleLowerCase();
 
-  return R.contains(localeToUse, RTL_LOCALES);
-}
+  const isRTL = R.contains(lowerCaseLanguageCode, RTL_LOCALES);
 
-const remoteConfigLocalizationSelector = R.path([
-  "remoteConfigurations",
-  "localizations",
-]);
+  return isRTL;
+}
 
 export function useIsRTL(): boolean {
-  const localizations = useSelector(remoteConfigLocalizationSelector);
-
-  return getIsRTLFromLocalizations(localizations);
+  return getIsRTL();
 }
 
 export const applyRTLStylesIfNeeded = (

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -245,6 +245,12 @@ const generalContent = () => ({
         ],
         initial_value: "reloading...",
       },
+      {
+        type: "text_input",
+        label: "Navigation Bar Screen Title",
+        key: "screen_title",
+        initial_value: null,
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -1663,7 +1663,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu

package/manifestUtils/index.js

@@ -22,7 +22,11 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
-const { secondaryImage, getUpdatedSecondaryImageKeys } = require("./secondaryImage");
+
+const {
+  secondaryImage,
+  getUpdatedSecondaryImageKeys,
+} = require("./secondaryImage");
 
 module.exports = {
   fontKey,