Add media playerctl in waybar

waybar/config

@@ -10,9 +10,22 @@
   "margin-bottom": 2,
   "height": 32,
   "modules-left": ["custom/launcher","sway/workspaces","cpu","memory","disk","sway/window"],
-  "modules-center": [],
+  "modules-center": ["custom/media"],
   "modules-right": ["custom/update_audio","sway/mode","custom/kernel","custom/network","pulseaudio","tray","clock","custom/power"],
 
+"custom/media": {
+    "format": " {} {icon}",
+    "return-type": "json",
+    "format-icons": {
+        "Playing": " ",
+        "Paused": " ",
+        "Stopped": " ",
+    },
+    "max-length":70,
+    "exec": "playerctl -a metadata --format '{\"text\": \"{{artist}} - {{markup_escape(title)}}\", \"tooltip\": \"{{playerName}} : {{markup_escape(title)}}\", \"alt\": \"{{status}}\", \"class\": \"{{status}}\"}'",
+    "on-click": "playerctl play-pause",
+    "interval": 1,
+},
   "keyboard-state": {
       "numlock": true,
       "capslock": true,

waybar/style.css

@@ -51,6 +51,7 @@ tooltip {
 #custom-window,
 #custom-eix,
 #custom-update,
+#custom-media,
 #disk,
 #tray {
   background-color: #1e222a;
@@ -106,6 +107,7 @@ tooltip {
   color: #34bfd0;
 }
 
+#custom-media,
 #disk {
   color: #34bfd0;
 }
@@ -145,7 +147,7 @@ tooltip {
 }
 
 #mode {
-  color: #0fa4bf;
+  color: #34bfd0;
 }
 
 #window {