Commit 1e2dd354 authored by Sébastien Blin's avatar Sébastien Blin Committed by Philippe Gorley

datatransfer: show images in chatview

Change base uri to be able to load local files. Load incoming and
outgoing images from data transfer. If an image cannot be loaded,
it will show the basic file interaction box.

This behavior is disabled if the user hide images from settings.

Change-Id: I6b7ad88fdc6cdde9d98d24137c494e1ae94693d0
Reviewed-by: Philippe Gorley's avatarPhilippe Gorley <philippe.gorley@savoirfairelinux.com>
parent 68bc012e
......@@ -487,10 +487,11 @@ build_view(WebKitChatContainer *view)
NULL
);
// file:// allow the webview to load local files
webkit_web_view_load_html(
WEBKIT_WEB_VIEW(priv->webview_chat),
(gchar*) g_bytes_get_data(chatview_bytes, NULL),
NULL
"file://"
);
/* Now we wait for the load-changed event, before we
......
......@@ -427,14 +427,39 @@ ring.chatview = (function(){
* @param message_div the message to update
* @param message_object new informations
*/
function updateFileInteraction(message_div, message_object) {
function updateFileInteraction(message_div, message_object, forceTypeToFile = false) {
if (!message_div.querySelector('.informations')) return // media
var acceptSvg = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>',
refuseSvg = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
fileSvg = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
warningSvg = '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>'
var message_delivery_status = message_object["delivery_status"];
var message_direction = message_object["direction"];
var message_id = message_object["id"];
var message_delivery_status = message_object["delivery_status"]
var message_direction = message_object["direction"]
var message_id = message_object["id"]
var message_text = message_object['text']
if (isImage(message_text) && message_delivery_status === 'finished' && displayLinksEnabled && !forceTypeToFile) {
// Replace the old wrapper by the downloaded image
if (message_div.querySelector('.message_wrapper')) {
wrapper = message_div.querySelector('.message_wrapper')
wrapper.parentNode.removeChild(wrapper)
}
message_div.append(mediaInteraction(message_id, message_text))
message_div.querySelector('img').id = message_id
message_div.querySelector('img').msg_obj = message_object
message_div.querySelector('img').onerror = function() {
message_div = document.querySelector('#message_' + this.id);
if (message_div.querySelector('.message_wrapper')) {
wrapper = message_div.querySelector('.message_wrapper')
wrapper.parentNode.removeChild(wrapper)
}
message_div.append(fileInteraction(message_id))
updateFileInteraction(message_div, this.msg_obj, true)
}
return
}
// Set informations text
var informations_div = message_div.querySelector(".informations");
......@@ -483,8 +508,10 @@ ring.chatview = (function(){
left_buttons.appendChild(status_button);
}
message_div.querySelector('.full').innerText = message_object['text']
message_div.querySelector('.filename').innerText = message_object['text'].split('/').pop()
message_div.querySelector('.full').innerText = message_text
message_div.querySelector('.filename').innerText = message_text.split('/').pop()
message_div.querySelector('.filename').innerText = message_text.split('/').pop()
updateProgressBar(message_div.querySelector('.message_progress_bar'), message_object);
updateProgressBar(message_div.querySelector('.message_progress_bar'), message_object);
}
......@@ -493,7 +520,7 @@ ring.chatview = (function(){
* @param file
*/
function isImage(file) {
return file.match(/\.(jpeg|jpg|gif|png)$/) !== null
return file.toLowerCase().match(/\.(jpeg|jpg|gif|png)$/) !== null
}
/**
......@@ -514,7 +541,7 @@ ring.chatview = (function(){
* @param link to show
* @param ytid if it's a youtube video
*/
function mediaInteraction(message_id, link, ytid) {
function mediaInteraction(message_id, link, ytid, noerror) {
// TODO promise?
// Try to display images.
const media_wrapper = document.createElement('div')
......@@ -526,7 +553,8 @@ ring.chatview = (function(){
// Note, here, we don't check the size of the image.
// in the future, we can check the content-type and content-length with a request
// and maybe disable svg
imageElt.setAttribute('onerror', 'this.style.display=\'none\'')
if (noerror)
imageElt.setAttribute('onerror', 'this.style.display=\'none\'')
if (ytid) {
imageElt.src = `http://img.youtube.com/vi/${ytid}/0.jpg`
} else {
......@@ -730,8 +758,22 @@ ring.chatview = (function(){
// Build main content
if (message_type === 'data_transfer') {
type = 'fileInteraction'
if (isImage(message_text) && delivery_status === 'finished' && displayLinksEnabled) {
message_div.append(mediaInteraction(message_id, message_text, null, false))
message_div.querySelector('img').id = message_id
message_div.querySelector('img').msg_obj = message_object
message_div.querySelector('img').onerror = function() {
message_div = document.querySelector('#message_' + this.id);
if (message_div.querySelector('.message_wrapper')) {
wrapper = message_div.querySelector('.message_wrapper')
wrapper.parentNode.removeChild(wrapper)
}
message_div.append(fileInteraction(message_id))
updateFileInteraction(message_div, this.msg_obj, true)
}
} else {
message_div.append(fileInteraction(message_id))
}
} else if (message_type === 'text') {
// TODO add the possibility to update messages (remove and rebuild)
const htmlText = getMessageHtml(message_text)
......
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