84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Bar, Frame, Group, Terminal, Text, useTerminal } from "react-dom-curse";
|
|
import { theme } from "~/utils/theme";
|
|
|
|
const formatDurationMSS = (duration: number) => {
|
|
const minutes = Math.floor(duration / 60);
|
|
const seconds = duration % 60;
|
|
|
|
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
|
};
|
|
|
|
export const MusicPlayer = (props: {
|
|
title: string;
|
|
artist: string;
|
|
album: string;
|
|
duration: number;
|
|
}) => {
|
|
const { terminal } = useTerminal();
|
|
|
|
const [played, setPlayed] = useState(0);
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setPlayed(x => Math.min(props.duration, x + 1));
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [setPlayed, props.duration]);
|
|
|
|
const time = `${formatDurationMSS(played)}/${formatDurationMSS(
|
|
props.duration,
|
|
)}`;
|
|
|
|
return (
|
|
<Group
|
|
x={0}
|
|
y={0}
|
|
width={terminal.width}
|
|
height={terminal.height}
|
|
style={{ foreground: theme.white }}
|
|
>
|
|
<Frame
|
|
x={0}
|
|
y={0}
|
|
width={terminal.width}
|
|
height={terminal.height}
|
|
border="single"
|
|
>
|
|
<Text x={0} y={0} style={{ foreground: theme.cyan }}>
|
|
{props.title} · {props.artist}
|
|
</Text>
|
|
<Text x={0} y={1} style={{ foreground: theme.yellow }}>
|
|
{props.album}
|
|
</Text>
|
|
|
|
<Group x={0} y={2} width={terminal.width} height={1}>
|
|
<Bar
|
|
x={0}
|
|
y={0}
|
|
style={{ foreground: theme.green, background: "#55576d" }}
|
|
char=" "
|
|
size={terminal.width}
|
|
direction="horizontal"
|
|
/>
|
|
<Bar
|
|
x={0}
|
|
y={0}
|
|
style={{ foreground: "#55576d", background: theme.green }}
|
|
char=" "
|
|
size={terminal.width * (played / props.duration)}
|
|
direction="horizontal"
|
|
/>
|
|
<Text x={Math.floor(terminal.width / 2 - time.length / 2)} y={0}>
|
|
{time}
|
|
</Text>
|
|
</Group>
|
|
</Frame>
|
|
|
|
<Text x={1} y={0} style={{ foreground: theme.magenta }}>
|
|
Playback
|
|
</Text>
|
|
</Group>
|
|
);
|
|
};
|