@applicaster/zapp-react-native-utils 13.0.0-alpha.4750811552 → 13.0.0-alpha.4863201005

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

@@ -0,0 +1,115 @@
+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({ legacyFakeTimers: true });
+
+const rewind = jest.fn();
+const forward = jest.fn();
+
+jest
+  .spyOn(playerManager, "getInstanceController")
+  .mockReturnValue({ 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/state/useRefWithInitialValue.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+/**
+ * returns a ref with an initial value that is lazily evaluated once
+ * */
+export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
+  const ref = React.useRef<T>(null);
+
+  if (ref.current === null) {
+    ref.current = initialValueGetter();
+  }
+
+  return ref;
+};

package/reactHooks/state/useStateFromSubscribe.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import type { Subject } from "rxjs";
+
+export const useStateFromSubscribe = <T, U>(
+  subject: Subject<T>,
+  onUpdate: (
+    observerValue: T,
+    next: React.Dispatch<React.SetStateAction<U>>
+  ) => void,
+  initialValue: U
+) => {
+  const [state, setState] = useState<U>(initialValue);
+
+  useEffect(() => {
+    const subscription = subject.subscribe((observer) =>
+      onUpdate(observer, setState)
+    );
+
+    return () => subscription.unsubscribe();
+  }, [subject]);
+
+  return state;
+};

package/reactHooks/usePluginConfiguration.ts

@@ -91,7 +91,7 @@ export function useLayoutConfiguration<
   S extends unknown,
   G extends unknown,
   R extends unknown,
-  L extends unknown
+  L extends unknown,
 >(layoutData, manifest, options: Options = {}) {
   const keys = options.keys || [
     "assets",

package/reactHooks/useSubscriberFor.ts

@@ -4,9 +4,10 @@ import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
 const subscriberObjects = Object.create({});
 
 interface UseSubscriberFor {
-  (eventName: string, handler?: (...args: unknown[]) => void): (
-    ...args: unknown[]
-  ) => ReturnType<typeof subscriber>;
+  (
+    eventName: string,
+    handler?: (...args: unknown[]) => void
+  ): (...args: unknown[]) => ReturnType<typeof subscriber>;
 }
 
 /**

package/reactUtils/__tests__/reactUtils.test.js

@@ -1,4 +1,3 @@
-jest.mock("create-react-ref/lib/createRef", () => jest.fn());
 import * as React from "react";
 import * as helpers from "../helpers";
 
@@ -8,13 +7,7 @@ import {
   componentDidMount,
 } from "./fixtures";
 
-const {
-  attachLifeCycleMethods,
-  createReactRef,
-  mergeChildrenProps,
-} = require("../index");
-
-const createRef = require("create-react-ref/lib/createRef");
+import { attachLifeCycleMethods, createReactRef, mergeChildrenProps } from "..";
 
 describe("attachLifeCycleMethods", () => {
   let addLifeCycleMethodsSpy;
@@ -50,30 +43,19 @@ describe("attachLifeCycleMethods", () => {
 
 describe("createReactRef", () => {
   it("calls the React.createRef function if it exists", () => {
-    jest.resetModules();
-
-    jest.doMock("react", () => ({
-      ...jest.requireActual("react"),
-      createRef: jest.fn(),
-    }));
-
-    const React = require("react");
+    jest.clearAllMocks();
 
-    createReactRef();
-    expect(React.createRef).toHaveBeenCalled();
-    expect(createRef).not.toHaveBeenCalled();
+    const ref = createReactRef();
+    expect(ref).toHaveProperty("current");
   });
 
   it("calls the polyfill if React.createRef doesn't exist", () => {
-    jest.resetModules();
-
-    jest.doMock("react", () => ({
-      ...jest.requireActual("react"),
-      createRef: undefined,
-    }));
-
-    createReactRef();
-    expect(createRef).toHaveBeenCalled();
+    jest.clearAllMocks();
+    const originalCreateRef = React.createRef;
+    React.createRef = undefined;
+    const ref = createReactRef();
+    expect(ref).toHaveProperty("current");
+    React.createRef = originalCreateRef;
   });
 });
 

package/reactUtils/createContext/__tests__/__snapshots__/helpers.test.js.snap

@@ -1,104 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 1`] = `
-Object {
+{
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
 exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 2`] = `
-Object {
+{
   "bar": "bar",
   "foo": "invalid foo",
 }
 `;
 
 exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 3`] = `
-Object {
+{
   "bar": "invalid bar",
   "foo": "invalid foo",
 }
 `;
 
 exports[`createContextSetters when no state validator is provided calls setState when the setters are called, no matter what the value is 4`] = `
-Array [
-  Array [
+[
+  [
     [Function],
   ],
-  Array [
+  [
     [Function],
   ],
 ]
 `;
 
 exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 1`] = `
-Object {
+{
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 2`] = `
-Object {
+{
   "bar": "bar",
   "foo": "new foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 3`] = `
-Object {
+{
   "bar": "new bar",
   "foo": "new foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided calls setState when the setters are called & the validator passes 4`] = `
-Array [
-  Array [
+[
+  [
     [Function],
   ],
-  Array [
+  [
     [Function],
   ],
 ]
 `;
 
 exports[`createContextSetters when state validator is provided skips the update if the new value is the same as the previous one 1`] = `
-Object {
+{
   "bar": "bar",
   "foo": "new foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 1`] = `
-Object {
+{
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 2`] = `
-Object {
+{
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 3`] = `
-Object {
+{
   "bar": "bar",
   "foo": "foo",
 }
 `;
 
 exports[`createContextSetters when state validator is provided skips the update if the state validator doesn't pass 4`] = `
-Array [
-  Array [
+[
+  [
     "trying to invoke setFoo with invalid foo - but it was rejected by the state validator
           skipping context update",
   ],
-  Array [
+  [
     "trying to invoke setBar with invalid bar - but it was rejected by the state validator
           skipping context update",
   ],

package/reactUtils/createContext/__tests__/__snapshots__/index.test.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createContext - when React has the new context API returns the components and the decorators 1`] = `
-Object {
+{
   "Consumer": [MockFunction],
   "Provider": [MockFunction],
-  "ReactContext": Object {
+  "ReactContext": {
     "Consumer": [MockFunction],
     "Provider": [MockFunction],
   },

package/reactUtils/createContext/__tests__/__snapshots__/provider.test.js.snap

@@ -3,7 +3,7 @@
 exports[`createProvider creates a context Provider component 1`] = `
 <mockConstructor
   value={
-    Object {
+    {
       "context": "initialValue",
       "otherContext": "otherValue",
       "setContext": [Function],
@@ -18,11 +18,11 @@ exports[`createProvider creates a context Provider component 1`] = `
 `;
 
 exports[`createProvider creates a context Provider component 2`] = `
-Object {
+{
   "children": <MockChild
     context="context"
   />,
-  "value": Object {
+  "value": {
     "context": "initialValue",
     "otherContext": "otherValue",
     "setContext": [Function],

package/reactUtils/createContext/__tests__/helpers.test.js

@@ -9,13 +9,13 @@ function stateValidator({ property, value }) {
   );
 }
 
-const logger = {
+const mockLogger = {
   warning: jest.fn(),
 };
 
 jest.mock("../../logger", () => ({
   reactUtilsLogger: {
-    addSubsystem: jest.fn(() => logger),
+    addSubsystem: jest.fn(() => mockLogger),
   },
 }));
 
@@ -62,7 +62,7 @@ describe("createContextSetters", () => {
     beforeEach(() => {
       instance.resetInitialState();
       setStateSpy.mockClear();
-      logger.warning.mockClear();
+      mockLogger.warning.mockClear();
     });
 
     it("adds all properties and setters to the component", () => {
@@ -83,7 +83,7 @@ describe("createContextSetters", () => {
 
       expect(setStateSpy).toHaveBeenCalledTimes(2);
       expect(setStateSpy.mock.calls).toMatchSnapshot();
-      expect(logger.warning).not.toHaveBeenCalled();
+      expect(mockLogger.warning).not.toHaveBeenCalled();
     });
 
     it("skips the update if the state validator doesn't pass", () => {
@@ -96,8 +96,8 @@ describe("createContextSetters", () => {
       expect(instance.state).toMatchSnapshot();
 
       expect(setStateSpy).not.toHaveBeenCalled();
-      expect(logger.warning).toHaveBeenCalledTimes(2);
-      expect(logger.warning.mock.calls).toMatchSnapshot();
+      expect(mockLogger.warning).toHaveBeenCalledTimes(2);
+      expect(mockLogger.warning.mock.calls).toMatchSnapshot();
     });
 
     it("skips the update if the new value is the same as the previous one", () => {
@@ -131,7 +131,7 @@ describe("createContextSetters", () => {
 
     afterEach(() => {
       setStateSpy.mockClear();
-      logger.warning.mockClear();
+      mockLogger.warning.mockClear();
     });
 
     it("adds all properties and setters to the component", () => {
@@ -152,7 +152,7 @@ describe("createContextSetters", () => {
 
       expect(setStateSpy).toHaveBeenCalledTimes(2);
       expect(setStateSpy.mock.calls).toMatchSnapshot();
-      expect(logger.warning).not.toHaveBeenCalled();
+      expect(mockLogger.warning).not.toHaveBeenCalled();
     });
   });
 });

package/reactUtils/index.ts

@@ -109,20 +109,6 @@ export const isTvOSPlatform = () => getPlatform() === "tvos";
 
 export const isAndroidTVPlatform = () => getPlatform() === "android_tv";
 
-declare global {
-  interface Window {
-    VIZIO?: {
-      Chromevox: {
-        play: (text: string) => void;
-      };
-      exitApplication: () => void;
-      setClosedCaptionHandler: (
-        callback: (isCCEnabled: boolean) => void
-      ) => void;
-    };
-  }
-}
-
 /**
  * Platforms found in userAgent string, please note that simulators
  * might not have the same agents that the devices have

package/screenState/index.ts

@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { produce } from "immer";
 import { path } from "ramda";
+import React from "react";
+import { useShallow } from "zustand/react/shallow";
 
 type ScreenState = {
   selectedEntry: {
@@ -18,6 +20,8 @@ type ScreenStore = {
   setSelectedEntry: (screenId: string, entryId: string) => void;
 };
 
+type SetSelectedEntry = (screenId: string, entryId: string) => void;
+
 const useScreenStore = create<ScreenStore>((set) => ({
   screens: screensInitialState,
   setSelectedEntry: (screenId, entryId) =>
@@ -35,17 +39,27 @@ const useScreenStore = create<ScreenStore>((set) => ({
 export function useScreenState(
   screenId: ScreenId
 ): null | { screen: ScreenState; setSelectedEntry: (entryId: string) => void } {
-  // const state = useState(screenState);
-  const screenState = useScreenStore(
-    path(["screens", screenId])
-  ) as ScreenState;
+  const screenState = useScreenStore<ScreenState>(
+    useShallow(path(["screens", screenId]))
+  );
 
-  const setSelectedEntry = useScreenStore((state) => state.setSelectedEntry);
+  const setSelectedEntry = useScreenStore<SetSelectedEntry>(
+    useShallow(path(["setSelectedEntry"]))
+  );
 
-  if (!screenId) return null;
+  const memoizedSetSelectedEntry = React.useCallback(
+    (entryId) => setSelectedEntry(screenId, entryId),
+    [screenId, setSelectedEntry]
+  );
 
-  return {
-    screen: screenState,
-    setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
-  };
+  return React.useMemo(
+    () =>
+      !screenId
+        ? null
+        : {
+            screen: screenState,
+            setSelectedEntry: memoizedSetSelectedEntry,
+          },
+    [screenId, screenState]
+  );
 }

package/theme/__mocks__/index.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const themeMock = {
   screen_padding_top: 20,
   screen_padding_bottom: 48,
@@ -17,3 +19,5 @@ export const themeMock = {
 };
 
 export const useTheme = jest.fn().mockReturnValue(themeMock);
+
+export const ThemeContext = React.createContext(themeMock);

package/theme/index.ts

@@ -14,7 +14,7 @@ export const ThemeContext = React.createContext({
 export function useTheme<
   T extends Record<string, any> =
     | BaseThemePropertiesTV
-    | BaseThemePropertiesMobile
+    | BaseThemePropertiesMobile,
 >(): T {
   const { themes, selectedThemeId } = React.useContext(ThemeContext);
 

package/time/Timer.ts

@@ -3,8 +3,11 @@ export class Timer {
   private remaining: number;
   private timeoutId: NodeJS.Timeout | null;
 
-  constructor(private callback: () => void, private duration: number) {
-    this.remaining = duration;
+  constructor(
+    private callback: () => void,
+    private duration: number
+  ) {
+    this.remaining = this.duration;
     this.timeoutId = null;
   }
 

package/types.ts

@@ -8,4 +8,5 @@ export type ManifestField<T> = {
 
 export enum ENDPOINT_TAGS {
   allow_missing_keys = "allow_missing_keys",
+  observe_storage = "observe_storage",
 }