@applicaster/zapp-react-native-utils 13.0.0-alpha.7120331332 → 13.0.0-alpha.7138263059

package/README.md

@@ -376,16 +376,6 @@ useEffect(() => {
 }, []);
 ```
 
-### testUtils
-
-`@applicaster/zapp-react-native-utils/testUtils`
-
-- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
-
-```javascript
-wrapper.findWhere(testIDEquals("text"));
-```
-
 ### appUtils - contextKeysManager
 
 `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`

package/actionsExecutor/ActionExecutor.ts

@@ -17,9 +17,10 @@ class ActionExecutor {
 
   handleAction = async (
     action: ActionType,
-    entry: ZappEntry = null
+    context?: Record<string, any>
   ): Promise<ActionResult> => {
     const handler = this.registeredActions[action.type];
+    const entry = context?.entry as ZappEntry;
 
     if (!handler) {
       log_error(
@@ -38,11 +39,11 @@ class ActionExecutor {
     );
 
     try {
-      return handler(action, entry);
+      return handler(action, context);
     } catch (error) {
       log_error(
         `handleAction: error handling action type: ${action.type}, message: ${error.message}`,
-        { action, entry, error }
+        { action, context, error }
       );
 
       throw error;
@@ -51,11 +52,11 @@ class ActionExecutor {
 
   handleActions = async (
     actionTypes: ActionType[],
-    entry: ZappEntry = null
+    context?: Record<string, any>
   ): Promise<ActionResult> => {
     for (const action of actionTypes) {
       // TODO: Handle action result error
-      const result = await this.handleAction(action, entry);
+      const result = await this.handleAction(action, context);
 
       if (result === ActionResult.Cancel) {
         log_info(`handleActions: action: ${action.type} canceled`);
@@ -67,7 +68,10 @@ class ActionExecutor {
     return ActionResult.Success;
   };
 
-  handleEntryActions = async (entry: ZappEntry): Promise<ActionResult> => {
+  handleEntryActions = async (
+    entry: ZappEntry,
+    context?: Record<string, any>
+  ): Promise<ActionResult> => {
     const tapActions = entry.extensions?.tap_actions?.actions;
 
     if (!tapActions) {
@@ -77,7 +81,7 @@ class ActionExecutor {
     if (!Array.isArray(tapActions)) {
       log_error(
         `handleEntryActions: tapActions is not an array for id: ${entry.id} title: ${entry.title}`,
-        { entry }
+        { context, entry }
       );
 
       return;
@@ -87,7 +91,7 @@ class ActionExecutor {
       return;
     }
 
-    await this.handleActions(tapActions, entry);
+    await this.handleActions(tapActions, { ...context, entry });
   };
 
   unregisterAction = (actionType: string) => {
@@ -96,7 +100,10 @@ class ActionExecutor {
 
   registerAction = (
     type: string,
-    handler: (action: ActionType, entry?: ZappEntry) => Promise<ActionResult>
+    handler: (
+      action: ActionType,
+      context?: Record<string, any>
+    ) => Promise<ActionResult>
   ) => {
     if (this.registeredActions[type]) {
       log_error(`registerAction: action type: ${type} already registered`);

package/actionsExecutor/ActionExecutorContext.tsx

@@ -13,6 +13,12 @@ import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
 import { createLogger } from "../logger";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "@applicaster/quick-brick-core/App/remoteContextReloader/consts";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import {
+  EntryResolver,
+  resolveObjectValues,
+} from "../appUtils/contextKeysManager/contextResolver";
 
 const { log_error, log_info } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -22,15 +28,24 @@ const { log_error, log_info } = createLogger({
 type ActionExecutorContextType = {
   registerAction: (
     type: string,
-    handler: (action: ActionType, entry: ZappEntry) => Promise<ActionResult>
+    handler: (
+      action: ActionType,
+      context?: Record<string, any>
+    ) => Promise<ActionResult>
   ) => void;
   unregisterAction: (type: string) => void;
-  handleAction: (action: ActionType, entry: ZappEntry) => Promise<ActionResult>;
+  handleAction: (
+    action: ActionType,
+    context?: Record<string, any>
+  ) => Promise<ActionResult>;
   handleActions: (
     actions: ActionType[],
-    entry: ZappEntry
+    context: Record<string, any>
+  ) => Promise<ActionResult>;
+  handleEntryActions: (
+    entry: ZappEntry,
+    context?: Record<string, any>
   ) => Promise<ActionResult>;
-  handleEntryActions: (entry: ZappEntry) => Promise<ActionResult>;
 };
 type Props = {
   children: React.ReactNode;
@@ -45,6 +60,31 @@ const prepareDefaultActions = (actionExecutor) => {
     return ActionResult.Success;
   });
 
+  actionExecutor.registerAction(
+    "refreshComponent",
+    async (_action, context) => {
+      const dispatch = appStore.getDispatch();
+
+      log_info("handleAction: refreshComponent event");
+
+      const dataSource = context?.component?.data?.source;
+
+      // 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(
+        loadPipesData(dataSource, {
+          silentRefresh: false,
+          clearCache: true,
+          callback: (_data) => {},
+          riverId: context?.screenData?.id,
+        })
+      );
+
+      return ActionResult.Success;
+    }
+  );
+
   actionExecutor.registerAction("switchLayout", async (action) => {
     log_info("handleAction: switchLayout event");
 
@@ -80,13 +120,21 @@ const prepareDefaultActions = (actionExecutor) => {
     return confirmationPromise;
   });
 
-  actionExecutor.registerAction("sendCloudEvent", async (action, entry) => {
+  actionExecutor.registerAction("sendCloudEvent", async (action, context) => {
     try {
       const options = action.options;
 
+      const entry = context?.entry || {};
+      const entryResolver = new EntryResolver(entry);
+
+      const data =
+        options?.data && options.inflateData
+          ? await resolveObjectValues(options.data, { entry: entryResolver })
+          : options?.data || entry;
+
       const cloudEvent = await createCloudEvent({
         type: options.type || "com.applicaster.selector.action.v1",
-        data: options.data || entry,
+        data,
         subject: options.subject || entry?.id,
       });
 
@@ -117,9 +165,12 @@ const prepareDefaultActions = (actionExecutor) => {
 
   actionExecutor.registerAction(
     "localStorageToggleFlag",
-    async (action: ActionType, entry?: ZappEntry): Promise<ActionResult> => {
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
       const keyNamespace = action.options?.key;
-      const tag = entry?.extensions?.tag;
+      const tag = context?.entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =

package/alertUtils/alert.ts

@@ -0,0 +1,148 @@
+import { Alert } from "react-native";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+
+// #region "Alert Dialog"
+
+const globalAny: any = global;
+
+const showWebAlertDialog = ({ message, completion }: AlertWebDialog) => {
+  globalAny?.alert?.(message);
+  completion?.();
+};
+
+const showNativeAlertDialog = ({
+  title,
+  message,
+  okButtonText,
+  completion,
+}: AlertDialogType) => {
+  Alert.alert(title, message, [
+    {
+      text: okButtonText,
+      onPress: completion,
+    },
+  ]);
+};
+
+export const showAlertDialog = ({
+  title,
+  message,
+  okButtonText,
+  completion,
+}: AlertDialogType) => {
+  if (isWeb()) {
+    showWebAlertDialog({ message, completion });
+  } else {
+    showNativeAlertDialog({
+      title,
+      message,
+      okButtonText,
+      completion,
+    });
+  }
+};
+
+// #endregion "Alert Dialog"
+
+// #region "Confirmation Dialog"
+
+const showWebDialog = ({
+  message,
+  confirmCompletion,
+  cancelCompletion,
+}: WebConfirmationDialog) => {
+  const isConfirmed = globalAny?.confirm?.(message);
+
+  if (isConfirmed) {
+    confirmCompletion?.();
+  } else {
+    cancelCompletion?.();
+  }
+};
+
+const showNativeDialog = ({
+  title,
+  message,
+  okButtonText,
+  cancelButtonText,
+  confirmCompletion,
+  cancelCompletion,
+}: ConfirmationDialog) => {
+  Alert.alert(title, message, [
+    {
+      text: cancelButtonText,
+      onPress: cancelCompletion,
+    },
+    {
+      text: okButtonText,
+      style: "destructive",
+      onPress: confirmCompletion,
+    },
+  ]);
+};
+
+const handleCustomDialog = (data) => {
+  const {
+    showDialog,
+    hideDialog,
+    setConfirmAction,
+    setCancelAction,
+    setMessages,
+  } = confirmationDialogStore.getState();
+
+  setMessages(data.messages);
+
+  if (data?.cancelCompletion) {
+    setCancelAction(() => {
+      data.cancelCompletion();
+      hideDialog();
+    });
+  }
+
+  if (data?.confirmCompletion) {
+    setConfirmAction(() => {
+      data.confirmCompletion();
+      hideDialog();
+    });
+  }
+
+  showDialog();
+};
+
+export const showConfirmationDialog = ({
+  title,
+  message,
+  okButtonText,
+  cancelButtonText,
+  confirmCompletion,
+  cancelCompletion,
+}: CustomConfirmationDialog): void => {
+  if (isWeb()) {
+    if (cancelCompletion) {
+      handleCustomDialog({
+        messages: {
+          title,
+          message,
+          okButtonText,
+          cancelButtonText,
+        },
+        confirmCompletion,
+        cancelCompletion,
+      });
+    } else {
+      showWebDialog({ message, confirmCompletion, cancelCompletion });
+    }
+  } else {
+    showNativeDialog({
+      title,
+      message,
+      okButtonText,
+      cancelButtonText,
+      confirmCompletion,
+      cancelCompletion,
+    });
+  }
+};
+
+// #endregion "Confirmation Dialog"

package/alertUtils/index.ts

@@ -1,148 +1 @@
-import { Alert } from "react-native";
-import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
-
-// #region "Alert Dialog"
-
-const globalAny: any = global;
-
-const showWebAlertDialog = ({ message, completion }: AlertWebDialog) => {
-  globalAny?.alert?.(message);
-  completion?.();
-};
-
-const showNativeAlertDialog = ({
-  title,
-  message,
-  okButtonText,
-  completion,
-}: AlertDialogType) => {
-  Alert.alert(title, message, [
-    {
-      text: okButtonText,
-      onPress: completion,
-    },
-  ]);
-};
-
-export const showAlertDialog = ({
-  title,
-  message,
-  okButtonText,
-  completion,
-}: AlertDialogType) => {
-  if (isWeb()) {
-    showWebAlertDialog({ message, completion });
-  } else {
-    showNativeAlertDialog({
-      title,
-      message,
-      okButtonText,
-      completion,
-    });
-  }
-};
-
-// #endregion "Alert Dialog"
-
-// #region "Confirmation Dialog"
-
-const showWebDialog = ({
-  message,
-  confirmCompletion,
-  cancelCompletion,
-}: WebConfirmationDialog) => {
-  const isConfirmed = globalAny?.confirm?.(message);
-
-  if (isConfirmed) {
-    confirmCompletion?.();
-  } else {
-    cancelCompletion?.();
-  }
-};
-
-const showNativeDialog = ({
-  title,
-  message,
-  okButtonText,
-  cancelButtonText,
-  confirmCompletion,
-  cancelCompletion,
-}: ConfirmationDialog) => {
-  Alert.alert(title, message, [
-    {
-      text: cancelButtonText,
-      onPress: cancelCompletion,
-    },
-    {
-      text: okButtonText,
-      style: "destructive",
-      onPress: confirmCompletion,
-    },
-  ]);
-};
-
-const handleCustomDialog = (data) => {
-  const {
-    showDialog,
-    hideDialog,
-    setConfirmAction,
-    setCancelAction,
-    setMessages,
-  } = confirmationDialogStore.getState();
-
-  setMessages(data.messages);
-
-  if (data?.cancelCompletion) {
-    setCancelAction(() => {
-      data.cancelCompletion();
-      hideDialog();
-    });
-  }
-
-  if (data?.confirmCompletion) {
-    setConfirmAction(() => {
-      data.confirmCompletion();
-      hideDialog();
-    });
-  }
-
-  showDialog();
-};
-
-export const showConfirmationDialog = ({
-  title,
-  message,
-  okButtonText,
-  cancelButtonText,
-  confirmCompletion,
-  cancelCompletion,
-}: CustomConfirmationDialog): void => {
-  if (isWeb()) {
-    if (cancelCompletion) {
-      handleCustomDialog({
-        messages: {
-          title,
-          message,
-          okButtonText,
-          cancelButtonText,
-        },
-        confirmCompletion,
-        cancelCompletion,
-      });
-    } else {
-      showWebDialog({ message, confirmCompletion, cancelCompletion });
-    }
-  } else {
-    showNativeDialog({
-      title,
-      message,
-      okButtonText,
-      cancelButtonText,
-      confirmCompletion,
-      cancelCompletion,
-    });
-  }
-};
-
-// #endregion "Confirmation Dialog"
+export { showAlertDialog, showConfirmationDialog } from "./alert";

package/analyticsUtils/AnalyticPlayerListener.ts

@@ -14,7 +14,7 @@ export class AnalyticPlayerListener
   static analyticsListenerID = "analytics-listener";
   private analyticsTracker: PlayerAnalyticsTracker;
   private player: Player;
-
+  private isSeeking: boolean = false;
   private onVideoLoadCalled; // android only
 
   constructor(props: Props) {
@@ -40,10 +40,27 @@ export class AnalyticPlayerListener
   };
 
   onPlayerPause = (event) => {
+    if (this.player?.seekController?.isSeeking()) {
+      this.isSeeking = true;
+
+      return;
+    }
+
     this.handleAnalyticEvent(PLAYBACK_EVENT.pause, event);
   };
 
   onPlayerResume = (event) => {
+    if (this.player?.seekController?.isSeeking()) {
+      return;
+    }
+
+    if (this.isSeeking) {
+      // Fallback due to player resume event been async and arriving with delays
+      this.isSeeking = false;
+
+      return;
+    }
+
     this.handleAnalyticEvent(PLAYBACK_EVENT.play, event);
   };
 

package/analyticsUtils/currentScreenProperities.ts

@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
   screenData
 ): AnalyticsScreenProperties => {
   return {
-    screen_name: screenData?.targetScreen?.name,
+    screen_name: screenData?.targetScreen?.name || screenData?.name,
     screen_entry_title: screenData?.title,
     screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
-    screen_layout_id: screenData?.targetScreen?.id,
-    screen_type: screenData?.targetScreen?.type,
-    home_screen: screenData?.targetScreen?.home,
+    screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
+    screen_type: screenData?.targetScreen?.type || screenData?.type,
+    home_screen: !R.isNil(screenData?.targetScreen?.home)
+      ? screenData?.targetScreen?.home
+      : screenData?.home,
   };
 };
 

package/appUtils/HooksManager/Hook.ts

@@ -16,7 +16,7 @@ const BASE_HOOK_PROPERTIES = ["screen_id", "identifier", "weight"];
  * @returns {number} index
  */
 const hookState: (
-  arg0: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS]
+  arg0: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS]
 ) => number = R.indexOf(R.__, R.values(HOOKS_EVENTS));
 
 /**
@@ -62,7 +62,7 @@ export class Hook implements HookInterface {
    * @param {Array<Any>} args variadic arguments to invoke the handler with
    */
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
     this.state = hookState(event);

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

package/appUtils/HooksManager/types.ts

@@ -4,6 +4,8 @@ import { HOOKS_EVENTS } from "./constants";
 export interface HookConfiguration {}
 
 /* existing Hook Plugn props: sample */
+
+/*
 interface _HookModulePlugin {
   Component:
     | React.FC<HookPluginProps>
@@ -23,6 +25,7 @@ interface _HookModulePlugin {
     presentUI: (payload?: HookPluginProps["payload"]) => void
   ) => any;
 }
+*/
 
 //* Derived from usage */
 export interface HookModule {
@@ -100,7 +103,7 @@ export interface Hook<T extends HookModule = HookModule> {
   identifier: string;
   configuration: T["configuration"];
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     opts: {
       error?: typeof Error;
       route?: string;
@@ -109,7 +112,7 @@ export interface Hook<T extends HookModule = HookModule> {
     }
   );
   general?: {
-    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    transition_type: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS];
     allow_screen_plugin_presentation: boolean;
     is_flow_blocker: boolean;
   };

package/appUtils/accessibilityManager/index.ts

@@ -6,6 +6,9 @@ import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
+  private headingTimeout: NodeJS.Timeout | null = null;
+  private WORDS_PER_MINUTE = 160;
+  private MINIMUM_PAUSE = 500;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -20,6 +23,7 @@ export class AccessibilityManager {
 
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
+  private headingQueue: string[] = [];
 
   private constructor() {}
 
@@ -52,6 +56,28 @@ export class AccessibilityManager {
     return this.state$.asObservable();
   }
 
+  /** Calculates the reading time for a given text
+   * This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
+   * @param text - The text to calculate the reading time for
+   * @returns The reading time in milliseconds
+   */
+  private calculateReadingTime(text: string): number {
+    const words = text.trim().split(/\s+/).length;
+
+    return Math.max(
+      this.MINIMUM_PAUSE,
+      (words / this.WORDS_PER_MINUTE) * 60 * 1000
+    );
+  }
+
+  /**
+   * Adds a heading to the queue, headings will be read before the next text
+   * Each heading will be read once and removed from the queue
+   */
+  public addHeading(heading: string) {
+    this.headingQueue.push(heading);
+  }
+
   /**
    * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
    * keyOfLocalizedText is the key to the localized text
@@ -85,7 +111,22 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    this.ttsManager && this.ttsManager.readText(textToRead);
+    if (this.headingQueue.length > 0) {
+      const heading = this.headingQueue.shift()!;
+      this.ttsManager?.readText(heading);
+
+      if (this.headingTimeout) {
+        clearTimeout(this.headingTimeout);
+      }
+
+      const pauseTime = this.calculateReadingTime(heading);
+
+      this.headingTimeout = setTimeout(() => {
+        this.ttsManager?.readText(textToRead);
+      }, pauseTime);
+    } else {
+      this.ttsManager?.readText(textToRead);
+    }
 
     this.announcements$.next({
       message: textToRead,