@applicaster/quick-brick-player 12.0.0-alpha.3849101242 → 12.0.0-alpha.3893335783

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.3849101242",
+  "version": "12.0.0-alpha.3893335783",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.68",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.58",
     "@applicaster/quick-brick-tv-transport-controls": "12.0.0-rc.62",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3849101242",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3849101242",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3849101242",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.3893335783",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.3893335783",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3893335783",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

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

@@ -419,7 +419,6 @@ export default function DefaultLayout(props: LayoutProps) {
                   startTimestamp={startTimestamp}
                   endTimestamp={endTimestamp}
                   isDateBasedLiveContent={isDateBasedLiveContent}
-                  onSkipLive={onSkipLive}
                 />
 
                 {showCounter && timeLeft >= 0 && (

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

@@ -1,6 +1,7 @@
+// Disabling for now as lint can't recognise typescript definition here
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { Animated, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import LinearGradient from "../LinearGradient";
 import { getDominantColor, getPalettes } from "../../../utils/utils";
 import { useEffect } from "react";
@@ -10,7 +11,7 @@ type MagicBGProps = {
   image: string;
   fallbackUrl?: string;
   defaultColor: string;
-  colors: string[];
+  colors: string[]; // Updated to type string[] as it holds hex values
 };
 
 const defaultColors = {
@@ -65,46 +66,31 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     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 () => {
+      // Check if colors are provided and not empty
       if (colors && colors.length > 0) {
-        setGradientColors(colors.slice(0, 2));
-        setDominantColor(colors[0]);
-        animateColors();
+        // 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(image);
 
           setGradientColors(gradientColors);
           setDominantColor(dominantColor);
-          animateColors();
         } catch (error) {
+          // If image fetch fails, try fallback URL
           try {
             const { gradientColors, dominantColor } =
               await fetchPaletteAndDominantColor(fallbackUrl);
 
             setGradientColors(gradientColors);
             setDominantColor(dominantColor);
-            animateColors();
           } catch {
+            // If everything fails, use default color
             setGradientColors([
               defaultColors.defaultGradientStart,
               defaultColors.defaultGradientEnd,
@@ -114,6 +100,7 @@ export const MagicBG: React.FC<MagicBGProps> = ({
           }
         }
       } else {
+        // If no image or colors, use default color
         setGradientColors([
           defaultColors.defaultGradientStart,
           defaultColors.defaultGradientEnd,
@@ -126,30 +113,11 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     fetchColors();
   }, []);
 
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["black", dominantColor],
-  });
-
   return (
-    <Animated.View
-      style={[
-        styles.container,
-        { backgroundColor: interpolatedBackgroundColor },
-      ]}
-    >
+    <View style={[styles.container, { backgroundColor: dominantColor }]}>
       <View style={styles.fullScreenOverlay} />
-
-      <Animated.View
-        style={[styles.gradientOverlay, { opacity: gradientOpacityAnim }]}
-      >
-        <LinearGradient
-          colors={gradientColors}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
-
+      <LinearGradient colors={gradientColors} style={styles.gradientOverlay} />
       {children}
-    </Animated.View>
+    </View>
   );
 };

package/src/Player/Utils/Utils.ts

@@ -22,10 +22,6 @@ export const addQueryParam = (
   return `${urlWithoutQuery}?${updatedQueryString}`;
 };
 
-export const isValidDate = (dateString: string | undefined): boolean => {
-  return (
-    typeof dateString === "string" &&
-    dateString.trim() !== "" &&
-    dayjs.utc(dateString).isValid()
-  );
+export const isValidDate = (dateString: string): boolean => {
+  return dateString.trim() !== "" && dayjs.utc(dateString).isValid();
 };