gabehf
/
Koito
mirror of https://github.com/gabehf/Koito.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: add message to suggest dnd local file

Browse Source
main
Gabe Farrell 2 weeks ago
parent fda416fe75
commit 1bceeeb2f6
1 changed files with 102 additions and 77 deletions
Show Stats Download Patch File Download Diff File

177
client/app/components/modals/ImageReplaceModal.tsx
Unescape View File

@ -5,86 +5,111 @@ import SearchResults from "../SearchResults";
import { AsyncButton } from "../AsyncButton"; import { AsyncButton } from "../AsyncButton";
interface Props { interface Props {
type: string type: string;
id: number id: number;
musicbrainzId?: string musicbrainzId?: string;
open: boolean open: boolean;
setOpen: Function setOpen: Function;
} }
export default function ImageReplaceModal({ musicbrainzId, type, id, open, setOpen }: Props) { export default function ImageReplaceModal({
const [query, setQuery] = useState(''); musicbrainzId,
const [loading, setLoading] = useState(false) type,
const [suggestedImgLoading, setSuggestedImgLoading] = useState(true) id,
open,
setOpen,
}: Props) {
const [query, setQuery] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [suggestedImgLoading, setSuggestedImgLoading] = useState(true);
const doImageReplace = (url: string) => { const doImageReplace = (url: string) => {
setLoading(true) setLoading(true);
const formData = new FormData setError("");
formData.set(`${type.toLowerCase()}_id`, id.toString()) const formData = new FormData();
formData.set("image_url", url) formData.set(`${type.toLowerCase()}_id`, id.toString());
replaceImage(formData) formData.set("image_url", url);
.then((r) => { replaceImage(formData)
if (r.ok) { .then((r) => {
window.location.reload() if (r.status >= 200 && r.status < 300) {
} else { window.location.reload();
console.log(r) } else {
setLoading(false) r.json().then((r) => setError(r.error));
} setLoading(false);
}) }
.catch((err) => console.log(err)) })
} .catch((err) => setError(err));
};
const closeModal = () => { const closeModal = () => {
setOpen(false) setOpen(false);
setQuery('') setQuery("");
} setError("");
};
return ( return (
<Modal isOpen={open} onClose={closeModal}> <Modal isOpen={open} onClose={closeModal}>
<h2>Replace Image</h2> <h2>Replace Image</h2>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<input <input
type="text" type="text"
autoFocus autoFocus
// i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal // i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal
placeholder={`Image URL`} placeholder={`Enter image URL, or drag-and-drop a local file`}
className="w-full mx-auto fg bg rounded p-2" className="w-full mx-auto fg bg rounded p-2"
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/>
{query != "" ? (
<div className="flex gap-2 mt-4">
<AsyncButton
loading={loading}
onClick={() => doImageReplace(query)}
>
Submit
</AsyncButton>
</div>
) : (
""
)}
{type === "Album" && musicbrainzId ? (
<>
<h3 className="mt-5">Suggested Image (Click to Apply)</h3>
<button
className="mt-4"
disabled={loading}
onClick={() =>
doImageReplace(
`https://coverartarchive.org/release/${musicbrainzId}/front`
)
}
>
<div className={`relative`}>
{suggestedImgLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<div
className="animate-spin rounded-full border-2 border-gray-300 border-t-transparent"
style={{ width: 20, height: 20 }}
/>
</div>
)}
<img
src={`https://coverartarchive.org/release/${musicbrainzId}/front`}
onLoad={() => setSuggestedImgLoading(false)}
onError={() => setSuggestedImgLoading(false)}
className={`block w-[130px] h-auto ${
suggestedImgLoading ? "opacity-0" : "opacity-100"
} transition-opacity duration-300`}
/> />
{ query != "" ? </div>
<div className="flex gap-2 mt-4"> </button>
<AsyncButton loading={loading} onClick={() => doImageReplace(query)}>Submit</AsyncButton> </>
</div> : ) : (
''} ""
{ type === "Album" && musicbrainzId ? )}
<> <p className="error">{error}</p>
<h3 className="mt-5">Suggested Image (Click to Apply)</h3> </div>
<button </Modal>
className="mt-4" );
disabled={loading}
onClick={() => doImageReplace(`https://coverartarchive.org/release/${musicbrainzId}/front`)}
>
<div className={`relative`}>
{suggestedImgLoading && (
<div className="absolute inset-0 flex items-center justify-center">
<div
className="animate-spin rounded-full border-2 border-gray-300 border-t-transparent"
style={{ width: 20, height: 20 }}
/>
</div>
)}
<img
src={`https://coverartarchive.org/release/${musicbrainzId}/front`}
onLoad={() => setSuggestedImgLoading(false)}
onError={() => setSuggestedImgLoading(false)}
className={`block w-[130px] h-auto ${suggestedImgLoading ? 'opacity-0' : 'opacity-100'} transition-opacity duration-300`} />
</div>
</button>
</>
: ''
}
</div>
</Modal>
)
} }
Write Preview
Loading…
Cancel
Save