@applicaster/zapp-react-native-utils 12.0.5-rc.5 → 13.0.0-alpha.1035032144

package/appUtils/playerManager/player.ts

@@ -5,6 +5,7 @@ import { createLogger, utilsLogger } from "../../logger";
 import { getBoolFromConfigValue } from "../../configurationUtils";
 import { PlayerRole, SharedPlayerCallBacksKeys } from "./conts";
 import { OverlaysObserver } from "./OverlayObserver/OverlaysObserver";
+import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
 
 const logger = createLogger({
   category: "PlayerController",
@@ -49,6 +50,8 @@ export class Player {
     [key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
   } = {};
 
+  public seekController?: TVSeekController | null;
+
   get entry(): ZappEntry | null {
     return this._entry;
   }
@@ -59,6 +62,8 @@ export class Player {
   }
 
   constructor(props) {
+    this.seekController = null;
+
     this.playerState = {
       // We want isLive null by default to be able not to show controls if we do not know type
       isLive: null,
@@ -91,6 +96,8 @@ export class Player {
     this.onVideoProgress = this.onVideoProgress.bind(this);
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
+    this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
+
     this.entryObservable = null;
   }
 
@@ -321,7 +328,7 @@ export class Player {
    * You should use dispatchPlayerEvent at PlayerContainer or call playerManager.invokeHandler directly
    * This allows you to use one method for everything.
    */
-  onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
+  onPlayerSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
     const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
@@ -336,10 +343,11 @@ export class Player {
     });
   };
 
-  onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
+  onPlayerSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
     const { isLive, seekableDuration, currentTime, duration } = event;
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
+
     this.playerState.seekPosition = null;
 
     if (!isLive) {
@@ -620,14 +628,18 @@ export class Player {
   selectTrack = (_track) => {};
 
   protected notifyPlayHeadPositionUpdate = () => {
+    const currentTime = this.getPosition();
+
     const event = {
-      currentTime: this.getPosition(),
+      currentTime,
       duration: this.getDuration(),
       item: this.getEntry(),
       seekableDuration: this.playerState.seekableDuration,
       isLive: this.isLive(),
     };
 
+    this.seekController?.onVideoProgress(currentTime);
+
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnVideoProgress,
       event,
@@ -653,8 +665,8 @@ export class Player {
   };
 
   public getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => ({
-    onPlayerSeekStart: this.onSeekStart,
-    onPlayerSeekComplete: this.onSeekComplete,
+    onPlayerSeekStart: this.onPlayerSeekStart,
+    onPlayerSeekComplete: this.onPlayerSeekComplete,
     onVideoEnd: this.onVideoEnd,
     onError: this.onError,
     onVideoError: this.onVideoError,

package/appUtils/playerManager/playerNative.ts

@@ -58,7 +58,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): ReactComponent<PlayerProps> =>
+  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;
@@ -222,9 +222,10 @@ export class PlayerNative extends Player {
 
   onVideoLoad = (event) => {
     if (this.startPosition) {
-      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
       this.seekTo(this.startPosition);
       this.startPosition = null;
+
+      super.onVideoLoad({ ...event, ignoreContinueWatching: true });
     } else {
       super.onVideoLoad(event);
     }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -39,7 +39,7 @@ export const usePlayerControllerSetup = ({
       ? { supports_native_controls: true, ...config }
       : config;
 
-    const newPlayerController = new ControllerType({
+    const combinedProps = {
       player: ref,
       listener: props as any,
       config: newConfig,
@@ -47,9 +47,9 @@ export const usePlayerControllerSetup = ({
       entry,
       playerPluginId: pluginId,
       playerRole: PlayerRole.Primary,
-    });
+    };
 
-    setPlayerController(newPlayerController);
+    setPlayerController(new ControllerType(combinedProps));
   }, [playerId, entry?.id]);
 
   React.useEffect(() => {

package/arrayUtils/__tests__/__snapshots__/arrayUtils.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`shiftArray shifts the n first items from the head to the tail of the array with a positive offset 1`] = `
-Array [
+[
   "bar",
   "baz",
   42,
@@ -10,7 +10,7 @@ Array [
 `;
 
 exports[`shiftArray shifts the n first items from the head to the tail of the array with a positive offset 2`] = `
-Array [
+[
   "baz",
   42,
   "foo",
@@ -19,7 +19,7 @@ Array [
 `;
 
 exports[`shiftArray shifts the n last items from the tail to the head of the array with a negative offset 1`] = `
-Array [
+[
   42,
   "foo",
   "bar",
@@ -28,7 +28,7 @@ Array [
 `;
 
 exports[`shiftArray shifts the n last items from the tail to the head of the array with a negative offset 2`] = `
-Array [
+[
   "baz",
   42,
   "foo",

package/domUtils/{cookieManager.js → cookieManager.ts}

@@ -2,7 +2,6 @@ import { domUtilsLogger } from "./logger";
 
 /**
  * Gets an object of cookies and sets them on the DOM.
- * @param {Object} cookies selected data key for label.
  */
 export function setCookies(cookies): void {
   const cookieKeys = Object.keys(cookies);
@@ -25,7 +24,7 @@ export function setCookies(cookies): void {
 /**
  * Gets cookies set on DOM
  */
-export function getCookies(): Object {
+export function getCookies(): typeof document.cookie {
   try {
     if (document) {
       return document.cookie;

package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`functionUtils subscriber can be invoked without args 1`] = `
-Object {
-  "handlers": Object {},
+{
+  "handlers": {},
   "invokeHandler": [Function],
   "on": [Function],
   "removeHandler": [Function],
@@ -10,9 +10,9 @@ Object {
 `;
 
 exports[`functionUtils subscriber returns the original object with additional methods 1`] = `
-Object {
+{
   "foo": "bar",
-  "handlers": Object {},
+  "handlers": {},
   "invokeHandler": [Function],
   "method": [Function],
   "on": [Function],

package/functionUtils/index.ts

@@ -111,12 +111,12 @@ type SubscriberFn<T> = (
 
 export type EventHandlerFn<T> = (event: string, ...args: unknown[]) => T;
 
-type SubscriberObj = Partial<{
-  on?: SubscriberFn<SubscriberObj>;
-  invokeHandler: EventHandlerFn<SubscriberObj>;
-  removeHandler: EventHandlerFn<SubscriberObj>;
-  handlers: Record<string, SubscriberFn<SubscriberObj>[] | []>;
-}>;
+export type SubscriberObj<T extends {} = {}> = {
+  on: SubscriberFn<SubscriberObj<T>>;
+  invokeHandler: EventHandlerFn<SubscriberObj<T>>;
+  removeHandler: EventHandlerFn<SubscriberObj<T>>;
+  handlers: Record<string, SubscriberFn<SubscriberObj<T>>[] | []>;
+} & T;
 
 export const clearObject = (object: { [key: string]: unknown }) =>
   Object.keys(object).forEach((key) => delete object[key]);
@@ -126,7 +126,11 @@ export const clearObject = (object: { [key: string]: unknown }) =>
  * @param {Object} obj to add the subscription feature on
  * @returns {Object} subscriber object
  */
-export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
+export function subscriber<T extends Partial<SubscriberObj> = {}>(
+  _obj: T = {} as T
+): SubscriberObj {
+  const obj: T = _obj;
+
   if (!obj.handlers) {
     obj.handlers = {};
   }
@@ -172,7 +176,7 @@ export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
       | SubscriberFn<SubscriberObj>[]
       | [];
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
   /**
@@ -188,16 +192,16 @@ export function subscriber(obj: SubscriberObj = {}): SubscriberObj {
 
     R.compose(R.forEach(callHandlerWithDispose), R.propOr([], event))(handlers);
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
   obj.removeHandler = function (event, handler) {
     handlers[event] = R.reject(R.equals(handler), handlers[event]);
 
-    return obj;
+    return obj as SubscriberObj;
   };
 
-  return obj;
+  return obj as SubscriberObj;
 }
 
 /**

package/logger/const.ts

@@ -1,6 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
-import * as R from "ramda";
-
 enum XRayLogLevel {
   verbose = 0,
   debug = 1,
@@ -11,51 +8,9 @@ enum XRayLogLevel {
   off = 100,
 }
 
-enum ToastLogLevel {
-  off = "off",
-  verbose = "verbose",
-  debug = "debug",
-  info = "info",
-  warning = "warning",
-  error = "error",
-}
-
-const toastLevelToLogLevel = (toastLogLevel: ToastLogLevel): XRayLogLevel => {
-  if (R.isNil(toastLogLevel)) {
-    return XRayLogLevel.off;
-  }
-
-  switch (toastLogLevel) {
-    case ToastLogLevel.verbose:
-      return XRayLogLevel.verbose;
-    case ToastLogLevel.debug:
-      return XRayLogLevel.debug;
-    case ToastLogLevel.info:
-      return XRayLogLevel.info;
-    case ToastLogLevel.error:
-      return XRayLogLevel.error;
-    default:
-      return XRayLogLevel.off;
-  }
-};
-
-const PLUGIN_IDENTIFIER = "xray_logging_plugin";
-
-const wrapInObject = (obj, name) => {};
-
-const applyConditions = (wrappedObj) => {};
-
-const sanitizeEventPayload = () => {};
+const wrapInObject = (_ctx: unknown, _key: string) => {};
 
-const __isRunningRepoTests = () => {};
-
-const isWeb = () => {};
-
-const isDOMApp = () => {};
-
-const isBrowser = () => {};
-
-const eventAllowed = () => {};
+const applyConditions = (_fn: unknown) => {};
 
 /**
  * This is the mocked version of XRayLogger
@@ -90,34 +45,21 @@ export default class XRayLogger {
     );
   };
 
-  log = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  log = (_event) => {};
 
-  debug = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  debug = (_event) => {};
 
-  info = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  info = (_event) => {};
 
-  warning = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  warning = (_event) => {};
 
-  warn = (event: string | XRayEventData) => {
+  warn = (_event) => {
     this.warning(event);
   };
 
-  error = (event: Error | XRayEventData) => {
-    const logEvent: XRayEventData =
-      event instanceof Error
-        ? { exception: event as Error, message: event.message }
-        : (event as XRayEventData);
-  };
+  error = (_event) => {};
 
-  sendEvent = (event, eventData) => {};
+  sendEvent = (_event, _eventData) => {};
 
   // To be used by QuickBrick Hook events
   sendAudienceEvent = (event, eventData = null) => {

package/manifestUtils/__tests__/createConfig.test.js

@@ -1,11 +1,9 @@
-import { createConfig } from "../createConfig";
-
-const styles = {
+const mockStyles = {
   fields: [{ key: "field_1", initial_value: 1 }],
   label: "styles",
 };
 
-const stylesWithGroup = {
+const mockStylesWithGroup = {
   fields: [
     {
       group: true,
@@ -15,26 +13,28 @@ const stylesWithGroup = {
   ],
 };
 
-const generators = {
-  styles: jest.fn(() => ({ styles })),
+const mockGenerators = {
+  styles: jest.fn(() => ({ styles: mockStyles })),
   stylesGroup: jest.fn(() => ({
-    styles: stylesWithGroup,
+    styles: mockStylesWithGroup,
   })),
-  customConfiguration: jest.fn(() => ({ custom_configuration: [styles] })),
+  customConfiguration: jest.fn(() => ({ custom_configuration: [mockStyles] })),
   customConfigurationGroup: jest.fn(() => ({
-    custom_configuration: [stylesWithGroup],
+    custom_configuration: [mockStylesWithGroup],
   })),
 };
 
-jest.mock("../defaultManifestConfigurations", () => ({
+jest.doMock("../defaultManifestConfigurations", () => ({
   defaultConfigurations: {
-    styles: generators.styles,
-    stylesGroup: generators.stylesGroup,
-    customConfiguration: generators.customConfiguration,
-    customConfigurationGroup: generators.customConfigurationGroup,
+    styles: mockGenerators.styles,
+    stylesGroup: mockGenerators.stylesGroup,
+    customConfiguration: mockGenerators.customConfiguration,
+    customConfigurationGroup: mockGenerators.customConfigurationGroup,
   },
 }));
 
+const { createConfig } = require("../createConfig");
+
 describe("createConfig", () => {
   it("should return a function", () => {
     const currentResult = createConfig(jest.fn());
@@ -78,7 +78,7 @@ describe("createConfig", () => {
       extend: "styles",
     })(props);
 
-    expect(generators.styles).toBeCalledWith(props);
+    expect(mockGenerators.styles).toBeCalledWith(props);
   });
 
   it("should return base configuration if manifest is not provided", () => {
@@ -88,7 +88,7 @@ describe("createConfig", () => {
       extend: "styles",
     })({});
 
-    expect(currentResult).toEqual({ styles });
+    expect(currentResult).toEqual({ styles: mockStyles });
   });
 
   describe("Data merging", () => {

package/modalState/index.ts

@@ -31,11 +31,7 @@ export const useModalStore = create<ModalStore>((set) => ({
     set((state) => ({
       modalState: { ...state.modalState, ...newState },
     })),
-  openModal: ({
-    item,
-    options = {},
-    props = { screenData: {} },
-  }: OpenModalArg) =>
+  openModal: ({ item, options = {}, props }: OpenModalArg) =>
     set({
       modalState: {
         visible: true,

package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getNavigationProps returns the props otherwise 1`] = `
-Object {
-  "assets": Object {
+{
+  "assets": {
     "appLogo": "appLogo.png",
   },
   "home": false,
-  "nav_items": Array [
-    Object {
+  "nav_items": [
+    {
       "type": "label",
     },
   ],
-  "rules": Object {},
+  "rules": {},
   "selected": "A1234",
-  "styles": Object {
+  "styles": {
     "style": "foo",
   },
   "title": "testTitle",

package/navigationUtils/__tests__/itemTypes.test.js

@@ -61,8 +61,8 @@ describe("getTypeMatcher", () => {
 
 describe("isItemOfType", () => {
   it("is a curried function", () => {
-    expect(itemIsOfType(river, SCREEN_TYPES.RIVER)).toBeBoolean();
-    expect(itemIsOfType(river)).toBeFunction();
+    expect(itemIsOfType(river, SCREEN_TYPES.RIVER)).toBeTruthy();
+    expect(itemIsOfType(river)).toBeInstanceOf(Function);
   });
 
   it("returns true if the item is of the given type", () => {

package/navigationUtils/__tests__/navigationUtils.test.js

@@ -243,7 +243,7 @@ describe("getTargetRoute", () => {
     it("returns a valid path when initial pathname is /", () => {
       const targetRoute = getTargetRoute(river, "/", { layoutVersion });
       expect(targetRoute).toEqual(`/river/${river.id}`);
-      expect(targetRoute).not.toInclude("//");
+      expect(targetRoute).not.toContainEntry("//");
     });
   });
 
@@ -273,7 +273,7 @@ describe("getTargetRoute", () => {
     it("returns a valid path when initial pathname is /", () => {
       const targetRoute = getTargetRoute(river, "/", { layoutVersion });
       expect(targetRoute).toEqual(`/river/${river.id}`);
-      expect(targetRoute).not.toInclude("//");
+      expect(targetRoute).not.toContainEntry("//");
     });
   });
 });

package/navigationUtils/index.ts

@@ -324,7 +324,13 @@ export function getPathAttributes({
  * @param {object} rivers
  * @returns {object}
  */
-export function getRiverFromRoute({ route, rivers }) {
+export function getRiverFromRoute({
+  route,
+  rivers,
+}: {
+  route: string;
+  rivers: Record<string, ZappRiver>;
+}) {
   if (!route) {
     return null;
   }
@@ -437,7 +443,7 @@ export const runZappHooksForEntry = async (
 
   let success;
   let payload;
-  const rivers = appStore.get("rivers");
+  const rivers: Record<string, ZappRiver> = appStore.get("rivers");
   const plugins = appStore.get("plugins");
   const appData = appStore.get("appData");
 
@@ -492,13 +498,16 @@ export const runZappHooksForEntry = async (
       payload = _payload;
     };
 
-  HooksManager(hooksOptions)
+  const hooksManager = HooksManager(hooksOptions);
+
+  hooksManager.subscriber
     .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
     .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
     .on(HOOKS_EVENTS.ERROR, onFinished(false))
     .on(HOOKS_EVENTS.CANCEL, onFinished(false))
-    .on(HOOKS_EVENTS.COMPLETE, onFinished(true))
-    .handleHooks(entry);
+    .on(HOOKS_EVENTS.COMPLETE, onFinished(true));
+
+  hooksManager.handleHooks(entry);
 
   // eslint-disable-next-line no-unmodified-loop-condition
   while (success === undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.5-rc.5",
+  "version": "13.0.0-alpha.1035032144",
   "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": "12.0.5-rc.5",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1035032144",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",
@@ -44,6 +44,7 @@
     "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
+    "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
   },

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -14,7 +14,7 @@ jest.mock(
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
 const {
   useTrackCurrentAutoScrollingElement,

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

@@ -19,7 +19,7 @@ jest.mock(
   })
 );
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 

package/reactHooks/cell-click/__tests__/index.test.js

@@ -5,14 +5,14 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 
 import { waitFor } from "@testing-library/react-native";
 
-const navigator = {
+const mockNavigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
   data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useNavigation: () => navigator,
+  useNavigation: () => mockNavigator,
   useRoute: () => ({ pathname: "pathnameMock" }),
   useProfilerLogging: () => {
     return jest.fn();
@@ -25,7 +25,15 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
   }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useTargetScreenData: jest.fn(() => ({})),
+  useCurrentScreenData: jest.fn(() => ({})),
+}));
+
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-ui-components/Contexts"
+  ),
   ZappPipesEntryContext: {
     useZappPipesContext: jest.fn(() => [undefined, jest.fn()]),
   },

package/reactHooks/cell-click/index.ts

@@ -16,6 +16,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
+import { useCurrentScreenData } from "../screen";
 
 /**
  * If onCellTap is defined execute the function and
@@ -44,6 +45,7 @@ export const useCellClick = ({
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const screenData = useCurrentScreenData();
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -78,7 +80,10 @@ export const useCellClick = ({
       logOnPress(selectedItem, pathname, component, onCellTap);
 
       if (selectedItem) {
-        await actionExecutor?.handleEntryActions(selectedItem);
+        await actionExecutor?.handleEntryActions(selectedItem, {
+          component,
+          screenData,
+        });
       }
 
       if (selectedItem?.type?.value === "action") {
@@ -111,6 +116,7 @@ export const useCellClick = ({
       pathname,
       push,
       sendAnalyticsOnPress,
+      screenData,
     ]
   );