@applicaster/zapp-react-native-utils 12.0.0-alpha.8242130253 → 12.0.0-alpha.8310462382

package/analyticsUtils/AnalyticsEvents/index.ts

@@ -7,6 +7,10 @@ import { sendHeaderClickEvent } from "./sendHeaderClickEvent";
 import { sendHardwareBackButtonClickEvent } from "./sendHardwareBackButtonClickEvent";
 import { sendDownloadsEvent } from "./sendDownloadsEvent";
 import { sendScreenEvent } from "./sendScreenEvent";
+import {
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
+} from "./searchEvents";
 
 export {
   sendScreenEvent,
@@ -18,4 +22,6 @@ export {
   sendHeaderClickEvent,
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 };

package/analyticsUtils/AnalyticsEvents/searchEvents.ts

@@ -0,0 +1,21 @@
+import { log_debug } from "../logger";
+import { postAnalyticEvent } from "../manager";
+import { ANALYTICS_CORE_EVENTS } from "../events";
+
+export const sendSearchCanceledEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_CANCELED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchCanceledEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};
+
+export const sendSearchExecutedEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_EXECUTED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchExecutedEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};

package/analyticsUtils/events.ts

@@ -23,10 +23,16 @@ export const TAPPING_EVENTS = {
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
 
+export const SEARCH_EVENTS = {
+  SEARCH_EXECUTED: "search_executed",
+  SEARCH_CANCELED: "search_canceled",
+};
+
 export const ANALYTICS_CORE_EVENTS = {
   ...LEGACY_EVENTS,
   ...SCREEN_VIEW_EVENTS,
   ...TAPPING_EVENTS,
+  ...SEARCH_EVENTS,
 };
 
 export const WEBVIEW_EVENTS = {

package/analyticsUtils/index.tsx

@@ -18,6 +18,8 @@ import {
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
   sendScreenEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 } from "./AnalyticsEvents";
 
 import { postAnalyticEvent } from "./manager";
@@ -66,6 +68,8 @@ type AnalyticsFunctions = {
     item: ZappEntry;
     state: OfflineItemState;
   }) => void;
+  sendSearchCanceledEvent: (props: AnalyticsDefaultProperties) => void;
+  sendSearchExecutedEvent: (props: AnalyticsDefaultProperties) => void;
 };
 
 type GetAnalyticsFunctions = (
@@ -102,6 +106,8 @@ export function getAnalyticsFunctions({
     sendHardwareBackButtonClickEvent,
     sendScreenEvent,
     sendDownloadsEvent,
+    sendSearchCanceledEvent,
+    sendSearchExecutedEvent,
   };
 }
 

package/appUtils/playerManager/DelayedSeekPlayerWrapper.tsx

@@ -0,0 +1,209 @@
+import { Player } from "./player";
+
+export class DelayedSeekPlayerWrapper extends Player {
+  private wrappedPlayer: Player;
+  private delayedSeek: boolean;
+  private wasPlaying: boolean;
+  private delayedSeekTimer: NodeJS.Timeout;
+
+  constructor(props, player: Player) {
+    super(props);
+    // this.playerState = this.wrappedPlayer.playerState;
+    this.wrappedPlayer = player;
+
+    this.wrappedPlayer.addListener({
+      id: "Master-Wrapper-Listener",
+      listener: this,
+    });
+  }
+
+  getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {
+    return this.wrappedPlayer.getListener();
+  };
+
+  togglePlayPause = () => {
+    this.wrappedPlayer.togglePlayPause();
+  };
+
+  // Implement all default methods by delegating them to wrapped player
+  public seekTo = (position: number) => {
+    this.wrappedPlayer.seekTo(position);
+  };
+
+  public isPlaying = () => {
+    return this.wrappedPlayer.isPlaying();
+  };
+
+  public isPaused = () => {
+    return this.wrappedPlayer.isPaused();
+  };
+
+  public play = () => {
+    this.wrappedPlayer.play();
+  };
+
+  public pause = () => {
+    this.wrappedPlayer.pause();
+  };
+
+  getState = () => {
+    const currentState = this.wrappedPlayer.getState();
+
+    if (!this.delayedSeek) {
+      return currentState;
+    }
+
+    return {
+      ...currentState,
+      contentPosition: this.playerState.seekPosition,
+      isPaused: false,
+      seekPosition: this.playerState.seekPosition,
+    };
+  };
+
+  forward = (deltaTime: number) => {
+    if (this.delayedSeek || this.delayedSeekTimer) {
+      if (this.playerState.seekPosition == null) {
+        console.log(
+          "Anton forward Postion is NULL",
+          this.playerState.seekPosition
+        );
+
+        return;
+      }
+
+      this.playerState.seekPosition += deltaTime;
+
+      this.onVideoProgress({
+        currentTime: this.playerState.seekPosition,
+        duration: this.getDuration(),
+        seekableDuration: this.playerState.seekableDuration,
+        isLive: this.playerState.isLive,
+      });
+
+      console.log(
+        "Anton forward SKIP new position",
+        this.playerState.seekPosition
+      );
+
+      return;
+    }
+
+    if (this.playerState.seekPosition == null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.playerState.seekPosition += deltaTime;
+
+    this.delayedSeekTimer && clearTimeout(this.delayedSeekTimer);
+
+    this.delayedSeekTimer = setTimeout(() => {
+      this.delayedSeekTimer = null;
+      this.wrappedPlayer.seekTo(this.playerState.seekPosition);
+
+      console.log(
+        "Anton forward TIMEOUT: SeekPosition",
+        this.playerState.seekPosition
+      );
+
+      this.logState("forward", { deltaTime });
+    }, 3000);
+  };
+
+  rewind = (deltaTime: number) => {
+    if (this.delayedSeek || this.delayedSeekTimer) {
+      if (this.playerState.seekPosition == null) {
+        console.log(
+          "Anton forward Postion is NULL",
+          this.playerState.seekPosition
+        );
+
+        return;
+      }
+
+      this.playerState.seekPosition -= deltaTime;
+
+      this.onVideoProgress({
+        currentTime: this.playerState.seekPosition,
+        duration: this.getDuration(),
+        seekableDuration: this.playerState.seekableDuration,
+        isLive: this.playerState.isLive,
+      });
+
+      console.log(
+        "Anton forward SKIP new position",
+        this.playerState.seekPosition
+      );
+
+      return;
+    }
+
+    this.delayedSeekTimer && clearTimeout(this.delayedSeekTimer);
+
+    if (this.playerState.seekPosition == null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.playerState.seekPosition -= deltaTime;
+
+    this.delayedSeekTimer = setTimeout(() => {
+      this.delayedSeekTimer = null;
+      this.wrappedPlayer.seekTo(this.playerState.seekPosition);
+
+      // this.currentPlayerComponent()?.["rewind"]?.(deltaTime);
+      this.logState("rewind", { deltaTime });
+    }, 3000);
+  };
+
+  public enterDelayedSeek() {
+    this.delayedSeekTimer && clearTimeout(this.delayedSeekTimer);
+    this.delayedSeekTimer = null;
+
+    if (this.delayedSeek) {
+      return;
+    }
+
+    this.delayedSeek = true;
+
+    console.log(
+      `Anton enterDelayedSeek wasPlaying: ${this.wasPlaying}`,
+      this.playerState.seekPosition
+    );
+
+    this.playerState.seekPosition = this.playerState.contentPosition;
+
+    if (!this.isPaused()) {
+      this.wasPlaying = true;
+      this.wrappedPlayer.pause();
+    }
+  }
+
+  public exitDelayedSeek() {
+    if (!this.delayedSeek) {
+      return;
+    }
+
+    if (this.delayedSeekTimer) {
+      return;
+    }
+
+    this.delayedSeek = false;
+
+    console.log(
+      `Anton exitDelayedSeek wasPlaying: ${this.wasPlaying}`,
+      this.playerState.seekPosition
+    );
+
+    if (this.playerState.seekPosition != null) {
+      this.wrappedPlayer.seekTo(this.playerState.seekPosition);
+    } else {
+      console.log("Anton exitDelayedSeek fucking NULL");
+    }
+
+    if (this.wasPlaying) {
+      // Disabled by ticket definition
+      // this.wrappedPlayer.play();
+      this.wasPlaying = true;
+    }
+  }
+}

package/appUtils/playerManager/player.ts

@@ -323,6 +323,7 @@ export class Player {
    */
   onSeekStart = (event: QuickBrickPlayer.OnSeekStartEvent) => {
     const { isLive, seekableDuration, currentTime, duration, seekTime } = event;
+    console.log("Anton onSeekStart");
 
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
 
@@ -338,8 +339,9 @@ export class Player {
 
   onSeekComplete = (event: QuickBrickPlayer.OnSeekCompleteEvent) => {
     const { isLive, seekableDuration, currentTime, duration } = event;
-
+    console.log("Anton onSeekComplete");
     this.setPlaybackState({ currentTime, duration, seekableDuration, isLive });
+
     this.playerState.seekPosition = null;
 
     if (!isLive) {
@@ -727,4 +729,9 @@ export class Player {
   }
 
   public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
+
+  public enterDelayedSeek() {}
+
+  public exitDelayedSeek() {}
 }

package/appUtils/playerManager/playerNative.ts

@@ -295,4 +295,9 @@ export class PlayerNative extends Player {
 
   supportsNativeControls = (): boolean =>
     toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+
+  supportNativeCast = (): boolean =>
+    toBooleanWithDefaultFalse(
+      this.playerPluginId === "quick-brick-player-brightcove"
+    );
 }

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -4,6 +4,8 @@ import { useEffect } from "react";
 import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
+import { isTV } from "../../reactUtils";
+import { DelayedSeekPlayerWrapper } from "./DelayedSeekPlayerWrapper";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -34,7 +36,7 @@ export const usePlayerControllerSetup = ({
   useValidatePlayerConfig(config);
 
   useEffect(() => {
-    const newPlayerController = new ControllerType({
+    const combinedProps = {
       player: ref,
       listener: props as any,
       config,
@@ -42,9 +44,21 @@ export const usePlayerControllerSetup = ({
       entry,
       playerPluginId: pluginId,
       playerRole: PlayerRole.Primary,
+    };
+
+    const newPlayerController = new ControllerType({
+      ...combinedProps,
+      playerRole: PlayerRole.Unspecified,
+      playerId: playerId + "." + "wrapped",
     });
 
-    setPlayerController(newPlayerController);
+    if (isTV()) {
+      setPlayerController(
+        new DelayedSeekPlayerWrapper(combinedProps, newPlayerController)
+      );
+    } else {
+      setPlayerController(newPlayerController);
+    }
   }, [playerId, entry?.id]);
 
   React.useEffect(() => {

package/cellUtils/__tests__/cellUtils.test.ts

@@ -24,7 +24,6 @@ import {
   EMPTY,
   FALLBACK,
   TRANSFORM,
-  defaultColor,
 } from "./fixtures";
 
 describe("getKeyForLabel", () => {
@@ -395,9 +394,7 @@ describe("getColorFromData", () => {
   it("should return value directly if valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: "background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "#123456",
     });
 
     expect(result).toBe("#123456");
@@ -406,9 +403,7 @@ describe("getColorFromData", () => {
   it("should return valid rgba color name", () => {
     const result = getColorFromData({
       data: entry,
-      key: "component_background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "rgba(255, 255, 255, 0)",
     });
 
     expect(result).toBe("rgba(255, 255, 255, 0)");
@@ -417,33 +412,27 @@ describe("getColorFromData", () => {
   it("should return path value if path value is set and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.colorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "background_color",
     });
 
     expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if key value and path value are invalid", () => {
+  it("should return path value if path value is set, nested and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKey,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "extensions.background_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if path does not exist", () => {
+  it("should return valueFromLayout if path does not exist", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "invalid_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("invalid_color");
   });
 });

package/cellUtils/index.ts

@@ -447,30 +447,24 @@ export const toResizeMode = (
 
 type GetColorFromData = {
   data: Record<string, any>;
-  key: string;
-  getValue: Function;
-  defaultColor: string;
+  valueFromLayout: string;
 };
 
 export const getColorFromData = ({
   data,
-  key,
-  getValue,
-  defaultColor,
+  valueFromLayout,
 }: GetColorFromData): string => {
-  const value = getValue(key);
-
   // Temporary hack to fix color validation when alpha is floating point number
   // https://github.com/dreamyguy/validate-color/issues/44
-  if (validateColor(value.replace(".00", ""))) {
-    return value;
+  if (validateColor(valueFromLayout.replace(".00", ""))) {
+    return valueFromLayout;
   }
 
-  const pathValue = R.path(value.split("."), data);
+  const pathValue = R.path(valueFromLayout.split("."), data);
 
   if (pathValue && validateColor(pathValue)) {
     return pathValue;
   }
 
-  return defaultColor;
+  return valueFromLayout;
 };

package/dateUtils/index.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import isoWeek from "dayjs/plugin/isoWeek";
+
+// Extend dayjs with plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isoWeek);
+
+export { dayjs };

package/headersUtils/index.ts

@@ -28,5 +28,6 @@ export const getAppDataHeaders = (screenId: string) => {
     "x-applicaster-signed-device-info-token": appData.signedDeviceInfoToken,
     "x-applicaster-device-make": appData.deviceMake,
     "x-applicaster-device-model": appData.deviceModel,
+    "x-applicaster-uuid": appData?.uuid,
   };
 };

package/inflatedUrlUtils/index.ts

@@ -1,4 +1,4 @@
-import { last, head, isNil, includes, all, pathOr } from "ramda";
+import { last, head, isNil, includes, pathOr } from "ramda";
 
 const stripBrackets = (path) => {
   const withoutPrepened = last(path.split("{{"));
@@ -13,15 +13,15 @@ const hasValue = (context) => (path) => {
   return !isNil(value);
 };
 
-export const isEnoughDataToInflateString = (context, string): boolean => {
+export const getMissingValues = (context, string): string[] => {
   if (!includes("{{", string)) {
-    return true;
+    return [];
   }
 
   const SEARCH_REGEX = new RegExp(/{{.*?}}/g);
   const paths = string.toString().match(SEARCH_REGEX);
 
-  return all(hasValue(context), paths);
+  return paths.filter((path) => !hasValue(context)(path));
 };
 
 export const isNonInflatedUrl = (url: string): boolean =>

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -245,6 +245,12 @@ const generalContent = () => ({
         ],
         initial_value: "reloading...",
       },
+      {
+        type: "text_input",
+        label: "Navigation Bar Screen Title",
+        key: "screen_title",
+        initial_value: null,
+      },
     ],
   },
   advertising: {

package/numberUtils/index.ts

@@ -75,3 +75,7 @@ export const isLikeNumber = (value: any): boolean => {
 
 export const isZero = (value: unknown): boolean =>
   Object.is(value, -0) || Object.is(value, 0);
+
+export const isMinusZero = (value: number) => {
+  return 1 / value === -Infinity;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.8242130253",
+  "version": "12.0.0-alpha.8310462382",
   "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.0-alpha.8242130253",
+    "@applicaster/applicaster-types": "12.0.0-alpha.8310462382",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/autoscrolling/__tests__/{useTrackedView.test.ts → useTrackedView.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { act, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const mockUpdateComponentsPositions = jest.fn();
 
@@ -19,11 +23,22 @@ jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChild }) => (
+  /* @ts-ignore */
+  <Provider store={store}>{children}</Provider>
+);
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
   it("should update position for selected component", async () => {
-    const { result } = renderHook(() => useTrackedView("123"));
+    const { result } = renderHook(() => useTrackedView("123"), {
+      wrapper: Wrapper,
+    });
 
     // Fast-forward until all timers have been executed
     jest.advanceTimersByTime(3000);

package/reactHooks/feed/__tests__/useInflatedUrl.test.ts

@@ -12,9 +12,21 @@ const {
 
 const { reactHooksLogger } = require("../../logger");
 
+let mockStore;
+
 describe("getInflatedDataSourceUrl", () => {
   beforeEach(() => {
     reactHooksLogger.warning.mockClear();
+
+    const {
+      appStore,
+    } = require("@applicaster/zapp-react-native-redux/AppStore");
+
+    mockStore = {
+      getState: jest.fn().mockReturnValue({ pipesEndpoints: {} }),
+    };
+
+    appStore.set(mockStore);
   });
 
   it("returns the url inflated with the right params", () => {
@@ -72,7 +84,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.id}} source: http://foo.com/show/seriesId={{seriesId}}",
       data: { source, contexts, mapping },
     });
   });
@@ -107,7 +120,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName}}",
       data: { source, contexts, mapping },
     });
   });
@@ -148,7 +162,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName2}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName1}}?test={{groupName2}}",
       data: { source, contexts, mapping },
     });
   });

package/reactHooks/feed/useInflatedUrl.ts

@@ -9,9 +9,15 @@ import {
 
 import { inflateString } from "../../stringUtils";
 import { useRoute } from "../navigation";
-import { isEnoughDataToInflateString } from "../../inflatedUrlUtils";
+import { getMissingValues } from "../../inflatedUrlUtils";
 import { reactHooksLogger as logger } from "../logger";
 import { isTV } from "../../reactUtils";
+import {
+  findEndpointForURL,
+  HTTP_METHODS,
+} from "@applicaster/zapp-pipes-v2-client";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { ENDPOINT_TAGS } from "../../types";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -105,24 +111,47 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
     R.keys(mapping)
   );
 
-  if (!isEnoughDataToInflateString(contexts, string)) {
-    const message = "Not enough data to fully inflate url";
+  const missingValues = getMissingValues(contexts, string);
 
-    // todo: add js only payload instead
-    if (__DEV__) {
-      logger.warning({
-        message,
-        data: { source, contexts, mapping },
-      });
+  if (missingValues && missingValues.length > 0) {
+    const pipesEndpoints = appStore.get("pipesEndpoints");
+
+    const endpointURL = findEndpointForURL(
+      source,
+      pipesEndpoints,
+      HTTP_METHODS.GET
+    );
+
+    const tags = pipesEndpoints?.[endpointURL]?.tags;
+    const allowMissingKeys = tags?.includes(ENDPOINT_TAGS.allow_missing_keys);
+
+    if (!allowMissingKeys) {
+      const message = `Not enough data to fully inflate url: ${missingValues.join(
+        ","
+      )} source: ${source}`;
+
+      // todo: add js only payload instead
+      if (__DEV__) {
+        logger.warning({
+          message,
+          data: { source, contexts, mapping },
+        });
+      } else {
+        // todo: log values we've failed to resolve
+        logger.warning({
+          message,
+        });
+      }
+
+      // return null in order to prevent start fetching data with invalid url
+      return null;
     } else {
-      // todo: log values we've failed to resolve
-      logger.warning({
-        message,
+      logger.debug({
+        message: `Ignoring missing values in url because ${
+          ENDPOINT_TAGS.allow_missing_keys
+        } endpoint tag, keys: ${missingValues.join(",")}`,
       });
     }
-
-    // return null in order to prevent start fetching data with invalid url
-    return null;
   }
 
   return inflateString({ string, data: contexts });

package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 import * as ReactNative from "react-native";
 
@@ -48,19 +52,43 @@ jest.mock("../../navigation", () => ({
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -69,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -87,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -113,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -128,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -141,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/types/index.ts

@@ -2,6 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -3,6 +3,8 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
@@ -36,6 +38,7 @@ export const useDimensions: UseDimensions = (
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
   const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
@@ -50,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -85,7 +88,7 @@ export const useDimensions: UseDimensions = (
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
       } else if (isActive || options.updateForInactiveScreens) {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,8 +15,21 @@ export const mockMenu: ZappNavigation = {
   // preset_id?: null | unknown;
 };
 
+export const useRoute = jest.fn(() => ({
+  screenData: {
+    name: "someName",
+  },
+  pathname: "someRoute",
+}));
+
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
+  activeRiver: {
+    id: "someId",
+  },
   currentRoute: "someRoute",
 }));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -1,4 +1,7 @@
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
   currentRoute: "someRoute",
 }));

package/reactHooks/navigation/index.ts

@@ -251,6 +251,11 @@ export const useRoute = (): {
     return composeRouteData(screenData);
   }
 
+  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+  if (!currentStack) {
+    return composeRouteData(navigator.screenData);
+  }
+
   return composeRouteData(currentRouteScreenData);
 };
 

package/reactHooks/player/useAutoSeek.tsx

@@ -14,6 +14,7 @@ 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);
 
@@ -36,6 +37,19 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
     clearIntervalTimer();
   };
 
+  useEffect(() => {
+    const player = playerManager.getInstanceController();
+    if (!player) return;
+
+    if (isRunning) {
+      if (player.isPlaying()) {
+        player?.enterDelayedSeek();
+      }
+    } else if (!isRunning) {
+      player.exitDelayedSeek();
+    }
+  }, [isRunning]);
+
   useEffect(() => {
     const player = playerManager.getInstanceController();
 
@@ -75,7 +89,7 @@ export const useAutoSeek = (resetHUDTimer = noop) => {
       setDirection(eventType);
       setIsRunning(true);
     },
-    [isRunning]
+    [isRunning, autoSeekStop]
   );
 
   return React.useMemo(

package/reactHooks/player/useSeek.tsx

@@ -10,34 +10,42 @@ export const useSeek = (resetHUDTimer = noop) => {
 
   const onForwardPress = () => {
     handlePressEvent(SEEK_TYPE.FORWARD);
+    console.log("Anton onForwardPress");
   };
 
   const onRewindPress = () => {
     handlePressEvent(SEEK_TYPE.REWIND);
+    console.log("Anton onRewindPress");
   };
 
   const onForwardPressIn = () => {
     autoSeekStart(SEEK_TYPE.FORWARD);
+    console.log("Anton onForwardPressIn");
   };
 
   const onForwardPressOut = () => {
     autoSeekStop();
+    console.log("Anton onForwardPressOut");
   };
 
   const onRewindPressIn = () => {
     autoSeekStart(SEEK_TYPE.REWIND);
+    console.log("Anton onRewindPressIn");
   };
 
   const onRewindLongPress = () => {
     autoSeekStart(SEEK_TYPE.REWIND);
+    console.log("Anton onRewindLongPress");
   };
 
   const onForwardLongPress = () => {
     autoSeekStart(SEEK_TYPE.FORWARD);
+    console.log("Anton onForwardLongPress");
   };
 
   const onRewindPressOut = () => {
     autoSeekStop();
+    console.log("Anton onRewindPressOut");
   };
 
   return React.useMemo(

package/reactHooks/player/useTapSeek.tsx

@@ -46,6 +46,12 @@ export const useTapSeek = () => {
       }
 
       const seekTime = getSkipTime(onPressMultiplier.current);
+
+      console.log(
+        `Anton123 handlePressEvent: ${eventType} shouldIncreaseMultiplier:${shouldIncreaseMultiplier} currentM: ${onPressMultiplier.current}, seekTime:${seekTime}`,
+        { isSameEventType, isWithinResetDuration }
+      );
+
       player[eventType](seekTime);
 
       lastPressTime.current = now;

package/reactHooks/screen/useScreenContext.ts

@@ -6,7 +6,7 @@ import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 
-function useScreenContextV2() {
+export function useScreenContextV2() {
   return useContext(ScreenContext);
 }
 

package/screenState/index.ts

@@ -49,11 +49,3 @@ export function useScreenState(
     setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
   };
 }
-
-export const useScreenScrollStore = create<{
-  scrollPosition: number;
-  scrollingVelocity: number;
-}>(() => ({
-  scrollPosition: 0,
-  scrollingVelocity: 0,
-}));

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/testUtils/getByTestId.ts

@@ -0,0 +1,14 @@
+export const getByTestId = (wrapper, testId) => {
+  try {
+    if (wrapper?.getByTestId) {
+      return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+    } else if (wrapper?.root?.findByProps) {
+      return wrapper.root.findAllByProps({ testID: testId })?.[0] ?? undefined;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};

package/testUtils/index.tsx

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 
 import { Provider } from "react-redux";
@@ -11,6 +11,8 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { render } from "@testing-library/react-native";
 import { AnalyticsProvider } from "../analyticsUtils";
 
+export { getByTestId } from "./getByTestId";
+
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
  * Example:
@@ -21,17 +23,6 @@ import { AnalyticsProvider } from "../analyticsUtils";
 export const testIDEquals = (testId: any): boolean =>
   R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
 
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance
@@ -47,11 +38,11 @@ export const findByType = (type, renderer) => {
 export function createComponentMock(mockName, hasChildren = false) {
   return hasChildren
     ? jest.fn(({ children }) => (
-        <View comp={mockName} testID={mockName}>
+        <View testID={mockName}>
           {typeof children === "function" ? children() : children}
         </View>
       ))
-    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+    : jest.fn(() => <View testID={mockName} />);
 }
 
 const initialState = {
@@ -64,14 +55,21 @@ const initialState = {
     AppContainer: createComponentMock("appContainer", true),
     DisplayError: createComponentMock("displayError"),
   },
-  rivers: [{ id: "A1234", home: true }],
+  rivers: { id: "A1234", home: true },
   appSettings: {},
   plugins: [],
-  appState: { appReady: true },
+  appState: { appReady: true, appLaunched: true },
+  appData: { layoutVersion: "v1" },
+  contentTypes: null,
 };
 
-export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, ...store });
+export const WrappedWithProviders = ({
+  children,
+  store: storeObj = {},
+}: any) => {
+  const _store = configureStore([thunk])(
+    R.mergeDeepWith(R.concat, { ...initialState }, storeObj)
+  );
 
   return (
     <SafeAreaProvider
@@ -93,8 +91,12 @@ export const WrappedWithProviders = ({ children, store = {} }: any) => {
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, store?: unknown) => {
-  return render(
-    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
-  );
+export const renderWithProviders = (component, storeObj?: unknown) => {
+  return render(component, {
+    wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
+      return (
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+      );
+    },
+  });
 };

package/types.ts

@@ -5,3 +5,7 @@ export type ManifestField<T> = {
   group?: boolean;
   fields?: ManifestField<any>[];
 };
+
+export enum ENDPOINT_TAGS {
+  allow_missing_keys = "allow_missing_keys",
+}