Ui imporovemnts

assets/pause.svg

@@ -1,6 +1,56 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#FFFFFF" stroke-width="2"/>
+
-<path d="M14 9L14 15" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg
-<path d="M10 9L10 15" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="pause2.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#ffffff"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="18.296388"
+     inkscape:cx="20.222571"
+     inkscape:cy="14.046488"
+     inkscape:window-width="1898"
+     inkscape:window-height="1037"
+     inkscape:window-x="10"
+     inkscape:window-y="10"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;stroke-width:1.35128"
+       id="rect1"
+       width="9.1821404"
+       height="31.973524"
+       x="0.054655612"
+       y="0.1093111" />
+    <rect
+       style="fill:#ffffff;stroke-width:1.35128"
+       id="rect1-5"
+       width="9.1821404"
+       height="31.973524"
+       x="22.809692"
+       y="0.091137752" />
+  </g>
 </svg>

assets/play.svg

@@ -1,12 +1,59 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg fill="#FFFFFF" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+
-	 viewBox="0 0 60 60" xml:space="preserve">
+<svg
-<g>
+   width="32"
-	<path d="M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30
+   height="32"
-		c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15
+   viewBox="0 0 32 32"
-		C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z"/>
+   version="1.1"
-	<path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30
+   id="svg1"
-		S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>
+   sodipodi:docname="play2.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#ffffff"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#FFFFFF"
+     inkscape:document-units="px"
+     inkscape:zoom="18.296388"
+     inkscape:cx="20.222571"
+     inkscape:cy="14.046488"
+     inkscape:window-width="1898"
+     inkscape:window-height="1037"
+     inkscape:window-x="10"
+     inkscape:window-y="10"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="fill:#ffffff"
+       id="path1"
+       inkscape:flatsided="false"
+       sodipodi:sides="3"
+       sodipodi:cx="1.004831"
+       sodipodi:cy="6.8019323"
+       sodipodi:r1="22.598255"
+       sodipodi:r2="11.299128"
+       sodipodi:arg1="1.0471976"
+       sodipodi:arg2="2.0943951"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 12.303958,26.372596 -4.6447328,16.587264 -21.593424,6.8019312 -4.6447329,-2.9833992 12.303959,-12.76873 l 0,19.5706623 z"
+       inkscape:transform-center-x="-5.3338952"
+       transform="matrix(-0.94412506,0,0,0.81752476,11.623548,10.454857)" />
   </g>
 </svg>

assets/stop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-320h320v-320H320v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

xmpd-gui/src/components/player.rs

@@ -1,11 +1,12 @@
-use egui::{Stroke, Vec2};
+use egui::{Sense, Stroke, Vec2};
 
 use super::{CompGetter, CompUi};
 
 
 #[derive(Debug, Default)]
 pub struct Player {
-    slider_progress: usize
+    slider_progress: usize,
+    is_playing: bool,
 }
 
 component_register!(Player);
@@ -29,23 +30,37 @@ impl CompUi for Player {
                     };
                     ui.style_mut().visuals.widgets.inactive.fg_stroke = s;
                     ui.style_mut().visuals.widgets.active.fg_stroke = s;
+                    ui.style_mut().visuals.widgets.hovered.fg_stroke = s;
                     ui.add(slider);
                     ui.label("00:00");
                 }
             });
             ui.horizontal(|ui| {
                 ui.add_space((avail.x / 2.0) - 16.0 - 8.0 - ui.spacing().item_spacing.x);
+                let pp = if handle_error_ui!(Player::get()).is_playing {
+                    crate::data::PAUSE_ICON
+                } else {
+                    crate::data::PLAY_ICON
+                };
+
+
                 let prev = egui::Image::new(crate::data::PREV_ICON)
                     .tint(crate::data::C_ACCENT)
+                    .sense(Sense::click())
                     .max_size(Vec2::new(16.0, 16.0));
-                let play = egui::Image::new(crate::data::PLAY_ICON)
+                let pp = egui::Image::new(pp)
                     .tint(crate::data::C_ACCENT)
+                    .sense(Sense::click())
                     .max_size(Vec2::new(16.0, 16.0));
                 let next = egui::Image::new(crate::data::NEXT_ICON)
                     .tint(crate::data::C_ACCENT)
+                    .sense(Sense::click())
                     .max_size(Vec2::new(16.0, 16.0));
                 if ui.add(prev).clicked() {}
-                if ui.add(play).clicked() {}
+                if ui.add(pp).clicked() {
+                    let mut slf = handle_error_ui!(Player::get());
+                    slf.is_playing = !slf.is_playing;
+                }
                 if ui.add(next).clicked() {}
             });
             ui.add_space(3.0);

xmpd-gui/src/components/song_list.rs

@@ -1,4 +1,4 @@
-use egui::{Color32, Vec2};
+use egui::{Color32, RichText, Vec2};
 use xmpd_manifest::store::BaseStore;
 
 use super::CompUi;
@@ -13,6 +13,7 @@ impl CompUi for SongList {
     fn draw(ui: &mut egui::Ui, state: &mut crate::GuiState) -> crate::Result<()> {
         egui::ScrollArea::vertical().id_source("song_list").show(ui, |ui| {
             ui.vertical(|ui| {
+                ui.add_space(3.0);
                 let songs = state.manifest.store().get_songs();
                 for (sid, song) in songs.iter() {
                     ui.horizontal(|ui| {
@@ -21,9 +22,14 @@ impl CompUi for SongList {
                                 .tint(crate::data::C_ACCENT)
                                 .fit_to_exact_size(Vec2::new(32.0, 32.0))
                         );
-                        ui.label(song.author());
+                        ui.vertical(|ui| {
-                        ui.strong(" - ");
                             ui.label(song.name());
+                            ui.monospace(
+                                RichText::new(song.author())
+                                    .color(crate::data::C_TEXT_DIM)
+                                    .size(10.0)
+                            );
+                        });
                     });
                     ui.separator();
                 }

xmpd-gui/src/data.rs

@@ -14,5 +14,5 @@ pub const C_ACCENT: egui::Color32 = egui::Color32::from_rgb(5, 102, 146); // #05
 pub const C_PRIM_BG: egui::Color32 = egui::Color32::from_rgb(31, 34, 40); // #1F2228
 pub const C_SEC_BG: egui::Color32 = egui::Color32::from_rgb(47, 53, 61);  // #2f353d
 pub const C_TEXT: egui::Color32 = egui::Color32::from_rgb(223, 223, 223);  //  #dfdfdf
-
+pub const C_TEXT_DIM: egui::Color32 = egui::Color32::from_rgb(175, 175, 175 );  //  #afafaf
 

xmpd-gui/src/main_window.rs

@@ -13,16 +13,19 @@ pub fn draw(ui: &mut egui::Ui, state: &mut GuiState) -> crate::Result<()> {
         handle_error_ui!(crate::components::top_nav::TopNav::draw(ui, state));
         crate::utils::super_separator(ui, crate::data::C_ACCENT, avail.x, 2.0);
         let avail = ui.available_size();
+        let main_height = avail.y * 0.91;
 
         ui.horizontal(|ui| {
-            ui.set_height(avail.y);  
+            ui.set_height(main_height);  
             ui.group(|ui| {
-                ui.set_height(avail.y);
+                ui.set_height(main_height);
                 ui.set_width(avail.x * 0.25);
                 handle_error_ui!(crate::components::left_nav::LeftNav::draw(ui, state));
             });
+            ui.group(|ui| {
                 handle_error_ui!(crate::components::song_list::SongList::draw(ui, state));
             });
+        });
         egui::TopBottomPanel::new(egui::panel::TopBottomSide::Bottom, "player")
             .frame(
                 egui::Frame::none()