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>
+        );
+    }
+}

client/app/pages/Downloader/Downloader.scss

@@ -0,0 +1,16 @@
+.Downloader {
+    padding: 10px;
+}
+
+.Downloader__input {
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.Downloader__button {
+
+    & + & {
+        margin-left: 10px;
+    }
+}

client/app/pages/Soundboard/SoundList.component.js

@@ -76,7 +76,7 @@ export default class SoundList extends React.Component {
                             </div>
                             
                             {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
-                            <audio controls src={"/sounds/" + sound.name + "." + sound.extension}
+                            <audio controls src={"/public/sounds/" + sound.name + "." + sound.extension}
                                     type={"audio/" + sound.extension}
                                     style={{width: "100px"}}/>
                             : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }

client/app/pages/Soundboard/Soundboard.js

@@ -17,7 +17,8 @@ export default class Soundboard extends React.Component {
             password: "",
             uploaded: false,
             uploadError: " ",
-        }
+        },
+
         self = this;
     }
     
@@ -34,7 +35,7 @@ export default class Soundboard extends React.Component {
         };
     }
     
-    onDrop(acceptedFiles, rejectedFiles) {
+    onDrop(acceptedFiles) {
         if (acceptedFiles.length > 0) {
             self.uploadFile(acceptedFiles[0]);
         }
@@ -90,7 +91,7 @@ export default class Soundboard extends React.Component {
                                 maxSize={10000000000}
                                 accept={"audio/*"}>
                                 
-                            <input className="Soundboard__input"
+                            <input className="input Soundboard__input"
                                     type="password"
                                     placeholder="Password"
                                     value={this.state.password}
@@ -104,6 +105,6 @@ export default class Soundboard extends React.Component {
                     </div>
                 </div>
             </div>
-        )
+        );
     }
 }

client/app/pages/Soundboard/Soundboard.scss

@@ -12,14 +12,9 @@
 .Soundboard__input {
     display: block;
     width: 200px;
-    border-radius: 3px;
-    border: 1px solid lighten($gray1, 5%);
     margin-bottom: 10px;
     margin-right: auto;
     margin-left: auto;
-    padding-left: 5px;
-    padding-right: 5px;
-    height: 30px;
 }
 
 .Dropzone {
@@ -32,7 +27,7 @@
     padding: 20px;
     margin-right: auto;
     margin-left: auto;
-    color: lighten($gray1, 15%);
+    color: $lightGray;
     width: 400px;
     height: 400px;
     background-color: $gray2;
@@ -42,4 +37,4 @@
 .Dropzone--active {
     background-color: $gray3;
     box-shadow: 0px 0px 5px 1px $primaryBlue;
-}
+}