@applicaster/quick-brick-player 12.0.0-rc.24 → 12.0.0-rc.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-rc.24",
+  "version": "12.0.0-rc.26",
   "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.11",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-rc.26",
     "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.24",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.24",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.24",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-rc.26",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-rc.26",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.26",
     "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/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -16,6 +16,7 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { MagicBG } from "./MagicBG";
+import { addQueryParam } from "../Utils";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -32,6 +33,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;
 };
@@ -255,11 +257,17 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   ]);
 
   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}
-        defaultColor="#000000"
-      >
+      <MagicBG image={url} fallbackUrl={baseUrl} defaultColor="#000000">
         {MainContent}
       </MagicBG>
     );

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

@@ -73,8 +73,8 @@ const Styles = {
   }),
   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) => ({
@@ -131,8 +131,7 @@ export default function DefaultLayout(props: LayoutProps) {
   const controller = playerManager.getActivePlayer();
   const liveButton = Boolean(value("live_badge_enabled"));
 
-  let showFullControls =
-    controller?.hasContentDuration?.() && !controller?.isAd();
+  let showFullControls = !controller?.isAd();
 
   if (isLiveContent) {
     const seekEnabled = Boolean(value("liveSeekingEnabled"));
@@ -163,8 +162,15 @@ 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,
+    });
 
     if (isLiveContent) {
       const skipToStart = skipToStartButton({
@@ -192,6 +198,7 @@ export default function DefaultLayout(props: LayoutProps) {
     onSkipStart,
     onSkipLive,
     isLiveContent,
+    controller,
   ]);
 
   const Separator = () => <View style={Styles.separator} />;

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

@@ -4,10 +4,12 @@ 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;
 };
 
@@ -34,9 +36,24 @@ 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 = "",
   defaultColor,
 }) => {
   const [dominantColor, setDominantColor] =
@@ -47,22 +64,24 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     colors.defaultGradientEnd,
   ]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchColors = async () => {
-      if (image) {
-        try {
-          const palette = await getPalettes(image);
+      if (!image) return;
 
-          const colors = palette.map(
-            (color: { r: number; g: number; b: number }) =>
-              `rgb(${color.r}, ${color.g}, ${color.b})`
-          );
+      try {
+        const { gradientColors, dominantColor } =
+          await fetchPaletteAndDominantColor(image);
 
-          setGradientColors(colors.slice(0, 2));
+        setGradientColors(gradientColors);
+        setDominantColor(dominantColor);
+      } catch (error) {
+        try {
+          const { gradientColors, dominantColor } =
+            await fetchPaletteAndDominantColor(fallbackUrl);
 
-          const dominant = await getDominantColor(image);
-          setDominantColor(`rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`);
-        } catch (error) {
+          setGradientColors(gradientColors);
+          setDominantColor(dominantColor);
+        } catch {
           setGradientColors([
             colors.defaultGradientStart,
             colors.defaultGradientEnd,
@@ -74,7 +93,7 @@ export const MagicBG: React.FC<MagicBGProps> = ({
     };
 
     fetchColors();
-  }, [image, defaultColor]);
+  }, [image, fallbackUrl, colors, defaultColor]);
 
   return (
     <View style={[styles.container, { backgroundColor: dominantColor }]}>

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,19 @@ export const stringsOnlyObject = (obj) => {
 
   return strObj;
 };
+
+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";