Verified Commit f2c0bbe5 authored by Linus Jahn's avatar Linus Jahn 🍙 Committed by Linus Jahn

media-sharing: Display upload preview, display images in chat

parent c154f307
......@@ -18,6 +18,9 @@
<file alias="qml/elements/FileChooser.qml">src/qml/elements/FileChooser.qml</file>
<file alias="qml/elements/FileChooserDesktop.qml">src/qml/elements/FileChooserDesktop.qml</file>
<file alias="qml/elements/FileChooserMobile.qml">src/qml/elements/FileChooserMobile.qml</file>
<file alias="qml/elements/SendMediaSheet.qml">src/qml/elements/SendMediaSheet.qml</file>
<file alias="qml/elements/MediaPreviewImage.qml">src/qml/elements/MediaPreviewImage.qml</file>
<file alias="qml/elements/MediaPreviewOther.qml">src/qml/elements/MediaPreviewOther.qml</file>
<file alias="qtquickcontrols2.conf">misc/qtquickcontrols2.conf</file>
</qresource>
......
......@@ -34,19 +34,21 @@
#include <QClipboard>
#include <QDebug>
#include <QDir>
#include <QFileInfo>
#include <QGuiApplication>
#include <QMimeDatabase>
#include <QMimeType>
#include <QSettings>
#include <QString>
#include <QStandardPaths>
#include <QUrl>
// QXmpp
#include <QXmppClient.h>
// Kaidan
#include "AvatarFileStorage.h"
#include "PresenceCache.h"
#include "Database.h"
#include "RosterModel.h"
#include "MessageModel.h"
#include "Database.h"
#include "PresenceCache.h"
Kaidan::Kaidan(QGuiApplication *app, bool enableLogging, QObject *parent) : QObject(parent)
{
......@@ -258,3 +260,23 @@ void Kaidan::copyToClipboard(QString text)
QClipboard *clipboard = QGuiApplication::clipboard();
clipboard->setText(text);
}
bool Kaidan::isImageFile(QString fileUrl) const
{
QMimeDatabase mimeDb;
QMimeType type = mimeDb.mimeTypeForUrl(QUrl(fileUrl));
if (type.inherits("image/jpeg") || type.inherits("image/png"))
return true;
return false;
}
QString Kaidan::fileNameFromUrl(QString url)
{
return QUrl(url).fileName();
}
QString Kaidan::fileSizeFromUrl(QString url)
{
qint64 size = QFileInfo(QUrl(url).toLocalFile()).size();
return QLocale::system().formattedDataSize(size);
}
......@@ -139,6 +139,12 @@ public:
return input.simplified();
}
/**
* Checks whether a file is an image and could be displayed as such.
* @param fileUrl URL to the possible image file
*/
Q_INVOKABLE bool isImageFile(QString fileUrl) const;
/**
* Set own JID used for connection
*
......@@ -234,6 +240,16 @@ public:
return uploadServiceFound;
}
/**
* Returns the file name from a URL
*/
Q_INVOKABLE QString fileNameFromUrl(QString url);
/**
* Returns the file size from a URL
*/
Q_INVOKABLE QString fileSizeFromUrl(QString url);
signals:
void rosterModelChanged();
void messageModelChanged();
......
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2017-2018 Kaidan developers and contributors
* Copyright (C) 2016-2018 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan is free software: you can redistribute it and/or modify
......@@ -51,9 +51,12 @@ MessageModel::MessageModel(QSqlDatabase *database, QObject *parent):
connect(this, &MessageModel::chatPartnerChanged,
this, &MessageModel::applyRecipientFilter);
connect(this, &MessageModel::addMessageRequested, this, &MessageModel::addMessage);
connect(this, &MessageModel::setMessageAsSentRequested, this, &MessageModel::setMessageAsSent);
connect(this, &MessageModel::setMessageAsDeliveredRequested, this, &MessageModel::setMessageAsDelivered);
connect(this, &MessageModel::updateMessageRequested, this, &MessageModel::updateMessage);
connect(this, &MessageModel::setMessageAsSentRequested,
this, &MessageModel::setMessageAsSent);
connect(this, &MessageModel::setMessageAsDeliveredRequested,
this, &MessageModel::setMessageAsDelivered);
connect(this, &MessageModel::updateMessageRequested,
this, &MessageModel::updateMessage);
}
void MessageModel::applyRecipientFilter(QString recipient)
......
......@@ -71,6 +71,13 @@ public:
};
signals:
/**
* Emit when the data has been changed
*
* This is somehow necessary because some changes don't have an effect on the QML side.
*/
void modelChanged();
/**
* Emitted when the user opens another chat to apply a filter to the db
*/
......
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2017-2018 Kaidan developers and contributors
* Copyright (C) 2016-2018 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan is free software: you can redistribute it and/or modify
......
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2017-2018 Kaidan developers and contributors
* Copyright (C) 2016-2018 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan is free software: you can redistribute it and/or modify
......
......@@ -33,6 +33,7 @@ import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.2 as Kirigami
import QtGraphicalEffects 1.0
import im.kaidan.kaidan 1.0
import "elements"
Kirigami.ScrollablePage {
......@@ -44,13 +45,17 @@ Kirigami.ScrollablePage {
title: chatName
keyboardNavigationEnabled: true
SendMediaSheet {
id: sendMediaSheet
}
FileChooser {
id: fileChooser
title: qsTr("Select a file")
onAccepted: {
// TODO: Add sheet for entering description, maybe later also image cropping
kaidan.sendFile(recipientJid, fileUrl, "")
sendMediaSheet.jid = recipientJid
sendMediaSheet.fileUrl = fileUrl
sendMediaSheet.open()
}
}
......@@ -131,6 +136,8 @@ Kirigami.ScrollablePage {
kaidan.avatarStorage.getAvatarUrl(author) :
kaidan.getResourcePath("images/fallback-avatar.svg")
}
mediaType: Enums.MessageImage
mediaUrl: model.mediaUrl
}
}
......
......@@ -139,8 +139,9 @@ Kirigami.Page {
// connect when return was pressed
Keys.onPressed: {
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
connectButton.clicked();
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
connectButton.clicked()
}
}
}
......
......@@ -33,6 +33,7 @@ import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0 as Controls
import org.kde.kirigami 2.0 as Kirigami
import im.kaidan.kaidan 1.0
RowLayout {
id: root
......@@ -42,6 +43,9 @@ RowLayout {
property date dateTime
property bool isRead: false
property string recipientAvatarUrl
property int mediaType
property string mediaUrl
property string mediaLocation
// own messages are on the right, others on the left
layoutDirection: sentByMe ? Qt.RightToLeft : Qt.LeftToRight
......@@ -88,38 +92,53 @@ RowLayout {
samples: 10
spread: 0.1
}
}
ColumnLayout {
id: content
spacing: 0
anchors.centerIn: box
ColumnLayout {
id: content
spacing: 0
anchors.centerIn: box
Controls.Label {
text: messageBody
textFormat: Text.PlainText
wrapMode: Text.Wrap
color: sentByMe ? Kirigami.Theme.buttonTextColor : Kirigami.Theme.complementaryTextColor
Image {
id: image
visible: mediaType === Enums.MessageImage
source: {
mediaLocation !== "" ? "file://" + mediaLocation : mediaUrl
}
fillMode: Image.PreserveAspectFit
asynchronous: true // might be a large image
Layout.maximumWidth: root.width - Kirigami.Units.gridUnit * 6
}
Layout.preferredHeight: paintedHeight
Layout.maximumWidth: root.width - Kirigami.Units.gridUnit * 6
Layout.bottomMargin: Kirigami.Units.smallSpacing
}
RowLayout {
Controls.Label {
id: dateLabel
text: Qt.formatDateTime(dateTime, "dd. MMM yyyy, hh:mm")
color: Kirigami.Theme.disabledTextColor
font.pixelSize: Kirigami.Units.gridUnit * 0.8
visible: messageBody !== ""
text: messageBody
textFormat: Text.PlainText
wrapMode: Text.Wrap
color: sentByMe ? Kirigami.Theme.buttonTextColor : Kirigami.Theme.complementaryTextColor
Layout.maximumWidth: Math.min(root.width - Kirigami.Units.gridUnit * 6, image.width)
}
Image {
id: checkmark
visible: (sentByMe && isRead)
source: kaidan.getResourcePath("images/message_checkmark.svg")
Layout.preferredHeight: Kirigami.Units.gridUnit * 0.65
Layout.preferredWidth: Kirigami.Units.gridUnit * 0.65
sourceSize.height: Kirigami.Units.gridUnit * 0.65
sourceSize.width: Kirigami.Units.gridUnit * 0.65
RowLayout {
Controls.Label {
id: dateLabel
text: Qt.formatDateTime(dateTime, "dd. MMM yyyy, hh:mm")
color: Kirigami.Theme.disabledTextColor
font.pixelSize: Kirigami.Units.gridUnit * 0.8
}
Image {
id: checkmark
visible: (sentByMe && isRead)
source: kaidan.getResourcePath("images/message_checkmark.svg")
Layout.preferredHeight: Kirigami.Units.gridUnit * 0.65
Layout.preferredWidth: Kirigami.Units.gridUnit * 0.65
sourceSize.height: Kirigami.Units.gridUnit * 0.65
sourceSize.width: Kirigami.Units.gridUnit * 0.65
}
}
}
}
......
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2018 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* In addition, as a special exception, the author of Kaidan gives
* permission to link the code of its release with the OpenSSL
* project's "OpenSSL" library (or with modified versions of it that
* use the same license as the "OpenSSL" library), and distribute the
* linked executables. You must obey the GNU General Public License in
* all respects for all of the code used other than "OpenSSL". If you
* modify this file, you may extend this exception to your version of
* the file, but you are not obligated to do so. If you do not wish to
* do so, delete this exception statement from your version.
*
* Kaidan is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* This element is used in the @see SendMediaSheet to display information about a selected image to
* the user. It just displays the image in a rectangle.
*/
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.0 as Kirigami
Rectangle {
color: Kirigami.Theme.backgroundColor
Layout.preferredWidth: Kirigami.Units.gridUnit * 32
Layout.preferredHeight: Kirigami.Units.gridUnit * 18
Layout.alignment: Qt.AlignHCenter
Image {
anchors.fill: parent
source: sourceUrl
fillMode: Image.PreserveAspectFit
asynchronous: true // image might be very large
mipmap: true
}
}
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2018 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* In addition, as a special exception, the author of Kaidan gives
* permission to link the code of its release with the OpenSSL
* project's "OpenSSL" library (or with modified versions of it that
* use the same license as the "OpenSSL" library), and distribute the
* linked executables. You must obey the GNU General Public License in
* all respects for all of the code used other than "OpenSSL". If you
* modify this file, you may extend this exception to your version of
* the file, but you are not obligated to do so. If you do not wish to
* do so, delete this exception statement from your version.
*
* Kaidan is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* This element is used in the @see SendMediaSheet to display information about a selected file to
* the user. It shows the file name, file size and a little file icon.
*/
import QtQuick 2.6
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.0 as Kirigami
Item {
id: fileInfo
// rounded box
Rectangle {
id: box
anchors.fill: fileInfo
color: Kirigami.Theme.highlightColor
radius: Kirigami.Units.smallSpacing * 2
layer.enabled: box.visible
layer.effect: DropShadow {
anchors.fill: box
verticalOffset: Kirigami.Units.gridUnit * 0.08
horizontalOffset: Kirigami.Units.gridUnit * 0.08
color: Kirigami.Theme.disabledTextColor
samples: 10
spread: 0.1
}
}
// content
RowLayout {
// left: file icon
Rectangle {
Layout.preferredWidth: Kirigami.Units.gridUnit * 2.8
Layout.preferredHeight: Kirigami.Units.gridUnit * 2.8
Layout.margins: Kirigami.Units.gridUnit * 0.5
radius: height * 0.5
color: Kirigami.Theme.backgroundColor
Kirigami.Icon {
source: "text-x-plain"
isMask: true
smooth: true
anchors.centerIn: parent
width: 24 // we always want the 24x24 icon
height: 24
}
}
// right: file description
ColumnLayout {
Layout.preferredWidth: Kirigami.Units.gridUnit * 13.5
// file name
Controls.Label {
Layout.fillWidth: true
text: kaidan.fileNameFromUrl(sourceUrl)
textFormat: Text.PlainText
elide: Text.ElideRight
maximumLineCount: 1
}
// file size
Controls.Label {
Layout.fillWidth: true
text: kaidan.fileSizeFromUrl(sourceUrl)
textFormat: Text.PlainText
elide: Text.ElideRight
maximumLineCount: 1
}
}
}
}
/*
* Kaidan - A user-friendly XMPP client for every device!
*
* Copyright (C) 2016-2018 Kaidan developers and contributors
* (see the LICENSE file for a full list of copyright authors)
*
* Kaidan is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* In addition, as a special exception, the author of Kaidan gives
* permission to link the code of its release with the OpenSSL
* project's "OpenSSL" library (or with modified versions of it that
* use the same license as the "OpenSSL" library), and distribute the
* linked executables. You must obey the GNU General Public License in
* all respects for all of the code used other than "OpenSSL". If you
* modify this file, you may extend this exception to your version of
* the file, but you are not obligated to do so. If you do not wish to
* do so, delete this exception statement from your version.
*
* Kaidan is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kaidan. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.0 as Kirigami
Kirigami.OverlaySheet {
id: root
property string jid
property string fileUrl
property bool isImage: kaidan.isImageFile(fileUrl)
showCloseButton: false
ColumnLayout {
// isImage ? image preview inside a grey box
// : fallback file info
Loader {
Layout.preferredWidth: isImage ? Kirigami.Units.gridUnit * 32
: Kirigami.Units.gridUnit * 20
Layout.preferredHeight: isImage ? Kirigami.Units.gridUnit * 18
: Kirigami.Units.gridUnit * 3.85
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
property string sourceUrl: fileUrl
source: isImage ? "MediaPreviewImage.qml" : "MediaPreviewOther.qml"
}
// TODO: - Maybe add option to change file name
// - Enabled/Disable image compression
// caption/description text field
Controls.TextField {
id: descField
text: ""
placeholderText: qsTr("Caption")
selectByMouse: true
Layout.fillWidth: true
Layout.topMargin: Kirigami.Units.largeSpacing
}
// buttons for send/cancel
RowLayout {
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
Controls.Button {
text: qsTr("Cancel")
onClicked: {
close()
descField.text = ""
}
Layout.fillWidth: true
}
Controls.Button {
id: sendButton
text: qsTr("Send")
onClicked: {
kaidan.sendFile(jid, fileUrl, descField.text)
close()
descField.text = ""
}
Layout.fillWidth: true
}
}
Keys.onPressed: {
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
sendButton.clicked()
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment