feat(style): blur window

Author: GeopJr

data/style.css

@@ -64,6 +64,10 @@ button.large {
 	background: none;
 }
 
+.main-box.osd {
+	border-radius: 15px;
+}
+
 .about .app-version{color:#fff;text-shadow:-1px -1px 0#000,1px -1px 0#000,-1px 1px 0#000,1px 1px 0#000;background:linear-gradient(150deg,#fdd81755 0,#66338b55 8.3%,#fff5 16.6%,#f4aec855 24.9%,#7bcce555 33.2%,#94551655 41.5%,#0005 49.8%,#e2201655 58.1%,#f2891755 66.4%,#efe52455 74.7%,#78b82a55 83%,#2c58a4 91.3%,#6d238055 100%);}
 .about .app-version:hover{background:radial-gradient(circle at 9.75% 50%,#0000 6.66%,#7902aa 6.7%,#0000 8.4%),conic-gradient(at 26.66% 50%,#0000 222.75deg,#ffd800 0 317.25deg,#0000 0),conic-gradient(at 33% 50%,#0000 222.75deg,white 0 317.25deg,#0000 0),conic-gradient(at 39% 50%,#0000 222.75deg,#ffa6b9 0 317.25deg,#0000 0),conic-gradient(at 45.66% 50%,#0000 222.75deg,#00d2ff 0 317.25deg,#0000 0),conic-gradient(at 52% 50%,#0000 222.75deg,#753000 0 317.25deg,#0000 0),conic-gradient(at 58.33% 50%,#0000 222.75deg,#000 0 317.25deg,#0000 0),linear-gradient(to bottom,#e40303,#e40303 16.67%,#ff8c00 16.67%,#ff8c00 33.33%,#ffed00 33.33%,#ffed00 50%,#008026 50%,#008026 66.67%,#004dff 66.67%,#004dff 83.33%,#750787 83.33%,#750787);}
 .theme-disability.about .app-version{background:linear-gradient(45deg,#59595955 0,#59595955 37.5%,#cf728055 37.5%,#cf728055 42.5%,#eede7755 42.5%,#eede7755 47.5%,#e8e8e855 47.5%,#e8e8e855 52.5%,#7bc2e055 52.5%,#7bc2e055 57.5%,#3bb07d55 57.5%,#3bb07d55 62.5%,#59595955 62.5%,#59595955 100%);}

src/Utils/Cli.vala

@@ -101,6 +101,7 @@ public class Turntable.Utils.CLI : GLib.Object {
 		scrobbling_manager.clear_queue ("1");
 		foreach (var binding in cli_player_bindings) {
 			binding.unbind ();
+			binding.unref ();
 		}
 		cli_player_bindings = {};
 

src/Views/Window.vala

@@ -24,12 +24,14 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	public enum Style {
 		WINDOW,
 		OSD,
-		TRANSPARENT;
+		TRANSPARENT,
+		BLUR;
 
 		public string to_string () {
 			switch (this) {
 				case OSD: return "osd";
 				case TRANSPARENT: return "transparent";
+				case BLUR: return "blur";
 				default: return "window";
 			}
 		}
@@ -38,6 +40,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 			switch (string_style.down ()) {
 				case "osd": return OSD;
 				case "transparent": return TRANSPARENT;
+				case "blur": return BLUR;
 				default: return WINDOW;
 			}
 		}
@@ -139,7 +142,12 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		get { return _window_style; }
 		set {
 			if (value != _window_style) {
+				// reset to initial state
 				switch (_window_style) {
+					case Style.BLUR:
+						prog.cover = null;
+						main_box.remove_css_class ("osd");
+						break;
 					case Style.WINDOW: break;
 					case Style.TRANSPARENT:
 						this.add_css_class ("csd");
@@ -155,6 +163,10 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 				string window_style_string = value.to_string ();
 
 				switch (_window_style) {
+					case Style.BLUR:
+						on_cover_changed ();
+						main_box.add_css_class ("osd");
+						return;
 					case Style.WINDOW: return;
 					case Style.TRANSPARENT:
 						this.remove_css_class ("csd");
@@ -370,7 +382,8 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 
 		main_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0) {
 			valign = CENTER,
-			halign = CENTER
+			halign = CENTER,
+			css_classes = {"main-box"}
 		};
 		art_pic = new Widgets.Cover () {
 			valign = Gtk.Align.START,
@@ -528,6 +541,14 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		};
 		click_gesture.pressed.connect (on_click);
 		prog.add_controller (click_gesture);
+
+		//  art_pic.bind_property ("cover", prog, "cover", SYNC_CREATE);
+		art_pic.notify["cover"].connect (on_cover_changed);
+	}
+
+	private void on_cover_changed () {
+		if (this.window_style != Style.BLUR) return;
+		prog.cover = art_pic.cover;
 	}
 
 	private void on_click () {

src/Widgets/ControlsOverlay.vala

@@ -221,6 +221,8 @@ public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
 		window_style_submenu_model.append (_("OSD"), "win.window-style('osd')");
 		// translators: window style name
 		window_style_submenu_model.append (_("Transparent"), "win.window-style('transparent')");
+		// translators: window style name
+		window_style_submenu_model.append (_("Blur"), "win.window-style('blur')");
 		// translators: menu entry that opens a submenu
 		style_submenu_model.append_submenu (_("Window"), window_style_submenu_model);
 

src/Widgets/ProgressBin.vala

@@ -160,16 +160,16 @@ public class Turntable.Widgets.ProgressBin : Adw.Bin {
 		}
 	}
 
-	private int32 _offset = 0;
-	public int32 offset {
-		get { return _offset; }
-		set {
-			if (_offset != value && value >= 0) {
-				_offset = value;
-				this.queue_draw ();
-			}
-		}
-	}
+	//  private int32 _offset = 0;
+	//  public int32 offset {
+	//  	get { return _offset; }
+	//  	set {
+	//  		if (_offset != value && value >= 0) {
+	//  			_offset = value;
+	//  			this.queue_draw ();
+	//  		}
+	//  	}
+	//  }
 
 	private Gtk.Orientation _orientation = Gtk.Orientation.HORIZONTAL;
 	public Gtk.Orientation orientation {
@@ -222,14 +222,63 @@ public class Turntable.Widgets.ProgressBin : Adw.Bin {
 			halign = Gtk.Align.END,
 			margin_end = 6,
 			margin_bottom = 6,
-			icon_size = Gtk.IconSize.LARGE
+			icon_size = Gtk.IconSize.LARGE,
+			can_target = false
 		};
 
 		overlay.add_overlay (client_icon_widget);
 		this.child = overlay;
 	}
 
+	private weak Gdk.Texture? _cover = null;
+	public weak Gdk.Texture? cover {
+		get { return _cover; }
+		set {
+			if (_cover != value) {
+				_cover = value;
+				this.queue_draw ();
+			}
+		}
+	}
+
 	public override void snapshot (Gtk.Snapshot snapshot) {
+		int height = this.get_height ();
+		int width = this.get_width ();
+
+		if (_cover != null && _cover is Gdk.Texture) {
+			snapshot.push_blur (20);
+			double ratio = _cover.get_intrinsic_aspect_ratio ();
+
+			if (ratio == 0) {
+				_cover.snapshot (snapshot, width, height);
+			} else {
+				double w = 0.0;
+				double h = 0.0;
+				double picture_ratio = (double) width / height;
+
+				if (ratio > picture_ratio) {
+					w = height * ratio;
+					h = height;
+				} else {
+					w = width;
+					h = width / ratio;
+				}
+
+				w = Math.ceil (w);
+				h = Math.ceil (h);
+
+				double x = (width - w) / 2;
+				double y = Math.floor (height - h) / 2;
+
+				snapshot.save ();
+				snapshot.translate (Graphene.Point () { x = (float) x - 20, y = (float) y - 20 });
+				_cover.snapshot (snapshot, w + 40, h + 40);
+				snapshot.restore ();
+			}
+
+			snapshot.pop ();
+		}
+
 		if (this.enabled && this.animation.value > 0) {
 			switch (this.orientation) {
 				case Gtk.Orientation.VERTICAL:
@@ -241,7 +290,7 @@ public class Turntable.Widgets.ProgressBin : Adw.Bin {
 								y = 0
 							},
 							size = Graphene.Size () {
-								height = (float) ((this.get_height () - this.offset) * this.animation.value) + this.offset,
+								height = (float) (height * this.animation.value),
 								width = this.get_width ()
 							}
 						}
@@ -256,8 +305,8 @@ public class Turntable.Widgets.ProgressBin : Adw.Bin {
 								y = 0
 							},
 							size = Graphene.Size () {
-								height = this.get_height (),
-								width = (float) ((this.get_width () - this.offset) * this.animation.value) + this.offset
+								height = height,
+								width = (float) (width * this.animation.value)
 							}
 						}
 					);