fix(web): more refactoring and tweaking of the memory viewer. (#19214)

* Fix fade in for video-native-viewer.

The previous implementation never actually faded in the video element.
Fix this by ensuring the video element is only added to the DOM after
mounting, so Svelte can handle the fade-in transition correctly.

* Refactor asset viewing in memory page.

Split photo and video viewing into separate components to ensure they
work similarly to the assets viewer. The previous implementation faded
out the assets, while the assets-viewer only fades assets in. For
images, add a spinner while waiting for the image to load, before adding
the image to the DOM. For videos, add the video to the DOM after
mounting the component. In both cases, the assets fade in smoothly, like
the regular assets viewer.

* fix: styling

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Dag Stuan 2025-06-17 16:09:34 +02:00 committed by GitHub
parent 749f63e4a0
commit bd70824961
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 209 additions and 107 deletions

View file

@ -62,8 +62,6 @@
document.removeEventListener('scroll', onScroll);
}
});
let buttonClass = $derived(forceDark ? 'hover:text-immich-dark-gray' : undefined);
</script>
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent">
@ -90,7 +88,6 @@
variant="ghost"
icon={backIcon}
size="large"
class={buttonClass}
/>
{/if}
{@render leading?.()}