@applicaster/quick-brick-player 14.0.0-alpha.5333112458 → 14.0.0-alpha.5365702091

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.5333112458",
+  "version": "14.0.0-alpha.5365702091",
   "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-alpha.5333112458",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-alpha.5333112458",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5333112458",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5333112458",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5333112458",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.56",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.60",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.5365702091",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.5365702091",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.5365702091",
     "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/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,13 +175,20 @@ 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")();
   const playerState = usePlayerState("shared-player-wrapper-docked");
 
-  const getValue = (key: string, stylesObj: {}) =>
-    R.propOr(null, key, stylesObj);
+  const getValue = React.useCallback(
+    (key: string, stylesObj: {}) => R.propOr(null, key, stylesObj),
+    []
+  );
 
   const value = React.useCallback(
     (key: string) => {
@@ -198,7 +208,7 @@ export const DockedControls = (props: Props) => {
 
       return retVal;
     },
-    [...Object.values(configuration), playerState]
+    [...Object.values(configuration), playerState.seekableDuration, getValue]
   );
 
   const { title, summary } = useTitleSummaryOverlay(
@@ -216,89 +226,94 @@ export const DockedControls = (props: Props) => {
   const insets = useSafeAreaInsets();
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
-        },
-      ]}
-    >
-      {!playerState.isLive ? (
-        <ProgressBar
-          name={"shared-docked-layout"}
-          content={entry}
-          value={value}
-          visible
-          layoutState={layoutState}
-          onPlayerSeek={onPlayerSeek}
-          playerState={playerState}
-          startComponentsAnimation={noop}
-          docked
-        />
-      ) : null}
+    <>
+      <View
+        style={[
+          styles.container,
+          {
+            height: minimisedHeight,
+            maxHeight: minimisedHeight,
+          },
+        ]}
+      >
+        {!playerState.isLive ? (
+          <ProgressBar
+            name={"shared-docked-layout"}
+            content={entry}
+            value={value}
+            visible
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            startComponentsAnimation={noop}
+            docked
+          />
+        ) : null}
 
-      <View style={styles.content}>
-        <View style={styles.touchableArea}>
-          {isActiveGesture || layoutState.docked ? (
-            <View style={{ aspectRatio: aspectRatio, height: minimisedHeight }}>
-              {ImageComponent || null}
-            </View>
-          ) : (
+        <View style={styles.content}>
+          <View style={styles.touchableArea}>
+            {isActiveGesture || layoutState.docked ? (
+              <View
+                style={{ aspectRatio: aspectRatio, height: minimisedHeight }}
+              >
+                {ImageComponent || null}
+              </View>
+            ) : (
+              <View
+                style={playerDimensionsStyle(
+                  minimisedHeight,
+                  isActiveGesture || layoutState.docked
+                )}
+              />
+            )}
             <View
-              style={playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              )}
-            />
-          )}
+              testID="content-info"
+              style={[
+                styles.contentInfo,
+                { backgroundColor: dockedBackgroundColor },
+              ]}
+            >
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
+            </View>
+          </View>
           <View
-            testID="content-info"
             style={[
-              styles.contentInfo,
+              isTablet
+                ? styles.controlsContainerForTablet
+                : styles.controlsContainerForMobile,
               { backgroundColor: dockedBackgroundColor },
             ]}
           >
-            <ContentInfo
-              content={{ ...entry, title, summary }}
+            <Controls
+              value={value}
+              visible
+              buttons={R.partial(controlButtons, [
+                playerState.isLive && liveButton,
+              ])}
+              style={styles.playPauseButton}
+              playNextData={playNextData}
+              playerState={playerState}
+            />
+            <Button
+              icon={"close_mini"}
+              size={"medium"}
               value={value}
-              docked
+              onPress={onCloseVideoModal}
+              style={styles.buttons}
             />
           </View>
         </View>
-        <View
-          style={[
-            isTablet
-              ? styles.controlsContainerForTablet
-              : styles.controlsContainerForMobile,
-            { backgroundColor: dockedBackgroundColor },
-          ]}
-        >
-          <Controls
-            value={value}
-            visible
-            buttons={R.partial(controlButtons, [
-              playerState.isLive && liveButton,
-            ])}
-            style={styles.playPauseButton}
-            playNextData={playNextData}
-            playerState={playerState}
-          />
-          <Button
-            icon={"close_mini"}
-            size={"medium"}
-            value={value}
-            onPress={onCloseVideoModal}
-            style={styles.buttons}
-          />
-        </View>
       </View>
       <View
         style={{
-          height: insets.bottom + bottomTabBarHeight,
+          height: insets.bottom + (menuVisible ? bottomTabBarHeight : 0),
           backgroundColor: dockedBackgroundColor,
         }}
       />
-    </View>
+    </>
   );
 };

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -30,17 +30,12 @@ const directionStyles = (isLandscape: boolean): ViewStyle => {
 };
 
 type AnimatedModalProps = {
-  enabled?: boolean;
   pip?: boolean;
-  content?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation
-  ) => ReactElement;
-  collapsedContent?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation
-  ) => ReactElement;
-  extraContent?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation
-  ) => ReactElement;
+  fullscreen?: boolean;
+  modal?: boolean;
+  content?: ReactElement;
+  collapsedContent?: ReactElement;
+  extraContent?: ReactElement;
   aspectRatio?: number;
   isTabletPortrait?: boolean;
   style?: {
@@ -53,7 +48,6 @@ type AnimatedModalProps = {
 const height = SCREEN_HEIGHT;
 
 export function VideoPlayerModal({
-  enabled = true,
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
   content,
   extraContent,
@@ -61,7 +55,10 @@ export function VideoPlayerModal({
   isTabletPortrait,
   style,
   pip = false,
+  fullscreen = false,
+  modal = true,
 }: AnimatedModalProps) {
+  const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
   let width = SCREEN_WIDTH;
@@ -74,6 +71,8 @@ export function VideoPlayerModal({
   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,
@@ -81,7 +80,7 @@ export function VideoPlayerModal({
     collapsedHeight,
     gestureHandlerProps,
     expand,
-  } = useVideoModalState(translateYRef);
+  } = useVideoModalState(modal ? translateYRef : dummyRef);
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
@@ -91,65 +90,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 +176,8 @@ export function VideoPlayerModal({
           {
             borderTopLeftRadius: borderTopRadiusAnimated,
             borderTopRightRadius: borderTopRadiusAnimated,
-            transform: [{ translateY }],
-            height: SCREEN_HEIGHT,
+            transform: [{ translateY: isFullScreenOrPIP ? 0 : translateY }],
+            height: height,
           },
         ]}
       >
@@ -177,7 +189,7 @@ export function VideoPlayerModal({
             {
               borderTopLeftRadius: borderTopRadiusAnimated,
               borderTopRightRadius: borderTopRadiusAnimated,
-              height: SCREEN_HEIGHT,
+              height: height,
             },
           ]}
         >
@@ -197,7 +209,7 @@ export function VideoPlayerModal({
                 },
               ]}
             >
-              {content(expandedOpacity)}
+              {content}
             </Animated.View>
             {extraContent ? (
               <GestureAnimatedScrollView
@@ -210,26 +222,28 @@ export function VideoPlayerModal({
                   { opacity: expandedOpacity },
                 ]}
               >
-                {extraContent ? extraContent(expandedOpacity) : null}
+                {extraContent || null}
               </GestureAnimatedScrollView>
             ) : 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,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,29 @@ 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 initialBottomOffset = useRef(bottom).current;
+
   const collapsedHeight =
-    minimisedHeight + bottom + bottomTabBarHeight + PROGRESS_BAR_HEIGHT;
+    minimisedHeight +
+    initialBottomOffset +
+    (menuVisible ? bottomTabBarHeight : 0) +
+    PROGRESS_BAR_HEIGHT;
 
   const translateY = translateYRef.current;
 
@@ -58,74 +75,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, collapsed, videoModalState]
+  );
 
   const gestureHandlerProps = useMemo(() => {
     return {
@@ -148,14 +171,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,53 @@ 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,
+          zIndex: 90,
+          justifyContent: "flex-end",
+        },
+        collapsedBarWrapper: {
+          flex: 1,
+        },
+        flexNone: {
+          ...StyleSheet.absoluteFillObject,
+          flex: -1,
+        },
+      }),
+    [backgroundColor, COLLAPSED_HEIGHT]
+  );
 };

package/src/Player/index.tsx

@@ -793,7 +793,7 @@ export default class VideoPlayer extends React.Component<
     };
 
     const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+      this.getPluginConfiguration()?.full_screen_audio_player || false;
 
     const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
 
@@ -835,7 +835,7 @@ export default class VideoPlayer extends React.Component<
       this.isReactNativeMethodsSupported() &&
       RNPlayerManager?.[this.playerPluginId]?.play
     ) {
-      delete nativeProps["paused"];
+      delete nativeProps.paused;
     }
 
     const adEvents = {
@@ -1032,10 +1032,11 @@ export default class VideoPlayer extends React.Component<
         />
       ) : (
         <VideoPlayerModal
-          enabled={!!isModal && !fullscreen}
           isTabletPortrait={isTabletPortrait}
           aspectRatio={aspectRatio}
           pip={this.state.piped}
+          fullscreen={fullscreen}
+          modal={isModal}
           style={{
             tabletLandscapeWidth: getTabletWidth(
               this.getPluginConfiguration().tablet_landscape_sidebar_width,
@@ -1044,9 +1045,10 @@ export default class VideoPlayer extends React.Component<
             width: style.width,
             height: style.height,
           }}
-          content={(_opacityAnim) => (
+          content={
             <PlayerWrapper
               {...sharedWrapperViewProps}
+              // eslint-disable-next-line react/no-unstable-nested-components
               playerContent={(playerDimensions) => {
                 const shouldRenderBackground =
                   !R.isNil(backgroundImageKey) &&
@@ -1059,11 +1061,7 @@ export default class VideoPlayer extends React.Component<
                     <View style={[playerContainerStyles, playerDimensions]}>
                       {isAudioItem ? (
                         <AudioPlayer
-                          style={
-                            isTV()
-                              ? getStyle(playerDimensions)
-                              : styles.playerSize
-                          }
+                          style={styles.playerSize}
                           audio_item={entry}
                           plugin_configuration={this.getPluginConfiguration()}
                         />
@@ -1085,11 +1083,7 @@ export default class VideoPlayer extends React.Component<
                             {...nativeEvents}
                             {...nativeProps}
                             listener={this.props.listener}
-                            style={
-                              isTV()
-                                ? getStyle(playerDimensions)
-                                : styles.playerSize
-                            }
+                            style={styles.playerSize}
                             pluginConfiguration={this.getPluginConfiguration()}
                             controller={this.props.controller}
                           >
@@ -1116,8 +1110,8 @@ export default class VideoPlayer extends React.Component<
                 );
               }}
             />
-          )}
-          extraContent={(_opacityAnim) => (
+          }
+          extraContent={
             <PlayerDetails
               configuration={this.getPluginConfiguration()}
               style={{ flex: 1 }}
@@ -1128,18 +1122,16 @@ export default class VideoPlayer extends React.Component<
               isModal={isModal}
               pip={this.state.piped}
             />
-          )}
-          collapsedContent={(_opacityAnim) =>
-            this.state.piped ? null : (
-              <View style={styles.container}>
-                <DockedControls
-                  entry={entry}
-                  aspectRatio={aspectRatio}
-                  layoutState={sharedWrapperViewProps.layoutState}
-                  playNextData={sharedWrapperViewProps.playNextData}
-                />
-              </View>
-            )
+          }
+          collapsedContent={
+            <View style={styles.container}>
+              <DockedControls
+                entry={entry}
+                aspectRatio={aspectRatio}
+                layoutState={sharedWrapperViewProps.layoutState}
+                playNextData={sharedWrapperViewProps.playNextData}
+              />
+            </View>
           }
         />
       );

package/src/QuickBrickPlayer.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
+import { ZStoreProvider } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 import { useOrientationEffect } from "@applicaster/zapp-react-native-utils/reactHooks/videoModal";
 import Player from "./Player";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { usePlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/usePlayerTTS";
 import { useIsCasting } from "./Player/hooks/useIsCasting";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
@@ -45,17 +47,21 @@ const QuickBrickPlayerComponent = (
     isRunningPlayNext: !!props?.playNextData,
   });
 
+  usePlayerTTS();
+
   return (
-    <Player
-      {...props}
-      ref={ref}
-      castAction={!props?.disableCastAction && castAction}
-      isCasting={isCasting}
-      PlayerComponent={props.PlayerComponent}
-      openPiP={openPiP}
-      closePiP={closePiP}
-      mode={mode}
-    />
+    <ZStoreProvider name="playerConfiguration" value={controller?.config}>
+      <Player
+        {...props}
+        ref={ref}
+        castAction={!props?.disableCastAction && castAction}
+        isCasting={isCasting}
+        PlayerComponent={props.PlayerComponent}
+        openPiP={openPiP}
+        closePiP={closePiP}
+        mode={mode}
+      />
+    </ZStoreProvider>
   );
 };