@applicaster/quick-brick-player 14.0.0-alpha.3552323332 → 14.0.0-alpha.3890252181

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.3552323332",
+  "version": "14.0.0-alpha.3890252181",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,13 +35,12 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-alpha.3552323332",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.7",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.3552323332",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.3552323332",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3552323332",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.34",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.34",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.3890252181",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.3890252181",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3890252181",
     "query-string": "7.1.3",
-    "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",
@@ -62,11 +61,9 @@
     "react": "*",
     "react-native": "*",
     "react-native-fs": "*",
-    "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-web": "*",
     "react-native-webview": "*",
     "uglify-js": "*",
     "validate-color": "*",

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

@@ -22,6 +22,8 @@ import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -38,7 +40,6 @@ type Props = {
   ImageComponent?: React.ReactNode;
   isActiveGesture?: boolean;
   minimisedHeight: number;
-  progressBarHeight: number;
   aspectRatio?: number;
 };
 
@@ -47,7 +48,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: 3, // from plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
+    marginTop: PROGRESS_BAR_HEIGHT,
   },
   content: {
     flex: 1,
@@ -160,7 +161,7 @@ export const DockedControls = (props: Props) => {
   const {
     entry,
     layoutState,
-    onPlayerSeek,
+    onPlayerSeek = noop,
     playNextData,
     ImageComponent,
     isActiveGesture = true,
@@ -210,8 +211,6 @@ export const DockedControls = (props: Props) => {
 
   const liveButton = Boolean(value("live_badge_enabled"));
 
-  const startComponentsAnimation = () => {};
-
   const dockedBackgroundColor = value("docked_player_background_color");
 
   const insets = useSafeAreaInsets();
@@ -234,7 +233,7 @@ export const DockedControls = (props: Props) => {
           layoutState={layoutState}
           onPlayerSeek={onPlayerSeek}
           playerState={playerState}
-          startComponentsAnimation={startComponentsAnimation}
+          startComponentsAnimation={noop}
           docked
         />
       ) : null}

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

@@ -4,7 +4,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import { MOBILE, NAVBAR_HEIGHT } from "./const";
 import { TransportInfo } from "./TransportInfo";
@@ -17,7 +16,7 @@ import {
   BottomDebugSquare,
   LeftDebugSquare,
   RightDebugSquare,
-} from "./Debug/index";
+} from "./DebugComponent";
 
 import { Props } from "./types";
 
@@ -79,8 +78,6 @@ export function MobileLayout({
   onSpeedButtonPress,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
@@ -88,12 +85,10 @@ export function MobileLayout({
 
   const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
-  const { progressBarHeight } = useModalAnimationContext();
 
   const { imageSize } = useMobileLayoutImageSize();
 
-  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
-    useTransportInfoHeight();
+  const { onLayout: onTransportInfoLayout } = useTransportInfoHeight();
 
   const controlsContainerHeight = React.useMemo(() => {
     return (
@@ -107,10 +102,6 @@ export function MobileLayout({
     );
   }, [screenHeight, topInset, imageSize, bottomInset]);
 
-  const verticalOffsetForImage = React.useMemo(() => {
-    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
-  }, [transportInfoHeight, progressBarHeight]);
-
   return (
     <View
       style={[
@@ -162,18 +153,9 @@ export function MobileLayout({
         >
           <PlayerImage
             entry={entry}
-            layoutState={layoutState}
-            playerState={playerState}
-            value={value}
-            configuration={configuration}
-            onPlayerSeek={onPlayerSeek}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-            docked={docked}
+            docked={false}
             imageWidth={imageSize}
-            verticalOffset={verticalOffsetForImage}
+            configuration={configuration}
           />
         </View>
         {/* PlayerImage */}

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

@@ -1,7 +1,16 @@
 import React, { PropsWithChildren } from "react";
 import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+  DURATION_TO_MINIMIZE,
+  DURATION_TO_MAXIMIZE,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+
+import { useChangePlayerState } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -15,17 +24,48 @@ type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: ImageStyle | ImageStyle[];
   imageWidth: number;
+  docked: boolean;
 }>;
 
-export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
+export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
+
+  const { minimisedHeight } = useModalAnimationContext();
+
+  const changePlayerState$ = useChangePlayerState({ docked });
+
+  React.useEffect(() => {
+    const subscription = changePlayerState$.subscribe({
+      next: (nextPlayerState: PlayerAnimationStateT) => {
+        if (nextPlayerState === PlayerAnimationStateEnum.minimize) {
+          Animated.timing(heightAnim, {
+            toValue: minimisedHeight,
+            duration: DURATION_TO_MINIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.maximize) {
+          Animated.timing(heightAnim, {
+            toValue: imageWidth,
+            duration: DURATION_TO_MAXIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
+          // minimize image immediatly
+          heightAnim.setValue(minimisedHeight);
+        }
+      },
+    });
 
-  if (!source) return null;
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [changePlayerState$, minimisedHeight, imageWidth]);
 
   return (
     <Animated.View
@@ -36,7 +76,7 @@ export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
         },
       ]}
     >
-      <Image resizeMode="cover" style={style} source={source} />
+      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
     </Animated.View>
   );
 };

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Image, ImageStyle } from "react-native";
-
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -9,12 +8,9 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
 
-  if (!source) return null;
-
-  return <Image resizeMode="cover" style={style} source={source} />;
+  return (
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
+  );
 };

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

@@ -53,6 +53,7 @@ export const PlayerImage = (props: Props) => {
             entry={entry}
             style={[styles.backgroundImageContainer, { borderRadius }]}
             imageWidth={imageWidth}
+            docked={docked}
           />
         )}
       </View>

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

@@ -1,11 +1,6 @@
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
@@ -17,8 +12,6 @@ import { Props } from "./types";
 import { isSmallTabletHeight as getIsSmallTabletHeight } from "./utils";
 import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "./const";
 
-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
@@ -68,22 +61,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const isTabletWithHomeButton = (bottomInset: number): boolean =>
-  bottomInset === 0;
-
-const withAdditionalOffset = ({ progressBarHeight, bottomInset }) => {
-  if (isIOS && isTabletWithHomeButton(bottomInset)) {
-    return progressBarHeight === 0 ? 8 : progressBarHeight + 2;
-  }
-
-  if (isIOS && !isTabletWithHomeButton(bottomInset)) {
-    return progressBarHeight === 0 ? 4 : 1;
-  }
-
-  // android
-  return progressBarHeight === 0 ? 4 : 0.5;
-};
-
 export function TabletLandscapeLayout({
   entry,
   layoutState,
@@ -96,21 +73,16 @@ export function TabletLandscapeLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
   const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
 
-  const { bottom: bottomInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
   const isSmallScreen = getIsSmallTabletHeight(screenHeight);
-  const { progressBarHeight } = useModalAnimationContext();
 
   const onLayoutImage = React.useCallback((e) => {
     setImageWidth(e.nativeEvent.layout.width);
@@ -149,20 +121,7 @@ export function TabletLandscapeLayout({
               <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}

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

@@ -4,8 +4,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { withDebug } from "./debug";
 import { TABLET_PORTRAIT } from "./const";
@@ -15,7 +13,6 @@ import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
 import { useTabletLayoutImageSize } from "./hooks";
-import { DockedControls } from "./DockedControls";
 import { VerticalGutter } from "./VerticalGutter";
 
 import { Props } from "./types";
@@ -82,11 +79,8 @@ export function TabletPortraitLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
@@ -94,7 +88,6 @@ export function TabletPortraitLayout({
 
   const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
-  const { progressBarHeight } = useModalAnimationContext();
 
   const {
     imageSize,
@@ -153,21 +146,9 @@ export function TabletPortraitLayout({
           >
             <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={
-                toNumberWithDefaultZero(topOffset) - progressBarHeight
-              }
             />
           </View>
 
@@ -196,20 +177,6 @@ export function TabletPortraitLayout({
           </View>
         </View>
       </View>
-      {/* PlayerImage */}
-
-      <DockedControls
-        entry={entry}
-        layoutState={layoutState}
-        playerState={playerState}
-        value={value}
-        dimensions={dimensions}
-        onCloseVideoModal={onCloseVideoModal}
-        onPlayerSeek={onPlayerSeek}
-        playNextData={playNextData}
-        title={title}
-        summary={summary}
-      />
     </View>
   );
 }

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { compose, map, propOr, split, take, trim } from "ramda";
 import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
@@ -13,6 +12,7 @@ import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { isSmallTabletHeight } from "../utils";
+import { getPlayerActionButtons } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: {
@@ -82,14 +82,8 @@ export const TransportInfo = ({
   );
 
   const actionButtons = React.useMemo(
-    () =>
-      compose(
-        take(2),
-        map(trim),
-        split(","),
-        propOr("", "player_action_buttons")
-      )(configuration),
-    [configuration.player_action_buttons]
+    () => getPlayerActionButtons(configuration),
+    [configuration]
   );
 
   return (

package/src/Player/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
-import { isNil } from "lodash";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 
 const formatTime = (milliseconds: number) => {
   const totalSeconds = Math.floor(milliseconds / 1000);

package/src/Player/PlayerModal/GestureAnimatedScrollView.ts

@@ -0,0 +1,7 @@
+import { Animated } from "react-native";
+import { createNativeWrapper } from "react-native-gesture-handler";
+
+export const GestureAnimatedScrollView = createNativeWrapper(
+  Animated.ScrollView,
+  {}
+);

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -51,14 +51,15 @@ export function AnimatedModal({
     <PanGestureHandler {...gestureHandlerProps}>
       <Animated.View
         pointerEvents={"auto"}
-        // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
-        style={{
-          backgroundColor: "black",
-          borderTopLeftRadius: borderTopRadiusAnimated,
-          borderTopRightRadius: borderTopRadiusAnimated,
-          transform: [{ translateY }],
-          height: SCREEN_HEIGHT,
-        }}
+        style={[
+          styles.modalWrapper,
+          {
+            borderTopLeftRadius: borderTopRadiusAnimated,
+            borderTopRightRadius: borderTopRadiusAnimated,
+            transform: [{ translateY }],
+            height: SCREEN_HEIGHT,
+          },
+        ]}
       >
         <Animated.View
           style={[
@@ -95,9 +96,7 @@ export function AnimatedModal({
           >
             <Pressable
               testID="collapsedBarWrapper"
-              onPress={() => {
-                expand();
-              }}
+              onPress={expand}
               style={styles.collapsedBarWrapper}
             >
               {collapsedContent}

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,24 +1,24 @@
 import React, { useRef, ReactElement } from "react";
 
 import { StyleSheet, Animated, Pressable, ViewStyle } from "react-native";
-import {
-  createNativeWrapper,
-  PanGestureHandler,
-} from "react-native-gesture-handler";
+import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { useVideoModalState } from "./hooks";
 import {
   DEFAULT_IMAGE_RATIO_VIDEO,
+  MODAL_COLLAPSE_START,
   MODAL_RADIUS,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
+  VIDEO_TRANSITION_THRESHOLD,
 } from "./consts";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
 
 const orientationStyles = StyleSheet.create({
   landscape: { flexDirection: "row" },
@@ -29,8 +29,6 @@ const directionStyles = (isLandscape: boolean): ViewStyle => {
   return isLandscape ? orientationStyles.landscape : orientationStyles.portrait;
 };
 
-const GestureAnimatedScrollView = createNativeWrapper(Animated.ScrollView, {});
-
 type AnimatedModalProps = {
   enabled?: boolean;
   pip?: boolean;
@@ -52,6 +50,8 @@ type AnimatedModalProps = {
   };
 };
 
+const height = SCREEN_HEIGHT;
+
 export function VideoPlayerModal({
   enabled = true,
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
@@ -65,11 +65,9 @@ export function VideoPlayerModal({
   const isTablet = useIsTablet();
 
   let width = SCREEN_WIDTH;
-  let height = SCREEN_HEIGHT;
 
   if (isTablet && !isTabletPortrait) {
     width = style?.tabletLandscapeWidth || width;
-    height = SCREEN_HEIGHT; // Keep height consistent for landscape
   }
 
   const { minimised_height: minimisedHeight } = useConfiguration();
@@ -91,11 +89,11 @@ export function VideoPlayerModal({
 
   const SCALE_FACTOR = 1 / (width / aspectRatio / minimisedHeight); // Scale factor for expanded content
 
-  const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
+  const insets = useSafeAreaInsets();
 
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = translateY.interpolate({
-    inputRange: [height * 0.8, height - collapsedHeight],
+    inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
     outputRange: [0, 1],
     extrapolate: "clamp",
   });
@@ -108,17 +106,12 @@ export function VideoPlayerModal({
 
   const xPosition = translateY.interpolate({
     inputRange: [height * VIDEO_TRANSITION_THRESHOLD, height - collapsedHeight],
-    outputRange: [
-      0,
-      -(width - width * SCALE_FACTOR) / 2, // Adjust this range as needed (-(width * scale_factor))
-    ], // Adjust this range as needed (-(width * scale_factor))
+    outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
     extrapolate: "clamp",
   });
 
   const vidHeight = width / aspectRatio;
 
-  const insets = useSafeAreaInsets();
-
   const yPosition = translateY.interpolate({
     inputRange: [height * VIDEO_TRANSITION_THRESHOLD, height - collapsedHeight],
     outputRange: [
@@ -135,7 +128,7 @@ export function VideoPlayerModal({
               (SCREEN_WIDTH / aspectRatio) * SCALE_FACTOR) /
               2
           ),
-    ], // Adjust this range as needed (-(some_padding_top + (height * scale_factor)))
+    ],
     extrapolate: "clamp",
   });
 
@@ -144,7 +137,7 @@ export function VideoPlayerModal({
       SCREEN_HEIGHT * VIDEO_TRANSITION_THRESHOLD,
       SCREEN_HEIGHT - collapsedHeight,
     ],
-    outputRange: [1, SCALE_FACTOR], // Adjust this range as needed
+    outputRange: [1, SCALE_FACTOR],
     extrapolate: "clamp",
   });
 
@@ -166,14 +159,15 @@ export function VideoPlayerModal({
     >
       <Animated.View
         pointerEvents={"auto"}
-        // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals
-        style={{
-          backgroundColor: "black",
-          borderTopLeftRadius: borderTopRadiusAnimated,
-          borderTopRightRadius: borderTopRadiusAnimated,
-          transform: [{ translateY }],
-          height: SCREEN_HEIGHT,
-        }}
+        style={[
+          styles.modalWrapper,
+          {
+            borderTopLeftRadius: borderTopRadiusAnimated,
+            borderTopRightRadius: borderTopRadiusAnimated,
+            transform: [{ translateY }],
+            height: SCREEN_HEIGHT,
+          },
+        ]}
       >
         <Animated.View
           pointerEvents={"auto"}
@@ -230,9 +224,7 @@ export function VideoPlayerModal({
           >
             <Pressable
               testID="collapsedBarWrapper"
-              onPress={() => {
-                expand();
-              }}
+              onPress={expand}
               style={styles.collapsedBarWrapper}
             >
               {collapsedContent}

package/src/Player/PlayerModal/consts/index.ts

@@ -1,15 +1,29 @@
-import { Dimensions } from "react-native";
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { Dimensions, StatusBar } from "react-native";
 
 export const DOCKED_PROGRESSBAR_HEIGHT = 3; // Height of the docked progress bar plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
 
-export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
-  Dimensions.get("window");
+export const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
 
-export const MODAL_COLLAPSE_START = SCREEN_HEIGHT * 0.8; // 80% of screen height
+const windowDimensions = Dimensions.get("window");
 
-export const DRAG_TO_COLLAPSE = 0.4; // 40% to collapse
+const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
 
-export const DRAG_TO_EXPAND = 0.6; // 60% to expand
+export const SCREEN_WIDTH = windowDimensions.width;
+
+export const SCREEN_HEIGHT =
+  windowDimensions.height + (isOldAndroidDevice ? StatusBar.currentHeight : 0);
+
+export const MODAL_COLLAPSE_START = SCREEN_HEIGHT * 0.7; // 70% of screen height
+
+export const DRAG_TO_COLLAPSE = 0.02; // 2% to collapse
+
+export const DRAG_TO_EXPAND = 0.02; // 2% to expand
 
 export const DEFAULT_IMAGE_RATIO_VIDEO = 16 / 9; // Default aspect ratio for video
 

package/src/Player/PlayerModal/hooks/index.ts

@@ -31,6 +31,8 @@ export const useVideoModalState = (
   const collapsedHeight =
     minimisedHeight + bottom + bottomTabBarHeight + PROGRESS_BAR_HEIGHT;
 
+  const translateY = translateYRef.current;
+
   const handleExpand = useCallback(
     (toValue: number) => {
       return Animated.timing(translateYRef.current, {
@@ -53,17 +55,6 @@ export const useVideoModalState = (
     [translateYRef]
   );
 
-  // setup translateY if not provided
-  if (!translateYRef.current) {
-    const initialTranslateY = handleExpand
-      ? 0
-      : SCREEN_HEIGHT - collapsedHeight;
-
-    translateYRef.current.setValue(initialTranslateY);
-  }
-
-  const translateY = translateYRef.current;
-
   const offset = useRef(SCREEN_HEIGHT - collapsedHeight);
 
   // Gesture handler for modal
@@ -91,25 +82,27 @@ export const useVideoModalState = (
         newY = SCREEN_HEIGHT - collapsedHeight;
       }
 
-      const shouldCollapse = translationY > SCREEN_HEIGHT * DRAG_TO_COLLAPSE;
-      const shouldExpand = translationY < -SCREEN_HEIGHT * DRAG_TO_EXPAND;
+      const shouldCollapse =
+        translationY > (SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_COLLAPSE;
+
+      const shouldExpand =
+        translationY < -(SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_EXPAND;
 
       if (!collapsed && shouldCollapse) {
         // Collapse
         Animated.timing(translateY, {
           toValue: SCREEN_HEIGHT - collapsedHeight,
-          duration: 250,
+          duration: ANIMATION_DURATION,
           useNativeDriver: true,
         }).start(() => {
           minimiseVideoModal();
           offset.current = SCREEN_HEIGHT - collapsedHeight;
-          translateY.setValue(SCREEN_HEIGHT - collapsedHeight);
         });
       } else if (collapsed && shouldExpand) {
         // Expand
         Animated.timing(translateY, {
           toValue: 0,
-          duration: 250,
+          duration: ANIMATION_DURATION,
           useNativeDriver: true,
         }).start(() => {
           maximiseVideoModal();

package/src/Player/PlayerModal/styles.ts

@@ -1,4 +1,3 @@
-/* eslint-disable react-native/no-color-literals */
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import {
   useIsTablet,
@@ -50,6 +49,9 @@ export const useStyles = ({ height }: { height: number }) => {
 
   const backgroundColor = useBackgroundColor();
 
+  const BG_COLOR_DEFAULT_BLACK = "black";
+  const BG_COLOR_DEFAULT_TRANSPARENT = "transparent";
+
   const styles = StyleSheet.create({
     modal: {
       position: "absolute",
@@ -61,8 +63,11 @@ export const useStyles = ({ height }: { height: number }) => {
       zIndex: 100,
       overflow: "hidden",
     },
+    modalWrapper: {
+      backgroundColor: BG_COLOR_DEFAULT_BLACK,
+    },
     collapsedModalBg: {
-      backgroundColor: "black",
+      backgroundColor: BG_COLOR_DEFAULT_BLACK,
     },
     modalContent: {
       flex: 1,
@@ -70,12 +75,13 @@ export const useStyles = ({ height }: { height: number }) => {
     },
     expandedContentContainer: {
       justifyContent: "flex-start",
-      backgroundColor: "transparent",
+      backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
       zIndex: 1,
       flex: 0,
     },
     extraContentScrollView: {
-      backgroundColor: "transparent",
+      width: "100%",
+      backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
     },
     collapsedBarContainer: {
       ...StyleSheet.absoluteFillObject,

package/src/Player/PlayerView/GenericTVPlayerView.tsx

@@ -13,11 +13,10 @@ export const GenericTVPlayerView: React.FC<GenericTVPlayerViewProps> = ({
   audioPlayerProps,
   transportControls,
   entry,
-  inline,
 }) => {
   return (
     <>
-      {type === "audio" && inline ? (
+      {type === "audio" ? (
         <AudioPlayer
           audio_item={entry}
           plugin_configuration={pluginConfiguration}

package/src/Player/index.tsx

@@ -61,6 +61,7 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   playerSize: { width: "100%", height: "100%" },
+  flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
 const logger = createLogger({
@@ -1021,14 +1022,9 @@ export default class VideoPlayer extends React.Component<
                 entry={entry}
                 aspectRatio={1}
                 layoutState={sharedWrapperViewProps.layoutState}
-                onPlayerSeek={() => {}}
                 playNextData={sharedWrapperViewProps.playNextData}
-                progressBarHeight={4}
                 ImageComponent={
-                  <FlexImage
-                    entry={entry}
-                    style={{ height: "100%", aspectRatio: 1, flex: -1 }}
-                  />
+                  <FlexImage entry={entry} style={styles.flexImage} />
                 }
               />
             </View>
@@ -1140,9 +1136,7 @@ export default class VideoPlayer extends React.Component<
                   entry={entry}
                   aspectRatio={aspectRatio}
                   layoutState={sharedWrapperViewProps.layoutState}
-                  onPlayerSeek={() => {}}
                   playNextData={sharedWrapperViewProps.playNextData}
-                  progressBarHeight={4}
                 />
               </View>
             )