Move VolumeSlider into dedicated file and also use it on mobile

This commit is contained in:
Tammes Burghard 2023-10-03 19:31:29 +00:00 committed by Bart De Vries
parent f975d0f1ba
commit cae5571a90
4 changed files with 76 additions and 71 deletions

View File

@ -284,63 +284,8 @@ FocusScope {
contentWidth: volumeButtonVertical.implicitWidth
contentItem: ColumnLayout {
Controls.Slider {
id: volumeSliderVertical
height: Kirigami.Units.gridUnit * 7
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: height
Layout.maximumHeight: height
Layout.topMargin: Kirigami.Units.smallSpacing
orientation: Qt.Vertical
padding: 0
enabled: !AudioManager.muted && AudioManager.PlaybackState != AudioManager.StoppedState && AudioManager.canPlay
from: 0
to: 100
value: AudioManager.volume
onMoved: AudioManager.volume = value
onPressedChanged: {
tooltip.delay = pressed ? 0 : Kirigami.Units.toolTipDelay
}
readonly property int wheelEffect: 5
Controls.ToolTip {
id: tooltip
x: volumeSliderVertical.x - volumeSliderVertical.width / 2 - width
y: volumeSliderVertical.visualPosition * volumeSliderVertical.height - height / 2
visible: volumeSliderVertical.pressed || sliderMouseArea.containsMouse
// delay is actually handled in volumeSliderVertical.onPressedChanged, because property bindings aren't immediate
delay: volumeSliderVertical.pressed ? 0 : Kirigami.Units.toolTipDelay
closePolicy: Controls.Popup.NoAutoClose
timeout: -1
text: i18nc("Volume as a percentage", "%1%", Math.round(volumeSliderVertical.value))
}
MouseArea {
id: sliderMouseArea
anchors.fill: parent
acceptedButtons: Qt.NoButton
hoverEnabled: true
onWheel: (wheel) => {
// Can't use Slider's built-in increase() and decrease() functions here
// since they go in increments of 0.1 when the slider's stepSize is not
// defined, which is much too slow. And we don't define a stepSize for
// the slider because if we do, it gets gets tickmarks which look ugly.
if (wheel.angleDelta.y > 0) {
// Increase volume
volumeSliderVertical.value = Math.min(volumeSliderVertical.to,
volumeSliderVertical.value + volumeSliderVertical.wheelEffect);
AudioManager.volume = volumeSliderVertical.value
} else {
// Decrease volume
volumeSliderVertical.value = Math.max(volumeSliderVertical.from,
volumeSliderVertical.value - volumeSliderVertical.wheelEffect);
AudioManager.volume = volumeSliderVertical.value
}
}
}
VolumeSlider {
id: volumeSlider
}
Controls.ToolButton {

View File

@ -376,22 +376,9 @@ Kirigami.Page {
}
Controls.Slider {
VolumeSlider {
id: volumeSlider
height: Kirigami.Units.gridUnit * 7
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: height
Layout.maximumHeight: height
Layout.bottomMargin: Kirigami.Units.smallSpacing
orientation: Qt.Vertical
padding: 0
enabled: !AudioManager.muted && AudioManager.PlaybackState != AudioManager.StoppedState && AudioManager.canPlay
from: 0
to: 100
value: AudioManager.volume
onMoved: AudioManager.volume = value
}
}
}
}

72
src/qml/VolumeSlider.qml Normal file
View File

@ -0,0 +1,72 @@
/**
* SPDX-FileCopyrightText: 2023 Bart De Vries <bart@mogwai.be>
*
* SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/
import QtQuick
import QtQuick.Controls as Controls
import QtQuick.Layouts
import QtQml.Models
import org.kde.kirigami as Kirigami
import org.kde.kmediasession
import org.kde.kasts
Controls.Slider {
id: volumeSlider
height: Kirigami.Units.gridUnit * 7
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: height
Layout.maximumHeight: height
Layout.topMargin: Kirigami.Units.smallSpacing
orientation: Qt.Vertical
padding: 0
enabled: !AudioManager.muted && AudioManager.PlaybackState != AudioManager.StoppedState && AudioManager.canPlay
from: 0
to: 100
value: AudioManager.volume
onMoved: AudioManager.volume = value
onPressedChanged: {
tooltip.delay = pressed ? 0 : Kirigami.Units.toolTipDelay
}
readonly property int wheelEffect: 5
Controls.ToolTip {
id: tooltip
x: volumeSlider.x - volumeSlider.width / 2 - width
y: volumeSlider.visualPosition * volumeSlider.height - height / 2
visible: volumeSlider.pressed || sliderMouseArea.containsMouse
// delay is actually handled in volumeSlider.onPressedChanged, because property bindings aren't immediate
delay: volumeSlider.pressed ? 0 : Kirigami.Units.toolTipDelay
closePolicy: Controls.Popup.NoAutoClose
timeout: -1
text: i18nc("Volume as a percentage", "%1%", Math.round(volumeSlider.value))
}
MouseArea {
id: sliderMouseArea
anchors.fill: parent
acceptedButtons: Qt.NoButton
hoverEnabled: true
onWheel: (wheel) => {
// Can't use Slider's built-in increase() and decrease() functions here
// since they go in increments of 0.1 when the slider's stepSize is not
// defined, which is much too slow. And we don't define a stepSize for
// the slider because if we do, it gets gets tickmarks which look ugly.
if (wheel.angleDelta.y > 0) {
// Increase volume
volumeSlider.value = Math.min(volumeSlider.to, volumeSlider.value + volumeSlider.wheelEffect);
} else {
// Decrease volume
volumeSlider.value = Math.max(volumeSlider.from, volumeSlider.value - volumeSlider.wheelEffect);
}
AudioManager.volume = volumeSlider.value
}
}
}

View File

@ -12,6 +12,7 @@
<file alias="FeedListDelegate.qml">qml/FeedListDelegate.qml</file>
<file alias="MinimizedPlayerControls.qml">qml/Mobile/MinimizedPlayerControls.qml</file>
<file alias="MobilePlayerControls.qml">qml/Mobile/MobilePlayerControls.qml</file>
<file alias="VolumeSlider.qml">qml/VolumeSlider.qml</file>
<file alias="FooterBar.qml">qml/Mobile/FooterBar.qml</file>
<file alias="BottomToolbar.qml">qml/Mobile/BottomToolbar.qml</file>
<file alias="QueuePage.qml">qml/QueuePage.qml</file>