feat: add player controls to uploaded clips on stats page

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