feat: mpris support for waybar

waybar/config_top.jsonc

@@ -99,6 +99,17 @@
         "on-scroll-down": "mpc volume +1",
         "on-scroll-up": "mpc volume -1"
     },
+    "mpris": {
+        "format": "{player_icon} {dynamic}",
+        "format-paused": "{status_icon} <i>{dynamic}</i>",
+        "dynamic-order": ["artist", "title"],
+        "player-icons": {
+            "default": "▶"
+        },
+        "status-icons": {
+            "paused": "⏸"
+        }
+    },
     "clock": {
         "timezone": "Europe/Moscow",
         "interval": 5,

waybar/style/style_top.css

@@ -44,6 +44,7 @@ window#waybar.chromium {
    -------------------------------------------------------------------------- */
 /* Common styling applied to all modules */
 #mpd,
+#mpris,
 #custom-pomodoro,
 #clock,
 #battery,
@@ -118,7 +119,7 @@ window#waybar.chromium {
 /* --------------------------------------------------------------------------
    SIDE PANEL GROUPS
    -------------------------------------------------------------------------- */
-#mpd, .modules-center, .modules-right {
+#mpd, #mpris, .modules-center, .modules-right {
   /* Layout & Box Model */
   border: 1px solid @border-color;
   border-radius: 15px;
@@ -196,24 +197,24 @@ window#waybar.chromium {
 }
 
 /* MPD STATES */
-#mpd {
+#mpd, #mpris {
   transition: color 2s, background 2s;
 }
 
-#mpd.playing {
+#mpd.playing, #mpris.playing {
   color: @accent;
   font-weight: 700;
   /* color: @text-primary; */
 }
 
-#mpd.stopped {
+#mpd.stopped, #mrpis.stopped {
   color: transparent;
   background: transparent;
   border-color: transparent;
   transition: color 2s, background 2s;
 }
 
-#mpd.paused {
+#mpd.paused, #mpris.paused {
   font-weight: normal;
   color: @text-secondary;
 }
@@ -243,6 +244,8 @@ window#waybar.chromium {
    -------------------------------------------------------------------------- */
 #mpd.playing:hover,
 #mpd.paused:hover,
+#mpris.playing:hover,
+#mpris.paused:hover,
 #clock:hover,
 #battery:hover,
 #network:hover,