Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Thumbnail rework #646

Draft
wants to merge 18 commits into
base: master
Choose a base branch
from
Draft

Thumbnail rework #646

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
80840b9
server/images: use mozjpeg/libjpeg-turbo for jpeg conversion
po5 May 18, 2023
64c5eec
server/images: resize images in rgb, explicitly use bicubic
po5 May 18, 2023
4220ae7
server/images: use white background for non-transparent images
po5 May 18, 2023
436a693
client/upload: preview video time that will be used for final thumbnail
po5 May 21, 2023
571cd90
client/upload: remove duplicate id
po5 May 21, 2023
f956d80
client/css: prevent thumbnail dragging, fix ff upload thumbnail outline
po5 May 22, 2023
5877ad9
client/posts: display thumbnail while original image is loading
po5 May 22, 2023
7405593
client/posts: thumbnail as video poster
po5 May 22, 2023
ac303db
client/posts: display first video frame when available
po5 May 22, 2023
2d71ea0
client/upload: fix empty thumbnail size
po5 May 22, 2023
3d27bca
client/upload: restore video previews
po5 May 22, 2023
ad622c4
client/posts: more robust fallbacks on error
po5 May 22, 2023
74eaa22
client, server: rework custom thumbnails
po5 Mar 21, 2024
c843bbb
client/posts: use original thumbnail for video poster
po5 May 25, 2023
41a681b
client/posts: prioritize main image load
po5 May 25, 2023
096b6bc
client/css: fix overextended broken thumbnail
po5 May 26, 2023
a496e89
server/rest: allow files with empty content
po5 Mar 28, 2024
7972c34
client/posts: make discard thumbnail link delete existing custom thumb
po5 Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
client/posts: more robust fallbacks on error 
Fallback cascade: original content, thumbnail, transparency grid
Implementation is very ugly but handles all cases nicely.
  • Loading branch information
@po5
po5 committed Mar 21, 2024
commit ad622c4d998af5370707b0970ffc2d35178f1062
31 changes: 23 additions & 8 deletions client/css/post-content-control.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -17,6 +19,8 @@
position: relative

.resize-listener
background-repeat: no-repeat
background-size: cover
position: absolute
left: 0
right: 0
Expand All @@ -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
24 changes: 16 additions & 8 deletions client/js/controls/post_content_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down