shift-shell/components/mobileshell/qml/volumeosd/AudioApplet.qml
Micah Stanley 681d1683f5 VolumeOSD: Improve design, and prevent touch events from being taken from outside the osd
Fixes: https://invent.kde.org/plasma/plasma-mobile/-/issues/274

Any feedback on these changes would be much appreciated.

![Screenshot_20241024_093458-1](/uploads/7b4f89ace1a53c559737d1c05d591329/Screenshot_20241024_093458-1.png)
![Screenshot_20241023_070919](/uploads/c7b9a8de7c9bba2de01d734408e02b2b/Screenshot_20241023_070919.png)

Change Log:
- NanoShell FullScreenOverlay was changed to a LayerShellQt Window to keep it on the top layer and to prevent the popup from obsorbing all touch inputs.
- New animations were added to the volume popup.
- User can now change the volume by touching and dragging on the popup
- The mute button on the popup was fixed
- Mute buttons were added next to the volume sliders in the AudioApplet page
- Volume icons now dynamically update to the volume level
- Visual design adjustments
2024-10-25 15:52:49 +00:00

235 lines
7.1 KiB
QML

/*
* SPDX-FileCopyrightText: 2014-2015 Harald Sitter <sitter@kde.org>
* SPDX-FileCopyrightText: 2021 Devin Lin <espidev@gmail.com>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls as Controls
import org.kde.kirigami 2.20 as Kirigami
import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.kquickcontrolsaddons as KQCAddons
import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.plasma.private.volume
// capture presses on the audio applet so it doesn't close the overlay
ColumnLayout {
id: audioApplet
spacing: 0
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
property real scale: 1.0
PulseObjectFilterModel {
id: paSinkFilterModel
sortRoleName: "SortByDefault"
sortOrder: Qt.DescendingOrder
filterOutInactiveDevices: true
sourceModel: MobileShell.AudioInfo.paSinkModel
}
SourceModel {
id: paSourceModel
}
PulseObjectFilterModel {
id: paSourceFilterModel
sortRoleName: "SortByDefault"
sortOrder: Qt.DescendingOrder
filterOutInactiveDevices: true
sourceModel: paSourceModel
}
CardModel {
id: paCardModel
}
// ui elements
PopupCard {
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Kirigami.Units.gridUnit
transform: Scale {
origin.x: Math.round(implicitWidth / 2)
origin.y: Math.round(height / 2)
xScale: audioApplet.scale
yScale: audioApplet.scale
}
contentItem: ColumnLayout {
anchors.rightMargin: Kirigami.Units.smallSpacing
anchors.leftMargin: Kirigami.Units.smallSpacing
Kirigami.Heading {
level: 2
text: i18n("Outputs")
Layout.fillWidth: true
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.leftMargin: Kirigami.Units.smallSpacing
}
Repeater {
id: sinkView
Layout.fillWidth: true
model: paSinkFilterModel
delegate: DeviceListItem {
Layout.fillWidth: true
Layout.margins: Kirigami.Units.smallSpacing
type: "sink"
onlyone: sinkView.count === 1
}
}
}
}
PopupCard {
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Kirigami.Units.gridUnit
transform: Scale {
origin.x: Math.round(implicitWidth / 2)
origin.y: Math.round(height / 2)
xScale: audioApplet.scale
yScale: audioApplet.scale
}
contentItem: ColumnLayout {
anchors.rightMargin: Kirigami.Units.smallSpacing
anchors.leftMargin: Kirigami.Units.smallSpacing
Kirigami.Heading {
level: 2
text: i18n("Inputs")
Layout.fillWidth: true
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.leftMargin: Kirigami.Units.smallSpacing
}
Repeater {
id: sourceView
Layout.fillWidth: true
model: paSourceFilterModel
delegate: DeviceListItem {
Layout.fillWidth: true
Layout.margins: Kirigami.Units.smallSpacing
type: "source"
onlyone: sinkView.count === 1
}
}
}
}
PopupCard {
visible: sourceInputView.model.count + sourceMediaInputView.model.count !== 0
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Kirigami.Units.gridUnit
transform: Scale {
origin.x: Math.round(implicitWidth / 2)
origin.y: Math.round(height / 2)
xScale: audioApplet.scale
yScale: audioApplet.scale
}
contentItem: ColumnLayout {
anchors.rightMargin: Kirigami.Units.smallSpacing
anchors.leftMargin: Kirigami.Units.smallSpacing
Kirigami.Heading {
level: 2
text: i18n("Playback Streams")
Layout.fillWidth: true
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.leftMargin: Kirigami.Units.smallSpacing
}
Repeater {
id: sourceMediaInputView
Layout.fillWidth: true
model: PulseObjectFilterModel {
filters: [ { role: "Name", value: "sink-input-by-media-role:event" } ]
sourceModel: StreamRestoreModel {}
}
delegate: StreamListItem {
Layout.fillWidth: true
Layout.margins: Kirigami.Units.smallSpacing
width: sourceOutputView.width
type: "sink-input"
devicesModel: sourceView.model
}
}
Repeater {
id: sourceInputView
Layout.fillWidth: true
model: PulseObjectFilterModel {
filters: [ { role: "VirtualStream", value: false } ]
sourceModel: SinkInputModel {}
}
delegate: StreamListItem {
Layout.fillWidth: true
Layout.margins: Kirigami.Units.smallSpacing
width: sourceOutputView.width
type: "sink-input"
devicesModel: sourceView.model
}
}
}
}
PopupCard {
visible: sourceOutputView.model.count !== 0
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Kirigami.Units.gridUnit
transform: Scale {
origin.x: Math.round(implicitWidth / 2)
origin.y: Math.round(height / 2)
xScale: audioApplet.scale
yScale: audioApplet.scale
}
contentItem: ColumnLayout {
anchors.rightMargin: Kirigami.Units.smallSpacing
anchors.leftMargin: Kirigami.Units.smallSpacing
Kirigami.Heading {
level: 2
text: i18n("Recording Streams")
Layout.fillWidth: true
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.leftMargin: Kirigami.Units.smallSpacing
}
Repeater {
id: sourceOutputView
Layout.fillWidth: true
model: PulseObjectFilterModel {
filters: [ { role: "VirtualStream", value: false } ]
sourceModel: SourceOutputModel {}
}
delegate: StreamListItem {
Layout.fillWidth: true
Layout.margins: Kirigami.Units.smallSpacing
width: sourceOutputView.width
type: "source-output"
devicesModel: sourceView.model
}
}
}
}
}