feat: add player controls to uploaded clips on stats page

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<IProps, IState> {
+  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) && (
+        <div className="flex flex--v-center">
+          <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 && (
+            <i
+              title="Play in discord"
+              className="fa fa-play-circle link fa-lg"
+              aria-hidden="true"
+              style={{ paddingLeft: '10px' }}
+              onClick={() => this.onPlayDiscord(sound)}
+            />
+          )}
+        </div>
+      )
+    );
+  }
+}

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import { ClipPlayerControl } from '../clip-player-control/clip-player-control';
 import './sound-list.scss';
 
 interface Props {
   soundList: SoundType[];
-  type: string;
+  type: 'sounds' | 'clips';
   onPlayDiscord?: (sound: SoundType) => void;
   showDiscordPlay?: boolean;
 }
@@ -46,7 +47,7 @@ export class SoundList extends React.Component<Props, State> {
   }
 
   render() {
-    const { onPlayDiscord, showDiscordPlay, soundList, type } = this.props;
+    const { showDiscordPlay, soundList, type } = this.props;
 
     return (
       <div className="card">
@@ -65,41 +66,7 @@ export class SoundList extends React.Component<Props, State> {
                 <div key={index} className="sound-list__item">
                   <div className="text-wrap">{(sound.prefix || '') + sound.name}</div>
 
-                  {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ? (
-                    <audio
-                      controls
-                      src={`/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension}
-                      itemType={'audio/' + sound.extension}
-                      style={{ width: '100px' }}
-                    />
-                  ) : (
-                    <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>
-                  )}
+                  <ClipPlayerControl showDiscordPlay={showDiscordPlay} sound={sound} type={type} />
                 </div>
               );
             })

client/app/components/upload-history/upload-history.tsx

@@ -2,12 +2,14 @@ import * as _ from 'lodash';
 import { DateTime } from 'luxon';
 import React from 'react';
 import { ISound } from '../../model';
+import { ClipPlayerControl } from '../clip-player-control/clip-player-control';
 
 interface IProps {
   sounds: ISound[];
+  showDiscordPlay?: boolean;
 }
 
-export const UploadHistory = ({ sounds }: IProps) => {
+export const UploadHistory = ({ sounds, showDiscordPlay }: IProps) => {
   const sortedSounds = _.orderBy(sounds, 'created_at', 'desc');
   return (
     <div className="card">
@@ -15,7 +17,7 @@ export const UploadHistory = ({ sounds }: IProps) => {
       <table className="table">
         <thead>
           <tr>
-            <th>Date</th>
+            <th className="hide-tiny">Date</th>
             <th>Sound</th>
             <th className="hide-tiny">Ext</th>
             <th>Username</th>
@@ -27,7 +29,9 @@ export const UploadHistory = ({ sounds }: IProps) => {
             const formattedDate = DateTime.fromISO(s.created_at).toLocaleString();
             return (
               <tr key={i}>
-                <td title={formattedDate}>{formattedDate}</td>
+                <td className="hide-tiny" title={formattedDate}>
+                  {formattedDate}
+                </td>
                 <td title={s.name}>{s.name}</td>
                 <td className="hide-tiny" title={s.extension}>
                   {s.extension}
@@ -36,6 +40,9 @@ export const UploadHistory = ({ sounds }: IProps) => {
                 <td className="hide-tiny" title={s.user.email}>
                   {s.user.email}
                 </td>
+                <td>
+                  <ClipPlayerControl showDiscordPlay={showDiscordPlay} sound={s} type="sounds"></ClipPlayerControl>
+                </td>
               </tr>
             );
           })}