feat: image variants per image

web/src/lib/variants/variantOptions.ts

@@ -0,0 +1,71 @@
+import { t } from '@/i18n'
+import type { ImageVariant, VariantFormat } from '@/composables/useImageVariants'
+import { formatType } from '@/lib/mediaFormat'
+import { formatDimensions, formatLabel } from '@/lib/variants/variantFormat'
+
+const SEPARATOR = ' · '
+const VECTOR = 'Vector'
+const SVG_TYPE = 'image/svg+xml'
+const ORIGINAL_VALUE = ''
+
+export interface VariantOption {
+	value: string
+	label: string
+}
+
+export interface OptionSource {
+	url: string
+	width: number | null
+	height: number | null
+	content_type: string
+}
+
+export const ORIGINAL_OPTION_VALUE = ORIGINAL_VALUE
+
+export function isVector(source: OptionSource) {
+	return source.content_type === SVG_TYPE
+}
+
+function sourceSize(source: OptionSource) {
+	if (source.width === null || source.height === null) {
+		return t(VECTOR)
+	}
+	return `${source.width}×${source.height}`
+}
+
+export function capitalised(name: string) {
+	return name.charAt(0).toUpperCase() + name.slice(1)
+}
+
+export function originalOption(source: OptionSource): VariantOption {
+	return {
+		value: ORIGINAL_VALUE,
+		label: [t('Original'), sourceSize(source), formatType(source.content_type)].join(SEPARATOR),
+	}
+}
+
+export function bareOriginalOption(): VariantOption {
+	return { value: ORIGINAL_VALUE, label: t('Original') }
+}
+
+export function variantOption(variant: ImageVariant): VariantOption {
+	return {
+		value: variant.name,
+		label: [
+			capitalised(variant.name),
+			formatDimensions(variant.width, variant.height),
+			formatLabel(variant.format as VariantFormat),
+		].join(SEPARATOR),
+	}
+}
+
+export function buildOptions(source: OptionSource, variants: ImageVariant[]): VariantOption[] {
+	const offered = isVector(source) ? [] : variants.map(variantOption)
+	return [originalOption(source), ...offered]
+}
+
+export function insertedUrl(source: OptionSource, variantName: string) {
+	return variantName === ORIGINAL_VALUE
+		? source.url
+		: `${source.url}?v=${encodeURIComponent(variantName)}`
+}