@applicaster/quick-brick-player 13.0.0-alpha.3013227535 → 13.0.0-alpha.3098550192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.3013227535",
+  "version": "13.0.0-alpha.3098550192",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.25",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.26",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3013227535",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3013227535",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3013227535",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.28",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.31",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3098550192",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3098550192",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3098550192",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -15,15 +15,9 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
-import {
-  formatSpeed,
-  hasDatePassed,
-  loadItemsFromStorage,
-  NAMESPACE,
-} from "./utils";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { formatSpeed } from "./utils";
 import { addQueryParam, getLiveUrl } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
@@ -33,6 +27,19 @@ import {
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import {
+  speed_0_8,
+  speed_1,
+  speed_1_2,
+  speed_1_5,
+  speed_2,
+} from "@applicaster/quick-brick-mobile-transport-controls";
+import {
+  SleepTimerController,
+  SleepTimerState,
+  SLEEP_TIMER_OFF,
+} from "./SleepTimerManager";
+import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -132,11 +139,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   } = props;
 
   const speeds = [
-    { asset: configuration["speed_0_8"], value: 0.8 },
-    { asset: configuration["speed_1"], value: 1.0 },
-    { asset: configuration["speed_1_2"], value: 1.2 },
-    { asset: configuration["speed_1_5"], value: 1.5 },
-    { asset: configuration["speed_2"], value: 2.0 },
+    { asset: configuration["speed_0_8"] || speed_0_8, value: 0.8 },
+    { asset: configuration["speed_1"] || speed_1, value: 1.0 },
+    { asset: configuration["speed_1_2"] || speed_1_2, value: 1.2 },
+    { asset: configuration["speed_1_5"] || speed_1_5, value: 1.5 },
+    { asset: configuration["speed_2"] || speed_2, value: 2.0 },
   ];
 
   const isTablet = useIsTablet();
@@ -154,17 +161,29 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     configuration?.audio_live_player_update_interval
   );
 
-  const [playbackSpeed, setPlaybackSpeed] = useState({
-    asset: configuration["speed_1"],
-    value: 1.0,
-  });
+  const [sleepTimerManager, setSleepTimerManager] =
+    useState<SleepTimerController | null>(null);
 
-  const [sleepTimer, setSleepTimer] = useState({
-    label: "playback_sleep_off_label",
-    value: 0,
-  });
+  const [speedManager, setSpeedManager] = useState<SpeedController | null>(
+    null
+  );
 
-  const [sleepTimerDate, setSleepTimerDate] = useState(0);
+  useEffect(() => {
+    if (player) {
+      setSleepTimerManager(new SleepTimerController(player));
+      setSpeedManager(new SpeedController(player));
+    } else {
+      setSleepTimerManager(null);
+      setSpeedManager(null);
+    }
+  }, [player]);
+
+  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);
@@ -189,90 +208,27 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
-  const cancelSleepTimer = useCallback(async () => {
-    player?.cancelSleepTimer();
-
-    setSleepTimer({
-      label: "playback_sleep_off_label",
-      value: 0,
-    });
-
-    setSleepTimerDate(0);
-
-    await localStorage.removeItem("sleep", NAMESPACE);
-  }, [player, setSleepTimer, setSleepTimerDate]);
-
-  const startSleepTimer = useCallback(
-    (timerValue: number) => {
-      try {
-        const futureSleepDate = Date.now() + timerValue * 60000;
-
-        player?.cancelSleepTimer?.();
-
-        player?.startSleepTimer?.(futureSleepDate);
-
-        return futureSleepDate;
-      } catch (e) {
-        return 0;
-      }
-    },
-    [player]
-  );
-
-  const handleSleep = useCallback(
-    async (timerValue: number, currentFutureSleepDate = null) => {
-      if (currentFutureSleepDate) {
-        if (hasDatePassed(currentFutureSleepDate)) {
-          await cancelSleepTimer();
-
-          return 0;
-        }
-
-        return currentFutureSleepDate;
-      }
-
-      if (timerValue === 0) {
-        await cancelSleepTimer();
-
-        return timerValue;
-      }
-
-      return startSleepTimer(timerValue);
-    },
-    [startSleepTimer, cancelSleepTimer]
-  );
-
   useEffect(() => {
-    const loadSpeed = async () => {
-      const speed = await loadItemsFromStorage("speed");
+    const sleepSubscription =
+      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
 
-      if (playerState.isReadyToPlay && speed) {
-        setPlaybackSpeed(speed);
-        player?.setPlaybackRate(speed.value);
-      }
-    };
-
-    const loadSleep = async () => {
-      const sleep = await loadItemsFromStorage("sleep");
+    const speedSubscription =
+      speedManager?.playbackSpeed$.subscribe(setPlaybackSpeed);
 
-      if (playerState.isReadyToPlay && sleep) {
-        const { futureSleepDate, ...rest } = sleep;
-        setSleepTimer(rest);
-        const sleepTimerDate = await handleSleep(sleep.value, futureSleepDate);
-        setSleepTimerDate(sleepTimerDate);
-      }
+    return () => {
+      sleepSubscription?.unsubscribe();
+      speedSubscription?.unsubscribe();
     };
+  }, [sleepTimerManager, speedManager]);
 
-    void loadSpeed();
-    void loadSleep();
-  }, [
-    playerState.isReadyToPlay,
-    handleSleep,
-    setSleepTimer,
-    setSleepTimerDate,
-    setPlaybackSpeed,
-    player,
-  ]);
+  useEffect(() => {
+    if (!playerState.isReadyToPlay) {
+      return;
+    }
+
+    void speedManager?.loadSpeed();
+    void sleepTimerManager?.loadSleep();
+  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -315,26 +271,16 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const onSpeedSelect = React.useCallback(
     async (item) => {
-      setPlaybackSpeed(item);
-      player?.setPlaybackRate(item.value);
-      await localStorage.setItem("speed", item, NAMESPACE);
+      await speedManager?.setPlaybackSpeed(item);
     },
-    [player, setPlaybackSpeed]
+    [speedManager]
   );
 
   const onSleepSelect = React.useCallback(
     async (item) => {
-      setSleepTimer(item);
-      const futureSleepDate = await handleSleep(item.value);
-      setSleepTimerDate(futureSleepDate);
-
-      await localStorage.setItem(
-        "sleep",
-        { ...item, futureSleepDate },
-        NAMESPACE
-      );
+      await sleepTimerManager?.setSleepTimer(item);
     },
-    [setSleepTimer, setSleepTimerDate, handleSleep]
+    [sleepTimerManager]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -361,9 +307,12 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     navigator.openModalBottomSheet({
       modalBottomSheetContentProps: {
         items: [
-          { label: configuration["playback_sleep_off_label"], value: 0 },
+          {
+            label: configuration["playback_sleep_off_label"],
+            value: 0,
+          },
         ].concat(sleeps),
-        current_selection: sleepTimer,
+        current_selection: sleepTimerState.timer,
         onPress: onSleepSelect,
         title: configuration["playback_sleep_title"],
       },
@@ -373,12 +322,20 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
   }, [
     navigator,
-    sleepTimer,
+    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]);
@@ -426,9 +383,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
                 onSleepButtonPress={onSleepButtonPress}
                 playbackSpeedName={formatSpeed(playbackSpeed.value)}
                 playbackSleepName={
-                  sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
+                  sleepTimerState.timer.value === 0
+                    ? "sleep_timer"
+                    : "sleep_timer_active"
                 }
-                sleepTimerDate={sleepTimerDate}
+                sleepTimerDate={sleepTimerState.timerDate}
                 cancelSleepTimer={cancelSleepTimer}
                 onSkipLive={onSkipLive}
                 onCloseVideoModal={onCloseVideoModal}
@@ -478,8 +437,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
-    sleepTimer.value,
-    sleepTimerDate,
+    sleepTimerState.timer.value,
+    sleepTimerState.timerDate,
   ]);
 
   if (configuration.magic_background) {

package/src/Player/AudioLayer/SleepTimerManager.ts

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

package/src/Player/AudioLayer/SpeedManager.ts

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