added youtube downloader

client/app/pages/Downloader/Downloader.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import axios from 'axios';
+
+import './Downloader.scss';
+
+export default class Downloader extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            fileType: "mp3",
+            url: "",
+            message: "",
+            dataLoaded: false,
+            downloadLink: "",
+            downLoadFileName: "",
+            dataLoading: false,
+        };
+    }
+
+    sendRequest() {
+        if (this.state.url === "") {
+            this.setState({
+                message: "Invalid URL",
+            });
+
+            return;
+        }
+
+        this.setState({
+            message: "",
+            url: "",
+            dataLoaded: false,
+            dataLoading: true,
+        });
+
+        axios.get(`/ytdownloader`, {
+            params: {
+                fileType: this.state.fileType,
+                url: this.state.url,
+            }
+        }).then((res) => {
+            this.setState({
+                dataLoaded: true,
+                dataLoading: false,
+                downloadLink: `/public/youtube/${res.data.fileName}`,
+                downLoadFileName: res.data.fileName,
+            });
+        }).catch(() => {
+            this.setState({
+                message: "Internal error.",
+                dataLoading: false,
+            });
+        });
+    }
+
+    render() {
+        return (
+            <div className="Downloader">
+                <div className="card">
+                    <div className="card__header">
+                        Youtube to MP3
+                    </div>
+
+                    <input placeholder="Enter Youtube URL"
+                            className="input Downloader__input"
+                            value={this.state.url}
+                            onChange={(event) => this.setState({url: event.target.value})}/>
+
+                    {/*<div style={{marginBottom:'10px'}}>
+                        <button className={"button Downloader__button" + (this.state.fileType === "mp3" ? " button--primary" : "")}
+                            onClick={() => this.setState({fileType:"mp3"})}>mp3</button>
+                        <button className={"button Downloader__button" + (this.state.fileType=== "mp4" ? " button--primary" : "")}
+                            onClick={() => this.setState({fileType:"mp4"})}>mp4</button>
+                    </div>*/}
+
+                    
+                    <div style={{marginBottom:'10px'}}>
+                        <button className="button button--primary"
+                                style={{width: '100px', height: '40px', fontSize: 'large'}}
+                                onClick={this.sendRequest.bind(this)}>
+                            {this.state.dataLoading ? <i className="fa fa-spinner fa-spin fa-fw"/> : 'Convert'}
+                        </button>
+                    </div>
+
+                    {this.state.message !== "" && <div>{this.state.message}</div>}
+                    {this.state.dataLoaded && <a href={this.state.downloadLink} download>{this.state.downLoadFileName}</a>}
+                </div>
+
+            </div>
+        );
+    }
+}