@applicaster/quick-brick-player 13.0.0-alpha.3592913150 → 13.0.0-alpha.3637360334

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.3592913150",
+  "version": "13.0.0-alpha.3637360334",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo 'skipping ts build for core packages'"
   },
   "files": [
@@ -36,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.3592913150",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.19",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3592913150",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3592913150",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3592913150",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.3637360334",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3637360334",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3637360334",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3637360334",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
@@ -61,12 +60,9 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "@types/node": "*",
-    "@types/react-native": "0.69.6",
     "immer": "*",
-    "react": "17.0.2",
-    "react-hot-loader": "*",
-    "react-native": "0.68.6",
+    "react": "*",
+    "react-native": "*",
     "react-native-fs": "*",
     "react-native-gesture-handler": "*",
     "react-native-linear-gradient": "*",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -55,6 +55,11 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
       return;
     }
 
+    // initial state setup - show correct mute/unmute icon based on current state
+    if (player?.playerState?.isReadyToPlay) {
+      setImageUri(player.getIsMuted() ? asset.active : asset.inactive);
+    }
+
     // active action = muted, inactive = unmuted
     return player.addListener({
       id: liveImageButtonsListenerKey,
@@ -73,10 +78,17 @@ const useMuteUnmuteListeners = (playerId, player, asset, setImageUri) =>
           setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
         onPlayerClose: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
         },
         onVideoEnd: () => {
-          setImageUri(null);
+          if (isCurrentPlayer(playerId)) {
+            setImageUri(null);
+          }
+        },
+        onPlayerResume: () => {
+          setImageUri(player?.getIsMuted() ? asset.active : asset.inactive);
         },
       },
     });
@@ -93,7 +105,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function AssetComponent(props: CellActionAssetComponentProps) {
+function AssetImage(props: CellActionAssetComponentProps) {
   const { cellUUID: playerId, asset } = props;
   const [imageUri, setImageUri] = useState<Asset>(null);
 
@@ -108,3 +120,5 @@ export function AssetComponent(props: CellActionAssetComponentProps) {
 
   return <View />;
 }
+
+export const AssetComponent = React.memo(AssetImage);

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, TextStyle, View } from "react-native";
+import { Text, TextStyle, View, StyleSheet } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
@@ -13,7 +13,9 @@ type AudioDescriptionProps = {
   value: GetValue;
 };
 
-const containerStyles = { paddingTop: 32, paddingBottom: 12 };
+const styles = StyleSheet.create({
+  container: {},
+});
 
 const titleStyles = (value: GetValue, prefix: string): TextStyle => ({
   textAlign: "left",
@@ -83,11 +85,11 @@ export const AudioDescription = (props: AudioDescriptionProps) => {
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Text style={titleStyles(value, prefix)} numberOfLines={1}>
         {title}
       </Text>
-      <Text style={summaryStyles(value, prefix)} numberOfLines={2}>
+      <Text style={summaryStyles(value, prefix)} numberOfLines={1}>
         {summary}
       </Text>
     </View>

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle, View } from "react-native";
+import { ViewStyle, View, Dimensions as ScreenDimensions } from "react-native";
 
 import { SafeAreaView, Edge } from "react-native-safe-area-context";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
@@ -17,13 +17,7 @@ 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,
-  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 {
@@ -31,8 +25,23 @@ import {
   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 {
+  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";
+import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -50,6 +59,7 @@ 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;
 };
@@ -71,8 +81,7 @@ type Props = {
   isTabletPortrait?: boolean;
 };
 
-export const defaultAspectRatioWidth = (height: number): number =>
-  (height / 9) * 16;
+const { width: SCREEN_WIDTH } = ScreenDimensions.get("screen");
 
 const Styles = {
   mainContainer: (style: ViewStyle) => {
@@ -98,7 +107,11 @@ const Styles = {
     height: 96,
     marginHorizontal: 24,
   },
-  playerDetails: { marginTop: 60 },
+  playerDetails: {
+    marginTop: 60,
+    alignSelf: "center",
+    width: SCREEN_WIDTH - PADDING_HORIZONTAL * 2,
+  },
 
   linearGradient: {
     flex: 1,
@@ -116,9 +129,12 @@ const sleeps = [
   { 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 theme = useTheme();
 
   const {
     docked,
@@ -132,11 +148,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 +170,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
+  );
+
+  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 [sleepTimerDate, setSleepTimerDate] = useState(0);
+  const [sleepTimerState, setSleepTimerState] = useState<SleepTimerState>(
+    new SleepTimerState(SLEEP_TIMER_OFF, 0)
+  );
 
   const [defaultDimensions, setDefaultDimensions] =
     React.useState<Dimensions>(undefined);
@@ -189,82 +217,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");
-
-      if (playerState.isReadyToPlay && speed) {
-        setPlaybackSpeed(speed);
-        player?.setPlaybackRate(speed.value);
-      }
-    };
+    const sleepSubscription =
+      sleepTimerManager?.sleepTimerState$.subscribe(setSleepTimerState);
 
-    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 +265,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,26 +280,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);
     },
-    [player, setSleepTimer]
+    [sleepTimerManager]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -341,15 +304,24 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [playbackSpeed, setPlaybackSpeed]);
+  }, [
+    playbackSpeed,
+    setPlaybackSpeed,
+    navigator,
+    onSpeedSelect,
+    configuration["playback_speed_title"],
+  ]);
 
   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: sleepTimer,
+        current_selection: sleepTimerState.timer,
         onPress: onSleepSelect,
         title: configuration["playback_sleep_title"],
       },
@@ -357,7 +329,21 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [sleepTimer, setSleepTimer, configuration]);
+  }, [
+    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]);
 
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
@@ -378,13 +364,9 @@ 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}>
+      <SafeAreaView style={Styles.mainContainer(style)} edges={edges}>
         <AnimationComponent
           animationType={ComponentAnimationType.moveUpComponent}
           additionalData={{ saveArea: true }}
@@ -406,9 +388,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}
@@ -437,7 +421,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
             </View>
           </AnimatedScrollModal>
         </AnimationComponent>
-      </ContainerView>
+      </SafeAreaView>
     );
   }, [
     docked,
@@ -458,26 +442,31 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
-    sleepTimer.value,
-    sleepTimerDate,
+    sleepTimerState.timer.value,
+    sleepTimerState.timerDate,
   ]);
 
   if (configuration.magic_background) {
-    const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
+    const baseUrl = imageSrcFromMediaItem(entry, null);
 
     const queryParamName =
       configuration.audio_player_background_image_query || "width";
 
+    const defaultBackgroundColor =
+      configuration.audio_player_background_image_default_color ||
+      theme?.app_background_color;
+
     const queryParamValue = 15;
 
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const url =
+      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
       <MagicBG
         image={url}
         fallbackUrl={baseUrl}
         colors={entry?.extensions?.backgroundColors}
-        defaultColor="#000000"
+        defaultColor={defaultBackgroundColor}
       >
         {MainContent}
       </MagicBG>

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

@@ -0,0 +1,26 @@
+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 } from "../const";
+
+import { withDebug } from "../debug";
+
+const styles = StyleSheet.create({
+  flexingHeight: {
+    flex: 1,
+
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeight: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+});
+
+export const VerticalGutter = () => {
+  const isTablet = useIsTablet();
+
+  return <View style={isTablet ? styles.fixedHeight : styles.flexingHeight} />;
+};