fin du refactp
This commit is contained in:
Tom Boullay
@@ -0,0 +1,6 @@
|
|||||||
|
node_modules
|
||||||
|
.next
|
||||||
|
.git
|
||||||
|
*.md
|
||||||
|
.env*
|
||||||
|
.DS_Store
|
||||||
+1
-4
@@ -1,13 +1,10 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
|
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
html {
|
html {
|
||||||
font-family: 'Inter', system-ui, sans-serif;
|
font-family: var(--font-inter), system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
+15
-2
@@ -1,8 +1,21 @@
|
|||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
|
import { Inter, JetBrains_Mono } from 'next/font/google'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
subsets: ['latin'],
|
||||||
|
variable: '--font-inter',
|
||||||
|
display: 'swap',
|
||||||
|
})
|
||||||
|
|
||||||
|
const jetbrainsMono = JetBrains_Mono({
|
||||||
|
subsets: ['latin'],
|
||||||
|
variable: '--font-jetbrains-mono',
|
||||||
|
display: 'swap',
|
||||||
|
})
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: ' Upload GLTF',
|
title: 'Upload GLTF',
|
||||||
description: 'Interface de depot securise pour fichiers 3D (.glb, .gltf) avec versionnement automatique sur GitHub',
|
description: 'Interface de depot securise pour fichiers 3D (.glb, .gltf) avec versionnement automatique sur GitHub',
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -12,7 +25,7 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="fr">
|
<html lang="fr" className={`${inter.variable} ${jetbrainsMono.variable}`}>
|
||||||
<body>{children}</body>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
+140
-465
@@ -1,94 +1,23 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState, useRef } from 'react'
|
||||||
import dynamic from 'next/dynamic'
|
import type { Destination } from '@/lib/constants'
|
||||||
|
import { DESTINATIONS } from '@/lib/constants'
|
||||||
|
import type { FolderEntry } from '@/lib/client-types'
|
||||||
|
import type { FileDiff } from '@/lib/types'
|
||||||
|
import { useSecret } from '@/hooks/useSecret'
|
||||||
|
import { useFolderEntries } from '@/hooks/useFolderEntries'
|
||||||
|
import SecretInput from './upload/SecretInput'
|
||||||
|
import DestinationPicker from './upload/DestinationPicker'
|
||||||
|
import FolderDropzone from './upload/FolderDropzone'
|
||||||
|
import FolderCard from './upload/FolderCard'
|
||||||
|
import ActionButtons from './upload/ActionButtons'
|
||||||
|
import OverwriteConfirmModal from './upload/OverwriteConfirmModal'
|
||||||
|
|
||||||
const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false })
|
// ---------------------------------------------------------------------------
|
||||||
|
// Client-side SHA computation (same as `git hash-object`)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
type FileStatus = 'pending' | 'uploading' | 'success' | 'error'
|
|
||||||
|
|
||||||
interface TextureFile {
|
|
||||||
name: string
|
|
||||||
file: File
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FolderEntry {
|
|
||||||
folderName: string
|
|
||||||
modelFile: File
|
|
||||||
textures: TextureFile[]
|
|
||||||
status: FileStatus
|
|
||||||
progress: number
|
|
||||||
error?: string
|
|
||||||
filename?: string
|
|
||||||
modelUrl?: string
|
|
||||||
viewerOpen?: boolean
|
|
||||||
warnings: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const REQUIRED_TEXTURES = ['roughness', 'normal', 'metalness', 'color', 'displace']
|
|
||||||
const TEXTURE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp']
|
|
||||||
|
|
||||||
const DESTINATIONS = [
|
|
||||||
{ value: 'farm', label: 'Farm' },
|
|
||||||
{ value: 'map', label: 'Map' },
|
|
||||||
{ value: 'powergrid', label: 'Powergrid' },
|
|
||||||
{ value: 'workshop', label: 'Workshop' },
|
|
||||||
{ value: 'general', label: 'General' },
|
|
||||||
{ value: 'environment', label: 'Environment' },
|
|
||||||
] as const
|
|
||||||
|
|
||||||
function formatBytes(bytes: number): string {
|
|
||||||
if (bytes === 0) return '0 B'
|
|
||||||
const k = 1024
|
|
||||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTextureType(filename: string): string | null {
|
|
||||||
const name = filename.toLowerCase().replace(/\.[^.]+$/, '')
|
|
||||||
if (REQUIRED_TEXTURES.includes(name)) return name
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateFolder(files: File[]): { model?: File; textures: TextureFile[]; errors: string[]; warnings: string[] } {
|
|
||||||
const result: { model?: File; textures: TextureFile[]; errors: string[]; warnings: string[] } = {
|
|
||||||
textures: [],
|
|
||||||
errors: [],
|
|
||||||
warnings: []
|
|
||||||
}
|
|
||||||
|
|
||||||
const modelFiles = files.filter(f => {
|
|
||||||
const name = f.name.toLowerCase()
|
|
||||||
return name === 'model.glb' || name === 'model.gltf'
|
|
||||||
})
|
|
||||||
|
|
||||||
if (modelFiles.length === 0) {
|
|
||||||
result.errors.push('model.glb ou model.gltf manquant (obligatoire)')
|
|
||||||
} else {
|
|
||||||
result.model = modelFiles[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
const textureFiles = files.filter(f => {
|
|
||||||
const ext = f.name.slice(f.name.lastIndexOf('.')).toLowerCase()
|
|
||||||
return TEXTURE_EXTENSIONS.includes(ext) && getTextureType(f.name) !== null
|
|
||||||
})
|
|
||||||
|
|
||||||
for (const tf of textureFiles) {
|
|
||||||
result.textures.push({ name: tf.name, file: tf })
|
|
||||||
}
|
|
||||||
|
|
||||||
const foundTextures = new Set(result.textures.map(t => t.name.toLowerCase().replace(/\.[^.]+$/, '')))
|
|
||||||
for (const req of REQUIRED_TEXTURES) {
|
|
||||||
if (!foundTextures.has(req)) {
|
|
||||||
result.warnings.push(`${req}.webp/png/jpg manquant`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Compute the git blob SHA1 for a file (same as `git hash-object`) */
|
|
||||||
async function computeGitBlobSha(file: File): Promise<string> {
|
async function computeGitBlobSha(file: File): Promise<string> {
|
||||||
const buffer = await file.arrayBuffer()
|
const buffer = await file.arrayBuffer()
|
||||||
const content = new Uint8Array(buffer)
|
const content = new Uint8Array(buffer)
|
||||||
@@ -98,13 +27,12 @@ async function computeGitBlobSha(file: File): Promise<string> {
|
|||||||
store.set(content, header.length)
|
store.set(content, header.length)
|
||||||
const hashBuffer = await crypto.subtle.digest('SHA-1', store)
|
const hashBuffer = await crypto.subtle.digest('SHA-1', store)
|
||||||
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||||
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FileDiff {
|
// ---------------------------------------------------------------------------
|
||||||
name: string
|
// API helpers
|
||||||
status: 'changed' | 'new' | 'deleted'
|
// ---------------------------------------------------------------------------
|
||||||
}
|
|
||||||
|
|
||||||
interface CheckResult {
|
interface CheckResult {
|
||||||
exists: boolean
|
exists: boolean
|
||||||
@@ -115,11 +43,13 @@ async function checkFolderDiffs(
|
|||||||
folder: FolderEntry,
|
folder: FolderEntry,
|
||||||
destination: string,
|
destination: string,
|
||||||
secret: string,
|
secret: string,
|
||||||
|
signal?: AbortSignal,
|
||||||
): Promise<CheckResult> {
|
): Promise<CheckResult> {
|
||||||
try {
|
try {
|
||||||
const params = new URLSearchParams({ folderName: folder.folderName, destination })
|
const params = new URLSearchParams({ folderName: folder.folderName, destination })
|
||||||
const res = await fetch(`/api/upload/check?${params}`, {
|
const res = await fetch(`/api/upload/check?${params}`, {
|
||||||
headers: { 'x-upload-secret': secret.trim() },
|
headers: { 'x-upload-secret': secret.trim() },
|
||||||
|
signal,
|
||||||
})
|
})
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
if (!data.success || !data.exists) {
|
if (!data.success || !data.exists) {
|
||||||
@@ -127,9 +57,8 @@ async function checkFolderDiffs(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const remoteFiles: { name: string; sha: string }[] = data.files || []
|
const remoteFiles: { name: string; sha: string }[] = data.files || []
|
||||||
const remoteMap = new Map(remoteFiles.map(f => [f.name.toLowerCase(), f.sha]))
|
const remoteMap = new Map(remoteFiles.map((f) => [f.name.toLowerCase(), f.sha]))
|
||||||
|
|
||||||
// Compute SHA for all local files
|
|
||||||
const localFiles: { name: string; sha: string }[] = []
|
const localFiles: { name: string; sha: string }[] = []
|
||||||
localFiles.push({
|
localFiles.push({
|
||||||
name: folder.modelFile.name,
|
name: folder.modelFile.name,
|
||||||
@@ -154,10 +83,8 @@ async function checkFolderDiffs(
|
|||||||
} else if (remoteSha !== local.sha) {
|
} else if (remoteSha !== local.sha) {
|
||||||
diffs.push({ name: local.name, status: 'changed' })
|
diffs.push({ name: local.name, status: 'changed' })
|
||||||
}
|
}
|
||||||
// unchanged → not in diffs
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Files on remote but not in local → deleted
|
|
||||||
for (const [name] of remoteMap) {
|
for (const [name] of remoteMap) {
|
||||||
if (!localNames.has(name)) {
|
if (!localNames.has(name)) {
|
||||||
diffs.push({ name, status: 'deleted' })
|
diffs.push({ name, status: 'deleted' })
|
||||||
@@ -174,18 +101,17 @@ async function uploadFolder(
|
|||||||
folder: FolderEntry,
|
folder: FolderEntry,
|
||||||
secret: string,
|
secret: string,
|
||||||
destination: string,
|
destination: string,
|
||||||
onProgress: (pct: number) => void
|
onProgress: (pct: number) => void,
|
||||||
|
signal?: AbortSignal,
|
||||||
): Promise<{ success: boolean; filename?: string; error?: string }> {
|
): Promise<{ success: boolean; filename?: string; error?: string }> {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('folderName', folder.folderName)
|
formData.append('folderName', folder.folderName)
|
||||||
formData.append('destination', destination)
|
formData.append('destination', destination)
|
||||||
|
|
||||||
// Model file
|
|
||||||
formData.append('files', folder.modelFile)
|
formData.append('files', folder.modelFile)
|
||||||
formData.append('fileTypes', 'model')
|
formData.append('fileTypes', 'model')
|
||||||
formData.append('textureNames', '')
|
formData.append('textureNames', '')
|
||||||
|
|
||||||
// Texture files
|
|
||||||
for (const tex of folder.textures) {
|
for (const tex of folder.textures) {
|
||||||
formData.append('files', tex.file)
|
formData.append('files', tex.file)
|
||||||
formData.append('fileTypes', 'texture')
|
formData.append('fileTypes', 'texture')
|
||||||
@@ -199,10 +125,10 @@ async function uploadFolder(
|
|||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'x-upload-secret': secret.trim() },
|
headers: { 'x-upload-secret': secret.trim() },
|
||||||
body: formData,
|
body: formData,
|
||||||
|
signal,
|
||||||
})
|
})
|
||||||
|
|
||||||
onProgress(80)
|
onProgress(80)
|
||||||
|
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
|
|
||||||
if (!data.success) {
|
if (!data.success) {
|
||||||
@@ -211,44 +137,76 @@ async function uploadFolder(
|
|||||||
|
|
||||||
onProgress(100)
|
onProgress(100)
|
||||||
return { success: true, filename: folder.folderName }
|
return { success: true, filename: folder.folderName }
|
||||||
} catch {
|
} catch (err) {
|
||||||
|
if (err instanceof DOMException && err.name === 'AbortError') {
|
||||||
|
return { success: false, error: 'Upload annule' }
|
||||||
|
}
|
||||||
return { success: false, error: 'Erreur reseau' }
|
return { success: false, error: 'Erreur reseau' }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// UploadZone — orchestrator
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
export default function UploadZone() {
|
export default function UploadZone() {
|
||||||
const [files, setFiles] = useState<FolderEntry[]>([])
|
const {
|
||||||
|
secret,
|
||||||
|
secretError,
|
||||||
|
secretVisible,
|
||||||
|
isSecretEmpty,
|
||||||
|
setSecretError,
|
||||||
|
handleSecretChange,
|
||||||
|
toggleSecretVisible,
|
||||||
|
} = useSecret()
|
||||||
|
|
||||||
|
const {
|
||||||
|
entries,
|
||||||
|
setEntries,
|
||||||
|
updateEntry,
|
||||||
|
removeEntry,
|
||||||
|
resetEntries,
|
||||||
|
allDone,
|
||||||
|
hasErrors,
|
||||||
|
} = useFolderEntries()
|
||||||
|
|
||||||
const [isUploading, setIsUploading] = useState(false)
|
const [isUploading, setIsUploading] = useState(false)
|
||||||
const [secret, setSecret] = useState('')
|
|
||||||
const [secretVisible, setSecretVisible] = useState(false)
|
|
||||||
const [globalError, setGlobalError] = useState<string | null>(null)
|
const [globalError, setGlobalError] = useState<string | null>(null)
|
||||||
const [secretError, setSecretError] = useState<string | null>(null)
|
const [destination, setDestination] = useState<Destination>(DESTINATIONS[0].value)
|
||||||
const [destination, setDestination] = useState<typeof DESTINATIONS[number]['value']>(DESTINATIONS[0].value)
|
const [overwriteConfirm, setOverwriteConfirm] = useState<{
|
||||||
const [abortController, setAbortController] = useState<AbortController | null>(null)
|
folderName: string
|
||||||
const [overwriteConfirm, setOverwriteConfirm] = useState<{ folderName: string; diffs: FileDiff[] } | null>(null)
|
diffs: FileDiff[]
|
||||||
|
} | null>(null)
|
||||||
|
const abortRef = useRef<AbortController | null>(null)
|
||||||
|
|
||||||
const isSecretEmpty = !secret.trim()
|
// -- Handlers --
|
||||||
|
|
||||||
const updateFile = (index: number, patch: Partial<FolderEntry>) => {
|
const handleFolderSelected = (entry: FolderEntry) => {
|
||||||
setFiles((prev) => prev.map((f, i) => i === index ? { ...f, ...patch } : f))
|
setGlobalError(null)
|
||||||
|
setEntries([entry])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleViewer = (index: number) => {
|
||||||
|
const entry = entries[index]
|
||||||
|
if (entry?.modelUrl) {
|
||||||
|
updateEntry(index, { viewerOpen: !entry.viewerOpen })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleUpload = async () => {
|
const handleUpload = async () => {
|
||||||
if (!secret.trim()) {
|
if (!secret.trim()) {
|
||||||
setSecretError('La cle d\'acces est requise')
|
setSecretError("La cle d'acces est requise")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (files.length === 0) return
|
if (entries.length === 0) return
|
||||||
|
|
||||||
setSecretError(null)
|
setSecretError(null)
|
||||||
setGlobalError(null)
|
setGlobalError(null)
|
||||||
|
|
||||||
// Check if folder already exists on remote and compute diffs
|
const folder = entries[0]
|
||||||
const folder = files[0]
|
const check = await checkFolderDiffs(folder, destination, secret, abortRef.current?.signal)
|
||||||
const check = await checkFolderDiffs(folder, destination, secret)
|
|
||||||
if (check.exists) {
|
if (check.exists) {
|
||||||
if (check.diffs.length === 0) {
|
if (check.diffs.length === 0) {
|
||||||
// Nothing changed at all
|
|
||||||
setGlobalError('Aucun fichier modifie — le dossier distant est identique.')
|
setGlobalError('Aucun fichier modifie — le dossier distant est identique.')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -264,19 +222,24 @@ export default function UploadZone() {
|
|||||||
setIsUploading(true)
|
setIsUploading(true)
|
||||||
setGlobalError(null)
|
setGlobalError(null)
|
||||||
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
const controller = new AbortController()
|
||||||
if (files[i].status === 'success') continue
|
abortRef.current = controller
|
||||||
|
|
||||||
updateFile(i, { status: 'uploading', progress: 0, error: undefined })
|
for (let i = 0; i < entries.length; i++) {
|
||||||
|
if (entries[i].status === 'success') continue
|
||||||
|
if (controller.signal.aborted) break
|
||||||
|
|
||||||
|
updateEntry(i, { status: 'uploading', progress: 0, error: undefined })
|
||||||
|
|
||||||
const result = await uploadFolder(
|
const result = await uploadFolder(
|
||||||
files[i],
|
entries[i],
|
||||||
secret,
|
secret,
|
||||||
destination,
|
destination,
|
||||||
(pct) => updateFile(i, { progress: pct })
|
(pct) => updateEntry(i, { progress: pct }),
|
||||||
|
controller.signal,
|
||||||
)
|
)
|
||||||
|
|
||||||
updateFile(i, {
|
updateEntry(i, {
|
||||||
status: result.success ? 'success' : 'error',
|
status: result.success ? 'success' : 'error',
|
||||||
progress: result.success ? 100 : 0,
|
progress: result.success ? 100 : 0,
|
||||||
error: result.success ? undefined : result.error,
|
error: result.success ? undefined : result.error,
|
||||||
@@ -284,376 +247,88 @@ export default function UploadZone() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
abortRef.current = null
|
||||||
setIsUploading(false)
|
setIsUploading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCancel = () => { abortController?.abort() }
|
const handleCancel = () => {
|
||||||
|
abortRef.current?.abort()
|
||||||
const removeFile = (index: number) => {
|
abortRef.current = null
|
||||||
const file = files[index]
|
setIsUploading(false)
|
||||||
if (file.modelUrl) URL.revokeObjectURL(file.modelUrl)
|
|
||||||
setFiles((prev) => prev.filter((_, i) => i !== index))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
files.forEach((f) => {
|
resetEntries()
|
||||||
if (f.modelUrl) URL.revokeObjectURL(f.modelUrl)
|
|
||||||
})
|
|
||||||
setFiles([])
|
|
||||||
setGlobalError(null)
|
setGlobalError(null)
|
||||||
setIsUploading(false)
|
setIsUploading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const allDone = files.length > 0 && files.every((f) => f.status === 'success')
|
const hasPendingOrErrors = entries.some((f) => f.status === 'pending' || f.status === 'error')
|
||||||
const hasErrors = files.some((f) => f.status === 'error')
|
|
||||||
|
// -- Render --
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-2xl space-y-4">
|
<div className="w-full max-w-2xl space-y-4">
|
||||||
<div className="space-y-1.5">
|
<SecretInput
|
||||||
<label className="block text-sm font-medium text-gray-300">Cle d'acces</label>
|
secret={secret}
|
||||||
<div className="relative">
|
secretVisible={secretVisible}
|
||||||
<input
|
secretError={secretError}
|
||||||
type={secretVisible ? 'text' : 'password'}
|
disabled={isUploading}
|
||||||
value={secret}
|
onChange={handleSecretChange}
|
||||||
onChange={(e) => {
|
onToggleVisible={toggleSecretVisible}
|
||||||
setSecret(e.target.value)
|
|
||||||
if (secretError) setSecretError(null)
|
|
||||||
}}
|
|
||||||
placeholder="Entrez la cle secrete..."
|
|
||||||
disabled={isUploading}
|
|
||||||
className={`w-full bg-black-800 border rounded-xl px-4 py-2.5 pr-12
|
|
||||||
text-gray-100 placeholder-gray-500 text-sm
|
|
||||||
focus:outline-none focus:ring-2 focus:border-white/50
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed transition
|
|
||||||
${secretError
|
|
||||||
? 'border-red-500/70 focus:ring-red-500/50'
|
|
||||||
: 'border-white/30 focus:ring-white/50'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSecretVisible((v) => !v)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 transition"
|
|
||||||
tabIndex={-1}
|
|
||||||
>
|
|
||||||
{secretVisible ? (
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
|
||||||
</svg>
|
|
||||||
) : (
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{secretError && (
|
|
||||||
<p className="text-xs text-red-400 mt-1">{secretError}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1.5">
|
|
||||||
<label className="block text-sm font-medium text-gray-300">Destination</label>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
{DESTINATIONS.map((dest) => (
|
|
||||||
<button
|
|
||||||
key={dest.value}
|
|
||||||
type="button"
|
|
||||||
onClick={() => setDestination(dest.value)}
|
|
||||||
disabled={isUploading}
|
|
||||||
className={`px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 border
|
|
||||||
disabled:opacity-50 disabled:cursor-not-allowed
|
|
||||||
${destination === dest.value
|
|
||||||
? 'bg-white text-[#000000] border-white'
|
|
||||||
: 'bg-black-800 text-gray-400 border-white/20 hover:border-white/40 hover:text-gray-200'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{dest.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="folder-input"
|
|
||||||
{...({ webkitdirectory: '', directory: '' } as React.InputHTMLAttributes<HTMLInputElement>)}
|
|
||||||
multiple
|
|
||||||
className="hidden"
|
|
||||||
onChange={(e) => {
|
|
||||||
const files = e.target.files
|
|
||||||
if (files && files.length > 0) {
|
|
||||||
const fileArray = Array.from(files)
|
|
||||||
const folderName = fileArray[0].webkitRelativePath?.split('/')[0] || 'folder'
|
|
||||||
const validation = validateFolder(fileArray)
|
|
||||||
|
|
||||||
if (validation.errors.length > 0) {
|
|
||||||
setGlobalError(validation.errors.join(' | '))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setGlobalError(null)
|
|
||||||
const entry: FolderEntry = {
|
|
||||||
folderName,
|
|
||||||
modelFile: validation.model!,
|
|
||||||
textures: validation.textures,
|
|
||||||
status: 'pending',
|
|
||||||
progress: 0,
|
|
||||||
warnings: validation.warnings,
|
|
||||||
modelUrl: URL.createObjectURL(validation.model!),
|
|
||||||
viewerOpen: true,
|
|
||||||
}
|
|
||||||
setFiles([entry])
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{files.length === 0 && (
|
<DestinationPicker
|
||||||
<div
|
destination={destination}
|
||||||
onClick={() => document.getElementById('folder-input')?.click()}
|
disabled={isUploading}
|
||||||
className={`
|
onChange={setDestination}
|
||||||
relative border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all duration-200 bg-black-800
|
/>
|
||||||
${isUploading ? 'cursor-not-allowed opacity-60 border-white/20' : ''}
|
|
||||||
${!isUploading ? 'border-white/30 hover:border-white/50 hover:bg-black-700' : ''}
|
{entries.length === 0 && (
|
||||||
`}
|
<FolderDropzone
|
||||||
>
|
isUploading={isUploading}
|
||||||
<div className="flex justify-center mb-3">
|
onFolderSelected={handleFolderSelected}
|
||||||
<div className="w-12 h-12 rounded-full flex items-center justify-center bg-black-700">
|
onError={setGlobalError}
|
||||||
<svg className="w-6 h-6 text-gray-400"
|
/>
|
||||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round"
|
|
||||||
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium text-gray-300">
|
|
||||||
Deposez votre dossier ici
|
|
||||||
<span className="text-gray-500 font-normal"> ou cliquez pour parcourir</span>
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-gray-500 mt-1">
|
|
||||||
Contenu attendu : model.glb/gltf + textures (roughness, normal, metalness, color, displace)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{globalError && (
|
{globalError && (
|
||||||
<p className="text-xs text-red-400 text-center">{globalError}</p>
|
<p className="text-xs text-red-400 text-center">{globalError}</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{files.length > 0 && (
|
{entries.length > 0 && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{files.map((entry, i) => (
|
{entries.map((entry, i) => (
|
||||||
<div key={i}>
|
<FolderCard
|
||||||
<div className="flex items-center gap-3 bg-black-800 border border-white/20 rounded-xl px-4 py-3">
|
key={i}
|
||||||
<div className="shrink-0">
|
entry={entry}
|
||||||
{entry.status === 'success' ? (
|
index={i}
|
||||||
<div className="w-8 h-8 rounded-full bg-green-900/30 flex items-center justify-center">
|
onToggleViewer={handleToggleViewer}
|
||||||
<svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
onRemove={removeEntry}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
/>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
) : entry.status === 'error' ? (
|
|
||||||
<div className="w-8 h-8 rounded-full bg-red-900/30 flex items-center justify-center">
|
|
||||||
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
) : entry.status === 'uploading' ? (
|
|
||||||
<div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
|
|
||||||
<svg className="w-4 h-4 text-gray-300 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
||||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => entry.modelUrl ? updateFile(i, { viewerOpen: !entry.viewerOpen }) : null}
|
|
||||||
className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition ${
|
|
||||||
entry.modelUrl ? 'bg-black-700 hover:bg-gray-700 cursor-pointer' : 'bg-black-700 cursor-default'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className={`w-4 h-4 text-gray-500 transition-transform ${entry.viewerOpen ? 'rotate-180' : ''}`}
|
|
||||||
fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}
|
|
||||||
>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-gray-200 font-mono truncate">{entry.folderName}/</span>
|
|
||||||
<span className="shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-gray-700 text-gray-300">Dossier</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 mt-0.5">
|
|
||||||
<span className="text-xs text-gray-500">modele : {entry.modelFile.name}</span>
|
|
||||||
{entry.status === 'error' && entry.error && (
|
|
||||||
<span className="text-xs text-red-400 truncate">{entry.error}</span>
|
|
||||||
)}
|
|
||||||
{entry.status === 'success' && entry.filename && (
|
|
||||||
<span className="text-xs text-green-400 font-mono">{entry.filename}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{entry.status === 'uploading' && (
|
|
||||||
<div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
|
|
||||||
<div
|
|
||||||
className="h-full bg-gray-400 rounded-full transition-all duration-200"
|
|
||||||
style={{ width: `${entry.progress}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{entry.status !== 'uploading' && (
|
|
||||||
<button
|
|
||||||
onClick={() => removeFile(i)}
|
|
||||||
className="shrink-0 text-gray-600 hover:text-red-400 transition"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{entry.warnings.length > 0 && entry.status !== 'success' && (
|
|
||||||
<div className="mt-2 px-3 py-2 bg-yellow-900/20 border border-yellow-700/30 rounded-lg">
|
|
||||||
<div className="flex items-center gap-2 text-xs text-yellow-400">
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
||||||
</svg>
|
|
||||||
<span>Textures manquantes : {entry.warnings.join(', ')}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{entry.modelUrl && entry.status !== 'success' && (
|
|
||||||
<div
|
|
||||||
className={`transition-all duration-300 ease-in-out overflow-hidden ${
|
|
||||||
entry.viewerOpen ? 'max-h-[500px] opacity-100 mt-2' : 'max-h-0 opacity-0 pointer-events-none'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<ModelViewer
|
|
||||||
url={entry.modelUrl}
|
|
||||||
filename={entry.modelFile.name}
|
|
||||||
size={formatBytes(entry.modelFile.size)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex gap-3">
|
<ActionButtons
|
||||||
{!isUploading && files.some((f) => f.status === 'pending' || f.status === 'error') && (
|
isUploading={isUploading}
|
||||||
<button
|
isSecretEmpty={isSecretEmpty}
|
||||||
onClick={handleUpload}
|
hasPendingOrErrors={hasPendingOrErrors}
|
||||||
disabled={isSecretEmpty}
|
allDone={allDone}
|
||||||
className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl transition-all duration-150
|
hasErrors={hasErrors}
|
||||||
focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20
|
onUpload={handleUpload}
|
||||||
${isSecretEmpty
|
onCancel={handleCancel}
|
||||||
? 'bg-white/30 text-gray-500 cursor-not-allowed'
|
onReset={handleReset}
|
||||||
: 'bg-white text-[#000000] hover:bg-gray-200'
|
/>
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Envoyer sur GitHub
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isUploading && (
|
|
||||||
<button
|
|
||||||
onClick={handleCancel}
|
|
||||||
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
|
||||||
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
|
|
||||||
hover:bg-black-600"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(allDone || hasErrors) && !isUploading && (
|
|
||||||
<button
|
|
||||||
onClick={handleReset}
|
|
||||||
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
|
||||||
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
|
|
||||||
hover:bg-black-600"
|
|
||||||
>
|
|
||||||
{allDone ? 'Tout effacer' : 'Reessayer'}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{overwriteConfirm && (
|
{overwriteConfirm && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
<OverwriteConfirmModal
|
||||||
<div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
|
destination={destination}
|
||||||
<div className="flex items-center gap-3">
|
folderName={overwriteConfirm.folderName}
|
||||||
<div className="w-10 h-10 rounded-full bg-yellow-900/30 flex items-center justify-center shrink-0">
|
diffs={overwriteConfirm.diffs}
|
||||||
<svg className="w-5 h-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
onCancel={() => setOverwriteConfirm(null)}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
onConfirm={proceedUpload}
|
||||||
</svg>
|
/>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-semibold text-gray-100">Dossier deja existant</h3>
|
|
||||||
<p className="text-xs text-gray-400 mt-0.5">
|
|
||||||
<span className="font-mono text-yellow-400">{destination}/{overwriteConfirm.folderName}</span> existe deja sur le repo
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{overwriteConfirm.diffs.length > 0 && (
|
|
||||||
<div className="bg-black-800 border border-white/10 rounded-xl p-3 max-h-40 overflow-y-auto">
|
|
||||||
<p className="text-xs text-gray-500 mb-2">Modifications detectees :</p>
|
|
||||||
<ul className="space-y-1">
|
|
||||||
{overwriteConfirm.diffs.map((d) => (
|
|
||||||
<li key={d.name} className="flex items-center gap-2 text-xs font-mono">
|
|
||||||
{d.status === 'changed' && (
|
|
||||||
<>
|
|
||||||
<span className="text-yellow-400">🔄</span>
|
|
||||||
<span className="text-gray-300">{d.name}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{d.status === 'new' && (
|
|
||||||
<>
|
|
||||||
<span className="text-green-400">✅</span>
|
|
||||||
<span className="text-gray-300">{d.name}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{d.status === 'deleted' && (
|
|
||||||
<>
|
|
||||||
<span className="text-red-400">❌</span>
|
|
||||||
<span className="text-gray-500 line-through">{d.name}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-3">
|
|
||||||
<button
|
|
||||||
onClick={() => setOverwriteConfirm(null)}
|
|
||||||
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
|
||||||
py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
|
|
||||||
hover:bg-black-600"
|
|
||||||
>
|
|
||||||
Annuler
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={proceedUpload}
|
|
||||||
className="flex-1 bg-yellow-600 text-[#000000] font-medium text-sm
|
|
||||||
py-2.5 px-4 rounded-xl transition-colors duration-150
|
|
||||||
hover:bg-yellow-500"
|
|
||||||
>
|
|
||||||
Remplacer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -0,0 +1,62 @@
|
|||||||
|
interface ActionButtonsProps {
|
||||||
|
isUploading: boolean
|
||||||
|
isSecretEmpty: boolean
|
||||||
|
hasPendingOrErrors: boolean
|
||||||
|
allDone: boolean
|
||||||
|
hasErrors: boolean
|
||||||
|
onUpload: () => void
|
||||||
|
onCancel: () => void
|
||||||
|
onReset: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ActionButtons({
|
||||||
|
isUploading,
|
||||||
|
isSecretEmpty,
|
||||||
|
hasPendingOrErrors,
|
||||||
|
allDone,
|
||||||
|
hasErrors,
|
||||||
|
onUpload,
|
||||||
|
onCancel,
|
||||||
|
onReset,
|
||||||
|
}: ActionButtonsProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{!isUploading && hasPendingOrErrors && (
|
||||||
|
<button
|
||||||
|
onClick={onUpload}
|
||||||
|
disabled={isSecretEmpty}
|
||||||
|
className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl transition-all duration-150
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20
|
||||||
|
${isSecretEmpty
|
||||||
|
? 'bg-white/30 text-gray-500 cursor-not-allowed'
|
||||||
|
: 'bg-white text-[#000000] hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Envoyer sur GitHub
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isUploading && (
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
||||||
|
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
|
||||||
|
hover:bg-black-600"
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(allDone || hasErrors) && !isUploading && (
|
||||||
|
<button
|
||||||
|
onClick={onReset}
|
||||||
|
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
||||||
|
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
|
||||||
|
hover:bg-black-600"
|
||||||
|
>
|
||||||
|
{allDone ? 'Tout effacer' : 'Reessayer'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { DESTINATIONS } from '@/lib/constants'
|
||||||
|
import type { Destination } from '@/lib/constants'
|
||||||
|
|
||||||
|
interface DestinationPickerProps {
|
||||||
|
destination: Destination
|
||||||
|
disabled: boolean
|
||||||
|
onChange: (value: Destination) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DestinationPicker({
|
||||||
|
destination,
|
||||||
|
disabled,
|
||||||
|
onChange,
|
||||||
|
}: DestinationPickerProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<label className="block text-sm font-medium text-gray-300">Destination</label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{DESTINATIONS.map((dest) => (
|
||||||
|
<button
|
||||||
|
key={dest.value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onChange(dest.value)}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 border
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed
|
||||||
|
${destination === dest.value
|
||||||
|
? 'bg-white text-[#000000] border-white'
|
||||||
|
: 'bg-black-800 text-gray-400 border-white/20 hover:border-white/40 hover:text-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{dest.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,118 @@
|
|||||||
|
import dynamic from 'next/dynamic'
|
||||||
|
import type { FolderEntry } from '@/lib/client-types'
|
||||||
|
import { formatBytes } from '@/lib/format-bytes'
|
||||||
|
import WarningBanner from './WarningBanner'
|
||||||
|
|
||||||
|
const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false })
|
||||||
|
|
||||||
|
interface FolderCardProps {
|
||||||
|
entry: FolderEntry
|
||||||
|
index: number
|
||||||
|
onToggleViewer: (index: number) => void
|
||||||
|
onRemove: (index: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FolderCard({ entry, index, onToggleViewer, onRemove }: FolderCardProps) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3 bg-black-800 border border-white/20 rounded-xl px-4 py-3">
|
||||||
|
{/* Status icon */}
|
||||||
|
<div className="shrink-0">
|
||||||
|
{entry.status === 'success' ? (
|
||||||
|
<div className="w-8 h-8 rounded-full bg-green-900/30 flex items-center justify-center">
|
||||||
|
<svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
) : entry.status === 'error' ? (
|
||||||
|
<div className="w-8 h-8 rounded-full bg-red-900/30 flex items-center justify-center">
|
||||||
|
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
) : entry.status === 'uploading' ? (
|
||||||
|
<div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
|
||||||
|
<svg className="w-4 h-4 text-gray-300 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => entry.modelUrl ? onToggleViewer(index) : undefined}
|
||||||
|
aria-label={entry.viewerOpen ? 'Fermer la preview 3D' : 'Ouvrir la preview 3D'}
|
||||||
|
className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition ${
|
||||||
|
entry.modelUrl ? 'bg-black-700 hover:bg-gray-700 cursor-pointer' : 'bg-black-700 cursor-default'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={`w-4 h-4 text-gray-500 transition-transform ${entry.viewerOpen ? 'rotate-180' : ''}`}
|
||||||
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-gray-200 font-mono truncate">{entry.folderName}/</span>
|
||||||
|
<span className="shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-gray-700 text-gray-300">Dossier</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 mt-0.5">
|
||||||
|
<span className="text-xs text-gray-500">modele : {entry.modelFile.name}</span>
|
||||||
|
{entry.status === 'error' && entry.error && (
|
||||||
|
<span className="text-xs text-red-400 truncate">{entry.error}</span>
|
||||||
|
)}
|
||||||
|
{entry.status === 'success' && entry.filename && (
|
||||||
|
<span className="text-xs text-green-400 font-mono">{entry.filename}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{entry.status === 'uploading' && (
|
||||||
|
<div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-gray-400 rounded-full transition-all duration-200"
|
||||||
|
style={{ width: `${entry.progress}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Remove button */}
|
||||||
|
{entry.status !== 'uploading' && (
|
||||||
|
<button
|
||||||
|
onClick={() => onRemove(index)}
|
||||||
|
aria-label="Supprimer le dossier"
|
||||||
|
className="shrink-0 text-gray-600 hover:text-red-400 transition"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Warning banner */}
|
||||||
|
{entry.status !== 'success' && (
|
||||||
|
<WarningBanner warnings={entry.warnings} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 3D preview */}
|
||||||
|
{entry.modelUrl && entry.status !== 'success' && (
|
||||||
|
<div
|
||||||
|
className={`transition-all duration-300 ease-in-out overflow-hidden ${
|
||||||
|
entry.viewerOpen ? 'max-h-[500px] opacity-100 mt-2' : 'max-h-0 opacity-0 pointer-events-none'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<ModelViewer
|
||||||
|
url={entry.modelUrl}
|
||||||
|
filename={entry.modelFile.name}
|
||||||
|
size={formatBytes(entry.modelFile.size)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import type { FolderEntry } from '@/lib/client-types'
|
||||||
|
import { validateFolder } from '@/lib/validate-folder'
|
||||||
|
|
||||||
|
interface FolderDropzoneProps {
|
||||||
|
isUploading: boolean
|
||||||
|
onFolderSelected: (entry: FolderEntry) => void
|
||||||
|
onError: (message: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FolderDropzone({
|
||||||
|
isUploading,
|
||||||
|
onFolderSelected,
|
||||||
|
onError,
|
||||||
|
}: FolderDropzoneProps) {
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const selected = e.target.files
|
||||||
|
if (!selected || selected.length === 0) return
|
||||||
|
|
||||||
|
const fileArray = Array.from(selected)
|
||||||
|
const folderName = fileArray[0].webkitRelativePath?.split('/')[0] || 'folder'
|
||||||
|
const validation = validateFolder(fileArray)
|
||||||
|
|
||||||
|
if (validation.errors.length > 0) {
|
||||||
|
onError(validation.errors.join(' | '))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const entry: FolderEntry = {
|
||||||
|
folderName,
|
||||||
|
modelFile: validation.model!,
|
||||||
|
textures: validation.textures,
|
||||||
|
status: 'pending',
|
||||||
|
progress: 0,
|
||||||
|
warnings: validation.warnings,
|
||||||
|
modelUrl: URL.createObjectURL(validation.model!),
|
||||||
|
viewerOpen: true,
|
||||||
|
}
|
||||||
|
onFolderSelected(entry)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="folder-input"
|
||||||
|
{...({ webkitdirectory: '', directory: '' } as React.InputHTMLAttributes<HTMLInputElement>)}
|
||||||
|
multiple
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
onClick={() => document.getElementById('folder-input')?.click()}
|
||||||
|
className={`
|
||||||
|
relative border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all duration-200 bg-black-800
|
||||||
|
${isUploading ? 'cursor-not-allowed opacity-60 border-white/20' : ''}
|
||||||
|
${!isUploading ? 'border-white/30 hover:border-white/50 hover:bg-black-700' : ''}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-center mb-3">
|
||||||
|
<div className="w-12 h-12 rounded-full flex items-center justify-center bg-black-700">
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6 text-gray-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium text-gray-300">
|
||||||
|
Deposez votre dossier ici
|
||||||
|
<span className="text-gray-500 font-normal"> ou cliquez pour parcourir</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Contenu attendu : model.glb/gltf + textures (roughness, normal, metalness, color, displace)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import type { FileDiff } from '@/lib/types'
|
||||||
|
|
||||||
|
interface OverwriteConfirmModalProps {
|
||||||
|
destination: string
|
||||||
|
folderName: string
|
||||||
|
diffs: FileDiff[]
|
||||||
|
onCancel: () => void
|
||||||
|
onConfirm: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OverwriteConfirmModal({
|
||||||
|
destination,
|
||||||
|
folderName,
|
||||||
|
diffs,
|
||||||
|
onCancel,
|
||||||
|
onConfirm,
|
||||||
|
}: OverwriteConfirmModalProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="overwrite-title"
|
||||||
|
>
|
||||||
|
<div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-yellow-900/30 flex items-center justify-center shrink-0">
|
||||||
|
<svg className="w-5 h-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 id="overwrite-title" className="text-sm font-semibold text-gray-100">
|
||||||
|
Dossier deja existant
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-400 mt-0.5">
|
||||||
|
<span className="font-mono text-yellow-400">{destination}/{folderName}</span> existe deja sur le repo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{diffs.length > 0 && (
|
||||||
|
<div className="bg-black-800 border border-white/10 rounded-xl p-3 max-h-40 overflow-y-auto">
|
||||||
|
<p className="text-xs text-gray-500 mb-2">Modifications detectees :</p>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{diffs.map((d) => (
|
||||||
|
<li key={d.name} className="flex items-center gap-2 text-xs font-mono">
|
||||||
|
{d.status === 'changed' && (
|
||||||
|
<>
|
||||||
|
<span className="text-yellow-400">🔄</span>
|
||||||
|
<span className="text-gray-300">{d.name}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{d.status === 'new' && (
|
||||||
|
<>
|
||||||
|
<span className="text-green-400">✅</span>
|
||||||
|
<span className="text-gray-300">{d.name}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{d.status === 'deleted' && (
|
||||||
|
<>
|
||||||
|
<span className="text-red-400">❌</span>
|
||||||
|
<span className="text-gray-500 line-through">{d.name}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
|
||||||
|
py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
|
||||||
|
hover:bg-black-600"
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onConfirm}
|
||||||
|
className="flex-1 bg-yellow-600 text-[#000000] font-medium text-sm
|
||||||
|
py-2.5 px-4 rounded-xl transition-colors duration-150
|
||||||
|
hover:bg-yellow-500"
|
||||||
|
>
|
||||||
|
Remplacer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
interface SecretInputProps {
|
||||||
|
secret: string
|
||||||
|
secretVisible: boolean
|
||||||
|
secretError: string | null
|
||||||
|
disabled: boolean
|
||||||
|
onChange: (value: string) => void
|
||||||
|
onToggleVisible: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SecretInput({
|
||||||
|
secret,
|
||||||
|
secretVisible,
|
||||||
|
secretError,
|
||||||
|
disabled,
|
||||||
|
onChange,
|
||||||
|
onToggleVisible,
|
||||||
|
}: SecretInputProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<label className="block text-sm font-medium text-gray-300">Cle d'acces</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={secretVisible ? 'text' : 'password'}
|
||||||
|
value={secret}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
placeholder="Entrez la cle secrete..."
|
||||||
|
disabled={disabled}
|
||||||
|
className={`w-full bg-black-800 border rounded-xl px-4 py-2.5 pr-12
|
||||||
|
text-gray-100 placeholder-gray-500 text-sm
|
||||||
|
focus:outline-none focus:ring-2 focus:border-white/50
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed transition
|
||||||
|
${secretError
|
||||||
|
? 'border-red-500/70 focus:ring-red-500/50'
|
||||||
|
: 'border-white/30 focus:ring-white/50'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onToggleVisible}
|
||||||
|
aria-label={secretVisible ? 'Masquer la cle' : 'Afficher la cle'}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 transition"
|
||||||
|
tabIndex={-1}
|
||||||
|
>
|
||||||
|
{secretVisible ? (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{secretError && (
|
||||||
|
<p className="text-xs text-red-400 mt-1">{secretError}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
interface WarningBannerProps {
|
||||||
|
warnings: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WarningBanner({ warnings }: WarningBannerProps) {
|
||||||
|
if (warnings.length === 0) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-2 px-3 py-2 bg-yellow-900/20 border border-yellow-700/30 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2 text-xs text-yellow-400">
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>Textures manquantes : {warnings.join(', ')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
import type { FolderEntry } from '@/lib/client-types'
|
||||||
|
|
||||||
|
export function useFolderEntries() {
|
||||||
|
const [entries, setEntries] = useState<FolderEntry[]>([])
|
||||||
|
|
||||||
|
const updateEntry = useCallback((index: number, patch: Partial<FolderEntry>) => {
|
||||||
|
setEntries((prev) => prev.map((f, i) => (i === index ? { ...f, ...patch } : f)))
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const removeEntry = useCallback((index: number) => {
|
||||||
|
setEntries((prev) => {
|
||||||
|
const entry = prev[index]
|
||||||
|
if (entry?.modelUrl) URL.revokeObjectURL(entry.modelUrl)
|
||||||
|
return prev.filter((_, i) => i !== index)
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const resetEntries = useCallback(() => {
|
||||||
|
setEntries((prev) => {
|
||||||
|
prev.forEach((f) => {
|
||||||
|
if (f.modelUrl) URL.revokeObjectURL(f.modelUrl)
|
||||||
|
})
|
||||||
|
return []
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const allDone = entries.length > 0 && entries.every((f) => f.status === 'success')
|
||||||
|
const hasErrors = entries.some((f) => f.status === 'error')
|
||||||
|
|
||||||
|
return {
|
||||||
|
entries,
|
||||||
|
setEntries,
|
||||||
|
updateEntry,
|
||||||
|
removeEntry,
|
||||||
|
resetEntries,
|
||||||
|
allDone,
|
||||||
|
hasErrors,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react'
|
||||||
|
|
||||||
|
export function useSecret() {
|
||||||
|
const [secret, setSecret] = useState('')
|
||||||
|
const [secretError, setSecretError] = useState<string | null>(null)
|
||||||
|
const [secretVisible, setSecretVisible] = useState(false)
|
||||||
|
|
||||||
|
const isSecretEmpty = !secret.trim()
|
||||||
|
|
||||||
|
const handleSecretChange = useCallback((value: string) => {
|
||||||
|
setSecret(value)
|
||||||
|
if (secretError) setSecretError(null)
|
||||||
|
}, [secretError])
|
||||||
|
|
||||||
|
const toggleSecretVisible = useCallback(() => {
|
||||||
|
setSecretVisible((v) => !v)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const clearSecretError = useCallback(() => {
|
||||||
|
setSecretError(null)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
secret,
|
||||||
|
secretError,
|
||||||
|
secretVisible,
|
||||||
|
isSecretEmpty,
|
||||||
|
setSecret,
|
||||||
|
setSecretError,
|
||||||
|
handleSecretChange,
|
||||||
|
toggleSecretVisible,
|
||||||
|
clearSecretError,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Client-side types — used by components and hooks (no Node.js Buffer)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export type FileStatus = 'pending' | 'uploading' | 'success' | 'error'
|
||||||
|
|
||||||
|
export interface TextureFile {
|
||||||
|
name: string
|
||||||
|
file: File
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FolderEntry {
|
||||||
|
folderName: string
|
||||||
|
modelFile: File
|
||||||
|
textures: TextureFile[]
|
||||||
|
status: FileStatus
|
||||||
|
progress: number
|
||||||
|
error?: string
|
||||||
|
filename?: string
|
||||||
|
modelUrl?: string
|
||||||
|
viewerOpen?: boolean
|
||||||
|
warnings: string[]
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Format bytes to human-readable string
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
export function formatBytes(bytes: number): string {
|
||||||
|
if (bytes === 0) return '0 B'
|
||||||
|
const k = 1024
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Client-side folder validation
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
import { REQUIRED_TEXTURES, TEXTURE_EXTENSIONS } from '@/lib/constants'
|
||||||
|
import type { TextureFile } from '@/lib/client-types'
|
||||||
|
|
||||||
|
const TEXTURE_EXT_ARRAY = [...TEXTURE_EXTENSIONS]
|
||||||
|
|
||||||
|
function getTextureType(filename: string): string | null {
|
||||||
|
const name = filename.toLowerCase().replace(/\.[^.]+$/, '')
|
||||||
|
if ((REQUIRED_TEXTURES as readonly string[]).includes(name)) return name
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function validateFolder(files: File[]): {
|
||||||
|
model?: File
|
||||||
|
textures: TextureFile[]
|
||||||
|
errors: string[]
|
||||||
|
warnings: string[]
|
||||||
|
} {
|
||||||
|
const result: {
|
||||||
|
model?: File
|
||||||
|
textures: TextureFile[]
|
||||||
|
errors: string[]
|
||||||
|
warnings: string[]
|
||||||
|
} = {
|
||||||
|
textures: [],
|
||||||
|
errors: [],
|
||||||
|
warnings: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
const modelFiles = files.filter((f) => {
|
||||||
|
const name = f.name.toLowerCase()
|
||||||
|
return name === 'model.glb' || name === 'model.gltf'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (modelFiles.length === 0) {
|
||||||
|
result.errors.push('model.glb ou model.gltf manquant (obligatoire)')
|
||||||
|
} else {
|
||||||
|
result.model = modelFiles[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
const textureFiles = files.filter((f) => {
|
||||||
|
const ext = f.name.slice(f.name.lastIndexOf('.')).toLowerCase()
|
||||||
|
return TEXTURE_EXT_ARRAY.includes(ext) && getTextureType(f.name) !== null
|
||||||
|
})
|
||||||
|
|
||||||
|
for (const tf of textureFiles) {
|
||||||
|
result.textures.push({ name: tf.name, file: tf })
|
||||||
|
}
|
||||||
|
|
||||||
|
const foundTextures = new Set(
|
||||||
|
result.textures.map((t) => t.name.toLowerCase().replace(/\.[^.]+$/, '')),
|
||||||
|
)
|
||||||
|
for (const req of REQUIRED_TEXTURES) {
|
||||||
|
if (!foundTextures.has(req)) {
|
||||||
|
result.warnings.push(`${req}.webp/png/jpg manquant`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "upload-gltf",
|
"name": "upload-gltf",
|
||||||
"version": "0.0.2",
|
"version": "0.1.5",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
+2
-3
@@ -2,7 +2,6 @@ import type { Config } from 'tailwindcss'
|
|||||||
|
|
||||||
const config: Config = {
|
const config: Config = {
|
||||||
content: [
|
content: [
|
||||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
],
|
],
|
||||||
@@ -35,8 +34,8 @@ const config: Config = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
|
||||||
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
mono: ['var(--font-jetbrains-mono)', 'Fira Code', 'monospace'],
|
||||||
},
|
},
|
||||||
boxShadow: {
|
boxShadow: {
|
||||||
soft: '0 2px 16px 0 rgba(0, 0, 0, 0.06)',
|
soft: '0 2px 16px 0 rgba(0, 0, 0, 0.06)',
|
||||||
|
|||||||
Reference in New Issue
Block a user