@applicaster/quick-brick-player 12.0.0-alpha.4220424021 → 12.0.0-alpha.4241289980

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.4220424021",
+  "version": "12.0.0-alpha.4241289980",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -38,16 +38,17 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.118",
     "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.112",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.4220424021",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4220424021",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4220424021",
-    "dashjs": "^4.7.3",
-    "hls.js": "^1.5.5",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.4241289980",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4241289980",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4241289980",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
-    "typeface-montserrat": "^0.0.54"
+    "typeface-montserrat": "^0.0.54",
+    "video.js": "7.14.3",
+    "videojs-contrib-eme": "^3.8.1",
+    "videojs-contrib-quality-levels": "3.0.0"
   },
   "peerDependencies": {
     "@applicaster/quick-brick-xray": "*",

package/src/Player/index.tsx

@@ -1,152 +1,113 @@
-/* eslint-disable react-native/no-inline-styles */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-native/no-color-literals */
 
 import React from "react";
-import HLS from "hls.js";
-import DASH from "dashjs";
-
-import { View } from "react-native";
-import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-const EVENTS = [
-  "abort",
-  "error",
-  "loadeddata",
-  "loadedmetadata",
-  "playing",
-  "stalled",
-  "suspend",
-];
-
-const isHLS = (url) => {
-  return url.includes(".m3u8");
-};
-
-const isDASH = (url) => {
-  return url.includes(".mpd");
-};
-
-const setupEventLogging = (player, events, onEvent) => {
-  let previous_event_time;
-
-  events.map((event) =>
-    player.addEventListener(event, () => {
-      const event_time = Date.now();
-
-      const log = `<${event}>: ${event_time - window.start_time} ms${
-        previous_event_time ? ` (+${event_time - previous_event_time})` : ""
-      }`;
-
-      onEvent && onEvent(log);
-      previous_event_time = event_time;
-    })
-  );
-};
-
-const DebugOverlay = ({ logs }) => (
-  <div
-    style={{
-      position: "absolute",
-      top: "10px",
-      left: "10px",
-      borderWidth: 1,
-      borderColor: "white",
-      padding: "10px",
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      color: "white",
-      fontSize: 20,
-      zIndex: 9990,
-    }}
-  >
-    {logs.map((log, index) => (
-      <p key={`log_${index}`}>{log}</p>
-    ))}
-  </div>
-);
-
-const setupHLSPlayer = (stream, playerRef) => {
-  if (!HLS.isSupported()) {
-    console.error("HLS is not supported in this browser.");
-
-    return false;
-  }
+import * as R from "ramda";
 
-  try {
-    const config = stream.license_url
-      ? {
-          emeEnabled: true,
-          drmSystems: {
-            "com.widevine.alpha": {
-              licenseUrl: stream.license_url,
-            },
-          },
-          drmSystemOptions: {
-            audioRobustness: "SW_SECURE_CRYPTO",
-            videoRobustness: "SW_SECURE_CRYPTO",
-          },
-          backBufferLength: 30, // https://github.com/video-dev/hls.js/blob/master/docs/API.md#backbufferlength
-        }
-      : undefined;
+import { findNodeHandle, StyleSheet, View } from "react-native";
+import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
+import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
 
-    const hls = new HLS(config);
-    hls.loadSource(stream.src);
-    hls.attachMedia(playerRef);
-
-    return true;
-  } catch (err) {
-    console.error(err);
-  }
+import { AudioPlayer } from "@applicaster/zapp-react-native-ui-components/Components/AudioPlayer";
+import {
+  isAndroidPlatform,
+  isApplePlatform,
+  isTV,
+  isTvOSPlatform,
+  isWeb,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
-  return false;
-};
+import { PlayerWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 
-const setupDASHPlayer = (stream, playerRef) => {
-  try {
-    const player = DASH.MediaPlayer().create();
-    player.initialize(playerRef, stream.src, true);
+import { PlayNextOverlay } from "./PlayNextOverlay";
+import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 
-    player.updateSettings({
-      streaming: {
-        buffer: {
-          bufferToKeep: 30, // https://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~Buffer:~:text=buffer%20in%20seconds.-,bufferToKeep,-number
-        },
-      },
-    });
+import { GENERAL_EVENT } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { Categories, createLogger, Subsystem } from "../logger";
+import { parseLanguageTracks } from "@applicaster/zapp-react-native-utils/playerUtils/configurationUtils";
+import { DEFAULT_COLORS, SEEK_TIME } from "../utils/const";
+import { AudioPlayerWrapper } from "./AudioLayer/AudioPlayerWrapper";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/analyticsUtils/PlayerAnalyticsManager";
+import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
 
-    if (stream.license_url) {
-      player.setProtectionData({
-        "com.widevine.alpha": {
-          serverURL: stream.license_url,
-          priority: 0,
-          audioRobustness: "SW_SECURE_CRYPTO",
-          videoRobustness: "SW_SECURE_CRYPTO",
-        },
-      });
-    }
+import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
-    return true;
-  } catch (error) {
-    console.error(error);
-  }
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  playerContainerBlack: { backgroundColor: DEFAULT_COLORS.black },
+  playerContainerTransparent: { backgroundColor: DEFAULT_COLORS.transparent }, // android
+  audio: {
+    overflow: "hidden",
+    position: "absolute",
+    zIndex: 1,
+  },
+  playerSize: { width: "100%", height: "100%" },
+});
 
-  return false;
-};
+const logger = createLogger({
+  category: Categories.PLAYER,
+  subsystem: Subsystem,
+});
 
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
   QuickBrickPlayer.NativePlayerState
 > {
+  public static propTypes = {};
   _root: any;
   playerPluginId: string;
   takeParentStyle: Record<any, any>;
+  playbackStarted = false;
+  needToResumeOnForeground: boolean = null;
+  private onVideoLoadCalled: boolean;
+  playNextData: PlayNextData;
+
+  state: QuickBrickPlayer.NativePlayerState = {
+    audioTrackId: null,
+    textTrackId: null,
+
+    // TODO: Can be deleted, on controller logic
+    isAd: false,
+
+    // TODO: Remove paused
+    // TODO: Can be deleted, on controller logic
+    paused: false,
+    piped: false,
+    rate: 1.0,
+    // TODO: Hack for analytics, must br removed
+    resume: null,
+
+    // TODO: Replace with react method
+    seek: {},
+
+    // Player state
+    currentTime: 0,
+    duration: 0,
+  };
+
+  private _tracker: PlayerAnalyticsTrackerI;
+  get analyticsTracker() {
+    if (!this._tracker) {
+      this._tracker = PlayerAnalyticsManager.getInstance().getTracker(
+        this.props.playerId
+      );
+    }
+
+    return this._tracker;
+  }
 
   constructor(props) {
     super(props);
-
-    this.state = {
-      logs: [],
-    };
+    this.onVideoLoadCalled = false; // android
 
     this.takeParentStyle = isWeb()
       ? { width: "100%", flex: "1 1 auto", objectFit: "contain" }
@@ -155,27 +116,59 @@ export default class VideoPlayer extends React.Component<
     this.playerPluginId = this.props?.playerPluginIdentifier;
   }
 
+  componentWillUnmount() {
+    this.playbackStarted = false;
+
+    this.analyticsTracker.handleAnalyticEvent(GENERAL_EVENT.session_end);
+    this.onPlayerClosed();
+
+    if (isAndroidPlatform()) {
+      this.disablePiP();
+    }
+  }
+
   componentDidMount() {
-    const {
-      content: { src },
-      extensions: { drm },
-    } = this.props.entry;
+    this.playbackStarted = false;
+    this.onPlayerPresented();
+  }
 
-    const stream = { src, license_url: drm?.widevine?.license_url };
+  shouldComponentUpdate(nextProps) {
+    const srcPath = ["entry", "content", "src"];
 
-    window.start_time = Date.now();
+    // when using vods from applicaster2, `entry.content.src` might be
+    // null when trying to exit the player. This prevents a crash in that scenario
+    return !(R.path(srcPath, this.props) && !R.path(srcPath, nextProps));
+  }
 
-    if (isDASH(src)) {
-      setupDASHPlayer(stream, this._root);
-    } else if (isHLS(src)) {
-      setupHLSPlayer(stream, this._root);
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.castAction?.state?.connected &&
+      !this.state.isCastConnected
+    ) {
+      this.stopBackgroundPlayback();
+      this.setState({ isCastConnected: true });
     }
 
-    setupEventLogging(this._root, EVENTS, (log) => {
-      this.setState(({ logs }) => ({ logs: [...logs, log] }));
-    });
+    if (
+      !this.props.castAction?.state?.connected &&
+      this.state.isCastConnected
+    ) {
+      this.setState({ isCastConnected: false });
+    }
+
+    if (prevProps.entry?.content?.src !== this.props.entry?.content?.src) {
+      this.stopBackgroundPlayback();
+      this.playbackStarted = false;
+    }
   }
 
+  // For close button
+  public closeNativePlayer = () => {
+    this.stopBackgroundPlayback();
+  };
+
+  getPlayNextData = () => this.props.playNextData as PlayNextData;
+
   /**
    * Assigns root / ref of the player.
    */
@@ -183,12 +176,953 @@ export default class VideoPlayer extends React.Component<
     this._root = component;
   };
 
+  getPluginConfiguration = () => {
+    return this.props.pluginConfiguration;
+  };
+
+  /**
+   * This method is for the events that have no implementation in react but are being invoked by native
+   * When we get the synthetic event we need to pull the data in the nativeEvent object
+   * nativeEvent contains the return value from native
+   * Value could be null if nothing return
+   */
+  unHandledEvent = (eventName) => {
+    return function dispatchUnhandledEvent({ nativeEvent = null }) {
+      logger.warning({
+        message:
+          "You have invoked an event that is being deprecated or unhandled",
+        data: { eventName, nativeEvent },
+      });
+    };
+  };
+
+  isReactNativeMethodsSupported = () =>
+    this.props.PlayerComponent === "QuickBrickDefaultPlayerView" ||
+    this.props.PlayerComponent === "PlayerModule";
+
+  pause = () => {
+    // TODO: Call player instance controller methods directly
+    // this._root was added here because chromecast,
+    // is checking player state for the pause
+    if (
+      this.isReactNativeMethodsSupported() &&
+      RNPlayerManager?.[this.playerPluginId]?.pause &&
+      this._root
+    ) {
+      if (!this.state.paused) {
+        const node = findNodeHandle(this._root);
+
+        if (!node) {
+          return;
+        }
+
+        RNPlayerManager?.[this.playerPluginId]?.pause(node);
+      }
+    } else {
+      this.setState({ paused: true });
+    }
+
+    // User invoked player pause action
+    this.needToResumeOnForeground = null;
+  };
+
+  play = () => {
+    // TODO: Call player instance controller methods directly
+    // this._root was added here because chromecast,
+    // is checking player state for the pause
+    if (
+      this.isReactNativeMethodsSupported() &&
+      RNPlayerManager?.[this.playerPluginId]?.play &&
+      this._root
+    ) {
+      if (this.state.paused) {
+        const node = findNodeHandle(this._root);
+
+        if (!node) {
+          return;
+        }
+
+        RNPlayerManager?.[this.playerPluginId]?.play(node);
+      }
+    } else {
+      this.setState({ paused: false });
+    }
+
+    // User invoked player pause action
+    this.needToResumeOnForeground = null;
+  };
+
+  stopBackgroundPlayback = () => {
+    if (
+      this.isReactNativeMethodsSupported() &&
+      RNPlayerManager?.[this.playerPluginId]?.stopBackgroundPlayback
+    ) {
+      RNPlayerManager?.[this.playerPluginId]?.stopBackgroundPlayback();
+    }
+  };
+
+  forward = (seekTime = SEEK_TIME) => {
+    const currentTime = this.state.currentTime;
+
+    const _duration = this.state.isLive
+      ? this.state?.seekableDuration
+      : this.getDuration();
+
+    const _time = this.state.isLive
+      ? R.clamp(0, _duration, currentTime - seekTime)
+      : R.clamp(0, _duration, currentTime + seekTime);
+
+    const seekTo = {
+      time: _time,
+      tolerance: 1,
+    };
+
+    this.setState({ seek: seekTo });
+  };
+
+  rewind = (seekTime = SEEK_TIME) => {
+    const currentTime = this.state.currentTime;
+
+    const _duration = this.state.isLive
+      ? this.state?.seekableDuration
+      : this.getDuration();
+
+    const _time = this.state.isLive
+      ? R.clamp(0, _duration, currentTime + seekTime)
+      : R.clamp(0, _duration, currentTime - seekTime);
+
+    const seekTo = {
+      time: _time,
+      tolerance: 1,
+    };
+
+    this.setState({ seek: seekTo });
+  };
+
+  seeking = (time, tolerance = 1) => {
+    if (isNaN(time)) {
+      logger.error({
+        message: `Specified time is not a number time: ${time}`,
+      });
+
+      return;
+    }
+
+    // This hack was added, if send same value to seek two times like 0,
+    // It will not property change callback to native.
+    // TODO: This func must be refactored to View React method.
+    if (time === this.state.seek.time) {
+      this.setState({ seek: {} }, () => {
+        this.setState({ seek: { time, tolerance } });
+      });
+    } else {
+      this.setState({ seek: { time, tolerance } });
+    }
+  };
+
+  selectTrack = (selected) => {
+    const { trackType, id, language } = selected || {};
+
+    const isOff = language === "Off";
+
+    if (!id) {
+      logger.error({
+        message:
+          "Failed to set Audio or Text track. Language track is missing required parameter ID",
+        data: { selected },
+      });
+
+      return;
+    }
+
+    switch (trackType) {
+      case "text":
+        this.setState({
+          textTrackId: isOff ? null : id,
+        });
+
+        break;
+      case "audio":
+        this.setState({
+          audioTrackId: id,
+        });
+
+        break;
+    }
+  };
+
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
+  getCurrentTime = () => {
+    return this.state.currentTime;
+  };
+
+  getDuration = () => {
+    return this.state.duration;
+  };
+
+  getState = () => {
+    return { ...this.state, fullscreen: Boolean(this.props?.fullscreen) };
+  };
+
+  /**
+   * Handles key events transmitted by the native
+   * Adds the key event to the playerState so that it can be consumed by interaction manager
+   * Needs for Android
+   */
+  onKeyDown = (event) => {
+    this.setState({
+      keyEvent: event,
+    });
+  };
+
+  onPlayerPresented = () => {
+    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_presented);
+  };
+
+  onPlayerClosed = () => {
+    this.analyticsTracker?.handleAnalyticEvent(GENERAL_EVENT.player_closed);
+  };
+
+  onVideoEnd = () => {
+    this.setState({ displayOverlay: !this.state.displayOverlay }, () => {
+      if (this.state?.displayOverlay) {
+        this.props?.listener?.onVideoEnd({});
+      }
+    });
+  };
+
+  // TODO: Should be unified on both platform
+  onVideoError = ({ nativeEvent }) => {
+    const { message } = nativeEvent;
+
+    return this.props?.listener?.onError(new Error(message));
+  };
+
+  onPlayerPause = ({ nativeEvent = null }) => {
+    this.setState({ paused: true });
+    this.props?.listener?.onPlayerPause(nativeEvent);
+  };
+
+  onPlayerResume = ({ nativeEvent = null }) => {
+    const { isAd, resume } = this.state;
+    const isNotAnAd = !isAd;
+    this.setState({ paused: false });
+    this.props?.listener?.onPlayerResume?.({ nativeEvent });
+
+    if (isNotAnAd && !resume) {
+      this.setState({ resume: true });
+    }
+  };
+
+  onPlayerSeekComplete = ({ nativeEvent }) => {
+    this.props?.listener?.onPlayerSeekComplete(nativeEvent);
+  };
+
+  onPlayerSeekStart = ({ nativeEvent }) => {
+    this.props?.listener?.onPlayerSeekStart(nativeEvent);
+  };
+
+  onBufferStart = ({ nativeEvent }) => {
+    this.props?.listener?.onBufferStart(nativeEvent);
+  };
+
+  onBufferComplete = ({ nativeEvent }) => {
+    this.props?.listener?.onBufferComplete(nativeEvent);
+  };
+
+  onAdBegin = ({ nativeEvent }) => {
+    this.setState({ isAd: true });
+    this.props.listener?.onAdBegin?.(nativeEvent);
+  };
+
+  onAdBreakBegin = ({ nativeEvent }) => {
+    this.setState({ isAd: true });
+    this.props.listener?.onAdBreakBegin?.(nativeEvent);
+  };
+
+  onAdBreakEnd = ({ nativeEvent }) => {
+    this.setState({ isAd: false });
+    this.props.listener?.onAdBreakEnd?.(nativeEvent);
+  };
+
+  onAdEnd = ({ nativeEvent }) => {
+    this.setState({ isAd: false });
+    this.props.listener?.onAdEnd?.(nativeEvent);
+  };
+
+  onAdError = ({ nativeEvent }) => {
+    this.setState({ isAd: false });
+    this.props.listener?.onAdError?.(nativeEvent);
+  };
+
+  onAdRequest = ({ nativeEvent }) => {
+    this.props.listener?.onAdRequest?.(nativeEvent);
+  };
+
+  onAdClicked = ({ nativeEvent }) => {
+    // Broadcast click event
+    this.props.playerEvent("ad-clicked", nativeEvent);
+    this.props.listener?.onAdClicked?.(nativeEvent);
+  };
+
+  onAdTapped = ({ nativeEvent }) => {
+    // Broadcast click event
+    this.props.playerEvent("ad-tapped", nativeEvent);
+    this.props.listener?.onAdTapped?.(nativeEvent);
+  };
+
+  onPlaybackStalled = () => {
+    return this.props?.updatePlayerState?.("stalled");
+  };
+
+  onPlayerAttached = ({ nativeEvent }) => {
+    this.props.listener?.onPlayerAttached?.(nativeEvent);
+  };
+
+  onPlayerDetached = ({ nativeEvent }) => {
+    this.props.listener?.onPlayerDetached?.(nativeEvent);
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidDismiss?.();
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+  };
+
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillDismiss?.();
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillPresent?.();
+  };
+
+  onPlayerClose = () => {
+    this.props.listener?.onPlayerClose?.();
+  };
+
+  onPiPEnter = () => {
+    this.setState({ piped: true });
+    this.props.openPiP();
+  };
+
+  onPiPExit = () => {
+    this.setState({ piped: false });
+    this.props.closePiP();
+  };
+
+  onPiPCloseByUser = () => {
+    if (this.state.piped) {
+      const node = findNodeHandle(this._root);
+
+      if (!node) {
+        return;
+      }
+
+      playerManager.close();
+    }
+  };
+
+  disablePiP = () => {
+    const node = findNodeHandle(this._root);
+
+    if (!node) {
+      return;
+    }
+
+    RNPlayerManager?.[this.playerPluginId]?.disablePiP?.(node);
+    // TODO: Remove after implementing play next for PiP
+    RNPlayerManager?.[this.playerPluginId]?.closePiP?.(node);
+  };
+
+  onVideoBuffer = ({ nativeEvent }) => {
+    // video buffer event is invoked from native side when asking the player to pause
+    // this causes the buffer animation to trigger and incorrectly request to update state
+    if (this.state.paused) {
+      return;
+    }
+
+    // TODO: This events must be called from native directly
+    if (nativeEvent?.isBuffering) {
+      this.onBufferStart({ nativeEvent });
+    } else {
+      this.onBufferComplete({ nativeEvent });
+    }
+
+    return this.props?.updatePlayerState?.("loadstart");
+  };
+
+  onVideoLoad = ({ nativeEvent }) => {
+    const duration = nativeEvent.duration;
+    const currentTime = nativeEvent.currentTime;
+
+    // check if content is loaded
+    if (duration < 0) {
+      return;
+    }
+
+    this.setState(
+      {
+        currentTime,
+        duration,
+      },
+      () => {
+        this.props?.listener?.onVideoLoad(nativeEvent);
+
+        if (!this.playbackStarted) {
+          this.playbackStarted = true;
+          // TODO: Remove not needed anymore, implemented on player.tsx
+          this.props?.listener?.onLoad(nativeEvent);
+        }
+
+        if (!this.state.isAd && !this.onVideoLoadCalled) {
+          // TODO: Hack, needs to remove
+          this.onVideoLoadCalled = true;
+        }
+      }
+    );
+  };
+
+  onTracksChanged = ({ nativeEvent }) => {
+    const { textTracks, audioTracks, audioTrackId, textTrackId } =
+      parseLanguageTracks(nativeEvent);
+
+    this.setState(
+      {
+        audioTrackId,
+        textTrackId,
+      },
+      () => {
+        this.props?.listener?.onTracksChanged?.({
+          textTracks,
+          audioTracks,
+          audioTrackId,
+          textTrackId,
+        });
+      }
+    );
+  };
+
+  onVideoProgress = ({ nativeEvent }) => {
+    const duration = nativeEvent.duration;
+    const currentTime = nativeEvent.currentTime;
+    const seekableDuration = nativeEvent.seekableDuration;
+    const isLive = nativeEvent.isLive;
+
+    // TODO: Delete states on view
+    this.setState({
+      currentTime,
+      duration,
+      resume: false,
+      seekableDuration,
+      isLive,
+    });
+
+    this.props?.listener?.onVideoProgress({
+      currentTime,
+      duration,
+      item: this.props?.entry,
+      seekableDuration,
+      isLive,
+    });
+  };
+
+  onPlaybackRateChange = ({ nativeEvent }) => {
+    if (nativeEvent.playbackRate !== this.state.rate) {
+      this.setState({ rate: nativeEvent.playbackRate });
+
+      if (this.props?.listener?.onPlaybackRateChange) {
+        this.props?.listener?.onPlaybackRateChange(nativeEvent);
+      }
+
+      if (nativeEvent?.playbackRate > 0) {
+        if (this.props?.listener?.onPlayerResume) {
+          this.props?.listener?.onPlayerResume(nativeEvent);
+        }
+      }
+    }
+  };
+
+  appStateChange = (appState, previousAppState) => {
+    const { pluginConfiguration } = this.props;
+    const shouldPauseOnExit = pluginConfiguration?.nowPlayingEnabled !== true;
+
+    // TODO: This const must be imported from upstate change of TS
+    const ACTIVE = "active";
+    const BACKGROUND = "background";
+    const INACTIVE = "inactive";
+
+    if (
+      previousAppState === ACTIVE &&
+      appState &&
+      (appState === BACKGROUND || appState === INACTIVE)
+    ) {
+      if ((isTV() || shouldPauseOnExit) && this.props.mode !== "PIP") {
+        const wasPlaying = !this.state.paused;
+        this.pause();
+        this.needToResumeOnForeground = wasPlaying;
+      }
+    }
+
+    if (appState && appState === ACTIVE && previousAppState !== ACTIVE) {
+      if (this.needToResumeOnForeground) {
+        this.play();
+        this.needToResumeOnForeground = null;
+      }
+    }
+  };
+
+  childrenWithPlayNext = () => {
+    if (!isTvOSPlatform() || !this.getPlayNextData()) {
+      return this.props.children;
+    }
+
+    // tvos only
+    const { docked, entry } = this.props;
+
+    const children = R.pathOr([], "children", this.props);
+
+    return [
+      ...children,
+      <PlayNextOverlay
+        key="play-next-overlay"
+        item={entry}
+        playerIsDocked={docked}
+        pluginConfiguration={this.getPluginConfiguration()}
+        playerId={this.props.playerId}
+        playNextData={this.getPlayNextData()}
+        setNextVideoPreloadThresholdPercentage={
+          this.props.setNextVideoPreloadThresholdPercentage
+        }
+      />,
+    ];
+  };
+
   render() {
-    return (
-      <View style={this.takeParentStyle} testID={"player-view"}>
-        <video autoPlay controls ref={this._assignRoot}></video>
-        <DebugOverlay logs={this.state.logs} />
-      </View>
+    const {
+      docked,
+      entry,
+      fullscreen,
+      hideTransportControls,
+      inline,
+      isModal,
+      isTabletPortrait,
+      muted,
+      style,
+      castAction,
+      controller,
+      startComponentsAnimation,
+    } = this.props;
+
+    const supportNativeCast = controller.supportNativeCast();
+
+    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
+      this.state;
+
+    const isAudioItem =
+      entry?.content?.type?.includes?.("audio") ||
+      entry?.type?.value === "audio";
+
+    const getStyle = (dimensions) => {
+      const generalStyles = isAudioItem ? styles.audio : styles.video;
+
+      if (isAndroidPlatform() && isAudioItem) {
+        return generalStyles;
+      }
+
+      return { ...generalStyles, ...dimensions };
+    };
+
+    const getBackgroundImageStyle = (dimensions): any =>
+      Object.assign(
+        {},
+        isAudioItem ? styles.audio : { position: "absolute" },
+        dimensions
+      );
+
+    const nativeResizeMode = "ScaleAspectFit";
+
+    const nowPlayingEnabled =
+      this.props?.pluginConfiguration?.nowPlayingEnabled;
+
+    const enableAutoAudioTrackSelection =
+      this.props.pluginConfiguration?.enable_auto_audio_track_selection;
+
+    const minimumAllowedSeekableDurationInSeconds =
+      this.props?.pluginConfiguration?.minimumAllowedSeekableDurationInSeconds;
+    // In case no seeking duration or it less than 10 min we do not want to enable live seeking feature
+
+    const liveSeekingEnabled =
+      (this.props.pluginConfiguration?.liveSeekingEnabled &&
+        this.state?.seekableDuration >
+          minimumAllowedSeekableDurationInSeconds) ||
+      false;
+
+    // keep undefined if not present, since not all native players have the property
+    const liveCatchUpEnabled =
+      this.props.pluginConfiguration?.liveCatchUpEnabled;
+
+    // TODO: Get screen data more reliable way useCurrentScreenData
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
+
+    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
+
+    let platformSpecificProps: any = isApplePlatform()
+      ? {
+          resizeMode: nativeResizeMode,
+        }
+      : {};
+
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isAppleTV()
+      ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls =
+      controls &&
+      !startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
+    };
+
+    const pictureInPictureEnabled =
+      this.props.pluginConfiguration?.pictureInPictureEnabled;
+
+    const nativeProps = {
+      entry, // Must be passed first in list
+      ...platformSpecificProps,
+      audioTrackId,
+      docked,
+      enableAutoAudioTrackSelection,
+      fullscreen, // TODO: Check fullscreen params not crash
+      inline,
+      muted,
+      nowPlayingEnabled,
+      paused,
+      seek,
+      rate,
+      textTrackId,
+      liveSeekingEnabled,
+      liveCatchUpEnabled,
+      playerId: this.props.playerId,
+      pictureInPictureEnabled,
+      seekStep:
+        (this.props.pluginConfiguration?.seek_duration || SEEK_TIME) * 1000, // Only for Android
+      accessibilityProps: getAllAccessibilityProps(
+        this.getPluginConfiguration()
+      ),
+    }; // rate temporary removed, because of bug with subtitles
+
+    if (
+      this.isReactNativeMethodsSupported() &&
+      RNPlayerManager?.[this.playerPluginId]?.play
+    ) {
+      delete nativeProps["paused"];
+    }
+
+    const adEvents = {
+      onAdBegin: this.onAdBegin, // ad_start
+      onAdBreakBegin: this.onAdBreakBegin, // ad_break_start
+      onAdBreakEnd: this.onAdBreakEnd, // ad_break_completed
+      onAdEnd: this.onAdEnd, // ad_complete
+      onAdError: this.onAdError, // ad_error
+      onAdRequest: this.onAdRequest, // ad_request
+      onAdClicked: this.onAdClicked, // ad_clicked
+      onAdTapped: this.onAdTapped, // ad_tapped
+    };
+
+    const playbackEvents = {
+      onPlaybackRateChange: this.onPlaybackRateChange,
+      onPlayerPause: this.onPlayerPause, // pause
+      onPlayerResume: this.onPlayerResume, // play
+      onPlayerSeekComplete: this.onPlayerSeekComplete, // seek_complete
+      onPlayerSeekStart: this.onPlayerSeekStart, // seek_start
+    };
+
+    const lifecycleEvents = {
+      onReadyForDisplay: this.unHandledEvent("onReadyForDisplay"),
+      onVideoEnd: this.onVideoEnd, // complete
+      onVideoError: this.onVideoError, // error
+      onVideoProgress: this.onVideoProgress,
+      onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+      onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+      onVideoFullscreenPlayerWillDismiss:
+        this.onVideoFullscreenPlayerWillDismiss,
+      onVideoFullscreenPlayerWillPresent:
+        this.onVideoFullscreenPlayerWillPresent,
+      onVideoLoad: this.onVideoLoad,
+      onVideoLoadStart: this.unHandledEvent("onVideoLoadStart"),
+      onVideoBuffer: this.onVideoBuffer,
+      onPlaybackStalled: this.onPlaybackStalled,
+      onPlayerClose: this.onPlayerClose,
+      onPlayerAttached: this.onPlayerAttached,
+      onPlayerDetached: this.onPlayerDetached,
+    };
+
+    const androidLifecyclePiPEvents = isAndroidPlatform() && {
+      onPiPEnter: this.onPiPEnter,
+      onPiPExit: this.onPiPExit,
+      onPiPCloseByUser: this.onPiPCloseByUser,
+    };
+
+    const playerMetadataChangedEvents = {
+      onTimedMetadata: this.unHandledEvent("onTimedMetadata"),
+      onTracksChanged: this.onTracksChanged,
+      eventSubtitlesChange: this.unHandledEvent("eventSubtitlesChange"),
+    };
+
+    const playerSystemEvents = {
+      onAudioFocusChanged: this.unHandledEvent("onAudioFocusChanged"),
+      onVideoExternalPlaybackChange: this.unHandledEvent(
+        "onVideoExternalPlaybackChange"
+      ),
+      onVideoAudioBecomingNoisy: this.unHandledEvent(
+        "onVideoAudioBecomingNoisy"
+      ),
+    };
+
+    const androidPlayerEvents = {
+      onKeyChanged: keyEvent,
+    };
+
+    const unsupportedEvents = {
+      onBufferComplete: this.onBufferComplete, // buffer_complete
+      onBufferStart: this.onBufferStart, // buffer_start
+    };
+
+    const nativeEvents = {
+      ...adEvents,
+      ...androidPlayerEvents,
+      ...lifecycleEvents,
+      ...playerMetadataChangedEvents,
+      ...playerSystemEvents,
+      ...unsupportedEvents,
+      ...playbackEvents,
+      ...androidLifecyclePiPEvents,
+    };
+
+    const needToShowPlayNextOverlay =
+      isTV() && this.getPlayNextData() && !docked;
+
+    const needToShowDefaultControls = !(
+      (controls && !castAction?.state?.connected) ||
+      this.getPlayNextData()
     );
+
+    const playerContainerStyles = isApplePlatform()
+      ? styles.playerContainerBlack
+      : isTV() && isAudioItem
+      ? styles.playerContainerTransparent
+      : styles.playerContainerBlack;
+
+    const isInline = () => {
+      if (isTV()) {
+        return inline;
+      }
+
+      // HACK: on mobile overwrite inline value if player is fullScreen
+      return fullscreen ? false : inline;
+    };
+
+    const renderTransportControls = (playerDimensions) => {
+      const needsToRender =
+        !hideTransportControls &&
+        !needToShowPlayNextOverlay &&
+        this.props.mode !== "PIP";
+
+      if (shouldUseNativeControls) {
+        return null;
+      }
+
+      const TransportControls = isTV()
+        ? TransportControlsTV
+        : TransportControlsMobile;
+
+      return needsToRender ? (
+        <TransportControls
+          playerContent={entry}
+          configuration={this.getPluginConfiguration()}
+          playerDimensions={playerDimensions}
+          inline={isInline()}
+          docked={fullscreen ? false : docked}
+          isModal={isModal}
+          extraInfoText={castAction?.state?.friendlyStatus}
+          controlsAlwaysVisible={castAction?.state?.connected}
+          playNextData={this.getPlayNextData()}
+          needToShowDefaultControls={needToShowDefaultControls}
+        />
+      ) : null;
+    };
+
+    const isFullScreenAudioPlayer =
+      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+
+    const sharedWrapperViewProps = {
+      style,
+      entry,
+      inline,
+      docked,
+      isModal,
+      pip: this.state.piped,
+      layoutState: {
+        inline,
+        docked,
+        isModal,
+        pip: this.state.piped,
+      },
+      configuration: this.getPluginConfiguration(),
+      fullscreen: fullscreen,
+      isTabletPortrait: isTabletPortrait,
+      playNextData: this.getPlayNextData(),
+    };
+
+    const containerStyle = { flex: 1 };
+
+    const backgroundImageKey =
+      this.getPluginConfiguration()?.player_preview_image_key;
+
+    const renderMobilePlayer = () => {
+      return isFullScreenAudioPlayer && isAudioItem ? (
+        <View style={containerStyle}>
+          {(!castAction?.state?.connected || supportNativeCast) && (
+            <this.props.PlayerComponent
+              ref={this._assignRoot}
+              {...nativeEvents}
+              {...nativeProps}
+            />
+          )}
+          <AudioPlayerWrapper {...sharedWrapperViewProps} />
+        </View>
+      ) : (
+        <PlayerWrapper {...sharedWrapperViewProps}>
+          {(playerDimensions) => {
+            const shouldRenderBackground =
+              !R.isNil(backgroundImageKey) &&
+              backgroundImageKey.length > 0 &&
+              !this.onVideoLoadCalled &&
+              !this.state.isAd;
+
+            return (
+              <View style={styles.container}>
+                <View style={[playerContainerStyles, playerDimensions]}>
+                  {isAudioItem && (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={{
+                        ...playerDimensions,
+                        inlineAudioPlayer: true,
+                      }}
+                      style={getStyle(playerDimensions)}
+                    >
+                      <AudioPlayer
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        audio_item={entry}
+                        plugin_configuration={this.getPluginConfiguration()}
+                      />
+                    </AnimationComponent>
+                  )}
+
+                  {shouldRenderBackground && (
+                    <PlayerImageBackground
+                      imageKey={backgroundImageKey}
+                      configuration={this.getPluginConfiguration()}
+                      entry={entry}
+                      style={getBackgroundImageStyle(playerDimensions)}
+                    />
+                  )}
+
+                  {(!castAction?.state?.connected || supportNativeCast) && (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={playerDimensions}
+                      style={getStyle(playerDimensions)}
+                    >
+                      <this.props.PlayerComponent
+                        ref={this._assignRoot}
+                        {...nativeEvents}
+                        {...nativeProps}
+                        listener={this.props.listener}
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        pluginConfiguration={this.getPluginConfiguration()}
+                        controller={this.props.controller}
+                      >
+                        {this.childrenWithPlayNext()}
+                      </this.props.PlayerComponent>
+                    </AnimationComponent>
+                  )}
+                </View>
+
+                {renderTransportControls(playerDimensions)}
+                {!this.state.piped && (
+                  <PlayNextOverlay
+                    item={entry}
+                    playerIsDocked={docked}
+                    pluginConfiguration={this.getPluginConfiguration()}
+                    playerId={this.props.playerId}
+                    playNextData={this.getPlayNextData()}
+                    setNextVideoPreloadThresholdPercentage={
+                      this.props.setNextVideoPreloadThresholdPercentage
+                    }
+                  />
+                )}
+              </View>
+            );
+          }}
+        </PlayerWrapper>
+      );
+    };
+
+    const renderTVPlayer = () => {
+      return (
+        <View style={this.takeParentStyle} testID={"player-view"}>
+          <this.props.PlayerComponent
+            ref={this._assignRoot}
+            {...nativeEvents}
+            {...nativeProps}
+            listener={this.props.listener}
+            style={this.takeParentStyle}
+            pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
+          >
+            {this.childrenWithPlayNext()}
+          </this.props.PlayerComponent>
+
+          {renderTransportControls(this.takeParentStyle)}
+          {!isTvOSPlatform() && (
+            <PlayNextOverlay
+              item={entry}
+              playerIsDocked={docked}
+              pluginConfiguration={this.getPluginConfiguration()}
+              playerId={this.props.playerId}
+              playNextData={this.getPlayNextData()}
+              setNextVideoPreloadThresholdPercentage={
+                this.props.setNextVideoPreloadThresholdPercentage
+              }
+            />
+          )}
+        </View>
+      );
+    };
+
+    return isTV() ? renderTVPlayer() : renderMobilePlayer();
   }
 }