@applicaster/zapp-react-native-utils 12.0.0-alpha.5251355865 → 12.0.0-alpha.5350212300

package/analyticsUtils/helpers/hooks.ts

@@ -26,7 +26,7 @@ export const useHookAnalytics = (props): void => {
     if (screenData?.hookPlugin?.module?.runInBackground) {
       sendScreenEvent({ analyticsScreenData });
     }
-  }, [hookPlugin.screen_id]);
+  }, [sendScreenEvent, screenData, hookPlugin.screen_id]);
 };
 
 export const useScreenAnalytics = (props) => {

package/appUtils/HooksManager/index.js

@@ -270,7 +270,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation

package/appUtils/focusManager/index.ts

@@ -1,9 +1,20 @@
 import * as R from "ramda";
+import {
+  isNilOrEmpty,
+  isNotNil,
+} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
+import {
+  waitForActiveScreen,
+  waitForContent,
+  getContentNode,
+  getActiveScreen,
+} from "./utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
 
@@ -46,7 +57,7 @@ export const focusManager = (function () {
   let lastFocusedId = null;
   let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = true;
+  let focusAutoEnabled = false;
   const eventHandler = subscriber();
 
   function disableAutomaticFocus() {
@@ -93,7 +104,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(currentFocusable, direction);
+      currentFocusable.blur(direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -219,38 +230,55 @@ export const focusManager = (function () {
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(lastAddedParentNode?: any, fallback?: () => void) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (preferredFocus && preferredFocus.length > 0) {
-      const focusCandidate = preferredFocus[0];
-      const focusableItem = focusCandidate.component;
-
-      if (
-        focusableItem &&
-        !focusableItem.isGroup &&
-        isFocusEnabled(focusableItem)
-      ) {
-        if (initialFocusOnContent) {
-          blur();
-          initialFocusOnContent = false;
-        }
+    if (isNilOrEmpty(preferredFocus)) {
+      fallback?.();
+      return;
+    }
 
-        logger.log({
-          message: "setInitialFocus – currentFocusNode",
-          data: {
-            focusableItem,
-          },
-        });
+    const focusCandidate = preferredFocus[0];
+    const focusableItem = focusCandidate.component;
 
-        currentFocusNode = focusCandidate;
-        focusableItem.willReceiveFocus(focusableItem, null);
-        focusableItem && setFocus(focusCandidate.id, null);
+    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
+    const nextFocusedId = R.path(["props", "id"], focusableItem);
+
+    if (currentFocusedId === nextFocusedId) {
+      // we are going to move focus to the same node(already focused) -> nothing to do
+      return;
+    }
+
+    if (preferredFocus.length === 1 && focusableItem && focusableItem.isGroup) {
+      // we've found only one FocusableGroup as a candidate to focus, try to use fallback
+      fallback?.();
+      return;
+    }
+
+    if (
+      focusableItem &&
+      !focusableItem.isGroup &&
+      isFocusEnabled(focusableItem)
+    ) {
+      if (initialFocusOnContent) {
+        blur();
+        initialFocusOnContent = false;
       }
+
+      logger.log({
+        message: "setInitialFocus – currentFocusNode",
+        data: {
+          focusableItem,
+        },
+      });
+
+      currentFocusNode = focusCandidate;
+      focusableItem.willReceiveFocus(focusableItem, null);
+      focusableItem && setFocus(focusCandidate.id, null);
     }
   }
 
@@ -323,6 +351,8 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerGroup(id, component) {
+    // console.log("debug_2", "FM registerGroup", { id, component });
+
     focusableTree.addNode({ id, component });
 
     return component;
@@ -338,6 +368,8 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerItem(id, component) {
+    // console.log("debug_2", "FM registerItem", { id, component });
+
     focusableTree.addNode({ id, component });
 
     if (!currentFocusNode && id === lastFocusedId && !id.includes("menu")) {
@@ -354,6 +386,8 @@ export const focusManager = (function () {
    * @param {String} id of the group to unregister
    */
   function unregisterGroup(id) {
+    // console.log("debug_2", "FM unregisterGroup", { id });
+
     focusableTree.findAndRemoveNode(id);
   }
 
@@ -365,6 +399,8 @@ export const focusManager = (function () {
    * @param {String} id of the Focusable to unregister
    */
   function unregisterItem(id) {
+    // console.log("debug_2", "FM unregisterItem", { id });
+
     focusableTree.findAndRemoveNode(id);
 
     if (currentFocusNode && currentFocusNode.id === id) {
@@ -403,6 +439,8 @@ export const focusManager = (function () {
   }
 
   function setupInitialFocus(id: string, focusOnContent?: boolean) {
+    console.log("debug_2", "FM - setupInitialFocus", { id, focusOnContent });
+
     if (focusOnContent) {
       initialFocusOnContent = focusOnContent;
     } else {
@@ -410,6 +448,62 @@ export const focusManager = (function () {
     }
   }
 
+  async function setFocusOnMenu(currentRoute: string) {
+    console.log("debug_2", "FM - setFocusOnMenu", { currentRoute });
+
+    try {
+      await waitForActiveScreen(currentRoute, focusableTree);
+
+      const navbar = R.find(
+        (child) => R.startsWith("navbar", child.id),
+        getActiveScreen(focusableTree).children
+      );
+
+      const selectedMenuItemId = R.find(
+        (child) => child.component.props.selected,
+        navbar?.children || []
+      )?.id;
+
+      if (selectedMenuItemId) {
+        // set focus on selected menu item
+        setFocus(selectedMenuItemId);
+        return;
+      }
+
+      const firstMenuItemId = R.path(["children", 0, "id"], navbar);
+
+      if (firstMenuItemId) {
+        // set focus on first menu item
+        setFocus(firstMenuItemId);
+      }
+    } catch (error) {
+      // failed to put focus on top-menu => log it
+    }
+  }
+
+  async function setFocusOnContent(currentRoute: string) {
+    console.log("debug_2", "FM - setFocusOnContent", { currentRoute });
+
+    // we need to put focus on content here
+    // For doing it we have to wait registration of first focusable node into focusableTree
+    // this is the temporary hack with waiting until content node starts having children
+    try {
+      await waitForActiveScreen(currentRoute, focusableTree);
+      await waitForContent(focusableTree);
+
+      const content = getContentNode(focusableTree);
+
+      const fallback = () => {
+        throw Error("Failed to land focus on content");
+      };
+
+      setInitialFocus(content, fallback);
+    } catch (e) {
+      // we've failed to put initial focus on content, put focus on menu as a last chance
+      setFocusOnMenu(currentRoute);
+    }
+  }
+
   /**
    * moves the focus in a provided direction
    * @public
@@ -422,6 +516,13 @@ export const focusManager = (function () {
       currentFocusNode.component.willLoseFocus(currentFocusNode, direction);
       const nextFocusable = findFocusableNode(direction, currentFocusNode);
 
+      // console.log("debug_2", "FM moveFocus", {
+      //   direction: direction?.value,
+      //   currentFocusNode,
+      //   focusableTree,
+      //   nextFocusable,
+      // });
+
       if (nextFocusable?.component?.isMounted?.()) {
         const nextRect = nextFocusable.component.getRect();
 
@@ -518,5 +619,7 @@ export const focusManager = (function () {
     enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
+    setFocusOnMenu,
+    setFocusOnContent,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,4 +1,4 @@
-import * as R from "ramda";
+import { allPass, pathOr, startsWith, isNil } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { rejectItemByPath } from "../../../../objectUtils";
@@ -143,7 +143,49 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
+const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
+
+const positiveOrZero = (value) => value >= 0;
+
+const excludeFromFocusSearching = pathOr(false, [
+  "component",
+  "props",
+  "excludeFromFocusSearching",
+]);
+
+// const isAllScreens = all(excludeFromFocusSearching);
+
+const isNavBar = (target) => startsWith("navbar", target?.id);
+
+const ignoreMenuIfMultipleTargets = (nodes) => {
+  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+    return nodes.filter((n) => !isNavBar(n?.target));
+  }
+
+  return nodes;
+};
+
+const toDistance = ({ target, direction, comparisonRect }) => {
+  const componentRect = target.component?.getRect();
+
+  const orientationDistance = measureDistance(
+    direction,
+    comparisonRect,
+    componentRect
+  );
+
+  if (orientationDistance === -1) {
+    // ignores offscreen targets when moving up/down
+    return null;
+  }
+
+  const euclidDistance = measureEuclidianDistanceToCenter(
+    comparisonRect,
+    componentRect
+  );
+
+  return orientationDistance > 0 ? euclidDistance : orientationDistance;
+};
 
 /**
  * Get target in shortest distance in specified direction
@@ -173,43 +215,32 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .map((target) => {
-      const componentRect = target.component?.getRect();
-
-      const distance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      if (distance === -1) {
-        // ignores offscreen targets when moving up/down
-        return null;
-      }
+    .filter((target) => !excludeFromFocusSearching(target))
+    .map((target) => ({
+      distance: toDistance({ target, direction, comparisonRect }),
+      target,
+    }))
+    .filter(({ distance }) => positiveOrZero(distance));
 
-      return {
-        distance:
-          measureDistance(direction, comparisonRect, componentRect) +
-          measureEuclidianDistanceToCenter(comparisonRect, componentRect) /
-            10000,
-        target,
-      };
-    })
-    .filter((obj) => obj && obj.distance >= 0);
+  // if (isAllScreens(targets)) {
+  //   return last(targets);
+  // }
 
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  return distances && distances.length > 0 ? match.target : null;
-}
-
-function ignoreMenuIfMultipleTargets(nodes) {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    return nodes.filter((n) => n?.target?.id !== "navbar");
-  }
-
-  return nodes;
+  // console.log("debug_2", "FM getTargetInDirection", {
+  //   direction: direction?.value,
+  //   currentNode,
+  //   targetNodes,
+  //   targets,
+  //   comparisonRect,
+  //   distances,
+  //   match,
+  // });
+
+  return match?.target;
 }
 
 /**
@@ -300,3 +331,36 @@ export function hasPriorityInDirection(direction, component) {
 
   return (prioritiseFocusOn & mappedDirection) > 0;
 }
+
+export const getNodeBeforeRoot = (node) => {
+  if (isNil(node)) {
+    return undefined;
+  }
+
+  if (node.parent.id === "root") {
+    return node;
+  }
+
+  return getNodeBeforeRoot(node.parent);
+};
+
+export const isAllowedToMoveTo = (currentNode, nextNode) => {
+  const screenForCurrentNode = getNodeBeforeRoot(currentNode);
+  const screenForNextNode = getNodeBeforeRoot(nextNode);
+
+  return screenForCurrentNode.id === screenForNextNode.id;
+
+  // console.log("debug_2", "isAllowedToMoveTo", {
+  //   nodeBeforeRoot,
+  // });
+
+  // if (nodeBeforeRoot?.id === "navbar") {
+  //   return true;
+  // }
+
+  // if (nodeBeforeRoot?.component?.props?.isActive) {
+  //   return true;
+  // }
+
+  // return false;
+};

package/appUtils/focusManager/utils/index.ts

@@ -0,0 +1,65 @@
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { find, last, startsWith } from "ramda";
+
+// 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;
+  return new Promise((resolve, reject) => {
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    setTimeout(() => {
+      reject();
+    }, 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: 2500, //ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+export const getActiveScreen = (focusableTree) => {
+  return last(focusableTree.root.children);
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) => startsWith("content", child.id),
+    getActiveScreen(focusableTree)?.children
+  );
+
+  return content;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    return getContentNode(focusableTree)?.children.length > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: 2500, //ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

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/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}`;
@@ -460,7 +460,9 @@ export const getColorFromData = ({
 }: GetColorFromData): string => {
   const value = getValue(key);
 
-  if (validateColor(value)) {
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  if (validateColor(value.replace(".00", ""))) {
     return value;
   }
 

package/focusManager/index.ts

@@ -86,7 +86,7 @@ export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
 
 type Props = {
   component: ZappUIComponent;
-  zappPipesData: ZappPipesData;
+  zappPipesData?: ZappPipesData;
 } & Record<string, any>;
 
 export const useIsFocusable = (props: Props): void => {

package/localizationUtils/index.ts

@@ -64,10 +64,13 @@ export function getIsRTLFromLocalizations(localizations): boolean {
   return R.contains(localeToUse, RTL_LOCALES);
 }
 
+const remoteConfigLocalizationSelector = R.path([
+  "remoteConfigurations",
+  "localizations",
+]);
+
 export function useIsRTL(): boolean {
-  const localizations = useSelector(
-    R.path(["remoteConfigurations", "localizations"])
-  );
+  const localizations = useSelector(remoteConfigLocalizationSelector);
 
   return getIsRTLFromLocalizations(localizations);
 }

package/logger/index.ts

@@ -72,7 +72,7 @@ const { quickBrickLogger, coreLogger, logger, logLevels, utilsLogger } =
 function useLogger(
   logger: XRayLoggerI,
   eventData: UseLoggerHookArgs,
-  deps = []
+  deps: string[] = []
 ) {
   const {
     level = logLevels.verbose,

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: {