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

Added resolution badge

Browse Source
This commit is contained in:
marcobaobao
2022-02-04 12:47:03 +01:00
parent 02c14e8acb
commit fede4df965
5 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -16,11 +16,11 @@ Refactoring and JSDoc.
04/01/22: Background jobs now are retrieved!! It's still rudimentary but it leverages on yt-dlp resume feature
```
<img src="https://i.ibb.co/7VBK1PY/1.png">
<img src="https://i.ibb.co/tcq3mtq/Screenshot-20220204-122644.png">
## Now with dark mode
<img src="https://i.ibb.co/h8S5vKg/2.png">
<img src="https://i.ibb.co/1qd2RMs/Screenshot-20220204-122713.png">
## Settings
@@ -48,15 +48,14 @@ docker run -d -p 3022:3022 -v <your dir>:/usr/src/yt-dlp-webui/downloads yt-dlp-
## Manual installation
```
npm i
npm run build
npm run fetch
npm run build-all
// edit the settings.json specifying the download path or
// it will default to the following created folder
mkdir downloads
node server.js
node dist/main.js
```

3
frontend/src/App.tsx
View File

@@ -294,6 +294,7 @@ export function App() {
formattedLog={message[1]}
title={downloadInfoMap.get(message[0])?.title}
thumbnail={downloadInfoMap.get(message[0])?.thumbnail}
resolution={downloadInfoMap.get(message[0])?.resolution}
progress={progressMap.get(message[0])} />
<Row>
<Col>
@@ -321,8 +322,6 @@ export function App() {
<div className="my-4">
<span className="settings" onClick={() => setShowSettings(!showSettings)}>
{i18n.t('settingsAnchor')}
{' '}
<GearFill></GearFill>
</span>
{' '}

17
frontend/src/components/StackableResult.tsx
View File

@@ -4,15 +4,27 @@ import {
Col,
ProgressBar
} from "react-bootstrap";
import { Badge4kFill, Badge8kFill, BadgeHdFill } from "react-bootstrap-icons";
type Props = {
formattedLog: string,
title: string,
thumbnail: string,
resolution: string
progress: number,
}
export function StackableResult({ formattedLog, title, thumbnail, progress }: Props) {
export function StackableResult({ formattedLog, title, thumbnail, resolution, progress }: Props) {
const guessResolution = (xByY: string): JSX.Element => {
if (!xByY) return null;
if (xByY.includes('4320')) return (<Badge8kFill></Badge8kFill>);
if (xByY.includes('2160')) return (<Badge4kFill></Badge4kFill>);
if (xByY.includes('1080')) return (<BadgeHdFill></BadgeHdFill>);
if (xByY.includes('720')) return (<BadgeHdFill></BadgeHdFill>);
return null;
}
return (
<Fragment>
<div className="mt-2 status-box">
@@ -27,6 +39,9 @@ export function StackableResult({ formattedLog, title, thumbnail, progress }: Pr
<br />
<img className="img-fluid rounded" src={thumbnail ? thumbnail : ''} />
</Col>
<div className="float-end">
{guessResolution(resolution)}
</div>
</Row>
</div>
{progress ?

14
package.json
View File

@@ -18,12 +18,6 @@
"license": "ISC",
"dependencies": {
"@koa/cors": "^3.1.0",
"@types/better-sqlite3": "^7.4.2",
"@types/koa": "^2.13.4",
"@types/koa-static": "^4.0.2",
"@types/koa__cors": "^3.1.1",
"@types/node": "^17.0.13",
"@types/uuid": "^8.3.4",
"better-sqlite3": "^7.4.5",
"chart.js": "^3.6.0",
"koa": "^2.13.4",
@@ -43,6 +37,12 @@
"devDependencies": {
"@parcel/transformer-yaml": "^2.2.1",
"parcel": "^2.0.1",
"typescript": "^4.5.2"
"typescript": "^4.5.2",
"@types/better-sqlite3": "^7.4.2",
"@types/koa": "^2.13.4",
"@types/koa-static": "^4.0.2",
"@types/koa__cors": "^3.1.1",
"@types/node": "^17.0.13",
"@types/uuid": "^8.3.4"
}
}

54
pnpm-lock.yaml generated
View File

@@ -29,12 +29,6 @@ specifiers:
dependencies:
'@koa/cors': 3.1.0
'@types/better-sqlite3': 7.4.2
'@types/koa': 2.13.4
'@types/koa-static': 4.0.2
'@types/koa__cors': 3.1.1
'@types/node': 17.0.13
'@types/uuid': 8.3.4
better-sqlite3: 7.5.0
chart.js: 3.7.0
koa: 2.13.4
@@ -53,6 +47,12 @@ dependencies:
devDependencies:
'@parcel/transformer-yaml': 2.2.1
'@types/better-sqlite3': 7.4.2
'@types/koa': 2.13.4
'@types/koa-static': 4.0.2
'@types/koa__cors': 3.1.1
'@types/node': 17.0.13
'@types/uuid': 8.3.4
parcel: 2.2.1
typescript: 4.5.5
@@ -1192,20 +1192,20 @@ packages:
resolution: {integrity: sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==}
dependencies:
'@types/node': 17.0.13
dev: false
dev: true
/@types/better-sqlite3/7.4.2:
resolution: {integrity: sha512-HUXWMOmRgOrXJ0SKt6kxqUaZtGkr0HCuaEt/76LojT6bkTu0lb0uhr3K1su9T09mskDKyQwNMvT7WithFN10PQ==}
dependencies:
'@types/node': 17.0.13
dev: false
dev: true
/@types/body-parser/1.19.2:
resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
dependencies:
'@types/connect': 3.4.35
'@types/node': 17.0.13
dev: false
dev: true
/@types/component-emitter/1.2.11:
resolution: {integrity: sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==}
@@ -1215,11 +1215,11 @@ packages:
resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
dependencies:
'@types/node': 17.0.13
dev: false
dev: true
/@types/content-disposition/0.5.4:
resolution: {integrity: sha512-0mPF08jn9zYI0n0Q/Pnz7C4kThdSt+6LD4amsrYDDpgBfrVWa3TcCOxKX1zkGgYniGagRv8heN2cbh+CAn+uuQ==}
dev: false
dev: true
/@types/cookie/0.4.1:
resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
@@ -1232,7 +1232,7 @@ packages:
'@types/express': 4.17.13
'@types/keygrip': 1.0.2
'@types/node': 17.0.13
dev: false
dev: true
/@types/cors/2.8.12:
resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==}
@@ -1244,7 +1244,7 @@ packages:
'@types/node': 17.0.13
'@types/qs': 6.9.7
'@types/range-parser': 1.2.4
dev: false
dev: true
/@types/express/4.17.13:
resolution: {integrity: sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==}
@@ -1253,15 +1253,15 @@ packages:
'@types/express-serve-static-core': 4.17.28
'@types/qs': 6.9.7
'@types/serve-static': 1.13.10
dev: false
dev: true
/@types/http-assert/1.5.3:
resolution: {integrity: sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA==}
dev: false
dev: true
/@types/http-errors/1.8.2:
resolution: {integrity: sha512-EqX+YQxINb+MeXaIqYDASb6U6FCHbWjkj4a1CKDBks3d/QiB2+PqBLyO72vLDgAO1wUI4O+9gweRcQK11bTL/w==}
dev: false
dev: true
/@types/http-proxy/1.17.8:
resolution: {integrity: sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==}
@@ -1275,26 +1275,26 @@ packages:
/@types/keygrip/1.0.2:
resolution: {integrity: sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==}
dev: false
dev: true
/@types/koa-compose/3.2.5:
resolution: {integrity: sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==}
dependencies:
'@types/koa': 2.13.4
dev: false
dev: true
/@types/koa-send/4.1.3:
resolution: {integrity: sha512-daaTqPZlgjIJycSTNjKpHYuKhXYP30atFc1pBcy6HHqB9+vcymDgYTguPdx9tO4HMOqNyz6bz/zqpxt5eLR+VA==}
dependencies:
'@types/koa': 2.13.4
dev: false
dev: true
/@types/koa-static/4.0.2:
resolution: {integrity: sha512-ns/zHg+K6XVPMuohjpOlpkR1WLa4VJ9czgUP9bxkCDn0JZBtUWbD/wKDZzPGDclkQK1bpAEScufCHOy8cbfL0w==}
dependencies:
'@types/koa': 2.13.4
'@types/koa-send': 4.1.3
dev: false
dev: true
/@types/koa/2.13.4:
resolution: {integrity: sha512-dfHYMfU+z/vKtQB7NUrthdAEiSvnLebvBjwHtfFmpZmB7em2N3WVQdHgnFq+xvyVgxW5jKDmjWfLD3lw4g4uTw==}
@@ -1307,17 +1307,17 @@ packages:
'@types/keygrip': 1.0.2
'@types/koa-compose': 3.2.5
'@types/node': 17.0.13
dev: false
dev: true
/@types/koa__cors/3.1.1:
resolution: {integrity: sha512-O7MBkCocnLrpEvkMrYAp17arUDS+KuS5bXMG/Z4aPSbrO7vrYB6YrqcsTD3Dp2OnAL3j4WME2k/x2kOcyzwNUw==}
dependencies:
'@types/koa': 2.13.4
dev: false
dev: true
/@types/mime/1.3.2:
resolution: {integrity: sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==}
dev: false
dev: true
/@types/node/17.0.13:
resolution: {integrity: sha512-Y86MAxASe25hNzlDbsviXl8jQHb0RDvKt4c40ZJQ1Don0AAL0STLZSs4N+6gLEO55pedy7r2cLwS+ZDxPm/2Bw==}
@@ -1332,11 +1332,11 @@ packages:
/@types/qs/6.9.7:
resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
dev: false
dev: true
/@types/range-parser/1.2.4:
resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
dev: false
dev: true
/@types/react-transition-group/4.4.4:
resolution: {integrity: sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==}
@@ -1361,11 +1361,11 @@ packages:
dependencies:
'@types/mime': 1.3.2
'@types/node': 17.0.13
dev: false
dev: true
/@types/uuid/8.3.4:
resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
dev: false
dev: true
/@types/warning/3.0.0:
resolution: {integrity: sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=}