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

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,26 @@
+export const PADDING_HORIZONTAL = 15;
+
+export const TABLET_VERTICAL_SEPARATOR_HEIGHT = 32;
+
+export const TABLET_VERTICAL_SEPARATOR_HEIGHT_S = 16;
+
+export const TABLET_LANDSCAPE = {
+  MARGIN_VERTICAL: 80, // gap between safe-area edge and audio-player container
+  MARGIN_VERTICAL_S: 60, // gap between safe-area edge and audio-player container
+  MAX_HEIGHT: 750,
+  MIN_WIDTH: 320, // Minimum width for the audio player container
+};
+
+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,
+};
+
+export const NAVBAR_HEIGHT = 60;

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.
+export const DEBUG = false;
+
+export const withDebug = (style) => {
+  return DEBUG ? style : {};
+};

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

@@ -0,0 +1,5 @@
+export { useTabletLayoutImageSize } from "./useTabletLayoutImageSize";
+
+export { useMobileLayoutImageSize } from "./useMobileLayoutImageSize";
+
+export { useTransportInfoHeight } from "./useTransportInfoHeight";

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

@@ -0,0 +1,14 @@
+import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
+import { MOBILE } from "../const";
+
+type Return = {
+  imageSize: Option<number>;
+};
+
+export const useMobileLayoutImageSize = (): Return => {
+  const { width } = useDimensions("screen");
+
+  return {
+    imageSize: width - 2 * MOBILE.MARGIN_HORIZONTAL,
+  };
+};

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

@@ -0,0 +1,105 @@
+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, debounceTime, filter } from "rxjs/operators";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+
+const TIMEOUT = 200; // ms
+
+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 useTabletLayoutImageSize = ({ 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(debounceTime(TIMEOUT), first())
+      .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$
+      .pipe(
+        filter((layout: Layout) => layout.y > 0),
+        debounceTime(TIMEOUT),
+        first()
+      )
+      .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(0);
+
+  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/Layout/utils.ts

@@ -0,0 +1,7 @@
+/**
+ * Checks whether the screen height is matches with our threshold for small tablets.
+ * @param height screen height
+ * @returns boolean indicating if the height is less than 800 pixels
+ */
+export const isSmallTabletHeight = (height: number): boolean =>
+  !(height >= 800);

package/src/Player/AudioLayer/SleepTimerManager.ts

@@ -0,0 +1,119 @@
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { hasDatePassed, NAMESPACE } from "./utils";
+
+const { log_debug, log_error } = createLogger({
+  subsystem: "Player",
+  category: "SleepTimerManager",
+});
+
+export type SleepTimer = {
+  label: string;
+  // interval in minutes for UI at the moment when timer was first started
+  value: number;
+};
+
+export const SLEEP_TIMER_OFF: SleepTimer = {
+  label: "playback_sleep_off_label",
+  value: 0,
+};
+
+export class SleepTimerState {
+  constructor(
+    public timer: SleepTimer,
+    public timerDate: number
+  ) {}
+}
+
+const SLEEP_PREFERENCE_KEY = "sleep";
+
+export class SleepTimerController {
+  private sleepTimerStateSubject = new BehaviorSubject<SleepTimerState>(
+    new SleepTimerState(SLEEP_TIMER_OFF, 0)
+  );
+
+  constructor(private player: Player) {}
+
+  get sleepTimerState$() {
+    return this.sleepTimerStateSubject.asObservable();
+  }
+
+  private async scheduleSleep(sleepDate): Promise<boolean> {
+    log_debug(`Setting sleep interval to ${sleepDate}`);
+
+    try {
+      this.player.cancelSleepTimer?.();
+      this.player.startSleepTimer?.(sleepDate);
+
+      return true;
+    } catch (e) {
+      log_error("Failed to start sleep timer", { error: e.message });
+
+      return false;
+    }
+  }
+
+  async setSleepTimer(item: SleepTimer) {
+    // User has selected Off state
+    if (item.value === 0) {
+      log_debug("Cancelling sleep timer");
+      this.player.cancelSleepTimer?.();
+
+      return this.onTimerExpired();
+    }
+
+    log_debug(`Starting sleep timer in ${item.value} minutes`);
+
+    const futureSleepDate = Date.now() + item.value * 60000;
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      await localStorage.setItem(
+        SLEEP_PREFERENCE_KEY,
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(item, futureSleepDate)
+      );
+    }
+  }
+
+  async onTimerExpired() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
+  }
+
+  async loadSleep() {
+    const sleep = await localStorage.getItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    if (!sleep) return;
+
+    const { futureSleepDate, ...rest } = sleep;
+
+    if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
+      log_debug("Sleep date has already passed");
+      await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+      return;
+    }
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(rest as SleepTimer, futureSleepDate)
+      );
+    }
+  }
+
+  // Will be called if user closed the player explicitly.
+  // TODO: check if it will be called on Android when we need.
+  //  Probably we will have to handle it on native instead.
+  public static async onPlayerDestroy() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+  }
+}

package/src/Player/AudioLayer/SpeedManager.ts

@@ -0,0 +1,52 @@
+import { BehaviorSubject } from "rxjs";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import { NAMESPACE } from "./utils";
+
+const { log_debug } = createLogger({
+  subsystem: "Player",
+  category: "PlaybackSpeedManager",
+});
+
+export type PlaybackSpeed = {
+  asset: string;
+  value: number;
+};
+
+const SPEED_PREFERENCE_KEY = "speed";
+
+export const DEFAULT_SPEED: PlaybackSpeed = {
+  asset: "speed_1",
+  value: 1.0,
+};
+
+// todo: should not be applied to live streams
+export class SpeedController {
+  private playbackSpeedSubject = new BehaviorSubject<PlaybackSpeed>(
+    DEFAULT_SPEED
+  );
+
+  constructor(private player: Player) {}
+
+  get playbackSpeed$() {
+    return this.playbackSpeedSubject.asObservable();
+  }
+
+  async loadSpeed() {
+    const speed = await localStorage.getItem(SPEED_PREFERENCE_KEY, NAMESPACE);
+
+    // checking for value in case we will pull empty or broken object
+    if (speed && speed.value) {
+      this.playbackSpeedSubject.next(speed);
+      this.player.setPlaybackRate?.(speed.value);
+      log_debug(`Speed loaded: ${speed}`);
+    }
+  }
+
+  async setPlaybackSpeed(speed: PlaybackSpeed) {
+    await localStorage.setItem(SPEED_PREFERENCE_KEY, speed, NAMESPACE);
+    this.playbackSpeedSubject.next(speed);
+    this.player.setPlaybackRate?.(speed.value);
+  }
+}

package/src/Player/AudioLayer/utils.ts

@@ -1,5 +1,10 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import {
+  PlayerAnimationStateEnum,
+  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";
 
@@ -31,3 +36,25 @@ export const formatSpeed = (value: number) => {
   // Return the formatted string with "speed_" prefix
   return `speed_${formattedValue}`;
 };
+
+export const calculateBorderRadius = (
+  docked: boolean,
+  startComponentsAnimation: boolean,
+  isActiveGesture: boolean,
+  playerAnimationState: PlayerAnimationStateT,
+  configuration: Record<string, any>
+): number => {
+  const shouldRemoveBorderRadius =
+    (startComponentsAnimation &&
+      isActiveGesture &&
+      playerAnimationState !== PlayerAnimationStateEnum.maximize) ||
+    docked;
+
+  if (shouldRemoveBorderRadius) {
+    return 0;
+  }
+
+  return toNumberWithDefaultZero(
+    configuration.audio_player_artwork_border_radius
+  );
+};

package/src/Player/Const/sleepTimerOptions.ts

@@ -0,0 +1,39 @@
+import { toDayJSLocaleMap } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+const createTimerOptions = (value) => {
+  let label = "";
+
+  const str = dayjs
+    .duration(value, "minute")
+    .locale(toDayJSLocaleMap(getUILanguage()))
+    .humanize();
+
+  if (value === 60) {
+    /** Skipping prefix "an"/"un"/"una" for 1 hour */
+
+    if (str.includes(" ")) {
+      label = `1 ${str.split(" ")[1]}`; // Combine "1" with second part of the string
+    } else {
+      label = `1 ${str}`; // Use dayjs provided translation
+    }
+  } else {
+    label = str;
+  }
+
+  return {
+    label,
+    value,
+  };
+};
+
+export const getSleepTimerOptions = (configuration) => {
+  return [
+    {
+      label: configuration["playback_sleep_off_label"],
+      value: 0,
+    },
+    ...[5, 10, 15, 30, 45, 60, 120].map(createTimerOptions),
+  ];
+};

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,