@applicaster/quick-brick-player 14.0.0-rc.8 → 14.0.0-rc.80

package/src/Player/index.tsx

@@ -1,12 +1,12 @@
+/* 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 { flatten } from "@applicaster/zapp-react-native-utils/utils";
+import { findNodeHandle, StyleSheet, View, ViewStyle } from "react-native";
 
-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";
 
@@ -19,33 +19,41 @@ import {
   isWeb,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { PlayerWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
+import {
+  PlayerDetails,
+  PlayerWrapper,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 
 import { PlayNextOverlay } from "./PlayNextOverlay";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 
 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 { logger, getScreenAspectRatio } from "../utils";
 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 {
-  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";
 
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 import {
+  getTabletWidth,
   isAudioItem as isAudioItemUtil,
   isInlineTV as isInlineTVUtil,
 } from "@applicaster/zapp-react-native-utils/playerUtils";
 
+import { TVPlayerView } from "./PlayerView/TVPlayerView";
+import PlayerModal, { VideoPlayerModal } from "./PlayerModal";
+import { DockedControls } from "./AudioLayer/Layout/DockedControls";
+import { FlexImage } from "./AudioLayer/Layout/PlayerImage/FlexImage";
+import { PlayerError } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
+
+const isTvOS = isTvOSPlatform();
+
 const styles = StyleSheet.create({
   container: { flex: 1 },
   playerContainerBlack: { backgroundColor: DEFAULT_COLORS.black },
@@ -55,22 +63,47 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
-  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
+  flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
-const logger = createLogger({
-  category: Categories.PLAYER,
-  subsystem: Subsystem,
-});
-
-const isTvOS = isTvOSPlatform();
-
-const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+type VideoPlayerProps = QuickBrickPlayer.PlayerProps & {
+  isCasting?: boolean;
+  playNextData?: PlayNextData;
+  castAction?: {
+    state?: {
+      connected?: boolean;
+      friendlyStatus?: string;
+    };
+  };
+  openPiP?: () => void;
+  closePiP?: () => void;
+  playerEvent?: (eventName: string, eventData?: any) => void;
+  mode?: string;
+  updatePlayerState?: (state: string) => void;
+  setNextVideoPreloadThresholdPercentage?: (percentage: number) => void;
+  hideTransportControls?: boolean;
+  startComponentsAnimation?: boolean;
+  playableItem?: any;
+  playerPluginIdentifier?: string;
+  controller?: {
+    supportNativeCast?: () => boolean;
+    supportsNativeControls?: () => boolean;
+  };
+  children?: React.ReactNode;
+};
 
 export default class VideoPlayer extends React.Component<
-  QuickBrickPlayer.PlayerProps,
-  QuickBrickPlayer.NativePlayerState
+  VideoPlayerProps,
+  QuickBrickPlayer.NativePlayerState & {
+    isCastConnected?: boolean;
+    audioTrackId: string | null;
+    textTrackId: string | null;
+    keyEvent?: any;
+    isLive?: boolean;
+    seekableDuration?: number;
+    displayOverlay?: boolean;
+  }
 > {
   public static propTypes = {};
   _root: any;
@@ -81,7 +114,26 @@ export default class VideoPlayer extends React.Component<
   private onVideoLoadCalled: boolean;
   playNextData: PlayNextData;
 
-  state: QuickBrickPlayer.NativePlayerState = {
+  state: QuickBrickPlayer.NativePlayerState & {
+    isCastConnected?: boolean;
+    audioTrackId: string | null;
+    textTrackId: string | null;
+    keyEvent?: any;
+    isLive?: boolean;
+    seekableDuration?: number;
+    displayOverlay?: boolean;
+  } = {
+    // Base required properties from NativePlayerState
+    buffering: false,
+    docked: false,
+    fullscreen: false,
+    inline: false,
+    isModal: false,
+    isTabletPortrait: false,
+    muted: false,
+    showPoster: false,
+
+    // Extended properties
     audioTrackId: null,
     textTrackId: null,
     isCasting: this.props.isCasting,
@@ -127,6 +179,8 @@ export default class VideoPlayer extends React.Component<
       : { flexBasis: "auto", flexGrow: 1, flexShrink: 1 };
 
     this.playerPluginId = this.props?.playerPluginIdentifier;
+
+    this.renderPlayerContent = this.renderPlayerContent.bind(this);
   }
 
   componentWillUnmount() {
@@ -404,9 +458,12 @@ export default class VideoPlayer extends React.Component<
 
   // TODO: Should be unified on both platform
   onVideoError = ({ nativeEvent }) => {
-    const { message } = nativeEvent;
+    const description = nativeEvent.message;
+    const error = nativeEvent.error || nativeEvent.exception || "Unknown error"; // Android only fallback
+
+    const newError = new PlayerError(error, description);
 
-    return this.props?.listener?.onError(new Error(message));
+    return this.props?.listener?.onError(newError);
   };
 
   onPlayerPause = ({ nativeEvent = null }) => {
@@ -688,214 +745,223 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
-  childrenWithExtensions = () => {
-    const { docked, entry, children } = this.props;
-
-    if (!isTvOS) {
-      return children;
-    }
-
-    const output = [];
-
-    // audio-player
-    if (isAudioItemUtil(entry)) {
-      const { nativePlayerIsReady } = this.state;
-
-      // we have to wait ready status of native player view, before showing audio_player
-      if (nativePlayerIsReady) {
-        output.push(
-          <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
-            {children}
-          </View>
-        );
-      }
-    } else {
-      output.push(children);
-    }
-    // audio-player
-
-    // play-next
-    if (this.getPlayNextData()) {
-      output.push(
-        <PlayNextOverlay
-          key="play-next-overlay"
-          item={entry}
-          playerIsDocked={docked}
-          pluginConfiguration={this.getPluginConfiguration()}
-          playerId={this.props.playerId}
-          playNextData={this.getPlayNextData()}
-          setNextVideoPreloadThresholdPercentage={
-            this.props.setNextVideoPreloadThresholdPercentage
-          }
-        />
-      );
-    }
-    // play-next
-
-    return flatten(output); // prevent possible case with nested array
-  };
-
   get supportNativeCast() {
     return this.props.controller.supportNativeCast();
   }
 
-  render() {
-    const {
-      docked,
-      entry,
-      fullscreen,
-      hideTransportControls,
-      inline,
-      isModal,
-      isTabletPortrait,
-      muted,
-      style,
-      castAction,
-      startComponentsAnimation,
-    } = this.props;
-
-    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
-      this.state;
+  renderPlayerContent(playerDimensions: ViewStyle) {
+    const { entry, docked } = this.props;
+    const { isAd, piped } = this.state;
 
+    const pluginConfiguration = this.getPluginConfiguration();
     const isAudioItem = isAudioItemUtil(entry);
 
-    const getStyle = (dimensions) => {
-      const generalStyles = isAudioItem ? styles.audio : styles.video;
+    const backgroundImageKey = pluginConfiguration?.player_preview_image_key;
 
-      if (isAndroidPlatform() && isAudioItem) {
-        return generalStyles;
-      }
+    const shouldRenderBackground =
+      !R.isNil(backgroundImageKey) &&
+      backgroundImageKey.length > 0 &&
+      !this.onVideoLoadCalled &&
+      !isAd;
 
-      return { ...generalStyles, ...dimensions };
-    };
+    const shouldRenderNativePlayer =
+      !this.props.isCasting || this.supportNativeCast;
 
-    const getBackgroundImageStyle = (dimensions): any =>
-      Object.assign(
-        {},
-        isAudioItem ? styles.audio : { position: "absolute" },
-        dimensions
-      );
+    const playerContainerStyles = this.getPlayerContainerStyles(isAudioItem);
 
-    const nativeResizeMode = "ScaleAspectFit";
+    const backgroundImageStyle = this.getBackgroundImageStyle(
+      playerDimensions,
+      isAudioItem
+    );
 
-    const nowPlayingEnabled =
-      this.props?.pluginConfiguration?.nowPlayingEnabled;
+    const playerViewStyle = this.getPlayerViewStyle(
+      playerDimensions,
+      isAudioItem
+    );
 
-    const enableAutoAudioTrackSelection =
-      this.props.pluginConfiguration?.enable_auto_audio_track_selection;
+    const nativeEvents = this.getNativeEvents();
+    const nativeProps = this.getNativeProps();
 
-    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 renderedNativePlayer = this.renderNativePlayer(
+      shouldRenderNativePlayer,
+      playerViewStyle,
+      nativeEvents,
+      nativeProps,
+      pluginConfiguration
+    );
 
-    const liveSeekingEnabled =
-      (this.props.pluginConfiguration?.liveSeekingEnabled &&
-        this.state?.seekableDuration >
-          minimumAllowedSeekableDurationInSeconds) ||
-      false;
+    const renderedBackgroundImage = this.renderBackgroundImage(
+      shouldRenderBackground,
+      backgroundImageKey,
+      entry,
+      backgroundImageStyle
+    );
 
-    // keep undefined if not present, since not all native players have the property
-    const liveCatchUpEnabled =
-      this.props.pluginConfiguration?.liveCatchUpEnabled;
+    const renderedAudioPlayer = this.renderAudioPlayer(
+      isAudioItem,
+      entry,
+      pluginConfiguration
+    );
 
-    // TODO: Get screen data more reliable way useCurrentScreenData
-    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
+    const renderedTransportControls =
+      this.renderTransportControls(playerDimensions);
 
-    const isInlineTV = isInlineTVUtil(screenData);
+    const renderedPlayNextOverlay = this.renderPlayNextOverlay(
+      piped,
+      entry,
+      docked,
+      pluginConfiguration
+    );
 
-    let platformSpecificProps: any = isApplePlatform()
-      ? {
-          resizeMode: nativeResizeMode,
-        }
-      : {};
+    return (
+      <View style={styles.container}>
+        <View style={[playerContainerStyles, playerDimensions]}>
+          {renderedAudioPlayer}
+          {renderedBackgroundImage}
+          {renderedNativePlayer}
+        </View>
 
-    const supportsNativeControls =
-      !!this.props.controller?.supportsNativeControls?.();
+        {renderedTransportControls}
+        {renderedPlayNextOverlay}
+      </View>
+    );
+  }
 
-    const controls = isTvOS
-      ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
-      : supportsNativeControls && !this.getPlayNextData();
+  /* Returns player container style based on platform and content type (audio/video) */
+  private getPlayerContainerStyles = (isAudioItem: boolean) =>
+    isApplePlatform()
+      ? styles.playerContainerBlack
+      : isTV() && isAudioItem
+        ? styles.playerContainerTransparent
+        : styles.playerContainerBlack;
 
-    const shouldUseNativeControls =
-      controls &&
-      !startComponentsAnimation &&
-      !docked &&
-      !castAction?.state?.connected;
+  private getBackgroundImageStyle = (
+    dimensions: any,
+    isAudioItem: boolean
+  ): ViewStyle => ({
+    ...(isAudioItem ? styles.audio : { position: "absolute" }),
+    ...dimensions,
+  });
+
+  /* Returns player view style based on platform and content type (audio/video) */
+  private getPlayerViewStyle = (
+    dimensions: ViewStyle,
+    isAudioItem: boolean
+  ): ViewStyle => {
+    const generalStyles = isAudioItem ? styles.audio : {};
+
+    if (isAndroidPlatform() && isAudioItem) {
+      return generalStyles;
+    }
 
-    platformSpecificProps = {
-      ...platformSpecificProps,
-      controls: shouldUseNativeControls,
-    };
+    return { ...generalStyles, ...dimensions };
+  };
 
-    const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+  private renderAudioPlayer = (
+    isAudioItem: boolean,
+    entry: ZappEntry,
+    pluginConfiguration: Record<string, any>
+  ) => {
+    if (!isAudioItem) return null;
+
+    return (
+      <AudioPlayer
+        style={styles.playerSize}
+        audio_item={entry}
+        plugin_configuration={pluginConfiguration}
+      />
+    );
+  };
 
-    const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
+  private renderBackgroundImage = (
+    shouldRender: boolean,
+    imageKey: string,
+    entry: ZappEntry,
+    style: ViewStyle
+  ) => {
+    if (!shouldRender) return null;
 
-    const pictureInPictureEnabled =
-      this.props.pluginConfiguration?.pictureInPictureEnabled && !isAudioPlayer;
+    return (
+      <PlayerImageBackground imageKey={imageKey} entry={entry} style={style} />
+    );
+  };
 
-    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,
-      textTrackId,
-      liveSeekingEnabled,
-      liveCatchUpEnabled,
-      playerId: this.props.playerId,
-      pictureInPictureEnabled,
-      seekStep:
-        (this.props.pluginConfiguration?.seek_duration || SEEK_TIME) * 1000, // Only for Android
-      accessibilityProps: getAllAccessibilityProps(
-        this.getPluginConfiguration()
-      ),
-    };
+  private renderNativePlayer = (
+    shouldRender: boolean,
+    style: ViewStyle,
+    nativeEvents: ReturnType<typeof this.getNativeEvents>,
+    nativeProps: ReturnType<typeof this.getNativeProps>,
+    pluginConfiguration: Record<string, any>
+  ) => {
+    if (!shouldRender) return null;
+    const PlayerComponent = this.props.PlayerComponent;
+
+    return (
+      <View style={style}>
+        <PlayerComponent
+          ref={this._assignRoot}
+          {...nativeEvents}
+          {...nativeProps}
+          listener={this.props.listener}
+          style={styles.playerSize}
+          pluginConfiguration={pluginConfiguration}
+          controller={this.props.controller}
+        >
+          {this.props.children}
+        </PlayerComponent>
+      </View>
+    );
+  };
 
-    if (!isTvOS) {
-      // TODO: Move to RN method and remove from props.
-      // Causes tvOS bug: native player passes rate on fast seek,
-      // RN returns it and it breaks playback.
-      nativeProps.rate = rate;
-    }
+  private renderPlayNextOverlay = (
+    piped: boolean,
+    entry: ZappEntry,
+    docked: boolean,
+    pluginConfiguration: Record<string, any>
+  ) => {
+    if (piped) return null;
+
+    return (
+      <PlayNextOverlay
+        item={entry}
+        playerIsDocked={docked}
+        pluginConfiguration={pluginConfiguration}
+        playerId={this.props.playerId}
+        playNextData={this.getPlayNextData()}
+        setNextVideoPreloadThresholdPercentage={
+          this.props.setNextVideoPreloadThresholdPercentage
+        }
+      />
+    );
+  };
 
-    if (
-      this.isReactNativeMethodsSupported() &&
-      RNPlayerManager?.[this.playerPluginId]?.play
-    ) {
-      delete nativeProps["paused"];
-    }
+  // Extract native events to a separate method for reusability
+  getNativeEvents = () => {
+    const { keyEvent } = this.state;
 
     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
+      onAdBegin: this.onAdBegin,
+      onAdBreakBegin: this.onAdBreakBegin,
+      onAdBreakEnd: this.onAdBreakEnd,
+      onAdEnd: this.onAdEnd,
+      onAdError: this.onAdError,
+      onAdRequest: this.onAdRequest,
+      onAdClicked: this.onAdClicked,
+      onAdTapped: this.onAdTapped,
     };
 
     const playbackEvents = {
       onPlaybackRateChange: this.onPlaybackRateChange,
-      onPlayerPause: this.onPlayerPause, // pause
-      onPlayerResume: this.onPlayerResume, // play
-      onPlayerSeekComplete: this.onPlayerSeekComplete, // seek_complete
-      onPlayerSeekStart: this.onPlayerSeekStart, // seek_start
+      onPlayerPause: this.onPlayerPause,
+      onPlayerResume: this.onPlayerResume,
+      onPlayerSeekComplete: this.onPlayerSeekComplete,
+      onPlayerSeekStart: this.onPlayerSeekStart,
     };
 
     const lifecycleEvents = {
       onReadyForDisplay: this.unHandledEvent("onReadyForDisplay"),
-      onVideoEnd: this.onVideoEnd, // complete
-      onVideoError: this.onVideoError, // error
+      onVideoEnd: this.onVideoEnd,
+      onVideoError: this.onVideoError,
       onVideoProgress: this.onVideoProgress,
       onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
       onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
@@ -939,11 +1005,11 @@ export default class VideoPlayer extends React.Component<
     };
 
     const unsupportedEvents = {
-      onBufferComplete: this.onBufferComplete, // buffer_complete
-      onBufferStart: this.onBufferStart, // buffer_start
+      onBufferComplete: this.onBufferComplete,
+      onBufferStart: this.onBufferStart,
     };
 
-    const nativeEvents = {
+    return {
       ...adEvents,
       ...androidPlayerEvents,
       ...lifecycleEvents,
@@ -952,60 +1018,204 @@ export default class VideoPlayer extends React.Component<
       ...unsupportedEvents,
       ...playbackEvents,
       ...androidLifecyclePiPEvents,
+    } as const;
+  };
+
+  // Extract native props to a separate method for reusability
+  getNativeProps = () => {
+    const { entry, docked, fullscreen, inline, muted, castAction } = this.props;
+    const { audioTrackId, textTrackId, paused, seek, rate } = this.state;
+
+    const nativeResizeMode = "ScaleAspectFit";
+
+    const isFullScreenAudioPlayer =
+      this.getPluginConfiguration()?.full_screen_audio_player || false;
+
+    const isAudioItem = isAudioItemUtil(entry);
+    const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
+
+    let platformSpecificProps: Record<string, any> = isApplePlatform()
+      ? { resizeMode: nativeResizeMode }
+      : {};
+
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isTvOS
+      ? (supportsNativeControls && !this.isInlineTV()) ||
+        !!this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls =
+      controls &&
+      !this.props.startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
     };
 
+    const pictureInPictureEnabled =
+      this.props.pluginConfiguration?.pictureInPictureEnabled && !isAudioPlayer;
+
+    const nowPlayingEnabled =
+      this.props?.pluginConfiguration?.nowPlayingEnabled;
+
+    const enableAutoAudioTrackSelection =
+      this.props.pluginConfiguration?.enable_auto_audio_track_selection;
+
+    const minimumAllowedSeekableDurationInSeconds =
+      this.props?.pluginConfiguration?.minimumAllowedSeekableDurationInSeconds;
+
+    const liveSeekingEnabled =
+      (this.props.pluginConfiguration?.liveSeekingEnabled &&
+        this.state?.seekableDuration >
+          minimumAllowedSeekableDurationInSeconds) ||
+      false;
+
+    const liveCatchUpEnabled =
+      this.props.pluginConfiguration?.liveCatchUpEnabled;
+
+    const nativeProps = {
+      rate: undefined,
+      entry,
+      ...platformSpecificProps,
+      audioTrackId,
+      docked,
+      enableAutoAudioTrackSelection,
+      fullscreen,
+      inline,
+      muted,
+      nowPlayingEnabled,
+      paused,
+      seek,
+      textTrackId,
+      liveSeekingEnabled,
+      liveCatchUpEnabled,
+      playerId: this.props.playerId,
+      pictureInPictureEnabled,
+      seekStep:
+        (this.props.pluginConfiguration?.seek_duration || SEEK_TIME) * 1000,
+      accessibilityProps: getAllAccessibilityProps(
+        this.getPluginConfiguration()
+      ),
+    };
+
+    if (!isTvOS) {
+      nativeProps.rate = rate;
+    }
+
+    if (
+      this.isReactNativeMethodsSupported() &&
+      RNPlayerManager?.[this.playerPluginId]?.play
+    ) {
+      delete nativeProps.paused;
+    }
+
+    return nativeProps;
+  };
+
+  // Extract transport controls rendering to a separate method
+  renderTransportControls = (playerDimensions) => {
+    const {
+      hideTransportControls,
+      castAction,
+      docked,
+      fullscreen,
+      isModal,
+      entry,
+    } = this.props;
+
     const needToShowPlayNextOverlay =
       isTV() && this.getPlayNextData() && !docked;
 
+    const needsToRender =
+      !hideTransportControls &&
+      !needToShowPlayNextOverlay &&
+      this.props.mode !== "PIP";
+
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isTvOS
+      ? (supportsNativeControls && !this.isInlineTV()) ||
+        !!this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls =
+      controls &&
+      !this.props.startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
+
+    if (shouldUseNativeControls) {
+      return null;
+    }
+
+    const TransportControls = isTV()
+      ? TransportControlsTV
+      : TransportControlsMobile;
+
     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;
+        return this.props.inline;
       }
 
-      // HACK: on mobile overwrite inline value if player is fullScreen
-      return fullscreen ? false : inline;
+      return fullscreen ? false : this.props.inline;
     };
 
-    const renderTransportControls = (playerDimensions) => {
-      const needsToRender =
-        !hideTransportControls &&
-        !needToShowPlayNextOverlay &&
-        this.props.mode !== "PIP";
+    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;
+  };
 
-      if (shouldUseNativeControls) {
-        return null;
-      }
+  // Helper method for inline TV check
+  isInlineTV = () => {
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
 
-      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;
-    };
+    return isInlineTVUtil(screenData);
+  };
+
+  renderMobile = () => {
+    const {
+      docked,
+      entry,
+      fullscreen,
+      inline,
+      isModal,
+      isTabletPortrait,
+      style,
+      isCasting,
+      PlayerComponent,
+      listener,
+    } = this.props;
+
+    const { piped } = this.state;
+
+    const pluginConfiguration = this.getPluginConfiguration();
+
+    const isAudioItem = isAudioItemUtil(entry);
+
+    const isFullScreenAudioPlayer =
+      pluginConfiguration?.full_screen_audio_player || false;
 
     const sharedWrapperViewProps = {
       style,
@@ -1013,171 +1223,155 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
-      pip: this.state.piped,
+      pip: piped,
       layoutState: {
         inline,
         docked,
         isModal,
-        pip: this.state.piped,
+        pip: piped,
       },
-      configuration: this.getPluginConfiguration(),
-      fullscreen: fullscreen,
-      isTabletPortrait: isTabletPortrait,
+      configuration: pluginConfiguration,
+      isTabletPortrait,
       playNextData: this.getPlayNextData(),
     };
 
-    const containerStyle = { flex: 1 };
+    const shouldRenderNativePlayer = !isCasting || this.supportNativeCast;
 
-    const backgroundImageKey =
-      this.getPluginConfiguration()?.player_preview_image_key;
+    const aspectRatio =
+      !inline && isModal && !piped ? getScreenAspectRatio() : 16 / 9;
 
-    const shouldRenderNativePlayer =
-      !this.props.isCasting || this.supportNativeCast;
-
-    const renderMobilePlayer = () => {
-      return isFullScreenAudioPlayer && isAudioItem ? (
-        // Ensure the View remains in the native hierarchy for proper rendering and interaction
-        <View collapsable={false} style={containerStyle}>
-          {shouldRenderNativePlayer ? (
-            <this.props.PlayerComponent
-              ref={this._assignRoot}
-              {...nativeEvents}
-              {...nativeProps}
-              listener={this.props.listener}
-            />
-          ) : null}
-          <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>
-                  ) : null}
-
-                  {shouldRenderBackground ? (
-                    <PlayerImageBackground
-                      imageKey={backgroundImageKey}
-                      configuration={this.getPluginConfiguration()}
-                      entry={entry}
-                      style={getBackgroundImageStyle(playerDimensions)}
-                    />
-                  ) : null}
-
-                  {shouldRenderNativePlayer ? (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.player}
-                      additionalData={{
-                        ...playerDimensions,
-                        disableAnimatedComponent: isAudioItem,
-                      }}
-                      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.props.children}
-                      </this.props.PlayerComponent>
-                    </AnimationComponent>
-                  ) : null}
-                </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 audioPlayerProps = {
+      ref: this._assignRoot,
+      ...this.getNativeEvents(),
+      ...this.getNativeProps(),
     };
 
-    const renderTVPlayer = () => {
-      return (
-        <View style={this.takeParentStyle} testID={"player-view"}>
-          {isAudioItem && (isInlineTV || !isTvOS) ? (
-            <AudioPlayer
-              style={getStyle(styles.audioPlayerSize)}
-              audio_item={entry}
-              plugin_configuration={this.getPluginConfiguration()}
-            />
-          ) : null}
-
-          <this.props.PlayerComponent
-            ref={this._assignRoot}
-            {...nativeEvents}
-            {...nativeProps}
-            listener={this.props.listener}
-            style={this.takeParentStyle}
-            pluginConfiguration={this.getPluginConfiguration()}
-            controller={this.props.controller}
-          >
-            {!isInlineTV && this.childrenWithExtensions()}
-          </this.props.PlayerComponent>
-
-          {renderTransportControls(this.takeParentStyle)}
-          {!isTvOS && (
-            <PlayNextOverlay
-              item={entry}
-              playerIsDocked={docked}
-              pluginConfiguration={this.getPluginConfiguration()}
-              playerId={this.props.playerId}
-              playNextData={this.getPlayNextData()}
-              setNextVideoPreloadThresholdPercentage={
-                this.props.setNextVideoPreloadThresholdPercentage
+    return isFullScreenAudioPlayer && isAudioItem ? (
+      // Ensure the View remains in the native hierarchy for proper rendering and interaction
+      <PlayerModal
+        content={
+          <View collapsable={false} style={styles.container}>
+            {shouldRenderNativePlayer ? (
+              <PlayerComponent {...audioPlayerProps} listener={listener} />
+            ) : null}
+            <AudioPlayerWrapper {...sharedWrapperViewProps} />
+          </View>
+        }
+        collapsedContent={
+          <View style={styles.container}>
+            <DockedControls
+              entry={entry}
+              aspectRatio={1}
+              layoutState={sharedWrapperViewProps.layoutState}
+              playNextData={sharedWrapperViewProps.playNextData}
+              ImageComponent={
+                <FlexImage entry={entry} style={styles.flexImage} />
               }
             />
-          )}
-        </View>
-      );
+          </View>
+        }
+      />
+    ) : (
+      <VideoPlayerModal
+        isTabletPortrait={isTabletPortrait}
+        aspectRatio={aspectRatio}
+        pip={piped}
+        fullscreen={fullscreen}
+        modal={isModal}
+        style={{
+          tabletLandscapeWidth: getTabletWidth(
+            this.getPluginConfiguration().tablet_landscape_sidebar_width,
+            style
+          ),
+          width: style.width,
+          height: style.height,
+        }}
+        content={
+          <PlayerWrapper
+            {...sharedWrapperViewProps}
+            playerContent={this.renderPlayerContent}
+          />
+        }
+        extraContent={
+          <PlayerDetails
+            configuration={this.getPluginConfiguration()}
+            style={{ flex: 1 }}
+            entry={entry}
+            isTabletLandscape={!isTabletPortrait}
+            inline={inline}
+            docked={docked}
+            isModal={isModal}
+            pip={piped}
+          />
+        }
+        collapsedContent={
+          <View style={styles.container}>
+            <DockedControls
+              entry={entry}
+              aspectRatio={aspectRatio}
+              layoutState={sharedWrapperViewProps.layoutState}
+              playNextData={sharedWrapperViewProps.playNextData}
+            />
+          </View>
+        }
+      />
+    );
+  };
+
+  renderTV = () => {
+    const {
+      docked,
+      entry,
+      listener,
+      controller,
+      PlayerComponent,
+      playerId,
+      setNextVideoPreloadThresholdPercentage,
+      children,
+    } = this.props;
+
+    const isAudioItem = isAudioItemUtil(entry);
+
+    const playerProps = {
+      ref: this._assignRoot,
+      ...this.getNativeEvents(),
+      ...this.getNativeProps(),
+      listener,
+      style: this.takeParentStyle,
+      controller,
+    };
+
+    const audioPlayerProps = {
+      style: { ...styles.audio, ...this.takeParentStyle },
     };
 
-    return isTV() ? renderTVPlayer() : renderMobilePlayer();
+    return (
+      <View style={this.takeParentStyle} testID={"player-view"}>
+        <TVPlayerView
+          type={isAudioItem ? "audio" : "video"}
+          entry={entry}
+          inline={this.isInlineTV()}
+          transportControls={this.renderTransportControls(this.takeParentStyle)}
+          PlayerComponent={PlayerComponent}
+          nativePlayerIsReady={this.state.nativePlayerIsReady}
+          pluginConfiguration={this.getPluginConfiguration()}
+          playerProps={playerProps}
+          audioPlayerProps={audioPlayerProps}
+          playNextProps={{
+            playerIsDocked: docked,
+            playerId: playerId,
+            playNextData: this.getPlayNextData(),
+            setNextVideoPreloadThresholdPercentage:
+              setNextVideoPreloadThresholdPercentage,
+          }}
+        >
+          {children}
+        </TVPlayerView>
+      </View>
+    );
+  };
+
+  render() {
+    return isTV() ? this.renderTV() : this.renderMobile();
   }
 }