Fix rendering of headline messages.

Also, add urijs to more intelligently handle URIs

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%;
+  height: 100%; }
-  border-radius: 4px; }
 
 #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;
+    color: #666; }
-    max-width: 100%;
-    word-wrap: break-word; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
   #conversejs .message.chat-msg .chat-msg-heading {

css/inverse.css

@@ -8525,8 +8525,7 @@ body {
   #conversejs .chatbox.headlines .chat-body .chat-message {
     color: #D2842B; }
 #conversejs .chatbox.headlines .chat-content {
-  height: 100%;
+  height: 100%; }
-  border-radius: 4px; }
 
 #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;
+    color: #666; }
-    max-width: 100%;
-    word-wrap: break-word; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
   #conversejs .message.chat-msg .chat-msg-heading {

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",
+      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.7.13.tgz",
+      "resolved": "https://registry.npmjs.org/webworker-threads/-/webworker-threads-0.4.13.tgz",
-      "integrity": "sha1-yEsYtrokElu503NC5E3rgVFi+4M=",
+      "integrity": "sha1-1zvf0AIb9wkxy4XCTMP0zvvrH5g=",
       "dev": true,
       "optional": true,
       "requires": {
-        "bindings": "1.3.0",
+        "nan": "0.8.0"
-        "nan": "2.9.2"
+      },
+      "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": {

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"
   },

sass/_headline.scss

@@ -14,7 +14,6 @@
         }
         .chat-content {
             height: 100%;
-            border-radius: $chatbox-border-radius;
         }
     }
 }

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;
                 }

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)');

spec/headline.js

@@ -67,6 +67,7 @@
                 .c('body').t('<juliet@example.com> You got mail.').up()
                 .c('x', {'xmlns': 'jabber:x:oob'})
                     .c('url').t('imap://romeo@example.com/INBOX;UIDVALIDITY=385759043/;UID=18');
+
             _converse.connection._dataRecv(test_utils.createRequest(stanza));
             expect(
                 _.includes(

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",

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});

src/converse-message-view.js

@@ -74,6 +74,7 @@
                         username = this.model.get('fullname') || this.model.get('from');
                         template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
 
+                        if (this.model.get('type') !== 'headline') {
                             if (this.model.get('sender') === 'me') {
                                 image_type = _converse.xmppstatus.get('image_type');
                                 image = _converse.xmppstatus.get('image');
@@ -82,6 +83,7 @@
                                 image = this.chatbox.get('image');
                             }
                         }
+                    }
                     const moment_time = moment(this.model.get('time'));
                     const msg = u.stringToElement(template(
                         _.extend(this.model.toJSON(), {

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>

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>

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') ||
+        const uri = new URI(url), { __ } = _converse,
-            url.endsWith('jpg') || url.endsWith('jpeg') ||
+              filename = uri.filename();
-            url.endsWith('png') || url.endsWith('gif') ||
+        if (!_.includes(["https", "http"], uri.protocol()) ||
-            url.endsWith('svg')) {
+            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)
         })
     };