Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(server): crop and rotate #11700

Open
wants to merge 27 commits into
base: main
Choose a base branch
from

Conversation

zdimension
Copy link
Contributor

This PR adds support for using the Orientation EXIF field from the sidecar (which can be modified without touching the original file).

It also adds two actions to the web viewer that "demo" that feature:
image

Issues:

  • the web viewer displays images in two ways: as thumbnails, and through the zooming component. The zooming component doesn't seem to take the EXIF orientation in account, so the image displays in its "raw" orientation when one zooms.
    • people on the Discord server have suggested to also render the "edited" version of the original image, in original resolution. This would mean images with EXIF orientation would have an original resolution "thumbnail" render that would be used for viewing. This would make it easy to display images without having to constantly process the rotation client-side.
  • after changing the rotation, the thumbnail needs to be refreshed. This is currently done by triggering a thumbnail regeneration task and refreshing the img tag's source field after 500 milliseconds.

@zdimension zdimension changed the title Use orientation information from sidecar and add quick rotate actions to web viewer feat(server): Use orientation information from sidecar and add quick rotate actions to web viewer Aug 11, 2024
server/src/dtos/asset.dto.ts Outdated Show resolved Hide resolved
server/src/services/media.service.ts Outdated Show resolved Hide resolved
e2e/test-assets Outdated
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert this change

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems like on main this points to an outdated commit: e2e/test-assets points to https://github.com/immich-app/test-assets/tree/39f25a96f13f743c96cdb7c6d93b031fcb61b83c but the commit hash has changed when the PR was merged

Comment on lines 44 to 43
// force the image to refresh the thumbnail
const oldSrc = new URL($photoViewer!.src);
oldSrc.searchParams.set('t', Date.now().toString());
$photoViewer!.src = oldSrc.toString();
Copy link
Contributor

@michelheusschen michelheusschen Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We rely on the checksum field to detect changes in the thumbnail and bypass the cache. Refreshing based on the time might work in this component, but it will cause caching issues everywhere else. Mobile might have a similar caching issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that it's not pretty; but @jrasm91 told me on Discord the ideal way would through a web socket event but that since we don't currently have one for thumbnail generation, refreshing like that was a good enough hack until it's done.

How would you do it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm personally fine just having a workaround here and then we'll hopefully have websocket events soon

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see how a websocket event will solve caching issues in other components/pages. We include the checksum for thumbnail requests, but the checksum doesn't change in this case so the cached thumbnail is still used.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should use a counter/nonce instead of the checksum

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry now I get your point. You're absolutely right, yes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so, uh, sorry, but what should I change here?

Copy link
Member

@danieldietzler danieldietzler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks very good to me

@zdimension zdimension changed the title feat(server): Use orientation information from sidecar and add quick rotate actions to web viewer feat(server): Use orientation and crop information from sidecar and add quick rotate actions to web viewer Aug 14, 2024
@jrasm91 jrasm91 changed the title feat(server): Use orientation and crop information from sidecar and add quick rotate actions to web viewer feat(server): crop and rotate Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants