@applicaster/quick-brick-player 13.0.5 → 13.0.6-alpha.4390983410

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -0,0 +1,237 @@
+import React, { useRef, ReactElement } from "react";
+
+import { StyleSheet, Animated, Pressable, 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_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" },
+  portrait: { flexDirection: "column" },
+});
+
+const directionStyles = (isLandscape: boolean): ViewStyle => {
+  return isLandscape ? orientationStyles.landscape : orientationStyles.portrait;
+};
+
+type AnimatedModalProps = {
+  enabled?: boolean;
+  pip?: boolean;
+  content?: (
+    opacity: Animated.Value | Animated.AnimatedInterpolation
+  ) => ReactElement;
+  collapsedContent?: (
+    opacity: Animated.Value | Animated.AnimatedInterpolation
+  ) => ReactElement;
+  extraContent?: (
+    opacity: Animated.Value | Animated.AnimatedInterpolation
+  ) => ReactElement;
+  aspectRatio?: number;
+  isTabletPortrait?: boolean;
+  style?: {
+    tabletLandscapeWidth?: number;
+    width?: number;
+    height?: number;
+  };
+};
+
+const height = SCREEN_HEIGHT;
+
+export function VideoPlayerModal({
+  enabled = true,
+  aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
+  content,
+  extraContent,
+  collapsedContent,
+  isTabletPortrait,
+  style,
+  pip = false,
+}: AnimatedModalProps) {
+  const isTablet = useIsTablet();
+
+  let width = SCREEN_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;
+
+  const {
+    translateY,
+    collapsed,
+    collapsedHeight,
+    gestureHandlerProps,
+    expand,
+  } = useVideoModalState(translateYRef);
+
+  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();
+
+  // Interpolated opacities for smooth cross-fade
+  const collapsedOpacity = translateY.interpolate({
+    inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  });
+
+  const expandedOpacity = translateY.interpolate({
+    inputRange: [0, height - collapsedHeight],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+
+  const xPosition = translateY.interpolate({
+    inputRange: [height * VIDEO_TRANSITION_THRESHOLD, height - collapsedHeight],
+    outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
+    extrapolate: "clamp",
+  });
+
+  const vidHeight = width / aspectRatio;
+
+  const yPosition = translateY.interpolate({
+    inputRange: [height * VIDEO_TRANSITION_THRESHOLD, height - collapsedHeight],
+    outputRange: [
+      0,
+      isTablet && isTabletLandscape
+        ? -(
+            (-PROGRESS_BAR_HEIGHT + SCREEN_HEIGHT - vidHeight * SCALE_FACTOR) /
+            2
+          )
+        : -(
+            PROGRESS_BAR_HEIGHT +
+            insets.top / 2 +
+            (SCREEN_WIDTH / aspectRatio -
+              (SCREEN_WIDTH / aspectRatio) * SCALE_FACTOR) /
+              2
+          ),
+    ],
+    extrapolate: "clamp",
+  });
+
+  const scalePosition = translateY.interpolate({
+    inputRange: [
+      SCREEN_HEIGHT * VIDEO_TRANSITION_THRESHOLD,
+      SCREEN_HEIGHT - collapsedHeight,
+    ],
+    outputRange: [1, SCALE_FACTOR],
+    extrapolate: "clamp",
+  });
+
+  const borderTopRadiusAnimated = translateY.interpolate({
+    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    outputRange: [MODAL_RADIUS, 0],
+    extrapolate: "clamp",
+  });
+
+  if (pip) {
+    return content(new Animated.Value(1));
+  }
+
+  return (
+    <PanGestureHandler
+      enabled={enabled}
+      waitFor={scrollViewRef}
+      {...gestureHandlerProps}
+    >
+      <Animated.View
+        pointerEvents={"auto"}
+        style={[
+          styles.modalWrapper,
+          {
+            borderTopLeftRadius: borderTopRadiusAnimated,
+            borderTopRightRadius: borderTopRadiusAnimated,
+            transform: [{ translateY }],
+            height: SCREEN_HEIGHT,
+          },
+        ]}
+      >
+        <Animated.View
+          pointerEvents={"auto"}
+          style={[
+            styles.modal,
+            collapsed ? styles.collapsedModalBg : null,
+            {
+              borderTopLeftRadius: borderTopRadiusAnimated,
+              borderTopRightRadius: borderTopRadiusAnimated,
+              height: SCREEN_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(expandedOpacity)}
+            </Animated.View>
+            {extraContent ? (
+              <GestureAnimatedScrollView
+                ref={scrollViewRef}
+                contentContainerStyle={{
+                  paddingBottom: insets.bottom,
+                }}
+                style={[
+                  styles.extraContentScrollView,
+                  { opacity: expandedOpacity },
+                ]}
+              >
+                {extraContent ? extraContent(expandedOpacity) : null}
+              </GestureAnimatedScrollView>
+            ) : null}
+          </Animated.View>
+
+          <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/consts/index.ts

@@ -0,0 +1,34 @@
+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(35) && !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
+
+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

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

@@ -0,0 +1,161 @@
+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 { useCallback, useEffect, useMemo, useRef } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  ANIMATION_DURATION,
+  DRAG_TO_COLLAPSE,
+  DRAG_TO_EXPAND,
+  SCREEN_HEIGHT,
+} from "../consts";
+import { State } from "react-native-gesture-handler";
+import { Animated } from "react-native";
+import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
+
+const bottomTabBarHeight = getTabBarHeight();
+
+export const useVideoModalState = (
+  translateYRef: React.MutableRefObject<Animated.Value>
+) => {
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
+
+  const collapsed = videoModalState.mode === VideoModalMode.MINIMIZED;
+
+  const { bottom } = useSafeAreaInsets();
+
+  const collapsedHeight =
+    minimisedHeight + bottom + bottomTabBarHeight + PROGRESS_BAR_HEIGHT;
+
+  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(SCREEN_HEIGHT - collapsedHeight);
+
+  // Gesture handler for modal
+  const onGestureEvent = (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 > SCREEN_HEIGHT - collapsedHeight) {
+        newY = SCREEN_HEIGHT - collapsedHeight;
+      }
+
+      translateY.setValue(newY);
+    }
+  };
+
+  const onHandlerStateChange = (event: any) => {
+    if (event.nativeEvent.oldState === State.ACTIVE) {
+      const { translationY } = event.nativeEvent;
+      let newY = offset.current + translationY;
+      if (newY < 0) newY = 0;
+
+      if (newY > SCREEN_HEIGHT - collapsedHeight) {
+        newY = SCREEN_HEIGHT - collapsedHeight;
+      }
+
+      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: ANIMATION_DURATION,
+          useNativeDriver: true,
+        }).start(() => {
+          minimiseVideoModal();
+          offset.current = SCREEN_HEIGHT - collapsedHeight;
+        });
+      } 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 ? SCREEN_HEIGHT - collapsedHeight : 0,
+          useNativeDriver: true,
+        }).start(() => {
+          offset.current = collapsed ? SCREEN_HEIGHT - collapsedHeight : 0;
+          translateY.setValue(offset.current);
+        });
+      }
+    } else if (event.nativeEvent.state === State.BEGAN) {
+      // Gesture started, set offset
+      translateY.stopAnimation((value: number) => {
+        offset.current = value;
+      });
+    }
+  };
+
+  const gestureHandlerProps = useMemo(() => {
+    return {
+      onGestureEvent,
+      onHandlerStateChange,
+    };
+  }, [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);
+      });
+    }
+  }, [videoModalState.visible, videoModalState.mode]);
+
+  return {
+    collapsed,
+    collapsedHeight,
+    offset,
+    gestureHandlerProps,
+    translateY,
+    expand: 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/styles.ts

@@ -0,0 +1,101 @@
+import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
+import {
+  useIsTablet,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+
+export const useBackgroundColor = (): string => {
+  const {
+    modal_background_color: modalBackgroundColor,
+    tablet_landscape_player_container_background_color: tabletBackgroundColor,
+  } = useConfiguration();
+
+  const {
+    videoModalState: { mode },
+  } = useNavigation();
+
+  const isTablet = useIsTablet();
+
+  const theme = useTheme<BaseThemePropertiesMobile>();
+  const isFullscreen = mode === "FULLSCREEN";
+
+  /**
+   * For the new audio player, the background color setting work that way
+   * Layer 0 - modal_background_color
+   * Layer 1 - screen_background_color ( can be combined with layer 0 ), If the parameter is not set, it will be a solid black.
+   * audio_player_background_color is used only in the old player when the background image is not set
+   * modal_background_color is used as the background for player details, and in useBackgroundColor to set a background for a video modal.
+   * If it’s not set, theme?.status_background_color will be used instead
+   *
+   * This hook cover only case with layer 0: modal_background_color, layer 1: screen_background_color is used in the styles.expandedContentContainer
+   *
+   * For the video player, inline player will use tablet_landscape_player_container_background_color as background color, and transparent for fullscreen.
+   * Mobile player will use
+   * modal_background_color as background color.
+   */
+
+  return isTablet
+    ? !isFullscreen
+      ? tabletBackgroundColor
+      : "transparent"
+    : modalBackgroundColor || theme?.status_background_color;
+};
+
+export const useStyles = ({ height }: { height: number }) => {
+  const COLLAPSED_HEIGHT = height;
+
+  const backgroundColor = useBackgroundColor();
+
+  const BG_COLOR_DEFAULT_BLACK = "black";
+  const BG_COLOR_DEFAULT_TRANSPARENT = "transparent";
+
+  const styles = StyleSheet.create({
+    modal: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: 0,
+      backgroundColor,
+      elevation: 10,
+      zIndex: 100,
+      overflow: "hidden",
+    },
+    modalWrapper: {
+      backgroundColor: BG_COLOR_DEFAULT_BLACK,
+    },
+    collapsedModalBg: {
+      backgroundColor: BG_COLOR_DEFAULT_BLACK,
+    },
+    modalContent: {
+      flex: 1,
+      alignItems: "center",
+    },
+    expandedContentContainer: {
+      justifyContent: "flex-start",
+      backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
+      zIndex: 1,
+      flex: 0,
+    },
+    extraContentScrollView: {
+      width: "100%",
+      backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
+    },
+    collapsedBarContainer: {
+      ...StyleSheet.absoluteFillObject,
+      height: COLLAPSED_HEIGHT,
+      justifyContent: "flex-end",
+    },
+    collapsedBarWrapper: {
+      flex: 1,
+    },
+    flexNone: {
+      ...StyleSheet.absoluteFillObject,
+      flex: -1,
+    },
+  });
+
+  return useMemo(() => styles, [styles]);
+};