feat(NcBlurHash): Add a blur hash component

[susnux]

☑️ Resolves

This allows to include image previews / placeholders in apps.

Currently something similar is used for the files and for the photos app. So this can be used to de-duplicate code.

🖼️ Screenshots

🏚️ Image	🏡 BlurHash

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[susnux]

/backport to next

[Antreesy]

Looks good, can't tell a difference from current in-Talk solution:

[ShGKme]

Not sure if it should be a part of this component, but when used, this element must have exactly the same aspect ratio as the original image. And when the image is loaded, it should be replaced with the image.

Having all that it seems to me, a developer still has to implement manually even more, than this component does.

Could you link places where you use this component? To see if we can reuse more.

Talk: https://github.com/nextcloud/spreed/blob/d4bf99ab8f7d522d4933d16cd7eb8ec388eefeeb/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue#L39

[ShGKme]

If I'm not mistaken, 32x32 is enought for the blurhash. Then we can just use CSS for scaling it.
cc @Antreesy

[Antreesy]

As I remember it, with different dimensions a blurred thumbnail was quite distorted and different from original image, than 32*32 canvas. At least that's what upstream lib is using in demo:
https://blurha.sh/
nextcloud/spreed@0fe0f01

[susnux]

It seems to be a linear interpolation of a gradient, so scaling could lead to pixeled output if the image is rather big (nor sure how smart browsers scale images).

[artonge]

I think using the canvas size is the way to go, as we do not always render square images. As long as the original image ratio is preserved, then it is fine.

[susnux]

Having all that it seems to me, a developer still has to implement manually even more, than this component does.

Not sure as this can also lead to overengineering.
I have updated the docs with a proper example on how to use it.

The user could have different use cases (maybe its not a placeholder but just the preview?), so what I could imagine:
Add source or href prop that is used to preload an image and if ready replace the canvas with an img tag with that href

[susnux]

@ShGKme I pushed a commit implementing that feature

Bildschirmaufnahme_20250120_222940.webm

[susnux]

For all that want to check the preview netlify:
To make assets (the images work) the output dir has to be different than the input, so we cannot build into styleguide.
We need to fix this.

In the meantime you can just append /build on the URL:
https://deploy-preview-6396--nextcloud-vue-components.netlify.app/build/

[artonge]

I think using the canvas size is the way to go, as we do not always render square images. As long as the original image ratio is preserved, then it is fine.

[ShGKme]

I think using the canvas size is the way to go, as we do not always render square images. As long as the original image ratio is preserved, then it is fine.

@artonge but it is not the canvas or image, but blurhash render size

[artonge]

@artonge but it is not the canvas or image, but blurhash render size

Blurhash render size should keep the same ratio as the original image size, no?

[susnux]

but it is not the canvas or image, but blurhash render size

It is, because the blur hash is just (more or less) an encoded gradient.
You need to render it in the correct aspect and one thing that might be browser dependent is how scaling of such data happens. Because if you only render 32px with a gradient and use no interpolation while scaling it will look horrible.

So I think the correct way to go is to render the hash on the canvas size.

[susnux]

BTW Wolt (the author of that algorithm) also does it like this in their react implementation:
https://github.com/woltapp/react-blurhash/blob/master/src/BlurhashCanvas.tsx

[backportbot]

The backport to next failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout next
git pull origin next

# Create the new backport branch
git checkout -b backport/6396/next

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 0ee2517b

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/6396/next

Error: No changes found in backport branch

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

[susnux]

/backport to next

[backportbot]

The backport to next failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout next
git pull origin next

# Create the new backport branch
git checkout -b backport/6396/next

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 0ee2517b

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/6396/next

Error: No changes found in backport branch

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

[ShGKme]

Why? 🤔