fix(ags): make osds popup when they should

modules/ags/config/ts/osd/ctor.ts

@@ -3,28 +3,32 @@ const { Box, Icon, ProgressBar } = Widget;
 const Y_POS = 80;
 
 // Types
-import { ConnectFunc, OSD, ProgressBarGeneric } from 'global-types';
+import { ConnectFunc, OSD } from 'global-types';
 
 
-export default ({ stack, icon, info }: OSD) => {
+export default ({ name, stack, icon, info }: OSD) => {
     let connectFunc: ConnectFunc;
+    const status = info.widget ?
+        info.widget :
+        ProgressBar({ vpack: 'center' });
 
+    // Wrapper to get sliding up anim
     const osd = Box({
+        name,
         css: `margin-bottom: ${Y_POS}px;`,
-        children: [Box({
-            class_name: '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.widget ?
-                    info.widget :
-                    ProgressBar({ vpack: 'center' }),
-            ],
-        })],
+        children: [
+            // Actual OSD
+            Box({
+                class_name: 'osd',
+                children: [
+                    Icon({
+                        hpack: 'start',
+                        icon,
+                    }),
+                    status,
+                ],
+            }),
+        ],
     });
 
     // Handle requests to show the OSD
@@ -35,14 +39,22 @@ export default ({ stack, icon, info }: OSD) => {
                 info.logic(self);
             }
             r();
-        }).then(() => stack.attribute.popup(osd));
+        }).then(() => stack.attribute.popup(name));
     }
     else {
-        connectFunc = () => stack.attribute.popup(osd);
+        connectFunc = () => stack.attribute.popup(name);
     }
 
-    (osd.children[0].children[1] as ProgressBarGeneric)
-        .hook(info.mod, connectFunc, info.signal);
+    if (info.signal) {
+        if (typeof info.signal === 'string') {
+            status.hook(info.mod, connectFunc, info.signal);
+        }
+        else {
+            info.signal.forEach((sig) => {
+                status.hook(info.mod, connectFunc, sig);
+            });
+        }
+    }
 
     return osd;
 };

modules/ags/config/ts/osd/main.ts

@@ -23,16 +23,22 @@ const OSDs = () => {
         transition: 'over_up_down',
         transition_duration,
 
-        attribute: { popup: (osd: BoxGeneric) => {
-            if (!osd) {
-                //
-            }
-        } },
+        attribute: {
+            popup: (osd: string) => {
+                if (!osd) {
+                    //
+                }
+            },
+        },
     });
 
     // Send reference of stack to all children
     stack.children = Object.fromEntries(
-        OSDList.map((osd, i) => [`${i}`, osd(stack)]),
+        OSDList.map((osd) => {
+            const widget = osd(stack);
+
+            return [widget.name, widget];
+        }),
     );
 
     // Delay popup method so it
@@ -40,9 +46,9 @@ const OSDs = () => {
     timeout(1000, () => {
         let count = 0;
 
-        stack.attribute.popup = (osd: BoxGeneric) => {
+        stack.attribute.popup = (osd: string) => {
             ++count;
-            stack.set_visible_child(osd);
+            stack.shown = osd;
             App.openWindow('osd');
 
             timeout(HIDE_DELAY, () => {
@@ -53,6 +59,8 @@ const OSDs = () => {
                 }
             });
         };
+
+        globalThis['popup_osd'] = stack.attribute.popup;
     });
 
     return stack;

modules/ags/config/ts/osd/osds.ts

@@ -10,21 +10,17 @@ import { MicIcon } from '../misc/audio-icons.ts';
 
 const AUDIO_MAX = 1.5;
 
-const ShowSpeaker = Variable(true);
-
-globalThis.showSpeaker = () => {
-    ShowSpeaker.setValue(!ShowSpeaker.value);
-};
-
 // Types
 import { OSDStack } from 'global-types';
 
 
 export const SpeakerOSD = (stack: OSDStack) => OSD({
+    name: 'speaker',
     stack,
-    icon: { icon: SpeakerIcon.bind() },
+    icon: SpeakerIcon.bind(),
     info: {
-        mod: ShowSpeaker,
+        mod: Audio.speaker,
+        signal: ['notify::volume', 'notify::is-muted'],
 
         logic: (self) => {
             if (!Audio.speaker) {
@@ -41,8 +37,9 @@ export const SpeakerOSD = (stack: OSDStack) => OSD({
 });
 
 export const ScreenBrightnessOSD = (stack: OSDStack) => OSD({
+    name: 'screen',
     stack,
-    icon: { icon: Brightness.bind('screenIcon') },
+    icon: Brightness.bind('screenIcon'),
     info: {
         mod: Brightness,
         signal: 'screen',
@@ -54,6 +51,7 @@ export const ScreenBrightnessOSD = (stack: OSDStack) => OSD({
 });
 
 export const KbdBrightnessOSD = (stack: OSDStack) => OSD({
+    name: 'kbd',
     stack,
     icon: 'keyboard-brightness-symbolic',
     info: {
@@ -73,11 +71,12 @@ export const KbdBrightnessOSD = (stack: OSDStack) => OSD({
 });
 
 export const MicOSD = (stack: OSDStack) => OSD({
+    name: 'mic',
     stack,
-    icon: { icon: MicIcon.bind() },
+    icon: MicIcon.bind(),
     info: {
-        mod: Audio,
-        signal: 'microphone-changed',
+        mod: Audio.microphone,
+        signal: ['notify::volume', 'notify::is-muted'],
 
         logic: (self) => {
             if (!Audio.microphone) {
@@ -91,8 +90,9 @@ export const MicOSD = (stack: OSDStack) => OSD({
 });
 
 export const CapsLockOSD = (stack: OSDStack) => OSD({
+    name: 'caps',
     stack,
-    icon: { icon: Brightness.bind('capsIcon') },
+    icon: Brightness.bind('capsIcon'),
     info: {
         mod: Brightness,
         signal: 'caps',