mirror of
https://github.com/immich-app/immich.git
synced 2025-01-21 00:52:43 -05:00
fix(web): shared link card (#10702)
This commit is contained in:
Michel Heusschen
GitHub
parent
c58148af35
commit
560dbd3c65
2 changed files with 32 additions and 64 deletions
|
|
@ -12,7 +12,7 @@
|
|||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class="relative aspect-square">
|
||||
<div class="relative aspect-square shrink-0">
|
||||
{#if link?.album}
|
||||
<AlbumCover album={link.album} class={className} {preload} />
|
||||
{:else if link.assets[0]}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,55 @@
|
|||
<script lang="ts">
|
||||
import Badge from '$lib/components/elements/badge.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
|
||||
import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiOpenInNew } from '@mdi/js';
|
||||
import * as luxon from 'luxon';
|
||||
import { DateTime, type ToRelativeUnit } from 'luxon';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
export let link: SharedLinkResponseDto;
|
||||
|
||||
let expirationCountdown: luxon.DurationObjectUnits;
|
||||
const dispatch = createEventDispatcher<{
|
||||
delete: void;
|
||||
copy: void;
|
||||
edit: void;
|
||||
}>();
|
||||
|
||||
const getCountDownExpirationDate = () => {
|
||||
if (!link.expiresAt) {
|
||||
return;
|
||||
let now = DateTime.now();
|
||||
$: expiresAt = link.expiresAt ? DateTime.fromISO(link.expiresAt) : undefined;
|
||||
$: isExpired = expiresAt ? now > expiresAt : false;
|
||||
|
||||
const getCountDownExpirationDate = (expiresAtDate: DateTime, now: DateTime) => {
|
||||
const relativeUnits: ToRelativeUnit[] = ['days', 'hours', 'minutes', 'seconds'];
|
||||
const expirationCountdown = expiresAtDate.diff(now, relativeUnits).toObject();
|
||||
|
||||
for (const unit of relativeUnits) {
|
||||
const value = expirationCountdown[unit];
|
||||
if (value && value > 0) {
|
||||
return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit });
|
||||
}
|
||||
}
|
||||
|
||||
const expiresAtDate = luxon.DateTime.fromISO(new Date(link.expiresAt).toISOString(), { locale: $locale });
|
||||
const now = luxon.DateTime.now();
|
||||
|
||||
expirationCountdown = expiresAtDate.diff(now, ['days', 'hours', 'minutes', 'seconds']).toObject();
|
||||
|
||||
if (expirationCountdown.days && expirationCountdown.days > 0) {
|
||||
return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'days' });
|
||||
} else if (expirationCountdown.hours && expirationCountdown.hours > 0) {
|
||||
return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'hours' });
|
||||
} else if (expirationCountdown.minutes && expirationCountdown.minutes > 0) {
|
||||
return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'minutes' });
|
||||
} else if (expirationCountdown.seconds && expirationCountdown.seconds > 0) {
|
||||
return expiresAtDate.toRelativeCalendar({ base: now, locale: $locale, unit: 'seconds' });
|
||||
}
|
||||
};
|
||||
|
||||
const isExpired = (expiresAt: string) => {
|
||||
const now = Date.now();
|
||||
const expiration = new Date(expiresAt).getTime();
|
||||
|
||||
return now > expiration;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex w-full gap-4 border-b border-gray-200 py-4 transition-all hover:border-immich-primary dark:border-gray-600 dark:text-immich-gray dark:hover:border-immich-dark-primary"
|
||||
>
|
||||
<div>
|
||||
<ShareCover class="h-[100px] w-[100px] transition-all duration-300 hover:shadow-lg" {link} />
|
||||
</div>
|
||||
<ShareCover class="size-24 transition-all duration-300 hover:shadow-lg" {link} />
|
||||
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="info-top">
|
||||
<div class="font-mono text-xs font-semibold text-gray-500 dark:text-gray-400">
|
||||
{#if link.expiresAt}
|
||||
{#if isExpired(link.expiresAt)}
|
||||
<p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
|
||||
{:else}
|
||||
<p>
|
||||
{$t('expires_date', { values: { date: getCountDownExpirationDate() } })}
|
||||
</p>
|
||||
{/if}
|
||||
{#if isExpired}
|
||||
<p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
|
||||
{:else if expiresAt}
|
||||
<p>
|
||||
{$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
|
||||
</p>
|
||||
{:else}
|
||||
<p>{$t('expires_date', { values: { date: '∞' } })}</p>
|
||||
{/if}
|
||||
|
|
@ -81,7 +65,7 @@
|
|||
<p>{$t('individual_share').toUpperCase()}</p>
|
||||
{/if}
|
||||
|
||||
{#if !link.expiresAt || !isExpired(link.expiresAt)}
|
||||
{#if !isExpired}
|
||||
<a href="{AppRoute.SHARE}/{link.key}" title={$t('go_to_share_page')}>
|
||||
<Icon path={mdiOpenInNew} />
|
||||
</a>
|
||||
|
|
@ -92,37 +76,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-bottom flex gap-4">
|
||||
<div class="info-bottom flex gap-4 text-xl">
|
||||
{#if link.allowUpload}
|
||||
<div
|
||||
class="flex w-[80px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
|
||||
>
|
||||
{$t('upload')}
|
||||
</div>
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.allowDownload}
|
||||
<div
|
||||
class="flex w-[100px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
|
||||
>
|
||||
{$t('download')}
|
||||
</div>
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.showMetadata}
|
||||
<div
|
||||
class="flex w-[60px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
|
||||
>
|
||||
{$t('exif').toUpperCase()}
|
||||
</div>
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('exif').toUpperCase()}</span></Badge>
|
||||
{/if}
|
||||
|
||||
{#if link.password}
|
||||
<div
|
||||
class="flex w-[100px] place-content-center place-items-center rounded-full bg-immich-primary px-2 py-1 text-xs text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray"
|
||||
>
|
||||
{$t('password')}
|
||||
</div>
|
||||
<Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue