@applicaster/quick-brick-player 13.0.0-rc.98 → 13.0.0

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { compose, take, map, split, propOr, trim } from "ramda";
-import { StyleSheet, View, LayoutChangeEvent } from "react-native";
+import { compose, map, propOr, split, take, trim } from "ramda";
+import { LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import { TransportInfo as MobileTransportInfo } from "@applicaster/quick-brick-mobile-transport-controls";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
@@ -12,14 +12,26 @@ import {
 import { toPositiveNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-import { TABLET_LANDSCAPE } from "../const";
+import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
 
 const styles = StyleSheet.create({
   container: {
+    height: NAVBAR_HEIGHT,
+    justifyContent: "center",
+    marginHorizontal: 10,
+  },
+  animatedContainer: {
     width: "100%",
     alignItems: "center",
     justifyContent: "space-between",
+
+    ...withDebug({
+      borderWidth: 2,
+      borderColor: "yellow",
+    }),
   },
 });
 
@@ -42,6 +54,7 @@ export const TransportInfo = ({
   onLayout = noop,
 }: Props) => {
   const isTablet = useIsTablet();
+  const safeAreaFrame = useSafeAreaFrame();
   const languageData = useLanguageData("audio-player");
 
   const [marginBottom, setMarginBottom] = React.useState(0);
@@ -52,8 +65,18 @@ export const TransportInfo = ({
         event?.nativeEvent?.layout?.height
       );
 
-      const minHeight = Math.min(height, TABLET_LANDSCAPE.MARGIN_VERTICAL);
-      setMarginBottom(TABLET_LANDSCAPE.MARGIN_VERTICAL - minHeight);
+      const minHeight = Math.min(
+        height,
+        isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL
+      );
+
+      setMarginBottom(
+        (isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL) - minHeight
+      );
 
       // pass layoutChangeEvent to upper level
       onLayout(event);
@@ -74,19 +97,22 @@ export const TransportInfo = ({
 
   return (
     <View
-      style={{
-        marginBottom: applyMarginBottom({ isTablet, marginBottom }),
+      style={[
+        styles.container,
+        {
+          marginBottom: applyMarginBottom({ isTablet, marginBottom }),
 
-        ...withDebug({
-          borderWidth: 2,
-          borderColor: "red",
-        }),
-      }}
+          ...withDebug({
+            borderWidth: 2,
+            borderColor: "red",
+          }),
+        },
+      ]}
       onLayout={handleLayout}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.componentFade}
-        style={styles.container}
+        style={styles.animatedContainer}
       >
         <MobileTransportInfo
           content={entry}

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

@@ -2,9 +2,13 @@ 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 = {
@@ -18,3 +22,5 @@ export const MOBILE = {
   MARGIN_TOP: 10,
   MIN_HEIGHT: 458,
 };
+
+export const NAVBAR_HEIGHT = 60;

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

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

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

@@ -1,3 +1,5 @@
-export { useImageSize } from "./useImageSize";
+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/{useImageSize.ts → useTabletLayoutImageSize.ts}

@@ -3,9 +3,11 @@ 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 { 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;
@@ -36,7 +38,7 @@ type Return = {
   onLayout: (event: LayoutChangeEvent) => void;
 };
 
-export const useImageSize = ({ isPortraitMode }: Props): Return => {
+export const useTabletLayoutImageSize = ({ isPortraitMode }: Props): Return => {
   const [imageSize, setImageSize] = React.useState(undefined);
   const [offsetY, setOffsetY] = React.useState(undefined);
 
@@ -45,7 +47,7 @@ export const useImageSize = ({ isPortraitMode }: Props): Return => {
   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())
+      .pipe(debounceTime(TIMEOUT), first())
       .subscribe({
         next: (layout: Layout) => {
           const size = isPortraitMode
@@ -63,8 +65,11 @@ export const useImageSize = ({ isPortraitMode }: Props): Return => {
 
   React.useEffect(() => {
     const subscription = layoutRef.current.layoutChange$
-      // wait the second layout change in order to get proper offsetY
-      .pipe(take(2), last())
+      .pipe(
+        filter((layout: Layout) => layout.y > 0),
+        debounceTime(TIMEOUT),
+        first()
+      )
       .subscribe({
         next: (layout: Layout) => {
           setOffsetY(layout.y);

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

@@ -19,7 +19,7 @@ const builder = () => {
 };
 
 export const useTransportInfoHeight = () => {
-  const [height, setHeight] = React.useState(undefined);
+  const [height, setHeight] = React.useState(0);
 
   const layoutRef = useRefWithInitialValue<ReturnType<typeof builder>>(builder);
 

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

@@ -30,6 +30,7 @@ export class SleepTimerState {
 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)
   );
@@ -55,18 +56,23 @@ export class SleepTimerController {
     }
   }
 
-  async setSleepTimer(item: SleepTimer) {
+  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();
     }
 
-    log_debug(`Starting sleep timer in ${item.value} minutes`);
+    const futureSleepDate =
+      prevTimerSleepDate || Date.now() + item.value * 60000;
 
-    const futureSleepDate = Date.now() + item.value * 60000;
+    log_debug(
+      `Starting sleep timer in ${(futureSleepDate - Date.now()) / 1000}s`
+    );
 
     if (await this.scheduleSleep(futureSleepDate)) {
       await localStorage.setItem(
@@ -82,17 +88,26 @@ export class SleepTimerController {
   }
 
   async onTimerExpired() {
-    await localStorage.removeItem(SLEEP_PREFERENCE_KEY, NAMESPACE);
+    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, ...rest } = sleep;
+    const { futureSleepDate, ...item } = sleep;
 
     if (!futureSleepDate || hasDatePassed(futureSleepDate)) {
       log_debug("Sleep date has already passed");
@@ -101,13 +116,9 @@ export class SleepTimerController {
       return;
     }
 
-    if (await this.scheduleSleep(futureSleepDate)) {
-      log_debug(`Sleep state restored, will go to sleep at ${futureSleepDate}`);
+    log_debug("Sleep state restored");
 
-      this.sleepTimerStateSubject.next(
-        new SleepTimerState(rest as SleepTimer, futureSleepDate)
-      );
-    }
+    this.setSleepTimer(item as SleepTimer, futureSleepDate);
   }
 
   // Will be called if user closed the player explicitly.

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/Const/sleepTimerOptions.ts

@@ -28,12 +28,14 @@ const createTimerOptions = (value) => {
   };
 };
 
-export const getSleepTimerOptions = (configuration) => {
+export const getSleepTimerOptions = (offLabel, sleepTimerValue) => {
   return [
-    {
-      label: configuration["playback_sleep_off_label"],
-      value: 0,
-    },
+    sleepTimerValue
+      ? {
+          label: offLabel,
+          value: 0,
+        }
+      : null,
     ...[5, 10, 15, 30, 45, 60, 120].map(createTimerOptions),
   ];
 };

package/src/Player/Utils/index.tsx

@@ -116,3 +116,9 @@ export const getBottomSheetModalSelectedItemIcon = (theme) =>
 
 export const getBottomSheetModalDefaultItemIcon = (theme) =>
   theme["audio_modal_bottom_sheet_item_default_icon"] || null;
+
+export const selectSleepTitle = (configuration) =>
+  configuration.playback_sleep_title;
+
+export const selectSleepOffLabel = (configuration) =>
+  configuration.playback_sleep_off_label;

package/src/Player/hooks/useIsCasting.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
+
+const fakeEntry: any = {
+  title: "Chromecast use is casting fake entry",
+  id: "quick-brick-use-is-casting-fake-entry",
+};
+
+/**
+ * Returns the cast action state connection status, does not update when app is in background on Apple platforms
+ * On other platforms, it continues to check the cast action state even when the app is in background
+ */
+export const useIsCasting = () => {
+  const actionContext = useActions(CHROMECAST_IDENTIFIER);
+  const appState = useAppState();
+  const isAppInForeground = appState === "active";
+  const shouldOnlyUpdateInForeground = isApplePlatform();
+
+  const [castActionState, setCastActionState] = React.useState(
+    !actionContext ? null : actionContext.initialEntryState(fakeEntry)
+  );
+
+  React.useEffect(() => {
+    if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+      if (actionContext && castActionState === null) {
+        setCastActionState(actionContext.initialEntryState(fakeEntry));
+      }
+    }
+  }, [
+    actionContext,
+    setCastActionState,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  React.useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext?.addListener(String(fakeEntry.id), (state) => {
+        // Only check foreground state on Apple platforms
+        if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+          setCastActionState(state);
+        }
+      });
+    }
+  }, [
+    setCastActionState,
+    actionContext,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  return !!castActionState?.connected;
+};