Use MediaPopup to display images

qml/MediaPopup.qml

@@ -0,0 +1,27 @@
+import QtQuick 2.4
+import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.1
+import QtQuick.Layouts 1.3
+
+Popup {
+    property var url
+
+    id: popup
+
+    modal: true
+    focus: true
+    height: image.height + 16
+    width: image.width + 16
+    anchors.centerIn: mainWindow.overlay
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+    Image {
+        id: image
+        height: Math.min(sourceSize.height, mainWindow.height * 0.8)
+        width: Math.min(sourceSize.width, mainWindow.width * 0.8)
+        anchors.centerIn: parent
+        smooth: true
+        fillMode: Image.PreserveAspectFit
+        source: url
+    }
+}

qml/MessageView.qml

@@ -285,7 +285,8 @@ ColumnLayout {
                             animationDuration: 200
 
                             onClicked: function() {
-                                Qt.openUrlExternally(message.mediaurl[index])
+                                ComponentCreator.createMediaPopup(this, message.mediaurl[index]).open();
+                                // Qt.openUrlExternally(message.mediaurl[index])
                             }
                         }
                     }

qml/componentCreator.js

@@ -57,3 +57,15 @@ function createAccountPopup(parent) {
     }
     return popup
 }
+
+function createMediaPopup(parent, model) {
+    var component = Qt.createComponent("MediaPopup.qml")
+    var popup = component.createObject(parent, {
+        "url": model
+    })
+
+    if (popup == null) {
+        console.log("Error creating MediaPopup")
+    }
+    return popup
+}