mirror of
https://github.com/wisplite/raster.git
synced 2026-05-01 06:32:44 -05:00
small updates, for some reason it thinks every file is modified
This commit is contained in:
@@ -1,40 +1,40 @@
|
||||
import Modal from '../../components/Modal'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useState } from 'react'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
export default function AlbumCreateModal({ open, onOpenChange, trigger, parentId }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [title, setTitle] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const { showError } = useNotifier()
|
||||
const handleCreateAlbum = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/createAlbum`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title,
|
||||
description: description,
|
||||
parentId: parentId
|
||||
})
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
} else {
|
||||
onOpenChange(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Create Album">
|
||||
<div className="flex flex-col gap-2">
|
||||
<input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
<textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2" onClick={handleCreateAlbum}>Create Album</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
import Modal from '../../components/Modal'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useState } from 'react'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
export default function AlbumCreateModal({ open, onOpenChange, trigger, parentId }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [title, setTitle] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const { showError } = useNotifier()
|
||||
const handleCreateAlbum = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/createAlbum`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title,
|
||||
description: description,
|
||||
parentId: parentId
|
||||
})
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError("Error creating album: " + data.error)
|
||||
} else {
|
||||
onOpenChange(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Create Album">
|
||||
<div className="flex flex-col gap-2">
|
||||
<input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
<textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2" onClick={handleCreateAlbum}>Create Album</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -1,59 +1,59 @@
|
||||
import Modal from '../../components/Modal'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import FilePicker from './FilePicker'
|
||||
export default function AlbumEditModal({ open, onOpenChange, trigger, id, startTitle, startDescription, currentAlbum }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [title, setTitle] = useState(startTitle || '')
|
||||
const [description, setDescription] = useState(startDescription || '')
|
||||
const [thumbnail, setThumbnail] = useState(null)
|
||||
const { showError } = useNotifier()
|
||||
const handleEditAlbum = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/editAlbum`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: id,
|
||||
properties: {
|
||||
title: title,
|
||||
description: description,
|
||||
thumbnail: thumbnail,
|
||||
}
|
||||
})
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
} else {
|
||||
onOpenChange(false)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setTitle(startTitle || '')
|
||||
setDescription(startDescription || '')
|
||||
}
|
||||
}, [open])
|
||||
const handleFileSelect = (file) => {
|
||||
console.log(file)
|
||||
setThumbnail(file.selectedAlbum.ID + '/' + file.selectedFile.ID)
|
||||
}
|
||||
return (
|
||||
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Edit Album">
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-white red-hat-mono">Name</p>
|
||||
<input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
<p className="text-white red-hat-mono">Description</p>
|
||||
<textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<p className="text-white red-hat-mono">Thumbnail</p>
|
||||
<FilePicker currentAlbum={currentAlbum} onFileSelect={handleFileSelect} />
|
||||
<button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2" onClick={handleEditAlbum}>Save Changes</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
import Modal from '../../components/Modal'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import FilePicker from './FilePicker'
|
||||
export default function AlbumEditModal({ open, onOpenChange, trigger, id, startTitle, startDescription, currentAlbum }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [title, setTitle] = useState(startTitle || '')
|
||||
const [description, setDescription] = useState(startDescription || '')
|
||||
const [thumbnail, setThumbnail] = useState(null)
|
||||
const { showError } = useNotifier()
|
||||
const handleEditAlbum = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/editAlbum`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: id,
|
||||
properties: {
|
||||
title: title,
|
||||
description: description,
|
||||
thumbnail: thumbnail,
|
||||
}
|
||||
})
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError("Error editing album: " + data.error)
|
||||
} else {
|
||||
onOpenChange(false)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setTitle(startTitle || '')
|
||||
setDescription(startDescription || '')
|
||||
}
|
||||
}, [open])
|
||||
const handleFileSelect = (file) => {
|
||||
console.log(file)
|
||||
setThumbnail(file.selectedAlbum.ID + '/' + file.selectedFile.ID)
|
||||
}
|
||||
return (
|
||||
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} title="Edit Album">
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-white red-hat-mono">Name</p>
|
||||
<input type="text" placeholder="Name" className="w-full px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text" value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
<p className="text-white red-hat-mono">Description</p>
|
||||
<textarea type="text" placeholder="Description" className="w-full h-[20vh] px-3 py-2.5 bg-[#141414] border border-[#2B2B2B] rounded-md text-white placeholder-gray-600 focus:outline-none focus:border-[#3B3B3B] transition-colors red-hat-text resize-none" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<p className="text-white red-hat-mono">Thumbnail</p>
|
||||
<FilePicker currentAlbum={currentAlbum} onFileSelect={handleFileSelect} />
|
||||
<button className="w-full py-2.5 bg-[#2B2B2B] hover:bg-[#3B3B3B] text-white rounded-md font-medium transition-colors red-hat-mono cursor-pointer mt-2" onClick={handleEditAlbum}>Save Changes</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@@ -1,100 +1,100 @@
|
||||
import { PlusIcon, EllipsisVertical } from 'lucide-react'
|
||||
import AlbumCreateModal from './AlbumCreateModal'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import AlbumEditModal from './AlbumEditModal'
|
||||
export default function AlbumList({ currentAlbumName }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [openEdit, setOpenEdit] = useState(false)
|
||||
const [editingAlbum, setEditingAlbum] = useState(null)
|
||||
const [albums, setAlbums] = useState([])
|
||||
const navigate = useNavigate()
|
||||
const { showError } = useNotifier()
|
||||
useEffect(() => {
|
||||
let ignore = false;
|
||||
const getAlbums = async () => {
|
||||
console.log('Getting albums in parent', currentAlbumName)
|
||||
const parentId = currentAlbumName === 'gallery' ? "" : currentAlbumName;
|
||||
try {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
parentId: parentId,
|
||||
}),
|
||||
})
|
||||
const data = await response.json()
|
||||
if (!ignore) {
|
||||
if (data.error) {
|
||||
setAlbums([])
|
||||
showError('Failed to get albums')
|
||||
} else {
|
||||
setAlbums(data)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (!ignore) {
|
||||
setAlbums([])
|
||||
showError('Failed to get albums')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!open && !openEdit && currentAlbumName !== null) {
|
||||
getAlbums()
|
||||
}
|
||||
return () => { ignore = true; }
|
||||
}, [currentAlbumName, open, openEdit])
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-start h-min w-full bg-[#141414]">
|
||||
<div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
|
||||
<h1 className="text-xl font-bold text-white red-hat-mono">Albums</h1>
|
||||
<PlusIcon className="w-6 h-6 cursor-pointer" color="white" onClick={() => setOpen(true)} />
|
||||
</div>
|
||||
<div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
|
||||
{albums.map((album) => (
|
||||
<div
|
||||
key={album.ID}
|
||||
className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4 cursor-pointer"
|
||||
onClick={() => {
|
||||
// Get current path and append the album's title
|
||||
const currentPath = window.location.pathname;
|
||||
// Remove leading and trailing slashes, split to parts
|
||||
const pathParts = currentPath.replace(/^\/|\/$/g, '').split('/');
|
||||
// Only append if not already the last part (avoid duplicate navigation)
|
||||
if (pathParts[pathParts.length - 1] !== album.Title) {
|
||||
navigate(`${currentPath.replace(/\/$/, '')}/${encodeURIComponent(album.Title)}`);
|
||||
} else {
|
||||
navigate(currentPath); // Or optionally do nothing/navigate to self
|
||||
}
|
||||
}}
|
||||
>
|
||||
<p className="text-white red-hat-mono">{album.Title}</p>
|
||||
<EllipsisVertical className="w-6 h-6 cursor-pointer" color="white" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setEditingAlbum(album)
|
||||
setOpenEdit(true)
|
||||
}} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<AlbumCreateModal open={open} onOpenChange={setOpen} parentId={currentAlbumName === 'gallery' ? '' : currentAlbumName} />
|
||||
{editingAlbum && (
|
||||
<AlbumEditModal
|
||||
open={openEdit}
|
||||
onOpenChange={setOpenEdit}
|
||||
id={editingAlbum.ID}
|
||||
startTitle={editingAlbum.Title}
|
||||
startDescription={editingAlbum.Description}
|
||||
currentAlbum={editingAlbum}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
import { PlusIcon, EllipsisVertical } from 'lucide-react'
|
||||
import AlbumCreateModal from './AlbumCreateModal'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import AlbumEditModal from './AlbumEditModal'
|
||||
export default function AlbumList({ currentAlbumName }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [openEdit, setOpenEdit] = useState(false)
|
||||
const [editingAlbum, setEditingAlbum] = useState(null)
|
||||
const [albums, setAlbums] = useState([])
|
||||
const navigate = useNavigate()
|
||||
const { showError } = useNotifier()
|
||||
useEffect(() => {
|
||||
let ignore = false;
|
||||
const getAlbums = async () => {
|
||||
console.log('Getting albums in parent', currentAlbumName)
|
||||
const parentId = currentAlbumName === 'gallery' ? "" : currentAlbumName;
|
||||
try {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
parentId: parentId,
|
||||
}),
|
||||
})
|
||||
const data = await response.json()
|
||||
if (!ignore) {
|
||||
if (data.error) {
|
||||
setAlbums([])
|
||||
showError('Failed to get albums')
|
||||
} else {
|
||||
setAlbums(data)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (!ignore) {
|
||||
setAlbums([])
|
||||
showError('Failed to get albums')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!open && !openEdit && currentAlbumName !== null) {
|
||||
getAlbums()
|
||||
}
|
||||
return () => { ignore = true; }
|
||||
}, [currentAlbumName, open, openEdit])
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-start h-min w-full bg-[#141414]">
|
||||
<div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
|
||||
<h1 className="text-xl font-bold text-white red-hat-display">Albums</h1>
|
||||
<PlusIcon className="w-6 h-6 cursor-pointer" color="white" onClick={() => setOpen(true)} />
|
||||
</div>
|
||||
<div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
|
||||
{albums.map((album) => (
|
||||
<div
|
||||
key={album.ID}
|
||||
className="flex flex-row items-center justify-start gap-2 w-1/8 aspect-square border border-[#2B2B2B] rounded-md px-6 py-4 cursor-pointer"
|
||||
onClick={() => {
|
||||
// Get current path and append the album's title
|
||||
const currentPath = window.location.pathname;
|
||||
// Remove leading and trailing slashes, split to parts
|
||||
const pathParts = currentPath.replace(/^\/|\/$/g, '').split('/');
|
||||
// Only append if not already the last part (avoid duplicate navigation)
|
||||
if (pathParts[pathParts.length - 1] !== album.Title) {
|
||||
navigate(`${currentPath.replace(/\/$/, '')}/${encodeURIComponent(album.Title)}`);
|
||||
} else {
|
||||
navigate(currentPath); // Or optionally do nothing/navigate to self
|
||||
}
|
||||
}}
|
||||
>
|
||||
<p className="text-white red-hat-text">{album.Title}</p>
|
||||
<EllipsisVertical className="w-6 h-6 cursor-pointer" color="white" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setEditingAlbum(album)
|
||||
setOpenEdit(true)
|
||||
}} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<AlbumCreateModal open={open} onOpenChange={setOpen} parentId={currentAlbumName === 'gallery' ? '' : currentAlbumName} />
|
||||
{editingAlbum && (
|
||||
<AlbumEditModal
|
||||
open={openEdit}
|
||||
onOpenChange={setOpenEdit}
|
||||
id={editingAlbum.ID}
|
||||
startTitle={editingAlbum.Title}
|
||||
startDescription={editingAlbum.Description}
|
||||
currentAlbum={editingAlbum}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -14,7 +14,7 @@ export default function FilePicker({ currentAlbum, onFileSelect }) {
|
||||
const [media, setMedia] = useState(null)
|
||||
const [filePickerOpen, setFilePickerOpen] = useState(false)
|
||||
const { getAccessToken } = useAccount()
|
||||
const { showError } = useNotifier()
|
||||
const { showError, showInfo } = useNotifier()
|
||||
useEffect(() => {
|
||||
const getAlbum = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/albums/getAlbumsInParent`, {
|
||||
@@ -28,7 +28,7 @@ export default function FilePicker({ currentAlbum, onFileSelect }) {
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
showError("Error getting albums in parent: " + data.error)
|
||||
} else {
|
||||
setAlbums(data)
|
||||
}
|
||||
@@ -45,7 +45,7 @@ export default function FilePicker({ currentAlbum, onFileSelect }) {
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
showError("Error getting album info: " + data.error)
|
||||
} else {
|
||||
setSelectedAlbum(data)
|
||||
}
|
||||
@@ -59,7 +59,7 @@ export default function FilePicker({ currentAlbum, onFileSelect }) {
|
||||
})
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
showError("Error getting media: " + data.error)
|
||||
} else {
|
||||
if (data.media.length === 0) {
|
||||
setMedia(null)
|
||||
@@ -99,7 +99,7 @@ export default function FilePicker({ currentAlbum, onFileSelect }) {
|
||||
|
||||
const data = await response.json()
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
showError("Error getting album: " + data.error)
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
@@ -1,122 +1,126 @@
|
||||
import { EllipsisVertical, Upload } from 'lucide-react'
|
||||
import MediaUploadModal from './MediaUploadModal'
|
||||
import AuthImage from '../../components/AuthImage'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
export default function MediaList({ albumId, albumName }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [media, setMedia] = useState([])
|
||||
const [aspectRatios, setAspectRatios] = useState({})
|
||||
const { showError } = useNotifier()
|
||||
const navigate = useNavigate()
|
||||
useEffect(() => {
|
||||
let ignore = false;
|
||||
const getMedia = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/media/getAllMediaInAlbum?albumId=${albumId}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': getAccessToken(),
|
||||
},
|
||||
})
|
||||
const data = await response.json()
|
||||
if (ignore) return
|
||||
if (data.error) {
|
||||
showError(data.error)
|
||||
} else {
|
||||
setMedia(data.media)
|
||||
}
|
||||
}
|
||||
getMedia()
|
||||
return () => { ignore = true; }
|
||||
}, [albumId])
|
||||
|
||||
const handleImageLoad = (id, event) => {
|
||||
const { naturalWidth, naturalHeight } = event.target
|
||||
if (naturalWidth && naturalHeight) {
|
||||
setAspectRatios(prev => ({
|
||||
...prev,
|
||||
[id]: naturalWidth / naturalHeight
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log(media)
|
||||
}, [media])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-start w-full bg-[#141414]">
|
||||
<div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
|
||||
<h1 className="text-xl font-bold text-white red-hat-mono">Media</h1>
|
||||
<Upload className="w-6 h-6 cursor-pointer" color="white" onClick={() => setOpen(true)} />
|
||||
</div>
|
||||
<MediaUploadModal
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
albumId={albumId}
|
||||
albumName={albumName}
|
||||
/>
|
||||
|
||||
{/* Media Grid */}
|
||||
<div className="flex flex-wrap justify-start gap-2 w-full px-6">
|
||||
{media.length === 0 && (
|
||||
<p className="text-gray-500 red-hat-text">No media in this album</p>
|
||||
)}
|
||||
{media.map((item) => {
|
||||
let ar = 1;
|
||||
// Try to get aspect ratio from metadata (new uploads) or fallback to loaded state (old uploads)
|
||||
if (item.Metadata && item.Metadata.width && item.Metadata.height) {
|
||||
ar = item.Metadata.width / item.Metadata.height;
|
||||
} else if (aspectRatios[item.ID]) {
|
||||
ar = aspectRatios[item.ID];
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.ID}
|
||||
style={{
|
||||
aspectRatio: ar,
|
||||
flexGrow: ar,
|
||||
flexBasis: `${220 * ar}px`,
|
||||
}}
|
||||
className="relative bg-[#1A1A1A] rounded-md overflow-hidden border border-[#2B2B2B] min-w-[100px] hover:scale-102 transition-all duration-300 cursor-pointer"
|
||||
onClick={() => {
|
||||
navigate(`/viewer/${albumId ? albumId : 'root'}/${item.ID}`)
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-[#1A1A1A] via-transparent to-transparent flex items-start justify-start opacity-0 hover:opacity-100 transition-all duration-300">
|
||||
<p className="text-white text-sm truncate max-w-[100%] p-2 red-hat-mono">{item.Title}</p>
|
||||
<button className="text-white px-1 py-1 rounded-md absolute top-2 right-2 cursor-pointer z-50" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setOpen(true)
|
||||
}}>
|
||||
<EllipsisVertical className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<AuthImage
|
||||
src={`${getServerUrl()}/api/media/thumb/${albumId ? albumId : 'root'}/${item.ID}`}
|
||||
token={getAccessToken()}
|
||||
alt={item.Title}
|
||||
className="w-full h-full object-cover"
|
||||
onLoad={(e) => handleImageLoad(item.ID, e)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* Spacer to prevent the last row from expanding to fill width if it has few items */}
|
||||
<div style={{ flexGrow: 9999, flexBasis: '50%' }}></div>
|
||||
</div>
|
||||
|
||||
<MediaUploadModal
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
albumId={albumId}
|
||||
albumName={albumName}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { EllipsisVertical, Upload } from 'lucide-react'
|
||||
import MediaUploadModal from './MediaUploadModal'
|
||||
import AuthImage from '../../components/AuthImage'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
export default function MediaList({ albumId, albumName }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [media, setMedia] = useState([])
|
||||
const [aspectRatios, setAspectRatios] = useState({})
|
||||
const { showError, showInfo } = useNotifier()
|
||||
const navigate = useNavigate()
|
||||
useEffect(() => {
|
||||
let ignore = false;
|
||||
const accessToken = getAccessToken()
|
||||
if (!accessToken || !albumId && albumName !== 'gallery') {
|
||||
return // assuming state isn't loaded yet
|
||||
}
|
||||
const getMedia = async () => {
|
||||
const response = await fetch(`${getServerUrl()}/api/media/getAllMediaInAlbum?albumId=${albumId}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': accessToken,
|
||||
},
|
||||
})
|
||||
const data = await response.json()
|
||||
if (ignore) return
|
||||
if (data.error) {
|
||||
showError("Error getting media in album: " + data.error)
|
||||
} else {
|
||||
setMedia(data.media)
|
||||
}
|
||||
}
|
||||
getMedia()
|
||||
return () => { ignore = true; }
|
||||
}, [albumId])
|
||||
|
||||
const handleImageLoad = (id, event) => {
|
||||
const { naturalWidth, naturalHeight } = event.target
|
||||
if (naturalWidth && naturalHeight) {
|
||||
setAspectRatios(prev => ({
|
||||
...prev,
|
||||
[id]: naturalWidth / naturalHeight
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log(media)
|
||||
}, [media])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-start w-full bg-[#141414]">
|
||||
<div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
|
||||
<h1 className="text-xl font-bold text-white red-hat-display">Media</h1>
|
||||
<Upload className="w-6 h-6 cursor-pointer" color="white" onClick={() => setOpen(true)} />
|
||||
</div>
|
||||
<MediaUploadModal
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
albumId={albumId}
|
||||
albumName={albumName}
|
||||
/>
|
||||
|
||||
{/* Media Grid */}
|
||||
<div className="flex flex-wrap justify-start gap-2 w-full px-6">
|
||||
{media.length === 0 && (
|
||||
<p className="text-gray-500 red-hat-text">No media in this album</p>
|
||||
)}
|
||||
{media.map((item) => {
|
||||
let ar = 1;
|
||||
// Try to get aspect ratio from metadata (new uploads) or fallback to loaded state (old uploads)
|
||||
if (item.Metadata && item.Metadata.width && item.Metadata.height) {
|
||||
ar = item.Metadata.width / item.Metadata.height;
|
||||
} else if (aspectRatios[item.ID]) {
|
||||
ar = aspectRatios[item.ID];
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.ID}
|
||||
style={{
|
||||
aspectRatio: ar,
|
||||
flexGrow: ar,
|
||||
flexBasis: `${220 * ar}px`,
|
||||
}}
|
||||
className="relative bg-[#1A1A1A] rounded-md overflow-hidden border border-[#2B2B2B] min-w-[100px] hover:scale-102 transition-all duration-300 cursor-pointer"
|
||||
onClick={() => {
|
||||
navigate(`/viewer/${albumId ? albumId : 'root'}/${item.ID}`)
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-[#1A1A1A] via-transparent to-transparent flex items-start justify-start opacity-0 hover:opacity-100 transition-all duration-300">
|
||||
<p className="text-white text-sm truncate max-w-[90%] p-2 red-hat-text">{item.Title}</p>
|
||||
<button className="text-white px-1 py-1 rounded-md absolute top-2 right-2 cursor-pointer z-50" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setOpen(true)
|
||||
}}>
|
||||
<EllipsisVertical className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<AuthImage
|
||||
src={`${getServerUrl()}/api/media/thumb/${albumId ? albumId : 'root'}/${item.ID}`}
|
||||
token={getAccessToken()}
|
||||
alt={item.Title}
|
||||
className="w-full h-full object-cover"
|
||||
onLoad={(e) => handleImageLoad(item.ID, e)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* Spacer to prevent the last row from expanding to fill width if it has few items */}
|
||||
<div style={{ flexGrow: 9999, flexBasis: '50%' }}></div>
|
||||
</div>
|
||||
|
||||
<MediaUploadModal
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
albumId={albumId}
|
||||
albumName={albumName}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,184 +1,184 @@
|
||||
import Modal from '../../components/Modal'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useState, useRef } from 'react'
|
||||
import { X, Upload, FileImage, FileVideo, Trash2 } from 'lucide-react'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
export default function MediaUploadModal({ open, onOpenChange, trigger, albumName, albumId }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [files, setFiles] = useState([])
|
||||
const fileInputRef = useRef(null)
|
||||
const { showError, showSuccess } = useNotifier()
|
||||
const handleFileSelect = (e) => {
|
||||
if (e.target.files) {
|
||||
const newFiles = Array.from(e.target.files).map(file => ({
|
||||
file,
|
||||
progress: 0,
|
||||
status: 'pending',
|
||||
id: Math.random().toString(36).substring(7)
|
||||
}))
|
||||
setFiles(prev => [...prev, ...newFiles])
|
||||
}
|
||||
// Reset input so the same file can be selected again if needed
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const removeFile = (id) => {
|
||||
setFiles(prev => prev.filter(f => f.id !== id))
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
const pendingFiles = files.filter(f => f.status === 'pending')
|
||||
if (pendingFiles.length === 0) return
|
||||
|
||||
setFiles(prev => prev.map(f => f.status === 'pending' ? { ...f, status: 'uploading' } : f))
|
||||
|
||||
const uploadFile = (fileWrapper) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
const formData = new FormData()
|
||||
formData.append('file', fileWrapper.file)
|
||||
formData.append('albumId', albumId)
|
||||
|
||||
xhr.upload.addEventListener('progress', (event) => {
|
||||
if (event.lengthComputable) {
|
||||
const progress = Math.round((event.loaded / event.total) * 100)
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, progress } : f))
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try {
|
||||
const data = JSON.parse(xhr.responseText)
|
||||
if (data.error) {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(data.error)
|
||||
} else {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'completed', progress: 100 } : f))
|
||||
resolve(data)
|
||||
}
|
||||
} catch (e) {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(e)
|
||||
}
|
||||
} else {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(new Error(xhr.statusText))
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(new Error('Network Error'))
|
||||
})
|
||||
|
||||
xhr.open('POST', `${getServerUrl()}/api/media/uploadMedia`)
|
||||
xhr.setRequestHeader('Authorization', getAccessToken())
|
||||
xhr.send(formData)
|
||||
})
|
||||
}
|
||||
|
||||
const results = await Promise.allSettled(pendingFiles.map(f => uploadFile(f)))
|
||||
|
||||
const failedCount = results.filter(r => r.status === 'rejected').length
|
||||
const successCount = results.filter(r => r.status === 'fulfilled').length
|
||||
|
||||
if (failedCount > 0) {
|
||||
showError(`${failedCount} file(s) failed to upload`)
|
||||
}
|
||||
if (successCount > 0) {
|
||||
showSuccess(`${successCount} file(s) uploaded successfully`)
|
||||
}
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} isProtected={true} title={`Upload to ${albumName || 'Album'}`}>
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* File Selection Area */}
|
||||
<div
|
||||
className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-[#2B2B2B] rounded-lg cursor-pointer hover:border-[#3B3B3B] transition-colors bg-[#1A1A1A]"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Upload className="w-8 h-8 text-gray-400 mb-2" />
|
||||
<p className="text-gray-400 text-sm font-medium red-hat-text">Click to select files</p>
|
||||
<p className="text-gray-600 text-xs mt-1 red-hat-text">Images and Videos</p>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
multiple
|
||||
accept="image/*,video/*"
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
{files.length > 0 && (
|
||||
<div className="flex flex-col gap-2 max-h-[40vh] overflow-y-auto pr-1">
|
||||
{files.map((fileWrapper) => (
|
||||
<div key={fileWrapper.id} className="flex flex-col gap-2 bg-[#1A1A1A] p-3 rounded-md border border-[#2B2B2B]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
{fileWrapper.file.type.startsWith('video') ? (
|
||||
<FileVideo className="w-5 h-5 text-blue-400 flex-shrink-0" />
|
||||
) : (
|
||||
<FileImage className="w-5 h-5 text-green-400 flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
<span className="text-white text-sm truncate red-hat-text" title={fileWrapper.file.name}>
|
||||
{fileWrapper.file.name}
|
||||
</span>
|
||||
<span className="text-gray-500 text-xs red-hat-mono">
|
||||
{formatFileSize(fileWrapper.file.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(fileWrapper.id)}
|
||||
className="text-gray-500 hover:text-red-400 transition-colors p-1"
|
||||
disabled={fileWrapper.status === 'uploading'}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full h-1.5 bg-[#2B2B2B] rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${fileWrapper.status === 'completed' ? 'bg-green-500' :
|
||||
fileWrapper.status === 'error' ? 'bg-red-500' : 'bg-blue-500'
|
||||
}`}
|
||||
style={{ width: `${fileWrapper.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Button */}
|
||||
<button
|
||||
className={`w-full py-2.5 bg-[#2B2B2B] text-white rounded-md font-medium transition-colors red-hat-mono ${files.length === 0 || files.every(f => f.status === 'completed')
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:bg-[#3B3B3B] cursor-pointer'
|
||||
}`}
|
||||
onClick={handleUpload}
|
||||
disabled={files.length === 0 || files.every(f => f.status === 'completed')}
|
||||
>
|
||||
{files.some(f => f.status === 'uploading') ? 'Uploading...' : 'Upload Files'}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
import Modal from '../../components/Modal'
|
||||
import { useAccount } from '../../contexts/useAccount'
|
||||
import { useState, useRef } from 'react'
|
||||
import { X, Upload, FileImage, FileVideo, Trash2 } from 'lucide-react'
|
||||
import { useNotifier } from '../../contexts/useNotifier'
|
||||
import { getServerUrl } from '../../hooks/getConstants'
|
||||
export default function MediaUploadModal({ open, onOpenChange, trigger, albumName, albumId }) {
|
||||
const { getAccessToken } = useAccount()
|
||||
const [files, setFiles] = useState([])
|
||||
const fileInputRef = useRef(null)
|
||||
const { showError, showSuccess } = useNotifier()
|
||||
const handleFileSelect = (e) => {
|
||||
if (e.target.files) {
|
||||
const newFiles = Array.from(e.target.files).map(file => ({
|
||||
file,
|
||||
progress: 0,
|
||||
status: 'pending',
|
||||
id: Math.random().toString(36).substring(7)
|
||||
}))
|
||||
setFiles(prev => [...prev, ...newFiles])
|
||||
}
|
||||
// Reset input so the same file can be selected again if needed
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const removeFile = (id) => {
|
||||
setFiles(prev => prev.filter(f => f.id !== id))
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
const pendingFiles = files.filter(f => f.status === 'pending')
|
||||
if (pendingFiles.length === 0) return
|
||||
|
||||
setFiles(prev => prev.map(f => f.status === 'pending' ? { ...f, status: 'uploading' } : f))
|
||||
|
||||
const uploadFile = (fileWrapper) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
const formData = new FormData()
|
||||
formData.append('file', fileWrapper.file)
|
||||
formData.append('albumId', albumId)
|
||||
|
||||
xhr.upload.addEventListener('progress', (event) => {
|
||||
if (event.lengthComputable) {
|
||||
const progress = Math.round((event.loaded / event.total) * 100)
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, progress } : f))
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try {
|
||||
const data = JSON.parse(xhr.responseText)
|
||||
if (data.error) {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(data.error)
|
||||
} else {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'completed', progress: 100 } : f))
|
||||
resolve(data)
|
||||
}
|
||||
} catch (e) {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(e)
|
||||
}
|
||||
} else {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(new Error(xhr.statusText))
|
||||
}
|
||||
})
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
setFiles(prev => prev.map(f => f.id === fileWrapper.id ? { ...f, status: 'error' } : f))
|
||||
reject(new Error('Network Error'))
|
||||
})
|
||||
|
||||
xhr.open('POST', `${getServerUrl()}/api/media/uploadMedia`)
|
||||
xhr.setRequestHeader('Authorization', getAccessToken())
|
||||
xhr.send(formData)
|
||||
})
|
||||
}
|
||||
|
||||
const results = await Promise.allSettled(pendingFiles.map(f => uploadFile(f)))
|
||||
|
||||
const failedCount = results.filter(r => r.status === 'rejected').length
|
||||
const successCount = results.filter(r => r.status === 'fulfilled').length
|
||||
|
||||
if (failedCount > 0) {
|
||||
showError(`${failedCount} file(s) failed to upload`)
|
||||
}
|
||||
if (successCount > 0) {
|
||||
showSuccess(`${successCount} file(s) uploaded successfully`)
|
||||
}
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={open} onOpenChange={onOpenChange} trigger={trigger} isProtected={true} title={`Upload to ${albumName || 'Album'}`}>
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* File Selection Area */}
|
||||
<div
|
||||
className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-[#2B2B2B] rounded-lg cursor-pointer hover:border-[#3B3B3B] transition-colors bg-[#1A1A1A]"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Upload className="w-8 h-8 text-gray-400 mb-2" />
|
||||
<p className="text-gray-400 text-sm font-medium red-hat-text">Click to select files</p>
|
||||
<p className="text-gray-600 text-xs mt-1 red-hat-text">Images and Videos</p>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
multiple
|
||||
accept="image/*,video/*"
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
{files.length > 0 && (
|
||||
<div className="flex flex-col gap-2 max-h-[40vh] overflow-y-auto pr-1">
|
||||
{files.map((fileWrapper) => (
|
||||
<div key={fileWrapper.id} className="flex flex-col gap-2 bg-[#1A1A1A] p-3 rounded-md border border-[#2B2B2B]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
{fileWrapper.file.type.startsWith('video') ? (
|
||||
<FileVideo className="w-5 h-5 text-blue-400 flex-shrink-0" />
|
||||
) : (
|
||||
<FileImage className="w-5 h-5 text-green-400 flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
<span className="text-white text-sm truncate red-hat-text" title={fileWrapper.file.name}>
|
||||
{fileWrapper.file.name}
|
||||
</span>
|
||||
<span className="text-gray-500 text-xs red-hat-mono">
|
||||
{formatFileSize(fileWrapper.file.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(fileWrapper.id)}
|
||||
className="text-gray-500 hover:text-red-400 transition-colors p-1"
|
||||
disabled={fileWrapper.status === 'uploading'}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full h-1.5 bg-[#2B2B2B] rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${fileWrapper.status === 'completed' ? 'bg-green-500' :
|
||||
fileWrapper.status === 'error' ? 'bg-red-500' : 'bg-blue-500'
|
||||
}`}
|
||||
style={{ width: `${fileWrapper.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Button */}
|
||||
<button
|
||||
className={`w-full py-2.5 bg-[#2B2B2B] text-white rounded-md font-medium transition-colors red-hat-mono ${files.length === 0 || files.every(f => f.status === 'completed')
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:bg-[#3B3B3B] cursor-pointer'
|
||||
}`}
|
||||
onClick={handleUpload}
|
||||
disabled={files.length === 0 || files.every(f => f.status === 'completed')}
|
||||
>
|
||||
{files.some(f => f.status === 'uploading') ? 'Uploading...' : 'Upload Files'}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user