mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
feat: search results page (without keyboard actions)
fix: missing responsive calculation in UserPageLayout
This commit is contained in:
midzelis
parent
398755e65e
commit
0ebf75a96f
15 changed files with 570 additions and 262 deletions
|
|
@ -49,7 +49,7 @@
|
|||
<div
|
||||
tabindex="-1"
|
||||
class="relative z-0 grid grid-cols-[--spacing(0)_auto] overflow-hidden sidebar:grid-cols-[--spacing(64)_auto]
|
||||
{hideNavbar ? 'h-dvh' : 'h-[calc(100dvh-var(--navbar-height))]'}
|
||||
{hideNavbar ? 'h-dvh' : 'h-[calc(100dvh-var(--navbar-height))] max-md:h-[calc(100dvh-var(--navbar-height-md))]'}
|
||||
{hideNavbar ? 'pt-(--navbar-height)' : ''}
|
||||
{hideNavbar ? 'max-md:pt-(--navbar-height-md)' : ''}"
|
||||
>
|
||||
|
|
|
|||
91
web/src/lib/components/search/SearchResults.svelte
Normal file
91
web/src/lib/components/search/SearchResults.svelte
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<script lang="ts">
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import SearchResultsAssetViewer from '$lib/components/search/SearchResultsAssetViewer.svelte';
|
||||
|
||||
import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
|
||||
import Photostream from '$lib/components/timeline/Photostream.svelte';
|
||||
import SelectableSegment from '$lib/components/timeline/SelectableSegment.svelte';
|
||||
import StreamWithViewer from '$lib/components/timeline/StreamWithViewer.svelte';
|
||||
import Skeleton from '$lib/elements/Skeleton.svelte';
|
||||
import { SearchResultsManager } from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
|
||||
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
assetInteraction: AssetInteraction;
|
||||
children?: Snippet<[]>;
|
||||
|
||||
stylePaddingHorizontalPx?: number;
|
||||
styleMarginTopPx?: number;
|
||||
searchResultsManager: SearchResultsManager;
|
||||
}
|
||||
|
||||
let { searchResultsManager, assetInteraction, children, stylePaddingHorizontalPx, styleMarginTopPx }: Props =
|
||||
$props();
|
||||
let viewer: Photostream | undefined = $state(undefined);
|
||||
|
||||
const onAfterNavigateComplete = ({ scrollToAssetQueryParam }: { scrollToAssetQueryParam: boolean }) =>
|
||||
viewer?.completeAfterNavigate({ scrollToAssetQueryParam });
|
||||
</script>
|
||||
|
||||
<StreamWithViewer timelineManager={searchResultsManager} {onAfterNavigateComplete}>
|
||||
{#snippet assetViewer({ onViewerClose })}
|
||||
<SearchResultsAssetViewer timelineManager={searchResultsManager} {onViewerClose} />
|
||||
{/snippet}
|
||||
<Photostream
|
||||
bind:this={viewer}
|
||||
{stylePaddingHorizontalPx}
|
||||
{styleMarginTopPx}
|
||||
showScrollbar={true}
|
||||
alwaysShowScrollbar={true}
|
||||
enableRouting={true}
|
||||
timelineManager={searchResultsManager}
|
||||
isShowDeleteConfirmation={true}
|
||||
smallHeaderHeight={{ rowHeight: 100, headerHeight: 2 }}
|
||||
largeHeaderHeight={{ rowHeight: 235, headerHeight: 2 }}
|
||||
>
|
||||
{@render children?.()}
|
||||
|
||||
{#snippet skeleton({ segment })}
|
||||
<Skeleton height={segment.height - segment.timelineManager.headerHeight} />
|
||||
{/snippet}
|
||||
|
||||
{#snippet segment({ segment, onScrollCompensationMonthInDOM })}
|
||||
<SelectableSegment
|
||||
{segment}
|
||||
{onScrollCompensationMonthInDOM}
|
||||
timelineManager={searchResultsManager}
|
||||
{assetInteraction}
|
||||
isSelectionMode={false}
|
||||
singleSelect={false}
|
||||
>
|
||||
{#snippet content({ onAssetOpen, onAssetSelect, onAssetHover })}
|
||||
<AssetLayout
|
||||
photostreamManager={searchResultsManager}
|
||||
viewerAssets={segment.viewerAssets}
|
||||
height={segment.height}
|
||||
width={searchResultsManager.viewportWidth}
|
||||
>
|
||||
{#snippet thumbnail({ asset, position })}
|
||||
{@const isAssetSelectionCandidate = assetInteraction.hasSelectionCandidate(asset.id)}
|
||||
{@const isAssetSelected = assetInteraction.hasSelectedAsset(asset.id)}
|
||||
<Thumbnail
|
||||
showStackedIcon={true}
|
||||
showArchiveIcon={true}
|
||||
{asset}
|
||||
onClick={() => onAssetOpen(asset)}
|
||||
onSelect={() => onAssetSelect(asset)}
|
||||
onMouseEvent={() => onAssetHover(asset)}
|
||||
selected={isAssetSelected}
|
||||
selectionCandidate={isAssetSelectionCandidate}
|
||||
thumbnailWidth={position.width}
|
||||
thumbnailHeight={position.height}
|
||||
/>
|
||||
{/snippet}
|
||||
</AssetLayout>
|
||||
{/snippet}
|
||||
</SelectableSegment>
|
||||
{/snippet}
|
||||
</Photostream>
|
||||
</StreamWithViewer>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import { AppRoute, AssetAction } from '$lib/constants';
|
||||
import { SearchResultsManager } from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
let { asset: viewingAsset, setAssetId, preloadAssets } = assetViewingStore;
|
||||
|
||||
interface Props {
|
||||
timelineManager: SearchResultsManager;
|
||||
|
||||
onViewerClose?: (asset: { id: string }) => Promise<void>;
|
||||
}
|
||||
|
||||
let { timelineManager, onViewerClose = () => Promise.resolve(void 0) }: Props = $props();
|
||||
|
||||
const handleNext = async (): Promise<boolean> => {
|
||||
const next = timelineManager.findNextAsset($viewingAsset.id);
|
||||
if (next) {
|
||||
await navigateToAsset(next);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleRandom = async (): Promise<{ id: string } | undefined> => {
|
||||
const next = timelineManager.findRandomAsset();
|
||||
if (next) {
|
||||
await navigateToAsset(next);
|
||||
return { id: next.id };
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrevious = async (): Promise<boolean> => {
|
||||
const next = timelineManager.findPreviousAsset($viewingAsset.id);
|
||||
if (next) {
|
||||
await navigateToAsset(next);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const navigateToAsset = async (asset?: { id: string }) => {
|
||||
if (asset && asset.id !== $viewingAsset.id) {
|
||||
await setAssetId(asset.id);
|
||||
await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAction = async (action: Action) => {
|
||||
switch (action.type) {
|
||||
case AssetAction.ARCHIVE:
|
||||
case AssetAction.DELETE:
|
||||
case AssetAction.TRASH: {
|
||||
timelineManager.removeAssets([action.asset.id]);
|
||||
if (!(await handlePrevious())) {
|
||||
await goto(AppRoute.PHOTOS);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
||||
<AssetViewer
|
||||
asset={$viewingAsset}
|
||||
preloadAssets={$preloadAssets}
|
||||
onAction={handleAction}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
onRandom={handleRandom}
|
||||
onClose={onViewerClose}
|
||||
/>
|
||||
{/await}
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
[
|
||||
{
|
||||
segment: PhotostreamSegment;
|
||||
stylePaddingHorizontalPx: number;
|
||||
},
|
||||
]
|
||||
>;
|
||||
|
|
@ -37,7 +38,6 @@
|
|||
alwaysShowScrollbar?: boolean;
|
||||
showSkeleton?: boolean;
|
||||
isShowDeleteConfirmation?: boolean;
|
||||
styleMarginRightOverride?: string;
|
||||
|
||||
header?: Snippet<[scrollToFunction: (top: number) => void]>;
|
||||
children?: Snippet;
|
||||
|
|
@ -53,8 +53,9 @@
|
|||
rowHeight: number;
|
||||
headerHeight: number;
|
||||
};
|
||||
styleMarginContentHorizontal?: string;
|
||||
styleMarginTop?: string;
|
||||
stylePaddingHorizontalPx?: number;
|
||||
styleMarginTopPx?: number;
|
||||
styleMarginRightPx?: number;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -64,9 +65,9 @@
|
|||
timelineManager = $bindable(),
|
||||
showSkeleton = $bindable(true),
|
||||
showScrollbar,
|
||||
styleMarginRightOverride,
|
||||
styleMarginContentHorizontal = '0px',
|
||||
styleMarginTop = '0px',
|
||||
styleMarginRightPx = 0,
|
||||
stylePaddingHorizontalPx = 0,
|
||||
styleMarginTopPx = 0,
|
||||
alwaysShowScrollbar,
|
||||
|
||||
isShowDeleteConfirmation = $bindable(false),
|
||||
|
|
@ -221,23 +222,26 @@
|
|||
{ 'm-0': isEmpty },
|
||||
{ 'ms-0': !isEmpty },
|
||||
]}
|
||||
style:height={`calc(100% - ${styleMarginTop})`}
|
||||
style:margin-top={styleMarginTop}
|
||||
style:margin-right={styleMarginRightOverride}
|
||||
style:height={`calc(100% - ${styleMarginTopPx}px)`}
|
||||
style:margin-top={styleMarginTopPx + 'px'}
|
||||
style:margin-right={styleMarginRightPx + 'px'}
|
||||
style:padding-left={stylePaddingHorizontalPx + 'px'}
|
||||
style:padding-right={stylePaddingHorizontalPx + 'px'}
|
||||
style:scrollbar-width={showScrollbar ? 'thin' : 'none'}
|
||||
tabindex="-1"
|
||||
bind:clientHeight={timelineManager.viewportHeight}
|
||||
bind:clientWidth={
|
||||
null, (v: number) => ((timelineManager.viewportWidth = v - stylePaddingHorizontalPx * 2), updateSlidingWindow())
|
||||
}
|
||||
bind:this={element}
|
||||
onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
|
||||
>
|
||||
<section
|
||||
bind:this={timelineElement}
|
||||
id="virtual-timeline"
|
||||
style:margin-left={styleMarginContentHorizontal}
|
||||
style:margin-right={styleMarginContentHorizontal}
|
||||
class:relative={true}
|
||||
class:invisible={showSkeleton}
|
||||
style:height={timelineManager.timelineHeight + 'px'}
|
||||
bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
|
||||
>
|
||||
<section
|
||||
use:resizeObserver={topSectionResizeObserver}
|
||||
|
|
@ -252,7 +256,6 @@
|
|||
{@render empty?.()}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#each timelineManager.months as monthGroup (monthGroup.id)}
|
||||
{@const shouldDisplay = monthGroup.intersecting && monthGroup.isLoaded}
|
||||
{@const absoluteHeight = monthGroup.top}
|
||||
|
|
@ -266,7 +269,7 @@
|
|||
style:width="100%"
|
||||
>
|
||||
{#if !shouldDisplay}
|
||||
{@render skeleton({ segment: monthGroup })}
|
||||
{@render skeleton({ segment: monthGroup, stylePaddingHorizontalPx })}
|
||||
{:else}
|
||||
{@render segment({
|
||||
segment: monthGroup,
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@
|
|||
{timelineManager}
|
||||
{showSkeleton}
|
||||
{isShowDeleteConfirmation}
|
||||
styleMarginRightOverride={scrubberWidth + 'px'}
|
||||
styleMarginRightPx={scrubberWidth}
|
||||
{handleTimelineScroll}
|
||||
{segment}
|
||||
{skeleton}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,10 @@
|
|||
menuItem?: boolean;
|
||||
unarchive?: boolean;
|
||||
manager?: PhotostreamManager;
|
||||
removeOnArchive?: boolean;
|
||||
}
|
||||
|
||||
let { onArchive, menuItem = false, unarchive = false, manager }: Props = $props();
|
||||
let { onArchive, menuItem = false, unarchive = false, manager, removeOnArchive }: Props = $props();
|
||||
|
||||
let text = $derived(unarchive ? $t('unarchive') : $t('to_archive'));
|
||||
let icon = $derived(unarchive ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline);
|
||||
|
|
@ -31,7 +32,12 @@
|
|||
loading = true;
|
||||
const ids = await archiveAssets(assets, visibility as AssetVisibility);
|
||||
if (ids) {
|
||||
manager?.updateAssetOperation(ids, (asset) => ((asset.visibility = visibility), void 0));
|
||||
manager?.updateAssetOperation(ids, (asset) => {
|
||||
asset.visibility = visibility;
|
||||
return {
|
||||
remove: removeOnArchive,
|
||||
};
|
||||
});
|
||||
onArchive?.(ids, visibility ? AssetVisibility.Archive : AssetVisibility.Timeline);
|
||||
clearSelect();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,9 +41,11 @@
|
|||
const assets = [...getOwnedAssets()];
|
||||
const undo = (assets: TimelineAsset[]) => {
|
||||
manager?.upsertAssets(assets);
|
||||
manager?.order(assetOrdering ?? []);
|
||||
onUndoDelete?.(assets);
|
||||
};
|
||||
await deleteAssets(force, onAssetDelete, assets, undo);
|
||||
const assetOrdering = manager?.assets.map((asset) => asset.id);
|
||||
manager?.removeAssets(assets.map((asset) => asset.id));
|
||||
clearSelect();
|
||||
isShowConfirmation = false;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
interface Props {
|
||||
height: number;
|
||||
title?: string;
|
||||
stylePaddingHorizontalPx?: number;
|
||||
}
|
||||
|
||||
let { height = 0, title }: Props = $props();
|
||||
let { height = 0, title, stylePaddingHorizontalPx = 0 }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="overflow-clip" style:height={height + 'px'}>
|
||||
<skeleton class="overflow-clip" style:height={height + 'px'}>
|
||||
{#if title}
|
||||
<div
|
||||
class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
|
||||
|
|
@ -16,11 +17,13 @@
|
|||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="animate-pulse absolute h-full ms-[10px] me-[10px]"
|
||||
style:width="calc(100% - 20px)"
|
||||
class="animate-pulse absolute h-full"
|
||||
style:width="100%"
|
||||
style:padding-left={stylePaddingHorizontalPx + 'px'}
|
||||
style:padding-right={stylePaddingHorizontalPx + 'px'}
|
||||
data-skeleton="true"
|
||||
></div>
|
||||
</div>
|
||||
</skeleton>
|
||||
|
||||
<style>
|
||||
[data-skeleton] {
|
||||
|
|
|
|||
|
|
@ -328,6 +328,10 @@ export abstract class PhotostreamManager {
|
|||
return Promise.resolve(this.retrieveLoadedRange(start, end));
|
||||
}
|
||||
|
||||
get assets() {
|
||||
return this.months.flatMap((segment) => segment.assets).flat();
|
||||
}
|
||||
|
||||
updateAssetOperation(ids: string[], operation: AssetOperation) {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
return this.#runAssetOperation(new Set(ids), operation);
|
||||
|
|
@ -429,4 +433,10 @@ export abstract class PhotostreamManager {
|
|||
}
|
||||
return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
|
||||
}
|
||||
|
||||
/**
|
||||
* Requests that the manager's content be explictly set to the given id ordering.
|
||||
* A particular Photostream manager may ignore this request.
|
||||
*/
|
||||
order(_: string[]) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,13 +66,18 @@ export abstract class PhotostreamSegment {
|
|||
}
|
||||
|
||||
async load(cancelable: boolean): Promise<'DONE' | 'WAITED' | 'CANCELED' | 'LOADED' | 'ERRORED'> {
|
||||
return await this.loader?.execute(async (signal: AbortSignal) => {
|
||||
return await this.loader.execute(async (signal: AbortSignal) => {
|
||||
await this.fetch(signal);
|
||||
}, cancelable);
|
||||
}
|
||||
|
||||
protected abstract fetch(signal: AbortSignal): Promise<void>;
|
||||
|
||||
async reload(cancelable: boolean): Promise<'DONE' | 'WAITED' | 'CANCELED' | 'LOADED' | 'ERRORED'> {
|
||||
await this.loader.reset();
|
||||
return await this.load(cancelable);
|
||||
}
|
||||
|
||||
get assets(): TimelineAsset[] {
|
||||
return this.#assets;
|
||||
}
|
||||
|
|
@ -139,7 +144,7 @@ export abstract class PhotostreamSegment {
|
|||
this.loader?.cancel();
|
||||
}
|
||||
|
||||
layout(_: boolean) {}
|
||||
layout(_?: boolean) {}
|
||||
|
||||
updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
|
||||
this.intersecting = intersecting;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
import { PhotostreamManager } from '$lib/managers/photostream-manager/PhotostreamManager.svelte';
|
||||
import { SearchResultsSegment } from '$lib/managers/searchresults-manager/SearchResultsSegment.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
|
||||
import { isEqual } from 'lodash-es';
|
||||
|
||||
export type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'> & { isVisible: boolean };
|
||||
|
||||
export type Options = {
|
||||
searchTerms: SearchTerms;
|
||||
isSmartSearchEnabled: boolean;
|
||||
};
|
||||
|
||||
export class SearchResultsManager extends PhotostreamManager {
|
||||
#options: Options = {
|
||||
searchTerms: {
|
||||
isVisible: false,
|
||||
},
|
||||
isSmartSearchEnabled: false,
|
||||
};
|
||||
|
||||
#months: SearchResultsSegment[] = $state([]);
|
||||
|
||||
get options() {
|
||||
return this.#options;
|
||||
}
|
||||
|
||||
async updateOptions(options: Options) {
|
||||
if (isEqual(this.#options, options)) {
|
||||
return;
|
||||
}
|
||||
await this.initTask.reset();
|
||||
this.#options = options;
|
||||
await this.init();
|
||||
this.updateViewportGeometry(false);
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.isInitialized = false;
|
||||
await this.initTask.execute(() => {
|
||||
this.#months.splice(0);
|
||||
this.#months.push(new SearchResultsSegment(this, '1', { ...this.#options.searchTerms }));
|
||||
return Promise.resolve();
|
||||
}, true);
|
||||
|
||||
this.updateViewportGeometry(false);
|
||||
}
|
||||
|
||||
get months(): SearchResultsSegment[] {
|
||||
return this.#months;
|
||||
}
|
||||
|
||||
findNextAsset(currentAssetId: string): { id: string } | undefined {
|
||||
for (let segmentIndex = 0; segmentIndex < this.#months.length; segmentIndex++) {
|
||||
const segment = this.#months[segmentIndex];
|
||||
const assetIndex = segment.assets.findIndex((asset) => asset.id === currentAssetId);
|
||||
|
||||
if (assetIndex !== -1) {
|
||||
// Found the current asset
|
||||
if (assetIndex < segment.assets.length - 1) {
|
||||
// Next asset is in the same segment
|
||||
return segment.assets[assetIndex + 1];
|
||||
} else if (segmentIndex < this.#months.length - 1) {
|
||||
// Next asset is in the next segment
|
||||
const nextSegment = this.#months[segmentIndex + 1];
|
||||
if (nextSegment.assets.length > 0) {
|
||||
return nextSegment.assets[0];
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
findPreviousAsset(currentAssetId: string): { id: string } | undefined {
|
||||
for (let segmentIndex = 0; segmentIndex < this.#months.length; segmentIndex++) {
|
||||
const segment = this.#months[segmentIndex];
|
||||
const assetIndex = segment.assets.findIndex((asset) => asset.id === currentAssetId);
|
||||
|
||||
if (assetIndex !== -1) {
|
||||
// Found the current asset
|
||||
if (assetIndex > 0) {
|
||||
// Previous asset is in the same segment
|
||||
return segment.assets[assetIndex - 1];
|
||||
} else if (segmentIndex > 0) {
|
||||
// Previous asset is in the previous segment
|
||||
const previousSegment = this.#months[segmentIndex - 1];
|
||||
if (previousSegment.assets.length > 0) {
|
||||
return previousSegment.assets.at(-1);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
findRandomAsset(): { id: string } | undefined {
|
||||
// Get all loaded assets across all segments
|
||||
const allAssets = this.#months.flatMap((segment) => segment.assets);
|
||||
|
||||
if (allAssets.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// Return a random asset
|
||||
const randomIndex = Math.floor(Math.random() * allAssets.length);
|
||||
return allAssets[randomIndex];
|
||||
}
|
||||
|
||||
protected upsertAssetIntoSegment(asset: TimelineAsset): void {
|
||||
this.#months.at(-1)?.addTimelineAsset(asset);
|
||||
}
|
||||
|
||||
order(ids: string[]) {
|
||||
this.#months.at(-1)?.order(ids);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
import {
|
||||
PhotostreamSegment,
|
||||
type SegmentIdentifier,
|
||||
} from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
|
||||
import type {
|
||||
SearchResultsManager,
|
||||
SearchTerms,
|
||||
} from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
|
||||
import { getJustifiedLayoutFromAssets, getPosition } from '$lib/utils/layout-utils';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import { TUNABLES } from '$lib/utils/tunables';
|
||||
import { searchAssets, searchSmart } from '@immich/sdk';
|
||||
import { isEqual } from 'lodash-es';
|
||||
const {
|
||||
TIMELINE: { INTERSECTION_EXPAND_BOTTOM },
|
||||
} = TUNABLES;
|
||||
export class SearchResultsSegment extends PhotostreamSegment {
|
||||
#manager: SearchResultsManager;
|
||||
#identifier: SegmentIdentifier;
|
||||
#id: string;
|
||||
#searchTerms: SearchTerms;
|
||||
#currentPage: string | null = null;
|
||||
#nextPage: string | null = null;
|
||||
|
||||
#viewerAssets: ViewerAsset[] = $state([]);
|
||||
|
||||
constructor(manager: SearchResultsManager, currentPage: string, searchTerms: SearchTerms) {
|
||||
super();
|
||||
this.#currentPage = currentPage;
|
||||
this.#manager = manager;
|
||||
this.#searchTerms = searchTerms;
|
||||
this.#id = JSON.stringify(searchTerms);
|
||||
this.#identifier = {
|
||||
matches(segment: SearchResultsSegment) {
|
||||
return isEqual(segment.#searchTerms, searchTerms);
|
||||
},
|
||||
};
|
||||
this.initialCount = searchTerms.size || 100;
|
||||
}
|
||||
|
||||
get timelineManager(): SearchResultsManager {
|
||||
return this.#manager;
|
||||
}
|
||||
|
||||
get identifier(): SegmentIdentifier {
|
||||
return this.#identifier;
|
||||
}
|
||||
|
||||
get id(): string {
|
||||
return this.#id;
|
||||
}
|
||||
|
||||
async fetch(): Promise<void> {
|
||||
if (this.#currentPage === null) {
|
||||
return;
|
||||
}
|
||||
const searchDto: SearchTerms = {
|
||||
...this.#searchTerms,
|
||||
withExif: true,
|
||||
isVisible: true,
|
||||
page: +this.#currentPage,
|
||||
};
|
||||
|
||||
const { assets } =
|
||||
('query' in searchDto || 'queryAssetId' in searchDto) && this.#manager.options.isSmartSearchEnabled
|
||||
? await searchSmart({ smartSearchDto: searchDto })
|
||||
: await searchAssets({ metadataSearchDto: searchDto });
|
||||
this.#nextPage = assets.nextPage;
|
||||
|
||||
this.#viewerAssets.push(...assets.items.map((asset) => new ViewerAsset(this, toTimelineAsset(asset))));
|
||||
this.layout();
|
||||
}
|
||||
|
||||
layout(): void {
|
||||
const timelineAssets = this.#viewerAssets.map((viewerAsset) => viewerAsset.asset);
|
||||
const layoutOptions = this.timelineManager.createLayoutOptions();
|
||||
const geometry = getJustifiedLayoutFromAssets(timelineAssets, layoutOptions);
|
||||
|
||||
this.height = timelineAssets.length === 0 ? 0 : geometry.containerHeight + this.timelineManager.headerHeight;
|
||||
for (let i = 0; i < this.#viewerAssets.length; i++) {
|
||||
const position = getPosition(geometry, i);
|
||||
this.#viewerAssets[i].position = position;
|
||||
}
|
||||
}
|
||||
|
||||
get viewerAssets(): ViewerAsset[] {
|
||||
return this.#viewerAssets;
|
||||
}
|
||||
|
||||
findAssetAbsolutePosition(assetId: string) {
|
||||
const viewerAsset = this.#viewerAssets.find((viewAsset) => viewAsset.id === assetId);
|
||||
if (viewerAsset) {
|
||||
if (!viewerAsset.position) {
|
||||
console.warn('No position for asset');
|
||||
return -1;
|
||||
}
|
||||
return this.top + viewerAsset.position.top + this.timelineManager.headerHeight;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
loadNextPage() {
|
||||
if (this.#nextPage !== null) {
|
||||
if (this.#currentPage === this.#nextPage) {
|
||||
// there's an active load
|
||||
return;
|
||||
}
|
||||
this.#currentPage = this.#nextPage;
|
||||
void this.reload(false);
|
||||
}
|
||||
}
|
||||
|
||||
updateIntersection({ intersecting, actuallyIntersecting }: { intersecting: boolean; actuallyIntersecting: boolean }) {
|
||||
super.updateIntersection({ intersecting, actuallyIntersecting });
|
||||
const loadNextPage =
|
||||
this.timelineManager.timelineHeight - this.timelineManager.visibleWindow.bottom < INTERSECTION_EXPAND_BOTTOM;
|
||||
if (loadNextPage) {
|
||||
this.loadNextPage();
|
||||
}
|
||||
}
|
||||
|
||||
addTimelineAsset(asset: TimelineAsset) {
|
||||
this.#viewerAssets.push(new ViewerAsset(this, asset));
|
||||
this.layout();
|
||||
}
|
||||
|
||||
order(ids: string[]) {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
const idMap = new Map(ids.map((id, index) => [id, index]));
|
||||
this.#viewerAssets.sort((a, b) => {
|
||||
const indexA = idMap.get(a.id) ?? Number.MAX_SAFE_INTEGER;
|
||||
const indexB = idMap.get(b.id) ?? Number.MAX_SAFE_INTEGER;
|
||||
return indexA - indexB;
|
||||
});
|
||||
this.layout();
|
||||
}
|
||||
}
|
||||
|
|
@ -306,7 +306,7 @@ export class MonthGroup extends PhotostreamSegment {
|
|||
this.loader?.cancel();
|
||||
}
|
||||
|
||||
layout(noDefer: boolean) {
|
||||
layout(noDefer?: boolean) {
|
||||
layoutMonthGroup(this.timelineManager, this, noDefer);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import type { PhotostreamSegment } from '$lib/managers/photostream-manager/PhotostreamSegment.svelte';
|
||||
import type { CommonPosition } from '$lib/utils/layout-utils';
|
||||
|
||||
import type { DayGroup } from './day-group.svelte';
|
||||
|
|
@ -5,15 +6,20 @@ import { calculateViewerAssetIntersecting } from './internal/intersection-suppor
|
|||
import type { TimelineAsset } from './types';
|
||||
|
||||
export class ViewerAsset {
|
||||
readonly #group: DayGroup;
|
||||
readonly #group: DayGroup | PhotostreamSegment;
|
||||
|
||||
intersecting = $derived.by(() => {
|
||||
if (!this.position) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const store = this.#group.monthGroup.timelineManager;
|
||||
const positionTop = this.#group.absoluteDayGroupTop + this.position.top;
|
||||
if ((this.#group as DayGroup).sortAssets) {
|
||||
const dayGroup = this.#group as DayGroup;
|
||||
const store = dayGroup.monthGroup.timelineManager;
|
||||
const positionTop = dayGroup.absoluteDayGroupTop + this.position.top;
|
||||
return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
|
||||
}
|
||||
const store = (this.#group as PhotostreamSegment).timelineManager;
|
||||
const positionTop = this.position.top + (this.#group as PhotostreamSegment).top;
|
||||
|
||||
return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
|
||||
});
|
||||
|
|
@ -22,7 +28,7 @@ export class ViewerAsset {
|
|||
asset: TimelineAsset = <TimelineAsset>$state();
|
||||
id: string = $derived(this.asset.id);
|
||||
|
||||
constructor(group: DayGroup, asset: TimelineAsset) {
|
||||
constructor(group: DayGroup | PhotostreamSegment, asset: TimelineAsset) {
|
||||
this.#group = group;
|
||||
this.asset = asset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { afterNavigate, goto } from '$app/navigation';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { shortcut } from '$lib/actions/shortcut';
|
||||
import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
|
||||
import SearchResults from '$lib/components/search/SearchResults.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
|
||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
|
||||
import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
|
||||
import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
|
||||
import AssetJobActions from '$lib/components/timeline/actions/AssetJobActions.svelte';
|
||||
import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
|
||||
import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
|
||||
import ChangeDescriptionAction from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
|
||||
import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
|
||||
import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
|
||||
import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
|
||||
|
|
@ -20,66 +19,39 @@
|
|||
import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
|
||||
import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
|
||||
|
||||
import { AppRoute, QueryParameter } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import { SearchResultsManager } from '$lib/managers/searchresults-manager/SearchResultsManager.svelte';
|
||||
import type { Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { lang, locale } from '$lib/stores/preferences.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
import { cancelMultiselect } from '$lib/utils/asset-utils';
|
||||
import { parseUtcDate } from '$lib/utils/date-time';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { isAlbumsRoute, isPeopleRoute } from '$lib/utils/navigation';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import {
|
||||
type AlbumResponseDto,
|
||||
getPerson,
|
||||
getTagById,
|
||||
type MetadataSearchDto,
|
||||
searchAssets,
|
||||
searchSmart,
|
||||
type SmartSearchDto,
|
||||
} from '@immich/sdk';
|
||||
import { Icon, IconButton, LoadingSpinner } from '@immich/ui';
|
||||
import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
|
||||
import { tick } from 'svelte';
|
||||
import { getPerson, getTagById, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import { mdiArrowLeft, mdiDotsVertical, mdiPlus, mdiSelectAll } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
const viewport: Viewport = $state({ width: 0, height: 0 });
|
||||
let searchResultsElement: HTMLElement | undefined = $state();
|
||||
|
||||
// The GalleryViewer pushes it's own history state, which causes weird
|
||||
// behavior for history.back(). To prevent that we store the previous page
|
||||
// manually and navigate back to that.
|
||||
let previousRoute = $state(AppRoute.EXPLORE as string);
|
||||
|
||||
let nextPage = $state(1);
|
||||
let searchResultAlbums: AlbumResponseDto[] = $state([]);
|
||||
let searchResultAssets: TimelineAsset[] = $state([]);
|
||||
let isLoading = $state(true);
|
||||
let scrollY = $state(0);
|
||||
let scrollYHistory = 0;
|
||||
|
||||
const assetInteraction = new AssetInteraction();
|
||||
|
||||
type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'>;
|
||||
let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
|
||||
let smartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
|
||||
let isSmartSearchEnabled = $derived($featureFlags.loaded && $featureFlags.smartSearch);
|
||||
let terms = $derived(searchQuery ? JSON.parse(searchQuery) : {});
|
||||
|
||||
$effect(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
terms;
|
||||
setTimeout(() => {
|
||||
handlePromiseError(onSearchQueryUpdate());
|
||||
});
|
||||
});
|
||||
const searchResultsManager = new SearchResultsManager();
|
||||
|
||||
let timelineManager = new TimelineManager();
|
||||
$effect(() => {
|
||||
void searchResultsManager.updateOptions({ isSmartSearchEnabled, searchTerms: terms });
|
||||
});
|
||||
|
||||
const onEscape = () => {
|
||||
if ($showAssetViewer) {
|
||||
|
|
@ -90,91 +62,16 @@
|
|||
assetInteraction.selectedAssets = [];
|
||||
return;
|
||||
}
|
||||
handlePromiseError(goto(previousRoute));
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
if (scrollY) {
|
||||
scrollYHistory = scrollY;
|
||||
}
|
||||
});
|
||||
|
||||
afterNavigate(({ from }) => {
|
||||
// Prevent setting previousRoute to the current page.
|
||||
if (from?.url && from.route.id !== page.route.id) {
|
||||
previousRoute = from.url.href;
|
||||
}
|
||||
const route = from?.route?.id;
|
||||
|
||||
if (isPeopleRoute(route)) {
|
||||
previousRoute = AppRoute.PHOTOS;
|
||||
}
|
||||
|
||||
if (isAlbumsRoute(route)) {
|
||||
previousRoute = AppRoute.EXPLORE;
|
||||
}
|
||||
|
||||
tick()
|
||||
.then(() => {
|
||||
window.scrollTo(0, scrollYHistory);
|
||||
})
|
||||
.catch(() => {
|
||||
// do nothing
|
||||
});
|
||||
});
|
||||
|
||||
const onAssetDelete = (assetIds: string[]) => {
|
||||
const assetIdSet = new Set(assetIds);
|
||||
searchResultAssets = searchResultAssets.filter((asset: TimelineAsset) => !assetIdSet.has(asset.id));
|
||||
};
|
||||
|
||||
const handleSetVisibility = (assetIds: string[]) => {
|
||||
timelineManager.removeAssets(assetIds);
|
||||
searchResultsManager.removeAssets(assetIds);
|
||||
assetInteraction.clearMultiselect();
|
||||
onAssetDelete(assetIds);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
assetInteraction.selectAssets(searchResultAssets);
|
||||
};
|
||||
|
||||
async function onSearchQueryUpdate() {
|
||||
nextPage = 1;
|
||||
searchResultAssets = [];
|
||||
searchResultAlbums = [];
|
||||
await loadNextPage(true);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line svelte/valid-prop-names-in-kit-pages
|
||||
export const loadNextPage = async (force?: boolean) => {
|
||||
if (!nextPage || (isLoading && !force)) {
|
||||
return;
|
||||
}
|
||||
isLoading = true;
|
||||
|
||||
const searchDto: SearchTerms = {
|
||||
page: nextPage,
|
||||
withExif: true,
|
||||
isVisible: true,
|
||||
language: $lang,
|
||||
...terms,
|
||||
};
|
||||
|
||||
try {
|
||||
const { albums, assets } =
|
||||
('query' in searchDto || 'queryAssetId' in searchDto) && smartSearchEnabled
|
||||
? await searchSmart({ smartSearchDto: searchDto })
|
||||
: await searchAssets({ metadataSearchDto: searchDto });
|
||||
|
||||
searchResultAlbums.push(...albums.items);
|
||||
searchResultAssets.push(...assets.items.map((asset) => toTimelineAsset(asset)));
|
||||
|
||||
nextPage = Number(assets.nextPage) || 0;
|
||||
} catch (error) {
|
||||
handleError(error, $t('loading_search_results_failed'));
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
const allAssets = searchResultsManager.months.flatMap((segment) => segment.assets);
|
||||
assetInteraction.selectAssets(allAssets);
|
||||
};
|
||||
|
||||
function getHumanReadableDate(dateString: string) {
|
||||
|
|
@ -248,8 +145,7 @@
|
|||
cancelMultiselect(assetInteraction);
|
||||
|
||||
if (terms.isNotInAlbum.toString() == 'true') {
|
||||
const assetIdSet = new Set(assetIds);
|
||||
searchResultAssets = searchResultAssets.filter((asset) => !assetIdSet.has(asset.id));
|
||||
searchResultsManager.removeAssets(assetIds);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -258,12 +154,11 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onEscape }} />
|
||||
|
||||
<section>
|
||||
{#if assetInteraction.selectionActive}
|
||||
<div class="fixed top-0 start-0 w-full">
|
||||
<div class="fixed z-1 top-0 start-0 w-full">
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => cancelMultiselect(assetInteraction)}
|
||||
|
|
@ -281,34 +176,29 @@
|
|||
<AddToAlbum {onAddToAlbum} />
|
||||
<AddToAlbum shared {onAddToAlbum} />
|
||||
</ButtonContextMenu>
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
onFavorite={(assetIds, isFavorite) => {
|
||||
for (const assetId of assetIds) {
|
||||
const asset = searchResultAssets.find((searchAsset) => searchAsset.id === assetId);
|
||||
if (asset) {
|
||||
asset.isFavorite = isFavorite;
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={searchResultsManager} />
|
||||
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
<ChangeDate menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
removeOnArchive={true}
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
manager={searchResultsManager}
|
||||
/>
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
<DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
|
||||
<DeleteAssets menuItem manager={searchResultsManager} />
|
||||
<hr />
|
||||
<AssetJobActions />
|
||||
</ButtonContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="fixed top-0 start-0 w-full">
|
||||
<div class="fixed z-1 top-0 start-0 w-full">
|
||||
<ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
|
||||
<div class="absolute bg-light"></div>
|
||||
<div class="w-full flex-1 ps-4">
|
||||
|
|
@ -319,92 +209,55 @@
|
|||
{/if}
|
||||
</section>
|
||||
|
||||
{#if terms}
|
||||
<section
|
||||
id="search-chips"
|
||||
class="mt-24 text-center w-full flex gap-5 place-content-center place-items-center flex-wrap px-24"
|
||||
>
|
||||
{#each getObjectKeys(terms) as searchKey (searchKey)}
|
||||
{@const value = terms[searchKey]}
|
||||
<div class="flex place-content-center place-items-center items-stretch text-xs">
|
||||
<div
|
||||
class="flex items-center justify-center bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
|
||||
{value === true ? 'rounded-full' : 'rounded-s-full'}"
|
||||
>
|
||||
{getHumanReadableSearchKey(searchKey as keyof SearchTerms)}
|
||||
</div>
|
||||
|
||||
{#if value !== true}
|
||||
<div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
|
||||
{#if (searchKey === 'takenAfter' || searchKey === 'takenBefore') && typeof value === 'string'}
|
||||
{getHumanReadableDate(value)}
|
||||
{:else if searchKey === 'personIds' && Array.isArray(value)}
|
||||
{#await getPersonName(value) then personName}
|
||||
{personName}
|
||||
{/await}
|
||||
{:else if searchKey === 'tagIds' && (Array.isArray(value) || value === null)}
|
||||
{#await getTagNames(value) then tagNames}
|
||||
{tagNames}
|
||||
{/await}
|
||||
{:else if value === null || value === ''}
|
||||
{$t('unknown')}
|
||||
{:else}
|
||||
{value}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section
|
||||
class="mb-12 bg-immich-bg dark:bg-immich-dark-bg m-4 max-h-screen"
|
||||
class="absolute top-0 right-0 left-0 bottom-0 mb-0 bg-immich-bg dark:bg-immich-dark-bg max-h-screen"
|
||||
bind:clientHeight={viewport.height}
|
||||
bind:clientWidth={viewport.width}
|
||||
bind:this={searchResultsElement}
|
||||
>
|
||||
{#if searchResultAlbums.length > 0}
|
||||
<section>
|
||||
<div class="uppercase ms-6 text-4xl font-medium text-black/70 dark:text-white/80">{$t('albums')}</div>
|
||||
<AlbumCardGroup albums={searchResultAlbums} showDateRange showItemCount />
|
||||
<SearchResults {searchResultsManager} {assetInteraction} stylePaddingHorizontalPx={16}>
|
||||
{#if terms}
|
||||
<section
|
||||
id="search-chips"
|
||||
class="md:mt-[94px] mt-[72px] mb-4 text-center w-full flex gap-5 place-content-center place-items-center flex-wrap"
|
||||
>
|
||||
{#each getObjectKeys(terms) as searchKey (searchKey)}
|
||||
{@const value = terms[searchKey]}
|
||||
<div class="flex place-content-center place-items-center items-stretch text-xs">
|
||||
<div
|
||||
class="flex items-center justify-center bg-immich-primary py-2 px-4 text-white dark:text-black dark:bg-immich-dark-primary
|
||||
{value === true ? 'rounded-full' : 'rounded-s-full'}"
|
||||
>
|
||||
{getHumanReadableSearchKey(searchKey as keyof SearchTerms)}
|
||||
</div>
|
||||
|
||||
<div class="uppercase m-6 text-4xl font-medium text-black/70 dark:text-white/80">
|
||||
{$t('photos_and_videos')}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
<section id="search-content">
|
||||
{#if searchResultAssets.length > 0}
|
||||
<GalleryViewer
|
||||
assets={searchResultAssets}
|
||||
{assetInteraction}
|
||||
onIntersected={loadNextPage}
|
||||
showArchiveIcon={true}
|
||||
{viewport}
|
||||
onReload={onSearchQueryUpdate}
|
||||
slidingWindowOffset={searchResultsElement.offsetTop}
|
||||
/>
|
||||
{:else if !isLoading}
|
||||
<div class="flex min-h-[calc(66vh-11rem)] w-full place-content-center items-center dark:text-white">
|
||||
<div class="flex flex-col content-center items-center text-center">
|
||||
<Icon icon={mdiImageOffOutline} size="3.5em" />
|
||||
<p class="mt-5 text-3xl font-medium">{$t('no_results')}</p>
|
||||
<p class="text-base font-normal">{$t('no_results_description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{#if value !== true}
|
||||
<div class="bg-gray-300 py-2 px-4 dark:bg-gray-800 dark:text-white rounded-e-full">
|
||||
{#if (searchKey === 'takenAfter' || searchKey === 'takenBefore') && typeof value === 'string'}
|
||||
{getHumanReadableDate(value)}
|
||||
{:else if searchKey === 'personIds' && Array.isArray(value)}
|
||||
{#await getPersonName(value) then personName}
|
||||
{personName}
|
||||
{/await}
|
||||
{:else if searchKey === 'tagIds' && (Array.isArray(value) || value === null)}
|
||||
{#await getTagNames(value) then tagNames}
|
||||
{tagNames}
|
||||
{/await}
|
||||
{:else if value === null || value === ''}
|
||||
{$t('unknown')}
|
||||
{:else}
|
||||
{value}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<div class="flex justify-center py-16 items-center">
|
||||
<LoadingSpinner size="giant" />
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</SearchResults>
|
||||
|
||||
<section>
|
||||
{#if assetInteraction.selectionActive}
|
||||
<div class="fixed top-0 start-0 w-full">
|
||||
<div class="fixed z-1 top-0 start-0 w-full">
|
||||
<AssetSelectControlBar
|
||||
assets={assetInteraction.selectedAssets}
|
||||
clearSelect={() => cancelMultiselect(assetInteraction)}
|
||||
|
|
@ -422,38 +275,33 @@
|
|||
<AddToAlbum {onAddToAlbum} />
|
||||
<AddToAlbum shared {onAddToAlbum} />
|
||||
</ButtonContextMenu>
|
||||
<FavoriteAction
|
||||
removeFavorite={assetInteraction.isAllFavorite}
|
||||
onFavorite={(ids, isFavorite) => {
|
||||
for (const id of ids) {
|
||||
const asset = searchResultAssets.find((asset) => asset.id === id);
|
||||
if (asset) {
|
||||
asset.isFavorite = isFavorite;
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<FavoriteAction removeFavorite={assetInteraction.isAllFavorite} manager={searchResultsManager} />
|
||||
|
||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||
<DownloadAction menuItem />
|
||||
<ChangeDate menuItem />
|
||||
<ChangeDescription menuItem />
|
||||
<ChangeDescriptionAction menuItem />
|
||||
<ChangeLocation menuItem />
|
||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
|
||||
<ArchiveAction
|
||||
menuItem
|
||||
removeOnArchive={true}
|
||||
unarchive={assetInteraction.isAllArchived}
|
||||
manager={searchResultsManager}
|
||||
/>
|
||||
{#if assetInteraction.isAllUserOwned}
|
||||
<SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
|
||||
{/if}
|
||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||
<TagAction menuItem />
|
||||
{/if}
|
||||
<DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
|
||||
<DeleteAssets menuItem manager={searchResultsManager} />
|
||||
<hr />
|
||||
<AssetJobActions />
|
||||
</ButtonContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="fixed top-0 start-0 w-full">
|
||||
<div class="fixed z-1 top-0 start-0 w-full">
|
||||
<ControlAppBar onClose={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
|
||||
<div class="absolute bg-light"></div>
|
||||
<div class="w-full flex-1 ps-4">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue