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

package/analyticsUtils/AnalyticsEvents/index.ts

@@ -7,6 +7,10 @@ import { sendHeaderClickEvent } from "./sendHeaderClickEvent";
 import { sendHardwareBackButtonClickEvent } from "./sendHardwareBackButtonClickEvent";
 import { sendDownloadsEvent } from "./sendDownloadsEvent";
 import { sendScreenEvent } from "./sendScreenEvent";
+import {
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
+} from "./searchEvents";
 
 export {
   sendScreenEvent,
@@ -18,4 +22,6 @@ export {
   sendHeaderClickEvent,
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 };

package/analyticsUtils/AnalyticsEvents/searchEvents.ts

@@ -0,0 +1,21 @@
+import { log_debug } from "../logger";
+import { postAnalyticEvent } from "../manager";
+import { ANALYTICS_CORE_EVENTS } from "../events";
+
+export const sendSearchCanceledEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_CANCELED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchCanceledEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};
+
+export const sendSearchExecutedEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_EXECUTED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchExecutedEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};

package/analyticsUtils/analyticsPlugins.ts

@@ -0,0 +1,25 @@
+import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+
+export const getVideojsAnalyticPluginsConfig = async (entry: ZappEntry) => {
+  let videojsConfiguration = {};
+
+  const plugins = appStore.get("plugins");
+  const analyticPlugins = R.filter(R.propEq("type", "analytics"), plugins);
+
+  const configurations = await Promise.all(
+    analyticPlugins.map(async (plugin) => {
+      const { configuration, module } = plugin;
+
+      return module?.getPlayerConfiguration?.(configuration, entry);
+    })
+  );
+
+  configurations.forEach((analyticConfig) => {
+    if (typeof analyticConfig === "object" && analyticConfig !== null) {
+      videojsConfiguration = { ...videojsConfiguration, ...analyticConfig };
+    }
+  });
+
+  return videojsConfiguration;
+};

package/analyticsUtils/events.ts

@@ -23,10 +23,16 @@ export const TAPPING_EVENTS = {
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
 
+export const SEARCH_EVENTS = {
+  SEARCH_EXECUTED: "search_executed",
+  SEARCH_CANCELED: "search_canceled",
+};
+
 export const ANALYTICS_CORE_EVENTS = {
   ...LEGACY_EVENTS,
   ...SCREEN_VIEW_EVENTS,
   ...TAPPING_EVENTS,
+  ...SEARCH_EVENTS,
 };
 
 export const WEBVIEW_EVENTS = {

package/analyticsUtils/index.tsx

@@ -18,6 +18,8 @@ import {
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
   sendScreenEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 } from "./AnalyticsEvents";
 
 import { postAnalyticEvent } from "./manager";
@@ -66,6 +68,8 @@ type AnalyticsFunctions = {
     item: ZappEntry;
     state: OfflineItemState;
   }) => void;
+  sendSearchCanceledEvent: (props: AnalyticsDefaultProperties) => void;
+  sendSearchExecutedEvent: (props: AnalyticsDefaultProperties) => void;
 };
 
 type GetAnalyticsFunctions = (
@@ -102,6 +106,8 @@ export function getAnalyticsFunctions({
     sendHardwareBackButtonClickEvent,
     sendScreenEvent,
     sendDownloadsEvent,
+    sendSearchCanceledEvent,
+    sendSearchExecutedEvent,
   };
 }
 

package/appUtils/focusManager/index.ts

@@ -1,20 +1,9 @@
 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");
 
@@ -57,7 +46,7 @@ export const focusManager = (function () {
   let lastFocusedId = null;
   let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = false;
+  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
   function disableAutomaticFocus() {
@@ -104,7 +93,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(direction);
+      currentFocusable.blur(currentFocusable, direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -230,55 +219,38 @@ export const focusManager = (function () {
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any, fallback?: () => void) {
+  function setInitialFocus(lastAddedParentNode?: any) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (isNilOrEmpty(preferredFocus)) {
-      fallback?.();
-      return;
-    }
-
-    const focusCandidate = preferredFocus[0];
-    const focusableItem = focusCandidate.component;
-
-    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 && preferredFocus.length > 0) {
+      const focusCandidate = preferredFocus[0];
+      const focusableItem = focusCandidate.component;
+
+      if (
+        focusableItem &&
+        !focusableItem.isGroup &&
+        isFocusEnabled(focusableItem)
+      ) {
+        if (initialFocusOnContent) {
+          blur();
+          initialFocusOnContent = false;
+        }
 
-    if (preferredFocus.length === 1 && focusableItem && focusableItem.isGroup) {
-      // we've found only one FocusableGroup as a candidate to focus, try to use fallback
-      fallback?.();
-      return;
-    }
+        logger.log({
+          message: "setInitialFocus – currentFocusNode",
+          data: {
+            focusableItem,
+          },
+        });
 
-    if (
-      focusableItem &&
-      !focusableItem.isGroup &&
-      isFocusEnabled(focusableItem)
-    ) {
-      if (initialFocusOnContent) {
-        blur();
-        initialFocusOnContent = false;
+        currentFocusNode = focusCandidate;
+        focusableItem.willReceiveFocus(focusableItem, null);
+        focusableItem && setFocus(focusCandidate.id, null);
       }
-
-      logger.log({
-        message: "setInitialFocus – currentFocusNode",
-        data: {
-          focusableItem,
-        },
-      });
-
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
-      focusableItem && setFocus(focusCandidate.id, null);
     }
   }
 
@@ -351,8 +323,6 @@ 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;
@@ -368,8 +338,6 @@ 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")) {
@@ -386,8 +354,6 @@ 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);
   }
 
@@ -399,8 +365,6 @@ 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) {
@@ -439,8 +403,6 @@ export const focusManager = (function () {
   }
 
   function setupInitialFocus(id: string, focusOnContent?: boolean) {
-    console.log("debug_2", "FM - setupInitialFocus", { id, focusOnContent });
-
     if (focusOnContent) {
       initialFocusOnContent = focusOnContent;
     } else {
@@ -448,62 +410,6 @@ 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
@@ -516,13 +422,6 @@ 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();
 
@@ -619,7 +518,5 @@ export const focusManager = (function () {
     enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
-    setFocusOnMenu,
-    setFocusOnContent,
   };
 })();

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

@@ -1,4 +1,4 @@
-import { allPass, pathOr, startsWith, isNil } from "ramda";
+import * as R from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { rejectItemByPath } from "../../../../objectUtils";
@@ -143,49 +143,7 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-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;
-};
+const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
 
 /**
  * Get target in shortest distance in specified direction
@@ -215,32 +173,52 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .filter((target) => !excludeFromFocusSearching(target))
-    .map((target) => ({
-      distance: toDistance({ target, direction, comparisonRect }),
-      target,
-    }))
-    .filter(({ distance }) => positiveOrZero(distance));
+    .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;
+      }
 
-  // if (isAllScreens(targets)) {
-  //   return last(targets);
-  // }
+      const orientationDistance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      const euclidDistance = measureEuclidianDistanceToCenter(
+        comparisonRect,
+        componentRect
+      );
+
+      return {
+        distance:
+          orientationDistance > 0 ? euclidDistance : orientationDistance,
+        target,
+      };
+    })
+    .filter((obj) => obj && obj.distance >= 0);
 
   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
 
-  // console.log("debug_2", "FM getTargetInDirection", {
-  //   direction: direction?.value,
-  //   currentNode,
-  //   targetNodes,
-  //   targets,
-  //   comparisonRect,
-  //   distances,
-  //   match,
-  // });
-
-  return match?.target;
+  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;
 }
 
 /**
@@ -331,36 +309,3 @@ 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/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/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

@@ -447,30 +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);
-
   // 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;
+  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,
   };
 };