@applicaster/quick-brick-player 14.0.0-alpha.3140225604 → 14.0.0-alpha.3216572828

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.3140225604",
+  "version": "14.0.0-alpha.3216572828",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.34",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-alpha.3140225604",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.3140225604",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.3140225604",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3140225604",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.48",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.48",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.3216572828",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.3216572828",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3216572828",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",
@@ -57,12 +57,10 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
     "react-native-fs": "*",
     "react-native-linear-gradient": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "react-native-webview": "*",
     "uglify-js": "*",

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -18,12 +18,14 @@ import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Compo
 
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
+import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -172,6 +174,10 @@ export const DockedControls = (props: Props) => {
     playerManager.close();
   }, []);
 
+  const { currentRoute, screenData } = useNavigation();
+
+  const menuVisible = isMenuVisible(currentRoute, screenData);
+
   const { minimised_height: minimisedHeight } = useConfiguration();
 
   const configuration = useZStore("playerConfiguration")();
@@ -220,7 +226,10 @@ export const DockedControls = (props: Props) => {
       style={[
         styles.container,
         {
-          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+          height:
+            minimisedHeight +
+            (menuVisible ? bottomTabBarHeight : 0) +
+            insets.bottom,
         },
       ]}
     >
@@ -295,7 +304,7 @@ export const DockedControls = (props: Props) => {
       </View>
       <View
         style={{
-          height: insets.bottom + bottomTabBarHeight,
+          height: insets.bottom + (menuVisible ? bottomTabBarHeight : 0),
           backgroundColor: dockedBackgroundColor,
         }}
       />

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -32,14 +32,15 @@ const directionStyles = (isLandscape: boolean): ViewStyle => {
 type AnimatedModalProps = {
   enabled?: boolean;
   pip?: boolean;
+  fullscreen?: boolean;
   content?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation
+    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
   ) => ReactElement;
   collapsedContent?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation
+    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
   ) => ReactElement;
   extraContent?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation
+    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
   ) => ReactElement;
   aspectRatio?: number;
   isTabletPortrait?: boolean;
@@ -61,6 +62,7 @@ export function VideoPlayerModal({
   isTabletPortrait,
   style,
   pip = false,
+  fullscreen = false,
 }: AnimatedModalProps) {
   const isTablet = useIsTablet();
 
@@ -91,65 +93,78 @@ export function VideoPlayerModal({
 
   const insets = useSafeAreaInsets();
 
+  const isFullScreenOrPIP = fullscreen || pip;
+
   // 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 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 = 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));
-  }
+  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
@@ -164,8 +179,8 @@ export function VideoPlayerModal({
           {
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
-            transform: [{ translateY }],
-            height: SCREEN_HEIGHT,
+            transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
+            height: height,
           },
         ]}
       >
@@ -177,7 +192,7 @@ export function VideoPlayerModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: SCREEN_HEIGHT,
+              height: height,
             },
           ]}
         >
@@ -215,21 +230,23 @@ export function VideoPlayerModal({
             ) : null}
           </Animated.View>
 
-          <Animated.View
-            pointerEvents={collapsed ? "box-none" : "none"}
-            style={[
-              styles.collapsedBarContainer,
-              { opacity: collapsedOpacity },
-            ]}
-          >
-            <Pressable
-              testID="collapsedBarWrapper"
-              onPress={expand}
-              style={styles.collapsedBarWrapper}
+          {!isFullScreenOrPIP ? (
+            <Animated.View
+              pointerEvents={collapsed ? "box-none" : "none"}
+              style={[
+                styles.collapsedBarContainer,
+                { opacity: collapsedOpacity },
+              ]}
             >
-              {collapsedContent}
-            </Pressable>
-          </Animated.View>
+              <Pressable
+                testID="collapsedBarWrapper"
+                onPress={expand}
+                style={styles.collapsedBarWrapper}
+              >
+                {collapsedContent}
+              </Pressable>
+            </Animated.View>
+          ) : null}
         </Animated.View>
       </Animated.View>
     </PanGestureHandler>

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

@@ -1,17 +1,19 @@
+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 { useCallback, useEffect, useMemo, useRef } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+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 { 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();
@@ -21,15 +23,25 @@ export const useVideoModalState = (
 ) => {
   const { minimised_height: minimisedHeight } = useConfiguration();
 
-  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
-    useNavigation();
+  const {
+    maximiseVideoModal,
+    minimiseVideoModal,
+    videoModalState,
+    currentRoute,
+    screenData,
+  } = useNavigation();
+
+  const menuVisible = isMenuVisible(currentRoute, screenData);
 
   const collapsed = videoModalState.mode === VideoModalMode.MINIMIZED;
 
   const { bottom } = useSafeAreaInsets();
 
   const collapsedHeight =
-    minimisedHeight + bottom + bottomTabBarHeight + PROGRESS_BAR_HEIGHT;
+    minimisedHeight +
+    bottom +
+    (menuVisible ? bottomTabBarHeight : 0) +
+    PROGRESS_BAR_HEIGHT;
 
   const translateY = translateYRef.current;
 
@@ -58,74 +70,80 @@ export const useVideoModalState = (
   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 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 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);
+  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;
         });
       }
-    } else if (event.nativeEvent.state === State.BEGAN) {
-      // Gesture started, set offset
-      translateY.stopAnimation((value: number) => {
-        offset.current = value;
-      });
-    }
-  };
+    },
+    [collapsedHeight, translateY]
+  );
 
   const gestureHandlerProps = useMemo(() => {
     return {
@@ -148,14 +166,23 @@ export const useVideoModalState = (
         translateY.setValue(SCREEN_HEIGHT - collapsedHeight);
       });
     }
-  }, [videoModalState.visible, videoModalState.mode]);
-
-  return {
-    collapsed,
-    collapsedHeight,
-    offset,
-    gestureHandlerProps,
-    translateY,
-    expand: maximiseVideoModal,
-  };
+  }, [videoModalState.visible, videoModalState.mode, collapsedHeight]);
+
+  return useMemo(
+    () => ({
+      collapsed,
+      collapsedHeight,
+      offset,
+      gestureHandlerProps,
+      translateY,
+      expand: maximiseVideoModal,
+    }),
+    [
+      collapsed,
+      collapsedHeight,
+      gestureHandlerProps,
+      translateY,
+      maximiseVideoModal,
+    ]
+  );
 };

package/src/Player/PlayerModal/styles.ts

@@ -52,50 +52,52 @@ export const useStyles = ({ height }: { height: number }) => {
   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]);
+  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,
+          justifyContent: "flex-end",
+        },
+        collapsedBarWrapper: {
+          flex: 1,
+        },
+        flexNone: {
+          ...StyleSheet.absoluteFillObject,
+          flex: -1,
+        },
+      }),
+    [backgroundColor, COLLAPSED_HEIGHT]
+  );
 };

package/src/Player/index.tsx

@@ -1036,6 +1036,7 @@ export default class VideoPlayer extends React.Component<
           isTabletPortrait={isTabletPortrait}
           aspectRatio={aspectRatio}
           pip={this.state.piped}
+          fullscreen={fullscreen}
           style={{
             tabletLandscapeWidth: getTabletWidth(
               this.getPluginConfiguration().tablet_landscape_sidebar_width,