@applicaster/zapp-react-native-utils 12.0.0-alpha.5468407101 → 12.0.0-alpha.5471145113

package/appUtils/focusManager/utils/index.ts

@@ -0,0 +1,100 @@
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
+
+// run check each 300 ms
+// run this check too often could lead to performance penalty on low-end devices
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

package/appUtils/focusManagerAux/index.ts

@@ -0,0 +1,76 @@
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { find, path } from "ramda";
+
+import {
+  waitForActiveScreen,
+  waitForContent,
+  getContentNode,
+  getNavbarNode,
+} from "./utils";
+
+import { coreLogger } from "../../logger";
+
+const logger = coreLogger.addSubsystem("focusManagerAux");
+
+export async function setFocusOnMenu(currentRoute: string) {
+  const { setFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+
+    const navbar = getNavbarNode(focusableTree);
+
+    const selectedMenuItemId = find(
+      (child) => child.component.props.selected,
+      navbar.children
+    )?.id;
+
+    if (selectedMenuItemId) {
+      // set focus on selected menu item
+      setFocus(selectedMenuItemId);
+
+      return;
+    }
+
+    const firstMenuItemId = path(["children", 0, "id"], navbar);
+
+    if (firstMenuItemId) {
+      // set focus on first menu item
+      setFocus(firstMenuItemId);
+    }
+  } catch (error) {
+    logger.log({
+      message: "setFocusOnMenu – failed to put focus on top-menu",
+      data: {
+        currentRoute,
+        error,
+      },
+    });
+  }
+}
+
+export async function setFocusOnContent(currentRoute: string) {
+  // we need to put focus on content here
+  // For doing it we have to wait registration of first focusable node into focusableTree
+  // we wait until content node starts having children
+
+  const { setInitialFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+    await waitForContent(focusableTree);
+
+    const content = getContentNode(focusableTree);
+
+    const { success } = setInitialFocus(content);
+
+    if (!success) {
+      // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
+      throw Error(
+        "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
+      );
+    }
+  } catch (error) {
+    setFocusOnContent(currentRoute);
+  }
+}

package/appUtils/focusManagerAux/utils/index.ts

@@ -0,0 +1,100 @@
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
+
+// run check each 300 ms
+// run this check too often could lead to performance penalty on low-end devices
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

package/appUtils/keyCodes/keys.web.js

@@ -1,6 +1,7 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
 
+import { isVizioPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 
@@ -21,6 +22,13 @@ export const ARROW_KEYS = [
   KEYS.ArrowRight,
 ];
 
+/**
+ * Platform.OS currently identifies Vizio as LG_TV, therefore we are using isVizioPlatform to identify platform and add keys.
+ */
+if (isVizioPlatform()) {
+  Object.assign(KEYS, platformKeys.vizio);
+}
+
 /**
  * In TizenOS we need to register all of the keys that we are going to use.
  * You need to register using the name Tizen has for the key.

package/appUtils/keyCodes/keysByPlatform.js

@@ -102,4 +102,14 @@ const tvos = {
   Menu: { code: "Menu", eventType: "menu" },
 };
 
-export { lg_tv, samsung_tv, web, tvos, android_tv };
+const vizio = {
+  ...samsung_tv,
+  Exit: { code: "Exit", keyCode: 27 },
+  PageUp: { code: "PageUp", keyCode: 33 },
+  PageDown: { code: "PageDown", keyCode: 34 },
+  MediaTrackNext: { code: "MediaTrackNext", keyCode: 418 },
+  MediaTrackPrevious: { code: "MediaTrackPrevious", keyCode: 419 },
+  PrevCh: { code: "PrevCh", keyCode: 500 },
+};
+
+export { lg_tv, samsung_tv, web, tvos, android_tv, vizio };

package/appUtils/platform/const.ts

@@ -0,0 +1,18 @@
+/**
+ * Platforms found in userAgent string, please note that simulators
+ * might not have the same agents that the devices have
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};

package/appUtils/platform/index.ts

@@ -0,0 +1 @@
+export * from "./platformUtils";

package/appUtils/platform/platformUtils.ts

@@ -0,0 +1 @@
+export {};

package/appUtils/platform/platformUtils.web.ts

@@ -0,0 +1,49 @@
+import { PLATFORMS } from "./const";
+
+declare global {
+  interface Window {
+    applicaster: {
+      vizioLibraryDidLoad: boolean;
+      useOnScreenKeyboard: boolean;
+    };
+    VIZIO?: {
+      exitApplication: () => void;
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
+export const getUserAgent = () =>
+  window?.navigator?.userAgent || global?.navigator?.userAgent;
+
+/**
+ * Checks if we are on the Vizio platform by using the userAgent string
+ *
+ * Use this method when you need to identify the platform on runtime
+ * before the VIZIO Companion Library has loaded
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * Checks if we are on the Vizio platform by checking for the global VIZIO object
+ * and the VIZIO Companion Library. This method does not use the userAgent string,
+ * because it mainly checks whether we have access to apis, which may not be available yet
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};

package/appUtils/playerManager/index.ts

@@ -11,6 +11,7 @@ import {
 } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 import { setUserLanguagePreference } from "./userLanguagePreference";
 import { PlayerRole } from "./conts";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const { log_error, log_debug, log_warning } = createLogger({
   category: "General",
@@ -164,6 +165,10 @@ export class PlayerManager {
     this.addPlayer(id, playerController);
 
     if (playerController.playerRole === PlayerRole.Primary) {
+      if (playerController.playerPluginId !== "QuickBrickPlayerPlugin") {
+        RNPlayerManager?.["QuickBrickPlayerPlugin"]?.stopBackgroundPlayback?.();
+      }
+
       playerController.addListener({
         id: this.getPlayerListenerId(id),
         listener: {
@@ -461,6 +466,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
+      this.getActivePlayer().closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/appUtils/playerManager/nativePlayerManager.ts

@@ -0,0 +1,12 @@
+import { NativeModules } from "react-native";
+import { isApplePlatform } from "../../reactUtils";
+
+export const RNPlayerManager = {
+  QuickBrickPlayerPlugin: isApplePlatform()
+    ? NativeModules.PlayerModule
+    : NativeModules.QuickBrickDefaultPlayerModule,
+  KalturaPlayerPlugin: isApplePlatform()
+    ? NativeModules.KalturaPlayerModule
+    : NativeModules.QBKalturaPlayerModule,
+  "quick-brick-player-brightcove": NativeModules.BrightcovePlayerModule,
+};

package/appUtils/playerManager/playerNative.ts

@@ -2,19 +2,10 @@ import * as R from "ramda";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
-import { findNodeHandle, NativeModules } from "react-native";
-import { isApplePlatform } from "../../reactUtils";
+import { findNodeHandle } from "react-native";
 import { PlayerRole } from "./conts";
 import { toBooleanWithDefaultFalse } from "../../booleanUtils";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const logger = createLogger({
   category: "PlayerNativeController",
@@ -111,7 +102,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(

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -4,6 +4,7 @@ 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";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,10 +35,14 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
+    const newConfig = isAppleTV()
+      ? { supports_native_controls: true, ...config }
+      : config;
+
     const newPlayerController = new ControllerType({
       player: ref,
       listener: props as any,
-      config,
+      config: newConfig,
       playerId,
       entry,
       playerPluginId: pluginId,

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/booleanUtils/index.ts

@@ -1,7 +1,7 @@
-import * as R from "ramda";
+import { is, toLower } from "ramda";
 
 export const toBoolean = (value: any): boolean | undefined => {
-  if (R.is(Boolean, value)) {
+  if (is(Boolean, value)) {
     return value;
   }
 
@@ -17,12 +17,12 @@ export const toBooleanWithDefaultTrue = toBooleanWithDefault(true);
 
 export const toBooleanWithDefaultFalse = toBooleanWithDefault(false);
 
-export const isTrue = (value: any): boolean => {
+export const isTrue = (value: unknown): boolean => {
   if (value === true) {
     return true;
   }
 
-  if (R.is(String, value) && value.toLowerCase() === "true") {
+  if (is(String, value) && toLower(value) === "true") {
     return true;
   }
 

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