@applicaster/zapp-react-native-utils 13.0.0-alpha.6179233127 → 13.0.0-alpha.6400875052

package/actionsExecutor/ActionExecutorContext.tsx

@@ -1,6 +1,6 @@
 /// <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 {
   actionExecutor as _actionExecutor,
   ActionResult,
@@ -19,8 +19,15 @@ 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";
+
+export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -51,6 +58,22 @@ 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;
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -65,11 +88,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 +194,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 =
@@ -211,6 +257,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 +271,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/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

@@ -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/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;

package/appUtils/playerManager/playerNative.ts

@@ -225,7 +225,9 @@ export class PlayerNative extends Player {
   };
 
   onVideoLoad = (event) => {
-    if (this.startPosition) {
+    this.updateContentDuration(event);
+
+    if (this.startPosition && !this.playerState.isInAdBreak) {
       super.onVideoLoad({ ...event, ignoreContinueWatching: true });
 
       this.seekTo(this.startPosition);
@@ -253,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/dateUtils/index.ts

@@ -2,10 +2,12 @@ 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";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
+dayjs.extend(duration);
 
 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);
 

package/focusManager/index.ts

@@ -8,8 +8,6 @@ import { isNilOrEmpty } from "../reactUtils/helpers";
 import { isAndroidTVPlatform } from "../reactUtils";
 import { noop } from "../functionUtils";
 
-const EMPTY_GROUP_COMPONENT = "empty_group_component";
-
 export function useFocusManager() {
   return focusManager;
 }
@@ -76,14 +74,6 @@ export function useFocusEffect(onFocus, focusWatcher) {
   }, focusWatcher);
 }
 
-export function shouldShowEmptyGroup(component) {
-  return (
-    component?.ui_components?.filter(
-      ({ component_type }) => component_type === EMPTY_GROUP_COMPONENT
-    )?.length > 0
-  );
-}
-
 export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
   R.tryCatch(
     R.compose(
@@ -101,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -119,12 +110,7 @@ export const useIsFocusable = (props: Props): void => {
 
   const hasDataError = !!zappPipesData?.error;
 
-  const hasEmptyGroup = shouldShowEmptyGroup(component);
-
-  const isGallery = component?.component_type === "gallery-qb";
-
-  const isHiddenDueToEmptyData =
-    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
+  const isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
 
   const defaultFocusableLogic =
     componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
@@ -133,9 +119,7 @@ export const useIsFocusable = (props: Props): void => {
     if (isAndroidTVPlatform()) {
       let isFocusableNew = false;
 
-      if (isGallery) {
-        isFocusableNew = true;
-      } else if (isFocusable(component)) {
+      if (isFocusable(component)) {
         isFocusableNew = defaultFocusableLogic;
       }
 
@@ -144,9 +128,7 @@ export const useIsFocusable = (props: Props): void => {
   }, [
     defaultFocusableLogic,
     isHiddenDueToEmptyData,
-    isGallery,
     setIsFocusable,
     hasDataError,
-    hasEmptyGroup,
   ]);
 };

package/modalState/index.ts

@@ -1,4 +1,4 @@
-import { create } from "zustand";
+import { useStore, createStore } from "zustand";
 
 interface ModalState {
   visible: boolean;
@@ -25,7 +25,7 @@ const initialModalState: ModalState = {
   props: {},
 };
 
-export const useModalStore = create<ModalStore>((set) => ({
+export const modalStore = createStore<ModalStore>((set) => ({
   modalState: initialModalState,
   setModalState: (newState) =>
     set((state) => ({
@@ -51,3 +51,33 @@ export const useModalStore = create<ModalStore>((set) => ({
     }),
   dismissModal: () => set(() => ({ modalState: initialModalState })),
 }));
+
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
+
+export const openModal = modalStore.getInitialState().openModal;
+
+export const dismissModal = modalStore.getInitialState().dismissModal;
+
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
+
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.6179233127",
+  "version": "13.0.0-alpha.6400875052",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid ts build in main packages for now"
   },
   "publishConfig": {
@@ -28,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.6179233127",
+    "@applicaster/applicaster-types": "13.0.0-alpha.6400875052",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/advertising/index.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 import { useNavigation } from "../navigation";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { dismissModal, openModal } from "../../modalState";
 
 const GOOGLE_ADS_IDENTIFIER = "google-admob-ads-qb";
 
@@ -14,9 +15,8 @@ const ModalContainer = platformSelect({
 });
 
 export function useAdvertisingInterstitial() {
-  const navigator = useNavigation();
+  const { screenData, currentRoute } = useNavigation();
   const { plugins } = usePickFromState();
-  const { screenData } = navigator;
 
   return useEffect(() => {
     // TODD: typing problem: fix any type
@@ -26,7 +26,7 @@ export function useAdvertisingInterstitial() {
         plugins
       );
 
-      navigator.openModal({
+      openModal({
         item: {},
         options: {
           ModalContainer,
@@ -36,11 +36,11 @@ export function useAdvertisingInterstitial() {
           screenType: "hooks",
           screenData: {
             payload: screenData,
-            callback: navigator.dismissModal,
+            callback: dismissModal,
             hookPlugin: GoogleAdsPlugin,
           },
         },
       });
     }
-  }, [navigator.currentRoute, screenData?.id]);
+  }, [currentRoute, screenData?.id]);
 }

package/reactHooks/feed/useFeedLoader.tsx

@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender, shouldDispatchData } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -55,7 +55,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

package/reactHooks/navigation/index.ts

@@ -108,9 +108,11 @@ export function isNavBarVisible(
     return false;
   }
 
-  const showSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.show_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
   if (canGoBack && !showSecondaryLevel) {
     return false;

package/reactHooks/navigation/useRoute.ts

@@ -7,12 +7,11 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
-
 import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
 
 import { useNavigation } from "./useNavigation";
-import { useModalStore } from "../../modalState";
+import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
 
@@ -44,12 +43,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
+  const modalState = useModalStoreState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
+  const hookModalScreenData = useHookModalScreenData();
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/utils/README.md

@@ -0,0 +1,30 @@
+### ramda replacement utils
+
+See contribution guide below
+
+## Reference
+
+Prefer non-fp variant as it more performant - if refactoring assumes you need more efforts rewrite ramda sample to lodash and it can be easily replaced with lodash-fp - use lodash-fp.
+
+### Ramda alternatives:
+
+Custom
+- `splitEvery` => `chunk`
+- `times` => `times`
+
+From `lodash`
+- `clone` => `clone`
+- `flatten` => `flatten`
+- `drop` => `drop`
+- `length` => `size`
+
+
+## Contribution
+
+To add new helper function as ramda replacement
+
+1. Search for replacement ( you can use lodash or pure JS solution), arguments should match with Ramda definition (for easier transition).
+2. Add new file if needed, add test, update exports in index file. 2.1. Make sure it's well-typed.
+3. If the function can-be reexported from other 3rd party lib - update index.ts to re-export it.
+4. Make sure README is updated and contains reference for newly added function.
+5. You can use AI's help. Use query like 'lodash & lodash/fp equivalent of Ramda's R.clone function' to get an options you can use.

package/utils/chunk.ts

@@ -0,0 +1,5 @@
+import { chunk as _chunk } from "lodash";
+
+export const chunk = <T>(size: number, array: T[]): T[][] => {
+  return _chunk(array, size);
+};

package/utils/index.ts

@@ -0,0 +1,5 @@
+export { chunk } from "./chunk";
+
+export { times } from "./times";
+
+export { cloneDeep as clone, flatten, drop, size } from "lodash";

package/utils/times.ts

@@ -0,0 +1,5 @@
+import { times as _times } from "lodash";
+
+export const times = <T>(iteratee: (index: number) => T, n: number) => {
+  return _times(n, iteratee);
+};

package/zappFrameworkUtils/localStorageHelper.ts

@@ -1,6 +1,12 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { isNilOrEmpty } from "../reactUtils/helpers";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  StorageOwnedValues,
+  NamespaceValues,
+  StorageValuesToRemove,
+  StorageValuesToAdd,
+} from "./types";
 
 const defaultOwnedKey = "owned_keys";
 const DEFAULT_NAMESPACE = "applicaster.v2";

package/zappFrameworkUtils/loginPluginUtils.ts

@@ -89,11 +89,15 @@ const runInBackground = async ({
     const shouldPresent = await hookPresentPolicy.shouldPresentScreen();
 
     if (!shouldPresent) {
+      const isRefreshed = await checkUserAuthenticated();
+
       log_info(
-        "runInBackground: Background mode finished, hook plugin will be skipped"
+        `runInBackground: Background mode finished, ${isRefreshed ? "finish hook with completion true" : "refresh failed will presentUI"}`
       );
 
-      await checkUserAuthenticated();
+      isRefreshed
+        ? callback({ success: isRefreshed, payload: item })
+        : presentUI();
 
       return;
     }

package/zappFrameworkUtils/types.ts

@@ -0,0 +1,11 @@
+export type StorageValuesToAdd = Record<string, NamespaceValues>;
+
+export type StorageValuesToRemove = {
+  string?: string[];
+};
+
+export type StorageOwnedValues = {
+  string?: string[];
+};
+
+export type NamespaceValues = Record<string, string>;