talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

decent nice player poc on the bottom

Browse Source
This commit is contained in:
Arjun Patel
2022-01-15 23:57:58 -08:00
parent c765bea753
commit 8b3b3fa0fd
2 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Dashboard/TeamVoiceLine.tsx
+4 -4
View File
@@ -170,7 +170,7 @@ export default function TeamVoiceLine() {
key={i} key={i}
className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${ 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 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>
<span className="flex flex-col mr-10"> <span className="flex flex-col">
{tmember.id == audioContext.selectedTeammate ? ( {tmember.id == audioContext.selectedTeammate ? (
<> <>
<span className="flex flex-row items-center space-x-2"> <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} {tmember.nickName}
</span> </span>
</span> </span>
@@ -206,7 +206,7 @@ export default function TeamVoiceLine() {
{tmember.nickName} {tmember.nickName}
</span> </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 */} {/* keyboard shortcuts start from 1 */}
{i + 1} {i + 1}
</span> </span>
contexts/audioContext.tsx
+8 -10
View File
@@ -4,6 +4,7 @@ import { KeyCode } from "../globals/keycode";
import MicRecorder from "mic-recorder-to-mp3"; import MicRecorder from "mic-recorder-to-mp3";
import AudioPlayer from "react-h5-audio-player"; import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";
interface AudioContextInterface { interface AudioContextInterface {
selectedTeammate: string; // can only have one selected selectedTeammate: string; // can only have one selected
@@ -206,6 +207,8 @@ export default function AudioContextProvider({ children }) {
function onEndedPlaying(e) { function onEndedPlaying(e) {
toast.success("finished playing"); toast.success("finished playing");
setStartPlaying(false);
} }
// todo usecallback hook // todo usecallback hook
@@ -262,6 +265,8 @@ export default function AudioContextProvider({ children }) {
setSelectedTeamMember(teamShortcutMappings[event.keyCode]); setSelectedTeamMember(teamShortcutMappings[event.keyCode]);
} else if (event.keyCode == KeyCode.Escape) { } else if (event.keyCode == KeyCode.Escape) {
setSelectedTeamMember(null); setSelectedTeamMember(null);
} else if (event.keyCode == KeyCode.Space) {
setStartPlaying(true);
} else { } else {
toast("Invalid keyboard shortcut."); toast("Invalid keyboard shortcut.");
} }
@@ -301,16 +306,6 @@ export default function AudioContextProvider({ children }) {
const [startPlaying, setStartPlaying] = useState<Boolean>(false); const [startPlaying, setStartPlaying] = useState<Boolean>(false);
useEffect(() => {
setTimeout(
function () {
//Start the timer
setStartPlaying(true);
}.bind(this),
2000
);
});
return ( return (
<AudioContext.Provider value={value}> <AudioContext.Provider value={value}>
{children} {children}
@@ -321,6 +316,9 @@ export default function AudioContextProvider({ children }) {
autoPlay autoPlay
src={testAudioClip} src={testAudioClip}
onPlay={(e) => console.log("onPlay")} onPlay={(e) => console.log("onPlay")}
showSkipControls={true}
onEnded={onEndedPlaying}
className="w-screen flex flex-row"
/> />
) : ( ) : (
<></> <></>