marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dangling download

Browse Source
This commit is contained in:
marcobaobao
2022-01-27 18:11:13 +01:00
parent 8c10868dd0
commit 8ff853b688
4 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/App.tsx
View File

@@ -10,7 +10,8 @@ import {
Button,
ButtonGroup,
} from "react-bootstrap";
import { validateDomain, validateIP } from "./utils";
import { X } from "react-bootstrap-icons";
import { updateInStateMap, validateDomain, validateIP } from "./utils";
import { IDLInfo, IDLInfoBase, IMessage } from "./interfaces";
import { MessageToast } from "./components/MessageToast";
import './App.css';
@@ -32,15 +33,6 @@ export function App() {
const [darkMode, setDarkMode] = useState(localStorage.getItem('theme') === 'dark');
const [extractAudio, setExtractAudio] = useState(localStorage.getItem('-x') === 'true');
const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
if (remove) {
target.delete(k)
callback(new Map(target))
return;
}
callback(new Map(target.set(k, v)));
}
useEffect(() => {
socket.on('connect', () => {
setShowToast(true)
@@ -69,7 +61,6 @@ export function App() {
})
}, [])
useEffect(() => {
socket.on('progress', (data: IMessage) => {
if (data.status === 'Done!' || data.status === 'Aborted') {
@@ -92,10 +83,6 @@ export function App() {
if (data.progress) {
updateInStateMap(data.pid, Math.ceil(Number(data.progress.replace('%', ''))), progressMap, setProgressMap)
}
// if (data.dlSpeed) {
// const event = new CustomEvent<number>("dlSpeed", { "detail": detectSpeed(data.dlSpeed) });
// document.dispatchEvent(event);
// }
})
}, [])
@@ -115,7 +102,7 @@ export function App() {
},
})
setUrl('')
const input: HTMLInputElement = document.getElementById('urlInput') as HTMLInputElement;
const input = document.getElementById('urlInput') as HTMLInputElement;
input.value = '';
}
@@ -190,7 +177,7 @@ export function App() {
/>
</InputGroup>
{
Array.from(messageMap).length === 0 ?
!Array.from(messageMap).length ?
<div className="mt-2 status-box">
<Row>
<Col sm={9}>
@@ -209,7 +196,7 @@ export function App() {
Message[1] => value, the actual formatted message sent from server
*/
}
{message[1] && message[1] !== 'Done!' ?
{message[0] && message[1] && message[1] !== 'Done!' ?
<div className="mt-2 status-box">
<Row>
{
@@ -245,9 +232,9 @@ export function App() {
{message[1] && message[1] !== 'Done!' ?
<Row>
<Col>
<div className="px-2">
<Button variant="" className="float-end" active size="sm" onClick={() => abort(message[0])}>x</Button>
</div>
<Button variant={darkMode ? 'dark' : 'light'} className="float-end" active size="sm" onClick={() => abort(message[0])}>
<X></X>
</Button>
</Col>
</Row> : null
}
@@ -284,10 +271,7 @@ export function App() {
<Button onClick={() => updateBinary()} disabled={halt}>
Update yt-dlp binary
</Button>{' '}
<Button
variant={darkMode ? 'light' : 'dark'}
onClick={() => toggleTheme()}
>
<Button variant={darkMode ? 'light' : 'dark'} onClick={() => toggleTheme()}>
{darkMode ? 'Light theme' : 'Dark theme'}
</Button>
<div className="pt-2">

11
frontend/src/utils.ts
View File

@@ -26,4 +26,13 @@ export function detectSpeed(str: string): number {
default:
return 0
}
}
}
export const updateInStateMap = (k: number, v: any, target: Map<number, any>, callback: Function, remove: boolean = false) => {
if (remove) {
target.delete(k)
callback(new Map(target))
return;
}
callback(new Map(target.set(k, v)));
}

1
package.json
View File

@@ -20,6 +20,7 @@
"ordered-binary": "^1.2.1",
"react": "^17.0.2",
"react-bootstrap": "2.0.2",
"react-bootstrap-icons": "^1.7.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2",
"rxjs": "^7.4.0",

11
pnpm-lock.yaml generated
View File

@@ -10,6 +10,7 @@ specifiers:
parcel: ^2.0.1
react: ^17.0.2
react-bootstrap: 2.0.2
react-bootstrap-icons: ^1.7.2
react-chartjs-2: ^4.0.0
react-dom: ^17.0.2
rxjs: ^7.4.0
@@ -28,6 +29,7 @@ dependencies:
ordered-binary: 1.2.3
react: 17.0.2
react-bootstrap: 2.0.2_react-dom@17.0.2+react@17.0.2
react-bootstrap-icons: 1.7.2_react@17.0.2
react-chartjs-2: 4.0.1_chart.js@3.7.0+react@17.0.2
react-dom: 17.0.2_react@17.0.2
rxjs: 7.5.2
@@ -3949,6 +3951,15 @@ packages:
strip-json-comments: 2.0.1
dev: false
/react-bootstrap-icons/1.7.2_react@17.0.2:
resolution: {integrity: sha512-FaXk5iHjd6eltoPHUo+onIkcN/xcCEbaEnTeRacibwVlPagEzujFYtUJ0C2+DlvfkWwy5N+b347tSTbtWqBSEg==}
peerDependencies:
react: ^16.8.6 || ^17
dependencies:
prop-types: 15.8.1
react: 17.0.2
dev: false
/react-bootstrap/2.0.2_react-dom@17.0.2+react@17.0.2:
resolution: {integrity: sha512-QuMqJ+WJmd6dUyOys6OF3nr6T/FjUVAoEMbSjsFrwVufJtvMox0SU1Dvz/cDID+Dl6Rz2RLcJzyqkdl+DEK2Gg==}
peerDependencies: