mirror of
https://github.com/immich-app/immich
synced 2025-10-17 18:19:27 +00:00
refactor: new timeline component
- Create new timeline component (extracted from asset-gird) without removing old code - Add timeline/, timeline/actions/, timeline/base-components/, and timeline/internal-components/ directories - Copy needed components (delete-asset-dialog, scrubber, skeleton) to new locations - Add new timeline components (base-timeline, base-timeline-viewer, timeline-month, etc.) - Update timeline-util.ts with new functions (findMonthAtScrollPosition, formatGroupTitleFull) - Add asset-viewer-actions and asset-viewer-and-actions components This allows the timeline to exist alongside the current AssetGrid component.
This commit is contained in:
midzelis
parent
e42886b767
commit
3e9f713d81
20 changed files with 1940 additions and 1001 deletions
|
|
@ -1353,6 +1353,8 @@
|
|||
"my_albums": "My albums",
|
||||
"name": "Name",
|
||||
"name_or_nickname": "Name or nickname",
|
||||
"navigate": "Navigate",
|
||||
"navigate_to_time": "Navigate to Time",
|
||||
"network_requirement_photos_upload": "Use cellular data to backup photos",
|
||||
"network_requirement_videos_upload": "Use cellular data to backup videos",
|
||||
"network_requirements": "Network Requirements",
|
||||
|
|
|
|||
162
web/src/lib/components/photos-page/asset-viewer-actions.svelte
Normal file
162
web/src/lib/components/photos-page/asset-viewer-actions.svelte
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<script lang="ts">
|
||||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
|
||||
|
||||
let { asset: viewingAsset, gridScrollTarget, mutex } = assetViewingStore;
|
||||
|
||||
interface Props {
|
||||
timelineManager: TimelineManager;
|
||||
showSkeleton: boolean;
|
||||
removeAction?:
|
||||
| AssetAction.UNARCHIVE
|
||||
| AssetAction.ARCHIVE
|
||||
| AssetAction.FAVORITE
|
||||
| AssetAction.UNFAVORITE
|
||||
| AssetAction.SET_VISIBILITY_TIMELINE;
|
||||
handlePreAction?: (action: Action) => Promise<void>;
|
||||
handleAction?: (action: Action) => void;
|
||||
handleNext?: () => Promise<boolean>;
|
||||
handlePrevious?: () => Promise<boolean>;
|
||||
handleRandom?: () => Promise<AssetResponseDto | undefined>;
|
||||
handleClose?: (asset: { id: string }) => Promise<void>;
|
||||
}
|
||||
|
||||
let {
|
||||
timelineManager = $bindable(),
|
||||
showSkeleton = $bindable(false),
|
||||
removeAction,
|
||||
handlePreAction = $bindable(),
|
||||
handleAction = $bindable(),
|
||||
handleNext = $bindable(),
|
||||
handlePrevious = $bindable(),
|
||||
handleRandom = $bindable(),
|
||||
handleClose = $bindable(),
|
||||
}: Props = $props();
|
||||
|
||||
handlePrevious = async () => {
|
||||
const release = await mutex.acquire();
|
||||
const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
|
||||
|
||||
if (laterAsset) {
|
||||
const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
|
||||
const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
|
||||
assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
|
||||
await navigate({ targetRoute: 'current', assetId: laterAsset.id });
|
||||
}
|
||||
|
||||
release();
|
||||
return !!laterAsset;
|
||||
};
|
||||
|
||||
handleNext = async () => {
|
||||
const release = await mutex.acquire();
|
||||
const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
|
||||
|
||||
if (earlierAsset) {
|
||||
const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
|
||||
const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
|
||||
assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
|
||||
await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
|
||||
}
|
||||
|
||||
release();
|
||||
return !!earlierAsset;
|
||||
};
|
||||
|
||||
handleRandom = async () => {
|
||||
const randomAsset = await timelineManager.getRandomAsset();
|
||||
|
||||
if (randomAsset) {
|
||||
const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
|
||||
assetViewingStore.setAsset(asset);
|
||||
await navigate({ targetRoute: 'current', assetId: randomAsset.id });
|
||||
return asset;
|
||||
}
|
||||
};
|
||||
|
||||
handleClose = async (asset: { id: string }) => {
|
||||
assetViewingStore.showAssetViewer(false);
|
||||
showSkeleton = true;
|
||||
$gridScrollTarget = { at: asset.id };
|
||||
await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
|
||||
};
|
||||
|
||||
handlePreAction = async (action: Action) => {
|
||||
switch (action.type) {
|
||||
case removeAction:
|
||||
case AssetAction.TRASH:
|
||||
case AssetAction.RESTORE:
|
||||
case AssetAction.DELETE:
|
||||
case AssetAction.ARCHIVE:
|
||||
case AssetAction.SET_VISIBILITY_LOCKED:
|
||||
case AssetAction.SET_VISIBILITY_TIMELINE: {
|
||||
// find the next asset to show or close the viewer
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
(await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
|
||||
|
||||
// delete after find the next one
|
||||
timelineManager.removeAssets([action.asset.id]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
handleAction = (action: Action) => {
|
||||
switch (action.type) {
|
||||
case AssetAction.ARCHIVE:
|
||||
case AssetAction.UNARCHIVE:
|
||||
case AssetAction.FAVORITE:
|
||||
case AssetAction.UNFAVORITE: {
|
||||
timelineManager.updateAssets([action.asset]);
|
||||
break;
|
||||
}
|
||||
|
||||
case AssetAction.ADD: {
|
||||
timelineManager.addAssets([action.asset]);
|
||||
break;
|
||||
}
|
||||
|
||||
case AssetAction.UNSTACK: {
|
||||
updateUnstackedAssetInTimeline(timelineManager, action.assets);
|
||||
break;
|
||||
}
|
||||
case AssetAction.REMOVE_ASSET_FROM_STACK: {
|
||||
timelineManager.addAssets([toTimelineAsset(action.asset)]);
|
||||
if (action.stack) {
|
||||
//Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
|
||||
updateUnstackedAssetInTimeline(
|
||||
timelineManager,
|
||||
action.stack.assets.map((asset) => toTimelineAsset(asset)),
|
||||
);
|
||||
updateStackedAssetInTimeline(timelineManager, {
|
||||
stack: action.stack,
|
||||
toDeleteIds: action.stack.assets
|
||||
.filter((asset) => asset.id !== action.stack?.primaryAssetId)
|
||||
.map((asset) => asset.id),
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case AssetAction.SET_STACK_PRIMARY_ASSET: {
|
||||
//Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
|
||||
updateUnstackedAssetInTimeline(
|
||||
timelineManager,
|
||||
action.stack.assets.map((asset) => toTimelineAsset(asset)),
|
||||
);
|
||||
updateStackedAssetInTimeline(timelineManager, {
|
||||
stack: action.stack,
|
||||
toDeleteIds: action.stack.assets
|
||||
.filter((asset) => asset.id !== action.stack.primaryAssetId)
|
||||
.map((asset) => asset.id),
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="ts">
|
||||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import AssetViewerActions from '$lib/components/photos-page/asset-viewer-actions.svelte';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
|
||||
|
||||
let { asset: viewingAsset, preloadAssets } = assetViewingStore;
|
||||
|
||||
interface Props {
|
||||
timelineManager: TimelineManager;
|
||||
showSkeleton: boolean;
|
||||
removeAction?:
|
||||
| AssetAction.UNARCHIVE
|
||||
| AssetAction.ARCHIVE
|
||||
| AssetAction.FAVORITE
|
||||
| AssetAction.UNFAVORITE
|
||||
| AssetAction.SET_VISIBILITY_TIMELINE;
|
||||
withStacked?: boolean;
|
||||
isShared?: boolean;
|
||||
album?: AlbumResponseDto | null;
|
||||
person?: PersonResponseDto | null;
|
||||
isShowDeleteConfirmation?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
timelineManager = $bindable(),
|
||||
showSkeleton = $bindable(false),
|
||||
removeAction,
|
||||
withStacked = false,
|
||||
isShared = false,
|
||||
album = null,
|
||||
person = null,
|
||||
isShowDeleteConfirmation = $bindable(false),
|
||||
}: Props = $props();
|
||||
|
||||
let handlePreAction = <(action: Action) => Promise<void>>$state();
|
||||
let handleAction = <(action: Action) => void>$state();
|
||||
let handleNext = <() => Promise<boolean>>$state();
|
||||
let handlePrevious = <() => Promise<boolean>>$state();
|
||||
let handleRandom = <() => Promise<AssetResponseDto | undefined>>$state();
|
||||
let handleClose = <(asset: { id: string }) => Promise<void>>$state();
|
||||
</script>
|
||||
|
||||
<AssetViewerActions
|
||||
{timelineManager}
|
||||
{removeAction}
|
||||
bind:showSkeleton
|
||||
bind:handlePreAction
|
||||
bind:handleAction
|
||||
bind:handleNext
|
||||
bind:handlePrevious
|
||||
bind:handleRandom
|
||||
bind:handleClose
|
||||
></AssetViewerActions>
|
||||
|
||||
{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
||||
<AssetViewer
|
||||
{withStacked}
|
||||
asset={$viewingAsset}
|
||||
preloadAssets={$preloadAssets}
|
||||
{isShared}
|
||||
{album}
|
||||
{person}
|
||||
preAction={handlePreAction}
|
||||
onAction={handleAction}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
onRandom={handleRandom}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
{/await}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
|
||||
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
|
||||
import { getTabbable } from '$lib/utils/focus-util';
|
||||
import { type ScrubberListener } from '$lib/utils/timeline-util';
|
||||
import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
|
||||
import { Icon } from '@immich/ui';
|
||||
import { mdiPlay } from '@mdi/js';
|
||||
import { clamp } from 'lodash-es';
|
||||
|
|
@ -11,18 +11,31 @@
|
|||
import { fade, fly } from 'svelte/transition';
|
||||
|
||||
interface Props {
|
||||
/** Offset from the top of the timeline (e.g., for headers) */
|
||||
timelineTopOffset?: number;
|
||||
/** Offset from the bottom of the timeline (e.g., for footers) */
|
||||
timelineBottomOffset?: number;
|
||||
/** Total height of the scrubber component */
|
||||
height?: number;
|
||||
/** Timeline manager instance that controls the timeline state */
|
||||
timelineManager: TimelineManager;
|
||||
scrubOverallPercent?: number;
|
||||
scrubberMonthPercent?: number;
|
||||
scrubberMonth?: { year: number; month: number };
|
||||
leadout?: boolean;
|
||||
/** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
|
||||
timelineScrollPercent?: number;
|
||||
/** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
|
||||
viewportTopMonthScrollPercent?: number;
|
||||
/** The year/month of the timeline month at the top of the viewport */
|
||||
viewportTopMonth?: TimelineYearMonth;
|
||||
/** Indicates whether the viewport is currently in the lead-out section (after all months) */
|
||||
isInLeadOutSection?: boolean;
|
||||
/** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
|
||||
scrubberWidth?: number;
|
||||
/** Callback fired when user interacts with the scrubber to navigate */
|
||||
onScrub?: ScrubberListener;
|
||||
/** Callback fired when keyboard events occur on the scrubber */
|
||||
onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
|
||||
/** Callback fired when scrubbing starts */
|
||||
startScrub?: ScrubberListener;
|
||||
/** Callback fired when scrubbing stops */
|
||||
stopScrub?: ScrubberListener;
|
||||
}
|
||||
|
||||
|
|
@ -31,10 +44,10 @@
|
|||
timelineBottomOffset = 0,
|
||||
height = 0,
|
||||
timelineManager,
|
||||
scrubOverallPercent = 0,
|
||||
scrubberMonthPercent = 0,
|
||||
scrubberMonth = undefined,
|
||||
leadout = false,
|
||||
timelineScrollPercent = 0,
|
||||
viewportTopMonthScrollPercent = 0,
|
||||
viewportTopMonth = undefined,
|
||||
isInLeadOutSection = false,
|
||||
onScrub = undefined,
|
||||
onScrubKeyDown = undefined,
|
||||
startScrub = undefined,
|
||||
|
|
@ -100,7 +113,7 @@
|
|||
offset += scrubberMonthPercent * relativeBottomOffset;
|
||||
}
|
||||
return offset;
|
||||
} else if (leadout) {
|
||||
} else if (isInLeadOutSection) {
|
||||
let offset = relativeTopOffset;
|
||||
for (const segment of segments) {
|
||||
offset += segment.height;
|
||||
|
|
@ -111,7 +124,9 @@
|
|||
return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
|
||||
}
|
||||
};
|
||||
let scrollY = $derived(toScrollFromMonthGroupPercentage(scrubberMonth, scrubberMonthPercent, scrubOverallPercent));
|
||||
let scrollY = $derived(
|
||||
toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
|
||||
);
|
||||
let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
|
||||
let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
|
||||
let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
|
||||
|
|
@ -295,12 +310,24 @@
|
|||
|
||||
const scrollPercent = toTimelineY(hoverY);
|
||||
if (wasDragging === false && isDragging) {
|
||||
void startScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
|
||||
void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
|
||||
void startScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
void onScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
}
|
||||
|
||||
if (wasDragging && !isDragging) {
|
||||
void stopScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
|
||||
void stopScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -308,7 +335,11 @@
|
|||
return;
|
||||
}
|
||||
|
||||
void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
|
||||
void onScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
};
|
||||
/* eslint-disable tscompat/tscompat */
|
||||
const getTouch = (event: TouchEvent) => {
|
||||
|
|
@ -412,7 +443,11 @@
|
|||
}
|
||||
if (next) {
|
||||
event.preventDefault();
|
||||
void onScrub?.({ year: next.year, month: next.month }, -1, 0);
|
||||
void onScrub?.({
|
||||
scrubberMonth: { year: next.year, month: next.month },
|
||||
overallScrollPercent: -1,
|
||||
scrubberMonthScrollPercent: 0,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -422,7 +457,11 @@
|
|||
const next = segments[idx + 1];
|
||||
if (next) {
|
||||
event.preventDefault();
|
||||
void onScrub?.({ year: next.year, month: next.month }, -1, 0);
|
||||
void onScrub?.({
|
||||
scrubberMonth: { year: next.year, month: next.month },
|
||||
overallScrollPercent: -1,
|
||||
scrubberMonthScrollPercent: 0,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,47 @@
|
|||
<script lang="ts">
|
||||
import FormatMessage from '$lib/elements/FormatMessage.svelte';
|
||||
import { showDeleteModal } from '$lib/stores/preferences.store';
|
||||
import { Checkbox, ConfirmModal, Label } from '@immich/ui';
|
||||
import { mdiDeleteForeverOutline } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
size: number;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
let { size, onConfirm, onCancel }: Props = $props();
|
||||
|
||||
let checked = $state(false);
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (checked) {
|
||||
$showDeleteModal = false;
|
||||
}
|
||||
onConfirm();
|
||||
};
|
||||
</script>
|
||||
|
||||
<ConfirmModal
|
||||
title={$t('permanently_delete_assets_count', { values: { count: size } })}
|
||||
confirmText={$t('delete')}
|
||||
icon={mdiDeleteForeverOutline}
|
||||
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
|
||||
>
|
||||
{#snippet promptSnippet()}
|
||||
<p>
|
||||
<FormatMessage key="permanently_delete_assets_prompt" values={{ count: size }}>
|
||||
{#snippet children({ message })}
|
||||
<b>{message}</b>
|
||||
{/snippet}
|
||||
</FormatMessage>
|
||||
</p>
|
||||
<p><b>{$t('cannot_undo_this_action')}</b></p>
|
||||
|
||||
<div class="pt-4 flex justify-center items-center gap-2">
|
||||
<Checkbox id="confirm-deletion-input" bind:checked color="secondary" />
|
||||
<Label label={$t('do_not_show_again')} for="confirm-deletion-input" />
|
||||
</div>
|
||||
{/snippet}
|
||||
</ConfirmModal>
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
|
||||
import ChangeDate, {
|
||||
type AbsoluteResult,
|
||||
type RelativeResult,
|
||||
} from '$lib/components/shared-components/change-date.svelte';
|
||||
import {
|
||||
setFocusToAsset as setFocusAssetInit,
|
||||
setFocusTo as setFocusToInit,
|
||||
} from '$lib/components/timeline/actions/focus-actions';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
|
||||
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { showDeleteModal } from '$lib/stores/preferences.store';
|
||||
import { searchStore } from '$lib/stores/search.svelte';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { handlePromiseError } from '$lib/utils';
|
||||
import { deleteAssets, updateStackedAssetInTimeline } from '$lib/utils/actions';
|
||||
import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
|
||||
import { AssetVisibility } from '@immich/sdk';
|
||||
import { modalManager } from '@immich/ui';
|
||||
import { DateTime } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
import DeleteAssetDialog from './delete-asset-dialog.svelte';
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
|
||||
interface Props {
|
||||
timelineManager: TimelineManager;
|
||||
assetInteraction: AssetInteraction;
|
||||
isShowDeleteConfirmation: boolean;
|
||||
onEscape?: () => void;
|
||||
scrollToAsset: (asset: TimelineAsset) => boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
timelineManager = $bindable(),
|
||||
assetInteraction,
|
||||
isShowDeleteConfirmation = $bindable(false),
|
||||
onEscape,
|
||||
scrollToAsset,
|
||||
}: Props = $props();
|
||||
|
||||
let isShowSelectDate = $state(false);
|
||||
|
||||
const trashOrDelete = async (force: boolean = false) => {
|
||||
isShowDeleteConfirmation = false;
|
||||
await deleteAssets(
|
||||
!(isTrashEnabled && !force),
|
||||
(assetIds) => timelineManager.removeAssets(assetIds),
|
||||
assetInteraction.selectedAssets,
|
||||
!isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
|
||||
);
|
||||
assetInteraction.clearMultiselect();
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
|
||||
|
||||
if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
|
||||
isShowDeleteConfirmation = true;
|
||||
return;
|
||||
}
|
||||
handlePromiseError(trashOrDelete(hasTrashedAsset));
|
||||
};
|
||||
|
||||
const onForceDelete = () => {
|
||||
if ($showDeleteModal) {
|
||||
isShowDeleteConfirmation = true;
|
||||
return;
|
||||
}
|
||||
handlePromiseError(trashOrDelete(true));
|
||||
};
|
||||
|
||||
const onStackAssets = async () => {
|
||||
const result = await stackAssets(assetInteraction.selectedAssets);
|
||||
|
||||
updateStackedAssetInTimeline(timelineManager, result);
|
||||
|
||||
onEscape?.();
|
||||
};
|
||||
|
||||
const toggleArchive = async () => {
|
||||
const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
|
||||
const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
|
||||
timelineManager.updateAssetOperation(ids, (asset) => {
|
||||
asset.visibility = visibility;
|
||||
return { remove: false };
|
||||
});
|
||||
deselectAllAssets();
|
||||
};
|
||||
|
||||
let shiftKeyIsDown = $state(false);
|
||||
|
||||
const deselectAllAssets = () => {
|
||||
cancelMultiselect(assetInteraction);
|
||||
};
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (searchStore.isSearchEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
shiftKeyIsDown = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyUp = (event: KeyboardEvent) => {
|
||||
if (searchStore.isSearchEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
shiftKeyIsDown = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onSelectStart = (e: Event) => {
|
||||
if (assetInteraction.selectionActive && shiftKeyIsDown) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
|
||||
const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
|
||||
const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
|
||||
let isShortcutModalOpen = false;
|
||||
|
||||
const handleOpenShortcutModal = async () => {
|
||||
if (isShortcutModalOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
isShortcutModalOpen = true;
|
||||
await modalManager.show(ShortcutsModal, {});
|
||||
isShortcutModalOpen = false;
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
if (isEmpty) {
|
||||
assetInteraction.clearMultiselect();
|
||||
}
|
||||
});
|
||||
|
||||
const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
|
||||
const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
|
||||
|
||||
let shortcutList = $derived(
|
||||
(() => {
|
||||
if (searchStore.isSearchEnabled || $showAssetViewer) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const shortcuts: ShortcutOptions[] = [
|
||||
{ shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
|
||||
{ shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
|
||||
{ shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) },
|
||||
{ shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') },
|
||||
{ shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') },
|
||||
{ shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') },
|
||||
{ shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') },
|
||||
{ shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') },
|
||||
{ shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
|
||||
{ shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
|
||||
{ shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
|
||||
{ shortcut: { key: 'G' }, onShortcut: () => (isShowSelectDate = true) },
|
||||
];
|
||||
if (onEscape) {
|
||||
shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
|
||||
}
|
||||
|
||||
if (assetInteraction.selectionActive) {
|
||||
shortcuts.push(
|
||||
{ shortcut: { key: 'Delete' }, onShortcut: onDelete },
|
||||
{ shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
|
||||
{ shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
|
||||
{ shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
|
||||
{ shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
|
||||
);
|
||||
}
|
||||
|
||||
return shortcuts;
|
||||
})(),
|
||||
);
|
||||
</script>
|
||||
|
||||
<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />
|
||||
|
||||
{#if isShowDeleteConfirmation}
|
||||
<DeleteAssetDialog
|
||||
size={idsSelectedAssets.length}
|
||||
onCancel={() => (isShowDeleteConfirmation = false)}
|
||||
onConfirm={() => handlePromiseError(trashOrDelete(true))}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowSelectDate}
|
||||
<!-- remove for now confirmText={$t('navigate')} -->
|
||||
<ChangeDate
|
||||
withDuration={false}
|
||||
title={$t('navigate_to_time')}
|
||||
initialDate={DateTime.now()}
|
||||
timezoneInput={false}
|
||||
onConfirm={async (result: AbsoluteResult | RelativeResult) => {
|
||||
isShowSelectDate = false;
|
||||
if (result.mode === 'absolute') {
|
||||
const asset = await timelineManager.getClosestAssetToDate(
|
||||
(DateTime.fromISO(result.date) as DateTime<true>).toObject(),
|
||||
);
|
||||
if (asset) {
|
||||
setFocusAsset(asset);
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => (isShowSelectDate = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<script lang="ts">
|
||||
import { afterNavigate, beforeNavigate } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
|
||||
import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
|
||||
import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
|
||||
import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
|
||||
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
|
||||
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
|
||||
import { onMount, type Snippet } from 'svelte';
|
||||
import type { UpdatePayload } from 'vite';
|
||||
|
||||
interface Props {
|
||||
customThumbnailLayout?: Snippet<[TimelineAsset]>;
|
||||
|
||||
isSelectionMode?: boolean;
|
||||
singleSelect?: boolean;
|
||||
/** `true` if this asset grid responds to navigation events; if `true`, then look at the
|
||||
`AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
|
||||
additionally, update the page location/url with the asset as the asset-grid is scrolled */
|
||||
enableRouting: boolean;
|
||||
timelineManager: TimelineManager;
|
||||
assetInteraction: AssetInteraction;
|
||||
withStacked?: boolean;
|
||||
showArchiveIcon?: boolean;
|
||||
showSkeleton?: boolean;
|
||||
isShowDeleteConfirmation?: boolean;
|
||||
styleMarginRightOverride?: string;
|
||||
onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
|
||||
onSelect?: (asset: TimelineAsset) => void;
|
||||
header?: Snippet<[scrollToFunction: (top: number) => void]>;
|
||||
children?: Snippet;
|
||||
empty?: Snippet;
|
||||
handleTimelineScroll?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
customThumbnailLayout,
|
||||
|
||||
isSelectionMode = false,
|
||||
singleSelect = false,
|
||||
enableRouting,
|
||||
timelineManager = $bindable(),
|
||||
assetInteraction,
|
||||
withStacked = false,
|
||||
showSkeleton = $bindable(true),
|
||||
showArchiveIcon = false,
|
||||
styleMarginRightOverride,
|
||||
isShowDeleteConfirmation = $bindable(false),
|
||||
|
||||
onAssetOpen,
|
||||
onSelect,
|
||||
children,
|
||||
empty,
|
||||
header,
|
||||
handleTimelineScroll = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let { gridScrollTarget } = assetViewingStore;
|
||||
|
||||
let element: HTMLElement | undefined = $state();
|
||||
let timelineElement: HTMLElement | undefined = $state();
|
||||
|
||||
const maxMd = $derived(mobileDevice.maxMd);
|
||||
const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
|
||||
|
||||
$effect(() => {
|
||||
const layoutOptions = maxMd
|
||||
? {
|
||||
rowHeight: 100,
|
||||
headerHeight: 32,
|
||||
}
|
||||
: {
|
||||
rowHeight: 235,
|
||||
headerHeight: 48,
|
||||
};
|
||||
timelineManager.setLayoutOptions(layoutOptions);
|
||||
});
|
||||
|
||||
const scrollTo = (top: number) => {
|
||||
if (element) {
|
||||
element.scrollTo({ top });
|
||||
}
|
||||
updateSlidingWindow();
|
||||
};
|
||||
|
||||
const scrollBy = (y: number) => {
|
||||
if (element) {
|
||||
element.scrollBy(0, y);
|
||||
}
|
||||
updateSlidingWindow();
|
||||
};
|
||||
|
||||
const scrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
|
||||
const { heightDelta, scrollTop } = compensation;
|
||||
if (heightDelta !== undefined) {
|
||||
scrollBy(heightDelta);
|
||||
} else if (scrollTop !== undefined) {
|
||||
scrollTo(scrollTop);
|
||||
}
|
||||
timelineManager.clearScrollCompensation();
|
||||
};
|
||||
|
||||
const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
|
||||
// the following method may trigger any layouts, so need to
|
||||
// handle any scroll compensation that may have been set
|
||||
const height = monthGroup!.findAssetAbsolutePosition(assetId);
|
||||
|
||||
// this is in a while loop, since scrollCompensations invoke scrolls
|
||||
// which may load months, triggering more scrollCompensations. Call
|
||||
// this in a loop, until no more layouts occur.
|
||||
while (timelineManager.scrollCompensation.monthGroup) {
|
||||
scrollCompensation(timelineManager.scrollCompensation);
|
||||
}
|
||||
return height;
|
||||
};
|
||||
|
||||
const assetIsVisible = (assetTop: number): boolean => {
|
||||
if (!element) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const { clientHeight, scrollTop } = element;
|
||||
return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
|
||||
};
|
||||
|
||||
const scrollToAssetId = async (assetId: string) => {
|
||||
const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
|
||||
if (!monthGroup) {
|
||||
return false;
|
||||
}
|
||||
const height = getAssetHeight(assetId, monthGroup);
|
||||
|
||||
// If the asset is already visible, then don't scroll.
|
||||
if (assetIsVisible(height)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
scrollTo(height);
|
||||
return true;
|
||||
};
|
||||
|
||||
export const scrollToAsset = (asset: TimelineAsset) => {
|
||||
const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
|
||||
if (!monthGroup) {
|
||||
return false;
|
||||
}
|
||||
const height = getAssetHeight(asset.id, monthGroup);
|
||||
scrollTo(height);
|
||||
return true;
|
||||
};
|
||||
|
||||
const completeNav = async () => {
|
||||
const scrollTarget = $gridScrollTarget?.at;
|
||||
let scrolled = false;
|
||||
if (scrollTarget) {
|
||||
scrolled = await scrollToAssetId(scrollTarget);
|
||||
}
|
||||
if (!scrolled) {
|
||||
// if the asset is not found, scroll to the top
|
||||
scrollTo(0);
|
||||
}
|
||||
showSkeleton = false;
|
||||
};
|
||||
|
||||
beforeNavigate(() => (timelineManager.suspendTransitions = true));
|
||||
|
||||
afterNavigate((nav) => {
|
||||
const { complete } = nav;
|
||||
complete.then(completeNav, completeNav);
|
||||
});
|
||||
|
||||
const updateIsScrolling = () => (timelineManager.scrolling = true);
|
||||
// Yes, updateSlideWindow() is called by the onScroll event. However, if you also just scrolled
|
||||
// by explicitly invoking element.scrollX functions, there may be a delay with enough time to
|
||||
// set the intersecting property of the monthGroup to false, then true, which causes the DOM
|
||||
// nodes to be recreated, causing bad perf, and also, disrupting focus of those elements.
|
||||
// Also note: don't throttle, debounce, or otherwise do this function async - it causes flicker
|
||||
const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
|
||||
|
||||
const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
|
||||
|
||||
onMount(() => {
|
||||
if (!enableRouting) {
|
||||
showSkeleton = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<HotModuleReload
|
||||
onAfterUpdate={(payload: UpdatePayload) => {
|
||||
// when hmr happens, skeleton is initialized to true by default
|
||||
// normally, loading asset-grid is part of a navigation event, and the completion of
|
||||
// that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
|
||||
// this handler will run the navigation/scroll-to-asset handler when hmr is performed,
|
||||
// preventing skeleton from showing after hmr
|
||||
const finishHmr = () => {
|
||||
const asset = $page.url.searchParams.get('at');
|
||||
if (asset) {
|
||||
$gridScrollTarget = { at: asset };
|
||||
}
|
||||
void completeNav();
|
||||
};
|
||||
const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('base-timeline-viewer.svelte'));
|
||||
if (assetGridUpdate) {
|
||||
// wait 500ms for the update to be fully swapped in
|
||||
setTimeout(finishHmr, 500);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{@render header?.(scrollTo)}
|
||||
|
||||
<!-- Right margin MUST be equal to the width of scrubber -->
|
||||
<section
|
||||
id="asset-grid"
|
||||
class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
|
||||
style:margin-right={styleMarginRightOverride}
|
||||
tabindex="-1"
|
||||
bind:clientHeight={timelineManager.viewportHeight}
|
||||
bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
|
||||
bind:this={element}
|
||||
onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
|
||||
>
|
||||
<section
|
||||
bind:this={timelineElement}
|
||||
id="virtual-timeline"
|
||||
class:invisible={showSkeleton}
|
||||
style:height={timelineManager.timelineHeight + 'px'}
|
||||
>
|
||||
<section
|
||||
use:resizeObserver={topSectionResizeObserver}
|
||||
class:invisible={showSkeleton}
|
||||
style:position="absolute"
|
||||
style:left="0"
|
||||
style:right="0"
|
||||
>
|
||||
{@render children?.()}
|
||||
{#if isEmpty}
|
||||
<!-- (optional) empty placeholder -->
|
||||
{@render empty?.()}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#each timelineManager.months as monthGroup (monthGroup.viewId)}
|
||||
{@const display = monthGroup.intersecting}
|
||||
{@const absoluteHeight = monthGroup.top}
|
||||
|
||||
{#if !monthGroup.isLoaded}
|
||||
<div
|
||||
style:height={monthGroup.height + 'px'}
|
||||
style:position="absolute"
|
||||
style:transform={`translate3d(0,${absoluteHeight}px,0)`}
|
||||
style:width="100%"
|
||||
>
|
||||
<Skeleton
|
||||
height={monthGroup.height - monthGroup.timelineManager.headerHeight}
|
||||
title={monthGroup.monthGroupTitle}
|
||||
/>
|
||||
</div>
|
||||
{:else if display}
|
||||
<div
|
||||
class="month-group"
|
||||
style:height={monthGroup.height + 'px'}
|
||||
style:position="absolute"
|
||||
style:transform={`translate3d(0,${absoluteHeight}px,0)`}
|
||||
style:width="100%"
|
||||
>
|
||||
<SelectableTimelineMonth
|
||||
{customThumbnailLayout}
|
||||
{withStacked}
|
||||
{showArchiveIcon}
|
||||
{assetInteraction}
|
||||
{timelineManager}
|
||||
{isSelectionMode}
|
||||
{singleSelect}
|
||||
{monthGroup}
|
||||
{onAssetOpen}
|
||||
onSelect={(isSingleSelect: boolean, asset: TimelineAsset) => {
|
||||
if (isSingleSelect) {
|
||||
scrollTo(0);
|
||||
}
|
||||
onSelect?.(asset);
|
||||
}}
|
||||
onScrollCompensationMonthInDOM={scrollCompensation}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<!-- spacer for lead-out -->
|
||||
<div
|
||||
class="h-[60px]"
|
||||
style:position="absolute"
|
||||
style:left="0"
|
||||
style:right="0"
|
||||
style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
|
||||
></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#asset-grid {
|
||||
contain: strict;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.month-group {
|
||||
contain: layout size paint;
|
||||
transform-style: flat;
|
||||
backface-visibility: hidden;
|
||||
transform-origin: center center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<script lang="ts">
|
||||
import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
|
||||
import Scrubber from '$lib/components/timeline/Scrubber.svelte';
|
||||
import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
|
||||
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
|
||||
import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { findMonthAtScrollPosition, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
customThumbnailLayout?: Snippet<[TimelineAsset]>;
|
||||
|
||||
isSelectionMode?: boolean;
|
||||
singleSelect?: boolean;
|
||||
/** `true` if this timeline responds to navigation events; if `true`, then look at the
|
||||
`AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
|
||||
additionally, update the page location/url with the asset as the asset-grid is scrolled */
|
||||
enableRouting: boolean;
|
||||
timelineManager: TimelineManager;
|
||||
assetInteraction: AssetInteraction;
|
||||
|
||||
withStacked?: boolean;
|
||||
showArchiveIcon?: boolean;
|
||||
showSkeleton?: boolean;
|
||||
|
||||
isShowDeleteConfirmation?: boolean;
|
||||
onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
|
||||
onSelect?: (asset: TimelineAsset) => void;
|
||||
|
||||
children?: Snippet;
|
||||
empty?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
customThumbnailLayout,
|
||||
isSelectionMode = false,
|
||||
singleSelect = false,
|
||||
enableRouting,
|
||||
timelineManager = $bindable(),
|
||||
assetInteraction,
|
||||
|
||||
withStacked = false,
|
||||
showArchiveIcon = false,
|
||||
showSkeleton = $bindable(true),
|
||||
isShowDeleteConfirmation = $bindable(false),
|
||||
onAssetOpen,
|
||||
onSelect = () => {},
|
||||
children,
|
||||
empty,
|
||||
}: Props = $props();
|
||||
|
||||
const VIEWPORT_MULTIPLIER = 2; // Used to determine if timeline is "small"
|
||||
|
||||
// The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
|
||||
// Note: There may be multiple months visible within the viewport at any given time.
|
||||
let viewportTopMonthScrollPercent = $state(0);
|
||||
// The timeline month intersecting the top position of the viewport
|
||||
let viewportTopMonth: TimelineYearMonth | undefined = $state(undefined);
|
||||
// Overall scroll percentage through the entire timeline (0-1)
|
||||
let timelineScrollPercent: number = $state(0);
|
||||
// Indicates whether the viewport is currently in the lead-out section (after all months)
|
||||
let isInLeadOutSection = $state(false);
|
||||
// Width of the scrubber component in pixels, used to adjust timeline margins
|
||||
let scrubberWidth: number = $state(0);
|
||||
|
||||
// note: don't throttle, debounce, or otherwise make this function async - it causes flicker
|
||||
// this function updates the scrubber position based on the current scroll position in the timeline
|
||||
const handleTimelineScroll = () => {
|
||||
isInLeadOutSection = false;
|
||||
|
||||
// Handle edge cases: small timeline (limited scroll) or lead-in area scrolling
|
||||
const top = timelineManager.visibleWindow.top;
|
||||
if (isSmallTimeline() || top < timelineManager.topSectionHeight) {
|
||||
calculateTimelineScrollPercent();
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle normal month scrolling
|
||||
handleMonthScroll();
|
||||
};
|
||||
|
||||
const handleMonthScroll = () => {
|
||||
const scrollPosition = timelineManager.visibleWindow.top;
|
||||
const months = timelineManager.months;
|
||||
const maxScrollPercent = timelineManager.getMaxScrollPercent();
|
||||
|
||||
// Find the month at the current scroll position
|
||||
const searchResult = findMonthAtScrollPosition(months, scrollPosition, maxScrollPercent);
|
||||
|
||||
if (searchResult) {
|
||||
viewportTopMonth = searchResult.month;
|
||||
viewportTopMonthScrollPercent = searchResult.monthScrollPercent;
|
||||
isInLeadOutSection = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// We're in lead-out section
|
||||
isInLeadOutSection = true;
|
||||
timelineScrollPercent = 1;
|
||||
resetScrubberMonth();
|
||||
};
|
||||
|
||||
const resetScrubberMonth = () => {
|
||||
viewportTopMonth = undefined;
|
||||
viewportTopMonthScrollPercent = 0;
|
||||
};
|
||||
|
||||
const calculateTimelineScrollPercent = () => {
|
||||
const maxScroll = timelineManager.getMaxScroll();
|
||||
timelineScrollPercent = Math.min(1, timelineManager.visibleWindow.top / maxScroll);
|
||||
resetScrubberMonth();
|
||||
};
|
||||
|
||||
const handleOverallPercentScroll = (percent: number, scrollTo?: (offset: number) => void) => {
|
||||
const maxScroll = timelineManager.getMaxScroll();
|
||||
const offset = maxScroll * percent;
|
||||
scrollTo?.(offset);
|
||||
};
|
||||
|
||||
const findMonthGroup = (target: TimelineYearMonth) => {
|
||||
return timelineManager.months.find(
|
||||
({ yearMonth }) => yearMonth.year === target.year && yearMonth.month === target.month,
|
||||
);
|
||||
};
|
||||
|
||||
const isSmallTimeline = () => {
|
||||
return timelineManager.timelineHeight < timelineManager.viewportHeight * VIEWPORT_MULTIPLIER;
|
||||
};
|
||||
|
||||
// note: don't throttle, debounce, or otherwise make this function async - it causes flicker
|
||||
// this function scrolls the timeline to the specified month group and offset, based on scrubber interaction
|
||||
const onScrub: ScrubberListener = (scrubberData) => {
|
||||
const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent, scrollToFunction } = scrubberData;
|
||||
|
||||
// Handle edge case or no month selected
|
||||
if (!scrubberMonth || isSmallTimeline()) {
|
||||
handleOverallPercentScroll(overallScrollPercent, scrollToFunction);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find and scroll to the selected month
|
||||
const monthGroup = findMonthGroup(scrubberMonth);
|
||||
if (monthGroup) {
|
||||
scrollToPositionWithinMonth(monthGroup, scrubberMonthScrollPercent, scrollToFunction);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToPositionWithinMonth = (
|
||||
monthGroup: MonthGroup,
|
||||
monthGroupScrollPercent: number,
|
||||
handleScrollTop?: (top: number) => void,
|
||||
) => {
|
||||
const topOffset = monthGroup.top;
|
||||
const maxScrollPercent = timelineManager.getMaxScrollPercent();
|
||||
const delta = monthGroup.height * monthGroupScrollPercent;
|
||||
const scrollToTop = (topOffset + delta) * maxScrollPercent;
|
||||
|
||||
handleScrollTop?.(scrollToTop);
|
||||
};
|
||||
let baseTimelineViewer: BaseTimelineViewer | undefined = $state();
|
||||
export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAsset(asset) ?? false;
|
||||
</script>
|
||||
|
||||
<BaseTimelineViewer
|
||||
bind:this={baseTimelineViewer}
|
||||
{customThumbnailLayout}
|
||||
{isSelectionMode}
|
||||
{singleSelect}
|
||||
{enableRouting}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
{withStacked}
|
||||
{showArchiveIcon}
|
||||
{showSkeleton}
|
||||
{isShowDeleteConfirmation}
|
||||
styleMarginRightOverride={scrubberWidth + 'px'}
|
||||
{onAssetOpen}
|
||||
{onSelect}
|
||||
{children}
|
||||
{empty}
|
||||
{handleTimelineScroll}
|
||||
>
|
||||
{#snippet header(scrollToFunction)}
|
||||
{#if timelineManager.months.length > 0}
|
||||
<Scrubber
|
||||
{timelineManager}
|
||||
height={timelineManager.viewportHeight}
|
||||
timelineTopOffset={timelineManager.topSectionHeight}
|
||||
timelineBottomOffset={timelineManager.bottomSectionHeight}
|
||||
{isInLeadOutSection}
|
||||
{timelineScrollPercent}
|
||||
{viewportTopMonthScrollPercent}
|
||||
{viewportTopMonth}
|
||||
onScrub={(scrubberData) => onScrub({ ...scrubberData, scrollToFunction })}
|
||||
bind:scrubberWidth
|
||||
/>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</BaseTimelineViewer>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
height: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
let { height = 0, title }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="overflow-clip" style:height={height + 'px'}>
|
||||
<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"
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div class="animate-pulse absolute h-full w-full" data-skeleton="true"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[data-skeleton] {
|
||||
background-image: url('/light_skeleton.png');
|
||||
background-repeat: repeat;
|
||||
background-size: 235px, 235px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
[data-skeleton] {
|
||||
background-size: 100px, 100px;
|
||||
}
|
||||
}
|
||||
:global(.dark) [data-skeleton] {
|
||||
background-image: url('/dark_skeleton.png');
|
||||
}
|
||||
@keyframes delayedVisibility {
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
[data-skeleton] {
|
||||
visibility: hidden;
|
||||
animation:
|
||||
0s linear 0.1s forwards delayedVisibility,
|
||||
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<script lang="ts">
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
|
||||
import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import { Icon } from '@immich/ui';
|
||||
|
||||
import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
|
||||
|
||||
import { flip } from 'svelte/animate';
|
||||
import { fly, scale } from 'svelte/transition';
|
||||
|
||||
import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
let { isUploading } = uploadAssetsStore;
|
||||
|
||||
interface Props {
|
||||
customThumbnailLayout?: Snippet<[TimelineAsset]>;
|
||||
|
||||
singleSelect: boolean;
|
||||
withStacked: boolean;
|
||||
showArchiveIcon: boolean;
|
||||
monthGroup: MonthGroup;
|
||||
timelineManager: TimelineManager;
|
||||
|
||||
onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
|
||||
|
||||
onHover: (dayGroup: DayGroup, asset: TimelineAsset) => void;
|
||||
onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset) => void;
|
||||
onAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
|
||||
onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
|
||||
|
||||
// these should be replaced with reactive properties in timeline-manager.svelte.ts
|
||||
isDayGroupSelected: (dayGroup: DayGroup) => boolean;
|
||||
isAssetSelected: (asset: TimelineAsset) => boolean;
|
||||
isAssetSelectionCandidate: (asset: TimelineAsset) => boolean;
|
||||
isAssetDisabled: (asset: TimelineAsset) => boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
customThumbnailLayout,
|
||||
|
||||
singleSelect,
|
||||
withStacked,
|
||||
showArchiveIcon,
|
||||
monthGroup,
|
||||
timelineManager,
|
||||
onScrollCompensationMonthInDOM,
|
||||
|
||||
onHover,
|
||||
onAssetOpen,
|
||||
onAssetSelect,
|
||||
onDayGroupSelect,
|
||||
|
||||
isDayGroupSelected,
|
||||
isAssetSelected,
|
||||
isAssetSelectionCandidate,
|
||||
isAssetDisabled,
|
||||
}: Props = $props();
|
||||
|
||||
let isMouseOverGroup = $state(false);
|
||||
let hoveredDayGroup = $state();
|
||||
|
||||
const transitionDuration = $derived.by(() =>
|
||||
monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
|
||||
);
|
||||
const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
|
||||
|
||||
function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
|
||||
return intersectables.filter((intersectable) => intersectable.intersecting);
|
||||
}
|
||||
|
||||
$effect.root(() => {
|
||||
if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
|
||||
onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
|
||||
{@const absoluteWidth = dayGroup.left}
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<section
|
||||
class={[
|
||||
{ 'transition-all': !monthGroup.timelineManager.suspendTransitions },
|
||||
!monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
|
||||
]}
|
||||
data-group
|
||||
style:position="absolute"
|
||||
style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
|
||||
onmouseenter={() => {
|
||||
isMouseOverGroup = true;
|
||||
hoveredDayGroup = dayGroup.groupTitle;
|
||||
}}
|
||||
onmouseleave={() => {
|
||||
isMouseOverGroup = false;
|
||||
hoveredDayGroup = null;
|
||||
}}
|
||||
>
|
||||
<!-- Date group title -->
|
||||
<div
|
||||
class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
|
||||
style:width={dayGroup.width + 'px'}
|
||||
>
|
||||
{#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected(dayGroup))}
|
||||
<div
|
||||
transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
|
||||
class="inline-block pe-2 hover:cursor-pointer"
|
||||
onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
|
||||
onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
|
||||
>
|
||||
{#if isDayGroupSelected(dayGroup)}
|
||||
<Icon icon={mdiCheckCircle} size="24" class="text-primary" />
|
||||
{:else}
|
||||
<Icon icon={mdiCircleOutline} size="24" color="#757575" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitleFull}>
|
||||
{dayGroup.groupTitle}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Image grid -->
|
||||
<div
|
||||
data-image-grid
|
||||
class="relative overflow-clip"
|
||||
style:height={dayGroup.height + 'px'}
|
||||
style:width={dayGroup.width + 'px'}
|
||||
>
|
||||
{#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
|
||||
{@const position = viewerAsset.position!}
|
||||
{@const asset = viewerAsset.asset!}
|
||||
|
||||
<!-- note: don't remove data-asset-id - its used by web e2e tests -->
|
||||
<div
|
||||
data-asset-id={asset.id}
|
||||
class="absolute"
|
||||
style:top={position.top + 'px'}
|
||||
style:left={position.left + 'px'}
|
||||
style:width={position.width + 'px'}
|
||||
style:height={position.height + 'px'}
|
||||
out:scale|global={{ start: 0.1, duration: scaleDuration }}
|
||||
animate:flip={{ duration: transitionDuration }}
|
||||
>
|
||||
<Thumbnail
|
||||
showStackedIcon={withStacked}
|
||||
{showArchiveIcon}
|
||||
{asset}
|
||||
{groupIndex}
|
||||
onClick={() => onAssetOpen?.(dayGroup, assetSnapshot(asset))}
|
||||
onSelect={() => onAssetSelect(dayGroup, assetSnapshot(asset))}
|
||||
onMouseEvent={() => onHover(dayGroup, assetSnapshot(asset))}
|
||||
selected={isAssetSelected(asset)}
|
||||
selectionCandidate={isAssetSelectionCandidate(asset)}
|
||||
disabled={isAssetDisabled(asset)}
|
||||
thumbnailWidth={position.width}
|
||||
thumbnailHeight={position.height}
|
||||
/>
|
||||
{#if customThumbnailLayout}
|
||||
{@render customThumbnailLayout(asset)}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
section {
|
||||
contain: layout paint style;
|
||||
}
|
||||
[data-image-grid] {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<script lang="ts">
|
||||
import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
|
||||
import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
|
||||
import TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
|
||||
import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
|
||||
import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
|
||||
import { searchStore } from '$lib/stores/search.svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
customThumbnailLayout?: Snippet<[TimelineAsset]>;
|
||||
|
||||
isSelectionMode: boolean;
|
||||
singleSelect: boolean;
|
||||
withStacked: boolean;
|
||||
showArchiveIcon: boolean;
|
||||
monthGroup: MonthGroup;
|
||||
timelineManager: TimelineManager;
|
||||
assetInteraction: AssetInteraction;
|
||||
|
||||
onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
|
||||
onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
|
||||
onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
customThumbnailLayout,
|
||||
isSelectionMode,
|
||||
singleSelect,
|
||||
withStacked,
|
||||
showArchiveIcon,
|
||||
monthGroup = $bindable(),
|
||||
assetInteraction,
|
||||
timelineManager,
|
||||
onAssetOpen,
|
||||
onSelect,
|
||||
onScrollCompensationMonthInDOM,
|
||||
}: Props = $props();
|
||||
|
||||
let lastAssetMouseEvent: TimelineAsset | null = $state(null);
|
||||
let shiftKeyIsDown = $state(false);
|
||||
let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
|
||||
|
||||
$effect(() => {
|
||||
if (!lastAssetMouseEvent || !lastAssetMouseEvent) {
|
||||
assetInteraction.clearAssetSelectionCandidates();
|
||||
}
|
||||
if (shiftKeyIsDown && lastAssetMouseEvent) {
|
||||
void selectAssetCandidates(lastAssetMouseEvent);
|
||||
}
|
||||
if (isEmpty) {
|
||||
assetInteraction.clearMultiselect();
|
||||
}
|
||||
});
|
||||
|
||||
const defaultAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
|
||||
if (isSelectionMode || assetInteraction.selectionActive) {
|
||||
handleAssetSelect(dayGroup, asset);
|
||||
return;
|
||||
}
|
||||
void navigate({ targetRoute: 'current', assetId: asset.id });
|
||||
};
|
||||
|
||||
const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
|
||||
if (onAssetOpen) {
|
||||
onAssetOpen(dayGroup, asset, () => defaultAssetOpen(dayGroup, asset));
|
||||
return;
|
||||
}
|
||||
defaultAssetOpen(dayGroup, asset);
|
||||
};
|
||||
|
||||
// called when clicking asset with shift key pressed or with mouse
|
||||
const handleAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
|
||||
void onSelectAssets(asset);
|
||||
|
||||
const assetsInDayGroup = dayGroup.getAssets();
|
||||
const groupTitle = dayGroup.groupTitle;
|
||||
// Check if all assets are selected in a group to toggle the group selection's icon
|
||||
let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
|
||||
assetInteraction.hasSelectedAsset(asset.id),
|
||||
).length;
|
||||
|
||||
// if all assets are selected in a group, add the group to selected group
|
||||
if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
|
||||
assetInteraction.addGroupToMultiselectGroup(groupTitle);
|
||||
} else {
|
||||
assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
|
||||
}
|
||||
|
||||
if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
|
||||
isSelectingAllAssets.set(true);
|
||||
} else {
|
||||
isSelectingAllAssets.set(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAsset = (asset: TimelineAsset) => {
|
||||
if (!timelineManager.albumAssets.has(asset.id)) {
|
||||
assetInteraction.selectAsset(asset);
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (searchStore.isSearchEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
shiftKeyIsDown = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyUp = (event: KeyboardEvent) => {
|
||||
if (searchStore.isSearchEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
shiftKeyIsDown = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnHover = (dayGroup: DayGroup, asset: TimelineAsset) => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
void selectAssetCandidates(asset);
|
||||
}
|
||||
lastAssetMouseEvent = asset;
|
||||
};
|
||||
|
||||
const handleDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
|
||||
const group = dayGroup.groupTitle;
|
||||
if (assetInteraction.selectedGroup.has(group)) {
|
||||
assetInteraction.removeGroupFromMultiselectGroup(group);
|
||||
for (const asset of assets) {
|
||||
assetInteraction.removeAssetFromMultiselectGroup(asset.id);
|
||||
}
|
||||
} else {
|
||||
assetInteraction.addGroupToMultiselectGroup(group);
|
||||
for (const asset of assets) {
|
||||
handleSelectAsset(asset);
|
||||
}
|
||||
}
|
||||
|
||||
if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
|
||||
isSelectingAllAssets.set(true);
|
||||
} else {
|
||||
isSelectingAllAssets.set(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onSelectAssets = async (asset: TimelineAsset) => {
|
||||
if (!asset) {
|
||||
return;
|
||||
}
|
||||
onSelect?.(singleSelect, asset);
|
||||
|
||||
if (singleSelect) {
|
||||
// onScrollToTop();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
|
||||
const deselect = assetInteraction.hasSelectedAsset(asset.id);
|
||||
|
||||
// Select/deselect already loaded assets
|
||||
if (deselect) {
|
||||
for (const candidate of assetInteraction.assetSelectionCandidates) {
|
||||
assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
|
||||
}
|
||||
assetInteraction.removeAssetFromMultiselectGroup(asset.id);
|
||||
} else {
|
||||
for (const candidate of assetInteraction.assetSelectionCandidates) {
|
||||
handleSelectAsset(candidate);
|
||||
}
|
||||
handleSelectAsset(asset);
|
||||
}
|
||||
|
||||
assetInteraction.clearAssetSelectionCandidates();
|
||||
|
||||
if (assetInteraction.assetSelectionStart && rangeSelection) {
|
||||
let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
|
||||
let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
|
||||
|
||||
if (startBucket === null || endBucket === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Select/deselect assets in range (start,end)
|
||||
let started = false;
|
||||
for (const monthGroup of timelineManager.months) {
|
||||
if (monthGroup === endBucket) {
|
||||
break;
|
||||
}
|
||||
if (started) {
|
||||
await timelineManager.loadMonthGroup(monthGroup.yearMonth);
|
||||
for (const asset of monthGroup.assetsIterator()) {
|
||||
if (deselect) {
|
||||
assetInteraction.removeAssetFromMultiselectGroup(asset.id);
|
||||
} else {
|
||||
handleSelectAsset(asset);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (monthGroup === startBucket) {
|
||||
started = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Update date group selection in range [start,end]
|
||||
started = false;
|
||||
for (const monthGroup of timelineManager.months) {
|
||||
if (monthGroup === startBucket) {
|
||||
started = true;
|
||||
}
|
||||
if (started) {
|
||||
// Split month group into day groups and check each group
|
||||
for (const dayGroup of monthGroup.dayGroups) {
|
||||
const dayGroupTitle = dayGroup.groupTitle;
|
||||
if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
|
||||
assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
|
||||
} else {
|
||||
assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (monthGroup === endBucket) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
assetInteraction.setAssetSelectionStart(deselect ? null : asset);
|
||||
};
|
||||
|
||||
const selectAssetCandidates = async (endAsset: TimelineAsset) => {
|
||||
if (!shiftKeyIsDown) {
|
||||
return;
|
||||
}
|
||||
|
||||
const startAsset = assetInteraction.assetSelectionStart;
|
||||
if (!startAsset) {
|
||||
return;
|
||||
}
|
||||
|
||||
const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
|
||||
assetInteraction.setAssetSelectionCandidates(assets);
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
|
||||
|
||||
<TimelineMonth
|
||||
{customThumbnailLayout}
|
||||
{singleSelect}
|
||||
{withStacked}
|
||||
{showArchiveIcon}
|
||||
{monthGroup}
|
||||
{timelineManager}
|
||||
{onScrollCompensationMonthInDOM}
|
||||
onHover={handleOnHover}
|
||||
onAssetOpen={handleOnAssetOpen}
|
||||
onAssetSelect={handleAssetSelect}
|
||||
onDayGroupSelect={handleDayGroupSelect}
|
||||
isDayGroupSelected={(dayGroup: DayGroup) => assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
|
||||
isAssetSelected={(asset) => assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
|
||||
isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)}
|
||||
isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)}
|
||||
/>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<script lang="ts">
|
||||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
import { authManager } from '$lib/managers/auth-manager.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
|
||||
import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
|
||||
|
||||
let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
|
||||
|
||||
interface Props {
|
||||
timelineManager: TimelineManager;
|
||||
showSkeleton: boolean;
|
||||
withStacked?: boolean;
|
||||
isShared?: boolean;
|
||||
album?: AlbumResponseDto | null;
|
||||
person?: PersonResponseDto | null;
|
||||
|
||||
removeAction?:
|
||||
| AssetAction.UNARCHIVE
|
||||
| AssetAction.ARCHIVE
|
||||
| AssetAction.FAVORITE
|
||||
| AssetAction.UNFAVORITE
|
||||
| AssetAction.SET_VISIBILITY_TIMELINE
|
||||
| null;
|
||||
}
|
||||
|
||||
let {
|
||||
timelineManager,
|
||||
showSkeleton = $bindable(false),
|
||||
removeAction,
|
||||
withStacked = false,
|
||||
isShared = false,
|
||||
album = null,
|
||||
person = null,
|
||||
}: Props = $props();
|
||||
|
||||
const handlePrevious = async () => {
|
||||
const release = await mutex.acquire();
|
||||
const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
|
||||
|
||||
if (laterAsset) {
|
||||
const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
|
||||
const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
|
||||
assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
|
||||
await navigate({ targetRoute: 'current', assetId: laterAsset.id });
|
||||
}
|
||||
|
||||
release();
|
||||
return !!laterAsset;
|
||||
};
|
||||
|
||||
const handleNext = async () => {
|
||||
const release = await mutex.acquire();
|
||||
const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
|
||||
|
||||
if (earlierAsset) {
|
||||
const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
|
||||
const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
|
||||
assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
|
||||
await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
|
||||
}
|
||||
|
||||
release();
|
||||
return !!earlierAsset;
|
||||
};
|
||||
|
||||
const handleRandom = async () => {
|
||||
const randomAsset = await timelineManager.getRandomAsset();
|
||||
|
||||
if (randomAsset) {
|
||||
const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
|
||||
assetViewingStore.setAsset(asset);
|
||||
await navigate({ targetRoute: 'current', assetId: randomAsset.id });
|
||||
return asset;
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = async (asset: { id: string }) => {
|
||||
assetViewingStore.showAssetViewer(false);
|
||||
showSkeleton = true;
|
||||
$gridScrollTarget = { at: asset.id };
|
||||
await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
|
||||
};
|
||||
|
||||
const handlePreAction = async (action: Action) => {
|
||||
switch (action.type) {
|
||||
case removeAction:
|
||||
case AssetAction.TRASH:
|
||||
case AssetAction.RESTORE:
|
||||
case AssetAction.DELETE:
|
||||
case AssetAction.ARCHIVE:
|
||||
case AssetAction.SET_VISIBILITY_LOCKED:
|
||||
case AssetAction.SET_VISIBILITY_TIMELINE: {
|
||||
// find the next asset to show or close the viewer
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
(await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
|
||||
|
||||
// delete after find the next one
|
||||
timelineManager.removeAssets([action.asset.id]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleAction = (action: Action) => {
|
||||
switch (action.type) {
|
||||
case AssetAction.ARCHIVE:
|
||||
case AssetAction.UNARCHIVE:
|
||||
case AssetAction.FAVORITE:
|
||||
case AssetAction.UNFAVORITE: {
|
||||
timelineManager.updateAssets([action.asset]);
|
||||
break;
|
||||
}
|
||||
|
||||
case AssetAction.ADD: {
|
||||
timelineManager.addAssets([action.asset]);
|
||||
break;
|
||||
}
|
||||
|
||||
case AssetAction.UNSTACK: {
|
||||
updateUnstackedAssetInTimeline(timelineManager, action.assets);
|
||||
break;
|
||||
}
|
||||
case AssetAction.REMOVE_ASSET_FROM_STACK: {
|
||||
timelineManager.addAssets([toTimelineAsset(action.asset)]);
|
||||
if (action.stack) {
|
||||
//Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
|
||||
updateUnstackedAssetInTimeline(
|
||||
timelineManager,
|
||||
action.stack.assets.map((asset) => toTimelineAsset(asset)),
|
||||
);
|
||||
updateStackedAssetInTimeline(timelineManager, {
|
||||
stack: action.stack,
|
||||
toDeleteIds: action.stack.assets
|
||||
.filter((asset) => asset.id !== action.stack?.primaryAssetId)
|
||||
.map((asset) => asset.id),
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case AssetAction.SET_STACK_PRIMARY_ASSET: {
|
||||
//Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
|
||||
updateUnstackedAssetInTimeline(
|
||||
timelineManager,
|
||||
action.stack.assets.map((asset) => toTimelineAsset(asset)),
|
||||
);
|
||||
updateStackedAssetInTimeline(timelineManager, {
|
||||
stack: action.stack,
|
||||
toDeleteIds: action.stack.assets
|
||||
.filter((asset) => asset.id !== action.stack.primaryAssetId)
|
||||
.map((asset) => asset.id),
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#await import('../../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
|
||||
<AssetViewer
|
||||
{withStacked}
|
||||
asset={$viewingAsset}
|
||||
preloadAssets={$preloadAssets}
|
||||
{isShared}
|
||||
{album}
|
||||
{person}
|
||||
preAction={handlePreAction}
|
||||
onAction={handleAction}
|
||||
onPrevious={handlePrevious}
|
||||
onNext={handleNext}
|
||||
onRandom={handleRandom}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
{/await}
|
||||
|
|
@ -1,36 +1,18 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import type { UpdatePayload } from 'vite';
|
||||
|
||||
type Props = {
|
||||
onBeforeUpdate?: (payload: UpdatePayload) => void;
|
||||
onAfterUpdate?: (payload: UpdatePayload) => void;
|
||||
};
|
||||
interface Props {
|
||||
onAfterUpdate: (payload: UpdatePayload) => void;
|
||||
}
|
||||
|
||||
let { onBeforeUpdate, onAfterUpdate }: Props = $props();
|
||||
|
||||
const unsubscribes: (() => void)[] = [];
|
||||
let { onAfterUpdate }: Props = $props();
|
||||
|
||||
onMount(() => {
|
||||
const hot = import.meta.hot;
|
||||
if (!hot) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (onBeforeUpdate) {
|
||||
hot.on('vite:beforeUpdate', onBeforeUpdate);
|
||||
unsubscribes.push(() => hot.off('vite:beforeUpdate', onBeforeUpdate));
|
||||
}
|
||||
|
||||
if (onAfterUpdate) {
|
||||
if (hot) {
|
||||
hot.on('vite:afterUpdate', onAfterUpdate);
|
||||
unsubscribes.push(() => hot.off('vite:afterUpdate', onAfterUpdate));
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
for (const unsubscribe of unsubscribes) {
|
||||
unsubscribe();
|
||||
return () => hot.off('vite:afterUpdate', onAfterUpdate);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export class DayGroup {
|
|||
readonly monthGroup: MonthGroup;
|
||||
readonly index: number;
|
||||
readonly groupTitle: string;
|
||||
readonly groupTitleFull: string;
|
||||
readonly day: number;
|
||||
viewerAssets: ViewerAsset[] = $state([]);
|
||||
|
||||
|
|
@ -26,11 +27,12 @@ export class DayGroup {
|
|||
#col = $state(0);
|
||||
#deferredLayout = false;
|
||||
|
||||
constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
|
||||
constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: string) {
|
||||
this.index = index;
|
||||
this.monthGroup = monthGroup;
|
||||
this.day = day;
|
||||
this.groupTitle = groupTitle;
|
||||
this.groupTitleFull = groupTitleFull;
|
||||
}
|
||||
|
||||
get top() {
|
||||
|
|
|
|||
|
|
@ -143,3 +143,24 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function findClosestGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
|
||||
let closestMonth: MonthGroup | undefined;
|
||||
let minDifference = Number.MAX_SAFE_INTEGER;
|
||||
|
||||
for (const month of timelineManager.months) {
|
||||
const { year, month: monthNum } = month.yearMonth;
|
||||
|
||||
// Calculate the absolute difference in months
|
||||
const yearDiff = Math.abs(year - targetYearMonth.year);
|
||||
const monthDiff = Math.abs(monthNum - targetYearMonth.month);
|
||||
const totalDiff = yearDiff * 12 + monthDiff;
|
||||
|
||||
if (totalDiff < minDifference) {
|
||||
minDifference = totalDiff;
|
||||
closestMonth = month;
|
||||
}
|
||||
}
|
||||
|
||||
return closestMonth;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { CancellableTask } from '$lib/utils/cancellable-task';
|
|||
import { handleError } from '$lib/utils/handle-error';
|
||||
import {
|
||||
formatGroupTitle,
|
||||
formatGroupTitleFull,
|
||||
formatMonthGroupTitle,
|
||||
fromTimelinePlainDate,
|
||||
fromTimelinePlainDateTime,
|
||||
|
|
@ -222,7 +223,8 @@ export class MonthGroup {
|
|||
addContext.setDayGroup(dayGroup, localDateTime);
|
||||
} else {
|
||||
const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
|
||||
dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
|
||||
const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
|
||||
dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
|
||||
this.dayGroups.push(dayGroup);
|
||||
addContext.setDayGroup(dayGroup, localDateTime);
|
||||
addContext.newDayGroups.add(dayGroup);
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export class TimelineManager {
|
|||
isInitialized = $state(false);
|
||||
months: MonthGroup[] = $state([]);
|
||||
topSectionHeight = $state(0);
|
||||
bottomSectionHeight = $state(60);
|
||||
timelineHeight = $derived(this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight);
|
||||
assetCount = $derived(this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
|
||||
|
||||
|
|
@ -552,4 +553,13 @@ export class TimelineManager {
|
|||
getAssetOrder() {
|
||||
return this.#options.order ?? AssetOrder.Desc;
|
||||
}
|
||||
|
||||
getMaxScrollPercent() {
|
||||
const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
|
||||
return (totalHeight - this.viewportHeight) / totalHeight;
|
||||
}
|
||||
|
||||
getMaxScroll() {
|
||||
return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,11 +23,12 @@ export type TimelineDateTime = TimelineDate & {
|
|||
millisecond: number;
|
||||
};
|
||||
|
||||
export type ScrubberListener = (
|
||||
scrubberMonth: { year: number; month: number },
|
||||
overallScrollPercent: number,
|
||||
scrubberMonthScrollPercent: number,
|
||||
) => void | Promise<void>;
|
||||
export type ScrubberListener = (scrubberData: {
|
||||
scrubberMonth: { year: number; month: number };
|
||||
overallScrollPercent: number;
|
||||
scrubberMonthScrollPercent: number;
|
||||
scrollToFunction?: (top: number) => void;
|
||||
}) => void | Promise<void>;
|
||||
|
||||
// used for AssetResponseDto.dateTimeOriginal, amongst others
|
||||
export const fromISODateTime = (isoDateTime: string, timeZone: string): DateTime<true> =>
|
||||
|
|
@ -151,6 +152,14 @@ export function formatGroupTitle(_date: DateTime): string {
|
|||
return getDateLocaleString(date, { locale: get(locale) });
|
||||
}
|
||||
|
||||
export const formatGroupTitleFull = (_date: DateTime): string => {
|
||||
if (!_date.isValid) {
|
||||
return _date.toString();
|
||||
}
|
||||
const date = _date as DateTime<true>;
|
||||
return getDateLocaleString(date);
|
||||
};
|
||||
|
||||
export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
|
||||
date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);
|
||||
|
||||
|
|
@ -234,3 +243,79 @@ export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
|
|||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export interface MonthGroupForSearch {
|
||||
yearMonth: TimelineYearMonth;
|
||||
top: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface BinarySearchResult {
|
||||
month: TimelineYearMonth;
|
||||
monthScrollPercent: number;
|
||||
}
|
||||
|
||||
export function findMonthAtScrollPosition(
|
||||
months: MonthGroupForSearch[],
|
||||
scrollPosition: number,
|
||||
maxScrollPercent: number,
|
||||
): BinarySearchResult | null {
|
||||
const SUBPIXEL_TOLERANCE = -1; // Tolerance for scroll position checks
|
||||
const NEAR_END_THRESHOLD = 0.9999; // Threshold for detecting near-end of month
|
||||
|
||||
if (months.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if we're before the first month
|
||||
const firstMonthTop = months[0].top * maxScrollPercent;
|
||||
if (scrollPosition < firstMonthTop - SUBPIXEL_TOLERANCE) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if we're after the last month
|
||||
const lastMonth = months.at(-1)!;
|
||||
const lastMonthBottom = (lastMonth.top + lastMonth.height) * maxScrollPercent;
|
||||
if (scrollPosition >= lastMonthBottom - SUBPIXEL_TOLERANCE) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Binary search to find the month containing the scroll position
|
||||
let left = 0;
|
||||
let right = months.length - 1;
|
||||
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2);
|
||||
const month = months[mid];
|
||||
const monthTop = month.top * maxScrollPercent;
|
||||
const monthBottom = monthTop + month.height * maxScrollPercent;
|
||||
|
||||
if (scrollPosition >= monthTop - SUBPIXEL_TOLERANCE && scrollPosition < monthBottom - SUBPIXEL_TOLERANCE) {
|
||||
// Found the month containing the scroll position
|
||||
const distanceIntoMonth = scrollPosition - monthTop;
|
||||
const monthScrollPercent = Math.max(0, distanceIntoMonth / (month.height * maxScrollPercent));
|
||||
|
||||
// Handle month boundary edge case
|
||||
if (monthScrollPercent > NEAR_END_THRESHOLD && mid < months.length - 1) {
|
||||
return {
|
||||
month: months[mid + 1].yearMonth,
|
||||
monthScrollPercent: 0,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
month: month.yearMonth,
|
||||
monthScrollPercent,
|
||||
};
|
||||
}
|
||||
|
||||
if (scrollPosition < monthTop) {
|
||||
right = mid - 1;
|
||||
} else {
|
||||
left = mid + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Shouldn't reach here, but return null if we do
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,17 +110,7 @@
|
|||
return !!asset.latitude && !!asset.longitude;
|
||||
};
|
||||
|
||||
const handleThumbnailClick = (
|
||||
asset: TimelineAsset,
|
||||
timelineManager: TimelineManager,
|
||||
dayGroup: DayGroup,
|
||||
onClick: (
|
||||
timelineManager: TimelineManager,
|
||||
assets: TimelineAsset[],
|
||||
groupTitle: string,
|
||||
asset: TimelineAsset,
|
||||
) => void,
|
||||
) => {
|
||||
const handleAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
|
||||
if (hasGps(asset)) {
|
||||
locationUpdated = true;
|
||||
setTimeout(() => {
|
||||
|
|
@ -129,7 +119,7 @@
|
|||
location = { latitude: asset.latitude!, longitude: asset.longitude! };
|
||||
void setQueryValue('at', asset.id);
|
||||
} else {
|
||||
onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
|
||||
defaultAssetOpen();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -193,9 +183,9 @@
|
|||
removeAction={AssetAction.ARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
withStacked
|
||||
onThumbnailClick={handleThumbnailClick}
|
||||
onAssetOpen={handleAssetOpen}
|
||||
>
|
||||
{#snippet customLayout(asset: TimelineAsset)}
|
||||
{#snippet customThumbnailLayout(asset: TimelineAsset)}
|
||||
{#if hasGps(asset)}
|
||||
<div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
|
||||
{asset.city || $t('gps')}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue