@applicaster/quick-brick-player 14.0.0-rc.38 → 14.0.0-rc.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.38",
+  "version": "14.0.0-rc.39",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.37",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.37",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.38",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.38",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.38",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.39",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.39",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.39",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

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/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,