audio clips - client done

client/app/Wrapper.tsx

@@ -1,31 +1,20 @@
 import React from 'react';
-import { Navbar } from './components/Navbar/Navbar.component';
+import { Navbar } from './components/Navbar';
 
 //styling
 import './scss/index.scss';
 
-interface Props {
+export class Wrapper extends React.Component<any, any> {
+  constructor() {
+    super();
+  }
 
-}
-
-interface State {
-
-}
-
-export class Wrapper extends React.Component<Props, State> {
-
-    constructor() {
-        super();
-    }
-
-    render() {
-        return (
-            <div>
-                <Navbar/>
-                <div>
-                    {this.props.children}
-                </div>
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div>
+        <Navbar />
+        <div>{this.props.children}</div>
+      </div>
+    );
+  }
 }

client/app/app.tsx

@@ -8,6 +8,7 @@ import { Soundboard } from './pages/Soundboard/Soundboard';
 import { NotFound } from './pages/NotFound/NotFound';
 import { Downloader } from './pages/Downloader/Downloader';
 import { Pubg } from './pages/Pubg/Pubg';
+import { Clips } from './pages/Clips';
 
 ReactDOM.render(
     <Router history={browserHistory}>
@@ -16,6 +17,7 @@ ReactDOM.render(
             <Route path="/soundboard" component={Soundboard}/>
             <Route path="/downloader" component={Downloader}/>
             <Route path="/pubg" component={Pubg}/>
+            <Route path="/clips" component={Clips}/>
             <Route path="*" component={NotFound}/>
         </Route>
     </Router>

client/app/components/Navbar/Navbar.tsx

@@ -21,6 +21,7 @@ export class Navbar extends React.Component<Props, State> {
                 <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>
                 <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link>
+                <Link to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">Clips</Link>
             </div>
         );
     }

client/app/components/Navbar/index.ts

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

client/app/components/SoundList/SoundList.tsx

@@ -1,54 +1,32 @@
 import React from 'react';
-import axios from 'axios';
 
 import './SoundList.scss';
 
 interface Props {
-
+    soundList: SoundType[];
+    type: string;
 }
 
 interface State {
     showAudioControls: boolean[];
-    soundList: {
-        extension: string;
-        name: string;
-        prefix: string;
-    }[];
+}
+
+export interface SoundType {
+    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":
@@ -72,26 +50,27 @@ export class SoundList extends React.Component<Props, State> {
     }
     
     render() {
+
+        const { soundList, type } = this.props;
+
         return (
             <div className="Card">
                 <div className="Card__header" style={{display:'flex'}}>
                     <div>
-                        Sounds
+                        <span>{type}</span>
                         <i className="fa fa fa-volume-up" aria-hidden="true"/>
                     </div>
                     <div style={{flex:1}}/>
-                    <div>({this.state.soundList.length})</div>
+                    <div>({soundList.length})</div>
                 </div>
                 
-                {this.state.soundList.length > 0 ? this.state.soundList.map((sound, index) => {
+                {soundList.length > 0 ? soundList.map((sound: SoundType, index: number) => {
                     return (
                         <div key={index} className="SoundList__item">
-                            <div>
-                                {sound.prefix + sound.name}
-                            </div>
+                            <div>{(sound.prefix || '') + sound.name}</div>
                             
                             {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
-                            <audio controls src={"/public/sounds/" + sound.name + "." + sound.extension}
+                            <audio controls src={`/public/${type.toLowerCase()}/` + sound.name + "." + sound.extension}
                                     itemType={"audio/" + sound.extension}
                                     style={{width: "100px"}}/>
                             : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }

client/app/components/SoundList/index.ts

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

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/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">