prevent all audio clips from loading on ui - many other small fixes

.eslintrc.js

@@ -22,10 +22,6 @@ module.exports = {
             "error",
             4
         ],
-        "quotes": [
-            "error",
-            "single"
-        ],
         "semi": [
             "error",
             "always"

app/app.js

@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
 import Wrapper from './Wrapper';
+import Home from './pages/Home/Home';
 import Soundboard from './pages/Soundboard/Soundboard';
 import NotFound from './pages/NotFound/NotFound';
 
 ReactDOM.render(
     <Router history={browserHistory}>
         <Route path="/" component={Wrapper}>
-            <IndexRoute component={Soundboard}/>
+            <IndexRoute component={Home}/>
+            <Route path="/soundboard" component={Soundboard}/>
             <Route path="*" component={NotFound}/>
         </Route>
     </Router>

app/components/Navbar/Navbar.component.js

@@ -8,8 +8,9 @@ export default class Navbar extends React.Component {
     render() {
         return (
             <div className="Navbar">
-                <div className="Navbar__header">Sound<br/>Bot</div>
+                <div className="Navbar__header">Go Discord Bot</div>
-                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Soundboard</Link>
+                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
+                <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
             </div>
         );
     }

app/components/Navbar/Navbar.scss

@@ -33,8 +33,7 @@
     justify-content: center;
     text-align: center;
     color: $white;
-    transition: background-color 0.1s linear;
+    transition: background-color 0.1s linear, color 0.2s linear;
-    transition: color 0.1s linear;
     
     &:hover {
         background-color: $gray1; 

app/pages/Home/Home.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import './Home.scss';
+
+export default class Home extends React.Component {
+    render() {
+        return (
+            <div className="Home">
+                <div className="Card">
+                    <div className="Card__header">
+                        Go Discord Bot
+                    </div>
+                    <p>Drag and drop files to upload. Sounds can be played in discord by typing the commands on the next page.</p>
+                    <br/>
+                    <p>Gif command now supported! Example: !gif awesome cat gifs</p>
+                    <br/>
+                    <p>Check out the source code on 
+                        <a href="https://github.com/mgerb/GoBot" target="_blank"> GitHub 
+                            <i className="fa fa-github" aria-hidden="true"/>
+                        </a>
+                    </p>
+                </div>
+            </div>
+        );
+    }
+}

app/pages/Home/Home.scss

@@ -0,0 +1,3 @@
+.Home {
+    padding: 10px;
+}

app/pages/Soundboard/SoundList.component.js

@@ -9,6 +9,7 @@ export default class SoundList extends React.Component {
         super();
         this.state = {
             soundList: [],
+            showAudioControls: [],
         };
     }
     
@@ -18,15 +19,14 @@ export default class SoundList extends React.Component {
     
     getSoundList() {
         if (!this.soundListCache) {
-            axios.get("/soundlist")
+            axios.get("/soundlist").then((response) => {
-                .then((response) => {
+                this.soundListCache = response.data;
-                    this.soundListCache = response.data;
+                this.setState({
-                    this.setState({
+                    soundList: response.data,
-                        soundList: response.data,
-                    });
-                }).catch((error) => {
-                    console.warn(error.response.data);
                 });
+            }).catch(() => {
+                //console.warn(error.response.data);
+            });
         } else {
             this.setState({
                 soundList: this.soundListCache,
@@ -36,37 +36,48 @@ export default class SoundList extends React.Component {
     
     checkExtension(extension) {
         switch(extension) {
-            case "wav":
+        case "wav":
-                return true;
+            return true;
-            case "mp3":
+        case "mp3":
-                return true;
+            return true;
-            case "mpeg":
+        case "mpeg":
-                return true;
+            return true;
-            default:
+        default:
-                return false;
+            return false;
         }
     }
 
+    handleShowAudio(index) {
+        let temp = this.state.showAudioControls;
+        temp[index] = true;
+
+        this.setState({
+            showAudioControls: temp,
+        });
+    }
+    
     render() {
         return (
             <div className="Card">
                 <div className="Card__header">
                     Sounds
-                <i className="fa fa fa-volume-up" aria-hidden="true"></i>
+                <i className="fa fa fa-volume-up" aria-hidden="true"/>
                 </div>
                 
                 {this.state.soundList.length > 0 ? this.state.soundList.map((sound, index) => {
-                    return <div key={index} className="SoundList__item">
+                    return (
-                        <div>
+                        <div key={index} className="SoundList__item">
-                            {sound.prefix + sound.name}
+                            <div>
-                        </div>
+                                {sound.prefix + sound.name}
+                            </div>
                             
-                        {this.checkExtension(sound.extension) ?
+                            {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
-                        <audio controls src={"/sounds/" + sound.name + "." + sound.extension}
+                            <audio controls src={"/sounds/" + sound.name + "." + sound.extension}
-                                type={"audio/" + sound.extension}
+                                    type={"audio/" + sound.extension}
-                                style={{width: "100px"}}/>
+                                    style={{width: "100px"}}/>
-                        : null}
+                            : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
-                    </div>
+                        </div>
+                    );
                 }) : null}
             </div>
         );

app/pages/Soundboard/Soundboard.js

@@ -35,9 +35,9 @@ export default class Soundboard extends React.Component {
     }
     
     onDrop(acceptedFiles, rejectedFiles) {
-      if (acceptedFiles.length > 0) {
+        if (acceptedFiles.length > 0) {
-          self.uploadFile(acceptedFiles[0]);
+            self.uploadFile(acceptedFiles[0]);
-      }
+        }
     }
     
     uploadFile(file) {
@@ -47,7 +47,7 @@ export default class Soundboard extends React.Component {
         formData.append("password", this.state.password);
         
         axios.put("/upload", formData, this.config)
-            .then((response) => {
+            .then(() => {
                 this.setState({
                     password: "",
                     percentCompleted: 0,
@@ -77,18 +77,6 @@ export default class Soundboard extends React.Component {
         return (
             <div className="Soundboard">
                 <div className="column">
-                    <div className="Card">
-                        <div className="Card__header">
-                            Discord Sound Bot
-                        </div>
-                        <p>Drag and drop files to upload. The sounds can then be played in discord by typing the commands below.</p>
-                        <p>Check out the source code on 
-                            <a href="https://github.com/mgerb/GoBot" target="_blank"> GitHub 
-                                <i className="fa fa-github" aria-hidden="true"></i>
-                            </a>
-                        </p>
-                        <p>Follow the readme to set up your own bot!</p>
-                    </div>
                     <SoundList ref="SoundList"/>
                 </div>
             

app/scss/style.scss

@@ -2,10 +2,11 @@
     box-sizing: border-box;
 }
 
-a {
+a, .link {
     text-decoration: none;    
     color: $primaryBlue;
     transition: color 0.1s linear;
+    cursor: pointer;
     
     &:hover {
         color: darken(white, 10%);

server/webserver/server.go

@@ -1,11 +1,12 @@
 package webserver
 
 import (
+	"log"
+
 	"../config"
 	"./handlers"
 	"github.com/buaazp/fasthttprouter"
 	"github.com/valyala/fasthttp"
-	"log"
 )
 
 func logger(next fasthttp.RequestHandler) fasthttp.RequestHandler {
@@ -28,7 +29,7 @@ func registerRoutes(router *fasthttprouter.Router) {
 	router.PUT("/upload", handlers.FileUpload)
 
 	router.ServeFiles("/static/*filepath", "./static")
-	router.ServeFiles("/sounds/*filepath", "./sounds")
+	router.ServeFiles("/sounds/*filepath", config.Config.SoundsPath)
 
 	router.NotFound = func(ctx *fasthttp.RequestCtx) {
 		fasthttp.ServeFile(ctx, "./index.html")