Switch to ags as bar and notification daemon

ags/config/media/Media.js

@@ -1,3 +1,5 @@
+import { GTK_ALIGN_CENTER, GTK_ALIGN_FILL } from '../constants.js'
+
 const mpris = await Service.import("mpris")
 const players = mpris.bind("players")
 
@@ -17,22 +19,130 @@ function lengthStr(length) {
 
 /** @param {import('types/service/mpris').MprisPlayer} player */
 function Player(player) {
-    return Widget.Label({ label: `${player.name}: ${player.cover_path}` })
+    const artists = player.bind("track_artists").transform(a => a.join(", "))
-    // return Widget.Overlay({
+
-    //     child: Widget.Box({
+    const playPause = Widget.Button({
-    //         class_name: "img",
+        className: "play-pause",
-    //         vpack: "start",
+        onClicked: () => player.playPause(),
-    //         css: player.bind("cover_path").transform(p => `background-image: url('${p}');`),
+        visible: player.bind("can_play"),
-    //     }),
+        child: Widget.Icon({
-    //     overlays: [
+            icon: player.bind("play_back_status").transform(s => {
-    //         Widget.Label({ label: player.name }),
+                switch (s) {
-    //     ],
+                    case "Playing": return PAUSE_ICON
-    // })
+                    case "Paused":
+                    case "Stopped": return PLAY_ICON
+                }
+            }),
+        }),
+    })
+
+    const prev = Widget.Button({
+        onClicked: () => player.previous(),
+        visible: player.bind("can_go_prev"),
+        child: Widget.Icon(PREV_ICON),
+    })
+
+    const next = Widget.Button({
+        onClicked: () => player.next(),
+        visible: player.bind("can_go_next"),
+        child: Widget.Icon(NEXT_ICON),
+    })
+
+    const positionSlider = Widget.Slider({
+        className: "position",
+        drawValue: false,
+        onChange: ({ value }) => player.position = value * player.length,
+        visible: player.bind("length").as(l => l > 0),
+        setup: self => {
+            function update() {
+                const value = player.position / player.length
+                self.value = value > 0 ? value : 0
+            }
+            self.hook(player, update)
+            self.hook(player, update, "position")
+            self.poll(1000, update)
+        },
+    })
+
+    const positionLabel = Widget.Label({
+        className: "position",
+        hpack: "start",
+        setup: self => {
+            const update = (_, time) => {
+                self.label = lengthStr(time || player.position)
+                self.visible = player.length > 0
+            }
+
+            self.hook(player, update, "position")
+            self.poll(1000, update)
+        },
+    })
+
+    const lengthLabel = Widget.Label({
+        className: "length",
+        hpack: "end",
+        visible: player.bind("length").transform(l => l > 0),
+        label: player.bind("length").transform(lengthStr),
+    })
+
+    return Widget.Overlay({
+        className: "player",
+        child: Widget.Box({
+            className: "bg-img",
+            vpack: "start",
+            css: player.bind("cover_path").transform(p => `background-image: url('${p}');`),
+        }),
+        overlays: [
+            Widget.Box({
+                className: "bg-cover"
+            }),
+            Widget.Box({
+                className: "overlay",
+                vertical: true,
+                halign: GTK_ALIGN_CENTER,
+                children: [
+                    Widget.Box({
+                        className: "info",
+                        vertical: true,
+                        children: [
+                            Widget.Label({ className: "title", label: player.bind("track_title") }),
+                            Widget.Label({ className: "album", label: player.bind("track_album") }),
+                            Widget.Label({ className: "artist", label: artists }),
+                        ],
+                    }),
+                    Widget.Box({
+                        vexpand: true,
+                    }),
+                    Widget.CenterBox({
+                        className: "controls",
+                        startWidget: positionLabel,
+                        centerWidget: Widget.Box({
+                            halign: GTK_ALIGN_CENTER,
+                            spacing: 20,
+                            children: [
+                                prev,
+                                playPause,
+                                next,
+                            ],
+                        }),
+                        endWidget: lengthLabel,
+                    }),
+                    positionSlider,
+                ],
+            })
+        ],
+    })
 }
 
 function MediaContent() {
+    const currentIdx = Variable(0);
+    const currentPlayer = Utils.merge([currentIdx.bind(), players], (currentIdx, players) => {
+        const idx = Math.min(currentIdx, players.length - 1);
+        return players[idx];
+    })
+
     return Widget.Box({
-        children: players.as(p => p.map(Player)),
+        children: currentPlayer.as(p => [Player(p)]),
     })
 }
 

ags/config/media/style.css

@@ -0,0 +1,59 @@
+.media > box {
+    border-radius: 5px;
+
+    background-color: transparent;
+    color: @ctp-text;
+}
+
+.media .player .bg-img {
+    border-radius: 5px;
+    min-width: 400px;
+    min-height: 200px;
+    background-size: cover;
+}
+
+.media .player .bg-cover {
+    background: linear-gradient(alpha(@ctp-base, 0.5), @ctp-base);
+}
+
+.media .player .overlay {
+    border-radius: 5px;
+    min-width: 400px;
+}
+
+.media .player .info {
+    padding: 10px;
+}
+
+.media .player .controls {
+    padding: 10px;
+}
+
+.media .player .info .title {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.media .player scale.position {
+    padding: 0;
+    border-radius: 0;
+    border: none;
+}
+
+.media .player scale.position trough {
+    min-height: 4px;
+    border-radius: 0;
+    border: none;
+    background-color: @ctp-overlay0;
+}
+
+.media .player scale.position highlight {
+    border-radius: 0;
+    border: none;
+    background-color: @ctp-lavender;
+}
+
+.media .player scale.position slider {
+    all: unset;
+}
+

ags/config/style.css

@@ -1,5 +1,6 @@
 @import url("colors.css");
 @import url("notifications/style.css");
+@import url("media/style.css");
 
 
 .bar > box {
@@ -10,7 +11,6 @@
     color: @ctp-text;
 }
 
-
 .clock .time {
     font-weight: bold;
     font-size: 1em;
@@ -20,10 +20,3 @@
     font-size: 0.8em;
 }
 
-.media > box {
-    padding: 10px;
-    border-radius: 5px;
-
-    background-color: alpha(@ctp-base, 0.95);
-    color: @ctp-text;
-}

home-manager/kalle-pc/kalle.nix

@@ -60,7 +60,7 @@
 
       autoStart = [
         # Bar
-        "${pkgs.dunst}/bin/dunst"
+        "${pkgs.ags}/bin/ags"
         "${pkgs.firefox}/bin/firefox"
         "${pkgs.discord}/bin/discord"
       ];
@@ -119,96 +119,6 @@
     wallpaperFolder = "/home/kalle/Pictures/Wallpapers";
   };
 
-  services.dunst = {
-    enable = true;
-    settings = {
-      global = {
-        monitor = 0;
-        follow = "none";
-        width = 300;
-        height = 300;
-        origin = "top-left";
-        offset = "10x10";
-        scale = 0;
-        notification_limit = 20;
-        progress_bar = true;
-        progress_bar_height = 10;
-        progress_bar_frame_width = 0;
-        progress_bar_min_width = 150;
-        progress_bar_max_width = 300;
-        progress_bar_corner_radius = 0;
-        icon_corner_radius = 0;
-        indicate_hidden = "yes";
-        transparency = "0.3";
-        separator_height = 2;
-        padding = 8;
-        horizontal_padding = 8;
-        text_icon_padding = 0;
-        frame_width = 0;
-        frame_color = "#aaaaaa";
-        gap_size = 10;
-        separator_color = "frame";
-        sort = "yes";
-        font = "Monospace 8";
-        line_height = 0;
-        markup = "full";
-        format = "<b>%s</b>\n%b";
-        alignment = "left";
-        vertical_alignment = "center";
-        show_age_threshold = 60;
-        ellipsize = "middle";
-        ignore_newline = "no";
-        stack_duplicates = true;
-        hide_duplicate_count = false;
-        show_indicators = "yes";
-        enable_recursive_icon_lookup = true;
-        icon_theme = "Adwaita";
-        icon_position = "left";
-        min_icon_size = 32;
-        max_icon_size = 128;
-        icon_path = "/usr/share/icons/gnome/16x16/status/:/usr/share/icons/gnome/16x16/devices/";
-        sticky_history = "yes";
-        history_length = 20;
-        dmenu = "/usr/bin/dmenu -p dunst:";
-        browser = "/usr/bin/xdg-open";
-        always_run_script = true;
-        title = "Dunst";
-        class = "Dunst";
-        corner_radius = 0;
-        ignore_dbusclose = false;
-        force_xwayland = false;
-        force_xinerama = false;
-        mouse_left_click = "close_current";
-        mouse_middle_click = "do_action, close_current";
-        mouse_right_click = "close_all";
-      };
-
-      experimental = {
-        per_monitor_dpi = false;
-      };
-
-
-      urgency_low = {
-        background = "#222222";
-        foreground = "#888888";
-        timeout = 10;
-      };
-
-      urgency_normal = {
-        background = "#285577";
-        foreground = "#ffffff";
-        timeout = 10;
-      };
-
-      urgency_critical = {
-        background = "#900000";
-        foreground = "#ffffff";
-        frame_color = "#ff0000";
-        timeout = 0;
-      };
-    };
-  };
-
   nixpkgs = {
     overlays = with outputs.overlays; [
       nvim-plugins
@@ -229,7 +139,6 @@
   home.packages = with pkgs; [
     discord
     vesktop
-    firefox
     chromium
     httpie
     kate
@@ -242,15 +151,21 @@
     difftastic
     sops
     (obsidian.override {
-      electron = pkgs.electron_29-bin;
+      electron = electron_29-bin;
     })
     unzip
     vlc
+    feishin
 
     cachix
   ];
 
   programs.home-manager.enable = true;
+
+  programs.firefox = {
+    enable = true;
+    nativeMessagingHosts = [ pkgs.plasma-browser-integration ];
+  };
   
   gtk = {
     enable = true;