From 3dee371ed7e460d68018839e0ff17b436e2c6b52 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Mon, 14 Sep 2026 13:03:51 +0200 Subject: feat(sound): switch default device, control the level The sound page showed the default sink and source but gave no way to choose another device and the meter was inert. Each section now lists the real audio devices, streams and monitor nodes filtered out, behind an in-place dropdown that sets Pipewire.preferredDefaultAudioSink or preferredDefaultAudioSource. The meter takes the wheel, click and drag, and the state glyph beside the percentage toggles mute. The list expands in place rather than in a popup because a QtQuick.Controls popup is a separate window and does not position reliably on a layer surface. The meter accepts the wheel and prevents stealing so the page's ScrollView neither scrolls nor flicks instead. --- desktop/modules/sound/Service.qml | 12 +++ desktop/modules/sound/SoundPage.qml | 191 +++++++++++++++++++++++++++++++----- 2 files changed, 179 insertions(+), 24 deletions(-) (limited to 'desktop/modules/sound') diff --git a/desktop/modules/sound/Service.qml b/desktop/modules/sound/Service.qml index e509a94..22a4520 100644 --- a/desktop/modules/sound/Service.qml +++ b/desktop/modules/sound/Service.qml @@ -24,6 +24,18 @@ Scope { readonly property real volume: sink?.audio?.volume ?? 0 readonly property bool muted: sink?.audio?.muted ?? false + // The devices that can be made the default. A stream is an application, + // not a device, and a monitor node is the loopback view of a sink rather + // than something to record from, so both are filtered out. `isSink` true + // means the node accepts audio (an output device); false means it outputs + // audio (an input device, a microphone). + readonly property var outputs: + Pipewire.nodes.values.filter(n => n.audio && !n.isStream && n.isSink + && !String(n.name).endsWith(".monitor")) + readonly property var inputs: + Pipewire.nodes.values.filter(n => n.audio && !n.isStream && !n.isSink + && !String(n.name).endsWith(".monitor")) + // Which node changed last, and whether it was the input. The OSD draws // this one; null means nothing to show. property PwNode active: null diff --git a/desktop/modules/sound/SoundPage.qml b/desktop/modules/sound/SoundPage.qml index d530e9d..7a757c9 100644 --- a/desktop/modules/sound/SoundPage.qml +++ b/desktop/modules/sound/SoundPage.qml @@ -22,16 +22,38 @@ Column { spacing: 16 - // Output and input, each with its own slider. + // A device's human name, most readable first. + function devLabel(n) { + if (!n) return "—"; + return n.description || n.nickname || n.name || ("node " + n.id); + } + + // The state glyph for a level row, the same shapes the OSD uses: a + // microphone for the input, a speaker whose fill follows the level for the + // output, red when muted. + function stateIcon(audio, input) { + if (input) return audio?.muted ? "\uf131" : "\uf130"; + if (!audio || audio.muted || audio.volume <= 0) return "\uf026"; + return audio.volume < 0.5 ? "\uf027" : "\uf028"; + } + + // Output and input. Each shows the current device, a slider for it, and an + // in-place device list that sets the default. The list expands within the + // page rather than opening a popup: a QtQuick.Controls popup is a separate + // window and does not position reliably on this layer surface. Repeater { model: [ - { label: "Output", node: page.service.sink }, - { label: "Input", node: page.service.source }, + { label: "Output", node: page.service.sink, devices: page.service.outputs, + setDefault: n => Pipewire.preferredDefaultAudioSink = n }, + { label: "Input", node: page.service.source, devices: page.service.inputs, + setDefault: n => Pipewire.preferredDefaultAudioSource = n }, ] Column { + id: section required property var modelData readonly property var audio: modelData.node?.audio ?? null + property bool expanded: false width: page.width spacing: 6 @@ -48,42 +70,163 @@ Column { color: Theme.text } - Text { - anchors.right: parent.right - text: !audio ? "—" : audio.muted ? "muted" : Math.round(audio.volume * 100) + "%" - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 1 } - color: audio?.muted ? Theme.red : Theme.subtext + // State glyph and level, clickable to mute/unmute. + Row { + id: levelRow + anchors { right: parent.right; verticalCenter: parent.verticalCenter } + spacing: 6 + + Text { + anchors.verticalCenter: parent.verticalCenter + text: page.stateIcon(audio, modelData.label === "Input") + font { family: Theme.fontFamily; pixelSize: Theme.fontSize } + color: audio?.muted ? Theme.red : Theme.accent + } + + Text { + anchors.verticalCenter: parent.verticalCenter + text: !audio ? "—" : audio.muted ? "muted" : Math.round(audio.volume * 100) + "%" + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 1 } + color: audio?.muted ? Theme.red : Theme.subtext + } + } + + MouseArea { + anchors.fill: levelRow + enabled: audio !== null + cursorShape: Qt.PointingHandCursor + onClicked: if (audio) audio.muted = !audio.muted + } + } + + // The current device; click to open the device list. + Item { + width: parent.width + implicitHeight: devRow.implicitHeight + + Row { + id: devRow + width: parent.width + spacing: 6 + + Text { + width: parent.width - chevron.implicitWidth - parent.spacing + elide: Text.ElideRight + text: page.devLabel(modelData.node) + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 } + color: Theme.text + } + + Text { + id: chevron + text: section.expanded ? "\uf077" : "\uf078" + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } + color: Theme.overlay + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: section.expanded = !section.expanded } } - Text { + // The devices, expanded in place. The current one is highlighted; + // clicking a row makes it the default and folds the list away. + Column { width: parent.width - elide: Text.ElideRight - text: modelData.node?.description ?? modelData.node?.name ?? "" - font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 } - color: Theme.overlay + spacing: 2 + visible: section.expanded + + Repeater { + model: section.modelData.devices + + Rectangle { + required property var modelData + readonly property bool current: section.modelData.node === modelData + + width: section.width + implicitHeight: devText.implicitHeight + 8 + radius: 6 + color: devArea.containsMouse ? Qt.alpha(Theme.accent, 0.18) + : current ? Qt.alpha(Theme.accent, 0.10) : "transparent" + + Text { + id: devText + anchors { + left: parent.left; right: parent.right + verticalCenter: parent.verticalCenter + leftMargin: 8; rightMargin: 8 + } + elide: Text.ElideRight + text: page.devLabel(modelData) + font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3; bold: current } + color: current ? Theme.accent : Theme.text + } + + MouseArea { + id: devArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + section.modelData.setDefault(modelData); + section.expanded = false; + } + } + } + } } - // Click or drag anywhere on the bar to set the level. - Rectangle { + // The meter. The hit area is taller than the 8px bar so it is easy + // to grab; preventStealing stops the page's Flickable taking the + // press, and the wheel is accepted here so the page does not scroll + // instead. Click sets, drag scrubs, wheel steps, wheel-up unmutes + // (the same thing the volume keybind does). + Item { + id: meter width: parent.width - height: 8 - radius: 4 - color: Theme.surface + height: 20 + + readonly property real level: Math.min(audio?.volume ?? 0, 1) Rectangle { - height: parent.height - radius: parent.radius - width: parent.width * Math.min(audio?.volume ?? 0, 1) - color: audio?.muted ? Theme.red : Theme.accent - opacity: audio?.muted ? 0.5 : 1 + anchors.verticalCenter: parent.verticalCenter + width: parent.width + height: 8 + radius: 4 + color: Theme.surface + + Rectangle { + height: parent.height + radius: parent.radius + width: parent.width * meter.level + color: audio?.muted ? Theme.red : Theme.accent + opacity: audio?.muted ? 0.5 : 1 + } } MouseArea { anchors.fill: parent enabled: audio !== null - onPositionChanged: mouse => set(mouse.x) + preventStealing: true + cursorShape: Qt.PointingHandCursor + onPressed: mouse => set(mouse.x) + onPositionChanged: mouse => { if (pressed) set(mouse.x); } + + onWheel: wheel => { + if (!audio || wheel.angleDelta.y === 0) return; + if (wheel.angleDelta.y > 0) { + audio.muted = false; + audio.volume = Math.min(1, audio.volume + 0.05); + } else { + audio.volume = Math.max(0, audio.volume - 0.05); + } + wheel.accepted = true; + } + function set(x) { if (audio) audio.volume = Math.max(0, Math.min(1, x / width)); } -- cgit v1.2.3