@applicaster/quick-brick-player 15.0.0-alpha.4069571733 → 15.0.0-alpha.4368022015

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-alpha.4069571733",
+  "version": "15.0.0-alpha.4368022015",
   "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": "15.0.0-alpha.4069571733",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-rc.27",
     "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.15",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.4069571733",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4069571733",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.4368022015",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.4368022015",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4368022015",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

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

@@ -90,7 +90,8 @@ const styles = StyleSheet.create({
   marginTop: { marginTop: PROGRESS_BAR_HEIGHT },
 });
 
-const getValue = (key: string, stylesObj: {}) => stylesObj?.[key] ?? null;
+const getValue = (key: string, stylesObj: Record<string, any>) =>
+  stylesObj?.[key] ?? null;
 
 const controlButtons = (
   live: boolean,
@@ -208,7 +209,7 @@ export const DockedControls = (props: Props) => {
 
   const insets = useSafeAreaInsets();
 
-  const progresBarLayoutState = React.useMemo(
+  const progressBarLayoutState = React.useMemo(
     () => ({
       inline: layoutState.inline,
       docked: true,
@@ -275,7 +276,7 @@ export const DockedControls = (props: Props) => {
             content={entry}
             value={value}
             visible
-            layoutState={progresBarLayoutState}
+            layoutState={progressBarLayoutState}
             onPlayerSeek={onPlayerSeek}
             playerState={playerState}
             docked

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -6,7 +6,7 @@ import { useStyles } from "./styles";
 import { useVideoModalState } from "./hooks";
 import { MODAL_COLLAPSE_RATIO, MODAL_RADIUS } from "./consts";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { getWindowHeight } from "./utils";
+import { getScreenHeight, getWindowHeight } from "./utils";
 
 type AnimatedModalProps = {
   content?: ReactElement;
@@ -31,6 +31,7 @@ export function AnimatedModal({
 
   const WINDOW_HEIGHT = getWindowHeight();
   const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+  const screenHeight = getScreenHeight();
 
   const MODAL_COLLAPSE_START = WINDOW_HEIGHT * MODAL_COLLAPSE_RATIO;
 
@@ -63,7 +64,7 @@ export function AnimatedModal({
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
             transform: [{ translateY }],
-            height: WINDOW_HEIGHT,
+            height: screenHeight,
           },
         ]}
       >
@@ -73,7 +74,7 @@ export function AnimatedModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: WINDOW_HEIGHT,
+              height: screenHeight,
             },
           ]}
         >

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -18,7 +18,7 @@ import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-component
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
 import { PlayerDetailsWrapperHeightContext } from "./context";
-import { getWindowHeight, getWindowWidth } from "./utils";
+import { getScreenHeight, getWindowHeight, getWindowWidth } from "./utils";
 
 const orientationStyles = StyleSheet.create({
   landscape: { flexDirection: "row" },
@@ -61,6 +61,7 @@ export function VideoPlayerModal({
 
   const WINDOW_WIDTH = useMemo(() => getWindowWidth(), []); // remember initial width, ignore rotation changes
   const height = useMemo(() => getWindowHeight(), []); // remember initial height, ignore rotation changes
+  const screenHeight = useMemo(() => getScreenHeight(), []); // remember initial height, ignore rotation changes
   const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   let width = WINDOW_WIDTH;
@@ -129,7 +130,12 @@ export function VideoPlayerModal({
         outputRange: [
           0,
           isTablet && isTabletLandscape
-            ? -((-PROGRESS_BAR_HEIGHT + height - vidHeight * SCALE_FACTOR) / 2)
+            ? -(
+                (-PROGRESS_BAR_HEIGHT +
+                  screenHeight -
+                  vidHeight * SCALE_FACTOR) /
+                2
+              )
             : -(
                 PROGRESS_BAR_HEIGHT +
                 insets.top / 2 +
@@ -186,7 +192,7 @@ export function VideoPlayerModal({
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
             transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
-            height: height,
+            height: screenHeight,
           },
         ]}
       >
@@ -198,7 +204,7 @@ export function VideoPlayerModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: height,
+              height: screenHeight,
             },
           ]}
         >

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) +
     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/utils/index.ts

@@ -1,25 +1,25 @@
-import { StatusBar, Dimensions } from "react-native";
+import { Dimensions } from "react-native";
 
 import {
   isAndroidPlatform,
   isAndroidVersionAtLeast,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 
 const MIN_SUPPORTED_ANDROID_API = 34;
 
-const isOldAndroidDevice =
-  isAndroidPlatform() &&
-  !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API) &&
-  !isAndroidTablet();
+export const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API);
 
 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 => {

package/src/Player/index.tsx

@@ -1128,10 +1128,10 @@ export default class VideoPlayer extends React.Component<
       isTV() && this.getPlayNextData() && !docked;
 
     const needsToRender =
-      (!hideTransportControls &&
-        !needToShowPlayNextOverlay &&
-        this.props.mode !== "PIP") ||
-      docked;
+      !hideTransportControls &&
+      !needToShowPlayNextOverlay &&
+      this.props.mode !== "PIP" &&
+      !docked;
 
     const supportsNativeControls =
       !!this.props.controller?.supportsNativeControls?.();