Add mute button with dynamic icon to MPRIS volume control

Summary:
The icon changes depending on the slider value and clicking it
will switch the volume between 0 and 100

Reviewers: #kde_connect, nicolasfella

Reviewed By: #kde_connect, nicolasfella

Subscribers: apol, broulik, albertvaka, nicolasfella, kdeconnect

Tags: #kde_connect

Differential Revision: https://phabricator.kde.org/D16962
This commit is contained in:
Billy Laws 2018-11-17 17:53:38 +00:00
parent 793c74e89e
commit 05a34747f3

View file

@ -27,8 +27,37 @@ Kirigami.Page
{
id: root
property QtObject pluginInterface
property bool muted: false
property int volumeUnmuted
property var volume: pluginInterface.volume
title: i18n("Multimedia Controls")
onVolumeChanged: {
if (muted && volume != 0) {
toggleMute()
volumeUnmuted = volume
} else if (!muted) {
volumeUnmuted = volume
}
}
function soundState(volume)
{
if (volume <= 25) {
return "audio-volume-low"
} else if (volume <= 75) {
return "audio-volume-medium"
} else {
return "audio-volume-high"
}
}
function toggleMute() {
muted = !muted
root.pluginInterface.volume = muted ? 0 : volumeUnmuted
muteButton.icon.name = muted ? "audio-volume-muted" : soundState(root.pluginInterface.volume)
}
Label {
id: noPlayersText
text: i18n("No players available")
@ -103,13 +132,26 @@ Kirigami.Page
}
RowLayout {
Layout.fillWidth: true
Label { text: i18n("Volume:") }
Button {
id: muteButton
icon.name: soundState(root.pluginInterface.volume)
onClicked: toggleMute()
}
Slider {
value: root.pluginInterface.volume
to: 100
id: volumeSlider
value: volumeUnmuted
to: 99
enabled: !muted
Layout.fillWidth: true
onValueChanged: {
volumeUnmuted = value
root.pluginInterface.volume = value
muteButton.icon.name = soundState(root.pluginInterface.volume)
}
}
}
Item { Layout.fillHeight: true }
}
Component.onCompleted: volumeUnmuted = root.pluginInterface.volume
}