diff --git a/nixosModules/ags/config/widgets/audio/main.tsx b/nixosModules/ags/config/widgets/audio/main.tsx
index 3a93d938..f0dde3ac 100644
--- a/nixosModules/ags/config/widgets/audio/main.tsx
+++ b/nixosModules/ags/config/widgets/audio/main.tsx
@@ -24,23 +24,44 @@ export default () => {
transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}
>
- <scrollable name="outputs" hscroll={Gtk.PolicyType.NEVER}>
- <box vertical>
- {bind(audio, 'speakers').as(Streams)}
- </box>
- </scrollable>
+ <scrollable
+ name="outputs"
+ hscroll={Gtk.PolicyType.NEVER}
- <scrollable name="inputs" hscroll={Gtk.PolicyType.NEVER}>
- <box vertical>
- {bind(audio, 'microphones').as(Streams)}
- </box>
- </scrollable>
+ setup={(self) => setTimeout(() => {
+ self.add((
+ <box vertical>
+ {bind(audio, 'speakers').as(Streams)}
+ </box>
+ ));
+ }, 1000)}
+ />
- <scrollable name="profiles" hscroll={Gtk.PolicyType.NEVER}>
- <box vertical>
- {bind(audio, 'devices').as(Profiles)}
- </box>
- </scrollable>
+ <scrollable
+ name="inputs"
+ hscroll={Gtk.PolicyType.NEVER}
+
+ setup={(self) => setTimeout(() => {
+ self.add((
+ <box vertical>
+ {bind(audio, 'microphones').as(Streams)}
+ </box>
+ ));
+ }, 1000)}
+ />
+
+ <scrollable
+ name="profiles"
+ hscroll={Gtk.PolicyType.NEVER}
+
+ setup={(self) => setTimeout(() => {
+ self.add((
+ <box vertical>
+ {bind(audio, 'devices').as(Profiles)}
+ </box>
+ ));
+ }, 1000)}
+ />
</stack>
) as Widget.Stack;
diff --git a/nixosModules/ags/config/widgets/audio/profiles.tsx b/nixosModules/ags/config/widgets/audio/profiles.tsx
index e9e14654..948b6515 100644
--- a/nixosModules/ags/config/widgets/audio/profiles.tsx
+++ b/nixosModules/ags/config/widgets/audio/profiles.tsx
@@ -5,40 +5,42 @@ import AstalWp from 'gi://AstalWp';
import { ComboBoxText } from '../misc/subclasses';
-export default (devices: AstalWp.Device[]) => devices.map((device) => (
- <box className="stream" vertical>
+export default (devices: AstalWp.Device[]) => devices
+ .sort((a, b) => a.description.localeCompare(b.description))
+ .map((device) => (
+ <box className="stream" vertical>
- <label label={bind(device, 'description')} />
+ <label label={bind(device, 'description')} />
- <ComboBoxText
- setup={(self) => {
- const profiles = (device.get_profiles() ?? []).sort((a, b) => {
- if (a.description === 'Off') {
- return 1;
- }
- else if (b.description === 'Off') {
- return -1;
- }
- else {
- return a.description.localeCompare(b.description);
- }
- });
+ <ComboBoxText
+ setup={(self) => {
+ const profiles = (device.get_profiles() ?? []).sort((a, b) => {
+ if (a.description === 'Off') {
+ return 1;
+ }
+ else if (b.description === 'Off') {
+ return -1;
+ }
+ else {
+ return a.description.localeCompare(b.description);
+ }
+ });
- profiles.forEach((profile) => {
- self.append(profile.index.toString(), profile.description);
- });
+ profiles.forEach((profile) => {
+ self.append(profile.index.toString(), profile.description);
+ });
- self.set_active(
- profiles.indexOf(
- device.get_profile(device.get_active_profile())!,
- ),
- );
- }}
+ self.set_active(
+ profiles.indexOf(
+ device.get_profile(device.get_active_profile())!,
+ ),
+ );
+ }}
- onChanged={(self) => {
- device.set_active_profile(parseInt(self.activeId));
- }}
- />
+ onChanged={(self) => {
+ device.set_active_profile(parseInt(self.activeId));
+ }}
+ />
- </box>
-));
+ </box>
+ ));
diff --git a/nixosModules/ags/config/widgets/audio/streams.tsx b/nixosModules/ags/config/widgets/audio/streams.tsx
index e4487361..692f9ea7 100644
--- a/nixosModules/ags/config/widgets/audio/streams.tsx
+++ b/nixosModules/ags/config/widgets/audio/streams.tsx
@@ -10,82 +10,87 @@ import Separator from '../misc/separator';
export default (streams: AstalWp.Endpoint[]) => {
let group: RadioButton | undefined;
- return streams.map((stream) => (
- <box className="stream" vertical>
+ return streams
+ .sort((a, b) => a.description.localeCompare(b.description))
+ .map((stream) => (
+ <box className="stream" vertical>
- <box className="title">
+ <box className="title">
- <RadioButton
- cursor="pointer"
- css="margin-top: 1px;"
+ <RadioButton
+ cursor="pointer"
+ css="margin-top: 1px;"
- active={bind(stream, 'isDefault')}
-
- onRealize={(self) => {
- if (!group) {
- group = self;
- }
- else {
- self.group = group;
- }
- }}
-
- onButtonReleaseEvent={() => {
- stream.isDefault = true;
- }}
- />
-
- <Separator size={8} />
-
- <label label={bind(stream, 'description')} />
-
- </box>
-
- <Separator size={4} vertical />
-
- <box className="body">
-
- <button
- cursor="pointer"
- className="toggle"
- valign={Gtk.Align.END}
-
- onButtonReleaseEvent={() => {
- stream.mute = !stream.mute;
- }}
- >
- <icon
- icon={bind(stream, 'mute').as((isMuted) => {
- if (stream.mediaClass === AstalWp.MediaClass.AUDIO_MICROPHONE) {
- return isMuted ?
- 'audio-input-microphone-muted-symbolic' :
- 'audio-input-microphone-symbolic';
+ onRealize={(self) => {
+ if (!group) {
+ group = self;
}
else {
- return isMuted ?
- 'audio-volume-muted-symbolic' :
- 'audio-speakers-symbolic';
+ self.group = group;
}
- })}
+
+ self.active = stream.isDefault;
+ self.hook(stream, 'notify::is-default', () => {
+ self.active = stream.isDefault;
+ });
+ }}
+
+ onButtonReleaseEvent={() => {
+ stream.isDefault = true;
+ }}
/>
- </button>
- <Separator size={4} />
+ <Separator size={8} />
- <slider
- hexpand
- halign={Gtk.Align.FILL}
- drawValue
- cursor="pointer"
+ <label label={bind(stream, 'description')} />
- value={bind(stream, 'volume')}
- onDragged={(self) => {
- stream.set_volume(self.value);
- }}
- />
+ </box>
+
+ <Separator size={4} vertical />
+
+ <box className="body">
+
+ <button
+ cursor="pointer"
+ className="toggle"
+ valign={Gtk.Align.END}
+
+ onButtonReleaseEvent={() => {
+ stream.mute = !stream.mute;
+ }}
+ >
+ <icon
+ icon={bind(stream, 'mute').as((isMuted) => {
+ if (stream.mediaClass === AstalWp.MediaClass.AUDIO_MICROPHONE) {
+ return isMuted ?
+ 'audio-input-microphone-muted-symbolic' :
+ 'audio-input-microphone-symbolic';
+ }
+ else {
+ return isMuted ?
+ 'audio-volume-muted-symbolic' :
+ 'audio-speakers-symbolic';
+ }
+ })}
+ />
+ </button>
+
+ <Separator size={4} />
+
+ <slider
+ hexpand
+ halign={Gtk.Align.FILL}
+ drawValue
+ cursor="pointer"
+
+ value={bind(stream, 'volume')}
+ onDragged={(self) => {
+ stream.set_volume(self.value);
+ }}
+ />
+
+ </box>
</box>
-
- </box>
- ));
+ ));
};