From 2017da2af009c5816503c8d2bb4703f9d85ac8dd Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Tue, 19 Jun 2018 19:43:09 +0200
Subject: [PATCH] Render audio and video file preview

Audio and video files are not downloaded, but the element src is
fetching the content directly from storage. Unfortunately, one cannot
skip forward, when the RS server doesn't support content ranges.
---
 app/components/file-preview/component.js      | 27 ++++++++++++++++---
 app/components/file-preview/template.hbs      | 11 ++++++--
 app/styles/components/_file-preview.scss      |  2 +-
 .../components/file-preview/component-test.js | 13 ++++++---
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/app/components/file-preview/component.js b/app/components/file-preview/component.js
index 52a28e4..7b1c4fb 100644
--- a/app/components/file-preview/component.js
+++ b/app/components/file-preview/component.js
@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
-import { computed, observer } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { observer } from '@ember/object';
+import { alias, none, not } from '@ember/object/computed';
 import { scheduleOnce } from '@ember/runloop';
 import JSONTreeView from 'npm:json-tree-view';
 
@@ -15,7 +15,7 @@ export default Component.extend({
   uploadingChanges: false,
 
   showEditor: null,
-  hideEditor: computed.not('showEditor'),
+  hideEditor: not('showEditor'),
 
   fileContent: null,
   objectURL: null,
@@ -24,8 +24,19 @@ export default Component.extend({
   type: alias('metaData.type'),
   isBinary: alias('metaData.isBinary'),
 
+  isUnknownBinary: none('isImage', 'isAudio', 'isVideo'),
+
   isImage: function() {
-    return this.get('type').match(/^image\/.+$/); }.property('type'),
+    return this.get('type').match(/^image\/.+$/);
+  }.property('type'),
+
+  isAudio: function() {
+    return this.get('type').match(/^audio\/.+$/);
+  }.property('type'),
+
+  isVideo: function() {
+    return this.get('type').match(/^video\/.+$/);
+  }.property('type'),
 
   isText: function() {
     return !this.get('isBinary');
@@ -34,8 +45,16 @@ export default Component.extend({
   loadFile: function() {
     let path = this.get('metaData.path');
 
+    if (this.get('isAudio') || this.get('isVideo')) {
+      this.set('fileLoaded', true);
+      this.set('objectURL', this.get('storage.client')
+                                .getItemURL(path));
+      return;
+    }
+
     // TODO don't fetch is size above certain limit
 
+    console.debug(`[file-preview] Loading file ${this.get('metaData.name')}`)
     this.get('storage.client').getFile(path).then(file => {
       if (this.get('isImage')) {
         let view = new window.Uint8Array(file.data);
diff --git a/app/components/file-preview/template.hbs b/app/components/file-preview/template.hbs
index 6baecfb..e896339 100644
--- a/app/components/file-preview/template.hbs
+++ b/app/components/file-preview/template.hbs
@@ -1,9 +1,16 @@
 {{#if fileLoaded}}
   {{#if isBinary}}
+    {{#if isUnkownBinary}}
+      <p>No preview available for this content type.</p>
+    {{/if}}
     {{#if isImage}}
       <img src={{objectURL}} alt={{metaData.name}}>
-    {{else}}
-      <p>No preview available for this content type.</p>
+    {{/if}}
+    {{#if isAudio}}
+      <audio src={{objectURL}} controls />
+    {{/if}}
+    {{#if isVideo}}
+      <video src={{objectURL}} controls />
     {{/if}}
   {{/if}}
 
diff --git a/app/styles/components/_file-preview.scss b/app/styles/components/_file-preview.scss
index 07324d2..bfd9ab0 100644
--- a/app/styles/components/_file-preview.scss
+++ b/app/styles/components/_file-preview.scss
@@ -7,7 +7,7 @@
     hyphens: none;
   }
 
-  img {
+  img, audio, video {
     max-width: 100%;
   }
 
diff --git a/tests/integration/components/file-preview/component-test.js b/tests/integration/components/file-preview/component-test.js
index ed9001d..3659334 100644
--- a/tests/integration/components/file-preview/component-test.js
+++ b/tests/integration/components/file-preview/component-test.js
@@ -6,10 +6,17 @@ moduleForComponent('file-preview', 'Integration | Component | file preview', {
 });
 
 test('it renders', function(assert) {
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
+  this.set('metaData', {
+    etag: "714148227",
+    isBinary: false,
+    isFolder: false,
+    name: "fra-pdx",
+    path: "trips/2018/06/19/fra-pdx",
+    size: 92086791,
+    type: "application/json"
+  });
 
-  this.render(hbs`{{file-preview}}`);
+  this.render(hbs`{{file-preview metaData=metaData}}`);
 
   assert.equal(this.$().text().trim(), '');
 });