ulysia/szurubooru
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/posts: more robust fallbacks on error

Browse source 
Fallback cascade: original content, thumbnail, transparency grid
Implementation is very ugly but handles all cases nicely.
This commit is contained in:
Eva 2023-05-22 22:10:20 +02:00
parent 3d27bcaab5
commit ad622c4d99
2 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
client/css/post-content-control.styl
View file

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

24
client/js/controls/post_content_control.js
View file

@ -119,20 +119,28 @@ class PostContentControl {
post: this._post, post: this._post,
autoplay: settings.get().autoplayVideos, 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)) { 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") { if (this._post.type == "image") {
newNode.firstElementChild.addEventListener("load", (e) => { newNode.firstElementChild.addEventListener("load", load);
if (settings.get().transparencyGrid) {
newNode.classList.add("transparency-grid");
} else {
newNode.style.backgroundImage = "";
}
});
} else if (settings.get().transparencyGrid) { } else if (settings.get().transparencyGrid) {
newNode.classList.add("transparency-grid"); 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) { if (this._postContentNode) {
this._hostNode.replaceChild(newNode, this._postContentNode); this._hostNode.replaceChild(newNode, this._postContentNode);
} else { } else {