@applicaster/quick-brick-player 13.0.0-alpha.8532113155 → 13.0.0-alpha.9103242840

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.8532113155",
+  "version": "13.0.0-alpha.9103242840",
   "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.28",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.31",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.8532113155",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.8532113155",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.9103242840",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.19",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.9103242840",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.9103242840",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.9103242840",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -17,7 +17,13 @@ import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Comp
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
-import { formatSpeed } from "./utils";
+import {
+  formatSpeed,
+  hasDatePassed,
+  loadItemsFromStorage,
+  NAMESPACE,
+} from "./utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { addQueryParam, getLiveUrl } from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
@@ -27,19 +33,6 @@ 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",
@@ -139,11 +132,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   } = props;
 
   const speeds = [
-    { 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 },
+    { 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 },
   ];
 
   const isTablet = useIsTablet();
@@ -161,29 +154,17 @@ 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]);
+  const [playbackSpeed, setPlaybackSpeed] = useState({
+    asset: configuration["speed_1"],
+    value: 1.0,
+  });
 
-  const [playbackSpeed, setPlaybackSpeed] =
-    useState<PlaybackSpeed>(DEFAULT_SPEED);
+  const [sleepTimer, setSleepTimer] = useState({
+    label: "playback_sleep_off_label",
+    value: 0,
+  });
 
-  const [sleepTimerState, setSleepTimerState] = useState<SleepTimerState>(
-    new SleepTimerState(SLEEP_TIMER_OFF, 0)
-  );
+  const [sleepTimerDate, setSleepTimerDate] = useState(0);
 
   const [defaultDimensions, setDefaultDimensions] =
     React.useState<Dimensions>(undefined);
@@ -208,27 +189,82 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
-  useEffect(() => {
-    const sleepSubscription =
-      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
+  const cancelSleepTimer = async () => {
+    player?.cancelSleepTimer();
 
-    const speedSubscription =
-      speedManager?.playbackSpeed$.subscribe(setPlaybackSpeed);
+    setSleepTimer({
+      label: "playback_sleep_off_label",
+      value: 0,
+    });
 
-    return () => {
-      sleepSubscription?.unsubscribe();
-      speedSubscription?.unsubscribe();
-    };
-  }, [sleepTimerManager, speedManager]);
+    setSleepTimerDate(0);
 
-  useEffect(() => {
-    if (!playerState.isReadyToPlay) {
-      return;
+    await localStorage.removeItem("sleep", NAMESPACE);
+  };
+
+  const startSleepTimer = (timerValue: number) => {
+    try {
+      const currentDate = new Date();
+      const futureDate = new Date(currentDate.getTime() + timerValue * 60000);
+      const futureSleepDate = futureDate.getTime();
+
+      player?.cancelSleepTimer();
+
+      player?.startSleepTimer(futureSleepDate);
+
+      return futureSleepDate;
+    } catch (e) {
+      return 0;
     }
+  };
+
+  const handleSleep = async (
+    timerValue: number,
+    currentFutureSleepDate = null
+  ) => {
+    if (currentFutureSleepDate) {
+      if (hasDatePassed(currentFutureSleepDate)) {
+        await cancelSleepTimer();
 
-    void speedManager?.loadSpeed();
-    void sleepTimerManager?.loadSleep();
-  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
+        return 0;
+      }
+
+      return currentFutureSleepDate;
+    }
+
+    if (timerValue === 0) {
+      await cancelSleepTimer();
+
+      return timerValue;
+    }
+
+    return startSleepTimer(timerValue);
+  };
+
+  useEffect(() => {
+    const loadSpeed = async () => {
+      const speed = await loadItemsFromStorage("speed");
+
+      if (playerState.isReadyToPlay && speed) {
+        setPlaybackSpeed(speed);
+        player?.setPlaybackRate(speed.value);
+      }
+    };
+
+    const loadSleep = async () => {
+      const sleep = await loadItemsFromStorage("sleep");
+
+      if (playerState.isReadyToPlay && sleep) {
+        const { futureSleepDate, ...rest } = sleep;
+        setSleepTimer(rest);
+        const sleepTimerDate = await handleSleep(sleep.value, futureSleepDate);
+        setSleepTimerDate(sleepTimerDate);
+      }
+    };
+
+    loadSpeed().then();
+    loadSleep().then();
+  }, [playerState.isReadyToPlay]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -256,7 +292,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const onPlaybackButtonPress = React.useCallback(() => {
     if (playerState.isBuffering) return;
-    playerState.isPaused ? player?.play() : player?.pause();
+    playerState.isPaused ? player?.play() : player.pause();
   }, [playerState, player]);
 
   const seekDuration = toNumberWithDefault(10, value("seek_duration"));
@@ -271,16 +307,26 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const onSpeedSelect = React.useCallback(
     async (item) => {
-      await speedManager?.setPlaybackSpeed(item);
+      setPlaybackSpeed(item);
+      player.setPlaybackRate(item.value);
+      await localStorage.setItem("speed", item, NAMESPACE);
     },
-    [speedManager]
+    [player, setPlaybackSpeed]
   );
 
   const onSleepSelect = React.useCallback(
     async (item) => {
-      await sleepTimerManager?.setSleepTimer(item);
+      setSleepTimer(item);
+      const futureSleepDate = await handleSleep(item.value);
+      setSleepTimerDate(futureSleepDate);
+
+      await localStorage.setItem(
+        "sleep",
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
     },
-    [sleepTimerManager]
+    [player, setSleepTimer]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -295,24 +341,15 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [
-    playbackSpeed,
-    setPlaybackSpeed,
-    navigator,
-    onSpeedSelect,
-    configuration["playback_speed_title"],
-  ]);
+  }, [playbackSpeed, setPlaybackSpeed]);
 
   const onSleepButtonPress = React.useCallback(() => {
     navigator.openModalBottomSheet({
       modalBottomSheetContentProps: {
         items: [
-          {
-            label: configuration["playback_sleep_off_label"],
-            value: 0,
-          },
+          { label: configuration["playback_sleep_off_label"], value: 0 },
         ].concat(sleeps),
-        current_selection: sleepTimerState.timer,
+        current_selection: sleepTimer,
         onPress: onSleepSelect,
         title: configuration["playback_sleep_title"],
       },
@@ -320,21 +357,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [
-    navigator,
-    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]);
+  }, [sleepTimer, setSleepTimer, configuration]);
 
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
@@ -383,11 +406,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
                 onSleepButtonPress={onSleepButtonPress}
                 playbackSpeedName={formatSpeed(playbackSpeed.value)}
                 playbackSleepName={
-                  sleepTimerState.timer.value === 0
-                    ? "sleep_timer"
-                    : "sleep_timer_active"
+                  sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
                 }
-                sleepTimerDate={sleepTimerState.timerDate}
+                sleepTimerDate={sleepTimerDate}
                 cancelSleepTimer={cancelSleepTimer}
                 onSkipLive={onSkipLive}
                 onCloseVideoModal={onCloseVideoModal}
@@ -437,8 +458,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
-    sleepTimerState.timer.value,
-    sleepTimerState.timerDate,
+    sleepTimer.value,
+    sleepTimerDate,
   ]);
 
   if (configuration.magic_background) {

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

@@ -120,8 +120,8 @@ const Styles = {
       (startComponentsAnimation && isActiveGesture) || docked
         ? 0
         : isTablet
-          ? 24
-          : 10,
+        ? 24
+        : 10,
   }),
 
   paddingHorizontal: {

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

@@ -37,8 +37,8 @@ export const playbackButton = ({
   const icon = playerState.isPaused
     ? "play"
     : playerState.isLive && liveButton
-      ? "stop"
-      : "pause";
+    ? "stop"
+    : "pause";
 
   return {
     size: playbackButtonSize(isTablet),

package/src/Player/index.tsx

@@ -918,8 +918,8 @@ export default class VideoPlayer extends React.Component<
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
       : isTV() && isAudioItem
-        ? styles.playerContainerTransparent
-        : styles.playerContainerBlack;
+      ? styles.playerContainerTransparent
+      : styles.playerContainerBlack;
 
     const isInline = () => {
       if (isTV()) {

package/src/Player/AudioLayer/SleepTimerManager.ts

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

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