feat: toggle controls (#85)

Reviewed-on: https://codeberg.org/GeopJr/Turntable/pulls/85

Author: GeopJr

data/dev.geopjr.Turntable.gresource.xml

@@ -25,6 +25,9 @@
     <file preprocess="xml-stripblanks" alias="playlist-repeat-song-symbolic.svg">icons/hicolor/symbolic/actions/playlist-repeat-song-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="playlist-consecutive-symbolic.svg">icons/hicolor/symbolic/actions/playlist-consecutive-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="background-app-ghost-symbolic.svg">icons/hicolor/symbolic/actions/background-app-ghost-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="dock-right-symbolic.svg">icons/hicolor/symbolic/actions/dock-right-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="dock-left-symbolic.svg">icons/hicolor/symbolic/actions/dock-left-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="dock-bottom-symbolic.svg">icons/hicolor/symbolic/actions/dock-bottom-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="settings-symbolic.svg">icons/hicolor/symbolic/actions/settings-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="network-server-symbolic.svg">icons/hicolor/symbolic/actions/network-server-symbolic.svg</file>
     <file preprocess="xml-stripblanks" alias="listenbrainz.svg">icons/hicolor/scalable/actions/listenbrainz.svg</file>

data/dev.geopjr.Turntable.gschema.xml

@@ -70,6 +70,9 @@
 			<default>[]</default>
 		</key>
 
+		<key name="collapsed-controls" type="b">
+			<default>false</default>
+		</key>
 		<key name="window-w" type="i">
 			<default>0</default>
 		</key>

data/icons/hicolor/symbolic/actions/dock-bottom-symbolic.svg

@@ -11,15 +11,15 @@ button.large {
 	margin: 16px;
 }
 
-.card-like.vertical {
+.card-like.vertical:not(.collapsed) {
 	margin-bottom: 0;
 }
 
-.card-like.horizontal:dir(ltr):not(.circular-art) {
+.card-like.horizontal:dir(ltr):not(.circular-art):not(.collapsed) {
 	margin-right: 0;
 }
 
-.card-like.horizontal:dir(rtl):not(.circular-art) {
+.card-like.horizontal:dir(rtl):not(.circular-art):not(.collapsed) {
 	margin-left: 0;
 }
 

data/icons/hicolor/symbolic/actions/dock-left-symbolic.svg

@@ -13,6 +13,7 @@ public class Turntable.Utils.Settings : GLib.Settings {
 	public bool mbid_required { get; set; }
 	public bool now_playing { get; set; }
 	public bool offline_scrobbling { get; set; }
+	public bool collapsed_controls { get; set; }
 	public string cover_size { get; set; }
 	public string text_size { get; set; }
 	public string cover_scaling { get; set; }
@@ -37,8 +38,9 @@ public class Turntable.Utils.Settings : GLib.Settings {
 		"component-center-text",
 		"now-playing",
 		"component-more-controls",
-		"client-icon-style",
-		"offline-scrobbling"
+		"offline-scrobbling",
+		"collapsed-controls",
+		"client-icon-style"
 	};
 
 	public Settings () {

data/icons/hicolor/symbolic/actions/dock-right-symbolic.svg

@@ -16,6 +16,23 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	GLib.SimpleAction component_more_controls_action;
 	public string uuid { get; private set; }
 
+	private bool _collapsed = false;
+	public bool collapsed {
+		get { return _collapsed; }
+		set {
+			if (_collapsed != value) {
+				settings.collapsed_controls =
+				_collapsed = value;
+				non_art_revealer.reveal_child = !value;
+				if (value) {
+					controls_overlay.add_css_class ("collapsed");
+				} else {
+					controls_overlay.remove_css_class ("collapsed");
+				}
+			}
+		}
+	}
+
 	~Window () {
 		update_player (null);
 		debug ("Destroying: %s", uuid);
@@ -301,6 +318,10 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		artist_label.force_width =
 		title_label.force_width = this.orientation == HORIZONTAL;
 
+		non_art_revealer.transition_type = this.orientation == HORIZONTAL
+			? (Gtk.Widget.get_default_direction () == Gtk.TextDirection.RTL ? Gtk.RevealerTransitionType.SLIDE_LEFT : Gtk.RevealerTransitionType.SLIDE_RIGHT)
+			: Gtk.RevealerTransitionType.SLIDE_DOWN;
+		controls_overlay.update_toggle_controls_icon ();
 		update_album_artist_title ();
 	}
 
@@ -386,7 +407,8 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 	Widgets.Marquee album_label;
 	Widgets.Cover art_pic;
 	Widgets.Tonearm tonearm;
-	Gtk.Box non_art_box;
+	//  Gtk.Box non_art_box;
+	Gtk.Revealer non_art_revealer;
 	Widgets.ProgressBin prog;
 	Gtk.Box main_box;
 	Widgets.ControlsOverlay controls_overlay;
@@ -413,22 +435,26 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		};
 		art_pic.notify["extracted-colors"].connect (update_extracted_colors);
 		controls_overlay = new Widgets.ControlsOverlay (art_pic);
+		controls_overlay.toggle_controls.connect (toggle_controls);
 
 		tonearm = new Widgets.Tonearm () {
 			halign = CENTER,
 			child = controls_overlay
 		};
 		main_box.append (tonearm);
 
-		non_art_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0) {
+		Gtk.Box 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 (non_art_box);
-
+		non_art_revealer = new Gtk.Revealer () {
+			child = non_art_box,
+			reveal_child = !settings.collapsed_controls
+		};
+		main_box.append (non_art_revealer);
 
 		title_label = new Widgets.Marquee () {
 			css_classes = {"title-2"},
@@ -655,6 +681,7 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		update_cover_scaling_from_settings ();
 		update_component_center_text_from_settings ();
 		update_component_more_controls_from_settings ();
+		this.collapsed = settings.collapsed_controls;
 	}
 
 	private void update_cover_scaling_from_settings () {
@@ -928,4 +955,8 @@ public class Turntable.Views.Window : Adw.ApplicationWindow {
 		if (value == null) return;
 		settings.component_cover_fit = value.get_boolean ();
 	}
+
+	private void toggle_controls () {
+		this.collapsed = !this.collapsed;
+	}
 }

data/style.css

@@ -1,4 +1,5 @@
 public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
+	public signal void toggle_controls ();
 	public signal void player_changed (Mpris.Entry? new_player);
 	public Mpris.Entry? last_player { get; set; default = null; }
 
@@ -73,6 +74,7 @@ public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
 	GLib.ListStore players_store;
 	Gtk.DropDown client_dropdown;
 	Gtk.MenuButton menu_button;
+	Gtk.Button toggle_controls_button;
 	#if SCROBBLING
 		ScrobbleButton scrobble_button;
 	#endif
@@ -262,6 +264,15 @@ public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
 			on_accounts_changed ();
 		#endif
 
+		toggle_controls_button = new Gtk.Button () {
+			css_classes = {"circular", "osd", "min34px"},
+			icon_name = "dock-right-symbolic",
+			// translators: tooltip for button that hides/shows all the media controls and labels
+			tooltip_text = _("Toggle Controls")
+		};
+		toggle_controls_button.clicked.connect (on_toggle_controls_button);
+		sub_box.append (toggle_controls_button);
+
 		menu_button = new Gtk.MenuButton () {
 			icon_name = "menu-large-symbolic",
 			primary = true,
@@ -289,6 +300,12 @@ public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
 		update_style (cover.style, cover.orientation);
 	}
 
+	public void update_toggle_controls_icon () {
+		toggle_controls_button.icon_name = settings.orientation_horizontal
+			? (Gtk.Widget.get_default_direction () == Gtk.TextDirection.RTL ? "dock-left-symbolic" : "dock-right-symbolic")
+			: "dock-bottom-symbolic";
+	}
+
 	private void on_state_flags_changed () {
 		bool should_reveal_child = (
 			this.get_state_flags ()
@@ -312,6 +329,10 @@ public class Turntable.Widgets.ControlsOverlay : Adw.Bin {
 		return true;
 	}
 
+	private void on_toggle_controls_button () {
+		toggle_controls ();
+	}
+
 	private void update_store () {
 		players_store.splice (0, players_store.n_items, mpris_manager.get_players ());
 		players_store.sort ((GLib.CompareDataFunc<Mpris.Entry>) compare_players);