[polari] chatView: Add URL previews

[Florian Müllner <fmuellner src gnome org>]

commit 509ecb2a4f9ed364b93b300a37c328db69b240aa
Author: daronion <stefanosdimos 98 gmail com>
Date:   Mon Aug 26 17:43:47 2019 +0300

    chatView: Add URL previews
    
    The addition of URL previews will benefit users by preventing
    possibly unnecessary switches to the web browser by giving a
    general idea about the link's content.
    
    Add preview widgets for each detected URL for that purpose,
    although for now we only show a loading placeholder. The
    actual thumbnail creation will be implemented in a follow-up
    patch.
    
    https://gitlab.gnome.org/GNOME/polari/issues/58

 data/resources/application.css |  3 +++
 src/chatView.js                | 15 +++++++++++++++
 src/meson.build                |  1 +
 src/urlPreview.js              | 30 ++++++++++++++++++++++++++++++
 4 files changed, 49 insertions(+)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index 68aee7b..a8abfba 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -117,6 +117,9 @@ treeview.polari-server-room-list {
     padding: 6px;
 }
 
+.url-preview { padding: 8px; }
+.url-preview image { min-width: 120px; min-height: 90px; }
+
 .emoji-picker entry { margin: 6px; }
 
 .emoji-picker .view { background-color: @theme_bg_color; }
diff --git a/src/chatView.js b/src/chatView.js
index 67aae55..4ae8d18 100644
--- a/src/chatView.js
+++ b/src/chatView.js
@@ -8,6 +8,7 @@ const {
 const { DropTargetIface } = imports.pasteManager;
 const { UserPopover } = imports.userList;
 const { UserStatusMonitor } = imports.userTracker;
+const { URLPreview } = imports.urlPreview;
 const Utils = imports.utils;
 
 var MAX_NICK_CHARS = 8;
@@ -1320,6 +1321,7 @@ var ChatView = GObject.registerClass({
 
         let channels = Utils.findChannels(text, server);
         let urls = Utils.findUrls(text).concat(channels).sort((u1, u2) => u1.pos - u2.pos);
+        let previews = [];
         let pos = 0;
         for (let i = 0; i < urls.length; i++) {
             let url = urls[i];
@@ -1332,10 +1334,23 @@ var ChatView = GObject.registerClass({
             this._insertWithTags(iter,
                 name, tags.concat(this._lookupTag('url'), tag));
 
+            previews.push(new URLPreview({ uri: url.url, visible: true }));
+
             pos = url.pos + name.length;
         }
         this._insertWithTags(iter, text.substr(pos), tags);
 
+        if (previews.length) {
+            this._view.buffer.insert(iter, '\n', -1);
+
+            for (const preview of previews) {
+                this._view.add_child_at_anchor(preview,
+                    this._view.buffer.create_child_anchor(iter));
+            }
+
+            this._view.buffer.insert(iter, '\n', -1);
+        }
+
         if (highlight && message.pendingId) {
             this._pending.set(
                 message.pendingId,
diff --git a/src/meson.build b/src/meson.build
index fb99191..1a30e3e 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -25,6 +25,7 @@ js_sources = [
   'serverRoomManager.js',
   'tabCompletion.js',
   'telepathyClient.js',
+  'urlPreview.js',
   'userList.js',
   'utils.js',
   'userTracker.js'
diff --git a/src/urlPreview.js b/src/urlPreview.js
new file mode 100644
index 0000000..cc32e08
--- /dev/null
+++ b/src/urlPreview.js
@@ -0,0 +1,30 @@
+/* exported URLPreview */
+const { GObject, Gtk } = imports.gi;
+
+let URLPreview = GObject.registerClass({
+    Properties: {
+        'uri': GObject.ParamSpec.string(
+            'uri', 'uri', 'uri',
+            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
+            null),
+    },
+}, class URLPreview extends Gtk.Box {
+    _init(params) {
+        super._init(params);
+
+        this.set({
+            margin: 12,
+            margin_start: 0,
+        });
+
+        let styleContext = this.get_style_context();
+        styleContext.add_class('url-preview');
+        styleContext.add_class(Gtk.STYLE_CLASS_BACKGROUND);
+
+        this._image = new Gtk.Image({
+            icon_name: 'image-loading-symbolic',
+            visible: true,
+        });
+        this.add(this._image);
+    }
+});