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..2452640 --- /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) && ( +
+