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 <philippe.gorley@savoirfairelinux.com>
diff --git a/web/chatview.html b/web/chatview.html
index cf11b40..9ceff8c 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -427,14 +427,39 @@
* @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 @@
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 @@
* @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 @@
* @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 @@
// 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 @@
// 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)