@applicaster/quick-brick-player 13.0.0-rc.64 → 13.0.0-rc.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.64",
+  "version": "13.0.0-rc.65",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -38,9 +38,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.63",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.64",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.64",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.64",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.65",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.65",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.65",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -453,7 +453,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
     const queryParamValue = 15;
 
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const url =
+      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
       <MagicBG

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
 import * as R from "ramda";
-import { View } from "react-native";
+import { View, Dimensions as ScreenDimensions } from "react-native";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
@@ -79,6 +79,8 @@ type LayoutProps = {
   defaultDimensions: Dimensions;
 };
 
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
+
 const Styles = {
   container: { flex: 1 },
   tabletContainer: (isPortraitMode: boolean) => ({
@@ -91,6 +93,11 @@ const Styles = {
     maxHeight: 750,
     marginTop: 80,
   },
+  playerInfoWrapper: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
   tabletLayout: {
     width: 463,
     marginBottom: 80,
@@ -101,9 +108,9 @@ const Styles = {
     justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
   backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
-    const mobileValue = dimensions.width
+    const mobileValue = dimensions?.width
       ? dimensions.width - PADDING_HORIZONTAL * 2
-      : 330;
+      : SCREEN_WIDTH - PADDING_HORIZONTAL * 2;
 
     return {
       width: isTablet ? 463 : mobileValue,
@@ -329,9 +336,7 @@ export default function DefaultLayout(props: LayoutProps) {
   const Separator = () => <View style={Styles.separator} />;
 
   const defaultImageDimensions = React.useMemo(
-    () =>
-      defaultDimensions &&
-      Styles.backgroundImageContainer(defaultDimensions, isTablet),
+    () => Styles.backgroundImageContainer(defaultDimensions, isTablet),
     [defaultDimensions, isTablet]
   );
 
@@ -344,7 +349,10 @@ export default function DefaultLayout(props: LayoutProps) {
         isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
       }
     >
-      <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+      <AnimationComponent
+        animationType={ComponentAnimationType.componentFade}
+        style={isTablet ? Styles.playerInfoWrapper : undefined}
+      >
         <TransportInfo
           content={entry}
           value={value}
@@ -375,7 +383,6 @@ export default function DefaultLayout(props: LayoutProps) {
         >
           <PlayerImageBackground
             entry={entry}
-            docked={docked}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
             imageStyle={Styles.backgroundImageContainerImageStyle(
               isTablet,

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

@@ -47,7 +47,7 @@ const fetchPaletteAndDominantColor = async (imageUrl: string) => {
   const dominant = await getDominantColor(imageUrl);
   const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
 
-  return { gradientColors: colors.slice(0, 2), dominantColor };
+  return { gradientColors: colors.slice(0, 2).reverse(), dominantColor };
 };
 
 export const MagicBG: React.FC<MagicBGProps> = ({