Thumbnail rework

client/css/core-general.styl

@@ -106,6 +106,11 @@ form .fa-question-circle-o
                     background-color: $scrollbar-bg-color
                 &::-webkit-scrollbar-thumb
                     background-color: $scrollbar-thumb-color
+                li[data-name=view]
+                    background: $button-enabled-background-color
+                    margin-right: 1em
+                    a
+                        color: $button-enabled-text-color
     >.content-wrapper:not(.transparent)
         background: $top-navigation-color
         padding: 1.8em
@@ -214,8 +219,6 @@ nav
         ul li[data-name=settings],
         ul li[data-name=help]
             float: none
-        .access-key
-            text-decoration: underline
         .thumbnail
             width: 1.5em
             height: 1.5em
@@ -244,9 +247,6 @@ nav
             #mobile-navigation-toggle
                 color: $text-color-darktheme
 
-a .access-key
-    text-decoration: underline
-
 .messages
     margin: 0 auto
     text-align: left
@@ -284,28 +284,25 @@ a .access-key
     /*background-image: attr(data-src url)*/ /* not available yet */
     vertical-align: middle
     background-repeat: no-repeat
-    background-size: cover
+    background-size: contain
     background-position: center
     display: inline-block
+    overflow: hidden
     width: 20px
     height: 20px
     &.empty
         background-image:
-            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
-            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
-            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
-        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
-        background-repeat: repeat
-        background-size: 20px 20px
-    img
+            repeating-linear-gradient(45deg, $window-color, $window-color 10px, #e6e6e6 10px, #e6e6e6 20px)
+    img, video
         opacity: 0
-        width: auto
-        height: 100%
-    video
-        width: auto
+        object-fit: cover
+        width: 100%
         height: 100%
 
+.darktheme .thumbnail.empty
+    background-image:
+        repeating-linear-gradient(45deg, $window-color-darktheme, $window-color-darktheme 10px, #333 10px, #333 20px)
+
 .flexbox-dummy
     height: 0 !important
     padding-top: 0 !important

client/css/post-content-control.styl

@@ -1,14 +1,16 @@
 @import colors
 
 .post-container
-    .post-content.transparency-grid img
-        background-image:
-            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
-            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
-            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
-        background-size: 20px 20px
-        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
+    .post-content
+        &.transparency-grid, &.post-error
+            background-image:
+                linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+                linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+                linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+            background-position: 0 0, 0 10px, 10px -10px, -10px 0px
+            background-repeat: repeat
+            background-size: 20px 20px
 
     text-align: center
     .post-content
@@ -17,6 +19,8 @@
         position: relative
 
         .resize-listener
+            background-repeat: no-repeat
+            background-size: cover
             position: absolute
             left: 0
             right: 0
@@ -27,3 +31,14 @@
 
         img
             image-orientation: from-image
+
+.darktheme .post-container .post-content
+    &.transparency-grid, &.post-error
+        background-image:
+            linear-gradient(45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(-45deg, $transparency-grid-square-color 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, $transparency-grid-square-color 75%),
+            linear-gradient(-45deg, transparent 75%, $transparency-grid-square-color 75%)
+        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
+        background-repeat: repeat
+        background-size: 20px 20px

client/css/post-upload.styl

@@ -62,22 +62,22 @@ $cancel-button-color = tomato
             margin: 0 0 1.2em 0
             padding-left: 13em
 
-            img
-                width: 100%
-                height: 100%
-
-            video
-                width: 100%
-                height: 100%
-
             &>.thumbnail-wrapper
                 float: left
                 width: 12em
                 height: 8em
                 margin: 0 0 0 -13em
+                a
+                    display: block
+                    height: 100%
+                    width: 100%
                 .thumbnail
                     width: 100%
                     height: 100%
+                    video
+                        opacity: 1
+                    img, video
+                        object-fit: contain
 
             .uploadable
                 border: 1px solid $upload-border-color

client/html/post_content.tpl

@@ -1,13 +1,14 @@
 <div class='post-content post-type-<%- ctx.post.type %>'>
     <% if (['image', 'animation'].includes(ctx.post.type)) { %>
 
-        <img class='resize-listener' alt='' src='<%- ctx.post.contentUrl %>'/>
+        <img class='resize-listener' alt='' src='<%- ctx.post.contentUrl %>' draggable='false' fetchPriority='high'/>
 
     <% } else if (ctx.post.type === 'flash') { %>
 
         <object class='resize-listener' width='<%- ctx.post.canvasWidth %>' height='<%- ctx.post.canvasHeight %>' data='<%- ctx.post.contentUrl %>'>
-            <param name='wmode' value='opaque'/>
+            <param name='wmode' value='transparent'/>
             <param name='movie' value='<%- ctx.post.contentUrl %>'/>
+            <div class='messages'><div class='message-wrapper'><div class='message error'>Your browser does not support Flash.</div></div></div>
         </object>
 
     <% } else if (ctx.post.type === 'video') { %>
@@ -19,6 +20,8 @@
                 loop: (ctx.post.flags || []).includes('loop'),
                 playsinline: true,
                 autoplay: ctx.autoplay,
+                preload: 'auto',
+                poster: ctx.post.originalThumbnailUrl,
             },
             ctx.makeElement('source', {
                 type: ctx.post.mimeType,

client/html/post_upload_row.tpl

@@ -10,7 +10,7 @@
 
             <div class='thumbnail'>
                 <a href='<%= ctx.uploadable.previewUrl %>'>
-                    <video id='video' nocontrols muted>
+                    <video nocontrols muted>
                         <source type='<%- ctx.uploadable.mimeType %>' src='<%- ctx.uploadable.previewUrl %>'/>
                     </video>
                 </a>

client/js/api.js

@@ -294,11 +294,16 @@ class Api extends events.EventTarget {
         // transform the request: upload each file, then make the request use
         // its tokens.
         data = Object.assign({}, data);
+        let fileData = {};
         let abortFunction = () => {};
         let promise = Promise.resolve();
         if (files) {
             for (let key of Object.keys(files)) {
                 const file = files[key];
+                if (file === null) {
+                    fileData[key] = null;
+                    continue;
+                }
                 const fileId = this._getFileId(file);
                 if (fileTokens[fileId]) {
                     data[key + "Token"] = fileTokens[fileId];
@@ -324,7 +329,7 @@ class Api extends events.EventTarget {
                     url,
                     requestFactory,
                     data,
-                    {},
+                    fileData,
                     options
                 );
                 abortFunction = () => requestPromise.abort();
@@ -388,7 +393,7 @@ class Api extends events.EventTarget {
             if (files) {
                 for (let key of Object.keys(files)) {
                     const value = files[key];
-                    if (value.constructor === String) {
+                    if (value !== null && value.constructor === String) {
                         data[key + "Url"] = value;
                     } else {
                         req.attach(key, value || new Blob());

client/js/controllers/comments_controller.js

@@ -8,7 +8,7 @@ const PageController = require("../controllers/page_controller.js");
 const CommentsPageView = require("../views/comments_page_view.js");
 const EmptyView = require("../views/empty_view.js");
 
-const fields = ["id", "comments", "commentCount", "thumbnailUrl"];
+const fields = ["id", "comments", "commentCount", "thumbnailUrl", "customThumbnailUrl"];
 
 class CommentsController {
     constructor(ctx) {

client/js/controllers/post_list_controller.js

@@ -14,6 +14,7 @@ const EmptyView = require("../views/empty_view.js");
 const fields = [
     "id",
     "thumbnailUrl",
+    "customThumbnailUrl",
     "type",
     "safety",
     "score",

client/js/controllers/post_main_controller.js

@@ -178,15 +178,11 @@ class PostMainController extends BasePostController {
         if (e.detail.relations !== undefined) {
             post.relations = e.detail.relations;
         }
-        if (e.detail.content !== undefined) {
-            post.newContent = e.detail.content;
-        }
-        if (e.detail.thumbnail !== undefined) {
-            post.newThumbnail = e.detail.thumbnail;
-        }
         if (e.detail.source !== undefined) {
             post.source = e.detail.source;
         }
+        post.newContent = e.detail.content;
+        post.newThumbnail = e.detail.thumbnail;
         post.save().then(
             () => {
                 this._view.sidebarControl.showSuccess("Post saved.");

client/js/controls/post_content_control.js

@@ -119,9 +119,28 @@ class PostContentControl {
             post: this._post,
             autoplay: settings.get().autoplayVideos,
         });
-        if (settings.get().transparencyGrid) {
+        function load(argument) {
+            if (settings.get().transparencyGrid) {
+                newNode.classList.add("transparency-grid");
+            }
+            newNode.firstElementChild.style.backgroundImage = "";
+        }
+        if (["image", "flash"].includes(this._post.type)) {
+            newNode.firstElementChild.style.backgroundImage = "url("+this._post.originalThumbnailUrl+")";
+        }
+        if (this._post.type == "image") {
+            newNode.firstElementChild.addEventListener("load", load);
+        } else if (settings.get().transparencyGrid) {
             newNode.classList.add("transparency-grid");
         }
+        newNode.firstElementChild.addEventListener("error", (e) => {
+            newNode.classList.add("post-error");
+            if (["image", "animation"].includes(this._post.type)) {
+                newNode.firstElementChild.removeEventListener("load", load);
+                newNode.firstElementChild.style.backgroundImage = "url("+this._post.originalThumbnailUrl+")";
+                newNode.firstElementChild.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+            }
+        });
         if (this._postContentNode) {
             this._hostNode.replaceChild(newNode, this._postContentNode);
         } else {

client/js/controls/post_edit_sidebar_control.js

@@ -138,10 +138,7 @@ class PostEditSidebarControl extends events.EventTarget {
             this._thumbnailRemovalLinkNode.addEventListener("click", (e) =>
                 this._evtRemoveThumbnailClick(e)
             );
-            this._thumbnailRemovalLinkNode.style.display = this._post
-                .hasCustomThumbnail
-                ? "block"
-                : "none";
+            this._thumbnailRemovalLinkUpdate(this._post);
         }
 
         if (this._addNoteLinkNode) {
@@ -249,12 +246,25 @@ class PostEditSidebarControl extends events.EventTarget {
         this._poolsExpander.title = `Pools (${this._post.pools.length})`;
     }
 
+    _thumbnailRemovalLinkUpdate(post) {
+        if (this._thumbnailRemovalLinkNode) {
+            this._thumbnailRemovalLinkNode.style.display = post
+                .customThumbnailUrl
+                ? "block"
+                : "none";
+        }
+    }
+
     _evtPostContentChange(e) {
         this._contentFileDropper.reset();
+        this._thumbnailRemovalLinkUpdate(e.detail.post);
+        this._newPostContent = null;
     }
 
     _evtPostThumbnailChange(e) {
         this._thumbnailFileDropper.reset();
+        this._thumbnailRemovalLinkUpdate(e.detail.post);
+        this._newPostThumbnail = undefined;
     }
 
     _evtRemoveThumbnailClick(e) {
@@ -427,9 +437,7 @@ class PostEditSidebarControl extends events.EventTarget {
                         : undefined,
 
                     thumbnail:
-                        this._newPostThumbnail !== undefined
-                            ? this._newPostThumbnail
-                            : undefined,
+                        this._newPostThumbnail,
 
                     source: this._sourceInputNode
                         ? this._sourceInputNode.value

client/js/models/post.js

@@ -70,6 +70,14 @@ class Post extends events.EventTarget {
         return this._thumbnailUrl;
     }
 
+    get customThumbnailUrl() {
+        return this._customThumbnailUrl;
+    }
+
+    get originalThumbnailUrl() {
+        return this._originalThumbnailUrl;
+    }
+
     get source() {
         return this._source;
     }
@@ -146,10 +154,6 @@ class Post extends events.EventTarget {
         return this._ownScore;
     }
 
-    get hasCustomThumbnail() {
-        return this._hasCustomThumbnail;
-    }
-
     set flags(value) {
         this._flags = value;
     }
@@ -477,7 +481,9 @@ class Post extends events.EventTarget {
                 response.contentUrl,
                 document.getElementsByTagName("base")[0].href
             ).href,
-            _thumbnailUrl: response.thumbnailUrl,
+            _thumbnailUrl: response.customThumbnailUrl ? response.customThumbnailUrl : response.thumbnailUrl,
+            _customThumbnailUrl: response.customThumbnailUrl,
+            _originalThumbnailUrl: response.thumbnailUrl,
             _source: response.source,
             _canvasWidth: response.canvasWidth,
             _canvasHeight: response.canvasHeight,
@@ -491,7 +497,6 @@ class Post extends events.EventTarget {
             _favoriteCount: response.favoriteCount,
             _ownScore: response.ownScore,
             _ownFavorite: response.ownFavorite,
-            _hasCustomThumbnail: response.hasCustomThumbnail,
         });
 
         for (let obj of [this, this._orig]) {

client/js/util/views.js

@@ -49,7 +49,7 @@ function makeThumbnail(url) {
                   style: `background-image: url(\'${url}\')`,
               }
             : { class: "thumbnail empty" },
-        makeElement("img", { alt: "thumbnail", src: url })
+        makeElement("img", { alt: "thumbnail", src: url, draggable: "false" })
     );
 }