@applicaster/zapp-react-native-utils 13.0.0-alpha.1632352572 → 13.0.0-alpha.1909212433

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.1632352572",
+  "version": "13.0.0-alpha.1909212433",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1632352572",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1909212433",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/player/__tests__/useAutoSeek.test.tsx

@@ -0,0 +1,116 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+
+import { ON_HOLD_INTERVAL, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
+
+import { useAutoSeek } from "../useAutoSeek";
+
+jest.useFakeTimers();
+
+const rewind = jest.fn();
+const forward = jest.fn();
+
+jest
+  .spyOn(playerManager, "getInstanceController")
+  // @ts-ignore
+  .mockImplementation(() => ({ rewind, forward }));
+
+describe("useAutoSeek", () => {
+  beforeEach(() => {
+    rewind.mockReset();
+    forward.mockReset();
+  });
+
+  describe("autoSeekStart", () => {
+    it("should call forward method on playerInstance", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.FORWARD);
+      });
+
+      expect(forward).toBeCalled();
+      result.current.autoSeekStop();
+    });
+
+    it("should call rewind method on playerManager", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.REWIND);
+      });
+
+      expect(rewind).toBeCalled();
+      result.current.autoSeekStop();
+    });
+
+    it("should call rewind with default skip time", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.REWIND);
+      });
+
+      expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
+      result.current.autoSeekStop();
+    });
+
+    it("should call forward with default skip time", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.FORWARD);
+      });
+
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE);
+      result.current.autoSeekStop();
+    });
+
+    it("should call rewind in intervals set in configuration", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.REWIND);
+      });
+
+      expect(rewind).toBeCalled();
+      jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
+      expect(rewind).toBeCalledTimes(4);
+      result.current.autoSeekStop();
+    });
+
+    it("should call forward in intervals set in configuration", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.FORWARD);
+      });
+
+      expect(forward).toBeCalled();
+      jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
+      expect(forward).toBeCalledTimes(4);
+      result.current.autoSeekStop();
+    });
+  });
+
+  describe("autoSeekStop", () => {
+    it("should stop calling playerManager method after autoSeekStop is called", () => {
+      const { result } = renderHook(() => useAutoSeek());
+
+      act(() => {
+        result.current.autoSeekStart(SEEK_TYPE.FORWARD);
+      });
+
+      expect(forward).toBeCalled();
+      jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
+      expect(forward).toBeCalledTimes(4);
+
+      act(() => {
+        result.current.autoSeekStop();
+      });
+
+      jest.advanceTimersByTime(ON_HOLD_INTERVAL * 3);
+      expect(forward).toBeCalledTimes(4);
+    });
+  });
+});

package/reactHooks/player/__tests__/useTapSeek.test.ts

@@ -0,0 +1,94 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import { useTapSeek } from "../useTapSeek";
+
+import { ON_PRESS_RESET_DURATION, SEEK_TYPE, SKIP_TIME_BASE } from "../const";
+
+const rewind = jest.fn();
+const forward = jest.fn();
+
+jest
+  .spyOn(playerManager, "getInstanceController")
+  // @ts-ignore
+  .mockImplementation(() => ({ rewind, forward }));
+
+describe("useTapSeek", () => {
+  beforeEach(() => {
+    rewind.mockReset();
+    forward.mockReset();
+  });
+
+  describe("forward", () => {
+    it("should call forward method on playerManager", () => {
+      const { result } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalled();
+    });
+
+    it("should call forward with default skip time", () => {
+      const { result } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE);
+    });
+
+    it("should multiply skip time for every call", async () => {
+      const { result } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE);
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE * 2);
+    });
+
+    it("should reset multiplier if waiting more then resetDuration between press actions", () => {
+      const { result, waitFor } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE);
+      waitFor(jest.fn(), { timeout: ON_PRESS_RESET_DURATION });
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE);
+    });
+  });
+
+  describe("rewind", () => {
+    it("should call rewind method on playerManager", () => {
+      const { result } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.REWIND);
+      expect(rewind).toBeCalled();
+    });
+
+    it("should call rewind with default skip time", () => {
+      const { result } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.REWIND);
+      expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
+    });
+
+    it("should multiply skip time for every call", async () => {
+      const { result } = renderHook(() => useTapSeek());
+
+      result.current(SEEK_TYPE.REWIND);
+      expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
+      result.current(SEEK_TYPE.REWIND);
+      expect(rewind).toBeCalledWith(SKIP_TIME_BASE * 2);
+    });
+  });
+
+  describe("mixed usage", () => {
+    it("should reset timer if different type of event is emitted", () => {
+      const { result } = renderHook(() => useTapSeek());
+      result.current(SEEK_TYPE.REWIND);
+      expect(rewind).toBeCalledWith(SKIP_TIME_BASE);
+
+      result.current(SEEK_TYPE.REWIND);
+      expect(rewind).toBeCalledWith(SKIP_TIME_BASE * 2);
+
+      result.current(SEEK_TYPE.FORWARD);
+      expect(forward).toBeCalledWith(SKIP_TIME_BASE);
+    });
+  });
+});

package/reactHooks/player/const.ts

@@ -4,7 +4,7 @@ export const ON_PRESS_RESET_DURATION = 2000;
 
 export const ON_HOLD_INTERVAL = 500;
 
-export const MAX_SEEK_TIME = 60;
+export const MAX_SEEK_TIME = 600;
 
 export enum SEEK_TYPE {
   FORWARD = "forward",

package/reactHooks/player/index.ts

@@ -1 +1,7 @@
 export { useLanguageData } from "./useLanguageData";
+
+export { useAutoSeek } from "./useAutoSeek";
+
+export { useTapSeek } from "./useTapSeek";
+
+export { useSeek, withUseSeek } from "./useSeek";

package/reactHooks/player/useAutoSeek.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from "react";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
+import {
+  MAX_SEEK_TIME,
+  ON_HOLD_INTERVAL,
+  SEEK_TYPE,
+  SKIP_TIME_BASE,
+} from "./const";
+import { noop } from "../../functionUtils";
+
+export const useAutoSeek = (resetHUDTimer = noop) => {
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const [direction, setDirection] = useState<Nullable<SEEK_TYPE>>(null);
+  const [multiplier, setMultiplier] = useState(1);
+  const intervalTimer = React.useRef(null);
+  const prevRunning = usePrevious(isRunning);
+
+  const clearIntervalTimer = () => {
+    try {
+      clearInterval(intervalTimer.current);
+    } catch (err) {
+      intervalTimer.current = null;
+    }
+  };
+
+  const setIntervalTimer = (cb) => {
+    clearIntervalTimer();
+    intervalTimer.current = setInterval(cb, ON_HOLD_INTERVAL);
+  };
+
+  const resetState = () => {
+    setIsRunning(false);
+    setDirection(null);
+    setMultiplier(1);
+    clearIntervalTimer();
+  };
+
+  useEffect(() => {
+    const player = playerManager.getInstanceController();
+
+    if (!player) return;
+
+    if (direction) {
+      player[direction](Math.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier));
+      resetHUDTimer();
+    }
+  }, [multiplier, direction]);
+
+  useEffect(() => {
+    if (isRunning && isRunning !== prevRunning) {
+      setIntervalTimer(() => {
+        setMultiplier((prev) => {
+          return prev + 1;
+        });
+      });
+    } else if (!isRunning && isRunning !== prevRunning) {
+      resetState();
+    }
+
+    return () => {
+      clearIntervalTimer();
+    };
+  }, [isRunning, direction]);
+
+  const autoSeekStop = React.useCallback(() => {
+    resetState();
+  }, []);
+
+  const autoSeekStart = React.useCallback(
+    (eventType: SEEK_TYPE) => {
+      // Check if there is another session running
+      if (isRunning) {
+        autoSeekStop();
+      }
+
+      setDirection(eventType);
+      setIsRunning(true);
+    },
+    [isRunning]
+  );
+
+  return React.useMemo(
+    () => ({ autoSeekStart, autoSeekStop }),
+    [autoSeekStart, autoSeekStop]
+  );
+};

package/reactHooks/player/useSeek.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { SEEK_TYPE } from "./const";
+import { useTapSeek } from "./useTapSeek";
+import { useAutoSeek } from "./useAutoSeek";
+import { noop } from "../../functionUtils";
+
+export const useSeek = (resetHUDTimer = noop) => {
+  const handlePressEvent = useTapSeek();
+  const { autoSeekStart, autoSeekStop } = useAutoSeek(resetHUDTimer);
+
+  const onForwardPress = () => {
+    handlePressEvent(SEEK_TYPE.FORWARD);
+  };
+
+  const onRewindPress = () => {
+    handlePressEvent(SEEK_TYPE.REWIND);
+  };
+
+  const onForwardPressIn = () => {
+    autoSeekStart(SEEK_TYPE.FORWARD);
+  };
+
+  const onForwardPressOut = () => {
+    autoSeekStop();
+  };
+
+  const onRewindPressIn = () => {
+    autoSeekStart(SEEK_TYPE.REWIND);
+  };
+
+  const onRewindLongPress = () => {
+    autoSeekStart(SEEK_TYPE.REWIND);
+  };
+
+  const onForwardLongPress = () => {
+    autoSeekStart(SEEK_TYPE.FORWARD);
+  };
+
+  const onRewindPressOut = () => {
+    autoSeekStop();
+  };
+
+  return React.useMemo(
+    () => ({
+      onForwardPress,
+      onRewindPress,
+      onForwardPressIn,
+      onForwardPressOut,
+      onRewindPressIn,
+      onRewindPressOut,
+      onRewindLongPress,
+      onForwardLongPress,
+    }),
+    [handlePressEvent, autoSeekStart]
+  );
+};
+
+export const withUseSeek = (Component) =>
+  Object.assign(
+    (props) => {
+      const seekMethods = useSeek(props?.resetHUDTimer);
+
+      return <Component {...props} seekMethods={seekMethods} />;
+    },
+    { displayName: "WithUseSeek" }
+  );

package/reactHooks/player/useTapSeek.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useRef } from "react";
+import * as R from "ramda";
+import {
+  MAX_SEEK_TIME,
+  ON_PRESS_RESET_DURATION,
+  SEEK_TYPE,
+  SKIP_TIME_BASE,
+} from "./const";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+type SeekType = SEEK_TYPE | null;
+
+const getSkipTime = (multiplier) => {
+  const skipTime = R.min(MAX_SEEK_TIME, SKIP_TIME_BASE * multiplier);
+
+  return skipTime;
+};
+
+export const useTapSeek = () => {
+  const onPressMultiplier = useRef(1);
+  const lastPressTime = useRef(0);
+  const currentOnPressEventType = useRef<SeekType>(null);
+
+  const resetMultiplier = useCallback(() => {
+    onPressMultiplier.current = 1;
+  }, []);
+
+  const handlePressEvent = useCallback(
+    (eventType) => {
+      const player = playerManager.getInstanceController();
+      if (!player) return;
+
+      const now = Date.now();
+      const timeSinceLastPress = now - lastPressTime.current;
+      const isSameEventType = eventType === currentOnPressEventType.current;
+
+      const isWithinResetDuration =
+        timeSinceLastPress <= ON_PRESS_RESET_DURATION;
+
+      const shouldIncreaseMultiplier = isSameEventType && isWithinResetDuration;
+
+      if (shouldIncreaseMultiplier) {
+        onPressMultiplier.current += 1;
+      } else {
+        resetMultiplier();
+      }
+
+      const seekTime = getSkipTime(onPressMultiplier.current);
+      player[eventType](seekTime);
+
+      lastPressTime.current = now;
+      currentOnPressEventType.current = eventType;
+    },
+    [resetMultiplier]
+  );
+
+  return handlePressEvent;
+};

package/appUtils/keyInputHandler/KeyInputHandler.ts

@@ -1,68 +0,0 @@
-export type SeekKeyHandlerListener = {
-  onRewindPress: () => boolean;
-  onForwardPress: () => boolean;
-  onRewindPressOut: () => void;
-  onForwardPressOut: () => void;
-};
-
-export class KeyInputHandler {
-  private static instance: KeyInputHandler;
-
-  public static getInstance() {
-    if (!KeyInputHandler.instance) {
-      KeyInputHandler.instance = new KeyInputHandler();
-    }
-
-    return KeyInputHandler.instance;
-  }
-
-  constructor() {
-    this.listeners = [];
-  }
-
-  private listeners: SeekKeyHandlerListener[] = [];
-
-  addListener = (listener: SeekKeyHandlerListener) => {
-    this.listeners.splice(0, 0, listener);
-
-    return () => this.removeListener(listener);
-  };
-
-  removeListener = (listener: SeekKeyHandlerListener) => {
-    this.listeners = this.listeners.filter((l) => l !== listener);
-  };
-
-  onRewindPress = () => {
-    for (const element of this.listeners) {
-      if (element.onRewindPress()) {
-        break;
-      }
-    }
-  };
-
-  onForwardPress = () => {
-    for (const element of this.listeners) {
-      if (element.onForwardPress()) {
-        break;
-      }
-    }
-  };
-
-  // TODO: Event should be send to listeners who handled down event
-  onRewindPressOut = () => {
-    this.listeners.forEach((listener) => listener.onRewindPressOut());
-  };
-
-  onForwardPressOut = () => {
-    this.listeners.forEach((listener) => listener.onForwardPressOut());
-  };
-
-  getSeekMethods = () => {
-    return {
-      onForwardPress: this.onForwardPress,
-      onRewindPress: this.onRewindPress,
-      onForwardPressOut: this.onForwardPressOut,
-      onRewindPressOut: this.onRewindPressOut,
-    };
-  };
-}

package/reactHooks/player/TVSeekControlller/ISeekController.ts

@@ -1,7 +0,0 @@
-import { SEEK_TYPE } from "../const";
-
-export interface ISeekController {
-  onStartSeek(seekType: SEEK_TYPE): void;
-  onSeekEnd?(): void;
-  reset(): void;
-}