Added resolution badge

README.md

@@ -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 build-all
-npm run fetch
 
 // 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
 ```
 
 

frontend/src/App.tsx

@@ -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>
                             {' '}

frontend/src/components/StackableResult.tsx

@@ -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 ?

package.json

@@ -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"
   }
 }

pnpm-lock.yaml

@@ -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=}