@applicaster/quick-brick-player 13.0.0-rc.12 → 13.0.0-rc.121

package/src/Player/AudioLayer/Layout/{DockedLayout.tsx → DockedControls/index.tsx}

@@ -9,52 +9,38 @@ import * as R from "ramda";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
+  Button,
   ContentInfo,
-  ProgressBar,
   Controls,
-  Button,
+  ProgressBar,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+
 import {
-  useModalAnimationContext,
   AnimationComponent,
   ComponentAnimationType,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
 
-type Dimensions = {
-  width: number;
-  height: number;
-};
+const bottomTabBarHeight = getTabBarHeight();
 
-type LayoutProps = {
+type Props = {
   entry: ZappEntry;
-  layoutState: {
-    inline: boolean;
-    docked: boolean;
-    isModal: boolean;
-  };
-  playerState: {
-    currentTime: number;
-    duration: number;
-    seekableDuration: number;
-    isLive: boolean;
-    isPaused: boolean;
-    isBuffering: boolean;
-  };
+  layoutState: QuickBrickPlayer.LayoutState;
+  playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  configuration: { [key: string]: any };
-  onPlaybackButtonPress: () => void;
-  onRewindButtonPress: () => void;
-  onForwardButtonPress: () => void;
-  onPlayerSeek: (targetTime: number) => void;
+  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
   onCloseVideoModal: () => void;
-  maximiseVideoModal: () => void;
-  dimensions: Dimensions;
+  onPlayerSeek: (targetTime: number) => void;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
+  ImageComponent?: React.ReactNode;
 };
 
 const styles = StyleSheet.create({
@@ -71,6 +57,7 @@ const styles = StyleSheet.create({
   touchableArea: {
     flexShrink: 1,
     flex: 1,
+    flexDirection: "row",
     alignSelf: "stretch",
   },
   contentInfo: {
@@ -105,25 +92,25 @@ const styles = StyleSheet.create({
   },
 });
 
-const backgroundColorStyle = (value: GetValue): ViewStyle => ({
-  backgroundColor: value("docked_player_background_color"),
-});
-
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
+  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
 });
 
-const animatedContainerStyle = (docked: boolean): ViewStyle => ({
+const animatedContainerStyle = (
+  docked: boolean,
+  progressBarHeight: number
+): ViewStyle => ({
+  top: progressBarHeight,
   position: "absolute",
   width: "100%",
   zIndex: docked ? 1 : -1,
 });
 
 const backgroundImageStyle = (
-  dimensions: Dimensions,
+  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"],
   minimisedHeight: number,
   isActiveGesture: boolean
 ): ViewStyle => ({
@@ -133,24 +120,11 @@ const backgroundImageStyle = (
 });
 
 const controlButtons = (
-  isPlayNextEnabled: boolean,
   live: boolean,
   paused: boolean,
   buffering: boolean,
   playerId: string
 ): Array<ControlsButton> => {
-  if (isPlayNextEnabled) {
-    return [
-      {
-        size: "medium",
-        name: "play_next",
-        icon: "play_next",
-        preferredFocus: true,
-        style: styles.buttons,
-      },
-    ];
-  }
-
   if (buffering) {
     return [
       {
@@ -202,24 +176,23 @@ const controlButtons = (
   ];
 };
 
-export default function DockedLayout(props: LayoutProps) {
+export const DockedControls = (props: Props) => {
   const {
+    entry,
     layoutState,
+    playerState,
     value,
     dimensions,
-    entry,
     onCloseVideoModal,
     onPlayerSeek,
-    playerState,
-    configuration,
     playNextData,
     title,
     summary,
+    ImageComponent,
   } = props;
 
   const isTablet = useIsTablet();
 
-  const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
 
   const {
@@ -227,13 +200,18 @@ export default function DockedLayout(props: LayoutProps) {
     setPlayerAnimationState,
     startComponentsAnimation,
     minimisedHeight,
+    progressBarHeight,
   } = useModalAnimationContext();
 
   const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
     []
   );
 
+  const dockedBackgroundColor = value("docked_player_background_color");
+
+  const insets = useSafeAreaInsets();
+
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -241,22 +219,29 @@ export default function DockedLayout(props: LayoutProps) {
       animationType={ComponentAnimationType.componentAppears}
       style={[
         styles.container,
-        animatedContainerStyle(isActiveGesture || layoutState.docked),
+        animatedContainerStyle(
+          isActiveGesture || layoutState.docked,
+          progressBarHeight
+        ),
+        {
+          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+        },
       ]}
     >
       {!playerState.isLive &&
-        (layoutState.docked || startComponentsAnimation) && (
-          <ProgressBar
-            content={entry}
-            value={value}
-            visible={visible}
-            layoutState={layoutState}
-            onPlayerSeek={onPlayerSeek}
-            playerState={playerState}
-            startComponentsAnimation={startComponentsAnimation}
-            docked
-          />
-        )}
+      (layoutState.docked || startComponentsAnimation) ? (
+        <ProgressBar
+          name={"audio-docked-layout"}
+          content={entry}
+          value={value}
+          visible
+          layoutState={layoutState}
+          onPlayerSeek={onPlayerSeek}
+          playerState={playerState}
+          startComponentsAnimation={startComponentsAnimation}
+          docked
+        />
+      ) : null}
 
       <View style={styles.content}>
         <View
@@ -267,19 +252,25 @@ export default function DockedLayout(props: LayoutProps) {
           )}
         />
         <TouchableWithoutFeedback onPress={maximazeVideoModal}>
-          <View
-            style={[
-              styles.touchableArea,
-              playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              ),
-            ]}
-          >
+          <View style={styles.touchableArea}>
+            {isActiveGesture || layoutState.docked ? (
+              <View
+                style={{ width: toNumberWithDefault(100, minimisedHeight) }}
+              >
+                {ImageComponent || null}
+              </View>
+            ) : (
+              <View
+                style={playerDimensionsStyle(
+                  minimisedHeight,
+                  isActiveGesture || layoutState.docked
+                )}
+              />
+            )}
             <View
               style={[
                 styles.contentInfo,
-                !configuration.magic_background && backgroundColorStyle(value),
+                { backgroundColor: dockedBackgroundColor },
               ]}
             >
               <ContentInfo
@@ -295,14 +286,13 @@ export default function DockedLayout(props: LayoutProps) {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            !configuration.magic_background && backgroundColorStyle(value),
+            { backgroundColor: dockedBackgroundColor },
           ]}
         >
           <Controls
             value={value}
-            visible={visible}
+            visible
             buttons={R.partial(controlButtons, [
-              playNextData,
               playerState.isLive && liveButton,
             ])}
             style={styles.playPauseButton}
@@ -318,6 +308,12 @@ export default function DockedLayout(props: LayoutProps) {
           />
         </View>
       </View>
+      <View
+        style={{
+          height: insets.bottom + bottomTabBarHeight,
+          backgroundColor: dockedBackgroundColor,
+        }}
+      />
     </AnimationComponent>
   );
-}
+};

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

@@ -0,0 +1,230 @@
+import * as React from "react";
+import { StyleSheet, View, ViewStyle } 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 { MOBILE, NAVBAR_HEIGHT } from "./const";
+import { TransportInfo } from "./TransportInfo";
+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";
+
+import { Props } from "./types";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  flex: {
+    flex: 1,
+  },
+
+  audioPlayerContainer: {
+    flex: 1,
+    justifyContent: "flex-start",
+
+    minHeight: MOBILE.MIN_HEIGHT,
+
+    marginLeft: MOBILE.MARGIN_HORIZONTAL,
+    marginRight: MOBILE.MARGIN_HORIZONTAL,
+
+    marginTop: MOBILE.MARGIN_TOP,
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "blue",
+    }),
+  },
+});
+
+const mobileStyles = ({
+  screenHeight,
+  topInset,
+  bottomInset,
+  imageSize,
+}): ViewStyle => ({
+  height: screenHeight - topInset - bottomInset,
+
+  opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
+
+  ...withDebug({
+    borderWidth: 2,
+    borderColor: "magenta",
+  }),
+});
+
+export function MobileLayout({
+  entry,
+  layoutState,
+  playerState,
+  value,
+  onPlaybackButtonPress,
+  onRewindButtonPress,
+  onForwardButtonPress,
+  onPlayerSeek,
+  onSkipStart,
+  onSkipLive,
+  onSpeedButtonPress,
+  onSleepButtonPress,
+  onCloseVideoModal,
+  playbackSpeedName,
+  playbackSleepName,
+  configuration,
+  dimensions,
+  playNextData,
+  cancelSleepTimer,
+  sleepTimerDate,
+  title,
+  summary,
+}: Props) {
+  const { docked } = layoutState;
+
+  const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
+  const { height: screenHeight } = useSafeAreaFrame();
+  const { progressBarHeight } = useModalAnimationContext();
+
+  const { imageSize } = useMobileLayoutImageSize();
+
+  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
+    useTransportInfoHeight();
+
+  const controlsContainerHeight = React.useMemo(() => {
+    return (
+      screenHeight -
+      topInset -
+      imageSize -
+      NAVBAR_HEIGHT -
+      MOBILE.MARGIN_BOTTOM -
+      MOBILE.MARGIN_TOP -
+      bottomInset
+    );
+  }, [screenHeight, topInset, imageSize, bottomInset]);
+
+  const verticalOffsetForImage = React.useMemo(() => {
+    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
+  }, [transportInfoHeight, progressBarHeight]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        mobileStyles({
+          screenHeight,
+          topInset,
+          bottomInset,
+          imageSize,
+        }),
+      ]}
+    >
+      {DEBUG ? <LeftDebugSquare /> : null}
+      {DEBUG ? <RightDebugSquare /> : null}
+      {DEBUG ? <BottomDebugSquare /> : null}
+
+      {/* TransportInfo */}
+      <TransportInfo
+        entry={entry}
+        layoutState={layoutState}
+        value={value}
+        configuration={configuration}
+        onLayout={onTransportInfoLayout}
+      />
+
+      {/* TransportInfo */}
+
+      <View
+        style={[
+          styles.audioPlayerContainer,
+          {
+            width: imageSize,
+          },
+        ]}
+      >
+        {/* PlayerImage */}
+        <View
+          style={[
+            styles.flex,
+            {
+              maxHeight: imageSize,
+
+              ...withDebug({
+                borderWidth: 2,
+                borderColor: "yellow",
+              }),
+            },
+          ]}
+        >
+          <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={verticalOffsetForImage}
+          />
+        </View>
+        {/* PlayerImage */}
+
+        <View
+          style={{
+            height: controlsContainerHeight,
+          }}
+        >
+          <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>
+      </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

@@ -0,0 +1,70 @@
+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,
+  DURATION_TO_MINIMIZE,
+  DURATION_TO_MAXIMIZE,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+const styles = StyleSheet.create({
+  container: {
+    // we have to specify flex:0 and dimensions to make animation work
+    flex: 0,
+    aspectRatio: 1,
+  },
+});
+
+type Props = PropsWithChildren<{
+  entry: ZappEntry;
+  style?: ImageStyle | ImageStyle[];
+  imageWidth: number;
+}>;
+
+export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
+  const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
+
+  const source = React.useMemo(
+    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
+    [entry]
+  );
+
+  const { playerAnimationState, minimisedHeight } = useModalAnimationContext();
+
+  React.useEffect(() => {
+    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
+      Animated.timing(heightAnim, {
+        toValue: minimisedHeight,
+        duration: DURATION_TO_MINIMIZE,
+        useNativeDriver: false, // width/height can't use native driver
+      }).start();
+
+      return;
+    }
+
+    if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
+      Animated.timing(heightAnim, {
+        toValue: imageWidth,
+        duration: DURATION_TO_MAXIMIZE,
+        useNativeDriver: false, // width/height can't use native driver
+      }).start();
+    }
+  }, [playerAnimationState, imageWidth]);
+
+  if (!source) return null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          width: heightAnim,
+        },
+      ]}
+    >
+      <Image resizeMode="cover" style={style} source={source} />
+    </Animated.View>
+  );
+};

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

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