diff --git a/e2e/src/ui/specs/timeline/utils.ts b/e2e/src/ui/specs/timeline/utils.ts index b7003295cf..e67229d3c9 100644 --- a/e2e/src/ui/specs/timeline/utils.ts +++ b/e2e/src/ui/specs/timeline/utils.ts @@ -62,7 +62,7 @@ export const thumbnailUtils = { return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"]`); }, selectButton(page: Page, assetId: string) { - return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"] button`); + return page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"] button[role="checkbox"]`); }, selectedAsset(page: Page) { return page.locator('[data-thumbnail-focus-container][data-selected]'); diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte index f7b9020d98..3413e912b0 100644 --- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte +++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte @@ -19,6 +19,7 @@ mdiCheckCircle, mdiFileGifBox, mdiHeart, + mdiMagnifyPlusOutline, mdiMotionPauseOutline, mdiMotionPlayOutline, mdiRotate360, @@ -46,6 +47,7 @@ dimmed?: boolean; albumUsers?: UserResponseDto[]; onClick?: (asset: TimelineAsset) => void; + onPreview?: (asset: TimelineAsset) => void; onSelect?: (asset: TimelineAsset) => void; onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void; } @@ -65,6 +67,7 @@ showStackedIcon = true, albumUsers = [], onClick = undefined, + onPreview = undefined, onSelect = undefined, onMouseEvent = undefined, imageClass = '', @@ -442,6 +445,24 @@ {/if} + + {#if mouseOver && onPreview} + + {/if} +
handleSelectAssets(currentAsset)} + onPreview={assetInteraction.selectionActive ? () => void navigateToAsset(asset) : undefined} onMouseEvent={() => assetMouseEventHandler(currentAsset)} {showArchiveIcon} asset={currentAsset} diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte index a4d135b1bd..1f7e20e375 100644 --- a/web/src/lib/components/timeline/Timeline.svelte +++ b/web/src/lib/components/timeline/Timeline.svelte @@ -698,6 +698,9 @@ void onSelectAssets(asset); }} onMouseEvent={() => handleSelectAssetCandidates(asset)} + onPreview={isSelectionMode || assetInteraction.selectionActive + ? (asset) => void navigate({ targetRoute: 'current', assetId: asset.id }) + : undefined} selected={isAssetSelected} selectionCandidate={isAssetSelectionCandidate} disabled={isAssetDisabled}