@applicaster/quick-brick-player 14.0.0-alpha.5243406255 → 14.0.0-alpha.5351122050

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.5243406255",
+  "version": "14.0.0-alpha.5351122050",
   "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.40",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.37",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5243406255",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5243406255",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5243406255",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.56",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.48",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5351122050",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5351122050",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5351122050",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",
@@ -57,7 +57,6 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
     "react-native-fs": "*",

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 import {
@@ -12,11 +12,6 @@ import {
 } from "@applicaster/quick-brick-mobile-transport-controls";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-
 import { AudioDescription } from "../../AudioDescription";
 import { isValidDate } from "../../../Utils";
 import { VerticalGutter } from "./VerticalGutter";
@@ -103,8 +98,6 @@ export const Controls = (props: Props) => {
     onSkipLive,
     onSpeedButtonPress,
     maxWidth = 320,
-
-    docked,
   } = props;
 
   const configuration = useZStore("playerConfiguration");
@@ -229,15 +222,8 @@ export const Controls = (props: Props) => {
     isLiveShowFullControls,
   ]);
 
-  if (docked) {
-    return null;
-  }
-
   return (
-    <AnimationComponent
-      animationType={ComponentAnimationType.componentFade}
-      style={isTablet ? styles.nonFlex : styles.flex}
-    >
+    <View style={isTablet ? styles.nonFlex : styles.flex}>
       <VerticalGutter />
 
       <AudioDescription
@@ -257,7 +243,11 @@ export const Controls = (props: Props) => {
             content={entry}
             value={value}
             visible
-            layoutState={layoutState}
+            layoutState={{
+              ...layoutState,
+              docked: false, // always use non-docked layout for audio (to show time labels
+              inline: true, // always use inline layout for audio (to show time labels)
+            }}
             onPlayerSeek={onPlayerSeek}
             playerState={playerState}
             disableFullscreen
@@ -286,6 +276,6 @@ export const Controls = (props: Props) => {
         }}
         playerState={playerState}
       />
-    </AnimationComponent>
+    </View>
   );
 };

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

@@ -18,12 +18,15 @@ 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";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -172,6 +175,11 @@ export const DockedControls = (props: Props) => {
     playerManager.close();
   }, []);
 
+  const { currentRoute, screenData } = useNavigation();
+
+  const plugins = usePlugins();
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
   const { minimised_height: minimisedHeight } = useConfiguration();
 
   const configuration = useZStore("playerConfiguration")();
@@ -220,7 +228,10 @@ export const DockedControls = (props: Props) => {
       style={[
         styles.container,
         {
-          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+          height:
+            minimisedHeight +
+            (menuVisible ? bottomTabBarHeight : 0) +
+            insets.bottom,
         },
       ]}
     >
@@ -295,7 +306,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/hooks/index.ts

@@ -1,18 +1,21 @@
+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";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -21,15 +24,26 @@ export const useVideoModalState = (
 ) => {
   const { minimised_height: minimisedHeight } = useConfiguration();
 
-  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
-    useNavigation();
+  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 collapsedHeight =
-    minimisedHeight + bottom + bottomTabBarHeight + PROGRESS_BAR_HEIGHT;
+    minimisedHeight +
+    bottom +
+    (menuVisible ? bottomTabBarHeight : 0) +
+    PROGRESS_BAR_HEIGHT;
 
   const translateY = translateYRef.current;
 
@@ -58,74 +72,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 +168,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/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

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