@applicaster/zapp-react-native-utils 14.0.0-alpha.6335583720 → 14.0.0-alpha.6461844364

package/actionsExecutor/ActionExecutorContext.tsx

@@ -25,7 +25,7 @@ import {
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
 import { useNavigation } from "../reactHooks";
-import { get } from "lodash";
+import { get } from "../utils";
 
 import {
   useContentTypes,

package/analyticsUtils/AnalyticsEvents/helper.ts

@@ -4,9 +4,12 @@ import {
   ANALYTICS_COMPONENT_EVENTS,
   ANALYTICS_CORE_EVENTS,
   ANALYTICS_ENTRY_EVENTS,
+  ANALYTICS_PREFERENCES_EVENTS,
   DOWNLOADS_EVENTS,
 } from "../events";
 import { isEmptyOrNil } from "../../cellUtils";
+import { get } from "lodash";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 
 export enum OfflineItemState {
   notExist = "NOT_EXISTS",
@@ -102,6 +105,84 @@ export function eventForComponent(
   return analyticsProps;
 }
 
+/**
+ * Checks if an item is currently selected in localStorage based on its actions
+ * @param item - The item to check
+ * @returns boolean indicating if the item is currently selected
+ */
+function isItemPreviouslySelected(item: any): boolean {
+  const actions = item?.extensions?.tap_actions?.actions;
+
+  if (!actions) {
+    return false;
+  }
+
+  const localStorageAction = actions.find(
+    (action) => action?.type === "localStorageToggleFlag"
+  );
+
+  if (!localStorageAction?.options?.key) {
+    return false;
+  }
+
+  const keyNamespace = localStorageAction.options.key;
+
+  const tag = localStorageAction.options?.selector
+    ? get(item, localStorageAction.options.selector)
+    : (item.extensions?.tag ?? item.id);
+
+  if (!tag) {
+    return false;
+  }
+
+  try {
+    const multiSelectProvider =
+      StorageMultiSelectProvider.getProvider(keyNamespace);
+
+    const selectedItems = multiSelectProvider.getSelectedItems();
+
+    return selectedItems.includes(tag);
+  } catch (error) {
+    return false;
+  }
+}
+
+export function getLocalStorageSetPayload(extraProps) {
+  const { item } = extraProps;
+
+  const hasLocalStorageSetAction = item?.extensions?.tap_actions?.actions?.some(
+    (action) => action?.type === "localStorageSet"
+  );
+
+  if (!hasLocalStorageSetAction) {
+    return null;
+  }
+
+  return {
+    [ANALYTICS_PREFERENCES_EVENTS.ITEM_SELECTED_STATUS]: true,
+  };
+}
+
+export function getLocalStorageToggleFlagPayload(extraProps) {
+  const { item } = extraProps;
+
+  const hasLocalStorageToggleAction =
+    item?.extensions?.tap_actions?.actions?.some(
+      (action) => action?.type === "localStorageToggleFlag"
+    );
+
+  if (!hasLocalStorageToggleAction) {
+    return null;
+  }
+
+  const previouslySelected = isItemPreviouslySelected(item);
+
+  return {
+    [ANALYTICS_PREFERENCES_EVENTS.ITEM_SELECTED_STATUS]: !previouslySelected,
+    [ANALYTICS_PREFERENCES_EVENTS.PREVIOUS_SELECTED_STATE]: previouslySelected,
+  };
+}
+
 export function playEventForType(item) {
   const itemType = item?.type && item.type?.value;
 

package/analyticsUtils/AnalyticsEvents/sendHeaderClickEvent.ts

@@ -4,7 +4,7 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type SendHeaderClickEventProps = {
-  extraProps: ExtraProps;
+  extraProps: Record<string, any>;
   component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
   item?: ZappEntry;

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -1,10 +1,11 @@
+/// <reference types="../../" />
 import { log_error, log_debug } from "../logger";
 import { replaceAnalyticsPropsNils } from "./helper";
 import { postAnalyticEvent } from "../manager";
 
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
-declare type AnalyticsDefaultHelperProperties = {
+type AnalyticsDefaultHelperProperties = {
   analyticsScreenData: AnalyticsScreenProperties;
   extraProps: any;
   props;

package/analyticsUtils/AnalyticsEvents/sendOnClickEvent.ts

@@ -1,13 +1,13 @@
 import { log_error, log_debug } from "../logger";
-
-import { ANALYTICS_CORE_EVENTS } from "../events";
-
+import { ANALYTICS_CORE_EVENTS, ACTION_TYPE } from "../events";
 import { postAnalyticEvent } from "../manager";
 import {
   replaceAnalyticsPropsNils,
   eventForEntry,
   eventForComponent,
   extensionsEvents,
+  getLocalStorageSetPayload,
+  getLocalStorageToggleFlagPayload,
 } from "./helper";
 
 declare type AnalyticsDefaultHelperProperties = {
@@ -26,7 +26,16 @@ export const sendOnClickEvent = ({
   const castedExtraProps: ExtraProps = extraProps;
   const componentData = component || extraProps.component;
   const data = zappPipesData || extraProps.zappPipesData;
-  const eventName = ANALYTICS_CORE_EVENTS.TAP_CELL;
+
+  const actionCellPayload =
+    extraProps?.item?.type?.value === ACTION_TYPE
+      ? getLocalStorageSetPayload(extraProps) ||
+        getLocalStorageToggleFlagPayload(extraProps)
+      : null;
+
+  const eventName = actionCellPayload
+    ? ANALYTICS_CORE_EVENTS.TAP_SELECTABLE_CELL
+    : ANALYTICS_CORE_EVENTS.TAP_CELL;
 
   if (!analyticsScreenData) {
     log_error(
@@ -44,6 +53,7 @@ export const sendOnClickEvent = ({
     ...replaceAnalyticsPropsNils({
       ...analyticsScreenData,
     }),
+    ...actionCellPayload,
   };
 
   if (analyticsCustomProperties) {

package/analyticsUtils/__tests__/analyticsUtils.test.js

@@ -3,8 +3,22 @@ import { ANALYTICS_CORE_EVENTS } from "../events";
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isWeb: jest.fn(),
+  platformSelect: jest.fn(
+    (options) => options.android || options.ios || options.web
+  ),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider",
+  () => ({
+    StorageMultiSelectProvider: {
+      getProvider: jest.fn(() => ({
+        getSelectedItems: jest.fn(() => []),
+      })),
+    },
+  })
+);
+
 const mock_postAnalyticEvent = jest.fn();
 const mock_startAnalyticsTimedEvent = jest.fn();
 const mock_endAnalyticsTimedEvent = jest.fn();

package/analyticsUtils/events.ts

@@ -17,8 +17,11 @@ export const SCREEN_VIEW_EVENTS = {
   TIME_ON_SCREEN: "time_on_screen",
 };
 
+export const ACTION_TYPE = "action";
+
 export const TAPPING_EVENTS = {
   TAP_CELL: "tap_cell",
+  TAP_SELECTABLE_CELL: "tap_selectable_cell",
   TAP_MENU: "tap_menu",
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
@@ -99,6 +102,11 @@ export const ANALYTICS_COMPONENT_EVENTS = {
   COMPONENT_SOURCE: "component_source",
 };
 
+export const ANALYTICS_PREFERENCES_EVENTS = {
+  ITEM_SELECTED_STATUS: "item_selected_status",
+  PREVIOUS_SELECTED_STATE: "previous_selected_state",
+};
+
 // ---------------- EVENTS ---------------------
 export const AD_EVENT = {
   ad_break_start: "player_ad_break_start",

package/analyticsUtils/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="@applicaster/zapp-react-native-utils" />
 import * as R from "ramda";
 import * as React from "react";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
 import { noop } from "../functionUtils";
 
 type ComponentWithChildrenProps = {
-  children: React.ReactChildren;
+  children: React.ReactElement;
 };
 
 export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
 export const AnalyticsContext =
   React.createContext<GetAnalyticsFunctions>(noop);
 
-export function AnalyticsProvider(props: ComponentWithChildrenProps) {
+export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
   return (
     // @ts-ignore - this is a valid context provider
     <AnalyticsContext.Provider value={getAnalyticsFunctions}>
-      {props?.children}
+      {children}
     </AnalyticsContext.Provider>
   );
 }

package/analyticsUtils/manager.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as R from "ramda";
 import { NativeModules } from "react-native";
-import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { ANALYTICS_CORE_EVENTS } from "./events";
 
 import { analyticsUtilsLogger } from "./logger";
 

package/appUtils/accessibilityManager/index.ts

@@ -1,9 +1,9 @@
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
-import { TTSManager } from "../platform/platformUtils";
+import { TTSManager } from "../platform";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
-import { AccessibilityRole } from "react-native";
-import _ from "lodash";
+import { toString } from "../../utils";
+import { AccessibilityRole, Role } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
@@ -137,18 +137,21 @@ export class AccessibilityManager {
   }
 
   public getButtonAccessibilityProps(name: string): AccessibilityProps {
-    const buttonName = _.toString(name);
+    const buttonName = toString(name);
 
     const buttonConfig = BUTTON_ACCESSIBILITY_KEYS[buttonName];
 
     if (!buttonConfig) {
       return {
+        accessible: true,
         accessibilityLabel: buttonName,
         accessibilityHint: `Press button to perform action on ${buttonName}`,
         "aria-label": buttonName,
         "aria-description": `Press button to perform action on ${buttonName}`,
-        accessibilityRole: "button" as AccessibilityRole,
+        accessibilityRole: "button",
         "aria-role": "button",
+        role: "button",
+        tabindex: 0,
       };
     }
 
@@ -162,23 +165,29 @@ export class AccessibilityManager {
       `Press button to perform action on ${buttonName}`;
 
     return {
+      accessible: true,
       accessibilityLabel: label,
       accessibilityHint: hint,
       "aria-label": label,
       "aria-description": hint,
-      accessibilityRole: "button" as AccessibilityRole,
+      accessibilityRole: "button",
       "aria-role": "button",
+      role: "button",
+      tabindex: 0,
     };
   }
 
   public getInputAccessibilityProps(inputName: string): AccessibilityProps {
     return {
+      accessible: true,
       accessibilityLabel: inputName,
       accessibilityHint: `Enter text into ${inputName}`,
       "aria-label": inputName,
       "aria-description": `Enter text into ${inputName}`,
       accessibilityRole: "textbox" as AccessibilityRole,
       "aria-role": "textbox",
+      role: "textbox" as Role,
+      tabindex: 0,
     };
   }
 

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -18,13 +18,6 @@ export const { log_verbose, log_debug, log_info, log_error } = createLogger({
   parent: utilsLogger,
 });
 
-type ActionChapter = {
-  type: string;
-  options?: {
-    title: string;
-  };
-};
-
 type ChapterMarkerOriginal = {
   id: string;
   title: string;
@@ -33,14 +26,6 @@ type ChapterMarkerOriginal = {
   actions: ActionChapter[];
 };
 
-export type ChapterMarkerEvent = {
-  id: string;
-  title: string;
-  start_time: number;
-  end_time: number;
-  actions: ActionChapter[];
-};
-
 export type TitleSummaryEvent = {
   title: string | number;
   summary: string | number;

package/appUtils/playerManager/useChapterMarker.tsx

@@ -1,4 +1,3 @@
-import { ChapterMarkerEvent } from "./OverlayObserver/OverlaysObserver";
 import { usePlayer } from "./usePlayer";
 import * as React from "react";
 

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -5,6 +5,9 @@ import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
+import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";
+import { isTV } from "../../reactUtils";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -76,5 +79,18 @@ export const usePlayerControllerSetup = ({
     };
   }, [playerId, playerController]);
 
+  useEffect(() => {
+    if (!isTV()) {
+      return;
+    }
+
+    if (playerController) {
+      const seekController = new TVSeekController(playerController);
+      playerController.seekController = seekController;
+
+      return KeyInputHandler.getInstance().addListener(seekController);
+    }
+  }, [playerController]);
+
   return playerController;
 };

package/audioPlayerUtils/index.ts

@@ -1,3 +1,8 @@
+import * as React from "react";
+import { get, has } from "@applicaster/zapp-react-native-utils/utils";
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+
 import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { getMediaItems } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
@@ -136,3 +141,102 @@ export const getArtworkImage = ({
   // default image
   return DEFAULT_IMAGE;
 };
+
+const useAdjustedKeyFromScreenData = ({ config, keys }) => {
+  const { screenData } = useRoute();
+
+  const adjustedConfig = { ...config };
+
+  keys.forEach((key) => {
+    const path = ["targetScreen", "styles", key];
+
+    if (has(screenData, path)) {
+      const value = get(screenData, path);
+
+      adjustedConfig[key] = value;
+    }
+  });
+
+  return adjustedConfig;
+};
+
+const AUDIO_PLAYER_ARTWORK_IMAGE_KEY = "audio_player_artwork_image_key";
+
+const audioPlayerArtworkImageKeySelector = (config) =>
+  config?.[AUDIO_PLAYER_ARTWORK_IMAGE_KEY];
+
+export const useArtworkImage = (entry: ZappEntry): string => {
+  const configuration = useZStore("playerConfiguration");
+
+  const audio_player_artwork_image_key_value = configuration(
+    audioPlayerArtworkImageKeySelector
+  );
+
+  const pluginConfiguration = React.useMemo(
+    () => ({
+      audio_player_artwork_image_key: audio_player_artwork_image_key_value,
+    }),
+    [audio_player_artwork_image_key_value]
+  );
+
+  // HACK: for override [key] from screenData, because we treat empty string value as missing key and replace it to initial_value from manifest(which is wrong)
+  const adjustedPluginConfiguration = useAdjustedKeyFromScreenData({
+    keys: [AUDIO_PLAYER_ARTWORK_IMAGE_KEY],
+    config: pluginConfiguration,
+  });
+
+  return React.useMemo(
+    () =>
+      getArtworkImage({
+        key: AUDIO_PLAYER_ARTWORK_IMAGE_KEY,
+        entry,
+        plugin_configuration: adjustedPluginConfiguration,
+      }),
+    []
+  );
+};
+
+const AUDIO_PLAYER_IMAGE_KEY = "audio_player_image_key";
+const AUDIO_PLAYER_BACKGROUND_IMAGE = "audio_player_background_image";
+
+const audioPlayerImageKeySelector = (config) =>
+  config?.[AUDIO_PLAYER_IMAGE_KEY];
+
+const audioPlayerBackgroundImageSelector = (config) =>
+  config?.[AUDIO_PLAYER_BACKGROUND_IMAGE];
+
+export const useBackgroundImage = (entry: ZappEntry): { uri: string } => {
+  const configuration = useZStore("playerConfiguration");
+
+  const audio_player_image_key_value = configuration(
+    audioPlayerImageKeySelector
+  );
+
+  const audio_player_background_image_value = configuration(
+    audioPlayerBackgroundImageSelector
+  );
+
+  const pluginConfiguration = React.useMemo(
+    () => ({
+      audio_player_image_key: audio_player_image_key_value,
+      audio_player_background_image: audio_player_background_image_value,
+    }),
+    [audio_player_image_key_value, audio_player_background_image_value]
+  );
+
+  // HACK: for override [key] from screenData, because we treat empty string value as missing key and replace it to initial_value from manifest(which is wrong)
+  const adjustedPluginConfiguration = useAdjustedKeyFromScreenData({
+    keys: [AUDIO_PLAYER_IMAGE_KEY, AUDIO_PLAYER_BACKGROUND_IMAGE],
+    config: pluginConfiguration,
+  });
+
+  return React.useMemo(
+    () => ({
+      uri: getBackgroundImage({
+        entry,
+        plugin_configuration: adjustedPluginConfiguration,
+      }),
+    }),
+    [entry, adjustedPluginConfiguration]
+  );
+};

package/conf/player/__tests__/selectors.test.ts

@@ -0,0 +1,34 @@
+import { selectActionButtons } from "@applicaster/zapp-react-native-utils/conf/player/selectors";
+
+describe("selectActionButtons", () => {
+  it("returns the player_action_buttons array if present", () => {
+    const pluginConf = {
+      player_action_buttons: [
+        { id: "like", label: "Like" },
+        { id: "share", label: "Share" },
+      ],
+    };
+
+    expect(selectActionButtons(pluginConf)).toEqual(
+      pluginConf.player_action_buttons
+    );
+  });
+
+  it("returns null if player_action_buttons is not present", () => {
+    const pluginConf = { some_other_key: [] };
+    expect(selectActionButtons(pluginConf)).toBeNull();
+  });
+
+  it("returns null if pluginConf is undefined", () => {
+    expect(selectActionButtons(undefined)).toBeNull();
+  });
+
+  it("returns null if pluginConf is null", () => {
+    expect(selectActionButtons(null)).toBeNull();
+  });
+
+  it("returns null if player_action_buttons is explicitly set to null", () => {
+    const pluginConf = { player_action_buttons: null };
+    expect(selectActionButtons(pluginConf)).toBeNull();
+  });
+});

package/conf/player/selectors.ts

@@ -0,0 +1,10 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+/**
+ * Selects the action buttons from the player configuration.
+ * @param {Object} pluginConf - player plugin config
+ * @returns {Array|null} An array of action buttons or null if not found.
+ */
+export const selectActionButtons = (pluginConf: any) => {
+  return get(pluginConf, "player_action_buttons", null);
+};