Improve studio artwork media revisions
This commit is contained in:
@@ -23,6 +23,7 @@ const EDIT_SECTIONS = [
|
||||
|
||||
const TABS = [
|
||||
{ id: 'details', label: 'Details', icon: 'fa-solid fa-pen-fancy' },
|
||||
{ id: 'media', label: 'Media', icon: 'fa-solid fa-photo-film' },
|
||||
{ id: 'evolution', label: 'Evolution', icon: 'fa-solid fa-code-branch' },
|
||||
{ id: 'tags', label: 'Tags', icon: 'fa-solid fa-tags' },
|
||||
{ id: 'taxonomy', label: 'Category', icon: 'fa-solid fa-palette' },
|
||||
@@ -43,6 +44,28 @@ function formatBytes(bytes) {
|
||||
return (bytes / 1048576).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
function resolveFileExtension(fileName, fallbackExt = '') {
|
||||
const normalizedFallback = String(fallbackExt || '').trim().replace(/^\./, '').toLowerCase()
|
||||
const normalizedName = String(fileName || '').trim()
|
||||
const fromName = normalizedName.includes('.')
|
||||
? normalizedName.split('.').pop()?.trim().toLowerCase()
|
||||
: ''
|
||||
|
||||
return fromName || normalizedFallback
|
||||
}
|
||||
|
||||
function isArchiveArtwork(fileName, mimeType, fileExt) {
|
||||
const extension = resolveFileExtension(fileName, fileExt)
|
||||
if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) return true
|
||||
|
||||
const normalizedMime = String(mimeType || '').toLowerCase()
|
||||
return normalizedMime.includes('zip')
|
||||
|| normalizedMime.includes('rar')
|
||||
|| normalizedMime.includes('7z')
|
||||
|| normalizedMime.includes('tar')
|
||||
|| normalizedMime.includes('gzip')
|
||||
}
|
||||
|
||||
function formatSchedulePreview(value, timezone) {
|
||||
if (!value) return 'Pick a date and time'
|
||||
|
||||
@@ -303,6 +326,12 @@ export default function StudioArtworkEdit() {
|
||||
const fileInputRef = useRef(null)
|
||||
const [replacing, setReplacing] = useState(false)
|
||||
const [thumbUrl, setThumbUrl] = useState(artwork?.thumb_url_lg || artwork?.thumb_url || null)
|
||||
const downloadUrl = artwork?.download_url || (artwork?.id ? `/download/artwork/${artwork.id}` : null)
|
||||
const [selectedMediaId, setSelectedMediaId] = useState('cover')
|
||||
const [fileExt, setFileExt] = useState(artwork?.file_ext || '')
|
||||
const [mimeType, setMimeType] = useState(artwork?.mime_type || '')
|
||||
const [hasArchiveFile, setHasArchiveFile] = useState(Boolean(artwork?.has_archive_file))
|
||||
const [artworkScreenshots, setArtworkScreenshots] = useState(() => (Array.isArray(artwork?.screenshots) ? artwork.screenshots : []))
|
||||
const [fileMeta, setFileMeta] = useState({
|
||||
name: artwork?.file_name || '—',
|
||||
size: artwork?.file_size || 0,
|
||||
@@ -319,6 +348,48 @@ export default function StudioArtworkEdit() {
|
||||
const [historyData, setHistoryData] = useState(null)
|
||||
const [historyLoading, setHistoryLoading] = useState(false)
|
||||
const [restoring, setRestoring] = useState(null)
|
||||
const [archiveRevisionSaving, setArchiveRevisionSaving] = useState(false)
|
||||
const [archiveRevisionError, setArchiveRevisionError] = useState('')
|
||||
const [archiveCoverFile, setArchiveCoverFile] = useState(null)
|
||||
const [archiveCoverPreview, setArchiveCoverPreview] = useState(null)
|
||||
const [archivePackageFile, setArchivePackageFile] = useState(null)
|
||||
const [archiveExtraScreenshots, setArchiveExtraScreenshots] = useState([])
|
||||
const [archiveExtraPreviews, setArchiveExtraPreviews] = useState([])
|
||||
// Per-slot screenshot replacement: { slotIndex: File }
|
||||
const [replaceShots, setReplaceShots] = useState({})
|
||||
const [replaceShotPreviews, setReplaceShotPreviews] = useState({})
|
||||
const [removedShots, setRemovedShots] = useState({})
|
||||
// Staged single-image replace (no auto-upload)
|
||||
const [pendingReplaceFile, setPendingReplaceFile] = useState(null)
|
||||
const [pendingReplacePreview, setPendingReplacePreview] = useState(null)
|
||||
// Drag-over tracking for drop zones
|
||||
const [dragOverZone, setDragOverZone] = useState(null)
|
||||
const screenshotItems = artworkScreenshots
|
||||
const activeScreenshotCount = screenshotItems.filter((_, index) => !removedShots[index]).length
|
||||
const currentFileExt = resolveFileExtension(fileMeta.name, fileExt)
|
||||
const archiveArtwork = hasArchiveFile || isArchiveArtwork(fileMeta.name, mimeType, fileExt)
|
||||
const quickReplaceSupported = !archiveArtwork
|
||||
const mediaItems = useMemo(() => {
|
||||
const coverItem = {
|
||||
id: 'cover',
|
||||
label: archiveArtwork ? 'Cover preview' : 'Main artwork',
|
||||
url: thumbUrl,
|
||||
width: fileMeta.width || 0,
|
||||
height: fileMeta.height || 0,
|
||||
}
|
||||
|
||||
const screenshotMedia = screenshotItems.map((item, index) => ({
|
||||
id: item.id || `shot-${index + 1}`,
|
||||
label: item.label || `Screenshot ${index + 1}`,
|
||||
url: item.thumb_url || item.url || null,
|
||||
width: 0,
|
||||
height: 0,
|
||||
}))
|
||||
|
||||
return [coverItem, ...screenshotMedia].filter((item) => Boolean(item.url))
|
||||
}, [archiveArtwork, fileMeta.height, fileMeta.width, screenshotItems, thumbUrl])
|
||||
const activeMedia = mediaItems.find((item) => item.id === selectedMediaId) || mediaItems[0] || null
|
||||
const activeMediaLabel = activeMedia?.label || (archiveArtwork ? 'Cover preview' : 'Main artwork')
|
||||
|
||||
// ── Derived ────────────────────────────────────────────────────────────────
|
||||
const selectedCT = contentTypes.find((ct) => ct.id === contentTypeId) || null
|
||||
@@ -760,8 +831,7 @@ export default function StudioArtworkEdit() {
|
||||
}
|
||||
}, [title, description, visibility, publishMode, scheduledAt, userTimezone, groupSlug, primaryAuthorUserId, contributorUserIds, contributorCredits, contentTypeId, selectedLeafCategoryId, tagSlugs, titleSource, descriptionSource, tagsSource, categorySource, evolutionTarget, evolutionRelationType, evolutionNote, artwork?.id, evolutionRelationTypes])
|
||||
|
||||
const handleFileReplace = async (e) => {
|
||||
const file = e.target.files?.[0]
|
||||
const handleFileReplace = async (file) => {
|
||||
if (!file) return
|
||||
setReplacing(true)
|
||||
try {
|
||||
@@ -776,12 +846,13 @@ export default function StudioArtworkEdit() {
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok && data.thumb_url) {
|
||||
setThumbUrl(data.thumb_url)
|
||||
setFileMeta({ name: file.name, size: file.size, width: data.width || 0, height: data.height || 0 })
|
||||
syncMediaPayload(data, { fallbackName: file.name, fallbackSize: file.size })
|
||||
if (data.version_number) setVersionCount(data.version_number)
|
||||
if (typeof data.requires_reapproval !== 'undefined') setRequiresReapproval(data.requires_reapproval)
|
||||
setChangeNote('')
|
||||
setShowChangeNote(false)
|
||||
if (pendingReplacePreview) { URL.revokeObjectURL(pendingReplacePreview); setPendingReplacePreview(null) }
|
||||
setPendingReplaceFile(null)
|
||||
} else {
|
||||
alert(data.error || 'File replacement failed.')
|
||||
}
|
||||
@@ -820,7 +891,8 @@ export default function StudioArtworkEdit() {
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok && data.success) {
|
||||
setVersionCount((n) => n + 1)
|
||||
syncMediaPayload(data)
|
||||
if (data.version_number) setVersionCount(data.version_number)
|
||||
setShowHistory(false)
|
||||
} else {
|
||||
alert(data.error || 'Restore failed.')
|
||||
@@ -832,6 +904,94 @@ export default function StudioArtworkEdit() {
|
||||
}
|
||||
}
|
||||
|
||||
const syncMediaPayload = useCallback((payload, options = {}) => {
|
||||
const fallbackName = typeof options.fallbackName === 'string' ? options.fallbackName : null
|
||||
const fallbackSize = Number.isFinite(options.fallbackSize) ? Number(options.fallbackSize) : null
|
||||
|
||||
if (payload?.thumb_url) {
|
||||
setThumbUrl(payload.thumb_url_lg || payload.thumb_url)
|
||||
}
|
||||
|
||||
setSelectedMediaId('cover')
|
||||
setFileMeta({
|
||||
name: payload?.file_name || fallbackName || '—',
|
||||
size: typeof payload?.file_size === 'number' ? payload.file_size : (fallbackSize ?? 0),
|
||||
width: payload?.width || 0,
|
||||
height: payload?.height || 0,
|
||||
})
|
||||
|
||||
if (typeof payload?.file_ext === 'string') setFileExt(payload.file_ext)
|
||||
if (typeof payload?.mime_type === 'string') setMimeType(payload.mime_type)
|
||||
if (typeof payload?.has_archive_file !== 'undefined') setHasArchiveFile(Boolean(payload.has_archive_file))
|
||||
if (Array.isArray(payload?.screenshots)) setArtworkScreenshots(payload.screenshots)
|
||||
}, [])
|
||||
|
||||
const resetArchiveRevisionState = useCallback(() => {
|
||||
setArchiveRevisionError('')
|
||||
if (archiveCoverPreview) URL.revokeObjectURL(archiveCoverPreview)
|
||||
setArchiveCoverFile(null)
|
||||
setArchiveCoverPreview(null)
|
||||
setArchivePackageFile(null)
|
||||
setArchiveExtraScreenshots([])
|
||||
archiveExtraPreviews.forEach((url) => URL.revokeObjectURL(url))
|
||||
setArchiveExtraPreviews([])
|
||||
Object.values(replaceShotPreviews).forEach((url) => URL.revokeObjectURL(url))
|
||||
setReplaceShots({})
|
||||
setReplaceShotPreviews({})
|
||||
setRemovedShots({})
|
||||
}, [archiveCoverPreview, archiveExtraPreviews, replaceShotPreviews])
|
||||
|
||||
const handleArchiveRevisionSubmit = async () => {
|
||||
const hasReplaceShots = Object.values(replaceShots).some(Boolean)
|
||||
const hasRemovedShots = Object.values(removedShots).some(Boolean)
|
||||
if (!archiveCoverFile && !archivePackageFile && archiveExtraScreenshots.length === 0 && !hasReplaceShots && !hasRemovedShots) {
|
||||
setArchiveRevisionError('Choose a new cover screenshot, a new archive file, or extra screenshots first.')
|
||||
return
|
||||
}
|
||||
|
||||
setArchiveRevisionSaving(true)
|
||||
setArchiveRevisionError('')
|
||||
|
||||
try {
|
||||
const fd = new FormData()
|
||||
if (archiveCoverFile) fd.append('cover_file', archiveCoverFile)
|
||||
if (archivePackageFile) fd.append('archive_file', archivePackageFile)
|
||||
archiveExtraScreenshots.forEach((file) => fd.append('screenshot_files[]', file))
|
||||
Object.entries(replaceShots).forEach(([idx, file]) => {
|
||||
if (file) fd.append(`replace_shots[${idx}]`, file)
|
||||
})
|
||||
Object.entries(removedShots).forEach(([idx, removed]) => {
|
||||
if (removed) fd.append('remove_shots[]', idx)
|
||||
})
|
||||
if (changeNote.trim()) fd.append('change_note', changeNote.trim())
|
||||
|
||||
const res = await fetch(`/api/studio/artworks/${artwork.id}/revise-media`, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||||
credentials: 'same-origin',
|
||||
body: fd,
|
||||
})
|
||||
|
||||
const data = await res.json()
|
||||
if (!res.ok || !data.success) {
|
||||
setArchiveRevisionError(data.error || 'Archive revision failed.')
|
||||
return
|
||||
}
|
||||
|
||||
syncMediaPayload(data)
|
||||
if (data.version_number) setVersionCount(data.version_number)
|
||||
if (typeof data.requires_reapproval !== 'undefined') setRequiresReapproval(data.requires_reapproval)
|
||||
setShowChangeNote(false)
|
||||
setChangeNote('')
|
||||
resetArchiveRevisionState()
|
||||
} catch (err) {
|
||||
console.error('Archive revision failed:', err)
|
||||
setArchiveRevisionError('Archive revision failed.')
|
||||
} finally {
|
||||
setArchiveRevisionSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
return (
|
||||
<StudioLayout title="Edit Artwork">
|
||||
@@ -876,112 +1036,106 @@ export default function StudioArtworkEdit() {
|
||||
<div className="space-y-4 xl:sticky xl:top-6 xl:max-h-[calc(100vh-48px)] xl:overflow-y-auto xl:overscroll-contain xl:pr-1 nova-scrollbar">
|
||||
|
||||
{/* Preview Card */}
|
||||
<Section>
|
||||
<SectionTitle icon="fa-solid fa-image">Preview</SectionTitle>
|
||||
<Section className="overflow-hidden">
|
||||
<SectionTitle icon="fa-solid fa-image">Media</SectionTitle>
|
||||
|
||||
{/* Thumbnail */}
|
||||
<div className="relative aspect-square rounded-xl overflow-hidden bg-white/5 border border-white/10 mb-4">
|
||||
{thumbUrl ? (
|
||||
<img
|
||||
src={thumbUrl}
|
||||
alt={title || 'Artwork preview'}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-slate-600">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
|
||||
<path d="M21 15l-5-5L5 21" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{replacing && (
|
||||
<div className="absolute inset-0 bg-black/60 flex items-center justify-center">
|
||||
<div className="w-7 h-7 border-2 border-accent/30 border-t-accent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-[28px] border border-white/10 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.14),_transparent_54%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-3 shadow-[0_20px_60px_rgba(2,8,23,0.28)]">
|
||||
<div className="relative overflow-hidden rounded-[22px] border border-white/10 bg-black/25">
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 flex items-start justify-between gap-2 p-3">
|
||||
<span className="rounded-full border border-white/10 bg-black/45 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-white/75">
|
||||
{archiveArtwork ? 'Archive package' : 'Single image'}
|
||||
</span>
|
||||
<span className="rounded-full border border-accent/20 bg-accent/12 px-2.5 py-1 text-[10px] font-semibold text-accent">
|
||||
v{versionCount}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* File Metadata */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium text-white truncate" title={fileMeta.name}>{fileMeta.name}</p>
|
||||
<div className="flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-500">
|
||||
{fileMeta.width > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" className="text-slate-600" aria-hidden="true">
|
||||
<path d="M2 3a1 1 0 011-1h10a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm2 1v8h8V4H4z" />
|
||||
</svg>
|
||||
{fileMeta.width} × {fileMeta.height}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" className="text-slate-600" aria-hidden="true">
|
||||
<path d="M4 1.5a.5.5 0 00-1 0V3H1.5a.5.5 0 000 1h11a.5.5 0 000-1H11V1.5a.5.5 0 00-1 0V3H6V1.5a.5.5 0 00-1 0V3H4V1.5z" />
|
||||
<path d="M1.5 5v8.5A1.5 1.5 0 003 15h10a1.5 1.5 0 001.5-1.5V5h-13z" />
|
||||
</svg>
|
||||
{formatBytes(fileMeta.size)}
|
||||
</span>
|
||||
<div className="relative aspect-[4/5] min-h-[280px]">
|
||||
{activeMedia?.url ? (
|
||||
<img
|
||||
src={activeMedia.url}
|
||||
alt={title || 'Artwork preview'}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-slate-600">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
|
||||
<path d="M21 15l-5-5L5 21" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-black/85 via-black/45 to-transparent p-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/50">{activeMediaLabel}</p>
|
||||
<p className="mt-1 truncate text-sm font-semibold text-white" title={fileMeta.name}>{fileMeta.name}</p>
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-white/65">
|
||||
{currentFileExt && (
|
||||
<span className="rounded-full border border-white/10 bg-white/10 px-2 py-0.5 uppercase tracking-[0.14em] text-white/70">{currentFileExt}</span>
|
||||
)}
|
||||
{screenshotItems.length > 0 && (
|
||||
<span>{screenshotItems.length} screenshot{screenshotItems.length !== 1 ? 's' : ''}</span>
|
||||
)}
|
||||
{fileMeta.width > 0 && (
|
||||
<span>{fileMeta.width} × {fileMeta.height}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{replacing && (
|
||||
<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/60">
|
||||
<div className="flex items-center gap-3 rounded-full border border-white/10 bg-black/55 px-4 py-2 text-xs text-white/80 backdrop-blur">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-accent/30 border-t-accent animate-spin" />
|
||||
Uploading new revision…
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Version + History */}
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<span className="inline-flex items-center gap-1 text-[10px] font-bold text-accent bg-accent/15 px-2 py-0.5 rounded-full border border-accent/20">
|
||||
v{versionCount}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadVersionHistory}
|
||||
className="inline-flex items-center gap-1.5 text-[11px] text-slate-400 hover:text-accent transition-colors"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M8 3.5a4.5 4.5 0 00-4.04 2.51.75.75 0 01-1.34-.67A6 6 0 1114 8a.75.75 0 01-1.5 0A4.5 4.5 0 008 3.5z" clipRule="evenodd" />
|
||||
<path fillRule="evenodd" d="M4.75.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75h3.5a.75.75 0 000-1.5H5.5V1.5a.75.75 0 00-.75-.75z" clipRule="evenodd" />
|
||||
</svg>
|
||||
History
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-[11px] text-slate-300">
|
||||
<span className="font-semibold uppercase tracking-[0.16em] text-slate-500">Size</span>
|
||||
<span className="font-semibold text-white">{formatBytes(fileMeta.size)}</span>
|
||||
</div>
|
||||
|
||||
{requiresReapproval && (
|
||||
<p className="text-[11px] text-amber-400/90 flex items-center gap-1.5 mt-1">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 00-1.964 0L.165 13.233c-.457.778.091 1.767.982 1.767h13.706c.891 0 1.439-.989.982-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995A.905.905 0 018 5zm.002 6a1 1 0 100 2 1 1 0 000-2z" />
|
||||
</svg>
|
||||
Requires re-approval after replace
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Replace File */}
|
||||
<div className="mt-4 pt-4 border-t border-white/8 space-y-2.5">
|
||||
{showChangeNote && (
|
||||
<TextInput
|
||||
value={changeNote}
|
||||
onChange={(e) => setChangeNote(e.target.value)}
|
||||
placeholder="Change note (optional)…"
|
||||
size="sm"
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="xs"
|
||||
loading={replacing}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
{replacing ? 'Replacing…' : 'Replace file'}
|
||||
</Button>
|
||||
{!showChangeNote && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowChangeNote(true)}
|
||||
className="text-[11px] text-slate-500 hover:text-white transition-colors"
|
||||
{downloadUrl ? (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
aria-label="Download artwork"
|
||||
title="Download artwork"
|
||||
className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-emerald-400/25 bg-emerald-400/10 text-emerald-200 transition hover:bg-emerald-400/15 hover:text-white"
|
||||
>
|
||||
+ note
|
||||
</button>
|
||||
)}
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path d="M8.75 1.5a.75.75 0 00-1.5 0v6.19L5.53 5.97a.75.75 0 10-1.06 1.06l3 3a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06L8.75 7.69V1.5z" />
|
||||
<path d="M2.5 10.75A.75.75 0 013.25 10h9.5a.75.75 0 010 1.5h-9.5a.75.75 0 01-.75-.75z" />
|
||||
<path d="M2 12.5A1.5 1.5 0 013.5 11h9a1.5 1.5 0 011.5 1.5v1A1.5 1.5 0 0112.5 15h-9A1.5 1.5 0 012 13.5v-1z" />
|
||||
</svg>
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
<input ref={fileInputRef} type="file" className="hidden" accept="image/*" onChange={handleFileReplace} />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('media')}
|
||||
className="group flex w-full items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-left transition hover:border-white/20 hover:bg-white/[0.05]"
|
||||
>
|
||||
<span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-slate-300 transition group-hover:border-accent/30 group-hover:bg-accent/10 group-hover:text-accent">
|
||||
<i className="fa-solid fa-photo-film text-[13px]" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Media</span>
|
||||
<span className="mt-1 block text-sm font-medium text-white">
|
||||
{archiveArtwork ? 'Manage package and screenshots' : 'Replace image and manage screenshots'}
|
||||
</span>
|
||||
</span>
|
||||
<span className="pt-0.5 text-slate-600 transition group-hover:text-slate-300" aria-hidden="true">
|
||||
<i className="fa-solid fa-chevron-right text-[11px]" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
@@ -1502,6 +1656,482 @@ export default function StudioArtworkEdit() {
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* ── Media tab ── */}
|
||||
{activeTab === 'media' && (
|
||||
<Section id="media" className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<SectionTitle icon="fa-solid fa-photo-film">Media & Revisions</SectionTitle>
|
||||
<p className="-mt-2 text-sm text-slate-400">
|
||||
{quickReplaceSupported
|
||||
? 'Drop or upload a new image, then add or manage up to 4 extra screenshots in the same media workspace.'
|
||||
: 'Replace the archive package, update the cover screenshot, or add / replace screenshots — saved together as one revision.'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadVersionHistory}
|
||||
className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-semibold text-slate-300 transition hover:border-accent/30 hover:bg-accent/10 hover:text-accent"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M8 3.5a4.5 4.5 0 00-4.04 2.51.75.75 0 01-1.34-.67A6 6 0 1114 8a.75.75 0 01-1.5 0A4.5 4.5 0 008 3.5z" clipRule="evenodd" />
|
||||
<path fillRule="evenodd" d="M4.75.75a.75.75 0 00-.75.75v3.5c0 .414.336.75.75.75h3.5a.75.75 0 000-1.5H5.5V1.5a.75.75 0 00-.75-.75z" clipRule="evenodd" />
|
||||
</svg>
|
||||
History
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Current file summary bar */}
|
||||
<div className="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
|
||||
<div className="h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||||
{thumbUrl && <img src={thumbUrl} alt="" className="h-full w-full object-cover" />}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold text-white" title={fileMeta.name}>{fileMeta.name || 'Artwork file'}</p>
|
||||
<div className="mt-1 flex flex-wrap gap-1.5">
|
||||
{currentFileExt && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-white/55">{currentFileExt}</span>}
|
||||
{fileMeta.width > 0 && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] text-white/55">{fileMeta.width} × {fileMeta.height}</span>}
|
||||
{fileMeta.size > 0 && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] text-white/55">{formatBytes(fileMeta.size)}</span>}
|
||||
{screenshotItems.length > 0 && <span className="rounded-full border border-white/10 bg-white/[0.05] px-2 py-0.5 text-[10px] text-white/55">{screenshotItems.length} screenshot{screenshotItems.length !== 1 ? 's' : ''}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<span className="shrink-0 rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] font-semibold text-slate-400">v{versionCount}</span>
|
||||
</div>
|
||||
|
||||
{requiresReapproval && (
|
||||
<div className="rounded-2xl border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">
|
||||
Visual changes on this artwork require a new moderation pass.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ════ Single image replace ════ */}
|
||||
{quickReplaceSupported && (() => {
|
||||
const zone = 'single-replace'
|
||||
const isDragging = dragOverZone === zone
|
||||
const stageFile = (file) => {
|
||||
if (!file || !file.type.startsWith('image/')) return
|
||||
if (pendingReplacePreview) URL.revokeObjectURL(pendingReplacePreview)
|
||||
setPendingReplaceFile(file)
|
||||
setPendingReplacePreview(URL.createObjectURL(file))
|
||||
}
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Replace image</p>
|
||||
|
||||
{/* Drop zone */}
|
||||
<div
|
||||
className={[
|
||||
'relative overflow-hidden rounded-2xl border-2 border-dashed transition',
|
||||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||||
].join(' ')}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragLeave={() => setDragOverZone(null)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault()
|
||||
setDragOverZone(null)
|
||||
stageFile(e.dataTransfer.files?.[0])
|
||||
}}
|
||||
>
|
||||
{pendingReplacePreview ? (
|
||||
<div className="flex items-start gap-4 p-4">
|
||||
<div className="h-24 w-24 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||||
<img src={pendingReplacePreview} alt="Preview" className="h-full w-full object-cover" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 py-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-400">Ready to upload</p>
|
||||
<p className="mt-1 truncate text-sm font-medium text-white">{pendingReplaceFile?.name}</p>
|
||||
<p className="mt-0.5 text-xs text-slate-400">{formatBytes(pendingReplaceFile?.size)}</p>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-3 text-xs text-slate-400 hover:text-white transition-colors"
|
||||
onClick={() => { URL.revokeObjectURL(pendingReplacePreview); setPendingReplacePreview(null); setPendingReplaceFile(null) }}
|
||||
>
|
||||
✕ Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<label className="flex cursor-pointer flex-col items-center justify-center gap-3 p-10 text-center">
|
||||
<span className="inline-flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-white/[0.05] text-slate-400">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-sm font-medium text-slate-300">Drop image here or <span className="text-sky-300">browse</span></span>
|
||||
<span className="text-xs text-slate-500">JPG · PNG · WEBP · TIFF — any resolution</span>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept="image/*"
|
||||
onChange={(e) => stageFile(e.target.files?.[0])}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{replacing && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-2xl bg-black/65 backdrop-blur-sm">
|
||||
<div className="h-8 w-8 rounded-full border-2 border-accent/30 border-t-accent animate-spin" />
|
||||
<span className="text-sm text-slate-300">Uploading revision…</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Change note + Upload button */}
|
||||
<TextInput
|
||||
value={changeNote}
|
||||
onChange={(e) => setChangeNote(e.target.value)}
|
||||
placeholder="Change note for this revision… (optional)"
|
||||
size="sm"
|
||||
/>
|
||||
|
||||
{pendingReplaceFile && (
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="accent"
|
||||
size="sm"
|
||||
loading={replacing}
|
||||
onClick={() => handleFileReplace(pendingReplaceFile)}
|
||||
>
|
||||
{replacing ? 'Uploading…' : 'Upload new version'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* ════ Screenshot and archive media form ════ */}
|
||||
<div className="space-y-6">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">{archiveArtwork ? 'Revise archive media' : 'Additional screenshots'}</p>
|
||||
|
||||
{archiveRevisionError && (
|
||||
<div className="rounded-2xl border border-red-400/20 bg-red-500/10 px-4 py-3 text-sm text-red-200">
|
||||
{archiveRevisionError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{archiveArtwork && (
|
||||
<>
|
||||
{/* ── Cover screenshot ── */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold text-slate-400">Cover screenshot</p>
|
||||
{(() => {
|
||||
const zone = 'archive-cover'
|
||||
const isDragging = dragOverZone === zone
|
||||
const stageFile = (file) => {
|
||||
if (!file || !file.type.startsWith('image/')) return
|
||||
if (archiveCoverPreview) URL.revokeObjectURL(archiveCoverPreview)
|
||||
setArchiveCoverFile(file)
|
||||
setArchiveCoverPreview(URL.createObjectURL(file))
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'relative overflow-hidden rounded-2xl border-2 border-dashed transition',
|
||||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||||
].join(' ')}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragLeave={() => setDragOverZone(null)}
|
||||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageFile(e.dataTransfer.files?.[0]) }}
|
||||
>
|
||||
<div className="flex items-start gap-4 p-4">
|
||||
<div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||||
{archiveCoverPreview
|
||||
? <img src={archiveCoverPreview} alt="New cover" className="h-full w-full object-cover" />
|
||||
: thumbUrl
|
||||
? <img src={thumbUrl} alt="Current cover" className="h-full w-full object-cover opacity-60" />
|
||||
: null}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 py-1">
|
||||
{archiveCoverFile ? (
|
||||
<>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-400">New cover staged</p>
|
||||
<p className="mt-1 truncate text-sm font-medium text-white">{archiveCoverFile.name}</p>
|
||||
<p className="mt-0.5 text-xs text-slate-400">{formatBytes(archiveCoverFile.size)}</p>
|
||||
<button type="button" className="mt-2 text-xs text-slate-400 hover:text-white transition-colors"
|
||||
onClick={() => { URL.revokeObjectURL(archiveCoverPreview); setArchiveCoverFile(null); setArchiveCoverPreview(null) }}>
|
||||
✕ Remove
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs font-semibold text-slate-500">Current cover</p>
|
||||
<p className="mt-1 text-xs text-slate-400">Drop a new image or click to browse.</p>
|
||||
<label className="mt-2 inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold text-slate-300 transition hover:bg-white/[0.08] hover:text-white">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.75 14A1.75 1.75 0 011 12.25V9.5a.75.75 0 011.5 0v2.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V9.5a.75.75 0 011.5 0v2.75A1.75 1.75 0 0113.25 14H2.75z"/><path d="M11.78 5.22a.75.75 0 00-1.06 0L8.75 7.19V1.75a.75.75 0 00-1.5 0v5.44L5.28 5.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"/></svg>
|
||||
Replace cover
|
||||
<input type="file" className="hidden" accept="image/*" onChange={(e) => stageFile(e.target.files?.[0])} />
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* ── Archive package ── */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold text-slate-400">Archive package</p>
|
||||
{(() => {
|
||||
const zone = 'archive-pkg'
|
||||
const isDragging = dragOverZone === zone
|
||||
const stageFile = (file) => {
|
||||
if (!file) return
|
||||
setArchivePackageFile(file)
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
'rounded-2xl border-2 border-dashed transition',
|
||||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||||
].join(' ')}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragLeave={() => setDragOverZone(null)}
|
||||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageFile(e.dataTransfer.files?.[0]) }}
|
||||
>
|
||||
<div className="flex items-center gap-4 px-4 py-4">
|
||||
<span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] text-slate-400">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
{archivePackageFile ? (
|
||||
<>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-emerald-400">New package staged</p>
|
||||
<p className="mt-0.5 truncate text-sm font-medium text-white">{archivePackageFile.name}</p>
|
||||
<p className="mt-0.5 text-xs text-slate-400">{formatBytes(archivePackageFile.size)}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs font-semibold text-slate-500">Current package</p>
|
||||
<p className="mt-0.5 truncate text-sm text-slate-300">{fileMeta.name || '—'}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col gap-2">
|
||||
{archivePackageFile ? (
|
||||
<button type="button" className="text-xs text-slate-400 hover:text-white transition-colors"
|
||||
onClick={() => setArchivePackageFile(null)}>
|
||||
✕ Remove
|
||||
</button>
|
||||
) : (
|
||||
<label className="inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold text-slate-300 transition hover:bg-white/[0.08] hover:text-white">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.75 14A1.75 1.75 0 011 12.25V9.5a.75.75 0 011.5 0v2.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V9.5a.75.75 0 011.5 0v2.75A1.75 1.75 0 0113.25 14H2.75z"/><path d="M11.78 5.22a.75.75 0 00-1.06 0L8.75 7.19V1.75a.75.75 0 00-1.5 0v5.44L5.28 5.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"/></svg>
|
||||
Replace
|
||||
<input type="file" className="hidden"
|
||||
accept=".zip,.rar,.7z,.tar,.gz,application/zip,application/x-zip-compressed,application/x-rar-compressed,application/vnd.rar,application/x-7z-compressed,application/x-tar,application/gzip"
|
||||
onChange={(e) => stageFile(e.target.files?.[0])} />
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Existing screenshots ── */}
|
||||
{screenshotItems.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-400">Screenshots <span className="ml-1 font-normal text-slate-500">({activeScreenshotCount} active / {screenshotItems.length} existing)</span></p>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{screenshotItems.map((shot, i) => {
|
||||
const shotZone = `replace-shot-${i}`
|
||||
const isDragging = dragOverZone === shotZone
|
||||
const pendingPreview = replaceShotPreviews[i]
|
||||
const pendingFile = replaceShots[i]
|
||||
const isRemoved = Boolean(removedShots[i])
|
||||
const stageShot = (file) => {
|
||||
if (!file || !file.type.startsWith('image/')) return
|
||||
if (pendingPreview) URL.revokeObjectURL(pendingPreview)
|
||||
setRemovedShots((prev) => {
|
||||
const next = { ...prev }
|
||||
delete next[i]
|
||||
return next
|
||||
})
|
||||
setReplaceShots((prev) => ({ ...prev, [i]: file }))
|
||||
setReplaceShotPreviews((prev) => ({ ...prev, [i]: URL.createObjectURL(file) }))
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={shot.id || `shot-${i}`}
|
||||
className={[
|
||||
'relative overflow-hidden rounded-2xl border-2 border-dashed transition',
|
||||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/10 bg-white/[0.02]',
|
||||
].join(' ')}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(shotZone) }}
|
||||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(shotZone) }}
|
||||
onDragLeave={() => setDragOverZone(null)}
|
||||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageShot(e.dataTransfer.files?.[0]) }}
|
||||
>
|
||||
<div className="aspect-square overflow-hidden bg-black/25">
|
||||
<img
|
||||
src={pendingPreview || shot.thumb_url || shot.url}
|
||||
alt={shot.label || `Screenshot ${i + 1}`}
|
||||
className={[
|
||||
'h-full w-full object-cover transition-opacity',
|
||||
isRemoved ? 'opacity-25 grayscale' : 'opacity-100',
|
||||
].join(' ')}
|
||||
/>
|
||||
{pendingPreview && (
|
||||
<div className="absolute inset-x-0 top-0 flex items-center justify-center gap-1 bg-emerald-500/80 py-1 text-[10px] font-semibold text-white">
|
||||
New
|
||||
</div>
|
||||
)}
|
||||
{isRemoved && (
|
||||
<div className="absolute inset-x-0 top-0 flex items-center justify-center gap-1 bg-red-500/85 py-1 text-[10px] font-semibold text-white">
|
||||
Disabled for next save
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1 p-2">
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<span className="text-[10px] text-slate-500">Shot {i + 1}</span>
|
||||
{pendingFile ? (
|
||||
<button type="button" className="text-[10px] text-slate-400 hover:text-white transition-colors"
|
||||
onClick={() => {
|
||||
URL.revokeObjectURL(pendingPreview)
|
||||
setReplaceShots((prev) => { const n = { ...prev }; delete n[i]; return n })
|
||||
setReplaceShotPreviews((prev) => { const n = { ...prev }; delete n[i]; return n })
|
||||
}}>
|
||||
Undo replace
|
||||
</button>
|
||||
) : isRemoved ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-[10px] text-emerald-300 hover:text-white transition-colors"
|
||||
onClick={() => setRemovedShots((prev) => { const next = { ...prev }; delete next[i]; return next })}
|
||||
>
|
||||
Re-enable
|
||||
</button>
|
||||
) : (
|
||||
<label className="cursor-pointer text-[10px] font-semibold text-sky-300 hover:text-white transition-colors">
|
||||
Replace
|
||||
<input type="file" className="hidden" accept="image/*"
|
||||
onChange={(e) => stageShot(e.target.files?.[0])} />
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="truncate text-[10px] text-slate-600">{pendingFile ? pendingFile.name : (shot.label || `Screenshot ${i + 1}`)}</span>
|
||||
{!pendingFile && !isRemoved && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-[10px] text-red-300 hover:text-white transition-colors"
|
||||
onClick={() => setRemovedShots((prev) => ({ ...prev, [i]: true }))}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Add new screenshots ── */}
|
||||
{(activeScreenshotCount < 4) && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-400">Add screenshots <span className="ml-1 font-normal text-slate-500">(up to {4 - activeScreenshotCount} more)</span></p>
|
||||
{(() => {
|
||||
const zone = 'archive-extra-shots'
|
||||
const isDragging = dragOverZone === zone
|
||||
const availableSlots = Math.max(0, 4 - activeScreenshotCount)
|
||||
const stageFiles = (files) => {
|
||||
const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/')).slice(0, availableSlots)
|
||||
archiveExtraPreviews.forEach((url) => URL.revokeObjectURL(url))
|
||||
setArchiveExtraScreenshots(imageFiles)
|
||||
setArchiveExtraPreviews(imageFiles.map((f) => URL.createObjectURL(f)))
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={[
|
||||
'rounded-2xl border-2 border-dashed transition',
|
||||
isDragging ? 'border-sky-400/60 bg-sky-400/10' : 'border-white/15 bg-white/[0.02]',
|
||||
].join(' ')}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragEnter={(e) => { e.preventDefault(); setDragOverZone(zone) }}
|
||||
onDragLeave={() => setDragOverZone(null)}
|
||||
onDrop={(e) => { e.preventDefault(); setDragOverZone(null); stageFiles(e.dataTransfer.files) }}
|
||||
>
|
||||
<label className="flex cursor-pointer flex-col items-center justify-center gap-2 py-6 text-center">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-slate-500" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-slate-300">Drop images here or <span className="text-sky-300">browse</span></span>
|
||||
<span className="text-xs text-slate-500">Select up to {availableSlots} image{availableSlots !== 1 ? 's' : ''}</span>
|
||||
<input type="file" className="hidden" accept="image/*" multiple
|
||||
onChange={(e) => stageFiles(e.target.files)} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{archiveExtraPreviews.length > 0 && (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{archiveExtraPreviews.map((url, i) => (
|
||||
<div key={url} className="relative overflow-hidden rounded-xl border border-white/10 bg-black/25">
|
||||
<div className="aspect-square">
|
||||
<img src={url} alt={`New ${i + 1}`} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove"
|
||||
className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/70 text-[10px] text-white hover:bg-red-500/80 transition-colors"
|
||||
onClick={() => {
|
||||
URL.revokeObjectURL(url)
|
||||
const next = archiveExtraScreenshots.filter((_, j) => j !== i)
|
||||
const nextPrev = archiveExtraPreviews.filter((_, j) => j !== i)
|
||||
setArchiveExtraScreenshots(next)
|
||||
setArchiveExtraPreviews(nextPrev)
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Change note + save */}
|
||||
<TextInput
|
||||
value={changeNote}
|
||||
onChange={(e) => setChangeNote(e.target.value)}
|
||||
placeholder={archiveArtwork ? 'Describe what changed in this revision… (optional)' : 'Describe the screenshot update… (optional)'}
|
||||
size="sm"
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
variant="accent"
|
||||
size="sm"
|
||||
loading={archiveRevisionSaving}
|
||||
onClick={handleArchiveRevisionSubmit}
|
||||
>
|
||||
{archiveRevisionSaving ? 'Saving revision…' : 'Save revision'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* ── Evolution tab ── */}
|
||||
{activeTab === 'evolution' && (
|
||||
<Section id="evolution" className="space-y-6">
|
||||
@@ -2006,6 +2636,7 @@ export default function StudioArtworkEdit() {
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
</StudioLayout>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user