@applicaster/quick-brick-player 12.0.0-rc.4 → 12.0.0-rc.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-rc.4",
+  "version": "12.0.0-rc.41",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,12 +36,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.4",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.33",
     "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.4",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.4",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.4",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.41",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.41",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.41",
     "keymirror": "^0.1.1",
+    "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Image, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { MUTED_USAGE } from "../const";
 import { LiveImageManager } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/LiveImageManager";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 type Asset = string | undefined;
 

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -3,7 +3,8 @@ import { Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
-  content: ZappEntry;
+  title: string | number;
+  summary: string | number;
   layoutState: {
     inline: boolean;
     docked: boolean;
@@ -78,8 +79,7 @@ const summaryStyles = (value: GetValue, prefix: string): TextStyle => ({
 });
 
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { content, layoutState, value } = props;
-  const { title, summary } = content;
+  const { title, summary, layoutState, value } = props;
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   return (

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -15,7 +15,17 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
 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 { addQueryParam, getLiveUrl } from "../Utils";
+import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -32,6 +42,7 @@ type Dimensions = {
 type Configuration = {
   [key: string]: any;
   magic_background?: boolean;
+  audio_player_background_image_query?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -96,6 +107,17 @@ const Styles = {
   },
 };
 
+const sleeps = [
+  // { label: "End of episode", value: "episode" },
+  { label: "5 minutes", value: 5 },
+  { label: "10 minutes", value: 10 },
+  { label: "15 minutes", value: 15 },
+  { label: "30 minutes", value: 30 },
+  { label: "45 minutes", value: 45 },
+  { label: "1 hour", value: 60 },
+  { label: "2 hours", value: 120 },
+];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
@@ -111,15 +133,48 @@ 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;
 
+  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
+
+  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
+
+  const { title, summary } = useTitleSummaryOverlay(
+    feedUrl,
+    entry,
+    playerState?.isLive,
+    configuration?.audio_live_player_update_interval
+  );
+
+  const [playbackSpeed, setPlaybackSpeed] = useState({
+    asset: configuration["speed_1"],
+    value: 1.0,
+  });
+
+  const [sleepTimer, setSleepTimer] = useState({
+    label: "playback_sleep_off_label",
+    value: 0,
+  });
+
+  const [sleepTimerDate, setSleepTimerDate] = useState(0);
+
   const [dimensions, setDimensions] = React.useState<Dimensions>({
     width: 0,
     height: 0,
   });
 
+  const navigator = useNavigation();
+
   const { maximiseVideoModal } = useNavigation();
 
   const onLayout = (event: any) => {
@@ -131,6 +186,83 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
   };
 
+  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");
+
+      if (playerState.isReadyToPlay && speed) {
+        setPlaybackSpeed(speed);
+        player?.setPlaybackRate(speed.value);
+      }
+    };
+
+    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);
+      }
+    };
+
+    loadSpeed().then();
+    loadSleep().then();
+  }, [playerState.isReadyToPlay]);
+
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
 
@@ -170,6 +302,60 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.forward(seekDuration);
   }, [seekDuration, player]);
 
+  const onSpeedSelect = React.useCallback(
+    async (item) => {
+      setPlaybackSpeed(item);
+      player.setPlaybackRate(item.value);
+      await localStorage.setItem("speed", item, NAMESPACE);
+    },
+    [player, setPlaybackSpeed]
+  );
+
+  const onSleepSelect = React.useCallback(
+    async (item) => {
+      setSleepTimer(item);
+      const futureSleepDate = await handleSleep(item.value);
+      setSleepTimerDate(futureSleepDate);
+
+      await localStorage.setItem(
+        "sleep",
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+    },
+    [player, setSleepTimer]
+  );
+
+  const onSpeedButtonPress = React.useCallback(() => {
+    navigator.openModalBottomSheet({
+      modalBottomSheetContentProps: {
+        items: speeds,
+        current_selection: playbackSpeed,
+        onPress: onSpeedSelect,
+        title: configuration["playback_speed_title"],
+      },
+      options: {
+        supportedOrientations: ["portrait"],
+      },
+    });
+  }, [playbackSpeed, setPlaybackSpeed]);
+
+  const onSleepButtonPress = React.useCallback(() => {
+    navigator.openModalBottomSheet({
+      modalBottomSheetContentProps: {
+        items: [
+          { label: configuration["playback_sleep_off_label"], value: 0 },
+        ].concat(sleeps),
+        current_selection: sleepTimer,
+        onPress: onSleepSelect,
+        title: configuration["playback_sleep_title"],
+      },
+      options: {
+        supportedOrientations: ["portrait"],
+      },
+    });
+  }, [sleepTimer, setSleepTimer, configuration]);
+
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
   }, [playerManager]);
@@ -213,12 +399,22 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
             onForwardButtonPress={onForwardButtonPress}
             onPlayerSeek={onPlayerSeek}
             onSkipStart={onSkipStart}
+            onSpeedButtonPress={onSpeedButtonPress}
+            onSleepButtonPress={onSleepButtonPress}
+            playbackSpeedName={formatSpeed(playbackSpeed.value)}
+            playbackSleepName={
+              sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
+            }
+            sleepTimerDate={sleepTimerDate}
+            cancelSleepTimer={cancelSleepTimer}
             onSkipLive={onSkipLive}
             onCloseVideoModal={onCloseVideoModal}
             maximiseVideoModal={maximiseVideoModal}
             configuration={configuration}
             dimensions={dimensions}
             playNextData={playNextData}
+            title={title}
+            summary={summary}
           />
           {children}
           {!docked && (
@@ -252,12 +448,25 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
+    sleepTimer.value,
+    sleepTimerDate,
   ]);
 
   if (configuration.magic_background) {
+    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
+
+    const queryParamName =
+      configuration.audio_player_background_image_query || "width";
+
+    const queryParamValue = 15;
+
+    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+
     return (
       <MagicBG
-        image={entry?.extensions?.audio_player_background_image}
+        image={url}
+        fallbackUrl={baseUrl}
+        colors={entry?.extensions?.backgroundColors}
         defaultColor="#000000"
       >
         {MainContent}

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

@@ -6,21 +6,25 @@ import {
   ProgressBar,
   Controls,
   TransportInfo,
+  CountDown,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   forwardButton,
   playbackButton,
   rewindButton,
   skipToStartButton,
   skipToLiveButton,
+  speedButton,
+  sleepButton,
 } 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 { useEffect, useMemo, useState } from "react";
 
 type Dimensions = {
   width: number;
@@ -42,15 +46,23 @@ type LayoutProps = {
     isPaused: boolean;
     isBuffering: boolean;
   };
+  sleepTimerDate: number;
   value: GetValue;
+  playbackSpeedName: string;
+  playbackSleepName: string;
   configuration: { [key: string]: any };
   onPlaybackButtonPress: () => void;
   onRewindButtonPress: () => void;
   onForwardButtonPress: () => void;
+  onSpeedButtonPress: () => void;
+  onSleepButtonPress: () => void;
+  cancelSleepTimer: () => void;
   onPlayerSeek: (targetTime: number) => void;
   onSkipLive: () => void;
   onSkipStart: () => void;
   dimensions: Dimensions;
+  title: string | number;
+  summary: string | number;
 };
 
 const Styles = {
@@ -68,13 +80,13 @@ const Styles = {
   },
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
     height: isTablet ? 64 : 50,
-    marginHorizontal: isLiveShowFullControls ? 10 : 24,
-    justifyContent: isLiveShowFullControls ? "space-between" : "center",
+    marginHorizontal: 10,
+    justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
   backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
     return {
-      width: isTablet ? 463 : dimensions.width,
-      height: isTablet ? 463 : dimensions.width,
+      width: isTablet ? 463 : dimensions.width || 330,
+      height: isTablet ? 463 : dimensions.width || 330,
     };
   },
   backgroundImageContainerImageStyle: (isTablet) => ({
@@ -117,8 +129,16 @@ export default function DefaultLayout(props: LayoutProps) {
     onPlayerSeek,
     onSkipStart,
     onSkipLive,
+    onSpeedButtonPress,
+    onSleepButtonPress,
+    playbackSpeedName,
+    playbackSleepName,
     configuration,
     dimensions,
+    cancelSleepTimer,
+    sleepTimerDate,
+    title,
+    summary,
   } = props;
 
   const isTablet = useIsTablet();
@@ -128,11 +148,17 @@ export default function DefaultLayout(props: LayoutProps) {
 
   const languageData = useLanguageData("audio-player");
 
+  const showCounter = useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
+
   const controller = playerManager.getActivePlayer();
   const liveButton = Boolean(value("live_badge_enabled"));
+  const sleepTitle = value("playback_sleep_countdown_label");
+
+  const [timeLeft, setTimeLeft] = useState(
+    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
+  );
 
-  let showFullControls =
-    controller?.hasContentDuration?.() && !controller?.isAd();
+  let showFullControls = !controller?.isAd();
 
   if (isLiveContent) {
     const seekEnabled = Boolean(value("liveSeekingEnabled"));
@@ -163,8 +189,27 @@ export default function DefaultLayout(props: LayoutProps) {
       return [play];
     }
 
-    const rewind = rewindButton({ isTablet, onPress: onRewindButtonPress });
-    const forward = forwardButton({ isTablet, onPress: onForwardButtonPress });
+    const rewind = rewindButton({
+      isTablet,
+      onPress: controller?.hasContentDuration?.() ? onRewindButtonPress : null,
+    });
+
+    const forward = forwardButton({
+      isTablet,
+      onPress: controller?.hasContentDuration?.() ? onForwardButtonPress : null,
+    });
+
+    const speed = speedButton({
+      isTablet,
+      onPress: onSpeedButtonPress,
+      name: playbackSpeedName,
+    });
+
+    const sleep = sleepButton({
+      isTablet,
+      onPress: onSleepButtonPress,
+      name: playbackSleepName,
+    });
 
     if (isLiveContent) {
       const skipToStart = skipToStartButton({
@@ -180,7 +225,8 @@ export default function DefaultLayout(props: LayoutProps) {
       return [skipToStart, rewind, play, forward, skipToLive];
     }
 
-    return [rewind, play, forward];
+    // Temporary empty button until we add sleep button. It will ensure the buttons will not break in their position
+    return [speed, rewind, play, forward, sleep];
   }, [
     playerState,
     liveButton,
@@ -188,12 +234,48 @@ export default function DefaultLayout(props: LayoutProps) {
     onPlaybackButtonPress,
     onRewindButtonPress,
     onForwardButtonPress,
+    onSpeedButtonPress,
     showFullControls,
     onSkipStart,
     onSkipLive,
     isLiveContent,
+    playbackSpeedName,
+    playbackSleepName,
+    controller,
   ]);
 
+  useEffect(() => {
+    if (showCounter && sleepTimerDate !== 0) {
+      // Setting the initial timeLeft based on sleepTimerDate
+      setTimeLeft(sleepTimerDate - Date.now());
+
+      // Setting up an interval to update the remaining time every second
+      const intervalId = setInterval(() => {
+        setTimeLeft(() => {
+          const newTimeLeft = sleepTimerDate - Date.now();
+
+          // If the new remaining time is less than or equal to 0, clear the interval and trigger the cancelSleepTimer function
+          if (newTimeLeft <= 0) {
+            clearInterval(intervalId);
+
+            cancelSleepTimer();
+
+            return 0;
+          } else {
+            // Otherwise, update the state with the new remaining time
+            return newTimeLeft;
+          }
+        });
+      }, 1000);
+
+      // Clearing the interval when the component unmounts or dependencies change
+      return () => clearInterval(intervalId);
+    } else {
+      // Ensure the timeLeft state is set correctly if showCounter is false
+      setTimeLeft(0);
+    }
+  }, [sleepTimerDate, showCounter, cancelSleepTimer]);
+
   const Separator = () => <View style={Styles.separator} />;
 
   const liveSeekingEnabled = value("liveSeekingEnabled");
@@ -222,13 +304,13 @@ export default function DefaultLayout(props: LayoutProps) {
       >
         <View style={isTablet ? Styles.tabletLayout : null}>
           <PlayerImageBackground
-            configuration={configuration}
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
             imageStyle={Styles.backgroundImageContainerImageStyle(isTablet)}
           />
           <AudioDescription
-            content={entry}
+            title={title}
+            summary={summary}
             value={value}
             layoutState={layoutState}
           />
@@ -245,6 +327,15 @@ export default function DefaultLayout(props: LayoutProps) {
                 disableFullscreen={true}
                 sliderStyle={2}
               />
+
+              {showCounter && timeLeft >= 0 && (
+                <CountDown
+                  timeLeft={timeLeft}
+                  value={value}
+                  title={sleepTitle}
+                />
+              )}
+
               <Separator />
             </View>
           )}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import {
   StyleSheet,
   TouchableWithoutFeedback,
@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from "react-native";
 import * as R from "ramda";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   ContentInfo,
@@ -48,6 +48,8 @@ type LayoutProps = {
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
   playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
 };
 
 const styles = StyleSheet.create({
@@ -196,11 +198,11 @@ export default function DockedLayout(props: LayoutProps) {
     playerState,
     configuration,
     playNextData,
+    title,
+    summary,
   } = props;
 
-  const {
-    deviceInfo: { isTablet },
-  } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
@@ -234,7 +236,11 @@ export default function DockedLayout(props: LayoutProps) {
                 !configuration.magic_background && backgroundColorStyle(value),
               ]}
             >
-              <ContentInfo content={entry} value={value} docked />
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
             </View>
           </View>
         </TouchableWithoutFeedback>

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

@@ -53,8 +53,9 @@ type ButtonsProps = {
   onPress: () => void;
   isTablet: boolean;
   style?: any;
+  name?: string;
 };
-type ButtonsByNameProps = ButtonsProps & { name: string };
+type ButtonsByNameProps = ButtonsProps & { name?: string };
 
 const rewindButtonByName = ({
   name,
@@ -79,6 +80,28 @@ const skipButtonByName = ({
   style,
 });
 
+const speedButtonByName = ({
+  name = "speed_1",
+  onPress,
+  style,
+}: ButtonsByNameProps): ControlsButton => ({
+  size: "small",
+  icon: name,
+  onPress,
+  style,
+});
+
+const sleepButtonByName = ({
+  name = "sleep_timer",
+  onPress,
+  style,
+}: ButtonsByNameProps): ControlsButton => ({
+  size: "small",
+  icon: name,
+  onPress,
+  style,
+});
+
 export const rewindButton = (props: ButtonsProps): ControlsButton =>
   rewindButtonByName({ ...props, name: "rewind" });
 
@@ -90,3 +113,9 @@ export const skipToStartButton = (props: ButtonsProps): ControlsButton =>
 
 export const skipToLiveButton = (props: ButtonsProps): ControlsButton =>
   skipButtonByName({ ...props, name: "skip_live" });
+
+export const speedButton = (props: ButtonsProps): ControlsButton =>
+  speedButtonByName({ ...props });
+
+export const sleepButton = (props: ButtonsProps): ControlsButton =>
+  sleepButtonByName({ ...props });

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

@@ -24,17 +24,25 @@ type LayoutProps = {
     isBuffering: boolean;
   };
   value: GetValue;
+  sleepTimerDate: number;
+  playbackSpeedName: string;
+  playbackSleepName: string;
   configuration: { [key: string]: any };
   onPlaybackButtonPress: () => void;
   onRewindButtonPress: () => void;
   onForwardButtonPress: () => void;
+  onSpeedButtonPress: () => void;
+  onSleepButtonPress: () => void;
   onCloseVideoModal: () => void;
+  cancelSleepTimer: () => void;
   onPlayerSeek: (targetTime: number) => void;
   onSkipStart: () => void;
   onSkipLive: () => void;
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
   playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
 };
 
 export default function Layout(

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

@@ -4,14 +4,17 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import LinearGradient from "../LinearGradient";
 import { getDominantColor, getPalettes } from "../../../utils/utils";
+import { useEffect } from "react";
 
 type MagicBGProps = {
   children: React.ReactNode;
   image: string;
+  fallbackUrl?: string;
   defaultColor: string;
+  colors: string[]; // Updated to type string[] as it holds hex values
 };
 
-const colors = {
+const defaultColors = {
   overlay: "rgba(0, 0, 0, 0.35)",
   defaultGradientStart: "rgba(0, 0, 0, 0.25)",
   defaultGradientEnd: "rgba(0, 0, 0, 0)",
@@ -23,7 +26,7 @@ const styles = StyleSheet.create({
   },
   fullScreenOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.overlay,
+    backgroundColor: defaultColors.overlay,
   },
   gradientOverlay: {
     position: "absolute",
@@ -34,47 +37,81 @@ const styles = StyleSheet.create({
   },
 });
 
+const fetchPaletteAndDominantColor = async (imageUrl: string) => {
+  const palette = await getPalettes(imageUrl);
+
+  const colors = palette.map(
+    (color: { r: number; g: number; b: number }) =>
+      `rgb(${color.r}, ${color.g}, ${color.b})`
+  );
+
+  const dominant = await getDominantColor(imageUrl);
+  const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
+
+  return { gradientColors: colors.slice(0, 2), dominantColor };
+};
+
 export const MagicBG: React.FC<MagicBGProps> = ({
   children,
   image,
+  fallbackUrl = "",
+  colors = [],
   defaultColor,
 }) => {
   const [dominantColor, setDominantColor] =
     React.useState<string>(defaultColor);
 
   const [gradientColors, setGradientColors] = React.useState<string[]>([
-    colors.defaultGradientStart,
-    colors.defaultGradientEnd,
+    defaultColors.defaultGradientStart,
+    defaultColors.defaultGradientEnd,
   ]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchColors = async () => {
-      if (image) {
+      // Check if colors are provided and not empty
+      if (colors && colors.length > 0) {
+        // Use provided colors for gradient and dominant color
+        setGradientColors(colors.slice(0, 2)); // First 2 colors for gradient
+        setDominantColor(colors[0]); // First color as dominant
+      } else if (image) {
+        // If no colors, try fetching from image
         try {
-          const palette = await getPalettes(image);
-
-          const colors = palette.map(
-            (color: { r: number; g: number; b: number }) =>
-              `rgb(${color.r}, ${color.g}, ${color.b})`
-          );
-
-          setGradientColors(colors.slice(0, 2));
+          const { gradientColors, dominantColor } =
+            await fetchPaletteAndDominantColor(image);
 
-          const dominant = await getDominantColor(image);
-          setDominantColor(`rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`);
+          setGradientColors(gradientColors);
+          setDominantColor(dominantColor);
         } catch (error) {
-          setGradientColors([
-            colors.defaultGradientStart,
-            colors.defaultGradientEnd,
-          ]);
+          // If image fetch fails, try fallback URL
+          try {
+            const { gradientColors, dominantColor } =
+              await fetchPaletteAndDominantColor(fallbackUrl);
 
-          setDominantColor(defaultColor);
+            setGradientColors(gradientColors);
+            setDominantColor(dominantColor);
+          } catch {
+            // If everything fails, use default color
+            setGradientColors([
+              defaultColors.defaultGradientStart,
+              defaultColors.defaultGradientEnd,
+            ]);
+
+            setDominantColor(defaultColor);
+          }
         }
+      } else {
+        // If no image or colors, use default color
+        setGradientColors([
+          defaultColors.defaultGradientStart,
+          defaultColors.defaultGradientEnd,
+        ]);
+
+        setDominantColor(defaultColor);
       }
     };
 
     fetchColors();
-  }, [image, defaultColor]);
+  }, []);
 
   return (
     <View style={[styles.container, { backgroundColor: dominantColor }]}>

package/src/Player/AudioLayer/utils.ts

@@ -0,0 +1,33 @@
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+export const NAMESPACE = "audio-player";
+
+export async function loadItemsFromStorage(key: string) {
+  const storedItems = await localStorage.getItem(key, NAMESPACE);
+
+  return parseJsonIfNeeded(storedItems) || null;
+}
+
+export const hasDatePassed = (timestamp: number) => {
+  // Get the current date and time
+  const currentDate = new Date();
+
+  // Compare the current date's timestamp with the given timestamp
+  return currentDate.getTime() > timestamp;
+};
+
+export const formatSpeed = (value: number) => {
+  let formattedValue = value.toString();
+
+  // If the value ends with ".0", remove it
+  if (formattedValue.endsWith(".0")) {
+    formattedValue = formattedValue.slice(0, -2);
+  }
+
+  // Replace "." with "_"
+  formattedValue = formattedValue.replace(".", "_");
+
+  // Return the formatted string with "speed_" prefix
+  return `speed_${formattedValue}`;
+};

package/src/Player/Utils/Utils.ts

@@ -1,3 +1,5 @@
+import queryString from "query-string";
+
 export const toTypeString = (obj) => {
   switch (typeof obj) {
     case "object":
@@ -19,3 +21,24 @@ export const stringsOnlyObject = (obj) => {
 
   return strObj;
 };
+
+export const getLiveUrl = (url: string) => {
+  // Use the replace method with a regular expression to replace all instances of subClass with livePage
+  return url.replace(new RegExp("subClass", "g"), "livePage");
+};
+
+export const addQueryParam = (
+  baseUrl: string,
+  paramName: string,
+  paramValue: string | number
+) => {
+  const [urlWithoutQuery, query] = baseUrl.split("?");
+
+  const parsedQuery = queryString.parse(query);
+
+  parsedQuery[paramName] = paramValue.toString();
+
+  const updatedQueryString = queryString.stringify(parsedQuery);
+
+  return `${urlWithoutQuery}?${updatedQueryString}`;
+};

package/src/Player/Utils/index.tsx

@@ -1,3 +1 @@
-export * from "./AssetsHelper";
-
 export * from "./Utils";

package/src/Player/index.tsx

@@ -36,6 +36,8 @@ import { AudioPlayerWrapper } from "./AudioLayer/AudioPlayerWrapper";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -87,7 +89,7 @@ export default class VideoPlayer extends React.Component<
     // TODO: Can be deleted, on controller logic
     paused: false,
     piped: false,
-    rate: 1,
+    rate: 1.0,
     // TODO: Hack for analytics, must br removed
     resume: null,
 
@@ -368,6 +370,10 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
   getCurrentTime = () => {
     return this.state.currentTime;
   };
@@ -551,6 +557,26 @@ export default class VideoPlayer extends React.Component<
     this.props.listener?.onPlayerDetached?.(nativeEvent);
   };
 
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidDismiss?.();
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+  };
+
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillDismiss?.();
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillPresent?.();
+  };
+
+  onPlayerClose = () => {
+    this.props.listener?.onPlayerClose?.();
+  };
+
   onPiPEnter = () => {
     this.setState({ piped: true });
     this.props.openPiP();
@@ -755,7 +781,6 @@ export default class VideoPlayer extends React.Component<
   render() {
     const {
       castAction,
-      controls,
       docked,
       entry,
       fullscreen,
@@ -767,7 +792,8 @@ export default class VideoPlayer extends React.Component<
       style,
     } = this.props;
 
-    const { audioTrackId, keyEvent, paused, seek, textTrackId } = this.state;
+    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
+      this.state;
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
@@ -812,17 +838,31 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
-    const hideNativeControls = isTV()
-      ? { controls: !this.getPlayNextData() }
-      : {};
+    // TODO: Get screen data more reliable way useCurrentScreenData
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
+
+    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
 
-    const platformSpecificProps = isApplePlatform()
+    let platformSpecificProps: any = isApplePlatform()
       ? {
-          ...hideNativeControls,
           resizeMode: nativeResizeMode,
         }
       : {};
 
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isAppleTV()
+      ? supportsNativeControls && !isInlineTV && !this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls = controls && !docked;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
+    };
+
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
 
@@ -830,7 +870,6 @@ export default class VideoPlayer extends React.Component<
       entry, // Must be passed first in list
       ...platformSpecificProps,
       audioTrackId,
-      controls,
       docked,
       enableAutoAudioTrackSelection,
       fullscreen, // TODO: Check fullscreen params not crash
@@ -839,6 +878,7 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
+      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -884,22 +924,17 @@ export default class VideoPlayer extends React.Component<
       onVideoEnd: this.onVideoEnd, // complete
       onVideoError: this.onVideoError, // error
       onVideoProgress: this.onVideoProgress,
-      onVideoFullscreenPlayerDidDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerDidPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerWillDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillDismiss"
-      ),
-      onVideoFullscreenPlayerWillPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillPresent"
-      ),
+      onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+      onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+      onVideoFullscreenPlayerWillDismiss:
+        this.onVideoFullscreenPlayerWillDismiss,
+      onVideoFullscreenPlayerWillPresent:
+        this.onVideoFullscreenPlayerWillPresent,
       onVideoLoad: this.onVideoLoad,
       onVideoLoadStart: this.unHandledEvent("onVideoLoadStart"),
       onVideoBuffer: this.onVideoBuffer,
       onPlaybackStalled: this.onPlaybackStalled,
+      onPlayerClose: this.onPlayerClose,
       onPlayerAttached: this.onPlayerAttached,
       onPlayerDetached: this.onPlayerDetached,
     };
@@ -973,7 +1008,7 @@ export default class VideoPlayer extends React.Component<
         !needToShowPlayNextOverlay &&
         this.props.mode !== "PIP";
 
-      if (controls === true) {
+      if (shouldUseNativeControls) {
         return null;
       }
 
@@ -1005,10 +1040,12 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
+      pip: this.state.piped,
       layoutState: {
         inline,
         docked,
         isModal,
+        pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
       fullscreen: fullscreen,
@@ -1085,6 +1122,7 @@ export default class VideoPlayer extends React.Component<
                       listener={this.props.listener}
                       style={getStyle(playerDimensions)}
                       pluginConfiguration={this.getPluginConfiguration()}
+                      controller={this.props.controller}
                     >
                       {this.childrenWithPlayNext()}
                     </this.props.PlayerComponent>
@@ -1121,6 +1159,7 @@ export default class VideoPlayer extends React.Component<
             listener={this.props.listener}
             style={this.takeParentStyle}
             pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
           >
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>