add untracked files, whoops

components/events/image.js

@@ -34,9 +34,9 @@ let Event = create({
     return (
       <div className="body">
         <a href={this.state.full} target="_blank">
-          <img src={this.state.thumb} style={{height: this.state.size.h, width: this.state.size.w}}/>
+          <img src={this.state.thumb} style={{maxHeight: this.state.size.h, maxWidth: this.state.size.w}}/>
         </a>
-        <Text event={this.props.event} nested={true}/>
+        {/*<Text event={this.props.event} nested={true}/>*/}
       </div>
     )
   }

components/events/video.js

@@ -0,0 +1,41 @@
+'use strict'
+const React = require('react')
+const ReactDOM = require('react-dom')
+const create = require('create-react-class')
+const Promise = require('bluebird')
+const defaultValue = require('default-value')
+
+const mediaLib = require('../../lib/media.js')
+
+const Text = require('./text.js')
+
+let Event = create({
+  displayName: "m.video",
+
+  getInitialState: function() {
+    let event = this.props.event
+    if (event.content.url == undefined) {
+      return null
+    }
+    return mediaLib.parseEvent(this.props.client, event, 1000, 1000)
+  },
+
+  render: function() {
+    let event = this.props.event
+
+    if (this.state == null) {
+      return "malformed video event: " + event.content.body
+    }
+
+    return (
+      <div className="body">
+        <video controls poster={this.state.thumb} style={{maxHeight: this.state.size.h, maxWidth: this.state.size.w}}>
+          <source src={this.state.full}></source>
+        </video>
+        {/*<Text body={event.body} nested={true}/>*/}
+      </div>
+    )
+  }
+})
+
+module.exports = Event;

lib/media.js

@@ -0,0 +1,56 @@
+// should be able to handle images, stickers, and video
+
+module.exports = {
+  parseEvent: function(client, event, maxHeight, maxWidth) {
+    if (event.content.msgtype == "m.image") {
+      let h = maxHeight
+      let w = maxWidth
+
+      let media_url = client.mxcUrlToHttp(event.content.url)
+      let thumb_url = event.content.url
+
+      if (event.content.info != null) {
+        if (event.content.info.thumbnail_url != null) {
+          thumb_url = event.content.info.thumbnail_url
+        }
+
+        if (event.content.info.thumbnail_info != null) {
+          h = (event.content.info.thumbnail_info.h < maxHeight) ? event.content.info.thumbnail_info.h : h
+          w = (event.content.info.thumbnail_info.w < maxWidth)  ? event.content.info.thumbnail_info.w : w
+        } else {
+          h = (event.content.info.h < maxHeight) ? event.content.info.h : h
+          w = (event.content.info.w < maxWidth)  ? event.content.info.w : w
+        }
+      }
+
+      thumb_url = client.mxcUrlToHttp(thumb_url, w, h, 'scale', false)
+
+      return {
+        full: media_url,
+        thumb: thumb_url,
+        size: {h, w}
+      }
+    }
+    if (event.content.msgtype == "m.video") {
+      let thumb = null
+      let h = maxHeight
+      let w = maxWidth
+
+      if (event.content.info != null) {
+        if (event.content.info.thumbnail_url != null) {
+          if (event.content.info.thumbnail_info != null) {
+            h = (event.content.info.thumbnail_info.h < maxHeight) ? event.content.info.thumbnail_info.h : h
+            w = (event.content.info.thumbnail_info.w < maxWidth)  ? event.content.info.thumbnail_info.w : w
+          }
+
+          thumb = client.mxcUrlToHttp(event.content.thumbnail, w, h, 'scale', false)
+        }
+      }
+      return {
+        full: client.mxcUrlToHttp(event.content.url),
+        thumb: thumb,
+        size: {h, w}
+      }
+    }
+  }
+}

public/icons/file.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path fill="#dedede" d="M33 12v23c0 4.42-3.58 8-8 8s-8-3.58-8-8v-25c0-2.76 2.24-5 5-5s5 2.24 5 5v21c0 1.1-.89 2-2 2-1.11 0-2-.9-2-2v-19h-3v19c0 2.76 2.24 5 5 5s5-2.24 5-5v-21c0-4.42-3.58-8-8-8s-8 3.58-8 8v25c0 6.08 4.93 11 11 11s11-4.92 11-11v-23h-3z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>

tests/lib/media.js

@@ -0,0 +1,89 @@
+let assert = require('assert')
+let urllib = require('url')
+let querystring = require('querystring')
+
+let mediaLib = require('../../lib/media.js')
+
+let client = {
+  mxcUrlToHttp: function(url, w, h, method, allowDirectLinks) {
+    let hs = "https://chat.privacytools.io"
+    let mxc = url.slice(6)
+    if (w) {
+      return `${hs}/_matrix/media/v1/thumbnail/${mxc}?w=${w}&h=${h}&method=${method}`
+    } else {
+      return `${hs}/_matrix/media/v1/download/${mxc}`
+    }
+  }
+}
+
+let mockEventTemplate = {
+  type: "m.room.message",
+  sender: "@f0x:privacytools.io",
+  content: {
+    body: "image.png",
+    info: {
+      size: 16692,
+      mimetype: "image/png",
+      thumbnail_info: {
+        w: 268,
+        h: 141,
+        mimetype: "image/png",
+        size: 16896
+      },
+      w: 268,
+      h: 141,
+      thumbnail_url: "mxc://privacytools.io/zBSerdKMhaXSIxfjzCmOnhXH"
+    },
+    msgtype: "m.image",
+    url: "mxc://privacytools.io/khPaFfeRyNdzlSttZraeAUre"
+  },
+  event_id: "$aaa:matrix.org",
+  origin_server_ts: 1558470168199,
+  unsigned: {
+    age: 143237861
+  },
+  room_id: "!aaa:matrix.org"
+}
+
+describe('media', function() {
+  describe('#parseEvent()', function() {
+    it('event without info', function() {
+      let mockEvent = JSON.parse(JSON.stringify(mockEventTemplate))
+      mockEvent.content.info = null
+
+      checkParsedEvent(mockEvent, {
+        w: 1000,
+        h: 1000,
+        method: 'scale'
+      })
+    }),
+    it('event without thumbnail', function() {
+      let mockEvent = JSON.parse(JSON.stringify(mockEventTemplate))
+      mockEvent.content.info.thumbnail_url = null
+      mockEvent.content.info.thumbnail_info = null
+      checkParsedEvent(mockEvent, {
+        w: 268,
+        h: 141,
+        method: 'scale'
+      })
+    })
+    it('event without thumbnail_info', function() {
+      let mockEvent = JSON.parse(JSON.stringify(mockEventTemplate))
+      mockEvent.content.info.thumbnail_url = null
+      checkParsedEvent(mockEvent, {
+        w: 268,
+        h: 141,
+        method: 'scale'
+      })
+    })
+  })
+})
+
+function checkParsedEvent(mockEvent, expected) {
+  let media = mediaLib.parseEvent(client, mockEvent, 1000, 1000)
+  let params = querystring.decode(urllib.parse(media.thumb).query)
+
+  Object.keys(params).forEach((key) => {
+    assert.equal(expected[key], params[key])
+  })
+}