decent nice player poc on the bottom

components/Dashboard/TeamVoiceLine.tsx

@@ -170,7 +170,7 @@ export default function TeamVoiceLine() {
           key={i}
           className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${
             tmember.id == audioContext.selectedTeammate
-              ? "bg-white scale-150 z-20 translate-x-2/4"
+              ? "bg-white scale-150 z-20"
               : ""
           }`}
         >
@@ -186,11 +186,11 @@ export default function TeamVoiceLine() {
             />
           </span>
 
-          <span className="flex flex-col mr-10">
+          <span className="flex flex-col">
             {tmember.id == audioContext.selectedTeammate ? (
               <>
                 <span className="flex flex-row items-center space-x-2">
-                  <span className="text-sm text-black font-bold">
+                  <span className="text-xs text-black font-bold">
                     {tmember.nickName}
                   </span>
                 </span>
@@ -206,7 +206,7 @@ export default function TeamVoiceLine() {
                     {tmember.nickName}
                   </span>
 
-                  <span className="text-white shadow-xl font-bold  px-3 py-1 rounded">
+                  <span className="text-white shadow-xl font-bold px-3 py-1 rounded">
                     {/* keyboard shortcuts start from 1 */}
                     {i + 1}
                   </span>

contexts/audioContext.tsx

@@ -4,6 +4,7 @@ import { KeyCode } from "../globals/keycode";
 import MicRecorder from "mic-recorder-to-mp3";
 
 import AudioPlayer from "react-h5-audio-player";
+import "react-h5-audio-player/lib/styles.css";
 
 interface AudioContextInterface {
   selectedTeammate: string; // can only have one selected
@@ -206,6 +207,8 @@ export default function AudioContextProvider({ children }) {
 
   function onEndedPlaying(e) {
     toast.success("finished playing");
+
+    setStartPlaying(false);
   }
 
   // todo usecallback hook
@@ -262,6 +265,8 @@ export default function AudioContextProvider({ children }) {
         setSelectedTeamMember(teamShortcutMappings[event.keyCode]);
       } else if (event.keyCode == KeyCode.Escape) {
         setSelectedTeamMember(null);
+      } else if (event.keyCode == KeyCode.Space) {
+        setStartPlaying(true);
       } else {
         toast("Invalid keyboard shortcut.");
       }
@@ -301,16 +306,6 @@ export default function AudioContextProvider({ children }) {
 
   const [startPlaying, setStartPlaying] = useState<Boolean>(false);
 
-  useEffect(() => {
-    setTimeout(
-      function () {
-        //Start the timer
-        setStartPlaying(true);
-      }.bind(this),
-      2000
-    );
-  });
-
   return (
     <AudioContext.Provider value={value}>
       {children}
@@ -321,6 +316,9 @@ export default function AudioContextProvider({ children }) {
           autoPlay
           src={testAudioClip}
           onPlay={(e) => console.log("onPlay")}
+          showSkipControls={true}
+          onEnded={onEndedPlaying}
+          className="w-screen flex flex-row"
         />
       ) : (
         <></>