@applicaster/quick-brick-player 14.0.0-rc.9 → 14.0.0-rc.90

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -0,0 +1,289 @@
+import React, { ReactElement, useMemo, useRef } from "react";
+
+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";
+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 { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
+import {
+  SafeAreaView,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
+import { PlayerDetailsWrapperHeightContext } from "./context";
+import {
+  getInsetsOffset,
+  getWindowHeight,
+  getWindowWidth,
+  directionStyles,
+  getScaledPos,
+  getExtraContentPadding,
+} from "./utils";
+import { addOrientationChangeListener } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
+const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
+
+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();
+
+  // remember initial width, ignore rotation changes
+  const width = useMemo(
+    () =>
+      isTablet && !isTabletPortrait
+        ? style.tabletLandscapeWidth
+        : getWindowWidth(isTablet, !isTabletPortrait),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const height = useMemo(
+    () => getWindowHeight(isTablet, !isTabletPortrait),
+    []
+  ); // remember initial height, ignore rotation changes
+
+  const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
+
+  const { minimised_height: minimisedHeight } = useConfiguration();
+  const scrollViewRef = useRef<typeof Animated.ScrollView | null>(null);
+
+  const { translateY, collapsed, gestureHandlerProps, expand, offset } =
+    useVideoModalState();
+
+  const frame = useSafeAreaFrame();
+  const collapsedHeight = frame.height - offset.current;
+
+  const heightAboveMinimised = height - collapsedHeight;
+
+  const styles = useStyles({ height: collapsedHeight });
+
+  const SCALE_FACTOR = 1 / (width / aspectRatio / minimisedHeight); // Scale factor for expanded content
+
+  const insets = useSafeAreaInsets();
+
+  const [isFullScreenMode, setFullScreenMode] = React.useState(
+    fullscreen || pip
+  );
+
+  React.useEffect(() => {
+    const listener = addOrientationChangeListener(({ toOrientation }) => {
+      /* ignored in collapsed mode non-PiP player */
+      if (collapsed && !pip) return;
+      setFullScreenMode(!(toOrientation === 1));
+    });
+
+    return () => {
+      listener.remove();
+    };
+  }, [collapsed, pip]);
+
+  const isFullScreenOrPIP = isFullScreenMode;
+
+  const vidHeight = width / aspectRatio;
+
+  // animated opacity for smooth cross-fade of collapsed content
+  const collapsedOpacity = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
+        outputRange: [0, 1],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  // animated opacity for extra content
+  const expandedOpacity = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [0, heightAboveMinimised],
+        outputRange: [1, 0],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(1);
+
+  // animated x position for video content
+  const xPosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
+        outputRange: [0, -(width - width * SCALE_FACTOR) / 2],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  // animated y position for video content
+  const yPosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
+        outputRange: [
+          0,
+          -(
+            PROGRESS_BAR_HEIGHT +
+            getInsetsOffset(insets, isTabletPortrait) +
+            getScaledPos(height, vidHeight, minimisedHeight, isTabletPortrait)
+          ),
+        ],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  // animated position for video content
+  const scalePosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
+        outputRange: [1, SCALE_FACTOR],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(1);
+
+  const borderTopRadiusAnimated = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [0, heightAboveMinimised],
+        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}
+      activeOffsetY={[-25, 25]}
+      activeOffsetX={[-25, 25]}
+      {...gestureHandlerProps}
+    >
+      <AnimatedSafeAreaView pointerEvents="box-none" edges={["bottom"]}>
+        <Animated.View
+          pointerEvents={"auto"}
+          style={[
+            styles.modalWrapper,
+            {
+              borderTopLeftRadius: borderTopRadiusAnimated,
+              borderTopRightRadius: borderTopRadiusAnimated,
+              transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
+              height: frame.height,
+            },
+          ]}
+        >
+          <Animated.View
+            pointerEvents={"auto"}
+            style={[
+              styles.modal,
+              collapsed ? styles.collapsedModalBg : null,
+              {
+                borderTopLeftRadius: borderTopRadiusAnimated,
+                borderTopRightRadius: borderTopRadiusAnimated,
+              },
+            ]}
+          >
+            <Animated.View
+              pointerEvents={!collapsed ? "auto" : "none"}
+              style={[
+                pip ? styles.modalContentPiP : styles.modalContent,
+                directionStyles(isTabletPortrait),
+              ]}
+            >
+              <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>
+
+            {!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>
+      </AnimatedSafeAreaView>
+    </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,169 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { State } from "react-native-gesture-handler";
+
+import { VideoModalMode } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { useAnimationStateStore } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import {
+  ANIMATION_DURATION,
+  DRAG_TO_COLLAPSE,
+  DRAG_TO_EXPAND,
+} from "../consts";
+import { Animated } from "react-native";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+const getAnimatedValue = (animatedValue: Animated.Value): number => {
+  return (animatedValue as any).__getValue() as number;
+};
+
+export const useVideoModalState = () => {
+  const {
+    yTranslate,
+    offset,
+    heightAboveMinimised,
+    gestureTranslationRef,
+    offsetAnimatedValueRef,
+  } = useModalAnimationContext();
+
+  const modalAnimatedValue = offsetAnimatedValueRef.current;
+  const gestureTranslation = gestureTranslationRef.current;
+
+  const updateModalTranslation = useCallback(
+    (toValue: number, duration: number = ANIMATION_DURATION) =>
+      Animated.timing(modalAnimatedValue, {
+        toValue,
+        duration,
+        useNativeDriver: true,
+      }),
+    [modalAnimatedValue]
+  );
+
+  const translateY = yTranslate.current;
+
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
+
+  const videoModalMode = videoModalState.mode;
+
+  const prevModeStateRef = useRef(videoModalMode); // keep track of last non-PIP mode
+  const gestureStateRef = useRef<any>(State.UNDETERMINED); // keep track of gesture state
+
+  // Track last non-PIP mode
+  if (videoModalMode !== prevModeStateRef.current) {
+    if (["MAXIMIZED", "MINIMIZED"].includes(videoModalMode)) {
+      prevModeStateRef.current = videoModalMode;
+    }
+  }
+
+  const collapsed =
+    videoModalState.visible &&
+    ((prevModeStateRef.current === "MINIMIZED" &&
+      videoModalState.mode === "PIP") || // If STILL in PIP mode, check if last non-PIP mode was MINIMIZED
+      videoModalState.mode === VideoModalMode.MINIMIZED); // Or if currently in MINIMIZED mode
+
+  // Gesture handler for modal
+  const onGestureEvent = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { translationY: gestureTranslation } }], {
+        useNativeDriver: true,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onHandlerStateChange = useCallback(
+    (event: any) => {
+      const { state: newState, oldState, translationY } = event.nativeEvent;
+
+      if (newState === State.ACTIVE || oldState === State.ACTIVE) {
+        useAnimationStateStore.setState({
+          isAnimationInProgress: newState === State.ACTIVE,
+        });
+      }
+
+      // Update gesture state tracking
+      gestureStateRef.current = newState;
+
+      if (translationY !== 0) {
+        if (newState === State.BEGAN) {
+          // clean up gesture translation
+          gestureTranslation.setValue(0);
+        } else if (
+          newState === State.END ||
+          newState === State.FAILED ||
+          newState === State.CANCELLED
+        ) {
+          const newY = getAnimatedValue(gestureTranslation);
+
+          // clean up gesture translation
+          gestureTranslation.setValue(0);
+
+          const v = getAnimatedValue(modalAnimatedValue);
+
+          // store current offset
+          modalAnimatedValue.setValue(v + newY);
+
+          const shouldCollapse = newY > offset.current * DRAG_TO_COLLAPSE;
+
+          const shouldExpand = newY < offset.current * DRAG_TO_EXPAND;
+
+          if (!collapsed && shouldCollapse) {
+            // Collapse
+            updateModalTranslation(offset.current).start(() => {
+              minimiseVideoModal();
+            });
+          } else if (collapsed && shouldExpand) {
+            // Expand
+            updateModalTranslation(0).start(() => {
+              maximiseVideoModal();
+            });
+          } else {
+            // Snap back to current state
+            updateModalTranslation(collapsed ? offset.current : 0).start();
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collapsed]
+  );
+
+  const gestureHandlerProps = useMemo(() => {
+    return {
+      onGestureEvent,
+      onHandlerStateChange,
+    };
+  }, [onGestureEvent, onHandlerStateChange]);
+
+  // Track video modal state changes & calling updateAnimatedPosition
+  useEffect(() => {
+    if (videoModalState.visible) {
+      const mode =
+        videoModalMode === "PIP" ? prevModeStateRef.current : videoModalMode;
+
+      // Prevent changes during active gesture states to avoid interference
+      if ([State.ACTIVE].includes(gestureStateRef.current)) {
+        return;
+      }
+
+      if (mode === VideoModalMode.MAXIMIZED) {
+        updateModalTranslation(0).start();
+      } else if (mode === VideoModalMode.MINIMIZED) {
+        updateModalTranslation(heightAboveMinimised).start();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoModalState.visible, videoModalState.mode, heightAboveMinimised]);
+
+  return useMemo(
+    () => ({
+      collapsed,
+      offset,
+      gestureHandlerProps,
+      translateY,
+      expand: maximiseVideoModal,
+    }),
+    [collapsed, offset, 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;

package/src/Player/PlayerModal/styles.ts

@@ -0,0 +1,109 @@
+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";
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        modal: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          backgroundColor,
+          elevation: 10,
+          zIndex: 100,
+          height: "100%",
+          overflow: "hidden",
+        },
+        modalWrapper: {
+          backgroundColor: BG_COLOR_DEFAULT_BLACK,
+        },
+        collapsedModalBg: {
+          backgroundColor: BG_COLOR_DEFAULT_BLACK,
+        },
+        modalContent: {
+          flex: 1,
+          alignItems: "center",
+        },
+        modalContentPiP: {
+          flex: 1,
+          alignItems: "flex-start",
+        },
+        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,
+          zIndex: 90,
+          justifyContent: "flex-end",
+        },
+        collapsedBarWrapper: {
+          flex: 1,
+        },
+        flexNone: {
+          ...StyleSheet.absoluteFillObject,
+          flex: -1,
+        },
+      }),
+    [backgroundColor, COLLAPSED_HEIGHT]
+  );
+};