Fix rendering of headline messages.

Also, add urijs to more intelligently handle URIs
2018-04-27 13:47:44 +02:00 · 2018-04-27 13:47:44 +02:00 · 56e4e8b8ee
commit 56e4e8b8ee
parent 3d42425083
14 changed files with 79 additions and 60 deletions
--- a/css/converse.css
+++ b/css/converse.css
@ -8345,8 +8345,7 @@ body.reset {
  #conversejs .chatbox.headlines .chat-body .chat-message {
    color: #D2842B; }
 #conversejs .chatbox.headlines .chat-content {
-  height: 100%;
-  border-radius: 4px; }
+  height: 100%; }

 #conversejs .message.date-separator {
  height: 2em;
@ -8384,9 +8383,6 @@ body.reset {
  #conversejs .message.chat-info.chat-error {
    color: #D24E2B;
    font-weight: bold; }
-  #conversejs .message.chat-info.chat-date {
-    display: inline-block;
-    margin-top: 1em; }
 #conversejs .message .chat-image {
  height: auto;
  width: auto;
@ -8422,12 +8418,14 @@ body.reset {
    vertical-align: middle;
    width: 36px; }
  #conversejs .message.chat-msg .chat-msg-content {
-    margin-left: 0.5rem; }
+    margin-left: 0.5rem;
+    word-wrap: break-word;
+    width: 100%; }
+  #conversejs .message.chat-msg.headline .chat-msg-content {
+    margin-left: 0; }
  #conversejs .message.chat-msg .chat-msg-text {
    padding: 0;
-    color: #666;
-    max-width: 100%;
-    word-wrap: break-word; }
+    color: #666; }
    #conversejs .message.chat-msg .chat-msg-text .emojione {
      margin-bottom: -6px; }
  #conversejs .message.chat-msg .chat-msg-heading {
--- a/css/inverse.css
+++ b/css/inverse.css
@ -8525,8 +8525,7 @@ body {
  #conversejs .chatbox.headlines .chat-body .chat-message {
    color: #D2842B; }
 #conversejs .chatbox.headlines .chat-content {
-  height: 100%;
-  border-radius: 4px; }
+  height: 100%; }

 #conversejs.fullscreen .chatbox.headlines .box-flyout {
  background-color: #E7A151; }
@ -8572,9 +8571,6 @@ body {
  #conversejs .message.chat-info.chat-error {
    color: #D24E2B;
    font-weight: bold; }
-  #conversejs .message.chat-info.chat-date {
-    display: inline-block;
-    margin-top: 1em; }
 #conversejs .message .chat-image {
  height: auto;
  width: auto;
@ -8610,12 +8606,14 @@ body {
    vertical-align: middle;
    width: 36px; }
  #conversejs .message.chat-msg .chat-msg-content {
-    margin-left: 0.5rem; }
+    margin-left: 0.5rem;
+    word-wrap: break-word;
+    width: 100%; }
+  #conversejs .message.chat-msg.headline .chat-msg-content {
+    margin-left: 0; }
  #conversejs .message.chat-msg .chat-msg-text {
    padding: 0;
-    color: #666;
-    max-width: 100%;
-    word-wrap: break-word; }
+    color: #666; }
    #conversejs .message.chat-msg .chat-msg-text .emojione {
      margin-bottom: -6px; }
  #conversejs .message.chat-msg .chat-msg-heading {
--- a/package-lock.json
+++ b/package-lock.json
@ -907,13 +907,6 @@
      "dev": true,
      "optional": true
    },
-    "bindings": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.3.0.tgz",
-      "integrity": "sha512-DpLh5EzMR2kzvX1KIlVC0VkC3iZtHKTgdtZ0a3pglBZdaQFjt5S9g9xd1lE+YvXyfd6mtCeRnrUfOLYiTMlNSw==",
-      "dev": true,
-      "optional": true
-    },
    "bootstrap": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
@ -8069,10 +8062,12 @@
      }
    },
    "otr": {
-      "version": "github:jcbrand/otr#b2a10117c23632714c13074d5e63aee6aedab9e3",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/otr/-/otr-0.2.16.tgz",
+      "integrity": "sha1-BKdTRPUi38sHeMVDjA9V5p0+i8E=",
      "dev": true,
      "requires": {
-        "webworker-threads": "0.7.13"
+        "webworker-threads": "0.4.13"
      }
    },
    "output-file-sync": {
@ -9703,6 +9698,12 @@
        }
      }
    },
+    "urijs": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.1.tgz",
+      "integrity": "sha512-xVrGVi94ueCJNrBSTjWqjvtgvl3cyOTThp2zaMaFNGp3F542TR6sM3f2o8RqZl+AwteClSVmoCyt0ka4RjQOQg==",
+      "dev": true
+    },
    "url": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
@ -9757,14 +9758,22 @@
      "dev": true
    },
    "webworker-threads": {
-      "version": "0.7.13",
-      "resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.7.13.tgz",
-      "integrity": "sha1-yEsYtrokElu503NC5E3rgVFi+4M=",
+      "version": "0.4.13",
+      "resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.4.13.tgz",
+      "integrity": "sha1-1zvf0AIb9wkxy4XCTMP0zvvrH5g=",
      "dev": true,
      "optional": true,
      "requires": {
-        "bindings": "1.3.0",
-        "nan": "2.9.2"
+        "nan": "0.8.0"
+      },
+      "dependencies": {
+        "nan": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-0.8.0.tgz",
+          "integrity": "sha1-AiqPpen+hCCWSsH7PclOF/RJ9f0=",
+          "dev": true,
+          "optional": true
+        }
      }
    },
    "which": {
--- a/package.json
+++ b/package.json
@ -58,7 +58,7 @@
    "lodash": "4.17.4",
    "lodash-template-loader": "^2.0.0",
    "moment": "~> 2.19.3 ",
-    "otr": "jcbrand/otr",
+    "otr": "0.2.16",
    "pluggable.js": "2.0.0",
    "po2json": "^0.4.4",
    "requirejs": "2.3.5",
@ -75,6 +75,7 @@
    "strophejs-plugin-vcard": "0.0.1",
    "text": "requirejs/text#2.0.15",
    "uglify-es": "^3.0.24",
+    "urijs": "^1.19.1",
    "wait-until-promise": "^1.0.0",
    "xss": "^0.3.3"
  },
--- a/sass/_headline.scss
+++ b/sass/_headline.scss
@ -14,7 +14,6 @@
        }
        .chat-content {
            height: 100%;
-            border-radius: $chatbox-border-radius;
        }
    }
 }
--- a/sass/_messages.scss
+++ b/sass/_messages.scss
@ -48,10 +48,6 @@
                color: $warning-color;
                font-weight: bold;
            }
-            &.chat-date {
-                display: inline-block;
-                margin-top: 1em;
-            }
        }

        .chat-image {
@ -104,14 +100,18 @@

            .chat-msg-content {
                margin-left: 0.5rem;
+                word-wrap: break-word;
+                width: 100%;
+            }
+            &.headline {
+                .chat-msg-content {
+                    margin-left: 0;
+                }
            }

            .chat-msg-text {
                padding: 0;
                color: #666;
-                max-width: 100%;
-                word-wrap: break-word;
-
                .emojione {
                    margin-bottom: -6px;
                }
--- a/spec/chatroom.js
+++ b/spec/chatroom.js
@ -2021,7 +2021,7 @@
                    });

                    expect(view.onMessageSubmitted).toHaveBeenCalled();
-                    const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info:not(.chat-date)'), 0);
+                    const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0);
                    expect(info_messages.length).toBe(17);
                    expect(info_messages.pop().textContent).toBe('/voice: Allow muted user to post messages');
                    expect(info_messages.pop().textContent).toBe('/topic: Set room subject (alias for /subject)');
--- a/spec/headline.js
+++ b/spec/headline.js
@ -66,7 +66,8 @@
                .c('subject').t('SIEVE').up()
                .c('body').t('&lt;juliet@example.com&gt; You got mail.').up()
                .c('x', {'xmlns': 'jabber:x:oob'})
-                .c('url').t('imap://romeo@example.com/INBOX;UIDVALIDITY=385759043/;UID=18');
+                    .c('url').t('imap://romeo@example.com/INBOX;UIDVALIDITY=385759043/;UID=18');
+
            _converse.connection._dataRecv(test_utils.createRequest(stanza));
            expect(
                _.includes(
--- a/src/config.js
+++ b/src/config.js
@ -15,6 +15,8 @@ if (typeof(require) === 'undefined') {
 require.config({
    baseUrl: '.',
    paths: {
+        "IPv6":                     "node_modules/urijs/src/IPv6",
+        "SecondLevelDomains":       "node_modules/urijs/src/SecondLevelDomains",
        "almond":                   "node_modules/almond/almond",
        "awesomplete":              "node_modules/awesomplete-avoid-xss/awesomplete",
        "babel":                    "node_modules/requirejs-babel/babel-5.8.34.min",
@ -42,6 +44,7 @@ require.config({
        "muc-utils":                "src/utils/muc",
        "pluggable":                "node_modules/pluggable.js/dist/pluggable",
        "polyfill":                 "src/polyfill",
+        "punycode":                 "node_modules/urijs/src/punycode",
        "sizzle":                   "node_modules/sizzle/dist/sizzle",
        "snabbdom":                 "node_modules/snabbdom/dist/snabbdom",
        "snabbdom-attributes":      "node_modules/snabbdom/dist/snabbdom-attributes",
@ -59,6 +62,7 @@ require.config({
        "tovnode":                  "node_modules/snabbdom/dist/tovnode",
        "tpl":                      "node_modules/lodash-template-loader/loader",
        "underscore":               "src/underscore-shim",
+        "uri":                      "node_modules/urijs/src/URI",
        "utils":                    "src/utils/core",
        "vdom-parser":              "node_modules/vdom-parser/dist",
        "xss":                      "node_modules/xss/dist/xss",
--- a/src/converse-headline.js
+++ b/src/converse-headline.js
@ -135,8 +135,8 @@
                    const chatbox = _converse.chatboxes.create({
                        'id': from_jid,
                        'jid': from_jid,
-                        'fullname':  from_jid,
                        'type': 'headline',
+                        'from': from_jid
                    });
                    chatbox.createMessage(message, undefined, message);
                    _converse.emit('message', {'chatbox': chatbox, 'stanza': message});
--- a/src/converse-message-view.js
+++ b/src/converse-message-view.js
@ -74,12 +74,14 @@
                        username = this.model.get('fullname') || this.model.get('from');
                        template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;

-                        if (this.model.get('sender') === 'me') {
-                            image_type = _converse.xmppstatus.get('image_type');
-                            image = _converse.xmppstatus.get('image');
-                        } else {
-                            image_type = this.chatbox.get('image_type');
-                            image = this.chatbox.get('image');
+                        if (this.model.get('type') !== 'headline') {
+                            if (this.model.get('sender') === 'me') {
+                                image_type = _converse.xmppstatus.get('image_type');
+                                image = _converse.xmppstatus.get('image');
+                            } else {
+                                image_type = this.chatbox.get('image_type');
+                                image = this.chatbox.get('image');
+                            }
                        }
                    }
                    const moment_time = moment(this.model.get('time'));
--- a/src/templates/message.html
+++ b/src/templates/message.html
@ -1,5 +1,7 @@
-<div class="message chat-msg {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
+<div class="message chat-msg {{{o.type}}} {{{o.extra_classes}}}" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
+    {[ if (o.type !== 'headline') { ]}
    <img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
+    {[ } ]}
    <div class="chat-msg-content">
        <span class="chat-msg-heading">
            <span class="chat-msg-author">{{{o.username}}}</span>
--- a/src/templates/new_day.html
+++ b/src/templates/new_day.html
@ -1 +1,4 @@
-<time class="message chat-info chat-date badge badge-info" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time>
+<div class="message date-separator">
+    <hr class="separator">
+    <time class="separator-text" datetime="{{{o.isodate}}}"><span>{{{o.datestring}}}</span></time>
+</div>
--- a/src/utils/core.js
+++ b/src/utils/core.js
@ -14,6 +14,7 @@
            "es6-promise",
            "lodash.noconflict",
            "strophe",
+            "uri",
            "tpl!audio",
            "tpl!file",
            "tpl!image",
@ -46,6 +47,7 @@
        Promise,
        _,
        Strophe,
+        URI,
        tpl_audio,
        tpl_file,
        tpl_image,
@ -247,19 +249,19 @@
    };

    u.renderFileURL = function (_converse, url) {
-        if (url.endsWith('mp3') || url.endsWith('mp4') ||
-            url.endsWith('jpg') || url.endsWith('jpeg') ||
-            url.endsWith('png') || url.endsWith('gif') ||
-            url.endsWith('svg')) {
+        const uri = new URI(url), { __ } = _converse,
+              filename = uri.filename();
+        if (!_.includes(["https", "http"], uri.protocol()) ||
+            filename.endsWith('mp3') || filename.endsWith('mp4') ||
+            filename.endsWith('jpg') || filename.endsWith('jpeg') ||
+            filename.endsWith('png') || filename.endsWith('gif') ||
+            filename.endsWith('svg')) {

            return url;
        }
-        const name = url.split('/').pop(),
-              { __ } = _converse;
-
        return tpl_file({
            'url': url,
-            'label_download': __('Download file: "%1$s', name)
+            'label_download': __('Download: "%1$s', filename)
        })
    };