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) ...@@ -487,10 +487,11 @@ build_view(WebKitChatContainer *view)
NULL NULL
); );
// file:// allow the webview to load local files
webkit_web_view_load_html( webkit_web_view_load_html(
WEBKIT_WEB_VIEW(priv->webview_chat), WEBKIT_WEB_VIEW(priv->webview_chat),
(gchar*) g_bytes_get_data(chatview_bytes, NULL), (gchar*) g_bytes_get_data(chatview_bytes, NULL),
NULL "file://"
); );
/* Now we wait for the load-changed event, before we /* Now we wait for the load-changed event, before we
......
...@@ -427,14 +427,39 @@ ring.chatview = (function(){ ...@@ -427,14 +427,39 @@ ring.chatview = (function(){
* @param message_div the message to update * @param message_div the message to update
* @param message_object new informations * @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>', 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>', 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>', 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>' 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_delivery_status = message_object["delivery_status"]
var message_direction = message_object["direction"]; var message_direction = message_object["direction"]
var message_id = message_object["id"]; 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 // Set informations text
var informations_div = message_div.querySelector(".informations"); var informations_div = message_div.querySelector(".informations");
...@@ -483,8 +508,10 @@ ring.chatview = (function(){ ...@@ -483,8 +508,10 @@ ring.chatview = (function(){
left_buttons.appendChild(status_button); left_buttons.appendChild(status_button);
} }
message_div.querySelector('.full').innerText = message_object['text'] message_div.querySelector('.full').innerText = message_text
message_div.querySelector('.filename').innerText = message_object['text'].split('/').pop() 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); updateProgressBar(message_div.querySelector('.message_progress_bar'), message_object);
} }
...@@ -493,7 +520,7 @@ ring.chatview = (function(){ ...@@ -493,7 +520,7 @@ ring.chatview = (function(){
* @param file * @param file
*/ */
function isImage(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(){ ...@@ -514,7 +541,7 @@ ring.chatview = (function(){
* @param link to show * @param link to show
* @param ytid if it's a youtube video * @param ytid if it's a youtube video
*/ */
function mediaInteraction(message_id, link, ytid) { function mediaInteraction(message_id, link, ytid, noerror) {
// TODO promise? // TODO promise?
// Try to display images. // Try to display images.
const media_wrapper = document.createElement('div') const media_wrapper = document.createElement('div')
...@@ -526,7 +553,8 @@ ring.chatview = (function(){ ...@@ -526,7 +553,8 @@ ring.chatview = (function(){
// Note, here, we don't check the size of the image. // 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 // in the future, we can check the content-type and content-length with a request
// and maybe disable svg // and maybe disable svg
imageElt.setAttribute('onerror', 'this.style.display=\'none\'') if (noerror)
imageElt.setAttribute('onerror', 'this.style.display=\'none\'')
if (ytid) { if (ytid) {
imageElt.src = `http://img.youtube.com/vi/${ytid}/0.jpg` imageElt.src = `http://img.youtube.com/vi/${ytid}/0.jpg`
} else { } else {
...@@ -730,8 +758,22 @@ ring.chatview = (function(){ ...@@ -730,8 +758,22 @@ ring.chatview = (function(){
// Build main content // Build main content
if (message_type === 'data_transfer') { 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)) message_div.append(fileInteraction(message_id))
}
} else if (message_type === 'text') { } else if (message_type === 'text') {
// TODO add the possibility to update messages (remove and rebuild) // TODO add the possibility to update messages (remove and rebuild)
const htmlText = getMessageHtml(message_text) 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