Add audio and video players

Basic implementation using html5 audio/video tags and data URIs.

js/views/attachment_view.js

@@ -16,9 +16,42 @@
 (function () {
   'use strict';
 
+  var ImageView = Backbone.View.extend({
+      tagName: 'img',
+      render: function(dataUrl) {
+          this.$el.attr('src', dataUrl);
+          return this;
+      }
+  });
+
+  var AudioView = Backbone.View.extend({
+      tagName: 'audio',
+      initialize: function() {
+          this.$el.attr('controls', '');
+      },
+      render: function(dataUrl) {
+          this.$el.attr('src', dataUrl);
+          return this;
+      }
+  });
+
+  var VideoView = Backbone.View.extend({
+      tagName: 'video',
+      initialize: function() {
+          this.$el.attr('controls', '');
+      },
+      render: function(dataUrl, contentType) {
+          var $el = $('<source>');
+          $el.attr('src', dataUrl);
+          $el.attr('type', contentType);
+          this.$el.append($el);
+          return this;
+      }
+  });
+
   Whisper.AttachmentView = Backbone.View.extend({
-    tagName:   "img",
-    encode: function  () {
+    className: 'attachment',
+    encodeAsDataUrl: function  () {
         return new Promise(function(resolve, reject) {
             var blob = new Blob([this.model.data], { type: this.model.contentType });
             var FR = new FileReader();
@@ -30,8 +63,17 @@
         }.bind(this));
     },
     render: function() {
-        this.encode().then(function(base64) {
-            this.$el.attr('src', base64);
+        var view;
+        switch(this.model.contentType.split('/')[0]) {
+            case 'image': view = new ImageView(); break;
+            case 'audio': view = new AudioView(); break;
+            case 'video': view = new VideoView(); break;
+            default:
+                throw 'Unsupported attachment type';
+        }
+        this.encodeAsDataUrl().then(function(base64) {
+            view.render(base64, this.model.contentType);
+            view.$el.appendTo(this.$el);
             this.$el.trigger('update');
         }.bind(this));
         return this;

stylesheets/_conversation.scss

@@ -177,8 +177,10 @@
   }
 
 
-  .attachments img {
-    max-width: 100%;
+  .attachments {
+    img, audio, video {
+      max-width: 100%;
+    }
   }
 
   .outgoing img.avatar {

stylesheets/manifest.css

@@ -412,8 +412,10 @@ input.new-message {
     .message-list .outgoing .bubble::after {
       right: -8px;
       border-left: 8px solid #2a92e7; }
-  .message-detail .attachments img,
-  .message-list .attachments img {
+  .message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video,
+  .message-list .attachments img,
+  .message-list .attachments audio,
+  .message-list .attachments video {
     max-width: 100%; }
   .message-detail .outgoing img.avatar,
   .message-list .outgoing img.avatar {