optimize binded buttons

- play
- repeat
- shuffle

data/ui/components/player/now-playing/view.blp

@@ -134,6 +134,7 @@ template $PlayerNowPlayingView : Adw.NavigationPage {
               styles [
                 "circular",
                 "large",
+                "flat",
               ]
             }
 
@@ -181,6 +182,7 @@ template $PlayerNowPlayingView : Adw.NavigationPage {
               styles [
                 "circular",
                 "large",
+                "flat",
               ]
             }
           }

src/components/player/full.ts

@@ -2,7 +2,6 @@ import Gtk from "gi://Gtk?version=4.0";
 import GObject from "gi://GObject";
 import GLib from "gi://GLib";
 
-import { RepeatMode } from "../../player/queue.js";
 import { PlayerScale } from "./scale.js";
 import { QueueTrack } from "libmuse/types/parsers/queue.js";
 import { escape_label, pretty_subtitles } from "src/util/text.js";
@@ -11,6 +10,7 @@ import { micro_to_string, seconds_to_string } from "src/util/time.js";
 import { PlayerPreview } from "./preview.js";
 import { SignalListeners } from "src/util/signal-listener.js";
 import { get_player } from "src/application.js";
+import { bind_play_icon, bind_repeat_button } from "src/player/helpers.js";
 
 GObject.type_ensure(PlayerPreview.$gtype);
 
@@ -38,11 +38,7 @@ export class FullPlayerView extends Gtk.ActionBar {
 
   _title!: Gtk.Label;
   _subtitle!: Gtk.Label;
-  _shuffle_button!: Gtk.ToggleButton;
-  _prev_button!: Gtk.Button;
-  _play_button!: Gtk.Button;
   _play_image!: Gtk.Image;
-  _next_button!: Gtk.Button;
   _repeat_button!: Gtk.ToggleButton;
   _progress_label!: Gtk.Label;
   _duration_label!: Gtk.Label;
@@ -93,33 +89,19 @@ export class FullPlayerView extends Gtk.ActionBar {
       this.song_changed.bind(this),
     );
 
-    this.listeners.connect(this.player, "notify::is-buffering", () => {
-      this.update_play_button();
-    });
-
-    this.listeners.connect(this.player, "notify::playing", () => {
-      this.update_play_button();
-    });
-
-    this.update_play_button();
+    this.listeners.add_bindings(
+      bind_play_icon(this._play_image),
+    );
 
     this.listeners.connect(this.player, "notify::duration", () => {
       this._duration_label.label = micro_to_string(this.player.duration);
     });
 
     // buttons
 
-    this.listeners.connect(this.player.queue, "notify::repeat", () => {
-      this.update_repeat_button();
-    });
-
-    this.update_repeat_button();
-
-    this.listeners.connect(this.player.queue, "notify::shuffle", () => {
-      this._shuffle_button.set_active(this.player.queue.shuffle);
-    });
-
-    this._shuffle_button.set_active(this.player.queue.shuffle);
+    this.listeners.add_bindings(
+      ...bind_repeat_button(this._repeat_button),
+    );
 
     // setting up volume button
 
@@ -172,37 +154,6 @@ export class FullPlayerView extends Gtk.ActionBar {
     });
   }
 
-  update_repeat_button() {
-    const repeat_mode = this.player.queue.repeat;
-
-    this._repeat_button.set_active(
-      repeat_mode === RepeatMode.ALL || repeat_mode === RepeatMode.ONE,
-    );
-
-    switch (repeat_mode) {
-      case RepeatMode.ALL:
-        this._repeat_button.icon_name = "media-playlist-repeat-symbolic";
-        this._repeat_button.tooltip_text = _("Repeat All Songs");
-        break;
-      case RepeatMode.ONE:
-        this._repeat_button.icon_name = "media-playlist-repeat-song-symbolic";
-        this._repeat_button.tooltip_text = _("Repeat the Current Song");
-        break;
-      case RepeatMode.NONE:
-        this._repeat_button.icon_name = "media-playlist-consecutive-symbolic";
-        this._repeat_button.tooltip_text = _("Enable Repeat");
-        break;
-    }
-  }
-
-  update_play_button() {
-    if (this.player.playing) {
-      this._play_image.icon_name = "media-playback-pause-symbolic";
-    } else {
-      this._play_image.icon_name = "media-playback-start-symbolic";
-    }
-  }
-
   show_song(track: QueueTrack) {
     // labels
 

src/components/player/mini.ts

@@ -7,6 +7,7 @@ import { QueueTrack } from "libmuse/types/parsers/queue.js";
 import { MuzikaPlayer } from "src/player";
 import { SignalListeners } from "src/util/signal-listener.js";
 import { get_player } from "src/application.js";
+import { bind_play_icon } from "src/player/helpers.js";
 
 export class MiniPlayerView extends Gtk.Overlay {
   static {
@@ -59,15 +60,9 @@ export class MiniPlayerView extends Gtk.Overlay {
       this.song_changed.bind(this),
     );
 
-    this.listeners.connect(this.player, "notify::buffering", () => {
-      this.update_play_button();
-    });
-
-    this.listeners.connect(this.player, "notify::playing", () => {
-      this.update_play_button();
-    });
-
-    this.update_play_button();
+    this.listeners.add_bindings(
+      bind_play_icon(this._play_button),
+    );
 
     this.listeners.connect(this.player, "notify::duration", () => {
       this.progress_bar.set_duration(this.player.duration);
@@ -82,17 +77,6 @@ export class MiniPlayerView extends Gtk.Overlay {
     this.progress_bar.update_position(this.player.timestamp);
   }
 
-  update_play_button() {
-    this.progress_bar.buffering = this.player.is_buffering &&
-      this.player.playing;
-
-    if (this.player.playing) {
-      this._play_button.icon_name = "media-playback-pause-symbolic";
-    } else {
-      this._play_button.icon_name = "media-playback-start-symbolic";
-    }
-  }
-
   show_song(track: QueueTrack) {
     this._title.label = track.title;
     this._subtitle.label = track.artists[0].name;

src/components/player/now-playing/view.ts

@@ -12,6 +12,7 @@ import { SignalListeners } from "src/util/signal-listener";
 import { load_thumbnails } from "src/components/webimage";
 import { micro_to_string } from "src/util/time";
 import { FixedRatioThumbnail } from "src/components/fixed-ratio-thumbnail";
+import { bind_play_icon, bind_repeat_button } from "src/player/helpers";
 
 export class PlayerNowPlayingView extends Adw.NavigationPage {
   static {
@@ -30,6 +31,7 @@ export class PlayerNowPlayingView extends Adw.NavigationPage {
         "play_button",
         "switcher_bar",
         "overlay_bin",
+        "repeat_button",
       ],
       Properties: {
         switcher_stack: GObject.param_spec_object(
@@ -65,6 +67,7 @@ export class PlayerNowPlayingView extends Adw.NavigationPage {
   private _play_button!: Gtk.Button;
   private _switcher_bar!: Adw.ViewSwitcherBar;
   private _overlay_bin!: Adw.Bin;
+  private _repeat_button!: Gtk.ToggleButton;
 
   get switcher_stack() {
     return this._switcher_bar.stack;
@@ -134,22 +137,8 @@ export class PlayerNowPlayingView extends Adw.NavigationPage {
         },
         null,
       ),
-      // @ts-expect-error incorrect types
-      this.player.bind_property_full(
-        "playing",
-        this._play_button,
-        "icon-name",
-        GObject.BindingFlags.DEFAULT | GObject.BindingFlags.SYNC_CREATE,
-        (_, __) => {
-          return [
-            true,
-            this.player.playing
-              ? "media-playback-pause-symbolic"
-              : "media-playback-start-symbolic",
-          ];
-        },
-        null,
-      ),
+      bind_play_icon(this._play_button),
+      ...bind_repeat_button(this._repeat_button),
     );
   }
 

src/components/player/video/full.ts

@@ -8,6 +8,7 @@ import { SignalListeners } from "src/util/signal-listener";
 import { micro_to_string, seconds_to_string } from "src/util/time";
 import { generate_song_menu } from "./util";
 import { VolumeControls } from "./volume-controls";
+import { bind_play_icon } from "src/player/helpers";
 
 export class FullVideoControls extends Adw.Bin {
   static {
@@ -94,18 +95,8 @@ export class FullVideoControls extends Adw.Bin {
       this.media_info_changed.bind(this),
     );
 
-    this.update_play_button();
-
-    this.listeners.connect(player, "notify::is-buffering", () => {
-      this.update_play_button();
-    });
-
-    this.listeners.connect(
-      player,
-      "notify::playing",
-      () => {
-        this.update_play_button();
-      },
+    this.listeners.add_bindings(
+      bind_play_icon(this._play_button),
     );
 
     this._duration_label.label = micro_to_string(player.duration);
@@ -139,17 +130,6 @@ export class FullVideoControls extends Adw.Bin {
     );
   }
 
-  private update_play_button() {
-    const player = get_player();
-
-
-    if (player.playing) {
-      this._play_button.icon_name = "media-playback-pause-symbolic";
-    } else {
-      this._play_button.icon_name = "media-playback-start-symbolic";
-    }
-  }
-
   clear_listeners() {
     this.inhibit_hide = false;
     this.listeners.clear();

src/components/player/video/mini.ts

@@ -7,6 +7,7 @@ import { SignalListeners } from "src/util/signal-listener";
 import { micro_to_string, seconds_to_string } from "src/util/time";
 import { generate_song_menu } from "./util";
 import { VolumeControls } from "./volume-controls";
+import { bind_play_icon } from "src/player/helpers";
 
 export class MiniVideoControls extends Adw.Bin {
   static {
@@ -92,18 +93,8 @@ export class MiniVideoControls extends Adw.Bin {
       this.media_info_changed.bind(this),
     );
 
-    this.update_play_button();
-
-    this.listeners.connect(player, "notify::is-buffering", () => {
-      this.update_play_button();
-    });
-
-    this.listeners.connect(
-      player,
-      "notify::playing",
-      () => {
-        this.update_play_button();
-      },
+    this.listeners.add_bindings(
+      bind_play_icon(this._play_button),
     );
 
     this._duration_label.label = micro_to_string(player.duration);
@@ -137,16 +128,6 @@ export class MiniVideoControls extends Adw.Bin {
     );
   }
 
-  private update_play_button() {
-    const player = get_player();
-
-    if (player.playing) {
-      this._play_button.icon_name = "media-playback-pause-symbolic";
-    } else {
-      this._play_button.icon_name = "media-playback-start-symbolic";
-    }
-  }
-
   clear_listeners() {
     this.inhibit_hide = false;
     this.listeners.clear();