diff --git a/src/screens/manga/MangaExtensions.tsx b/src/screens/manga/MangaExtensions.tsx index c5dbc13a..cbc708a2 100644 --- a/src/screens/manga/MangaExtensions.tsx +++ b/src/screens/manga/MangaExtensions.tsx @@ -7,6 +7,8 @@ import React, { useContext, useEffect, useState } from 'react'; import { fromEvent } from 'file-selector'; +import IconButton from '@material-ui/core/IconButton'; +import AddIcon from '@material-ui/icons/Add'; import ExtensionCard from 'components/manga/ExtensionCard'; import NavbarContext from 'context/NavbarContext'; import client from 'util/client'; @@ -56,11 +58,20 @@ export default function MangaExtensions() { useEffect(() => { setTitle('Extensions'); setAction( - , + <> + document.getElementById('external-extension-file')?.click() + } + > + + + + , ); }, [shownLangs]); @@ -85,11 +96,15 @@ export default function MangaExtensions() { const [toasts, makeToast] = makeToaster(useState([])); - const submitExtension = (file: File) => { + const submitExternalExtension = (file: File) => { if (file.name.toLowerCase().endsWith('apk')) { const formData = new FormData(); formData.append('file', file); + // empty the input + // @ts-ignore + document.getElementById('external-extension-file').value = null; + makeToast('Installing Extension File....', 'info'); client.post('/api/v1/extension/install', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) @@ -107,7 +122,7 @@ export default function MangaExtensions() { e.preventDefault(); const files = await fromEvent(e); - submitExtension(files[0] as File); + submitExternalExtension(files[0] as File); }; const dragOverHandler = (e: Event) => { @@ -118,9 +133,17 @@ export default function MangaExtensions() { document.addEventListener('drop', dropHandler); document.addEventListener('dragover', dragOverHandler); + const changeHandler = async (evt: Event) => { + const files = await fromEvent(evt); + submitExternalExtension(files[0] as File); + }; + const input = document.getElementById('external-extension-file'); + input?.addEventListener('change', changeHandler); + return () => { document.removeEventListener('drop', dropHandler); document.removeEventListener('dragover', dragOverHandler); + input?.removeEventListener('change', changeHandler); }; }, []); @@ -131,6 +154,11 @@ export default function MangaExtensions() { return ( <> {toasts} + { Object.entries(extensions).map(([lang, list]) => ( ((groupsToShow.indexOf(lang) !== -1 && (list as []).length > 0)