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

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

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,29 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    this.ttsManager && this.ttsManager.readText(textToRead);
+    const readHeadings = () => {
+      if (this.headingQueue.length > 0) {
+        const heading = this.headingQueue.shift()!; // Get the next heading
+
+        this.ttsManager?.readText(heading); // Read the heading
+
+        if (this.headingTimeout) {
+          clearTimeout(this.headingTimeout);
+        }
+
+        const pauseTime = this.calculateReadingTime(heading); // Calculate pause time based on the heading
+
+        // Set a timeout to read the next heading
+        this.headingTimeout = setTimeout(() => {
+          readHeadings(); // Call the function recursively to read the next heading
+        }, pauseTime);
+      } else {
+        // No more headings to read, read the main text
+        this.ttsManager?.readText(textToRead);
+      }
+    };
+
+    readHeadings(); // Start reading headings
 
     this.announcements$.next({
       message: textToRead,

package/appUtils/contextKeysManager/contextResolver.ts

@@ -0,0 +1,73 @@
+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>;
+}
+
+export class EntryResolver implements IResolver {
+  entry: ZappEntry;
+
+  constructor(entry: ZappEntry) {
+    this.entry = entry;
+  }
+
+  async resolve(key: string) {
+    if (!key || key.length === 0) {
+      return this.entry;
+    }
+
+    return R.view(R.lensPath(key.split(".")), this.entry);
+  }
+}
+
+export class ContextResolver implements IResolver {
+  resolve = async (compositeKey: string) =>
+    ContextKeysManager.instance.getKey(compositeKey);
+}
+
+export const resolveObjectValues = async (
+  data: Record<string, any>,
+  resolvers: Record<string, IResolver> = null
+) => {
+  const entries = Object.entries(data);
+
+  const exResolvers = { ctx: new ContextResolver(), ...resolvers };
+
+  const resolvedEntries = await Promise.all(
+    entries.map(async ([key, value]) => {
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
+      if (typeof value !== "string") {
+        return [key, value];
+      }
+
+      const match = (value as string).match(regex);
+
+      if (match) {
+        const contextResolverName = match[1];
+        const compositeKey = match[2];
+
+        const resolver = exResolvers[contextResolverName] || exResolvers.ctx;
+        const resolvedValue = await resolver.resolve(compositeKey);
+
+        return [key, resolvedValue];
+      }
+
+      log_error("resolveObjectValues: invalid context string", {
+        key,
+        value,
+      });
+
+      return [key, null];
+    })
+  );
+
+  return Object.fromEntries(resolvedEntries);
+};