Frontend refactor

frontend/src/components/StackableInput.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import {
-    InputGroup,
-    FormControl,
-    Button,
-    ProgressBar
-} from "react-bootstrap";
-
-export function StackableInput(props: any) {
-    return (
-        <React.Fragment>
-            <InputGroup className="mt-5">
-                <FormControl
-                    className="url-input"
-                    placeholder="YouTube or other supported service video url"
-                    onChange={props.handleUrlChange}
-                />
-            </InputGroup>
-
-            <div className="mt-2 status-box">
-                <h6>Status</h6>
-                <pre id='status'>{props.message}</pre>
-            </div>
-
-            {props.progress ?
-                <ProgressBar className="container-padding" now={props.progress} variant="danger" /> :
-                null
-            }
-
-            {/* <Button className="my-5" variant="danger" onClick={() => sendUrl()} disabled={props.halt}>Go!</Button>{' '} */}
-            {/* <Button variant="danger" active onClick={() => abort()}>Abort</Button>{' '} */}
-        </React.Fragment>
-    )
-}

frontend/src/components/StackableResult.tsx

@@ -0,0 +1,38 @@
+import { Fragment } from "react";
+import {
+    Row,
+    Col,
+    ProgressBar
+} from "react-bootstrap";
+
+type Props = {
+    formattedLog: string,
+    title: string,
+    thumbnail: string,
+    progress: number,
+}
+
+export function StackableResult({ formattedLog, title, thumbnail, progress }: Props) {
+    return (
+        <Fragment>
+            <div className="mt-2 status-box">
+                <Row>
+                    {title ? <p>{title}</p> : null}
+                    <Col sm={9}>
+                        <h6>Status</h6>
+                        {!formattedLog ? <pre>Ready</pre> : null}
+                        <pre id='status'>{formattedLog}</pre>
+                    </Col>
+                    <Col sm={3}>
+                        <br />
+                        <img className="img-fluid rounded" src={thumbnail ? thumbnail : ''} />
+                    </Col>
+                </Row>
+            </div>
+            {progress ?
+                <ProgressBar className="container-padding mt-2" now={progress} variant="primary" /> :
+                null
+            }
+        </Fragment>
+    )
+}