@applicaster/quick-brick-player 14.0.0-rc.78 → 14.0.0-rc.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.78",
+  "version": "14.0.0-rc.79",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.67",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.71",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.78",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.78",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.78",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.79",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.79",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.79",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -99,11 +99,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   );
 
   useEffect(() => {
-    if (player) {
-      setSpeedManager(new SpeedController(player));
-    } else {
-      setSpeedManager(null);
-    }
+    setSpeedManager(player ? new SpeedController(player) : null);
   }, [player]);
 
   useEffect(() => {
@@ -217,7 +213,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         items: speedOptions,
         current_selection: playbackSpeed,
         onPress: onSpeedSelect,
-        title: configuration["playback_speed_title"],
+        title: configuration.playback_speed_title,
         itemProps: getBottomSheetModalItemProps,
         iconProps: getBottomSheetModalIconProps,
         labelProps: getBottomSheetModalLabelProps,
@@ -233,7 +229,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         ],
       },
     });
-  }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
+  }, [playbackSpeed, onSpeedSelect, configuration.playback_speed_title]);
 
   const onPlayerSeek = React.useCallback(
     (targetTime: number) => {

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

@@ -33,16 +33,10 @@ const bottomTabBarHeight = getTabBarHeight();
 type Props = {
   entry: ZappEntry;
   layoutState: QuickBrickPlayer.LayoutState;
-  playerState: QuickBrickPlayer.PlayerState;
-  value: GetValue;
-  onCloseVideoModal: () => void;
-  onPlayerSeek: (targetTime: number) => void;
+  onPlayerSeek?: (targetTime: number) => void;
   playNextData: PlayNextData;
-  title: string | number;
-  summary: string | number;
   ImageComponent?: React.ReactNode;
   isActiveGesture?: boolean;
-  minimisedHeight: number;
   aspectRatio?: number;
 };
 

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -4,8 +4,9 @@ import { Animated, Pressable } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useVideoModalState } from "./hooks";
-import { MODAL_COLLAPSE_START, MODAL_RADIUS, SCREEN_HEIGHT } from "./consts";
+import { MODAL_COLLAPSE_RATIO, MODAL_RADIUS } from "./consts";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { getWindowHeight } from "./utils";
 
 type AnimatedModalProps = {
   content?: ReactElement;
@@ -28,21 +29,26 @@ export function AnimatedModal({
 
   const styles = useStyles({ height: collapsedHeight, type: "audio" });
 
+  const WINDOW_HEIGHT = getWindowHeight();
+  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+
+  const MODAL_COLLAPSE_START = WINDOW_HEIGHT * MODAL_COLLAPSE_RATIO;
+
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = translateY.interpolate({
-    inputRange: [MODAL_COLLAPSE_START, SCREEN_HEIGHT - collapsedHeight],
+    inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
     outputRange: [0, 1],
     extrapolate: "clamp",
   });
 
   const expandedOpacity = translateY.interpolate({
-    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    inputRange: [0, heightAboveMinimised],
     outputRange: [1, 0],
     extrapolate: "clamp",
   });
 
   const borderTopRadiusAnimated = translateY.interpolate({
-    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    inputRange: [0, heightAboveMinimised],
     outputRange: [MODAL_RADIUS, 0],
     extrapolate: "clamp",
   });
@@ -57,7 +63,7 @@ export function AnimatedModal({
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
             transform: [{ translateY }],
-            height: SCREEN_HEIGHT,
+            height: WINDOW_HEIGHT,
           },
         ]}
       >
@@ -67,7 +73,7 @@ export function AnimatedModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: SCREEN_HEIGHT,
+              height: WINDOW_HEIGHT,
             },
           ]}
         >

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useRef } from "react";
+import React, { ReactElement, useMemo, useRef } from "react";
 
 import { Animated, Pressable, StyleSheet, ViewStyle } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
@@ -7,10 +7,8 @@ import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/C
 import { useVideoModalState } from "./hooks";
 import {
   DEFAULT_IMAGE_RATIO_VIDEO,
-  MODAL_COLLAPSE_START,
+  MODAL_COLLAPSE_RATIO,
   MODAL_RADIUS,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
   VIDEO_TRANSITION_THRESHOLD,
 } from "./consts";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
@@ -20,6 +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";
 
 const orientationStyles = StyleSheet.create({
   landscape: { flexDirection: "row" },
@@ -46,8 +45,6 @@ type AnimatedModalProps = {
   };
 };
 
-const height = SCREEN_HEIGHT;
-
 export function VideoPlayerModal({
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
   content,
@@ -62,7 +59,11 @@ export function VideoPlayerModal({
   const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
-  let width = SCREEN_WIDTH;
+  const WINDOW_WIDTH = useMemo(() => getWindowWidth(), []); // remember initial width, ignore rotation changes
+  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;
@@ -83,6 +84,8 @@ export function VideoPlayerModal({
     expand,
   } = useVideoModalState(modal ? translateYRef : dummyRef);
 
+  const heightAboveMinimised = height - collapsedHeight;
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const styles = useStyles({ height: collapsedHeight });
@@ -96,7 +99,7 @@ export function VideoPlayerModal({
   // Interpolated opacities for smooth cross-fade
   const collapsedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
+        inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
         outputRange: [0, 1],
         extrapolate: "clamp",
       })
@@ -104,7 +107,7 @@ export function VideoPlayerModal({
 
   const expandedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [0, height - collapsedHeight],
+        inputRange: [0, heightAboveMinimised],
         outputRange: [1, 0],
         extrapolate: "clamp",
       })
@@ -112,10 +115,7 @@ export function VideoPlayerModal({
 
   const xPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
-        inputRange: [
-          height * VIDEO_TRANSITION_THRESHOLD,
-          height - collapsedHeight,
-        ],
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, heightAboveMinimised],
         outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
         extrapolate: "clamp",
       })
@@ -136,8 +136,8 @@ export function VideoPlayerModal({
             : -(
                 PROGRESS_BAR_HEIGHT +
                 insets.top / 2 +
-                (SCREEN_WIDTH / aspectRatio -
-                  (SCREEN_WIDTH / aspectRatio) * SCALE_FACTOR) /
+                (WINDOW_WIDTH / aspectRatio -
+                  (WINDOW_WIDTH / aspectRatio) * SCALE_FACTOR) /
                   2
               ),
         ],

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

@@ -1,26 +1,7 @@
-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 VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
 
-const windowDimensions = Dimensions.get("window");
-
-const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(34) && !isAndroidTablet();
-
-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
@@ -32,3 +13,5 @@ export const DEFAULT_IMAGE_RATIO_AUDIO = 1; // Default aspect ratio for audio
 export const ANIMATION_DURATION = 250; // Default animation duration in milliseconds
 
 export const MODAL_RADIUS = 16; // Default border radius for modal
+
+export const MODAL_COLLAPSE_RATIO = 0.7; // 70% of the screen height

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

@@ -12,10 +12,10 @@ import {
   ANIMATION_DURATION,
   DRAG_TO_COLLAPSE,
   DRAG_TO_EXPAND,
-  SCREEN_HEIGHT,
 } 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";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -24,6 +24,8 @@ export const useVideoModalState = (
 ) => {
   const { minimised_height: minimisedHeight } = useConfiguration();
 
+  const WINDOW_HEIGHT = getWindowHeight();
+
   const {
     maximiseVideoModal,
     minimiseVideoModal,
@@ -36,7 +38,9 @@ export const useVideoModalState = (
 
   const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
 
-  const collapsed = videoModalState.mode === VideoModalMode.MINIMIZED;
+  const collapsed =
+    videoModalState.visible &&
+    videoModalState.mode === VideoModalMode.MINIMIZED;
 
   const { bottom } = useSafeAreaInsets();
 
@@ -48,6 +52,8 @@ export const useVideoModalState = (
     (menuVisible ? bottomTabBarHeight : 0) +
     PROGRESS_BAR_HEIGHT;
 
+  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+
   const translateY = translateYRef.current;
 
   const handleExpand = useCallback(
@@ -72,7 +78,7 @@ export const useVideoModalState = (
     [translateYRef]
   );
 
-  const offset = useRef(SCREEN_HEIGHT - collapsedHeight);
+  const offset = useRef(heightAboveMinimised);
 
   // Gesture handler for modal
   const onGestureEvent = useCallback(
@@ -82,8 +88,8 @@ export const useVideoModalState = (
         let newY = offset.current + y;
         if (newY < 0) newY = 0;
 
-        if (newY > SCREEN_HEIGHT - collapsedHeight) {
-          newY = SCREEN_HEIGHT - collapsedHeight;
+        if (newY > heightAboveMinimised) {
+          newY = heightAboveMinimised;
         }
 
         translateY.setValue(newY);
@@ -99,25 +105,25 @@ export const useVideoModalState = (
         let newY = offset.current + translationY;
         if (newY < 0) newY = 0;
 
-        if (newY > SCREEN_HEIGHT - collapsedHeight) {
-          newY = SCREEN_HEIGHT - collapsedHeight;
+        if (newY > heightAboveMinimised) {
+          newY = heightAboveMinimised;
         }
 
         const shouldCollapse =
-          translationY > (SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_COLLAPSE;
+          translationY > heightAboveMinimised * DRAG_TO_COLLAPSE;
 
         const shouldExpand =
-          translationY < -(SCREEN_HEIGHT - collapsedHeight) * DRAG_TO_EXPAND;
+          translationY < -heightAboveMinimised * DRAG_TO_EXPAND;
 
         if (!collapsed && shouldCollapse) {
           // Collapse
           Animated.timing(translateY, {
-            toValue: SCREEN_HEIGHT - collapsedHeight,
+            toValue: heightAboveMinimised,
             duration: ANIMATION_DURATION,
             useNativeDriver: true,
           }).start(() => {
             minimiseVideoModal();
-            offset.current = SCREEN_HEIGHT - collapsedHeight;
+            offset.current = heightAboveMinimised;
           });
         } else if (collapsed && shouldExpand) {
           // Expand
@@ -133,10 +139,10 @@ export const useVideoModalState = (
         } else {
           // Snap back to current state
           Animated.spring(translateY, {
-            toValue: collapsed ? SCREEN_HEIGHT - collapsedHeight : 0,
+            toValue: collapsed ? heightAboveMinimised : 0,
             useNativeDriver: true,
           }).start(() => {
-            offset.current = collapsed ? SCREEN_HEIGHT - collapsedHeight : 0;
+            offset.current = collapsed ? heightAboveMinimised : 0;
             translateY.setValue(offset.current);
           });
         }
@@ -158,18 +164,20 @@ export const useVideoModalState = (
   }, [onGestureEvent, onHandlerStateChange]);
 
   useEffect(() => {
-    if (videoModalState.mode === VideoModalMode.MAXIMIZED) {
-      handleExpand(0).start(() => {
-        maximiseVideoModal();
-        offset.current = 0;
-        translateY.setValue(0);
-      });
-    } else if (videoModalState.mode === VideoModalMode.MINIMIZED) {
-      handleCollapse(SCREEN_HEIGHT - collapsedHeight).start(() => {
-        minimiseVideoModal();
-        offset.current = SCREEN_HEIGHT - collapsedHeight;
-        translateY.setValue(SCREEN_HEIGHT - collapsedHeight);
-      });
+    if (videoModalState.visible) {
+      if (videoModalState.mode === VideoModalMode.MAXIMIZED) {
+        handleExpand(0).start(() => {
+          maximiseVideoModal();
+          offset.current = 0;
+          translateY.setValue(0);
+        });
+      } else if (videoModalState.mode === VideoModalMode.MINIMIZED) {
+        handleCollapse(heightAboveMinimised).start(() => {
+          minimiseVideoModal();
+          offset.current = heightAboveMinimised;
+          translateY.setValue(heightAboveMinimised);
+        });
+      }
     }
   }, [videoModalState.visible, videoModalState.mode, collapsedHeight]);
 

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

@@ -0,0 +1,29 @@
+import { StatusBar, 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 getWindowHeight = (): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  return (
+    windowDimensions.height +
+    (isOldAndroidDevice ? (StatusBar.currentHeight ?? 0) : 0)
+  );
+};
+
+export const getWindowWidth = (): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  return windowDimensions.width;
+};

package/src/Player/PlayerView/types.ts

@@ -10,9 +10,8 @@ export interface PlayNextOverlayProps {
 }
 
 export interface PlayerComponentProps {
-  ref: React.RefObject<any>;
+  ref: React.Ref<any>;
   listener: Record<string, any>;
-  configuration: Record<string, any>;
   style: ViewStyle;
 }