[WIP] Implement image rotation in frontend

[tognee]

Currently just a PoC need help making it work reliably.

Implements changes made in LibrePhotos/librephotos#885 (Issue LibrePhotos/librephotos#856)

Currently it just calls the API endpoint to rotate the image. Ideally it would let the user rotate the image as much as they want and then when closing the LightBox or switching to another image it would send the rotation change to the backend (only when it got actually rotated)

Also after the backend call it should update the cached image and the grid view somehow, so that the user experience is seamless.

I tried updating the cache in my PoC but it doesn't seem to work.

Any help is appreciated!

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[derneuere]

You could add a save popup, when rotating. Would make it obvious when it gets actually saved.

If we go that route, then you need to add the rotating function to the LightBox dependency.

To do that, you have to manipulate the css class of this img tag. The rotation would be done in CSS

https://github.com/LibrePhotos/react-image-lightbox/blob/646cac0998f2479af8e3b4ec241f4ff498d8a33a/src/react-image-lightbox.js#L1413-L1425

You could maybe overwrite the addImage function to add the class for example with a call like I did here: https://github.com/LibrePhotos/librephotos-frontend/blob/bb1dd60f7db3e3d47e6599dd14a42a2e78082a64/src/components/lightbox/LightBox.tsx#LL115C40-L115C40

There is probably also a way to do that with a CSS selector, which just selects the in the LightBox, which could be easier.