@applicaster/quick-brick-player 14.0.0-rc.86 → 14.0.0-rc.87

package/package.json

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

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LayoutChangeEvent, View } from "react-native";
+import { Animated, LayoutChangeEvent, View } from "react-native";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
@@ -8,6 +8,7 @@ import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
   entry: ZappEntry;
@@ -29,15 +30,34 @@ export const PlayerImage = (props: Props) => {
     configuration.audio_player_artwork_border_radius
   );
 
+  const { yTranslate } = useModalAnimationContext();
+
+  const isModalExpanded = yTranslate.current.interpolate({
+    inputRange: [0, 1], // this should be end with `1` only when it's in initial state ( 0pos), otherwise `0`
+    outputRange: [1, 0],
+  });
+
+  // do not use styles.shadow when isModalExpanded is 0
+
+  const animatedStyle = {
+    opacity: isModalExpanded,
+  };
+
   return (
     <View style={styles.alignItemsCenter}>
+      {/* Using an Animated.View to apply shadow to the image */}
+      <Animated.View
+        style={[
+          animatedStyle,
+          shouldShowShadow ? styles.shadow : undefined,
+          { borderRadius },
+        ]}
+      />
       <View
         onLayout={onLayoutImage}
-        style={[shouldShowShadow ? styles.shadow : undefined, { borderRadius }]}
+        style={[styles.defaultImageWrapperView, { borderRadius }]}
       >
-        <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
-          <FlexImage entry={entry} style={styles.backgroundImageContainer} />
-        </View>
+        <FlexImage entry={entry} style={styles.backgroundImageContainer} />
       </View>
     </View>
   );

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -23,7 +23,12 @@ export const styles = StyleSheet.create({
     overflow: "hidden",
   },
   shadow: {
-    borderColor: "transparent",
+    zIndex: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },
     shadowOpacity: platformSelect({

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -67,12 +67,16 @@ export function VideoPlayerModal({
     () =>
       isTablet && !isTabletPortrait
         ? style.tabletLandscapeWidth
-        : getWindowWidth(),
+        : getWindowWidth(isTablet, !isTabletPortrait),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
-  const height = useMemo(() => getWindowHeight(), []); // remember initial height, ignore rotation changes
+  const height = useMemo(
+    () => getWindowHeight(isTablet, !isTabletPortrait),
+    []
+  ); // remember initial height, ignore rotation changes
+
   const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   const { minimised_height: minimisedHeight } = useConfiguration();
@@ -92,7 +96,9 @@ export function VideoPlayerModal({
 
   const insets = useSafeAreaInsets();
 
-  const [isFullScreenMode, setFullScreenMode] = React.useState(false);
+  const [isFullScreenMode, setFullScreenMode] = React.useState(
+    fullscreen || pip
+  );
 
   React.useEffect(() => {
     const listener = addOrientationChangeListener(({ toOrientation }) => {

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

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 import { State } from "react-native-gesture-handler";
 
 import { VideoModalMode } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { useAnimationStateStore } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import {
   ANIMATION_DURATION,
@@ -73,7 +74,13 @@ export const useVideoModalState = () => {
 
   const onHandlerStateChange = useCallback(
     (event: any) => {
-      const { state: newState, translationY } = event.nativeEvent;
+      const { state: newState, oldState, translationY } = event.nativeEvent;
+
+      if (newState === State.ACTIVE || oldState === State.ACTIVE) {
+        useAnimationStateStore.setState({
+          isAnimationInProgress: newState === State.ACTIVE,
+        });
+      }
 
       // Update gesture state tracking
       gestureStateRef.current = newState;

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

@@ -13,9 +13,20 @@ export const isOldAndroidDevice =
   isAndroidPlatform() &&
   !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
 
-export const getWindowHeight = (): number => {
+export const getWindowHeight = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
   const windowDimensions = Dimensions.get("window");
 
+  if (isTablet && landscape) {
+    return windowDimensions.height;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.width;
+  }
+
   return windowDimensions.height;
 };
 
@@ -25,9 +36,20 @@ export const getScreenHeight = (): number => {
   return screenDimensions.height;
 };
 
-export const getWindowWidth = (): number => {
+export const getWindowWidth = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
   const windowDimensions = Dimensions.get("window");
 
+  if (isTablet && landscape) {
+    return windowDimensions.width;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.height;
+  }
+
   return windowDimensions.width;
 };