feat: image variants per image
This commit is contained in:
fsylvain committed
1 parent
f567866161
commit
951fef18ba
92 files changed
+8695
-413
No files matched your search
@@ -0,0 +1,224 @@
|
||||
<script setup lang="ts">
|
||||
import { t } from '@/i18n'
|
||||
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { useMediaQuery } from '@vueuse/core'
|
||||
import { useLocalizedToast } from '@/i18n/presentation'
|
||||
import VariantImageRow from '@/components/variants/VariantImageRow.vue'
|
||||
import VariantOriginalBlock from '@/components/variants/VariantOriginalBlock.vue'
|
||||
import VariantPreviewDialog from '@/components/variants/VariantPreviewDialog.vue'
|
||||
import { useImageVariantRows } from '@/composables/useImageVariantRows'
|
||||
import type { MediaItem } from '@/composables/useMedia'
|
||||
import type { MediaVariantItem } from '@/composables/useMediaVariants'
|
||||
|
||||
const ROOMY_QUERY = '(min-width: 40rem)'
|
||||
const SKELETON_ROWS = 5
|
||||
const TOAST_DURATION_MS = 5000
|
||||
const SETTINGS_VARIANTS_PATH = '/settings/media/variants'
|
||||
const RETRY_BUTTON =
|
||||
'h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-7'
|
||||
|
||||
const props = defineProps<{ item: MediaItem }>()
|
||||
|
||||
const emit = defineEmits<{ gone: [] }>()
|
||||
|
||||
const toast = useLocalizedToast()
|
||||
const roomy = useMediaQuery(ROOMY_QUERY)
|
||||
const rows = useImageVariantRows(props.item.id, () => emit('gone'))
|
||||
|
||||
const previewOpen = ref(false)
|
||||
const previewTarget = ref<MediaVariantItem | null>(null)
|
||||
let previewOpener: HTMLElement | null = null
|
||||
|
||||
const total = computed(() => rows.items.value.length)
|
||||
const showList = computed(
|
||||
() => rows.status.value === 'ready' && rows.unsupported.value === null && total.value > 0,
|
||||
)
|
||||
const showEmpty = computed(
|
||||
() => rows.status.value === 'ready' && rows.unsupported.value === null && total.value === 0,
|
||||
)
|
||||
const generateAllDisabled = computed(() => rows.allGenerated.value || rows.anyBusy.value)
|
||||
|
||||
onMounted(rows.load)
|
||||
|
||||
async function copyUrl(variant: MediaVariantItem) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(`${window.location.origin}${variant.url}`)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
toast.add(() => ({
|
||||
id: `media-variant-url-copied-${props.item.id}-${variant.name}`,
|
||||
color: 'success' as const,
|
||||
icon: 'i-lucide-circle-check',
|
||||
get title() {
|
||||
return t('URL copied')
|
||||
},
|
||||
get description() {
|
||||
return t('Paste it wherever you need the image address.')
|
||||
},
|
||||
duration: TOAST_DURATION_MS,
|
||||
}))
|
||||
}
|
||||
|
||||
function openPreview(variant: MediaVariantItem, opener: HTMLElement) {
|
||||
previewOpener = opener
|
||||
previewTarget.value = variant
|
||||
previewOpen.value = true
|
||||
}
|
||||
|
||||
async function onPreviewOpenChange(open: boolean) {
|
||||
previewOpen.value = open
|
||||
if (open) {
|
||||
return
|
||||
}
|
||||
await nextTick()
|
||||
previewOpener?.focus()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div data-testid="variants-tab" class="flex flex-col gap-4">
|
||||
<section
|
||||
v-if="rows.status.value === 'loading' && rows.showSkeleton.value"
|
||||
:aria-label="t('Loading variants')"
|
||||
aria-busy="true"
|
||||
class="border border-default"
|
||||
>
|
||||
<div
|
||||
v-for="row in SKELETON_ROWS"
|
||||
:key="row"
|
||||
data-testid="variant-skeleton-row"
|
||||
class="flex flex-col gap-2 px-3 py-2.5"
|
||||
:class="row > 1 ? 'border-t border-muted' : ''"
|
||||
>
|
||||
<USkeleton class="h-3.25 w-[30%] rounded-none bg-accented" />
|
||||
<USkeleton class="h-2.75 w-[55%] rounded-none bg-accented" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<UAlert
|
||||
v-else-if="rows.status.value === 'error'"
|
||||
role="alert"
|
||||
color="error"
|
||||
variant="soft"
|
||||
orientation="vertical"
|
||||
:close="false"
|
||||
icon="i-lucide-circle-x"
|
||||
:title="t('Couldn\'t load variants')"
|
||||
:description="t('Check your connection and try again.')"
|
||||
:ui="{ actions: 'mt-2' }"
|
||||
>
|
||||
<template #actions>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
icon="i-lucide-rotate-cw"
|
||||
:class="RETRY_BUTTON"
|
||||
:ui="{ leadingIcon: 'size-3.5' }"
|
||||
@click="rows.load"
|
||||
>
|
||||
{{ t('Try again') }}
|
||||
</UButton>
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
<template v-else-if="rows.status.value === 'ready'">
|
||||
<VariantOriginalBlock :item="item" />
|
||||
|
||||
<UAlert
|
||||
v-if="rows.unsupported.value !== null"
|
||||
color="info"
|
||||
variant="soft"
|
||||
:close="false"
|
||||
icon="i-lucide-info"
|
||||
:title="t('Variants aren\'t generated for this format.')"
|
||||
:description="t('SVG images are served as they are.')"
|
||||
/>
|
||||
|
||||
<UEmpty
|
||||
v-else-if="showEmpty"
|
||||
variant="naked"
|
||||
icon="i-lucide-layers"
|
||||
:title="t('No variants defined')"
|
||||
:description="
|
||||
t('Define a variant in Settings to get resized copies of this image.')
|
||||
"
|
||||
:ui="{
|
||||
root: 'gap-3 border border-default bg-default px-6 py-7',
|
||||
header: 'gap-3',
|
||||
avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
|
||||
title: 'text-[0.9375rem] font-semibold',
|
||||
description: 'max-w-95 text-muted text-pretty',
|
||||
}"
|
||||
>
|
||||
<template #actions>
|
||||
<RouterLink
|
||||
:to="SETTINGS_VARIANTS_PATH"
|
||||
class="inline-flex min-h-11 items-center gap-1 font-medium text-highlighted underline underline-offset-3 sm:min-h-5"
|
||||
>
|
||||
{{ t('Settings → Media → Variants') }}
|
||||
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
|
||||
</RouterLink>
|
||||
</template>
|
||||
</UEmpty>
|
||||
|
||||
<template v-else-if="showList">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex flex-1 flex-col">
|
||||
<span class="font-semibold text-highlighted">{{
|
||||
t('{0} of {1} generated', [rows.generatedCount.value, total])
|
||||
}}</span>
|
||||
<span
|
||||
v-if="rows.generatedCount.value === 0 && !rows.anyBusy.value"
|
||||
class="text-xs/5 text-muted"
|
||||
>{{ t('Nothing generated yet.') }}</span
|
||||
>
|
||||
<span v-if="rows.anyBusy.value" class="text-xs/5 text-info">{{
|
||||
t('Generating variants…')
|
||||
}}</span>
|
||||
</div>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:icon="rows.anyBusy.value ? 'i-lucide-loader-circle' : 'i-lucide-zap'"
|
||||
:disabled="generateAllDisabled"
|
||||
class="h-11 border border-accented bg-default px-3 text-sm font-medium text-highlighted ring-0 sm:h-8"
|
||||
:ui="{
|
||||
leadingIcon: rows.anyBusy.value ? 'size-4 animate-spin' : 'size-4',
|
||||
}"
|
||||
@click="rows.generateAll"
|
||||
>
|
||||
{{ rows.anyBusy.value ? t('Generating…') : t('Generate all') }}
|
||||
</UButton>
|
||||
</div>
|
||||
<ul class="border border-default">
|
||||
<VariantImageRow
|
||||
v-for="(row, index) in rows.rows.value"
|
||||
:key="row.item.name"
|
||||
:row="row"
|
||||
:original-size="item.size"
|
||||
:roomy="roomy"
|
||||
:first="index === 0"
|
||||
@copy="copyUrl(row.item)"
|
||||
@preview="openPreview(row.item, $event)"
|
||||
@purge="rows.purge(row.item.name)"
|
||||
@generate="rows.generateOne(row.item.name)"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<p role="status" aria-live="polite" data-testid="variants-announcer" class="sr-only">
|
||||
{{ rows.announcement.value }}
|
||||
</p>
|
||||
|
||||
<VariantPreviewDialog
|
||||
v-if="previewTarget"
|
||||
:open="previewOpen"
|
||||
:variant="previewTarget"
|
||||
:original="item"
|
||||
@update:open="onPreviewOpenChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user