Added resolution badge

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 ?