@applicaster/quick-brick-player 13.0.0-alpha.3003916059 → 13.0.0-alpha.3013095924

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.3003916059",
+  "version": "13.0.0-alpha.3013095924",
   "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.124",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.3013095924",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3003916059",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3003916059",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3003916059",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3013095924",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3013095924",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3013095924",
     "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,13 +37,18 @@ 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({
@@ -123,14 +128,19 @@ 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]);
@@ -151,11 +161,22 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
 
     return () => unsubscribe?.();
-  }, [player, modalBottomSheetState.visible]);
+  }, [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]);
 
   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);
 
@@ -178,13 +199,17 @@ 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();
     };
-  }, [speedManager]);
+  }, [sleepTimerManager, speedManager]);
 
   useEffect(() => {
     if (!playerState.isReadyToPlay) {
@@ -192,7 +217,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     }
 
     void speedManager?.loadSpeed();
-  }, [playerState.isReadyToPlay, speedManager]);
+    void sleepTimerManager?.loadSleep();
+  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -240,6 +266,13 @@ 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: {
@@ -264,6 +297,42 @@ 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]);
@@ -303,7 +372,15 @@ 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,10 +2,7 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 
 import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
-import {
-  useIsTablet,
-  useZStore,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
   ProgressBar,
@@ -30,7 +27,6 @@ import {
   sleepButton,
   speedButton,
 } from "./utils";
-import { useSleepTimerModal } from "../../useSleepTimerModal";
 
 const styles = StyleSheet.create({
   flex: {
@@ -68,8 +64,11 @@ type Props = {
   value: GetValue;
   title: string | number;
   summary: string | number;
+  sleepTimerDate: number;
+  cancelSleepTimer: Callback;
 
   playbackSpeedName: string;
+  playbackSleepName: string;
 
   onPlaybackButtonPress: Callback;
   onRewindButtonPress: Callback;
@@ -78,6 +77,7 @@ type Props = {
   onSkipStart: Callback;
   onSkipLive: Callback;
   onSpeedButtonPress: Callback;
+  onSleepButtonPress: Callback;
 
   maxWidth?: number;
 
@@ -92,8 +92,11 @@ export const Controls = (props: Props) => {
     value,
     title,
     summary,
+    sleepTimerDate,
+    cancelSleepTimer,
 
     playbackSpeedName,
+    playbackSleepName,
 
     onPlaybackButtonPress,
     onRewindButtonPress,
@@ -102,21 +105,12 @@ 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();
@@ -130,6 +124,45 @@ 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;
 
@@ -262,6 +295,7 @@ 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/DockedControls/index.tsx

@@ -24,10 +24,6 @@ import {
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
-
-const bottomTabBarHeight = getTabBarHeight();
 
 type Props = {
   entry: ZappEntry;
@@ -92,6 +88,10 @@ const styles = StyleSheet.create({
   },
 });
 
+const backgroundColorStyle = (value: GetValue): ViewStyle => ({
+  backgroundColor: value("docked_player_background_color"),
+});
+
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
@@ -208,10 +208,6 @@ export const DockedControls = (props: Props) => {
     []
   );
 
-  const dockedBackgroundColor = value("docked_player_background_color");
-
-  const insets = useSafeAreaInsets();
-
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -223,9 +219,7 @@ export const DockedControls = (props: Props) => {
           isActiveGesture || layoutState.docked,
           progressBarHeight
         ),
-        {
-          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
-        },
+        { height: minimisedHeight },
       ]}
     >
       {!playerState.isLive &&
@@ -267,12 +261,7 @@ export const DockedControls = (props: Props) => {
                 )}
               />
             )}
-            <View
-              style={[
-                styles.contentInfo,
-                { backgroundColor: dockedBackgroundColor },
-              ]}
-            >
+            <View style={[styles.contentInfo, backgroundColorStyle(value)]}>
               <ContentInfo
                 content={{ ...entry, title, summary }}
                 value={value}
@@ -286,7 +275,7 @@ export const DockedControls = (props: Props) => {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            { backgroundColor: dockedBackgroundColor },
+            backgroundColorStyle(value),
           ]}
         >
           <Controls
@@ -308,12 +297,6 @@ export const DockedControls = (props: Props) => {
           />
         </View>
       </View>
-      <View
-        style={{
-          height: insets.bottom + bottomTabBarHeight,
-          backgroundColor: dockedBackgroundColor,
-        }}
-      />
     </AnimationComponent>
   );
 };

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

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

package/src/Player/AudioLayer/Layout/PlayerImage/AnimatedImage.tsx

@@ -1,5 +1,11 @@
 import React, { PropsWithChildren } from "react";
-import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
+import {
+  Image,
+  Animated,
+  StyleSheet,
+  ViewStyle,
+  ImageStyle,
+} from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import {
@@ -8,9 +14,6 @@ import {
   DURATION_TO_MINIMIZE,
   DURATION_TO_MAXIMIZE,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
-
-import { useChangePlayerState } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -23,11 +26,16 @@ const styles = StyleSheet.create({
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: ImageStyle | ImageStyle[];
+  wrapperViewStyle?: ViewStyle;
   imageWidth: number;
-  docked: boolean;
 }>;
 
-export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
+export const AnimatedImage = ({
+  entry,
+  style,
+  wrapperViewStyle,
+  imageWidth,
+}: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
   const source = React.useMemo(
@@ -35,40 +43,27 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
     [entry]
   );
 
-  const { minimisedHeight } = useModalAnimationContext();
-
-  const changePlayerState$ = useChangePlayerState({ docked });
+  const { playerAnimationState, minimisedHeight } = useModalAnimationContext();
 
   React.useEffect(() => {
-    const subscription = changePlayerState$.subscribe({
-      next: (nextPlayerState: PlayerAnimationStateT) => {
-        if (nextPlayerState === PlayerAnimationStateEnum.minimize) {
-          Animated.timing(heightAnim, {
-            toValue: minimisedHeight,
-            duration: DURATION_TO_MINIMIZE,
-            useNativeDriver: false, // width/height can't use native driver
-          }).start();
-        }
-
-        if (nextPlayerState === PlayerAnimationStateEnum.maximize) {
-          Animated.timing(heightAnim, {
-            toValue: imageWidth,
-            duration: DURATION_TO_MAXIMIZE,
-            useNativeDriver: false, // width/height can't use native driver
-          }).start();
-        }
+    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
+      Animated.timing(heightAnim, {
+        toValue: minimisedHeight,
+        duration: DURATION_TO_MINIMIZE,
+        useNativeDriver: false, // width/height can't use native driver
+      }).start();
 
-        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
-          // minimize image immediatly
-          heightAnim.setValue(minimisedHeight);
-        }
-      },
-    });
+      return;
+    }
 
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [changePlayerState$, minimisedHeight, imageWidth]);
+    if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
+      Animated.timing(heightAnim, {
+        toValue: imageWidth,
+        duration: DURATION_TO_MAXIMIZE,
+        useNativeDriver: false, // width/height can't use native driver
+      }).start();
+    }
+  }, [playerAnimationState, imageWidth]);
 
   if (!source) return null;
 
@@ -76,6 +71,7 @@ export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
     <Animated.View
       style={[
         styles.container,
+        wrapperViewStyle,
         {
           width: heightAnim,
         },

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

@@ -1,13 +1,10 @@
 import * as React from "react";
-import { LayoutChangeEvent, View } from "react-native";
 
 import {
   AnimationComponent,
   ComponentAnimationType,
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { AnimatedImage } from "./AnimatedImage";
 import { FlexImage } from "./FlexImage";
@@ -15,6 +12,7 @@ import { FlexImage } from "./FlexImage";
 import { styles } from "./styles";
 import { calculateBorderRadius } from "../../utils";
 import { PlayNextData } from "../types";
+import { LayoutChangeEvent, View } from "react-native";
 
 type Props = {
   entry: ZappEntry;
@@ -31,7 +29,7 @@ type Props = {
   docked: boolean;
   imageWidth?: Option<number>;
   verticalOffset: number;
-  onLayoutImage?: (event: LayoutChangeEvent) => void;
+  onLayoutImage: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
@@ -42,7 +40,7 @@ export const PlayerImage = (props: Props) => {
     verticalOffset,
     imageWidth,
     configuration,
-    onLayoutImage = noop,
+    onLayoutImage,
   } = props;
 
   const {
@@ -52,9 +50,8 @@ export const PlayerImage = (props: Props) => {
     minimisedHeight,
   } = useModalAnimationContext();
 
-  const isShadowEnabled = toBooleanWithDefaultTrue(
-    configuration?.audio_player_artwork_shadow_enabled
-  );
+  const isShadowEnabled =
+    configuration?.audio_player_artwork_shadow_enabled ?? true;
 
   const shouldShowShadow = !docked && isShadowEnabled;
 
@@ -102,7 +99,6 @@ export const PlayerImage = (props: Props) => {
               entry={entry}
               style={[styles.backgroundImageContainer, { borderRadius }]}
               imageWidth={imageWidth}
-              docked={docked}
             />
           )}
         </View>

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -1,6 +1,5 @@
 /* eslint-disable react-native/no-color-literals */
 import { StyleSheet } from "react-native";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const SHADOW_COLOR = "rgba(0, 0, 0, 1)";
 
@@ -26,10 +25,7 @@ export const styles = StyleSheet.create({
     borderColor: "transparent",
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },
-    shadowOpacity: platformSelect({
-      ios: 0.35,
-      default: 0.2,
-    }),
+    shadowOpacity: 0.2,
     shadowRadius: 32,
     elevation: 12,
   },

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

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

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

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

package/src/Player/AudioLayer/SleepTimerManager.ts

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

package/src/Player/Const/sleepTimerOptions.ts

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

package/src/Player/Utils/index.tsx

@@ -116,9 +116,3 @@ 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/index.tsx

@@ -50,7 +50,6 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
-  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
 });
 
@@ -59,10 +58,6 @@ const logger = createLogger({
   subsystem: Subsystem,
 });
 
-const isTvOS = isTvOSPlatform();
-
-const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
-
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
   QuickBrickPlayer.NativePlayerState
@@ -98,8 +93,6 @@ export default class VideoPlayer extends React.Component<
     // Player state
     currentTime: 0,
     duration: 0,
-
-    nativePlayerIsReady: false,
   };
 
   private _tracker: PlayerAnalyticsTrackerI;
@@ -495,9 +488,6 @@ export default class VideoPlayer extends React.Component<
 
   onVideoFullscreenPlayerDidPresent = () => {
     this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
-
-    // we have to wait ready of native player view, before showing audio_player
-    this.setState({ nativePlayerIsReady: true });
   };
 
   onVideoFullscreenPlayerWillDismiss = () => {
@@ -684,7 +674,7 @@ export default class VideoPlayer extends React.Component<
   };
 
   childrenWithPlayNext = () => {
-    if (!isTvOS || !this.getPlayNextData()) {
+    if (!isTvOSPlatform() || !this.getPlayNextData()) {
       return this.props.children;
     }
 
@@ -709,35 +699,6 @@ export default class VideoPlayer extends React.Component<
     ];
   };
 
-  childrenWithAudioPlayer = () => {
-    if (!isTvOS) {
-      return this.props.children;
-    }
-
-    const { nativePlayerIsReady } = this.state;
-
-    // we have to wait ready status of native player view, before showing audio_player
-    if (!nativePlayerIsReady) {
-      return this.props.children;
-    }
-
-    // tvos only
-    const { entry } = this.props;
-
-    const children = R.pathOr([], "children", this.props);
-
-    return [
-      ...children,
-      <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
-        <AudioPlayer
-          style={styles.audioPlayerSize}
-          audio_item={entry}
-          plugin_configuration={this.getPluginConfiguration()}
-        />
-      </View>,
-    ];
-  };
-
   get supportNativeCast() {
     return this.props.controller.supportNativeCast();
   }
@@ -762,8 +723,7 @@ export default class VideoPlayer extends React.Component<
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
-      entry?.type?.value?.includes?.("audio") ||
-      entry?.content?.src?.includes?.("type=audio");
+      entry?.type?.value?.includes?.("audio");
 
     const getStyle = (dimensions) => {
       const generalStyles = isAudioItem ? styles.audio : styles.video;
@@ -1147,14 +1107,6 @@ export default class VideoPlayer extends React.Component<
     const renderTVPlayer = () => {
       return (
         <View style={this.takeParentStyle} testID={"player-view"}>
-          {!isTvOS && isAudioItem ? (
-            <AudioPlayer
-              style={getStyle(styles.audioPlayerSize)}
-              audio_item={entry}
-              plugin_configuration={this.getPluginConfiguration()}
-            />
-          ) : null}
-
           <this.props.PlayerComponent
             ref={this._assignRoot}
             {...nativeEvents}
@@ -1164,12 +1116,11 @@ export default class VideoPlayer extends React.Component<
             pluginConfiguration={this.getPluginConfiguration()}
             controller={this.props.controller}
           >
-            {this.childrenWithAudioPlayer()}
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>
 
           {renderTransportControls(this.takeParentStyle)}
-          {!isTvOS && (
+          {!isTvOSPlatform() && (
             <PlayNextOverlay
               item={entry}
               playerIsDocked={docked}

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

@@ -1 +0,0 @@
-export { useChangePlayerState } from "./useChangePlayerState";

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/useChangePlayerState.ts

@@ -1,99 +0,0 @@
-import * as React from "react";
-import { Subject, Observable } from "rxjs";
-
-import { distinctUntilChanged } from "rxjs/operators";
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
-import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import {
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
-
-const builder = () => {
-  const changePlayerState$ = new Subject<PlayerAnimationStateT>();
-
-  const emitMaximized = (): void => {
-    changePlayerState$.next(PlayerAnimationStateEnum.maximize);
-  };
-
-  const emitMinimized = (): void => {
-    changePlayerState$.next(PlayerAnimationStateEnum.minimize);
-  };
-
-  const emitAppearInDocked = (): void => {
-    // if audio_player was presented in docked mode
-    changePlayerState$.next(PlayerAnimationStateEnum.appear_as_docked);
-  };
-
-  return {
-    emitMaximized,
-    emitMinimized,
-    emitAppearInDocked,
-    changePlayerState$: changePlayerState$.pipe(distinctUntilChanged()),
-  };
-};
-
-export const useChangePlayerState = ({
-  docked,
-}): Observable<PlayerAnimationStateT> => {
-  const changePlayerStateRef =
-    useRefWithInitialValue<ReturnType<typeof builder>>(builder);
-
-  const { playerAnimationState } = useModalAnimationContext();
-
-  const previousPlayerAnimationState = usePrevious(playerAnimationState);
-
-  React.useEffect(() => {
-    if (
-      !docked &&
-      isNil(previousPlayerAnimationState) &&
-      playerAnimationState === PlayerAnimationStateEnum.minimize
-    ) {
-      changePlayerStateRef.current.emitMinimized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      isNil(previousPlayerAnimationState) &&
-      playerAnimationState === PlayerAnimationStateEnum.maximize
-    ) {
-      changePlayerStateRef.current.emitMaximized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-      playerAnimationState === PlayerAnimationStateEnum.maximize
-    ) {
-      changePlayerStateRef.current.emitMaximized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-      playerAnimationState === PlayerAnimationStateEnum.minimize
-    ) {
-      changePlayerStateRef.current.emitMinimized();
-
-      return;
-    }
-
-    if (
-      docked &&
-      isNil(previousPlayerAnimationState) &&
-      isNil(playerAnimationState)
-    ) {
-      changePlayerStateRef.current.emitAppearInDocked();
-    }
-  }, [previousPlayerAnimationState, playerAnimationState, docked]);
-
-  return changePlayerStateRef.current.changePlayerState$;
-};

package/src/Player/AudioLayer/components/SleepTimerModalHeader/SleepTimerModalHeader.tsx

@@ -1,66 +0,0 @@
-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

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

package/src/Player/AudioLayer/useSleepTimerModal.ts

@@ -1,109 +0,0 @@
-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]
-  );
-};