@applicaster/quick-brick-player 13.0.0-rc.99 → 13.0.0

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;
-  }
-};