Spaces:
Running
Running
File size: 5,612 Bytes
5f3e9f5 | 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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | import { Download, Eye, ImageOff, Package } from 'lucide-react'
import { useState } from 'react'
import { api } from '../api/client'
import { useToast } from '../store/toast'
import HtmlPreviewModal from './HtmlPreviewModal'
interface Props {
/**
* Display-only; not used to construct URLs (files already contain any
* batch-folder prefix). Kept in the props so callers don't need to be
* edited.
*/
screenshotFolder?: string
files: string[]
title?: string
}
export default function ScreenshotGallery(props: Props) {
const { files, title = 'Screenshots' } = props
// props.screenshotFolder is intentionally unused — see Props docs.
const [preview, setPreview] = useState<string | null>(null)
const [zipping, setZipping] = useState(false)
const toast = useToast()
if (files.length === 0) {
return (
<div
className="card flex flex-col items-center justify-center gap-2 py-10 text-center"
role="status"
>
<div
aria-hidden="true"
className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-400 dark:bg-white/5 dark:text-slate-500"
>
<ImageOff size={20} />
</div>
<div className="text-sm font-medium text-slate-700 dark:text-slate-200">
No screenshots yet
</div>
<div className="text-xs text-slate-500 dark:text-slate-400">
Start a run and finished screenshots will appear here.
</div>
</div>
)
}
const downloadZip = async () => {
setZipping(true)
try {
// `files` are already paths relative to OUTPUT_FOLDER (e.g. "batch 3/5(1).png"
// or "5(1).png"). The backend /download-zip handler resolves them under
// OUTPUT_FOLDER itself, so we MUST NOT prepend screenshotFolder again —
// doing so produced "batch 3/batch 3/5(1).png" and empty ZIPs.
const paths = files
const blob = await api.downloadZip(paths, 'screenshots')
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'screenshots.zip'
document.body.appendChild(a)
a.click()
a.remove()
URL.revokeObjectURL(url)
} catch (err) {
toast.push({
variant: 'error',
title: 'Download failed',
message: err instanceof Error ? err.message : String(err),
})
} finally {
setZipping(false)
}
}
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">
{title} ({files.length})
</h3>
<button className="btn-secondary" onClick={downloadZip} disabled={zipping}>
<Package size={16} /> {zipping ? 'Zipping…' : 'Download all (ZIP)'}
</button>
</div>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
{files.map((filename) => {
const url = api.screenshotUrl(filename)
return (
<div
key={filename}
className="glass group overflow-hidden !p-0"
>
{/* `object-contain` so we never crop content; the checkered */}
{/* background makes letterboxed bars look intentional. */}
<div
className="relative aspect-video overflow-hidden"
style={{
backgroundColor: 'rgb(var(--bg-muted))',
backgroundImage:
'linear-gradient(45deg, rgba(148,163,184,0.12) 25%, transparent 25%), linear-gradient(-45deg, rgba(148,163,184,0.12) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.12) 75%), linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.12) 75%)',
backgroundSize: '16px 16px',
backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0',
}}
>
<img
src={url}
alt={filename}
loading="lazy"
className="h-full w-full cursor-zoom-in object-contain"
onClick={() => setPreview(url)}
/>
</div>
<div className="flex items-center justify-between gap-2 border-t border-slate-200 px-3 py-2 dark:border-white/10">
<span
className="truncate text-xs text-slate-600 dark:text-slate-300"
title={filename}
>
{filename.split('/').pop()}
</span>
<div className="flex gap-1">
<button
className="rounded p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
onClick={() => setPreview(url)}
title="Preview"
>
<Eye size={14} />
</button>
<a
className="rounded p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
href={url}
download
title="Download"
>
<Download size={14} />
</a>
</div>
</div>
</div>
)
})}
</div>
{preview && (
<HtmlPreviewModal
kind="image"
src={preview}
title={preview.split('/').pop() ?? 'Screenshot'}
onClose={() => setPreview(null)}
/>
)}
</div>
)
}
|