@applicaster/zapp-react-native-utils 13.0.0-alpha.5335086935 → 13.0.0-alpha.5375459737

package/actionsExecutor/ActionExecutorContext.tsx

@@ -1,6 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import React, { createContext, useMemo } from "react";
+import React, { createContext, useEffect, useMemo } from "react";
+import { NativeModules } from "react-native";
 import {
   actionExecutor as _actionExecutor,
   ActionResult,
@@ -19,8 +20,20 @@ import {
   EntryResolver,
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
+import { useNavigation } from "../reactHooks";
+import { get } from "lodash";
 
-const { log_error, log_info } = createLogger({
+import {
+  useContentTypes,
+  usePickFromState,
+} from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  ACTION_EXECUTOR_EVENT_SOURCE,
+  TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT,
+} from "./consts";
+const { ReactNativeEventBusBridge } = NativeModules;
+
+export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -51,6 +64,42 @@ type Props = {
   children: React.ReactNode;
 };
 
+function findParentComponent(
+  childId: string,
+  parent: ZappRiver | ZappUIComponent
+): ZappRiver | ZappUIComponent | null {
+  for (const child of parent.ui_components) {
+    if (child.id === childId) return parent;
+
+    if (child.ui_components) {
+      const found = findParentComponent(childId, child);
+      if (found) return found;
+    }
+  }
+
+  return null;
+}
+
+// send all data just in case (like for message string formatting)
+// Type is not exported for now
+type MaxTagsReachedEvent = {
+  // todo: current stable Android SDK crashes when we pass array from RN back to RN
+  selectedItems?: string[];
+  maxItems: number;
+  tag: string;
+  keyNamespace: string;
+};
+
+async function onMaxTagsReached(data: MaxTagsReachedEvent) {
+  const event = {
+    type: TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT,
+    source: ACTION_EXECUTOR_EVENT_SOURCE,
+    data,
+  };
+
+  await ReactNativeEventBusBridge?.postEvent(event);
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -65,11 +114,13 @@ const prepareDefaultActions = (actionExecutor) => {
     async (_action, context) => {
       const dispatch = appStore.getDispatch();
 
-      log_info("handleAction: refreshComponent event");
+      const dataSource =
+        context?.component?.data?.source ||
+        findParentComponent(context?.component.id, context?.screenData)?.data
+          ?.source;
 
-      const dataSource = context?.component?.data?.source;
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
 
-      // TODO: Later we can pass component ids to do refresh instead of current one
       // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
       // TODO: handle focused item removal
       dispatch(
@@ -169,8 +220,29 @@ const prepareDefaultActions = (actionExecutor) => {
       action: ActionType,
       context?: Record<string, any>
     ): Promise<ActionResult> => {
+      if (!context) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing context"
+        );
+
+        return ActionResult.Error;
+      }
+
+      const entry = context?.entry as ZappEntry;
+
+      if (!entry) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+        );
+
+        return ActionResult.Error;
+      }
+
+      const tag = action.options?.selector
+        ? get(entry, action.options.selector)
+        : (entry.extensions?.tag ?? entry.id);
+
       const keyNamespace = action.options?.key;
-      const tag = context?.entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =
@@ -188,6 +260,23 @@ const prepareDefaultActions = (actionExecutor) => {
         if (selectedItems.includes(tag)) {
           await multiSelectProvider.removeItem(tag);
         } else {
+          const maxItems = action.options?.max_items;
+
+          if (maxItems && selectedItems.length >= maxItems) {
+            log_info(
+              `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
+            );
+
+            await onMaxTagsReached({
+              selectedItems,
+              maxItems,
+              tag,
+              keyNamespace,
+            });
+
+            return ActionResult.Cancel;
+          }
+
           await multiSelectProvider.addItem(tag);
         }
       } else {
@@ -211,6 +300,10 @@ export function withActionExecutor(Component) {
   prepareDefaultActions(_actionExecutor);
 
   return function ActionExecutorComponent(props: Props) {
+    const navigator = useNavigation();
+    const { rivers } = usePickFromState(["rivers"]);
+    const contentTypes = useContentTypes();
+
     const handlers = useMemo(() => {
       return {
         unregisterAction: _actionExecutor.unregisterAction,
@@ -221,6 +314,44 @@ export function withActionExecutor(Component) {
       };
     }, []);
 
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        "navigateToScreen",
+        async (action: ActionType, context?: Record<string, any>) => {
+          const screenType = action.options?.typeMapping;
+
+          if (!screenType) {
+            log_error("navigateToScreen: typeMapping option is missing");
+
+            return ActionResult.Error;
+          }
+
+          const screenId = contentTypes?.[screenType]?.screen_id || null;
+
+          if (!screenId) {
+            log_error(
+              `navigateToScreen: can not resolve screen type mapping: ${screenType}`
+            );
+
+            return ActionResult.Error;
+          }
+
+          const river = rivers[screenId];
+
+          if (!river) {
+            log_error("navigateToScreen: can not resolve river");
+
+            return ActionResult.Error;
+          }
+
+          context?.callback?.({ success: false, error: null, abort: true });
+          navigator.replace(river);
+
+          return ActionResult.Success;
+        }
+      );
+    }, [navigator, rivers, contentTypes]);
+
     return (
       <ActionExecutorContext.Provider value={handlers}>
         <Component {...props} />

package/actionsExecutor/consts.ts

@@ -0,0 +1,4 @@
+export const TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT =
+  "action.localStorageToggleFlag.maxItemsReached";
+
+export const ACTION_EXECUTOR_EVENT_SOURCE = "ActionExecutor";

package/appUtils/HooksManager/Hook.ts

@@ -65,6 +65,10 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
+    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
+      return;
+    }
+
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }

package/appUtils/HooksManager/index.ts

@@ -84,7 +84,7 @@ export function HooksManager({
   plugins,
   startUpHooksData = {},
 }: HookManagerArgs): HookManager {
-  hooksManagerLogger.addContext({ targetScreen });
+  hooksManagerLogger.addContext({ targetScreenId: targetScreen.id });
 
   function logHookEvent(func, message, data) {
     func({
@@ -269,6 +269,7 @@ export function HooksManager({
       payload = initialPayload,
       callback: callbackArg,
       cancelled,
+      abort,
     }) {
       let callback = callbackArg;
 
@@ -308,6 +309,7 @@ export function HooksManager({
         hookPlugin.setStateAndNotify(HOOKS_EVENTS.CANCEL, {
           hookPlugin,
           payload,
+          abort,
         });
 
         const isHookInHomescreen = payload?.home;

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,12 +1,6 @@
-import { createLogger } from "../../logger";
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
 
-const { log_error } = createLogger({
-  subsystem: "contextResolver",
-  category: "General",
-});
-
 interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
@@ -64,12 +58,7 @@ export const resolveObjectValues = async (
         return [key, resolvedValue];
       }
 
-      log_error("resolveObjectValues: invalid context string", {
-        key,
-        value,
-      });
-
-      return [key, null];
+      return [key, value];
     })
   );
 

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

@@ -5,6 +5,7 @@ exports[`focusManager should be defined 1`] = `
   "blur": [Function],
   "disableFocus": [Function],
   "enableFocus": [Function],
+  "findPreferredFocusChild": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {

package/appUtils/focusManager/index.ts

@@ -334,16 +334,7 @@ export const focusManager = (function () {
     return { success: false };
   }
 
-  function treeLoaded(val, node) {
-    logger.log({
-      message: "treeLoaded",
-      data: {
-        val,
-        node,
-        currentFocusNode,
-      },
-    });
-  }
+  function treeLoaded(_val, _node) {}
 
   function pressIn() {
     const currentFocusable = getCurrentFocus();
@@ -543,6 +534,18 @@ export const focusManager = (function () {
 
   const { on, invokeHandler, removeHandler } = eventHandler;
 
+  function findPreferredFocusChild(id) {
+    const node = getCurrentFocusNode(id);
+
+    const preferredFocus = findPriorityItem([node]);
+
+    if (isNilOrEmpty(preferredFocus)) {
+      return undefined;
+    }
+
+    return preferredFocus[0];
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -572,5 +575,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    findPreferredFocusChild,
   };
 })();

package/appUtils/keyCodes/index.ts

@@ -1,5 +1,3 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
@@ -34,12 +32,18 @@ export function keyCode(key) {
   keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
   */
 
-  const matches = R.compose(
-    R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
-    R.when(R.is(String), R.prop(R.__, KEYS))
-  );
+  const matches = (compareKey) => {
+    // If compareKey is a string, look it up in KEYS object
+    const keyToCompare =
+      typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
+
+    // Compare either code or keyCode properties
+    return (
+      keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
+    );
+  };
 
-  const matchesAny = (...args) => R.any(matches, args);
+  const matchesAny = (...args) => args.some(matches);
 
   const direction = () =>
     matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,29 @@ export function getUILanguage() {
   return getLanguageCode();
 }
 
+export const toDayJSLocaleMap = (code) => {
+  const map = {
+    hy: "hy-am",
+    fj: null,
+    la: null,
+    no: null,
+    pa: "pa-in",
+    qu: null,
+    "es-LA": "es",
+    sm: null,
+    to: null,
+    xh: null,
+  };
+
+  if (map[code] === null) {
+    return "en";
+  } else if (map[code]) {
+    return map[code];
+  } else {
+    return code;
+  }
+};
+
 /**
  * returns the localization for the app based on the locale. If the locale is null
  * or undefined, or if the given locale doesn't exist in the localizations,

package/appUtils/orientationHelper.ts

@@ -1,8 +1,8 @@
-/// <reference types="@types/react-native" />
 import * as ReactNative from "react-native";
-import { isTV, platformSelect } from "../reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+
+import { isTV, platformSelect } from "../reactUtils";
+import { useIsTablet } from "../reactHooks";
 
 import {
   QUICK_BRICK_EVENTS,
@@ -121,8 +121,15 @@ export const removeOrientationChangeListener = (listener: any): void => {
  */
 export const isOrientationCompatible = ({
   orientation,
-  layoutData: { width, height },
+  layoutData: { width, height, isTablet, isTabletPortrait },
 }) => {
+  // We count portrait as compatible, because if default in zapp for mobile layout
+  // We count landscape as compatible, because if isTabletPortrait is false,
+  // it defaults for device
+  if (isTablet && !isTabletPortrait) {
+    return true;
+  }
+
   const isLandscape = width > height;
 
   if (
@@ -146,15 +153,6 @@ export const isOrientationCompatible = ({
   return true;
 };
 
-export const useIsOrientationCompatible = (orientation) => {
-  const { height, width } = ReactNative.useWindowDimensions();
-
-  return isOrientationCompatible({
-    orientation,
-    layoutData: { width, height },
-  });
-};
-
 /**
  * Determine final screen orientation based on device type,
  * settings and orientation value provided by screen data settings

package/appUtils/playerManager/player.ts

@@ -97,7 +97,7 @@ export class Player {
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
     this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
-
+    this.onAdBreakEnd = this.onAdBreakEnd.bind(this);
     this.entryObservable = null;
   }
 
@@ -201,17 +201,25 @@ export class Player {
         adPosition: currentTime,
       };
     } else {
-      if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
-        this.playerState.seekableDuration = seekableDuration;
-      }
+      this.updateContentDuration({ seekableDuration, duration, currentTime });
+    }
+  };
 
-      if (!isEmptyOrNil(duration) && duration >= 0) {
-        this.playerState.contentDuration = duration;
-      }
+  protected updateContentDuration = ({
+    seekableDuration = null,
+    duration = null,
+    currentTime = null,
+  }) => {
+    if (!isEmptyOrNil(seekableDuration) && seekableDuration >= 0) {
+      this.playerState.seekableDuration = seekableDuration;
+    }
 
-      if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
-        this.playerState.contentPosition = currentTime;
-      }
+    if (!isEmptyOrNil(duration) && duration >= 0) {
+      this.playerState.contentDuration = duration;
+    }
+
+    if (!isEmptyOrNil(currentTime) && currentTime >= 0) {
+      this.playerState.contentPosition = currentTime;
     }
   };
 
@@ -559,7 +567,7 @@ export class Player {
     });
   };
 
-  onAdBreakEnd = (event) => {
+  onAdBreakEnd(event) {
     this.playerState.adState = null;
     this.playerState.isInAdBreak = false;
 
@@ -567,7 +575,7 @@ export class Player {
       callbackName: SharedPlayerCallBacksKeys.OnAdBreakEnd,
       event,
     });
-  };
+  }
 
   onAdEnd = (event) => {
     this.playerState.adState = null;
@@ -736,6 +744,10 @@ export class Player {
     return null;
   };
 
+  public hasResumePosition() {
+    return false;
+  }
+
   public getConfig = () => this.config;
 
   // TODO: replace with enum of supported orientations

package/appUtils/playerManager/playerNative.ts

@@ -54,6 +54,10 @@ export class PlayerNative extends Player {
     });
   }
 
+  public hasResumePosition() {
+    return true;
+  }
+
   getContentPosition = () => {
     return this.playerState.contentPosition;
   };
@@ -221,11 +225,13 @@ export class PlayerNative extends Player {
   };
 
   onVideoLoad = (event) => {
-    if (this.startPosition) {
-      this.seekTo(this.startPosition);
-      this.startPosition = null;
+    this.updateContentDuration(event);
 
+    if (this.startPosition && !this.playerState.isInAdBreak) {
       super.onVideoLoad({ ...event, ignoreContinueWatching: true });
+
+      this.seekTo(this.startPosition);
+      this.startPosition = null;
     } else {
       super.onVideoLoad(event);
     }
@@ -249,6 +255,15 @@ export class PlayerNative extends Player {
     }
   };
 
+  onAdBreakEnd = (event) => {
+    super.onAdBreakEnd(event);
+
+    if (this.startPosition) {
+      this.seekTo(this.startPosition);
+      this.startPosition = null;
+    }
+  };
+
   // This function is called when native player used directly without wrapped component,
   // Since event from native comes with wrapped in NativeEvent property
   getNativeViewListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {

package/appUtils/playerManager/usePlayerTitleSummaryOverlay.tsx

@@ -3,12 +3,18 @@ import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
 import { useFeedLoader } from "../../reactHooks";
 import { usePlayer } from "./usePlayer";
 
+const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
 export const useTitleSummaryOverlay = (
-  feedUrl,
   entry,
   isLive = false,
   interval: number
 ) => {
+  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
+  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
   const player = usePlayer();
   const [title, setTitle] = useState<string | number>(entry?.title || "");
   const [summary, setSummary] = useState<string | number>(entry?.summary || "");

package/arrayUtils/index.ts

@@ -93,7 +93,7 @@ export const isIndexInRange = (index: number, length: number): boolean => {
 export const makeListOfIndexes = (size: number): number[] =>
   Array.from({ length: size }, (_, index) => index);
 
-export const makeListOf = <T>(value: T, size: number): T[] => {
+export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
 

package/componentsUtils/index.ts

@@ -1,8 +1,15 @@
-export const isGallery = (item): boolean =>
-  item?.component_type === "gallery-qb";
+const GROUP = "group-qb";
+const GROUP_INFO = "group-info-qb";
+const EMPTY_GROUP_COMPONENT = "empty_group_component";
+
+const GALLERY = "gallery-qb";
+
+const SCREEN_PICKER = "screen-picker-qb-tv";
+
+export const isGallery = (item): boolean => item?.component_type === GALLERY;
 
 export const isScreenPicker = (item): boolean =>
-  item?.component_type === "screen-picker-qb-tv";
+  item?.component_type === SCREEN_PICKER;
 
 export const isFirstComponentScreenPicker = (
   components: ZappUIComponent[]
@@ -15,3 +22,11 @@ export const isFirstComponentGallery = (
 ): boolean => {
   return isGallery(components?.[0]);
 };
+
+export const isGroup = (item): boolean => item?.component_type === GROUP;
+
+export const isEmptyGroup = (item): boolean =>
+  item?.component_type === EMPTY_GROUP_COMPONENT;
+
+export const isGroupInfo = (item): boolean =>
+  item?.component_type === GROUP_INFO;

package/dateUtils/index.ts

@@ -2,10 +2,29 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
+dayjs.extend(duration);
+
+dayjs.extend(relativeTime, {
+  thresholds: [
+    { l: "s", r: 1 },
+    { l: "m", r: 1 },
+    { l: "mm", r: 59, d: "minute" },
+    { l: "h", r: 1 },
+    { l: "hh", r: 23, d: "hour" },
+    { l: "d", r: 1 },
+    { l: "dd", r: 29, d: "day" },
+    { l: "M", r: 1 },
+    { l: "MM", r: 11, d: "month" },
+    { l: "y", r: 1 },
+    { l: "yy", d: "year" },
+  ],
+});
 
 export { dayjs };

package/focusManager/FocusManager.ts

@@ -227,7 +227,9 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      FocusManager.instance.setFocus(nextNextFocus, options);
+      if (nextNextFocus) {
+        FocusManager.instance.setFocus(nextNextFocus, options);
+      }
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);