Display extra content in message overlay

qml/components/AudioPreview.qml

@@ -25,13 +25,14 @@ Item {
     id: audioMessageComponent
 
     property ListItem messageListItem
-    property var rawMessage: messageListItem.myMessage
+    property MessageOverlayFlickable overlayFlickable
+    property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
 
     property var audioData: ( rawMessage.content['@type'] === "messageVoiceNote" ) ?  rawMessage.content.voice_note : ( ( rawMessage.content['@type'] === "messageAudio" ) ? rawMessage.content.audio : "");
     property string audioUrl;
     property int previewFileId;
     property int audioFileId;
-    property bool onScreen: messageListItem.page.status === PageStatus.Active
+    property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true
     property string audioType : "voiceNote";
 
     width: parent.width

qml/components/DocumentPreview.qml

@@ -26,7 +26,8 @@ Item {
     height: Theme.itemSizeLarge
 
     property ListItem messageListItem
-    property var rawMessage: messageListItem.myMessage
+    property MessageOverlayFlickable overlayFlickable
+    property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
 
     property var documentData: rawMessage.content.document
     property bool openRequested: false;

qml/components/ImagePreview.qml

@@ -24,7 +24,8 @@ Item {
     id: imagePreviewItem
 
     property ListItem messageListItem
-    property var rawMessage: messageListItem.myMessage
+    property MessageOverlayFlickable overlayFlickable
+    property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
     property var photoData: rawMessage.content.photo;
     property var pictureFileInformation;
 

qml/components/LocationPreview.qml

@@ -25,11 +25,12 @@ Item {
     id: imagePreviewItem
 
     property ListItem messageListItem
-    property var rawMessage: messageListItem.myMessage
+    property MessageOverlayFlickable overlayFlickable
+    property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
 
     property var locationData : ( rawMessage.content['@type'] === "messageLocation" ) ?  rawMessage.content.location : ( ( rawMessage.content['@type'] === "messageVenue" ) ? rawMessage.content.venue.location : "" )
 
-    property string chatId: messageListItem.page.chatInformation.id
+    property string chatId: rawMessage.chat_id
     property var pictureFileInformation;
     width: parent.width
     height: width / 2

qml/components/MessageOverlayFlickable.qml

@@ -33,6 +33,8 @@ Flickable {
     property bool showHeader: true
     readonly property var userInformation: tdLibWrapper.getUserInformation(overlayMessage.sender_user_id);
     readonly property bool isOwnMessage: tdLibWrapper.getUserInformation().id === overlayMessage.sender_user_id;
+    readonly property string extraContentComponentName: (typeof overlayMessage.content !== "undefined" && typeof chatView.contentComponentNames[overlayMessage.content['@type']] !== "undefined" )
+                                                        ? chatView.contentComponentNames[overlayMessage.content['@type']] : ""
     signal requestClose;
 
     function getOriginalAuthor(forwardInformation, fontSize) {
@@ -58,17 +60,17 @@ Flickable {
         running: false
         onTriggered: {
             if (typeof overlayMessage.content !== "undefined") {
-//                if (messageListItem.extraContentComponentName !== "") {
+                if (messageOverlayFlickable.extraContentComponentName !== "") {
-//                    extraContentLoader.setSource(
+                    overlayExtraContentLoader.setSource(
-//                                "../components/" +messageListItem.extraContentComponentName +".qml",
+                                "../components/" + messageOverlayFlickable.extraContentComponentName + ".qml",
-//                                {
+                                {
-//                                    messageListItem: messageListItem
+                                    overlayFlickable: messageOverlayFlickable
-//                                })
+                                })
-//                } else {
+                } else {
                     if (typeof overlayMessage.content.web_page !== "undefined") {
                         overlayWebPagePreviewLoader.active = true;
                     }
-//                }
+                }
             }
         }
     }
@@ -169,6 +171,40 @@ Flickable {
             }
         }
 
+        Loader {
+            id: overlayExtraContentLoader
+            width: parent.width
+            asynchronous: true
+        }
+
+        Timer {
+            id: messageDateUpdater
+            interval: 60000
+            running: true
+            repeat: true
+            onTriggered: {
+                overlayMessageDateText.text = ( overlayMessageDateText.useElapsed ? Functions.getDateTimeElapsed(overlayMessage.date) : Functions.getDateTimeTranslated(overlayMessage.date) );
+            }
+        }
+
+        Text {
+            width: parent.width
+
+            property bool useElapsed: true
+
+            id: overlayMessageDateText
+            font.pixelSize: Theme.fontSizeExtraSmall
+            color: Theme.secondaryColor
+            text: ( useElapsed ? Functions.getDateTimeElapsed(overlayMessage.date) : Functions.getDateTimeTranslated(overlayMessage.date) )
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    overlayMessageDateText.useElapsed = !overlayMessageDateText.useElapsed;
+                    overlayMessageDateText.text = ( useElapsed ? Functions.getDateTimeElapsed(overlayMessage.date) : Functions.getDateTimeTranslated(overlayMessage.date) );
+                }
+            }
+        }
+
         Label {
             id: separatorLabel
             width: parent.width

qml/components/PollPreview.qml

@@ -28,10 +28,11 @@ Item {
 
 
     property ListItem messageListItem
-    property var rawMessage: messageListItem.myMessage
+    property MessageOverlayFlickable overlayFlickable
-    property string chatId: messageListItem.page.chatInformation.id
+    property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
+    property string chatId: rawMessage.chat_id
 
-    property bool isOwnMessage: messageListItem.isOwnMessage
+    property bool isOwnMessage: messageListItem ? messageListItem.isOwnMessage : overlayFlickable.isOwnMessage
 
     property string messageId: rawMessage.id
     property bool canEdit: rawMessage.can_be_edited

qml/components/StickerPreview.qml

@@ -21,12 +21,15 @@ import Sailfish.Silica 1.0
 import WerkWolf.Fernschreiber 1.0
 
 Item {
-    property ListItem messageListItem
 
-    readonly property var stickerData: messageListItem.myMessage.content.sticker;
+    property ListItem messageListItem
+    property MessageOverlayFlickable overlayFlickable
+
+    readonly property var stickerData: messageListItem ? messageListItem.myMessage.content.sticker : overlayFlickable.overlayMessage.content.sticker;
     readonly property bool animated: stickerData.is_animated && appSettings.animateStickers
     readonly property bool stickerVisible: staticStickerLoader.item ? staticStickerLoader.item.visible :
         animatedStickerLoader.item ? animatedStickerLoader.item.visible : false
+    readonly property bool isOwnSticker : messageListItem ? messageListItem.isOwnMessage : overlayFlickable.isOwnMessage
     property real aspectRatio: stickerData.width / stickerData.height
 
     implicitWidth: stickerData.width
@@ -44,7 +47,7 @@ Item {
         height: width * aspectRatio
         // (centered in image mode, text-like in sticker mode)
         x: appSettings.showStickersAsImages ? (parent.width - width) / 2 :
-            messageListItem.isOwnMessage ? (parent.width - width) : 0
+            isOwnSticker ? (parent.width - width) : 0
         anchors.verticalCenter: parent.verticalCenter
 
         Loader {

qml/components/VideoPreview.qml

@@ -25,19 +25,21 @@ Item {
     id: videoMessageComponent
 
     property ListItem messageListItem
-    property var rawMessage: messageListItem.myMessage
+    property MessageOverlayFlickable overlayFlickable
+    property var rawMessage: messageListItem ? messageListItem.myMessage : overlayFlickable.overlayMessage
 
     property var videoData:  ( rawMessage.content['@type'] === "messageVideo" ) ?  rawMessage.content.video : ( ( rawMessage.content['@type'] === "messageAnimation" ) ? rawMessage.content.animation : rawMessage.content.video_note )
     property string videoUrl;
     property int previewFileId;
     property int videoFileId;
+    property bool isVideoNote : false;
     property bool fullscreen : false;
-    property bool onScreen: messageListItem.page.status === PageStatus.Active;
+    property bool onScreen: messageListItem ? messageListItem.page.status === PageStatus.Active : true;
     property string videoType : "video";
     property bool playRequested: false;
 
     width: parent.width
-    height: ( rawMessage.content['@type'] === "messageVideoNote" ) ? width : Functions.getVideoHeight(width, videoData)
+    height: videoMessageComponent.isVideoNote ? width : Functions.getVideoHeight(width, videoData)
 
     Timer {
         id: screensaverTimer
@@ -78,11 +80,11 @@ Item {
 
     function updateVideoThumbnail() {
         if (videoData) {
-            if (rawMessage.content['@type'] === "messageVideoNote") {
+            if (typeof rawMessage !== "undefined") {
-                videoType = "video";
+                videoMessageComponent.isVideoNote = rawMessage.content['@type'] === "messageVideoNote";
-            } else {
-                videoType = videoData['@type'];
             }
+
+            videoMessageComponent.videoType = videoMessageComponent.isVideoNote ? "video" : videoData['@type'];
             videoFileId = videoData[videoType].id;
             if (typeof videoData.thumbnail !== "undefined") {
                 previewFileId = videoData.thumbnail.photo.id;
@@ -264,7 +266,7 @@ Item {
         id: videoComponentLoader
         active: false
         width: parent.width
-        height: ( rawMessage.content['@type'] === "messageVideoNote" ) ? width : Functions.getVideoHeight(parent.width, videoData)
+        height: videoMessageComponent.isVideoNote ? width : Functions.getVideoHeight(parent.width, videoData)
         sourceComponent: videoComponent
     }