Merge pull request #6 from mgerb/mitchell

Mitchell

app/Wrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Navbar from './components/Navbar/Navbar';
+import Navbar from './components/Navbar/Navbar.component';
 
 //styling
 import './scss/index.scss';

app/pages/Soundboard/SoundList.component.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import axios from 'axios';
+
+import './SoundList.scss';
+
+let soundListCache;
+
+export default class SoundList extends React.Component {
+    
+    constructor() {
+        super();
+        this.state = {
+            soundList: [],
+        };
+    }
+    
+    componentDidMount() {
+        this.getSoundList();
+    }
+    
+    getSoundList() {
+        if (!soundListCache) {
+            axios.get("/soundlist")
+                .then((response) => {
+                    soundListCache = response.data;
+                    this.setState({
+                        soundList: response.data,
+                    });
+                }).catch((error) => {
+                    console.warn(error.response.data);
+                });
+        } else {
+            this.setState({
+                soundList: soundListCache,
+            });
+        }
+    }
+    
+    checkExtension(extension) {
+        console.log(extension);
+        switch(extension) {
+            case "wav":
+                return true;
+            case "wav":
+                return true;
+            case "wav":
+                return true;
+            default:
+                console.log("not working");
+                return false;
+        }
+    }
+    
+    render() {
+        return (
+            <div className="Card">
+                <div className="Card__header">
+                    Sounds
+                <i className="fa fa fa-volume-up" aria-hidden="true"></i>
+                </div>
+                
+                {this.state.soundList.length > 0 ? this.state.soundList.map((sound, index) => {
+                    return <div key={index} className="SoundList__item">
+                        <div>
+                            {sound.prefix + sound.name}
+                        </div>
+                        
+                        {this.checkExtension(sound.extension) ?
+                        <audio controls src={"/sounds/" + sound.name + "." + sound.extension}
+                                type={"audio/" + sound.extension}
+                                style={{width: "100px"}}/>
+                        : null}
+                    </div>
+                }) : null}
+            </div>
+        );
+    }
+}

app/pages/Soundboard/SoundList.scss

@@ -0,0 +1,12 @@
+@import "../../scss/variables";
+
+.SoundList__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    
+    & + .SoundList__item {
+        border-top: 1px solid $gray3;
+    }
+}

app/pages/Soundboard/Soundboard.js

@@ -2,6 +2,8 @@ import React from 'react';
 import Dropzone from 'react-dropzone';
 import axios from 'axios';
 
+import SoundList from './SoundList.component';
+
 import './Soundboard.scss';
 
 let self;
@@ -11,9 +13,10 @@ export default class Soundboard extends React.Component {
     constructor() {
         super();
         this.state = {
-            uploaded: false,
             percentCompleted: 0,
             password: "",
+            uploaded: false,
+            uploadError: " ",
         }
         self = this;
     }
@@ -49,14 +52,13 @@ export default class Soundboard extends React.Component {
                     password: "",
                     percentCompleted: 0,
                     uploaded: true,
-                    uploadError: undefined,
+                    uploadError: " ",
                 });
             }).catch((err) => {
                 this.setState({
-                    password: "",
                     percentCompleted: 0,
                     uploaded: false,
-                    uploadError: "Upload error.",
+                    uploadError: err.response.data,
                 });
             });
     }
@@ -70,25 +72,33 @@ export default class Soundboard extends React.Component {
     render() {
         return (
             <div className="Soundboard">
+                <div className="column">
+                    <SoundList/>
+                </div>
             
-            <input className="Soundboard__input"
-                    type="password"
-                    placeholder="Password"
-                    value={this.state.password}
-                    onChange={this.passwordOnChange.bind(this)}></input>
-            <div>
-                <Dropzone className="Dropzone"
-                        activeClassName="Dropzone--active"
-                        onDrop={this.onDrop}
-                        multiple={false}
-                        accept={"audio/*"}>
-                        
-                    <div>Drop file here to upload.</div>
-                    {this.state.percentCompleted > 0 ? <div>Progress: {this.state.percentCompleted}</div> : ""}
-                    {this.state.uploaded ? <div>File uploded!</div> : ""}
-                    {this.state.uploadError ? <div>{this.state.uploadError}</div> : ""}
-                </Dropzone>
-            </div>
+                <div className="column">
+                    <div>
+                        <Dropzone className="Dropzone"
+                                activeClassName="Dropzone--active"
+                                onDrop={this.onDrop}
+                                multiple={false}
+                                disableClick={true}
+                                maxSize={10000000000}
+                                accept={"audio/*"}>
+                                
+                            <input className="Soundboard__input"
+                                    type="password"
+                                    placeholder="Password"
+                                    value={this.state.password}
+                                    onChange={this.passwordOnChange.bind(this)}/>
+                                
+                            <div style={{fontSize: "20px"}}>Drop file here to upload.</div>
+                            {this.state.percentCompleted > 0 ? <div>Uploading: {this.state.percentCompleted}</div> : ""}
+                            {this.state.uploaded ? <div style={{color: 'green'}}>File uploded!</div> : ""}
+                            <div style={{color: '#f95f59'}}>{this.state.uploadError}</div>
+                        </Dropzone>
+                    </div>
+                </div>
             </div>
         )
     }

app/pages/Soundboard/Soundboard.scss

@@ -2,16 +2,21 @@
 
 .Soundboard {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+    padding: 10px;
+}
+
+.Soundboard__column {
+    flex: 1;    
 }
 
 .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;
@@ -22,16 +27,19 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border: 2px solid lighten($gray1, 10%);
-    padding: 20px;
-    color: lighten($gray1, 15%);
+    border: 2px solid $primaryBlue;
     border-radius: 1em;
-    width: 300px;
-    height: 300px;
+    padding: 20px;
+    margin-right: auto;
+    margin-left: auto;
+    color: lighten($gray1, 15%);
+    width: 400px;
+    height: 400px;
     background-color: $gray2;
-    transition: background-color 0.1s linear;
+    transition: box-shadow 0.1s linear, background-color 0.1s linear;
 }
 
 .Dropzone--active {
-    background-color: $primaryBlue;
+    background-color: $gray3;
+    box-shadow: 0px 0px 5px 1px $primaryBlue;
 }

app/scss/style.scss

@@ -26,7 +26,9 @@ body {
 .Card {
     background-color: $gray2;
     border-radius: 5px;
+    max-width: 800px;
     padding: 10px;
+    border: 1px solid $gray3;
 }
 
 .Card__header {
@@ -39,4 +41,12 @@ body {
     border-radius: 5px 5px 0 0;
     font-size: 25px;
     background-color: $gray3;
+}
+
+.column {
+    flex: 1;
+    
+    & + .column {
+        margin-left: 10px;
+    }
 }

app/scss/variables.scss

@@ -7,7 +7,7 @@ $white: darken(white, 10%);
 
 $gray1: #2e3136;
 $gray2: #2a2d32;
-$gray3: #282b30;
+$gray3: #23262a;
 $gray4: #2e3136;
 $gray5: #282b30;
 $gray6: #1e2124;

makefile

@@ -16,4 +16,4 @@ clean:
 copyfiles:
 	cp config.template.json ./dist/config.template.json
 
-all: linux mac windows copyfiles
+all: linux copyfiles

server/bothandlers/sounds.go

@@ -1,4 +1,4 @@
-package handlers
+package bothandlers
 
 import (
 	"../config"

server/main.go

@@ -2,8 +2,8 @@ package main
 
 import (
 	"./bot"
+	"./bothandlers"
 	"./config"
-	"./handlers"
 	"./webserver"
 )
 
@@ -15,7 +15,7 @@ func main() {
 	bot.Connect(config.Config.Token)
 
 	//add handlers
-	bot.AddHandler(handlers.SoundsHandler)
+	bot.AddHandler(bothandlers.SoundsHandler)
 
 	// start new go routine for the discord websockets
 	go bot.Start()

server/webserver/handlers/soundlist.go

@@ -0,0 +1,66 @@
+package handlers
+
+import (
+	"../../config"
+	"encoding/json"
+	"fmt"
+	"github.com/valyala/fasthttp"
+	"io/ioutil"
+	"strings"
+)
+
+var soundList []sound
+
+type sound struct {
+	Prefix    string `json:"prefix"`
+	Name      string `json:"name"`
+	Extension string `json:"extension"`
+}
+
+func SoundList(ctx *fasthttp.RequestCtx) {
+
+	if len(soundList) < 1 {
+		err := PopulateSoundList()
+		if err != nil {
+			ctx.Error(err.Error(), 400)
+			return
+		}
+	}
+
+	response, err := json.Marshal(soundList)
+
+	if err != nil {
+		ctx.Error("Error marshaling json", 400)
+		return
+	}
+
+	ctx.SetContentType("application/json")
+	ctx.Write(response)
+}
+
+func PopulateSoundList() error {
+	fmt.Println("Populating sound list.")
+
+	soundList = []sound{}
+
+	files, err := ioutil.ReadDir(config.Config.SoundsPath)
+
+	if err != nil {
+		return err
+	}
+
+	for _, f := range files {
+		fileName := strings.Split(f.Name(), ".")[0]
+		extension := strings.Split(f.Name(), ".")[1]
+
+		listItem := sound{
+			Name:      fileName,
+			Extension: extension,
+			Prefix:    config.Config.BotPrefix,
+		}
+
+		soundList = append(soundList, listItem)
+	}
+
+	return nil
+}

server/webserver/handlers/upload.go

@@ -0,0 +1,65 @@
+package handlers
+
+import (
+	"../../config"
+	"github.com/valyala/fasthttp"
+	"io"
+	"os"
+)
+
+func FileUpload(ctx *fasthttp.RequestCtx) {
+	password := ctx.FormValue("password")
+
+	if string(password) != config.Config.UploadPassword {
+		ctx.Error("Invalid password.", 400)
+		return
+	}
+
+	file, err := ctx.FormFile("file")
+	if err != nil {
+		ctx.Error("Error reading file.", 400)
+		return
+	}
+
+	src, err := file.Open()
+	if err != nil {
+		ctx.Error("Error opening file.", 400)
+		return
+	}
+
+	defer src.Close()
+
+	// create uploads folder if it does not exist
+	if _, err := os.Stat(config.Config.SoundsPath); os.IsNotExist(err) {
+		os.Mkdir(config.Config.SoundsPath, os.ModePerm)
+	}
+
+	// check if file already exists
+	if _, err := os.Stat(config.Config.SoundsPath + file.Filename); err == nil {
+		ctx.Error("File already exists.", 400)
+		return
+	}
+
+	dst, err := os.Create(config.Config.SoundsPath + file.Filename)
+	if err != nil {
+		ctx.Error("Error creating file.", 400)
+		return
+	}
+
+	defer dst.Close()
+
+	if _, err = io.Copy(dst, src); err != nil {
+		ctx.Error("Error writing file.", 400)
+		return
+	}
+
+	// repopulate sound list
+	err = PopulateSoundList()
+
+	if err != nil {
+		ctx.Error("File uploaded, but error populating sound list.", 400)
+		return
+	}
+
+	ctx.Success("application/json", []byte("Success!"))
+}

server/webserver/server.go

@@ -2,11 +2,10 @@ package webserver
 
 import (
 	"../config"
+	"./handlers"
 	"github.com/buaazp/fasthttprouter"
 	"github.com/valyala/fasthttp"
-	"io"
 	"log"
-	"os"
 )
 
 func logger(next fasthttp.RequestHandler) fasthttp.RequestHandler {
@@ -25,9 +24,11 @@ func applyMiddleware(handler fasthttp.RequestHandler) fasthttp.RequestHandler {
 
 func registerRoutes(router *fasthttprouter.Router) {
 
-	router.PUT("/upload", fileUpload)
+	router.GET("/soundlist", handlers.SoundList)
+	router.PUT("/upload", handlers.FileUpload)
 
 	router.ServeFiles("/static/*filepath", "./static")
+	router.ServeFiles("/sounds/*filepath", "./sounds")
 
 	router.NotFound = func(ctx *fasthttp.RequestCtx) {
 		fasthttp.ServeFile(ctx, "./index.html")
@@ -45,52 +46,3 @@ func Start() {
 	// start web server
 	log.Fatal(fasthttp.ListenAndServe(config.Config.ServerAddr, handlers))
 }
-
-func fileUpload(ctx *fasthttp.RequestCtx) {
-	password := ctx.FormValue("password")
-
-	if string(password) != config.Config.UploadPassword {
-		ctx.Error("Invalid password.", 400)
-		return
-	}
-
-	file, err := ctx.FormFile("file")
-	if err != nil {
-		ctx.Error("Error reading file.", 400)
-		return
-	}
-
-	src, err := file.Open()
-	if err != nil {
-		ctx.Error("Error opening file.", 400)
-		return
-	}
-
-	defer src.Close()
-
-	// create uploads folder if it does not exist
-	if _, err := os.Stat(config.Config.SoundsPath); os.IsNotExist(err) {
-		os.Mkdir(config.Config.SoundsPath, os.ModePerm)
-	}
-
-	// check if file already exists
-	if _, err := os.Stat(config.Config.SoundsPath + file.Filename); err == nil {
-		ctx.Error("File already exists.", 400)
-		return
-	}
-
-	dst, err := os.Create(config.Config.SoundsPath + file.Filename)
-	if err != nil {
-		ctx.Error("Error creating file.", 400)
-		return
-	}
-
-	defer dst.Close()
-
-	if _, err = io.Copy(dst, src); err != nil {
-		ctx.Error("Error writing file.", 400)
-		return
-	}
-
-	ctx.Success("application/json", []byte("Success!"))
-}