@applicaster/quick-brick-player 14.0.0-rc.9 → 15.0.0-alpha.1001559563

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

@@ -4,7 +4,6 @@ import {
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import { MOBILE, NAVBAR_HEIGHT } from "./const";
 import { TransportInfo } from "./TransportInfo";
@@ -12,13 +11,12 @@ import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
 import { useMobileLayoutImageSize, useTransportInfoHeight } from "./hooks";
-import { DockedControls } from "./DockedControls";
 import { DEBUG, withDebug } from "./debug";
 import {
   BottomDebugSquare,
   LeftDebugSquare,
   RightDebugSquare,
-} from "./Debug/index";
+} from "./DebugComponent";
 
 import { Props } from "./types";
 
@@ -56,6 +54,7 @@ const mobileStyles = ({
   imageSize,
 }): ViewStyle => ({
   height: screenHeight - topInset - bottomInset,
+  width: "100%",
 
   opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
 
@@ -77,11 +76,8 @@ export function MobileLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onCloseVideoModal,
   playbackSpeedName,
   configuration,
-  dimensions,
-  playNextData,
   title,
   summary,
 }: Props) {
@@ -89,12 +85,10 @@ export function MobileLayout({
 
   const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
-  const { progressBarHeight } = useModalAnimationContext();
 
   const { imageSize } = useMobileLayoutImageSize();
 
-  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
-    useTransportInfoHeight();
+  const { onLayout: onTransportInfoLayout } = useTransportInfoHeight();
 
   const controlsContainerHeight = React.useMemo(() => {
     return (
@@ -108,10 +102,6 @@ export function MobileLayout({
     );
   }, [screenHeight, topInset, imageSize, bottomInset]);
 
-  const verticalOffsetForImage = React.useMemo(() => {
-    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
-  }, [transportInfoHeight, progressBarHeight]);
-
   return (
     <View
       style={[
@@ -163,19 +153,9 @@ export function MobileLayout({
         >
           <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}
+            docked={false}
             imageWidth={imageSize}
-            verticalOffset={verticalOffsetForImage}
+            configuration={configuration}
           />
         </View>
         {/* PlayerImage */}
@@ -204,19 +184,6 @@ export function MobileLayout({
           />
         </View>
       </View>
-
-      <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/AudioLayer/Layout/PlayerImage/AnimatedImage.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren } from "react";
 import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -9,6 +8,7 @@ import {
   DURATION_TO_MAXIMIZE,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 import { useChangePlayerState } from "./hooks";
 
@@ -30,10 +30,7 @@ type Props = PropsWithChildren<{
 export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
 
   const { minimisedHeight } = useModalAnimationContext();
 
@@ -70,8 +67,6 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
     };
   }, [changePlayerState$, minimisedHeight, imageWidth]);
 
-  if (!source) return null;
-
   return (
     <Animated.View
       style={[
@@ -81,7 +76,7 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
         },
       ]}
     >
-      <Image resizeMode="cover" style={style} source={source} />
+      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
     </Animated.View>
   );
 };

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Image, ImageStyle } from "react-native";
-
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
@@ -9,12 +8,9 @@ type Props = {
 };
 
 export const FlexImage = ({ entry, style }: Props) => {
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
 
-  if (!source) return null;
-
-  return <Image resizeMode="cover" style={style} source={source} />;
+  return (
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
+  );
 };

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

@@ -1,11 +1,6 @@
 import * as React from "react";
 import { LayoutChangeEvent, View } from "react-native";
 
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-  useModalAnimationContext,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
@@ -13,100 +8,55 @@ import { AnimatedImage } from "./AnimatedImage";
 import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
-import { calculateBorderRadius } from "../../utils";
-import { PlayNextData } from "../types";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   entry: ZappEntry;
-  layoutState: QuickBrickPlayer.LayoutState;
-  playerState: QuickBrickPlayer.PlayerState;
-  value: GetValue;
   configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
-  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
-  onCloseVideoModal: Callback;
-  onPlayerSeek: (targetTime: number) => void;
-  playNextData: PlayNextData;
-  title: string | number;
-  summary: string | number;
   docked: boolean;
   imageWidth?: Option<number>;
-  verticalOffset: number;
   onLayoutImage?: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
   const {
     entry,
-    dimensions,
     docked,
-    verticalOffset,
     imageWidth,
     configuration,
     onLayoutImage = noop,
   } = props;
 
-  const {
-    isActiveGesture,
-    startComponentsAnimation,
-    playerAnimationState,
-    minimisedHeight,
-  } = useModalAnimationContext();
-
   const isShadowEnabled = toBooleanWithDefaultTrue(
     configuration?.audio_player_artwork_shadow_enabled
   );
 
   const shouldShowShadow = !docked && isShadowEnabled;
 
-  const borderRadius = calculateBorderRadius(
-    docked,
-    startComponentsAnimation,
-    isActiveGesture,
-    playerAnimationState,
-    configuration
+  const borderRadius = toNumberWithDefaultZero(
+    configuration.audio_player_artwork_border_radius
   );
 
   return (
-    <AnimationComponent
-      animationType={ComponentAnimationType.moveUpComponent}
-      additionalData={{
-        marginTop: verticalOffset,
-      }}
-      style={styles.flex}
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveComponentHorizontal}
-        additionalData={{
-          // we move image horiontally to this value due artwork is centered
-          moveValue: (dimensions.width - minimisedHeight) / 2,
-        }}
-        style={styles.alignItemsCenter}
+    <View style={styles.alignItemsCenter}>
+      <View
+        onLayout={onLayoutImage}
+        style={[shouldShowShadow ? styles.shadow : undefined, { borderRadius }]}
       >
-        <View
-          onLayout={onLayoutImage}
-          style={[
-            shouldShowShadow ? styles.shadow : undefined,
-            { borderRadius },
-          ]}
-        >
-          {!imageWidth ? (
-            <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
-              <FlexImage
-                entry={entry}
-                style={styles.backgroundImageContainer}
-              />
-            </View>
-          ) : (
-            // we have imageSize here and now we could animate resizing of this image
-            <AnimatedImage
-              entry={entry}
-              style={[styles.backgroundImageContainer, { borderRadius }]}
-              imageWidth={imageWidth}
-              docked={docked}
-            />
-          )}
-        </View>
-      </AnimationComponent>
-    </AnimationComponent>
+        {!imageWidth ? (
+          <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
+            <FlexImage entry={entry} style={styles.backgroundImageContainer} />
+          </View>
+        ) : (
+          // we have imageSize here and now we could animate resizing of this image
+          <AnimatedImage
+            entry={entry}
+            style={[styles.backgroundImageContainer, { borderRadius }]}
+            imageWidth={imageWidth}
+            docked={docked}
+          />
+        )}
+      </View>
+    </View>
   );
 };

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

@@ -1,25 +1,16 @@
 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";
 import { Controls } from "./Controls";
 
-import { DockedControls } from "./DockedControls";
 import { withDebug } from "./debug";
 
 import { Props } from "./types";
 import { isSmallTabletHeight as getIsSmallTabletHeight } from "./utils";
 import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "./const";
-import { FlexImage } from "./PlayerImage/FlexImage";
-
-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
@@ -70,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,
@@ -98,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);
@@ -151,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}
@@ -193,20 +150,6 @@ export function TabletLandscapeLayout({
           </View>
         </View>
       </View>
-
-      <DockedControls
-        ImageComponent={<FlexImage entry={entry} style={styles.flex} />}
-        entry={entry}
-        layoutState={layoutState}
-        playerState={playerState}
-        value={value}
-        dimensions={dimensions}
-        onCloseVideoModal={onCloseVideoModal}
-        onPlayerSeek={onPlayerSeek}
-        playNextData={playNextData}
-        title={title}
-        summary={summary}
-      />
     </View>
   );
 }

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/AudioLayer/Layout/TransportInfo/index.tsx

@@ -1,14 +1,10 @@
 import * as React from "react";
-import { compose, map, propOr, split, take, trim } from "ramda";
 import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 import { toPositiveNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
@@ -16,6 +12,7 @@ import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { isSmallTabletHeight } from "../utils";
+import { getPlayerActionButtons } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 const styles = StyleSheet.create({
   container: {
@@ -85,14 +82,8 @@ export const TransportInfo = ({
   );
 
   const actionButtons = React.useMemo(
-    () =>
-      compose(
-        take(2),
-        map(trim),
-        split(","),
-        propOr("", "player_action_buttons")
-      )(configuration),
-    [configuration.player_action_buttons]
+    () => getPlayerActionButtons(configuration),
+    [configuration]
   );
 
   return (
@@ -110,10 +101,7 @@ export const TransportInfo = ({
       ]}
       onLayout={handleLayout}
     >
-      <AnimationComponent
-        animationType={ComponentAnimationType.componentFade}
-        style={styles.animatedContainer}
-      >
+      <View style={styles.animatedContainer}>
         <MobileTransportInfo
           content={entry}
           value={value}
@@ -122,7 +110,7 @@ export const TransportInfo = ({
           layoutState={layoutState}
           actionButtons={actionButtons}
         />
-      </AnimationComponent>
+      </View>
     </View>
   );
 };

package/src/Player/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
-import { isNil } from "lodash";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 
 const formatTime = (milliseconds: number) => {
   const totalSeconds = Math.floor(milliseconds / 1000);

package/src/Player/PlayerModal/GestureAnimatedScrollView.ts

@@ -0,0 +1,7 @@
+import { Animated } from "react-native";
+import { createNativeWrapper } from "react-native-gesture-handler";
+
+export const GestureAnimatedScrollView = createNativeWrapper(
+  Animated.ScrollView,
+  {}
+);

package/src/Player/PlayerModal/PlayerModal.tsx

@@ -0,0 +1,109 @@
+import React, { ReactElement } from "react";
+
+import { Animated, Pressable } from "react-native";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { useStyles } from "./styles";
+import { useVideoModalState } from "./hooks";
+import { MODAL_COLLAPSE_START, MODAL_RADIUS, SCREEN_HEIGHT } from "./consts";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+type AnimatedModalProps = {
+  content?: ReactElement;
+  collapsedContent?: ReactElement;
+};
+
+export function AnimatedModal({
+  content,
+  collapsedContent,
+}: AnimatedModalProps) {
+  const translateYRef = useModalAnimationContext().yTranslate;
+
+  const {
+    translateY,
+    collapsed,
+    collapsedHeight,
+    gestureHandlerProps,
+    expand,
+  } = useVideoModalState(translateYRef);
+
+  const styles = useStyles({ height: collapsedHeight, type: "audio" });
+
+  // Interpolated opacities for smooth cross-fade
+  const collapsedOpacity = translateY.interpolate({
+    inputRange: [MODAL_COLLAPSE_START, SCREEN_HEIGHT - collapsedHeight],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  });
+
+  const expandedOpacity = translateY.interpolate({
+    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+  });
+
+  const borderTopRadiusAnimated = translateY.interpolate({
+    inputRange: [0, SCREEN_HEIGHT - collapsedHeight],
+    outputRange: [MODAL_RADIUS, 0],
+    extrapolate: "clamp",
+  });
+
+  return (
+    <PanGestureHandler {...gestureHandlerProps}>
+      <Animated.View
+        pointerEvents={"auto"}
+        style={[
+          styles.modalWrapper,
+          {
+            borderTopLeftRadius: borderTopRadiusAnimated,
+            borderTopRightRadius: borderTopRadiusAnimated,
+            transform: [{ translateY }],
+            height: SCREEN_HEIGHT,
+          },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.modal,
+            {
+              borderTopLeftRadius: borderTopRadiusAnimated,
+              borderTopRightRadius: borderTopRadiusAnimated,
+              height: SCREEN_HEIGHT,
+            },
+          ]}
+        >
+          {/* Expanded Content (fades in) */}
+          <Animated.View
+            pointerEvents={!collapsed ? "auto" : "none"}
+            style={styles.modalContent}
+          >
+            <Animated.View
+              pointerEvents={!collapsed ? "auto" : "none"}
+              style={[
+                styles.expandedContentContainer,
+                { opacity: expandedOpacity },
+              ]}
+            >
+              {content}
+            </Animated.View>
+          </Animated.View>
+          {/* Collapsed Bar (fades out) */}
+          <Animated.View
+            pointerEvents={collapsed ? "box-none" : "none"}
+            style={[
+              styles.collapsedBarContainer,
+              { opacity: collapsedOpacity },
+            ]}
+          >
+            <Pressable
+              testID="collapsedBarWrapper"
+              onPress={expand}
+              style={styles.collapsedBarWrapper}
+            >
+              {collapsedContent}
+            </Pressable>
+          </Animated.View>
+        </Animated.View>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}