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

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

@@ -137,12 +137,3 @@ declare type AccessibilityState = {
   reduceMotionEnabled: boolean;
   boldTextEnabled: boolean;
 };
-
-declare type AccessibilityProps = {
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  "aria-label"?: string;
-  "aria-description"?: string;
-  accessibilityRole?: string;
-  "aria-role"?: string;
-};

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -351,86 +351,6 @@ function getPlayerConfiguration({ platform, version }) {
           ],
         },
       ]),
-      fieldsGroup(
-        "Partial Player (Roku only)",
-        "This section allows you to configure width and height of video player in Partial Player",
-        [
-          {
-            key: "video_theater_width",
-            label: "Width of player",
-            type: "number_input",
-            initial_value: "1420",
-            placeHolder: "1420",
-          },
-          {
-            key: "video_theater_height",
-            label: "Height of player",
-            type: "number_input",
-            initial_value: "900",
-            placeHolder: "900",
-          },
-          {
-            key: "full_screen_button_offset_x",
-            label: "Fullscreen button X",
-            type: "number_input",
-            initial_value: 160,
-            placeHolder: "160",
-          },
-          {
-            key: "full_screen_button_offset_y",
-            label: "Fullscreen button Y",
-            type: "number_input",
-            initial_value: 160,
-            placeHolder: "160",
-          },
-          {
-            key: "full_screen_button_w",
-            label: "Fullscreen button width",
-            type: "number_input",
-            initial_value: 120,
-            placeHolder: "120",
-          },
-          {
-            key: "full_screen_button_h",
-            label: "Fullscreen button height",
-            type: "number_input",
-            initial_value: 120,
-            placeHolder: "120",
-          },
-          {
-            key: "full_screen_button_background_color",
-            type: "color_picker",
-            label: "Fullscreen Button background color",
-            initial_value: "#00000000",
-            placeHolder: "color",
-            label_tooltip: "Pick Color",
-          },
-          {
-            key: "full_screen_button_background_url",
-            type: "text_input",
-            label: "Fullscreen Button background Url",
-            initial_value: "pkg:/images/tv_fullscreen.png",
-            placeHolder: "",
-            label_tooltip: "",
-          },
-          {
-            key: "full_screen_button_highlighted_background_color",
-            type: "color_picker",
-            label: "Fullscreen Button highlighted background color",
-            initial_value: "#00000000",
-            placeHolder: "color",
-            label_tooltip: "Pick Color",
-          },
-          {
-            key: "full_screen_button_highlighted_background_url",
-            type: "text_input",
-            label: "Fullscreen Button highlighted Url",
-            initial_value: "pkg:/images/tv_fullscreen.png",
-            placeHolder: "",
-            label_tooltip: "",
-          },
-        ]
-      ),
       fieldsGroup(
         "Skip Button",
         "This section allows you to configure the skip button styles for tv",
@@ -562,20 +482,6 @@ function getPlayerConfiguration({ platform, version }) {
             key: "skip_button_style_text_android_font_size",
             initial_value: 24,
           },
-          {
-            type: "roku_font_selector",
-            label_tooltip: "",
-            label: "Android Font Family",
-            key: "skip_button_style_text_roku_font_family",
-            initial_value: "Ubuntu-Bold",
-          },
-          {
-            type: "number_input",
-            label_tooltip: "",
-            label: "Roku Font Size",
-            key: "skip_button_style_text_roku_font_size",
-            initial_value: 24,
-          },
           {
             type: "select",
             options: [
@@ -3424,60 +3330,6 @@ function getPlayerConfiguration({ platform, version }) {
           },
         ]
       ),
-      fieldsGroup(
-        "Roku only",
-        "This section allows you to configure RAF - Roku Ad Framework settings",
-        [
-          {
-            key: "raf_enabled",
-            type: "switch",
-            initial_value: false,
-          },
-          {
-            key: "raf_url",
-            type: "text_input",
-            label: "Ad Url",
-            label_tooltip:
-              "Publisher's ad URL. The default is he roku ad server with single preroll placeholder, with revenue spilt ad sharing by default. TO GET PAID A URL MUST BE PASSED IN HERE. Note: If you are putting ads in child targetted content then your ad url will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
-          },
-          {
-            key: "genre",
-            type: "text_input",
-            label: "Roku Genre",
-            initial_value: "Entertainment",
-            label_tooltip:
-              "Choose value from Roku genre tags, from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md",
-          },
-          {
-            key: "nielsen_enabled",
-            type: "checkbox",
-            initial_value: false,
-            label_tooltip:
-              "Required only for apps launched in the US market, See developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md for details on configuration",
-          },
-          {
-            key: "nielsen_app_id",
-            type: "text_input",
-            initial_value: "",
-            label_tooltip:
-              "id of your app for nielsen leave blank if you don't have a specific id (that is almost always the case)",
-          },
-          {
-            key: "nielsen_genre",
-            type: "text_input",
-            initial_value: "General",
-            label_tooltip:
-              "genre from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md#nielsen-dar-genre-tags",
-          },
-          {
-            key: "is_kids_content",
-            type: "checkbox",
-            initial_value: false,
-            label_tooltip:
-              "If your content is directed at kids, this must be checked. See developer.roku.com/docs/developer-program/advertising/raf-api.md#setcontentgenregenres-as-string-kidscontent-as-boolean for more info. Also note your ad urls will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
-          },
-        ]
-      ),
       fieldsGroup(
         "Audio Tracks",
         "This section allows you to configure default audio track behavior for videos with multiple audio tracks",

package/manifestUtils/keys.js

@@ -485,18 +485,6 @@ const TV_MENU_LABEL_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "LG letter spacing",
   },
-  {
-    type: ZAPPIFEST_FIELDS.font_selector.roku,
-    suffix: "Roku font family",
-  },
-  {
-    type: ZAPPIFEST_FIELDS.number_input,
-    suffix: "Roku font size",
-  },
-  {
-    type: ZAPPIFEST_FIELDS.number_input,
-    suffix: "Roku line height",
-  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "text transform",

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -424,12 +424,6 @@ const titleFields = [
     key: "vizio_font_family",
     initial_value: fontFamily,
   },
-  {
-    type: "roku_font_selector",
-    label: "Roku TV Font Family",
-    key: "roku_font_family",
-    initial_value: fontFamily,
-  },
   ...generateFontConfiguration(),
   // text transform
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.6242515303",
+  "version": "14.0.0-alpha.6461844364",
   "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.6242515303",
+    "@applicaster/applicaster-types": "14.0.0-alpha.6461844364",
     "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/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,25 +1,27 @@
 import React from "react";
 
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { useTrackedView } from "../useTrackedView";
 
 const mockUpdateComponentsPositions = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
   () => ({
-    useScreenTrackedViewPositionsContext: jest.fn().mockReturnValue({
+    useScreenTrackedViewPositionsContext: jest.fn(() => ({
       updateComponentsPositions: mockUpdateComponentsPositions,
       value: {
         "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
         "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
       },
-    }),
+    })),
   })
 );
 
-jest.useFakeTimers({ legacyFakeTimers: true });
+jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
@@ -32,10 +34,8 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
   <Provider store={store}>{children}</Provider>
 );
 
-const { useTrackedView } = require("../useTrackedView");
-
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component - onViewportEnter", () => {
+  it("should update position for selected component - onViewportEnter", async () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
@@ -46,14 +46,13 @@ describe("useTrackCurrentAutoScrollingElement", () => {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(async () => {
-      await result.current.onPositionUpdated(mockRect);
+    act(() => {
+      result.current.onPositionUpdated(mockRect);
     });
 
-    // Fast-forward until all timers have been executed
-    jest.runAllTimers();
-
-    expect(result.current.inViewPort).toBe(true);
+    await waitFor(() => {
+      expect(result.current.inViewPort).toBe(true);
+    });
 
     expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
       "123",