From 72ba1e56219b91ee704259fad697c6a4487c1087 Mon Sep 17 00:00:00 2001 From: Mitchell Date: Sat, 24 Aug 2019 11:12:58 -0500 Subject: [PATCH] feat: add player controls to uploaded clips on stats page --- .../clip-player-control.tsx | 74 +++++++++++++++ .../app/components/sound-list/sound-list.tsx | 41 +-------- .../upload-history/upload-history.tsx | 13 ++- client/app/pages/clips/clips.tsx | 2 +- client/app/pages/soundboard/soundboard.tsx | 5 +- client/app/pages/stats/stats.tsx | 4 +- client/app/stores/app.store.ts | 6 +- client/package-lock.json | 24 ++--- client/package.json | 8 +- server/Gopkg.lock | 92 +++++++++++++++++-- server/bothandlers/sounds.go | 2 +- 11 files changed, 201 insertions(+), 70 deletions(-) create mode 100644 client/app/components/clip-player-control/clip-player-control.tsx 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) && ( +
+