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

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 { useTabletLayoutImageSize, 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,124 +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 } = useTabletLayoutImageSize({
-    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";
@@ -82,15 +82,11 @@ export function TabletPortraitLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
@@ -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}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { compose, take, map, split, propOr, trim } from "ramda";
-import { StyleSheet, View, LayoutChangeEvent } from "react-native";
+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";
@@ -12,13 +12,16 @@ import {
 import { toPositiveNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-import { TABLET_LANDSCAPE, NAVBAR_HEIGHT } from "../const";
+import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
 
 const styles = StyleSheet.create({
   container: {
     height: NAVBAR_HEIGHT,
     justifyContent: "center",
+    marginHorizontal: 10,
   },
   animatedContainer: {
     width: "100%",
@@ -51,6 +54,7 @@ export const TransportInfo = ({
   onLayout = noop,
 }: Props) => {
   const isTablet = useIsTablet();
+  const safeAreaFrame = useSafeAreaFrame();
   const languageData = useLanguageData("audio-player");
 
   const [marginBottom, setMarginBottom] = React.useState(0);
@@ -61,8 +65,18 @@ export const TransportInfo = ({
         event?.nativeEvent?.layout?.height
       );
 
-      const minHeight = Math.min(height, TABLET_LANDSCAPE.MARGIN_VERTICAL);
-      setMarginBottom(TABLET_LANDSCAPE.MARGIN_VERTICAL - minHeight);
+      const minHeight = Math.min(
+        height,
+        isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL
+      );
+
+      setMarginBottom(
+        (isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL) - minHeight
+      );
 
       // pass layoutChangeEvent to upper level
       onLayout(event);

package/src/Player/AudioLayer/Layout/const.ts

@@ -2,9 +2,13 @@ export const PADDING_HORIZONTAL = 15;
 
 export const TABLET_VERTICAL_SEPARATOR_HEIGHT = 32;
 
+export const TABLET_VERTICAL_SEPARATOR_HEIGHT_S = 16;
+
 export const TABLET_LANDSCAPE = {
   MARGIN_VERTICAL: 80, // gap between safe-area edge and audio-player container
+  MARGIN_VERTICAL_S: 60, // gap between safe-area edge and audio-player container
   MAX_HEIGHT: 750,
+  MIN_WIDTH: 320, // Minimum width for the audio player container
 };
 
 export const TABLET_PORTRAIT = {

package/src/Player/AudioLayer/Layout/hooks/useTransportInfoHeight.ts

@@ -19,7 +19,7 @@ const builder = () => {
 };
 
 export const useTransportInfoHeight = () => {
-  const [height, setHeight] = React.useState(undefined);
+  const [height, setHeight] = React.useState(0);
 
   const layoutRef = useRefWithInitialValue<ReturnType<typeof builder>>(builder);
 

package/src/Player/AudioLayer/Layout/utils.ts

@@ -0,0 +1,7 @@
+/**
+ * Checks whether the screen height is matches with our threshold for small tablets.
+ * @param height screen height
+ * @returns boolean indicating if the height is less than 800 pixels
+ */
+export const isSmallTabletHeight = (height: number): boolean =>
+  !(height >= 800);

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -30,6 +30,7 @@ export class SleepTimerState {
 const SLEEP_PREFERENCE_KEY = "sleep";
 
 export class SleepTimerController {
+  // TODO cancel timer on reach time
   private sleepTimerStateSubject = new BehaviorSubject<SleepTimerState>(
     new SleepTimerState(SLEEP_TIMER_OFF, 0)
   );
@@ -55,18 +56,23 @@ export class SleepTimerController {
     }
   }
 
-  async setSleepTimer(item: SleepTimer) {
+  async setSleepTimer(item: SleepTimer, prevTimerSleepDate?: number) {
     // User has selected Off state
     if (item.value === 0) {
       log_debug("Cancelling sleep timer");
+
+      // Removing scheduled pause on timer expiration
       this.player.cancelSleepTimer?.();
 
       return this.onTimerExpired();
     }
 
-    log_debug(`Starting sleep timer in ${item.value} minutes`);
+    const futureSleepDate =
+      prevTimerSleepDate || Date.now() + item.value * 60000;
 
-    const futureSleepDate = Date.now() + item.value * 60000;
+    log_debug(
+      `Starting sleep timer in ${(futureSleepDate - Date.now()) / 1000}s`
+    );
 
     if (await this.scheduleSleep(futureSleepDate)) {
       await localStorage.setItem(
@@ -82,17 +88,26 @@ export class SleepTimerController {
   }
 
   async onTimerExpired() {
-    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+    this.removeSleepTimerFromLocalStorage().catch((error) => {
+      log_error("Failed to remove sleep timer from local storage", {
+        error: error.message,
+      });
+    });
 
+    // Update UI state
     this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
   }
 
+  async removeSleepTimerFromLocalStorage() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+  }
+
   async loadSleep() {
     const sleep = await localStorage.getItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
 
     if (!sleep) return;
 
-    const { futureSleepDate, ...rest } = sleep;
+    const { futureSleepDate, ...item } = sleep;
 
     if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
       log_debug("Sleep date has already passed");
@@ -101,13 +116,9 @@ export class SleepTimerController {
       return;
     }
 
-    if (await this.scheduleSleep(futureSleepDate)) {
-      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
+    log_debug("Sleep state restored");
 
-      this.sleepTimerStateSubject.next(
-        new SleepTimerState(rest as SleepTimer, futureSleepDate)
-      );
-    }
+    this.setSleepTimer(item as SleepTimer, futureSleepDate);
   }
 
   // Will be called if user closed the player explicitly.