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.
This commit is contained in:
parent
4754bc4a89
commit
2017da2af0
|
@ -1,7 +1,7 @@
|
||||||
import Component from '@ember/component';
|
import Component from '@ember/component';
|
||||||
import { inject as service } from '@ember/service';
|
import { inject as service } from '@ember/service';
|
||||||
import { computed, observer } from '@ember/object';
|
import { observer } from '@ember/object';
|
||||||
import { alias } from '@ember/object/computed';
|
import { alias, none, not } from '@ember/object/computed';
|
||||||
import { scheduleOnce } from '@ember/runloop';
|
import { scheduleOnce } from '@ember/runloop';
|
||||||
import JSONTreeView from 'npm:json-tree-view';
|
import JSONTreeView from 'npm:json-tree-view';
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ export default Component.extend({
|
||||||
uploadingChanges: false,
|
uploadingChanges: false,
|
||||||
|
|
||||||
showEditor: null,
|
showEditor: null,
|
||||||
hideEditor: computed.not('showEditor'),
|
hideEditor: not('showEditor'),
|
||||||
|
|
||||||
fileContent: null,
|
fileContent: null,
|
||||||
objectURL: null,
|
objectURL: null,
|
||||||
|
@ -24,8 +24,19 @@ export default Component.extend({
|
||||||
type: alias('metaData.type'),
|
type: alias('metaData.type'),
|
||||||
isBinary: alias('metaData.isBinary'),
|
isBinary: alias('metaData.isBinary'),
|
||||||
|
|
||||||
|
isUnknownBinary: none('isImage', 'isAudio', 'isVideo'),
|
||||||
|
|
||||||
isImage: function() {
|
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() {
|
isText: function() {
|
||||||
return !this.get('isBinary');
|
return !this.get('isBinary');
|
||||||
|
@ -34,8 +45,16 @@ export default Component.extend({
|
||||||
loadFile: function() {
|
loadFile: function() {
|
||||||
let path = this.get('metaData.path');
|
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
|
// 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 => {
|
this.get('storage.client').getFile(path).then(file => {
|
||||||
if (this.get('isImage')) {
|
if (this.get('isImage')) {
|
||||||
let view = new window.Uint8Array(file.data);
|
let view = new window.Uint8Array(file.data);
|
||||||
|
|
|
@ -1,9 +1,16 @@
|
||||||
{{#if fileLoaded}}
|
{{#if fileLoaded}}
|
||||||
{{#if isBinary}}
|
{{#if isBinary}}
|
||||||
|
{{#if isUnkownBinary}}
|
||||||
|
<p>No preview available for this content type.</p>
|
||||||
|
{{/if}}
|
||||||
{{#if isImage}}
|
{{#if isImage}}
|
||||||
<img src={{objectURL}} alt={{metaData.name}}>
|
<img src={{objectURL}} alt={{metaData.name}}>
|
||||||
{{else}}
|
{{/if}}
|
||||||
<p>No preview available for this content type.</p>
|
{{#if isAudio}}
|
||||||
|
<audio src={{objectURL}} controls />
|
||||||
|
{{/if}}
|
||||||
|
{{#if isVideo}}
|
||||||
|
<video src={{objectURL}} controls />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img, audio, video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,10 +6,17 @@ moduleForComponent('file-preview', 'Integration | Component | file preview', {
|
||||||
});
|
});
|
||||||
|
|
||||||
test('it renders', function(assert) {
|
test('it renders', function(assert) {
|
||||||
// Set any properties with this.set('myProperty', 'value');
|
this.set('metaData', {
|
||||||
// Handle any actions with this.on('myAction', function(val) { ... });
|
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(), '');
|
assert.equal(this.$().text().trim(), '');
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue