Add progress bar to audio messages

This commit is contained in:
Nicolas Werner 2019-10-06 00:27:18 +02:00
parent ea98d7b2ae
commit 8a511a7862

View file

@ -1,18 +1,58 @@
import QtQuick 2.6
import QtQuick.Layouts 1.6
import QtMultimedia 5.12
import QtQuick.Controls 2.5
import QtMultimedia 5.6
Rectangle {
radius: 10
color: colors.dark
height: row.height + 24
height: content.height + 24
width: parent.width
RowLayout {
id: row
anchors.centerIn: parent
ColumnLayout {
id: content
width: parent.width - 24
anchors.centerIn: parent
RowLayout {
Text {
id: positionText
text: "--:--:--"
color: colors.text
}
Slider {
Layout.fillWidth: true
id: progress
value: media.position
from: 0
to: media.duration
onMoved: media.seek(value)
//indeterminate: true
function updatePositionTexts() {
function formatTime(date) {
var hh = date.getUTCHours();
var mm = date.getUTCMinutes();
var ss = date.getSeconds();
if (hh < 10) {hh = "0"+hh;}
if (mm < 10) {mm = "0"+mm;}
if (ss < 10) {ss = "0"+ss;}
return hh+":"+mm+":"+ss;
}
positionText.text = formatTime(new Date(media.position))
durationText.text = formatTime(new Date(media.duration))
}
onValueChanged: updatePositionTexts()
}
Text {
id: durationText
text: "--:--:--"
color: colors.text
}
}
RowLayout {
width: parent.width
spacing: 15
@ -36,11 +76,11 @@ Rectangle {
switch (button.state) {
case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
case "stopped":
audio.play(); console.log("play");
media.play(); console.log("play");
button.state = "playing"
break
case "playing":
audio.pause(); console.log("pause");
media.pause(); console.log("pause");
button.state = "stopped"
break
}
@ -48,15 +88,16 @@ Rectangle {
cursorShape: Qt.PointingHandCursor
}
MediaPlayer {
id: audio
id: media
onError: console.log(errorString)
onStatusChanged: if(status == MediaPlayer.Loaded) progress.updatePositionTexts()
}
Connections {
target: timelineManager
onMediaCached: {
if (mxcUrl == eventData.url) {
audio.source = "file://" + cacheUrl
media.source = "file://" + cacheUrl
button.state = "stopped"
console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
}
@ -94,5 +135,6 @@ Rectangle {
}
}
}
}
}