@applicaster/zapp-react-native-utils 12.0.0-alpha.5882013252 → 12.0.0-alpha.5895113034

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -187,11 +187,20 @@ export function getTargetInDirection(
         return null;
       }
 
+      const orientationDistance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      const euclidDistance = measureEuclidianDistanceToCenter(
+        comparisonRect,
+        componentRect
+      );
+
       return {
         distance:
-          measureDistance(direction, comparisonRect, componentRect) +
-          measureEuclidianDistanceToCenter(comparisonRect, componentRect) /
-            10000,
+          orientationDistance > 0 ? euclidDistance : orientationDistance,
         target,
       };
     })

package/appUtils/keyCodes/__tests__/__snapshots__/keyCodes.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`keyCode returns an object for a given key event 1`] = `
+exports[`keyCodes keyCode returns an object for a given key event 1`] = `
 Object {
   "direction": [Function],
   "matches": [Function],

package/appUtils/keyCodes/__tests__/keyCodes.test.js

@@ -1,3 +1,7 @@
+const { Platform } = require("react-native");
+
+Platform.OS = "web";
+
 import { directionHelper } from "../../directionHelper";
 
 const globalTizen = {
@@ -6,105 +10,96 @@ const globalTizen = {
   },
 };
 
-jest.mock("react-native", () => {
-  return { Platform: { OS: "web" } };
-});
-
-describe("keyCode", () => {
-  const { keyCode } = require("../index");
-  const { KEYS } = require("../keys.web");
-
-  it("returns an object for a given key event", () => {
-    expect(keyCode(KEYS.Enter)).toMatchSnapshot();
-  });
-
-  it("has a matcher method for a single key", () => {
-    expect(keyCode(KEYS.Enter).matches("Enter")).toBeTruthy();
-    expect(keyCode(KEYS.Enter).matches(KEYS.Enter)).toBeTruthy();
-    expect(keyCode(KEYS.Back).matches("Enter")).toBeFalsy();
-  });
-
-  it("has matcher for multiple keys", () => {
-    expect(
-      keyCode(KEYS.Enter).matchesAny("Enter", "Back", "ArrowUp")
-    ).toBeTruthy();
+describe("keyCodes", () => {
+  describe("keyCode", () => {
+    const { keyCode } = require("..");
+    const { KEYS } = require("../keys.web");
 
-    expect(
-      keyCode(KEYS.Enter).matchesAny("Back", "ArrowUp", "ArrowDown")
-    ).toBeFalsy();
-  });
+    it("returns an object for a given key event", () => {
+      expect(keyCode(KEYS.Enter)).toMatchSnapshot();
+    });
 
-  it("returns the direction if it matches an arrow key", () => {
-    expect(keyCode(KEYS.Enter).direction()).toBe(null);
+    it("has a matcher method for a single key", () => {
+      expect(keyCode(KEYS.Enter).matches("Enter")).toBeTruthy();
+      expect(keyCode(KEYS.Enter).matches(KEYS.Enter)).toBeTruthy();
+      expect(keyCode(KEYS.Back).matches("Enter")).toBeFalsy();
+    });
 
-    expect(keyCode(KEYS.ArrowDown).direction()).toEqual(
-      directionHelper(KEYS.ArrowDown)
-    );
-  });
+    it("has matcher for multiple keys", () => {
+      expect(
+        keyCode(KEYS.Enter).matchesAny("Enter", "Back", "ArrowUp")
+      ).toBeTruthy();
 
-  describe("in web env", () => {
-    it("uses the proper keyCode for the environment", () => {
-      expect(keyCode({ keyCode: 13 }).matches(KEYS.Enter)).toBeTruthy();
+      expect(
+        keyCode(KEYS.Enter).matchesAny("Back", "ArrowUp", "ArrowDown")
+      ).toBeFalsy();
     });
-  });
-});
 
-describe("in Tizen Env", () => {
-  jest.mock("react-native", () => {
-    return { Platform: { OS: "samsung_tv" } };
-  });
+    it("returns the direction if it matches an arrow key", () => {
+      expect(keyCode(KEYS.Enter).direction()).toBe(null);
 
-  beforeEach(() => {
-    global.tizen = globalTizen;
-    jest.resetModules();
-  });
+      expect(keyCode(KEYS.ArrowDown).direction()).toEqual(
+        directionHelper(KEYS.ArrowDown)
+      );
+    });
 
-  afterEach(() => {
-    global.tizen = undefined;
+    describe("in web env", () => {
+      it("uses the proper keyCode for the environment", () => {
+        expect(keyCode({ keyCode: 13 }).matches(KEYS.Enter)).toBeTruthy();
+      });
+    });
   });
 
-  it("uses the proper keyCode for the environment", () => {
-    const { keyCode } = require("../index");
-    const { KEYS } = require("../keys.web");
+  describe("in Tizen Env", () => {
+    beforeEach(() => {
+      jest.resetModules();
+      global.tizen = globalTizen;
+    });
 
-    expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
-      "Back",
-      "MediaPlay",
-      "MediaPlayPause",
-      "MediaPause",
-      "MediaFastForward",
-      "MediaRewind",
-      "MediaStop",
-      "Exit",
-      "0",
-      "1",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-    ]);
-
-    expect(keyCode({ keyCode: 10009 }).matches(KEYS.Back)).toBeTruthy();
-  });
-});
+    afterEach(() => {
+      global.tizen = undefined;
+    });
 
-describe("in WebOS Env", () => {
-  jest.mock("react-native", () => {
-    return { Platform: { OS: "lg_tv" } };
+    it("uses the proper keyCode for the environment", () => {
+      Platform.OS = "samsung_tv";
+      const { keyCode } = require("../");
+      const { KEYS } = require("../keys.web");
+
+      expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
+        "MediaPlay",
+        "MediaPlayPause",
+        "MediaPause",
+        "MediaFastForward",
+        "MediaRewind",
+        "MediaStop",
+        "Exit",
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+      ]);
+
+      expect(keyCode({ keyCode: 10009 }).matches(KEYS.Back)).toBeTruthy();
+    });
   });
 
-  beforeEach(() => {
-    jest.resetModules();
-  });
+  describe("in WebOS Env", () => {
+    beforeEach(() => {
+      jest.resetModules();
+    });
 
-  it("uses the proper keyCode for the environment", () => {
-    const { keyCode } = require("../index");
-    const { KEYS } = require("../keys.web");
-    // Back is reserved on LG
-    expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
+    it("uses the proper keyCode for the environment", () => {
+      Platform.OS = "lg_tv";
+      const { keyCode } = require("..");
+      const { KEYS } = require("../keys.web");
+      // Back is reserved on LG
+      expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
+    });
   });
 });

package/appUtils/keyCodes/keys.web.js

@@ -1,5 +1,6 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
+
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 

package/appUtils/orientationHelper.ts

@@ -2,6 +2,7 @@
 import * as ReactNative from "react-native";
 import { isTV, platformSelect } from "../reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   QUICK_BRICK_EVENTS,
@@ -9,7 +10,6 @@ import {
   sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { utilsLogger } from "../logger";
-import { useIsTablet } from "../reactHooks/device/useIsTablet";
 
 const { DeviceEventEmitter, NativeModules, NativeEventEmitter } = ReactNative;
 

package/appUtils/playerManager/DelayedSeekPlayerWrapper.tsx

@@ -0,0 +1,179 @@
+import { Player } from "./player";
+import { BehaviorSubject } from "rxjs";
+
+export class DelayedSeekPlayerWrapper extends Player {
+  private wrappedPlayer: Player;
+  private delayedSeekPosition: number;
+  private wasPlaying: boolean;
+
+  constructor(props, player: Player) {
+    super(props);
+    this.wrappedPlayer = player;
+
+    this.wrappedPlayer.addListener({
+      id: "Master-Wrapper-Listener",
+      listener: this,
+    });
+
+    this.onPlayerSeekComplete = this.onPlayerSeekComplete.bind(this);
+  }
+
+  getOverlayObservable = () => {
+    return this.wrappedPlayer.getOverlayObservable();
+  };
+
+  getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
+    return this.wrappedPlayer.getEntryObservable();
+  };
+
+  getEntry = (): ZappEntry | null => this.wrappedPlayer.getEntry();
+
+  getListener = (): QuickBrickPlayer.SharedPlayerCallBacks => {
+    return this.wrappedPlayer.getListener();
+  };
+
+  togglePlayPause = () => {
+    this.wrappedPlayer.togglePlayPause();
+  };
+
+  selectTrack = (_track) => this.wrappedPlayer.selectTrack(_track);
+
+  // 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.delayedSeekPosition === null) {
+      return currentState;
+    }
+
+    return {
+      ...currentState,
+      contentPosition: this.delayedSeekPosition,
+      isPaused: false,
+      seekPosition: this.delayedSeekPosition,
+    };
+  };
+
+  forward = (deltaTime: number) => {
+    if (this.delayedSeekPosition !== null) {
+      this.delayedSeekPosition += deltaTime;
+      this.playerState.seekPosition = this.delayedSeekPosition;
+
+      this.onVideoProgress({
+        currentTime: this.playerState.seekPosition,
+        duration: this.getDuration(),
+        seekableDuration: this.playerState.seekableDuration,
+        isLive: this.playerState.isLive,
+      });
+
+      // this.scheduleResumePlayback(DELAYED_SEEK_DELAY, this.delayedSeekPosition);
+
+      return;
+    }
+
+    if (this.playerState.seekPosition == null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.playerState.seekPosition += deltaTime;
+
+    this.wrappedPlayer.forward(deltaTime);
+  };
+
+  rewind = (deltaTime: number) => {
+    if (this.delayedSeekPosition !== null) {
+      this.delayedSeekPosition -= deltaTime;
+
+      if (this.delayedSeekPosition < 0) {
+        this.delayedSeekPosition = 0;
+      }
+
+      this.playerState.seekPosition = this.delayedSeekPosition;
+
+      this.onVideoProgress({
+        currentTime: this.playerState.seekPosition,
+        duration: this.getDuration(),
+        seekableDuration: this.playerState.seekableDuration,
+        isLive: this.playerState.isLive,
+      });
+
+      // this.scheduleResumePlayback(DELAYED_SEEK_DELAY, this.delayedSeekPosition);
+
+      return;
+    }
+
+    if (this.playerState.seekPosition == null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.playerState.seekPosition -= deltaTime;
+    this.wrappedPlayer.rewind(deltaTime);
+  };
+
+  public getConfig = () => this.wrappedPlayer.getConfig();
+
+  // TODO: replace with enum of supported orientations
+  isFullScreenSupported(): boolean {
+    return this.wrappedPlayer.isFullScreenSupported();
+  }
+
+  public supportsNativeControls = (): boolean =>
+    this.wrappedPlayer.supportsNativeControls();
+
+  public supportNativeCast = (): boolean =>
+    this.wrappedPlayer.supportNativeCast();
+
+  public isInDelayedSeek = () => this.delayedSeekPosition !== null;
+
+  public enterDelayedSeek() {
+    if (this.delayedSeekPosition !== null) {
+      return;
+    }
+
+    if (this.playerState.seekPosition === null) {
+      this.playerState.seekPosition = this.playerState.contentPosition;
+    }
+
+    this.delayedSeekPosition = this.playerState.seekPosition;
+
+    if (!this.isPaused()) {
+      this.wasPlaying = true;
+      this.wrappedPlayer.pause();
+    }
+  }
+
+  public exitDelayedSeek() {
+    if (this.delayedSeekPosition === null) {
+      return;
+    }
+
+    this.wrappedPlayer.seekTo(this.delayedSeekPosition);
+
+    if (this.wasPlaying) {
+      this.wasPlaying = false;
+      this.wrappedPlayer.play();
+    }
+
+    this.delayedSeekPosition = null;
+  }
+}

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -41,6 +41,11 @@ export type ChapterMarkerEvent = {
   actions: ActionChapter[];
 };
 
+export type TitleSummaryEvent = {
+  title: string | number;
+  summary: string | number;
+};
+
 type ChapterMarkersObserverProps = {
   player: Player;
 };
@@ -60,6 +65,11 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
+  private feedUrl: string;
+  private reloadData: () => void;
+  private updateTitleAndDescription: (data: any) => void;
+  private feedDataInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -70,14 +80,55 @@ export class OverlaysObserver {
   constructor({ player }: ChapterMarkersObserverProps) {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
+
+    this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
+      title: player.getEntry()?.title || "",
+      summary: player.getEntry()?.summary || "",
+    });
+
     this.entry = player.getEntry();
     this.player = player;
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
+    this.feedUrl = "";
+    this.reloadData = () => {};
+    this.updateTitleAndDescription = () => {};
+    this.feedDataInterval = null;
     void this.preparePlayNext();
   }
 
+  private setupFeedDataInterval(interval: number) {
+    if (this.feedUrl && this.reloadData && this.updateTitleAndDescription) {
+      this.feedDataInterval = setInterval(() => {
+        this.reloadData();
+      }, interval * 1000);
+    }
+  }
+
+  public clearFeedDataInterval() {
+    if (this.feedDataInterval) {
+      clearInterval(this.feedDataInterval);
+      this.feedDataInterval = null;
+    }
+  }
+
+  public setFeedDataHandlers(
+    feedUrl: string,
+    reloadData: () => void,
+    interval: number,
+    updateTitleAndDescription: (data: any) => void
+  ) {
+    this.feedUrl = feedUrl;
+    this.reloadData = reloadData;
+    this.updateTitleAndDescription = updateTitleAndDescription;
+    this.setupFeedDataInterval(interval);
+  }
+
+  public getTitleSummaryObservable(): Observable<TitleSummaryEvent> {
+    return this.titleSummarySubject.asObservable().pipe(distinctUntilChanged());
+  }
+
   handleUserCancelPlayNext = () => {
     this.isCanceledByUser = true;
     this.playNextSubject.next(null);
@@ -281,7 +332,9 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
+    this.clearFeedDataInterval();
     this.releasePlayerObserver = null;
   };
 

package/appUtils/playerManager/conts.ts

@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/index.ts

@@ -3,7 +3,6 @@ import * as R from "ramda";
 import { subscriber } from "../../functionUtils";
 import { utilsLogger, createLogger } from "../../logger";
 import { Player } from "./player";
-import { AnalyticsTracker } from "../../analyticsUtils/analyticsTracker";
 import {
   hasTizenAPIs,
   subscribeToDeviceNetworkChanges,
@@ -36,7 +35,10 @@ export interface PlayerLifecycleListener {
 }
 
 type PlayersMap = {
-  [id: string]: { player: Player; isInViewport: boolean };
+  [id: string]: {
+    player: Player;
+    isInViewport: boolean;
+  };
 };
 
 export class PlayerManager {
@@ -45,7 +47,6 @@ export class PlayerManager {
   private playersMap: PlayersMap = {};
   private manager = subscriber();
   private castingReceiver: Player;
-  private analyticsTracker: AnalyticsTracker;
   private lifecycleListeners: PlayerLifecycleListener[] = [];
 
   public static getInstance() {
@@ -56,7 +57,7 @@ export class PlayerManager {
     return PlayerManager.instance;
   }
 
-  public getActivePlayerId = (): String | null => {
+  public getActivePlayerId = (): string | null => {
     return this.activePlayerId;
   };
 
@@ -101,7 +102,10 @@ export class PlayerManager {
   }
 
   private addPlayer = (id: string, player: Player) => {
-    this.playersMap[id] = { player: player, isInViewport: false };
+    this.playersMap[id] = {
+      player: player,
+      isInViewport: false,
+    };
   };
 
   public isPlayerRegistered = (id: string) => !!this.playersMap[id];
@@ -246,28 +250,6 @@ export class PlayerManager {
     this.castingReceiver = null;
   }
 
-  /**
-   * Handles analytic events, generates a new analytics tracker and transmits events
-   * Passes entry data, and playerState to the tracker for additional context
-   * The end result is an event formatted and passed to AnalyticsBridge.postEvent
-   * When we get the synthetic event we need to pull the data in the e object
-   * e contains the return value from native
-   */
-  public handleAnalyticEvent(event, data = {}, entry: ZappEntry) {
-    const playerState = this.getActivePlayer()?.getState();
-
-    if (!this.analyticsTracker?.handleAnalyticEvent) {
-      this.analyticsTracker = new AnalyticsTracker(entry);
-    }
-
-    this.analyticsTracker?.handleAnalyticEvent?.(
-      event,
-      data,
-      entry,
-      playerState
-    );
-  }
-
   /**
    * Method retrieves the instantiated player instance controller
    * Instance controller exposes methods like getContentDuration, getContentPosision