@applicaster/quick-brick-player 13.0.0-rc.12 → 13.0.0-rc.121

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
-import { ViewStyle, View } from "react-native";
+import { useEffect, useState } from "react";
+import {
+  Dimensions as ScreenDimensions,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
 
-import { SafeAreaView, Edge } from "react-native-safe-area-context";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import * as R from "ramda";
@@ -15,24 +21,35 @@ 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 { 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";
+  getBottomSheetModalDefaultItemIcon,
+  getBottomSheetModalIconProps,
+  getBottomSheetModalItemProps,
+  getBottomSheetModalLabelProps,
+  getBottomSheetModalSelectedItemIcon,
+} from "../Utils";
 import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
+  AnimatedScrollModal,
   AnimationComponent,
   ComponentAnimationType,
-  AnimatedScrollModal,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
+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({
   subsystem: "UIComponent",
@@ -48,8 +65,7 @@ type Dimensions = {
 
 type Configuration = {
   [key: string]: any;
-  magic_background?: boolean;
-  audio_player_background_image_query?: string;
+  audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -57,7 +73,6 @@ type Configuration = {
 type Props = {
   children: React.ReactNode;
   inline?: boolean;
-  docked?: boolean;
   configuration: Configuration;
   style: ViewStyle & Dimensions;
   entry: ZappEntry;
@@ -71,57 +86,29 @@ type Props = {
   isTabletPortrait?: boolean;
 };
 
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
-
-const Styles = {
-  mainContainer: (style: ViewStyle) => {
-    const combinedStyle: ViewStyle = {
-      flex: 1,
-    };
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
 
-    return {
-      ...combinedStyle,
-      ...style,
-    };
-  },
+const Styles = StyleSheet.create({
   playerContainer: {
     flex: 1,
   },
   paddingHorizontal: { paddingTop: 0, paddingHorizontal: PADDING_HORIZONTAL },
-
-  controlsMobile: {
-    height: 50,
-    marginHorizontal: 24,
-  },
-  controlsTablet: {
-    height: 96,
-    marginHorizontal: 24,
-  },
-  playerDetails: { marginTop: 60 },
-
-  linearGradient: {
-    flex: 1,
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
   },
-};
+});
 
-const sleeps = [
-  // { label: "End of episode", value: "episode" },
-  { label: "5 minutes", value: 5 },
-  { label: "10 minutes", value: 10 },
-  { label: "15 minutes", value: 15 },
-  { label: "30 minutes", value: 30 },
-  { label: "45 minutes", value: 45 },
-  { label: "1 hour", value: 60 },
-  { label: "2 hours", value: 120 },
-];
+const edges: Edge[] = ["right", "left", "top"];
 
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
 
+  const modalBottomSheetState = useModalStoreState();
+
   const {
-    docked,
     configuration,
     style,
     entry,
@@ -131,40 +118,64 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     isTabletPortrait,
   } = 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 },
-  ];
-
   const isTablet = useIsTablet();
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
-  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
-
-  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
-
   const { title, summary } = useTitleSummaryOverlay(
-    feedUrl,
     entry,
     playerState?.isLive,
     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
+  );
+
+  useEffect(() => {
+    if (player) {
+      setSleepTimerManager(new SleepTimerController(player));
+      setSpeedManager(new SpeedController(player));
+    } else {
+      setSleepTimerManager(null);
+      setSpeedManager(null);
+    }
+  }, [player]);
+
+  useEffect(() => {
+    if (!player) return;
+
+    const unsubscribe = player.addListener({
+      id: "audio-player-wrapper-bottom-sheet-modal",
+      listener: {
+        onVideoEnd: () => {
+          // Dismiss the bottom sheet modal when the video ends to avoid audio breaks and app freeze
+          if (modalBottomSheetState.visible) {
+            dismissBottomSheetModal();
+          }
+        },
+      },
+    });
 
-  const [sleepTimerDate, setSleepTimerDate] = useState(0);
+    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]);
+
+  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);
@@ -174,8 +185,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     height: 0,
   });
 
-  const navigator = useNavigation();
-
   const { maximiseVideoModal } = useNavigation();
 
   const onLayout = (event: any) => {
@@ -189,82 +198,27 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
-  const cancelSleepTimer = async () => {
-    player?.cancelSleepTimer();
-
-    setSleepTimer({
-      label: "playback_sleep_off_label",
-      value: 0,
-    });
-
-    setSleepTimerDate(0);
-
-    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();
-
-        return 0;
-      }
-
-      return currentFutureSleepDate;
-    }
-
-    if (timerValue === 0) {
-      await cancelSleepTimer();
-
-      return timerValue;
-    }
-
-    return startSleepTimer(timerValue);
-  };
-
   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]);
+
+  useEffect(() => {
+    if (!playerState.isReadyToPlay) {
+      return;
+    }
 
-    loadSpeed().then();
-    loadSleep().then();
-  }, [playerState.isReadyToPlay]);
+    void speedManager?.loadSpeed();
+    void sleepTimerManager?.loadSleep();
+  }, [playerState.isReadyToPlay, speedManager, sleepTimerManager]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -292,7 +246,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"));
@@ -307,57 +261,77 @@ 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);
     },
-    [player, setSleepTimer]
+    [sleepTimerManager]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
-    navigator.openModalBottomSheet({
+    openBottomSheetModal({
       modalBottomSheetContentProps: {
-        items: speeds,
+        items: speedOptions,
         current_selection: playbackSpeed,
         onPress: onSpeedSelect,
         title: configuration["playback_speed_title"],
+        itemProps: getBottomSheetModalItemProps,
+        iconProps: getBottomSheetModalIconProps,
+        labelProps: getBottomSheetModalLabelProps,
+        getSelectedItemIcon: getBottomSheetModalSelectedItemIcon,
+        getDefaultItemIcon: getBottomSheetModalDefaultItemIcon,
+        iconPlacement: "right",
       },
       options: {
-        supportedOrientations: ["portrait"],
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
       },
     });
-  }, [playbackSpeed, setPlaybackSpeed]);
+  }, [playbackSpeed, onSpeedSelect, configuration["playback_speed_title"]]);
 
   const onSleepButtonPress = React.useCallback(() => {
-    navigator.openModalBottomSheet({
+    openBottomSheetModal({
       modalBottomSheetContentProps: {
-        items: [
-          { label: configuration["playback_sleep_off_label"], value: 0 },
-        ].concat(sleeps),
-        current_selection: sleepTimer,
+        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"],
+        supportedOrientations: [
+          "portrait",
+          "landscape",
+          "portrait-upside-down",
+        ],
       },
     });
-  }, [sleepTimer, setSleepTimer, configuration]);
+  }, [
+    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();
@@ -378,111 +352,61 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
-
-  const ContainerView = SafeAreaView;
-
-  const MainContent = React.useMemo(() => {
-    return (
-      <ContainerView style={Styles.mainContainer(style)} edges={edges}>
-        <AnimationComponent
-          animationType={ComponentAnimationType.moveUpComponent}
-          additionalData={{ saveArea: true }}
-          style={Styles.playerContainer}
-        >
-          <AnimatedScrollModal>
-            <View style={Styles.playerContainer} onLayout={onLayout}>
-              <Layout
-                entry={entry}
-                playerState={playerState}
-                layoutState={layoutState}
-                value={value}
-                onPlaybackButtonPress={onPlaybackButtonPress}
-                onRewindButtonPress={onRewindButtonPress}
-                onForwardButtonPress={onForwardButtonPress}
-                onPlayerSeek={onPlayerSeek}
-                onSkipStart={onSkipStart}
-                onSpeedButtonPress={onSpeedButtonPress}
-                onSleepButtonPress={onSleepButtonPress}
-                playbackSpeedName={formatSpeed(playbackSpeed.value)}
-                playbackSleepName={
-                  sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
-                }
-                sleepTimerDate={sleepTimerDate}
-                cancelSleepTimer={cancelSleepTimer}
-                onSkipLive={onSkipLive}
-                onCloseVideoModal={onCloseVideoModal}
-                maximiseVideoModal={maximiseVideoModal}
-                configuration={configuration}
-                dimensions={dimensions}
-                playNextData={playNextData}
-                title={title}
-                summary={summary}
-                defaultDimensions={defaultDimensions}
-              />
-              <View style={Styles.paddingHorizontal}>
-                {children}
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={Styles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                    isAudioPlayer={true}
-                  />
-                </AnimationComponent>
-              </View>
-            </View>
-          </AnimatedScrollModal>
-        </AnimationComponent>
-      </ContainerView>
-    );
-  }, [
-    docked,
-    style,
-    entry,
-    playerState,
-    layoutState,
-    value,
-    onPlaybackButtonPress,
-    onRewindButtonPress,
-    onForwardButtonPress,
-    onPlayerSeek,
-    onCloseVideoModal,
-    maximiseVideoModal,
-    configuration,
-    dimensions,
-    children,
-    playNextData,
-    onSkipStart,
-    onSkipLive,
-    sleepTimer.value,
-    sleepTimerDate,
-  ]);
-
-  if (configuration.magic_background) {
-    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
-
-    const queryParamName =
-      configuration.audio_player_background_image_query || "width";
-
-    const queryParamValue = 15;
-
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
-
-    return (
-      <MagicBG
-        image={url}
-        fallbackUrl={baseUrl}
-        colors={entry?.extensions?.backgroundColors}
-        defaultColor="#000000"
+  return (
+    <SafeAreaView style={[style, Styles.playerContainer]} edges={edges}>
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        additionalData={{ saveArea: true }}
+        style={Styles.playerContainer}
       >
-        {MainContent}
-      </MagicBG>
-    );
-  }
-
-  return MainContent;
+        <AnimatedScrollModal>
+          <View style={Styles.playerContainer} onLayout={onLayout}>
+            <Layout
+              entry={entry}
+              playerState={playerState}
+              layoutState={layoutState}
+              value={value}
+              onPlaybackButtonPress={onPlaybackButtonPress}
+              onRewindButtonPress={onRewindButtonPress}
+              onForwardButtonPress={onForwardButtonPress}
+              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}
+              configuration={configuration}
+              dimensions={dimensions}
+              playNextData={playNextData}
+              title={title}
+              summary={summary}
+            />
+            <View style={Styles.paddingHorizontal}>
+              {children}
+              <AnimationComponent
+                animationType={ComponentAnimationType.componentFade}
+              >
+                <PlayerDetails
+                  isAudioPlayer
+                  configuration={configuration}
+                  style={Styles.playerDetails}
+                  entry={entry}
+                  isTabletLandscape={isTabletLandscape}
+                />
+              </AnimationComponent>
+            </View>
+          </View>
+        </AnimatedScrollModal>
+      </AnimationComponent>
+    </SafeAreaView>
+  );
 };

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import {
+  TABLET_VERTICAL_SEPARATOR_HEIGHT,
+  TABLET_VERTICAL_SEPARATOR_HEIGHT_S,
+} from "../const";
+
+import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
+
+const styles = StyleSheet.create({
+  flexingHeight: {
+    flex: 1,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeight: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeightSmall: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT_S,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+});
+
+export const VerticalGutter = () => {
+  const isTablet = useIsTablet();
+  const { height } = useSafeAreaFrame();
+
+  return (
+    <View
+      style={
+        isTablet
+          ? isSmallTabletHeight(height)
+            ? styles.fixedHeightSmall
+            : styles.fixedHeight
+          : styles.flexingHeight
+      }
+    />
+  );
+};