refactor(ags audio icons): make variables for easy icon changes

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

@@ -2,37 +2,14 @@ import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 import { Label, Box, Icon } from 'resource:///com/github/Aylur/ags/widget.js';
 import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
+import { SpeakerIcon } from '../misc/audio-icons.js';
 import Separator from '../misc/separator.js';
 import EventBox  from '../misc/cursorbox.js';
 
-const items = {
-    101: 'audio-volume-overamplified-symbolic',
-    67: 'audio-volume-high-symbolic',
-    34: 'audio-volume-medium-symbolic',
-    1: 'audio-volume-low-symbolic',
-    0: 'audio-volume-muted-symbolic',
-};
-
 
 const SpeakerIndicator = props => Icon({
     ...props,
-    icon: '',
+    binds: [['icon', SpeakerIcon, 'value']],
-    connections: [[Audio, self => {
-        if (!Audio.speaker)
-            return;
-
-        if (Audio.speaker.stream.isMuted) {
-            self.icon = items[0];
-        }
-        else {
-            const vol = Audio.speaker.volume * 100;
-
-            for (const threshold of [-1, 0, 33, 66, 100]) {
-                if (vol > threshold + 1)
-                    self.icon = items[threshold + 1];
-            }
-        }
-    }, 'speaker-changed']],
 });
 
 const SpeakerPercentLabel = props => Label({

devices/wim/config/ags/js/bar/battery.js

@@ -1,45 +1,16 @@
 import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
-import { Label, Icon, Stack, Box } from 'resource:///com/github/Aylur/ags/widget.js';
+import { Label, Icon, Box } from 'resource:///com/github/Aylur/ags/widget.js';
 
 import Separator from '../misc/separator.js';
 
-const icons = charging => ([
-    ...Array.from({ length: 10 }, (_, i) => i * 10).map(i => ([
-        `${i}`, Icon({
-            className: `${i} ${charging ? 'charging' : 'discharging'}`,
-            icon: `battery-level-${i}${charging ? '-charging' : ''}-symbolic`,
-        }),
-    ])),
-    ['100', Icon({
-        className: `100 ${charging ? 'charging' : 'discharging'}`,
-        icon: `battery-level-100${charging ? '-charged' : ''}-symbolic`,
-    })],
-]);
 
-
+const Indicator = () => Icon({
-const Indicators = charging => Stack({
-    items: icons(charging),
-    connections: [[Battery, stack => {
-        stack.shown = `${Math.floor(Battery.percent / 10) * 10}`;
-    }]],
-});
-
-const Indicator = ({
-    charging = Indicators(true),
-    discharging = Indicators(false),
-    ...props
-} = {}) => Stack({
-    ...props,
     className: 'battery-indicator',
-    items: [
+    binds: [['icon', Battery, 'icon-name']],
-        ['true', charging],
+    connections: [[Battery, self => {
-        ['false', discharging],
+        self.toggleClassName('charging', Battery.charging);
-    ],
+        self.toggleClassName('charged', Battery.charged);
-    connections: [[Battery, stack => {
+        self.toggleClassName('low', Battery.percent < 20);
-        stack.shown = `${Battery.charging || Battery.charged}`;
-        stack.toggleClassName('charging', Battery.charging);
-        stack.toggleClassName('charged', Battery.charged);
-        stack.toggleClassName('low', Battery.percent < 20);
     }]],
 });
 

devices/wim/config/ags/js/bar/osk-toggle.js

@@ -13,7 +13,6 @@ export default () => EventBox({
 
     child: Box({
         className: 'osk-toggle',
-        vertical: false,
         children: [Label(' 󰌌 ')],
     }),
 });

devices/wim/config/ags/js/misc/audio-icons.js

@@ -0,0 +1,54 @@
+import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
+import Variable from 'resource:///com/github/Aylur/ags/variable.js';
+
+const speakerIcons = {
+    101: 'audio-volume-overamplified-symbolic',
+    67: 'audio-volume-high-symbolic',
+    34: 'audio-volume-medium-symbolic',
+    1: 'audio-volume-low-symbolic',
+    0: 'audio-volume-muted-symbolic',
+};
+
+const micIcons = {
+    67: 'audio-input-microphone-high-symbolic',
+    34: 'audio-input-microphone-medium-symbolic',
+    1: 'audio-input-microphone-low-symbolic',
+    0: 'audio-input-microphone-muted-symbolic',
+};
+
+
+export const SpeakerIcon = Variable();
+Audio.connect('speaker-changed', () => {
+    if (!Audio.speaker)
+        return;
+
+    if (Audio.speaker.stream.isMuted) {
+        SpeakerIcon.value = speakerIcons[0];
+    }
+    else {
+        const vol = Audio.speaker.volume * 100;
+
+        for (const threshold of [-1, 0, 33, 66, 100]) {
+            if (vol > threshold + 1)
+                SpeakerIcon.value = speakerIcons[threshold + 1];
+        }
+    }
+});
+
+export const MicIcon = Variable();
+Audio.connect('microphone-changed', () => {
+    if (!Audio.microphone)
+        return;
+
+    if (Audio.microphone.stream.isMuted) {
+        MicIcon.value = micIcons[0];
+    }
+    else {
+        const vol = Audio.microphone.volume * 100;
+
+        for (const threshold of [-1, 0, 33, 66]) {
+            if (vol > threshold + 1)
+                MicIcon.value = micIcons[threshold + 1];
+        }
+    }
+});

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

@@ -1,13 +1,7 @@
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
 
-const items = {
+import { SpeakerIcon } from '../misc/audio-icons.js';
-    101: 'audio-volume-overamplified-symbolic',
-    67: 'audio-volume-high-symbolic',
-    34: 'audio-volume-medium-symbolic',
-    1: 'audio-volume-low-symbolic',
-    0: 'audio-volume-muted-symbolic',
-};
 
 
 export default () => Box({
@@ -15,34 +9,22 @@ export default () => Box({
     children: [
         Icon({
             hpack: 'start',
+            binds: [['icon', SpeakerIcon, 'value']],
+        }),
+
+        ProgressBar({
+            vpack: 'center',
             connections: [[Audio, self => {
                 if (!Audio.speaker)
                     return;
 
-                if (Audio.speaker.stream.isMuted) {
+                self.value = Audio.speaker ? Audio.speaker.volume / 1.5 : 0;
-                    self.icon = items[0];
+                self.sensitive = !Audio.speaker?.stream.isMuted;
-                }
-                else {
-                    const vol = Audio.speaker.volume * 100;
-
-                    for (const threshold of [-1, 0, 33, 66, 100]) {
-                        if (vol > threshold + 1)
-                            self.icon = items[threshold + 1];
-                    }
-                }
 
                 const stack = self.get_parent().get_parent();
                 stack.shown = 'audio';
                 stack.resetTimer();
             }, 'speaker-changed']],
         }),
-
-        ProgressBar({
-            vpack: 'center',
-            connections: [[Audio, self => {
-                self.value = Audio.speaker ? Audio.speaker.volume / 1.5 : 0;
-                self.sensitive = !Audio.speaker?.stream.isMuted;
-            }]],
-        }),
     ],
 });

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

@@ -1,12 +1,7 @@
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 import { Box, Icon, ProgressBar } from 'resource:///com/github/Aylur/ags/widget.js';
 
-const items = {
+import { MicIcon } from '../misc/audio-icons.js';
-    67: 'audio-input-microphone-high-symbolic',
-    34: 'audio-input-microphone-medium-symbolic',
-    1: 'audio-input-microphone-low-symbolic',
-    0: 'audio-input-microphone-muted-symbolic',
-};
 
 
 export default () => Box({
@@ -14,34 +9,22 @@ export default () => Box({
     children: [
         Icon({
             hpack: 'start',
+            binds: [['icon', MicIcon, 'value']],
+        }),
+
+        ProgressBar({
+            vpack: 'center',
             connections: [[Audio, self => {
                 if (!Audio.microphone)
                     return;
 
-                if (Audio.microphone.stream.isMuted) {
+                self.value = Audio.microphone ? Audio.microphone.volume : 0;
-                    self.icon = items[0];
+                self.sensitive = !Audio.microphone?.stream.isMuted;
-                }
-                else {
-                    const vol = Audio.microphone.volume * 100;
-
-                    for (const threshold of [-1, 0, 33, 66]) {
-                        if (vol > threshold + 1)
-                            self.icon = items[threshold + 1];
-                    }
-                }
 
                 const stack = self.get_parent().get_parent();
                 stack.shown = 'mic';
                 stack.resetTimer();
             }, 'microphone-changed']],
         }),
-
-        ProgressBar({
-            vpack: 'center',
-            connections: [[Audio, self => {
-                self.value = Audio.microphone ? Audio.microphone.volume : 0;
-                self.sensitive = !Audio.microphone?.stream.isMuted;
-            }, 'microphone-changed']],
-        }),
     ],
 });

devices/wim/config/ags/js/quick-settings/button-grid.js

@@ -1,11 +1,11 @@
 import App       from 'resource:///com/github/Aylur/ags/app.js';
-import Audio     from 'resource:///com/github/Aylur/ags/service/audio.js';
 import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
 import Network   from 'resource:///com/github/Aylur/ags/service/network.js';
 import Variable  from 'resource:///com/github/Aylur/ags/variable.js';
 import { Box, Icon, Label, Revealer } from 'resource:///com/github/Aylur/ags/widget.js';
 import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
+import { SpeakerIcon, MicIcon } from '../misc/audio-icons.js';
 import EventBox  from '../misc/cursorbox.js';
 import Separator from '../misc/separator.js';
 
@@ -228,20 +228,6 @@ const FirstRow = () => Row({
     ],
 });
 
-const items = {
-    101: 'audio-volume-overamplified-symbolic',
-    67: 'audio-volume-high-symbolic',
-    34: 'audio-volume-medium-symbolic',
-    1: 'audio-volume-low-symbolic',
-    0: 'audio-volume-muted-symbolic',
-};
-
-const itemsMic = {
-    2: 'audio-input-microphone-high-symbolic',
-    1: 'audio-input-microphone-muted-symbolic',
-    0: 'audio-input-microphone-muted-symbolic',
-};
-
 const SecondRow = () => Row({
     buttons: [
 
@@ -256,20 +242,9 @@ const SecondRow = () => Row({
                     .catch(print);
             },
 
-            icon: [Audio, icon => {
+            icon: [SpeakerIcon, self => {
-                if (Audio.speaker) {
+                self.icon = SpeakerIcon.value;
-                    if (Audio.speaker.stream.isMuted) {
+            }],
-                        icon.icon = items[0];
-                    }
-                    else {
-                        const vol = Audio.speaker.volume * 100;
-                        for (const threshold of [-1, 0, 33, 66, 100]) {
-                            if (vol > threshold + 1)
-                                icon.icon = items[threshold + 1];
-                        }
-                    }
-                }
-            }, 'speaker-changed'],
         }),
 
         GridButton({
@@ -283,20 +258,9 @@ const SecondRow = () => Row({
                     .catch(print);
             },
 
-            icon: [Audio, icon => {
+            icon: [MicIcon, self => {
-                if (Audio.microphone) {
+                self.icon = MicIcon.value;
-                    if (Audio.microphone.stream.isMuted) {
+            }],
-                        icon.icon = itemsMic[0];
-                    }
-                    else {
-                        const vol = Audio.microphone.volume * 100;
-                        for (const threshold of [-1, 0, 1]) {
-                            if (vol > threshold + 1)
-                                icon.icon = itemsMic[threshold + 1];
-                        }
-                    }
-                }
-            }, 'microphone-changed'],
         }),
 
         GridButton({

devices/wim/config/ags/js/quick-settings/slider-box.js

@@ -1,13 +1,7 @@
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 import { Box, Slider, Icon, EventBox } from 'resource:///com/github/Aylur/ags/widget.js';
 
-const items = {
+import { SpeakerIcon } from '../misc/audio-icons.js';
-    101: 'audio-volume-overamplified-symbolic',
-    67: 'audio-volume-high-symbolic',
-    34: 'audio-volume-medium-symbolic',
-    1: 'audio-volume-low-symbolic',
-    0: 'audio-volume-muted-symbolic',
-};
 
 
 export default () => Box({
@@ -24,20 +18,7 @@ export default () => Box({
                 Icon({
                     size: 26,
                     className: 'slider-label',
-                    connections: [[Audio, icon => {
+                    binds: [['icon', SpeakerIcon, 'value']],
-                        if (Audio.speaker) {
-                            if (Audio.speaker.stream.isMuted) {
-                                icon.icon = items[0];
-                            }
-                            else {
-                                const vol = Audio.speaker.volume * 100;
-                                for (const threshold of [-1, 0, 33, 66, 100]) {
-                                    if (vol > threshold + 1)
-                                        icon.icon = items[threshold + 1];
-                                }
-                            }
-                        }
-                    }, 'speaker-changed']],
                 }),
 
                 Slider({