cover art loading feedback etc

resources/play_queue.blp

@@ -28,13 +28,23 @@ template $AudreyUiPlayQueue: Adw.Bin {
           margin-start: 24;
           margin-end: 24;
 
-          Picture {
-            styles [ "playing-cover-art" ]
-
+          Overlay {
             valign: center;
 
-            halign: center;
-            paintable: bind template.playing-cover-art;
+            [overlay]
+            ProgressBar pulse_bar {
+              styles [ "osd" ]
+              valign: start;
+            }
+
+            child: Picture {
+              styles [ "playing-cover-art" ]
+
+              valign: center;
+
+              halign: center;
+              paintable: bind template.playing-cover-art;
+            };
           }
         }
 

resources/style.css

@@ -82,6 +82,11 @@ gridview.albums child image {
   box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 7px;
 }
 
+.loading-cover picture.playing-cover-art {
+  transition: 0.1s;
+  filter: grayscale(100%);
+}
+
 /* album carousel */
 .album-carousel listview {
   background-color: rgba(0,0,0,0);

src/ui/play_queue.rs

@@ -18,6 +18,10 @@ mod imp {
         _playlist_pos: Cell<i64>,
         #[property(get, set)]
         playing_cover_art: RefCell<Option<gdk::Paintable>>,
+
+        #[template_child]
+        #[property(get)]
+        pulse_bar: TemplateChild<gtk::ProgressBar>,
     }
 
     #[glib::object_subclass]

src/ui/window.rs

@@ -79,6 +79,7 @@ mod imp {
 
         loading_cover_handle: RefCell<Option<JoinHandle<()>>>,
 
+        cover_art_buffering: OnceCell<BufferingPulseController>,
         playbar_buffering: OnceCell<BufferingPulseController>,
 
         time_pos_notify_timeout: Cell<Option<glib::SourceId>>,
@@ -142,6 +143,7 @@ mod imp {
 
                 loading_cover_handle: Default::default(),
 
+                cover_art_buffering: Default::default(),
                 playbar_buffering: Default::default(),
 
                 time_pos_notify_timeout: Default::default(),
@@ -542,6 +544,11 @@ mod imp {
             )
         }
 
+        fn cover_art_buffering(&self) -> &BufferingPulseController {
+            self.cover_art_buffering
+                .get_or_init(|| BufferingPulseController::new(&self.play_queue.pulse_bar()))
+        }
+
         fn playbar_buffering(&self) -> &BufferingPulseController {
             self.playbar_buffering
                 .get_or_init(|| BufferingPulseController::new(&self.playbar.pulse_bar()))
@@ -688,6 +695,7 @@ mod imp {
             );
             self.obj().notify("duration");
 
+            self.cover_art_buffering().stop();
             self.obj().set_playing_cover_art(None::<gdk::Texture>);
             self.obj().set_background(None::<gdk::Texture>);
 
@@ -714,6 +722,7 @@ mod imp {
             event!(target: "audrey::playback", Level::DEBUG, "StartFile");
             self.obj().notify("song");
             self.playbar_buffering().start();
+            self.cover_art_buffering().start();
 
             let song = self.obj().song().unwrap();
 
@@ -725,6 +734,8 @@ mod imp {
             self.mpris_player_metadata_changed();
             self.mpris_player_playback_status_changed();
 
+            self.obj().add_css_class("loading-cover");
+
             let window = self.obj().clone();
             let scale_factor = self.obj().scale_factor().try_into().unwrap_or(1);
             let song_id = song.id();
@@ -778,7 +789,9 @@ mod imp {
                         Some(song) if song.id() == song_id => {
                             let texture = gdk::Texture::for_pixbuf(&pixbuf);
 
+                            window.remove_css_class("loading-cover");
                             window.set_playing_cover_art(Some(&texture.into()));
+                            window.imp().cover_art_buffering().stop();
 
                             // from amberol
                             let palette = color_thief::get_palette(