@applicaster/quick-brick-player 15.0.0-rc.33 → 15.0.0-rc.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-rc.33",
+  "version": "15.0.0-rc.34",
   "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": "15.0.0-rc.27",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-rc.34",
     "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.15",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-rc.33",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.33",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.33",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-rc.34",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.34",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.34",
     "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/hooks/index.ts

@@ -7,7 +7,10 @@ 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 {
+  useConfiguration,
+  useAnimationStateStore,
+} 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 { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
@@ -100,6 +103,15 @@ export const useVideoModalState = (
 
   const onHandlerStateChange = useCallback(
     (event: any) => {
+      if (
+        event.nativeEvent.state === State.ACTIVE ||
+        event.nativeEvent.oldState === State.ACTIVE
+      ) {
+        useAnimationStateStore.setState({
+          isAnimationInProgress: event.nativeEvent.state === State.ACTIVE,
+        });
+      }
+
       if (event.nativeEvent.oldState === State.ACTIVE) {
         const { translationY } = event.nativeEvent;
         let newY = offset.current + translationY;