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

@@ -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);

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}}
 

app/styles/components/_file-preview.scss

@@ -7,7 +7,7 @@
     hyphens: none;
   }
 
-  img {
+  img, audio, video {
     max-width: 100%;
   }
 

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(), '');
 });