Add icon for image mediatype

This commit is contained in:
Austin Mroz
2025-12-19 11:57:02 -08:00
parent 842043999c
commit 7ef03de7fb

View File

@@ -172,19 +172,23 @@ function formatDuration(durationSeconds?: number) {
return parts.join(' ') return parts.join(' ')
} }
const itemStats = computed<string[]>(() => { type StatItem = { content?: string; iconClass?: string }
const mediaTypes: Record<string, StatItem> = {
images: { content: t('image'), iconClass: 'icon-[lucide--image]' }
}
const itemStats = computed<StatItem[]>(() => {
if (!activeItem.value) return [] if (!activeItem.value) return []
const user_metadata = getOutputAssetMetadata(activeItem.value.user_metadata) const user_metadata = getOutputAssetMetadata(activeItem.value.user_metadata)
if (!user_metadata) return [] if (!user_metadata) return []
const { allOutputs } = user_metadata const { allOutputs } = user_metadata
const activeOutput = allOutputs?.[activeLoad.value[1]] const activeOutput = allOutputs?.[activeLoad.value[1]]
return [ return [
formatTime(activeItem.value.created_at), { content: formatTime(activeItem.value.created_at) },
formatDuration(user_metadata.executionTimeInSeconds), { content: formatDuration(user_metadata.executionTimeInSeconds) },
allOutputs && `${allOutputs.length} asset`, allOutputs && { content: `${allOutputs.length} asset` },
//TODO asset icon //TODO asset icon
activeOutput?.mediaType (activeOutput?.mediaType && mediaTypes[activeOutput?.mediaType]) ?? {}
].filter((i) => typeof i === 'string') ].filter((i) => !!i)
}) })
watch(outputs.media.value, () => { watch(outputs.media.value, () => {
@@ -279,8 +283,12 @@ function handleCenterWheel(e: WheelEvent) {
@wheel="handleCenterWheel" @wheel="handleCenterWheel"
> >
<div class="flex gap-4 text-muted-foreground h-14 w-full items-center"> <div class="flex gap-4 text-muted-foreground h-14 w-full items-center">
<div v-for="(stat, index) in itemStats" :key="index"> <div
{{ stat }} v-for="({ content, iconClass }, index) in itemStats"
:key="index"
>
<i v-if="iconClass" :class="iconClass" />
{{ content }}
</div> </div>
<div class="grow" /> <div class="grow" />
<Button class="px-4 py-2"> <Button class="px-4 py-2">