@applicaster/quick-brick-player 13.0.0-rc.93 → 13.0.0-rc.95

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/utils.ts

@@ -4,6 +4,7 @@ import {
   PlayerAnimationStateT,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 export const NAMESPACE = "audio-player";
 
@@ -37,11 +38,11 @@ export const formatSpeed = (value: number) => {
 };
 
 export const calculateBorderRadius = (
-  isTablet: boolean,
   docked: boolean,
   startComponentsAnimation: boolean,
   isActiveGesture: boolean,
-  playerAnimationState: PlayerAnimationStateT
+  playerAnimationState: PlayerAnimationStateT,
+  configuration: Record<string, any>
 ): number => {
   const shouldRemoveBorderRadius =
     (startComponentsAnimation &&
@@ -53,5 +54,7 @@ export const calculateBorderRadius = (
     return 0;
   }
 
-  return isTablet ? 24 : 10;
+  return toNumberWithDefaultZero(
+    configuration.audio_player_artwork_border_radius
+  );
 };

package/src/Player/Const/sleepTimerOptions.ts

@@ -0,0 +1,10 @@
+export const sleepTimerOptions = [
+  // { label: "End of episode", value: "episode" },
+  { label: "5 minutes", value: 5 },
+  { label: "10 minutes", value: 10 },
+  { label: "15 minutes", value: 15 },
+  { label: "30 minutes", value: 30 },
+  { label: "45 minutes", value: 45 },
+  { label: "1 hour", value: 60 },
+  { label: "2 hours", value: 120 },
+];

package/src/Player/Const/speedOptions.ts

@@ -0,0 +1,4 @@
+export const speedOptions = [0.8, 1, 1.2, 1.5, 2].map((v) => ({
+  label: v + "x",
+  value: v,
+}));

package/src/Player/Utils/Utils.ts

@@ -1,11 +1,6 @@
 import queryString from "query-string";
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
-export const getLiveUrl = (url: string) => {
-  // Use the replace method with a regular expression to replace all instances of subClass with livePage
-  return url.replace(new RegExp("subClass", "g"), "livePage");
-};
-
 export const addQueryParam = (
   baseUrl: string,
   paramName: string,

package/src/Player/Utils/index.tsx

@@ -1 +1,118 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 export * from "./Utils";
+
+export const getBottomSheetModalIconProps = (theme) => ({
+  height: theme["audio_modal_bottom_sheet_item_icon_height"],
+  width: theme["audio_modal_bottom_sheet_item_icon_width"],
+  marginBottom: theme["audio_modal_bottom_sheet_item_icon_margin_bottom"],
+  marginLeft: theme["audio_modal_bottom_sheet_item_icon_margin_left"],
+  marginRight: theme["audio_modal_bottom_sheet_item_icon_margin_right"],
+  marginTop: theme["audio_modal_bottom_sheet_item_icon_margin_top"],
+  flavour: theme["modal_bottom_sheet_item_icon_flavour"],
+});
+
+export const getBottomSheetModalLabelProps = (theme, width: number) => {
+  const {
+    audio_modal_bottom_sheet_item_label_android_letter_spacing,
+    audio_modal_bottom_sheet_item_label_ios_letter_spacing,
+    audio_modal_bottom_sheet_item_label_family_ios_font_selector,
+    audio_modal_bottom_sheet_item_label_family_android_font_selector,
+    audio_modal_bottom_sheet_item_label_focus_font_color,
+    audio_modal_bottom_sheet_item_label_font_color,
+    audio_modal_bottom_sheet_item_label_selected_font_color,
+    audio_modal_bottom_sheet_item_label_hover_selected_font_color,
+    audio_modal_bottom_sheet_item_label_font_size,
+    audio_modal_bottom_sheet_item_label_line_height,
+    audio_modal_bottom_sheet_item_label_margin_bottom,
+    audio_modal_bottom_sheet_item_label_margin_top,
+    audio_modal_bottom_sheet_item_label_margin_left,
+    audio_modal_bottom_sheet_item_label_margin_right,
+    audio_modal_bottom_sheet_item_label_transform,
+    audio_modal_bottom_sheet_item_icon_width,
+    audio_modal_bottom_sheet_item_icon_margin_left,
+    audio_modal_bottom_sheet_item_icon_margin_right,
+    audio_modal_bottom_sheet_item_margin_left,
+    audio_modal_bottom_sheet_item_margin_right,
+    audio_modal_bottom_sheet_item_padding_left,
+    audio_modal_bottom_sheet_item_padding_right,
+  } = theme;
+
+  const maxWidth =
+    width -
+    (audio_modal_bottom_sheet_item_icon_width +
+      audio_modal_bottom_sheet_item_icon_margin_left +
+      audio_modal_bottom_sheet_item_icon_margin_right +
+      audio_modal_bottom_sheet_item_margin_left +
+      audio_modal_bottom_sheet_item_margin_right +
+      audio_modal_bottom_sheet_item_padding_left +
+      audio_modal_bottom_sheet_item_padding_right);
+
+  return {
+    fontFamily: platformSelect({
+      ios: audio_modal_bottom_sheet_item_label_family_ios_font_selector,
+      android: audio_modal_bottom_sheet_item_label_family_android_font_selector,
+    }),
+    letterSpacing: platformSelect({
+      ios: audio_modal_bottom_sheet_item_label_ios_letter_spacing,
+      android: audio_modal_bottom_sheet_item_label_android_letter_spacing,
+    }),
+    fontSize: audio_modal_bottom_sheet_item_label_font_size,
+    color: audio_modal_bottom_sheet_item_label_font_color,
+    focusColor: audio_modal_bottom_sheet_item_label_focus_font_color,
+    hoverSelectedColor:
+      audio_modal_bottom_sheet_item_label_hover_selected_font_color,
+    selectedColor: audio_modal_bottom_sheet_item_label_selected_font_color,
+    lineHeight: audio_modal_bottom_sheet_item_label_line_height,
+    marginBottom: audio_modal_bottom_sheet_item_label_margin_bottom,
+    marginTop: audio_modal_bottom_sheet_item_label_margin_top,
+    marginLeft: audio_modal_bottom_sheet_item_label_margin_left,
+    marginRight: audio_modal_bottom_sheet_item_label_margin_right,
+    transform: audio_modal_bottom_sheet_item_label_transform,
+    maxWidth,
+  };
+};
+
+export const getBottomSheetModalItemProps = (theme, width: number) => {
+  const {
+    audio_modal_bottom_sheet_item_background_color,
+    audio_modal_bottom_sheet_item_focus_background_color,
+    audio_modal_bottom_sheet_item_selected_background_color,
+    audio_modal_bottom_sheet_item_focused_selected_background_color,
+    audio_modal_bottom_sheet_item_corner_radius,
+    audio_modal_bottom_sheet_item_margin_bottom,
+    audio_modal_bottom_sheet_item_margin_left,
+    audio_modal_bottom_sheet_item_margin_right,
+    audio_modal_bottom_sheet_item_margin_top,
+    audio_modal_bottom_sheet_item_padding_bottom,
+    audio_modal_bottom_sheet_item_padding_left,
+    audio_modal_bottom_sheet_item_padding_right,
+    audio_modal_bottom_sheet_item_padding_top,
+  } = theme;
+
+  return {
+    backgroundColor: audio_modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor:
+      audio_modal_bottom_sheet_item_focus_background_color,
+    selectedBackgroundColor:
+      audio_modal_bottom_sheet_item_selected_background_color,
+    focusedSelectedBackgroundColor:
+      audio_modal_bottom_sheet_item_focused_selected_background_color,
+    borderRadius: audio_modal_bottom_sheet_item_corner_radius,
+    marginBottom: audio_modal_bottom_sheet_item_margin_bottom,
+    marginTop: audio_modal_bottom_sheet_item_margin_top,
+    marginLeft: audio_modal_bottom_sheet_item_margin_left,
+    marginRight: audio_modal_bottom_sheet_item_margin_right,
+    paddingTop: audio_modal_bottom_sheet_item_padding_top,
+    paddingBottom: audio_modal_bottom_sheet_item_padding_bottom,
+    paddingRight: audio_modal_bottom_sheet_item_padding_right,
+    paddingLeft: audio_modal_bottom_sheet_item_padding_left,
+    maxWidth: width,
+  };
+};
+
+export const getBottomSheetModalSelectedItemIcon = (theme) =>
+  theme["audio_modal_bottom_sheet_item_selected_icon"] || null;
+
+export const getBottomSheetModalDefaultItemIcon = (theme) =>
+  theme["audio_modal_bottom_sheet_item_default_icon"] || null;