From a27ea20f3eb6afc1aed800cd99d84620e67c95e4 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Tue, 18 Apr 2017 15:20:45 -0700
Subject: [PATCH] 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                |  4 +++
 images/file.svg                |  1 +
 js/views/attachment_view.js    | 65 ++++++++++++++++++++++++----------
 stylesheets/_conversation.scss | 33 +++++++++++++++++
 stylesheets/_lightbox.scss     |  2 +-
 stylesheets/android-dark.scss  |  2 +-
 stylesheets/manifest.css       | 35 ++++++++++++++++--
 7 files changed, 119 insertions(+), 23 deletions(-)
 create mode 100644 images/file.svg

diff --git a/background.html b/background.html
index d53057fe0..114ef2859 100644
--- a/background.html
+++ b/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>
diff --git a/images/file.svg b/images/file.svg
new file mode 100644
index 000000000..dedeef231
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index f6f6600ef..7b18905b9 100644
--- a/js/views/attachment_view.js
+++ b/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');
     }
   });
 
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 5e87890a4..76cc28a25 100644
--- a/stylesheets/_conversation.scss
+++ b/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 {
diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index 4024520d9..36f38beb4 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -6,7 +6,7 @@
 
     .content {
       margin: 0;
-      padding: 0 50px;
+      padding: 0 60px;
       max-width: 100%;
       height: 100%;
       box-shadow: none;
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 4982b0a16..783a3a03b 100644
--- a/stylesheets/android-dark.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index a4f5e61ab..7b8067718 100644
--- a/stylesheets/manifest.css
+++ b/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;