mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-13 01:02:18 -04:00
feat: Alias for Audio Devices
- New custom audio UI to set custom names for input/output devices
This commit is contained in:
purian23
503
quickshell/Modules/Settings/AudioTab.qml
Normal file
503
quickshell/Modules/Settings/AudioTab.qml
Normal file
@@ -0,0 +1,503 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import Quickshell.Services.Pipewire
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Modules.Settings.Widgets
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property var outputDevices: []
|
||||
property var inputDevices: []
|
||||
property bool showEditDialog: false
|
||||
property var editingDevice: null
|
||||
property string editingDeviceType: ""
|
||||
property string newDeviceName: ""
|
||||
property bool isReloadingAudio: false
|
||||
|
||||
function updateDeviceList() {
|
||||
const allNodes = Pipewire.nodes.values;
|
||||
|
||||
// Sort devices: active first, then alphabetically by name
|
||||
const sortDevices = (a, b) => {
|
||||
if (a === AudioService.sink && b !== AudioService.sink)
|
||||
return -1;
|
||||
if (b === AudioService.sink && a !== AudioService.sink)
|
||||
return 1;
|
||||
const nameA = AudioService.displayName(a).toLowerCase();
|
||||
const nameB = AudioService.displayName(b).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
const outputs = allNodes.filter(node => {
|
||||
return node.audio && node.isSink && !node.isStream;
|
||||
});
|
||||
outputDevices = outputs.sort(sortDevices);
|
||||
|
||||
const inputs = allNodes.filter(node => {
|
||||
return node.audio && !node.isSink && !node.isStream;
|
||||
});
|
||||
|
||||
const sortInputs = (a, b) => {
|
||||
if (a === AudioService.source && b !== AudioService.source)
|
||||
return -1;
|
||||
if (b === AudioService.source && a !== AudioService.source)
|
||||
return 1;
|
||||
const nameA = AudioService.displayName(a).toLowerCase();
|
||||
const nameB = AudioService.displayName(b).toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
};
|
||||
|
||||
inputDevices = inputs.sort(sortInputs);
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
updateDeviceList();
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: Pipewire.nodes
|
||||
function onValuesChanged() {
|
||||
root.updateDeviceList();
|
||||
}
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: AudioService
|
||||
function onWireplumberReloadStarted() {
|
||||
root.isReloadingAudio = true;
|
||||
}
|
||||
function onWireplumberReloadCompleted(success) {
|
||||
Qt.callLater(() => {
|
||||
delayTimer.start();
|
||||
});
|
||||
}
|
||||
function onDeviceAliasChanged(nodeName, newAlias) {
|
||||
root.updateDeviceList();
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: delayTimer
|
||||
interval: 2000
|
||||
repeat: false
|
||||
onTriggered: {
|
||||
root.isReloadingAudio = false;
|
||||
root.updateDeviceList();
|
||||
}
|
||||
}
|
||||
|
||||
DankFlickable {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
contentHeight: mainColumn.height + Theme.spacingXL
|
||||
contentWidth: width
|
||||
|
||||
Column {
|
||||
id: mainColumn
|
||||
topPadding: 4
|
||||
width: Math.min(550, parent.width - Theme.spacingL * 2)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: Theme.spacingXL
|
||||
|
||||
SettingsCard {
|
||||
tab: "audio"
|
||||
tags: ["audio", "device", "output", "speaker"]
|
||||
title: I18n.tr("Output Devices")
|
||||
settingKey: "audioOutputDevices"
|
||||
iconName: "volume_up"
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: I18n.tr("Set custom names for your audio output devices")
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1
|
||||
color: Theme.outline
|
||||
opacity: 0.2
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.outputDevices
|
||||
|
||||
delegate: DeviceAliasRow {
|
||||
required property var modelData
|
||||
|
||||
deviceNode: modelData
|
||||
deviceType: "output"
|
||||
|
||||
onEditRequested: device => {
|
||||
root.editingDevice = device;
|
||||
root.editingDeviceType = "output";
|
||||
root.newDeviceName = AudioService.displayName(device);
|
||||
root.showEditDialog = true;
|
||||
}
|
||||
|
||||
onResetRequested: device => {
|
||||
AudioService.removeDeviceAlias(device.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: I18n.tr("No output devices found")
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
visible: root.outputDevices.length === 0
|
||||
topPadding: Theme.spacingM
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsCard {
|
||||
tab: "audio"
|
||||
tags: ["audio", "device", "input", "microphone"]
|
||||
title: I18n.tr("Input Devices")
|
||||
settingKey: "audioInputDevices"
|
||||
iconName: "mic"
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: I18n.tr("Set custom names for your audio input devices")
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1
|
||||
color: Theme.outline
|
||||
opacity: 0.2
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: root.inputDevices
|
||||
|
||||
delegate: DeviceAliasRow {
|
||||
required property var modelData
|
||||
|
||||
deviceNode: modelData
|
||||
deviceType: "input"
|
||||
|
||||
onEditRequested: device => {
|
||||
root.editingDevice = device;
|
||||
root.editingDeviceType = "input";
|
||||
root.newDeviceName = AudioService.displayName(device);
|
||||
root.showEditDialog = true;
|
||||
}
|
||||
|
||||
onResetRequested: device => {
|
||||
AudioService.removeDeviceAlias(device.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: I18n.tr("No input devices found")
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
visible: root.inputDevices.length === 0
|
||||
topPadding: Theme.spacingM
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: loadingOverlay
|
||||
anchors.fill: parent
|
||||
color: Theme.withAlpha(Theme.surface, 0.9)
|
||||
visible: root.isReloadingAudio
|
||||
z: 100
|
||||
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.spacingL
|
||||
|
||||
Rectangle {
|
||||
width: 80
|
||||
height: 80
|
||||
radius: 40
|
||||
color: Theme.primaryContainer
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
DankIcon {
|
||||
id: spinningIcon
|
||||
name: "refresh"
|
||||
size: 40
|
||||
color: Theme.primary
|
||||
anchors.centerIn: parent
|
||||
|
||||
RotationAnimator {
|
||||
target: spinningIcon
|
||||
from: 0
|
||||
to: 360
|
||||
duration: 1500
|
||||
loops: Animation.Infinite
|
||||
running: loadingOverlay.visible
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
spacing: Theme.spacingS
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Restarting audio system...")
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("This may take a few seconds")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceVariantText
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: dialogOverlay
|
||||
anchors.fill: parent
|
||||
visible: root.showEditDialog
|
||||
color: Theme.withAlpha(Theme.surface, 0.8)
|
||||
z: 1000
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
root.showEditDialog = false;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: editDialog
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(500, parent.width - Theme.spacingL * 4)
|
||||
height: dialogContent.implicitHeight + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.surfaceContainerHigh
|
||||
border.width: 1
|
||||
border.color: Theme.outlineMedium
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: dialogContent
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingL
|
||||
spacing: Theme.spacingL
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
DankIcon {
|
||||
name: root.editingDeviceType === "input" ? "mic" : "speaker"
|
||||
size: Theme.iconSize + 8
|
||||
color: Theme.primary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width - Theme.iconSize - Theme.spacingM - 8
|
||||
spacing: 4
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Set Custom Device Name")
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
font.weight: Font.Bold
|
||||
color: Theme.surfaceText
|
||||
width: parent.width
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.editingDevice?.name ?? ""
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
StyledText {
|
||||
visible: AudioService.hasDeviceAlias(root.editingDevice?.name ?? "")
|
||||
text: I18n.tr("Original: %1").arg(AudioService.originalName(root.editingDevice))
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Custom Name")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
|
||||
DankTextField {
|
||||
id: nameInput
|
||||
width: parent.width
|
||||
placeholderText: I18n.tr("Enter device name...")
|
||||
text: root.newDeviceName
|
||||
normalBorderColor: Theme.outlineMedium
|
||||
focusedBorderColor: Theme.primary
|
||||
showClearButton: true
|
||||
|
||||
onTextChanged: {
|
||||
root.newDeviceName = text;
|
||||
}
|
||||
|
||||
Keys.onReturnPressed: {
|
||||
if (text.trim() !== "") {
|
||||
saveButtonMouseArea.clicked(null);
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onEscapePressed: {
|
||||
root.showEditDialog = false;
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
Qt.callLater(() => {
|
||||
forceActiveFocus();
|
||||
selectAll();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
width: parent.width
|
||||
text: I18n.tr("Press Enter and the audio system will restart to apply the change")
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.surfaceVariantText
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingM
|
||||
layoutDirection: Qt.RightToLeft
|
||||
|
||||
Rectangle {
|
||||
id: saveButton
|
||||
width: saveButtonContent.width + Theme.spacingL * 2
|
||||
height: Theme.buttonHeight
|
||||
radius: Theme.cornerRadius
|
||||
color: saveButtonMouseArea.containsMouse ? Theme.primaryContainer : Theme.primary
|
||||
enabled: root.newDeviceName.trim() !== ""
|
||||
opacity: enabled ? 1.0 : 0.5
|
||||
|
||||
Row {
|
||||
id: saveButtonContent
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.spacingS
|
||||
|
||||
DankIcon {
|
||||
name: "check"
|
||||
size: Theme.iconSize - 4
|
||||
color: Theme.onPrimary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: I18n.tr("Save")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.onPrimary
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: saveButtonMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: parent.enabled
|
||||
onClicked: {
|
||||
if (root.editingDevice && root.newDeviceName.trim() !== "") {
|
||||
AudioService.setDeviceAlias(root.editingDevice.name, root.newDeviceName);
|
||||
root.showEditDialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: cancelButtonText.width + Theme.spacingL * 2
|
||||
height: Theme.buttonHeight
|
||||
radius: Theme.cornerRadius
|
||||
color: cancelButtonMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
|
||||
border.width: 1
|
||||
border.color: Theme.outline
|
||||
|
||||
StyledText {
|
||||
id: cancelButtonText
|
||||
text: I18n.tr("Cancel")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.weight: Font.Medium
|
||||
color: Theme.surfaceText
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: cancelButtonMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
root.showEditDialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user