play sounds from web ui - store uploaded sounds in database

client/app/pages/soundboard/soundboard.tsx

@@ -1,9 +1,14 @@
+import { inject, observer } from 'mobx-react';
 import React from 'react';
 import { SoundList, SoundType, Uploader } from '../../components';
-import { axios } from '../../services';
+import { Permissions } from '../../model';
+import { axios, SoundService } from '../../services';
+import { AppStore } from '../../stores';
 import './soundboard.scss';
 
-interface Props {}
+interface Props {
+  appStore?: AppStore;
+}
 
 interface State {
   percentCompleted: number;
@@ -12,6 +17,8 @@ interface State {
   soundList: SoundType[];
 }
 
+@inject('appStore')
+@observer
 export class Soundboard extends React.Component<Props, State> {
   private soundListCache: any;
 
@@ -54,12 +61,22 @@ export class Soundboard extends React.Component<Props, State> {
     this.getSoundList();
   };
 
+  onPlayDiscord = (sound: SoundType) => {
+    SoundService.playSound(sound);
+  };
+
   render() {
     const { soundList } = this.state;
+    const { appStore } = this.props;
     return (
       <div className="content">
         <Uploader onComplete={this.onUploadComplete} />
-        <SoundList soundList={soundList} type="Sounds" />
+        <SoundList
+          soundList={soundList}
+          type="Sounds"
+          onPlayDiscord={this.onPlayDiscord}
+          showDiscordPlay={appStore!.claims && appStore!.claims!.permissions >= Permissions.Mod}
+        />
       </div>
     );
   }