Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ ags(control-center/mixer): add per-app volume control to sliders

Browse Source
This commit is contained in:
retrozinndev
2025-04-23 12:03:36 -03:00
parent c6cb481b4d
commit ef474e9742
2 changed files with 129 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/widget/control-center/Sliders.ts
+36 -37
View File
@@ -1,62 +1,61 @@
import { bind } from "astal";
import { Gtk, Widget } from "astal/gtk3";
import { Wireplumber } from "../../scripts/volume";
import { Pages } from "./Pages";
import { PageMixer } from "./pages/Mixer";
export const Sliders = () => new Widget.Box({
export function Sliders() {
const slidersPages = new Pages();
return new Widget.Box({
className: "sliders",
orientation: Gtk.Orientation.VERTICAL,
expand: true,
children: [
new Widget.Box({
className: "sink speaker",
children: [
new Widget.Label({
className: "nf icon",
label: "󰕾"
} as Widget.LabelProps),
children: bind(Wireplumber.getWireplumber(), "defaultSpeaker").as((sink) => [
new Widget.Button({
className: "nf",
label: bind(sink, "mute").as((muted) => !muted ? "󰕾" : "󰖁"),
onClick: () => Wireplumber.getDefault().toggleMuteSink()
} as Widget.ButtonProps),
new Widget.Slider({
drawValue: false,
hexpand: true,
setup: (slider) => slider.set_value(Wireplumber.getDefault().getSinkVolume()),
value: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) =>
Math.floor(volume * 100)),
setup: (slider) => slider.value = Math.floor(sink.volume * 100),
value: bind(sink, "volume").as((vol) => Math.floor(vol * 100)),
max: Wireplumber.getDefault().getMaxSinkVolume(),
onDragged: (slider: Gtk.Scale) => Wireplumber.getDefault().setSinkVolume(slider.get_value())
} as Widget.SliderProps)
]
onDragged: (slider) => sink.volume = slider.value / 100
} as Widget.SliderProps),
new Widget.Button({
className: "more",
image: new Widget.Icon({
icon: "go-next-symbolic",
} as Widget.IconProps),
onClick: (_) => slidersPages.toggle(PageMixer())
} as Widget.ButtonProps)
])
} as Widget.BoxProps),
new Widget.Box({
className: "source microphone",
children: [
new Widget.Label({
className: "nf icon",
label: "󰍬"
} as Widget.LabelProps),
children: bind(Wireplumber.getWireplumber(), "defaultMicrophone").as((source) => [
new Widget.Button({
className: "nf",
label: bind(source, "mute").as((muted) => !muted ? "󰍬" : "󰍭"),
onClick: () => Wireplumber.getDefault().toggleMuteSource()
} as Widget.ButtonProps),
new Widget.Slider({
drawValue: false,
hexpand: true,
setup: (slider) => slider.set_value(Wireplumber.getDefault().getSourceVolume()),
value: bind(Wireplumber.getDefault().getDefaultSource(), "volume").as((volume: number) =>
Math.floor(volume * 100)),
setup: (slider) => slider.set_value(Math.floor(source.volume * 100)),
value: bind(source, "volume").as((vol) => Math.floor(vol * 100)),
max: Wireplumber.getDefault().getMaxSourceVolume(),
onDragged: (slider: Gtk.Scale) => Wireplumber.getDefault().setSourceVolume(slider.get_value())
onDragged: (slider) => source.volume = slider.value / 100
} as Widget.SliderProps)
]
])
} as Widget.BoxProps),
/*new Widget.Box({
className: "brightness",
children: [
new Widget.Label({
className: "icon nf",
label: "󰃠"
} as Widget.LabelProps),
new Widget.Slider({
drawValue: false,
hexpand: true,
value: 216,
max: 255
} as Widget.SliderProps)
]
} as Widget.BoxProps)*/
slidersPages
]
} as Widget.BoxProps);
}
ags/widget/control-center/pages/Mixer.ts
+72
View File
@@ -0,0 +1,72 @@
import { Page, PageProps } from "./Page";
import { bind } from "astal";
import { Gtk, Widget } from "astal/gtk3";
import AstalWp from "gi://AstalWp";
import { getAppIcon } from "../../../scripts/apps";
import { Wireplumber } from "../../../scripts/volume";
export function PageMixer(): Page {
return new Page({
id: "mixer",
title: "Mixer",
description: "Control per-application volume!",
children: bind(Wireplumber.getWireplumber(), "endpoints").as((endpoints) => [
...endpoints.filter((ep) => ep.mediaClass === AstalWp.MediaClass.AUDIO_STREAM ||
ep.mediaClass === AstalWp.MediaClass.VIDEO_STREAM).map((ep) =>
new Widget.EventBox({
hexpand: true,
setup: (eventbox) => {
const connections: Array<number> = [];
eventbox.add(new Widget.Box({
orientation: Gtk.Orientation.HORIZONTAL,
children: [
new Widget.Icon({
icon: getStreamIcon(ep) ?? "application-x-executable-symbolic",
css: "font-size: 18px; margin-right: 6px;"
} as Widget.IconProps),
new Widget.Box({
orientation: Gtk.Orientation.VERTICAL,
hexpand: true,
children: [
new Widget.Revealer({
transitionDuration: 180,
transitionType: Gtk.RevealerTransitionType.SLIDE_DOWN,
setup: (self) => connections.push(
eventbox.connect("hover", () => self.revealChild = true),
eventbox.connect("hover-lost", () => self.revealChild = false)
),
onDestroy: () => connections.map(id => eventbox.disconnect(id)),
child: new Widget.Label({
label: ep.name || "Unknown",
className: "name",
xalign: 0
} as Widget.LabelProps)
} as Widget.RevealerProps),
new Widget.Slider({
min: 0,
drawValue: false,
max: 100,
setup: (self) => self.value = Math.floor(ep.volume * 100),
value: bind(ep, "volume").as((vol) => Math.floor(vol * 100)),
onDragged: (self) => ep.volume = self.value / 100
} as Widget.SliderProps)
]
} as Widget.BoxProps)
]
} as Widget.BoxProps))
}
} as Widget.EventBoxProps)
)
])
} as PageProps);
}
function getStreamIcon(endpoint: AstalWp.Endpoint): (string|undefined) {
let icon = getAppIcon(endpoint.icon);
if(icon) return icon;
icon = getAppIcon(endpoint.name.split(' ')[0]);
if(icon) return icon;
return undefined;
}