@applicaster/quick-brick-player 15.0.0-rc.4 → 15.0.0-rc.40

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

@@ -1,153 +1,132 @@
 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 { useAnimationStateStore } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 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();
+import { Animated } from "react-native";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
-export const useVideoModalState = (
-  translateYRef: React.MutableRefObject<Animated.Value>
-) => {
-  const { minimised_height: minimisedHeight } = useConfiguration();
+const getAnimatedValue = (animatedValue: Animated.Value): number => {
+  return (animatedValue as any).__getValue() as number;
+};
 
+export const useVideoModalState = () => {
   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, {
+    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: ANIMATION_DURATION,
+        duration,
         useNativeDriver: true,
-      });
-    },
-    [translateYRef]
+      }),
+    [modalAnimatedValue]
   );
 
-  const handleCollapse = useCallback(
-    (toValue: number) => {
-      return Animated.timing(translateYRef.current, {
-        toValue,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: true,
-      });
-    },
-    [translateYRef]
-  );
+  const translateY = yTranslate.current;
 
-  const offset = useRef(SCREEN_HEIGHT - collapsedHeight);
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
 
-  // 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;
+  const videoModalMode = videoModalState.mode;
 
-        if (newY > SCREEN_HEIGHT - collapsedHeight) {
-          newY = SCREEN_HEIGHT - collapsedHeight;
-        }
+  const prevModeStateRef = useRef(videoModalMode); // keep track of last non-PIP mode
+  const gestureStateRef = useRef<any>(State.UNDETERMINED); // keep track of gesture state
 
-        translateY.setValue(newY);
-      }
-    },
-    [collapsedHeight, translateY]
+  // 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) => {
-      if (event.nativeEvent.oldState === State.ACTIVE) {
-        const { translationY } = event.nativeEvent;
-        let newY = offset.current + translationY;
-        if (newY < 0) newY = 0;
+      const { state: newState, oldState, translationY } = event.nativeEvent;
 
-        if (newY > SCREEN_HEIGHT - collapsedHeight) {
-          newY = SCREEN_HEIGHT - collapsedHeight;
-        }
+      if (newState === State.ACTIVE || oldState === State.ACTIVE) {
+        useAnimationStateStore.setState({
+          isAnimationInProgress: newState === State.ACTIVE,
+        });
+      }
 
-        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);
-          });
+      // 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();
+          }
         }
-      } else if (event.nativeEvent.state === State.BEGAN) {
-        // Gesture started, set offset
-        translateY.stopAnimation((value: number) => {
-          offset.current = value;
-        });
       }
     },
-    [collapsedHeight, translateY, collapsed, videoModalState]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collapsed]
   );
 
   const gestureHandlerProps = useMemo(() => {
@@ -157,37 +136,34 @@ export const useVideoModalState = (
     };
   }, [onGestureEvent, onHandlerStateChange]);
 
+  // Track video modal state changes & calling updateAnimatedPosition
   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);
-      });
+    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();
+      }
     }
-  }, [videoModalState.visible, videoModalState.mode, collapsedHeight]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoModalState.visible, videoModalState.mode, heightAboveMinimised]);
 
   return useMemo(
     () => ({
       collapsed,
-      collapsedHeight,
       offset,
       gestureHandlerProps,
       translateY,
       expand: maximiseVideoModal,
     }),
-    [
-      collapsed,
-      collapsedHeight,
-      gestureHandlerProps,
-      translateY,
-      maximiseVideoModal,
-    ]
+    [collapsed, offset, gestureHandlerProps, translateY, maximiseVideoModal]
   );
 };

package/src/Player/PlayerModal/styles.ts

@@ -63,6 +63,7 @@ export const useStyles = ({ height }: { height: number }) => {
           backgroundColor,
           elevation: 10,
           zIndex: 100,
+          height: "100%",
           overflow: "hidden",
         },
         modalWrapper: {
@@ -75,6 +76,10 @@ export const useStyles = ({ height }: { height: number }) => {
           flex: 1,
           alignItems: "center",
         },
+        modalContentPiP: {
+          flex: 1,
+          alignItems: "flex-start",
+        },
         expandedContentContainer: {
           justifyContent: "flex-start",
           backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,

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

@@ -0,0 +1,111 @@
+import { StyleSheet, Dimensions, ViewStyle } from "react-native";
+
+import {
+  isAndroidPlatform,
+  isAndroidVersionAtLeast,
+  isTV,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
+export const isOldAndroidDevice =
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
+
+export const getWindowHeight = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  if (isTablet && landscape) {
+    return windowDimensions.height;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.width;
+  }
+
+  return windowDimensions.height;
+};
+
+export const getScreenHeight = (): number => {
+  const screenDimensions = Dimensions.get("screen");
+
+  return screenDimensions.height;
+};
+
+export const getWindowWidth = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
+  const windowDimensions = Dimensions.get("window");
+
+  if (isTablet && landscape) {
+    return windowDimensions.width;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.height;
+  }
+
+  return windowDimensions.width;
+};
+
+const getIsTabletLandscape = (isTabletPortrait: boolean): boolean => {
+  return !isTV() && getIsTablet() && !isTabletPortrait;
+};
+
+export const getInsetsOffset = (
+  insets: { top: number; bottom: number },
+  isTabletPortrait: boolean
+): number => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return getIsTablet() && isTabletLandscape
+    ? isOldAndroidDevice
+      ? insets.top / 2
+      : 0
+    : insets.top / 2;
+};
+
+const orientationStyles = StyleSheet.create({
+  landscape: { flexDirection: "row" },
+  portrait: { flexDirection: "column" },
+});
+
+export const directionStyles = (isTabletPortrait: boolean): ViewStyle => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  return isTabletLandscape
+    ? orientationStyles.landscape
+    : orientationStyles.portrait;
+};
+
+export const getScaledPos = (
+  height,
+  vidHeight,
+  minimisedHeight,
+  isTabletPortrait
+) => {
+  const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
+
+  const SCALE_FACTOR = minimisedHeight / vidHeight; // Scale factor for expanded content
+
+  return (
+    ((isTabletLandscape ? height : vidHeight) - vidHeight * SCALE_FACTOR) / 2
+  );
+};
+
+export const getExtraContentPadding = (insets: {
+  top: number;
+  bottom: number;
+}): ViewStyle => {
+  const isTablet = getIsTablet(); // not a hook, just a utility function
+
+  return {
+    paddingTop: isTablet ? insets.top : 0,
+    paddingBottom: insets.bottom,
+  };
+};

package/src/Player/PlayerView/types.ts

@@ -10,9 +10,8 @@ export interface PlayNextOverlayProps {
 }
 
 export interface PlayerComponentProps {
-  ref: React.RefObject<any>;
+  ref: React.Ref<any>;
   listener: Record<string, any>;
-  configuration: Record<string, any>;
   style: ViewStyle;
 }
 

package/src/Player/hooks/progressStates/__tests__/utils.test.ts

@@ -0,0 +1,23 @@
+import { calculateLiveProgressBarTime } from "../utils";
+
+describe("Utils", () => {
+  describe("calculateLiveProgressBarTime", () => {
+    it("Should return 0", () => {
+      expect(calculateLiveProgressBarTime(68, 1)).toBe(0);
+
+      expect(calculateLiveProgressBarTime(68, 0)).toBe(0);
+
+      expect(calculateLiveProgressBarTime(68, -1)).toBe(0);
+
+      expect(calculateLiveProgressBarTime(68, -5)).toBe(0);
+    });
+
+    it("Should return equal duration", () => {
+      expect(calculateLiveProgressBarTime(68, -100)).toBe(-68);
+
+      expect(calculateLiveProgressBarTime(68, -68)).toBe(-68);
+
+      expect(calculateLiveProgressBarTime(68, -105)).toBe(-68);
+    });
+  });
+});

package/src/Player/hooks/progressStates/useLiveProgressState.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import { calculateLiveProgressBarTime, formatTimeDisplay } from "./utils";
+import { ProgressState } from "./useProgressState";
+
+// TODO: Must Add check RTL support
+const getSliderValues = (seekableDuration: number, time: number) => {
+  const value = calculateLiveProgressBarTime(seekableDuration, time);
+
+  return {
+    minimumValue: -seekableDuration,
+    maximumValue: 0,
+    value: Math.min(0, value),
+  };
+};
+
+const prepareNewState = ({ seekableDuration, time }) => {
+  const sliderValues = getSliderValues(seekableDuration, time);
+
+  const getProgress = (
+    seekableDuration: number,
+    currentTime: number
+  ): number => {
+    return Math.round((currentTime / seekableDuration) * 100);
+  };
+
+  const getElapsedTime = (currentTime: number): string => {
+    return currentTime === 0
+      ? ""
+      : `-${formatTimeDisplay(Math.abs(currentTime))}`;
+  };
+
+  const getLiveOffsetPercent = (): number =>
+    (100 * (sliderValues.value - sliderValues.minimumValue)) /
+    (sliderValues.maximumValue - sliderValues.minimumValue);
+
+  return {
+    progress: getProgress(seekableDuration, sliderValues.value),
+    liveOffsetPercent: getLiveOffsetPercent(),
+    time: [getElapsedTime(sliderValues.value), null],
+    currentTime: sliderValues.value,
+    duration: Math.max(0, seekableDuration),
+    sliderValues,
+  };
+};
+
+// TODO: Add for `NOW` localization
+export const useLiveProgressState = ({
+  playerState: { currentTime, seekableDuration },
+}): [ProgressState, (seek: number) => void] => {
+  const stateRef = React.useRef<ProgressState>({
+    progress: 0,
+    liveOffsetPercent: 0,
+    time: ["--:--", "--:--"],
+    currentTime: 0,
+    duration: 0,
+    sliderValues: {
+      minimumValue: 0,
+      maximumValue: 0,
+      value: 0,
+    },
+  });
+
+  const updateState = React.useCallback(
+    (seekTime: number): void => {
+      if (seekTime == null || seekableDuration == null) {
+        return;
+      }
+
+      stateRef.current = prepareNewState({ seekableDuration, time: -seekTime });
+    },
+    [seekableDuration]
+  );
+
+  updateState(currentTime);
+
+  return [stateRef.current, updateState];
+};

package/src/Player/hooks/progressStates/useProgressState.tsx

@@ -0,0 +1,30 @@
+import { useLiveProgressState } from "./useLiveProgressState";
+import { useVodProgressState } from "./useVodProgressState";
+
+export type ProgressState = {
+  liveOffsetPercent?: number;
+  progress: number;
+  time: string[];
+  currentTime: number;
+  duration: number;
+  sliderValues: { minimumValue: number; maximumValue: number; value: number };
+};
+
+// TODO: Try refactor to remove code duplication
+export const useProgressState = ({
+  playerState: { seekableDuration, duration, isLive },
+  remainingTimeDisplay = false,
+  currentTime,
+}): [ProgressState, (seek) => void] => {
+  const liveData: [ProgressState, (seek: number) => void] =
+    useLiveProgressState({
+      playerState: { currentTime, seekableDuration },
+    });
+
+  const vodData: [ProgressState, (seek) => void] = useVodProgressState({
+    playerState: { currentTime, duration },
+    remainingTimeDisplay,
+  });
+
+  return isLive ? liveData : vodData;
+};