@applicaster/quick-brick-player 14.0.0-rc.8 → 14.0.0-rc.80

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -0,0 +1,115 @@
+import React, { ReactElement } from "react";
+
+import { Animated, Pressable } from "react-native";
+import { PanGestureHandler } from "react-native-gesture-handler";
+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";
+
+type AnimatedModalProps = {
+  content?: ReactElement;
+  collapsedContent?: ReactElement;
+};
+
+export function AnimatedModal({
+  content,
+  collapsedContent,
+}: AnimatedModalProps) {
+  const translateYRef = useModalAnimationContext().yTranslate;
+
+  const {
+    translateY,
+    collapsed,
+    collapsedHeight,
+    gestureHandlerProps,
+    expand,
+  } = useVideoModalState(translateYRef);
+
+  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, heightAboveMinimised],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  });
+
+  const expandedOpacity = translateY.interpolate({
+    inputRange: [0, heightAboveMinimised],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+
+  const borderTopRadiusAnimated = translateY.interpolate({
+    inputRange: [0, heightAboveMinimised],
+    outputRange: [MODAL_RADIUS, 0],
+    extrapolate: "clamp",
+  });
+
+  return (
+    <PanGestureHandler {...gestureHandlerProps}>
+      <Animated.View
+        pointerEvents={"auto"}
+        style={[
+          styles.modalWrapper,
+          {
+            borderTopLeftRadius: borderTopRadiusAnimated,
+            borderTopRightRadius: borderTopRadiusAnimated,
+            transform: [{ translateY }],
+            height: WINDOW_HEIGHT,
+          },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.modal,
+            {
+              borderTopLeftRadius: borderTopRadiusAnimated,
+              borderTopRightRadius: borderTopRadiusAnimated,
+              height: WINDOW_HEIGHT,
+            },
+          ]}
+        >
+          {/* Expanded Content (fades in) */}
+          <Animated.View
+            pointerEvents={!collapsed ? "auto" : "none"}
+            style={styles.modalContent}
+          >
+            <Animated.View
+              pointerEvents={!collapsed ? "auto" : "none"}
+              style={[
+                styles.expandedContentContainer,
+                { opacity: expandedOpacity },
+              ]}
+            >
+              {content}
+            </Animated.View>
+          </Animated.View>
+          {/* Collapsed Bar (fades out) */}
+          <Animated.View
+            pointerEvents={collapsed ? "box-none" : "none"}
+            style={[
+              styles.collapsedBarContainer,
+              { opacity: collapsedOpacity },
+            ]}
+          >
+            <Pressable
+              testID="collapsedBarWrapper"
+              onPress={expand}
+              style={styles.collapsedBarWrapper}
+            >
+              {collapsedContent}
+            </Pressable>
+          </Animated.View>
+        </Animated.View>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -0,0 +1,271 @@
+import React, { ReactElement, useMemo, useRef } from "react";
+
+import { Animated, Pressable, StyleSheet, ViewStyle } 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";
+import { useVideoModalState } from "./hooks";
+import {
+  DEFAULT_IMAGE_RATIO_VIDEO,
+  MODAL_COLLAPSE_RATIO,
+  MODAL_RADIUS,
+  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";
+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;
+};
+
+type AnimatedModalProps = {
+  pip?: boolean;
+  fullscreen?: boolean;
+  modal?: boolean;
+  content?: ReactElement;
+  collapsedContent?: ReactElement;
+  extraContent?: ReactElement;
+  aspectRatio?: number;
+  isTabletPortrait?: boolean;
+  style?: {
+    tabletLandscapeWidth?: number;
+    width?: number;
+    height?: number;
+  };
+};
+
+export function VideoPlayerModal({
+  aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
+  content,
+  extraContent,
+  collapsedContent,
+  isTabletPortrait,
+  style,
+  pip = false,
+  fullscreen = false,
+  modal = true,
+}: AnimatedModalProps) {
+  const enabled = !!modal && !fullscreen;
+  const isTablet = useIsTablet();
+
+  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;
+  }
+
+  const { minimised_height: minimisedHeight } = useConfiguration();
+  const scrollViewRef = useRef<typeof Animated.ScrollView | null>(null);
+
+  const translateYRef = useModalAnimationContext().yTranslate;
+  // used when modal is false, should not be used in animation
+  const dummyRef = useRef(new Animated.Value(0));
+
+  const {
+    translateY,
+    collapsed,
+    collapsedHeight,
+    gestureHandlerProps,
+    expand,
+  } = useVideoModalState(modal ? translateYRef : dummyRef);
+
+  const heightAboveMinimised = height - collapsedHeight;
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
+  const styles = useStyles({ height: collapsedHeight });
+
+  const SCALE_FACTOR = 1 / (width / aspectRatio / minimisedHeight); // Scale factor for expanded content
+
+  const insets = useSafeAreaInsets();
+
+  const isFullScreenOrPIP = fullscreen || pip;
+
+  // Interpolated opacities for smooth cross-fade
+  const collapsedOpacity = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
+        outputRange: [0, 1],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  const expandedOpacity = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [0, heightAboveMinimised],
+        outputRange: [1, 0],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(1);
+
+  const xPosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, heightAboveMinimised],
+        outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  const vidHeight = width / aspectRatio;
+
+  const yPosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [
+          height * VIDEO_TRANSITION_THRESHOLD,
+          height - collapsedHeight,
+        ],
+        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
+              ),
+        ],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  const scalePosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [
+          height * VIDEO_TRANSITION_THRESHOLD,
+          height - collapsedHeight,
+        ],
+        outputRange: [1, SCALE_FACTOR],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(1);
+
+  const borderTopRadiusAnimated = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [0, height - collapsedHeight],
+        outputRange: [MODAL_RADIUS, 0],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  const [playerDetailsWrapperHeight, setPlayerDetailsWrapperHeight] =
+    React.useState(0);
+
+  const onScrollViewLayout = React.useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }) => {
+      setPlayerDetailsWrapperHeight(height);
+    },
+    []
+  );
+
+  return (
+    <PanGestureHandler
+      enabled={enabled}
+      waitFor={scrollViewRef}
+      {...gestureHandlerProps}
+    >
+      <Animated.View
+        pointerEvents={"auto"}
+        style={[
+          styles.modalWrapper,
+          {
+            borderTopLeftRadius: borderTopRadiusAnimated,
+            borderTopRightRadius: borderTopRadiusAnimated,
+            transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
+            height: height,
+          },
+        ]}
+      >
+        <Animated.View
+          pointerEvents={"auto"}
+          style={[
+            styles.modal,
+            collapsed ? styles.collapsedModalBg : null,
+            {
+              borderTopLeftRadius: borderTopRadiusAnimated,
+              borderTopRightRadius: borderTopRadiusAnimated,
+              height: height,
+            },
+          ]}
+        >
+          <Animated.View
+            pointerEvents={!collapsed ? "auto" : "none"}
+            style={[styles.modalContent, directionStyles(isTabletLandscape)]}
+          >
+            <Animated.View
+              style={[
+                styles.expandedContentContainer,
+                {
+                  transform: [
+                    { translateX: xPosition },
+                    { translateY: yPosition },
+                    { scale: scalePosition },
+                  ],
+                },
+              ]}
+            >
+              {content}
+            </Animated.View>
+            {extraContent ? (
+              <GestureAnimatedScrollView
+                ref={scrollViewRef}
+                contentContainerStyle={{
+                  paddingBottom: insets.bottom,
+                }}
+                onLayout={onScrollViewLayout}
+                style={[
+                  styles.extraContentScrollView,
+                  { opacity: expandedOpacity },
+                ]}
+              >
+                <PlayerDetailsWrapperHeightContext.Provider
+                  value={playerDetailsWrapperHeight}
+                >
+                  {extraContent}
+                </PlayerDetailsWrapperHeightContext.Provider>
+              </GestureAnimatedScrollView>
+            ) : 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>
+    </PanGestureHandler>
+  );
+}

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

@@ -0,0 +1,17 @@
+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
+
+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
+
+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/context/index.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const PlayerDetailsWrapperHeightContext = React.createContext(null);
+
+export const usePlayerDetailsWrapperHeight = () =>
+  React.useContext(PlayerDetailsWrapperHeightContext);

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

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { State } from "react-native-gesture-handler";
+import { Animated } from "react-native";
+
+import { VideoModalMode } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
+import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
+import {
+  ANIMATION_DURATION,
+  DRAG_TO_COLLAPSE,
+  DRAG_TO_EXPAND,
+} 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();
+
+export const useVideoModalState = (
+  translateYRef: React.MutableRefObject<Animated.Value>
+) => {
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
+  const WINDOW_HEIGHT = getWindowHeight();
+
+  const {
+    maximiseVideoModal,
+    minimiseVideoModal,
+    videoModalState,
+    currentRoute,
+    screenData,
+  } = useNavigation();
+
+  const plugins = usePlugins();
+
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
+  const collapsed =
+    videoModalState.visible &&
+    videoModalState.mode === VideoModalMode.MINIMIZED;
+
+  const { bottom } = useSafeAreaInsets();
+
+  const initialBottomOffset = useRef(bottom).current;
+
+  const collapsedHeight =
+    minimisedHeight +
+    initialBottomOffset +
+    (menuVisible ? bottomTabBarHeight : 0) +
+    PROGRESS_BAR_HEIGHT;
+
+  const heightAboveMinimised = WINDOW_HEIGHT - collapsedHeight;
+
+  const translateY = translateYRef.current;
+
+  const handleExpand = useCallback(
+    (toValue: number) => {
+      return Animated.timing(translateYRef.current, {
+        toValue,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: true,
+      });
+    },
+    [translateYRef]
+  );
+
+  const handleCollapse = useCallback(
+    (toValue: number) => {
+      return Animated.timing(translateYRef.current, {
+        toValue,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: true,
+      });
+    },
+    [translateYRef]
+  );
+
+  const offset = useRef(heightAboveMinimised);
+
+  // Gesture handler for modal
+  const onGestureEvent = useCallback(
+    (event: any) => {
+      if (event.nativeEvent.state === State.ACTIVE) {
+        const y = event.nativeEvent.translationY;
+        let newY = offset.current + y;
+        if (newY < 0) newY = 0;
+
+        if (newY > heightAboveMinimised) {
+          newY = heightAboveMinimised;
+        }
+
+        translateY.setValue(newY);
+      }
+    },
+    [collapsedHeight, translateY]
+  );
+
+  const onHandlerStateChange = useCallback(
+    (event: any) => {
+      if (event.nativeEvent.oldState === State.ACTIVE) {
+        const { translationY } = event.nativeEvent;
+        let newY = offset.current + translationY;
+        if (newY < 0) newY = 0;
+
+        if (newY > heightAboveMinimised) {
+          newY = heightAboveMinimised;
+        }
+
+        const shouldCollapse =
+          translationY > heightAboveMinimised * DRAG_TO_COLLAPSE;
+
+        const shouldExpand =
+          translationY < -heightAboveMinimised * DRAG_TO_EXPAND;
+
+        if (!collapsed && shouldCollapse) {
+          // Collapse
+          Animated.timing(translateY, {
+            toValue: heightAboveMinimised,
+            duration: ANIMATION_DURATION,
+            useNativeDriver: true,
+          }).start(() => {
+            minimiseVideoModal();
+            offset.current = heightAboveMinimised;
+          });
+        } else if (collapsed && shouldExpand) {
+          // Expand
+          Animated.timing(translateY, {
+            toValue: 0,
+            duration: ANIMATION_DURATION,
+            useNativeDriver: true,
+          }).start(() => {
+            maximiseVideoModal();
+            offset.current = 0;
+            translateY.setValue(0);
+          });
+        } else {
+          // Snap back to current state
+          Animated.spring(translateY, {
+            toValue: collapsed ? heightAboveMinimised : 0,
+            useNativeDriver: true,
+          }).start(() => {
+            offset.current = collapsed ? heightAboveMinimised : 0;
+            translateY.setValue(offset.current);
+          });
+        }
+      } else if (event.nativeEvent.state === State.BEGAN) {
+        // Gesture started, set offset
+        translateY.stopAnimation((value: number) => {
+          offset.current = value;
+        });
+      }
+    },
+    [collapsedHeight, translateY, collapsed, videoModalState]
+  );
+
+  const gestureHandlerProps = useMemo(() => {
+    return {
+      onGestureEvent,
+      onHandlerStateChange,
+    };
+  }, [onGestureEvent, onHandlerStateChange]);
+
+  useEffect(() => {
+    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]);
+
+  return useMemo(
+    () => ({
+      collapsed,
+      collapsedHeight,
+      offset,
+      gestureHandlerProps,
+      translateY,
+      expand: maximiseVideoModal,
+    }),
+    [
+      collapsed,
+      collapsedHeight,
+      gestureHandlerProps,
+      translateY,
+      maximiseVideoModal,
+    ]
+  );
+};

package/src/Player/PlayerModal/index.ts

@@ -0,0 +1,3 @@
+export { AnimatedModal as default } from "./PlayerModal";
+
+export { VideoPlayerModal } from "./VideoPlayerModal";

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

@@ -0,0 +1,5 @@
+const View = require("react-native").View;
+
+export const VideoPlayerModal = View;
+
+export default View;