Improve unsupported file type handling

Make arbitrary files look nicer and display the filename.

If an audio or video element fails to load for any reason, timeout after
a few seconds and render it as an arbitrary file. Also short circuit to
this treatment for common audio and video file types that we know are
going to fail, e.g., proprietary formats from apple.

// FREEBIE

background.html

@@ -151,6 +151,10 @@
         <img src='{{ source }}' class='preview' />
         <a class='x close' alt='remove attachment' href='#'></a>
   </script>
+  <script type='text/x-tmpl-mustache' id='file-view'>
+    <span class='icon'></span>
+    <span class='fileName' alt='{{ fileName }}' title='{{ altText }}'>{{ fileName }}</a>
+  </script>
   <script type='text/x-tmpl-mustache' id='hasRetry'>
     {{ messageNotSent }}
     <span href='#' class='retry'>{{ resend }}</span>

images/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M12 4C9.79 4 8.02 5.79 8.02 8L8 40c0 2.21 1.77 4 3.98 4H36c2.21 0 4-1.79 4-4V16L28 4H12zm14 14V7l11 11H26z"/></svg>

js/views/attachment_view.js

@@ -4,16 +4,15 @@
 (function () {
   'use strict';
 
-  var FileView = Backbone.View.extend({
-      tagName: 'a',
-      initialize: function(dataUrl) {
-          this.dataUrl = dataUrl;
-          this.$el.text(i18n('unsupportedAttachment'));
-      },
-      render: function() {
-        this.$el.attr('href', this.dataUrl);
-        this.trigger('update');
-        return this;
+  var FileView = Whisper.View.extend({
+      tagName: 'div',
+      className: 'fileView',
+      templateName: 'file-view',
+      render_attributes: function() {
+        return {
+            fileName : this.model.fileName,
+            altText  : i18n('unsupportedAttachment')
+        };
       }
   });
 
@@ -58,6 +57,12 @@
   var AudioView = MediaView.extend({ tagName: 'audio' });
   var VideoView = MediaView.extend({ tagName: 'video' });
 
+  // Blacklist common file types known to be unsupported in Chrome
+  var UnsupportedFileTypes = [
+    'audio/aiff',
+    'video/quicktime'
+  ];
+
   Whisper.AttachmentView = Backbone.View.extend({
     tagName: 'span',
     className: 'attachment',
@@ -76,9 +81,6 @@
     },
     onclick: function(e) {
         switch (this.contentType) {
-            case 'audio':
-            case 'video':
-                return;
             case 'image':
                 var view = new Whisper.LightboxView({ model: this });
                 view.render();
@@ -86,6 +88,10 @@
                 view.$el.trigger('show');
                 break;
 
+            case 'video':
+                if (this.view instanceof MediaView) {
+                    return;
+                }
             default:
                 this.saveFile();
         }
@@ -126,18 +132,39 @@
         var View;
         switch(this.contentType) {
             case 'image': View = ImageView; break;
-            case 'audio': View = AudioView; break;
             case 'video': View = VideoView; break;
-            default     : View = FileView; break;
+            case 'audio': View = AudioView; break;
         }
+
+        if (!View || _.contains(UnsupportedFileTypes, this.model.contentType)) {
+            return this.renderFileView();
+        }
+
         if (!this.objectUrl) {
             this.objectUrl = window.URL.createObjectURL(this.blob);
         }
-        var view = new View(this.objectUrl, this.model.contentType);
-        view.$el.appendTo(this.$el);
-        view.on('update', this.trigger.bind(this, 'update'));
-        view.render();
+        this.view = new View(this.objectUrl, this.model.contentType);
+        this.view.$el.appendTo(this.$el);
+        this.listenTo(this.view, 'update', this.update);
+        this.view.render();
+        this.timeout = setTimeout(this.onTimeout.bind(this), 3000);
         return this;
+    },
+    onTimeout: function() {
+        // Image or media element failed to load. Fall back to FileView.
+        this.stopListening(this.view);
+        this.renderFileView();
+    },
+    renderFileView: function() {
+        this.view = new FileView({model: {fileName: this.suggestedName()}});
+        this.view.$el.appendTo(this.$el.empty());
+        this.view.render();
+        this.update();
+        return this;
+    },
+    update: function() {
+        clearTimeout(this.timeout);
+        this.trigger('update');
     }
   });
 

stylesheets/_conversation.scss

@@ -465,6 +465,39 @@ li.entry .error-icon-container {
       cursor: pointer;
     }
 
+    .fileView {
+      position: relative;
+      padding: 5px;
+      padding-right: 10px;
+      background-color: #fafafa;
+      border: 1px solid $grey_l2;
+      border-radius: $border-radius;
+      cursor: pointer;
+      color: $grey_d;
+
+      .icon, .fileName {
+        opacity: 0.75;
+      }
+
+      &:hover {
+        .icon, .fileName {
+          opacity: 1.0;
+        }
+      }
+
+      .icon {
+        display: inline-block;
+        vertical-align: middle;
+        &:before {
+          content: '';
+          display: inline-block;
+          width: $button-height;
+          height: $button-height;
+          @include color-svg('/images/file.svg', black);
+        }
+      }
+    }
+
   }
 
   .outgoing .avatar {

stylesheets/_lightbox.scss

@@ -6,7 +6,7 @@
 
     .content {
       margin: 0;
-      padding: 0 50px;
+      padding: 0 60px;
       max-width: 100%;
       height: 100%;
       box-shadow: none;

stylesheets/android-dark.scss

@@ -83,7 +83,7 @@ $text-dark: #CCCCCC;
     display: inline-block;
     @include color-svg('/images/double-check.svg', white);
   }
-  .paperclip:before {
+  .file-input .paperclip:before {
     content: '';
     display: inline-block;
     width: $button-height;

stylesheets/manifest.css

@@ -551,7 +551,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   background-color: rgba(0, 0, 0, 0.8); }
   .lightbox.modal .content {
     margin: 0;
-    padding: 0 50px;
+    padding: 0 60px;
     max-width: 100%;
     height: 100%;
     box-shadow: none;
@@ -1313,6 +1313,37 @@ li.entry .error-icon-container {
   .message-container .attachments img,
   .message-list .attachments img {
     cursor: pointer; }
+  .message-container .attachments .fileView,
+  .message-list .attachments .fileView {
+    position: relative;
+    padding: 5px;
+    padding-right: 10px;
+    background-color: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 5px;
+    cursor: pointer;
+    color: #454545; }
+    .message-container .attachments .fileView .icon, .message-container .attachments .fileView .fileName,
+    .message-list .attachments .fileView .icon,
+    .message-list .attachments .fileView .fileName {
+      opacity: 0.75; }
+    .message-container .attachments .fileView:hover .icon, .message-container .attachments .fileView:hover .fileName,
+    .message-list .attachments .fileView:hover .icon,
+    .message-list .attachments .fileView:hover .fileName {
+      opacity: 1.0; }
+    .message-container .attachments .fileView .icon,
+    .message-list .attachments .fileView .icon {
+      display: inline-block;
+      vertical-align: middle; }
+      .message-container .attachments .fileView .icon:before,
+      .message-list .attachments .fileView .icon:before {
+        content: '';
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        -webkit-mask: url("/images/file.svg") no-repeat center;
+        -webkit-mask-size: 100%;
+        background-color: black; }
   .message-container .outgoing .avatar,
   .message-list .outgoing .avatar {
     display: none; }
@@ -1820,7 +1851,7 @@ li.entry .error-icon-container {
     -webkit-mask: url("/images/double-check.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: white; }
-  .android-dark .paperclip:before {
+  .android-dark .file-input .paperclip:before {
     content: '';
     display: inline-block;
     width: 24px;