@applicaster/quick-brick-player 14.0.0-rc.4 → 14.0.0-rc.41

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -0,0 +1,254 @@
+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;
+  fullscreen?: boolean;
+  content?: (
+    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
+  ) => ReactElement;
+  collapsedContent?: (
+    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
+  ) => ReactElement;
+  extraContent?: (
+    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
+  ) => 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,
+  fullscreen = 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();
+
+  const isFullScreenOrPIP = fullscreen || pip;
+
+  // Interpolated opacities for smooth cross-fade
+  const collapsedOpacity = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [MODAL_COLLAPSE_START, height - collapsedHeight],
+        outputRange: [0, 1],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(0);
+
+  const expandedOpacity = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [0, height - collapsedHeight],
+        outputRange: [1, 0],
+        extrapolate: "clamp",
+      })
+    : new Animated.Value(1);
+
+  const xPosition = !isFullScreenOrPIP
+    ? translateY.interpolate({
+        inputRange: [
+          height * VIDEO_TRANSITION_THRESHOLD,
+          height - collapsedHeight,
+        ],
+        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 +
+                (SCREEN_WIDTH / aspectRatio -
+                  (SCREEN_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);
+
+  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(expandedOpacity)}
+            </Animated.View>
+            {extraContent ? (
+              <GestureAnimatedScrollView
+                ref={scrollViewRef}
+                contentContainerStyle={{
+                  paddingBottom: insets.bottom,
+                }}
+                style={[
+                  styles.extraContentScrollView,
+                  { opacity: expandedOpacity },
+                ]}
+              >
+                {extraContent ? extraContent(expandedOpacity) : null}
+              </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,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]);
+};

package/src/Player/PlayerView/GenericTVPlayerView.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { PlayNextOverlay } from "../PlayNextOverlay";
+import { GenericTVPlayerViewProps } from "./types";
+import { AudioPlayer } from "@applicaster/zapp-react-native-ui-components/Components/AudioPlayer";
+
+export const GenericTVPlayerView: React.FC<GenericTVPlayerViewProps> = ({
+  children,
+  type,
+  PlayerComponent,
+  pluginConfiguration,
+  playerProps,
+  playNextProps,
+  audioPlayerProps,
+  transportControls,
+  entry,
+}) => {
+  return (
+    <>
+      {type === "audio" ? (
+        <AudioPlayer
+          audio_item={entry}
+          plugin_configuration={pluginConfiguration}
+          {...audioPlayerProps}
+        />
+      ) : null}
+      <PlayerComponent
+        pluginConfiguration={pluginConfiguration}
+        {...playerProps}
+      >
+        {children}
+      </PlayerComponent>
+      {transportControls}
+      {playNextProps.playNextData ? (
+        <PlayNextOverlay
+          item={entry}
+          pluginConfiguration={pluginConfiguration}
+          {...playNextProps}
+        />
+      ) : null}
+    </>
+  );
+};

package/src/Player/PlayerView/TVPlayerView.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { TvOSPlayerView } from "./TvOSPlayerView";
+import { GenericTVPlayerView } from "./GenericTVPlayerView";
+import {
+  GenericTVPlayerViewProps,
+  TvOSPlayerViewProps,
+  TVPlayerViewProps,
+} from "./types";
+
+const isTvOS = isTvOSPlatform();
+
+const shouldRenderTvOSPlayerView = (
+  isTvOS: boolean,
+  inline: boolean
+): boolean => {
+  return isTvOS && !inline;
+};
+
+export const TVPlayerView: React.FC<TVPlayerViewProps> = (props) => {
+  return shouldRenderTvOSPlayerView(isTvOS, props.inline) ? (
+    <TvOSPlayerView {...(props as TvOSPlayerViewProps)} />
+  ) : (
+    <GenericTVPlayerView {...(props as GenericTVPlayerViewProps)} />
+  );
+};

package/src/Player/PlayerView/TvOSPlayerView.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View } from "react-native";
+import { PlayNextOverlay } from "../PlayNextOverlay";
+import { TvOSPlayerViewProps } from "./types";
+
+const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+
+export const TvOSPlayerView: React.FC<TvOSPlayerViewProps> = ({
+  children,
+  type,
+  PlayerComponent,
+  pluginConfiguration,
+  playerProps,
+  playNextProps,
+  nativePlayerIsReady,
+  transportControls,
+  entry,
+  inline,
+}) => {
+  return (
+    <>
+      <PlayerComponent
+        pluginConfiguration={pluginConfiguration}
+        {...playerProps}
+      >
+        {!inline ? (
+          <>
+            {type === "audio" && nativePlayerIsReady ? (
+              <View
+                nativeID={AUDIO_PLAYER_NATIVE_ID}
+                key={AUDIO_PLAYER_NATIVE_ID}
+              >
+                {children}
+              </View>
+            ) : (
+              children
+            )}
+            {playNextProps.playNextData ? (
+              <PlayNextOverlay
+                item={entry}
+                pluginConfiguration={pluginConfiguration}
+                {...playNextProps}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </PlayerComponent>
+      {transportControls}
+    </>
+  );
+};