[feature] Update attachment format, receive + send focalPoint prop + use it on the frontend (#4052)

* [feature] Update attachment format, receive + send `focalPoint` prop + use it on the frontend

* whoops

* boop

* restore function signature of ExtractAttachments
This commit is contained in:
tobi
2025-04-26 15:03:05 +02:00
committed by GitHub
parent 6a6a499333
commit f7323c065a
18 changed files with 617 additions and 72 deletions

View File

@ -29,6 +29,11 @@ import { decode } from "blurhash";
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
// Adjust object-position of any image that has a focal point set.
document.querySelectorAll("img[data-object-position]").forEach(img => {
img.style["object-position"] = img.dataset.objectPosition;
});
// Generate a blurhash canvas for each image for
// each blurhash container and put it in the summary.
Array.from(document.getElementsByClassName('blurhash-container')).forEach(blurhashContainer => {
@ -36,6 +41,7 @@ Array.from(document.getElementsByClassName('blurhash-container')).forEach(blurha
const thumbHeight = blurhashContainer.dataset.blurhashHeight;
const thumbWidth = blurhashContainer.dataset.blurhashWidth;
const thumbAspect = blurhashContainer.dataset.blurhashAspect;
const objectPosition = blurhashContainer.dataset.blurhashObjectPosition;
/*
It's very expensive to draw big canvases
@ -73,6 +79,12 @@ Array.from(document.getElementsByClassName('blurhash-container')).forEach(blurha
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
// Set object-position css property on
// the canvas if it's set on the container.
if (objectPosition) {
canvas.style["object-position"] = objectPosition;
}
// Put the canvas inside the container.
blurhashContainer.appendChild(canvas);
});