@applicaster/quick-brick-player 14.0.0-rc.78 → 14.0.0-rc.79

package/src/Player/index.tsx

@@ -5,7 +5,7 @@
 import React from "react";
 import * as R from "ramda";
 
-import { findNodeHandle, StyleSheet, View, Dimensions } from "react-native";
+import { findNodeHandle, StyleSheet, View, ViewStyle } from "react-native";
 
 import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
 import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
@@ -28,9 +28,9 @@ 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";
@@ -52,6 +52,8 @@ 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 },
@@ -65,25 +67,43 @@ const styles = StyleSheet.create({
   flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
-const logger = createLogger({
-  category: Categories.PLAYER,
-  subsystem: Subsystem,
-});
-
-const isTvOS = isTvOSPlatform();
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
-
-const getScreenAspectRatio = () => {
-  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
-  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
-
-  return longEdge / shortEdge;
+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;
@@ -94,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,
@@ -140,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() {
@@ -708,163 +749,219 @@ export default class VideoPlayer extends React.Component<
     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,
@@ -908,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,
@@ -921,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,
@@ -982,199 +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(),
+      configuration: pluginConfiguration,
       isTabletPortrait,
       playNextData: this.getPlayNextData(),
     };
 
-    const backgroundImageKey =
-      this.getPluginConfiguration()?.player_preview_image_key;
-
-    const shouldRenderNativePlayer =
-      !this.props.isCasting || this.supportNativeCast;
+    const shouldRenderNativePlayer = !isCasting || this.supportNativeCast;
 
     const aspectRatio =
-      !inline && isModal && !this.state.piped ? getScreenAspectRatio() : 16 / 9;
-
-    const renderMobilePlayer = () => {
-      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 ? (
-                <this.props.PlayerComponent
-                  ref={this._assignRoot}
-                  {...nativeEvents}
-                  {...nativeProps}
-                  listener={this.props.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>
-          }
-        />
-      ) : (
-        <VideoPlayerModal
-          isTabletPortrait={isTabletPortrait}
-          aspectRatio={aspectRatio}
-          pip={this.state.piped}
-          fullscreen={fullscreen}
-          modal={isModal}
-          style={{
-            tabletLandscapeWidth: getTabletWidth(
-              this.getPluginConfiguration().tablet_landscape_sidebar_width,
-              style
-            ),
-            width: style.width,
-            height: style.height,
-          }}
-          content={
-            <PlayerWrapper
-              {...sharedWrapperViewProps}
-              // eslint-disable-next-line react/no-unstable-nested-components
-              playerContent={(playerDimensions) => {
-                const shouldRenderBackground =
-                  !R.isNil(backgroundImageKey) &&
-                  backgroundImageKey.length > 0 &&
-                  !this.onVideoLoadCalled &&
-                  !this.state.isAd;
-
-                return (
-                  <View style={styles.container}>
-                    <View style={[playerContainerStyles, playerDimensions]}>
-                      {isAudioItem ? (
-                        <AudioPlayer
-                          style={styles.playerSize}
-                          audio_item={entry}
-                          plugin_configuration={this.getPluginConfiguration()}
-                        />
-                      ) : null}
-
-                      {shouldRenderBackground ? (
-                        <PlayerImageBackground
-                          imageKey={backgroundImageKey}
-                          configuration={this.getPluginConfiguration()}
-                          entry={entry}
-                          style={getBackgroundImageStyle(playerDimensions)}
-                        />
-                      ) : null}
-
-                      {shouldRenderNativePlayer ? (
-                        <View style={getStyle(playerDimensions)}>
-                          <this.props.PlayerComponent
-                            ref={this._assignRoot}
-                            {...nativeEvents}
-                            {...nativeProps}
-                            listener={this.props.listener}
-                            style={styles.playerSize}
-                            pluginConfiguration={this.getPluginConfiguration()}
-                            controller={this.props.controller}
-                          >
-                            {this.props.children}
-                          </this.props.PlayerComponent>
-                        </View>
-                      ) : 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>
-                );
-              }}
+      !inline && isModal && !piped ? getScreenAspectRatio() : 16 / 9;
+
+    const audioPlayerProps = {
+      ref: this._assignRoot,
+      ...this.getNativeEvents(),
+      ...this.getNativeProps(),
+    };
+
+    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} />
+              }
             />
-          }
-          extraContent={
-            <PlayerDetails
-              configuration={this.getPluginConfiguration()}
-              style={{ flex: 1 }}
+          </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}
-              isTabletLandscape={!isTabletPortrait}
-              inline={inline}
-              docked={docked}
-              isModal={isModal}
-              pip={this.state.piped}
+              aspectRatio={aspectRatio}
+              layoutState={sharedWrapperViewProps.layoutState}
+              playNextData={sharedWrapperViewProps.playNextData}
             />
-          }
-          collapsedContent={
-            <View style={styles.container}>
-              <DockedControls
-                entry={entry}
-                aspectRatio={aspectRatio}
-                layoutState={sharedWrapperViewProps.layoutState}
-                playNextData={sharedWrapperViewProps.playNextData}
-              />
-            </View>
-          }
-        />
-      );
+          </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 renderTVPlayer = () => {
-      return (
-        <View style={this.takeParentStyle} testID={"player-view"}>
-          <TVPlayerView
-            type={isAudioItem ? "audio" : "video"}
-            entry={entry}
-            inline={isInlineTV}
-            transportControls={renderTransportControls(this.takeParentStyle)}
-            PlayerComponent={this.props.PlayerComponent}
-            nativePlayerIsReady={this.state.nativePlayerIsReady}
-            pluginConfiguration={this.getPluginConfiguration()}
-            playerProps={{
-              ref: this._assignRoot,
-              ...nativeEvents,
-              ...nativeProps,
-              listener: this.props.listener,
-              style: this.takeParentStyle,
-              controller: this.props.controller,
-            }}
-            audioPlayerProps={{ style: getStyle(styles.playerSize) }}
-            playNextProps={{
-              playerIsDocked: docked,
-              playerId: this.props.playerId,
-              playNextData: this.getPlayNextData(),
-              setNextVideoPreloadThresholdPercentage:
-                this.props.setNextVideoPreloadThresholdPercentage,
-            }}
-          >
-            {this.props.children}
-          </TVPlayerView>
-        </View>
-      );
+    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();
   }
 }