import QtMultimedia 5.10 import QtQuick 2.10 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.10 import im.nheko 1.0 Rectangle { id: bg radius: 10 color: colors.alternateBase height: Math.round(content.height + 24) width: parent ? parent.width : undefined Column { id: content width: parent.width - 24 anchors.centerIn: parent Rectangle { id: videoContainer property double tempWidth: Math.min(parent ? parent.width : undefined, model.data.width < 1 ? 400 : model.data.width) property double tempHeight: tempWidth * model.data.proportionalHeight property double divisor: model.isReply ? 4 : 2 property bool tooHigh: tempHeight > timelineRoot.height / divisor visible: model.data.type == MtxEvent.VideoMessage height: tooHigh ? timelineRoot.height / divisor : tempHeight width: tooHigh ? (timelineRoot.height / divisor) / model.data.proportionalHeight : tempWidth Image { anchors.fill: parent source: model.data.thumbnailUrl.replace("mxc://", "image://MxcImage/") asynchronous: true fillMode: Image.PreserveAspectFit VideoOutput { anchors.fill: parent fillMode: VideoOutput.PreserveAspectFit source: media } } } RowLayout { width: parent.width Text { id: positionText text: "--:--:--" color: colors.text } Slider { id: progress //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)); } Layout.fillWidth: true value: media.position from: 0 to: media.duration onMoved: media.seek(value) onValueChanged: updatePositionTexts() palette: colors } Text { id: durationText text: "--:--:--" color: colors.text } } RowLayout { width: parent.width spacing: 15 Rectangle { id: button color: colors.window radius: 22 height: 44 width: 44 states: [ State { name: "stopped" PropertyChanges { target: img source: "image://colorimage/:/icons/icons/ui/play-sign.png?" + colors.text } }, State { name: "playing" PropertyChanges { target: img source: "image://colorimage/:/icons/icons/ui/pause-symbol.png?" + colors.text } } ] Image { id: img anchors.centerIn: parent z: 3 source: "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?" + colors.text fillMode: Image.Pad } MouseArea { anchors.fill: parent onClicked: { switch (button.state) { case "": TimelineManager.timeline.cacheMedia(model.data.id); break; case "stopped": media.play(); console.log("play"); button.state = "playing"; break; 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(); } onStopped: button.state = "stopped" } Connections { target: TimelineManager.timeline onMediaCached: { if (mxcUrl == model.data.url) { media.source = "file://" + cacheUrl; button.state = "stopped"; console.log("media loaded: " + mxcUrl + " at " + cacheUrl); } console.log("media cached: " + mxcUrl + " at " + cacheUrl); } } } ColumnLayout { id: col Text { Layout.fillWidth: true text: model.data.body textFormat: Text.PlainText elide: Text.ElideRight color: colors.text } Text { Layout.fillWidth: true text: model.data.filesize textFormat: Text.PlainText elide: Text.ElideRight color: colors.text } } } } }