521 lines
12 KiB
QML
521 lines
12 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import Quickshell
|
|
import Quickshell.Services.Pipewire
|
|
import Quickshell.Widgets
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import qs.Config
|
|
import qs.Components
|
|
import qs.Daemons
|
|
import qs.Helpers
|
|
|
|
Item {
|
|
id: root
|
|
|
|
readonly property int rounding: Appearance.rounding.small - Appearance.padding.small
|
|
readonly property int topMargin: 0
|
|
required property var wrapper
|
|
|
|
implicitHeight: layout.implicitHeight + Appearance.padding.small * 2
|
|
implicitWidth: layout.implicitWidth + Appearance.padding.small * 2
|
|
|
|
CustomRect {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
implicitHeight: parent.implicitHeight
|
|
radius: Appearance.rounding.small
|
|
y: parent.y
|
|
|
|
Behavior on implicitHeight {
|
|
Anim {
|
|
duration: MaterialEasing.emphasizedDecelTime
|
|
easing.bezierCurve: MaterialEasing.emphasized
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: layout
|
|
|
|
anchors.centerIn: parent
|
|
implicitWidth: stack.currentItem ? stack.currentItem.childrenRect.height : 0
|
|
spacing: 12
|
|
|
|
RowLayout {
|
|
id: tabBar
|
|
|
|
property int tabHeight: 36
|
|
|
|
Layout.fillWidth: true
|
|
spacing: 6
|
|
|
|
CustomClippingRect {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: tabBar.tabHeight
|
|
color: stack.currentIndex === 0 ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
|
|
radius: root.rounding
|
|
|
|
StateLayer {
|
|
function onClicked(): void {
|
|
stack.currentIndex = 0;
|
|
}
|
|
|
|
CustomText {
|
|
anchors.centerIn: parent
|
|
color: stack.currentIndex === 0 ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
|
|
text: qsTr("Volumes")
|
|
}
|
|
}
|
|
}
|
|
|
|
CustomClippingRect {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: tabBar.tabHeight
|
|
color: stack.currentIndex === 1 ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
|
|
radius: root.rounding
|
|
|
|
StateLayer {
|
|
function onClicked(): void {
|
|
stack.currentIndex = 1;
|
|
}
|
|
|
|
CustomText {
|
|
anchors.centerIn: parent
|
|
color: stack.currentIndex === 1 ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
|
|
text: qsTr("Devices")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
StackLayout {
|
|
id: stack
|
|
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: currentIndex === 0 ? vol.childrenRect.height : dev.childrenRect.height
|
|
currentIndex: 0
|
|
|
|
Behavior on currentIndex {
|
|
SequentialAnimation {
|
|
ParallelAnimation {
|
|
Anim {
|
|
duration: MaterialEasing.expressiveEffectsTime
|
|
property: "opacity"
|
|
target: stack
|
|
to: 0
|
|
}
|
|
|
|
Anim {
|
|
duration: MaterialEasing.expressiveEffectsTime
|
|
property: "scale"
|
|
target: stack
|
|
to: 0.9
|
|
}
|
|
}
|
|
|
|
PropertyAction {
|
|
}
|
|
|
|
ParallelAnimation {
|
|
Anim {
|
|
duration: MaterialEasing.expressiveEffectsTime
|
|
property: "opacity"
|
|
target: stack
|
|
to: 1
|
|
}
|
|
|
|
Anim {
|
|
duration: MaterialEasing.expressiveEffectsTime
|
|
property: "scale"
|
|
target: stack
|
|
to: 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
VolumesTab {
|
|
id: vol
|
|
}
|
|
|
|
DevicesTab {
|
|
id: dev
|
|
}
|
|
}
|
|
}
|
|
|
|
component DevicesTab: Item {
|
|
implicitHeight: deviceColumn.height + Appearance.padding.normal
|
|
implicitWidth: deviceColumn.width + Appearance.padding.normal
|
|
|
|
ColumnLayout {
|
|
id: deviceColumn
|
|
|
|
anchors.centerIn: parent
|
|
spacing: 12
|
|
|
|
ButtonGroup {
|
|
id: sinks
|
|
}
|
|
|
|
ButtonGroup {
|
|
id: sources
|
|
}
|
|
|
|
CustomText {
|
|
font.weight: 500
|
|
text: qsTr("Output device")
|
|
}
|
|
|
|
Repeater {
|
|
model: Audio.sinks
|
|
|
|
CustomRadioButton {
|
|
required property PwNode modelData
|
|
|
|
ButtonGroup.group: sinks
|
|
checked: Audio.sink?.id === modelData.id
|
|
text: modelData.description
|
|
|
|
onClicked: Audio.setAudioSink(modelData)
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
Layout.topMargin: 10
|
|
font.weight: 500
|
|
text: qsTr("Input device")
|
|
}
|
|
|
|
Repeater {
|
|
model: Audio.sources
|
|
|
|
CustomRadioButton {
|
|
required property PwNode modelData
|
|
|
|
ButtonGroup.group: sources
|
|
checked: Audio.source?.id === modelData.id
|
|
text: modelData.description
|
|
|
|
onClicked: Audio.setAudioSource(modelData)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
component VolumesTab: ColumnLayout {
|
|
spacing: 12
|
|
|
|
CustomRect {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 42 + Appearance.spacing.smaller * 2
|
|
Layout.topMargin: root.topMargin
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: root.rounding
|
|
|
|
RowLayout {
|
|
id: outputVolume
|
|
|
|
anchors.left: parent.left
|
|
anchors.margins: Appearance.spacing.smaller
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 15
|
|
|
|
CustomRect {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
Layout.preferredHeight: 40
|
|
Layout.preferredWidth: 40
|
|
color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
|
radius: Appearance.rounding.full
|
|
|
|
MaterialIcon {
|
|
anchors.alignWhenCentered: false
|
|
anchors.centerIn: parent
|
|
animate: true
|
|
color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
|
font.pointSize: 22
|
|
text: Audio.muted ? "volume_off" : "volume_up"
|
|
}
|
|
|
|
StateLayer {
|
|
color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
|
|
|
onClicked: {
|
|
const audio = Audio.sink?.audio;
|
|
if (audio)
|
|
audio.muted = !audio.muted;
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
|
Layout.fillWidth: true
|
|
text: "Output Volume"
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
|
font.bold: true
|
|
text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
|
|
}
|
|
}
|
|
|
|
CustomMouseArea {
|
|
Layout.bottomMargin: 5
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 10
|
|
|
|
CustomSlider {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
|
implicitHeight: 10
|
|
value: Audio.volume
|
|
|
|
Behavior on value {
|
|
Anim {
|
|
}
|
|
}
|
|
|
|
onMoved: Audio.setVolume(value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
CustomRect {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 42 + Appearance.spacing.smaller * 2
|
|
Layout.topMargin: root.topMargin
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: root.rounding
|
|
|
|
RowLayout {
|
|
id: inputVolume
|
|
|
|
anchors.left: parent.left
|
|
anchors.margins: Appearance.spacing.smaller
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 15
|
|
|
|
CustomRect {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
Layout.preferredHeight: 40
|
|
Layout.preferredWidth: 40
|
|
color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
|
radius: Appearance.rounding.full
|
|
|
|
MaterialIcon {
|
|
anchors.alignWhenCentered: false
|
|
anchors.centerIn: parent
|
|
animate: true
|
|
color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
|
font.pointSize: 22
|
|
text: Audio.sourceMuted ? "mic_off" : "mic"
|
|
}
|
|
|
|
StateLayer {
|
|
color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
|
|
|
onClicked: {
|
|
const audio = Audio.source?.audio;
|
|
if (audio)
|
|
audio.muted = !audio.muted;
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
|
|
RowLayout {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
|
Layout.fillWidth: true
|
|
text: "Input Volume"
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
|
font.bold: true
|
|
text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
|
|
}
|
|
}
|
|
|
|
CustomMouseArea {
|
|
Layout.bottomMargin: 5
|
|
Layout.fillWidth: true
|
|
implicitHeight: 10
|
|
|
|
CustomSlider {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
|
implicitHeight: 10
|
|
value: Audio.sourceVolume
|
|
|
|
Behavior on value {
|
|
Anim {
|
|
}
|
|
}
|
|
|
|
onMoved: Audio.setSourceVolume(value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 1
|
|
Layout.topMargin: root.topMargin
|
|
color: DynamicColors.tPalette.m3outline
|
|
visible: appTracks.model.length > 0
|
|
}
|
|
|
|
Repeater {
|
|
id: appTracks
|
|
|
|
model: Audio.streams.filter(s => s.isSink)
|
|
|
|
CustomClippingRect {
|
|
id: appBox
|
|
|
|
required property int index
|
|
required property var modelData
|
|
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 42 + Appearance.spacing.smaller * 2
|
|
Layout.topMargin: root.topMargin
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: root.rounding
|
|
|
|
PwNodePeakMonitor {
|
|
id: peak
|
|
|
|
node: appBox.modelData
|
|
}
|
|
|
|
CustomRect {
|
|
id: peakFill
|
|
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
|
|
implicitWidth: parent.width * peak.peak
|
|
|
|
Behavior on implicitWidth {
|
|
Anim {
|
|
duration: MaterialEasing.expressiveEffectsTime
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
id: layoutVolume
|
|
|
|
anchors.fill: parent
|
|
anchors.margins: Appearance.spacing.smaller
|
|
spacing: 15
|
|
|
|
CustomRect {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
Layout.preferredHeight: 40
|
|
Layout.preferredWidth: 40
|
|
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
|
radius: Appearance.rounding.full
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
anchors.centerIn: parent
|
|
animate: true
|
|
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
|
font.pointSize: 22
|
|
text: appBox.modelData.audio.muted ? "volume_off" : "volume_up"
|
|
}
|
|
|
|
StateLayer {
|
|
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
|
|
radius: Appearance.rounding.full
|
|
|
|
onClicked: {
|
|
appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
|
|
Layout.fillHeight: true
|
|
|
|
TextMetrics {
|
|
id: metrics
|
|
|
|
elide: Text.ElideRight
|
|
elideWidth: root.width - 50
|
|
text: Audio.getStreamName(appBox.modelData)
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
text: metrics.elidedText
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
|
Layout.fillHeight: true
|
|
font.bold: true
|
|
text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
|
|
}
|
|
}
|
|
|
|
CustomMouseArea {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
implicitHeight: 10
|
|
|
|
CustomSlider {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
|
|
implicitHeight: 10
|
|
value: appBox.modelData.audio.volume
|
|
|
|
onMoved: {
|
|
Audio.setStreamVolume(appBox.modelData, value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|