@applicaster/quick-brick-player 14.0.0-rc.82 → 14.0.0-rc.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.82",
+  "version": "14.0.0-rc.84",
   "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": "14.0.0-rc.67",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.83",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.71",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.82",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.82",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.82",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.84",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.84",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.84",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -61,6 +61,7 @@ type Props = {
     inline: boolean;
     docked: boolean;
     isModal: boolean;
+    pip: boolean;
   };
   playNextData: PlayNextData;
   isTabletPortrait?: boolean;
@@ -246,13 +247,28 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
+  const layoutStateMemo = React.useMemo(
+    () => ({
+      inline: layoutState.inline,
+      docked: layoutState.docked,
+      isModal: layoutState.isModal,
+      pip: layoutState.pip,
+    }),
+    [
+      layoutState.inline,
+      layoutState.docked,
+      layoutState.isModal,
+      layoutState.pip,
+    ]
+  );
+
   return (
     <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
       <View style={Styles.playerContainer} onLayout={onLayout}>
         <Layout
           entry={entry}
           playerState={playerState}
-          layoutState={layoutState}
+          layoutState={layoutStateMemo}
           value={value}
           onPlaybackButtonPress={onPlaybackButtonPress}
           onRewindButtonPress={onRewindButtonPress}

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
-import * as R from "ramda";
+import { StyleSheet, View } from "react-native";
 import {
   useIsTablet,
   useZStore,
@@ -16,7 +15,6 @@ import {
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
-import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
@@ -27,6 +25,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { partial } from "@applicaster/zapp-react-native-utils/utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -45,7 +44,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: PROGRESS_BAR_HEIGHT,
   },
   content: {
     flex: 1,
@@ -88,14 +86,12 @@ const styles = StyleSheet.create({
   buttons: {
     marginVertical: 10,
   },
+  liveMarginTop: { marginTop: 0 },
+  marginTop: { marginTop: PROGRESS_BAR_HEIGHT },
 });
 
-const playerDimensionsStyle = (
-  minimisedHeight: number,
-  addPadding: boolean
-): ViewStyle => ({
-  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
-});
+const getValue = (key: string, stylesObj: Record<string, any>) =>
+  stylesObj?.[key] ?? null;
 
 const controlButtons = (
   live: boolean,
@@ -161,7 +157,6 @@ export const DockedControls = (props: Props) => {
     onPlayerSeek = noop,
     playNextData,
     ImageComponent,
-    isActiveGesture = true,
     aspectRatio,
   } = props;
 
@@ -179,11 +174,6 @@ export const DockedControls = (props: Props) => {
   const configuration = useZStore("playerConfiguration")();
   const playerState = usePlayerState("shared-player-wrapper-docked");
 
-  const getValue = React.useCallback(
-    (key: string, stylesObj: {}) => R.propOr(null, key, stylesObj),
-    []
-  );
-
   const value = React.useCallback(
     (key: string) => {
       const retVal = getValue(key, configuration);
@@ -202,7 +192,7 @@ export const DockedControls = (props: Props) => {
 
       return retVal;
     },
-    [...Object.values(configuration), playerState.seekableDuration, getValue]
+    [...Object.values(configuration), playerState.seekableDuration]
   );
 
   const { title, summary } = useTitleSummaryOverlay(
@@ -219,15 +209,65 @@ export const DockedControls = (props: Props) => {
 
   const insets = useSafeAreaInsets();
 
+  const progressBarLayoutState = React.useMemo(
+    () => ({
+      inline: layoutState.inline,
+      docked: true,
+      isModal: layoutState.isModal,
+      pip: layoutState.pip,
+    }),
+    [layoutState.inline, layoutState.isModal, layoutState.pip]
+  );
+
+  const _controlButtons = React.useMemo(
+    () => partial(controlButtons, playerState.isLive && liveButton),
+    [playerState.isLive, liveButton]
+  );
+
+  const containerStyles = React.useMemo(
+    () => ({
+      height: minimisedHeight,
+      maxHeight: minimisedHeight,
+    }),
+    [minimisedHeight]
+  );
+
+  const imageComponentWrapperStyles = React.useMemo(
+    () => ({
+      aspectRatio: aspectRatio,
+      height: minimisedHeight,
+    }),
+    [aspectRatio, minimisedHeight]
+  );
+
+  const backgroundColorStyle = React.useMemo(
+    () => ({
+      backgroundColor: dockedBackgroundColor,
+    }),
+    [dockedBackgroundColor]
+  );
+
+  const bottomSpacerStyle = React.useMemo(() => {
+    const tabBarHeight = menuVisible ? bottomTabBarHeight : 0;
+    const safeAreaBottomInset = insets.bottom || 0;
+
+    return {
+      height: safeAreaBottomInset + tabBarHeight,
+    };
+  }, [menuVisible, insets.bottom]);
+
+  const contentInfoContent = React.useMemo(
+    () => ({ ...entry, title, summary }),
+    [title, summary, entry]
+  );
+
   return (
     <>
       <View
         style={[
           styles.container,
-          {
-            height: minimisedHeight,
-            maxHeight: minimisedHeight,
-          },
+          containerStyles,
+          playerState.isLive ? styles.liveMarginTop : styles.marginTop,
         ]}
       >
         {!playerState.isLive ? (
@@ -236,42 +276,23 @@ export const DockedControls = (props: Props) => {
             content={entry}
             value={value}
             visible
-            layoutState={layoutState}
+            layoutState={progressBarLayoutState}
             onPlayerSeek={onPlayerSeek}
             playerState={playerState}
-            startComponentsAnimation={noop}
             docked
           />
         ) : null}
 
         <View style={styles.content}>
           <View style={styles.touchableArea}>
-            {isActiveGesture || layoutState.docked ? (
-              <View
-                style={{ aspectRatio: aspectRatio, height: minimisedHeight }}
-              >
-                {ImageComponent || null}
-              </View>
-            ) : (
-              <View
-                style={playerDimensionsStyle(
-                  minimisedHeight,
-                  isActiveGesture || layoutState.docked
-                )}
-              />
-            )}
+            <View style={imageComponentWrapperStyles}>
+              {ImageComponent || null}
+            </View>
             <View
               testID="content-info"
-              style={[
-                styles.contentInfo,
-                { backgroundColor: dockedBackgroundColor },
-              ]}
+              style={[styles.contentInfo, backgroundColorStyle]}
             >
-              <ContentInfo
-                content={{ ...entry, title, summary }}
-                value={value}
-                docked
-              />
+              <ContentInfo content={contentInfoContent} value={value} docked />
             </View>
           </View>
           <View
@@ -279,15 +300,13 @@ export const DockedControls = (props: Props) => {
               isTablet
                 ? styles.controlsContainerForTablet
                 : styles.controlsContainerForMobile,
-              { backgroundColor: dockedBackgroundColor },
+              backgroundColorStyle,
             ]}
           >
             <Controls
               value={value}
               visible
-              buttons={R.partial(controlButtons, [
-                playerState.isLive && liveButton,
-              ])}
+              buttons={_controlButtons}
               style={styles.playPauseButton}
               playNextData={playNextData}
               playerState={playerState}
@@ -302,12 +321,7 @@ export const DockedControls = (props: Props) => {
           </View>
         </View>
       </View>
-      <View
-        style={{
-          height: insets.bottom + (menuVisible ? bottomTabBarHeight : 0),
-          backgroundColor: dockedBackgroundColor,
-        }}
-      />
+      <View style={[bottomSpacerStyle, backgroundColorStyle]} />
     </>
   );
 };

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

@@ -151,12 +151,7 @@ export function MobileLayout({
             },
           ]}
         >
-          <PlayerImage
-            entry={entry}
-            docked={false}
-            imageWidth={imageSize}
-            configuration={configuration}
-          />
+          <PlayerImage entry={entry} configuration={configuration} />
         </View>
         {/* PlayerImage */}
 

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

@@ -4,7 +4,6 @@ import { LayoutChangeEvent, View } from "react-native";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-import { AnimatedImage } from "./AnimatedImage";
 import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
@@ -13,19 +12,12 @@ import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/nu
 type Props = {
   entry: ZappEntry;
   configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
-  docked: boolean;
-  imageWidth?: Option<number>;
+  docked?: boolean;
   onLayoutImage?: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
-  const {
-    entry,
-    docked,
-    imageWidth,
-    configuration,
-    onLayoutImage = noop,
-  } = props;
+  const { entry, docked = false, configuration, onLayoutImage = noop } = props;
 
   const isShadowEnabled = toBooleanWithDefaultTrue(
     configuration?.audio_player_artwork_shadow_enabled
@@ -43,19 +35,9 @@ export const PlayerImage = (props: Props) => {
         onLayout={onLayoutImage}
         style={[shouldShowShadow ? styles.shadow : undefined, { borderRadius }]}
       >
-        {!imageWidth ? (
-          <View style={[styles.defaultImageWrapperView, { 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, { borderRadius }]}
-            imageWidth={imageWidth}
-            docked={docked}
-          />
-        )}
+        <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
+          <FlexImage entry={entry} style={styles.backgroundImageContainer} />
+        </View>
       </View>
     </View>
   );

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

@@ -117,14 +117,11 @@ export function TabletLandscapeLayout({
         <View style={[styles.flex, styles.audioPlayerContainerHeightLimit]}>
           {/* PlayerImage non-docked */}
           <View style={[styles.flex, withDebug(styles.debugYellow)]}>
-            {!docked ? (
-              <PlayerImage
-                docked={false}
-                entry={entry}
-                configuration={configuration}
-                onLayoutImage={onLayoutImage}
-              />
-            ) : null}
+            <PlayerImage
+              entry={entry}
+              configuration={configuration}
+              onLayoutImage={onLayoutImage}
+            />
           </View>
           {/* PlayerImage */}
 

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

@@ -144,12 +144,7 @@ export function TabletPortraitLayout({
             ]}
             onLayout={onLayout}
           >
-            <PlayerImage
-              entry={entry}
-              configuration={configuration}
-              docked={docked}
-              imageWidth={imageSize}
-            />
+            <PlayerImage entry={entry} configuration={configuration} />
           </View>
 
           <View

package/src/Player/AudioLayer/utils.ts

@@ -1,10 +1,6 @@
 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";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export const NAMESPACE = "audio-player";
 
@@ -36,25 +32,3 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
-
-export const calculateBorderRadius = (
-  docked: boolean,
-  startComponentsAnimation: boolean,
-  isActiveGesture: boolean,
-  playerAnimationState: PlayerAnimationStateT,
-  configuration: Record<string, any>
-): number => {
-  const shouldRemoveBorderRadius =
-    (startComponentsAnimation &&
-      isActiveGesture &&
-      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
-    docked;
-
-  if (shouldRemoveBorderRadius) {
-    return 0;
-  }
-
-  return toNumberWithDefaultZero(
-    configuration.audio_player_artwork_border_radius
-  );
-};

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -29,10 +29,10 @@ export function AnimatedModal({
 
   const styles = useStyles({ height: collapsedHeight, type: "audio" });
 
-  const WINDOW_HEIGHT = getWindowHeight();
-  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+  const height = getWindowHeight();
+  const heightAboveMinimised = height - collapsedHeight;
 
-  const MODAL_COLLAPSE_START = WINDOW_HEIGHT * MODAL_COLLAPSE_RATIO;
+  const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = translateY.interpolate({
@@ -63,7 +63,7 @@ export function AnimatedModal({
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
             transform: [{ translateY }],
-            height: WINDOW_HEIGHT,
+            height: height,
           },
         ]}
       >
@@ -73,7 +73,6 @@ export function AnimatedModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: WINDOW_HEIGHT,
             },
           ]}
         >

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useMemo, useRef } from "react";
 
-import { Animated, Pressable, StyleSheet, ViewStyle } from "react-native";
+import { Animated, Pressable } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
@@ -12,22 +12,23 @@ import {
   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 {
+  SafeAreaView,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
 import { PlayerDetailsWrapperHeightContext } from "./context";
-import { getWindowHeight, getWindowWidth } from "./utils";
-
-const orientationStyles = StyleSheet.create({
-  landscape: { flexDirection: "row" },
-  portrait: { flexDirection: "column" },
-});
-
-const directionStyles = (isLandscape: boolean): ViewStyle => {
-  return isLandscape ? orientationStyles.landscape : orientationStyles.portrait;
-};
+import {
+  getInsetsOffset,
+  getWindowHeight,
+  getWindowWidth,
+  directionStyles,
+  getScaledPos,
+  getExtraContentPadding,
+} from "./utils";
 
 type AnimatedModalProps = {
   pip?: boolean;
@@ -59,16 +60,19 @@ export function VideoPlayerModal({
   const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
-  const WINDOW_WIDTH = useMemo(() => getWindowWidth(), []); // remember initial width, ignore rotation changes
+  // remember initial width, ignore rotation changes
+  const width = useMemo(
+    () =>
+      isTablet && !isTabletPortrait
+        ? style.tabletLandscapeWidth
+        : getWindowWidth(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   const height = useMemo(() => getWindowHeight(), []); // remember initial height, ignore rotation changes
   const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
-  let width = WINDOW_WIDTH;
-
-  if (isTablet && !isTabletPortrait) {
-    width = style?.tabletLandscapeWidth || width;
-  }
-
   const { minimised_height: minimisedHeight } = useConfiguration();
   const scrollViewRef = useRef<typeof Animated.ScrollView | null>(null);
 
@@ -84,9 +88,9 @@ export function VideoPlayerModal({
     expand,
   } = useVideoModalState(modal ? translateYRef : dummyRef);
 
-  const heightAboveMinimised = height - collapsedHeight;
+  const frame = useSafeAreaFrame();
 
-  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+  const heightAboveMinimised = height - collapsedHeight;
 
   const styles = useStyles({ height: collapsedHeight });
 
@@ -113,9 +117,10 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(1);
 
+  // animated position for video content during modal transition
   const xPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, heightAboveMinimised],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
         extrapolate: "clamp",
       })
@@ -123,34 +128,26 @@ export function VideoPlayerModal({
 
   const vidHeight = width / aspectRatio;
 
+  // animated position for video content during modal transition
   const yPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [
           0,
-          isTablet && isTabletLandscape
-            ? -((-PROGRESS_BAR_HEIGHT + height - vidHeight * SCALE_FACTOR) / 2)
-            : -(
-                PROGRESS_BAR_HEIGHT +
-                insets.top / 2 +
-                (WINDOW_WIDTH / aspectRatio -
-                  (WINDOW_WIDTH / aspectRatio) * SCALE_FACTOR) /
-                  2
-              ),
+          -(
+            PROGRESS_BAR_HEIGHT +
+            getInsetsOffset(insets, isTabletPortrait) +
+            getScaledPos(height, vidHeight, minimisedHeight, isTabletPortrait)
+          ),
         ],
         extrapolate: "clamp",
       })
     : new Animated.Value(0);
 
+  // animated position for video content during modal transition
   const scalePosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
         outputRange: [1, SCALE_FACTOR],
         extrapolate: "clamp",
       })
@@ -158,7 +155,7 @@ export function VideoPlayerModal({
 
   const borderTopRadiusAnimated = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [MODAL_RADIUS, 0],
         extrapolate: "clamp",
       })
@@ -184,88 +181,92 @@ export function VideoPlayerModal({
       waitFor={scrollViewRef}
       {...gestureHandlerProps}
     >
-      <Animated.View
-        pointerEvents={"auto"}
-        style={[
-          styles.modalWrapper,
-          {
-            borderTopLeftRadius: borderTopRadiusAnimated,
-            borderTopRightRadius: borderTopRadiusAnimated,
-            transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
-            height: height,
-          },
-        ]}
-      >
+      <SafeAreaView pointerEvents="box-none" edges={["bottom"]}>
         <Animated.View
           pointerEvents={"auto"}
           style={[
-            styles.modal,
-            collapsed ? styles.collapsedModalBg : null,
+            styles.modalWrapper,
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: height,
+              transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
+              height: frame.height,
             },
           ]}
         >
           <Animated.View
-            pointerEvents={!collapsed ? "auto" : "none"}
-            style={[styles.modalContent, directionStyles(isTabletLandscape)]}
+            pointerEvents={"auto"}
+            style={[
+              styles.modal,
+              collapsed ? styles.collapsedModalBg : null,
+              {
+                borderTopLeftRadius: borderTopRadiusAnimated,
+                borderTopRightRadius: borderTopRadiusAnimated,
+              },
+            ]}
           >
             <Animated.View
+              pointerEvents={!collapsed ? "auto" : "none"}
               style={[
-                styles.expandedContentContainer,
-                {
-                  transform: [
-                    { translateX: xPosition },
-                    { translateY: yPosition },
-                    { scale: scalePosition },
-                  ],
-                },
+                pip ? styles.modalContentPiP : styles.modalContent,
+                directionStyles(isTabletPortrait),
               ]}
             >
-              {content}
+              <Animated.View
+                style={[
+                  styles.expandedContentContainer,
+                  {
+                    transform: [
+                      { translateX: xPosition },
+                      { translateY: yPosition },
+                      { scale: scalePosition },
+                    ],
+                  },
+                ]}
+              >
+                {content}
+              </Animated.View>
+              {extraContent ? (
+                <GestureAnimatedScrollView
+                  ref={scrollViewRef}
+                  contentContainerStyle={getExtraContentPadding(insets)}
+                  bounces={false}
+                  overScrollMode="never"
+                  onLayout={onScrollViewLayout}
+                  style={[
+                    styles.extraContentScrollView,
+                    { opacity: expandedOpacity },
+                  ]}
+                >
+                  <PlayerDetailsWrapperHeightContext.Provider
+                    value={playerDetailsWrapperHeight}
+                  >
+                    {extraContent}
+                  </PlayerDetailsWrapperHeightContext.Provider>
+                </GestureAnimatedScrollView>
+              ) : null}
             </Animated.View>
-            {extraContent ? (
-              <GestureAnimatedScrollView
-                ref={scrollViewRef}
-                contentContainerStyle={{
-                  paddingBottom: insets.bottom,
-                }}
-                onLayout={onScrollViewLayout}
+
+            {!isFullScreenOrPIP ? (
+              <Animated.View
+                pointerEvents={collapsed ? "box-none" : "none"}
                 style={[
-                  styles.extraContentScrollView,
-                  { opacity: expandedOpacity },
+                  styles.collapsedBarContainer,
+                  { opacity: collapsedOpacity },
                 ]}
               >
-                <PlayerDetailsWrapperHeightContext.Provider
-                  value={playerDetailsWrapperHeight}
+                <Pressable
+                  testID="collapsedBarWrapper"
+                  onPress={expand}
+                  style={styles.collapsedBarWrapper}
                 >
-                  {extraContent}
-                </PlayerDetailsWrapperHeightContext.Provider>
-              </GestureAnimatedScrollView>
+                  {collapsedContent}
+                </Pressable>
+              </Animated.View>
             ) : null}
           </Animated.View>
-
-          {!isFullScreenOrPIP ? (
-            <Animated.View
-              pointerEvents={collapsed ? "box-none" : "none"}
-              style={[
-                styles.collapsedBarContainer,
-                { opacity: collapsedOpacity },
-              ]}
-            >
-              <Pressable
-                testID="collapsedBarWrapper"
-                onPress={expand}
-                style={styles.collapsedBarWrapper}
-              >
-                {collapsedContent}
-              </Pressable>
-            </Animated.View>
-          ) : null}
         </Animated.View>
-      </Animated.View>
+      </SafeAreaView>
     </PanGestureHandler>
   );
 }

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

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { State } from "react-native-gesture-handler";
 import { Animated } from "react-native";
 
@@ -15,7 +18,7 @@ import {
 } from "../consts";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { usePlugins } from "@applicaster/zapp-react-native-redux";
-import { getWindowHeight } from "../utils";
+import { isOldAndroidDevice } from "../utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -24,8 +27,6 @@ export const useVideoModalState = (
 ) => {
   const { minimised_height: minimisedHeight } = useConfiguration();
 
-  const WINDOW_HEIGHT = getWindowHeight();
-
   const {
     maximiseVideoModal,
     minimiseVideoModal,
@@ -42,17 +43,16 @@ export const useVideoModalState = (
     videoModalState.visible &&
     videoModalState.mode === VideoModalMode.MINIMIZED;
 
-  const { bottom } = useSafeAreaInsets();
-
-  const initialBottomOffset = useRef(bottom).current;
+  const frame = useSafeAreaFrame();
+  const insets = useSafeAreaInsets();
 
   const collapsedHeight =
     minimisedHeight +
-    initialBottomOffset +
     (menuVisible ? bottomTabBarHeight : 0) +
+    (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
     PROGRESS_BAR_HEIGHT;
 
-  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+  const heightAboveMinimised = frame.height - collapsedHeight;
 
   const translateY = translateYRef.current;
 
@@ -179,7 +179,12 @@ export const useVideoModalState = (
         });
       }
     }
-  }, [videoModalState.visible, videoModalState.mode, collapsedHeight]);
+  }, [
+    videoModalState.visible,
+    videoModalState.mode,
+    collapsedHeight,
+    heightAboveMinimised,
+  ]);
 
   return useMemo(
     () => ({

package/src/Player/PlayerModal/styles.ts

@@ -63,6 +63,7 @@ export const useStyles = ({ height }: { height: number }) => {
           backgroundColor,
           elevation: 10,
           zIndex: 100,
+          height: "100%",
           overflow: "hidden",
         },
         modalWrapper: {
@@ -75,6 +76,10 @@ export const useStyles = ({ height }: { height: number }) => {
           flex: 1,
           alignItems: "center",
         },
+        modalContentPiP: {
+          flex: 1,
+          alignItems: "flex-start",
+        },
         expandedContentContainer: {
           justifyContent: "flex-start",
           backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,

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

@@ -1,25 +1,31 @@
-import { StatusBar, Dimensions } from "react-native";
+import { StyleSheet, Dimensions, ViewStyle } from "react-native";
 
 import {
   isAndroidPlatform,
   isAndroidVersionAtLeast,
+  isTV,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
+import {
+  isTablet,
+  useIsTablet as getIsTablet,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
-const MIN_SUPPORTED_ANDROID_API = 34;
+const SAFE_AREA_BREAKING_API_VERSION = 35;
 
-const isOldAndroidDevice =
+export const isOldAndroidDevice =
   isAndroidPlatform() &&
-  !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API) &&
-  !isAndroidTablet();
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
 
 export const getWindowHeight = (): number => {
   const windowDimensions = Dimensions.get("window");
 
-  return (
-    windowDimensions.height +
-    (isOldAndroidDevice ? (StatusBar.currentHeight ?? 0) : 0)
-  );
+  return windowDimensions.height;
+};
+
+export const getScreenHeight = (): number => {
+  const screenDimensions = Dimensions.get("screen");
+
+  return screenDimensions.height;
 };
 
 export const getWindowWidth = (): number => {
@@ -27,3 +33,60 @@ export const getWindowWidth = (): number => {
 
   return windowDimensions.width;
 };
+
+const getIsTabletLandscape = (isTabletPortrait: boolean): boolean => {
+  return !isTV() && isTablet() && !isTabletPortrait;
+};
+
+export const getInsetsOffset = (
+  insets: { top: number; bottom: number },
+  isTabletPortrait: boolean
+): number => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return isTablet() && isTabletLandscape
+    ? isOldAndroidDevice
+      ? insets.top / 2
+      : 0
+    : insets.top / 2;
+};
+
+const orientationStyles = StyleSheet.create({
+  landscape: { flexDirection: "row" },
+  portrait: { flexDirection: "column" },
+});
+
+export const directionStyles = (isTabletPortrait: boolean): ViewStyle => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return isTabletLandscape
+    ? orientationStyles.landscape
+    : orientationStyles.portrait;
+};
+
+export const getScaledPos = (
+  height,
+  vidHeight,
+  minimisedHeight,
+  isTabletPortrait
+) => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  const SCALE_FACTOR = minimisedHeight / vidHeight; // Scale factor for expanded content
+
+  return (
+    ((isTabletLandscape ? height : vidHeight) - vidHeight * SCALE_FACTOR) / 2
+  );
+};
+
+export const getExtraContentPadding = (insets: {
+  top: number;
+  bottom: number;
+}): ViewStyle => {
+  const isTablet = getIsTablet(); // not a hook, just a utility function
+
+  return {
+    paddingTop: isTablet ? insets.top : 0,
+    paddingBottom: insets.bottom,
+  };
+};

package/src/Player/index.tsx

@@ -83,7 +83,6 @@ type VideoPlayerProps = QuickBrickPlayer.PlayerProps & {
   updatePlayerState?: (state: string) => void;
   setNextVideoPreloadThresholdPercentage?: (percentage: number) => void;
   hideTransportControls?: boolean;
-  startComponentsAnimation?: boolean;
   playableItem?: any;
   playerPluginIdentifier?: string;
   controller?: {
@@ -836,25 +835,25 @@ export default class VideoPlayer extends React.Component<
         : styles.playerContainerBlack;
 
   private getBackgroundImageStyle = (
-    dimensions: any,
+    dimensions: ViewStyle,
     isAudioItem: boolean
-  ): ViewStyle => ({
-    ...(isAudioItem ? styles.audio : { position: "absolute" }),
-    ...dimensions,
-  });
+  ): ViewStyle[] => [
+    isAudioItem ? styles.audio : { position: "absolute" },
+    dimensions,
+  ];
 
   /* Returns player view style based on platform and content type (audio/video) */
   private getPlayerViewStyle = (
     dimensions: ViewStyle,
     isAudioItem: boolean
-  ): ViewStyle => {
-    const generalStyles = isAudioItem ? styles.audio : {};
+  ): ViewStyle | ViewStyle[] => {
+    const generalStyles = isAudioItem ? styles.audio : undefined;
 
     if (isAndroidPlatform() && isAudioItem) {
       return generalStyles;
     }
 
-    return { ...generalStyles, ...dimensions };
+    return [generalStyles, dimensions];
   };
 
   private renderAudioPlayer = (
@@ -877,7 +876,7 @@ export default class VideoPlayer extends React.Component<
     shouldRender: boolean,
     imageKey: string,
     entry: ZappEntry,
-    style: ViewStyle
+    style: ViewStyle | ViewStyle[]
   ) => {
     if (!shouldRender) return null;
 
@@ -888,7 +887,7 @@ export default class VideoPlayer extends React.Component<
 
   private renderNativePlayer = (
     shouldRender: boolean,
-    style: ViewStyle,
+    style: ViewStyle | ViewStyle[],
     nativeEvents: ReturnType<typeof this.getNativeEvents>,
     nativeProps: ReturnType<typeof this.getNativeProps>,
     pluginConfiguration: Record<string, any>
@@ -1047,10 +1046,7 @@ export default class VideoPlayer extends React.Component<
       : supportsNativeControls && !this.getPlayNextData();
 
     const shouldUseNativeControls =
-      controls &&
-      !this.props.startComponentsAnimation &&
-      !docked &&
-      !castAction?.state?.connected;
+      controls && !docked && !castAction?.state?.connected;
 
     platformSpecificProps = {
       ...platformSpecificProps,
@@ -1134,7 +1130,8 @@ export default class VideoPlayer extends React.Component<
     const needsToRender =
       !hideTransportControls &&
       !needToShowPlayNextOverlay &&
-      this.props.mode !== "PIP";
+      this.props.mode !== "PIP" &&
+      !docked;
 
     const supportsNativeControls =
       !!this.props.controller?.supportsNativeControls?.();
@@ -1145,10 +1142,7 @@ export default class VideoPlayer extends React.Component<
       : supportsNativeControls && !this.getPlayNextData();
 
     const shouldUseNativeControls =
-      controls &&
-      !this.props.startComponentsAnimation &&
-      !docked &&
-      !castAction?.state?.connected;
+      controls && !docked && !castAction?.state?.connected;
 
     if (shouldUseNativeControls) {
       return null;
@@ -1271,13 +1265,13 @@ export default class VideoPlayer extends React.Component<
           </View>
         }
       />
-    ) : (
+    ) : isModal ? (
       <VideoPlayerModal
         isTabletPortrait={isTabletPortrait}
         aspectRatio={aspectRatio}
         pip={piped}
         fullscreen={fullscreen}
-        modal={isModal}
+        modal
         style={{
           tabletLandscapeWidth: getTabletWidth(
             this.getPluginConfiguration().tablet_landscape_sidebar_width,
@@ -1315,6 +1309,13 @@ export default class VideoPlayer extends React.Component<
           </View>
         }
       />
+    ) : (
+      <View style={style} testID={"player-view"}>
+        <PlayerWrapper
+          {...sharedWrapperViewProps}
+          playerContent={this.renderPlayerContent}
+        />
+      </View>
     );
   };
 

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

@@ -1,82 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
-
-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: {
-    // we have to specify flex:0 and dimensions to make animation work
-    flex: 0,
-    aspectRatio: 1,
-  },
-});
-
-type Props = PropsWithChildren<{
-  entry: ZappEntry;
-  style?: ImageStyle | ImageStyle[];
-  imageWidth: number;
-  docked: boolean;
-}>;
-
-export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
-  const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
-
-  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);
-        }
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [changePlayerState$, minimisedHeight, imageWidth]);
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          width: heightAnim,
-        },
-      ]}
-    >
-      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
-    </Animated.View>
-  );
-};

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/index.ts

@@ -1 +0,0 @@
-export { useChangePlayerState } from "./useChangePlayerState";

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/useChangePlayerState.ts

@@ -1,99 +0,0 @@
-import * as React from "react";
-import { Subject, Observable } from "rxjs";
-
-import { distinctUntilChanged } from "rxjs/operators";
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
-import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import {
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
-
-const builder = () => {
-  const changePlayerState$ = new Subject<PlayerAnimationStateT>();
-
-  const emitMaximized = (): void => {
-    changePlayerState$.next(PlayerAnimationStateEnum.maximize);
-  };
-
-  const emitMinimized = (): void => {
-    changePlayerState$.next(PlayerAnimationStateEnum.minimize);
-  };
-
-  const emitAppearInDocked = (): void => {
-    // if audio_player was presented in docked mode
-    changePlayerState$.next(PlayerAnimationStateEnum.appear_as_docked);
-  };
-
-  return {
-    emitMaximized,
-    emitMinimized,
-    emitAppearInDocked,
-    changePlayerState$: changePlayerState$.pipe(distinctUntilChanged()),
-  };
-};
-
-export const useChangePlayerState = ({
-  docked,
-}): Observable<PlayerAnimationStateT> => {
-  const changePlayerStateRef =
-    useRefWithInitialValue<ReturnType<typeof builder>>(builder);
-
-  const { playerAnimationState } = useModalAnimationContext();
-
-  const previousPlayerAnimationState = usePrevious(playerAnimationState);
-
-  React.useEffect(() => {
-    if (
-      !docked &&
-      isNil(previousPlayerAnimationState) &&
-      playerAnimationState === PlayerAnimationStateEnum.minimize
-    ) {
-      changePlayerStateRef.current.emitMinimized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      isNil(previousPlayerAnimationState) &&
-      playerAnimationState === PlayerAnimationStateEnum.maximize
-    ) {
-      changePlayerStateRef.current.emitMaximized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-      playerAnimationState === PlayerAnimationStateEnum.maximize
-    ) {
-      changePlayerStateRef.current.emitMaximized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-      playerAnimationState === PlayerAnimationStateEnum.minimize
-    ) {
-      changePlayerStateRef.current.emitMinimized();
-
-      return;
-    }
-
-    if (
-      docked &&
-      isNil(previousPlayerAnimationState) &&
-      isNil(playerAnimationState)
-    ) {
-      changePlayerStateRef.current.emitAppearInDocked();
-    }
-  }, [previousPlayerAnimationState, playerAnimationState, docked]);
-
-  return changePlayerStateRef.current.changePlayerState$;
-};