@applicaster/quick-brick-player 13.0.0-rc.111 → 13.0.0-rc.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.111",
+  "version": "13.0.0-rc.113",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.111",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.112",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.111",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.111",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.111",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.113",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.113",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.113",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, TextStyle } from "react-native";
+import { StyleSheet, Text, TextStyle, View } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
@@ -10,84 +10,125 @@ type AudioDescriptionProps = {
     docked: boolean;
     isModal: boolean;
   };
+  maxWidth?: number;
   value: GetValue;
 };
 
-const titleStyles = (value: GetValue, prefix: string): TextStyle => ({
-  textAlign: "left",
-  color: value(`${prefix}title_color`),
-  alignSelf: "center",
-  paddingBottom: 5,
-  lineHeight:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_lineheight_ios`),
-        android: value(`${prefix}title_lineheight_android`),
-      })
-    ) || 18,
-  letterSpacing:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_letterspacing_ios`),
-        android: value(`${prefix}title_letterspacing_android`),
-      })
-    ) || 0,
-  fontSize:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}title_fontsize_ios`),
-        android: value(`${prefix}title_fontsize_android`),
-      })
-    ) || 16,
-  fontFamily: platformSelect({
-    ios: value(`${prefix}title_font_ios`),
-    android: value(`${prefix}title_font_android`),
-  }),
-});
+const TITLE_PADDING_BOTTOM = 5;
+const TITLE_LINES = 2;
+const SUBTITLE_LINES = 1;
 
-const summaryStyles = (value: GetValue, prefix: string): TextStyle => ({
-  textAlign: "left",
-  color: value(`${prefix}subtitle_color`),
-  alignSelf: "center",
-  lineHeight:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_lineheight_ios`),
-        android: value(`${prefix}subtitle_lineheight_android`),
-      })
-    ) || 18,
-  letterSpacing:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_letterspacing_ios`),
-        android: value(`${prefix}subtitle_letterspacing_android`),
-      })
-    ) || 0,
-  fontSize:
-    Number(
-      platformSelect({
-        ios: value(`${prefix}subtitle_fontsize_ios`),
-        android: value(`${prefix}subtitle_fontsize_android`),
-      })
-    ) || 13,
-  fontFamily: platformSelect({
-    ios: value(`${prefix}subtitle_font_ios`),
-    android: value(`${prefix}subtitle_font_android`),
-  }),
+const styles = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    alignSelf: "center",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  titleText: {
+    textAlign: "center",
+    alignSelf: "center",
+    paddingBottom: TITLE_PADDING_BOTTOM,
+  },
+  summaryText: {
+    textAlign: "left",
+    alignSelf: "center",
+  },
 });
 
+const getTitleStyles = (value: GetValue, prefix: string) =>
+  ({
+    color: value(`${prefix}title_color`),
+    lineHeight:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_lineheight_ios`),
+          android: value(`${prefix}title_lineheight_android`),
+        })
+      ) || 18,
+    letterSpacing:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_letterspacing_ios`),
+          android: value(`${prefix}title_letterspacing_android`),
+        })
+      ) || 0,
+    fontSize:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}title_fontsize_ios`),
+          android: value(`${prefix}title_fontsize_android`),
+        })
+      ) || 16,
+    fontFamily: platformSelect({
+      ios: value(`${prefix}title_font_ios`),
+      android: value(`${prefix}title_font_android`),
+    }),
+  }) as const;
+
+const getSummaryStyles = (value: GetValue, prefix: string): TextStyle =>
+  ({
+    color: value(`${prefix}subtitle_color`),
+    lineHeight:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_lineheight_ios`),
+          android: value(`${prefix}subtitle_lineheight_android`),
+        })
+      ) || 18,
+    letterSpacing:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_letterspacing_ios`),
+          android: value(`${prefix}subtitle_letterspacing_android`),
+        })
+      ) || 0,
+    fontSize:
+      Number(
+        platformSelect({
+          ios: value(`${prefix}subtitle_fontsize_ios`),
+          android: value(`${prefix}subtitle_fontsize_android`),
+        })
+      ) || 13,
+    fontFamily: platformSelect({
+      ios: value(`${prefix}subtitle_font_ios`),
+      android: value(`${prefix}subtitle_font_android`),
+    }),
+  }) as const;
+
+const getHeight = (titleLineHeight: number, subtitleLineHeight) =>
+  titleLineHeight * TITLE_LINES + subtitleLineHeight + TITLE_PADDING_BOTTOM;
+
 export const AudioDescription = (props: AudioDescriptionProps) => {
-  const { title, summary, layoutState, value } = props;
+  const { title, summary, layoutState, value, maxWidth } = props;
   const prefix = layoutState.docked ? "docked_player_" : "";
 
+  const summaryStyles = getSummaryStyles(value, prefix);
+  const titleStyles = getTitleStyles(value, prefix);
+
+  const height = getHeight(titleStyles.lineHeight, summaryStyles.lineHeight);
+
   return (
-    <>
-      <Text style={titleStyles(value, prefix)} numberOfLines={2}>
+    <View
+      style={[
+        styles.wrapper,
+        {
+          maxWidth,
+          height,
+        },
+      ]}
+    >
+      <Text style={[styles.titleText, titleStyles]} numberOfLines={TITLE_LINES}>
         {title}
       </Text>
-      <Text style={summaryStyles(value, prefix)} numberOfLines={1}>
-        {summary}
-      </Text>
-    </>
+      {summary ? (
+        <Text
+          style={[styles.summaryText, summaryStyles]}
+          numberOfLines={SUBTITLE_LINES}
+        >
+          {summary}
+        </Text>
+      ) : null}
+    </View>
   );
 };

package/src/Player/AudioLayer/Layout/Controls/VerticalGutter.tsx

@@ -3,25 +3,43 @@ import { View, StyleSheet } from "react-native";
 
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
-import { TABLET_VERTICAL_SEPARATOR_HEIGHT } from "../const";
+import {
+  TABLET_VERTICAL_SEPARATOR_HEIGHT,
+  TABLET_VERTICAL_SEPARATOR_HEIGHT_S,
+} from "../const";
 
 import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
 
 const styles = StyleSheet.create({
   flexingHeight: {
     flex: 1,
-
     ...withDebug({ backgroundColor: "red" }),
   },
   fixedHeight: {
     height: TABLET_VERTICAL_SEPARATOR_HEIGHT,
-
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeightSmall: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT_S,
     ...withDebug({ backgroundColor: "red" }),
   },
 });
 
 export const VerticalGutter = () => {
   const isTablet = useIsTablet();
-
-  return <View style={isTablet ? styles.fixedHeight : styles.flexingHeight} />;
+  const { height } = useSafeAreaFrame();
+
+  return (
+    <View
+      style={
+        isTablet
+          ? isSmallTabletHeight(height)
+            ? styles.fixedHeightSmall
+            : styles.fixedHeight
+          : styles.flexingHeight
+      }
+    />
+  );
 };

package/src/Player/AudioLayer/Layout/Controls/index.tsx

@@ -79,6 +79,8 @@ type Props = {
   onSpeedButtonPress: Callback;
   onSleepButtonPress: Callback;
 
+  maxWidth?: number;
+
   docked: boolean;
 };
 
@@ -104,6 +106,7 @@ export const Controls = (props: Props) => {
     onSkipLive,
     onSpeedButtonPress,
     onSleepButtonPress,
+    maxWidth = 320,
 
     docked,
   } = props;
@@ -270,6 +273,7 @@ export const Controls = (props: Props) => {
         summary={summary}
         value={value}
         layoutState={layoutState}
+        maxWidth={maxWidth}
       />
 
       <VerticalGutter />

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -36,6 +36,7 @@ type Props = {
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
+  ImageComponent?: React.ReactNode;
 };
 
 const styles = StyleSheet.create({
@@ -52,6 +53,7 @@ const styles = StyleSheet.create({
   touchableArea: {
     flexShrink: 1,
     flex: 1,
+    flexDirection: "row",
     alignSelf: "stretch",
   },
   contentInfo: {
@@ -94,7 +96,7 @@ const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
+  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
 });
 
 const animatedContainerStyle = (
@@ -186,6 +188,7 @@ export const DockedControls = (props: Props) => {
     playNextData,
     title,
     summary,
+    ImageComponent,
   } = props;
 
   const isTablet = useIsTablet();
@@ -243,15 +246,21 @@ export const DockedControls = (props: Props) => {
           )}
         />
         <TouchableWithoutFeedback onPress={maximazeVideoModal}>
-          <View
-            style={[
-              styles.touchableArea,
-              playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              ),
-            ]}
-          >
+          <View style={styles.touchableArea}>
+            {isActiveGesture || layoutState.docked ? (
+              <View
+                style={{ width: toNumberWithDefault(100, minimisedHeight) }}
+              >
+                {ImageComponent || null}
+              </View>
+            ) : (
+              <View
+                style={playerDimensionsStyle(
+                  minimisedHeight,
+                  isActiveGesture || layoutState.docked
+                )}
+              />
+            )}
             <View style={[styles.contentInfo, backgroundColorStyle(value)]}>
               <ContentInfo
                 content={{ ...entry, title, summary }}

package/src/Player/AudioLayer/Layout/PlayerImage/index.tsx

@@ -12,6 +12,7 @@ import { FlexImage } from "./FlexImage";
 import { styles } from "./styles";
 import { calculateBorderRadius } from "../../utils";
 import { PlayNextData } from "../types";
+import { LayoutChangeEvent, View } from "react-native";
 
 type Props = {
   entry: ZappEntry;
@@ -26,8 +27,9 @@ type Props = {
   title: string | number;
   summary: string | number;
   docked: boolean;
-  imageWidth: Option<number>;
+  imageWidth?: Option<number>;
   verticalOffset: number;
+  onLayoutImage: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
@@ -35,9 +37,10 @@ export const PlayerImage = (props: Props) => {
     entry,
     dimensions,
     docked,
-    imageWidth,
     verticalOffset,
+    imageWidth,
     configuration,
+    onLayoutImage,
   } = props;
 
   const {
@@ -76,25 +79,33 @@ export const PlayerImage = (props: Props) => {
         }}
         style={styles.alignItemsCenter}
       >
-        {!imageWidth ? (
-          // we render image with flex until we get size of this image
-          <FlexImage
-            entry={entry}
-            style={styles.backgroundImageContainer}
-            imageStyle={{ borderRadius }}
-          />
-        ) : null}
-
-        {imageWidth ? (
-          // we have imageSize here and now we could animate resizing of this image
-          <AnimatedImage
-            entry={entry}
-            style={styles.backgroundImageContainer}
-            imageStyle={{ borderRadius }}
-            imageWidth={imageWidth}
-            wrapperViewStyle={shouldShowShadow ? styles.shadow : undefined}
-          />
-        ) : null}
+        <View onLayout={onLayoutImage}>
+          {!imageWidth ? (
+            <View
+              style={[
+                styles.defaultImageWrapperView,
+                shouldShowShadow ? styles.shadow : undefined,
+                {
+                  borderRadius,
+                },
+              ]}
+            >
+              <FlexImage
+                entry={entry}
+                style={styles.backgroundImageContainer}
+              />
+            </View>
+          ) : (
+            // we have imageSize here and now we could animate resizing of this image
+            <AnimatedImage
+              entry={entry}
+              style={styles.backgroundImageContainer}
+              imageStyle={{ borderRadius }}
+              imageWidth={imageWidth}
+              wrapperViewStyle={shouldShowShadow ? styles.shadow : undefined}
+            />
+          )}
+        </View>
       </AnimationComponent>
     </AnimationComponent>
   );

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -16,6 +16,9 @@ export const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  defaultImageWrapperView: {
+    overflow: "hidden",
+  },
   shadow: {
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
+import { StyleSheet, View } from "react-native";
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,
@@ -7,22 +7,30 @@ import {
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { TABLET_LANDSCAPE } from "./const";
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useTabletLayoutImageSize, useTransportInfoHeight } from "./hooks";
 import { DockedControls } from "./DockedControls";
 import { withDebug } from "./debug";
 
 import { Props } from "./types";
+import { isSmallTabletHeight as getIsSmallTabletHeight } from "./utils";
+import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "./const";
+import { FlexImage } from "./PlayerImage/FlexImage";
 
 const isIOS = isApplePlatform();
 
+const MIN_WIDTH = TABLET_LANDSCAPE.MIN_WIDTH; // Minimum width for the audio player container
+const MAX_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL; // Maximum spacing for the audio player container
+const MIN_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL_S; // Minimum spacing for the audio player container
+const transportInfoHeight = NAVBAR_HEIGHT;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    alignItems: "center",
+    height: "100%",
     ...withDebug({
       borderWidth: 2,
       borderColor: "magenta",
@@ -32,30 +40,30 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   audioPlayerContainer: {
-    flex: 1,
-    maxHeight: TABLET_LANDSCAPE.MAX_HEIGHT,
     flexDirection: "column",
     alignItems: "center",
+    minWidth: MIN_WIDTH,
 
     ...withDebug({
       borderWidth: 2,
       borderColor: "blue",
     }),
   },
-});
-
-const tabletStyles = ({
-  screenHeight,
-  topInset,
-  bottomInset,
-  imageSize,
-}): ViewStyle => ({
-  alignItems: "center",
-
-  height: screenHeight - topInset - bottomInset,
-  paddingBottom: TABLET_LANDSCAPE.MARGIN_VERTICAL,
-
-  opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
+  audioPlayerContainerPaddings: {
+    paddingBottom: MAX_SPACING,
+    paddingTop: MAX_SPACING,
+  },
+  // For small screens, we reduce the padding to fit better
+  audioPlayerContainerPaddingsSmall: {
+    paddingBottom: MIN_SPACING,
+    paddingTop: MIN_SPACING,
+  },
+  controlsContainer: { flexGrow: 0, alignSelf: "stretch" },
+  // eslint-disable-next-line react-native/no-color-literals
+  debugYellow: {
+    borderWidth: 2,
+    borderColor: "yellow",
+  },
 });
 
 const isTabletWithHomeButton = (bottomInset: number): boolean =>
@@ -98,83 +106,73 @@ export function TabletLandscapeLayout({
   title,
   summary,
 }: Props) {
+  const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
 
-  const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
+  const { bottom: bottomInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
+  const isSmallScreen = getIsSmallTabletHeight(screenHeight);
   const { progressBarHeight } = useModalAnimationContext();
 
-  const { imageSize, onLayout } = useTabletLayoutImageSize({
-    isPortraitMode: false,
-  });
-
-  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
-    useTransportInfoHeight();
+  const onLayoutImage = React.useCallback((e) => {
+    setImageWidth(e.nativeEvent.layout.width);
+  }, []);
 
   return (
-    <View
-      style={[
-        styles.container,
-        tabletStyles({
-          screenHeight,
-          topInset,
-          bottomInset,
-          imageSize,
-        }),
-      ]}
-    >
+    <View style={styles.container}>
       {/* TransportInfo */}
       <TransportInfo
         entry={entry}
         layoutState={layoutState}
         value={value}
         configuration={configuration}
-        onLayout={onTransportInfoLayout}
       />
 
       {/* TransportInfo */}
 
-      <View style={styles.audioPlayerContainer}>
-        {/* PlayerImage */}
-        <View
-          style={[
-            styles.flex,
-            withDebug({
-              borderWidth: 2,
-              borderColor: "yellow",
-            }),
-          ]}
-          onLayout={onLayout}
-        >
-          <PlayerImage
-            entry={entry}
-            layoutState={layoutState}
-            playerState={playerState}
-            value={value}
-            configuration={configuration}
-            onPlayerSeek={onPlayerSeek}
-            onCloseVideoModal={onCloseVideoModal}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-            docked={docked}
-            imageWidth={imageSize}
-            verticalOffset={
-              transportInfoHeight +
-              topInset +
-              withAdditionalOffset({ progressBarHeight, bottomInset })
-            }
-          />
+      <View
+        style={[
+          styles.audioPlayerContainer,
+          {
+            marginTop: isSmallScreen
+              ? -TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+              : -TABLET_LANDSCAPE.MARGIN_VERTICAL,
+            height: screenHeight - transportInfoHeight,
+          },
+          isSmallScreen
+            ? styles.audioPlayerContainerPaddingsSmall
+            : styles.audioPlayerContainerPaddings,
+        ]}
+      >
+        {/* PlayerImage non-docked */}
+        <View style={[styles.flex, withDebug(styles.debugYellow)]}>
+          {!docked ? (
+            <PlayerImage
+              docked={false}
+              entry={entry}
+              layoutState={layoutState}
+              playerState={playerState}
+              value={value}
+              configuration={configuration}
+              onPlayerSeek={onPlayerSeek}
+              onCloseVideoModal={onCloseVideoModal}
+              dimensions={dimensions}
+              playNextData={playNextData}
+              title={title}
+              summary={summary}
+              verticalOffset={withAdditionalOffset({
+                progressBarHeight,
+                bottomInset,
+              })}
+              onLayoutImage={onLayoutImage}
+            />
+          ) : null}
         </View>
         {/* PlayerImage */}
 
-        <View
-          style={{
-            maxWidth: imageSize,
-          }}
-        >
+        <View style={styles.controlsContainer}>
           <Controls
+            maxWidth={imageWidth}
             entry={entry}
             layoutState={layoutState}
             playerState={playerState}
@@ -199,6 +197,7 @@ export function TabletLandscapeLayout({
       </View>
 
       <DockedControls
+        ImageComponent={<FlexImage entry={entry} style={styles.flex} />}
         entry={entry}
         layoutState={layoutState}
         playerState={playerState}

package/src/Player/AudioLayer/Layout/TransportInfo/index.tsx

@@ -14,6 +14,8 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
 
 const styles = StyleSheet.create({
   container: {
@@ -52,6 +54,7 @@ export const TransportInfo = ({
   onLayout = noop,
 }: Props) => {
   const isTablet = useIsTablet();
+  const safeAreaFrame = useSafeAreaFrame();
   const languageData = useLanguageData("audio-player");
 
   const [marginBottom, setMarginBottom] = React.useState(0);
@@ -62,8 +65,18 @@ export const TransportInfo = ({
         event?.nativeEvent?.layout?.height
       );
 
-      const minHeight = Math.min(height, TABLET_LANDSCAPE.MARGIN_VERTICAL);
-      setMarginBottom(TABLET_LANDSCAPE.MARGIN_VERTICAL - minHeight);
+      const minHeight = Math.min(
+        height,
+        isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL
+      );
+
+      setMarginBottom(
+        (isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL) - minHeight
+      );
 
       // pass layoutChangeEvent to upper level
       onLayout(event);

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

@@ -2,9 +2,13 @@ export const PADDING_HORIZONTAL = 15;
 
 export const TABLET_VERTICAL_SEPARATOR_HEIGHT = 32;
 
+export const TABLET_VERTICAL_SEPARATOR_HEIGHT_S = 16;
+
 export const TABLET_LANDSCAPE = {
   MARGIN_VERTICAL: 80, // gap between safe-area edge and audio-player container
+  MARGIN_VERTICAL_S: 60, // gap between safe-area edge and audio-player container
   MAX_HEIGHT: 750,
+  MIN_WIDTH: 320, // Minimum width for the audio player container
 };
 
 export const TABLET_PORTRAIT = {

package/src/Player/AudioLayer/Layout/hooks/useTransportInfoHeight.ts

@@ -19,7 +19,7 @@ const builder = () => {
 };
 
 export const useTransportInfoHeight = () => {
-  const [height, setHeight] = React.useState(undefined);
+  const [height, setHeight] = React.useState(0);
 
   const layoutRef = useRefWithInitialValue<ReturnType<typeof builder>>(builder);
 

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

@@ -0,0 +1,7 @@
+/**
+ * Checks whether the screen height is matches with our threshold for small tablets.
+ * @param height screen height
+ * @returns boolean indicating if the height is less than 800 pixels
+ */
+export const isSmallTabletHeight = (height: number): boolean =>
+  !(height >= 800);