feat: upload wizard refactor + vision AI tags + artwork versioning
Upload wizard:
- Refactored UploadWizard into modular steps (Step1FileUpload, Step2Details, Step3Publish)
- Extracted reusable hooks: useUploadMachine, useFileValidation, useVisionTags
- Extracted reusable components: CategorySelector, ContentTypeSelector
- Added TagPicker component (studio-style list picker with AI badge + new-tag insertion)
- Fixed TagInput auto-open bug (hasFocusedRef guard)
- Replaced TagInput with TagPicker in UploadSidebar
Vision AI tag suggestions:
- Add UploadVisionSuggestController: sync POST /api/uploads/{id}/vision-suggest
- Calls vision.klevze.net/analyze/all on upload completion (before step 2 opens)
- Two-phase useVisionTags: immediate gateway call + background DB polling
- Trigger fires on uploadReady (not step change) so tags arrive before user sees step 2
- Added vision.gateway config block with VISION_GATEWAY_URL env
Artwork versioning system:
- ArtworkVersion / ArtworkVersionEvent models
- ArtworkVersioningService: createNewVersion, restoreVersion, rate limiting, ranking decay
- Migrations: artwork_versions, artwork_version_events, versioning columns on artworks
- Studio API routes: GET versions, POST restore/{version_id}
- Feature tests: ArtworkVersioningTest (13 cases)
This commit is contained in:
@@ -63,6 +63,16 @@ export default function StudioArtworkEdit() {
|
||||
width: artwork?.width || 0,
|
||||
height: artwork?.height || 0,
|
||||
})
|
||||
const [versionCount, setVersionCount] = useState(artwork?.version_count ?? 1)
|
||||
const [requiresReapproval, setRequiresReapproval] = useState(artwork?.requires_reapproval ?? false)
|
||||
const [changeNote, setChangeNote] = useState('')
|
||||
const [showChangeNote, setShowChangeNote] = useState(false)
|
||||
|
||||
// Version history modal state
|
||||
const [showHistory, setShowHistory] = useState(false)
|
||||
const [historyData, setHistoryData] = useState(null)
|
||||
const [historyLoading, setHistoryLoading] = useState(false)
|
||||
const [restoring, setRestoring] = useState(null) // version id being restored
|
||||
|
||||
// --- Tag search ---
|
||||
const searchTags = useCallback(async (q) => {
|
||||
@@ -158,6 +168,7 @@ export default function StudioArtworkEdit() {
|
||||
try {
|
||||
const fd = new FormData()
|
||||
fd.append('file', file)
|
||||
if (changeNote.trim()) fd.append('change_note', changeNote.trim())
|
||||
const res = await fetch(`/api/studio/artworks/${artwork.id}/replace-file`, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||||
@@ -168,8 +179,12 @@ export default function StudioArtworkEdit() {
|
||||
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 })
|
||||
if (data.version_number) setVersionCount(data.version_number)
|
||||
if (typeof data.requires_reapproval !== 'undefined') setRequiresReapproval(data.requires_reapproval)
|
||||
setChangeNote('')
|
||||
setShowChangeNote(false)
|
||||
} else {
|
||||
console.error('File replace failed:', data)
|
||||
alert(data.error || 'File replacement failed.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('File replace failed:', err)
|
||||
@@ -179,6 +194,47 @@ export default function StudioArtworkEdit() {
|
||||
}
|
||||
}
|
||||
|
||||
const loadVersionHistory = async () => {
|
||||
setHistoryLoading(true)
|
||||
setShowHistory(true)
|
||||
try {
|
||||
const res = await fetch(`/api/studio/artworks/${artwork.id}/versions`, {
|
||||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
const data = await res.json()
|
||||
setHistoryData(data)
|
||||
} catch (err) {
|
||||
console.error('Failed to load version history:', err)
|
||||
} finally {
|
||||
setHistoryLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRestoreVersion = async (versionId) => {
|
||||
if (!window.confirm('Restore this version? It will be cloned as the new current version.')) return
|
||||
setRestoring(versionId)
|
||||
try {
|
||||
const res = await fetch(`/api/studio/artworks/${artwork.id}/restore/${versionId}`, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok && data.success) {
|
||||
alert(data.message)
|
||||
setVersionCount((n) => n + 1)
|
||||
setShowHistory(false)
|
||||
} else {
|
||||
alert(data.error || 'Restore failed.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Restore failed:', err)
|
||||
} finally {
|
||||
setRestoring(null)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Render ---
|
||||
return (
|
||||
<StudioLayout title="Edit Artwork">
|
||||
@@ -193,7 +249,28 @@ export default function StudioArtworkEdit() {
|
||||
<div className="max-w-3xl space-y-8">
|
||||
{/* ── Uploaded Asset ── */}
|
||||
<section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">Uploaded Asset</h3>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400">Uploaded Asset</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
{requiresReapproval && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-500/20 text-amber-300 border border-amber-500/30">
|
||||
<i className="fa-solid fa-triangle-exclamation" /> Under Review
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-accent/20 text-accent border border-accent/30">
|
||||
v{versionCount}
|
||||
</span>
|
||||
{versionCount > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadVersionHistory}
|
||||
className="text-xs text-slate-400 hover:text-white transition-colors flex items-center gap-1"
|
||||
>
|
||||
<i className="fa-solid fa-clock-rotate-left text-[10px]" /> History
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-5">
|
||||
{thumbUrl ? (
|
||||
<img src={thumbUrl} alt={title} className="w-32 h-32 rounded-xl object-cover bg-nova-800 flex-shrink-0" />
|
||||
@@ -208,16 +285,41 @@ export default function StudioArtworkEdit() {
|
||||
{fileMeta.width > 0 && (
|
||||
<p className="text-xs text-slate-400">{fileMeta.width} × {fileMeta.height} px</p>
|
||||
)}
|
||||
{showChangeNote && (
|
||||
<textarea
|
||||
value={changeNote}
|
||||
onChange={(e) => setChangeNote(e.target.value)}
|
||||
rows={2}
|
||||
maxLength={500}
|
||||
placeholder="What changed? (optional)"
|
||||
className="mt-2 w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-xs focus:outline-none focus:ring-2 focus:ring-accent/50 resize-none"
|
||||
/>
|
||||
)}
|
||||
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileReplace} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={replacing}
|
||||
className="mt-2 inline-flex items-center gap-1.5 text-xs text-accent hover:text-accent/80 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<i className={replacing ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-arrow-up-from-bracket'} />
|
||||
{replacing ? 'Replacing…' : 'Replace file'}
|
||||
</button>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowChangeNote((s) => !s)
|
||||
if (!showChangeNote) fileInputRef.current?.click()
|
||||
}}
|
||||
disabled={replacing}
|
||||
className="inline-flex items-center gap-1.5 text-xs text-accent hover:text-accent/80 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<i className={replacing ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-arrow-up-from-bracket'} />
|
||||
{replacing ? 'Replacing…' : 'Replace file'}
|
||||
</button>
|
||||
{showChangeNote && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={replacing}
|
||||
className="inline-flex items-center gap-1.5 text-xs bg-accent/20 hover:bg-accent/30 text-accent px-2.5 py-1 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
<i className="fa-solid fa-upload" /> Choose file
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -450,6 +552,94 @@ export default function StudioArtworkEdit() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Version History Modal ── */}
|
||||
{showHistory && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setShowHistory(false) }}
|
||||
>
|
||||
<div className="bg-nova-900 border border-white/10 rounded-2xl shadow-2xl w-full max-w-lg max-h-[80vh] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
|
||||
<h2 className="text-sm font-semibold text-white flex items-center gap-2">
|
||||
<i className="fa-solid fa-clock-rotate-left text-accent" />
|
||||
Version History
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowHistory(false)}
|
||||
className="w-7 h-7 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
<i className="fa-solid fa-xmark text-xs" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="overflow-y-auto flex-1 sb-scrollbar p-4 space-y-3">
|
||||
{historyLoading && (
|
||||
<div className="flex items-center justify-center py-10">
|
||||
<div className="w-6 h-6 border-2 border-accent/30 border-t-accent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!historyLoading && historyData && historyData.versions.map((v) => (
|
||||
<div
|
||||
key={v.id}
|
||||
className={`rounded-xl border p-4 transition-all ${
|
||||
v.is_current
|
||||
? 'border-accent/40 bg-accent/10'
|
||||
: 'border-white/10 bg-white/[0.03] hover:bg-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-bold text-white">v{v.version_number}</span>
|
||||
{v.is_current && (
|
||||
<span className="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-accent/20 text-accent border border-accent/30">Current</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-400">
|
||||
{v.created_at ? new Date(v.created_at).toLocaleString() : ''}
|
||||
</p>
|
||||
{v.width && (
|
||||
<p className="text-[11px] text-slate-400">{v.width} × {v.height} px · {formatBytes(v.file_size)}</p>
|
||||
)}
|
||||
{v.change_note && (
|
||||
<p className="text-xs text-slate-300 mt-1 italic">“{v.change_note}”</p>
|
||||
)}
|
||||
</div>
|
||||
{!v.is_current && (
|
||||
<button
|
||||
type="button"
|
||||
disabled={restoring === v.id}
|
||||
onClick={() => handleRestoreVersion(v.id)}
|
||||
className="flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-white/5 hover:bg-accent/20 text-slate-300 hover:text-accent border border-white/10 hover:border-accent/30 transition-all disabled:opacity-50"
|
||||
>
|
||||
{restoring === v.id
|
||||
? <><i className="fa-solid fa-spinner fa-spin" /> Restoring…</>
|
||||
: <><i className="fa-solid fa-rotate-left" /> Restore</>
|
||||
}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{!historyLoading && historyData && historyData.versions.length === 0 && (
|
||||
<p className="text-sm text-slate-500 text-center py-8">No version history yet.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-4 border-t border-white/10">
|
||||
<p className="text-xs text-slate-500">
|
||||
Older versions are preserved. Restoring creates a new version—nothing is deleted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</StudioLayout>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -157,7 +157,7 @@ function SuggestionDropdown({
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-white/10 bg-slate-950/95">
|
||||
<div className="overflow-hidden rounded-xl ring-1 ring-white/10 bg-slate-950/98 shadow-xl shadow-black/50">
|
||||
<ul id={listboxId} role="listbox" className="max-h-56 overflow-auto py-1">
|
||||
{loading && (
|
||||
<li className="px-3 py-2 text-xs text-white/60">Searching tags…</li>
|
||||
@@ -268,6 +268,7 @@ export default function TagInput({
|
||||
const queryCacheRef = useRef(new Map())
|
||||
const abortControllerRef = useRef(null)
|
||||
const debounceTimerRef = useRef(null)
|
||||
const hasFocusedRef = useRef(false)
|
||||
|
||||
const listboxId = useMemo(() => `tag-input-listbox-${Math.random().toString(16).slice(2)}`, [])
|
||||
const aiSuggestedItems = useMemo(() => toSuggestionItems(suggestedTags), [suggestedTags])
|
||||
@@ -366,6 +367,9 @@ export default function TagInput({
|
||||
}, [searchEndpoint, popularEndpoint, selectedTags])
|
||||
|
||||
useEffect(() => {
|
||||
// Don't fire on initial mount — wait for the user to focus or type.
|
||||
if (!hasFocusedRef.current) return
|
||||
|
||||
const query = inputValue.trim()
|
||||
|
||||
if (debounceTimerRef.current) {
|
||||
@@ -451,6 +455,7 @@ export default function TagInput({
|
||||
}, [applyPastedTags])
|
||||
|
||||
const handleFocus = useCallback(() => {
|
||||
hasFocusedRef.current = true
|
||||
if (inputValue.trim() !== '') return
|
||||
runSearch('')
|
||||
}, [inputValue, runSearch])
|
||||
|
||||
405
resources/js/components/tags/TagPicker.jsx
Normal file
405
resources/js/components/tags/TagPicker.jsx
Normal file
@@ -0,0 +1,405 @@
|
||||
/**
|
||||
* TagPicker – studio-style list-based tag selector
|
||||
*
|
||||
* - Loads popular tags on mount
|
||||
* - Debounced live search; shows "Add '<query>'" row for custom tags
|
||||
* - Enter / comma / Tab commits a custom tag from the input
|
||||
* - Scrollable list with circle / circle-check toggles
|
||||
* - Selected chips shown above the list
|
||||
* - AI-suggested tags shown with a purple badge
|
||||
* - Search icon on the right side of the input
|
||||
* - Counter footer: X/15 tags selected
|
||||
*
|
||||
* Value format: string[] of tag slugs
|
||||
*/
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
|
||||
const MAX_TAGS = 15
|
||||
const DEBOUNCE_MS = 250
|
||||
const MAX_RESULTS = 30
|
||||
const MIN_LENGTH = 2
|
||||
const MAX_LENGTH = 32
|
||||
|
||||
// ─── helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function normalizeSlug(raw) {
|
||||
return String(raw ?? '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^a-z0-9_-]/g, '')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^[-_]+|[-_]+$/g, '')
|
||||
.slice(0, MAX_LENGTH)
|
||||
}
|
||||
|
||||
function toListItem(item) {
|
||||
if (!item) return null
|
||||
if (typeof item === 'string') {
|
||||
const slug = normalizeSlug(item)
|
||||
return slug ? { key: slug, slug, name: slug, usageCount: null, isAi: false } : null
|
||||
}
|
||||
const slug = normalizeSlug(item.slug || item.tag || item.name || '')
|
||||
if (!slug) return null
|
||||
return {
|
||||
key: String(item.id ?? slug),
|
||||
slug,
|
||||
name: item.name || item.tag || item.slug || slug,
|
||||
usageCount: typeof item.usage_count === 'number' ? item.usage_count : null,
|
||||
isAi: Boolean(item.is_ai || item.source === 'ai'),
|
||||
}
|
||||
}
|
||||
|
||||
// ─── sub-components ───────────────────────────────────────────────────────────
|
||||
|
||||
function SearchInput({ value, onChange, onKeyDown, inputRef, disabled, hint }) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={disabled}
|
||||
className="w-full rounded-xl border border-white/10 bg-white/5 py-2.5 pl-3 pr-9 text-sm text-white placeholder:text-white/40 focus:border-accent/50 focus:outline-none focus:ring-2 focus:ring-accent/30 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
placeholder={hint || 'Search or add tags…'}
|
||||
aria-label="Search or add tags"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
{/* Search icon – right side */}
|
||||
<svg
|
||||
className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/35"
|
||||
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
|
||||
>
|
||||
<path fillRule="evenodd" d="M12.9 14.32a8 8 0 111.414-1.414l4.387 4.387-1.414 1.414-4.387-4.387zM8 14A6 6 0 108 2a6 6 0 000 12z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectedChips({ slugs, names, onRemove, disabled }) {
|
||||
if (slugs.length === 0) return null
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{slugs.map((slug) => (
|
||||
<span
|
||||
key={slug}
|
||||
className="inline-flex items-center gap-1 rounded-lg bg-accent/20 px-2.5 py-1 text-xs font-medium text-accent"
|
||||
>
|
||||
{names[slug] || slug}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemove(slug)}
|
||||
disabled={disabled}
|
||||
className="ml-0.5 flex h-4 w-4 items-center justify-center rounded-full hover:bg-white/15 disabled:cursor-not-allowed"
|
||||
aria-label={`Remove tag ${names[slug] || slug}`}
|
||||
>
|
||||
<svg className="h-2.5 w-2.5" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true">
|
||||
<path d="M6.414 5l2.293-2.293a1 1 0 00-1.414-1.414L5 3.586 2.707 1.293A1 1 0 001.293 2.707L3.586 5 1.293 7.293a1 1 0 101.414 1.414L5 6.414l2.293 2.293a1 1 0 001.414-1.414L6.414 5z" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AddNewRow({ label, onAdd, disabled }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
disabled={disabled}
|
||||
className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-sky-300 transition-all hover:bg-sky-400/10 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<svg className="h-3.5 w-3.5 shrink-0" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<path strokeLinecap="round" d="M8 3v10M3 8h10" />
|
||||
</svg>
|
||||
<span>Add <span className="font-semibold">"{label}"</span></span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function ListRow({ item, isSelected, onToggle, disabled }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggle(item)}
|
||||
disabled={disabled}
|
||||
className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-all disabled:cursor-not-allowed ${
|
||||
isSelected
|
||||
? 'bg-accent/12 text-accent'
|
||||
: 'text-slate-300 hover:bg-white/6 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-2.5">
|
||||
{isSelected ? (
|
||||
<svg className="h-3.5 w-3.5 shrink-0 text-accent" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L7 8.586 5.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-3.5 w-3.5 shrink-0 text-white/30" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<circle cx="8" cy="8" r="6.25" />
|
||||
</svg>
|
||||
)}
|
||||
|
||||
<span className="truncate">{item.name}</span>
|
||||
|
||||
{item.isAi && (
|
||||
<span className="shrink-0 rounded-full border border-purple-400/40 bg-purple-400/10 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-purple-200">
|
||||
AI
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{typeof item.usageCount === 'number' && (
|
||||
<span className="ml-3 shrink-0 text-[11px] text-white/40">
|
||||
{item.usageCount.toLocaleString()} uses
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── main component ───────────────────────────────────────────────────────────
|
||||
|
||||
export default function TagPicker({
|
||||
value = [],
|
||||
onChange,
|
||||
suggestedTags = [],
|
||||
disabled = false,
|
||||
maxTags = MAX_TAGS,
|
||||
searchEndpoint = '/api/tags/search',
|
||||
popularEndpoint = '/api/tags/popular',
|
||||
placeholder,
|
||||
error,
|
||||
}) {
|
||||
const selectedSlugs = useMemo(
|
||||
() => Array.from(new Set((Array.isArray(value) ? value : []).map(normalizeSlug).filter(Boolean))),
|
||||
[value]
|
||||
)
|
||||
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [fetchError, setFetchError] = useState(false)
|
||||
const [inputError, setInputError] = useState('')
|
||||
|
||||
// slug → display name (for chips)
|
||||
const [nameMap, setNameMap] = useState({})
|
||||
const updateNameMap = useCallback((items) => {
|
||||
setNameMap((prev) => {
|
||||
const next = { ...prev }
|
||||
items.forEach((item) => {
|
||||
if (item?.slug && item.name) next[item.slug] = item.name
|
||||
})
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const abortRef = useRef(null)
|
||||
const timerRef = useRef(null)
|
||||
const inputRef = useRef(null)
|
||||
const cacheRef = useRef(new Map())
|
||||
|
||||
const aiItems = useMemo(() => {
|
||||
return (Array.isArray(suggestedTags) ? suggestedTags : [])
|
||||
.map(toListItem)
|
||||
.filter(Boolean)
|
||||
.map((item) => ({ ...item, isAi: true }))
|
||||
}, [suggestedTags])
|
||||
|
||||
const fetchTags = useCallback(async (q) => {
|
||||
const cacheKey = q.trim() || '__popular__'
|
||||
if (cacheRef.current.has(cacheKey)) {
|
||||
setResults(cacheRef.current.get(cacheKey))
|
||||
setFetchError(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (abortRef.current) abortRef.current.abort()
|
||||
abortRef.current = new AbortController()
|
||||
|
||||
setLoading(true)
|
||||
setFetchError(false)
|
||||
|
||||
try {
|
||||
const url = q.trim()
|
||||
? `${searchEndpoint}?q=${encodeURIComponent(q.trim())}`
|
||||
: popularEndpoint
|
||||
const res = await window.axios.get(url, { signal: abortRef.current.signal })
|
||||
const raw = res?.data?.data || res?.data || []
|
||||
const items = (Array.isArray(raw) ? raw : []).map(toListItem).filter(Boolean).slice(0, MAX_RESULTS)
|
||||
cacheRef.current.set(cacheKey, items)
|
||||
setResults(items)
|
||||
updateNameMap(items)
|
||||
} catch (err) {
|
||||
if (err?.code === 'ERR_CANCELED' || abortRef.current?.signal?.aborted) return
|
||||
setFetchError(true)
|
||||
setResults([])
|
||||
} finally {
|
||||
if (!abortRef.current?.signal?.aborted) setLoading(false)
|
||||
}
|
||||
}, [searchEndpoint, popularEndpoint, updateNameMap])
|
||||
|
||||
useEffect(() => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current)
|
||||
timerRef.current = setTimeout(() => fetchTags(query), query ? DEBOUNCE_MS : 0)
|
||||
return () => clearTimeout(timerRef.current)
|
||||
}, [query, fetchTags])
|
||||
|
||||
useEffect(() => () => { abortRef.current?.abort() }, [])
|
||||
|
||||
useEffect(() => { updateNameMap(aiItems) }, [aiItems, updateNameMap])
|
||||
|
||||
// ── tag actions ──────────────────────────────────────────────────────────
|
||||
|
||||
const addTag = useCallback((rawSlug, displayName) => {
|
||||
const slug = normalizeSlug(rawSlug)
|
||||
if (!slug) return
|
||||
if (slug.length < MIN_LENGTH) { setInputError(`Too short (min ${MIN_LENGTH} chars)`); return }
|
||||
if (selectedSlugs.includes(slug)) { setInputError('Already added'); return }
|
||||
if (selectedSlugs.length >= maxTags) { setInputError('Maximum tags reached'); return }
|
||||
setInputError('')
|
||||
updateNameMap([{ slug, name: displayName || rawSlug }])
|
||||
onChange?.([...selectedSlugs, slug])
|
||||
setQuery('')
|
||||
}, [selectedSlugs, maxTags, onChange, updateNameMap])
|
||||
|
||||
const toggleTag = useCallback((item) => {
|
||||
if (selectedSlugs.includes(item.slug)) {
|
||||
onChange?.(selectedSlugs.filter((s) => s !== item.slug))
|
||||
} else {
|
||||
addTag(item.slug, item.name)
|
||||
}
|
||||
}, [selectedSlugs, addTag, onChange])
|
||||
|
||||
const removeTag = useCallback((slug) => {
|
||||
setInputError('')
|
||||
onChange?.(selectedSlugs.filter((s) => s !== slug))
|
||||
}, [selectedSlugs, onChange])
|
||||
|
||||
// Commit on Enter / comma / Tab
|
||||
const handleKeyDown = useCallback((e) => {
|
||||
const commit = e.key === 'Enter' || e.key === ',' || e.key === 'Tab'
|
||||
if (!commit) return
|
||||
|
||||
// Backspace on empty → remove last chip
|
||||
if (e.key === 'Backspace' && query === '' && selectedSlugs.length > 0) {
|
||||
removeTag(selectedSlugs[selectedSlugs.length - 1])
|
||||
return
|
||||
}
|
||||
|
||||
const candidate = query.trim().replace(/,$/, '')
|
||||
if (!candidate) return
|
||||
|
||||
e.preventDefault()
|
||||
addTag(candidate, candidate)
|
||||
}, [query, selectedSlugs, addTag, removeTag])
|
||||
|
||||
// Show "Add 'query'" row when the query doesn't exactly match any result
|
||||
const querySlug = normalizeSlug(query)
|
||||
const showAddNew = Boolean(
|
||||
query.trim() &&
|
||||
querySlug.length >= MIN_LENGTH &&
|
||||
!results.some((r) => r.slug === querySlug) &&
|
||||
!selectedSlugs.includes(querySlug)
|
||||
)
|
||||
|
||||
const displayList = useMemo(() => {
|
||||
const seen = new Set()
|
||||
const merged = []
|
||||
|
||||
if (!query.trim()) {
|
||||
aiItems.forEach((item) => {
|
||||
if (!seen.has(item.slug)) { seen.add(item.slug); merged.push(item) }
|
||||
})
|
||||
}
|
||||
|
||||
results.forEach((item) => {
|
||||
if (!seen.has(item.slug)) { seen.add(item.slug); merged.push(item) }
|
||||
})
|
||||
|
||||
return merged
|
||||
}, [aiItems, results, query])
|
||||
|
||||
const atMax = selectedSlugs.length >= maxTags
|
||||
|
||||
return (
|
||||
<div className="space-y-3" data-testid="tag-picker-root">
|
||||
{/* Search / add input */}
|
||||
<SearchInput
|
||||
value={query}
|
||||
onChange={(v) => { setQuery(v); setInputError('') }}
|
||||
onKeyDown={handleKeyDown}
|
||||
inputRef={inputRef}
|
||||
disabled={disabled}
|
||||
hint={placeholder}
|
||||
/>
|
||||
|
||||
{/* Inline input validation */}
|
||||
{inputError && (
|
||||
<p className="text-xs text-red-300" role="alert">{inputError}</p>
|
||||
)}
|
||||
|
||||
{/* Selected chips */}
|
||||
<SelectedChips
|
||||
slugs={selectedSlugs}
|
||||
names={nameMap}
|
||||
onRemove={removeTag}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{/* Scrollable results list */}
|
||||
<div className="max-h-52 overflow-y-auto rounded-xl border border-white/8 bg-white/[0.02] p-1 sb-scrollbar">
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-5">
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-accent/30 border-t-accent" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && fetchError && (
|
||||
<p className="py-4 text-center text-xs text-amber-300/80">Tag search unavailable</p>
|
||||
)}
|
||||
|
||||
{/* "Add new" row — always shown when query doesn't match */}
|
||||
{!loading && showAddNew && (
|
||||
<AddNewRow
|
||||
label={query.trim()}
|
||||
onAdd={() => addTag(query.trim(), query.trim())}
|
||||
disabled={disabled || atMax}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!loading && !fetchError && displayList.length === 0 && !showAddNew && (
|
||||
<p className="py-4 text-center text-sm text-white/40">
|
||||
{query ? 'No tags found — press Enter to add' : 'Type to search or add tags'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!loading && !fetchError && displayList.map((item) => (
|
||||
<ListRow
|
||||
key={item.key}
|
||||
item={item}
|
||||
isSelected={selectedSlugs.includes(item.slug)}
|
||||
onToggle={toggleTag}
|
||||
disabled={disabled || (atMax && !selectedSlugs.includes(item.slug))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between text-xs text-white/45">
|
||||
<span>{selectedSlugs.length}/{maxTags} tags selected</span>
|
||||
{atMax
|
||||
? <span className="text-amber-300/80">Maximum tags reached</span>
|
||||
: <span className="text-white/30">Enter, comma or Tab to add</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
{error && <p className="text-xs text-red-300">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
152
resources/js/components/upload/CategorySelector.jsx
Normal file
152
resources/js/components/upload/CategorySelector.jsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* CategorySelector
|
||||
*
|
||||
* Reusable pill-based category + subcategory selector.
|
||||
* Renders root categories as pills; when a root with children is selected,
|
||||
* subcategory pills appear in an animated block below.
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {Array} props.categories Flat list of root-category objects { id, name, children[] }
|
||||
* @param {string} props.rootCategoryId Currently selected root id
|
||||
* @param {string} props.subCategoryId Currently selected sub id
|
||||
* @param {boolean} props.hasContentType Whether a content type is selected (gate)
|
||||
* @param {string} [props.error] Validation error message
|
||||
* @param {function} props.onRootChange Called with (rootId: string)
|
||||
* @param {function} props.onSubChange Called with (subId: string)
|
||||
* @param {Array} [props.allRoots] All root options (for the hidden accessible select)
|
||||
* @param {function} [props.onRootChangeAll] Fallback handler with full cross-type info
|
||||
*/
|
||||
export default function CategorySelector({
|
||||
categories = [],
|
||||
rootCategoryId = '',
|
||||
subCategoryId = '',
|
||||
hasContentType = false,
|
||||
error = '',
|
||||
onRootChange,
|
||||
onSubChange,
|
||||
allRoots = [],
|
||||
onRootChangeAll,
|
||||
}) {
|
||||
const selectedRoot = categories.find((c) => String(c.id) === String(rootCategoryId || '')) ?? null
|
||||
const hasSubcategories = Boolean(
|
||||
selectedRoot && Array.isArray(selectedRoot.children) && selectedRoot.children.length > 0
|
||||
)
|
||||
|
||||
if (!hasContentType) {
|
||||
return (
|
||||
<div className="rounded-lg bg-white/[0.025] px-3 py-3 text-sm text-white/45 ring-1 ring-white/8">
|
||||
Select a content type to load categories.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (categories.length === 0) {
|
||||
return (
|
||||
<div className="rounded-lg bg-white/[0.025] px-3 py-3 text-sm text-white/45 ring-1 ring-white/8">
|
||||
No categories available for this content type.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Root categories */}
|
||||
<div className="flex flex-wrap gap-2" role="group" aria-label="Category">
|
||||
{categories.map((root) => {
|
||||
const active = String(root.id) === String(rootCategoryId || '')
|
||||
return (
|
||||
<button
|
||||
key={root.id}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() => onRootChange?.(String(root.id))}
|
||||
className={[
|
||||
'rounded-full border px-3.5 py-1.5 text-sm transition-all',
|
||||
active
|
||||
? 'border-violet-500/70 bg-violet-600/25 text-white shadow-sm'
|
||||
: 'border-white/10 bg-white/5 text-white/65 hover:border-violet-300/40 hover:bg-violet-400/10 hover:text-white/90',
|
||||
].join(' ')}
|
||||
>
|
||||
{root.name}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Subcategories (shown when root has children) */}
|
||||
{hasSubcategories && (
|
||||
<div className="rounded-xl ring-1 ring-white/8 bg-white/[0.025] p-3">
|
||||
<p className="mb-2 text-[11px] uppercase tracking-wide text-white/45">
|
||||
Subcategory for <span className="text-white/70">{selectedRoot.name}</span>
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2" role="group" aria-label="Subcategory">
|
||||
{selectedRoot.children.map((sub) => {
|
||||
const active = String(sub.id) === String(subCategoryId || '')
|
||||
return (
|
||||
<button
|
||||
key={sub.id}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() => onSubChange?.(String(sub.id))}
|
||||
className={[
|
||||
'rounded-full border px-3 py-1 text-sm transition-all',
|
||||
active
|
||||
? 'border-cyan-500/70 bg-cyan-600/20 text-white shadow-sm'
|
||||
: 'border-white/10 bg-white/5 text-white/60 hover:border-cyan-300/40 hover:bg-cyan-400/10 hover:text-white/85',
|
||||
].join(' ')}
|
||||
>
|
||||
{sub.name}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Accessible hidden select (screen readers / fallback) */}
|
||||
<div className="sr-only">
|
||||
<label htmlFor="category-root-select">Root category</label>
|
||||
<select
|
||||
id="category-root-select"
|
||||
value={String(rootCategoryId || '')}
|
||||
onChange={(e) => {
|
||||
const nextRootId = String(e.target.value || '')
|
||||
if (onRootChangeAll) {
|
||||
const matched = allRoots.find((r) => String(r.id) === nextRootId)
|
||||
onRootChangeAll(nextRootId, matched?.contentTypeValue ?? null)
|
||||
} else {
|
||||
onRootChange?.(nextRootId)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="">Select root category</option>
|
||||
{allRoots.map((root) => (
|
||||
<option key={root.id} value={String(root.id)}>{root.name}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{hasSubcategories && (
|
||||
<>
|
||||
<label htmlFor="category-sub-select">Subcategory</label>
|
||||
<select
|
||||
id="category-sub-select"
|
||||
value={String(subCategoryId || '')}
|
||||
onChange={(e) => onSubChange?.(String(e.target.value || ''))}
|
||||
>
|
||||
<option value="">Select subcategory</option>
|
||||
{selectedRoot.children.map((sub) => (
|
||||
<option key={sub.id} value={String(sub.id)}>{sub.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="mt-1 text-xs text-red-300" role="alert">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
resources/js/components/upload/ContentTypeSelector.jsx
Normal file
88
resources/js/components/upload/ContentTypeSelector.jsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import React from 'react'
|
||||
import { getContentTypeValue, getContentTypeVisualKey } from '../../lib/uploadUtils'
|
||||
|
||||
/**
|
||||
* ContentTypeSelector
|
||||
*
|
||||
* Reusable mascot-icon content-type picker.
|
||||
* Displays each content type as a card with a mascot icon.
|
||||
*
|
||||
* @param {object} props
|
||||
* @param {Array} props.contentTypes List of content type objects from API
|
||||
* @param {string} props.selected Currently selected type value
|
||||
* @param {string} [props.error] Validation error message
|
||||
* @param {function} props.onChange Called with new type value string
|
||||
*/
|
||||
export default function ContentTypeSelector({ contentTypes = [], selected = '', error = '', onChange }) {
|
||||
if (!Array.isArray(contentTypes) || contentTypes.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl ring-1 ring-white/10 bg-white/5 px-4 py-3 text-sm text-white/60">
|
||||
No content types available.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex gap-3 overflow-x-auto py-2 no-scrollbar">
|
||||
{contentTypes.map((ct) => {
|
||||
const typeValue = getContentTypeValue(ct)
|
||||
const active = String(typeValue) === String(selected || '')
|
||||
const visualKey = getContentTypeVisualKey(ct)
|
||||
const iconPath = `/gfx/mascot_${visualKey}.webp`
|
||||
|
||||
return (
|
||||
<button
|
||||
key={typeValue || ct.name}
|
||||
type="button"
|
||||
onClick={() => onChange?.(String(typeValue))}
|
||||
aria-pressed={active}
|
||||
className={[
|
||||
'group flex flex-col items-center gap-2 min-w-[96px] rounded-xl border px-3 py-2.5',
|
||||
'transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/50',
|
||||
active
|
||||
? 'border-emerald-400/70 bg-emerald-400/15 shadow-lg shadow-emerald-900/30 scale-105'
|
||||
: 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06] hover:-translate-y-0.5 hover:scale-[1.03]',
|
||||
].join(' ')}
|
||||
>
|
||||
{/* Mascot icon */}
|
||||
<div className="h-16 w-16 rounded-full overflow-hidden flex items-center justify-center">
|
||||
<img
|
||||
src={iconPath}
|
||||
alt={`${ct.name || 'Content type'} icon`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width={64}
|
||||
height={64}
|
||||
className={[
|
||||
'h-full w-full object-contain transition-all duration-200',
|
||||
active
|
||||
? 'grayscale-0 opacity-100'
|
||||
: 'grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-85',
|
||||
].join(' ')}
|
||||
onError={(e) => {
|
||||
if (!e.currentTarget.src.includes('mascot_other.webp')) {
|
||||
e.currentTarget.src = '/gfx/mascot_other.webp'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<span className={`text-xs font-semibold text-center leading-snug ${active ? 'text-white' : 'text-white/60 group-hover:text-white/85'}`}>
|
||||
{ct.name || 'Type'}
|
||||
</span>
|
||||
|
||||
{/* Active indicator bar */}
|
||||
<div className={`h-0.5 w-8 rounded-full transition-all ${active ? 'bg-emerald-400/80' : 'bg-white/10 group-hover:bg-white/25'}`} />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="mt-2 text-xs text-red-300" role="alert">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -116,9 +116,9 @@ export default function ScreenshotUploader({
|
||||
animate={prefersReducedMotion ? {} : { opacity: 1, scale: 1 }}
|
||||
exit={prefersReducedMotion ? {} : { opacity: 0, scale: 0.96 }}
|
||||
transition={quickTransition}
|
||||
className="rounded-lg border border-white/50 bg-white/5 p-2 text-xs"
|
||||
className="rounded-lg ring-1 ring-white/10 bg-white/5 p-2 text-xs"
|
||||
>
|
||||
<div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-md border border-white/50 bg-black/25">
|
||||
<div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-md ring-1 ring-white/10 bg-black/25">
|
||||
<img
|
||||
src={item.url}
|
||||
alt={`Screenshot ${index + 1}`}
|
||||
|
||||
@@ -67,7 +67,7 @@ export default function UploadDropzone({
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={`rounded-xl border bg-gradient-to-br p-0 shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-colors ${invalid ? 'border-red-400/45 from-red-500/10 to-slate-900/45' : 'border-white/50 from-slate-900/80 to-slate-900/50'}`}>
|
||||
<section className={`rounded-xl bg-gradient-to-br p-0 shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-colors ${invalid ? 'ring-1 ring-red-400/40 from-red-500/10 to-slate-900/45' : 'ring-1 ring-white/10 from-slate-900/80 to-slate-900/50'}`}>
|
||||
{/* Intended props: file, dragState, accept, onDrop, onBrowse, onReset, disabled */}
|
||||
<motion.div
|
||||
data-testid="upload-dropzone"
|
||||
@@ -100,7 +100,7 @@ export default function UploadDropzone({
|
||||
}}
|
||||
animate={prefersReducedMotion ? undefined : { scale: dragging ? 1.01 : 1 }}
|
||||
transition={dragTransition}
|
||||
className={`group rounded-xl border-2 border-dashed border-white/50 py-6 px-4 text-center transition hover:border-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70 ${locked ? 'cursor-default bg-white/5 opacity-75' : 'cursor-pointer'} ${invalid ? 'border-red-300/70 bg-red-500/10 shadow-[0_0_0_1px_rgba(248,113,113,0.2)]' : dragging ? 'border-cyan-300 bg-cyan-500/20 shadow-[0_0_0_1px_rgba(103,232,249,0.35)]' : locked ? 'bg-white/5' : 'bg-sky-500/5 hover:bg-sky-500/12'}`}
|
||||
className={`group rounded-xl border-2 border-dashed border-white/15 py-6 px-4 text-center transition hover:border-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70 ${locked ? 'cursor-default bg-white/5 opacity-75' : 'cursor-pointer'} ${invalid ? 'border-red-300/70 bg-red-500/10 shadow-[0_0_0_1px_rgba(248,113,113,0.2)]' : dragging ? 'border-cyan-300 bg-cyan-500/20 shadow-[0_0_0_1px_rgba(103,232,249,0.35)]' : locked ? 'bg-white/5' : 'bg-sky-500/5 hover:bg-sky-500/12'}`}
|
||||
>
|
||||
<h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
|
||||
<p className="mt-1 text-xs text-soft">{description}</p>
|
||||
@@ -155,7 +155,7 @@ export default function UploadDropzone({
|
||||
/>
|
||||
|
||||
{(previewUrl || (fileMeta && String(fileMeta.type || '').startsWith('image/'))) && (
|
||||
<div className="mt-3 rounded-lg border border-white/50 bg-black/25 px-3 py-2 text-left text-xs text-white/80">
|
||||
<div className="mt-3 rounded-lg ring-1 ring-white/10 bg-black/25 px-3 py-2 text-left text-xs text-white/80">
|
||||
<div className="font-medium text-white/85">Selected file</div>
|
||||
<div className="mt-1 truncate">{fileName || fileHint}</div>
|
||||
{fileMeta && (
|
||||
|
||||
@@ -15,9 +15,9 @@ export default function UploadPreview({
|
||||
invalid = false,
|
||||
}) {
|
||||
return (
|
||||
<section className={`rounded-xl border bg-gradient-to-br p-5 shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-colors sm:p-6 ${invalid ? 'border-red-400/45 from-red-500/10 to-slate-900/45' : 'border-white/50 from-slate-900/80 to-slate-900/45'}`}>
|
||||
<section className={`rounded-xl bg-gradient-to-br p-5 shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-colors sm:p-6 ${invalid ? 'ring-1 ring-red-400/40 from-red-500/10 to-slate-900/45' : 'ring-1 ring-white/10 from-slate-900/80 to-slate-900/45'}`}>
|
||||
{/* Intended props: file, previewUrl, isArchive, dimensions, fileSize, format, warning */}
|
||||
<div className={`rounded-xl border p-4 transition-colors ${invalid ? 'border-red-300/45 bg-red-500/5' : 'border-white/50 bg-black/25'}`}>
|
||||
<div className={`rounded-xl ring-1 p-4 transition-colors ${invalid ? 'ring-red-300/40 bg-red-500/5' : 'ring-white/8 bg-black/25'}`}>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h3 className="text-lg font-semibold text-white">{title}</h3>
|
||||
<span className="rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-[11px] text-white/65">
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function UploadProgress({
|
||||
const progressValue = Math.max(0, Math.min(100, Number(progress) || 0))
|
||||
|
||||
return (
|
||||
<header className="rounded-xl border border-white/50 bg-gradient-to-br from-slate-900/80 to-slate-900/50 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.35)] sm:p-6">
|
||||
<header className="rounded-xl ring-1 ring-white/10 bg-gradient-to-br from-slate-900/80 to-slate-900/50 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.35)] sm:p-6">
|
||||
{/* Intended props: step, steps, phase, badge, progress, statusMessage */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import TagInput from '../tags/TagInput'
|
||||
import TagPicker from '../tags/TagPicker'
|
||||
import Checkbox from '../../Components/ui/Checkbox'
|
||||
|
||||
export default function UploadSidebar({
|
||||
@@ -62,16 +62,14 @@ export default function UploadSidebar({
|
||||
<h4 className="text-sm font-semibold text-white">Tags</h4>
|
||||
<p className="mt-1 text-xs text-white/60">Use keywords people would search for. Press Enter, comma, or Tab to add a tag.</p>
|
||||
</div>
|
||||
<TagInput
|
||||
<TagPicker
|
||||
value={metadata.tags}
|
||||
onChange={(nextTags) => onChangeTags?.(nextTags)}
|
||||
suggestedTags={suggestedTags}
|
||||
maxTags={15}
|
||||
minLength={2}
|
||||
maxLength={32}
|
||||
searchEndpoint="/api/tags/search"
|
||||
popularEndpoint="/api/tags/popular"
|
||||
placeholder="Type tags (e.g. cyberpunk, city)"
|
||||
error={errors.tags}
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ export default function UploadStepper({ steps = [], activeStep = 1, highestUnloc
|
||||
const safeActive = Math.max(1, Math.min(steps.length || 1, activeStep))
|
||||
|
||||
return (
|
||||
<nav aria-label="Upload steps" className="rounded-xl border border-white/50 bg-slate-900/70 px-3 py-3 sm:px-4">
|
||||
<nav aria-label="Upload steps" className="rounded-xl ring-1 ring-white/10 bg-slate-900/70 px-3 py-3 sm:px-4">
|
||||
<ol className="flex flex-nowrap items-center gap-3 overflow-x-auto sm:gap-4">
|
||||
{steps.map((step, index) => {
|
||||
const number = index + 1
|
||||
@@ -19,7 +19,7 @@ export default function UploadStepper({ steps = [], activeStep = 1, highestUnloc
|
||||
: isComplete
|
||||
? 'border-emerald-300/30 bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/25'
|
||||
: isLocked
|
||||
? 'cursor-default border-white/50 bg-white/5 text-white/40'
|
||||
? 'cursor-default border-white/10 bg-white/5 text-white/40'
|
||||
: 'border-white/10 bg-white/5 text-white/80 hover:bg-white/10'
|
||||
|
||||
const circleClass = isComplete
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
129
resources/js/components/upload/steps/Step1FileUpload.jsx
Normal file
129
resources/js/components/upload/steps/Step1FileUpload.jsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import React from 'react'
|
||||
import UploadDropzone from '../UploadDropzone'
|
||||
import ScreenshotUploader from '../ScreenshotUploader'
|
||||
import UploadProgress from '../UploadProgress'
|
||||
import { machineStates } from '../../../hooks/upload/useUploadMachine'
|
||||
import { getProcessingTransparencyLabel } from '../../../lib/uploadUtils'
|
||||
|
||||
/**
|
||||
* Step1FileUpload
|
||||
*
|
||||
* Step 1 of the upload wizard: file selection + live upload progress.
|
||||
* Shows the dropzone, optional screenshot uploader (archives),
|
||||
* and the progress panel once an upload is in flight.
|
||||
*/
|
||||
export default function Step1FileUpload({
|
||||
headingRef,
|
||||
// File state
|
||||
primaryFile,
|
||||
primaryPreviewUrl,
|
||||
primaryErrors,
|
||||
primaryWarnings,
|
||||
fileMetadata,
|
||||
fileSelectionLocked,
|
||||
onPrimaryFileChange,
|
||||
// Archive screenshots
|
||||
isArchive,
|
||||
screenshots,
|
||||
screenshotErrors,
|
||||
screenshotPerFileErrors,
|
||||
onScreenshotsChange,
|
||||
// Machine state
|
||||
machine,
|
||||
showProgress,
|
||||
onRetry,
|
||||
onReset,
|
||||
}) {
|
||||
const processingTransparencyLabel = getProcessingTransparencyLabel(
|
||||
machine.processingStatus,
|
||||
machine.state
|
||||
)
|
||||
|
||||
const progressStatus = (() => {
|
||||
if (machine.state === machineStates.ready_to_publish) return 'Ready'
|
||||
if (machine.state === machineStates.uploading) return 'Uploading'
|
||||
if (machine.state === machineStates.processing || machine.state === machineStates.finishing) return 'Processing'
|
||||
return 'Idle'
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
|
||||
{/* Step header */}
|
||||
<div className="rounded-xl bg-white/[0.04] px-4 py-3 ring-1 ring-white/8">
|
||||
<h2
|
||||
ref={headingRef}
|
||||
tabIndex={-1}
|
||||
className="text-lg font-semibold text-white focus:outline-none"
|
||||
>
|
||||
Upload your artwork
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-white/60">
|
||||
Drop or browse a file. Validation runs immediately. Upload starts when you click
|
||||
<span className="text-white/80">Start upload</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Locked notice */}
|
||||
{fileSelectionLocked && (
|
||||
<div className="flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-xs text-amber-100 ring-1 ring-amber-300/30">
|
||||
<svg className="h-3.5 w-3.5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
File is locked after upload. Reset to change.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Primary dropzone */}
|
||||
<UploadDropzone
|
||||
title="Upload your artwork file"
|
||||
description="Drag & drop or click to browse. Accepted: JPG, PNG, WEBP, ZIP, RAR, 7Z."
|
||||
fileName={primaryFile?.name || ''}
|
||||
previewUrl={primaryPreviewUrl}
|
||||
fileMeta={fileMetadata}
|
||||
fileHint="No file selected"
|
||||
invalid={primaryErrors.length > 0}
|
||||
errors={primaryErrors}
|
||||
showLooksGood={Boolean(primaryFile) && primaryErrors.length === 0}
|
||||
looksGoodText="Looks good"
|
||||
locked={fileSelectionLocked}
|
||||
onPrimaryFileChange={(file) => {
|
||||
if (fileSelectionLocked) return
|
||||
onPrimaryFileChange(file || null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Screenshots (archives only) */}
|
||||
<ScreenshotUploader
|
||||
title="Archive screenshots"
|
||||
description="We need at least 1 screenshot to generate thumbnails and analyze content."
|
||||
visible={isArchive}
|
||||
files={screenshots}
|
||||
min={1}
|
||||
max={5}
|
||||
perFileErrors={screenshotPerFileErrors}
|
||||
errors={screenshotErrors}
|
||||
invalid={isArchive && screenshotErrors.length > 0}
|
||||
showLooksGood={isArchive && screenshots.length > 0 && screenshotErrors.length === 0}
|
||||
looksGoodText="Looks good"
|
||||
onFilesChange={onScreenshotsChange}
|
||||
/>
|
||||
|
||||
{/* Progress panel */}
|
||||
{showProgress && (
|
||||
<UploadProgress
|
||||
title="Upload progress"
|
||||
description="Upload and processing status"
|
||||
status={progressStatus}
|
||||
progress={machine.progress}
|
||||
state={machine.state}
|
||||
processingStatus={machine.processingStatus}
|
||||
isCancelling={machine.isCancelling}
|
||||
error={machine.error}
|
||||
processingLabel={processingTransparencyLabel}
|
||||
onRetry={onRetry}
|
||||
onReset={onReset}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
163
resources/js/components/upload/steps/Step2Details.jsx
Normal file
163
resources/js/components/upload/steps/Step2Details.jsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import React from 'react'
|
||||
import ContentTypeSelector from '../ContentTypeSelector'
|
||||
import CategorySelector from '../CategorySelector'
|
||||
import UploadSidebar from '../UploadSidebar'
|
||||
|
||||
/**
|
||||
* Step2Details
|
||||
*
|
||||
* Step 2 of the upload wizard: artwork metadata.
|
||||
* Shows uploaded-asset summary, content type selector,
|
||||
* category/subcategory selectors, tags, description, and rights.
|
||||
*/
|
||||
export default function Step2Details({
|
||||
headingRef,
|
||||
// Asset summary
|
||||
primaryFile,
|
||||
primaryPreviewUrl,
|
||||
isArchive,
|
||||
fileMetadata,
|
||||
screenshots,
|
||||
// Content type + category
|
||||
contentTypes,
|
||||
metadata,
|
||||
metadataErrors,
|
||||
filteredCategoryTree,
|
||||
allRootCategoryOptions,
|
||||
requiresSubCategory,
|
||||
onContentTypeChange,
|
||||
onRootCategoryChange,
|
||||
onSubCategoryChange,
|
||||
// Sidebar (title / tags / description / rights)
|
||||
suggestedTags,
|
||||
onChangeTitle,
|
||||
onChangeTags,
|
||||
onChangeDescription,
|
||||
onToggleRights,
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
|
||||
{/* Step header */}
|
||||
<div className="rounded-xl bg-white/[0.04] px-4 py-3 ring-1 ring-white/8">
|
||||
<h2
|
||||
ref={headingRef}
|
||||
tabIndex={-1}
|
||||
className="text-lg font-semibold text-white focus:outline-none"
|
||||
>
|
||||
Artwork details
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-white/60">
|
||||
Complete required metadata and rights confirmation before publishing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Uploaded asset summary */}
|
||||
<div className="rounded-xl ring-1 ring-white/8 bg-white/[0.025] p-4">
|
||||
<p className="mb-3 text-[11px] uppercase tracking-wide text-white/45">Uploaded asset</p>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
{/* Thumbnail / Archive icon */}
|
||||
{primaryPreviewUrl && !isArchive ? (
|
||||
<div className="flex h-[120px] w-[120px] items-center justify-center overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 shrink-0">
|
||||
<img
|
||||
src={primaryPreviewUrl}
|
||||
alt="Uploaded artwork thumbnail"
|
||||
className="max-h-full max-w-full object-contain"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width={120}
|
||||
height={120}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-[120px] w-[120px] place-items-center rounded-xl ring-1 ring-white/10 bg-white/5 shrink-0">
|
||||
<svg className="h-8 w-8 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File metadata */}
|
||||
<div className="min-w-0 space-y-1">
|
||||
<p className="truncate text-sm font-medium text-white">
|
||||
{primaryFile?.name || 'Primary file'}
|
||||
</p>
|
||||
<p className="text-xs text-white/50">
|
||||
{isArchive
|
||||
? `Archive · ${screenshots.length} screenshot${screenshots.length !== 1 ? 's' : ''}`
|
||||
: fileMetadata.resolution !== '—'
|
||||
? `${fileMetadata.resolution} · ${fileMetadata.size}`
|
||||
: fileMetadata.size}
|
||||
</p>
|
||||
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] ${isArchive ? 'border-amber-400/40 bg-amber-400/10 text-amber-200' : 'border-sky-400/40 bg-sky-400/10 text-sky-200'}`}>
|
||||
{isArchive ? 'Archive' : 'Image'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content type selector */}
|
||||
<section className="rounded-xl ring-1 ring-white/10 bg-gradient-to-br from-white/[0.04] to-white/[0.01] p-4 sm:p-5">
|
||||
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">Content type</h3>
|
||||
<p className="mt-0.5 text-xs text-white/55">Choose what kind of artwork this is.</p>
|
||||
</div>
|
||||
<span className="rounded-full border border-sky-400/35 bg-sky-400/10 px-2.5 py-0.5 text-[11px] uppercase tracking-widest text-sky-300">
|
||||
Step 2a
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ContentTypeSelector
|
||||
contentTypes={contentTypes}
|
||||
selected={metadata.contentType}
|
||||
error={metadataErrors.contentType}
|
||||
onChange={onContentTypeChange}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Category selector */}
|
||||
<section className="rounded-xl ring-1 ring-white/10 bg-gradient-to-br from-white/[0.04] to-white/[0.01] p-4 sm:p-5">
|
||||
<div className="mb-4 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">Category</h3>
|
||||
<p className="mt-0.5 text-xs text-white/55">
|
||||
{requiresSubCategory ? 'Select a category, then a subcategory.' : 'Select a category.'}
|
||||
</p>
|
||||
</div>
|
||||
<span className="rounded-full border border-violet-400/35 bg-violet-400/10 px-2.5 py-0.5 text-[11px] uppercase tracking-widest text-violet-300">
|
||||
Step 2b
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<CategorySelector
|
||||
categories={filteredCategoryTree}
|
||||
rootCategoryId={metadata.rootCategoryId}
|
||||
subCategoryId={metadata.subCategoryId}
|
||||
hasContentType={Boolean(metadata.contentType)}
|
||||
error={metadataErrors.category}
|
||||
onRootChange={onRootCategoryChange}
|
||||
onSubChange={onSubCategoryChange}
|
||||
allRoots={allRootCategoryOptions}
|
||||
onRootChangeAll={(rootId, contentTypeValue) => {
|
||||
if (contentTypeValue) {
|
||||
onContentTypeChange(contentTypeValue)
|
||||
}
|
||||
onRootCategoryChange(rootId)
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Title, tags, description, rights */}
|
||||
<UploadSidebar
|
||||
showHeader={false}
|
||||
metadata={metadata}
|
||||
suggestedTags={suggestedTags}
|
||||
errors={metadataErrors}
|
||||
onChangeTitle={onChangeTitle}
|
||||
onChangeTags={onChangeTags}
|
||||
onChangeDescription={onChangeDescription}
|
||||
onToggleRights={onToggleRights}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
159
resources/js/components/upload/steps/Step3Publish.jsx
Normal file
159
resources/js/components/upload/steps/Step3Publish.jsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import React from 'react'
|
||||
import { motion, useReducedMotion } from 'framer-motion'
|
||||
|
||||
/**
|
||||
* PublishCheckBadge – a single status item for the review section
|
||||
*/
|
||||
function PublishCheckBadge({ label, ok }) {
|
||||
return (
|
||||
<span
|
||||
className={[
|
||||
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs',
|
||||
ok
|
||||
? 'border-emerald-300/40 bg-emerald-500/12 text-emerald-100'
|
||||
: 'border-white/15 bg-white/5 text-white/55',
|
||||
].join(' ')}
|
||||
>
|
||||
<span aria-hidden="true">{ok ? '✓' : '○'}</span>
|
||||
{label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Step3Publish
|
||||
*
|
||||
* Step 3 of the upload wizard: review summary and publish action.
|
||||
* Shows a compact artwork preview, metadata summary, and readiness badges.
|
||||
*/
|
||||
export default function Step3Publish({
|
||||
headingRef,
|
||||
// Asset
|
||||
primaryFile,
|
||||
primaryPreviewUrl,
|
||||
isArchive,
|
||||
screenshots,
|
||||
fileMetadata,
|
||||
// Metadata
|
||||
metadata,
|
||||
// Readiness
|
||||
canPublish,
|
||||
uploadReady,
|
||||
}) {
|
||||
const prefersReducedMotion = useReducedMotion()
|
||||
const quickTransition = prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }
|
||||
|
||||
const hasPreview = Boolean(primaryPreviewUrl && !isArchive)
|
||||
|
||||
const checks = [
|
||||
{ label: 'File uploaded', ok: uploadReady },
|
||||
{ label: 'Scan passed', ok: uploadReady },
|
||||
{ label: 'Preview ready', ok: hasPreview || (isArchive && screenshots.length > 0) },
|
||||
{ label: 'Rights confirmed', ok: Boolean(metadata.rightsAccepted) },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
|
||||
{/* Step header */}
|
||||
<div className="rounded-xl bg-white/[0.04] px-4 py-3 ring-1 ring-white/8">
|
||||
<h2
|
||||
ref={headingRef}
|
||||
tabIndex={-1}
|
||||
className="text-lg font-semibold text-white focus:outline-none"
|
||||
>
|
||||
Review & publish
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-white/60">
|
||||
Everything looks good? Hit <span className="text-white/85">Publish</span> to make your artwork live.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Preview + summary */}
|
||||
<div className="rounded-xl ring-1 ring-white/8 bg-white/[0.025] p-4">
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
{/* Artwork thumbnail */}
|
||||
<div className="shrink-0">
|
||||
{hasPreview ? (
|
||||
<div className="flex h-[140px] w-[140px] items-center justify-center overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30">
|
||||
<img
|
||||
src={primaryPreviewUrl}
|
||||
alt="Artwork preview"
|
||||
className="max-h-full max-w-full object-contain"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width={140}
|
||||
height={140}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-[140px] w-[140px] place-items-center rounded-xl ring-1 ring-white/10 bg-white/5 text-white/40">
|
||||
<svg className="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="min-w-0 flex-1 space-y-2.5">
|
||||
<p className="text-base font-semibold text-white leading-snug">
|
||||
{metadata.title || <span className="text-white/45 italic">Untitled artwork</span>}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/55">
|
||||
{metadata.contentType && (
|
||||
<span className="capitalize">Type: <span className="text-white/75">{metadata.contentType}</span></span>
|
||||
)}
|
||||
{metadata.rootCategoryId && (
|
||||
<span>Category: <span className="text-white/75">{metadata.rootCategoryId}</span></span>
|
||||
)}
|
||||
{metadata.subCategoryId && (
|
||||
<span>Sub: <span className="text-white/75">{metadata.subCategoryId}</span></span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/55">
|
||||
<span>Tags: <span className="text-white/75">{(metadata.tags || []).length}</span></span>
|
||||
{!isArchive && fileMetadata?.resolution && fileMetadata.resolution !== '—' && (
|
||||
<span>Resolution: <span className="text-white/75">{fileMetadata.resolution}</span></span>
|
||||
)}
|
||||
{isArchive && (
|
||||
<span>Screenshots: <span className="text-white/75">{screenshots.length}</span></span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{metadata.description && (
|
||||
<p className="line-clamp-2 text-xs text-white/50">{metadata.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Readiness badges */}
|
||||
<div>
|
||||
<p className="mb-2.5 text-xs uppercase tracking-wide text-white/40">Readiness checks</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{checks.map((check) => (
|
||||
<PublishCheckBadge key={check.label} label={check.label} ok={check.ok} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Not-ready notice */}
|
||||
{!canPublish && (
|
||||
<motion.div
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, y: 4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={quickTransition}
|
||||
className="rounded-lg ring-1 ring-amber-300/25 bg-amber-500/8 px-4 py-3 text-sm text-amber-100/85"
|
||||
>
|
||||
{!uploadReady
|
||||
? 'Waiting for upload processing to complete…'
|
||||
: !metadata.rightsAccepted
|
||||
? 'Please confirm rights in the Details step to enable publishing.'
|
||||
: 'Complete all required fields to enable publishing.'}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
210
resources/js/hooks/upload/useFileValidation.js
Normal file
210
resources/js/hooks/upload/useFileValidation.js
Normal file
@@ -0,0 +1,210 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
detectFileType,
|
||||
formatBytes,
|
||||
readImageDimensions,
|
||||
getExtension,
|
||||
IMAGE_MIME,
|
||||
IMAGE_EXTENSIONS,
|
||||
PRIMARY_IMAGE_MAX_BYTES,
|
||||
PRIMARY_ARCHIVE_MAX_BYTES,
|
||||
SCREENSHOT_MAX_BYTES,
|
||||
} from '../../lib/uploadUtils'
|
||||
|
||||
// ─── Primary file validation ──────────────────────────────────────────────────
|
||||
async function validatePrimaryFile(file) {
|
||||
const errors = []
|
||||
const warnings = []
|
||||
const type = detectFileType(file)
|
||||
|
||||
if (!file) {
|
||||
return {
|
||||
type: 'unknown',
|
||||
errors: [],
|
||||
warnings,
|
||||
metadata: { resolution: '—', size: '—', type: '—' },
|
||||
previewUrl: '',
|
||||
}
|
||||
}
|
||||
|
||||
const metadata = {
|
||||
resolution: '—',
|
||||
size: formatBytes(file.size),
|
||||
type: file.type || getExtension(file.name) || 'unknown',
|
||||
}
|
||||
|
||||
if (type === 'unsupported') {
|
||||
errors.push('Unsupported file type. Use image (jpg/jpeg/png/webp) or archive (zip/rar/7z/tar/gz).')
|
||||
}
|
||||
|
||||
if (type === 'image') {
|
||||
if (file.size > PRIMARY_IMAGE_MAX_BYTES) {
|
||||
errors.push('Image exceeds 50MB maximum size.')
|
||||
}
|
||||
try {
|
||||
const dimensions = await readImageDimensions(file)
|
||||
metadata.resolution = `${dimensions.width} × ${dimensions.height}`
|
||||
if (dimensions.width < 800 || dimensions.height < 600) {
|
||||
errors.push('Image resolution must be at least 800×600.')
|
||||
}
|
||||
} catch {
|
||||
errors.push('Unable to read image resolution.')
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'archive') {
|
||||
metadata.resolution = 'n/a'
|
||||
if (file.size > PRIMARY_ARCHIVE_MAX_BYTES) {
|
||||
errors.push('Archive exceeds 200MB maximum size.')
|
||||
}
|
||||
warnings.push('Archive upload requires at least one valid screenshot.')
|
||||
}
|
||||
|
||||
const previewUrl = type === 'image' ? URL.createObjectURL(file) : ''
|
||||
|
||||
return { type, errors, warnings, metadata, previewUrl }
|
||||
}
|
||||
|
||||
// ─── Screenshot validation ────────────────────────────────────────────────────
|
||||
async function validateScreenshots(files, isArchive) {
|
||||
if (!isArchive) return { errors: [], perFileErrors: [] }
|
||||
|
||||
const errors = []
|
||||
const perFileErrors = Array.from({ length: files.length }, () => '')
|
||||
|
||||
if (files.length < 1) errors.push('At least one screenshot is required for archives.')
|
||||
if (files.length > 5) errors.push('Maximum 5 screenshots are allowed.')
|
||||
|
||||
await Promise.all(
|
||||
files.map(async (file, index) => {
|
||||
const typeErrors = []
|
||||
const extension = getExtension(file.name)
|
||||
const mime = String(file.type || '').toLowerCase()
|
||||
|
||||
if (!IMAGE_MIME.has(mime) && !IMAGE_EXTENSIONS.has(extension)) {
|
||||
typeErrors.push('Must be JPG, PNG, or WEBP.')
|
||||
}
|
||||
if (file.size > SCREENSHOT_MAX_BYTES) {
|
||||
typeErrors.push('Must be 10MB or less.')
|
||||
}
|
||||
if (typeErrors.length === 0) {
|
||||
try {
|
||||
const dimensions = await readImageDimensions(file)
|
||||
if (dimensions.width < 1280 || dimensions.height < 720) {
|
||||
typeErrors.push('Minimum resolution is 1280×720.')
|
||||
}
|
||||
} catch {
|
||||
typeErrors.push('Could not read screenshot resolution.')
|
||||
}
|
||||
}
|
||||
if (typeErrors.length > 0) {
|
||||
perFileErrors[index] = typeErrors.join(' ')
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
if (perFileErrors.some(Boolean)) {
|
||||
errors.push('One or more screenshots are invalid.')
|
||||
}
|
||||
|
||||
return { errors, perFileErrors }
|
||||
}
|
||||
|
||||
// ─── Hook ─────────────────────────────────────────────────────────────────────
|
||||
/**
|
||||
* useFileValidation
|
||||
*
|
||||
* Runs async validation on the primary file and screenshots,
|
||||
* maintains preview URL lifecycle (revokes on change/unmount),
|
||||
* and exposes derived state for the upload UI.
|
||||
*
|
||||
* @param {File|null} primaryFile
|
||||
* @param {File[]} screenshots
|
||||
* @param {boolean} isArchive - derived from primaryType === 'archive'
|
||||
*/
|
||||
export default function useFileValidation(primaryFile, screenshots, isArchive) {
|
||||
const [primaryType, setPrimaryType] = useState('unknown')
|
||||
const [primaryErrors, setPrimaryErrors] = useState([])
|
||||
const [primaryWarnings, setPrimaryWarnings] = useState([])
|
||||
const [fileMetadata, setFileMetadata] = useState({ resolution: '—', size: '—', type: '—' })
|
||||
const [primaryPreviewUrl, setPrimaryPreviewUrl] = useState('')
|
||||
|
||||
const [screenshotErrors, setScreenshotErrors] = useState([])
|
||||
const [screenshotPerFileErrors, setScreenshotPerFileErrors] = useState([])
|
||||
|
||||
const primaryRunRef = useRef(0)
|
||||
const screenshotRunRef = useRef(0)
|
||||
|
||||
// Primary file validation
|
||||
useEffect(() => {
|
||||
primaryRunRef.current += 1
|
||||
const runId = primaryRunRef.current
|
||||
let cancelled = false
|
||||
|
||||
;(async () => {
|
||||
const result = await validatePrimaryFile(primaryFile)
|
||||
if (cancelled || runId !== primaryRunRef.current) return
|
||||
|
||||
setPrimaryType(result.type)
|
||||
setPrimaryWarnings(result.warnings)
|
||||
setPrimaryErrors(result.errors)
|
||||
setFileMetadata(result.metadata)
|
||||
|
||||
setPrimaryPreviewUrl((current) => {
|
||||
if (current) URL.revokeObjectURL(current)
|
||||
return result.previewUrl
|
||||
})
|
||||
})()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [primaryFile])
|
||||
|
||||
// Screenshot validation
|
||||
useEffect(() => {
|
||||
screenshotRunRef.current += 1
|
||||
const runId = screenshotRunRef.current
|
||||
let cancelled = false
|
||||
|
||||
;(async () => {
|
||||
const result = await validateScreenshots(screenshots, isArchive)
|
||||
if (cancelled || runId !== screenshotRunRef.current) return
|
||||
setScreenshotErrors(result.errors)
|
||||
setScreenshotPerFileErrors(result.perFileErrors)
|
||||
})()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [screenshots, isArchive])
|
||||
|
||||
// Clear screenshots when file changes to a non-archive
|
||||
useEffect(() => {
|
||||
if (!isArchive) {
|
||||
setScreenshotErrors([])
|
||||
setScreenshotPerFileErrors([])
|
||||
}
|
||||
}, [isArchive])
|
||||
|
||||
// Revoke preview URL on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (primaryPreviewUrl) URL.revokeObjectURL(primaryPreviewUrl)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
return {
|
||||
primaryType,
|
||||
primaryErrors,
|
||||
primaryWarnings,
|
||||
fileMetadata,
|
||||
primaryPreviewUrl,
|
||||
screenshotErrors,
|
||||
screenshotPerFileErrors,
|
||||
}
|
||||
}
|
||||
|
||||
/** Standalone for use outside the hook if needed */
|
||||
export { validatePrimaryFile, validateScreenshots }
|
||||
433
resources/js/hooks/upload/useUploadMachine.js
Normal file
433
resources/js/hooks/upload/useUploadMachine.js
Normal file
@@ -0,0 +1,433 @@
|
||||
import { useCallback, useReducer, useRef } from 'react'
|
||||
import { emitUploadEvent } from '../../lib/uploadAnalytics'
|
||||
import * as uploadEndpoints from '../../lib/uploadEndpoints'
|
||||
|
||||
// ─── Constants ──────────────────────────────────────────────────────────────
|
||||
const DEFAULT_CHUNK_SIZE_BYTES = 5 * 1024 * 1024
|
||||
const POLL_INTERVAL_MS = 2000
|
||||
|
||||
// ─── State machine ───────────────────────────────────────────────────────────
|
||||
export const machineStates = {
|
||||
idle: 'idle',
|
||||
initializing: 'initializing',
|
||||
uploading: 'uploading',
|
||||
finishing: 'finishing',
|
||||
processing: 'processing',
|
||||
ready_to_publish: 'ready_to_publish',
|
||||
publishing: 'publishing',
|
||||
complete: 'complete',
|
||||
error: 'error',
|
||||
cancelled: 'cancelled',
|
||||
}
|
||||
|
||||
const initialMachineState = {
|
||||
state: machineStates.idle,
|
||||
progress: 0,
|
||||
sessionId: null,
|
||||
uploadToken: null,
|
||||
processingStatus: null,
|
||||
isCancelling: false,
|
||||
error: '',
|
||||
lastAction: null,
|
||||
}
|
||||
|
||||
function machineReducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'INIT_START':
|
||||
return { ...state, state: machineStates.initializing, progress: 0, error: '', isCancelling: false, lastAction: 'start' }
|
||||
case 'INIT_SUCCESS':
|
||||
return { ...state, sessionId: action.sessionId, uploadToken: action.uploadToken, error: '' }
|
||||
case 'UPLOAD_START':
|
||||
return { ...state, state: machineStates.uploading, progress: 1, error: '' }
|
||||
case 'UPLOAD_PROGRESS':
|
||||
return { ...state, progress: Math.max(1, Math.min(95, action.progress)), error: '' }
|
||||
case 'FINISH_START':
|
||||
return { ...state, state: machineStates.finishing, progress: Math.max(state.progress, 96), error: '' }
|
||||
case 'FINISH_SUCCESS':
|
||||
return { ...state, state: machineStates.processing, progress: 100, processingStatus: action.processingStatus ?? 'processing', error: '' }
|
||||
case 'PROCESSING_STATUS':
|
||||
return { ...state, processingStatus: action.processingStatus ?? state.processingStatus, error: '' }
|
||||
case 'READY_TO_PUBLISH':
|
||||
return { ...state, state: machineStates.ready_to_publish, processingStatus: 'ready', error: '' }
|
||||
case 'PUBLISH_START':
|
||||
return { ...state, state: machineStates.publishing, error: '', lastAction: 'publish' }
|
||||
case 'PUBLISH_SUCCESS':
|
||||
return { ...state, state: machineStates.complete, error: '' }
|
||||
case 'CANCEL_START':
|
||||
return { ...state, isCancelling: true, error: '', lastAction: 'cancel' }
|
||||
case 'CANCELLED':
|
||||
return { ...state, state: machineStates.cancelled, isCancelling: false, error: '' }
|
||||
case 'ERROR':
|
||||
return { ...state, state: machineStates.error, isCancelling: false, error: action.error || 'Upload failed.' }
|
||||
case 'RESET_MACHINE':
|
||||
return { ...initialMachineState }
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
function toPercent(loaded, total) {
|
||||
if (!Number.isFinite(total) || total <= 0) return 0
|
||||
return Math.max(0, Math.min(100, Math.round((loaded / total) * 100)))
|
||||
}
|
||||
|
||||
function getProcessingValue(payload) {
|
||||
const direct = String(payload?.processing_state || payload?.status || '').toLowerCase()
|
||||
return direct || 'processing'
|
||||
}
|
||||
|
||||
export function isReadyToPublishStatus(status) {
|
||||
const normalized = String(status || '').toLowerCase()
|
||||
return ['ready', 'processed', 'publish_ready', 'published', 'complete'].includes(normalized)
|
||||
}
|
||||
|
||||
// ─── Hook ─────────────────────────────────────────────────────────────────────
|
||||
/**
|
||||
* useUploadMachine
|
||||
*
|
||||
* Manages the full upload state machine lifecycle:
|
||||
* init → chunk → finish → poll → publish
|
||||
*
|
||||
* @param {object} opts
|
||||
* @param {File|null} opts.primaryFile
|
||||
* @param {boolean} opts.canStartUpload
|
||||
* @param {string} opts.primaryType 'image' | 'archive' | 'unknown'
|
||||
* @param {boolean} opts.isArchive
|
||||
* @param {number|null} opts.initialDraftId
|
||||
* @param {object} opts.metadata { title, description, tags, rightsAccepted, ... }
|
||||
* @param {number} [opts.chunkSize]
|
||||
* @param {function} [opts.onArtworkCreated] called with artworkId after draft creation
|
||||
*/
|
||||
export default function useUploadMachine({
|
||||
primaryFile,
|
||||
canStartUpload,
|
||||
primaryType,
|
||||
isArchive,
|
||||
initialDraftId = null,
|
||||
metadata,
|
||||
chunkSize = DEFAULT_CHUNK_SIZE_BYTES,
|
||||
onArtworkCreated,
|
||||
}) {
|
||||
const [machine, dispatchMachine] = useReducer(machineReducer, initialMachineState)
|
||||
|
||||
const pollingTimerRef = useRef(null)
|
||||
const requestControllersRef = useRef(new Set())
|
||||
const publishLockRef = useRef(false)
|
||||
|
||||
// Resolved artwork id (draft) created at the start of the upload
|
||||
const resolvedArtworkIdRef = useRef(
|
||||
(() => {
|
||||
const parsed = Number(initialDraftId)
|
||||
return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : null
|
||||
})()
|
||||
)
|
||||
|
||||
const effectiveChunkSize = (() => {
|
||||
const parsed = Number(chunkSize)
|
||||
return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : DEFAULT_CHUNK_SIZE_BYTES
|
||||
})()
|
||||
|
||||
// ── Controller registry ────────────────────────────────────────────────────
|
||||
const registerController = useCallback(() => {
|
||||
const controller = new AbortController()
|
||||
requestControllersRef.current.add(controller)
|
||||
return controller
|
||||
}, [])
|
||||
|
||||
const unregisterController = useCallback((controller) => {
|
||||
if (!controller) return
|
||||
requestControllersRef.current.delete(controller)
|
||||
}, [])
|
||||
|
||||
const abortAllRequests = useCallback(() => {
|
||||
requestControllersRef.current.forEach((c) => c.abort())
|
||||
requestControllersRef.current.clear()
|
||||
}, [])
|
||||
|
||||
// ── Polling ────────────────────────────────────────────────────────────────
|
||||
const clearPolling = useCallback(() => {
|
||||
if (pollingTimerRef.current) {
|
||||
window.clearInterval(pollingTimerRef.current)
|
||||
pollingTimerRef.current = null
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchProcessingStatus = useCallback(async (sessionId, uploadToken, signal) => {
|
||||
const response = await window.axios.get(uploadEndpoints.status(sessionId), {
|
||||
signal,
|
||||
headers: uploadToken ? { 'X-Upload-Token': uploadToken } : undefined,
|
||||
params: uploadToken ? { upload_token: uploadToken } : undefined,
|
||||
})
|
||||
return response.data || {}
|
||||
}, [])
|
||||
|
||||
const pollProcessing = useCallback(async (sessionId, uploadToken) => {
|
||||
if (!sessionId) return
|
||||
try {
|
||||
const statusController = registerController()
|
||||
const payload = await fetchProcessingStatus(sessionId, uploadToken, statusController.signal)
|
||||
unregisterController(statusController)
|
||||
|
||||
const processingValue = getProcessingValue(payload)
|
||||
dispatchMachine({ type: 'PROCESSING_STATUS', processingStatus: processingValue })
|
||||
|
||||
if (isReadyToPublishStatus(processingValue)) {
|
||||
dispatchMachine({ type: 'READY_TO_PUBLISH' })
|
||||
clearPolling()
|
||||
} else if (processingValue === 'rejected' || processingValue === 'error' || payload?.failure_reason) {
|
||||
const failureMessage = payload?.failure_reason || payload?.message || `Processing ended with status: ${processingValue}`
|
||||
dispatchMachine({ type: 'ERROR', error: failureMessage })
|
||||
clearPolling()
|
||||
}
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED') return
|
||||
const message = error?.response?.data?.message || 'Processing status check failed.'
|
||||
dispatchMachine({ type: 'ERROR', error: message })
|
||||
emitUploadEvent('upload_error', { stage: 'processing_poll', message })
|
||||
clearPolling()
|
||||
}
|
||||
}, [fetchProcessingStatus, registerController, unregisterController, clearPolling])
|
||||
|
||||
const startPolling = useCallback((sessionId, uploadToken) => {
|
||||
clearPolling()
|
||||
pollProcessing(sessionId, uploadToken)
|
||||
pollingTimerRef.current = window.setInterval(() => {
|
||||
pollProcessing(sessionId, uploadToken)
|
||||
}, POLL_INTERVAL_MS)
|
||||
}, [clearPolling, pollProcessing])
|
||||
|
||||
// ── Core upload flow ───────────────────────────────────────────────────────
|
||||
const runUploadFlow = useCallback(async () => {
|
||||
if (!primaryFile || !canStartUpload) return
|
||||
|
||||
clearPolling()
|
||||
dispatchMachine({ type: 'INIT_START' })
|
||||
emitUploadEvent('upload_start', {
|
||||
file_name: primaryFile.name,
|
||||
file_size: primaryFile.size,
|
||||
file_type: primaryType,
|
||||
is_archive: isArchive,
|
||||
})
|
||||
|
||||
try {
|
||||
// 1. Create or reuse the artwork draft
|
||||
let artworkIdForUpload = resolvedArtworkIdRef.current
|
||||
if (!artworkIdForUpload) {
|
||||
const derivedTitle =
|
||||
String(metadata.title || '').trim() ||
|
||||
String(primaryFile.name || '').replace(/\.[^.]+$/, '') ||
|
||||
'Untitled upload'
|
||||
|
||||
const draftResponse = await window.axios.post('/api/artworks', {
|
||||
title: derivedTitle,
|
||||
description: String(metadata.description || '').trim() || null,
|
||||
category: metadata.subCategoryId || metadata.rootCategoryId || null,
|
||||
tags: Array.isArray(metadata.tags) ? metadata.tags.join(', ') : '',
|
||||
license: Boolean(metadata.rightsAccepted),
|
||||
})
|
||||
|
||||
const draftIdCandidate = Number(draftResponse?.data?.artwork_id ?? draftResponse?.data?.id)
|
||||
if (!Number.isFinite(draftIdCandidate) || draftIdCandidate <= 0) {
|
||||
throw new Error('Unable to create upload draft before finishing upload.')
|
||||
}
|
||||
|
||||
artworkIdForUpload = Math.floor(draftIdCandidate)
|
||||
resolvedArtworkIdRef.current = artworkIdForUpload
|
||||
onArtworkCreated?.(artworkIdForUpload)
|
||||
}
|
||||
|
||||
// 2. Init upload session
|
||||
const initController = registerController()
|
||||
const initResponse = await window.axios.post(
|
||||
uploadEndpoints.init(),
|
||||
{ client: 'web' },
|
||||
{ signal: initController.signal }
|
||||
)
|
||||
unregisterController(initController)
|
||||
|
||||
const sessionId = initResponse?.data?.session_id
|
||||
const uploadToken = initResponse?.data?.upload_token
|
||||
if (!sessionId || !uploadToken) {
|
||||
throw new Error('Upload session initialization returned an invalid payload.')
|
||||
}
|
||||
|
||||
dispatchMachine({ type: 'INIT_SUCCESS', sessionId, uploadToken })
|
||||
dispatchMachine({ type: 'UPLOAD_START' })
|
||||
|
||||
// 3. Chunked upload
|
||||
let uploaded = 0
|
||||
const totalSize = primaryFile.size
|
||||
|
||||
while (uploaded < totalSize) {
|
||||
const nextOffset = Math.min(uploaded + effectiveChunkSize, totalSize)
|
||||
const blob = primaryFile.slice(uploaded, nextOffset)
|
||||
|
||||
const payload = new FormData()
|
||||
payload.append('session_id', sessionId)
|
||||
payload.append('offset', String(uploaded))
|
||||
payload.append('chunk_size', String(blob.size))
|
||||
payload.append('total_size', String(totalSize))
|
||||
payload.append('upload_token', uploadToken)
|
||||
payload.append('chunk', blob)
|
||||
|
||||
const chunkController = registerController()
|
||||
const chunkResponse = await window.axios.post(uploadEndpoints.chunk(), payload, {
|
||||
signal: chunkController.signal,
|
||||
headers: { 'X-Upload-Token': uploadToken },
|
||||
})
|
||||
unregisterController(chunkController)
|
||||
|
||||
const receivedBytes = Number(chunkResponse?.data?.received_bytes ?? nextOffset)
|
||||
uploaded = Math.max(nextOffset, Number.isFinite(receivedBytes) ? receivedBytes : nextOffset)
|
||||
const progress = chunkResponse?.data?.progress ?? toPercent(uploaded, totalSize)
|
||||
dispatchMachine({ type: 'UPLOAD_PROGRESS', progress })
|
||||
}
|
||||
|
||||
// 4. Finish + start processing
|
||||
dispatchMachine({ type: 'FINISH_START' })
|
||||
|
||||
const finishController = registerController()
|
||||
const finishResponse = await window.axios.post(
|
||||
uploadEndpoints.finish(),
|
||||
{ session_id: sessionId, upload_token: uploadToken, artwork_id: artworkIdForUpload },
|
||||
{ signal: finishController.signal, headers: { 'X-Upload-Token': uploadToken } }
|
||||
)
|
||||
unregisterController(finishController)
|
||||
|
||||
const finishStatus = getProcessingValue(finishResponse?.data || {})
|
||||
dispatchMachine({ type: 'FINISH_SUCCESS', processingStatus: finishStatus })
|
||||
|
||||
if (isReadyToPublishStatus(finishStatus)) {
|
||||
dispatchMachine({ type: 'READY_TO_PUBLISH' })
|
||||
} else {
|
||||
startPolling(sessionId, uploadToken)
|
||||
}
|
||||
|
||||
emitUploadEvent('upload_complete', { session_id: sessionId, artwork_id: artworkIdForUpload })
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED') return
|
||||
const message = error?.response?.data?.message || error?.message || 'Upload failed.'
|
||||
dispatchMachine({ type: 'ERROR', error: message })
|
||||
emitUploadEvent('upload_error', { stage: 'upload_flow', message })
|
||||
}
|
||||
}, [
|
||||
primaryFile,
|
||||
canStartUpload,
|
||||
primaryType,
|
||||
isArchive,
|
||||
metadata,
|
||||
effectiveChunkSize,
|
||||
registerController,
|
||||
unregisterController,
|
||||
clearPolling,
|
||||
startPolling,
|
||||
onArtworkCreated,
|
||||
])
|
||||
|
||||
// ── Cancel ─────────────────────────────────────────────────────────────────
|
||||
const handleCancel = useCallback(async () => {
|
||||
dispatchMachine({ type: 'CANCEL_START' })
|
||||
clearPolling()
|
||||
abortAllRequests()
|
||||
|
||||
try {
|
||||
const { sessionId, uploadToken } = machine
|
||||
if (sessionId) {
|
||||
await window.axios.post(
|
||||
uploadEndpoints.cancel(),
|
||||
{ session_id: sessionId, upload_token: uploadToken },
|
||||
{ headers: uploadToken ? { 'X-Upload-Token': uploadToken } : undefined }
|
||||
)
|
||||
}
|
||||
dispatchMachine({ type: 'CANCELLED' })
|
||||
emitUploadEvent('upload_cancel', { session_id: machine.sessionId || null })
|
||||
} catch (error) {
|
||||
const message = error?.response?.data?.message || 'Cancel failed.'
|
||||
dispatchMachine({ type: 'ERROR', error: message })
|
||||
emitUploadEvent('upload_error', { stage: 'cancel', message })
|
||||
}
|
||||
}, [machine, abortAllRequests, clearPolling])
|
||||
|
||||
// ── Publish ────────────────────────────────────────────────────────────────
|
||||
const handlePublish = useCallback(async (canPublish) => {
|
||||
if (!canPublish || publishLockRef.current) return
|
||||
|
||||
publishLockRef.current = true
|
||||
dispatchMachine({ type: 'PUBLISH_START' })
|
||||
|
||||
try {
|
||||
const publishTargetId =
|
||||
resolvedArtworkIdRef.current || initialDraftId || machine.sessionId
|
||||
|
||||
if (resolvedArtworkIdRef.current && resolvedArtworkIdRef.current > 0) {
|
||||
dispatchMachine({ type: 'PUBLISH_SUCCESS' })
|
||||
emitUploadEvent('upload_publish', { id: publishTargetId })
|
||||
return
|
||||
}
|
||||
|
||||
if (!publishTargetId) throw new Error('Missing publish id.')
|
||||
|
||||
const publishController = registerController()
|
||||
await window.axios.post(
|
||||
uploadEndpoints.publish(publishTargetId),
|
||||
{
|
||||
title: String(metadata.title || '').trim() || undefined,
|
||||
description: String(metadata.description || '').trim() || null,
|
||||
},
|
||||
{ signal: publishController.signal }
|
||||
)
|
||||
unregisterController(publishController)
|
||||
|
||||
dispatchMachine({ type: 'PUBLISH_SUCCESS' })
|
||||
emitUploadEvent('upload_publish', { id: publishTargetId })
|
||||
} catch (error) {
|
||||
if (error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED') return
|
||||
const message = error?.response?.data?.message || error?.message || 'Publish failed.'
|
||||
dispatchMachine({ type: 'ERROR', error: message })
|
||||
emitUploadEvent('upload_error', { stage: 'publish', message })
|
||||
} finally {
|
||||
publishLockRef.current = false
|
||||
}
|
||||
}, [machine, initialDraftId, metadata.title, metadata.description, registerController, unregisterController])
|
||||
|
||||
// ── Reset ──────────────────────────────────────────────────────────────────
|
||||
const resetMachine = useCallback(() => {
|
||||
clearPolling()
|
||||
abortAllRequests()
|
||||
resolvedArtworkIdRef.current = (() => {
|
||||
const parsed = Number(initialDraftId)
|
||||
return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : null
|
||||
})()
|
||||
publishLockRef.current = false
|
||||
dispatchMachine({ type: 'RESET_MACHINE' })
|
||||
}, [clearPolling, abortAllRequests, initialDraftId])
|
||||
|
||||
// ── Retry ──────────────────────────────────────────────────────────────────
|
||||
const handleRetry = useCallback((canPublish) => {
|
||||
clearPolling()
|
||||
abortAllRequests()
|
||||
if (machine.lastAction === 'publish') {
|
||||
handlePublish(canPublish)
|
||||
return
|
||||
}
|
||||
runUploadFlow()
|
||||
}, [machine.lastAction, handlePublish, runUploadFlow, clearPolling, abortAllRequests])
|
||||
|
||||
// ── Cleanup on unmount ─────────────────────────────────────────────────────
|
||||
// (callers should call resetMachine or abortAllRequests on unmount if needed)
|
||||
|
||||
return {
|
||||
machine,
|
||||
dispatchMachine,
|
||||
resolvedArtworkId: resolvedArtworkIdRef.current,
|
||||
runUploadFlow,
|
||||
handleCancel,
|
||||
handlePublish,
|
||||
handleRetry,
|
||||
resetMachine,
|
||||
clearPolling,
|
||||
abortAllRequests,
|
||||
startPolling,
|
||||
}
|
||||
}
|
||||
185
resources/js/hooks/upload/useVisionTags.js
Normal file
185
resources/js/hooks/upload/useVisionTags.js
Normal file
@@ -0,0 +1,185 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
const VISION_POLL_INTERVAL_MS = 5000
|
||||
const VISION_DEBOUNCE_MS = 3000
|
||||
|
||||
const initialDebug = {
|
||||
enabled: null,
|
||||
queueConnection: '',
|
||||
queuedJobs: 0,
|
||||
failedJobs: 0,
|
||||
triggered: false,
|
||||
aiTagCount: 0,
|
||||
totalTagCount: 0,
|
||||
syncDone: false,
|
||||
lastError: '',
|
||||
}
|
||||
|
||||
/**
|
||||
* useVisionTags
|
||||
*
|
||||
* Two-phase Vision AI tag suggestions triggered as soon as the upload is ready,
|
||||
* BEFORE the user navigates to the Details step so suggestions arrive early:
|
||||
*
|
||||
* Phase 1 — Immediate (on upload completion):
|
||||
* POST /api/uploads/{id}/vision-suggest
|
||||
* Calls the Vision gateway (/analyze/all) synchronously and returns
|
||||
* CLIP + YOLO tag suggestions within ~5-8 s. Results are shown right away.
|
||||
*
|
||||
* Phase 2 — Background polling:
|
||||
* GET /api/artworks/{id}/tags?trigger=1
|
||||
* Triggers the queue-based AutoTagArtworkJob, then polls every 5 s until
|
||||
* the DB-persisted AI tags appear (after job completes). Merges with Phase 1
|
||||
* results so the suggestions panel stays populated regardless of queue lag.
|
||||
*
|
||||
* @param {number|null} artworkId
|
||||
* @param {boolean} uploadReady true once the upload reaches ready_to_publish
|
||||
* @returns {{ visionSuggestedTags: any[], visionDebug: object }}
|
||||
*/
|
||||
export default function useVisionTags(artworkId, uploadReady) {
|
||||
const [visionSuggestedTags, setVisionSuggestedTags] = useState([])
|
||||
const [visionDebug, setVisionDebug] = useState(initialDebug)
|
||||
|
||||
// Refs for deduplication
|
||||
const syncDoneRef = useRef(false)
|
||||
const lastPollAtRef = useRef(0)
|
||||
const abortRef = useRef(null)
|
||||
|
||||
// ── Tag merging helper ──────────────────────────────────────────────────
|
||||
const mergeTags = useCallback((incoming) => {
|
||||
setVisionSuggestedTags((prev) => {
|
||||
if (!incoming.length) return prev
|
||||
const seen = new Set(prev.map((t) => t?.slug || t?.name || t))
|
||||
const next = [...prev]
|
||||
for (const tag of incoming) {
|
||||
const key = tag?.slug || tag?.name || tag
|
||||
if (!seen.has(key)) {
|
||||
seen.add(key)
|
||||
next.push(tag)
|
||||
}
|
||||
}
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
// ── Phase 1: Immediate gateway call ────────────────────────────────────
|
||||
const callGatewaySync = useCallback(async () => {
|
||||
if (!artworkId || artworkId <= 0 || syncDoneRef.current) return
|
||||
syncDoneRef.current = true
|
||||
|
||||
if (abortRef.current) abortRef.current.abort()
|
||||
abortRef.current = new AbortController()
|
||||
|
||||
try {
|
||||
const response = await window.axios.post(
|
||||
`/api/uploads/${artworkId}/vision-suggest`,
|
||||
{},
|
||||
{ signal: abortRef.current.signal },
|
||||
)
|
||||
const payload = response?.data || {}
|
||||
|
||||
if (payload?.vision_enabled === false) {
|
||||
setVisionDebug((prev) => ({ ...prev, enabled: false, syncDone: true }))
|
||||
return
|
||||
}
|
||||
|
||||
const tags = Array.isArray(payload?.tags) ? payload.tags : []
|
||||
mergeTags(tags)
|
||||
|
||||
setVisionDebug((prev) => ({
|
||||
...prev,
|
||||
enabled: true,
|
||||
syncDone: true,
|
||||
aiTagCount: Math.max(prev.aiTagCount, tags.length),
|
||||
}))
|
||||
|
||||
window.console?.debug?.('[upload][vision-tags][sync]', {
|
||||
artworkId,
|
||||
count: tags.length,
|
||||
source: payload?.source,
|
||||
})
|
||||
} catch (err) {
|
||||
if (err?.code === 'ERR_CANCELED') return
|
||||
setVisionDebug((prev) => ({
|
||||
...prev,
|
||||
syncDone: true,
|
||||
lastError: err?.response?.data?.reason || err?.message || '',
|
||||
}))
|
||||
}
|
||||
}, [artworkId, mergeTags])
|
||||
|
||||
// ── Phase 2: Background DB poll ─────────────────────────────────────────
|
||||
const pollDbTags = useCallback(async () => {
|
||||
if (!artworkId || artworkId <= 0) return
|
||||
|
||||
const now = Date.now()
|
||||
if (now - lastPollAtRef.current < VISION_DEBOUNCE_MS) return
|
||||
lastPollAtRef.current = now
|
||||
|
||||
try {
|
||||
const response = await window.axios.get(`/api/artworks/${artworkId}/tags`, {
|
||||
params: { trigger: 1 },
|
||||
})
|
||||
const payload = response?.data || {}
|
||||
|
||||
if (payload?.vision_enabled === false) {
|
||||
setVisionDebug((prev) => ({ ...prev, enabled: false }))
|
||||
return
|
||||
}
|
||||
|
||||
const aiTags = Array.isArray(payload?.ai_tags) ? payload.ai_tags : []
|
||||
mergeTags(aiTags)
|
||||
|
||||
const debug = payload?.debug || {}
|
||||
setVisionDebug((prev) => ({
|
||||
...prev,
|
||||
enabled: Boolean(payload?.vision_enabled),
|
||||
queueConnection: String(debug?.queue_connection || prev.queueConnection),
|
||||
queuedJobs: Number(debug?.queued_jobs ?? prev.queuedJobs),
|
||||
failedJobs: Number(debug?.failed_jobs ?? prev.failedJobs),
|
||||
triggered: Boolean(debug?.triggered),
|
||||
aiTagCount: Math.max(prev.aiTagCount, Number(debug?.ai_tag_count || aiTags.length || 0)),
|
||||
totalTagCount: Number(debug?.total_tag_count || 0),
|
||||
lastError: '',
|
||||
}))
|
||||
|
||||
window.console?.debug?.('[upload][vision-tags][poll]', {
|
||||
artworkId,
|
||||
aiTags: aiTags.map((t) => t?.slug || t?.name || t),
|
||||
})
|
||||
} catch (err) {
|
||||
if (err?.response?.status === 404 || err?.response?.status === 403) return
|
||||
setVisionDebug((prev) => ({
|
||||
...prev,
|
||||
lastError: err?.response?.data?.message || err?.message || '',
|
||||
}))
|
||||
}
|
||||
}, [artworkId, mergeTags])
|
||||
|
||||
// ── Lifecycle ────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!artworkId || !uploadReady) return
|
||||
|
||||
// Kick off the immediate gateway call
|
||||
callGatewaySync()
|
||||
|
||||
// Start background polling
|
||||
pollDbTags()
|
||||
const timer = window.setInterval(pollDbTags, VISION_POLL_INTERVAL_MS)
|
||||
|
||||
return () => {
|
||||
window.clearInterval(timer)
|
||||
abortRef.current?.abort()
|
||||
}
|
||||
}, [artworkId, uploadReady, callGatewaySync, pollDbTags])
|
||||
|
||||
// Reset when artworkId changes (new upload)
|
||||
useEffect(() => {
|
||||
syncDoneRef.current = false
|
||||
lastPollAtRef.current = 0
|
||||
setVisionSuggestedTags([])
|
||||
setVisionDebug(initialDebug)
|
||||
}, [artworkId])
|
||||
|
||||
return { visionSuggestedTags, visionDebug }
|
||||
}
|
||||
130
resources/js/lib/uploadUtils.js
Normal file
130
resources/js/lib/uploadUtils.js
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* Shared utilities for the upload system.
|
||||
* These are pure functions – no React, no side effects.
|
||||
*/
|
||||
|
||||
// ─── Constants ────────────────────────────────────────────────────────────────
|
||||
export const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'webp'])
|
||||
export const IMAGE_MIME = new Set(['image/jpeg', 'image/png', 'image/webp'])
|
||||
export const ARCHIVE_EXTENSIONS = new Set(['zip', 'rar', '7z', 'tar', 'gz'])
|
||||
export const ARCHIVE_MIME = new Set([
|
||||
'application/zip',
|
||||
'application/x-zip-compressed',
|
||||
'application/x-rar-compressed',
|
||||
'application/vnd.rar',
|
||||
'application/x-7z-compressed',
|
||||
'application/x-tar',
|
||||
'application/gzip',
|
||||
'application/x-gzip',
|
||||
'application/octet-stream',
|
||||
])
|
||||
|
||||
export const PRIMARY_IMAGE_MAX_BYTES = 50 * 1024 * 1024 // 50 MB
|
||||
export const PRIMARY_ARCHIVE_MAX_BYTES = 200 * 1024 * 1024 // 200 MB
|
||||
export const SCREENSHOT_MAX_BYTES = 10 * 1024 * 1024 // 10 MB
|
||||
|
||||
// ─── Type detection ───────────────────────────────────────────────────────────
|
||||
export function getExtension(fileName = '') {
|
||||
const parts = String(fileName).toLowerCase().split('.')
|
||||
return parts.length > 1 ? parts.pop() : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {File} file
|
||||
* @returns {'image' | 'archive' | 'unsupported'}
|
||||
*/
|
||||
export function detectFileType(file) {
|
||||
if (!file) return 'unknown'
|
||||
const extension = getExtension(file.name)
|
||||
const mime = String(file.type || '').toLowerCase()
|
||||
if (IMAGE_MIME.has(mime) || IMAGE_EXTENSIONS.has(extension)) return 'image'
|
||||
if (ARCHIVE_MIME.has(mime) || ARCHIVE_EXTENSIONS.has(extension)) return 'archive'
|
||||
return 'unsupported'
|
||||
}
|
||||
|
||||
// ─── Formatting ───────────────────────────────────────────────────────────────
|
||||
export function formatBytes(bytes) {
|
||||
if (!Number.isFinite(bytes) || bytes <= 0) return '—'
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
const kb = bytes / 1024
|
||||
if (kb < 1024) return `${kb.toFixed(1)} KB`
|
||||
const mb = kb / 1024
|
||||
if (mb < 1024) return `${mb.toFixed(1)} MB`
|
||||
return `${(mb / 1024).toFixed(2)} GB`
|
||||
}
|
||||
|
||||
// ─── Image utils ──────────────────────────────────────────────────────────────
|
||||
/**
|
||||
* @param {File} file
|
||||
* @returns {Promise<{width: number, height: number}>}
|
||||
*/
|
||||
export function readImageDimensions(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const blobUrl = URL.createObjectURL(file)
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
resolve({ width: img.naturalWidth, height: img.naturalHeight })
|
||||
URL.revokeObjectURL(blobUrl)
|
||||
}
|
||||
img.onerror = () => {
|
||||
reject(new Error('image_read_failed'))
|
||||
URL.revokeObjectURL(blobUrl)
|
||||
}
|
||||
img.src = blobUrl
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Category tree ────────────────────────────────────────────────────────────
|
||||
export function buildCategoryTree(contentTypes = []) {
|
||||
const rootsById = new Map()
|
||||
contentTypes.forEach((type) => {
|
||||
const categories = Array.isArray(type?.categories) ? type.categories : []
|
||||
categories.forEach((category) => {
|
||||
if (!category?.id) return
|
||||
const key = String(category.id)
|
||||
if (!rootsById.has(key)) {
|
||||
rootsById.set(key, {
|
||||
id: key,
|
||||
name: category.name || `Category ${category.id}`,
|
||||
children: [],
|
||||
})
|
||||
}
|
||||
const root = rootsById.get(key)
|
||||
const children = Array.isArray(category?.children) ? category.children : []
|
||||
children.forEach((child) => {
|
||||
if (!child?.id) return
|
||||
const exists = root.children.some((item) => String(item.id) === String(child.id))
|
||||
if (!exists) {
|
||||
root.children.push({ id: String(child.id), name: child.name || `Subcategory ${child.id}` })
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
return Array.from(rootsById.values())
|
||||
}
|
||||
|
||||
// ─── Content type helpers ─────────────────────────────────────────────────────
|
||||
export function getContentTypeValue(type) {
|
||||
if (!type) return ''
|
||||
return String(type.id ?? type.key ?? type.slug ?? type.name ?? '')
|
||||
}
|
||||
|
||||
export function getContentTypeVisualKey(type) {
|
||||
const raw = String(type?.slug || type?.name || type?.key || '').toLowerCase()
|
||||
const normalized = raw.replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '')
|
||||
if (normalized.includes('wallpaper')) return 'wallpapers'
|
||||
if (normalized.includes('skin')) return 'skins'
|
||||
if (normalized.includes('photo')) return 'photography'
|
||||
return 'other'
|
||||
}
|
||||
|
||||
// ─── Processing status helpers ────────────────────────────────────────────────
|
||||
export function getProcessingTransparencyLabel(processingStatus, machineState) {
|
||||
if (!['processing', 'finishing', 'publishing'].includes(machineState)) return ''
|
||||
const normalized = String(processingStatus || '').toLowerCase()
|
||||
if (normalized === 'generating_preview') return 'Generating preview'
|
||||
if (['processed', 'ready', 'published', 'queued', 'publish_ready'].includes(normalized)) {
|
||||
return 'Preparing for publish'
|
||||
}
|
||||
return 'Analyzing content'
|
||||
}
|
||||
Reference in New Issue
Block a user