1
0
mirror of https://github.com/mgerb/go-discord-bot synced 2026-01-11 17:42:48 +00:00

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

This commit is contained in:
2017-04-07 22:35:53 -05:00
parent e6c492a5eb
commit 2811d3cc1e
10 changed files with 83 additions and 55 deletions

26
app/pages/Home/Home.js Normal file
View File

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

3
app/pages/Home/Home.scss Normal file
View File

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

View File

@@ -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")
.then((response) => {
this.soundListCache = response.data;
this.setState({
soundList: response.data,
});
}).catch((error) => {
console.warn(error.response.data);
axios.get("/soundlist").then((response) => {
this.soundListCache = response.data;
this.setState({
soundList: 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":
return true;
case "mp3":
return true;
case "mpeg":
return true;
default:
return false;
case "wav":
return true;
case "mp3":
return true;
case "mpeg":
return true;
default:
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">
<div>
{sound.prefix + sound.name}
return (
<div key={index} className="SoundList__item">
<div>
{sound.prefix + sound.name}
</div>
{this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
<audio controls src={"/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)}/> }
</div>
{this.checkExtension(sound.extension) ?
<audio controls src={"/sounds/" + sound.name + "." + sound.extension}
type={"audio/" + sound.extension}
style={{width: "100px"}}/>
: null}
</div>
);
}) : null}
</div>
);

View File

@@ -35,9 +35,9 @@ export default class Soundboard extends React.Component {
}
onDrop(acceptedFiles, rejectedFiles) {
if (acceptedFiles.length > 0) {
self.uploadFile(acceptedFiles[0]);
}
if (acceptedFiles.length > 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>