Improved CSS significantly

src-tauri/src/wrappers.rs

@@ -37,7 +37,7 @@ pub async fn pause(app: AppHandle<Wry>, ctrl_handle: State<'_, ControllerHandle>
 
 #[tauri::command]
 pub async fn set_volume(ctrl_handle: State<'_, ControllerHandle>, volume: String) -> Result<(), String> {
-    let volume = volume.parse::<f32>().unwrap() / 1000.0;
+    let volume = volume.parse::<f32>().unwrap() / 100.0;
     ctrl_handle.player_mail.send(dmp_core::music_controller::controller::PlayerCommand::SetVolume(volume)).await.unwrap();
     let PlayerResponse::Empty = ctrl_handle.player_mail.recv().await.unwrap() else {
         unreachable!()

src/App.css

@@ -1,6 +1,11 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
 .container {
   position: absolute;
-  top: -1px;
+  top: 0px;
   left: 0;
   height: 100%;
   width: 100%;
@@ -11,34 +16,66 @@
 }
 
 .leftSide {
-  width: 80%;
+  flex-shrink: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.rightSide {
-  position: relative;
-  align-self:flex-end;
-  width: 20%;
-  height: 100%;
-  background-color: #c1bcd1;
-  display: flex;
-  flex-direction: column;
-}
+
+.rightSide {
+  display: flex;
+  flex-grow: 2;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+
+  align-self: flex-end;
+  height: 100%;
+  background-color: #c1bcd1;
+
+  /* Change to resize width */
+  min-width: 380px;
+  width: 380px;
+}
 
 .playlistHead {
   position: relative;
-  height: 3.5%;
+  height: 40px;
   width: 100%;
   background-color: #876765;
 }
 
 .mainView {
   background-color: #f5eab2;
-  height: 91.5%;
+  height: 100%;
   overflow-y: scroll;
 }
 
+.mainView > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.song {
+  display: grid;
+  cursor: default;
+
+  /* This needs to be adjusted when adding or removing columns */
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 30px;
+
+  /* For tags */
+  p {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.song:hover {
+  background-color: grey;
+}
+
 #playBar {
   position:relative;
   bottom: 0;
@@ -53,24 +90,37 @@
   display: flex;
   justify-content: space-around;
 }
+
 #seekBar {
   width: 100%;
 }
 
 .nowPlaying {
-  text-align: center;
-  height: 25%;
+  font-size: 14pt;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  margin-bottom: 5px;
+
+  p, h3 {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
-#nowPlayingArtwork {
-  width: 90%;
+
+  img {
+    aspect-ratio: 1;
+    object-fit: contain;
+    width: 100%;
     padding: 5%;
+    display: block;
+    box-sizing: border-box;
+  }
 }
 
 .Queue {
   position: relative;
-  bottom: -25%;
   background-color: burlywood;
-  height: 50%;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
@@ -83,23 +133,32 @@
 }
 
 .queueSong {
-  height: 15%;
-  width: 90%;
+  height: 100px;
+  width: 100%;
   display: flex;
 }
 
 .queueSongCoverArt {
-  width: 25%;
-  height: 100%;
+  aspect-ratio: 1;
+  object-fit: contain;
+  max-width: 75px;
+  padding: 5px;
+  box-sizing: border-box;
 }
 
 .queueSongTags {
   display: flex;
   flex-direction: column;
+  margin: 0;
+  margin-left: 5px;
+  font-size: 14pt;
+  padding: 5px 0;
+
+  p:first-child {
+    font-weight: bold;
   }
 
-.song {
-  display: flex;
-  justify-content: left;
-  gap: 1%;
+  p {
+    margin: 0;
+  }
 }

src/App.tsx

@@ -249,18 +249,24 @@ function Song(props: SongProps) {
   // console.log(props.tags);
 
   return(
-    <div className="song">
+    <div onClick={() => {
+      invoke("play_now", { uuid: props.uuid, location: props.playerLocation }).then(() => {})
+    }} className="song">
       <p className="title">{ props.tags.TrackTitle }</p>
-      <p className="album">{ props.tags.Album }</p>
+      <p className="album">{ props.tags.AlbumTitle }</p>
       <p className="artist">{ props.tags.AlbumArtist }</p>
-      <p className="duration">{ props.duration }</p>
-      <button onClick={(_) => {
+      <p className="duration">
+        { Math.round(+props.duration / 60) }:
+        { (+props.duration % 60).toString().padStart(2, "0") }
+      </p>
+
+      {/*<button onClick={(_) => {
         invoke('add_song_to_queue', { uuid: props.uuid, location: props.playerLocation }).then(() => {} )
       }}
       >Add to Queue</button>
       <button onClick={() => {
         invoke("play_now", { uuid: props.uuid, location: props.playerLocation }).then(() => {})
-      }}>Play Now</button>
+      }}>Play Now</button>*/}
     </div>
   )
 }
@@ -304,7 +310,7 @@ function NowPlaying({ title, artist, album, artwork }: NowPlayingProps) {
   return (
     <section className="nowPlaying">
         { artwork }
-      <h2>{ title }</h2>
+      <h3>{ title }</h3>
       <p>{ artist }</p>
       <p>{ album }</p>
     </section>
@@ -334,8 +340,8 @@ function QueueSong({ song }: QueueSongProps) {
       <div className="queueSong">
       <img className="queueSongCoverArt" src={ convertFileSrc('abc') + '?' + song.uuid } key={ 'coverArt_' + song.uuid }/>
       <div className="queueSongTags">
-        <h3 className="queueSongTitle">{ song.tags.TrackTitle }</h3>
-        <h4 className="queueSongArtist">{ song.tags.TrackArtist }</h4>
+        <p className="queueSongTitle">{ song.tags.TrackTitle }</p>
+        <p className="queueSongArtist">{ song.tags.TrackArtist }</p>
       </div>
     </div>
     // </button>