app: add option to inline images automatically

app.js

@@ -34,6 +34,7 @@ const defaultSettings = new Map([
 , ['sounds.enabled', true]
 , ['userbar.hidden', false]
 , ['user.color', '#fb73fa']
+, ['inline.images', false]
 ])
 
 function App(el, currentWindow) {
@@ -285,11 +286,15 @@ App.prototype._renderInside = function _renderInside(args, cols) {
 }
 
 App.prototype._addHandlers = function _addHandlers() {
-  delegate.on(this.el, 'a.external-url', 'click', (e) => {
+  delegate.on(this.el, 'a.external-url, a.external-url img', 'click', (e) => {
     e.preventDefault()
     var a = e.target
     if (a && a.href) {
       this.emit('openUrl', a.href)
+    } else {
+      if (a.tagName === 'IMG') {
+        this.emit('openUrl', a.parentNode.href)
+      }
     }
 
     return false
@@ -443,8 +448,8 @@ App.prototype._checkAuth = function _checkAuth() {
         }
 
         const chan = msg.channel || {}
-        const uc = settings.get('user.color')
-        return utils.processMessage(msg.message, chan.colorMap, chan.conn, uc)
+        const m = msg.message
+        return utils.processMessage(m, chan.colorMap, chan.conn, settings)
       }
 
       const conn = new Connection(opts, this)

client/less/theme.less

@@ -221,3 +221,10 @@ irc-settings {
     border: 1px solid @dusklight;
   }
 }
+
+a.external-url {
+  img.inline-img {
+    max-height: 200px;
+    margin-left: 5px;
+  }
+}

lib/linker.js

@@ -2,13 +2,54 @@
 
 const Autolinker = require('autolinker')
 const pullRequestRE = /github\.com\/([^\/]+)\/([^\/]+)\/([^\/]+)\/([\d\w]+)\/?/
+const path = require('path')
+
 const autolinker = new Autolinker({
   twitter: false
 , hashtags: false
 , className: 'external-url'
 , replaceFn: function(al, match) {
     if (match.getType() === 'url') {
       const url = match.getUrl()
+      if (isImage(url)) {
+
+      }
+      if (~url.indexOf('github.com')) {
+        const tag = al.getTagBuilder().build(match)
+        let matches = url.match(pullRequestRE)
+        if (!matches)
+          return true
+
+        if (matches[3] === 'pull' || matches[3] === 'issues') {
+          tag.setInnerHtml(`${matches[1]}/${matches[2]}#${matches[4]}`)
+          return tag.toAnchorString()
+        } else if (matches[3] === 'commit') {
+          let sha = matches[4]
+          if (sha.length === 40) {
+            sha = sha.substring(0, 8)
+          }
+          tag.setInnerHtml(`${matches[1]}/${matches[2]}@${sha}`)
+          return tag.toAnchorString()
+        }
+      }
+    }
+    return true
+  }
+})
+
+const autolinkerInline = new Autolinker({
+  twitter: false
+, hashtags: false
+, className: 'external-url'
+, replaceFn: function(al, match) {
+    if (match.getType() === 'url') {
+      const url = match.getUrl()
+      if (isImage(url)) {
+        const tag = al.getTagBuilder().build(match)
+        const text = match.getAnchorText()
+        tag.setInnerHtml(`${text}<br><br><img class="inline-img" src="${url}">`)
+        return tag.toAnchorString()
+      }
       if (~url.indexOf('github.com')) {
         const tag = al.getTagBuilder().build(match)
         let matches = url.match(pullRequestRE)
@@ -31,6 +72,24 @@ const autolinker = new Autolinker({
     return true
   }
 })
-module.exports = function linker(str) {
+
+
+module.exports = function linker(str, inlineImages) {
+  if (inlineImages)
+    return autolinkerInline.link(str)
+
   return autolinker.link(str)
 }
+
+const exts = [
+  '.jpg'
+, '.jpeg'
+, '.png'
+, '.tiff'
+, '.gif'
+, '.bmp'
+]
+
+function isImage(p) {
+  return ~exts.indexOf(path.extname(p))
+}

lib/utils.js

@@ -88,11 +88,13 @@ exports.decodeConnection = function decodeConnection(str) {
   return str.replace('#server_____', '')
 }
 
-exports.processMessage = function processMessage(msg, colorMap, conn, uc) {
+exports.processMessage = function processMessage(msg, colors, conn, settings) {
   let m = exports.encode(msg)
   // This sucks :/
+  const uc = settings.get('user.color')
+  const inlineImgs = settings.get('inline.images')
   m = m.replace('\u0002', '<strong>').replace('\u0002', '</strong>')
-  for (const item of colorMap.entries()) {
+  for (const item of colors.entries()) {
     const username = item[0]
     const color = conn && uc && username === conn.nick
       ? uc
@@ -132,5 +134,5 @@ exports.processMessage = function processMessage(msg, colorMap, conn, uc) {
     })
   }
 
-  return linker(m)
+  return linker(m, inlineImgs)
 }

lib/views/settings.js

@@ -40,6 +40,11 @@ const SETTINGS = [
   , note: 'The Userbar is normally shown when viewing a Channel.'
   , type: 'checkbox'
   }
+, { id: 'inline.images'
+  , title: 'Inline Images'
+  , note: 'Urls that are images will render the image inline'
+  , type: 'checkbox'
+  }
 ]
 
 module.exports = Settings

test/utils.js

@@ -122,11 +122,11 @@ test('processMessage', (t) => {
   colors.set('evanlucas', 'blue')
   colors.set('esya|', 'green')
   let msg = 'this is a test'
-  let out = utils.processMessage(msg, colors)
+  let out = utils.processMessage(msg, colors, null, new Map())
   t.equal(out, 'this is a test')
 
   msg = 'hi evanlucas: this is a test'
-  out = utils.processMessage(msg, colors)
+  out = utils.processMessage(msg, colors, null, new Map())
   t.equal(out, 'hi <span class="mention blue">evanlucas</span>: this is a test')
   t.end()
 })

test/views/message-log.js

@@ -31,8 +31,8 @@ test('MessageLogView', (t) => {
     , app: app
     , messageFormatter: (msg) => {
         const chan = msg.channel || {}
-
-        return utils.processMessage(msg.message, chan.colorMap, chan.conn)
+        const m = new Map()
+        return utils.processMessage(msg.message, chan.colorMap, chan.conn, m)
       }
     }
   })