Add progress bar to audio messages
This commit is contained in:
Nicolas Werner
parent
ea98d7b2ae
commit
8a511a7862
|
|
@ -1,96 +1,138 @@
|
|||
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
|
||||
|
||||
spacing: 15
|
||||
|
||||
Rectangle {
|
||||
id: button
|
||||
color: colors.light
|
||||
radius: 22
|
||||
height: 44
|
||||
width: 44
|
||||
Image {
|
||||
id: img
|
||||
anchors.centerIn: parent
|
||||
|
||||
source: "qrc:/icons/icons/ui/arrow-pointing-down.png"
|
||||
fillMode: Image.Pad
|
||||
|
||||
RowLayout {
|
||||
Text {
|
||||
id: positionText
|
||||
text: "--:--:--"
|
||||
color: colors.text
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
switch (button.state) {
|
||||
case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
|
||||
case "stopped":
|
||||
audio.play(); console.log("play");
|
||||
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
|
||||
|
||||
Rectangle {
|
||||
id: button
|
||||
color: colors.light
|
||||
radius: 22
|
||||
height: 44
|
||||
width: 44
|
||||
Image {
|
||||
id: img
|
||||
anchors.centerIn: parent
|
||||
|
||||
source: "qrc:/icons/icons/ui/arrow-pointing-down.png"
|
||||
fillMode: Image.Pad
|
||||
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
switch (button.state) {
|
||||
case "": timelineManager.cacheMedia(eventData.url, eventData.mimetype); break;
|
||||
case "stopped":
|
||||
media.play(); console.log("play");
|
||||
button.state = "playing"
|
||||
break
|
||||
case "playing":
|
||||
audio.pause(); console.log("pause");
|
||||
case "playing":
|
||||
media.pause(); console.log("pause");
|
||||
button.state = "stopped"
|
||||
break
|
||||
}
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
MediaPlayer {
|
||||
id: media
|
||||
onError: console.log(errorString)
|
||||
onStatusChanged: if(status == MediaPlayer.Loaded) progress.updatePositionTexts()
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: timelineManager
|
||||
onMediaCached: {
|
||||
if (mxcUrl == eventData.url) {
|
||||
media.source = "file://" + cacheUrl
|
||||
button.state = "stopped"
|
||||
console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
|
||||
}
|
||||
console.log("media cached: " + mxcUrl + " at " + cacheUrl)
|
||||
}
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
MediaPlayer {
|
||||
id: audio
|
||||
onError: console.log(errorString)
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: timelineManager
|
||||
onMediaCached: {
|
||||
if (mxcUrl == eventData.url) {
|
||||
audio.source = "file://" + cacheUrl
|
||||
button.state = "stopped"
|
||||
console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
|
||||
states: [
|
||||
State {
|
||||
name: "stopped"
|
||||
PropertyChanges { target: img; source: "qrc:/icons/icons/ui/play-sign.png" }
|
||||
},
|
||||
State {
|
||||
name: "playing"
|
||||
PropertyChanges { target: img; source: "qrc:/icons/icons/ui/pause-symbol.png" }
|
||||
}
|
||||
console.log("media cached: " + mxcUrl + " at " + cacheUrl)
|
||||
}
|
||||
]
|
||||
}
|
||||
ColumnLayout {
|
||||
id: col
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "stopped"
|
||||
PropertyChanges { target: img; source: "qrc:/icons/icons/ui/play-sign.png" }
|
||||
},
|
||||
State {
|
||||
name: "playing"
|
||||
PropertyChanges { target: img; source: "qrc:/icons/icons/ui/pause-symbol.png" }
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: eventData.body
|
||||
textFormat: Text.PlainText
|
||||
elide: Text.ElideRight
|
||||
color: colors.text
|
||||
}
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: eventData.filesize
|
||||
textFormat: Text.PlainText
|
||||
elide: Text.ElideRight
|
||||
color: colors.text
|
||||
}
|
||||
]
|
||||
}
|
||||
ColumnLayout {
|
||||
id: col
|
||||
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: eventData.body
|
||||
textFormat: Text.PlainText
|
||||
elide: Text.ElideRight
|
||||
color: colors.text
|
||||
}
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: eventData.filesize
|
||||
textFormat: Text.PlainText
|
||||
elide: Text.ElideRight
|
||||
color: colors.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue