contents/ui/PlayerPage.qml

0001 /*
0002  * SPDX-FileCopyrightText: 2020 Devin Lin <espidev@gmail.com>
0003  *
0004  * SPDX-License-Identifier: GPL-3.0-or-later
0005  */
0006
0007 import QtQuick
0008 import org.kde.kirigami as Kirigami
0009 import QtQuick.Controls as Controls
0010 import QtQuick.Layouts
0011 import KRecorder
0012
0013 import "components"
0014
0015 Kirigami.Page {
0016     id: root
0017
0018     property Recording recording
0019
0020     title: i18n("Player")
0021
0022     onBackRequested: AudioPlayer.stop()
0023
0024     property real yTranslate: 0
0025     property int mainOpacity: 0
0026
0027     actions: [
0028         Kirigami.Action {
0029             visible: applicationWindow().isWidescreen
0030             icon.name: "settings-configure"
0031             text: i18n("Settings")
0032             onTriggered: applicationWindow().openSettings();
0033         }
0034     ]
0035
0036     ColumnLayout {
0037         opacity: mainOpacity
0038         transform: Translate { y: yTranslate }
0039         anchors.fill: parent
0040
0041         ColumnLayout {
0042             Layout.alignment: Qt.AlignTop
0043             spacing: Kirigami.Units.largeSpacing
0044             Layout.fillWidth: true
0045
0046             Controls.Label {
0047                 Layout.fillWidth: true
0048                 text: recording.fileName
0049                 font.weight: Font.DemiBold
0050                 horizontalAlignment: Text.AlignHCenter
0051                 wrapMode: Text.Wrap
0052             }
0053
0054             Controls.Label {
0055                 Layout.fillWidth: true
0056                 text: i18n("Recorded on %1", recording.recordDate)
0057                 opacity: 0.7
0058                 font.weight: Font.DemiBold
0059                 horizontalAlignment: Text.AlignHCenter
0060                 wrapMode: Text.Wrap
0061             }
0062         }
0063
0064         RowLayout {
0065             Layout.fillHeight: true
0066             Layout.fillWidth: true
0067             spacing: Math.round(Kirigami.Units.gridUnit * 1.5)
0068
0069             Item {
0070                 Layout.fillWidth: true
0071             }
0072
0073             // placeholder element for spacing, doesn't do anything
0074             Item {
0075                 implicitWidth: Math.round(Kirigami.Units.gridUnit * 2.5)
0076                 implicitHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
0077             }
0078
0079             RoundFlatButton {
0080                 implicitWidth: Kirigami.Units.gridUnit * 5
0081                 implicitHeight: Kirigami.Units.gridUnit * 5
0082                 text: (AudioPlayer.playbackState === AudioPlayer.PlayingState) ? i18n("Pause") : i18n("Play")
0083                 icon.name: (AudioPlayer.playbackState === AudioPlayer.PlayingState) ? "media-playback-pause" : "media-playback-start"
0084                 onClicked: (AudioPlayer.playbackState === AudioPlayer.PlayingState) ? AudioPlayer.pause() : AudioPlayer.play()
0085             }
0086
0087             ToolTipToolButton {
0088                 implicitWidth: Math.round(Kirigami.Units.gridUnit * 2.5)
0089                 implicitHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
0090                 opacity: (AudioPlayer.playbackState !== AudioPlayer.StoppedState) ? 1 : 0
0091                 icon.name: "media-playback-stop"
0092                 text: i18n("Stop")
0093                 onClicked: AudioPlayer.stop();
0094             }
0095
0096             Item {
0097                 Layout.fillWidth: true
0098             }
0099         }
0100
0101         RowLayout {
0102             id: sliderBar
0103             Layout.alignment: Qt.AlignHCenter
0104             spacing: Kirigami.Units.largeSpacing
0105
0106             Controls.Label {
0107                 id: elapsedLabel
0108                 Layout.alignment: Qt.AlignVCenter
0109                 text: (AudioPlayer.playbackState === AudioPlayer.StoppedState) ? "0:00" : Utils.formatDuration(AudioPlayer.position)
0110                 color: Kirigami.Theme.disabledTextColor
0111             }
0112
0113             Controls.Slider {
0114                 Layout.alignment: Qt.AlignVCenter
0115                 implicitWidth: Math.min(root.width - Kirigami.Units.largeSpacing * 2 - elapsedLabel.width - durationLabel.width, root.width * 0.6)
0116                 from: 0
0117                 to: AudioPlayer.duration
0118                 value: AudioPlayer.position
0119
0120                 Behavior on value {
0121                     NumberAnimation {
0122                         duration: 100
0123                         easing.type: Easing.InOutQuad
0124                     }
0125                 }
0126
0127                 onMoved: AudioPlayer.setPosition(value)
0128             }
0129
0130             Controls.Label {
0131                 id: durationLabel
0132                 Layout.alignment: Qt.AlignVCenter
0133                 text: recording.recordingLength
0134                 color: Kirigami.Theme.disabledTextColor
0135             }
0136         }
0137     }
0138 }