@applicaster/zapp-react-native-utils 14.0.0-alpha.1308901965 → 14.0.0-alpha.1322105203

package/appUtils/HooksManager/Hook.ts

@@ -65,10 +65,6 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
-    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
-      return;
-    }
-
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }
@@ -198,4 +194,8 @@ export class Hook implements HookInterface {
       R.eqProps("weight", nextHook, this)
     );
   }
+
+  isCancelled(): boolean {
+    return this.state === hookState(HOOKS_EVENTS.CANCEL);
+  }
 }

package/appUtils/HooksManager/index.ts

@@ -255,7 +255,7 @@ export function HooksManager({
    * @param {Array<Hook>} restOfHooks to run
    * @returns {function} callback function
    */
-  function hookCallback(hookPlugin, restOfHooks, initialPayload) {
+  function hookCallback(hookPlugin: Hook, restOfHooks: Hook[], initialPayload) {
     /**
      * callback invoked after a hook is executed
      * @param {object} options
@@ -273,6 +273,16 @@ export function HooksManager({
     }) {
       let callback = callbackArg;
 
+      if (hookPlugin.isCancelled()) {
+        logHookEvent(
+          hooksManagerLogger.info,
+          `hookCallback: hook was cancelled: ${hookPlugin["identifier"]}`,
+          {}
+        );
+
+        return;
+      }
+
       if (error) {
         logHookEvent(
           hooksManagerLogger.error,

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/arrayUtils/index.ts

@@ -93,7 +93,7 @@ export const isIndexInRange = (index: number, length: number): boolean => {
 export const makeListOfIndexes = (size: number): number[] =>
   Array.from({ length: size }, (_, index) => index);
 
-export const makeListOf = (value: unknown, size: number): number[] => {
+export const makeListOf = <T>(value: T, size: number): T[] => {
   return Array(size).fill(value);
 };
 

package/componentsUtils/__tests__/isTabsScreen.test.ts

@@ -0,0 +1,38 @@
+import { isTabsScreen } from "..";
+
+describe("isTabsScreen", () => {
+  it("should return true if the component type is 'screen-picker-qb-tv' and tabs_screen=true", () => {
+    const item = { component_type: "screen-picker-qb-tv", tabs_screen: true };
+    expect(isTabsScreen(item)).toBe(true);
+  });
+
+  it("should return true if the component type is 'screen-picker-qb-tv' and tabs_screen=false", () => {
+    const item = { component_type: "screen-picker-qb-tv", tabs_screen: false };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the component type is not 'screen-picker-qb-tv'", () => {
+    const item = { component_type: "other-component" };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the component type is undefined", () => {
+    const item = { component_type: undefined };
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is null", () => {
+    const item = null;
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is undefined", () => {
+    const item = undefined;
+    expect(isTabsScreen(item)).toBe(false);
+  });
+
+  it("should return false if the item is an empty object", () => {
+    const item = {};
+    expect(isTabsScreen(item)).toBe(false);
+  });
+});

package/componentsUtils/index.ts

@@ -5,7 +5,7 @@ const EMPTY_GROUP_COMPONENT = "empty_group_component";
 
 const GALLERY = "gallery-qb";
 
-const SCREEN_PICKER = "screen-picker-qb-tv";
+export const SCREEN_PICKER = "screen-picker-qb-tv";
 
 const HORIZONTAL_LIST = "horizontal_list_qb";
 
@@ -37,3 +37,6 @@ export const isEmptyGroup = (item): boolean =>
 export const isGroupInfo = (item): boolean =>
   item?.component_type === GROUP_INFO ||
   item?.component_type === GROUP_INFO_OLD;
+
+export const isTabsScreen = (item): boolean =>
+  isScreenPicker(item) && item?.tabs_screen;

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -0,0 +1,547 @@
+import { getAllSpecificStyles } from "../manifestKeyParser";
+
+// Mock the dependencies
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  platformSelect: jest.fn((platforms) => platforms.samsung_tv), // Default to samsung for tests
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/stringUtils", () => ({
+  toCamelCase: jest.fn((str: string) => {
+    // Simple camelCase implementation for testing
+    return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+  }),
+}));
+
+describe("getAllSpecificStyles", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic functionality", () => {
+    it("should throw error if outStyles is not provided", () => {
+      expect(() => {
+        getAllSpecificStyles({
+          componentName: "button",
+          subComponentName: "",
+          configuration: {},
+          outStyles: null as any,
+        });
+      }).toThrow("outStyles is required");
+    });
+
+    it("should throw error if componentName is not provided", () => {
+      expect(() => {
+        getAllSpecificStyles({
+          componentName: "",
+          subComponentName: "",
+          configuration: {},
+          outStyles: {},
+        });
+      }).toThrow("componentName is required");
+    });
+
+    it("should initialize default key if not present", () => {
+      const outStyles = {};
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration: {},
+        outStyles,
+      });
+
+      expect(outStyles).toHaveProperty("default");
+      expect(outStyles["default"]).toEqual({});
+    });
+
+    it("should handle empty configuration", () => {
+      const outStyles = { default: {} };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration: {},
+        outStyles,
+      });
+
+      expect(outStyles).toEqual({ default: {} });
+    });
+  });
+
+  describe("Style name parsing", () => {
+    it("should parse basic style without state or platform", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_border_width: 2,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+        borderWidth: 2,
+      });
+    });
+
+    it("should handle subComponentName correctly", () => {
+      const outStyles = {};
+
+      const configuration = {
+        player_controls_style_button_background_color: "#FF0000",
+        player_controls_style_button_text_size: 16,
+      };
+
+      getAllSpecificStyles({
+        componentName: "player_controls",
+        subComponentName: "button",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+        textSize: 16,
+      });
+    });
+
+    it("should ignore keys that do not match the prefix", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        other_component_style_text_color: "#00FF00", // Should be ignored
+        random_key: "value", // Should be ignored
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+      });
+    });
+  });
+
+  describe("State handling", () => {
+    it("should handle pressed state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_pressed_background_color: "#00FF00",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#00FF00",
+      });
+    });
+
+    it("should handle focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focused_border_width: 3,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["focused"]).toEqual({
+        borderWidth: 3,
+      });
+    });
+
+    it("should handle selected state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_selected_opacity: 0.5,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["selected"]).toEqual({
+        opacity: 0.5,
+      });
+    });
+
+    it("should handle focused_selected state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focused_selected_scale: 1.2,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["focused_selected"]).toEqual({
+        scale: 1.2,
+      });
+    });
+
+    it("should merge default styles into other states", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_border_width: 1,
+        button_style_opacity: 1,
+        button_style_pressed_background_color: "#00FF00",
+        button_style_focused_opacity: 0.8,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+        borderWidth: 1,
+        opacity: 1,
+      });
+
+      // Pressed should have default styles merged with its specific override
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#00FF00", // Override
+        borderWidth: 1, // From default
+        opacity: 1, // From default
+      });
+
+      // Focused should have default styles merged with its specific override
+      expect(outStyles["focused"]).toEqual({
+        backgroundColor: "#FF0000", // From default
+        borderWidth: 1, // From default
+        opacity: 0.8, // Override
+      });
+    });
+
+    it("should preserve existing state values when merging", () => {
+      const outStyles = {
+        pressed: { existingKey: "existingValue" },
+      };
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_pressed_text_color: "#FFFFFF",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        existingKey: "existingValue", // Should be preserved
+        backgroundColor: "#FF0000", // From default
+        textColor: "#FFFFFF", // New pressed style
+      });
+    });
+  });
+
+  describe("Platform handling", () => {
+    it("should include styles for current platform (samsung)", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_samsung_background_color: "#FF0000",
+        button_style_background_color: "#00FF00",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000", // Samsung-specific should be included
+      });
+    });
+
+    it("should skip styles for other platforms", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_ios_background_color: "#FF0000",
+        button_style_android_text_color: "#00FF00",
+        button_style_tvos_border_width: 2,
+        button_style_lg_opacity: 0.5,
+        button_style_background_color: "#FFFFFF",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FFFFFF", // Only non-platform specific
+      });
+    });
+
+    it("should handle platform in middle of style name", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_text_samsung_color: "#FF0000",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "text",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        color: "#FF0000",
+      });
+    });
+
+    it("should handle platform-specific styles with states", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_samsung_pressed_background_color: "#FF0000",
+        button_style_ios_pressed_background_color: "#00FF00", // Should be ignored
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#FF0000", // Only samsung style
+      });
+    });
+
+    it("should work correctly when platform is Samsung", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_ios_background_color: "#FF0000",
+        button_style_samsung_background_color: "#00FF00",
+        button_style_background_color: "#FFFFFF",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#00FF00", // Samsung-specific should win
+      });
+    });
+  });
+
+  describe("Complex scenarios", () => {
+    it("should handle multiple states and platforms correctly", () => {
+      const outStyles = {};
+
+      const configuration = {
+        // Default styles
+        button_style_background_color: "#FFFFFF",
+        button_style_text_color: "#000000",
+        button_style_border_width: 1,
+
+        // Platform-specific default
+        button_style_samsung_padding: 10,
+
+        // State-specific
+        button_style_pressed_background_color: "#EEEEEE",
+        button_style_focused_scale: 1.1,
+
+        // Platform + state specific
+        button_style_samsung_pressed_opacity: 0.8,
+        button_style_ios_pressed_opacity: 0.6, // Should be ignored
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FFFFFF",
+        textColor: "#000000",
+        borderWidth: 1,
+        padding: 10,
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#EEEEEE",
+        textColor: "#000000",
+        borderWidth: 1,
+        padding: 10,
+        opacity: 0.8,
+      });
+
+      expect(outStyles["focused"]).toEqual({
+        backgroundColor: "#FFFFFF",
+        textColor: "#000000",
+        borderWidth: 1,
+        padding: 10,
+        scale: 1.1,
+      });
+    });
+
+    it("should handle edge case keys correctly", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_: "shouldBeIgnored", // Empty style name
+        button_style_samsung_: "shouldBeIgnored", // Platform but no style
+        button_style__pressed: "shouldBeIgnored", // No style name before state
+        button_style_valid_key: "included",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        validKey: "included",
+      });
+    });
+
+    it("should handle all state suffixes in priority order", () => {
+      const outStyles = {};
+
+      const configuration = {
+        // Test that focused_selected is recognized before focused
+        button_style_focused_selected_test: "focused_selected_value",
+        button_style_focused_another: "focused_value",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["focused_selected"]).toEqual({
+        test: "focused_selected_value",
+      });
+
+      expect(outStyles["focused"]).toEqual({
+        another: "focused_value",
+      });
+    });
+  });
+
+  describe("Immutability", () => {
+    it("should not mutate configuration object", () => {
+      const configuration = Object.freeze({
+        button_style_background_color: "#FF0000",
+      });
+
+      const outStyles = {};
+
+      expect(() => {
+        getAllSpecificStyles({
+          componentName: "button",
+          subComponentName: "",
+          configuration,
+          outStyles,
+        });
+      }).not.toThrow();
+    });
+
+    it("platform pressed overrides generic pressed for same key", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_pressed_background_color: "#111111", // generic
+        button_style_samsung_pressed_background_color: "#222222", // platform
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["pressed"]["backgroundColor"]).toBe("#222222");
+    });
+
+    it("should handle frozen outStyles properties", () => {
+      const outStyles = {
+        default: Object.freeze({ existingProp: "value" }),
+      };
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      // Should create new object instead of mutating frozen one
+      expect(outStyles["default"]).toEqual({
+        existingProp: "value",
+        backgroundColor: "#FF0000",
+      });
+    });
+  });
+});

package/configurationUtils/manifestKeyParser.ts

@@ -11,8 +11,11 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-const stateSuffixes = ["pressed", "focused"];
+// Do not change the order, focused_selected should be first
+const states = ["focused_selected", "pressed", "focused", "selected"];
+
 const platformSuffixes = ["ios", "tvos", "samsung", "lg", "android"];
+type StateKey = (typeof states)[number] | "default";
 
 export type GetAllSpecificStylesProps = {
   componentName: string;
@@ -33,39 +36,47 @@ export const getAllSpecificStyles = ({
   subComponentName,
   outStyles,
 }: GetAllSpecificStylesProps) => {
-  if (!outStyles) {
-    throw new Error("outStyles is required");
-  }
+  if (!outStyles) throw new Error("outStyles is required");
+  if (!componentName) throw new Error("componentName is required");
 
-  // Pressed, platform specific styles are not supported
-  const prefix = `${componentName}_style_${subComponentName}_`;
+  const prefix =
+    subComponentName?.length > 0
+      ? `${componentName}_style_${subComponentName}_`
+      : `${componentName}_style_`;
 
   const defaultKey = "default";
 
-  if (!outStyles[defaultKey]) {
-    outStyles[defaultKey] = {};
-  }
+  if (!outStyles[defaultKey]) outStyles[defaultKey] = {};
+
+  const tmpGenericDict: Record<StateKey, Record<string, any>> = {};
+  const tmpPlatformDict: Record<StateKey, Record<string, any>> = {};
 
-  Object.keys(configuration).forEach((key) => {
+  const parseKey = (key: string, value: any) => {
     if (!key.startsWith(prefix)) {
       return;
     }
 
     let styleName = key.slice(prefix.length);
+    if (!styleName || styleName.startsWith("_")) return;
 
-    const platform = platformSuffixes.find((suffix) =>
-      styleName.startsWith(suffix)
+    const platform = platformSuffixes.find((prefix) =>
+      styleName.startsWith(prefix)
     );
 
+    let tmpDict = tmpGenericDict;
+
     if (platform) {
       if (currentPlatform !== platform) {
-        return; // Continue
+        return;
       }
 
+      tmpDict = tmpPlatformDict;
       styleName = styleName.slice(platform.length + 1);
     }
 
-    let state = stateSuffixes.find((suffix) => styleName.startsWith(suffix));
+    let state = states.find((prefix) => styleName.startsWith(prefix)) as
+      | StateKey
+      | undefined;
 
     if (state) {
       styleName = styleName.slice(state.length + 1);
@@ -73,30 +84,44 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
-    const camelCaseKey = toCamelCase(styleName);
+    if (!styleName) return;
 
-    let stateOverrides = outStyles[state];
+    const camelCaseKey = toCamelCase(styleName);
 
-    if (!stateOverrides) {
-      stateOverrides = {};
-      outStyles[state] = stateOverrides;
-    }
+    if (!tmpDict[state]) tmpDict[state] = {};
+    tmpDict[state][camelCaseKey] = value;
+  };
 
-    if (stateOverrides[camelCaseKey]) {
-      // Add warning, key is already defined
-    }
+  for (const [key, value] of Object.entries(configuration)) {
+    parseKey(key, value);
+  }
 
-    stateOverrides[camelCaseKey] = configuration[key];
-  });
+  const allStates = Array.from(
+    new Set<StateKey>([
+      defaultKey,
+      ...(Object.keys(tmpGenericDict) as StateKey[]),
+      ...(Object.keys(tmpPlatformDict) as StateKey[]),
+      ...(Object.keys(outStyles) as StateKey[]),
+    ])
+  );
+
+  for (const state of allStates) {
+    outStyles[state] = Object.assign(
+      {},
+      outStyles[state] || {},
+      tmpGenericDict[state] || {},
+      tmpPlatformDict[state] || {}
+    );
+  }
 
   // Merge default styles with state specific styles
-  if (Object.keys(outStyles).length > 1) {
-    Object.keys(outStyles).forEach((key) => {
-      if (key === defaultKey) {
-        return;
-      }
+  for (const state of Object.keys(outStyles)) {
+    if (state === defaultKey) continue;
 
-      outStyles[key] = Object.assign({}, outStyles[defaultKey], outStyles[key]);
-    });
+    outStyles[state] = Object.assign(
+      {},
+      outStyles[defaultKey],
+      outStyles[state]
+    );
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.1308901965",
+  "version": "14.0.0-alpha.1322105203",
   "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.0-alpha.1308901965",
+    "@applicaster/applicaster-types": "14.0.0-alpha.1322105203",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/index.ts

@@ -5,6 +5,7 @@ import { isFilledArray } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getBoolFromConfigValue } from "../configurationUtils";
+import { Dimensions } from "react-native";
 
 export { getPlayerActionButtons } from "./getPlayerActionButtons";
 
@@ -97,3 +98,53 @@ export const isAudioItem = (item: Option<ZappEntry>) => {
 export const isInlineTV = (screenData) => {
   return isTV() && isFilledArray(screenData?.ui_components);
 };
+
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
+type DimensionsT = {
+  width: number | string;
+  height: number | string | undefined;
+  aspectRatio?: number;
+};
+
+export const getTabletWidth = (
+  tablet_landscape_sidebar_width,
+  dimensions: DimensionsT
+) => {
+  const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+
+  const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
+
+  const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
+
+  if (tablet_landscape_sidebar_width?.includes("%")) {
+    return widthValue * (1 - sidebarWidth / 100);
+  }
+
+  if (Number.isNaN(sidebarWidth)) {
+    return widthValue * 0.65;
+  }
+
+  return widthValue - sidebarWidth;
+};

package/reactHooks/layout/isTablet/index.ts

@@ -1,21 +1,28 @@
 import { NativeModules, Platform } from "react-native";
 
+export const isAndroidTablet = () => {
+  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
+
+  return initialProps?.is_tablet;
+};
+
 /**
  * Determines wether the given device is a tablet based on dimensions, orientation, and platform
  * @param {Object} dimensions - Dimensions object passed to the function
  * @param {String} orientation - Orientation enum passed to the function
  * @returns {Boolean} isTablet - returns whether the given device is a tablet
  */
-export const isTablet = (dimensions, orientation) => {
+export const isTablet = (
+  dimensions?: { width: number; height: number },
+  orientation?: string
+) => {
   if (Platform?.OS === "ios") {
     return Platform?.isPad;
   } else if (Platform?.OS === "android") {
-    const { initialProps } = NativeModules.QuickBrickCommunicationModule;
-
-    return initialProps?.is_tablet;
+    return isAndroidTablet();
   }
 
-  const { width } = dimensions;
+  const { width } = dimensions || {};
 
   if (width < 600) return false;
   if (width >= 600 && width < 840) return orientation === "portrait";

package/reactHooks/navigation/index.ts

@@ -14,7 +14,7 @@ import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 
 export { useNavigation } from "./useNavigation";
@@ -127,10 +127,14 @@ export function isNavBarVisible(
 
 export const useBackHandler = (cb: () => boolean) => {
   useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", cb);
+    if (!isWeb()) {
+      BackHandler.addEventListener("hardwareBackPress", cb);
+    }
 
     return () => {
-      BackHandler.removeEventListener("hardwareBackPress", cb);
+      if (!isWeb()) {
+        BackHandler.removeEventListener("hardwareBackPress", cb);
+      }
     };
   }, [cb]);
 };

package/reactHooks/navigation/useScreenStateStore.ts

@@ -4,8 +4,5 @@ import { useMemo } from "react";
 export const useScreenStateStore = () => {
   const route = useRoute(false);
 
-  return useMemo(
-    () => route.screenData["screenStateStore"],
-    [route.screenData["screenStateStore"]]
-  );
+  return useMemo(() => route.screenData["screenStateStore"], [route.pathname]);
 };