From 8ebef4eed2134179e5609104eb72fe8f055a35f1 Mon Sep 17 00:00:00 2001
From: Nicolas Werner <nicolas.werner@hotmail.de>
Date: Wed, 9 Oct 2019 00:36:03 +0200
Subject: Size images/videos by timeline width

---
 resources/qml/delegates/ImageMessage.qml         |  4 ++--
 resources/qml/delegates/PlayableMediaMessage.qml | 27 ++++++++++++++++++------
 2 files changed, 22 insertions(+), 9 deletions(-)

(limited to 'resources')

diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml
index 70d2debe..f1e95e3d 100644
--- a/resources/qml/delegates/ImageMessage.qml
+++ b/resources/qml/delegates/ImageMessage.qml
@@ -3,8 +3,8 @@ import QtQuick 2.6
 import com.github.nheko 1.0
 
 Item {
-	width: 300
-	height: 300 * model.proportionalHeight
+	width: Math.min(parent.width, model.width)
+	height: width * model.proportionalHeight
 
 	Image {
 		id: img
diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index c716d21d..3a518617 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -6,26 +6,38 @@ import QtMultimedia 5.6
 import com.github.nheko 1.0
 
 Rectangle {
+	id: bg
 	radius: 10
 	color: colors.dark
 	height: content.height + 24
 	width: parent.width
 
-	ColumnLayout { 
+	Column { 
 		id: content
 		width: parent.width - 24
 		anchors.centerIn: parent
 
-		VideoOutput {
+		Rectangle {
+			id: videoContainer
 			visible: model.type == MtxEvent.VideoMessage
-			Layout.maximumHeight: 300
-			Layout.minimumHeight: 300
-			Layout.maximumWidth: 500
-			fillMode: VideoOutput.PreserveAspectFit
-			source: media
+			width: Math.min(parent.width, model.width)
+			height: width*model.proportionalHeight
+			Image {
+				anchors.fill: parent
+				source: model.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: "--:--:--"
@@ -102,6 +114,7 @@ Rectangle {
 					id: media
 					onError: console.log(errorString)
 					onStatusChanged: if(status == MediaPlayer.Loaded) progress.updatePositionTexts()
+					onStopped: button.state = "stopped"
 				}
 
 				Connections {
-- 
cgit 1.5.1