@applicaster/quick-brick-player 13.0.0-rc.98 → 13.0.0

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

@@ -1,32 +1,16 @@
 import * as React from "react";
-import { ImageBackground } from "react-native";
-
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { Image, ImageStyle } from "react-native";
+import { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 type Props = {
   entry: ZappEntry;
-  style?: { [K: string]: any };
-  imageStyle?: { [K: string]: any };
+  style?: ImageStyle;
 };
 
-const style = { flex: 1, aspectRatio: 1 };
-
-export const FlexImage = ({ entry, imageStyle }: Props) => {
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
-
-  if (!source) return null;
+export const FlexImage = ({ entry, style }: Props) => {
+  const backgroundImageSource = useBackgroundImage(entry);
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      source={source}
-      imageStyle={imageStyle}
-    >
-      {null}
-    </ImageBackground>
+    <Image resizeMode="cover" style={style} source={backgroundImageSource} />
   );
 };

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/index.ts

@@ -0,0 +1 @@
+export { useChangePlayerState } from "./useChangePlayerState";

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/useChangePlayerState.ts

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { Subject, Observable } from "rxjs";
+
+import { distinctUntilChanged } from "rxjs/operators";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+
+const builder = () => {
+  const changePlayerState$ = new Subject<PlayerAnimationStateT>();
+
+  const emitMaximized = (): void => {
+    changePlayerState$.next(PlayerAnimationStateEnum.maximize);
+  };
+
+  const emitMinimized = (): void => {
+    changePlayerState$.next(PlayerAnimationStateEnum.minimize);
+  };
+
+  const emitAppearInDocked = (): void => {
+    // if audio_player was presented in docked mode
+    changePlayerState$.next(PlayerAnimationStateEnum.appear_as_docked);
+  };
+
+  return {
+    emitMaximized,
+    emitMinimized,
+    emitAppearInDocked,
+    changePlayerState$: changePlayerState$.pipe(distinctUntilChanged()),
+  };
+};
+
+export const useChangePlayerState = ({
+  docked,
+}): Observable<PlayerAnimationStateT> => {
+  const changePlayerStateRef =
+    useRefWithInitialValue<ReturnType<typeof builder>>(builder);
+
+  const { playerAnimationState } = useModalAnimationContext();
+
+  const previousPlayerAnimationState = usePrevious(playerAnimationState);
+
+  React.useEffect(() => {
+    if (
+      !docked &&
+      isNil(previousPlayerAnimationState) &&
+      playerAnimationState === PlayerAnimationStateEnum.minimize
+    ) {
+      changePlayerStateRef.current.emitMinimized();
+
+      return;
+    }
+
+    if (
+      !docked &&
+      isNil(previousPlayerAnimationState) &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize
+    ) {
+      changePlayerStateRef.current.emitMaximized();
+
+      return;
+    }
+
+    if (
+      !docked &&
+      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize
+    ) {
+      changePlayerStateRef.current.emitMaximized();
+
+      return;
+    }
+
+    if (
+      !docked &&
+      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
+      playerAnimationState === PlayerAnimationStateEnum.minimize
+    ) {
+      changePlayerStateRef.current.emitMinimized();
+
+      return;
+    }
+
+    if (
+      docked &&
+      isNil(previousPlayerAnimationState) &&
+      isNil(playerAnimationState)
+    ) {
+      changePlayerStateRef.current.emitAppearInDocked();
+    }
+  }, [previousPlayerAnimationState, playerAnimationState, docked]);
+
+  return changePlayerStateRef.current.changePlayerState$;
+};

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

@@ -1,10 +1,13 @@
 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";
 
 import { AnimatedImage } from "./AnimatedImage";
 import { FlexImage } from "./FlexImage";
@@ -26,8 +29,9 @@ type Props = {
   title: string | number;
   summary: string | number;
   docked: boolean;
-  imageWidth: Option<number>;
+  imageWidth?: Option<number>;
   verticalOffset: number;
+  onLayoutImage?: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
@@ -35,9 +39,10 @@ export const PlayerImage = (props: Props) => {
     entry,
     dimensions,
     docked,
-    imageWidth,
     verticalOffset,
+    imageWidth,
     configuration,
+    onLayoutImage = noop,
   } = props;
 
   const {
@@ -47,6 +52,12 @@ export const PlayerImage = (props: Props) => {
     minimisedHeight,
   } = useModalAnimationContext();
 
+  const isShadowEnabled = toBooleanWithDefaultTrue(
+    configuration?.audio_player_artwork_shadow_enabled
+  );
+
+  const shouldShowShadow = !docked && isShadowEnabled;
+
   const borderRadius = calculateBorderRadius(
     docked,
     startComponentsAnimation,
@@ -71,24 +82,30 @@ export const PlayerImage = (props: Props) => {
         }}
         style={styles.alignItemsCenter}
       >
-        {!imageWidth ? (
-          // we render image with flex until we get size of this image
-          <FlexImage
-            entry={entry}
-            style={styles.backgroundImageContainer}
-            imageStyle={{ borderRadius }}
-          />
-        ) : null}
-
-        {imageWidth ? (
-          // we have imageSize here and now we could animate resizing of this image
-          <AnimatedImage
-            entry={entry}
-            style={styles.backgroundImageContainer}
-            imageStyle={{ borderRadius }}
-            imageWidth={imageWidth}
-          />
-        ) : null}
+        <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>
   );

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

@@ -1,9 +1,14 @@
+/* eslint-disable react-native/no-color-literals */
 import { StyleSheet } from "react-native";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const SHADOW_COLOR = "rgba(0, 0, 0, 1)";
 
 export const styles = StyleSheet.create({
   backgroundImageContainer: {
     flex: 1,
     aspectRatio: 1,
+    overflow: "hidden",
   },
 
   alignItemsCenter: {
@@ -14,4 +19,18 @@ export const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  defaultImageWrapperView: {
+    overflow: "hidden",
+  },
+  shadow: {
+    borderColor: "transparent",
+    shadowColor: SHADOW_COLOR,
+    shadowOffset: { width: 0, height: 24 },
+    shadowOpacity: platformSelect({
+      ios: 0.35,
+      default: 0.2,
+    }),
+    shadowRadius: 32,
+    elevation: 12,
+  },
 });

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

@@ -1,28 +1,36 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import {
-  useSafeAreaInsets,
   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 { TABLET_LANDSCAPE } from "./const";
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useImageSize, useTransportInfoHeight } from "./hooks";
 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
+const MIN_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL_S; // Minimum spacing for the audio player container
+const transportInfoHeight = NAVBAR_HEIGHT;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    alignItems: "center",
+    height: "100%",
     ...withDebug({
       borderWidth: 2,
       borderColor: "magenta",
@@ -32,30 +40,34 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   audioPlayerContainer: {
-    flex: 1,
-    maxHeight: TABLET_LANDSCAPE.MAX_HEIGHT,
     flexDirection: "column",
     alignItems: "center",
+    justifyContent: "center",
+    minWidth: MIN_WIDTH,
 
     ...withDebug({
       borderWidth: 2,
       borderColor: "blue",
     }),
   },
-});
-
-const tabletStyles = ({
-  screenHeight,
-  topInset,
-  bottomInset,
-  imageSize,
-}): ViewStyle => ({
-  alignItems: "center",
-
-  height: screenHeight - topInset - bottomInset,
-  paddingBottom: TABLET_LANDSCAPE.MARGIN_VERTICAL,
-
-  opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
+  audioPlayerContainerHeightLimit: {
+    maxHeight: 750,
+  },
+  audioPlayerContainerPaddings: {
+    paddingBottom: MAX_SPACING,
+    paddingTop: MAX_SPACING,
+  },
+  // For small screens, we reduce the padding to fit better
+  audioPlayerContainerPaddingsSmall: {
+    paddingBottom: MIN_SPACING,
+    paddingTop: MIN_SPACING,
+  },
+  controlsContainer: { flexGrow: 0, alignSelf: "stretch" },
+  // eslint-disable-next-line react-native/no-color-literals
+  debugYellow: {
+    borderWidth: 2,
+    borderColor: "yellow",
+  },
 });
 
 const isTabletWithHomeButton = (bottomInset: number): boolean =>
@@ -86,122 +98,108 @@ export function TabletLandscapeLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
+  const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
 
-  const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
+  const { bottom: bottomInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
+  const isSmallScreen = getIsSmallTabletHeight(screenHeight);
   const { progressBarHeight } = useModalAnimationContext();
 
-  const { imageSize, onLayout } = useImageSize({ isPortraitMode: false });
-
-  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
-    useTransportInfoHeight();
+  const onLayoutImage = React.useCallback((e) => {
+    setImageWidth(e.nativeEvent.layout.width);
+  }, []);
 
   return (
-    <View
-      style={[
-        styles.container,
-        tabletStyles({
-          screenHeight,
-          topInset,
-          bottomInset,
-          imageSize,
-        }),
-      ]}
-    >
+    <View style={styles.container}>
       {/* TransportInfo */}
       <TransportInfo
         entry={entry}
         layoutState={layoutState}
         value={value}
         configuration={configuration}
-        onLayout={onTransportInfoLayout}
       />
 
       {/* TransportInfo */}
 
-      <View style={styles.audioPlayerContainer}>
-        {/* PlayerImage */}
-        <View
-          style={[
-            styles.flex,
-            withDebug({
-              borderWidth: 2,
-              borderColor: "yellow",
-            }),
-          ]}
-          onLayout={onLayout}
-        >
-          <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={
-              transportInfoHeight +
-              topInset +
-              withAdditionalOffset({ progressBarHeight, bottomInset })
-            }
-          />
-        </View>
-        {/* PlayerImage */}
-
-        <View
-          style={{
-            maxWidth: imageSize,
-          }}
-        >
-          <Controls
-            entry={entry}
-            layoutState={layoutState}
-            playerState={playerState}
-            value={value}
-            title={title}
-            summary={summary}
-            sleepTimerDate={sleepTimerDate}
-            cancelSleepTimer={cancelSleepTimer}
-            playbackSpeedName={playbackSpeedName}
-            playbackSleepName={playbackSleepName}
-            onPlaybackButtonPress={onPlaybackButtonPress}
-            onRewindButtonPress={onRewindButtonPress}
-            onForwardButtonPress={onForwardButtonPress}
-            onPlayerSeek={onPlayerSeek}
-            onSkipStart={onSkipStart}
-            onSkipLive={onSkipLive}
-            onSpeedButtonPress={onSpeedButtonPress}
-            onSleepButtonPress={onSleepButtonPress}
-            docked={docked}
-          />
+      <View
+        style={[
+          styles.audioPlayerContainer,
+          {
+            marginTop: isSmallScreen
+              ? -TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+              : -TABLET_LANDSCAPE.MARGIN_VERTICAL,
+            height: screenHeight - transportInfoHeight,
+          },
+          isSmallScreen
+            ? styles.audioPlayerContainerPaddingsSmall
+            : styles.audioPlayerContainerPaddings,
+        ]}
+      >
+        <View style={[styles.flex, styles.audioPlayerContainerHeightLimit]}>
+          {/* PlayerImage non-docked */}
+          <View style={[styles.flex, withDebug(styles.debugYellow)]}>
+            {!docked ? (
+              <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}
+          </View>
+          {/* PlayerImage */}
+
+          <View style={styles.controlsContainer}>
+            <Controls
+              maxWidth={imageWidth}
+              entry={entry}
+              layoutState={layoutState}
+              playerState={playerState}
+              value={value}
+              title={title}
+              summary={summary}
+              playbackSpeedName={playbackSpeedName}
+              onPlaybackButtonPress={onPlaybackButtonPress}
+              onRewindButtonPress={onRewindButtonPress}
+              onForwardButtonPress={onForwardButtonPress}
+              onPlayerSeek={onPlayerSeek}
+              onSkipStart={onSkipStart}
+              onSkipLive={onSkipLive}
+              onSpeedButtonPress={onSpeedButtonPress}
+              docked={docked}
+            />
+          </View>
         </View>
       </View>
 
       <DockedControls
+        ImageComponent={<FlexImage entry={entry} style={styles.flex} />}
         entry={entry}
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import {
-  useSafeAreaInsets,
   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";
@@ -14,7 +14,7 @@ import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useImageSize } from "./hooks";
+import { useTabletLayoutImageSize } from "./hooks";
 import { DockedControls } from "./DockedControls";
 import { VerticalGutter } from "./VerticalGutter";
 
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 
   fillContainer: {
     ...StyleSheet.absoluteFillObject,
-
+    alignItems: "center",
     ...withDebug({
       borderWidth: 2,
       borderColor: "red",
@@ -82,15 +82,11 @@ export function TabletPortraitLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
@@ -104,7 +100,7 @@ export function TabletPortraitLayout({
     imageSize,
     offsetY: topOffset,
     onLayout,
-  } = useImageSize({ isPortraitMode: true });
+  } = useTabletLayoutImageSize({ isPortraitMode: true });
 
   return (
     <View
@@ -187,10 +183,7 @@ export function TabletPortraitLayout({
               value={value}
               title={title}
               summary={summary}
-              sleepTimerDate={sleepTimerDate}
-              cancelSleepTimer={cancelSleepTimer}
               playbackSpeedName={playbackSpeedName}
-              playbackSleepName={playbackSleepName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}
               onForwardButtonPress={onForwardButtonPress}
@@ -198,7 +191,6 @@ export function TabletPortraitLayout({
               onSkipStart={onSkipStart}
               onSkipLive={onSkipLive}
               onSpeedButtonPress={onSpeedButtonPress}
-              onSleepButtonPress={onSleepButtonPress}
               docked={docked}
             />
           </View>
@@ -211,7 +203,6 @@ export function TabletPortraitLayout({
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}