diff --git a/client/css/post-content-control.styl b/client/css/post-content-control.styl index 37538f82..d2911748 100644 --- a/client/css/post-content-control.styl +++ b/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 diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js index aca907b0..622c530d 100644 --- a/client/js/controls/post_content_control.js +++ b/client/js/controls/post_content_control.js @@ -119,20 +119,28 @@ class PostContentControl { post: this._post, autoplay: settings.get().autoplayVideos, }); + function load(argument) { + if (settings.get().transparencyGrid) { + newNode.classList.add("transparency-grid"); + } + newNode.firstElementChild.style.backgroundImage = ""; + } if (["image", "flash"].includes(this._post.type)) { - newNode.style.backgroundImage = "url("+this._post.thumbnailUrl+")"; + newNode.firstElementChild.style.backgroundImage = "url("+this._post.thumbnailUrl+")"; } if (this._post.type == "image") { - newNode.firstElementChild.addEventListener("load", (e) => { - if (settings.get().transparencyGrid) { - newNode.classList.add("transparency-grid"); - } else { - newNode.style.backgroundImage = ""; - } - }); + 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.thumbnailUrl+")"; + newNode.firstElementChild.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; + } + }); if (this._postContentNode) { this._hostNode.replaceChild(newNode, this._postContentNode); } else {