Added on-screen-displays to indicate volume and brightness changes. (#34)

* Resolves #13 - Added on-screen-displays to indicate volume and brightness changes.

* <3 Aylur

* Update brightness logic for osd

* Update brightness labels

* Fixed typos in the settings menu component.

* Added options to toggle OSD and change its orientation.

modules/menus/energy/brightness/index.ts

@@ -33,20 +33,20 @@ const Brightness = () => {
                         Widget.Slider({
                             vpack: "center",
                             vexpand: true,
-                            value: brightness.bind("screen_value"),
+                            value: brightness.bind("screen"),
                             class_name: "menu-active-slider menu-slider brightness",
                             draw_value: false,
                             hexpand: true,
                             min: 0,
                             max: 1,
-                            onChange: ({ value }) => (brightness.screen_value = value),
+                            onChange: ({ value }) => (brightness.screen = value),
                         }),
                         Widget.Label({
                             vpack: "center",
                             vexpand: true,
                             class_name: "brightness-slider-label",
                             label: brightness
-                                .bind("screen_value")
+                                .bind("screen")
                                 .as((b) => `${Math.floor(b * 100)}%`),
                         }),
                     ],

modules/osd/bar/index.ts

@@ -0,0 +1,29 @@
+import { OSDOrientation } from "lib/types/options";
+import brightness from "services/Brightness"
+const audio = await Service.import("audio")
+
+export const OSDBar = (ort: OSDOrientation) => {
+    return Widget.Box({
+        class_name: "osd-bar-container",
+        children: [
+            Widget.LevelBar({
+                class_name: "osd-bar",
+                vertical: ort === "vertical",
+                inverted: ort === "vertical",
+                bar_mode: "continuous",
+                setup: self => {
+                    self.hook(brightness, () => {
+                        self.value = brightness.screen;
+                    }, "notify::screen")
+                    self.hook(brightness, () => {
+                        self.value = brightness.kbd;
+                    }, "notify::kbd")
+                    self.hook(audio, () => {
+                        self.toggleClassName("overflow", audio.speaker.volume > 1)
+                        self.value = audio.speaker.volume <= 1 ? audio.speaker.volume : audio.speaker.volume - 1;
+                    })
+                }
+            })
+        ]
+    });
+}

modules/osd/icon/index.ts

@@ -0,0 +1,28 @@
+import { OSDOrientation } from "lib/types/options";
+import brightness from "services/Brightness"
+const audio = await Service.import("audio")
+
+export const OSDIcon = (ort: OSDOrientation) => {
+    return Widget.Box({
+        class_name: "osd-icon-container",
+        hexpand: true,
+        child: Widget.Label({
+            class_name: "osd-icon",
+            hexpand: true,
+            vexpand: true,
+            hpack: "center",
+            vpack: "center",
+            setup: self => {
+                self.hook(brightness, () => {
+                    self.label = "󱍖";
+                }, "notify::screen")
+                self.hook(brightness, () => {
+                    self.label = "󰥻";
+                }, "notify::kbd")
+                self.hook(audio, () => {
+                    self.label = audio.speaker.is_muted ? "󰝟" : "󰕾";
+                })
+            }
+        })
+    });
+}

modules/osd/index.ts

@@ -0,0 +1,113 @@
+import { OSDAnchor } from "lib/types/options";
+import options from "options";
+import brightness from "services/Brightness"
+import { OSDLabel } from "./label/index";
+import { OSDBar } from "./bar/index";
+import { OSDIcon } from "./icon/index";
+const hyprland = await Service.import("hyprland");
+const audio = await Service.import("audio")
+
+const {
+    enable,
+    orientation,
+    location,
+    active_monitor,
+    monitor
+} = options.theme.osd;
+
+const curMonitor = Variable(monitor.value);
+
+hyprland.active.connect("changed", () => {
+    curMonitor.value = hyprland.active.monitor.id;
+})
+
+const DELAY = 2500;
+
+const getPosition = (pos: OSDAnchor): ("top" | "bottom" | "left" | "right")[] => {
+    const positionMap: { [key: string]: ("top" | "bottom" | "left" | "right")[] } = {
+        "top": ["top"],
+        "top right": ["top", "right"],
+        "top left": ["top", "left"],
+        "bottom": ["bottom"],
+        "bottom right": ["bottom", "right"],
+        "bottom left": ["bottom", "left"],
+        "right": ["right"],
+        "left": ["left"],
+    };
+
+    return positionMap[pos];
+}
+const renderOSD = () => {
+    let count = 0
+
+    const handleReveal = (self: any) => {
+        self.reveal_child = true
+        count++
+        Utils.timeout(DELAY, () => {
+            count--
+
+            if (count === 0)
+                self.reveal_child = false
+        })
+    }
+
+    return Widget.Revealer({
+        transition: "crossfade",
+        reveal_child: false,
+        setup: self => {
+            self.hook(brightness, () => {
+                handleReveal(self);
+            }, "notify::screen")
+            self.hook(brightness, () => {
+                handleReveal(self);
+            }, "notify::kbd")
+            self.hook(audio.speaker, () => {
+                handleReveal(self);
+            })
+
+        },
+        child: Widget.Box({
+            class_name: "osd-container",
+            vertical: orientation.bind("value").as(ort => ort === "vertical"),
+            children: orientation.bind("value").as(ort => {
+                if (ort === "vertical") {
+                    return [
+                        OSDLabel(ort),
+                        OSDBar(ort),
+                        OSDIcon(ort)
+                    ]
+                }
+
+                return [
+                    OSDIcon(ort),
+                    OSDBar(ort),
+                    OSDLabel(ort),
+                ]
+            })
+        })
+    })
+}
+
+export default () => Widget.Window({
+    monitor: Utils.merge([
+        curMonitor.bind("value"),
+        monitor.bind("value"),
+        active_monitor.bind("value")], (curMon, mon, activeMonitor) => {
+            if (activeMonitor === true) {
+                return curMon;
+            }
+
+            return mon;
+        }),
+    name: `indicator`,
+    visible: enable.bind("value"),
+    class_name: "indicator",
+    layer: "overlay",
+    anchor: location.bind("value").as(v => getPosition(v)),
+    click_through: true,
+    child: Widget.Box({
+        css: "padding: 1px;",
+        expand: true,
+        child: renderOSD(),
+    }),
+})

modules/osd/label/index.ts

@@ -0,0 +1,30 @@
+import { OSDOrientation } from "lib/types/options";
+import brightness from "services/Brightness"
+const audio = await Service.import("audio")
+
+export const OSDLabel = (ort: OSDOrientation) => {
+    return Widget.Box({
+        class_name: "osd-label-container",
+        hexpand: true,
+        vexpand: true,
+        child: Widget.Label({
+            class_name: "osd-label",
+            hexpand: true,
+            vexpand: true,
+            hpack: "center",
+            vpack: "center",
+            setup: self => {
+                self.hook(brightness, () => {
+                    self.label = `${Math.floor(brightness.screen * 100)}`;
+                }, "notify::screen")
+                self.hook(brightness, () => {
+                    self.label = `${Math.floor(brightness.kbd * 100)}`;
+                }, "notify::kbd")
+                self.hook(audio, () => {
+                    self.toggleClassName("overflow", audio.speaker.volume > 1)
+                    self.label = `${Math.floor(audio.speaker.volume * 100)}`;
+                })
+            }
+        })
+    });
+}