audio clips - client done

client/app/pages/Clips/Clips.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import axios from 'axios';
+
+import { SoundList, SoundType } from '../../components/SoundList';
+
+interface Props {}
+
+interface State {
+  clipList: SoundType[];
+}
+
+export class Clips extends React.Component<Props, State> {
+  constructor() {
+    super();
+    this.state = {
+      clipList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getClipList();
+  }
+
+  private getClipList() {
+    axios
+      .get('/api/cliplist')
+      .then(response => {
+        this.setState({
+          clipList: response.data,
+        });
+      })
+      .catch((error: any) => {
+        console.error(error.response.data);
+      });
+  }
+
+  render() {
+    return (
+      <div className="Soundboard">
+        <div className="column">
+          <SoundList soundList={this.state.clipList} type="Clips"/>
+        </div>
+      </div>
+    );
+  }
+}

client/app/pages/Clips/index.ts

@@ -0,0 +1 @@
+export * from './Clips';

client/app/pages/Downloader/Downloader.tsx

@@ -48,7 +48,7 @@ export class Downloader extends React.Component<Props, State> {
             dataLoading: true,
         });
 
-        axios.get(`/ytdownloader`, {
+        axios.get(`/api/ytdownloader`, {
             params: {
                 fileType: this.state.fileType,
                 url: this.state.url,
@@ -81,14 +81,6 @@ export class Downloader extends React.Component<Props, State> {
                             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'}}

client/app/pages/Home/Home.tsx

@@ -19,10 +19,26 @@ export class Home extends React.Component<Props, State> {
                     <div className="Card__header">
                         Go Discord Bot
                     </div>
+                    <h3>Audio Clipping</h3>
+                    <p><em>NEW:</em> Audio clipping now supported! Try it out with the <code>clip</code> command!</p>
+
+                    <br/>
+
+                    <h3>PUBG Stats</h3>
+                    <p>PUBG stats are pulled from the score API.</p>
+
+                    <br/>
+
+                    <h3>Youtube Downloader</h3>
+                    <p>Convert Youtube URL's to MP3 files.</p>
+
+                    <br/>
+
+                    <h3>Soundboard Upload</h3>
                     <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"/>

client/app/pages/Pubg/Pubg.tsx

@@ -35,7 +35,7 @@ export class Pubg extends React.Component<Props, State> {
     }
 
     componentDidMount() {
-        axios.get("/stats/pubg").then((res) => {
+        axios.get("/api/stats/pubg").then((res) => {
 
             this.setState({
                 players: _.map(res.data) as any,

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

@@ -1,104 +0,0 @@
-import React from 'react';
-import axios from 'axios';
-
-import './SoundList.scss';
-
-interface Props {
-
-}
-
-interface State {
-    showAudioControls: boolean[];
-    soundList: {
-        extension: string;
-        name: string;
-        prefix: string;
-    }[];
-}
-
-export class SoundList extends React.Component<Props, State> {
-    
-    private soundListCache: any;
-
-    constructor() {
-        super();
-        this.state = {
-            soundList: [],
-            showAudioControls: [],
-        };
-    }
-    
-    componentDidMount() {
-        this.getSoundList();
-    }
-    
-    getSoundList() {
-        if (!this.soundListCache) {
-            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,
-            });
-        }
-    }
-    
-    checkExtension(extension: string) {
-        switch(extension) {
-        case "wav":
-            return true;
-        case "mp3":
-            return true;
-        case "mpeg":
-            return true;
-        default:
-            return false;
-        }
-    }
-
-    handleShowAudio(index: any) {
-        let temp = this.state.showAudioControls;
-        temp[index] = true;
-
-        this.setState({
-            showAudioControls: temp,
-        });
-    }
-    
-    render() {
-        return (
-            <div className="Card">
-                <div className="Card__header" style={{display:'flex'}}>
-                    <div>
-                        Sounds
-                        <i className="fa fa fa-volume-up" aria-hidden="true"/>
-                    </div>
-                    <div style={{flex:1}}/>
-                    <div>({this.state.soundList.length})</div>
-                </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) && this.state.showAudioControls[index] ?
-                            <audio controls src={"/public/sounds/" + sound.name + "." + sound.extension}
-                                    itemType={"audio/" + sound.extension}
-                                    style={{width: "100px"}}/>
-                            : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
-                        </div>
-                    );
-                }) : null}
-            </div>
-        );
-    }
-}

client/app/pages/Soundboard/SoundList.scss

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

client/app/pages/Soundboard/Soundboard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Dropzone from 'react-dropzone';
 import axios, { AxiosRequestConfig } from 'axios';
 
-import { SoundList } from './SoundList.component';
+import { SoundList, SoundType } from '../../components/SoundList';
 
 import './Soundboard.scss';
 
@@ -17,12 +17,13 @@ interface State {
     password: string;
     uploaded: boolean;
     uploadError: string;
+    soundList: SoundType[];
 }
 
 export class Soundboard extends React.Component<Props, State> {
     
     private config: AxiosRequestConfig;
-    public refs: any;
+    private soundListCache: any;
 
     constructor() {
         super();
@@ -31,6 +32,7 @@ export class Soundboard extends React.Component<Props, State> {
             password: "",
             uploaded: false,
             uploadError: " ",
+            soundList: [],
         },
 
         self = this;
@@ -47,8 +49,27 @@ export class Soundboard extends React.Component<Props, State> {
                 });
             }
         };
+
+        this.getSoundList();
     }
     
+    private getSoundList() {
+        if (!this.soundListCache) {
+            axios.get("/api/soundlist").then((response) => {
+                this.soundListCache = response.data;
+                this.setState({
+                    soundList: response.data,
+                });
+            }).catch((error: any) => {
+                console.error(error.response.data);
+            });
+        } else {
+            this.setState({
+                soundList: this.soundListCache,
+            });
+        }
+    }
+
     onDrop(acceptedFiles: any) {
         if (acceptedFiles.length > 0) {
             self.uploadFile(acceptedFiles[0]);
@@ -61,7 +82,7 @@ export class Soundboard extends React.Component<Props, State> {
         formData.append("file", file);
         formData.append("password", this.state.password);
         
-        axios.put("/upload", formData, this.config)
+        axios.put("/api/upload", formData, this.config)
             .then(() => {
                 this.setState({
                     password: "",
@@ -70,9 +91,8 @@ export class Soundboard extends React.Component<Props, State> {
                     uploadError: " ",
                 });
                 
-                // reset sound list cache and load the new list
-                this.refs.SoundList.soundListCache = undefined;
-                this.refs.SoundList.getSoundList();
+                this.soundListCache = undefined;
+                this.getSoundList();
             }).catch((err) => {
                 this.setState({
                     percentCompleted: 0,
@@ -89,10 +109,11 @@ export class Soundboard extends React.Component<Props, State> {
     }
     
     render() {
+        const { soundList } = this.state;
         return (
             <div className="Soundboard">
                 <div className="column">
-                    <SoundList ref="SoundList"/>
+                    <SoundList soundList={soundList} type="Sounds"/>
                 </div>
             
                 <div className="column">