New Feature: Low Quality Image Placeholder

[aSouchereau]

Implements backend for #2258

Adds low quality image placeholder to be displayed while album covers are downloading. Improves perceived loading times.

Approach:

• Adds new size variant of type 7 called 'placeholder'
• Adds PlaceholderEncoder class to compress image to usable size, convert to base64 and save to db
• Adds new standalone pipe to process the placeholder
• Adds step in legacy code path to process the placeholder
• Adds command to handle placeholders that exist but have not been encoded yet
• Adds diagnostic info check for determining number of missing and unencoded placeholders
• Modifies SizeVariant getUrlAttribute to use data URI instead of app url for placeholders
• Modifies Thumb to include generated placeholder

Notes for implementing the frontend

• requires either a filter: blur(); or backdrop-filter: blur();. I've found that between 8-15px looks best.

[aSouchereau]

Apologies, this took a lot longer than I expected. Life gets in the way sometimes, I'm sure you can relate...

[ildyria]

Hi, amazing piece of work!

Life gets in the way sometimes, I'm sure you can relate...

Yep, currently feeling like I have been hit truck. Just got Covid.

None the less, I don't know if you have been following Lychee lately, but we are close to releasing a v6 which will drop all the Livewire crap for a Vue front-end. Can I trouble you later for the implementation of the placeholder for the albums in that case? :)

[aSouchereau]

Can I trouble you later for the implementation of the placeholder for the albums in that case? :)

Yes of course, would be happy to help. You can ping me here, and I should get to it.

Get well soon!

[ildyria]

@aSouchereau I rebased your branch on top of v6 (future) so that it will be easier to merge, all the Livewire thing is gone. I also updated PhotoResource / SizeVariantsResource to provide the required data.

I think there is still php artisan typescript:transform that needs to be run in order to generate the required typescripts definition for the front-end, but in theory all the data are ready to be used in the v6 front-end. :)

It could also be interesting to integrate with the Maintenance page. See:

• CreateThumbsRequest.php
• MaintenanceGenSizevariants.vue
• Maintenance.vue

:)

For the filter, I guess https://tailwindcss.com/docs/blur will do the job, most likely blur-md

[aSouchereau]

Sounds good, I agree with adding the maintenance page button. I will have some extra free time in the next week to get started

[ildyria]

Crap. I did not expect this to happen. >_<

[ildyria]

@aSouchereau I am sorry. To fix this, I squashed all the commits into one branch and rebased on top of master. https://github.com/LycheeOrg/Lychee/tree/album-cover-placeholder

Feel free to take it over from there.