feat: make audio widget a button

config/ags/js/bar/audio.js

@@ -1,57 +1,34 @@
 const { Audio } = ags.Service;
 const { Label, Box, Icon, Stack, Button, Slider } = ags.Widget;
-import { Separator } from '../common.js';
+import { Separator, EventBox } from '../common.js';
 
-const iconSubstitute = item => {
+const items = {
-    const substitues = [
+  101: 'audio-volume-overamplified-symbolic',
-        { from: 'audio-headset-bluetooth', to: 'audio-headphones-symbolic' },
+  67: 'audio-volume-high-symbolic',
-        { from: 'audio-card-analog-usb', to: 'audio-speakers-symbolic' },
+  34: 'audio-volume-medium-symbolic',
-        { from: 'audio-card-analog-pci', to: 'audio-card-symbolic' },
+  1: 'audio-volume-low-symbolic',
-    ];
+  0: 'audio-volume-muted-symbolic',
-
-    for (const { from, to } of substitues) {
-        if (from === item)
-            return to;
-    }
-    return item;
 };
 
-export const SpeakerIndicator = ({
+const SpeakerIndicator = props => Icon({
-    items = [
-        ['101', Icon('audio-volume-overamplified-symbolic')],
-        ['67', Icon('audio-volume-high-symbolic')],
-        ['34', Icon('audio-volume-medium-symbolic')],
-        ['1', Icon('audio-volume-low-symbolic')],
-        ['0', Icon('audio-volume-muted-symbolic')],
-    ],
-    ...props
-} = {}) => Stack({
   ...props,
-    items,
+  icon: '',
-    connections: [[Audio, stack => {
+  connections: [[Audio, icon => {
     if (!Audio.speaker)
       return;
 
     if (Audio.speaker.isMuted)
-            return stack.shown = '0';
+      return icon.icon = items[0];
 
     const vol = Audio.speaker.volume * 100;
     for (const threshold of [100, 66, 33, 0, -1]) {
       if (vol > threshold + 1)
-                return stack.shown = `${threshold + 1}`;
+        return icon.icon = items[threshold + 1];
     }
   }, 'speaker-changed']],
 });
 
-export const SpeakerTypeIndicator = props => Icon({
+const SpeakerPercentLabel = props => Label({
-    ...props,
-    connections: [[Audio, icon => {
-        if (Audio.speaker)
-            icon.icon = iconSubstitute(Audio.speaker.iconName);
-    }]],
-});
-
-export const SpeakerPercentLabel = props => Label({
   ...props,
   connections: [[Audio, label => {
     if (!Audio.speaker)
@@ -61,13 +38,17 @@ export const SpeakerPercentLabel = props => Label({
   }, 'speaker-changed']],
 });
 
-const AudioModule = () => Box({
+const AudioModule = () => EventBox({
-  className: 'toggle-off audio',
+  onPrimaryClickRelease: 'pavucontrol',
+  className: 'toggle-off',
+  child: Box({
+    className: 'audio',
     children: [
       SpeakerIndicator(),
       Separator(5),
       SpeakerPercentLabel(),
     ],
+  }),
 });
 
 export const AudioIndicator = AudioModule();