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

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  useModalAnimationContext,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+import { AnimatedImage } from "./AnimatedImage";
+import { FlexImage } from "./FlexImage";
+
+import { styles } from "./styles";
+import { calculateBorderRadius } from "../../utils";
+import { PlayNextData } from "../types";
+import { LayoutChangeEvent, View } from "react-native";
+
+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,
+  } = props;
+
+  const {
+    isActiveGesture,
+    startComponentsAnimation,
+    playerAnimationState,
+    minimisedHeight,
+  } = useModalAnimationContext();
+
+  const isShadowEnabled =
+    configuration?.audio_player_artwork_shadow_enabled ?? true;
+
+  const shouldShowShadow = !docked && isShadowEnabled;
+
+  const borderRadius = calculateBorderRadius(
+    docked,
+    startComponentsAnimation,
+    isActiveGesture,
+    playerAnimationState,
+    configuration
+  );
+
+  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
+          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}
+            />
+          )}
+        </View>
+      </AnimationComponent>
+    </AnimationComponent>
+  );
+};

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

@@ -0,0 +1,36 @@
+/* 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: {
+    flex: 1,
+    alignItems: "center",
+  },
+
+  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

@@ -0,0 +1,220 @@
+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 { 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
+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",
+    }),
+  },
+  flex: {
+    flex: 1,
+  },
+  audioPlayerContainer: {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: MIN_WIDTH,
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "blue",
+    }),
+  },
+  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 =>
+  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,
+  playerState,
+  value,
+  onPlaybackButtonPress,
+  onRewindButtonPress,
+  onForwardButtonPress,
+  onPlayerSeek,
+  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 } = useSafeAreaInsets();
+  const { height: screenHeight } = useSafeAreaFrame();
+  const isSmallScreen = getIsSmallTabletHeight(screenHeight);
+  const { progressBarHeight } = useModalAnimationContext();
+
+  const onLayoutImage = React.useCallback((e) => {
+    setImageWidth(e.nativeEvent.layout.width);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {/* TransportInfo */}
+      <TransportInfo
+        entry={entry}
+        layoutState={layoutState}
+        value={value}
+        configuration={configuration}
+      />
+
+      {/* TransportInfo */}
+
+      <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}
+              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>
+      </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

@@ -0,0 +1,223 @@
+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 { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { withDebug } from "./debug";
+import { TABLET_PORTRAIT } from "./const";
+
+import { TransportInfo } from "./TransportInfo";
+import { PlayerImage } from "./PlayerImage";
+import { Controls } from "./Controls";
+
+import { useTabletLayoutImageSize } from "./hooks";
+import { DockedControls } from "./DockedControls";
+import { VerticalGutter } from "./VerticalGutter";
+
+import { Props } from "./types";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "magenta",
+    }),
+  },
+
+  flex: {
+    flex: 1,
+  },
+
+  fillContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "red",
+    }),
+  },
+
+  audioPlayerContainer: {
+    flex: 1,
+    maxWidth: TABLET_PORTRAIT.MAX_WIDTH,
+    marginLeft: TABLET_PORTRAIT.MARGIN_HORIZONTAL,
+    marginRight: TABLET_PORTRAIT.MARGIN_HORIZONTAL,
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "blue",
+    }),
+  },
+});
+
+const tabletStyles = ({
+  screenHeight,
+  topInset,
+  bottomInset,
+  topOffset,
+}): ViewStyle => ({
+  alignItems: "center",
+  height: screenHeight - topInset - bottomInset,
+  opacity: topOffset ? 1 : 0, // hide content until topOffset is calculated
+});
+
+const justifyContent = (topOffset: Option<number>) =>
+  topOffset ? "flex-start" : "center";
+
+export function TabletPortraitLayout({
+  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,
+    offsetY: topOffset,
+    onLayout,
+  } = useTabletLayoutImageSize({ isPortraitMode: true });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        tabletStyles({
+          screenHeight,
+          topInset,
+          bottomInset,
+          topOffset,
+        }),
+      ]}
+    >
+      {/* TransportInfo */}
+      <TransportInfo
+        entry={entry}
+        layoutState={layoutState}
+        value={value}
+        configuration={configuration}
+      />
+
+      {/* TransportInfo */}
+
+      {/* PlayerImage */}
+      <View style={styles.fillContainer} pointerEvents="box-none">
+        <View
+          style={[
+            styles.audioPlayerContainer,
+            {
+              justifyContent: justifyContent(topOffset),
+              width: imageSize,
+            },
+          ]}
+        >
+          {topOffset ? <VerticalGutter height={topOffset} /> : null}
+
+          <View
+            style={[
+              styles.flex,
+              {
+                maxHeight: imageSize,
+
+                ...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={
+                toNumberWithDefaultZero(topOffset) - progressBarHeight
+              }
+            />
+          </View>
+
+          <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>
+        </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

@@ -0,0 +1,128 @@
+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";
+
+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%",
+    alignItems: "center",
+    justifyContent: "space-between",
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "yellow",
+    }),
+  },
+});
+
+const applyMarginBottom = ({ isTablet, marginBottom }) =>
+  isTablet ? marginBottom : 0;
+
+type Props = {
+  entry: ZappEntry;
+  layoutState: QuickBrickPlayer.LayoutState;
+  value: GetValue;
+  configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
+  onLayout?: (event: LayoutChangeEvent) => void;
+};
+
+export const TransportInfo = ({
+  entry,
+  layoutState,
+  value,
+  configuration,
+  onLayout = noop,
+}: Props) => {
+  const isTablet = useIsTablet();
+  const safeAreaFrame = useSafeAreaFrame();
+  const languageData = useLanguageData("audio-player");
+
+  const [marginBottom, setMarginBottom] = React.useState(0);
+
+  const handleLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      const height = toPositiveNumberWithDefaultZero(
+        event?.nativeEvent?.layout?.height
+      );
+
+      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);
+    },
+    [onLayout]
+  );
+
+  const actionButtons = React.useMemo(
+    () =>
+      compose(
+        take(2),
+        map(trim),
+        split(","),
+        propOr("", "player_action_buttons")
+      )(configuration),
+    [configuration.player_action_buttons]
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          marginBottom: applyMarginBottom({ isTablet, marginBottom }),
+
+          ...withDebug({
+            borderWidth: 2,
+            borderColor: "red",
+          }),
+        },
+      ]}
+      onLayout={handleLayout}
+    >
+      <AnimationComponent
+        animationType={ComponentAnimationType.componentFade}
+        style={styles.animatedContainer}
+      >
+        <MobileTransportInfo
+          content={entry}
+          value={value}
+          visible
+          languageData={languageData}
+          layoutState={layoutState}
+          actionButtons={actionButtons}
+        />
+      </AnimationComponent>
+    </View>
+  );
+};