@applicaster/zapp-react-native-utils 13.0.0-rc.99 → 14.0.0-alpha.1054425138

package/appUtils/accessibilityManager/const.ts

@@ -47,4 +47,22 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
     label: "accessibility_fullscreen_label",
     hint: "accessibility_fullscreen_hint",
   },
+  // EPG-specific buttons
+  now: {
+    label: "accessibility_now_label",
+    hint: "accessibility_now_hint",
+  },
+  day: {
+    label: "accessibility_day_label",
+    hint: "accessibility_day_hint",
+  },
+  program: {
+    label: "accessibility_program_label",
+    hint: "accessibility_program_hint",
+  },
+  // Menu-specific buttons
+  menu_item: {
+    label: "accessibility_menu_item_label",
+    hint: "accessibility_menu_item_hint",
+  },
 } as const;

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,10 +1,12 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
+import { screenStates } from "@applicaster/zapp-react-native-bridge/ZappStorage/ScreenSingleValueProvider";
 
-interface IResolver {
+export interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
 
+// TODO: Rename to ObjectKeyResolver or similar
 export class EntryResolver implements IResolver {
   entry: ZappEntry;
 
@@ -21,6 +23,18 @@ export class EntryResolver implements IResolver {
   }
 }
 
+// TODO: Move to proper place
+
+export class ScreenStateResolver implements IResolver {
+  constructor(private route: string) {}
+
+  async resolve(key: string) {
+    const screenState = screenStates[this.route];
+
+    return screenState?.[key];
+  }
+}
+
 export class ContextResolver implements IResolver {
   resolve = async (compositeKey: string) =>
     ContextKeysManager.instance.getKey(compositeKey);

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -61,6 +61,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getCurrentGroup": [Function],
   "getGroupById": [Function],
   "getGroupRootById": [Function],
+  "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,8 +1,10 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
+
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
+import { findChild } from "./utils";
 
 const { FocusableManagerModule } = NativeModules;
 
@@ -52,10 +54,7 @@ export const focusManager = (function () {
     const node = focusableTree.findInTree(groupId);
 
     if (node?.children?.length > 0) {
-      const preferredFocus = R.compose(
-        R.find(R.pathEq(["component", "props", "preferredFocus"], true)),
-        R.prop("children")
-      )(node);
+      const preferredFocus = findChild(true, node);
 
       if (preferredFocus?.component?.isGroup) {
         return getPreferredFocusInGroup({ groupId: preferredFocus?.id });
@@ -382,6 +381,16 @@ export const focusManager = (function () {
     forceFocusOnItem({ focusableItem, callback });
   }
 
+  function getPreferredFocusChild(id) {
+    const node = focusableTree.findInTree(id);
+
+    if (node?.children?.length > 0) {
+      return findChild(true, node) || findChild(false, node);
+    }
+
+    return node;
+  }
+
   return {
     on,
     invokeHandler,
@@ -402,5 +411,6 @@ export const focusManager = (function () {
     getCurrentGroup,
     getGroupRootById,
     isGroupItemFocused,
+    getPreferredFocusChild,
   };
 })();

package/appUtils/focusManager/utils/__tests__/findChild.test.ts

@@ -0,0 +1,35 @@
+import { findChild } from "../index";
+
+describe("findChild", () => {
+  const makeNode = (children = []) => ({ children });
+
+  const child = (preferredFocus: boolean) => ({
+    component: { props: { preferredFocus } },
+  });
+
+  it("returns the child with preferredFocus=true", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(true, node)).toBe(node.children[1]);
+  });
+
+  it("returns the child with preferredFocus=false", () => {
+    const node = makeNode([child(false), child(true), child(false)]);
+    expect(findChild(false, node)).toBe(node.children[0]);
+  });
+
+  it("returns undefined if no child matches preferredFocus", () => {
+    const node = makeNode([child(false), child(false)]);
+    expect(findChild(true, node)).toBeUndefined();
+  });
+
+  it("returns undefined if node has no children", () => {
+    const node = makeNode();
+    expect(findChild(true, node)).toBeUndefined();
+    expect(findChild(false, node)).toBeUndefined();
+  });
+
+  it("returns undefined if children is not an array", () => {
+    const node = { children: null };
+    expect(findChild(true, node)).toBeUndefined();
+  });
+});

package/appUtils/focusManager/utils/index.ts

@@ -98,3 +98,8 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export const findChild = (preferredFocus: boolean, node) =>
+  (node?.children || []).find(
+    (child) => child?.component?.props?.preferredFocus === preferredFocus
+  );

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,12 @@ export function getUILanguage() {
   return getLanguageCode();
 }
 
+/**
+ * fallback to en for missing dayjslocalization
+ * converts the locale code to a dayjs compatible locale code
+ * lowercase input code is expected, e.g. "en-GB" => "en-gb"
+ * @param {string} code - locale code, e.g. "en", "fr", "es-LA"
+ * */
 export const toDayJSLocaleMap = (code) => {
   const map = {
     hy: "hy-am",
@@ -73,10 +79,12 @@ export const toDayJSLocaleMap = (code) => {
     no: null,
     pa: "pa-in",
     qu: null,
-    "es-LA": "es",
     sm: null,
     to: null,
     xh: null,
+    tt: null,
+    "es-LA": "es",
+    "en-UK": "en-gb",
   };
 
   if (map[code] === null) {
@@ -84,7 +92,7 @@ export const toDayJSLocaleMap = (code) => {
   } else if (map[code]) {
     return map[code];
   } else {
-    return code;
+    return code.toLowerCase();
   }
 };
 

package/appUtils/playerManager/playerHooks/usePlayerCurrentTime.tsx

@@ -12,7 +12,7 @@ import { useThrottle } from "../../../functionUtils";
 export const usePlayerCurrentTime = (
   listenerId: string,
   playerId?: string
-): number | null => {
+): { currentTime: number | null; cancel: () => void } => {
   const [currentTime, setCurrentTime] = useState<number | null>(null);
   const player: Player = usePlayer(playerId);
 
@@ -20,15 +20,17 @@ export const usePlayerCurrentTime = (
     if (player) {
       const newCurrentTime = player.getContentPosition();
 
-      setCurrentTime((prevTime) =>
-        prevTime !== newCurrentTime ? newCurrentTime : prevTime
-      );
+      setCurrentTime(newCurrentTime);
     }
   }, [player]);
 
+  // We update the current time every ~250ms since player can have rate set to 2x.
+  // We update more often than 2x a second to avoid noticiable 'pulsation' in update,
+  //  since native level also updates the current time every ~250ms,
+  //  and combined with assorted delays it creates interference pattern.
   const { throttledFunction: throttledUpdate, cancel } = useThrottle(
     updateCurrentTime,
-    1000
+    1000 / 4
   );
 
   useEffect(() => {
@@ -36,7 +38,9 @@ export const usePlayerCurrentTime = (
       throttledUpdate();
 
       const listeners = {
-        onVideoProgress: throttledUpdate,
+        onVideoProgress: () => {
+          setCurrentTime(player.getContentPosition());
+        },
       };
 
       const id = `${listenerId}_player_current_time`;
@@ -53,5 +57,5 @@ export const usePlayerCurrentTime = (
     }
   }, [player, listenerId, throttledUpdate, cancel]);
 
-  return currentTime;
+  return { currentTime, cancel };
 };

package/cellUtils/index.ts

@@ -2,12 +2,16 @@ import * as R from "ramda";
 import dayjs from "dayjs";
 import validateColor from "validate-color";
 
+import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
+import {
+  capitalize,
+  isString,
+} from "@applicaster/zapp-react-native-utils/stringUtils";
+import { cellUtilsLogger } from "@applicaster/zapp-react-native-utils/cellUtils/logger";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
-import { transformColorCode as fixColorHexCode } from "../transform";
-import { capitalize, isString } from "../stringUtils";
-import { cellUtilsLogger } from "./logger";
-import { isWeb } from "../reactUtils";
-import { isNotNil } from "../reactUtils/helpers";
 
 const CUSTOM_KEY = "other";
 

package/componentsUtils/index.ts

@@ -1,13 +1,19 @@
 const GROUP = "group-qb";
 const GROUP_INFO = "group-info-qb";
+const GROUP_INFO_OLD = "group-info";
 const EMPTY_GROUP_COMPONENT = "empty_group_component";
 
 const GALLERY = "gallery-qb";
 
 const SCREEN_PICKER = "screen-picker-qb-tv";
 
+const HORIZONTAL_LIST = "horizontal_list_qb";
+
 export const isGallery = (item): boolean => item?.component_type === GALLERY;
 
+export const isHorizontalList = (item): boolean =>
+  item?.component_type === HORIZONTAL_LIST;
+
 export const isScreenPicker = (item): boolean =>
   item?.component_type === SCREEN_PICKER;
 
@@ -29,4 +35,5 @@ export const isEmptyGroup = (item): boolean =>
   item?.component_type === EMPTY_GROUP_COMPONENT;
 
 export const isGroupInfo = (item): boolean =>
-  item?.component_type === GROUP_INFO;
+  item?.component_type === GROUP_INFO ||
+  item?.component_type === GROUP_INFO_OLD;

package/localizationUtils/index.ts

@@ -1,8 +1,8 @@
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
-import { getUILanguage } from "../appUtils/localizationsHelper";
-import { utilsLogger } from "../logger";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 export {
   getLocale,
@@ -10,7 +10,7 @@ export {
   getCountryCode,
   getLocalizations,
   getUILanguage,
-} from "../appUtils/localizationsHelper";
+} from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
 
 const RTL_LOCALES = [
   "ar", // Arabic

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -251,6 +251,19 @@ const generalContent = () => ({
         key: "screen_title",
         initial_value: null,
       },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Description",
+        key: "msg_maximum_selection_reached_message",
+        initial_value:
+          "You’ve reached the maximum number of items you can select.",
+      },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Button",
+        key: "msg_maximum_selection_reached_message_ok_button",
+        initial_value: "Got it",
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -42,14 +42,6 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Enable if you want to have adaptive background gradient based on audio background image.",
       },
-      {
-        key: "audio_player_background_image_query",
-        label: "Audio Player Image Query",
-        initial_value: "",
-        type: "text_input",
-        label_tooltip:
-          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
-      },
       {
         key: "audio_player_background_image_default_color",
         label: "Audio Player Background Image Default Color",

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
 
@@ -46,4 +47,5 @@ module.exports = {
   tvProgressBar,
   secondaryImage,
   getUpdatedSecondaryImageKeys,
+  compact,
 };

package/manifestUtils/keys.js

@@ -21,7 +21,30 @@ const ZAPPIFEST_FIELDS = {
   },
 };
 
-const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
+const TV_PLATFORMS_FOR_FONTS = [
+  "tvOS",
+  "android",
+  "LG",
+  "samsung",
+  "roku",
+  "vizio",
+];
+
+const MOBILE_PLATFORMS = [
+  "ios",
+  "ios_for_quickbrick",
+  "android",
+  "android_for_quickbrick",
+];
+
+const TV_PLATFORMS = [
+  "android_tv_for_quickbrick",
+  "amazon_fire_tv_for_quickbrick",
+  "tvos_for_quickbrick",
+  "samsung_tv",
+  "lg_tv",
+  "vizio",
+];
 
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {
@@ -92,7 +115,7 @@ const TV_FONT_KEY_DATA = {
     name: "focused font color",
     type: ZAPPIFEST_FIELDS.color_picker,
   },
-  ...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS),
+  ...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS_FOR_FONTS),
   textAlignment: {
     name: "text alignment",
     type: ZAPPIFEST_FIELDS.select,
@@ -2083,4 +2106,6 @@ module.exports = {
   TV_CELL_BADGE_FIELDS,
   progressBarFields,
   secondaryImageFields,
+  TV_PLATFORMS,
+  MOBILE_PLATFORMS,
 };

package/navigationUtils/__tests__/navigationUtils.test.js

@@ -319,68 +319,3 @@ describe("getRiverFromRoute", () => {
     expect(getRiverFromRoute({ route, rivers })).toEqual(river);
   });
 });
-
-describe("isPreviousRouteHook", () => {
-  const { isPreviousRouteHook } = navigationUtils;
-
-  const history = {
-    entries: [],
-  };
-
-  it("returns false if it's a root route", () => {
-    history.entries.push({ pathname: "/river/root" });
-    const currentResult = isPreviousRouteHook(history.entries);
-    expect(currentResult).toBe(false);
-  });
-
-  it("returns false if previous root is not a hook", () => {
-    history.entries.push({ pathname: "/almostHooks/secondLevel" });
-    const currentResult = isPreviousRouteHook(history.entries);
-    expect(currentResult).toBe(false);
-  });
-
-  it("returns true if previous root is a hook", () => {
-    history.entries.push({ pathname: "/hooks/ThirdLevel" });
-    history.entries.push({ pathname: "/almostHooks/forthLevel" });
-    const currentResult = isPreviousRouteHook(history.entries);
-    expect(currentResult).toBe(true);
-  });
-});
-
-describe("getPreviousHooksCount", () => {
-  const { getPreviousHooksCount } = navigationUtils;
-
-  const history = {
-    entries: [],
-  };
-
-  it("returns 0 if it's a root route", () => {
-    history.entries.push({ pathname: "/river/root" });
-    const currentResult = getPreviousHooksCount(history);
-    expect(currentResult).toBe(0);
-  });
-
-  it("returns 0 if previous root is not a hook", () => {
-    history.entries.push({ pathname: "/almostHooks/secondLevel" });
-    const currentResult = getPreviousHooksCount(history);
-    expect(currentResult).toBe(0);
-  });
-
-  it("returns 1 if previous root is a hook", () => {
-    history.entries = [];
-    history.entries.push({ pathname: "/hooks/ThirdLevel" });
-    history.entries.push({ pathname: "/almostHooks/forthLevel" });
-    const currentResult = getPreviousHooksCount(history);
-    expect(currentResult).toBe(1);
-  });
-
-  it("returns 2 if 2 previous routes are a hooks", () => {
-    history.entries = [];
-    history.entries.push({ pathname: "/almostHooks/forthLevel" });
-    history.entries.push({ pathname: "/hooks/myHook" });
-    history.entries.push({ pathname: "/hooks/myHook" });
-    history.entries.push({ pathname: "/almostHooks/forthLevel" });
-    const currentResult = getPreviousHooksCount(history);
-    expect(currentResult).toBe(2);
-  });
-});

package/navigationUtils/index.ts

@@ -363,37 +363,6 @@ export function getRiverFromRoute({
   return screenType && screenId ? { screenType, screenId } : null;
 }
 
-/**
- * Function returns true if the previous route (in the react-router history) is a hook plugin
- * @param {*} entries - React-Router History Object
- * @return boolean
- */
-export function isPreviousRouteHook(entries: [{ pathname: string }]): boolean {
-  const previousRoute = entries[entries.length - 2];
-  if (!previousRoute) return false;
-
-  return R.test(/\/hooks\/.*/g, previousRoute.pathname);
-}
-
-/**
- * Function returns number of consecutive hooks that are behind the current route
- * @param {*} history - React-Router History Object
- * @return true
- */
-export function getPreviousHooksCount(history: {
-  entries: [{ pathname: string }];
-}): number {
-  let hooksCount = 0;
-  let entries = R.clone(history.entries);
-
-  while (isPreviousRouteHook(entries)) {
-    hooksCount++;
-    entries = R.init(entries);
-  }
-
-  return hooksCount;
-}
-
 export const usesVideoModal = (
   item: ZappEntry,
   rivers: Record<string, ZappRiver>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-rc.99",
+  "version": "14.0.0-alpha.1054425138",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.99",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1054425138",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/configurationGenerator.ts

@@ -39,22 +39,6 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Disable if you don't want the content to have a right orientation",
       },
-      {
-        key: "magic_background",
-        label: "Enable Magic Background",
-        initial_value: false,
-        type: "switch",
-        label_tooltip:
-          "Enable if you want to have adaptive background gradient based on audio background image.",
-      },
-      {
-        key: "audio_player_background_image_query",
-        label: "Audio Player Image Query",
-        initial_value: "",
-        type: "text_input",
-        label_tooltip:
-          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
-      },
       {
         key: "audio_player_background_image_default_color",
         label: "Audio Player Background Image Default Color",

package/playerUtils/index.ts

@@ -1,5 +1,7 @@
 import * as R from "ramda";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { isString } from "@applicaster/zapp-react-native-utils/typeGuards";
+
 import { getBoolFromConfigValue } from "../configurationUtils";
 
 /**
@@ -72,3 +74,18 @@ function isLiveByManager(): boolean {
 export function isLive(entry: ZappEntry): boolean {
   return isEntryLive(entry) || isLiveByManager();
 }
+
+export const isAudioItem = (item: Option<ZappEntry>) => {
+  if (
+    isString(item?.content?.type) &&
+    item?.content?.type?.includes?.("audio")
+  ) {
+    return true;
+  }
+
+  if (isString(item?.type?.value) && item?.type?.value?.includes?.("audio")) {
+    return true;
+  }
+
+  return false;
+};

package/reactHooks/app/useAppState.ts

@@ -14,10 +14,10 @@ export function useAppState(returnIsActive) {
   };
 
   React.useEffect(() => {
-    AppState.addEventListener("change", setAppState);
+    const subscription = AppState.addEventListener("change", setAppState);
 
     return () => {
-      AppState.removeEventListener("change", setAppState);
+      subscription.remove();
     };
   }, []);
 

package/reactHooks/cell-click/index.ts

@@ -16,7 +16,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData } from "../screen";
+import { useCurrentScreenData, useScreenContext } from "../screen";
 
 /**
  * If onCellTap is defined execute the function and
@@ -46,6 +46,7 @@ export const useCellClick = ({
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +84,8 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
         });
       }
 
@@ -117,6 +120,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );