d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-22 11:00:48 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add progress bar to audio messages

Browse source
This commit is contained in:
Nicolas Werner 2019-10-06 00:27:18 +02:00
parent ea98d7b2ae
commit 8a511a7862
1 changed files with 113 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
resources/qml/delegates/AudioMessage.qml
View file

@ -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
}
}
}