brightness and volume osds

2 files changed, 233 insertions, 1 deletions

diff --git a/modules/bar.tsx b/modules/bar.tsx
index b8e9f0b..933fa5e 100644
--- a/modules/bar.tsx
+++ b/modules/bar.tsx
@@ -7,6 +7,7 @@ import AstalNetwork from "gi://AstalNetwork";
 import AstalNotifd from "gi://AstalNotifd";
 import AstalTray from "gi://AstalTray";
 import { bar as config } from "../config";
+import type { Monitor } from "../services/monitors";
 import Players from "../services/players";
 import Updates from "../services/updates";
 import { getAppCategoryIcon } from "../utils/icons";
@@ -396,7 +397,7 @@ const Power = () => (
     />
 );
 
-export default ({ monitor }: { monitor: AstalHyprland.Monitor }) => (
+export default ({ monitor }: { monitor: Monitor }) => (
     <window
         namespace="caelestia-bar"
         monitor={monitor.id}
diff --git a/modules/osds.tsx b/modules/osds.tsx
new file mode 100644
index 0000000..25c0147
--- /dev/null
+++ b/modules/osds.tsx
@@ -0,0 +1,231 @@
+import { timeout, Variable, type Time } from "astal";
+import { Astal, Gtk, type Widget } from "astal/gtk3";
+import cairo from "cairo";
+import AstalWp from "gi://AstalWp";
+import Pango from "gi://Pango";
+import PangoCairo from "gi://PangoCairo";
+import { osds as config } from "../config";
+import { type Monitor } from "../services/monitors";
+import { PopupWindow } from "../utils/widgets";
+
+const getStyle = (context: Gtk.StyleContext, prop: string) => context.get_property(prop, Gtk.StateFlags.NORMAL);
+const getNumStyle = (context: Gtk.StyleContext, prop: string) => getStyle(context, prop) as number;
+
+const mix = (a: number, b: number, r: number) => a * r + b * (1 - r);
+
+const pangoWeightToStr = (weight: Pango.Weight) => {
+    switch (weight) {
+        case Pango.Weight.ULTRALIGHT:
+            return "UltraLight";
+        case Pango.Weight.LIGHT:
+            return "Light";
+        case Pango.Weight.BOLD:
+            return "Bold";
+        case Pango.Weight.ULTRABOLD:
+            return "UltraBold";
+        case Pango.Weight.HEAVY:
+            return "Heavy";
+        default:
+            return "Normal";
+    }
+};
+
+const SliderOsd = ({
+    fillIcons,
+    monitor,
+    type,
+    windowSetup,
+    className = "",
+    initValue,
+    drawAreaSetup,
+}: {
+    fillIcons?: boolean;
+    monitor: Monitor;
+    type: keyof typeof config;
+    windowSetup: (self: Widget.Window, hideAfterTimeout: () => void) => void;
+    className?: string;
+    initValue: number;
+    drawAreaSetup: (self: Widget.DrawingArea, icon: Variable<string>) => void;
+}) => (
+    <PopupWindow
+        name={type}
+        monitor={monitor.id}
+        keymode={Astal.Keymode.NONE}
+        anchor={config[type].position}
+        margin={config[type].margin}
+        setup={self => {
+            let time: Time | null = null;
+            const hideAfterTimeout = () => {
+                time?.cancel();
+                time = timeout(config[type].hideDelay, () => self.hide());
+            };
+            self.connect("show", hideAfterTimeout);
+            windowSetup(self, hideAfterTimeout);
+        }}
+    >
+        <box className={type}>
+            <drawingarea
+                className={`inner ${className}`}
+                css={"font-size: " + initValue + "px;"}
+                setup={self => {
+                    const halfPi = Math.PI / 2;
+                    const vertical =
+                        config[type].position === Astal.WindowAnchor.LEFT ||
+                        config[type].position === Astal.WindowAnchor.RIGHT;
+
+                    const icon = Variable("");
+                    drawAreaSetup(self, icon);
+
+                    // Init size
+                    const styleContext = self.get_style_context();
+                    const width = getNumStyle(styleContext, "min-width");
+                    const height = getNumStyle(styleContext, "min-height");
+                    if (vertical) self.set_size_request(height, width);
+                    else self.set_size_request(width, height);
+
+                    let fontDesc: Pango.FontDescription | null = null;
+
+                    self.connect("draw", (_, cr: cairo.Context) => {
+                        const styleContext = self.get_style_context();
+
+                        let width = getNumStyle(styleContext, "min-width");
+                        let height = getNumStyle(styleContext, "min-height");
+
+                        const progressValue = getNumStyle(styleContext, "font-size");
+                        let radius = getNumStyle(styleContext, "border-radius");
+                        // Flatten when near 0, do before swap cause its simpler
+                        radius = Math.min(radius, Math.min(width * progressValue, height) / 2);
+
+                        if (vertical) [width, height] = [height, width]; // Swap if vertical
+                        self.set_size_request(width, height);
+
+                        const progressPosition = vertical
+                            ? height * (1 - progressValue) + radius // Top is 0, but we want it to start from the bottom
+                            : width * progressValue - radius;
+
+                        const bg = styleContext.get_background_color(Gtk.StateFlags.NORMAL);
+                        cr.setSourceRGBA(bg.red, bg.green, bg.blue, bg.alpha);
+
+                        if (vertical) {
+                            cr.arc(radius, progressPosition, radius, -Math.PI, -halfPi); // Top left
+                            cr.arc(width - radius, progressPosition, radius, -halfPi, 0); // Top right
+                            cr.arc(width - radius, height - radius, radius, 0, halfPi); // Bottom right
+                        } else {
+                            cr.arc(radius, radius, radius, -Math.PI, -halfPi); // Top left
+                            cr.arc(progressPosition, radius, radius, -halfPi, 0); // Top right
+                            cr.arc(progressPosition, height - radius, radius, 0, halfPi); // Bottom right
+                        }
+                        cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left
+                        cr.fill();
+
+                        const parent = self.get_parent();
+                        if (parent) {
+                            if (fontDesc === null) {
+                                const pContext = parent.get_style_context();
+                                const families = (getStyle(pContext, "font-family") as string[]).join(",");
+                                const weight = pangoWeightToStr(getStyle(pContext, "font-weight") as Pango.Weight);
+                                const size = getNumStyle(pContext, "font-size");
+                                fontDesc = Pango.font_description_from_string(`${families} ${weight} ${size}px`);
+                                // Ugh GTK CSS doesn't support font-variations, so you need to manually create the layout and font desc instead of using Gtk.Widget#create_pango_layout
+                                if (fillIcons) fontDesc.set_variations("FILL=1");
+                            }
+
+                            const layout = PangoCairo.create_layout(cr);
+                            layout.set_font_description(fontDesc);
+                            layout.set_text(icon.get(), -1);
+
+                            const [w, h] = layout.get_pixel_size();
+                            let diff;
+                            if (vertical) {
+                                diff = (progressValue * height) / h;
+                                cr.moveTo((width - w) / 2, Math.min(height - h, progressPosition - h / 2 + radius));
+                            } else {
+                                diff = (progressValue * width) / w;
+                                cr.moveTo(Math.max(0, progressPosition - w / 2 - radius), (height - h) / 2);
+                            }
+                            diff = Math.max(0, Math.min(1, diff));
+
+                            const fg = styleContext.get_color(Gtk.StateFlags.NORMAL);
+                            cr.setSourceRGBA(
+                                mix(fg.red, bg.red, diff),
+                                mix(fg.green, bg.green, diff),
+                                mix(fg.blue, bg.blue, diff),
+                                mix(fg.alpha, bg.alpha, diff)
+                            );
+
+                            cr.setAntialias(cairo.Antialias.BEST);
+                            PangoCairo.show_layout(cr, layout);
+                        }
+                    });
+                }}
+            />
+        </box>
+    </PopupWindow>
+);
+
+const Volume = ({ monitor, audio }: { monitor: Monitor; audio: AstalWp.Audio }) => (
+    <SliderOsd
+        fillIcons
+        monitor={monitor}
+        type="volume"
+        windowSetup={(self, hideAfterTimeout) => {
+            self.hook(audio.defaultSpeaker, "notify::volume", () => {
+                self.show();
+                hideAfterTimeout();
+            });
+        }}
+        className={audio.defaultSpeaker.mute ? "mute" : ""}
+        initValue={audio.defaultSpeaker.volume}
+        drawAreaSetup={(self, icon) => {
+            const updateIcon = () => {
+                if (/head(phone|set)/i.test(audio.defaultSpeaker.icon)) icon.set("headphones");
+                else if (audio.defaultSpeaker.mute) icon.set("no_sound");
+                else if (audio.defaultSpeaker.volume === 0) icon.set("volume_mute");
+                else if (audio.defaultSpeaker.volume <= 0.5) icon.set("volume_down");
+                else icon.set("volume_up");
+            };
+            updateIcon();
+            self.hook(audio.defaultSpeaker, "notify::icon", updateIcon);
+            self.hook(audio.defaultSpeaker, "notify::mute", () => {
+                updateIcon();
+                self.toggleClassName("mute", audio.defaultSpeaker.mute);
+            });
+            self.hook(audio.defaultSpeaker, "notify::volume", () => {
+                updateIcon();
+                self.css = `font-size: ${audio.defaultSpeaker.volume}px`;
+            });
+        }}
+    />
+);
+
+const Brightness = ({ monitor }: { monitor: Monitor }) => (
+    <SliderOsd
+        monitor={monitor}
+        type="brightness"
+        windowSetup={(self, hideAfterTimeout) => {
+            self.hook(monitor, "notify::brightness", () => {
+                self.show();
+                hideAfterTimeout();
+            });
+        }}
+        initValue={monitor.brightness}
+        drawAreaSetup={(self, icon) => {
+            const update = () => {
+                if (monitor.brightness > 0.66) icon.set("brightness_high");
+                else if (monitor.brightness > 0.33) icon.set("brightness_medium");
+                else if (monitor.brightness > 0) icon.set("brightness_low");
+                else icon.set("brightness_empty");
+                self.css = `font-size: ${monitor.brightness}px`;
+            };
+            self.hook(monitor, "notify::brightness", update);
+            update();
+        }}
+    />
+);
+
+export default ({ monitor }: { monitor: Monitor }) => {
+    if (AstalWp.get_default()) <Volume monitor={monitor} audio={AstalWp.get_default()!.audio} />;
+    <Brightness monitor={monitor} />;
+
+    return null;
+};