fix: don't render empty audio controls section

adidahiya · Dec 16, 2024 · 1ed7147 · 1ed7147
1 parent 657d5e8
commit 1ed7147
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 25 deletions.
diff --git a/packages/raga-app/src/client/components/audioPlayer/audioPlayer.tsx b/packages/raga-app/src/client/components/audioPlayer/audioPlayer.tsx
@@ -29,7 +29,7 @@ export function AudioPlayer() {
 
   if (!hasSelectedTrack) {
     return (
-      <Center bd={{ base: 1, dark: 0 }} h={90}>
+      <Center bd={{ base: 1, dark: 0 }} h={110}>
         <EmptyState description="No track selected" />
       </Center>
     );

diff --git a/packages/raga-app/src/client/components/audioPlayer/audioPlayerControls.tsx b/packages/raga-app/src/client/components/audioPlayer/audioPlayerControls.tsx
@@ -3,20 +3,16 @@ import { ActionIcon, ButtonGroup, Group, Slider } from "@mantine/core";
 import { useCallback, useState } from "react";
 
 import { useOperationCallback } from "../../hooks";
-import { appStore } from "../../store/appStore";
 import { useAudioPlayerControls } from "../../store/selectors/useAudioPlayerControls";
 import styles from "./audioPlayerControls.module.scss";
 import useAudioPlayerHotkeys from "./useAudioPlayerHotkeys";
 
 export function AudioPlayerControls() {
   const { play, pause, isPlaying, setVolume } = useAudioPlayerControls();
-  const waveSurfer = appStore.use.waveSurfer();
-  const getSelectedTrackDef = appStore.use.getSelectedTrackDef();
   const [volumeSliderValue, setVolumeSliderValue] = useState(1);
 
   useAudioPlayerHotkeys();
 
-  const selectedTrack = getSelectedTrackDef();
   const handlePlay = useOperationCallback(play, [play]);
   const handlePause = pause;
   const handleVolumeChange = useCallback(
@@ -35,10 +31,6 @@ export function AudioPlayerControls() {
     setVolumeSliderValue(1);
   }, [setVolume, setVolumeSliderValue]);
 
-  if (waveSurfer === undefined || selectedTrack === undefined) {
-    return undefined;
-  }
-
   return (
     <Group gap={5} align="center">
       <ButtonGroup>

diff --git a/packages/raga-app/src/client/components/audioPlayer/audioPlayerNowPlaying.tsx b/packages/raga-app/src/client/components/audioPlayer/audioPlayerNowPlaying.tsx
@@ -1,30 +1,21 @@
+import type { TrackDefinition } from "@adahiya/raga-lib";
 import { Group, Text } from "@mantine/core";
 import NumberFlow from "@number-flow/react";
 import { useMemo } from "react";
 
 import { formatAudioDuration, getAudioMinutesAndSeconds } from "../../../common/format";
-import { appStore } from "../../store/appStore";
 import { useAudioPlayerControls } from "../../store/selectors/useAudioPlayerControls";
 import TrackRatingStars from "../trackTable/trackRatingStars";
 import styles from "./audioPlayerNowPlaying.module.scss";
 import useAudioPlayerHotkeys from "./useAudioPlayerHotkeys";
 
-export function AudioPlayerNowPlaying() {
+export function AudioPlayerNowPlaying({ selectedTrack }: { selectedTrack: TrackDefinition }) {
   const { currentTime, duration } = useAudioPlayerControls();
-  const waveSurfer = appStore.use.waveSurfer();
-  const getSelectedTrackDef = appStore.use.getSelectedTrackDef();
-
   useAudioPlayerHotkeys();
 
-  const selectedTrack = getSelectedTrackDef();
-
   const { minutes, seconds } = useMemo(() => getAudioMinutesAndSeconds(currentTime), [currentTime]);
   const formattedDuration = useMemo(() => formatAudioDuration(duration), [duration]);
 
-  if (waveSurfer === undefined || selectedTrack === undefined) {
-    return undefined;
-  }
-
   return (
     <Group gap={20} align="center">
       <Text component="span" className={styles.nowPlaying} title={selectedTrack.Artist}>

diff --git a/packages/raga-app/src/client/views/libraryView.tsx b/packages/raga-app/src/client/views/libraryView.tsx
@@ -64,15 +64,22 @@ export default function LibraryView() {
 
 function Library() {
   const selectedPlaylistId = appStore.use.selectedPlaylistId();
+  const waveSurfer = appStore.use.waveSurfer();
+  const getSelectedTrackDef = appStore.use.getSelectedTrackDef();
+  const selectedTrack = getSelectedTrackDef();
 
   return (
     <Paper w="100%" h="100%" shadow="sm" withBorder={true} radius="sm">
       <Stack gap={0} w="100%" h="100%">
-        <Group justify="space-between" p={5}>
-          <AudioPlayerNowPlaying />
-          <AudioPlayerControls />
-        </Group>
-        <Divider orientation="horizontal" />
+        {selectedTrack === undefined || waveSurfer === undefined ? null : (
+          <>
+            <Group justify="space-between" p={5}>
+              <AudioPlayerNowPlaying selectedTrack={selectedTrack} />
+              <AudioPlayerControls />
+            </Group>
+            <Divider orientation="horizontal" />
+          </>
+        )}
         <AudioPlayer />
         <Divider orientation="horizontal" />
         <PanelGroup direction="horizontal">