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