@applicaster/quick-brick-player 14.0.0-alpha.9119252693 → 14.0.0-alpha.9256258513

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-alpha.9119252693",
+  "version": "14.0.0-alpha.9256258513",
   "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.9119252693",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.31",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.9119252693",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.9119252693",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.9119252693",
+    "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-alpha.9256258513",
+    "@applicaster/quick-brick-tv-transport-controls": "14.0.0-alpha.9256258513",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-alpha.9256258513",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.9256258513",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.9256258513",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

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

@@ -23,6 +23,7 @@ import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/app
 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";
 
 const bottomTabBarHeight = getTabBarHeight();
 
@@ -47,7 +48,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: "column",
     alignItems: "stretch",
-    marginTop: 3, // from plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
+    marginTop: PROGRESS_BAR_HEIGHT,
   },
   content: {
     flex: 1,

package/src/Player/AudioLayer/Layout/TabletLandscapeLayout.tsx

@@ -1,11 +1,6 @@
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
@@ -17,8 +12,6 @@ import { Props } from "./types";
 import { isSmallTabletHeight as getIsSmallTabletHeight } from "./utils";
 import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "./const";
 
-const isIOS = isApplePlatform();
-
 const MIN_WIDTH = TABLET_LANDSCAPE.MIN_WIDTH; // Minimum width for the audio player container
 const MAX_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL; // Maximum spacing for the audio player container
 const MIN_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL_S; // Minimum spacing for the audio player container
@@ -68,22 +61,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const isTabletWithHomeButton = (bottomInset: number): boolean =>
-  bottomInset === 0;
-
-const withAdditionalOffset = ({ progressBarHeight, bottomInset }) => {
-  if (isIOS && isTabletWithHomeButton(bottomInset)) {
-    return progressBarHeight === 0 ? 8 : progressBarHeight + 2;
-  }
-
-  if (isIOS && !isTabletWithHomeButton(bottomInset)) {
-    return progressBarHeight === 0 ? 4 : 1;
-  }
-
-  // android
-  return progressBarHeight === 0 ? 4 : 0.5;
-};
-
 export function TabletLandscapeLayout({
   entry,
   layoutState,
@@ -96,21 +73,16 @@ export function TabletLandscapeLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
   const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
 
-  const { bottom: bottomInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
   const isSmallScreen = getIsSmallTabletHeight(screenHeight);
-  const { progressBarHeight } = useModalAnimationContext();
 
   const onLayoutImage = React.useCallback((e) => {
     setImageWidth(e.nativeEvent.layout.width);
@@ -149,20 +121,7 @@ export function TabletLandscapeLayout({
               <PlayerImage
                 docked={false}
                 entry={entry}
-                layoutState={layoutState}
-                playerState={playerState}
-                value={value}
                 configuration={configuration}
-                onPlayerSeek={onPlayerSeek}
-                onCloseVideoModal={onCloseVideoModal}
-                dimensions={dimensions}
-                playNextData={playNextData}
-                title={title}
-                summary={summary}
-                verticalOffset={withAdditionalOffset({
-                  progressBarHeight,
-                  bottomInset,
-                })}
                 onLayoutImage={onLayoutImage}
               />
             ) : null}

package/src/Player/AudioLayer/Layout/TabletPortraitLayout.tsx

@@ -4,8 +4,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { withDebug } from "./debug";
 import { TABLET_PORTRAIT } from "./const";
@@ -15,7 +13,6 @@ import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
 import { useTabletLayoutImageSize } from "./hooks";
-import { DockedControls } from "./DockedControls";
 import { VerticalGutter } from "./VerticalGutter";
 
 import { Props } from "./types";
@@ -82,11 +79,8 @@ export function TabletPortraitLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
@@ -94,7 +88,6 @@ export function TabletPortraitLayout({
 
   const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
-  const { progressBarHeight } = useModalAnimationContext();
 
   const {
     imageSize,
@@ -153,21 +146,9 @@ export function TabletPortraitLayout({
           >
             <PlayerImage
               entry={entry}
-              layoutState={layoutState}
-              playerState={playerState}
-              value={value}
               configuration={configuration}
-              onPlayerSeek={onPlayerSeek}
-              onCloseVideoModal={onCloseVideoModal}
-              dimensions={dimensions}
-              playNextData={playNextData}
-              title={title}
-              summary={summary}
               docked={docked}
               imageWidth={imageSize}
-              verticalOffset={
-                toNumberWithDefaultZero(topOffset) - progressBarHeight
-              }
             />
           </View>
 
@@ -196,20 +177,6 @@ export function TabletPortraitLayout({
           </View>
         </View>
       </View>
-      {/* PlayerImage */}
-
-      <DockedControls
-        entry={entry}
-        layoutState={layoutState}
-        playerState={playerState}
-        value={value}
-        dimensions={dimensions}
-        onCloseVideoModal={onCloseVideoModal}
-        onPlayerSeek={onPlayerSeek}
-        playNextData={playNextData}
-        title={title}
-        summary={summary}
-      />
     </View>
   );
 }

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -96,9 +96,7 @@ export function AnimatedModal({
           >
             <Pressable
               testID="collapsedBarWrapper"
-              onPress={() => {
-                expand();
-              }}
+              onPress={expand}
               style={styles.collapsedBarWrapper}
             >
               {collapsedContent}

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -11,6 +11,7 @@ import {
   MODAL_RADIUS,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
+  VIDEO_TRANSITION_THRESHOLD,
 } from "./consts";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -49,6 +50,8 @@ type AnimatedModalProps = {
   };
 };
 
+const height = SCREEN_HEIGHT;
+
 export function VideoPlayerModal({
   enabled = true,
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
@@ -62,11 +65,9 @@ export function VideoPlayerModal({
   const isTablet = useIsTablet();
 
   let width = SCREEN_WIDTH;
-  let height = SCREEN_HEIGHT;
 
   if (isTablet && !isTabletPortrait) {
     width = style?.tabletLandscapeWidth || width;
-    height = SCREEN_HEIGHT; // Keep height consistent for landscape
   }
 
   const { minimised_height: minimisedHeight } = useConfiguration();
@@ -88,8 +89,6 @@ export function VideoPlayerModal({
 
   const SCALE_FACTOR = 1 / (width / aspectRatio / minimisedHeight); // Scale factor for expanded content
 
-  const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
-
   const insets = useSafeAreaInsets();
 
   // Interpolated opacities for smooth cross-fade
@@ -225,9 +224,7 @@ export function VideoPlayerModal({
           >
             <Pressable
               testID="collapsedBarWrapper"
-              onPress={() => {
-                expand();
-              }}
+              onPress={expand}
               style={styles.collapsedBarWrapper}
             >
               {collapsedContent}

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

@@ -1,3 +1,4 @@
+import { isAndroidTablet } from "@applicaster/zapp-react-native-utils/reactHooks/layout/isTablet";
 import {
   isAndroidPlatform,
   isAndroidVersionAtLeast,
@@ -6,9 +7,12 @@ import { Dimensions, StatusBar } from "react-native";
 
 export const DOCKED_PROGRESSBAR_HEIGHT = 3; // Height of the docked progress bar plugins/mobile-transport-controls/src/ProgressBar/layouts/DockedLayout.tsx
 
+export const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
+
 const windowDimensions = Dimensions.get("window");
 
-const isOldAndroidDevice = !isAndroidVersionAtLeast(35) && isAndroidPlatform();
+const isOldAndroidDevice =
+  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
 
 export const SCREEN_WIDTH = windowDimensions.width;
 

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

@@ -92,7 +92,7 @@ export const useVideoModalState = (
         // Collapse
         Animated.timing(translateY, {
           toValue: SCREEN_HEIGHT - collapsedHeight,
-          duration: 250,
+          duration: ANIMATION_DURATION,
           useNativeDriver: true,
         }).start(() => {
           minimiseVideoModal();
@@ -102,7 +102,7 @@ export const useVideoModalState = (
         // Expand
         Animated.timing(translateY, {
           toValue: 0,
-          duration: 250,
+          duration: ANIMATION_DURATION,
           useNativeDriver: true,
         }).start(() => {
           maximiseVideoModal();

package/src/Player/PlayerModal/styles.ts

@@ -80,6 +80,7 @@ export const useStyles = ({ height }: { height: number }) => {
       flex: 0,
     },
     extraContentScrollView: {
+      width: "100%",
       backgroundColor: BG_COLOR_DEFAULT_TRANSPARENT,
     },
     collapsedBarContainer: {