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/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 ? "󰝟" : "󰕾";
+                })
+            }
+        })
+    });
+}