@applicaster/quick-brick-player 12.0.12-rc.0 → 12.0.12-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.12-rc.0",
+  "version": "12.0.12-rc.2",
   "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.12-rc.0",
     "@applicaster/quick-brick-tv-transport-controls": "12.0.4",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.12-rc.0",
-    "@applicaster/zapp-react-native-ui-components": "12.0.12-rc.0",
-    "@applicaster/zapp-react-native-utils": "12.0.12-rc.0",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.12-rc.2",
+    "@applicaster/zapp-react-native-ui-components": "12.0.12-rc.2",
+    "@applicaster/zapp-react-native-utils": "12.0.12-rc.2",
     "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;
 };
@@ -127,9 +129,12 @@ const sleeps = [
   { label: "2 hours", value: 120 },
 ];
 
+const edges: Edge[] = ["right", "left", "top"];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
+  const theme = useTheme();
 
   const {
     docked,
@@ -359,8 +364,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
-
   const ContainerView = SafeAreaView;
 
   const MainContent = React.useMemo(() => {
@@ -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

@@ -38,6 +38,9 @@ import DockedLayout from "./DockedLayout";
 import { isValidDate } from "../../Utils";
 import { calculateBorderRadius } from "../utils";
 
+const getAudioPlayerWidthForTablet = (isPortraitMode: boolean) =>
+  isPortraitMode ? 463 : 350;
+
 type Dimensions = {
   width: number;
   height: number;
@@ -81,7 +84,8 @@ type LayoutProps = {
   defaultDimensions: Dimensions;
 };
 
-const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
+  ScreenDimensions.get("screen");
 
 const Styles = {
   container: { flex: 1 },
@@ -90,33 +94,47 @@ const Styles = {
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
   }),
-  playerImageWrapper: {
+  playerImageWrapper: (docked: boolean) => ({
     width: "100%",
     maxHeight: 750,
-    marginTop: 80,
-  },
+    marginTop: docked ? 80 : 20,
+  }),
   playerInfoWrapper: {
     flex: 1,
     alignItems: "center",
     justifyContent: "space-between",
   },
-  tabletLayout: {
-    width: 463,
+  tabletLayout: (isPortraitMode: boolean) => ({
+    width: getAudioPlayerWidthForTablet(isPortraitMode),
     marginBottom: 80,
-  },
+    paddingHorizontal: undefined, // override paddingHorizontal
+  }),
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
     height: isTablet ? 64 : 50,
-    marginHorizontal: 10,
+    marginHorizontal: isTablet ? undefined : 10,
     justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
-  backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
+  backgroundImageContainer: (
+    dimensions: Dimensions,
+    isTablet: boolean,
+    isPortraitMode: boolean
+  ) => {
+    if (isTablet) {
+      const size = getAudioPlayerWidthForTablet(isPortraitMode);
+
+      return {
+        width: size,
+        height: size,
+      };
+    }
+
     const mobileValue = dimensions?.width
       ? dimensions.width - PADDING_HORIZONTAL * 2
       : SCREEN_WIDTH - PADDING_HORIZONTAL * 2;
 
     return {
-      width: isTablet ? 463 : mobileValue,
-      height: isTablet ? 463 : mobileValue,
+      width: mobileValue,
+      height: mobileValue,
     };
   },
   backgroundImageContainerImageStyle: (
@@ -184,8 +202,7 @@ export default function DefaultLayout(props: LayoutProps) {
   } = props;
 
   const isTablet = useIsTablet();
-  const { width, height } = dimensions;
-  const isPortraitMode = width < height;
+  const isPortraitMode = SCREEN_WIDTH < SCREEN_HEIGHT;
   const isLiveContent = playerState.isLive;
   const docked = layoutState.docked;
 
@@ -340,8 +357,13 @@ export default function DefaultLayout(props: LayoutProps) {
   const Separator = () => <View style={Styles.separator} />;
 
   const defaultImageDimensions = React.useMemo(
-    () => Styles.backgroundImageContainer(defaultDimensions, isTablet),
-    [defaultDimensions, isTablet]
+    () =>
+      Styles.backgroundImageContainer(
+        defaultDimensions,
+        isTablet,
+        isPortraitMode
+      ),
+    [defaultDimensions, isTablet, isPortraitMode]
   );
 
   const { isActiveGesture, startComponentsAnimation, playerAnimationState } =
@@ -368,13 +390,16 @@ export default function DefaultLayout(props: LayoutProps) {
       </AnimationComponent>
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}
-        style={isTablet ? Styles.playerImageWrapper : undefined}
+        style={isTablet ? Styles.playerImageWrapper(docked) : undefined}
       >
         <AnimationComponent
           animationType={ComponentAnimationType.moveComponentHorizontal}
           additionalData={{
             disableAnimatedComponent: !isTablet,
-            moveValue: (dimensions.width - 463) / 2,
+            moveValue:
+              (dimensions.width -
+                getAudioPlayerWidthForTablet(isPortraitMode)) /
+              2,
             extraAnimation: !isTablet
               ? {
                   [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
@@ -387,7 +412,11 @@ export default function DefaultLayout(props: LayoutProps) {
         >
           <PlayerImageBackground
             entry={entry}
-            style={Styles.backgroundImageContainer(dimensions, isTablet)}
+            style={Styles.backgroundImageContainer(
+              dimensions,
+              isTablet,
+              isPortraitMode
+            )}
             imageStyle={Styles.backgroundImageContainerImageStyle(
               isTablet,
               docked,
@@ -404,7 +433,7 @@ export default function DefaultLayout(props: LayoutProps) {
       <View
         style={[
           Styles.paddingHorizontal,
-          isTablet ? Styles.tabletLayout : undefined,
+          isTablet ? Styles.tabletLayout(isPortraitMode) : undefined,
         ]}
       >
         {!docked && (

package/src/Player/AudioLayer/Layout/defaultLayoutsConts.ts

@@ -17,7 +17,7 @@ const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
 ): number =>
-  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? 95 : 40;
+  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? undefined : 40;
 
 export const PADDING_HORIZONTAL = 15;
 

package/src/Player/index.tsx

@@ -722,7 +722,7 @@ export default class VideoPlayer extends React.Component<
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value === "audio";
+      entry?.type?.value?.includes?.("audio");
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;