@applicaster/quick-brick-player 13.0.0-alpha.5033140607 → 13.0.0-alpha.5049772260

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

@@ -0,0 +1,224 @@
+import * as React from "react";
+import { View, ViewStyle, StyleSheet } from "react-native";
+import {
+  useSafeAreaInsets,
+  useSafeAreaFrame,
+} 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 { useImageSize } 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,
+
+    ...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,
+  } = useImageSize({ 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}
+        configuration={configuration}
+        dimensions={dimensions}
+        onCloseVideoModal={onCloseVideoModal}
+        onPlayerSeek={onPlayerSeek}
+        playNextData={playNextData}
+        title={title}
+        summary={summary}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { compose, take, map, split, propOr, trim } from "ramda";
+import { StyleSheet, View, LayoutChangeEvent } 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 { TABLET_LANDSCAPE } from "../const";
+import { withDebug } from "../debug";
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+});
+
+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 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, TABLET_LANDSCAPE.MARGIN_VERTICAL);
+      setMarginBottom(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={{
+        marginBottom: applyMarginBottom({ isTablet, marginBottom }),
+
+        ...withDebug({
+          borderWidth: 2,
+          borderColor: "red",
+        }),
+      }}
+      onLayout={handleLayout}
+    >
+      <AnimationComponent
+        animationType={ComponentAnimationType.componentFade}
+        style={styles.container}
+      >
+        <MobileTransportInfo
+          content={entry}
+          value={value}
+          visible
+          languageData={languageData}
+          layoutState={layoutState}
+          actionButtons={actionButtons}
+        />
+      </AnimationComponent>
+    </View>
+  );
+};

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View } from "react-native";
+
+import { withDebug } from "../debug";
+
+export const VerticalGutter = ({ height }: { height: number }) => (
+  <View style={{ height, ...withDebug({ backgroundColor: "red" }) }} />
+);

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

@@ -0,0 +1,20 @@
+export const PADDING_HORIZONTAL = 15;
+
+export const TABLET_VERTICAL_SEPARATOR_HEIGHT = 32;
+
+export const TABLET_LANDSCAPE = {
+  MARGIN_VERTICAL: 80, // gap between safe-area edge and audio-player container
+  MAX_HEIGHT: 750,
+};
+
+export const TABLET_PORTRAIT = {
+  MARGIN_HORIZONTAL: 180,
+  MAX_WIDTH: 550,
+};
+
+export const MOBILE = {
+  MARGIN_HORIZONTAL: 30,
+  MARGIN_BOTTOM: 48,
+  MARGIN_TOP: 10,
+  MIN_HEIGHT: 458,
+};

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

@@ -0,0 +1,6 @@
+// use this variable to activate borders on AudioPlayer. It will help you to fix layout if needed.
+const DEBUG = false;
+
+export const withDebug = (style) => {
+  return DEBUG ? style : {};
+};

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

@@ -0,0 +1,3 @@
+export { useImageSize } from "./useImageSize";
+
+export { useTransportInfoHeight } from "./useTransportInfoHeight";

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

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { LayoutChangeEvent } from "react-native";
+
+import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { Subject } from "rxjs";
+import { take, last } from "rxjs/operators";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+
+type Layout = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+const builder = () => {
+  const layoutChange$ = new Subject<Layout>();
+
+  const emitLayoutChange = (layout: Layout): void => {
+    layoutChange$.next(layout);
+  };
+
+  return {
+    emitLayoutChange,
+    layoutChange$,
+  };
+};
+
+type Props = {
+  isPortraitMode: boolean;
+};
+
+type Return = {
+  imageSize: Option<number>;
+  offsetY: Option<number>;
+  onLayout: (event: LayoutChangeEvent) => void;
+};
+
+export const useImageSize = ({ isPortraitMode }: Props): Return => {
+  const [imageSize, setImageSize] = React.useState(undefined);
+  const [offsetY, setOffsetY] = React.useState(undefined);
+
+  const layoutRef = useRefWithInitialValue<ReturnType<typeof builder>>(builder);
+
+  React.useEffect(() => {
+    const subscription = layoutRef.current.layoutChange$
+      // for landscape layout we need to wait the second layout change in order to get proper size of image
+      .pipe(take(isPortraitMode ? 1 : 2), last())
+      .subscribe({
+        next: (layout: Layout) => {
+          const size = isPortraitMode
+            ? Math.min(layout.height, layout.width)
+            : layout.height;
+
+          setImageSize(size);
+        },
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [isPortraitMode]);
+
+  React.useEffect(() => {
+    const subscription = layoutRef.current.layoutChange$
+      // wait the second layout change in order to get proper offsetY
+      .pipe(take(2), last())
+      .subscribe({
+        next: (layout: Layout) => {
+          setOffsetY(layout.y);
+        },
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  const handleLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const height = toNumber(event?.nativeEvent?.layout?.height);
+    const width = toNumber(event?.nativeEvent?.layout?.width);
+    const y = toNumber(event?.nativeEvent?.layout?.y);
+    const x = toNumber(event?.nativeEvent?.layout?.x);
+
+    const layout: Layout = {
+      x,
+      y,
+      width,
+      height,
+    };
+
+    layoutRef.current.emitLayoutChange(layout);
+  }, []);
+
+  return {
+    imageSize,
+    offsetY,
+    onLayout: handleLayout,
+  };
+};

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { LayoutChangeEvent } from "react-native";
+import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { Subject } from "rxjs";
+import { first } from "rxjs/operators";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+
+const builder = () => {
+  const layoutChange$ = new Subject<number>();
+
+  const emitLayoutChange = (height: number): void => {
+    layoutChange$.next(height);
+  };
+
+  return {
+    emitLayoutChange,
+    layoutChange$,
+  };
+};
+
+export const useTransportInfoHeight = () => {
+  const [height, setHeight] = React.useState(undefined);
+
+  const layoutRef = useRefWithInitialValue<ReturnType<typeof builder>>(builder);
+
+  React.useEffect(() => {
+    const subscription = layoutRef.current.layoutChange$
+      // skip first layout and take the second with proper size
+      // then ignore any layout update
+      .pipe(first())
+      .subscribe({
+        next: (size: number) => {
+          setHeight(size);
+        },
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  const handleLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const height = toNumber(event?.nativeEvent?.layout?.height);
+
+    if (height) {
+      layoutRef.current.emitLayoutChange(height);
+    }
+  }, []);
+
+  return {
+    height,
+    onLayout: handleLayout,
+  };
+};

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

@@ -1,52 +1,25 @@
-import React from "react";
-import DefaultLayout from "./DefaultLayout";
-import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import * as React from "react";
 
-type Dimensions = {
-  width: number;
-  height: number;
-};
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 
-type LayoutProps = {
-  entry: ZappEntry;
-  layoutState: {
-    inline: boolean;
-    docked: boolean;
-    isModal: boolean;
-  };
-  playerState: {
-    currentTime: number;
-    duration: number;
-    seekableDuration: number;
-    isLive: boolean;
-    isPaused: boolean;
-    isBuffering: boolean;
-  };
-  value: GetValue;
-  sleepTimerDate: number;
-  playbackSpeedName: string;
-  playbackSleepName: string;
-  configuration: { [key: string]: any };
-  onPlaybackButtonPress: () => void;
-  onRewindButtonPress: () => void;
-  onForwardButtonPress: () => void;
-  onSpeedButtonPress: () => void;
-  onSleepButtonPress: () => void;
-  onCloseVideoModal: () => void;
-  cancelSleepTimer: () => void;
-  onPlayerSeek: (targetTime: number) => void;
-  onSkipStart: () => void;
-  onSkipLive: () => void;
-  maximiseVideoModal: () => void;
-  dimensions: Dimensions;
-  defaultDimensions: Dimensions;
-  playNextData: PlayNextData;
-  title: string | number;
-  summary: string | number;
-};
+import { TabletPortraitLayout } from "./TabletPortraitLayout";
+import { TabletLandscapeLayout } from "./TabletLandscapeLayout";
+import { MobileLayout } from "./MobileLayout";
 
-export default function Layout(
-  props: LayoutProps
-): React.ReactElement<LayoutProps> {
-  return <DefaultLayout {...props} />;
+import { Props } from "./types";
+
+export default function Layout(props: Props) {
+  const isTablet = useIsTablet();
+  const isTabletLandscape = useIsTabletLandscape();
+
+  if (!isTablet) {
+    return <MobileLayout {...props} />;
+  }
+
+  if (isTabletLandscape) {
+    return <TabletLandscapeLayout {...props} />;
+  }
+
+  return <TabletPortraitLayout {...props} />;
 }

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

@@ -0,0 +1,7 @@
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+
+export type Props = QuickBrickPlayer.AudioPlayerProps & {
+  playNextData: PlayNextData;
+};
+
+export { PlayNextData };

package/src/Player/AudioLayer/MagicBG/index.tsx

@@ -47,7 +47,7 @@ const fetchPaletteAndDominantColor = async (imageUrl: string) => {
   const dominant = await getDominantColor(imageUrl);
   const dominantColor = `rgb(${dominant.r}, ${dominant.g}, ${dominant.b})`;
 
-  return { gradientColors: colors.slice(0, 2), dominantColor };
+  return { gradientColors: colors.slice(0, 2).reverse(), dominantColor };
 };
 
 export const MagicBG: React.FC<MagicBGProps> = ({