added youtube downloader

client/app/app.js

@@ -6,12 +6,14 @@ import Wrapper from './Wrapper';
 import Home from './pages/Home/Home';
 import Soundboard from './pages/Soundboard/Soundboard';
 import NotFound from './pages/NotFound/NotFound';
+import Downloader from './pages/Downloader/Downloader';
 
 ReactDOM.render(
     <Router history={browserHistory}>
         <Route path="/" component={Wrapper}>
             <IndexRoute component={Home}/>
             <Route path="/soundboard" component={Soundboard}/>
+            <Route path="/downloader" component={Downloader}/>
             <Route path="*" component={NotFound}/>
         </Route>
     </Router>

client/app/components/Navbar/Navbar.component.js

@@ -11,6 +11,7 @@ export default class Navbar extends React.Component {
                 <div className="Navbar__header">Go Discord Bot</div>
                 <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
                 <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
+                <Link to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">Youtube Downloader</Link>
             </div>
         );
     }

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

client/app/scss/style.scss

@@ -9,7 +9,7 @@ a, .link {
     cursor: pointer;
     
     &:hover {
-        color: darken(white, 10%);
+        color: $white;
     }
 }
 
@@ -24,6 +24,37 @@ body {
     padding-left: $navbarWidth;
 }
 
+.input {
+    border-radius: 3px;
+    border: 1px solid $lightGray;
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 30px;
+    background: $gray5;
+    color: $white;
+}
+
+.button {
+    border: none;
+    border-radius: 3px;
+    color: $white;
+    background: $lightGray;
+    padding: 10px;
+    cursor: pointer;
+
+    &:hover {
+        background: lighten($lightGray, 5%);
+    }
+}
+
+.button--primary {
+    background: $primaryBlue;
+
+    &:hover {
+        background: lighten($primaryBlue, 2%);
+    }
+}
+
 .Card {
     background-color: $gray2;
     border-radius: 5px;
@@ -51,4 +82,4 @@ body {
     & + .column {
         margin-left: 10px;
     }
-}
+}

client/app/scss/variables.scss

@@ -3,7 +3,7 @@ $navbarWidth: 200px;
 
 // colors
 $primaryBlue: #7289da;
-$white: darken(white, 10%);
+$white: darken(white, 20%);
 
 $gray1: #2e3136;
 $gray2: #2a2d32;
@@ -11,3 +11,5 @@ $gray3: #23262a;
 $gray4: #2e3136;
 $gray5: #282b30;
 $gray6: #1e2124;
+
+$lightGray: lighten($gray1, 15%);