diff --git a/packages/app/src/composables/useImageFallback.ts b/packages/app/src/composables/useImageFallback.ts index 25aea676..ff42f741 100644 --- a/packages/app/src/composables/useImageFallback.ts +++ b/packages/app/src/composables/useImageFallback.ts @@ -82,10 +82,10 @@ const MICROPHONE_PATH = 'M45.04,95.45v24.11c0,1.83-1.49,3.32-3.32,3.32c-1.83,0-3 export function generatePodcastCoverFallback(title: string, _host?: string): string { const hue = [...title].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - PODCAST - + + + PODCAST + ` @@ -95,13 +95,13 @@ export function generatePodcastCoverFallback(title: string, _host?: string): str export function generateSongCoverFallback(title: string, artist?: string): string { const hue = [...(title + (artist ?? ''))].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - MUSIC - - - ${escapeXml(title.length > 18 ? title.slice(0, 16) + '…' : title)} - ${artist ? `${escapeXml(artist.length > 20 ? artist.slice(0, 18) + '…' : artist)}` : ''} + + + MUSIC + + + ${escapeXml(title.length > 18 ? title.slice(0, 16) + '…' : title)} + ${artist ? `${escapeXml(artist.length > 20 ? artist.slice(0, 18) + '…' : artist)}` : ''} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` } @@ -110,15 +110,15 @@ export function generateSongCoverFallback(title: string, artist?: string): strin export function generateNewsFallback(title: string, source?: string): string { const hue = [...(title + (source ?? ''))].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - NEWS - - - - - - ${source ? `${escapeXml(source.length > 22 ? source.slice(0, 20) + '…' : source)}` : ''} + + + NEWS + + + + + + ${source ? `${escapeXml(source.length > 22 ? source.slice(0, 20) + '…' : source)}` : ''} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` } @@ -127,13 +127,13 @@ export function generateNewsFallback(title: string, source?: string): string { export function generateImageFallback(title: string): string { const hue = [...title].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - IMAGE - - - - ${escapeXml(title.length > 20 ? title.slice(0, 18) + '…' : title)} + + + IMAGE + + + + ${escapeXml(title.length > 20 ? title.slice(0, 18) + '…' : title)} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` } @@ -142,14 +142,14 @@ export function generateImageFallback(title: string): string { export function generatePosterFallback(title: string, year?: number): string { const hue = [...title].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - FILM - - + + + FILM + + ${escapeXml(title.length > 20 ? title.slice(0, 18) + '…' : title)} - ${year ? `${year}` : ''} + ${year ? `${year}` : ''} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` } @@ -158,14 +158,14 @@ export function generatePosterFallback(title: string, year?: number): string { export function generateTVSeriesFallback(title: string, year?: number): string { const hue = [...title].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - SERIES - - + + + SERIES + + ${escapeXml(title.length > 20 ? title.slice(0, 18) + '…' : title)} - ${year ? `${year}` : ''} + ${year ? `${year}` : ''} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` } @@ -322,15 +322,15 @@ loadBookCache() export function generateBookCoverFallback(title: string, author?: string): string { const hue = [...(title + (author ?? ''))].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - - BOOK - - + + + + BOOK + + ${escapeXml(title.length > 22 ? title.slice(0, 20) + '…' : title)} - ${author ? `${escapeXml(author.length > 26 ? author.slice(0, 24) + '…' : author)}` : ''} + ${author ? `${escapeXml(author.length > 26 ? author.slice(0, 24) + '…' : author)}` : ''} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` } @@ -366,14 +366,14 @@ export async function fetchBookCover( export function generatePlaceFallback(name: string, cuisine?: string): string { const hue = [...(name + (cuisine ?? ''))].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360 const svg = ` - - - PLACE - + + + PLACE + - ${cuisine ? `${escapeXml(cuisine.length > 22 ? cuisine.slice(0, 20) + '…' : cuisine)}` : ''} + ${cuisine ? `${escapeXml(cuisine.length > 22 ? cuisine.slice(0, 20) + '…' : cuisine)}` : ''} ` return `data:image/svg+xml,${encodeURIComponent(svg)}` }