You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-07-04 05:50:38 +02:00
fix(web): asset selection on memories page is broken (#16759)
* 16712: Proper intialisation of the memory store to avoid loading up duplicate object refs of the same asset. * 16712: Add auth to memory mapping so isFavorite is actually return correctly from the server. * 16712: Move logic that belongs in the store into the store. * 16712: Cleanup. * 16712: Fix init behaviour. * 16712: Add comment. * 16712: Make method private. * 16712: Fix import. * 16712: Fix format. * 16712: Cleaner if/else and fix typo. * fix: icon size mismatch * 16712: Fixed up state machine managing memory playback: * Updated to `Tween` (`tweened` was deprecated) * Removed `resetPromise`. Setting progressController to 0 had the same effect, so not really sure why it was there? * Removed the many duplicate places the `handleAction` method was called. Now we just called it on `afterNavigate` as well as when `galleryInView` or `$isViewing` state changes. * 16712: Add aria tag. * 16712: Fix memory player duplicate invocation bugs. Now we should only call 'reset' and 'play' once, after navigate/page load. This should hopefully fix all the various bugs around playback. * 16712: Cleanup * 16712: Cleanup * 16712: Cleanup * 16712: Cleanup --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Andreas
GitHub
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { page } from '$app/state';
|
||||
import { intersectionObserver } from '$lib/actions/intersection-observer';
|
||||
import { resizeObserver } from '$lib/actions/resize-observer';
|
||||
import { shortcuts } from '$lib/actions/shortcut';
|
||||
@ -27,21 +27,13 @@
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { type Viewport } from '$lib/stores/assets-store.svelte';
|
||||
import { loadMemories, memoryStore } from '$lib/stores/memory.store';
|
||||
import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
|
||||
import { locale, videoViewerMuted } from '$lib/stores/preferences.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { getAssetPlaybackUrl, getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
|
||||
import { cancelMultiselect } from '$lib/utils/asset-utils';
|
||||
import { fromLocalDateTime } from '$lib/utils/timeline-util';
|
||||
import {
|
||||
AssetMediaSize,
|
||||
AssetTypeEnum,
|
||||
deleteMemory,
|
||||
removeMemoryAssets,
|
||||
updateMemory,
|
||||
type AssetResponseDto,
|
||||
type MemoryResponseDto,
|
||||
} from '@immich/sdk';
|
||||
import { AssetMediaSize, type AssetResponseDto, AssetTypeEnum } from '@immich/sdk';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import {
|
||||
mdiCardsOutline,
|
||||
@ -58,105 +50,50 @@
|
||||
mdiPlay,
|
||||
mdiPlus,
|
||||
mdiSelectAll,
|
||||
mdiVolumeOff,
|
||||
mdiVolumeHigh,
|
||||
mdiVolumeOff,
|
||||
} from '@mdi/js';
|
||||
import type { NavigationTarget } from '@sveltejs/kit';
|
||||
import type { NavigationTarget, Page } from '@sveltejs/kit';
|
||||
import { DateTime } from 'luxon';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { tweened } from 'svelte/motion';
|
||||
import { derived as storeDerived } from 'svelte/store';
|
||||
import { Tween } from 'svelte/motion';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
type MemoryIndex = {
|
||||
memoryIndex: number;
|
||||
assetIndex: number;
|
||||
};
|
||||
|
||||
type MemoryAsset = MemoryIndex & {
|
||||
memory: MemoryResponseDto;
|
||||
asset: AssetResponseDto;
|
||||
previousMemory?: MemoryResponseDto;
|
||||
previous?: MemoryAsset;
|
||||
next?: MemoryAsset;
|
||||
nextMemory?: MemoryResponseDto;
|
||||
};
|
||||
|
||||
let memoryGallery: HTMLElement | undefined = $state();
|
||||
let memoryWrapper: HTMLElement | undefined = $state();
|
||||
let galleryInView = $state(false);
|
||||
let galleryFirstLoad = $state(true);
|
||||
let playerInitialized = $state(false);
|
||||
let paused = $state(false);
|
||||
let current = $state<MemoryAsset | undefined>(undefined);
|
||||
let isSaved = $derived(current?.memory.isSaved);
|
||||
let resetPromise = $state(Promise.resolve());
|
||||
|
||||
const { isViewing } = assetViewingStore;
|
||||
const viewport: Viewport = $state({ width: 0, height: 0 });
|
||||
const assetInteraction = new AssetInteraction();
|
||||
let progressBarController = tweened<number>(0, {
|
||||
duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
|
||||
});
|
||||
let progressBarController: Tween<number> | undefined = $state(undefined);
|
||||
let videoPlayer: HTMLVideoElement | undefined = $state();
|
||||
const memories = storeDerived(memoryStore, (memories) => {
|
||||
memories = memories ?? [];
|
||||
const memoryAssets: MemoryAsset[] = [];
|
||||
let previous: MemoryAsset | undefined;
|
||||
for (const [memoryIndex, memory] of memories.entries()) {
|
||||
for (const [assetIndex, asset] of memory.assets.entries()) {
|
||||
const current = {
|
||||
memory,
|
||||
memoryIndex,
|
||||
previousMemory: memories[memoryIndex - 1],
|
||||
nextMemory: memories[memoryIndex + 1],
|
||||
asset,
|
||||
assetIndex,
|
||||
previous,
|
||||
};
|
||||
|
||||
memoryAssets.push(current);
|
||||
|
||||
if (previous) {
|
||||
previous.next = current;
|
||||
}
|
||||
|
||||
previous = current;
|
||||
}
|
||||
}
|
||||
|
||||
return memoryAssets;
|
||||
});
|
||||
|
||||
const loadFromParams = (memories: MemoryAsset[], page: typeof $page | NavigationTarget | null) => {
|
||||
const assetId = page?.params?.assetId ?? page?.url.searchParams.get(QueryParameter.ID) ?? undefined;
|
||||
handlePromiseError(handleAction($isViewing ? 'pause' : 'reset'));
|
||||
return memories.find((memory) => memory.asset.id === assetId) ?? memories[0];
|
||||
};
|
||||
const asHref = (asset: AssetResponseDto) => `?${QueryParameter.ID}=${asset.id}`;
|
||||
const handleNavigate = async (asset?: AssetResponseDto) => {
|
||||
if ($isViewing) {
|
||||
return asset;
|
||||
}
|
||||
|
||||
await handleAction('reset');
|
||||
if (!asset) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Adjust the progress bar duration to the video length
|
||||
setProgressDuration(asset);
|
||||
|
||||
await goto(asHref(asset));
|
||||
};
|
||||
const setProgressDuration = (asset: AssetResponseDto) => {
|
||||
if (asset.type === AssetTypeEnum.Video) {
|
||||
const timeParts = asset.duration.split(':').map(Number);
|
||||
const durationInMilliseconds = (timeParts[0] * 3600 + timeParts[1] * 60 + timeParts[2]) * 1000;
|
||||
progressBarController = tweened<number>(0, {
|
||||
progressBarController = new Tween<number>(0, {
|
||||
duration: (from: number, to: number) => (to ? durationInMilliseconds * (to - from) : 0),
|
||||
});
|
||||
} else {
|
||||
progressBarController = tweened<number>(0, {
|
||||
progressBarController = new Tween<number>(0, {
|
||||
duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
|
||||
});
|
||||
}
|
||||
@ -167,159 +104,187 @@
|
||||
const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
|
||||
const handleEscape = async () => goto(AppRoute.PHOTOS);
|
||||
const handleSelectAll = () => assetInteraction.selectAssets(current?.memory.assets || []);
|
||||
const handleAction = async (action: 'reset' | 'pause' | 'play') => {
|
||||
const handleAction = async (callingContext: string, action: 'reset' | 'pause' | 'play') => {
|
||||
// leaving these log statements here as comments. Very useful to figure out what's going on during dev!
|
||||
// console.log(`handleAction[${callingContext}] called with: ${action}`);
|
||||
if (!progressBarController) {
|
||||
// console.log(`handleAction[${callingContext}] NOT READY!`);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (action) {
|
||||
case 'play': {
|
||||
paused = false;
|
||||
await videoPlayer?.play();
|
||||
await progressBarController.set(1);
|
||||
try {
|
||||
paused = false;
|
||||
await videoPlayer?.play();
|
||||
await progressBarController.set(1);
|
||||
} catch (error) {
|
||||
// this may happen if browser blocks auto-play of the video on first page load. This can either be a setting
|
||||
// or just defaut in certain browsers on page load without any DOM interaction by user.
|
||||
console.error(`handleAction[${callingContext}] videoPlayer play problem: ${error}`);
|
||||
paused = true;
|
||||
await progressBarController.set(0);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'pause': {
|
||||
paused = true;
|
||||
videoPlayer?.pause();
|
||||
await progressBarController.set($progressBarController);
|
||||
await progressBarController.set(progressBarController.current);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'reset': {
|
||||
paused = false;
|
||||
videoPlayer?.pause();
|
||||
resetPromise = progressBarController.set(0);
|
||||
await progressBarController.set(0);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleProgress = async (progress: number) => {
|
||||
if (progress === 0 && !paused) {
|
||||
await handleAction('play');
|
||||
if (!progressBarController) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (progress === 1) {
|
||||
await progressBarController.set(0);
|
||||
await (current?.next ? handleNextAsset() : handleAction('pause'));
|
||||
if (progress === 1 && !paused) {
|
||||
await (current?.next ? handleNextAsset() : handlePromiseError(handleAction('handleProgressLast', 'pause')));
|
||||
}
|
||||
};
|
||||
const handleUpdate = () => {
|
||||
|
||||
const toProgressPercentage = (index: number) => {
|
||||
if (!progressBarController || current?.assetIndex === undefined) {
|
||||
return 0;
|
||||
}
|
||||
if (index < current?.assetIndex) {
|
||||
return 100;
|
||||
}
|
||||
if (index > current?.assetIndex) {
|
||||
return 0;
|
||||
}
|
||||
return progressBarController.current * 100;
|
||||
};
|
||||
|
||||
const handleDeleteOrArchiveAssets = (ids: string[]) => {
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
// eslint-disable-next-line no-self-assign
|
||||
current.memory.assets = current.memory.assets;
|
||||
memoryStore.hideAssetsFromMemory(ids);
|
||||
init(page);
|
||||
};
|
||||
|
||||
const handleRemove = (ids: string[]) => {
|
||||
const handleDeleteMemoryAsset = async () => {
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
const idSet = new Set(ids);
|
||||
current.memory.assets = current.memory.assets.filter((asset) => !idSet.has(asset.id));
|
||||
init();
|
||||
|
||||
await memoryStore.deleteAssetFromMemory(current.asset.id);
|
||||
init(page);
|
||||
};
|
||||
const handleDeleteMemory = async () => {
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
|
||||
await memoryStore.deleteMemory(current.memory.id);
|
||||
notificationController.show({ message: $t('removed_memory'), type: NotificationType.Info });
|
||||
init(page);
|
||||
};
|
||||
const handleSaveMemory = async () => {
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newSavedState = !current.memory.isSaved;
|
||||
await memoryStore.updateMemorySaved(current.memory.id, newSavedState);
|
||||
notificationController.show({
|
||||
message: newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'),
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
init(page);
|
||||
};
|
||||
const handleGalleryScrollsIntoView = () => {
|
||||
galleryInView = true;
|
||||
handlePromiseError(handleAction('galleryInView', 'pause'));
|
||||
};
|
||||
const handleGalleryScrollsOutOfView = () => {
|
||||
galleryInView = false;
|
||||
// only call play after the first page load. When page first loads the gallery will not be visible
|
||||
// and calling play here will result in duplicate invocation.
|
||||
if (!galleryFirstLoad) {
|
||||
handlePromiseError(handleAction('galleryOutOfView', 'play'));
|
||||
}
|
||||
galleryFirstLoad = false;
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
$memoryStore = $memoryStore.filter((memory) => memory.assets.length > 0);
|
||||
if ($memoryStore.length === 0) {
|
||||
const loadFromParams = (page: Page | NavigationTarget | null) => {
|
||||
const assetId = page?.params?.assetId ?? page?.url.searchParams.get(QueryParameter.ID) ?? undefined;
|
||||
return memoryStore.getMemoryAsset(assetId);
|
||||
};
|
||||
|
||||
const init = (target: Page | NavigationTarget | null) => {
|
||||
if (memoryStore.memories.length === 0) {
|
||||
return handlePromiseError(goto(AppRoute.PHOTOS));
|
||||
}
|
||||
|
||||
current = loadFromParams($memories, $page);
|
||||
|
||||
current = loadFromParams(target);
|
||||
// Adjust the progress bar duration to the video length
|
||||
setProgressDuration(current.asset);
|
||||
if (current) {
|
||||
setProgressDuration(current.asset);
|
||||
}
|
||||
playerInitialized = false;
|
||||
};
|
||||
|
||||
const handleDeleteMemoryAsset = async (current?: MemoryAsset) => {
|
||||
if (!current) {
|
||||
const initPlayer = () => {
|
||||
const isVideoAssetButPlayerHasNotLoadedYet = current && current.asset.type === AssetTypeEnum.Video && !videoPlayer;
|
||||
if (playerInitialized || isVideoAssetButPlayerHasNotLoadedYet) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (current.memory.assets.length === 1) {
|
||||
return handleDeleteMemory(current);
|
||||
}
|
||||
|
||||
if (current.previous) {
|
||||
current.previous.next = current.next;
|
||||
}
|
||||
if (current.next) {
|
||||
current.next.previous = current.previous;
|
||||
}
|
||||
|
||||
current.memory.assets = current.memory.assets.filter((asset) => asset.id !== current.asset.id);
|
||||
|
||||
// eslint-disable-next-line no-self-assign
|
||||
$memoryStore = $memoryStore;
|
||||
|
||||
await removeMemoryAssets({ id: current.memory.id, bulkIdsDto: { ids: [current.asset.id] } });
|
||||
};
|
||||
|
||||
const handleDeleteMemory = async (current?: MemoryAsset) => {
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
|
||||
await deleteMemory({ id: current.memory.id });
|
||||
|
||||
notificationController.show({ message: $t('removed_memory'), type: NotificationType.Info });
|
||||
|
||||
await loadMemories();
|
||||
init();
|
||||
};
|
||||
|
||||
const handleSaveMemory = async (current?: MemoryAsset) => {
|
||||
if (!current) {
|
||||
return;
|
||||
}
|
||||
|
||||
current.memory.isSaved = !current.memory.isSaved;
|
||||
|
||||
await updateMemory({
|
||||
id: current.memory.id,
|
||||
memoryUpdateDto: {
|
||||
isSaved: current.memory.isSaved,
|
||||
},
|
||||
});
|
||||
|
||||
notificationController.show({
|
||||
message: current.memory.isSaved ? $t('added_to_favorites') : $t('removed_from_favorites'),
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (!$memoryStore) {
|
||||
await loadMemories();
|
||||
}
|
||||
|
||||
init();
|
||||
});
|
||||
|
||||
afterNavigate(({ from, to }) => {
|
||||
let target = null;
|
||||
if (to?.params?.assetId) {
|
||||
target = to;
|
||||
} else if (from?.params?.assetId) {
|
||||
target = from;
|
||||
if ($isViewing) {
|
||||
handlePromiseError(handleAction('initPlayer[AssetViewOpen]', 'pause'));
|
||||
} else {
|
||||
target = $page;
|
||||
handlePromiseError(handleAction('initPlayer[AssetViewClosed]', 'reset'));
|
||||
handlePromiseError(handleAction('initPlayer[AssetViewClosed]', 'play'));
|
||||
}
|
||||
playerInitialized = true;
|
||||
};
|
||||
|
||||
current = loadFromParams($memories, target);
|
||||
afterNavigate(({ from, to, type }) => {
|
||||
if (type === 'enter') {
|
||||
// afterNavigate triggers twice on first page load (once when mounted with 'enter' and then a second time
|
||||
// with the actual 'goto' to URL).
|
||||
return;
|
||||
}
|
||||
memoryStore.initialize().then(
|
||||
() => {
|
||||
let target = null;
|
||||
if (to?.params?.assetId) {
|
||||
target = to;
|
||||
} else if (from?.params?.assetId) {
|
||||
target = from;
|
||||
} else {
|
||||
target = page;
|
||||
}
|
||||
|
||||
init(target);
|
||||
initPlayer();
|
||||
},
|
||||
(error) => {
|
||||
console.error(`Error loading memories: ${error}`);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
handlePromiseError(handleProgress($progressBarController));
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
handlePromiseError(handleAction(galleryInView ? 'pause' : 'play'));
|
||||
if (progressBarController) {
|
||||
handlePromiseError(handleProgress(progressBarController.current));
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (videoPlayer) {
|
||||
videoPlayer.muted = $videoViewerMuted;
|
||||
initPlayer();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -350,24 +315,24 @@
|
||||
<AddToAlbum shared />
|
||||
</ButtonContextMenu>
|
||||
|
||||
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} onFavorite={handleUpdate} />
|
||||
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} />
|
||||
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
<ChangeDate menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={handleRemove} />
|
||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={handleDeleteOrArchiveAssets} />
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
<DeleteAssets menuItem onAssetDelete={handleRemove} />
|
||||
<DeleteAssets menuItem onAssetDelete={handleDeleteOrArchiveAssets} />
|
||||
</ButtonContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section id="memory-viewer" class="w-full bg-immich-dark-gray" bind:this={memoryWrapper}>
|
||||
{#if current && current.memory.assets.length > 0}
|
||||
{#if current}
|
||||
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} forceDark multiRow>
|
||||
{#snippet leading()}
|
||||
{#if current}
|
||||
@ -381,22 +346,14 @@
|
||||
<CircleIconButton
|
||||
title={paused ? $t('play_memories') : $t('pause_memories')}
|
||||
icon={paused ? mdiPlay : mdiPause}
|
||||
onclick={() => handleAction(paused ? 'play' : 'pause')}
|
||||
onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
|
||||
class="hover:text-black"
|
||||
/>
|
||||
|
||||
{#each current.memory.assets as asset, index (asset.id)}
|
||||
<a class="relative w-full py-2" href={asHref(asset)}>
|
||||
<a class="relative w-full py-2" href={asHref(asset)} aria-label={$t('view')}>
|
||||
<span class="absolute left-0 h-[2px] w-full bg-gray-500"></span>
|
||||
{#await resetPromise}
|
||||
<span class="absolute left-0 h-[2px] bg-white" style:width={`${index < current.assetIndex ? 100 : 0}%`}
|
||||
></span>
|
||||
{:then}
|
||||
<span
|
||||
class="absolute left-0 h-[2px] bg-white"
|
||||
style:width={`${index < current.assetIndex ? 100 : index > current.assetIndex ? 0 : $progressBarController * 100}%`}
|
||||
></span>
|
||||
{/await}
|
||||
<span class="absolute left-0 h-[2px] bg-white" style:width={`${toProgressPercentage(index)}%`}></span>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
@ -474,7 +431,7 @@
|
||||
<div class="relative h-full w-full rounded-2xl bg-black">
|
||||
{#key current.asset.id}
|
||||
<div transition:fade class="h-full w-full">
|
||||
{#if current.asset.type == AssetTypeEnum.Video}
|
||||
{#if current.asset.type === AssetTypeEnum.Video}
|
||||
<video
|
||||
bind:this={videoPlayer}
|
||||
autoplay
|
||||
@ -510,8 +467,8 @@
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
|
||||
onclick={() => handleSaveMemory(current)}
|
||||
class="text-white dark:text-white"
|
||||
onclick={() => handleSaveMemory()}
|
||||
class="text-white dark:text-white w-[48px] h-[48px]"
|
||||
/>
|
||||
<!-- <IconButton
|
||||
icon={mdiShareVariantOutline}
|
||||
@ -525,16 +482,16 @@
|
||||
icon={mdiDotsVertical}
|
||||
padding="3"
|
||||
title={$t('menu')}
|
||||
onclick={() => handleAction('pause')}
|
||||
onclick={() => handlePromiseError(handleAction('ContextMenuClick', 'pause'))}
|
||||
direction="left"
|
||||
size="20"
|
||||
align="bottom-right"
|
||||
class="text-white dark:text-white"
|
||||
>
|
||||
<MenuOption onClick={() => handleDeleteMemory(current)} text="Remove memory" icon={mdiCardsOutline} />
|
||||
<MenuOption onClick={() => handleDeleteMemory()} text={$t('remove_memory')} icon={mdiCardsOutline} />
|
||||
<MenuOption
|
||||
onClick={() => handleDeleteMemoryAsset(current)}
|
||||
text="Remove photo from this memory"
|
||||
onClick={() => handleDeleteMemoryAsset()}
|
||||
text={$t('remove_photo_from_memory')}
|
||||
icon={mdiImageMinusOutline}
|
||||
/>
|
||||
<!-- shortcut={{ key: 'l', shift: shared }} -->
|
||||
@ -642,8 +599,8 @@
|
||||
<div
|
||||
id="gallery-memory"
|
||||
use:intersectionObserver={{
|
||||
onIntersect: () => (galleryInView = true),
|
||||
onSeparate: () => (galleryInView = false),
|
||||
onIntersect: handleGalleryScrollsIntoView,
|
||||
onSeparate: handleGalleryScrollsOutOfView,
|
||||
bottom: '-200px',
|
||||
}}
|
||||
use:resizeObserver={({ height, width }) => ((viewport.height = height), (viewport.width = width))}
|
||||
|
||||
Reference in New Issue
Block a user