src/qml/DurationSlider.qml

0001 /*
0002    SPDX-FileCopyrightText: 2020 (c) Devin Lin <espidev@gmail.com>
0003
0004    SPDX-License-Identifier: LGPL-3.0-or-later
0005  */
0006
0007 import QtQuick 2.7
0008 import QtQuick.Layouts 1.2
0009 import QtQuick.Controls 2.3
0010 import org.kde.elisa 1.0
0011 import org.kde.kirigami 2.5 as Kirigami
0012 import ".."
0013
0014 /**
0015  * Aligned into a 5x2 grid
0016  *
0017  * Labels inline (bottom row takes up 0 space):
0018  *  --------------------------------------------
0019  * | Label  | Slider | Slider | Slider | Label  |
0020  *  --------------------------------------------
0021  * |        |        |        |        |        |
0022  *  --------------------------------------------
0023  *
0024  * Labels below (outer columns take up 0 space):
0025  *  --------------------------------------------
0026  * |        | Slider | Slider | Slider |        |
0027  *  --------------------------------------------
0028  * |        | Label  |        | Label  |        |
0029  *  --------------------------------------------
0030  */
0031 GridLayout {
0032     id: root
0033
0034     property int position
0035     property int duration
0036     property bool seekable
0037     property bool playEnabled
0038
0039     property color labelColor
0040     property bool labelsInline: true
0041
0042     rows: 2
0043     columns: 5
0044     rowSpacing: 0
0045     columnSpacing: Kirigami.Units.largeSpacing
0046
0047     signal seek(int position)
0048
0049     onPositionChanged: {
0050         if (!slider.pressed) {
0051             slider.value = position / 1000
0052         }
0053     }
0054     onDurationChanged: {
0055         slider.to = duration / 1000
0056     }
0057
0058     Connections {
0059         target: ElisaApplication.mediaPlayListProxyModel
0060         function onClearPlayListPlayer() {
0061             slider.value = 0;
0062         }
0063     }
0064
0065     TextMetrics {
0066         id: durationTextMetrics
0067         text: i18nc("@info:placeholder This is used to preserve a fixed width for the duration text.", "00:00:00")
0068     }
0069
0070     LabelWithToolTip {
0071         id: positionLabel
0072
0073         text: timeIndicator.progressDuration
0074         color: root.labelColor
0075
0076         Layout.row: root.labelsInline ? 0 : 1
0077         Layout.column: root.labelsInline ? 0 : 1
0078         Layout.alignment: Qt.AlignVCenter
0079         Layout.fillHeight: true
0080         Layout.rightMargin: !root.labelsInline ? 0 : !LayoutMirroring.enabled ? Kirigami.Units.largeSpacing : Kirigami.Units.largeSpacing * 2
0081         Layout.preferredWidth: (durationTextMetrics.boundingRect.width - durationTextMetrics.boundingRect.x) + Kirigami.Units.smallSpacing
0082
0083         verticalAlignment: Text.AlignVCenter
0084         horizontalAlignment: root.labelsInline ? Text.AlignRight : Text.AlignLeft
0085
0086         ProgressIndicator {
0087             id: timeIndicator
0088             position: root.position
0089         }
0090     }
0091
0092     AccessibleSlider {
0093         id: slider
0094
0095         Layout.row: 0
0096         Layout.column: 1
0097         Layout.columnSpan: 3
0098         Layout.alignment: Qt.AlignVCenter
0099         Layout.fillHeight: true
0100         Layout.fillWidth: true
0101         Layout.rightMargin: !root.labelsInline ? 0 : !LayoutMirroring.enabled ? Kirigami.Units.largeSpacing : 0
0102         Layout.leftMargin: !root.labelsInline ? 0 : LayoutMirroring.enabled ? Kirigami.Units.largeSpacing : 0
0103
0104         Accessible.name: i18nc("@label", "Duration")
0105
0106         // from, to and value of Slider are rescaled to seconds to avoid integer overflow issues
0107         from: 0
0108         to: root.duration / 1000
0109
0110         keyStepSize: 5
0111         wheelStepSize: 10
0112
0113         enabled: root.seekable && root.playEnabled
0114         live: true
0115         onMoved: root.seek(value * 1000)
0116     }
0117
0118     LabelWithToolTip {
0119         id: durationLabel
0120
0121         text: durationIndicator.progressDuration
0122
0123         color: root.labelColor
0124
0125         Layout.row: root.labelsInline ? 0 : 1
0126         Layout.column: root.labelsInline ? 4 : 3
0127         Layout.alignment: Qt.AlignVCenter
0128         Layout.fillHeight: true
0129         Layout.leftMargin: !root.labelsInline ? 0 : LayoutMirroring.enabled ? (Kirigami.Units.largeSpacing * 2) : 0
0130         Layout.preferredWidth: (durationTextMetrics.boundingRect.width - durationTextMetrics.boundingRect.x)
0131
0132         verticalAlignment: Text.AlignVCenter
0133         horizontalAlignment: root.labelsInline ? Text.AlignLeft : Text.AlignRight
0134
0135         ProgressIndicator {
0136             id: durationIndicator
0137             position: root.duration
0138         }
0139     }
0140 }