diff --git a/client/css/main.styl b/client/css/main.styl index a22d0f6a..dd9e2d43 100644 --- a/client/css/main.styl +++ b/client/css/main.styl @@ -171,16 +171,19 @@ a .access-key background-size: cover background-position: center display: inline-block - img - opacity: 0 - width: 100% - height: 100% width: 20px height: 20px &.empty background-image: url('/img/transparency_grid.png') background-repeat: repeat background-size: initial + img + opacity: 0 + width: 100% + height: 100% + video + width: 100% + height: 100% .flexbox-dummy height: 0 !important diff --git a/client/html/post_upload_row.tpl b/client/html/post_upload_row.tpl index 9c2bc64d..7f688bba 100644 --- a/client/html/post_upload_row.tpl +++ b/client/html/post_upload_row.tpl @@ -8,7 +8,15 @@
<% if (['image'].includes(ctx.uploadable.type)) { %> - <%= ctx.makeThumbnail(ctx.uploadable.imageUrl) %> + <%= ctx.makeThumbnail(ctx.uploadable.previewUrl) %> + + <% } else if (['video'].includes(ctx.uploadable.type)) { %> + +
+ +
<% } else { %> diff --git a/client/js/views/post_upload_view.js b/client/js/views/post_upload_view.js index 211f8538..d140cf42 100644 --- a/client/js/views/post_upload_view.js +++ b/client/js/views/post_upload_view.js @@ -9,6 +9,17 @@ const rowTemplate = views.getTemplate('post-upload-row'); let globalOrder = 0; +function _mimeTypeToPostType(mimeType) { + return { + 'application/x-shockwave-flash': 'flash', + 'image/gif': 'image', + 'image/jpeg': 'image', + 'image/png': 'image', + 'video/mp4': 'video', + 'video/webm': 'video', + }[mimeType] || 'unknown'; +} + class Uploadable extends events.EventTarget { constructor() { super(); @@ -21,8 +32,12 @@ class Uploadable extends events.EventTarget { destroy() { } + get mimeType() { + return 'application/octet-stream'; + } + get type() { - return 'unknown'; + return _mimeTypeToPostType(this.mimeType); } get key() { @@ -39,14 +54,14 @@ class File extends Uploadable { super(); this.file = file; - this._imageUrl = null; + this._previewUrl = null; if (URL && URL.createObjectURL) { - this._imageUrl = URL.createObjectURL(file); + this._previewUrl = URL.createObjectURL(file); } else { let reader = new FileReader(); reader.readAsDataURL(file); reader.addEventListener('load', e => { - this._imageUrl = e.target.result; + this._previewUrl = e.target.result; this.dispatchEvent( new CustomEvent('finish', {detail: {uploadable: this}})); }); @@ -55,23 +70,16 @@ class File extends Uploadable { destroy() { if (URL && URL.createObjectURL && URL.revokeObjectURL) { - URL.revokeObjectURL(this._imageUrl); + URL.revokeObjectURL(this._previewUrl); } } - get type() { - return { - 'application/x-shockwave-flash': 'flash', - 'image/gif': 'image', - 'image/jpeg': 'image', - 'image/png': 'image', - 'video/mp4': 'video', - 'video/webm': 'video', - }[this.file.type] || 'unknown'; + get mimeType() { + return this.file.type; } - get imageUrl() { - return this._imageUrl; + get previewUrl() { + return this._previewUrl; } get key() { @@ -90,24 +98,24 @@ class Url extends Uploadable { this.dispatchEvent(new CustomEvent('finish')); } - get type() { - let extensions = { - 'swf': 'flash', - 'jpg': 'image', - 'png': 'image', - 'gif': 'image', - 'mp4': 'video', - 'webm': 'video', + get mimeType() { + let mime = { + 'swf': 'application/x-shockwave-flash', + 'jpg': 'image/jpeg', + 'png': 'image/png', + 'gif': 'image/gif', + 'mp4': 'video/mp4', + 'webm': 'video/webm', }; - for (let extension of Object.keys(extensions)) { + for (let extension of Object.keys(mime)) { if (this.url.toLowerCase().indexOf('.' + extension) !== -1) { - return extensions[extension]; + return mime[extension]; } } return 'unknown'; } - get imageUrl() { + get previewUrl() { return this.url; }