Hartmut/HartOMat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: media thumbnails, product dimensions, inline 3D viewer, GLB export

Browse Source 
Bug A: Media Library thumbnails were gray because <img src> cannot send
JWT auth headers. Added useAuthBlob() hook (fetch + createObjectURL) in
MediaBrowser.tsx. Also fixed publish_asset Celery task to populate
product_id + cad_file_id on MediaAsset for thumbnail fallback resolution.

Bug B: Product dimensions now shown in Product Details card with Ruler
icon and "from CAD" label when cad_mesh_attributes.dimensions_mm exists.

Bug C: Replaced 128×128 CAD thumbnail with InlineCadViewer component.
Queries gltf_geometry MediaAssets, fetches GLB via auth fetch → blob URL
→ Three.js Canvas with OrbitControls. Falls back to thumbnail + "Load 3D
Model" button. Polling when GLB generation is in progress.

Bug D: trimesh was in [cad] optional extra but Dockerfile only installed
[dev]. Changed to pip install -e ".[dev,cad]" — trimesh now available in
backend container, GLB + Colors export works.

Also added bbox extraction (STL-first numpy parsing) in render_step_thumbnail
and admin "Re-extract CAD Metadata" bulk endpoint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-03-07 13:27:46 +01:00
parent 10ed1b5e91
commit bfd58e3419
24 changed files with 1502 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/MediaBrowser.tsx
+131 -23
View File
@@ -1,14 +1,54 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
LayoutGrid, LayoutList, Download, Archive, Image, Film, Box, FileCode2, Layers,
ChevronLeft, ChevronRight, Search, ChevronDown, ChevronUp,
ChevronLeft, ChevronRight, Search, ChevronDown, ChevronUp, Trash2, ArrowUpDown,
Loader2,
} from 'lucide-react'
import { toast } from 'sonner'
import {
getMediaAssets, zipDownloadAssets, archiveMediaAsset,
getMediaAssets, zipDownloadAssets, archiveMediaAsset, deleteMediaAssetPermanent,
} from '../api/media'
import type { MediaAsset, MediaAssetType, MediaFilter } from '../api/media'
import { useAuthStore } from '../store/auth'
// ── useAuthBlob ───────────────────────────────────────────────────────────────
function useAuthBlob(url: string | null | undefined, enabled: boolean): string | null {
const token = useAuthStore(s => s.token)
const [blobUrl, setBlobUrl] = useState<string | null>(null)
useEffect(() => {
if (!enabled || !url || !token) {
setBlobUrl(null)
return
}
let objectUrl: string | null = null
let cancelled = false
fetch(url, { headers: { Authorization: `Bearer ${token}` } })
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`)
return res.blob()
})
.then(blob => {
if (cancelled) return
objectUrl = URL.createObjectURL(blob)
setBlobUrl(objectUrl)
})
.catch(() => {
if (!cancelled) setBlobUrl(null)
})
return () => {
cancelled = true
if (objectUrl) URL.revokeObjectURL(objectUrl)
}
}, [url, token, enabled])
return blobUrl
}
// ── Helpers ───────────────────────────────────────────────────────────────────
@@ -35,16 +75,18 @@ const TYPE_COLORS: Record<MediaAssetType, string> = {
const PRIMARY_TYPES: MediaAssetType[] = ['still', 'turntable', 'thumbnail']
const ADVANCED_TYPES: MediaAssetType[] = ['gltf_geometry', 'gltf_production', 'blend_production', 'stl_low', 'stl_high']
const ALL_TYPES: MediaAssetType[] = [...PRIMARY_TYPES, ...ADVANCED_TYPES]
const DEFAULT_TYPES: Set<MediaAssetType> = new Set(['still', 'turntable'])
const DEFAULT_TYPES: Set<MediaAssetType> = new Set(['thumbnail', 'still', 'turntable'])
const isImageAsset = (type: MediaAssetType) => type === 'thumbnail' || type === 'still'
const isVideoAsset = (type: MediaAssetType) => type === 'turntable'
const isImageAsset = (type: MediaAssetType, mime?: string | null) =>
type === 'thumbnail' || type === 'still' || (mime?.startsWith('image/') ?? false)
const isVideoAsset = (type: MediaAssetType, mime?: string | null) =>
type === 'turntable' && (mime?.startsWith('video/') ?? true)
// ── TypeIcon ─────────────────────────────────────────────────────────────────
function TypeIcon({ type }: { type: MediaAssetType }) {
if (isImageAsset(type)) return <Image size={32} className="text-gray-400" />
if (isVideoAsset(type)) return <Film size={32} className="text-gray-400" />
function TypeIcon({ type, mime }: { type: MediaAssetType; mime?: string | null }) {
if (isImageAsset(type, mime)) return <Image size={32} className="text-gray-400" />
if (isVideoAsset(type, mime)) return <Film size={32} className="text-gray-400" />
if (type === 'stl_low' || type === 'stl_high') return <Box size={32} className="text-gray-400" />
if (type === 'gltf_geometry' || type === 'gltf_production') return <FileCode2 size={32} className="text-gray-400" />
return <Layers size={32} className="text-gray-400" />
@@ -61,10 +103,17 @@ function AssetCard({
selected: boolean
onToggle: () => void
}) {
const isImg = isImageAsset(asset.asset_type, asset.mime_type)
const authImgUrl = useAuthBlob(asset.download_url, isImg)
const showImage = isImg && !!authImgUrl
const showImgLoading = isImg && !authImgUrl && !!asset.download_url
const showThumb = !isImg && !isVideoAsset(asset.asset_type, asset.mime_type) && asset.thumbnail_url
return (
<div
className={`relative rounded-lg border-2 overflow-hidden cursor-pointer transition-colors ${
selected ? 'border-blue-500' : 'border-gray-200 hover:border-gray-300'
selected ? 'border-blue-500' : 'border-border-default hover:border-accent'
}`}
onClick={onToggle}
>
@@ -75,31 +124,37 @@ function AssetCard({
onClick={e => e.stopPropagation()}
className="absolute top-2 left-2 z-10 w-4 h-4 cursor-pointer"
/>
{isImageAsset(asset.asset_type) && asset.download_url ? (
{showImage ? (
<img
src={asset.download_url}
src={authImgUrl!}
alt={asset.asset_type}
className="w-full h-40 object-cover bg-gray-50"
className="w-full h-44 object-contain p-2"
style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}
/>
) : isVideoAsset(asset.asset_type) && asset.download_url ? (
) : showImgLoading ? (
<div className="w-full h-44 flex items-center justify-center" style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}>
<Loader2 size={28} className="text-gray-400 animate-spin" />
</div>
) : isVideoAsset(asset.asset_type, asset.mime_type) && asset.download_url ? (
<video
src={asset.download_url}
poster={asset.thumbnail_url ?? undefined}
className="w-full h-40 object-cover bg-gray-900"
className="w-full h-44 object-cover bg-gray-900"
loop
muted
onMouseEnter={e => (e.currentTarget as HTMLVideoElement).play()}
onMouseLeave={e => { (e.currentTarget as HTMLVideoElement).pause(); (e.currentTarget as HTMLVideoElement).currentTime = 0 }}
/>
) : asset.thumbnail_url ? (
) : showThumb ? (
<img
src={asset.thumbnail_url}
src={asset.thumbnail_url!}
alt={asset.asset_type}
className="w-full h-40 object-cover bg-gray-50 opacity-80"
className="w-full h-44 object-contain p-2 opacity-80"
style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}
/>
) : (
<div className="w-full h-40 flex items-center justify-center bg-gray-50">
<TypeIcon type={asset.asset_type} />
<div className="w-full h-44 flex items-center justify-center" style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}>
<TypeIcon type={asset.asset_type} mime={asset.mime_type} />
</div>
)}
<div className="p-2 space-y-1">
@@ -189,6 +244,8 @@ export default function MediaBrowserPage() {
const [productIdInput, setProductIdInput] = useState('')
const [page, setPage] = useState(0)
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
const [sortBy, setSortBy] = useState('created_at')
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
const toggleType = (t: MediaAssetType) => {
setActiveTypes(prev => {
@@ -204,6 +261,8 @@ export default function MediaBrowserPage() {
product_id: productIdInput.trim() || undefined,
skip: page * PAGE_SIZE,
limit: PAGE_SIZE,
sort_by: sortBy,
sort_dir: sortDir,
}
const { data: assets = [], isLoading } = useQuery({
@@ -220,6 +279,14 @@ export default function MediaBrowserPage() {
onError: () => toast.error('Failed to archive asset'),
})
const deleteMutation = useMutation({
mutationFn: deleteMediaAssetPermanent,
onSuccess: () => {
qc.invalidateQueries({ queryKey: ['media'] })
},
onError: () => toast.error('Failed to delete asset'),
})
const toggleSelect = (id: string) => {
setSelectedIds(prev => {
const next = new Set(prev)
@@ -252,6 +319,19 @@ export default function MediaBrowserPage() {
setSelectedIds(new Set())
}
const handleDeleteSelected = async () => {
if (!confirm(`Permanently delete ${selectedIds.size} asset(s)? This cannot be undone.`)) return
let deleted = 0
for (const id of selectedIds) {
try {
await deleteMutation.mutateAsync(id)
deleted++
} catch { /* already toasted per item */ }
}
setSelectedIds(new Set())
toast.success(`${deleted} asset(s) permanently deleted`)
}
const handleDownload = (asset: MediaAsset) => {
if (asset.download_url) {
window.open(asset.download_url, '_blank')
@@ -269,6 +349,27 @@ export default function MediaBrowserPage() {
</p>
</div>
<div className="flex items-center gap-2">
{/* Sort dropdown */}
<div className="flex items-center gap-1 border border-border-default rounded-md px-2 py-1">
<ArrowUpDown size={14} className="text-content-muted shrink-0" />
<select
value={`${sortBy}:${sortDir}`}
onChange={e => {
const [by, dir] = e.target.value.split(':')
setSortBy(by)
setSortDir(dir as 'asc' | 'desc')
setPage(0)
}}
className="text-xs text-content bg-transparent focus:outline-none cursor-pointer"
>
<option value="created_at:desc">Newest first</option>
<option value="created_at:asc">Oldest first</option>
<option value="storage_key:asc">Name A–Z</option>
<option value="storage_key:desc">Name Z–A</option>
<option value="file_size_bytes:desc">Largest first</option>
<option value="file_size_bytes:asc">Smallest first</option>
</select>
</div>
<button
onClick={() => setView('grid')}
className={`p-2 rounded-md transition-colors ${
@@ -311,7 +412,7 @@ export default function MediaBrowserPage() {
className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors ${
activeTypes.has(t)
? `${TYPE_COLORS[t]} border-transparent`
: 'bg-gray-50 text-gray-400 border-gray-200 hover:border-gray-300'
: 'bg-surface-alt text-content-muted border-border-default hover:bg-surface-hover'
}`}
>
{t}
@@ -337,7 +438,7 @@ export default function MediaBrowserPage() {
className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors ${
activeTypes.has(t)
? `${TYPE_COLORS[t]} border-transparent`
: 'bg-gray-50 text-gray-400 border-gray-200 hover:border-gray-300'
: 'bg-surface-alt text-content-muted border-border-default hover:bg-surface-hover'
}`}
>
{t}
@@ -439,11 +540,18 @@ export default function MediaBrowserPage() {
</button>
<button
onClick={handleArchiveSelected}
className="flex items-center gap-2 text-sm bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition-colors"
className="flex items-center gap-2 text-sm bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg transition-colors"
>
<Archive size={16} />
Archive
</button>
<button
onClick={handleDeleteSelected}
className="flex items-center gap-2 text-sm bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition-colors"
>
<Trash2 size={16} />
Delete
</button>
<button
onClick={() => setSelectedIds(new Set())}
className="text-gray-400 hover:text-white transition-colors text-lg leading-none"