feat(agsV2): add osd

nixosModules/ags/default.nix

@@ -181,6 +181,10 @@ in {
                 ## Brightness control
                 ", XF86MonBrightnessUp  , exec, ${runAgsJs "'Brightness.screen += 0.05'"}"
                 ", XF86MonBrightnessDown, exec, ${runAgsJs "'Brightness.screen -= 0.05'"}"
+
+                ## Volume control
+                ", XF86AudioRaiseVolume , exec, wpctl set-volume -l 1 @DEFAULT_AUDIO_SINK@ 5%+ & ${runAgsJs "'popup_osd(\"speaker\")'"} &"
+                ", XF86AudioLowerVolume , exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%- & ${runAgsJs "'popup_osd(\"speaker\")'"} &"
               ];
               bindn = ["    , Escape   , exec, ${runAgsJs "'closeAll()'"}"];
               bindr = ["CAPS, Caps_Lock, exec, ${runAgsJs "'Brightness.fetchCapsState()'"}"];

nixosModules/ags/v2/app.ts

@@ -11,6 +11,7 @@ import Calendar from './widgets/date/main';
 import Corners from './widgets/corners/main';
 import IconBrowser from './widgets/icon-browser/main';
 import { NotifPopups, NotifCenter } from './widgets/notifs/main';
+import OSD from './widgets/osd/main';
 import PowerMenu from './widgets/powermenu/main';
 import Screenshot from './widgets/screenshot/main';
 
@@ -62,6 +63,7 @@ switch (CONF) {
                 IconBrowser();
                 NotifPopups();
                 NotifCenter();
+                OSD();
                 PowerMenu();
                 Screenshot();
 

nixosModules/ags/v2/services/brightness.ts

@@ -44,7 +44,7 @@ class Brightness extends GObject.Object {
             .catch(console.error);
     }
 
-    declare private _screenIcon: string;
+    private _screenIcon = 'display-brightness-high-symbolic';
 
     @property(String)
     get screenIcon() {
@@ -79,7 +79,7 @@ class Brightness extends GObject.Object {
         return this._capsLevel;
     }
 
-    declare private _capsIcon: string;
+    private _capsIcon = 'caps-lock-symbolic';
 
     @property(String)
     get capsIcon() {

nixosModules/ags/v2/style.scss

@@ -1,9 +1,35 @@
 @import 'colors.scss';
 
-window, viewport {
+window,
+viewport,
+stack {
     all: unset;
 }
 
+progressbar {
+    border-radius: 999px;
+    background: transparent;
+    border: none;
+
+    trough {
+        background: #363847;
+        min-height: inherit;
+        border-radius: inherit;
+        border: none;
+    }
+
+    progress {
+        background: #79659f;
+        min-height: inherit;
+        border-radius: inherit;
+        border: none;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+    }
+}
+
 .widget {
     margin: 10px;
     padding: 5px;
@@ -19,5 +45,6 @@ window, viewport {
 @import 'widgets/lockscreen/style.scss';
 @import 'widgets/misc/style.scss';
 @import 'widgets/notifs/style.scss';
+@import 'widgets/osd/style.scss';
 @import 'widgets/powermenu/style.scss';
 @import 'widgets/screenshot/style.scss';

nixosModules/ags/v2/widgets/osd/main.tsx

@@ -0,0 +1,177 @@
+import { bind, timeout } from 'astal';
+import { register } from 'astal/gobject';
+import { App, Astal, astalify, Gtk, Widget, type ConstructProps } from 'astal/gtk3';
+
+import AstalWp from "gi://AstalWp"
+
+import PopupWindow from '../misc/popup-window';
+import Brightness from '../../services/brightness';
+
+/* Types */
+declare global {
+    function popup_osd(osd: string): void;
+}
+@register()
+class ProgressBar extends astalify(Gtk.ProgressBar) {
+    constructor(props: ConstructProps<
+        ProgressBar,
+        Gtk.ProgressBar.ConstructorProps
+    >) {
+        super(props as any)
+    }
+}
+
+
+const HIDE_DELAY = 2000;
+const transition_duration = 300;
+
+export default () => {
+    let n_showing = 0;
+    let stack: Widget.Stack | undefined;
+
+    const popup = (osd: string) => {
+        if (!stack) {
+            return;
+        }
+
+        ++n_showing;
+        stack.shown = osd;
+
+        App.get_window('win-osd')?.set_visible(true);
+
+        timeout(HIDE_DELAY, () => {
+            --n_showing;
+
+            if (n_showing === 0) {
+                App.get_window('win-osd')?.set_visible(false);
+            }
+        });
+    }
+
+    globalThis.popup_osd = popup;
+
+    const speaker = AstalWp.get_default()?.audio.default_speaker!;
+    const microphone = AstalWp.get_default()?.audio.default_microphone!;
+
+    return (
+        <PopupWindow
+            name="osd"
+            anchor={Astal.WindowAnchor.BOTTOM}
+            exclusivity={Astal.Exclusivity.IGNORE}
+            close_on_unfocus="stay"
+            transition="slide bottom"
+        >
+            <stack
+                className="osd"
+                transitionDuration={transition_duration}
+                setup={(self) => {
+                    timeout(1000, () => {
+                        stack = self;
+                    });
+                }}
+            >
+
+                <box
+                    name="speaker"
+                    css="margin-bottom: 80px;"
+
+                    setup={(self) => {
+                        self.hook(speaker, 'notify::mute', () => {
+                            popup('speaker');
+                        });
+                    }}
+                >
+                    <box className="osd-item widget">
+                        <icon icon={bind(speaker, 'volumeIcon')} />
+
+                        <ProgressBar
+                            fraction={bind(speaker, 'volume')}
+                            sensitive={bind(speaker, 'mute').as((v) => !v)}
+                            valign={Gtk.Align.CENTER}
+                        />
+                    </box>
+                </box>
+
+                <box
+                    name="microphone"
+                    css="margin-bottom: 80px;"
+
+                    setup={(self) => {
+                        self.hook(microphone, 'notify::mute', () => {
+                            popup('microphone');
+                        });
+                    }}
+                >
+                    <box className="osd-item widget">
+                        <icon icon={bind(microphone, 'volumeIcon')} />
+
+                        <ProgressBar
+                            fraction={bind(microphone, 'volume')}
+                            sensitive={bind(microphone, 'mute').as((v) => !v)}
+                            valign={Gtk.Align.CENTER}
+                        />
+                    </box>
+                </box>
+
+                <box
+                    name="brightness"
+                    css="margin-bottom: 80px;"
+
+                    setup={(self) => {
+                        self.hook(Brightness, 'notify::screen-icon', () => {
+                            popup('brightness');
+                        });
+                    }}
+                >
+                    <box className="osd-item widget">
+                        <icon icon={bind(Brightness, 'screenIcon')} />
+
+                        <ProgressBar
+                            fraction={bind(Brightness, 'screen')}
+                            valign={Gtk.Align.CENTER}
+                        />
+                    </box>
+                </box>
+
+                <box
+                    name="keyboard"
+                    css="margin-bottom: 80px;"
+
+                    setup={(self) => {
+                        self.hook(Brightness, 'notify::kbd-level', () => {
+                            popup('keyboard');
+                        });
+                    }}
+                >
+                    <box className="osd-item widget">
+                        <icon icon="keyboard-brightness-symbolic" />
+
+                        <ProgressBar
+                            fraction={bind(Brightness, 'kbdLevel').as((v) => v / 2)}
+                            sensitive={bind(Brightness, 'kbdLevel').as((v) => v !== 0)}
+                            valign={Gtk.Align.CENTER}
+                        />
+                    </box>
+                </box>
+
+                <box
+                    name="caps"
+                    css="margin-bottom: 80px;"
+
+                    setup={(self) => {
+                        self.hook(Brightness, 'notify::caps-icon', () => {
+                            popup('caps');
+                        });
+                    }}
+                >
+                    <box className="osd-item widget">
+                        <icon icon={bind(Brightness, 'capsIcon')} />
+
+                        <label label="Caps Lock" />
+                    </box>
+                </box>
+
+            </stack>
+        </PopupWindow>
+    );
+};

nixosModules/ags/v2/widgets/osd/style.scss

@@ -0,0 +1,21 @@
+.osd {
+    .osd-item {
+        padding: 12px 20px;
+
+        label {
+            min-width: 170px;
+        }
+
+        progressbar {
+            min-height: 6px;
+            min-width: 170px;
+        }
+
+        icon {
+            font-size: 2rem;
+            color: white;
+            margin-left: -0.4rem;
+            margin-right: 0.8rem;
+        }
+    }
+}

nixosModules/desktop/environment/default.nix

@@ -185,11 +185,6 @@ in {
             "$mainMod, Print, exec, bash -c \"grim -g \\\"$(slurp)\\\" - | satty -f -\""
           ];
 
-          binde = [
-            ",XF86AudioRaiseVolume, exec, wpctl set-volume -l 1.5 @DEFAULT_AUDIO_SINK@ 5%+ & ags -r 'popup_osd(\"speaker\")' &"
-            ",XF86AudioLowerVolume, exec, wpctl set-volume @DEFAULT_AUDIO_SINK@ 5%- & ags -r 'popup_osd(\"speaker\")' &"
-          ];
-
           # Mouse Binds
           bindm = [
             "$mainMod, mouse:272, movewindow"