@applicaster/quick-brick-player 13.0.0-rc.9 → 13.0.0-rc.91

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.9",
+  "version": "13.0.0-rc.91",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo 'skipping ts build for core packages'"
   },
   "files": [
@@ -36,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.6",
-    "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.112",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.9",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.9",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.9",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.88",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.91",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.91",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.91",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
@@ -51,12 +50,28 @@
     "videojs-contrib-quality-levels": "3.0.0"
   },
   "peerDependencies": {
+    "@applicaster/applicaster-types": "*",
+    "@applicaster/blur": "*",
     "@applicaster/quick-brick-xray": "*",
     "@applicaster/react-native-color-thief": "*",
-    "@types/node": "*",
-    "@types/react-native": "0.69.6",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
-    "react-native-linear-gradient": "*"
+    "@applicaster/zapp-pipes-v2-client": "*",
+    "@applicaster/zapp-react-dom-ui-components": "*",
+    "@applicaster/zapp-react-native-redux": "*",
+    "@applicaster/zapp-react-native-tvos-ui-components": "*",
+    "@babel/runtime": "*",
+    "@react-native-community/netinfo": "*",
+    "immer": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-fs": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-web": "*",
+    "react-native-webview": "*",
+    "uglify-js": "*",
+    "validate-color": "*",
+    "zustand": "*"
   }
 }

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -55,6 +55,11 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
       return;
     }
 
+    // initial state setup - show correct mute/unmute icon based on current state
+    if (player?.playerState?.isReadyToPlay) {
+      setImageUri(player.getIsMuted() ? asset.active : asset.inactive);
+    }
+
     // active action = muted, inactive = unmuted
     return player.addListener({
       id: liveImageButtonsListenerKey,
@@ -73,10 +78,17 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
           setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
         onPlayerClose: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
         },
         onVideoEnd: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
+        },
+        onPlayerResume: () => {
+          setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
       },
     });
@@ -93,7 +105,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function AssetComponent(props: CellActionAssetComponentProps) {
+function AssetImage(props: CellActionAssetComponentProps) {
   const { cellUUID: playerId, asset } = props;
   const [imageUri, setImageUri] = useState<Asset>(null);
 
@@ -108,3 +120,5 @@ export function AssetComponent(props: CellActionAssetComponentProps) {
 
   return <View />;
 }
+
+export const AssetComponent = React.memo(AssetImage);

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle, View } from "react-native";
+import { ViewStyle, View, Dimensions as ScreenDimensions } from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -17,13 +17,7 @@ import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Comp
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
-import {
-  formatSpeed,
-  hasDatePassed,
-  loadItemsFromStorage,
-  NAMESPACE,
-} from "./utils";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { formatSpeed } from "./utils";
 import { addQueryParam, getLiveUrl } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
@@ -34,6 +28,15 @@ import {
 import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
+import {
+  SleepTimerController,
+  SleepTimerState,
+  SLEEP_TIMER_OFF,
+} from "./SleepTimerManager";
+import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
+import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
   category: "AudioPlayerWrapper",
@@ -50,6 +53,7 @@ type Configuration = {
   [key: string]: any;
   magic_background?: boolean;
   audio_player_background_image_query?: string;
+  audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -71,8 +75,7 @@ type Props = {
   isTabletPortrait?: boolean;
 };
 
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
 
 const Styles = {
   mainContainer: (style: ViewStyle) => {
@@ -98,7 +101,11 @@ const Styles = {
     height: 96,
     marginHorizontal: 24,
   },
-  playerDetails: { marginTop: 60 },
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
+  },
 
   linearGradient: {
     flex: 1,
@@ -116,9 +123,20 @@ const sleeps = [
   { label: "2 hours", value: 120 },
 ];
 
+const speeds = [
+  { label: "0.8x", value: 0.8 },
+  { label: "1x", value: 1.0 },
+  { label: "1.2x", value: 1.2 },
+  { label: "1.5x", value: 1.5 },
+  { label: "2x", value: 2.0 },
+];
+
+const edges: Edge[] = ["right", "left", "top"];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
+  const theme = useTheme();
 
   const {
     docked,
@@ -131,14 +149,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     isTabletPortrait,
   } = props;
 
-  const speeds = [
-    { asset: configuration["speed_0_8"], value: 0.8 },
-    { asset: configuration["speed_1"], value: 1.0 },
-    { asset: configuration["speed_1_2"], value: 1.2 },
-    { asset: configuration["speed_1_5"], value: 1.5 },
-    { asset: configuration["speed_2"], value: 2.0 },
-  ];
-
   const isTablet = useIsTablet();
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
@@ -154,17 +164,29 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     configuration?.audio_live_player_update_interval
   );
 
-  const [playbackSpeed, setPlaybackSpeed] = useState({
-    asset: configuration["speed_1"],
-    value: 1.0,
-  });
+  const [sleepTimerManager, setSleepTimerManager] =
+    useState<SleepTimerController | null>(null);
 
-  const [sleepTimer, setSleepTimer] = useState({
-    label: "playback_sleep_off_label",
-    value: 0,
-  });
+  const [speedManager, setSpeedManager] = useState<SpeedController | null>(
+    null
+  );
 
-  const [sleepTimerDate, setSleepTimerDate] = useState(0);
+  useEffect(() => {
+    if (player) {
+      setSleepTimerManager(new SleepTimerController(player));
+      setSpeedManager(new SpeedController(player));
+    } else {
+      setSleepTimerManager(null);
+      setSpeedManager(null);
+    }
+  }, [player]);
+
+  const [playbackSpeed, setPlaybackSpeed] =
+    useState<PlaybackSpeed>(DEFAULT_SPEED);
+
+  const [sleepTimerState, setSleepTimerState] = useState<SleepTimerState>(
+    new SleepTimerState(SLEEP_TIMER_OFF, 0)
+  );
 
   const [defaultDimensions, setDefaultDimensions] =
     React.useState<Dimensions>(undefined);
@@ -189,82 +211,27 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
-  const cancelSleepTimer = async () => {
-    player?.cancelSleepTimer();
-
-    setSleepTimer({
-      label: "playback_sleep_off_label",
-      value: 0,
-    });
-
-    setSleepTimerDate(0);
-
-    await localStorage.removeItem("sleep", NAMESPACE);
-  };
-
-  const startSleepTimer = (timerValue: number) => {
-    try {
-      const currentDate = new Date();
-      const futureDate = new Date(currentDate.getTime() + timerValue * 60000);
-      const futureSleepDate = futureDate.getTime();
-
-      player?.cancelSleepTimer();
-
-      player?.startSleepTimer(futureSleepDate);
-
-      return futureSleepDate;
-    } catch (e) {
-      return 0;
-    }
-  };
-
-  const handleSleep = async (
-    timerValue: number,
-    currentFutureSleepDate = null
-  ) => {
-    if (currentFutureSleepDate) {
-      if (hasDatePassed(currentFutureSleepDate)) {
-        await cancelSleepTimer();
-
-        return 0;
-      }
-
-      return currentFutureSleepDate;
-    }
-
-    if (timerValue === 0) {
-      await cancelSleepTimer();
-
-      return timerValue;
-    }
-
-    return startSleepTimer(timerValue);
-  };
-
   useEffect(() => {
-    const loadSpeed = async () => {
-      const speed = await loadItemsFromStorage("speed");
+    const sleepSubscription =
+      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
 
-      if (playerState.isReadyToPlay && speed) {
-        setPlaybackSpeed(speed);
-        player?.setPlaybackRate(speed.value);
-      }
-    };
+    const speedSubscription =
+      speedManager?.playbackSpeed$.subscribe(setPlaybackSpeed);
 
-    const loadSleep = async () => {
-      const sleep = await loadItemsFromStorage("sleep");
-
-      if (playerState.isReadyToPlay && sleep) {
-        const { futureSleepDate, ...rest } = sleep;
-        setSleepTimer(rest);
-        const sleepTimerDate = await handleSleep(sleep.value, futureSleepDate);
-        setSleepTimerDate(sleepTimerDate);
-      }
+    return () => {
+      sleepSubscription?.unsubscribe();
+      speedSubscription?.unsubscribe();
     };
+  }, [sleepTimerManager, speedManager]);
 
-    loadSpeed().then();
-    loadSleep().then();
-  }, [playerState.isReadyToPlay]);
+  useEffect(() => {
+    if (!playerState.isReadyToPlay) {
+      return;
+    }
+
+    void speedManager?.loadSpeed();
+    void sleepTimerManager?.loadSleep();
+  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -292,7 +259,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const onPlaybackButtonPress = React.useCallback(() => {
     if (playerState.isBuffering) return;
-    playerState.isPaused ? player?.play() : player.pause();
+    playerState.isPaused ? player?.play() : player?.pause();
   }, [playerState, player]);
 
   const seekDuration = toNumberWithDefault(10, value("seek_duration"));
@@ -307,26 +274,16 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const onSpeedSelect = React.useCallback(
     async (item) => {
-      setPlaybackSpeed(item);
-      player.setPlaybackRate(item.value);
-      await localStorage.setItem("speed", item, NAMESPACE);
+      await speedManager?.setPlaybackSpeed(item);
     },
-    [player, setPlaybackSpeed]
+    [speedManager]
   );
 
   const onSleepSelect = React.useCallback(
     async (item) => {
-      setSleepTimer(item);
-      const futureSleepDate = await handleSleep(item.value);
-      setSleepTimerDate(futureSleepDate);
-
-      await localStorage.setItem(
-        "sleep",
-        { ...item, futureSleepDate },
-        NAMESPACE
-      );
+      await sleepTimerManager?.setSleepTimer(item);
     },
-    [player, setSleepTimer]
+    [sleepTimerManager]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -341,15 +298,24 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [playbackSpeed, setPlaybackSpeed]);
+  }, [
+    playbackSpeed,
+    setPlaybackSpeed,
+    navigator,
+    onSpeedSelect,
+    configuration["playback_speed_title"],
+  ]);
 
   const onSleepButtonPress = React.useCallback(() => {
     navigator.openModalBottomSheet({
       modalBottomSheetContentProps: {
         items: [
-          { label: configuration["playback_sleep_off_label"], value: 0 },
+          {
+            label: configuration["playback_sleep_off_label"],
+            value: 0,
+          },
         ].concat(sleeps),
-        current_selection: sleepTimer,
+        current_selection: sleepTimerState.timer,
         onPress: onSleepSelect,
         title: configuration["playback_sleep_title"],
       },
@@ -357,7 +323,21 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [sleepTimer, setSleepTimer, configuration]);
+  }, [
+    navigator,
+    sleepTimerState.timer,
+    configuration["playback_sleep_title"],
+    configuration["playback_sleep_off_label"],
+    onSleepSelect,
+  ]);
+
+  // This method does not actually cancel the sleep timer
+  // (and should not to avoid race condition),
+  // it just performs the cleanup when timer expires
+  // TODO: rename it in code above
+  const cancelSleepTimer = React.useCallback(() => {
+    sleepTimerManager?.onTimerExpired();
+  }, [sleepTimerManager]);
 
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
@@ -378,8 +358,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
-
   const ContainerView = SafeAreaView;
 
   const MainContent = React.useMemo(() => {
@@ -406,9 +384,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
                 onSleepButtonPress={onSleepButtonPress}
                 playbackSpeedName={formatSpeed(playbackSpeed.value)}
                 playbackSleepName={
-                  sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
+                  sleepTimerState.timer.value === 0
+                    ? "sleep_timer"
+                    : "sleep_timer_active"
                 }
-                sleepTimerDate={sleepTimerDate}
+                sleepTimerDate={sleepTimerState.timerDate}
                 cancelSleepTimer={cancelSleepTimer}
                 onSkipLive={onSkipLive}
                 onCloseVideoModal={onCloseVideoModal}
@@ -458,26 +438,31 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
-    sleepTimer.value,
-    sleepTimerDate,
+    sleepTimerState.timer.value,
+    sleepTimerState.timerDate,
   ]);
 
   if (configuration.magic_background) {
-    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
+    const baseUrl = imageSrcFromMediaItem(entry, null);
 
     const queryParamName =
       configuration.audio_player_background_image_query || "width";
 
+    const defaultBackgroundColor =
+      configuration.audio_player_background_image_default_color ||
+      theme?.app_background_color;
+
     const queryParamValue = 15;
 
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const url =
+      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
       <MagicBG
         image={url}
         fallbackUrl={baseUrl}
         colors={entry?.extensions?.backgroundColors}
-        defaultColor="#000000"
+        defaultColor={defaultBackgroundColor}
       >
         {MainContent}
       </MagicBG>

package/src/Player/AudioLayer/Layout/DefaultLayout.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
 import * as R from "ramda";
-import { View } from "react-native";
+import { View, Dimensions as ScreenDimensions } from "react-native";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
-  ProgressBar,
   Controls,
-  TransportInfo,
   CountDown,
+  ProgressBar,
+  TransportInfo,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
@@ -15,26 +16,30 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   forwardButton,
+  PADDING_HORIZONTAL,
   playbackButton,
   rewindButton,
-  skipToStartButton,
   skipToLiveButton,
-  PADDING_HORIZONTAL,
-  speedButton,
+  skipToStartButton,
   sleepButton,
+  speedButton,
 } from "./defaultLayoutsConts";
 import { AudioDescription } from "../AudioDescription";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
-import { useEffect, useMemo, useState } from "react";
 import {
-  useModalAnimationContext,
   AnimationComponent,
   ComponentAnimationType,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import DockedLayout from "./DockedLayout";
 import { isValidDate } from "../../Utils";
+import { calculateBorderRadius } from "../utils";
+
+const getAudioPlayerWidthForTablet = (isPortraitMode: boolean) =>
+  isPortraitMode ? 463 : 350;
 
 type Dimensions = {
   width: number;
@@ -79,6 +84,9 @@ type LayoutProps = {
   defaultDimensions: Dimensions;
 };
 
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
+  ScreenDimensions.get("screen");
+
 const Styles = {
   container: { flex: 1 },
   tabletContainer: (isPortraitMode: boolean) => ({
@@ -86,42 +94,63 @@ const Styles = {
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
   }),
-  playerImageWrapper: {
+  playerImageWrapper: (docked: boolean) => ({
     width: "100%",
     maxHeight: 750,
-    marginTop: 80,
+    marginTop: docked ? 80 : 20,
+  }),
+  playerInfoWrapper: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
   },
-  tabletLayout: {
-    width: 463,
+  tabletLayout: (isPortraitMode: boolean) => ({
+    width: getAudioPlayerWidthForTablet(isPortraitMode),
     marginBottom: 80,
-  },
+    paddingHorizontal: undefined, // override paddingHorizontal
+  }),
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
     height: isTablet ? 64 : 50,
-    marginHorizontal: 10,
+    marginHorizontal: isTablet ? undefined : 10,
     justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
-  backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
-    const mobileValue = dimensions.width
+  backgroundImageContainer: (
+    dimensions: Dimensions,
+    isTablet: boolean,
+    isPortraitMode: boolean
+  ) => {
+    if (isTablet) {
+      const size = getAudioPlayerWidthForTablet(isPortraitMode);
+
+      return {
+        width: size,
+        height: size,
+      };
+    }
+
+    const mobileValue = dimensions?.width
       ? dimensions.width - PADDING_HORIZONTAL * 2
-      : 330;
+      : SCREEN_WIDTH - PADDING_HORIZONTAL * 2;
 
     return {
-      width: isTablet ? 463 : mobileValue,
-      height: isTablet ? 463 : mobileValue,
+      width: mobileValue,
+      height: mobileValue,
     };
   },
   backgroundImageContainerImageStyle: (
     isTablet: boolean,
     docked: boolean,
     startComponentsAnimation: boolean,
-    isActiveGesture: boolean
+    isActiveGesture: boolean,
+    playerAnimationState: PlayerAnimationStateT
   ) => ({
-    borderRadius:
-      (startComponentsAnimation && isActiveGesture) || docked
-        ? 0
-        : isTablet
-        ? 24
-        : 10,
+    borderRadius: calculateBorderRadius(
+      isTablet,
+      docked,
+      startComponentsAnimation,
+      isActiveGesture,
+      playerAnimationState
+    ),
   }),
 
   paddingHorizontal: {
@@ -173,8 +202,7 @@ export default function DefaultLayout(props: LayoutProps) {
   } = props;
 
   const isTablet = useIsTablet();
-  const { width, height } = dimensions;
-  const isPortraitMode = width < height;
+  const isPortraitMode = SCREEN_WIDTH < SCREEN_HEIGHT;
   const isLiveContent = playerState.isLive;
   const docked = layoutState.docked;
 
@@ -330,12 +358,15 @@ export default function DefaultLayout(props: LayoutProps) {
 
   const defaultImageDimensions = React.useMemo(
     () =>
-      defaultDimensions &&
-      Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions, isTablet]
+      Styles.backgroundImageContainer(
+        defaultDimensions,
+        isTablet,
+        isPortraitMode
+      ),
+    [defaultDimensions, isTablet, isPortraitMode]
   );
 
-  const { isActiveGesture, startComponentsAnimation } =
+  const { isActiveGesture, startComponentsAnimation, playerAnimationState } =
     useModalAnimationContext();
 
   return (
@@ -344,7 +375,10 @@ export default function DefaultLayout(props: LayoutProps) {
         isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
       }
     >
-      <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+      <AnimationComponent
+        animationType={ComponentAnimationType.componentFade}
+        style={isTablet ? Styles.playerInfoWrapper : undefined}
+      >
         <TransportInfo
           content={entry}
           value={value}
@@ -356,13 +390,16 @@ export default function DefaultLayout(props: LayoutProps) {
       </AnimationComponent>
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : undefined}
+        style={isTablet ? Styles.playerImageWrapper(docked) : undefined}
       >
         <AnimationComponent
           animationType={ComponentAnimationType.moveComponentHorizontal}
           additionalData={{
             disableAnimatedComponent: !isTablet,
-            moveValue: (dimensions.width - 463) / 2,
+            moveValue:
+              (dimensions.width -
+                getAudioPlayerWidthForTablet(isPortraitMode)) /
+              2,
             extraAnimation: !isTablet
               ? {
                   [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
@@ -375,12 +412,17 @@ export default function DefaultLayout(props: LayoutProps) {
         >
           <PlayerImageBackground
             entry={entry}
-            style={Styles.backgroundImageContainer(dimensions, isTablet)}
+            style={Styles.backgroundImageContainer(
+              dimensions,
+              isTablet,
+              isPortraitMode
+            )}
             imageStyle={Styles.backgroundImageContainerImageStyle(
               isTablet,
               docked,
               startComponentsAnimation,
-              isActiveGesture
+              isActiveGesture,
+              playerAnimationState
             )}
             defaultImageDimensions={defaultImageDimensions}
           />
@@ -391,7 +433,7 @@ export default function DefaultLayout(props: LayoutProps) {
       <View
         style={[
           Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : undefined,
+          isTablet ? Styles.tabletLayout(isPortraitMode) : undefined,
         ]}
       >
         {!docked && (
@@ -405,9 +447,10 @@ export default function DefaultLayout(props: LayoutProps) {
               layoutState={layoutState}
             />
             <Separator />
-            {needsToShowProgressBar && (
+            {needsToShowProgressBar ? (
               <View>
                 <ProgressBar
+                  name={"audio-default-layout"}
                   content={entry}
                   value={value}
                   visible={true}
@@ -422,17 +465,17 @@ export default function DefaultLayout(props: LayoutProps) {
                   onSkipLive={onSkipLive}
                 />
 
-                {showCounter && timeLeft >= 0 && (
+                {showCounter && timeLeft >= 0 ? (
                   <CountDown
                     timeLeft={timeLeft}
                     value={value}
                     title={sleepTitle}
                   />
-                )}
+                ) : null}
 
                 <Separator />
               </View>
-            )}
+            ) : null}
             <Controls
               value={value}
               visible={true}

package/src/Player/AudioLayer/Layout/DockedLayout.tsx

@@ -9,18 +9,19 @@ import * as R from "ramda";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
+  Button,
   ContentInfo,
-  ProgressBar,
   Controls,
-  Button,
+  ProgressBar,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import {
-  useModalAnimationContext,
   AnimationComponent,
   ComponentAnimationType,
+  defaultAspectRatioWidth,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Dimensions = {
@@ -113,7 +114,7 @@ const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
+  paddingLeft: addPadding ? defaultAspectRatioWidth(minimisedHeight) || 100 : 0,
 });
 
 const animatedContainerStyle = (docked: boolean): ViewStyle => ({
@@ -133,24 +134,11 @@ const backgroundImageStyle = (
 });
 
 const controlButtons = (
-  isPlayNextEnabled: boolean,
   live: boolean,
   paused: boolean,
   buffering: boolean,
   playerId: string
 ): Array<ControlsButton> => {
-  if (isPlayNextEnabled) {
-    return [
-      {
-        size: "medium",
-        name: "play_next",
-        icon: "play_next",
-        preferredFocus: true,
-        style: styles.buttons,
-      },
-    ];
-  }
-
   if (buffering) {
     return [
       {
@@ -230,7 +218,7 @@ export default function DockedLayout(props: LayoutProps) {
   } = useModalAnimationContext();
 
   const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
     []
   );
 
@@ -245,18 +233,19 @@ export default function DockedLayout(props: LayoutProps) {
       ]}
     >
       {!playerState.isLive &&
-        (layoutState.docked || startComponentsAnimation) && (
-          <ProgressBar
-            content={entry}
-            value={value}
-            visible={visible}
-            layoutState={layoutState}
-            onPlayerSeek={onPlayerSeek}
-            playerState={playerState}
-            startComponentsAnimation={startComponentsAnimation}
-            docked
-          />
-        )}
+      (layoutState.docked || startComponentsAnimation) ? (
+        <ProgressBar
+          name={"audio-docked-layout"}
+          content={entry}
+          value={value}
+          visible={visible}
+          layoutState={layoutState}
+          onPlayerSeek={onPlayerSeek}
+          playerState={playerState}
+          startComponentsAnimation={startComponentsAnimation}
+          docked
+        />
+      ) : null}
 
       <View style={styles.content}>
         <View
@@ -302,7 +291,6 @@ export default function DockedLayout(props: LayoutProps) {
             value={value}
             visible={visible}
             buttons={R.partial(controlButtons, [
-              playNextData,
               playerState.isLive && liveButton,
             ])}
             style={styles.playPauseButton}

package/src/Player/AudioLayer/Layout/defaultLayoutsConts.ts

@@ -17,7 +17,7 @@ const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
 ): number =>
-  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? 95 : 40;
+  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? undefined : 40;
 
 export const PADDING_HORIZONTAL = 15;
 
@@ -37,8 +37,8 @@ export const playbackButton = ({
   const icon = playerState.isPaused
     ? "play"
     : playerState.isLive && liveButton
-    ? "stop"
-    : "pause";
+      ? "stop"
+      : "pause";
 
   return {
     size: playbackButtonSize(isTablet),

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -47,7 +47,7 @@ const fetchPaletteAndDominantColor = async (imageUrl: string) => {
   const dominant = await getDominantColor(imageUrl);
   const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
 
-  return { gradientColors: colors.slice(0, 2), dominantColor };
+  return { gradientColors: colors.slice(0, 2).reverse(), dominantColor };
 };
 
 export const MagicBG: React.FC<MagicBGProps> = ({

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -0,0 +1,119 @@
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { hasDatePassed, NAMESPACE } from "./utils";
+
+const { log_debug, log_error } = createLogger({
+  subsystem: "Player",
+  category: "SleepTimerManager",
+});
+
+export type SleepTimer = {
+  label: string;
+  // interval in minutes for UI at the moment when timer was first started
+  value: number;
+};
+
+export const SLEEP_TIMER_OFF: SleepTimer = {
+  label: "playback_sleep_off_label",
+  value: 0,
+};
+
+export class SleepTimerState {
+  constructor(
+    public timer: SleepTimer,
+    public timerDate: number
+  ) {}
+}
+
+const SLEEP_PREFERENCE_KEY = "sleep";
+
+export class SleepTimerController {
+  private sleepTimerStateSubject = new BehaviorSubject<SleepTimerState>(
+    new SleepTimerState(SLEEP_TIMER_OFF, 0)
+  );
+
+  constructor(private player: Player) {}
+
+  get sleepTimerState$() {
+    return this.sleepTimerStateSubject.asObservable();
+  }
+
+  private async scheduleSleep(sleepDate): Promise<boolean> {
+    log_debug(`Setting sleep interval to ${sleepDate}`);
+
+    try {
+      this.player.cancelSleepTimer?.();
+      this.player.startSleepTimer?.(sleepDate);
+
+      return true;
+    } catch (e) {
+      log_error("Failed to start sleep timer", { error: e.message });
+
+      return false;
+    }
+  }
+
+  async setSleepTimer(item: SleepTimer) {
+    // User has selected Off state
+    if (item.value === 0) {
+      log_debug("Cancelling sleep timer");
+      this.player.cancelSleepTimer?.();
+
+      return this.onTimerExpired();
+    }
+
+    log_debug(`Starting sleep timer in ${item.value} minutes`);
+
+    const futureSleepDate = Date.now() + item.value * 60000;
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      await localStorage.setItem(
+        SLEEP_PREFERENCE_KEY,
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(item, futureSleepDate)
+      );
+    }
+  }
+
+  async onTimerExpired() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
+  }
+
+  async loadSleep() {
+    const sleep = await localStorage.getItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    if (!sleep) return;
+
+    const { futureSleepDate, ...rest } = sleep;
+
+    if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
+      log_debug("Sleep date has already passed");
+      await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+      return;
+    }
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(rest as SleepTimer, futureSleepDate)
+      );
+    }
+  }
+
+  // Will be called if user closed the player explicitly.
+  // TODO: check if it will be called on Android when we need.
+  //  Probably we will have to handle it on native instead.
+  public static async onPlayerDestroy() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+  }
+}

package/src/Player/AudioLayer/SpeedManager.ts

@@ -0,0 +1,52 @@
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { NAMESPACE } from "./utils";
+
+const { log_debug } = createLogger({
+  subsystem: "Player",
+  category: "PlaybackSpeedManager",
+});
+
+export type PlaybackSpeed = {
+  asset: string;
+  value: number;
+};
+
+const SPEED_PREFERENCE_KEY = "speed";
+
+export const DEFAULT_SPEED: PlaybackSpeed = {
+  asset: "speed_1",
+  value: 1.0,
+};
+
+// todo: should not be applied to live streams
+export class SpeedController {
+  private playbackSpeedSubject = new BehaviorSubject<PlaybackSpeed>(
+    DEFAULT_SPEED
+  );
+
+  constructor(private player: Player) {}
+
+  get playbackSpeed$() {
+    return this.playbackSpeedSubject.asObservable();
+  }
+
+  async loadSpeed() {
+    const speed = await localStorage.getItem(SPEED_PREFERENCE_KEY, NAMESPACE);
+
+    // checking for value in case we will pull empty or broken object
+    if (speed && speed.value) {
+      this.playbackSpeedSubject.next(speed);
+      this.player.setPlaybackRate?.(speed.value);
+      log_debug(`Speed loaded: ${speed}`);
+    }
+  }
+
+  async setPlaybackSpeed(speed: PlaybackSpeed) {
+    await localStorage.setItem(SPEED_PREFERENCE_KEY, speed, NAMESPACE);
+    this.playbackSpeedSubject.next(speed);
+    this.player.setPlaybackRate?.(speed.value);
+  }
+}

package/src/Player/AudioLayer/utils.ts

@@ -1,4 +1,8 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import {
+  PlayerAnimationStateEnum,
+  PlayerAnimationStateT,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 export const NAMESPACE = "audio-player";
@@ -31,3 +35,23 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
+
+export const calculateBorderRadius = (
+  isTablet: boolean,
+  docked: boolean,
+  startComponentsAnimation: boolean,
+  isActiveGesture: boolean,
+  playerAnimationState: PlayerAnimationStateT
+): number => {
+  const shouldRemoveBorderRadius =
+    (startComponentsAnimation &&
+      isActiveGesture &&
+      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
+    docked;
+
+  if (shouldRemoveBorderRadius) {
+    return 0;
+  }
+
+  return isTablet ? 24 : 10;
+};

package/src/Player/index.tsx

@@ -721,7 +721,7 @@ export default class VideoPlayer extends React.Component<
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value === "audio";
+      entry?.type?.value?.includes?.("audio");
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -791,8 +791,13 @@ export default class VideoPlayer extends React.Component<
       controls: shouldUseNativeControls,
     };
 
+    const isFullScreenAudioPlayer =
+      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+
+    const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
+
     const pictureInPictureEnabled =
-      this.props.pluginConfiguration?.pictureInPictureEnabled;
+      this.props.pluginConfiguration?.pictureInPictureEnabled && !isAudioPlayer;
 
     const nativeProps = {
       entry, // Must be passed first in list
@@ -806,7 +811,6 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
-      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -817,7 +821,14 @@ export default class VideoPlayer extends React.Component<
       accessibilityProps: getAllAccessibilityProps(
         this.getPluginConfiguration()
       ),
-    }; // rate temporary removed, because of bug with subtitles
+    };
+
+    if (!isAppleTV()) {
+      // 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;
+    }
 
     if (
       this.isReactNativeMethodsSupported() &&
@@ -918,8 +929,8 @@ export default class VideoPlayer extends React.Component<
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
       : isTV() && isAudioItem
-      ? styles.playerContainerTransparent
-      : styles.playerContainerBlack;
+        ? styles.playerContainerTransparent
+        : styles.playerContainerBlack;
 
     const isInline = () => {
       if (isTV()) {
@@ -960,9 +971,6 @@ export default class VideoPlayer extends React.Component<
       ) : null;
     };
 
-    const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
-
     const sharedWrapperViewProps = {
       style,
       entry,
@@ -989,15 +997,16 @@ export default class VideoPlayer extends React.Component<
 
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
-        <View style={containerStyle}>
-          {(!castAction?.state?.connected || supportNativeCast) && (
+        // Ensure the View remains in the native hierarchy for proper rendering and interaction
+        <View collapsable={false} style={containerStyle}>
+          {!castAction?.state?.connected || supportNativeCast ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
               {...nativeProps}
               listener={this.props.listener}
             />
-          )}
+          ) : null}
           <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
@@ -1012,7 +1021,7 @@ export default class VideoPlayer extends React.Component<
             return (
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
-                  {isAudioItem && (
+                  {isAudioItem ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={{
@@ -1031,21 +1040,24 @@ export default class VideoPlayer extends React.Component<
                         plugin_configuration={this.getPluginConfiguration()}
                       />
                     </AnimationComponent>
-                  )}
+                  ) : null}
 
-                  {shouldRenderBackground && (
+                  {shouldRenderBackground ? (
                     <PlayerImageBackground
                       imageKey={backgroundImageKey}
                       configuration={this.getPluginConfiguration()}
                       entry={entry}
                       style={getBackgroundImageStyle(playerDimensions)}
                     />
-                  )}
+                  ) : null}
 
-                  {(!castAction?.state?.connected || supportNativeCast) && (
+                  {!castAction?.state?.connected || supportNativeCast ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
-                      additionalData={playerDimensions}
+                      additionalData={{
+                        ...playerDimensions,
+                        disableAnimatedComponent: isAudioItem,
+                      }}
                       style={getStyle(playerDimensions)}
                     >
                       <this.props.PlayerComponent
@@ -1064,7 +1076,7 @@ export default class VideoPlayer extends React.Component<
                         {this.childrenWithPlayNext()}
                       </this.props.PlayerComponent>
                     </AnimationComponent>
-                  )}
+                  ) : null}
                 </View>
 
                 {renderTransportControls(playerDimensions)}