File size: 2,017 Bytes
7312c42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import type React from 'react'
import type { ImageItem } from '@/types/timeline'
export function getImageSrc(img: ImageItem): string | null {
if (img.url) return img.url
if (img.local_path) return img.local_path
if (img.file_path) {
// Backward-compat: URL images stored via old code may have url in file_path
if (/^https?:\/\//i.test(img.file_path)) return img.file_path
// Handle both forward slash and backslash as path separator
const lastSlash = Math.max(img.file_path.lastIndexOf('/'), img.file_path.lastIndexOf('\\'))
const filename = lastSlash >= 0 ? img.file_path.slice(lastSlash + 1) : img.file_path
const subfolder = lastSlash >= 0 ? img.file_path.slice(0, lastSlash) : ''
const typeParam = img.source_type === 'output' || img.source_type === 'local' ? img.source_type : 'input'
return `/view?filename=${encodeURIComponent(filename)}&type=${typeParam}&subfolder=${encodeURIComponent(subfolder)}`
}
return null
}
export function imageItemFromPath(filePath: string, sourceType: 'input' | 'output' | 'local' = 'input'): ImageItem {
return {
source_type: sourceType,
file_path: filePath,
file_name: filePath.split('/').pop() ?? filePath,
}
}
export function imageItemFromUrl(url: string): ImageItem {
return {
source_type: 'url',
url,
file_name: url.split('/').pop() ?? url,
}
}
/** Build a CSS tiled background from an array of images. */
export function tiledImageBackground(images: ImageItem[]): React.CSSProperties {
const srcs = images.map((img) => getImageSrc(img)).filter((s): s is string => s !== null)
if (srcs.length === 0) return {}
// Use double-quoted url() to safely handle URLs that contain single quotes.
// Encode any literal double quotes in the URL as %22 (valid URL encoding).
return {
backgroundImage: srcs.map((s) => `url("${s.replaceAll('"', '%22')}")`).join(', '),
backgroundRepeat: 'repeat',
backgroundSize: srcs.map(() => 'auto 100%').join(', '),
backgroundPosition: '0 0',
}
}
|