@applicaster/quick-brick-player 13.0.0-rc.14 → 13.0.0-rc.140

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

@@ -0,0 +1,222 @@
+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,
+  onCloseVideoModal,
+  playbackSpeedName,
+  configuration,
+  dimensions,
+  playNextData,
+  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}
+            playbackSpeedName={playbackSpeedName}
+            onPlaybackButtonPress={onPlaybackButtonPress}
+            onRewindButtonPress={onRewindButtonPress}
+            onForwardButtonPress={onForwardButtonPress}
+            onPlayerSeek={onPlayerSeek}
+            onSkipStart={onSkipStart}
+            onSkipLive={onSkipLive}
+            onSpeedButtonPress={onSpeedButtonPress}
+            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,83 @@
+import React, { PropsWithChildren } from "react";
+import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
+
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+  DURATION_TO_MINIMIZE,
+  DURATION_TO_MAXIMIZE,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+
+import { useChangePlayerState, useBackgroundImage } from "./hooks";
+
+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;
+  docked: boolean;
+}>;
+
+export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
+  const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
+
+  const source = useBackgroundImage({ entry });
+
+  const { minimisedHeight } = useModalAnimationContext();
+
+  const changePlayerState$ = useChangePlayerState({ docked });
+
+  React.useEffect(() => {
+    const subscription = changePlayerState$.subscribe({
+      next: (nextPlayerState: PlayerAnimationStateT) => {
+        if (nextPlayerState === PlayerAnimationStateEnum.minimize) {
+          Animated.timing(heightAnim, {
+            toValue: minimisedHeight,
+            duration: DURATION_TO_MINIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.maximize) {
+          Animated.timing(heightAnim, {
+            toValue: imageWidth,
+            duration: DURATION_TO_MAXIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
+          // minimize image immediatly
+          heightAnim.setValue(minimisedHeight);
+        }
+      },
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [changePlayerState$, minimisedHeight, 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,17 @@
+import * as React from "react";
+import { Image, ImageStyle } from "react-native";
+
+import { useBackgroundImage } from "./hooks";
+
+type Props = {
+  entry: ZappEntry;
+  style?: ImageStyle;
+};
+
+export const FlexImage = ({ entry, style }: Props) => {
+  const source = useBackgroundImage({ entry });
+
+  if (!source) return null;
+
+  return <Image resizeMode="cover" style={style} source={source} />;
+};

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

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

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { useZStore } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { getBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+
+const audioPlayerImageKeySelector = (config) => config?.audio_player_image_key;
+
+const audioPlayerBackgroundImageSelector = (config) =>
+  config?.audio_player_background_image;
+
+type Props = {
+  entry: ZappEntry;
+};
+
+type Return = {
+  uri: string;
+};
+
+export const useBackgroundImage = ({ entry }: Props): Return => {
+  const configuration = useZStore("playerConfiguration");
+
+  const audio_player_image_key = configuration(audioPlayerImageKeySelector);
+
+  const audio_player_background_image = configuration(
+    audioPlayerBackgroundImageSelector
+  );
+
+  const pluginConfiguration = React.useMemo(
+    () => ({
+      audio_player_image_key,
+      audio_player_background_image,
+    }),
+    [audio_player_image_key, audio_player_background_image]
+  );
+
+  const source = React.useMemo(
+    () => ({
+      uri: getBackgroundImage({
+        entry,
+        plugin_configuration: pluginConfiguration,
+      }),
+    }),
+    [entry, pluginConfiguration]
+  );
+
+  return source;
+};

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

@@ -0,0 +1,112 @@
+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";
+
+import { styles } from "./styles";
+import { calculateBorderRadius } from "../../utils";
+import { PlayNextData } from "../types";
+
+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 = noop,
+  } = props;
+
+  const {
+    isActiveGesture,
+    startComponentsAnimation,
+    playerAnimationState,
+    minimisedHeight,
+  } = useModalAnimationContext();
+
+  const isShadowEnabled = toBooleanWithDefaultTrue(
+    configuration?.audio_player_artwork_shadow_enabled
+  );
+
+  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}
+              docked={docked}
+            />
+          )}
+        </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,
+  },
+});