@applicaster/zapp-react-native-utils 14.0.9-alpha.2354002522 → 14.0.9-alpha.3232321524

package/configurationUtils/__tests__/imageSrcFromMediaItem.test.ts

@@ -31,4 +31,42 @@ describe("imageSrcFromMediaItem", () => {
 
     expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
   });
+
+  it("returns undefined when fallback is false and key is not found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+      false,
+    ]);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns src when fallback is false and key is found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+      false,
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+  });
+
+  it("returns image_base as fallback when fallback is explicitly true and key is not found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+      true,
+    ]);
+
+    const fallback = entry.media_group[0].media_item[0];
+    expect(result).toEqual(fallback.src);
+    expect(fallback.key).toBe("image_base");
+  });
+
+  it("returns src when fallback is explicitly true and key is found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+      true,
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+  });
 });

package/configurationUtils/index.ts

@@ -155,9 +155,9 @@ export function getMediaItems(entry: ZappEntry): Option<ZappMediaItem[]> {
 
 /**
  * Retrieves the "src" value from a media item in the entry's media group,
- * based on a provided key, with fallback logic.
+ * based on a provided key, with optional fallback logic.
  *
- * Fallback order:
+ * Fallback order (when enabled):
  *   1. Attempts to find a media item with the specified key (or "image_base" if none provided).
  *   2. If not found, attempts to find a media item with the key "image_base".
  *   3. If still not found, falls back to the first available media item.
@@ -166,15 +166,19 @@ export function getMediaItems(entry: ZappEntry): Option<ZappMediaItem[]> {
  * since empty URIs are invalid in some platforms (e.g., React Native).
  *
  * @param {ZappEntry} entry - The entry object containing a media group.
- * @param {string[] | unknown} arg - A single-element array containing the key to look up, or any unknown value.
+ * @param {string[] | unknown} arg - Can be an array or any other value (treated as empty array).
+ *   When an array:
+ *   - First element: The key to look up. If omitted or undefined, defaults to "image_base".
+ *   - Second element: Boolean to enable/disable fallback logic. If omitted or undefined, defaults to true.
  * @returns {?string} The "src" URI from the matched media item, or undefined if not found or empty.
  */
 export function imageSrcFromMediaItem(
   entry: ZappEntry,
   arg: string[] | unknown
 ): Option<string> {
-  const args: unknown = R.unless(Array.isArray, Array)(arg || []);
+  const args: any = R.unless(Array.isArray, Array)(arg || []);
   const imageKey: string = args?.[0] || "image_base"; // always a single key in this function
+  const fallback: boolean = args?.[1] !== false;
 
   const mediaItems = getMediaItems(entry);
 
@@ -185,14 +189,16 @@ export function imageSrcFromMediaItem(
   // Try to find the item with the given key
   let foundItem = mediaItems.find((item) => item.key === imageKey);
 
-  // If not found and key was not "image_base", try to find "image_base"
-  if (!foundItem && imageKey !== "image_base") {
-    foundItem = mediaItems.find((item) => item.key === "image_base");
-  }
+  if (fallback) {
+    // If not found and key was not "image_base", try to find "image_base"
+    if (!foundItem && imageKey !== "image_base") {
+      foundItem = mediaItems.find((item) => item.key === "image_base");
+    }
 
-  // If still not found, default to first item
-  if (!foundItem) {
-    foundItem = mediaItems[0];
+    // If still not found, default to first item
+    if (!foundItem) {
+      foundItem = mediaItems[0];
+    }
   }
 
   const src = foundItem?.src;

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -331,6 +331,34 @@ function getPlayerConfiguration({ platform, version }) {
         label_tooltip: "Hint for skip intro button accessibility",
         type: "text_input",
       },
+      {
+        type: "text_input",
+        label: "Text Tracks label",
+        key: "text_label_text",
+        initial_value: "Subtitles",
+        label_tooltip: "Label for the text tracks list",
+      },
+      {
+        type: "text_input",
+        label: "Audio Tracks label",
+        key: "audio_label_text",
+        initial_value: "Audio Tracks",
+        label_tooltip: "Label for the audio tracks list",
+      },
+      {
+        type: "text_input",
+        label: "Off label",
+        key: "off_label_text",
+        initial_value: "Off",
+        label_tooltip: "Label for the 'Off' option in text tracks list",
+      },
+      {
+        type: "text_input",
+        label: "Default label",
+        key: "default_audio_label_text",
+        initial_value: "Default",
+        label_tooltip: "Label for the 'Default' audio in audio tracks list",
+      },
     ],
   };
 
@@ -3424,6 +3452,22 @@ function getPlayerConfiguration({ platform, version }) {
             label_tooltip:
               "This field allows you to override the player configuration / initialization options. i.e. html5: { vhs: { limitRenditionByPlayerDimensions: false } } Please ensure your configuration matches the player you are targeting, and that it is a valid json. See config options here: https://videojs.com/guides/options/",
           },
+          {
+            key: "advanced_player_styles",
+            label: "Advanced Player Styles",
+            type: "text_input",
+            multiline: true,
+            initial_value: `.vjs-text-track-cue { 
+            inset: unset !important;
+            top: 94% !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+          }`,
+            label_tooltip:
+              "This field allows you to inject custom CSS styles to override default player styles. The styles will be injected into the document head and can be used to customize the appearance of the player. Leave empty to use only default styles.",
+          },
           {
             key: "use_dashjs_player",
             label: "Use Enhanced Player for DASH streams",

package/navigationUtils/index.ts

@@ -5,7 +5,8 @@ import { layoutV2TypeMatcher } from "./layoutV2TypeMatcher";
 import { HOOKS_EVENTS } from "../appUtils/HooksManager/constants";
 import { HooksManager } from "../appUtils/HooksManager";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+
+import { zappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { logger } from "@applicaster/zapp-react-native-utils/logger";
 import {
   isGeneralPlugin,
@@ -15,6 +16,8 @@ import {
 } from "./itemTypeMatchers";
 import { RootState } from "@applicaster/zapp-react-native-redux/store";
 
+import { pick } from "@applicaster/zapp-react-native-utils/utils";
+
 type PathAttribute = {
   screenType: string;
   screenId: string;
@@ -403,15 +406,22 @@ export const mapContentTypesToRivers = (
 };
 
 export const runZappHooksForEntry = async (
-  entry: HookPluginProps["payload"],
-  {
+  entry: HookPluginProps["payload"]
+): Promise<{ success: boolean; payload: ZappEntry }> => {
+  const {
     setState,
     resetState,
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: Partial<HookModalContextT>
-): Promise<{ success: boolean; payload: ZappEntry }> => {
+  } = pick(zappHookModalStore.getState(), [
+    "setState",
+    "resetState",
+    "setIsHooksExecutionInProgress",
+    "setIsPresentingFullScreen",
+    "setIsRunningInBackground",
+  ]);
+
   resetState?.();
 
   let success;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.9-alpha.2354002522",
+  "version": "14.0.9-alpha.3232321524",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.9-alpha.2354002522",
+    "@applicaster/applicaster-types": "14.0.9-alpha.3232321524",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -1,20 +1,24 @@
 import { reactHooksLogger } from "../../logger";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 
 const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useHookModalScreenData = (): VariousScreenData | undefined => {
-  const hookModalState = useZappHooksModalState();
+export const useHookModalScreenData = (
+  skipSubscription: boolean
+): VariousScreenData | undefined => {
+  const hookModalState = useZappHookModalStore((state) =>
+    skipSubscription ? undefined : state.state
+  );
 
-  if (!hookModalState.state?.screenData) {
+  if (!hookModalState?.screenData) {
     return;
   }
 
   try {
-    const screenData = hookModalState.state.screenData?.payload;
-    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+    const screenData = hookModalState.screenData?.payload;
+    const hookPlugin = hookModalState.screenData.hookPlugin;
 
     if (hookPlugin?.screen_id) {
       return {
@@ -23,7 +27,7 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       };
     }
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   } catch (error) {
     logger.error({
       message: "Hook modal screen data creation failed",
@@ -34,6 +38,6 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       jsOnly: true,
     });
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   }
 };

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -5,7 +5,6 @@ import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
@@ -83,9 +82,45 @@ const hookModalContextState = {
   },
   setState: jest.fn(),
   resetState: jest.fn(),
+  hookPresentationMode: null,
 };
 
 const hooksModalPathname = `${ROUTE_TYPES.HOOKS_MODAL}/${hookModalContextState.state.screenData.payload.id}`;
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext",
+  () => {
+    // Define state inside mock factory to avoid hoisting issues
+    const mockState = {
+      isRunningInBackground: false,
+      setIsRunningInBackground: jest.fn(),
+      setIsPresentingFullScreen: jest.fn(),
+      isPresentationFullScreen: true,
+      isHooksExecutionInProgress: true,
+      setIsHooksExecutionInProgress: jest.fn(),
+      state: {
+        path: "/home",
+        screenData: { payload: { id: "hookExecutedInModal" } },
+      },
+      setState: jest.fn(),
+      resetState: jest.fn(),
+      hookPresentationMode: null,
+    };
+
+    const mockHook = jest.fn((selector) => {
+      return selector ? selector(mockState) : mockState;
+    }) as jest.MockedFunction<any> & { getState: () => typeof mockState };
+
+    // Add getState method to the mock hook (Zustand stores have this)
+    mockHook.getState = jest.fn(() => mockState);
+
+    return {
+      useZappHookModalStore: mockHook,
+      zappHookModalStore: mockHook,
+    };
+  }
+);
+
 const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
 const mockStore = configureMockStore();
 
@@ -125,13 +160,11 @@ const videoModalWrapper = ({ children }) => (
 
 const hookModalWrapper = ({ children }) => (
   <Provider store={store}>
-    <ZappHookModalContext.ReactContext.Provider value={hookModalContextState}>
-      <NavigationContext.Provider value={hookModalNavigator}>
-        <PathnameContext.Provider value={hooksModalPathname}>
-          {children}
-        </PathnameContext.Provider>
-      </NavigationContext.Provider>
-    </ZappHookModalContext.ReactContext.Provider>
+    <NavigationContext.Provider value={hookModalNavigator}>
+      <PathnameContext.Provider value={hooksModalPathname}>
+        {children}
+      </PathnameContext.Provider>
+    </NavigationContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,5 +1,6 @@
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { BackHandler } from "react-native";
+import { shallow } from "zustand/shallow";
 
 import {
   useContentTypes,
@@ -8,13 +9,13 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { pick } from "@applicaster/zapp-react-native-utils/utils";
 import { useNavbarState } from "../screen";
 
 export { useNavigation } from "./useNavigation";
@@ -166,7 +167,17 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
+  } = useZappHookModalStore(
+    (state) =>
+      pick(state, [
+        "setState",
+        "resetState",
+        "setIsHooksExecutionInProgress",
+        "setIsPresentingFullScreen",
+        "setIsRunningInBackground",
+      ]),
+    shallow
+  );
 
   const {
     appData: { layoutVersion },

package/reactHooks/navigation/useRoute.ts

@@ -52,7 +52,9 @@ export const useRoute = (
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = useHookModalScreenData();
+  const hookModalScreenData = useHookModalScreenData(
+    !isHookModalPathname(pathname)
+  );
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/services/storageServiceSync.web.ts

@@ -17,7 +17,7 @@ export const resolveStorageContextKey = (storageKey: string) => {
   const key = splitKey[1];
 
   if (!key) {
-    return getFromSessionOrLocalStorage(key);
+    return getFromSessionOrLocalStorage(namespaceOrKey);
   } else {
     return getFromSessionOrLocalStorage(key, namespaceOrKey);
   }