@applicaster/quick-brick-player 14.0.0-rc.9 → 14.0.0-rc.90

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

@@ -1,12 +1,10 @@
 import * as React from "react";
+import { StyleSheet, View } from "react-native";
 import {
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-  ViewStyle,
-} from "react-native";
-import * as R from "ramda";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+  useIsTablet,
+  useZStore,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
 import {
   Button,
@@ -17,30 +15,28 @@ import {
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
-import {
-  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 { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
+import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
+import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
+import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { partial } from "@applicaster/zapp-react-native-utils/utils";
 
 const bottomTabBarHeight = getTabBarHeight();
 
 type Props = {
   entry: ZappEntry;
   layoutState: QuickBrickPlayer.LayoutState;
-  playerState: QuickBrickPlayer.PlayerState;
-  value: GetValue;
-  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
-  onCloseVideoModal: () => void;
-  onPlayerSeek: (targetTime: number) => void;
+  onPlayerSeek?: (targetTime: number) => void;
   playNextData: PlayNextData;
-  title: string | number;
-  summary: string | number;
   ImageComponent?: React.ReactNode;
+  isActiveGesture?: boolean;
+  aspectRatio?: number;
 };
 
 const styles = StyleSheet.create({
@@ -90,34 +86,12 @@ const styles = StyleSheet.create({
   buttons: {
     marginVertical: 10,
   },
+  liveMarginTop: { marginTop: 0 },
+  marginTop: { marginTop: PROGRESS_BAR_HEIGHT },
 });
 
-const playerDimensionsStyle = (
-  minimisedHeight: number,
-  addPadding: boolean
-): ViewStyle => ({
-  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
-});
-
-const animatedContainerStyle = (
-  docked: boolean,
-  progressBarHeight: number
-): ViewStyle => ({
-  top: progressBarHeight,
-  position: "absolute",
-  width: "100%",
-  zIndex: docked ? 1 : -1,
-});
-
-const backgroundImageStyle = (
-  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"],
-  minimisedHeight: number,
-  isActiveGesture: boolean
-): ViewStyle => ({
-  height: isActiveGesture ? minimisedHeight : dimensions.height,
-  aspectRatio: 1,
-  position: "absolute",
-});
+const getValue = (key: string, stylesObj: Record<string, any>) =>
+  stylesObj?.[key] ?? null;
 
 const controlButtons = (
   live: boolean,
@@ -180,140 +154,174 @@ export const DockedControls = (props: Props) => {
   const {
     entry,
     layoutState,
-    playerState,
-    value,
-    dimensions,
-    onCloseVideoModal,
-    onPlayerSeek,
+    onPlayerSeek = noop,
     playNextData,
-    title,
-    summary,
     ImageComponent,
+    aspectRatio,
   } = props;
 
-  const isTablet = useIsTablet();
+  const onCloseVideoModal = React.useCallback(() => {
+    playerManager.close();
+  }, []);
 
-  const liveButton = Boolean(value("live_badge_enabled"));
+  const { currentRoute, screenData } = useNavigation();
 
-  const {
-    isActiveGesture,
-    setPlayerAnimationState,
-    startComponentsAnimation,
-    minimisedHeight,
-    progressBarHeight,
-  } = useModalAnimationContext();
-
-  const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
-    []
+  const plugins = usePlugins();
+  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
+  const { minimised_height: minimisedHeight } = useConfiguration();
+
+  const configuration = useZStore("playerConfiguration")();
+  const playerState = usePlayerState("shared-player-wrapper-docked");
+
+  const value = React.useCallback(
+    (key: string) => {
+      const retVal = getValue(key, configuration);
+
+      const minimumAllowedSeekableDurationInSeconds = getValue(
+        "minimumAllowedSeekableDurationInSeconds",
+        configuration
+      );
+
+      if (key === "liveSeekingEnabled") {
+        return playerState.seekableDuration <
+          minimumAllowedSeekableDurationInSeconds || playerManager.isCasting()
+          ? false
+          : retVal;
+      }
+
+      return retVal;
+    },
+    [...Object.values(configuration), playerState.seekableDuration]
   );
 
+  const { title, summary } = useTitleSummaryOverlay(
+    entry,
+    playerState?.isLive,
+    configuration?.audio_live_player_update_interval
+  );
+
+  const isTablet = useIsTablet();
+
+  const liveButton = Boolean(value("live_badge_enabled"));
+
   const dockedBackgroundColor = value("docked_player_background_color");
 
   const insets = useSafeAreaInsets();
 
-  if (!layoutState.docked && !startComponentsAnimation) return null;
+  const progressBarLayoutState = React.useMemo(
+    () => ({
+      inline: layoutState.inline,
+      docked: true,
+      isModal: layoutState.isModal,
+      pip: layoutState.pip,
+    }),
+    [layoutState.inline, layoutState.isModal, layoutState.pip]
+  );
+
+  const _controlButtons = React.useMemo(
+    () => partial(controlButtons, playerState.isLive && liveButton),
+    [playerState.isLive, liveButton]
+  );
+
+  const containerStyles = React.useMemo(
+    () => ({
+      height: minimisedHeight,
+      maxHeight: minimisedHeight,
+    }),
+    [minimisedHeight]
+  );
+
+  const imageComponentWrapperStyles = React.useMemo(
+    () => ({
+      aspectRatio: aspectRatio,
+      height: minimisedHeight,
+    }),
+    [aspectRatio, minimisedHeight]
+  );
+
+  const backgroundColorStyle = React.useMemo(
+    () => ({
+      backgroundColor: dockedBackgroundColor,
+    }),
+    [dockedBackgroundColor]
+  );
+
+  const bottomSpacerStyle = React.useMemo(() => {
+    const tabBarHeight = menuVisible ? bottomTabBarHeight : 0;
+    const safeAreaBottomInset = insets.bottom || 0;
+
+    return {
+      height: safeAreaBottomInset + tabBarHeight,
+    };
+  }, [menuVisible, insets.bottom]);
+
+  const contentInfoContent = React.useMemo(
+    () => ({ ...entry, title, summary }),
+    [title, summary, entry]
+  );
 
   return (
-    <AnimationComponent
-      animationType={ComponentAnimationType.componentAppears}
-      style={[
-        styles.container,
-        animatedContainerStyle(
-          isActiveGesture || layoutState.docked,
-          progressBarHeight
-        ),
-        {
-          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
-        },
-      ]}
-    >
-      {!playerState.isLive &&
-      (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
-          style={backgroundImageStyle(
-            dimensions,
-            minimisedHeight,
-            isActiveGesture
-          )}
-        />
-        <TouchableWithoutFeedback onPress={maximazeVideoModal}>
+    <>
+      <View
+        style={[
+          styles.container,
+          containerStyles,
+          playerState.isLive ? styles.liveMarginTop : styles.marginTop,
+        ]}
+      >
+        {!playerState.isLive ? (
+          <ProgressBar
+            name={"shared-docked-layout"}
+            content={entry}
+            value={value}
+            visible
+            layoutState={progressBarLayoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            docked
+          />
+        ) : null}
+
+        <View style={styles.content}>
           <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={imageComponentWrapperStyles}>
+              {ImageComponent || null}
+            </View>
             <View
-              style={[
-                styles.contentInfo,
-                { backgroundColor: dockedBackgroundColor },
-              ]}
+              testID="content-info"
+              style={[styles.contentInfo, backgroundColorStyle]}
             >
-              <ContentInfo
-                content={{ ...entry, title, summary }}
-                value={value}
-                docked
-              />
+              <ContentInfo content={contentInfoContent} value={value} docked />
             </View>
           </View>
-        </TouchableWithoutFeedback>
-        <View
-          style={[
-            isTablet
-              ? styles.controlsContainerForTablet
-              : styles.controlsContainerForMobile,
-            { backgroundColor: dockedBackgroundColor },
-          ]}
-        >
-          <Controls
-            value={value}
-            visible
-            buttons={R.partial(controlButtons, [
-              playerState.isLive && liveButton,
-            ])}
-            style={styles.playPauseButton}
-            playNextData={playNextData}
-            playerState={playerState}
-          />
-          <Button
-            icon={"close_mini"}
-            size={"medium"}
-            value={value}
-            onPress={onCloseVideoModal}
-            style={styles.buttons}
-          />
+          <View
+            style={[
+              isTablet
+                ? styles.controlsContainerForTablet
+                : styles.controlsContainerForMobile,
+              backgroundColorStyle,
+            ]}
+          >
+            <Controls
+              value={value}
+              visible
+              buttons={_controlButtons}
+              style={styles.playPauseButton}
+              playNextData={playNextData}
+              playerState={playerState}
+            />
+            <Button
+              icon={"close_mini"}
+              size={"medium"}
+              value={value}
+              onPress={onCloseVideoModal}
+              style={styles.buttons}
+            />
+          </View>
         </View>
       </View>
-      <View
-        style={{
-          height: insets.bottom + bottomTabBarHeight,
-          backgroundColor: dockedBackgroundColor,
-        }}
-      />
-    </AnimationComponent>
+      <View style={[bottomSpacerStyle, backgroundColorStyle]} />
+    </>
   );
 };

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={[
@@ -161,22 +151,7 @@ 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}
-            imageWidth={imageSize}
-            verticalOffset={verticalOffsetForImage}
-          />
+          <PlayerImage entry={entry} configuration={configuration} />
         </View>
         {/* PlayerImage */}
 
@@ -204,19 +179,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/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,56 +1,24 @@
 import * as React from "react";
-import { LayoutChangeEvent, View } from "react-native";
+import { Animated, 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";
 
 import { styles } from "./styles";
-import { calculateBorderRadius } from "../../utils";
-import { PlayNextData } from "../types";
+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;
-  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;
+  docked?: boolean;
   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 { entry, docked = false, configuration, onLayoutImage = noop } = props;
 
   const isShadowEnabled = toBooleanWithDefaultTrue(
     configuration?.audio_player_artwork_shadow_enabled
@@ -58,55 +26,39 @@ export const PlayerImage = (props: Props) => {
 
   const shouldShowShadow = !docked && isShadowEnabled;
 
-  const borderRadius = calculateBorderRadius(
-    docked,
-    startComponentsAnimation,
-    isActiveGesture,
-    playerAnimationState,
-    configuration
+  const borderRadius = toNumberWithDefaultZero(
+    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 (
-    <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}>
+      {/* Using an Animated.View to apply shadow to the image */}
+      <Animated.View
+        style={[
+          animatedStyle,
+          shouldShowShadow ? styles.shadow : undefined,
+          { borderRadius },
+        ]}
+      />
+      <View
+        onLayout={onLayoutImage}
+        style={[styles.defaultImageWrapperView, { 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>
+        <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({