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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.65",
+  "version": "13.0.0-rc.66",
   "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": "13.0.0-rc.63",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.66",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@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",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.66",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.66",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.66",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -41,6 +41,7 @@ import {
 } from "./SleepTimerManager";
 import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -58,6 +59,7 @@ type Configuration = {
   [key: string]: any;
   magic_background?: boolean;
   audio_player_background_image_query?: string;
+  audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -130,6 +132,7 @@ const sleeps = [
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
+  const theme = useTheme();
 
   const {
     docked,
@@ -451,6 +454,10 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     const queryParamName =
       configuration.audio_player_background_image_query || "width";
 
+    const defaultBackgroundColor =
+      configuration.audio_player_background_image_default_color ||
+      theme?.app_background_color;
+
     const queryParamValue = 15;
 
     const url =
@@ -461,7 +468,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         image={url}
         fallbackUrl={baseUrl}
         colors={entry?.extensions?.backgroundColors}
-        defaultColor="#000000"
+        defaultColor={defaultBackgroundColor}
       >
         {MainContent}
       </MagicBG>

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

@@ -33,8 +33,10 @@ import {
   ComponentAnimationType,
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import DockedLayout from "./DockedLayout";
 import { isValidDate } from "../../Utils";
+import { calculateBorderRadius } from "../utils";
 
 type Dimensions = {
   width: number;
@@ -121,14 +123,16 @@ const Styles = {
     isTablet: boolean,
     docked: boolean,
     startComponentsAnimation: boolean,
-    isActiveGesture: boolean
+    isActiveGesture: boolean,
+    playerAnimationState: PlayerAnimationStateT
   ) => ({
-    borderRadius:
-      (startComponentsAnimation && isActiveGesture) || docked
-        ? 0
-        : isTablet
-          ? 24
-          : 10,
+    borderRadius: calculateBorderRadius(
+      isTablet,
+      docked,
+      startComponentsAnimation,
+      isActiveGesture,
+      playerAnimationState
+    ),
   }),
 
   paddingHorizontal: {
@@ -340,7 +344,7 @@ export default function DefaultLayout(props: LayoutProps) {
     [defaultDimensions, isTablet]
   );
 
-  const { isActiveGesture, startComponentsAnimation } =
+  const { isActiveGesture, startComponentsAnimation, playerAnimationState } =
     useModalAnimationContext();
 
   return (
@@ -388,7 +392,8 @@ export default function DefaultLayout(props: LayoutProps) {
               isTablet,
               docked,
               startComponentsAnimation,
-              isActiveGesture
+              isActiveGesture,
+              playerAnimationState
             )}
             defaultImageDimensions={defaultImageDimensions}
           />

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

@@ -230,7 +230,7 @@ export default function DockedLayout(props: LayoutProps) {
   } = useModalAnimationContext();
 
   const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
     []
   );
 

package/src/Player/AudioLayer/utils.ts

@@ -1,4 +1,8 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import {
+  PlayerAnimationStateEnum,
+  PlayerAnimationStateT,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 export const NAMESPACE = "audio-player";
@@ -31,3 +35,23 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
+
+export const calculateBorderRadius = (
+  isTablet: boolean,
+  docked: boolean,
+  startComponentsAnimation: boolean,
+  isActiveGesture: boolean,
+  playerAnimationState: PlayerAnimationStateT
+): number => {
+  const shouldRemoveBorderRadius =
+    (startComponentsAnimation &&
+      isActiveGesture &&
+      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
+    docked;
+
+  if (shouldRemoveBorderRadius) {
+    return 0;
+  }
+
+  return isTablet ? 24 : 10;
+};