matrixion/resources/qml/delegates/PlayableMediaMessage.qml

165 lines
3.7 KiB
QML
Raw Normal View History

2019-10-06 00:11:20 +03:00
import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.1
2019-10-06 01:27:18 +03:00
import QtMultimedia 5.6
2019-10-06 00:11:20 +03:00
import im.nheko 1.0
2019-10-06 00:11:20 +03:00
Rectangle {
2019-10-09 01:36:03 +03:00
id: bg
2019-10-06 00:11:20 +03:00
radius: 10
color: colors.dark
2019-10-06 01:27:18 +03:00
height: content.height + 24
2019-10-28 00:01:40 +03:00
width: parent ? parent.width : undefined
2019-10-06 00:11:20 +03:00
2019-10-09 01:36:03 +03:00
Column {
2019-10-06 01:27:18 +03:00
id: content
2019-10-06 00:11:20 +03:00
width: parent.width - 24
2019-10-06 01:27:18 +03:00
anchors.centerIn: parent
2019-10-09 01:36:03 +03:00
Rectangle {
id: videoContainer
visible: model.data.type == MtxEvent.VideoMessage
width: Math.min(parent.width, model.data.width ? model.data.width : 400) // some media has 0 as size...
height: width*model.data.proportionalHeight
2019-10-09 01:36:03 +03:00
Image {
anchors.fill: parent
source: model.data.thumbnailUrl.replace("mxc://", "image://MxcImage/")
2019-10-09 01:36:03 +03:00
asynchronous: true
fillMode: Image.PreserveAspectFit
VideoOutput {
anchors.fill: parent
fillMode: VideoOutput.PreserveAspectFit
source: media
}
}
}
2019-10-06 01:27:18 +03:00
RowLayout {
2019-10-09 01:36:03 +03:00
width: parent.width
2019-10-06 01:27:18 +03:00
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
}
}
2019-10-06 00:11:20 +03:00
2019-10-06 01:27:18 +03:00
RowLayout {
width: parent.width
2019-10-06 00:11:20 +03:00
2019-10-06 01:27:18 +03:00
spacing: 15
2019-10-06 00:11:20 +03:00
2019-10-06 01:27:18 +03:00
Rectangle {
id: button
color: colors.light
radius: 22
height: 44
width: 44
Image {
id: img
anchors.centerIn: parent
2019-10-06 00:11:20 +03:00
source: "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?"+colors.dark
2019-10-06 01:27:18 +03:00
fillMode: Image.Pad
}
MouseArea {
anchors.fill: parent
onClicked: {
switch (button.state) {
case "": timelineManager.timeline.cacheMedia(model.data.id); break;
2019-10-06 01:27:18 +03:00
case "stopped":
media.play(); console.log("play");
2019-10-06 00:11:20 +03:00
button.state = "playing"
break
2019-10-06 01:27:18 +03:00
case "playing":
media.pause(); console.log("pause");
2019-10-06 00:11:20 +03:00
button.state = "stopped"
break
2019-10-06 01:27:18 +03:00
}
2019-10-06 00:11:20 +03:00
}
2019-10-06 01:27:18 +03:00
cursorShape: Qt.PointingHandCursor
}
MediaPlayer {
id: media
onError: console.log(errorString)
onStatusChanged: if(status == MediaPlayer.Loaded) progress.updatePositionTexts()
2019-10-09 01:36:03 +03:00
onStopped: button.state = "stopped"
2019-10-06 00:11:20 +03:00
}
2019-10-06 01:27:18 +03:00
Connections {
2019-12-03 04:26:41 +03:00
target: timelineManager.timeline
2019-10-06 01:27:18 +03:00
onMediaCached: {
if (mxcUrl == model.data.url) {
2019-10-06 01:27:18 +03:00
media.source = "file://" + cacheUrl
button.state = "stopped"
console.log("media loaded: " + mxcUrl + " at " + cacheUrl)
}
console.log("media cached: " + mxcUrl + " at " + cacheUrl)
2019-10-06 00:11:20 +03:00
}
}
2019-10-06 01:27:18 +03:00
states: [
State {
name: "stopped"
PropertyChanges { target: img; source: "image://colorimage/:/icons/icons/ui/play-sign.png?"+colors.dark }
2019-10-06 01:27:18 +03:00
},
State {
name: "playing"
PropertyChanges { target: img; source: "image://colorimage/:/icons/icons/ui/pause-symbol.png?"+colors.dark }
2019-10-06 01:27:18 +03:00
}
]
2019-10-06 00:11:20 +03:00
}
2019-10-06 01:27:18 +03:00
ColumnLayout {
id: col
2019-10-06 00:11:20 +03:00
2019-10-06 01:27:18 +03:00
Text {
Layout.fillWidth: true
text: model.data.body
2019-10-06 01:27:18 +03:00
textFormat: Text.PlainText
elide: Text.ElideRight
color: colors.text
}
Text {
Layout.fillWidth: true
text: model.data.filesize
2019-10-06 01:27:18 +03:00
textFormat: Text.PlainText
elide: Text.ElideRight
color: colors.text
2019-10-06 00:11:20 +03:00
}
}
}
}
}