play sounds from web ui - store uploaded sounds in database

client/app/components/sound-list/sound-list.tsx

@@ -4,6 +4,8 @@ import './sound-list.scss';
 interface Props {
   soundList: SoundType[];
   type: string;
+  onPlayDiscord?: (sound: SoundType) => void;
+  showDiscordPlay?: boolean;
 }
 
 interface State {
@@ -37,17 +39,14 @@ export class SoundList extends React.Component<Props, State> {
     }
   }
 
-  handleShowAudio(index: any) {
-    let temp = this.state.showAudioControls;
-    temp[index] = true;
-
-    this.setState({
-      showAudioControls: temp,
-    });
+  handlePlayAudioInBrowser(sound: SoundType, type: string) {
+    const url = `/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension;
+    const audio = new Audio(url);
+    audio.play();
   }
 
   render() {
-    const { soundList, type } = this.props;
+    const { onPlayDiscord, showDiscordPlay, soundList, type } = this.props;
 
     return (
       <div className="card">
@@ -74,7 +73,32 @@ export class SoundList extends React.Component<Props, State> {
                       style={{ width: '100px' }}
                     />
                   ) : (
-                    <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)} />
+                    <div>
+                      <a
+                        href={`/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension}
+                        download
+                        title="Download"
+                        className="fa fa-download link"
+                        aria-hidden="true"
+                      />
+                      <i
+                        title="Play in browser"
+                        className="fa fa-play link"
+                        aria-hidden="true"
+                        style={{ paddingLeft: '15px' }}
+                        onClick={() => this.handlePlayAudioInBrowser(sound, type)}
+                      />
+                      {showDiscordPlay &&
+                        onPlayDiscord && (
+                          <i
+                            title="Play in discord"
+                            className="fa fa-play-circle link fa-lg"
+                            aria-hidden="true"
+                            style={{ paddingLeft: '10px' }}
+                            onClick={() => onPlayDiscord!(sound)}
+                          />
+                        )}
+                    </div>
                   )}
                 </div>
               );

client/app/components/uploader/uploader.tsx

@@ -46,7 +46,7 @@ export class Uploader extends React.Component<IProps, IState> {
     formData.append('file', file);
 
     axios
-      .post('/api/upload', formData, this.config)
+      .post('/api/sound', formData, this.config)
       .then(() => {
         this.setState({
           percentCompleted: 0,

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

client/app/services/index.ts

@@ -1,3 +1,4 @@
 export * from './axios.service';
 export * from './oauth.service';
+export * from './sound.service';
 export * from './storage.service';

client/app/services/sound.service.ts

@@ -0,0 +1,10 @@
+import { SoundType } from '../components/sound-list/sound-list';
+import { axios } from './axios.service';
+
+const playSound = (sound: SoundType): Promise<any> => {
+  return axios.post('/api/sound/play', { name: sound.name });
+};
+
+export const SoundService = {
+  playSound,
+};