| 1 | import { useLogger } from "@/lib/logger"; |
| 2 | import { |
| 3 | BookmarkIcon, |
| 4 | PauseIcon, |
| 5 | CircleIcon, |
| 6 | BookmarkFilledIcon, |
| 7 | ResumeIcon, |
| 8 | PlayIcon, |
| 9 | ResetIcon, |
| 10 | } from "@radix-ui/react-icons"; |
| 11 | import { useState } from "react"; |
| 12 | |
| 13 | export function ControlButtons(props: { |
| 14 | isPlaying: boolean; |
| 15 | isRecording: boolean; |
| 16 | onClick: () => void; |
| 17 | onStop: () => void; |
| 18 | onRecord: () => void; |
| 19 | onResume: () => void; |
| 20 | }) { |
| 21 | const log = useLogger("ControlButtonsV2"); |
| 22 | const { isPlaying, isRecording } = props; |
| 23 | const [isBookmarked, setIsBookmarked] = useState(false); |
| 24 | |
| 25 | const toggleBookmark = () => { |
| 26 | log.debug("toggleBookmark"); |
| 27 | setIsBookmarked(!isBookmarked); |
| 28 | }; |
| 29 | |
| 30 | const bookMarkText = isBookmarked |
| 31 | ? "Remove from bookmarks" |
| 32 | : "Add to bookmarks"; |
| 33 | const recordingText = isRecording ? "Recording" : "Stop recording"; |
| 34 | |
| 35 | let playPauseResumeIcon = isPlaying ? ( |
| 36 | <PauseIcon color={"black"} width="24" height="24" /> |
| 37 | ) : ( |
| 38 | <PlayIcon color={"black"} width="24" height="24" /> |
| 39 | ); |
| 40 | if (isRecording) { |
| 41 | playPauseResumeIcon = <ResumeIcon color={"black"} width="24" height="24" />; |
| 42 | } |
| 43 | |
| 44 | return ( |
| 45 | <div className="bg-slate-50 text-slate-500 py-6 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center"> |
| 46 | <div className="flex-auto flex items-center justify-evenly"> |
| 47 | <button |
| 48 | type="button" |
| 49 | aria-label={bookMarkText} |
| 50 | onClick={toggleBookmark} |
| 51 | title={bookMarkText} |
| 52 | > |
| 53 | {isBookmarked ? ( |
| 54 | <BookmarkFilledIcon color={"black"} width="24" height="24" /> |
| 55 | ) : ( |
| 56 | <BookmarkIcon color={"black"} width="24" height="24" /> |
| 57 | )} |
| 58 | </button> |
| 59 | <button |
| 60 | type="button" |
| 61 | aria-label="Record" |
| 62 | disabled={isPlaying} |
| 63 | title={recordingText} |
| 64 | > |
| 65 | <CircleIcon |
| 66 | color={isRecording ? "blue" : "red"} |
| 67 | width="30" |
| 68 | height="32" |
| 69 | /> |
| 70 | </button> |
| 71 | <button |
| 72 | type="button" |
| 73 | aria-label="Play/Pause/Resume" |
| 74 | disabled={isRecording} |
| 75 | > |
| 76 | {playPauseResumeIcon} |
| 77 | </button> |
| 78 | <button type="button" aria-label="Restart" disabled={isRecording}> |
| 79 | <ResetIcon color={"black"} width="24" height="24" /> |
| 80 | </button> |
| 81 | </div> |
| 82 | </div> |
| 83 | ); |
| 84 | } |