@applicaster/quick-brick-player 14.0.0-rc.7 → 14.0.0-rc.71

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -0,0 +1,271 @@
+import React, { ReactElement, 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_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";
+import { PlayerDetailsWrapperHeightContext } from "./context";
+
+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;
+  };
+};
+
+const height = SCREEN_HEIGHT;
+
+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();
+
+  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;
+  // 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 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);
+
+  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,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(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
+
+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/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,193 @@
+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,
+  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";
+
+const bottomTabBarHeight = getTabBarHeight();
+
+export const useVideoModalState = (
+  translateYRef: React.MutableRefObject<Animated.Value>
+) => {
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
+  const {
+    maximiseVideoModal,
+    minimiseVideoModal,
+    videoModalState,
+    currentRoute,
+    screenData,
+  } = useNavigation();
+
+  const plugins = usePlugins();
+
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
+  const collapsed = videoModalState.mode === VideoModalMode.MINIMIZED;
+
+  const { bottom } = useSafeAreaInsets();
+
+  const initialBottomOffset = useRef(bottom).current;
+
+  const collapsedHeight =
+    minimisedHeight +
+    initialBottomOffset +
+    (menuVisible ? bottomTabBarHeight : 0) +
+    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 = 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 > SCREEN_HEIGHT - collapsedHeight) {
+          newY = SCREEN_HEIGHT - collapsedHeight;
+        }
+
+        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 > 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;
+        });
+      }
+    },
+    [collapsedHeight, translateY, collapsed, videoModalState]
+  );
+
+  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, 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;

package/src/Player/PlayerModal/styles.ts

@@ -0,0 +1,104 @@
+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,
+          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,
+          zIndex: 90,
+          justifyContent: "flex-end",
+        },
+        collapsedBarWrapper: {
+          flex: 1,
+        },
+        flexNone: {
+          ...StyleSheet.absoluteFillObject,
+          flex: -1,
+        },
+      }),
+    [backgroundColor, COLLAPSED_HEIGHT]
+  );
+};

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)} />
+  );
+};