| 1 | import { useCountDown } from "@/lib/use-count-down"; |
| 2 | import { useLogger } from "@/lib/logger"; |
| 3 | import { useEffect } from "react"; |
| 4 | |
| 5 | export function AudioInfoMiddle({ |
| 6 | counterDownTimer, |
| 7 | }: { |
| 8 | counterDownTimer: number; |
| 9 | }) { |
| 10 | const timePlayed = "0:01"; |
| 11 | const timeTotal = "3:20"; |
| 12 | return ( |
| 13 | <div className="space-y-2"> |
| 14 | <div className="flex-auto flex items-center justify-evenly"> |
| 15 | <CountDownView |
| 16 | seconds={counterDownTimer} |
| 17 | type="audio" |
| 18 | onCountDownEnd={() => {}} |
| 19 | /> |
| 20 | </div> |
| 21 | <div className="flex justify-between text-sm leading-6 font-medium tabular-nums"> |
| 22 | <div className="text-cyan-500 dark:text-slate-100">{timePlayed}</div> |
| 23 | <div className="text-slate-500 dark:text-slate-400">{timeTotal}</div> |
| 24 | </div> |
| 25 | </div> |
| 26 | ); |
| 27 | } |
| 28 | |
| 29 | function CountDownView(props: { |
| 30 | seconds: number; |
| 31 | type: string; |
| 32 | onCountDownEnd?: () => void; |
| 33 | }) { |
| 34 | const log = useLogger("CountDownView"); |
| 35 | const { secondsLeft, startTimer } = useCountDown(); |
| 36 | |
| 37 | useEffect(() => { |
| 38 | log.debug("start counting down seconds:", props.seconds); |
| 39 | startTimer(props.seconds); |
| 40 | // eslint-disable-next-line react-hooks/exhaustive-deps |
| 41 | }, []); |
| 42 | |
| 43 | if (secondsLeft === 0 && props.onCountDownEnd) { |
| 44 | log.debug("CountDownView: onCountDownEnd"); |
| 45 | props.onCountDownEnd(); |
| 46 | } |
| 47 | |
| 48 | const displayText = secondsLeft === 0 ? props.type : secondsLeft; |
| 49 | |
| 50 | return ( |
| 51 | <div className="text-red-500 dark:text-slate-100"> |
| 52 | <h1>{displayText}</h1> |
| 53 | </div> |
| 54 | ); |
| 55 | } |