@applicaster/quick-brick-player 13.0.0-rc.110 → 13.0.0-rc.111

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.110",
+  "version": "13.0.0-rc.111",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.106",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.111",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.110",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.110",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.110",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.111",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.111",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.111",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
@@ -52,7 +52,6 @@
     "@applicaster/applicaster-types": "*",
     "@applicaster/blur": "*",
     "@applicaster/quick-brick-xray": "*",
-    "@applicaster/react-native-color-thief": "*",
     "@applicaster/zapp-pipes-v2-client": "*",
     "@applicaster/zapp-react-dom-ui-components": "*",
     "@applicaster/zapp-react-native-redux": "*",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
+import { useEffect, useState } from "react";
 import {
+  Dimensions as ScreenDimensions,
   StyleSheet,
-  ViewStyle,
   View,
-  Dimensions as ScreenDimensions,
+  ViewStyle,
 } from "react-native";
 
-import { SafeAreaView, Edge } from "react-native-safe-area-context";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import * as R from "ramda";
@@ -20,11 +21,8 @@ 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 } from "./utils";
 import {
-  addQueryParam,
   getBottomSheetModalDefaultItemIcon,
   getBottomSheetModalIconProps,
   getBottomSheetModalItemProps,
@@ -33,20 +31,18 @@ import {
 } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
+  AnimatedScrollModal,
   AnimationComponent,
   ComponentAnimationType,
-  AnimatedScrollModal,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/const";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import {
+  SLEEP_TIMER_OFF,
   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";
+import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
 import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
 import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
 import { speedOptions } from "../Const/speedOptions";
@@ -65,7 +61,6 @@ type Dimensions = {
 
 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;
@@ -75,7 +70,6 @@ type Configuration = {
 type Props = {
   children: React.ReactNode;
   inline?: boolean;
-  docked?: boolean;
   configuration: Configuration;
   style: ViewStyle & Dimensions;
   entry: ZappEntry;
@@ -108,10 +102,8 @@ 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,
     configuration,
     style,
     entry,
@@ -330,114 +322,61 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const MainContent = React.useMemo(() => {
-    return (
-      <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
-        <AnimationComponent
-          animationType={ComponentAnimationType.moveUpComponent}
-          additionalData={{ saveArea: true }}
-          style={Styles.playerContainer}
-        >
-          <AnimatedScrollModal>
-            <View style={Styles.playerContainer} onLayout={onLayout}>
-              <Layout
-                entry={entry}
-                playerState={playerState}
-                layoutState={layoutState}
-                value={value}
-                onPlaybackButtonPress={onPlaybackButtonPress}
-                onRewindButtonPress={onRewindButtonPress}
-                onForwardButtonPress={onForwardButtonPress}
-                onPlayerSeek={onPlayerSeek}
-                onSkipStart={onSkipStart}
-                onSpeedButtonPress={onSpeedButtonPress}
-                onSleepButtonPress={onSleepButtonPress}
-                playbackSpeedName={formatSpeed(playbackSpeed.value)}
-                playbackSleepName={
-                  sleepTimerState.timer.value === 0
-                    ? "sleep_timer"
-                    : "sleep_timer_active"
-                }
-                sleepTimerDate={sleepTimerState.timerDate}
-                cancelSleepTimer={cancelSleepTimer}
-                onSkipLive={onSkipLive}
-                onCloseVideoModal={onCloseVideoModal}
-                maximiseVideoModal={maximiseVideoModal}
-                configuration={configuration}
-                dimensions={dimensions}
-                playNextData={playNextData}
-                title={title}
-                summary={summary}
-                defaultDimensions={defaultDimensions}
-              />
-              <View style={Styles.paddingHorizontal}>
-                {children}
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                >
-                  <PlayerDetails
-                    isAudioPlayer
-                    configuration={configuration}
-                    style={Styles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              </View>
-            </View>
-          </AnimatedScrollModal>
-        </AnimationComponent>
-      </SafeAreaView>
-    );
-  }, [
-    docked,
-    style,
-    entry,
-    playerState,
-    layoutState,
-    value,
-    onPlaybackButtonPress,
-    onRewindButtonPress,
-    onForwardButtonPress,
-    onPlayerSeek,
-    onCloseVideoModal,
-    maximiseVideoModal,
-    configuration,
-    dimensions,
-    children,
-    playNextData,
-    onSkipStart,
-    onSkipLive,
-    sleepTimerState.timer.value,
-    sleepTimerState.timerDate,
-  ]);
-
-  if (configuration.magic_background) {
-    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 =
-      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
-
-    return (
-      <MagicBG
-        image={url}
-        fallbackUrl={baseUrl}
-        colors={entry?.extensions?.backgroundColors}
-        defaultColor={defaultBackgroundColor}
+  return (
+    <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={Styles.playerContainer}
       >
-        {MainContent}
-      </MagicBG>
-    );
-  }
-
-  return MainContent;
+        <AnimatedScrollModal>
+          <View style={Styles.playerContainer} onLayout={onLayout}>
+            <Layout
+              entry={entry}
+              playerState={playerState}
+              layoutState={layoutState}
+              value={value}
+              onPlaybackButtonPress={onPlaybackButtonPress}
+              onRewindButtonPress={onRewindButtonPress}
+              onForwardButtonPress={onForwardButtonPress}
+              onPlayerSeek={onPlayerSeek}
+              onSkipStart={onSkipStart}
+              onSpeedButtonPress={onSpeedButtonPress}
+              onSleepButtonPress={onSleepButtonPress}
+              playbackSpeedName={formatSpeed(playbackSpeed.value)}
+              playbackSleepName={
+                sleepTimerState.timer.value === 0
+                  ? "sleep_timer"
+                  : "sleep_timer_active"
+              }
+              sleepTimerDate={sleepTimerState.timerDate}
+              cancelSleepTimer={cancelSleepTimer}
+              onSkipLive={onSkipLive}
+              onCloseVideoModal={onCloseVideoModal}
+              maximiseVideoModal={maximiseVideoModal}
+              configuration={configuration}
+              dimensions={dimensions}
+              playNextData={playNextData}
+              title={title}
+              summary={summary}
+            />
+            <View style={Styles.paddingHorizontal}>
+              {children}
+              <AnimationComponent
+                animationType={ComponentAnimationType.componentFade}
+              >
+                <PlayerDetails
+                  isAudioPlayer
+                  configuration={configuration}
+                  style={Styles.playerDetails}
+                  entry={entry}
+                  isTabletLandscape={isTabletLandscape}
+                />
+              </AnimationComponent>
+            </View>
+          </View>
+        </AnimatedScrollModal>
+      </AnimationComponent>
+    </SafeAreaView>
+  );
 };

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

@@ -30,7 +30,6 @@ type Props = {
   layoutState: QuickBrickPlayer.LayoutState;
   playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
   dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
   onCloseVideoModal: () => void;
   onPlayerSeek: (targetTime: number) => void;
@@ -181,7 +180,6 @@ export const DockedControls = (props: Props) => {
     layoutState,
     playerState,
     value,
-    configuration,
     dimensions,
     onCloseVideoModal,
     onPlayerSeek,
@@ -254,12 +252,7 @@ export const DockedControls = (props: Props) => {
               ),
             ]}
           >
-            <View
-              style={[
-                styles.contentInfo,
-                !configuration.magic_background && backgroundColorStyle(value),
-              ]}
-            >
+            <View style={[styles.contentInfo, backgroundColorStyle(value)]}>
               <ContentInfo
                 content={{ ...entry, title, summary }}
                 value={value}
@@ -273,7 +266,7 @@ export const DockedControls = (props: Props) => {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            !configuration.magic_background && backgroundColorStyle(value),
+            backgroundColorStyle(value),
           ]}
         >
           <Controls

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import {
-  useSafeAreaInsets,
   useSafeAreaFrame,
+  useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
@@ -13,11 +13,11 @@ import { Controls } from "./Controls";
 
 import { useMobileLayoutImageSize, useTransportInfoHeight } from "./hooks";
 import { DockedControls } from "./DockedControls";
-import { withDebug, DEBUG } from "./debug";
+import { DEBUG, withDebug } from "./debug";
 import {
+  BottomDebugSquare,
   LeftDebugSquare,
   RightDebugSquare,
-  BottomDebugSquare,
 } from "./Debug/index";
 
 import { Props } from "./types";
@@ -218,7 +218,6 @@ export function MobileLayout({
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import {
-  useSafeAreaInsets,
   useSafeAreaFrame,
+  useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -203,7 +203,6 @@ export function TabletLandscapeLayout({
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import {
-  useSafeAreaInsets,
   useSafeAreaFrame,
+  useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
@@ -211,7 +211,6 @@ export function TabletPortraitLayout({
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

package/src/Player/hooks/useIsCasting.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
+
+const fakeEntry: any = {
+  title: "Chromecast use is casting fake entry",
+  id: "quick-brick-use-is-casting-fake-entry",
+};
+
+/**
+ * Returns the cast action state connection status, does not update when app is in background on Apple platforms
+ * On other platforms, it continues to check the cast action state even when the app is in background
+ */
+export const useIsCasting = () => {
+  const actionContext = useActions(CHROMECAST_IDENTIFIER);
+  const appState = useAppState();
+  const isAppInForeground = appState === "active";
+  const shouldOnlyUpdateInForeground = isApplePlatform();
+
+  const [castActionState, setCastActionState] = React.useState(
+    !actionContext ? null : actionContext.initialEntryState(fakeEntry)
+  );
+
+  React.useEffect(() => {
+    if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+      if (!(!actionContext && castActionState !== null)) {
+        setCastActionState(actionContext.initialEntryState(fakeEntry));
+      }
+    }
+  }, [
+    actionContext,
+    setCastActionState,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  React.useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext?.addListener(String(fakeEntry.id), (state) => {
+        // Only check foreground state on Apple platforms
+        if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+          setCastActionState(state);
+        }
+      });
+    }
+  }, [
+    setCastActionState,
+    actionContext,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  return !!castActionState?.connected;
+};

package/src/Player/index.tsx

@@ -74,6 +74,7 @@ export default class VideoPlayer extends React.Component<
   state: QuickBrickPlayer.NativePlayerState = {
     audioTrackId: null,
     textTrackId: null,
+    isCasting: this.props.isCasting,
 
     // TODO: Can be deleted, on controller logic
     isAd: false,
@@ -698,6 +699,10 @@ export default class VideoPlayer extends React.Component<
     ];
   };
 
+  get supportNativeCast() {
+    return this.props.controller.supportNativeCast();
+  }
+
   render() {
     const {
       docked,
@@ -710,12 +715,9 @@ export default class VideoPlayer extends React.Component<
       muted,
       style,
       castAction,
-      controller,
       startComponentsAnimation,
     } = this.props;
 
-    const supportNativeCast = controller.supportNativeCast();
-
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
@@ -995,11 +997,14 @@ export default class VideoPlayer extends React.Component<
     const backgroundImageKey =
       this.getPluginConfiguration()?.player_preview_image_key;
 
+    const shouldRenderNativePlayer =
+      !this.props.isCasting || this.supportNativeCast;
+
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         // Ensure the View remains in the native hierarchy for proper rendering and interaction
         <View collapsable={false} style={containerStyle}>
-          {!castAction?.state?.connected || supportNativeCast ? (
+          {shouldRenderNativePlayer ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
@@ -1051,7 +1056,7 @@ export default class VideoPlayer extends React.Component<
                     />
                   ) : null}
 
-                  {!castAction?.state?.connected || supportNativeCast ? (
+                  {shouldRenderNativePlayer ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={{

package/src/QuickBrickPlayer.tsx

@@ -5,6 +5,7 @@ import Player from "./Player";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsCasting } from "./Player/hooks/useIsCasting";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
 
@@ -24,6 +25,7 @@ const QuickBrickPlayerComponent = (
   }, [props.PlayerComponent]);
 
   const castAction = useActions(CHROMECAST_IDENTIFIER);
+  const isCasting = useIsCasting();
 
   const isModal = Boolean(props?.isModal);
   const isScreenDisabled = !controller?.isFullScreenSupported() || !isModal;
@@ -48,6 +50,7 @@ const QuickBrickPlayerComponent = (
       {...props}
       ref={ref}
       castAction={!props?.disableCastAction && castAction}
+      isCasting={isCasting}
       PlayerComponent={props.PlayerComponent}
       openPiP={openPiP}
       closePiP={closePiP}

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.ts

@@ -1,3 +0,0 @@
-import LinearGradient from "react-native-linear-gradient";
-
-export default LinearGradient;

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.web.ts

@@ -1,3 +0,0 @@
-const WebLinearGradient = require("react-native-web-linear-gradient").default;
-
-export default WebLinearGradient;

package/src/Player/AudioLayer/LinearGradient/index.ts

@@ -1 +0,0 @@
-export { default } from "./LinearGradientProxy";

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

@@ -1,155 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from "react";
-import { Animated, 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[];
-};
-
-const defaultColors = {
-  overlay: "rgba(0, 0, 0, 0.35)",
-  defaultGradientStart: "rgba(0, 0, 0, 0.25)",
-  defaultGradientEnd: "rgba(0, 0, 0, 0)",
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fullScreenOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: defaultColors.overlay,
-  },
-  gradientOverlay: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: "100%",
-  },
-});
-
-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).reverse(), 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[]>([
-    defaultColors.defaultGradientStart,
-    defaultColors.defaultGradientEnd,
-  ]);
-
-  const [backgroundColorAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
-  const [gradientOpacityAnim] = React.useState(new Animated.Value(0)); // from 0 to 1
-
-  useEffect(() => {
-    const animateColors = () => {
-      Animated.timing(backgroundColorAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-
-      Animated.timing(gradientOpacityAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: false,
-      }).start();
-    };
-
-    const fetchColors = async () => {
-      if (colors && colors.length > 0) {
-        setGradientColors(colors.slice(0, 2));
-        setDominantColor(colors[0]);
-        animateColors();
-      } else if (image) {
-        try {
-          const { gradientColors, dominantColor } =
-            await fetchPaletteAndDominantColor(image);
-
-          setGradientColors(gradientColors);
-          setDominantColor(dominantColor);
-          animateColors();
-        } catch (error) {
-          try {
-            const { gradientColors, dominantColor } =
-              await fetchPaletteAndDominantColor(fallbackUrl);
-
-            setGradientColors(gradientColors);
-            setDominantColor(dominantColor);
-            animateColors();
-          } catch {
-            setGradientColors([
-              defaultColors.defaultGradientStart,
-              defaultColors.defaultGradientEnd,
-            ]);
-
-            setDominantColor(defaultColor);
-          }
-        }
-      } else {
-        setGradientColors([
-          defaultColors.defaultGradientStart,
-          defaultColors.defaultGradientEnd,
-        ]);
-
-        setDominantColor(defaultColor);
-      }
-    };
-
-    fetchColors();
-  }, []);
-
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["black", dominantColor],
-  });
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        { backgroundColor: interpolatedBackgroundColor },
-      ]}
-    >
-      <View style={styles.fullScreenOverlay} />
-
-      <Animated.View
-        style={[styles.gradientOverlay, { opacity: gradientOpacityAnim }]}
-      >
-        <LinearGradient
-          colors={gradientColors}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
-
-      {children}
-    </Animated.View>
-  );
-};

package/src/utils/utils.ts

@@ -1,25 +0,0 @@
-import RNColorThief from "@applicaster/react-native-color-thief";
-import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-
-const { log_error } = createLogger({
-  subsystem: "UIComponent",
-  category: "MagicBackground",
-});
-
-export const getDominantColor = async (imageUrl: string): Promise<any> => {
-  try {
-    return await RNColorThief.getColor(imageUrl, 1, false);
-  } catch (error) {
-    log_error("Failed to get the dominant color", { error });
-    throw error;
-  }
-};
-
-export const getPalettes = async (imageUrl: string): Promise<any> => {
-  try {
-    return await RNColorThief.getPalette(imageUrl, 3, 1, true);
-  } catch (error) {
-    log_error("Failed to get the palette", { error });
-    throw error;
-  }
-};