mirror of
https://github.com/immich-app/immich
synced 2025-10-17 18:19:27 +00:00
refactor: Finish timeline migration by removing AssetGrid wrapper
- Remove AssetGrid wrapper - Update all remaining route files to import Timeline directly - Fix component signatures where needed (onThumbnailClick → onAssetOpen) - Update album-viewer component to use Timeline - Update geolocation route with proper callback signature All routes now use Timeline component directly: - album-viewer component The major parts of the refactoring are complete.
This commit is contained in:
midzelis
parent
53aced666e
commit
0c9f042d43
21 changed files with 42 additions and 1096 deletions
|
|
@ -300,7 +300,7 @@ run = "tsc --noEmit"
|
|||
depends = "web:svelte-kit-sync"
|
||||
env._.path = "web/node_modules/.bin"
|
||||
dir = "web"
|
||||
run = "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte"
|
||||
run = "svelte-check --no-tsconfig --fail-on-warnings"
|
||||
|
||||
[tasks."web:checklist"]
|
||||
run = [
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
import { onDestroy } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import DownloadAction from '../photos-page/actions/download-action.svelte';
|
||||
import AssetGrid from '../photos-page/asset-grid.svelte';
|
||||
import Timeline from '../timeline/timeline.svelte';
|
||||
import ControlAppBar from '../shared-components/control-app-bar.svelte';
|
||||
import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
|
||||
import ThemeButton from '../shared-components/theme-button.svelte';
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
/>
|
||||
|
||||
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
|
||||
<AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}>
|
||||
<Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
|
||||
<section class="pt-8 md:pt-24 px-2 md:px-0">
|
||||
<!-- ALBUM TITLE -->
|
||||
<h1
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</p>
|
||||
{/if}
|
||||
</section>
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</main>
|
||||
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { shortcuts } from '$lib/actions/shortcut';
|
||||
import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
|
||||
import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
|
||||
import {
|
||||
NotificationType,
|
||||
notificationController,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script lang="ts">
|
||||
import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
|
||||
import { IconButton } from '@immich/ui';
|
||||
import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
|
||||
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
|
||||
import DeleteAssetDialog from '../delete-asset-dialog.svelte';
|
||||
import { IconButton } from '@immich/ui';
|
||||
|
||||
interface Props {
|
||||
onAssetDelete: OnDelete;
|
||||
|
|
|
|||
|
|
@ -1,254 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import Icon from '$lib/components/elements/icon.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 { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
|
||||
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import { navigate } from '$lib/utils/navigation';
|
||||
|
||||
import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
|
||||
|
||||
import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { flip } from 'svelte/animate';
|
||||
import { scale } from 'svelte/transition';
|
||||
|
||||
let { isUploading } = uploadAssetsStore;
|
||||
|
||||
interface Props {
|
||||
isSelectionMode: boolean;
|
||||
singleSelect: boolean;
|
||||
withStacked: boolean;
|
||||
showArchiveIcon: boolean;
|
||||
monthGroup: MonthGroup;
|
||||
timelineManager: TimelineManager;
|
||||
assetInteraction: AssetInteraction;
|
||||
customLayout?: Snippet<[TimelineAsset]>;
|
||||
|
||||
onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
|
||||
onSelectAssets: (asset: TimelineAsset) => void;
|
||||
onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
|
||||
onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
|
||||
onThumbnailClick?: (
|
||||
asset: TimelineAsset,
|
||||
timelineManager: TimelineManager,
|
||||
dayGroup: DayGroup,
|
||||
onClick: (
|
||||
timelineManager: TimelineManager,
|
||||
assets: TimelineAsset[],
|
||||
groupTitle: string,
|
||||
asset: TimelineAsset,
|
||||
) => void,
|
||||
) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
isSelectionMode,
|
||||
singleSelect,
|
||||
withStacked,
|
||||
showArchiveIcon,
|
||||
monthGroup = $bindable(),
|
||||
assetInteraction,
|
||||
timelineManager,
|
||||
customLayout,
|
||||
onSelect,
|
||||
onSelectAssets,
|
||||
onSelectAssetCandidates,
|
||||
onScrollCompensation,
|
||||
onThumbnailClick,
|
||||
}: 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);
|
||||
const _onClick = (
|
||||
timelineManager: TimelineManager,
|
||||
assets: TimelineAsset[],
|
||||
groupTitle: string,
|
||||
asset: TimelineAsset,
|
||||
) => {
|
||||
if (isSelectionMode || assetInteraction.selectionActive) {
|
||||
assetSelectHandler(timelineManager, asset, assets, groupTitle);
|
||||
return;
|
||||
}
|
||||
void navigate({ targetRoute: 'current', assetId: asset.id });
|
||||
};
|
||||
|
||||
const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
|
||||
|
||||
const assetSelectHandler = (
|
||||
timelineManager: TimelineManager,
|
||||
asset: TimelineAsset,
|
||||
assetsInDayGroup: TimelineAsset[],
|
||||
groupTitle: string,
|
||||
) => {
|
||||
onSelectAssets(asset);
|
||||
|
||||
// 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 assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
|
||||
// Show multi select icon on hover on date group
|
||||
hoveredDayGroup = groupTitle;
|
||||
|
||||
if (assetInteraction.selectionActive) {
|
||||
onSelectAssetCandidates(asset);
|
||||
}
|
||||
};
|
||||
|
||||
function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
|
||||
return intersectable.filter((int) => int.intersecting);
|
||||
}
|
||||
|
||||
const getDayGroupFullDate = (dayGroup: DayGroup): string => {
|
||||
const { month, year } = dayGroup.monthGroup.yearMonth;
|
||||
const date = fromTimelinePlainDate({
|
||||
year,
|
||||
month,
|
||||
day: dayGroup.day,
|
||||
});
|
||||
return getDateLocaleString(date);
|
||||
};
|
||||
|
||||
$effect.root(() => {
|
||||
if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
|
||||
onScrollCompensation(timelineManager.scrollCompensation);
|
||||
timelineManager.clearScrollCompensation();
|
||||
}
|
||||
});
|
||||
</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;
|
||||
assetMouseEventHandler(dayGroup.groupTitle, null);
|
||||
}}
|
||||
onmouseleave={() => {
|
||||
isMouseOverGroup = false;
|
||||
assetMouseEventHandler(dayGroup.groupTitle, 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}
|
||||
<div
|
||||
class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
|
||||
class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
|
||||
assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
|
||||
onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
|
||||
onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
|
||||
>
|
||||
{#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
|
||||
<Icon path={mdiCheckCircle} size="24" class="text-primary" />
|
||||
{:else}
|
||||
<Icon path={mdiCircleOutline} size="24" color="#757575" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
|
||||
{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!}
|
||||
|
||||
<!-- {#if viewerAsset.intersecting} -->
|
||||
<!-- 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={(asset) => {
|
||||
if (typeof onThumbnailClick === 'function') {
|
||||
onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
|
||||
} else {
|
||||
_onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
|
||||
}
|
||||
}}
|
||||
onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
|
||||
onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
|
||||
selected={assetInteraction.hasSelectedAsset(asset.id) ||
|
||||
dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
|
||||
selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
|
||||
disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
|
||||
thumbnailWidth={position.width}
|
||||
thumbnailHeight={position.height}
|
||||
/>
|
||||
{#if customLayout}
|
||||
{@render customLayout(asset)}
|
||||
{/if}
|
||||
</div>
|
||||
<!-- {/if} -->
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
section {
|
||||
contain: layout paint style;
|
||||
}
|
||||
[data-image-grid] {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import type { AssetAction } from '$lib/constants';
|
||||
import type { DayGroup } from '$lib/managers/timeline-manager/day-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 type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
isSelectionMode?: boolean;
|
||||
singleSelect?: boolean;
|
||||
/** `true` if this asset grid is 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;
|
||||
removeAction?:
|
||||
| AssetAction.UNARCHIVE
|
||||
| AssetAction.ARCHIVE
|
||||
| AssetAction.FAVORITE
|
||||
| AssetAction.UNFAVORITE
|
||||
| AssetAction.SET_VISIBILITY_TIMELINE
|
||||
| null;
|
||||
withStacked?: boolean;
|
||||
showArchiveIcon?: boolean;
|
||||
isShared?: boolean;
|
||||
album?: AlbumResponseDto | null;
|
||||
person?: PersonResponseDto | null;
|
||||
isShowDeleteConfirmation?: boolean;
|
||||
onSelect?: (asset: TimelineAsset) => void;
|
||||
onEscape?: () => void;
|
||||
children?: Snippet;
|
||||
empty?: Snippet;
|
||||
customLayout?: Snippet<[TimelineAsset]>;
|
||||
onThumbnailClick?: (
|
||||
asset: TimelineAsset,
|
||||
timelineManager: TimelineManager,
|
||||
dayGroup: DayGroup,
|
||||
onClick: (
|
||||
timelineManager: TimelineManager,
|
||||
assets: TimelineAsset[],
|
||||
groupTitle: string,
|
||||
asset: TimelineAsset,
|
||||
) => void,
|
||||
) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
isSelectionMode = false,
|
||||
singleSelect = false,
|
||||
enableRouting,
|
||||
timelineManager = $bindable(),
|
||||
assetInteraction,
|
||||
removeAction,
|
||||
withStacked = false,
|
||||
showArchiveIcon = false,
|
||||
isShared = false,
|
||||
album = null,
|
||||
person = null,
|
||||
isShowDeleteConfirmation = $bindable(false),
|
||||
onSelect = () => {},
|
||||
onEscape = () => {},
|
||||
children,
|
||||
empty,
|
||||
customLayout,
|
||||
onThumbnailClick,
|
||||
}: Props = $props();
|
||||
|
||||
const onAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
|
||||
if (onThumbnailClick) {
|
||||
onThumbnailClick(asset, timelineManager, dayGroup, () => defaultAssetOpen());
|
||||
return;
|
||||
}
|
||||
defaultAssetOpen();
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- AssetGrid Adapter: This is a compatibility layer that wraps the new Timeline component -->
|
||||
<!-- It maintains the old AssetGrid API while using the new Timeline implementation underneath -->
|
||||
<Timeline
|
||||
{isSelectionMode}
|
||||
{singleSelect}
|
||||
{enableRouting}
|
||||
bind:timelineManager
|
||||
{assetInteraction}
|
||||
{removeAction}
|
||||
{withStacked}
|
||||
{showArchiveIcon}
|
||||
{isShared}
|
||||
{album}
|
||||
{person}
|
||||
bind:isShowDeleteConfirmation
|
||||
{onAssetOpen}
|
||||
{onSelect}
|
||||
{onEscape}
|
||||
{children}
|
||||
{empty}
|
||||
customThumbnailLayout={customLayout}
|
||||
/>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<script lang="ts">
|
||||
import FormatMessage from '$lib/components/i18n/format-message.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>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<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 ms-[10px] me-[10px]"
|
||||
style:width="calc(100% - 20px)"
|
||||
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>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
|
||||
import type { Action } from '$lib/components/asset-viewer/actions/action';
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
|
||||
import { AppRoute, AssetAction } from '$lib/constants';
|
||||
import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
|
||||
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
|
||||
|
|
@ -23,7 +24,6 @@
|
|||
import { debounce } from 'lodash-es';
|
||||
import { t } from 'svelte-i18n';
|
||||
import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
|
||||
import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
|
||||
import Portal from '../portal/portal.svelte';
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -1,593 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
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, type TimelineYearMonth } from '$lib/utils/timeline-util';
|
||||
import { mdiPlay } from '@mdi/js';
|
||||
import { clamp } from 'lodash-es';
|
||||
import { onMount } from 'svelte';
|
||||
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;
|
||||
/** 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;
|
||||
}
|
||||
|
||||
let {
|
||||
timelineTopOffset = 0,
|
||||
timelineBottomOffset = 0,
|
||||
height = 0,
|
||||
timelineManager,
|
||||
timelineScrollPercent = 0,
|
||||
viewportTopMonthScrollPercent = 0,
|
||||
viewportTopMonth = undefined,
|
||||
isInLeadOutSection = false,
|
||||
onScrub = undefined,
|
||||
onScrubKeyDown = undefined,
|
||||
startScrub = undefined,
|
||||
stopScrub = undefined,
|
||||
scrubberWidth = $bindable(),
|
||||
}: Props = $props();
|
||||
|
||||
let isHover = $state(false);
|
||||
let isDragging = $state(false);
|
||||
let isHoverOnPaddingTop = $state(false);
|
||||
let isHoverOnPaddingBottom = $state(false);
|
||||
let hoverY = $state(0);
|
||||
let clientY = 0;
|
||||
let windowHeight = $state(0);
|
||||
let scrollBar: HTMLElement | undefined = $state();
|
||||
|
||||
const toScrollY = (percent: number) => percent * (height - (PADDING_TOP + PADDING_BOTTOM));
|
||||
const toTimelineY = (scrollY: number) => scrollY / (height - (PADDING_TOP + PADDING_BOTTOM));
|
||||
|
||||
const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
|
||||
|
||||
const MOBILE_WIDTH = 20;
|
||||
const DESKTOP_WIDTH = 60;
|
||||
const HOVER_DATE_HEIGHT = 31.75;
|
||||
const PADDING_TOP = $derived(usingMobileDevice ? 25 : HOVER_DATE_HEIGHT);
|
||||
const PADDING_BOTTOM = $derived(usingMobileDevice ? 25 : 10);
|
||||
const MIN_YEAR_LABEL_DISTANCE = 16;
|
||||
const MIN_DOT_DISTANCE = 8;
|
||||
|
||||
const width = $derived.by(() => {
|
||||
if (isDragging) {
|
||||
return '100vw';
|
||||
}
|
||||
if (usingMobileDevice) {
|
||||
if (timelineManager.scrolling) {
|
||||
return MOBILE_WIDTH + 'px';
|
||||
}
|
||||
return '0px';
|
||||
}
|
||||
return DESKTOP_WIDTH + 'px';
|
||||
});
|
||||
$effect(() => {
|
||||
scrubberWidth = usingMobileDevice ? MOBILE_WIDTH : DESKTOP_WIDTH;
|
||||
});
|
||||
|
||||
const toScrollFromMonthGroupPercentage = (
|
||||
scrubberMonth: { year: number; month: number } | undefined,
|
||||
scrubberMonthPercent: number,
|
||||
scrubOverallPercent: number,
|
||||
) => {
|
||||
if (scrubberMonth) {
|
||||
let offset = relativeTopOffset;
|
||||
let match = false;
|
||||
for (const segment of segments) {
|
||||
if (segment.month === scrubberMonth.month && segment.year === scrubberMonth.year) {
|
||||
offset += scrubberMonthPercent * segment.height;
|
||||
match = true;
|
||||
break;
|
||||
}
|
||||
offset += segment.height;
|
||||
}
|
||||
if (!match) {
|
||||
offset += scrubberMonthPercent * relativeBottomOffset;
|
||||
}
|
||||
return offset;
|
||||
} else if (isInLeadOutSection) {
|
||||
let offset = relativeTopOffset;
|
||||
for (const segment of segments) {
|
||||
offset += segment.height;
|
||||
}
|
||||
offset += scrubOverallPercent * relativeBottomOffset;
|
||||
return offset;
|
||||
} else {
|
||||
return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
|
||||
}
|
||||
};
|
||||
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));
|
||||
|
||||
type Segment = {
|
||||
count: number;
|
||||
height: number;
|
||||
dateFormatted: string;
|
||||
year: number;
|
||||
month: number;
|
||||
hasLabel: boolean;
|
||||
hasDot: boolean;
|
||||
};
|
||||
|
||||
const calculateSegments = (months: ScrubberMonth[]) => {
|
||||
let height = 0;
|
||||
let dotHeight = 0;
|
||||
|
||||
let segments: Segment[] = [];
|
||||
let previousLabeledSegment: Segment | undefined;
|
||||
|
||||
let top = 0;
|
||||
for (const [i, scrubMonth] of months.entries()) {
|
||||
const scrollBarPercentage = scrubMonth.height / timelineFullHeight;
|
||||
|
||||
const segment = {
|
||||
top,
|
||||
count: scrubMonth.assetCount,
|
||||
height: toScrollY(scrollBarPercentage),
|
||||
dateFormatted: scrubMonth.title,
|
||||
year: scrubMonth.year,
|
||||
month: scrubMonth.month,
|
||||
hasLabel: false,
|
||||
hasDot: false,
|
||||
};
|
||||
top += segment.height;
|
||||
if (i === 0) {
|
||||
segment.hasDot = true;
|
||||
segment.hasLabel = true;
|
||||
previousLabeledSegment = segment;
|
||||
} else {
|
||||
if (previousLabeledSegment?.year !== segment.year && height > MIN_YEAR_LABEL_DISTANCE) {
|
||||
height = 0;
|
||||
segment.hasLabel = true;
|
||||
previousLabeledSegment = segment;
|
||||
}
|
||||
if (i !== 1 && segment.height > 5 && dotHeight > MIN_DOT_DISTANCE) {
|
||||
segment.hasDot = true;
|
||||
dotHeight = 0;
|
||||
}
|
||||
|
||||
height += segment.height;
|
||||
dotHeight += segment.height;
|
||||
}
|
||||
segments.push(segment);
|
||||
}
|
||||
|
||||
return segments;
|
||||
};
|
||||
let activeSegment: HTMLElement | undefined = $state();
|
||||
const segments = $derived(calculateSegments(timelineManager.scrubberMonths));
|
||||
const hoverLabel = $derived.by(() => {
|
||||
if (isHoverOnPaddingTop) {
|
||||
return segments.at(0)?.dateFormatted;
|
||||
}
|
||||
if (isHoverOnPaddingBottom) {
|
||||
return segments.at(-1)?.dateFormatted;
|
||||
}
|
||||
return activeSegment?.dataset.label;
|
||||
});
|
||||
const segmentDate = $derived.by(() => {
|
||||
if (!activeSegment?.dataset.segmentYearMonth) {
|
||||
return undefined;
|
||||
}
|
||||
const [year, month] = activeSegment.dataset.segmentYearMonth.split('-').map(Number);
|
||||
return { year, month };
|
||||
});
|
||||
const scrollSegment = $derived.by(() => {
|
||||
const y = scrollY;
|
||||
let cur = relativeTopOffset;
|
||||
for (const segment of segments) {
|
||||
if (y < cur + segment.height) {
|
||||
return segment;
|
||||
}
|
||||
cur += segment.height;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
const scrollHoverLabel = $derived(scrollSegment?.dateFormatted || '');
|
||||
|
||||
const findElementBestY = (elements: Element[], y: number, ...ids: string[]) => {
|
||||
if (ids.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
const filtered = elements.filter((element) => {
|
||||
if (element instanceof HTMLElement && element.dataset.id) {
|
||||
return ids.includes(element.dataset.id);
|
||||
}
|
||||
return false;
|
||||
}) as HTMLElement[];
|
||||
const imperfect = [];
|
||||
for (const element of filtered) {
|
||||
const boundingClientRect = element.getBoundingClientRect();
|
||||
if (boundingClientRect.y > y) {
|
||||
imperfect.push({
|
||||
element,
|
||||
boundingClientRect,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
if (y <= boundingClientRect.y + boundingClientRect.height) {
|
||||
return {
|
||||
element,
|
||||
boundingClientRect,
|
||||
};
|
||||
}
|
||||
}
|
||||
return imperfect.at(0);
|
||||
};
|
||||
|
||||
const getActive = (x: number, y: number) => {
|
||||
const elements = document.elementsFromPoint(x, y);
|
||||
const bestElement = findElementBestY(elements, y, 'time-segment', 'lead-in', 'lead-out');
|
||||
|
||||
if (bestElement) {
|
||||
const segment = bestElement.element;
|
||||
const boundingClientRect = bestElement.boundingClientRect;
|
||||
const sy = boundingClientRect.y;
|
||||
const relativeY = y - sy;
|
||||
const monthGroupPercentY = relativeY / boundingClientRect.height;
|
||||
return {
|
||||
isOnPaddingTop: false,
|
||||
isOnPaddingBottom: false,
|
||||
segment,
|
||||
monthGroupPercentY,
|
||||
};
|
||||
}
|
||||
|
||||
// check if padding
|
||||
const bar = findElementBestY(elements, 0, 'scrubber');
|
||||
let isOnPaddingTop = false;
|
||||
let isOnPaddingBottom = false;
|
||||
|
||||
if (bar) {
|
||||
const sr = bar.boundingClientRect;
|
||||
if (y < sr.top + PADDING_TOP) {
|
||||
isOnPaddingTop = true;
|
||||
}
|
||||
if (y > sr.bottom - PADDING_BOTTOM - 1) {
|
||||
isOnPaddingBottom = true;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isOnPaddingTop,
|
||||
isOnPaddingBottom,
|
||||
segment: undefined,
|
||||
monthGroupPercentY: 0,
|
||||
};
|
||||
};
|
||||
|
||||
const handleMouseEvent = (event: { clientY: number; isDragging?: boolean }) => {
|
||||
const wasDragging = isDragging;
|
||||
|
||||
isDragging = event.isDragging ?? isDragging;
|
||||
clientY = event.clientY;
|
||||
|
||||
if (!scrollBar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = scrollBar.getBoundingClientRect()!;
|
||||
const lower = 0;
|
||||
const upper = rect?.height - (PADDING_TOP + PADDING_BOTTOM);
|
||||
hoverY = clamp(clientY - rect?.top - PADDING_TOP, lower, upper);
|
||||
const x = rect!.left + rect!.width / 2;
|
||||
const { segment, monthGroupPercentY, isOnPaddingTop, isOnPaddingBottom } = getActive(x, clientY);
|
||||
activeSegment = segment;
|
||||
isHoverOnPaddingTop = isOnPaddingTop;
|
||||
isHoverOnPaddingBottom = isOnPaddingBottom;
|
||||
|
||||
const scrollPercent = toTimelineY(hoverY);
|
||||
if (wasDragging === false && isDragging) {
|
||||
void startScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
void onScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
}
|
||||
|
||||
if (wasDragging && !isDragging) {
|
||||
void stopScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
void onScrub?.({
|
||||
scrubberMonth: segmentDate!,
|
||||
overallScrollPercent: scrollPercent,
|
||||
scrubberMonthScrollPercent: monthGroupPercentY,
|
||||
});
|
||||
};
|
||||
/* eslint-disable tscompat/tscompat */
|
||||
const getTouch = (event: TouchEvent) => {
|
||||
if (event.touches.length === 1) {
|
||||
return event.touches[0];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const onTouchStart = (event: TouchEvent) => {
|
||||
const touch = getTouch(event);
|
||||
if (!touch) {
|
||||
isHover = false;
|
||||
return;
|
||||
}
|
||||
const elements = document.elementsFromPoint(touch.clientX, touch.clientY);
|
||||
const isHoverScrollbar =
|
||||
findElementBestY(elements, 0, 'scrubber', 'time-label', 'lead-in', 'lead-out') !== undefined;
|
||||
|
||||
isHover = isHoverScrollbar;
|
||||
|
||||
if (isHoverScrollbar) {
|
||||
handleMouseEvent({
|
||||
clientY: touch.clientY,
|
||||
isDragging: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
const onTouchEnd = () => {
|
||||
if (isHover) {
|
||||
isHover = false;
|
||||
}
|
||||
handleMouseEvent({
|
||||
clientY,
|
||||
isDragging: false,
|
||||
});
|
||||
};
|
||||
const onTouchMove = (event: TouchEvent) => {
|
||||
const touch = getTouch(event);
|
||||
if (touch && isDragging) {
|
||||
handleMouseEvent({
|
||||
clientY: touch.clientY,
|
||||
});
|
||||
} else {
|
||||
isHover = false;
|
||||
}
|
||||
};
|
||||
/* eslint-enable tscompat/tscompat */
|
||||
onMount(() => {
|
||||
document.addEventListener('touchmove', onTouchMove, { capture: true, passive: true });
|
||||
return () => {
|
||||
document.removeEventListener('touchmove', onTouchMove, true);
|
||||
};
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
document.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
|
||||
document.addEventListener('touchend', onTouchEnd, { capture: true, passive: true });
|
||||
return () => {
|
||||
document.removeEventListener('touchstart', onTouchStart, true);
|
||||
document.removeEventListener('touchend', onTouchEnd, true);
|
||||
};
|
||||
});
|
||||
|
||||
const isTabEvent = (event: KeyboardEvent) => event?.key === 'Tab';
|
||||
const isTabForward = (event: KeyboardEvent) => isTabEvent(event) && !event.shiftKey;
|
||||
const isTabBackward = (event: KeyboardEvent) => isTabEvent(event) && event.shiftKey;
|
||||
const isArrowUp = (event: KeyboardEvent) => event?.key === 'ArrowUp';
|
||||
const isArrowDown = (event: KeyboardEvent) => event?.key === 'ArrowDown';
|
||||
|
||||
const handleFocus = (event: KeyboardEvent) => {
|
||||
const forward = isTabForward(event);
|
||||
const backward = isTabBackward(event);
|
||||
if (forward || backward) {
|
||||
event.preventDefault();
|
||||
|
||||
const focusable = getTabbable(document.body);
|
||||
if (scrollBar) {
|
||||
const index = focusable.indexOf(scrollBar);
|
||||
if (index !== -1) {
|
||||
let next: HTMLElement;
|
||||
next = forward
|
||||
? (focusable[(index + 1) % focusable.length] as HTMLElement)
|
||||
: (focusable[(index - 1) % focusable.length] as HTMLElement);
|
||||
next.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleAccessibility = (event: KeyboardEvent) => {
|
||||
if (isTabEvent(event)) {
|
||||
handleFocus(event);
|
||||
return true;
|
||||
}
|
||||
if (isArrowUp(event)) {
|
||||
let next;
|
||||
if (scrollSegment) {
|
||||
const idx = segments.indexOf(scrollSegment);
|
||||
next = idx === -1 ? segments.at(-2) : segments[idx - 1];
|
||||
} else {
|
||||
next = segments.at(-2);
|
||||
}
|
||||
if (next) {
|
||||
event.preventDefault();
|
||||
void onScrub?.({
|
||||
scrubberMonth: { year: next.year, month: next.month },
|
||||
overallScrollPercent: -1,
|
||||
scrubberMonthScrollPercent: 0,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (isArrowDown(event) && scrollSegment) {
|
||||
const idx = segments.indexOf(scrollSegment);
|
||||
if (idx !== -1) {
|
||||
const next = segments[idx + 1];
|
||||
if (next) {
|
||||
event.preventDefault();
|
||||
void onScrub?.({
|
||||
scrubberMonth: { year: next.year, month: next.month },
|
||||
overallScrollPercent: -1,
|
||||
scrubberMonthScrollPercent: 0,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const keydown = (event: KeyboardEvent) => {
|
||||
let handled = handleAccessibility(event);
|
||||
if (!handled) {
|
||||
onScrubKeyDown?.(event, event.currentTarget as HTMLElement);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
bind:innerHeight={windowHeight}
|
||||
onmousemove={({ clientY }) => (isDragging || isHover) && handleMouseEvent({ clientY })}
|
||||
onmousedown={({ clientY }) => isHover && handleMouseEvent({ clientY, isDragging: true })}
|
||||
onmouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
|
||||
/>
|
||||
|
||||
<div
|
||||
transition:fly={{ x: 50, duration: 250 }}
|
||||
tabindex="0"
|
||||
role="scrollbar"
|
||||
aria-controls="time-label"
|
||||
aria-valuetext={hoverLabel}
|
||||
aria-valuenow={scrollY + PADDING_TOP}
|
||||
aria-valuemax={toScrollY(1)}
|
||||
aria-valuemin={toScrollY(0)}
|
||||
data-id="scrubber"
|
||||
class="absolute end-0 z-1 select-none hover:cursor-row-resize"
|
||||
style:padding-top={PADDING_TOP + 'px'}
|
||||
style:padding-bottom={PADDING_BOTTOM + 'px'}
|
||||
style:width
|
||||
style:height={height + 'px'}
|
||||
style:background-color={isDragging ? 'transparent' : 'transparent'}
|
||||
bind:this={scrollBar}
|
||||
onmouseenter={() => (isHover = true)}
|
||||
onmouseleave={() => (isHover = false)}
|
||||
onkeydown={keydown}
|
||||
draggable="false"
|
||||
>
|
||||
{#if !usingMobileDevice && hoverLabel && (isHover || isDragging)}
|
||||
<div
|
||||
id="time-label"
|
||||
class={[
|
||||
{ 'border-b-2': isDragging },
|
||||
{ 'rounded-bl-md': !isDragging },
|
||||
'bg-light truncate opacity-85 pointer-events-none absolute end-0 min-w-20 max-w-64 w-fit rounded-ss-md border-immich-primary py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg z-1',
|
||||
]}
|
||||
style:top="{hoverY + 2}px"
|
||||
>
|
||||
{hoverLabel}
|
||||
</div>
|
||||
{/if}
|
||||
{#if usingMobileDevice && ((timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging)}
|
||||
<div
|
||||
id="time-label"
|
||||
class="rounded-s-full w-[32px] ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
|
||||
style:top="{PADDING_TOP + (scrollY - 50 / 2)}px"
|
||||
style:height="50px"
|
||||
style:right="0"
|
||||
style:position="absolute"
|
||||
in:fade={{ duration: 200 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
>
|
||||
<Icon path={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-[2px]" />
|
||||
<Icon path={mdiPlay} size="20" class="rotate-90 relative top-px -end-[2px]" />
|
||||
{#if (timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging}
|
||||
<p
|
||||
transition:fade={{ duration: 200 }}
|
||||
style:bottom={50 / 2 - 30 / 2 + 'px'}
|
||||
style:right="36px"
|
||||
style:width="fit-content"
|
||||
class="truncate pointer-events-none absolute text-sm rounded-full w-[32px] py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
|
||||
>
|
||||
{scrollHoverLabel}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Scroll Position Indicator Line -->
|
||||
{#if !usingMobileDevice && !isDragging}
|
||||
<div class="absolute end-0 h-[2px] w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
|
||||
{#if timelineManager.scrolling && scrollHoverLabel && !isHover}
|
||||
<p
|
||||
transition:fade={{ duration: 200 }}
|
||||
class="truncate pointer-events-none absolute end-0 bottom-0 min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-subtle/90 z-1 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
|
||||
>
|
||||
{scrollHoverLabel}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="relative"
|
||||
style:height={relativeTopOffset + 'px'}
|
||||
data-id="lead-in"
|
||||
data-segment-year-month={segments.at(0)?.year + '-' + segments.at(0)?.month}
|
||||
data-label={segments.at(0)?.dateFormatted}
|
||||
>
|
||||
{#if relativeTopOffset > 6}
|
||||
<div class="absolute end-3 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Time Segment -->
|
||||
{#each segments as segment (segment.year + '-' + segment.month)}
|
||||
<div
|
||||
class="relative"
|
||||
data-id="time-segment"
|
||||
data-segment-year-month={segment.year + '-' + segment.month}
|
||||
data-label={segment.dateFormatted}
|
||||
style:height={segment.height + 'px'}
|
||||
>
|
||||
{#if !usingMobileDevice}
|
||||
{#if segment.hasLabel}
|
||||
<div class="absolute end-5 top-[-16px] text-[12px] dark:text-immich-dark-fg font-immich-mono">
|
||||
{segment.year}
|
||||
</div>
|
||||
{/if}
|
||||
{#if segment.hasDot}
|
||||
<div class="absolute end-3 bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<div data-id="lead-out" class="relative" style:height={relativeBottomOffset + 'px'}></div>
|
||||
</div>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
type AbsoluteResult,
|
||||
type RelativeResult,
|
||||
} from '$lib/components/shared-components/change-date.svelte';
|
||||
import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
|
||||
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
|
||||
|
|
@ -26,7 +27,6 @@
|
|||
import { mdiCalendarBlankOutline } from '@mdi/js';
|
||||
import { DateTime } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
import DeleteAssetDialog from './delete-asset-dialog.svelte';
|
||||
let { isViewing: showAssetViewer } = assetViewingStore;
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
|
||||
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
|
|
@ -443,7 +443,7 @@
|
|||
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
|
||||
<div class="relative w-full shrink">
|
||||
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
|
||||
{album}
|
||||
{timelineManager}
|
||||
|
|
@ -544,7 +544,7 @@
|
|||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
|
||||
{#if showActivityStatus && !activityManager.isLoading}
|
||||
<div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
|
||||
import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
|
||||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</script>
|
||||
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
{#snippet empty()}
|
||||
<EmptyPlaceholder text={$t('no_archived_assets_message')} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
|
||||
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</script>
|
||||
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
withStacked={true}
|
||||
{timelineManager}
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
{#snippet empty()}
|
||||
<EmptyPlaceholder text={$t('no_favorites_message')} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
||||
<!-- Multiselection mode app bar -->
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
|
||||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</Button>
|
||||
{/snippet}
|
||||
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
{#snippet empty()}
|
||||
<EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
||||
<!-- Multi-selection mode app bar -->
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
|
||||
import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
|
||||
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.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';
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</script>
|
||||
|
||||
<main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
|
||||
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
|
||||
<Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
|
||||
</main>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
|
||||
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
}}
|
||||
>
|
||||
{#key person.id}
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
{person}
|
||||
{timelineManager}
|
||||
|
|
@ -498,7 +498,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
{/key}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
|
||||
import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
|
||||
import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
</script>
|
||||
|
||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
enableRouting={true}
|
||||
{timelineManager}
|
||||
{assetInteraction}
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
{#snippet empty()}
|
||||
<EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
||||
{#if assetInteraction.selectionActive}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { goto } from '$app/navigation';
|
||||
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
|
||||
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
|
||||
import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
|
||||
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
|
||||
|
|
@ -117,11 +117,11 @@
|
|||
|
||||
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
|
||||
{#if tag.hasAssets}
|
||||
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
|
||||
<Timeline enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
|
||||
{#snippet empty()}
|
||||
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
{:else}
|
||||
<TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
|
||||
import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
|
||||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import {
|
||||
|
|
@ -116,14 +116,14 @@
|
|||
</HStack>
|
||||
{/snippet}
|
||||
|
||||
<AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
|
||||
<Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
|
||||
<p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
|
||||
{$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
|
||||
</p>
|
||||
{#snippet empty()}
|
||||
<EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import Timeline from '$lib/components/timeline/timeline.svelte';
|
||||
import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import { AssetAction } from '$lib/constants';
|
||||
|
|
@ -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 handleThumbnailClick = (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>
|
||||
|
|
@ -185,7 +175,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<AssetGrid
|
||||
<Timeline
|
||||
isSelectionMode={true}
|
||||
enableRouting={true}
|
||||
{timelineManager}
|
||||
|
|
@ -193,9 +183,9 @@
|
|||
removeAction={AssetAction.ARCHIVE}
|
||||
onEscape={handleEscape}
|
||||
withStacked
|
||||
onThumbnailClick={handleThumbnailClick}
|
||||
onAssetOpen={handleThumbnailClick}
|
||||
>
|
||||
{#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')}
|
||||
|
|
@ -209,5 +199,5 @@
|
|||
{#snippet empty()}
|
||||
<EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} />
|
||||
{/snippet}
|
||||
</AssetGrid>
|
||||
</Timeline>
|
||||
</UserPageLayout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue