Add bubbles on top of EventImage to show name-date

TODO.md

@@ -6,19 +6,17 @@
     - Bottom/top bar
   - Uploading (+local echo)
     - Deduplicate uploads
-  - File thumbnails + ask matrix API?
   - Encrypted media
-  - Loading animation
+  - Loading progress bar
-  - GIF thumbnails: load the real animated image
+  - Support m.file thumbnails
 
-  - EventLink
   - GIFs can use the video player
+  - Display GIF static thumbnails while the real GIF is loading
   - Video bug: when media is done playing, clicking on progress slider always
     bring back to the beginning no matter where
   - Video: missing buttons and small size problems
   - Audio: online playback is buggy, must download+play file
-
+  - EventLink
-  - Combined pure media events time looks bad
 
 - RoomMessageNotice
 

src/qml/Chat/Timeline/EventContent.qml

@@ -9,6 +9,12 @@ HRowLayout {
     layoutDirection: onRight ? Qt.RightToLeft: Qt.LeftToRight
 
 
+    readonly property string eventSender:
+        hideNameLine ? "" : (
+            "<div class='sender'>" +
+            Utils.coloredNameHtml(model.sender_name, model.sender_id) +
+            "</div>"
+        )
     readonly property string eventText: Utils.processedEventText(model)
     readonly property string eventTime: Utils.formatTime(model.date, false)
     readonly property bool pureMedia: ! eventText && linksRepeater.count
@@ -62,6 +68,7 @@ HRowLayout {
             id: contentLabel
             container: selectableLabelContainer
             index: model.index
+            visible: ! pureMedia
 
             topPadding: theme.spacing / 1.75
             bottomPadding: topPadding
@@ -76,10 +83,7 @@ HRowLayout {
                 theme.chat.message.styleInclude +
 
                 // Sender name
-                (hideNameLine ? "" : (
+                eventContent.eventSender +
-                "<div class='sender'>" +
-                Utils.coloredNameHtml(model.sender_name, model.sender_id) +
-                "</div>")) +
 
                 // Message body
                 eventContent.eventText +
@@ -142,6 +146,8 @@ HRowLayout {
             EventMediaLoader {
                 singleMediaInfo: eventDelegate.currentItem
                 mediaUrl: modelData
+                showSender: pureMedia ? eventSender : ""
+                showDate: pureMedia ? eventTime : ""
 
                 transform: Translate { x: xOffset }
 

src/qml/Chat/Timeline/EventImage.qml

@@ -6,13 +6,13 @@ HImage {
     id: image
     horizontalAlignment: Image.AlignLeft
     sourceSize.width: theme.chat.message.thumbnailWidth  // FIXME
-    source: animated ? openUrl : thumbnailUrl
+    source: animated ? openUrl : loader.previewUrl
+    animated: loader.singleMediaInfo.media_mime === "image/gif" ||
+              Utils.urlExtension(loader.mediaUrl) === "gif"
 
 
-    property url thumbnailUrl
+    property EventMediaLoader loader
-    property url fullImageUrl
+    readonly property url openUrl: loader.mediaUrl || loader.previewUrl
-
-    readonly property url openUrl: fullImageUrl || thumbnailUrl
 
 
     TapHandler {
@@ -26,4 +26,17 @@ HImage {
             eventDelegate.hoveredMediaTypeUrl =
                 hovered ? [EventDelegate.Media.Image, openUrl] : []
     }
+
+    EventImageTextBubble {
+        anchors.left: parent.left
+        anchors.top: parent.top
+        text: loader.showSender
+        textFormat: Text.StyledText
+    }
+
+    EventImageTextBubble {
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        text: loader.showDate
+    }
 }

src/qml/Chat/Timeline/EventImageTextBubble.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.12
+import "../../Base"
+
+HLabel {
+    visible: Boolean(text)
+    anchors.margins: theme.spacing / 4
+
+    topPadding: theme.spacing / 2
+    bottomPadding: topPadding
+    leftPadding: theme.spacing / 1.5
+    rightPadding: leftPadding
+
+    font.pixelSize: theme.fontSize.small
+
+    background: Rectangle {
+        color: Qt.hsla(0, 0, 0, 0.7)
+        radius: theme.radius
+    }
+}

src/qml/Chat/Timeline/EventMediaLoader.qml

@@ -9,6 +9,8 @@ HLoader {
 
     property QtObject singleMediaInfo
     property url mediaUrl
+    property string showSender: ""
+    property string showDate: ""
 
     readonly property var imageExtensions: [
 		"bmp", "gif", "jpg", "jpeg", "png", "pbm", "pgm", "ppm", "xbm", "xpm",
@@ -55,12 +57,6 @@ HLoader {
     onPreviewUrlChanged: {
         if (type === EventDelegate.Media.Image) {
             var file  = "EventImage.qml"
-            var props = {
-                thumbnailUrl: previewUrl,
-                fullImageUrl: mediaUrl,
-                animated:     singleMediaInfo.media_mime === "image/gif" ||
-                              Utils.urlExtension(mediaUrl) === "gif",
-            }
 
         // } else if (type === EventDelegate.Media.File) {
         //     var file  = "EventFile.qml"
@@ -81,6 +77,6 @@ HLoader {
 
         } else { return }
 
-        loader.setSource(file, props)
+        loader.setSource(file, {loader})
     }
 }