diff --git a/client/app/app.tsx b/client/app/app.tsx index 657f933..7ca4ff1 100644 --- a/client/app/app.tsx +++ b/client/app/app.tsx @@ -2,7 +2,7 @@ import { Provider } from 'mobx-react'; import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; -import { Admin, Clips, Downloader, NotFound, Oauth, Soundboard, Stats, VideoArchive } from './pages'; +import { Admin, Clips, Downloader, NotFound, Oauth, Soundboard, Stats, UploadHistory, VideoArchive } from './pages'; import './scss/index.scss'; import { rootStoreInstance } from './stores'; import { Wrapper } from './wrapper'; @@ -14,6 +14,7 @@ const App: any = (): any => { + diff --git a/client/app/components/clip-player-control/clip-player-control.tsx b/client/app/components/clip-player-control/clip-player-control.tsx new file mode 100644 index 0000000..458cc08 --- /dev/null +++ b/client/app/components/clip-player-control/clip-player-control.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { SoundService } from '../../services'; + +interface IProps { + sound: SoundType; + type: 'sounds' | 'clips'; + showDiscordPlay?: boolean; +} + +interface IState {} + +export interface SoundType { + extension: string; + name: string; +} + +export class ClipPlayerControl extends React.Component { + checkExtension(extension: string) { + switch (extension) { + case 'wav': + return true; + case 'mp3': + return true; + case 'mpeg': + return true; + default: + return false; + } + } + + handlePlayAudioInBrowser(sound: SoundType, type: string) { + const url = `/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension; + const audio = new Audio(url); + audio.play(); + } + + onPlayDiscord = (sound: SoundType) => { + SoundService.playSound(sound); + }; + + render() { + const { sound, showDiscordPlay, type } = this.props; + + return ( + this.checkExtension(sound.extension) && ( +