[PR #2087] [MERGED] feat(web): improve and refactor thumbnails #9367

Closed
opened 2026-02-05 14:03:27 +03:00 by OVERLORD · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/immich-app/immich/pull/2087
Author: @michelheusschen
Created: 3/26/2023
Status: Merged
Merged: 3/27/2023
Merged by: @alextran1502

Base: mainHead: feat/web-asset-thumbnail


📝 Commits (2)

  • 5560b9f feat(web): improve and refactor thumbnails
  • 0b4d23c only play live photos on icon hover

📊 Changes

11 files changed (+321 additions, -330 deletions)

View changed files

📝 web/src/api/api.ts (+28 -0)
📝 web/src/lib/components/album-page/thumbnail-selection.svelte (+2 -2)
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte (+19 -0)
web/src/lib/components/assets/thumbnail/thumbnail.svelte (+140 -0)
web/src/lib/components/assets/thumbnail/video-thumbnail.svelte (+88 -0)
📝 web/src/lib/components/photos-page/asset-date-group.svelte (+2 -2)
📝 web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte (+2 -2)
web/src/lib/components/shared-components/immich-thumbnail.svelte (+0 -311)
web/src/lib/utils/time-to-seconds.spec.ts (+24 -0)
web/src/lib/utils/time-to-seconds.ts (+13 -0)
📝 web/src/routes/(user)/explore/+page.svelte (+3 -13)

📄 Description

The following changes are made:

  • Shrink the whole thumbnail when selected, except for the select button
  • Improved animation when selecting thumbnail
  • Allow video playback while the thumbnail is selected
  • Provide methods on the API class for getting file and thumbnail URLs
  • Show error icon when video loading fails
  • Live photos would only play when hovering the top right icon, now plays when hovering anywhere (same as video)

And the following bugs are fixes:

  • Selection border disappears when hovering video thumbnail, fixes #1944
  • Video duration with less than 10 seconds would appear as 0:5 instead of 0:05
  • Video duration shows incorrectly for some duration before this was merged #2058
  • Cancel video buffering when not hovering thumbnail anymore. Potentially fixes #958, might need validation

Currently there's some detection for horizontal and vertical asset orientation and sets the height/width accordingly. But I don't think exif data is actually present in a lot of cases and I'm not certain orientations like Rotate 90 CW are valid. Anyway, that still needs to be looked into further, but that's probably for a future PR.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/immich-app/immich/pull/2087 **Author:** [@michelheusschen](https://github.com/michelheusschen) **Created:** 3/26/2023 **Status:** ✅ Merged **Merged:** 3/27/2023 **Merged by:** [@alextran1502](https://github.com/alextran1502) **Base:** `main` ← **Head:** `feat/web-asset-thumbnail` --- ### 📝 Commits (2) - [`5560b9f`](https://github.com/immich-app/immich/commit/5560b9f457a9967f715a6dace50f811d8ef57cb2) feat(web): improve and refactor thumbnails - [`0b4d23c`](https://github.com/immich-app/immich/commit/0b4d23c21bd533443d783226c8bdc90b03f23c1d) only play live photos on icon hover ### 📊 Changes **11 files changed** (+321 additions, -330 deletions) <details> <summary>View changed files</summary> 📝 `web/src/api/api.ts` (+28 -0) 📝 `web/src/lib/components/album-page/thumbnail-selection.svelte` (+2 -2) ➕ `web/src/lib/components/assets/thumbnail/image-thumbnail.svelte` (+19 -0) ➕ `web/src/lib/components/assets/thumbnail/thumbnail.svelte` (+140 -0) ➕ `web/src/lib/components/assets/thumbnail/video-thumbnail.svelte` (+88 -0) 📝 `web/src/lib/components/photos-page/asset-date-group.svelte` (+2 -2) 📝 `web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte` (+2 -2) ➖ `web/src/lib/components/shared-components/immich-thumbnail.svelte` (+0 -311) ➕ `web/src/lib/utils/time-to-seconds.spec.ts` (+24 -0) ➕ `web/src/lib/utils/time-to-seconds.ts` (+13 -0) 📝 `web/src/routes/(user)/explore/+page.svelte` (+3 -13) </details> ### 📄 Description The following changes are made: - Shrink the whole thumbnail when selected, except for the select button - Improved animation when selecting thumbnail - Allow video playback while the thumbnail is selected - Provide methods on the API class for getting file and thumbnail URLs - Show error icon when video loading fails - Live photos would only play when hovering the top right icon, now plays when hovering anywhere (same as video) And the following bugs are fixes: - Selection border disappears when hovering video thumbnail, fixes #1944 - Video duration with less than 10 seconds would appear as `0:5` instead of `0:05` - Video duration shows incorrectly for some duration before this was merged #2058 - Cancel video buffering when not hovering thumbnail anymore. Potentially fixes #958, might need validation Currently there's some detection for horizontal and vertical asset orientation and sets the height/width accordingly. But I don't think exif data is actually present in a lot of cases and I'm not certain orientations like `Rotate 90 CW` are valid. Anyway, that still needs to be looked into further, but that's probably for a future PR. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2026-02-05 14:03:27 +03:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#9367