AudioDeviceSelector: In a loader but fake content

This commit is contained in:
quadbyte 2025-08-10 19:25:22 -04:00
parent 620afc7d03
commit 8d70b3d737
4 changed files with 500 additions and 390 deletions

View file

@ -1,369 +1,485 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Quickshell
import Quickshell.Services.Pipewire import Quickshell.Services.Pipewire
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
NPanel { NLoader {
id: ioSelector id: root
// property int tabIndex: 0 content: Component {
// property Item anchorItem: null NPanel {
id: demoPanel
// signal panelClosed()
readonly property real scaling: Scaling.scale(screen)
// function sinkNodes() {
// let nodes = Pipewire.nodes && Pipewire.nodes.values ? Pipewire.nodes.values.filter(function(n) { // Ensure panel shows itself once created
// return n.isSink && n.audio && n.isStream === false; Component.onCompleted: show()
// }) : [];
// if (Pipewire.defaultAudioSink) Rectangle {
// nodes = nodes.slice().sort(function(a, b) { color: Colors.backgroundPrimary
// if (a.id === Pipewire.defaultAudioSink.id) radius: Style.radiusMedium * scaling
// return -1; border.color: Colors.backgroundTertiary
border.width: Math.min(1, Style.borderMedium * scaling)
// if (b.id === Pipewire.defaultAudioSink.id) width: 500 * scaling
// return 1; height: 400
anchors.centerIn: parent
// return 0;
// }); // Prevent closing when clicking in the panel bg
MouseArea {
// return nodes; anchors.fill: parent
// } }
// function sourceNodes() { ColumnLayout {
// let nodes = Pipewire.nodes && Pipewire.nodes.values ? Pipewire.nodes.values.filter(function(n) { anchors.fill: parent
// return !n.isSink && n.audio && n.isStream === false; anchors.margins: Style.marginXL * scaling
// }) : []; spacing: Style.marginSmall * scaling
// if (Pipewire.defaultAudioSource)
// nodes = nodes.slice().sort(function(a, b) { // NIconButton
// if (a.id === Pipewire.defaultAudioSource.id) ColumnLayout {
// return -1; spacing: 16 * scaling
NText {
// if (b.id === Pipewire.defaultAudioSource.id) text: "NIconButton"
// return 1; color: Colors.accentSecondary
}
// return 0;
// }); NIconButton {
id: myIconButton
// return nodes; icon: "refresh"
// } }
// Component.onCompleted: { NDivider {
// if (Pipewire.nodes && Pipewire.nodes.values) { Layout.fillWidth: true
// for (var i = 0; i < Pipewire.nodes.values.length; ++i) { }
// var n = Pipewire.nodes.values[i]; }
// }
// } // NToggle
// } ColumnLayout {
// Component.onDestruction: { spacing: Style.marginLarge * scaling
// } NText {
// onVisibleChanged: { text: "NToggle"
// if (!visible) color: Colors.accentSecondary
// panelClosed(); }
// } NToggle {
label: "Label"
// // Bind all Pipewire nodes so their properties are valid description: "Description"
// PwObjectTracker { onToggled: function (value) {
// id: nodeTracker console.log("NToggle: " + value)
}
// objects: Pipewire.nodes }
// }
NDivider {
// Rectangle { Layout.fillWidth: true
// color: Theme.backgroundPrimary }
// radius: 20 }
// width: 340
// height: 340 // NSlider
// anchors.top: parent.top ColumnLayout {
// anchors.right: parent.right spacing: 16 * scaling
// anchors.topMargin: 4 NText {
// anchors.rightMargin: 4 text: "Scaling"
color: Colors.accentSecondary
// // Prevent closing when clicking in the panel bg }
// MouseArea { RowLayout {
// anchors.fill: parent spacing: Style.marginSmall * scaling
// } NText {
text: `${Math.round(Scaling.overrideScale * 100)}%`
// ColumnLayout { Layout.alignment: Qt.AlignVCenter
// anchors.fill: parent }
// anchors.margins: 16 NSlider {
// spacing: 10 id: scaleSlider
from: 0.6
// // Tabs centered inside the window to: 1.8
// RowLayout { stepSize: 0.01
// Layout.fillWidth: true value: Scaling.overrideScale
// Layout.alignment: Qt.AlignHCenter onMoved: function () {
// spacing: 0 Scaling.overrideScale = value
}
// Tabs { onPressedChanged: function () {
// id: ioTabs Scaling.overrideEnabled = true
}
// tabsModel: [{ }
// "label": "Output", NIconButton {
// "icon": "volume_up" icon: "restart_alt"
// }, { sizeMultiplier: 0.7
// "label": "Input", onClicked: function () {
// "icon": "mic" Scaling.overrideEnabled = false
// }] Scaling.overrideScale = 1.0
// currentIndex: tabIndex }
// onTabChanged: { }
// tabIndex = currentIndex; }
// } NDivider {
// } Layout.fillWidth: true
}
// } }
}
// // Add vertical space between tabs and entries }
// Item { }
// height: 36 }
// Layout.fillWidth: true
// }
// // Output Devices
// Flickable {
// id: sinkList
// visible: tabIndex === 0
// contentHeight: sinkColumn.height
// clip: true
// interactive: contentHeight > height
// width: parent.width
// height: 220
// ColumnLayout {
// id: sinkColumn
// width: sinkList.width
// spacing: 6
// Repeater {
// model: ioSelector.sinkNodes()
// Rectangle {
// width: parent.width
// height: 36
// color: "transparent"
// radius: 6
// RowLayout {
// anchors.fill: parent
// anchors.margins: 6
// spacing: 8
// Text {
// text: "volume_up"
// font.family: "Material Symbols Outlined"
// font.pixelSize: 16 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// Layout.alignment: Qt.AlignVCenter
// }
// ColumnLayout {
// Layout.fillWidth: true
// spacing: 1
// Layout.maximumWidth: sinkList.width - 120 // Reserve space for the Set button
// Text {
// text: modelData.nickname || modelData.description || modelData.name
// font.bold: true
// font.pixelSize: 12 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// Text {
// text: modelData.description !== modelData.nickname ? modelData.description : ""
// font.pixelSize: 10 * Theme.scale(screen)
// color: Theme.textSecondary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// }
// Rectangle {
// visible: Pipewire.preferredDefaultAudioSink !== modelData
// width: 60
// height: 20
// radius: 4
// color: Theme.accentPrimary
// border.color: Theme.accentPrimary
// border.width: 1
// Layout.alignment: Qt.AlignVCenter
// Text {
// anchors.centerIn: parent
// text: "Set"
// color: Theme.onAccent
// font.pixelSize: 10 * Theme.scale(screen)
// font.bold: true
// }
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: Pipewire.preferredDefaultAudioSink = modelData
// }
// }
// Text {
// text: "(Current)"
// visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id
// color: Theme.accentPrimary
// font.pixelSize: 10 * Theme.scale(screen)
// Layout.alignment: Qt.AlignVCenter
// }
// }
// }
// }
// }
// ScrollBar.vertical: ScrollBar {
// }
// }
// // Input Devices
// Flickable {
// id: sourceList
// visible: tabIndex === 1
// contentHeight: sourceColumn.height
// clip: true
// interactive: contentHeight > height
// width: parent.width
// height: 220
// ColumnLayout {
// id: sourceColumn
// width: sourceList.width
// spacing: 6
// Repeater {
// model: ioSelector.sourceNodes()
// Rectangle {
// width: parent.width
// height: 36
// color: "transparent"
// radius: 6
// RowLayout {
// anchors.fill: parent
// anchors.margins: 6
// spacing: 8
// Text {
// text: "mic"
// font.family: "Material Symbols Outlined"
// font.pixelSize: 16 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// Layout.alignment: Qt.AlignVCenter
// }
// ColumnLayout {
// Layout.fillWidth: true
// spacing: 1
// Layout.maximumWidth: sourceList.width - 120 // Reserve space for the Set button
// Text {
// text: modelData.nickname || modelData.description || modelData.name
// font.bold: true
// font.pixelSize: 12 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// Text {
// text: modelData.description !== modelData.nickname ? modelData.description : ""
// font.pixelSize: 10 * Theme.scale(screen)
// color: Theme.textSecondary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// }
// Rectangle {
// visible: Pipewire.preferredDefaultAudioSource !== modelData
// width: 60
// height: 20
// radius: 4
// color: Theme.accentPrimary
// border.color: Theme.accentPrimary
// border.width: 1
// Layout.alignment: Qt.AlignVCenter
// Text {
// anchors.centerIn: parent
// text: "Set"
// color: Theme.onAccent
// font.pixelSize: 10 * Theme.scale(screen)
// font.bold: true
// }
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: Pipewire.preferredDefaultAudioSource = modelData
// }
// }
// Text {
// text: "(Current)"
// visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id
// color: Theme.accentPrimary
// font.pixelSize: 10 * Theme.scale(screen)
// Layout.alignment: Qt.AlignVCenter
// }
// }
// }
// }
// }
// ScrollBar.vertical: ScrollBar {
// }
// }
// }
// }
// Connections {
// function onReadyChanged() {
// if (Pipewire.ready && Pipewire.nodes && Pipewire.nodes.values) {
// for (var i = 0; i < Pipewire.nodes.values.length; ++i) {
// var n = Pipewire.nodes.values[i];
// }
// }
// }
// function onDefaultAudioSinkChanged() {
// }
// function onDefaultAudioSourceChanged() {
// }
// target: Pipewire
// }
} }
// NPanel {
// id: ioSelector
// property int tabIndex: 0
// property Item anchorItem: null
// signal panelClosed()
// function sinkNodes() {
// let nodes = Pipewire.nodes && Pipewire.nodes.values ? Pipewire.nodes.values.filter(function(n) {
// return n.isSink && n.audio && n.isStream === false;
// }) : [];
// if (Pipewire.defaultAudioSink)
// nodes = nodes.slice().sort(function(a, b) {
// if (a.id === Pipewire.defaultAudioSink.id)
// return -1;
// if (b.id === Pipewire.defaultAudioSink.id)
// return 1;
// return 0;
// });
// return nodes;
// }
// function sourceNodes() {
// let nodes = Pipewire.nodes && Pipewire.nodes.values ? Pipewire.nodes.values.filter(function(n) {
// return !n.isSink && n.audio && n.isStream === false;
// }) : [];
// if (Pipewire.defaultAudioSource)
// nodes = nodes.slice().sort(function(a, b) {
// if (a.id === Pipewire.defaultAudioSource.id)
// return -1;
// if (b.id === Pipewire.defaultAudioSource.id)
// return 1;
// return 0;
// });
// return nodes;
// }
// Component.onCompleted: {
// if (Pipewire.nodes && Pipewire.nodes.values) {
// for (var i = 0; i < Pipewire.nodes.values.length; ++i) {
// var n = Pipewire.nodes.values[i];
// }
// }
// }
// Component.onDestruction: {
// }
// onVisibleChanged: {
// if (!visible)
// panelClosed();
// }
// // Bind all Pipewire nodes so their properties are valid
// PwObjectTracker {
// id: nodeTracker
// objects: Pipewire.nodes
// }
// Rectangle {
// color: Theme.backgroundPrimary
// radius: 20
// width: 340
// height: 340
// anchors.top: parent.top
// anchors.right: parent.right
// anchors.topMargin: 4
// anchors.rightMargin: 4
// // Prevent closing when clicking in the panel bg
// MouseArea {
// anchors.fill: parent
// }
// ColumnLayout {
// anchors.fill: parent
// anchors.margins: 16
// spacing: 10
// // Tabs centered inside the window
// RowLayout {
// Layout.fillWidth: true
// Layout.alignment: Qt.AlignHCenter
// spacing: 0
// Tabs {
// id: ioTabs
// tabsModel: [{
// "label": "Output",
// "icon": "volume_up"
// }, {
// "label": "Input",
// "icon": "mic"
// }]
// currentIndex: tabIndex
// onTabChanged: {
// tabIndex = currentIndex;
// }
// }
// }
// // Add vertical space between tabs and entries
// Item {
// height: 36
// Layout.fillWidth: true
// }
// // Output Devices
// Flickable {
// id: sinkList
// visible: tabIndex === 0
// contentHeight: sinkColumn.height
// clip: true
// interactive: contentHeight > height
// width: parent.width
// height: 220
// ColumnLayout {
// id: sinkColumn
// width: sinkList.width
// spacing: 6
// Repeater {
// model: ioSelector.sinkNodes()
// Rectangle {
// width: parent.width
// height: 36
// color: "transparent"
// radius: 6
// RowLayout {
// anchors.fill: parent
// anchors.margins: 6
// spacing: 8
// Text {
// text: "volume_up"
// font.family: "Material Symbols Outlined"
// font.pixelSize: 16 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// Layout.alignment: Qt.AlignVCenter
// }
// ColumnLayout {
// Layout.fillWidth: true
// spacing: 1
// Layout.maximumWidth: sinkList.width - 120 // Reserve space for the Set button
// Text {
// text: modelData.nickname || modelData.description || modelData.name
// font.bold: true
// font.pixelSize: 12 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// Text {
// text: modelData.description !== modelData.nickname ? modelData.description : ""
// font.pixelSize: 10 * Theme.scale(screen)
// color: Theme.textSecondary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// }
// Rectangle {
// visible: Pipewire.preferredDefaultAudioSink !== modelData
// width: 60
// height: 20
// radius: 4
// color: Theme.accentPrimary
// border.color: Theme.accentPrimary
// border.width: 1
// Layout.alignment: Qt.AlignVCenter
// Text {
// anchors.centerIn: parent
// text: "Set"
// color: Theme.onAccent
// font.pixelSize: 10 * Theme.scale(screen)
// font.bold: true
// }
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: Pipewire.preferredDefaultAudioSink = modelData
// }
// }
// Text {
// text: "(Current)"
// visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id
// color: Theme.accentPrimary
// font.pixelSize: 10 * Theme.scale(screen)
// Layout.alignment: Qt.AlignVCenter
// }
// }
// }
// }
// }
// ScrollBar.vertical: ScrollBar {
// }
// }
// // Input Devices
// Flickable {
// id: sourceList
// visible: tabIndex === 1
// contentHeight: sourceColumn.height
// clip: true
// interactive: contentHeight > height
// width: parent.width
// height: 220
// ColumnLayout {
// id: sourceColumn
// width: sourceList.width
// spacing: 6
// Repeater {
// model: ioSelector.sourceNodes()
// Rectangle {
// width: parent.width
// height: 36
// color: "transparent"
// radius: 6
// RowLayout {
// anchors.fill: parent
// anchors.margins: 6
// spacing: 8
// Text {
// text: "mic"
// font.family: "Material Symbols Outlined"
// font.pixelSize: 16 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// Layout.alignment: Qt.AlignVCenter
// }
// ColumnLayout {
// Layout.fillWidth: true
// spacing: 1
// Layout.maximumWidth: sourceList.width - 120 // Reserve space for the Set button
// Text {
// text: modelData.nickname || modelData.description || modelData.name
// font.bold: true
// font.pixelSize: 12 * Theme.scale(screen)
// color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// Text {
// text: modelData.description !== modelData.nickname ? modelData.description : ""
// font.pixelSize: 10 * Theme.scale(screen)
// color: Theme.textSecondary
// elide: Text.ElideRight
// maximumLineCount: 1
// Layout.fillWidth: true
// }
// }
// Rectangle {
// visible: Pipewire.preferredDefaultAudioSource !== modelData
// width: 60
// height: 20
// radius: 4
// color: Theme.accentPrimary
// border.color: Theme.accentPrimary
// border.width: 1
// Layout.alignment: Qt.AlignVCenter
// Text {
// anchors.centerIn: parent
// text: "Set"
// color: Theme.onAccent
// font.pixelSize: 10 * Theme.scale(screen)
// font.bold: true
// }
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: Pipewire.preferredDefaultAudioSource = modelData
// }
// }
// Text {
// text: "(Current)"
// visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id
// color: Theme.accentPrimary
// font.pixelSize: 10 * Theme.scale(screen)
// Layout.alignment: Qt.AlignVCenter
// }
// }
// }
// }
// }
// ScrollBar.vertical: ScrollBar {
// }
// }
// }
// }
// Connections {
// function onReadyChanged() {
// if (Pipewire.ready && Pipewire.nodes && Pipewire.nodes.values) {
// for (var i = 0; i < Pipewire.nodes.values.length; ++i) {
// var n = Pipewire.nodes.values[i];
// }
// }
// }
// function onDefaultAudioSinkChanged() {
// }
// function onDefaultAudioSourceChanged() {
// }
// target: Pipewire
// }
// }

View file

@ -40,32 +40,6 @@ Item {
Colors.accentPrimary.b + (Colors.error.b - Colors.accentPrimary.b) * factor, 1) Colors.accentPrimary.b + (Colors.error.b - Colors.accentPrimary.b) * factor, 1)
} }
NPill {
id: pill
icon: getIcon()
iconCircleColor: getVolumeColor()
collapsedIconColor: getIconColor()
autoHide: true
text: Math.round(Audio.volume * 100) + "%"
tooltipText: "Volume: " + Math.round(
Audio.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume."
onClicked: function () {
console.log("onClicked")
// if (ioSelector.visible) {
// ioSelector.dismiss()
// } else {
// ioSelector.show()
// }
}
onWheel: function (angle) {
if (angle > 0) {
Audio.volumeIncrement()
} else if (angle < 0) {
Audio.volumeDecrement()
}
}
}
// Connection used to open the pill when volume changes // Connection used to open the pill when volume changes
Connections { Connections {
target: Audio.sink?.audio ? Audio.sink?.audio : null target: Audio.sink?.audio ? Audio.sink?.audio : null
@ -80,8 +54,29 @@ Item {
} }
} }
NPill {
id: pill
icon: getIcon()
iconCircleColor: getVolumeColor()
collapsedIconColor: getIconColor()
autoHide: true
text: Math.round(Audio.volume * 100) + "%"
tooltipText: "Volume: " + Math.round(
Audio.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume."
onWheel: function (angle) {
if (angle > 0) {
Audio.volumeIncrement()
} else if (angle < 0) {
Audio.volumeDecrement()
}
}
onClicked: function () {
ioSelector.isLoaded = !ioSelector.isLoaded
}
}
AudioDeviceSelector { AudioDeviceSelector {
id: ioSelector id: ioSelector
// onPanelClosed: ioSelector.dismiss()
} }
} }

View file

@ -37,7 +37,7 @@ Singleton {
} }
PwObjectTracker { PwObjectTracker {
objects: [Pipewire.defaultAudioSink] objects: [Pipewire.defaultAudioSink, Pipewire.nodes]
} }
Connections { Connections {

View file

@ -4,7 +4,6 @@ import QtQuick
// NLoader { // NLoader {
// content: Component { // content: Component {
// NPanel { // NPanel {
Loader { Loader {
id: loader id: loader