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}} +
No preview available for this content type.
+ {{/if}} {{#if isImage}} - {{else}} -No preview available for this content type.
+ {{/if}} + {{#if isAudio}} + + {{/if}} + {{#if isVideo}} + {{/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(), ''); });