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

package/src/Player/index.tsx

@@ -1,173 +1,181 @@
+/* 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 * as R from "ramda";
+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");
+};
 
-import { findNodeHandle, NativeModules, StyleSheet, View } from "react-native";
-import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
-import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
+const setupEventLogging = (player, events, onEvent) => {
+  let previous_event_time;
 
-import { AudioPlayer } from "@applicaster/zapp-react-native-ui-components/Components/AudioPlayer";
-import {
-  isAndroidPlatform,
-  isApplePlatform,
-  isTV,
-  isTvOSPlatform,
-  isWeb,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
+  events.map((event) =>
+    player.addEventListener(event, () => {
+      const event_time = Date.now();
 
-import { PlayerWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
+      const log = `<${event}>: ${event_time - window.start_time} ms${
+        previous_event_time ? ` (+${event_time - previous_event_time})` : ""
+      }`;
 
-import { PlayNextOverlay } from "./PlayNextOverlay";
-import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
-import { AnalyticsTracker } from "@applicaster/zapp-react-native-utils/analyticsUtils/analyticsTracker";
+      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 {
-  AD_EVENT,
-  GENERAL_EVENT,
-  PLAYBACK_EVENT,
-  QOS_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";
+  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;
+
+    const hls = new HLS(config);
+    hls.loadSource(stream.src);
+    hls.attachMedia(playerRef);
+
+    return true;
+  } catch (err) {
+    console.error(err);
+  }
 
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
+  return false;
 };
 
-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%" },
-});
+const setupDASHPlayer = (stream, playerRef) => {
+  try {
+    const player = DASH.MediaPlayer().create();
+    player.initialize(playerRef, stream.src, true);
 
-const logger = createLogger({
-  category: Categories.PLAYER,
-  subsystem: Subsystem,
-});
+    player.updateSettings({
+      streaming: {
+        buffer: {
+          bufferToKeep: 30, // https://cdn.dashjs.org/latest/jsdoc/module-Settings.html#~Buffer:~:text=buffer%20in%20seconds.-,bufferToKeep,-number
+        },
+      },
+    });
+
+    if (stream.license_url) {
+      player.setProtectionData({
+        "com.widevine.alpha": {
+          serverURL: stream.license_url,
+          priority: 0,
+          audioRobustness: "SW_SECURE_CRYPTO",
+          videoRobustness: "SW_SECURE_CRYPTO",
+        },
+      });
+    }
+
+    return true;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return false;
+};
 
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
   QuickBrickPlayer.NativePlayerState
 > {
-  public static propTypes = {};
   _root: any;
-  analyticsTracker: AnalyticsTracker;
   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,
-  };
 
   constructor(props) {
     super(props);
-    this.onVideoLoadCalled = false; // android
+
+    this.state = {
+      logs: [],
+    };
 
     this.takeParentStyle = isWeb()
       ? { width: "100%", flex: "1 1 auto", objectFit: "contain" }
       : { flexBasis: "auto", flexGrow: 1, flexShrink: 1 };
 
-    const entry = this.props?.entry;
-    this.analyticsTracker = new AnalyticsTracker(entry);
     this.playerPluginId = this.props?.playerPluginIdentifier;
   }
 
-  componentWillUnmount() {
-    this.stopBackgroundPlayback();
-
-    this.playbackStarted = false;
-    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
-    this.onPlayerClosed();
-
-    if (isAndroidPlatform()) {
-      this.disablePiP();
-    }
-  }
-
   componentDidMount() {
-    this.playbackStarted = false;
-    this.onPlayerPresented();
-  }
-
-  shouldComponentUpdate(nextProps) {
-    const srcPath = ["entry", "content", "src"];
+    const {
+      content: { src },
+      extensions: { drm },
+    } = this.props.entry;
 
-    // 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));
-  }
+    const stream = { src, license_url: drm?.widevine?.license_url };
 
-  componentDidUpdate(prevProps) {
-    if (
-      this.props.castAction?.state?.connected &&
-      !this.state.isCastConnected
-    ) {
-      this.stopBackgroundPlayback();
-      this.setState({ isCastConnected: true });
-    }
+    window.start_time = Date.now();
 
-    if (
-      !this.props.castAction?.state?.connected &&
-      this.state.isCastConnected
-    ) {
-      this.setState({ isCastConnected: false });
+    if (isDASH(src)) {
+      setupDASHPlayer(stream, this._root);
+    } else if (isHLS(src)) {
+      setupHLSPlayer(stream, this._root);
     }
 
-    if (prevProps.entry?.content?.src !== this.props.entry?.content?.src) {
-      this.stopBackgroundPlayback();
-      this.playbackStarted = false;
-    }
+    setupEventLogging(this._root, EVENTS, (log) => {
+      this.setState(({ logs }) => ({ logs: [...logs, log] }));
+    });
   }
 
-  getPlayNextData = () => this.props.playNextData as PlayNextData;
-
   /**
    * Assigns root / ref of the player.
    */
@@ -175,1034 +183,12 @@ export default class VideoPlayer extends React.Component<
     this._root = component;
   };
 
-  getPluginConfiguration = () => {
-    return this.props.pluginConfiguration;
-  };
-
-  /**
-   * 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 nativeEvent object
-   * nativeEvent contains the return value from native
-   */
-  handleAnalyticEvent = (event, data = {}) => {
-    const entry = this.props?.entry;
-    const playerState = this.getState();
-
-    if (this.analyticsTracker?.handleAnalyticEvent) {
-      this.analyticsTracker?.handleAnalyticEvent?.(
-        event,
-        { ...data, player_type: this.props.playerPluginIdentifier },
-        entry,
-        playerState
-      );
-    }
-  };
-
-  /**
-   * 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 } });
-    }
-  };
-
-  /**
-   * Sets either subtitle language, or audio language if we have a selected a new locale.
-   * If no locale is set it defaults to system language for audio, and leaves subtitles unaltered.
-   */
-  setLanguage = (selected = null) => {
-    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.handleAnalyticEvent(GENERAL_EVENT.player_presented);
-  };
-
-  onPlayerClosed = () => {
-    this.handleAnalyticEvent(GENERAL_EVENT.player_closed);
-  };
-
-  onPlayerSessionEnd = () => {
-    // TODO: Implement method on native android, ios exists
-    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
-  };
-
-  onPlayerSessionStart = () => {
-    // TODO: Implement method on native android, ios exists
-
-    this.handleAnalyticEvent(GENERAL_EVENT.session_start);
-  };
-
-  onVideoEnd = () => {
-    this.setState({ displayOverlay: !this.state.displayOverlay }, () => {
-      if (this.state?.displayOverlay) {
-        this.handleAnalyticEvent(PLAYBACK_EVENT.complete);
-        this.props?.listener?.onVideoEnd({});
-      }
-    });
-  };
-
-  // TODO: Should be unified on both platform
-  onVideoError = ({ nativeEvent }) => {
-    const { message } = nativeEvent;
-
-    this.handleAnalyticEvent(PLAYBACK_EVENT.error, nativeEvent);
-
-    return this.props?.listener?.onError(new Error(message));
-  };
-
-  onPlayerPause = ({ nativeEvent = null }) => {
-    this.setState({ paused: true });
-    this.props?.listener?.onPlayerPause(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.pause, 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 });
-      this.handleAnalyticEvent(PLAYBACK_EVENT.play, nativeEvent);
-    }
-  };
-
-  onPlayerSeekComplete = ({ nativeEvent }) => {
-    this.props?.listener?.onPlayerSeekComplete(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.seek_complete, nativeEvent);
-  };
-
-  onPlayerSeekStart = ({ nativeEvent }) => {
-    this.props?.listener?.onPlayerSeekStart(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.seek_start, nativeEvent);
-  };
-
-  onBufferStart = ({ nativeEvent }) => {
-    this.props?.listener?.onBufferStart(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.buffer_start, nativeEvent);
-  };
-
-  onBufferComplete = ({ nativeEvent }) => {
-    this.props?.listener?.onBufferComplete(nativeEvent);
-    this.handleAnalyticEvent(PLAYBACK_EVENT.buffer_complete, nativeEvent);
-  };
-
-  onPlayerNext = ({ nativeEvent }) => {
-    // TODO: Implement method on native
-
-    this.handleAnalyticEvent(PLAYBACK_EVENT.next, nativeEvent);
-  };
-
-  onPlayerPrevious = ({ nativeEvent }) => {
-    // TODO: Implement method on native
-
-    this.handleAnalyticEvent(PLAYBACK_EVENT.previous, nativeEvent);
-  };
-
-  onPlayerStop = ({ nativeEvent }) => {
-    // TODO: Implement method on native
-
-    this.handleAnalyticEvent(PLAYBACK_EVENT.stop, nativeEvent);
-  };
-
-  onVideoBandwidthUpdate = ({ nativeEvent }) => {
-    // TODO: Implement method on native
-
-    this.handleAnalyticEvent(QOS_EVENT.bitrate_changed, nativeEvent);
-  };
-
-  onAdBegin = ({ nativeEvent }) => {
-    this.setState({ isAd: true });
-    this.handleAnalyticEvent(AD_EVENT.ad_start, nativeEvent);
-    this.props.listener?.onAdBegin?.(nativeEvent);
-  };
-
-  onAdBreakBegin = ({ nativeEvent }) => {
-    this.setState({ isAd: true });
-    this.handleAnalyticEvent(AD_EVENT.ad_break_start, nativeEvent);
-    this.props.listener?.onAdBreakBegin?.(nativeEvent);
-  };
-
-  onAdBreakEnd = ({ nativeEvent }) => {
-    this.setState({ isAd: false });
-    this.handleAnalyticEvent(AD_EVENT.ad_break_completed, nativeEvent);
-    this.props.listener?.onAdBreakEnd?.(nativeEvent);
-  };
-
-  onAdEnd = ({ nativeEvent }) => {
-    this.setState({ isAd: false });
-    this.handleAnalyticEvent(AD_EVENT.ad_complete, nativeEvent);
-    this.props.listener?.onAdEnd?.(nativeEvent);
-  };
-
-  onAdError = ({ nativeEvent }) => {
-    this.setState({ isAd: false });
-    this.handleAnalyticEvent(AD_EVENT.ad_error, nativeEvent);
-    this.props.listener?.onAdError?.(nativeEvent);
-  };
-
-  onAdRequest = ({ nativeEvent }) => {
-    this.handleAnalyticEvent(AD_EVENT.ad_request, nativeEvent);
-    this.props.listener?.onAdRequest?.(nativeEvent);
-  };
-
-  onAdClicked = ({ nativeEvent }) => {
-    this.handleAnalyticEvent(AD_EVENT.ad_clicked, nativeEvent);
-    // Broadcast click event
-    this.props.playerEvent("ad-clicked", nativeEvent);
-    this.props.listener?.onAdClicked?.(nativeEvent);
-  };
-
-  onAdTapped = ({ nativeEvent }) => {
-    this.handleAnalyticEvent(AD_EVENT.ad_tapped, 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) {
-          this.handleAnalyticEvent(PLAYBACK_EVENT.load_video, {
-            player_type: this.props.playerPluginIdentifier,
-          });
-
-          // 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() {
-    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
-      onPlayerSessionEnd: this.onPlayerSessionEnd, // session_end
-      onPlayerSessionStart: this.onPlayerSessionStart, // session_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"),
-      onVideoBandwidthUpdate: this.onVideoBandwidthUpdate,
-    };
-
-    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
-      onPlayerNext: this.onPlayerNext, // next
-      onPlayerPrevious: this.onPlayerPrevious, // previous
-      onPlayerStop: this.onPlayerStop, // stop
-    };
-
-    const nativeEvents = {
-      ...adEvents,
-      ...androidPlayerEvents,
-      ...lifecycleEvents,
-      ...playerMetadataChangedEvents,
-      ...playerSystemEvents,
-      ...unsupportedEvents,
-      ...playbackEvents,
-      ...androidLifecyclePiPEvents,
-    };
-
-    const needToShowPlayNextOverlay = this.getPlayNextData() && !docked;
-
-    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()}
-          nativeControls={!!controls}
-        />
-      ) : 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();
+    return (
+      <View style={this.takeParentStyle} testID={"player-view"}>
+        <video autoPlay controls ref={this._assignRoot}></video>
+        <DebugOverlay logs={this.state.logs} />
+      </View>
+    );
   }
 }