feat(wim ags osd): add transition between OSDs and refactor

devices/wim/config/ags/js/osd/audio.js

@@ -1,39 +0,0 @@
-import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
-
-import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import { SpeakerIcon } from '../misc/audio-icons.js';
-
-const AUDIO_MAX = 1.5;
-
-
-export default () => Box({
-    className: 'osd',
-    children: [
-        Icon({
-            hpack: 'start',
-            binds: [['icon', SpeakerIcon, 'value']],
-        }),
-
-        ProgressBar({
-            vpack: 'center',
-
-            connections: [[Audio, (self) => {
-                if (!Audio.speaker) {
-                    return;
-                }
-
-                self.value = Audio.speaker ?
-                    Audio.speaker.volume / AUDIO_MAX :
-                    0;
-
-                self.sensitive = !Audio.speaker?.stream.isMuted;
-
-                const stack = self.get_parent().get_parent();
-
-                stack.shown = 'audio';
-                stack.resetTimer();
-            }, 'speaker-changed']],
-        }),
-    ],
-});

devices/wim/config/ags/js/osd/brightness.js

@@ -1,27 +0,0 @@
-import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import Brightness from '../../services/brightness.js';
-
-
-export default () => Box({
-    className: 'osd',
-    children: [
-        Icon({
-            hpack: 'start',
-            icon: 'display-brightness-symbolic',
-        }),
-
-        ProgressBar({
-            vpack: 'center',
-
-            connections: [[Brightness, (self) => {
-                self.value = Brightness.screen;
-
-                const stack = self.get_parent().get_parent();
-
-                stack.shown = 'brightness';
-                stack.resetTimer();
-            }, 'screen']],
-        }),
-    ],
-});

devices/wim/config/ags/js/osd/caps.js

@@ -1,30 +0,0 @@
-import { Box, Icon, Label } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import Brightness from '../../services/brightness.js';
-
-
-export default () => Box({
-    className: 'osd',
-    children: [
-        Icon({
-            hpack: 'start',
-            icon: 'caps-lock-symbolic',
-
-            connections: [[Brightness, (self, state) => {
-                self.icon = state ?
-                    'caps-lock-symbolic' :
-                    'capslock-disabled-symbolic';
-
-                const stack = self.get_parent().get_parent();
-
-                stack.shown = 'caps';
-                stack.resetTimer();
-            }, 'caps']],
-        }),
-
-        Label({
-            vpack: 'center',
-            label: 'Caps Lock',
-        }),
-    ],
-});

devices/wim/config/ags/js/osd/ctor.js

@@ -0,0 +1,42 @@
+import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
+
+const Y_POS = 80;
+
+
+export default ({ stack, icon, info } = {}) => {
+    let connectFunc;
+
+    const osd = Box({
+        css: `margin-bottom: ${Y_POS}px;`,
+        children: [Box({
+            className: 'osd',
+            children: [
+                Icon({
+                    hpack: 'start',
+                    // Can take a string or an object of props
+                    ...(typeof icon === 'string' ? { icon } : icon),
+                }),
+                // Can take a static widget instead of a progressbar
+                info.logic ?
+                    ProgressBar({ vpack: 'center' }) :
+                    info.widget,
+            ],
+        })],
+    });
+
+    // Handle requests to show the OSD
+    // Different wether it's a bar or static
+    if (info.logic) {
+        connectFunc = (self) => new Promise((r) => {
+            info.logic(self);
+            r();
+        }).then(() => stack.popup(osd));
+    }
+    else {
+        connectFunc = () => stack.popup(osd);
+    }
+
+    osd.children[0].children[1].connectTo(info.mod, connectFunc, info.signal);
+
+    return osd;
+};

devices/wim/config/ags/js/osd/kbd.js

@@ -1,34 +0,0 @@
-import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import Brightness from '../../services/brightness.js';
-
-
-export default () => Box({
-    className: 'osd',
-
-    children: [
-        Icon({
-            hpack: 'start',
-            icon: 'keyboard-brightness-symbolic',
-        }),
-
-        ProgressBar({
-            vpack: 'center',
-
-            connections: [[Brightness, (self) => {
-                if (!self.value) {
-                    self.value = Brightness.kbd / 2;
-
-                    return;
-                }
-                self.value = Brightness.kbd / 2;
-                self.sensitive = Brightness.kbd !== 0;
-
-                const stack = self.get_parent().get_parent();
-
-                stack.shown = 'kbd';
-                stack.resetTimer();
-            }, 'kbd']],
-        }),
-    ],
-});

devices/wim/config/ags/js/osd/main.js

@@ -3,63 +3,58 @@ import App from 'resource:///com/github/Aylur/ags/app.js';
 import { timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 import { Stack } from 'resource:///com/github/Aylur/ags/widget.js';
 
-import GLib from 'gi://GLib';
 import PopupWindow from '../misc/popup.js';
 
-import Audio from './audio.js';
+// Import all the OSDs as an array
-import Brightness from './brightness.js';
+const OSDList = [];
-import CapsLock from './caps.js';
+
-import Keyboard from './kbd.js';
+import * as Modules from './osds.js';
-import Microphone from './mic.js';
+for (const osd in Modules) {
+    OSDList.push(Modules[osd]);
+} // Array
 
 const HIDE_DELAY = 2000;
 
 
-export default () => {
+const OSDs = () => {
-    let setup = 0;
-
     const stack = Stack({
-        css: 'margin-bottom: 80px;',
+        transition: 'over_up_down',
-        items: [
-            ['audio', Audio()],
-            ['brightness', Brightness()],
-            ['caps', CapsLock()],
-            ['kbd', Keyboard()],
-            ['mic', Microphone()],
-        ],
-    });
-
-    const window = PopupWindow({
-        name: 'osd',
-        anchor: ['bottom'],
-        exclusivity: 'ignore',
-        closeOnUnfocus: 'stay',
-        transition: 'slide_up',
         transitionDuration: 200,
-        child: stack,
     });
 
-    let timer;
+    stack.items = OSDList.map((osd, i) => [`${i}`, osd(stack)]);
 
-    stack.resetTimer = () => {
+    stack.popup = () => { /**/ };
-        // Each osd calls resetTimer once at startup
-        // FIXME: doesn't seem to work anymore, find alternative
-        if (setup <= stack.items.length + 1) {
-            ++setup;
 
-            return;
+    // Delay popup method so it
-        }
+    // doesn't show any OSDs at launch
+    timeout(1000, () => {
+        let count = 0;
 
-        App.openWindow('osd');
+        stack.popup = (osd) => {
-        if (timer) {
+            ++count;
-            GLib.source_remove(timer);
+            stack.set_visible_child(osd);
-        }
+            App.openWindow('osd');
 
-        timer = timeout(HIDE_DELAY, () => {
+            timeout(HIDE_DELAY, () => {
-            App.closeWindow('osd');
+                --count;
-            timer = null;
-        });
-    };
 
-    return window;
+                if (count === 0) {
+                    App.closeWindow('osd');
+                }
+            });
+        };
+    });
+
+    return stack;
 };
+
+export default () => PopupWindow({
+    name: 'osd',
+    anchor: ['bottom'],
+    exclusivity: 'ignore',
+    closeOnUnfocus: 'stay',
+    transition: 'slide_up',
+    transitionDuration: 200,
+    child: OSDs(),
+});

devices/wim/config/ags/js/osd/mic.js

@@ -1,35 +0,0 @@
-import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
-
-import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
-
-import { MicIcon } from '../misc/audio-icons.js';
-
-
-export default () => Box({
-    className: 'osd',
-
-    children: [
-        Icon({
-            hpack: 'start',
-            binds: [['icon', MicIcon, 'value']],
-        }),
-
-        ProgressBar({
-            vpack: 'center',
-
-            connections: [[Audio, (self) => {
-                if (!Audio.microphone) {
-                    return;
-                }
-
-                self.value = Audio.microphone ? Audio.microphone.volume : 0;
-                self.sensitive = !Audio.microphone?.stream.isMuted;
-
-                const stack = self.get_parent().get_parent();
-
-                stack.shown = 'mic';
-                stack.resetTimer();
-            }, 'microphone-changed']],
-        }),
-    ],
-});

devices/wim/config/ags/js/osd/osds.js

@@ -0,0 +1,91 @@
+import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
+
+import { Label } from 'resource:///com/github/Aylur/ags/widget.js';
+import OSD from './ctor.js';
+
+import Brightness from '../../services/brightness.js';
+import { SpeakerIcon } from '../misc/audio-icons.js';
+import { MicIcon } from '../misc/audio-icons.js';
+
+const AUDIO_MAX = 1.5;
+
+
+export const SpeakerOSD = (stack) => OSD({
+    stack,
+    icon: { binds: [['icon', SpeakerIcon, 'value']] },
+    info: {
+        mod: Audio,
+        signal: 'speaker-changed',
+        logic: (self) => {
+            if (!Audio.speaker) {
+                return;
+            }
+
+            self.value = Audio.speaker ?
+                Audio.speaker.volume / AUDIO_MAX :
+                0;
+
+            self.sensitive = !Audio.speaker?.stream.isMuted;
+        },
+    },
+});
+
+export const ScreenBrightnessOSD = (stack) => OSD({
+    stack,
+    icon: 'display-brightness-symbolic',
+    info: {
+        mod: Brightness,
+        signal: 'screen',
+        logic: (self) => {
+            self.value = Brightness.screen;
+        },
+    },
+});
+
+export const KbdBrightnessOSD = (stack) => OSD({
+    stack,
+    icon: 'keyboard-brightness-symbolic',
+    info: {
+        mod: Brightness,
+        signal: 'kbd',
+        logic: (self) => {
+            if (!self.value) {
+                self.value = Brightness.kbd / 2;
+
+                return;
+            }
+            self.value = Brightness.kbd / 2;
+            self.sensitive = Brightness.kbd !== 0;
+        },
+    },
+});
+
+export const MicOSD = (stack) => OSD({
+    stack,
+    icon: { binds: [['icon', MicIcon, 'value']] },
+    info: {
+        mod: Audio,
+        signal: 'microphone-changed',
+        logic: (self) => {
+            if (!Audio.microphone) {
+                return;
+            }
+
+            self.value = Audio.microphone ? Audio.microphone.volume : 0;
+            self.sensitive = !Audio.microphone?.stream.isMuted;
+        },
+    },
+});
+
+export const CapsLockOSD = (stack) => OSD({
+    stack,
+    icon: { binds: [['icon', Brightness, 'caps-icon']] },
+    info: {
+        mod: Brightness,
+        signal: 'caps',
+        widget: Label({
+            vpack: 'center',
+            label: 'Caps Lock',
+        }),
+    },
+});