hyprpanel

ags/HyprPanel/modules/menus/audio/active/SelectedPlayback.ts

@@ -0,0 +1,68 @@
+const audio = await Service.import('audio');
+import { getIcon } from '../utils.js';
+import Box from 'types/widgets/box.js';
+import { Attribute, Child } from 'lib/types/widget.js';
+
+const renderActivePlayback = (): Box<Child, Attribute>[] => {
+    return [
+        Widget.Box({
+            class_name: 'menu-slider-container playback',
+            children: [
+                Widget.Button({
+                    vexpand: false,
+                    vpack: 'end',
+                    setup: (self) => {
+                        const updateClass = (): void => {
+                            const spkr = audio.speaker;
+                            const className = `menu-active-button playback ${spkr.is_muted ? 'muted' : ''}`;
+                            self.class_name = className;
+                        };
+
+                        self.hook(audio.speaker, updateClass, 'notify::is-muted');
+                    },
+                    on_primary_click: () => (audio.speaker.is_muted = !audio.speaker.is_muted),
+                    child: Widget.Icon({
+                        class_name: 'menu-active-icon playback',
+                        setup: (self) => {
+                            const updateIcon = (): void => {
+                                const isSpeakerMuted = audio.speaker.is_muted !== null ? audio.speaker.is_muted : true;
+                                self.icon = getIcon(audio.speaker.volume, isSpeakerMuted)['spkr'];
+                            };
+                            self.hook(audio.speaker, updateIcon, 'notify::volume');
+                            self.hook(audio.speaker, updateIcon, 'notify::is-muted');
+                        },
+                    }),
+                }),
+                Widget.Box({
+                    vertical: true,
+                    children: [
+                        Widget.Label({
+                            class_name: 'menu-active playback',
+                            hpack: 'start',
+                            truncate: 'end',
+                            expand: true,
+                            wrap: true,
+                            label: audio.bind('speaker').as((v) => v.description || ''),
+                        }),
+                        Widget.Slider({
+                            value: audio['speaker'].bind('volume'),
+                            class_name: 'menu-active-slider menu-slider playback',
+                            draw_value: false,
+                            hexpand: true,
+                            min: 0,
+                            max: 1,
+                            onChange: ({ value }) => (audio.speaker.volume = value),
+                        }),
+                    ],
+                }),
+                Widget.Label({
+                    vpack: 'end',
+                    class_name: 'menu-active-percentage playback',
+                    label: audio.speaker.bind('volume').as((v) => `${Math.round(v * 100)}%`),
+                }),
+            ],
+        }),
+    ];
+};
+
+export { renderActivePlayback };