@applicaster/zapp-react-native-utils 14.0.6 → 14.0.7-alpha.1431245441

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -3424,6 +3424,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.6",
+  "version": "14.0.7-alpha.1431245441",
   "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.6",
+    "@applicaster/applicaster-types": "14.0.7-alpha.1431245441",
     "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);
   }