Size images/videos by timeline width

resources/qml/delegates/ImageMessage.qml

@@ -3,8 +3,8 @@ import QtQuick 2.6
 import com.github.nheko 1.0
 
 Item {
-	width: 300
+	width: Math.min(parent.width, model.width)
-	height: 300 * model.proportionalHeight
+	height: width * model.proportionalHeight
 
 	Image {
 		id: img

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
+			width: Math.min(parent.width, model.width)
-			Layout.minimumHeight: 300
+			height: width*model.proportionalHeight
-			Layout.maximumWidth: 500
+			Image {
-			fillMode: VideoOutput.PreserveAspectFit
+				anchors.fill: parent
-			source: media
+				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 {

src/AvatarProvider.cpp

@@ -67,8 +67,8 @@ resolve(const QString &avatarUrl, int size, QObject *receiver, AvatarCallback ca
                          });
 
         mtx::http::ThumbOpts opts;
-        opts.width   = 256;
+        opts.width   = size;
-        opts.height  = 256;
+        opts.height  = size;
         opts.mxc_url = avatarUrl.toStdString();
 
         http::client()->get_thumbnail(

src/MxcImageProvider.cpp

@@ -38,7 +38,8 @@ MxcImageResponse::run()
                           auto data = QByteArray(res.data(), res.size());
                           cache::client()->saveImage(fileName, data);
                           m_image.loadFromData(data);
-                          m_image = m_image.scaled(m_requestedSize, Qt::KeepAspectRatio);
+                          m_image = m_image.scaled(
+                            m_requestedSize, Qt::KeepAspectRatio, Qt::SmoothTransformation);
                           m_image.setText("mxc url", "mxc://" + m_id);
 
                           emit finished();

src/timeline2/TimelineModel.cpp

@@ -106,6 +106,21 @@ eventUrl(const mtx::events::RoomEvent<T> &e)
         return QString::fromStdString(e.content.url);
 }
 
+template<class T>
+QString
+eventThumbnailUrl(const mtx::events::Event<T> &)
+{
+        return "";
+}
+template<class T>
+auto
+eventThumbnailUrl(const mtx::events::RoomEvent<T> &e)
+  -> std::enable_if_t<std::is_same<decltype(e.content.info.thumbnail_url), std::string>::value,
+                      QString>
+{
+        return QString::fromStdString(e.content.info.thumbnail_url);
+}
+
 template<class T>
 QString
 eventFilename(const mtx::events::Event<T> &)
@@ -355,6 +370,7 @@ TimelineModel::roleNames() const
           {UserName, "userName"},
           {Timestamp, "timestamp"},
           {Url, "url"},
+          {ThumbnailUrl, "thumbnailUrl"},
           {Filename, "filename"},
           {Filesize, "filesize"},
           {MimeType, "mimetype"},
@@ -436,6 +452,9 @@ TimelineModel::data(const QModelIndex &index, int role) const
         case Url:
                 return QVariant(boost::apply_visitor(
                   [](const auto &e) -> QString { return eventUrl(e); }, event));
+        case ThumbnailUrl:
+                return QVariant(boost::apply_visitor(
+                  [](const auto &e) -> QString { return eventThumbnailUrl(e); }, event));
         case Filename:
                 return QVariant(boost::apply_visitor(
                   [](const auto &e) -> QString { return eventFilename(e); }, event));

src/timeline2/TimelineModel.h

@@ -129,6 +129,7 @@ public:
                 UserName,
                 Timestamp,
                 Url,
+                ThumbnailUrl,
                 Filename,
                 Filesize,
                 MimeType,