Use a blurhash for blurred story backgrounds

[hackerbirds]

Contributor checklist:

• My contribution is not related to translations.
• My commits are in nice logical chunks with good commit messages
• My changes are rebased on the latest main branch
• A npm run ready run passes successfully (more about tests here)
• My changes are ready to be shipped to users

Description

Stories render very slowly on some devices. I believe this is due to the use of backdrop-filter: blur(90px) used in the background, which is CPU intensive. This might affect Linux particularly, because nearly all Windows/macOS users would have GPU acceleration, which likely helps render blur faster: https://community.signalusers.org/t/stories-extremely-slow-on-linux-desktop/60588

I have replaced the current CSS background/blur mechanism with a Blurhash, which renders a lot more efficiently, at least on my laptop (I have no good way to show this objectively). On my end, stories now play at full framerate instead of 4-5 FPS thanks to the Blurhash. This does mean the blur effect looks significantly different, overall looking better for images/videos that don't have a uniform background (though that is subjective)

Before (CSS blur)

After (blurhash)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hackerbirds]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

don't

[ayumi-signal]

Appreciate you looking into this and sorry we didn't get to it earlier. We're planning to enable hardware acceleration by default on Linux soon (in main now and will be in the next beta) which might fix the story playback FPS issues at least.

[hackerbirds]

that's good news! haven't tested yet, though i don't think this would solve the issue on my end considering my distro doesn't support GPU acceleration.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed due to inactivity.