feat: allow resizing (#65)

This was a quite a lot more work than what you'd believe. Things like the tonearm expected a static position that changed based on the cover size. Lot's of it was re-written to be more dynamic.

At the same time I did use the tonearm circle to hide the not-so-aligned arm but since I revisited the code with a clear mind, the maths were re-done and it now rotates from the correct origin point. That also allowed me to show the tonearm from the other side which makes it more realistic.

The turntable cover style wasn't calculated properly after all the attempts at fixing those fitting bugs. I now made it calculate the record vs art size dynamically which looks much better.

Some other styles and widgets had to change to better fit a more 'freeform' window size, like for example the fade/shadow style. The progress background would have an offset so it's started at the start of the fading but now that doesn't look that good when it's not at the edge so the offset was removed. It also used the window's border radius for styling but now it had to be backed-in since it's not always at the edge.

fix: #37

Author: GeopJr

data/dev.geopjr.Turntable.gschema.xml

@@ -46,10 +46,20 @@
 		<key name="scrobbler-allowlist" type="as">
 			<default>[]</default>
 		</key>
-    <key name="component-center-text" type="b">
+		<key name="component-center-text" type="b">
 			<default>false</default>
 		</key>
-    <key name="now-playing" type="b">
+		<key name="now-playing" type="b">
+			<default>false</default>
+		</key>
+
+		<key name="window-w" type="i">
+			<default>0</default>
+		</key>
+		<key name="window-h" type="i">
+			<default>0</default>
+		</key>
+		<key name="window-maximized" type="b">
 			<default>false</default>
 		</key>
 	</schema>

data/style.css

@@ -8,26 +8,26 @@ button.large {
 }
 
 .card-like {
-	margin-top: 16px;
-	margin-left: 16px;
+	margin: 16px;
 }
 
-.card-like.horizontal {
-	margin-right: 0px;
-	margin-bottom: 16px;
+.transparent .fade {
+	border-radius: 0;
 }
 
-.card-like:dir(rtl) {
-	margin-right: 16px;
+.fade.horizontal:dir(ltr) {
+	border-top-left-radius: 15px;
+	border-bottom-left-radius: 15px;
 }
 
-.card-like.horizontal:dir(rtl) {
-	margin-left: 0px;
+.fade.horizontal:dir(rtl) {
+	border-top-right-radius: 15px;
+	border-bottom-right-radius: 15px;
 }
 
-.card-like.vertical {
-	margin-right: 16px;
-	margin-bottom: 0px;
+.fade.vertical {
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
 }
 
 .bigger-label {

src/Application.vala

@@ -209,7 +209,9 @@ namespace Turntable {
 			// translators: Application metainfo for the app "Tuba". <https://github.com/GeopJr/Tuba>
 			about.add_other_app ("dev.geopjr.Tuba", _("Tuba"), _("Browse the Fediverse"));
 
+			this.active_window.resizable = false;
 			about.present (this.active_window);
+			about.closed.connect (((Views.Window) this.active_window).make_resizable);
 
 			GLib.Idle.add (() => {
 				var style = Utils.Celebrate.get_celebration_css_class (new GLib.DateTime.now ());

src/Views/Window.vala

@@ -85,7 +85,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 				}
 
 				update_orientation ();
-				update_offset ();
+				//  update_offset ();
 			}
 		}
 	}
@@ -215,6 +215,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		set {
 			if (this.length == 0) {
 				_position = 0;
+				tonearm.progress =
 				prog.progress = 0;
 			} else {
 				#if SCROBBLING
@@ -223,6 +224,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 					}
 				#endif
 				_position = value;
+				tonearm.progress =
 				prog.progress = (double)value / (double)this.length;
 			}
 		}
@@ -234,6 +236,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		set {
 			_length = value;
 
+			tonearm.progress =
 			prog.progress = value == 0 ? 0 : (double)this.position / (double)value;
 			#if SCROBBLING
 				if (value > 0) {
@@ -271,17 +274,6 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	}
 
 	private void update_orientation () {
-		switch (this.orientation) {
-			case Gtk.Orientation.VERTICAL:
-				this.default_width = 0;
-				this.default_height = this.cover_size == Size.SMALL ? 300 : 400;
-				break;
-			default:
-				this.default_width = 534;
-				this.default_height = 0;
-				break;
-		}
-
 		art_pic.orientation =
 		main_box.orientation =
 		prog.orientation = this.orientation;
@@ -310,31 +302,59 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 			if (value != art_pic.style ) {
 				art_pic.style = value;
 				art_pic.turntable_playing = this.playing;
-				update_offset ();
+				//  update_offset ();
 			}
 		}
 	}
 
-	private void update_offset () {
-		switch (this.cover_style) {
-			case Widgets.Cover.Style.SHADOW:
-				prog.offset = art_pic.size - (int32) (Widgets.Cover.FADE_WIDTH / 2);
-				break;
-			default:
-				prog.offset = 0;
-				break;
-		}
-	}
+	//  private void update_offset () {
+	//  	switch (this.cover_style) {
+	//  		case Widgets.Cover.Style.SHADOW:
+	//  			prog.offset = art_pic.size - (int32) (Widgets.Cover.FADE_WIDTH / 2);
+	//  			break;
+	//  		default:
+	//  			prog.offset = 0;
+	//  			break;
+	//  	}
+	//  }
 
 	private void update_extracted_colors () {
 		prog.extracted_colors = art_pic.extracted_colors;
 	}
 
+	private inline void setup_window_size () {
+		this.default_width = settings.get_int ("window-w");
+		this.default_height = settings.get_int ("window-h");
+		this.maximized = settings.get_boolean ("window-maximized");
+
+		this.notify["default-width"].connect (on_window_size_changed);
+		this.notify["default-height"].connect (on_window_size_changed);
+		this.notify["maximized"].connect (on_window_size_changed);
+	}
+
+	uint window_settings_timeout = 0;
+	private void on_window_size_changed () {
+		//  non_art_box.visible = settings.orientation_horizontal ? this.default_width > 452 : this.default_height > 423;
+		if (window_settings_timeout > 0) GLib.Source.remove (window_settings_timeout);
+		window_settings_timeout = GLib.Timeout.add (2 * 1000, update_window_size_settings, Priority.LOW);
+	}
+
+	private bool update_window_size_settings () {
+		settings.set_int ("window-h", this.default_height);
+		settings.set_int ("window-w", this.default_width);
+		settings.set_boolean ("window-maximized", this.maximized);
+
+		window_settings_timeout = 0;
+		return GLib.Source.REMOVE;
+	}
+
 	Mpris.Entry? player = null;
 	Widgets.Marquee artist_label;
 	Widgets.Marquee title_label;
 	Widgets.Marquee album_label;
 	Widgets.Cover art_pic;
+	Widgets.Tonearm tonearm;
+	Gtk.Box non_art_box;
 	Widgets.ProgressBin prog;
 	Gtk.Box main_box;
 	Gtk.Button button_play;
@@ -344,31 +364,37 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	construct {
 		this.uuid = GLib.Uuid.string_random ();
 		this.icon_name = Build.DOMAIN;
-		this.resizable = false;
 		this.title = Build.NAME;
 
-		this.default_width = 0;
-		this.default_height = 0;
+		setup_window_size ();
 		this.height_request = -1;
 		this.width_request = -1;
 
-		main_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
+		main_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0) {
+			valign = CENTER,
+			halign = CENTER
+		};
 		art_pic = new Widgets.Cover () {
 			valign = Gtk.Align.START,
 			halign = Gtk.Align.START
 		};
 		art_pic.notify["extracted-colors"].connect (update_extracted_colors);
 		controls_overlay = new Widgets.ControlsOverlay (art_pic);
-		main_box.append (controls_overlay);
 
-		var box2 = new Gtk.Box (Gtk.Orientation.VERTICAL, 0) {
+		tonearm = new Widgets.Tonearm () {
+			halign = CENTER,
+			child = controls_overlay
+		};
+		main_box.append (tonearm);
+
+		non_art_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0) {
 			hexpand = true,
 			margin_top = 16,
 			margin_bottom = 16,
 			margin_end = 16,
 			margin_start = 16
 		};
-		main_box.append (box2);
+		main_box.append (non_art_box);
 
 
 		title_label = new Widgets.Marquee () {
@@ -382,9 +408,9 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 			xalign = 0.0f
 		};
 
-		box2.append (title_label);
-		box2.append (artist_label);
-		box2.append (album_label);
+		non_art_box.append (title_label);
+		non_art_box.append (artist_label);
+		non_art_box.append (album_label);
 
 		prog = new Widgets.ProgressBin () {
 			content = main_box
@@ -396,7 +422,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 			halign = Gtk.Align.CENTER,
 			valign = Gtk.Align.CENTER,
 		};
-		box2.append (box3);
+		non_art_box.append (box3);
 
 		button_prev = new Gtk.Button.from_icon_name (is_rtl ? "skip-forward-large-symbolic" : "skip-backward-large-symbolic") {
 			css_classes = {"circular"},
@@ -520,8 +546,18 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 			account_manager.accounts_changed.connect (update_scrobble_status);
 		#endif
 
-		box2.state_flags_changed.connect (on_state_flags_changed);
+		non_art_box.state_flags_changed.connect (on_state_flags_changed);
 		art_pic.map.connect (on_mapped);
+
+		Gtk.GestureClick click_gesture = new Gtk.GestureClick () {
+			button = Gdk.BUTTON_PRIMARY
+		};
+		click_gesture.pressed.connect (on_click);
+		prog.add_controller (click_gesture);
+	}
+
+	private void on_click () {
+		if (controls_overlay.hide_overlay ()) this.focus_widget = null;
 	}
 
 	private void play_next () {
@@ -537,7 +573,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	}
 
 	private void on_mapped () {
-		update_offset ();
+		//  update_offset ();
 		art_pic.turntable_playing = this.playing;
 	}
 
@@ -639,7 +675,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	}
 
 	private void update_component_tonearm_from_settings () {
-		this.prog.tonearm_enabled = settings.component_tonearm;
+		this.tonearm.enabled = settings.component_tonearm;
 		component_tonearm_action.set_state (settings.component_tonearm);
 	}
 
@@ -663,10 +699,19 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 
 	#if SCROBBLING
 		private void open_scrobbling_setup () {
-			(new Views.ScrobblerSetup ()).present (this);
+			this.resizable = false;
+
+			var dlg = new Views.ScrobblerSetup ();
+			dlg.present (this);
+			dlg.closed.connect (make_resizable);
 		}
 	#endif
 
+	// hack to force present dialogs as windows
+	public void make_resizable () {
+		this.resizable = true;
+	}
+
 	GLib.Binding[] player_bindings = {};
 	private void update_player (Mpris.Entry? new_player) {
 		debug ("[%s] Player Changed", uuid);

src/Widgets/ControlsOverlay.vala

@@ -20,7 +20,7 @@ public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
 				this.css_classes = { "card", "circular-art", "card-like" };
 				break;
 			case SHADOW:
-				this.css_classes = {};
+				this.css_classes = { "fade" };
 				this.overlay.child.valign =
 				this.overlay.child.halign =
 				this.valign =

src/Widgets/Cover.vala

@@ -43,14 +43,15 @@ public class Turntable.Widgets.Cover : Gtk.Widget {
 	Graphene.Rect record_center_inner;
 
 	private void update_record_rects () {
+		int new_size = (int) (this.size * 0.666666666666);
 		record_center_inner = Graphene.Rect () {
 			origin = Graphene.Point () {
 				x = 0,
 				y = 0
 			},
 			size = Graphene.Size () {
-				width = 128 * this.scale_factor,
-				height = 128 * this.scale_factor
+				width = new_size * this.scale_factor,
+				height = new_size * this.scale_factor
 			}
 		};
 
@@ -408,6 +409,7 @@ public class Turntable.Widgets.Cover : Gtk.Widget {
 		set {
 			if (_size != value) {
 				_size = value;
+				update_record_rects ();
 				this.queue_resize ();
 			}
 		}
@@ -636,9 +638,7 @@ public class Turntable.Widgets.Cover : Gtk.Widget {
 				x = - translation_point.x,
 				y = - translation_point.y
 			});
-		}
-
-		if (this.style == Style.SHADOW) {
+		} else if (this.style == Style.SHADOW) {
 			snapshot.push_mask (Gsk.MaskMode.INVERTED_ALPHA);
 
 			if (this.orientation == Gtk.Orientation.HORIZONTAL) {

src/Widgets/Marquee.vala

@@ -112,13 +112,13 @@ public class Turntable.Widgets.Marquee : Gtk.Widget {
 		out int minimum_baseline,
 		out int natural_baseline
 	) {
+		label.measure (orientation, for_size, out minimum, out natural, out minimum_baseline, out natural_baseline);
+
 		if (orientation == Gtk.Orientation.HORIZONTAL) {
 			minimum = 0;
-			natural = this.width_pixels;
+			natural = int.min (308, natural);
 			minimum_baseline = -1;
 			natural_baseline = -1;
-		} else {
-			label.measure (orientation, for_size, out minimum, out natural, out minimum_baseline, out natural_baseline);
 		}
 	}