@applicaster/quick-brick-player 13.0.0-rc.123 → 13.0.0-rc.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.123",
+  "version": "13.0.0-rc.124",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.120",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.124",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.123",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.123",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.123",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.124",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.124",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.124",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -37,18 +37,13 @@ import {
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/const";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
-import {
-  SLEEP_TIMER_OFF,
-  SleepTimerController,
-  SleepTimerState,
-} from "./SleepTimerManager";
+
 import { DEFAULT_SPEED, PlaybackSpeed, SpeedController } from "./SpeedManager";
 import {
   dismissModal as dismissBottomSheetModal,
   openBottomSheetModal,
   useModalStoreState,
 } from "@applicaster/zapp-react-native-utils/modalState";
-import { getSleepTimerOptions } from "../Const/sleepTimerOptions";
 import { speedOptions } from "../Const/speedOptions";
 
 const { log_debug } = createLogger({
@@ -128,19 +123,14 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     configuration?.audio_live_player_update_interval
   );
 
-  const [sleepTimerManager, setSleepTimerManager] =
-    useState<SleepTimerController | null>(null);
-
   const [speedManager, setSpeedManager] = useState<SpeedController | null>(
     null
   );
 
   useEffect(() => {
     if (player) {
-      setSleepTimerManager(new SleepTimerController(player));
       setSpeedManager(new SpeedController(player));
     } else {
-      setSleepTimerManager(null);
       setSpeedManager(null);
     }
   }, [player]);
@@ -161,22 +151,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
 
     return () => unsubscribe?.();
-  }, [player, modalBottomSheetState.visible, sleepTimerManager]);
-
-  React.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]);
+  }, [player, modalBottomSheetState.visible]);
 
   const [playbackSpeed, setPlaybackSpeed] =
     useState<PlaybackSpeed>(DEFAULT_SPEED);
 
-  const [sleepTimerState, setSleepTimerState] = useState<SleepTimerState>(
-    new SleepTimerState(SLEEP_TIMER_OFF, 0)
-  );
-
   const [defaultDimensions, setDefaultDimensions] =
     React.useState<Dimensions>(undefined);
 
@@ -199,17 +178,13 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   };
 
   useEffect(() => {
-    const sleepSubscription =
-      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
-
     const speedSubscription =
       speedManager?.playbackSpeed$.subscribe(setPlaybackSpeed);
 
     return () => {
-      sleepSubscription?.unsubscribe();
       speedSubscription?.unsubscribe();
     };
-  }, [sleepTimerManager, speedManager]);
+  }, [speedManager]);
 
   useEffect(() => {
     if (!playerState.isReadyToPlay) {
@@ -217,8 +192,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     }
 
     void speedManager?.loadSpeed();
-    void sleepTimerManager?.loadSleep();
-  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
+  }, [playerState.isReadyToPlay, speedManager]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -266,13 +240,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     [speedManager]
   );
 
-  const onSleepSelect = React.useCallback(
-    async (item) => {
-      await sleepTimerManager?.setSleepTimer(item);
-    },
-    [sleepTimerManager]
-  );
-
   const onSpeedButtonPress = React.useCallback(() => {
     openBottomSheetModal({
       modalBottomSheetContentProps: {
@@ -297,42 +264,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
   }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
 
-  const onSleepButtonPress = React.useCallback(() => {
-    openBottomSheetModal({
-      modalBottomSheetContentProps: {
-        items: getSleepTimerOptions(configuration),
-        current_selection: sleepTimerState.timer,
-        onPress: onSleepSelect,
-        title: configuration["playback_sleep_title"],
-        itemProps: getBottomSheetModalItemProps,
-        iconProps: getBottomSheetModalIconProps,
-        labelProps: getBottomSheetModalLabelProps,
-        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
-        iconPlacement: "right",
-      },
-      options: {
-        supportedOrientations: [
-          "portrait",
-          "landscape",
-          "portrait-upside-down",
-        ],
-      },
-    });
-  }, [
-    sleepTimerState.timer,
-    configuration["playback_sleep_title"],
-    configuration["playback_sleep_off_label"],
-    onSleepSelect,
-  ]);
-
-  // This method does not actually cancel the sleep timer
-  // (and should not to avoid race condition),
-  // it just performs the cleanup when timer expires
-  // TODO: rename it in code above
-  const cancelSleepTimer = React.useCallback(() => {
-    sleepTimerManager?.onTimerExpired();
-  }, [sleepTimerManager]);
-
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
   }, [playerManager]);
@@ -372,15 +303,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
               onPlayerSeek={onPlayerSeek}
               onSkipStart={onSkipStart}
               onSpeedButtonPress={onSpeedButtonPress}
-              onSleepButtonPress={onSleepButtonPress}
               playbackSpeedName={formatSpeed(playbackSpeed.value)}
-              playbackSleepName={
-                sleepTimerState.timer.value === 0
-                  ? "sleep_timer"
-                  : "sleep_timer_active"
-              }
-              sleepTimerDate={sleepTimerState.timerDate}
-              cancelSleepTimer={cancelSleepTimer}
               onSkipLive={onSkipLive}
               onCloseVideoModal={onCloseVideoModal}
               maximiseVideoModal={maximiseVideoModal}

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

@@ -2,7 +2,10 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useIsTablet,
+  useZStore,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
   ProgressBar,
@@ -27,6 +30,7 @@ import {
   sleepButton,
   speedButton,
 } from "./utils";
+import { useSleepTimerModal } from "../../useSleepTimerModal";
 
 const styles = StyleSheet.create({
   flex: {
@@ -64,11 +68,8 @@ type Props = {
   value: GetValue;
   title: string | number;
   summary: string | number;
-  sleepTimerDate: number;
-  cancelSleepTimer: Callback;
 
   playbackSpeedName: string;
-  playbackSleepName: string;
 
   onPlaybackButtonPress: Callback;
   onRewindButtonPress: Callback;
@@ -77,7 +78,6 @@ type Props = {
   onSkipStart: Callback;
   onSkipLive: Callback;
   onSpeedButtonPress: Callback;
-  onSleepButtonPress: Callback;
 
   maxWidth?: number;
 
@@ -92,11 +92,8 @@ export const Controls = (props: Props) => {
     value,
     title,
     summary,
-    sleepTimerDate,
-    cancelSleepTimer,
 
     playbackSpeedName,
-    playbackSleepName,
 
     onPlaybackButtonPress,
     onRewindButtonPress,
@@ -105,12 +102,21 @@ export const Controls = (props: Props) => {
     onSkipStart,
     onSkipLive,
     onSpeedButtonPress,
-    onSleepButtonPress,
     maxWidth = 320,
 
     docked,
   } = props;
 
+  const configuration = useZStore("playerConfiguration");
+
+  const { sleepTimerState, onSleepButtonPress } = useSleepTimerModal(
+    playerManager.getActivePlayer(),
+    configuration
+  );
+
+  const playbackSleepName =
+    sleepTimerState.timer.value === 0 ? "sleep_timer" : "sleep_timer_active";
+
   const isTablet = useIsTablet();
   const controller = playerManager.getActivePlayer();
   let showFullControls = !controller?.isAd();
@@ -124,45 +130,6 @@ export const Controls = (props: Props) => {
     showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
   }
 
-  const [timeLeft, setTimeLeft] = React.useState(
-    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
-  );
-
-  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
-
-  const countDownOptions = React.useMemo(() => {
-    return {
-      showCounter: showCounter && timeLeft >= 0,
-      timeLeft,
-    };
-  }, [showCounter, timeLeft]);
-
-  React.useEffect(() => {
-    if (showCounter && sleepTimerDate !== 0) {
-      setTimeLeft(sleepTimerDate - Date.now());
-
-      const intervalId = setInterval(() => {
-        setTimeLeft(() => {
-          const newTimeLeft = sleepTimerDate - Date.now();
-
-          if (newTimeLeft <= 0) {
-            clearInterval(intervalId);
-
-            cancelSleepTimer();
-
-            return 0;
-          } else {
-            return newTimeLeft;
-          }
-        });
-      }, 1000);
-
-      return () => clearInterval(intervalId);
-    } else {
-      setTimeLeft(0);
-    }
-  }, [sleepTimerDate, showCounter, cancelSleepTimer]);
-
   const startTime = entry.extensions?.live?.start_time;
   const endTime = entry.extensions?.live?.end_time;
 
@@ -295,7 +262,6 @@ export const Controls = (props: Props) => {
             isDateBasedLiveContent={isDateBasedLiveContent}
             onSkipLive={onSkipLive}
             progressBarStyles={styles.progressBar}
-            countDownOptions={countDownOptions}
             thumbStyles={styles.progressBarThumbStyles}
             thumbStylesPressed={styles.progressBarThumbStyles_pressed}
             trackStyles={styles.progressBarTrackStyles}

package/src/Player/AudioLayer/Layout/Controls/utils.ts

@@ -99,7 +99,7 @@ export const skipToLiveButton = (props: ButtonsProps): ControlsButton =>
   skipButtonByName({ ...props, name: "skip_live" });
 
 export const speedButton = (props: ButtonsProps): ControlsButton =>
-  speedButtonByName({ ...props });
+  speedButtonByName(props);
 
 export const sleepButton = (props: ButtonsProps): ControlsButton =>
-  sleepButtonByName({ ...props });
+  sleepButtonByName(props);

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

@@ -77,15 +77,11 @@ export function MobileLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
@@ -196,10 +192,7 @@ export function MobileLayout({
             value={value}
             title={title}
             summary={summary}
-            sleepTimerDate={sleepTimerDate}
-            cancelSleepTimer={cancelSleepTimer}
             playbackSpeedName={playbackSpeedName}
-            playbackSleepName={playbackSleepName}
             onPlaybackButtonPress={onPlaybackButtonPress}
             onRewindButtonPress={onRewindButtonPress}
             onForwardButtonPress={onForwardButtonPress}
@@ -207,7 +200,6 @@ export function MobileLayout({
             onSkipStart={onSkipStart}
             onSkipLive={onSkipLive}
             onSpeedButtonPress={onSpeedButtonPress}
-            onSleepButtonPress={onSleepButtonPress}
             docked={docked}
           />
         </View>

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

@@ -98,15 +98,11 @@ export function TabletLandscapeLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
@@ -184,10 +180,7 @@ export function TabletLandscapeLayout({
               value={value}
               title={title}
               summary={summary}
-              sleepTimerDate={sleepTimerDate}
-              cancelSleepTimer={cancelSleepTimer}
               playbackSpeedName={playbackSpeedName}
-              playbackSleepName={playbackSleepName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}
               onForwardButtonPress={onForwardButtonPress}
@@ -195,7 +188,6 @@ export function TabletLandscapeLayout({
               onSkipStart={onSkipStart}
               onSkipLive={onSkipLive}
               onSpeedButtonPress={onSpeedButtonPress}
-              onSleepButtonPress={onSleepButtonPress}
               docked={docked}
             />
           </View>

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

@@ -82,15 +82,11 @@ export function TabletPortraitLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
@@ -187,10 +183,7 @@ export function TabletPortraitLayout({
               value={value}
               title={title}
               summary={summary}
-              sleepTimerDate={sleepTimerDate}
-              cancelSleepTimer={cancelSleepTimer}
               playbackSpeedName={playbackSpeedName}
-              playbackSleepName={playbackSleepName}
               onPlaybackButtonPress={onPlaybackButtonPress}
               onRewindButtonPress={onRewindButtonPress}
               onForwardButtonPress={onForwardButtonPress}
@@ -198,7 +191,6 @@ export function TabletPortraitLayout({
               onSkipStart={onSkipStart}
               onSkipLive={onSkipLive}
               onSpeedButtonPress={onSpeedButtonPress}
-              onSleepButtonPress={onSleepButtonPress}
               docked={docked}
             />
           </View>

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, sleepTimerState.timer.value),
+        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;