@applicaster/quick-brick-player 13.0.0-rc.13 → 13.0.0-rc.131

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,130 @@
+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 {
+  // TODO cancel timer on reach time
+  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, prevTimerSleepDate?: number) {
+    // User has selected Off state
+    if (item.value === 0) {
+      log_debug("Cancelling sleep timer");
+
+      // Removing scheduled pause on timer expiration
+      this.player.cancelSleepTimer?.();
+
+      return this.onTimerExpired();
+    }
+
+    const futureSleepDate =
+      prevTimerSleepDate || Date.now() + item.value * 60000;
+
+    log_debug(
+      `Starting sleep timer in ${(futureSleepDate - Date.now()) / 1000}s`
+    );
+
+    if (await this.scheduleSleep(futureSleepDate)) {
+      await localStorage.setItem(
+        SLEEP_PREFERENCE_KEY,
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+
+      this.sleepTimerStateSubject.next(
+        new SleepTimerState(item, futureSleepDate)
+      );
+    }
+  }
+
+  async onTimerExpired() {
+    this.removeSleepTimerFromLocalStorage().catch((error) => {
+      log_error("Failed to remove sleep timer from local storage", {
+        error: error.message,
+      });
+    });
+
+    // Update UI state
+    this.sleepTimerStateSubject.next(new SleepTimerState(SLEEP_TIMER_OFF, 0));
+  }
+
+  async removeSleepTimerFromLocalStorage() {
+    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+  }
+
+  async loadSleep() {
+    const sleep = await localStorage.getItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+    if (!sleep) return;
+
+    const { futureSleepDate, ...item } = sleep;
+
+    if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
+      log_debug("Sleep date has already passed");
+      await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+
+      return;
+    }
+
+    log_debug("Sleep state restored");
+
+    this.setSleepTimer(item 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/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ModalHeader } from "@applicaster/zapp-react-native-ui-components/Components/ModalComponent/Header";
+import { isNil } from "lodash";
+
+const formatTime = (milliseconds: number) => {
+  const totalSeconds = Math.floor(milliseconds / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (milliseconds < 3600000) {
+    return `${minutes.toString().padStart(2, "0")}:${seconds
+      .toString()
+      .padStart(2, "0")}`;
+  }
+
+  return `${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export const SleepTimerModalHeader = ({
+  summary,
+  ...props
+}: {
+  summary?: string;
+}) => {
+  const sleepTimerDate = +summary;
+
+  const [timeLeft, setTimeLeft] = React.useState(
+    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
+  );
+
+  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
+
+  React.useLayoutEffect(() => {
+    if (showCounter && sleepTimerDate !== 0) {
+      setTimeLeft(sleepTimerDate - Date.now());
+
+      const intervalId = setInterval(() => {
+        setTimeLeft(() => {
+          const newTimeLeft = sleepTimerDate - Date.now();
+
+          if (newTimeLeft <= 0) {
+            clearInterval(intervalId);
+
+            return 0;
+          } else {
+            return newTimeLeft;
+          }
+        });
+      }, 1000);
+
+      return () => clearInterval(intervalId);
+    } else {
+      setTimeLeft(0);
+    }
+  }, [sleepTimerDate, showCounter]);
+
+  return (
+    <ModalHeader
+      summary={!isNil(summary) ? formatTime(timeLeft) : summary}
+      {...(props as any)}
+    />
+  );
+};

package/src/Player/AudioLayer/components/SleepTimerModalHeader/index.ts

@@ -0,0 +1 @@
+export * from "./SleepTimerModalHeader";

package/src/Player/AudioLayer/useSleepTimerModal.ts

@@ -0,0 +1,109 @@
+import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  SLEEP_TIMER_OFF,
+  SleepTimerController,
+  SleepTimerState,
+} from "./SleepTimerManager";
+
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+
+import { SleepTimerModalHeader } from "./components/SleepTimerModalHeader";
+import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
+import {
+  getBottomSheetModalLabelProps,
+  getBottomSheetModalIconProps,
+  getBottomSheetModalItemProps,
+  getBottomSheetModalSelectedItemIcon,
+  selectSleepTitle,
+  selectSleepOffLabel,
+} from "../Utils";
+
+export const useSleepTimerModal = (player, configuration) => {
+  const playerState = usePlayerState("audio-player-sleep-timer-modal");
+
+  const title = configuration(selectSleepTitle);
+  const offLabel = configuration(selectSleepOffLabel);
+
+  const [sleepTimerManager, setSleepTimerManager] =
+    useState<SleepTimerController | null>(null);
+
+  const [sleepTimerState, setSleepTimerState] = useState<SleepTimerState>(
+    new SleepTimerState(SLEEP_TIMER_OFF, 0)
+  );
+
+  useEffect(() => {
+    if (player) {
+      setSleepTimerManager(new SleepTimerController(player));
+    } else {
+      setSleepTimerManager(null);
+    }
+  }, [player]);
+
+  useEffect(() => {
+    if (playerState?.isLive) {
+      // Resetting a sleep timer when audio content is live (Timer not supported on live video)
+      sleepTimerManager.setSleepTimer(SLEEP_TIMER_OFF).catch();
+    }
+  }, [playerState?.isLive]);
+
+  useEffect(() => {
+    if (!playerState.isReadyToPlay) {
+      return;
+    }
+
+    void sleepTimerManager?.loadSleep();
+  }, [playerState.isReadyToPlay, sleepTimerManager]);
+
+  useEffect(() => {
+    const sleepSubscription =
+      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
+
+    return () => {
+      sleepSubscription?.unsubscribe();
+    };
+  }, [sleepTimerManager]);
+
+  const onSleepSelect = useCallback(
+    async (item) => {
+      await sleepTimerManager?.setSleepTimer(item);
+    },
+    [sleepTimerManager]
+  );
+
+  const onSleepButtonPress = useCallback(() => {
+    const timerDate = sleepTimerState.timerDate;
+
+    const timerRemaining =
+      timerDate !== 0 && +timerDate > Date.now() ? timerDate : null;
+
+    openBottomSheetModal({
+      modalBottomSheetContentProps: {
+        headerComponent: SleepTimerModalHeader,
+        items: getSleepTimerOptions(offLabel, timerRemaining),
+        onPress: onSleepSelect,
+        title,
+        summary: timerRemaining,
+        itemProps: getBottomSheetModalItemProps,
+        iconProps: getBottomSheetModalIconProps,
+        labelProps: getBottomSheetModalLabelProps,
+        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
+      },
+      options: {
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
+      },
+    });
+  }, [sleepTimerState.timerDate, sleepTimerState.timer, title, onSleepSelect]);
+
+  return useMemo(
+    () => ({
+      onSleepButtonPress,
+      sleepTimerState,
+    }),
+    [onSleepButtonPress, sleepTimerState]
+  );
+};

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,41 @@
+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 = (offLabel, sleepTimerValue) => {
+  return [
+    sleepTimerValue
+      ? {
+          label: offLabel,
+          value: 0,
+        }
+      : null,
+    ...[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,
+}));