@applicaster/zapp-react-native-utils 13.0.0-alpha.5771418585 → 13.0.0-alpha.5928753399

package/manifestUtils/sharedConfiguration/screenPicker/utils.js

@@ -0,0 +1,130 @@
+const defaultPlatforms = {
+  tvos: "tvOS",
+  android_tv: "Android TV",
+  lg_tv: "LG TV",
+  samsung_tv: "Samsung TV",
+};
+
+const global_defaults = {
+  fontSize: 20,
+  lineHeight: 40,
+  letterSpacing: 0.4,
+};
+
+const generateFontConfiguration = (platforms = defaultPlatforms) => {
+  const platformEntries = Object.entries(platforms);
+  const defaultsEntries = Object.entries(global_defaults);
+  const splitCamelCase = (str) => str.replace(/([a-z](?=[A-Z]))/g, "$1_");
+
+  return platformEntries.reduce((acc, [platformKey, platformValue]) => {
+    acc.push(
+      ...defaultsEntries.reduce((acc2, [valueKey, defaultValue]) => {
+        acc2.push({
+          type: "number_input",
+          label: `${platformValue} ${splitCamelCase(valueKey).replace(
+            "_",
+            " "
+          )}`,
+          key: `${platformKey}_${splitCamelCase(valueKey)}`.toLowerCase(),
+          initial_value: defaultValue,
+        });
+
+        return acc2;
+      }, [])
+    );
+
+    return acc;
+  }, []);
+};
+
+const conditional_rule = (key, condition_value) => ({
+  key,
+  condition_value,
+});
+
+const createConditionalConfig = (rules, matchAll = false) => ({
+  rules: matchAll ? "all_conditions" : "conditional",
+  conditional_fields: rules.map((field) => conditional_rule(...field)),
+});
+
+const conditional_horizontal_type = createConditionalConfig([
+  ["styles/screen_picker_type", "horizontal"],
+]);
+
+const conditional_vertical_type = createConditionalConfig([
+  ["styles/screen_picker_type", "vertical"],
+]);
+
+const conditional_horizontal_type_item_fixed = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_item_size", "fixed"],
+  ],
+  true
+);
+
+const conditional_horizontal_type_item_dynamic = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["screen_picker_horizontal_display_type", "dynamic"],
+  ],
+  true
+);
+
+const conditional_horizontal_display_type_fixed = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_horizontal_display_type", "fixed"],
+  ],
+  true
+);
+
+const conditional_horizontal_asset_on = createConditionalConfig(
+  [
+    ["styles/screen_picker_type", "horizontal"],
+    ["styles/screen_picker_asset_switch", true],
+  ],
+  true
+);
+
+const createVariationFields = ({
+  prefix = "screen_picker",
+  key,
+  type = "number_input",
+  label = "",
+  variants: [a, b],
+}) => {
+  return [
+    {
+      type,
+      key: `${prefix}${prefix.length > 0 ? "_" : ""}${
+        a?.key ?? "vertical"
+      }_${key}`,
+      label: a?.label ?? label,
+      initial_value: a.initial_value,
+      ...conditional_vertical_type,
+    },
+    {
+      type,
+      key: `${prefix}${prefix.length > 0 ? "_" : ""}${
+        b.key ?? "horizontal"
+      }_${key}`,
+      label: b?.label ?? label,
+      initial_value: b.initial_value,
+      ...conditional_horizontal_type,
+    },
+  ];
+};
+
+module.exports = {
+  generateFontConfiguration,
+  createVariationFields,
+  createConditionalConfig,
+  conditional_rule,
+  conditional_horizontal_type,
+  conditional_vertical_type,
+  conditional_horizontal_type_item_fixed,
+  conditional_horizontal_type_item_dynamic,
+  conditional_horizontal_display_type_fixed,
+  conditional_horizontal_asset_on,
+};

package/numberUtils/index.ts

@@ -3,7 +3,7 @@ import { logger } from "@applicaster/zapp-react-native-utils/logger";
 
 const numberUtilsLogger = logger?.addSubsystem("NumberUtils");
 
-export const toNumber = (value: any): number | undefined => {
+export const toNumber = (value: unknown): number | undefined => {
   if (R.isNil(value) || R.isEmpty(value)) {
     return undefined;
   }
@@ -17,10 +17,12 @@ export const toNumber = (value: any): number | undefined => {
   return undefined;
 };
 
-export const toNumberWithDefault = (defaultValue: number, value: any): number =>
-  toNumber(value) ?? defaultValue;
+export const toNumberWithDefault = (
+  defaultValue: number,
+  value: unknown
+): number => toNumber(value) ?? defaultValue;
 
-export const toNumberWithDefaultZero = (value: any): number =>
+export const toNumberWithDefaultZero = (value: unknown): number =>
   toNumberWithDefault(0, value);
 
 export const requireNumber = (obj, key: string) => {
@@ -39,7 +41,7 @@ export const requireNumber = (obj, key: string) => {
 
 export const toFiniteNumberWithDefault = (
   defaultValue: number,
-  value: any
+  value: unknown
 ): number => {
   const possibleNumber = toNumberWithDefault(defaultValue, value);
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.5771418585",
+  "version": "13.0.0-alpha.5928753399",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid ts build in main packages for now"
   },
   "publishConfig": {
@@ -28,11 +27,9 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.5771418585",
+    "@applicaster/applicaster-types": "13.0.0-alpha.5928753399",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
-    "create-react-context": "^0.2.3",
-    "create-react-ref": "^0.1.0",
     "dayjs": "^1.11.10",
     "memoizee": "0.4.15",
     "prop-types": "^15.0.0",
@@ -42,13 +39,10 @@
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
     "immer": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
-  },
-  "devDependencies": {
-    "@types/react-native": "0.69.6"
   }
 }

package/playerUtils/configurationGenerator.ts

@@ -55,6 +55,14 @@ function getPlayerConfiguration({ platform }) {
         label_tooltip:
           "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
       },
+      {
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
+        initial_value: "",
+        type: "text_input",
+        label_tooltip:
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
+      },
     ],
   };
 

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -35,25 +35,23 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component", async () => {
+  it("should update position for selected component - onViewportEnter", () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
 
-    // Fast-forward until all timers have been executed
-    jest.advanceTimersByTime(3000);
-
     expect(result.current.inViewPort).toBe(false);
 
     const mockRect = {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(() => {
-      result.current.onPositionUpdated(mockRect);
+    act(async () => {
+      await result.current.onPositionUpdated(mockRect);
     });
 
-    jest.advanceTimersByTime(3000);
+    // Fast-forward until all timers have been executed
+    jest.runAllTimers();
 
     expect(result.current.inViewPort).toBe(true);
 

package/reactHooks/autoscrolling/useTrackedView.ts

@@ -2,6 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { findTrackedView } from "./utils/findTrackedView";
+import { isNil } from "ramda";
+import { withTimeout } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT = 500; // ms
 
 const getNormalizedRect = (rect, componentId, screenWidth, screenHeight) => {
   if (!rect) {
@@ -37,9 +41,16 @@ export const useTrackedView = (componentId: string) => {
   );
 
   const onPositionUpdated = useCallback(
-    ({ rect }) => {
+    async ({ rect }) => {
       const currentPosition = normalizedRect(componentId, rect);
 
+      // There is an issue on the native side where they are unable to guarantee
+      // that the order of onViewportLeave and onViewportEnter events is always correct.
+      // This workaround/hack delays the onViewportEnter event to ensure it is received last.
+      if (!isNil(currentPosition)) {
+        await withTimeout(TIMEOUT_FOR_DELAY_ON_VIEWPORT_ENTER_EVENT);
+      }
+
       updateComponentsPositions(componentId, currentPosition as any);
 
       setInViewPort(!!currentPosition);

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));

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

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/index.ts

@@ -108,11 +108,13 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 

package/reactHooks/player/TVSeekControlller/TVSeekController.ts

@@ -23,7 +23,7 @@ export enum SEEK_STRATEGY {
 }
 
 const CONFIG_TAP_SEEK = {
-  CLICKS_BEFORE_PAUSE: 1,
+  CLICKS_BEFORE_PAUSE: 0,
 };
 
 const CONFIG_LONG_PRESS = {
@@ -93,8 +93,6 @@ export class TVSeekController
       this.isPlayerInitiallyPaused = this.playerController.isPaused();
     }
 
-    log_debug(`handleStartSeek: seekType: ${seekType}, initiallyPaused: ${this.isPlayerInitiallyPaused}, isPlayerPaused: ${this.playerController.isPaused()}`);
-
     this.clearLongPressThresholdTimeout();
     this.clearSeekCompleteTimeout();
     this.setStrategy(SEEK_STRATEGY.TAP_SEEK);
@@ -107,36 +105,27 @@ export class TVSeekController
   };
 
   onForwardPress = (): boolean => {
-    log_debug("onForwardPress:");
-
     this.handleStartSeek(SEEK_TYPE.FORWARD);
 
     return true;
   };
 
   onRewindPress = (): boolean => {
-    log_debug("onRewindPress:");
-
     this.handleStartSeek(SEEK_TYPE.REWIND);
 
     return true;
   };
 
   onSeekEnd = () => {
-    log_debug("onSeekEnd: Seek ended");
     this.clearLongPressThresholdTimeout();
     this.currentSeekController.onSeekEnd();
   };
 
   onRewindPressOut = () => {
-    log_debug("onRewindPressOut:");
-
     this.onSeekEnd();
   };
 
   onForwardPressOut = () => {
-    log_debug("onForwardPressOut:");
-
     this.onSeekEnd();
   };
 
@@ -149,9 +138,7 @@ export class TVSeekController
   };
 
   handleDelayedSeek = (offset: number = 0) => {
-    if (this.delayedSeekPosition === null) {
-      void this.handlePlayerPause();
-    }
+    this.handlePlayerPause();
 
     const currentPos =
       this.delayedSeekPosition === null
@@ -187,46 +174,36 @@ export class TVSeekController
       }
     }
 
-    log_debug(`handleDelayedSeek: currentPos: ${currentPos} targetPos:${targetPos}, initiallyPaused: ${this.isPlayerInitiallyPaused}`);
-
     this.delayedSeekPosition = targetPos;
     this.delayedSeekProgressSubject.next(targetPos);
   };
 
-  handleSeekTo = async (newPosition: number) => {
-    await this.playerController.seekTo(newPosition);
-
-    log_debug(
-      `handleSeekTo: isPlayerInitiallyPaused: ${this.isPlayerInitiallyPaused}  CallPlayerPlay: ${this.isPlayerInitiallyPaused ? "NO" : "YES"}`
-    );
+  handleSeekTo = (newPosition: number) => {
+    this.playerController.seekTo(newPosition);
 
     if (!this.isPlayerInitiallyPaused) {
-      await this.playerController.play();
+      this.playerController.play();
     }
   };
 
-  handleSeek = async (offset: number) => {
-    await this.playerController[this.currentSeekType](offset);
-
-    log_debug(
-      `handleSeek: isPlayerInitiallyPaused: ${this.isPlayerInitiallyPaused} CallPlayerPlay: ${this.isPlayerInitiallyPaused ? "NO" : "YES"}`
-    );
+  handleSeek = (offset: number) => {
+    this.playerController[this.currentSeekType](offset);
 
     if (!this.isPlayerInitiallyPaused) {
-      await this.playerController.play();
+      this.playerController.play();
     }
   };
 
   handleSeekComplete = () => {
     this.clearSeekCompleteTimeout();
 
-    this.seekEndTimeout = setTimeout(async () => {
+    this.seekEndTimeout = setTimeout(() => {
       if (this.delayedSeekPosition !== null) {
-        await this.handleSeekTo(this.delayedSeekPosition);
+        this.handleSeekTo(this.delayedSeekPosition);
       }
 
       log_debug(
-        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}, playerPaused: ${this.playerController.isPaused()}. Reset all states and seek position.`
+        `handleSeekComplete: Seek finished, type: ${this.currentSeekController.title}, seekPosition: ${this.delayedSeekPosition}. Reset all states and seek position.`
       );
 
       this.resetAll();
@@ -237,16 +214,12 @@ export class TVSeekController
     return this.delayedSeekPosition !== null;
   };
 
-  handlePlayerPause = async () => {
-    log_debug(
-      `handleSeek: handlePlayerPause isPlayerPaused: ${this.playerController.isPaused()}`
-    );
-
+  handlePlayerPause = () => {
     if (this.playerController.isPaused()) {
       return;
     }
 
-    await this.playerController.pause();
+    this.playerController.pause();
   };
 
   clearSeekCompleteTimeout = () => {

package/reactHooks/player/TVSeekControlller/TapSeekController.ts

@@ -12,8 +12,6 @@ interface TapPressConfig {
 
 export class TapSeekController implements ISeekController {
   readonly title = "TapSeek";
-  private lastFastSeekExit = 0;
-
   constructor(
     private seekControllerDelegate: ISeekControllerDelegate,
     private seekIncrementalStrategy: SeekIncrementalBaseStrategy,
@@ -25,18 +23,13 @@ export class TapSeekController implements ISeekController {
 
     const skipTime = this.seekIncrementalStrategy.getSkipTime();
     const seekMultiplier = this.seekIncrementalStrategy.getSkipMultiplier();
-    const cooldown = Date.now() - this.lastFastSeekExit > 1000;
 
     if (seekMultiplier > this.config.CLICKS_BEFORE_PAUSE) {
       log_debug(
         `${this.title}: handle delayed seek type:${seekType} - skipTime: ${skipTime}, seekMultiplier: ${seekMultiplier}.`
       );
 
-      if (cooldown) {
-        this.seekControllerDelegate.handleDelayedSeek(skipTime);
-      } else {
-        this.seekControllerDelegate.handleSeek(skipTime);
-      }
+      this.seekControllerDelegate.handleDelayedSeek(skipTime);
     } else {
       log_debug(
         `${this.title}: handle seek type:${seekType} - skipTime: ${skipTime}.`
@@ -53,8 +46,8 @@ export class TapSeekController implements ISeekController {
   };
 
   reset = () => {
-    log_debug(`${this.title}: Reset states`);
-    this.lastFastSeekExit = Date.now();
+    log_debug("{this.title}: Reset states");
+
     this.seekIncrementalStrategy.reset();
   };
 }

package/reactUtils/__tests__/reactUtils.test.js

@@ -7,7 +7,7 @@ import {
   componentDidMount,
 } from "./fixtures";
 
-import { attachLifeCycleMethods, createReactRef, mergeChildrenProps } from "..";
+import { attachLifeCycleMethods, mergeChildrenProps } from "..";
 
 describe("attachLifeCycleMethods", () => {
   let addLifeCycleMethodsSpy;
@@ -41,24 +41,6 @@ describe("attachLifeCycleMethods", () => {
   });
 });
 
-describe("createReactRef", () => {
-  it("calls the React.createRef function if it exists", () => {
-    jest.clearAllMocks();
-
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-  });
-
-  it("calls the polyfill if React.createRef doesn't exist", () => {
-    jest.clearAllMocks();
-    const originalCreateRef = React.createRef;
-    React.createRef = undefined;
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-    React.createRef = originalCreateRef;
-  });
-});
-
 describe("mergeChildrenProps", () => {
   it("returns the cloned children with the merged props", () => {
     const Egg = () => React.createElement("Egg");

package/reactUtils/createContext/__tests__/{index.test.js → index.test.ts}

@@ -1,3 +1,5 @@
+import { createContext } from "../";
+
 jest.mock("react", () => ({
   ...jest.requireActual("react"),
   createContext: jest.fn(() => ({
@@ -6,8 +8,6 @@ jest.mock("react", () => ({
   })),
 }));
 
-const { createContext } = require("../index");
-
 const mockedProvider = jest.fn();
 const mockedWithConsumer = jest.fn();
 const mockedWithProvider = jest.fn();

package/reactUtils/createContext/helpers.ts

@@ -33,7 +33,12 @@ export const getSetterName: (property: string) => string = R.compose(
 export function createContextSetters(
   properties: string[],
   component: any,
-  options: any = {}
+  options: {
+    stateValidator?: (
+      obj: { property: string; value: unknown },
+      oldValue: unknown
+    ) => boolean;
+  } = {}
 ) {
   const { stateValidator = R.T } = options;
 

package/reactUtils/createContext/index.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import createReactContext from "create-react-context";
 import * as R from "ramda";
 
 import { getSetterName, NOOP } from "./helpers";
@@ -7,33 +6,20 @@ import { createProvider } from "./provider";
 import { createWithConsumerDecorator } from "./withConsumer";
 import { createWithProviderDecorator } from "./withProvider";
 
-const reactContextCreator = React.createContext;
-
-// Depending on the version of React used, the `createContext` function may not be available
-// if this is the case, we fall back to a polyfill library
-const contextCreatorFn =
-  reactContextCreator && typeof reactContextCreator === "function"
-    ? reactContextCreator
-    : createReactContext;
-
-/**
- * @typedef Context
- * @property {Object} Context.Provider react class component to use as context provider
- * @property {Function} Context.Consumer react functional component to use as context consumer
- * @property {Function} Context.withProvider HOC to apply the context provider
- * @property {function} Context.withConsumer HOC to apply the context consumer. passes the context as props
- * @property {React.Context} Context.ReactContext React context object
- * to the wrapped component
- */
-
 /**
  * Creates a React Context and returns consumer & providers components & decorators to interact
  * with this context.
- * @param {Object} initialContext map of context properties and their initial values
- * @param {Function} stateValidator optional predicate to tell whether the state update is valid or not
- * @returns {Context} Object containing the context components & decorators {@link Context}
+ * @param initialContext map of context properties and their initial values
+ * @param stateValidator optional predicate to tell whether the state update is valid or not
+ * @returns Object containing the context components & decorators
  */
-export function createContext(initialContext, stateValidator = R.T) {
+export function createContext(
+  initialContext: Record<string, any>,
+  stateValidator: (
+    obj: { property: string; value: unknown },
+    oldValue: unknown
+  ) => boolean = R.T
+) {
   // first we extract the properties name, and create setters name for those
   const contextPropertiesNames = R.keys(initialContext);
   const contextSettersNames = R.map(getSetterName, contextPropertiesNames);
@@ -41,7 +27,7 @@ export function createContext(initialContext, stateValidator = R.T) {
   // we create a React Context with the properties & their setters, assigning a noop function
   // temporarily (will be overriden by proper setters in the provider component)
   const ReactContext = R.compose(
-    contextCreatorFn,
+    React.createContext,
     R.merge(initialContext),
     R.zipObj(contextSettersNames),
     R.map(R.always(NOOP))