@applicaster/quick-brick-player 12.0.0-rc.35 → 12.0.0-rc.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-rc.35",
+  "version": "12.0.0-rc.36",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -38,9 +38,9 @@
   "dependencies": {
     "@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.35",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.35",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.35",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.36",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.36",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.36",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -24,7 +24,7 @@ import {
   NAMESPACE,
 } from "./utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import { getLiveUrl } from "../Utils";
+import { addQueryParam, getLiveUrl } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 
 const { log_debug } = createLogger({
@@ -455,17 +455,20 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   if (configuration.magic_background) {
     const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
 
-    // TODO: To be added when background is ready
+    const queryParamName =
+      configuration.audio_player_background_image_query || "width";
 
-    // const queryParamName =
-    //   configuration.audio_player_background_image_query || "width";
-    //
-    // const queryParamValue = 15;
-    //
-    // const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const queryParamValue = 15;
+
+    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
-      <MagicBG image={baseUrl} fallbackUrl={baseUrl} defaultColor="#000000">
+      <MagicBG
+        image={url}
+        fallbackUrl={baseUrl}
+        colors={entry?.extensions?.backgroundColors}
+        defaultColor="#000000"
+      >
         {MainContent}
       </MagicBG>
     );

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

@@ -11,9 +11,10 @@ type MagicBGProps = {
   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)",
@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
   },
   fullScreenOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: colors.overlay,
+    backgroundColor: defaultColors.overlay,
   },
   gradientOverlay: {
     position: "absolute",
@@ -54,41 +55,58 @@ 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,
   ]);
 
   useEffect(() => {
     const fetchColors = async () => {
-      if (!image) return;
-
-      try {
-        const { gradientColors, dominantColor } =
-          await fetchPaletteAndDominantColor(image);
-
-        setGradientColors(gradientColors);
-        setDominantColor(dominantColor);
-      } catch (error) {
+      // 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 { gradientColors, dominantColor } =
-            await fetchPaletteAndDominantColor(fallbackUrl);
+            await fetchPaletteAndDominantColor(image);
 
           setGradientColors(gradientColors);
           setDominantColor(dominantColor);
-        } catch {
-          setGradientColors([
-            colors.defaultGradientStart,
-            colors.defaultGradientEnd,
-          ]);
-
-          setDominantColor(defaultColor);
+        } catch (error) {
+          // If image fetch fails, try fallback URL
+          try {
+            const { gradientColors, dominantColor } =
+              await fetchPaletteAndDominantColor(fallbackUrl);
+
+            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);
       }
     };