107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
import { useState } from "react";
|
|
import { useTerminal } from "~/context/TerminalContext";
|
|
import { Text } from "./Text";
|
|
|
|
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;
|
|
played: number;
|
|
}) => {
|
|
const terminal = useTerminal();
|
|
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
setIsPlaying;
|
|
|
|
const innerWidth = terminal.cols - 2;
|
|
|
|
const timeString = `${formatDurationMSS(props.played)}/${formatDurationMSS(
|
|
props.duration,
|
|
)}`;
|
|
const barSize = Math.max(
|
|
1,
|
|
Math.floor((props.played / props.duration) * innerWidth),
|
|
);
|
|
|
|
const beforeText_pos = innerWidth / 2 - timeString.length / 2;
|
|
const beforeText_filled = Math.min(barSize, beforeText_pos);
|
|
const beforeText_empty = beforeText_pos - beforeText_filled;
|
|
|
|
const afterText_pos = innerWidth / 2 + timeString.length / 2;
|
|
const afterText_filled = Math.max(
|
|
0,
|
|
Math.min(barSize, innerWidth - timeString.length) - afterText_pos,
|
|
);
|
|
const afterText_empty =
|
|
innerWidth - afterText_pos - afterText_filled + 1 - (innerWidth % 2);
|
|
|
|
return (
|
|
<p className="h-fit w-full select-none whitespace-pre pl-1 font-medium">
|
|
{/* Top bar */}
|
|
<>
|
|
<Text>┌</Text>
|
|
<Text fg="color5">Playback</Text>
|
|
<Text>{"─".repeat(Math.max(0, innerWidth - 8))}┐</Text>
|
|
<br />
|
|
</>
|
|
|
|
<>
|
|
<Text>│</Text>
|
|
<Text fg="color6" bold>
|
|
{isPlaying ? "\udb81\udc0a" : "\udb80\udfe4"} {props.title} -{" "}
|
|
{props.artist}
|
|
</Text>
|
|
<Text>
|
|
{" ".repeat(
|
|
Math.max(
|
|
0,
|
|
innerWidth - props.title.length - props.artist.length - 5,
|
|
),
|
|
)}
|
|
│
|
|
</Text>
|
|
<br />
|
|
</>
|
|
|
|
<>
|
|
<Text>│</Text>
|
|
<Text fg="color3">
|
|
{props.album}
|
|
{" ".repeat(innerWidth - props.album.length)}
|
|
</Text>
|
|
<Text>│</Text>
|
|
<br />
|
|
</>
|
|
|
|
<>
|
|
<Text>│</Text>
|
|
<Text bg="color2">{" ".repeat(beforeText_filled)}</Text>
|
|
<Text bg="color8">{" ".repeat(beforeText_empty)}</Text>
|
|
{timeString.split("").map((x, i) => (
|
|
<Text
|
|
key={i}
|
|
bg={beforeText_pos + i <= barSize ? "color2" : "color8"}
|
|
fg={beforeText_pos + i <= barSize ? "color8" : "color2"}
|
|
>
|
|
{x}
|
|
</Text>
|
|
))}
|
|
<Text bg="color2">{" ".repeat(afterText_filled)}</Text>
|
|
<Text bg="color8">{" ".repeat(afterText_empty)}</Text>
|
|
<Text>│</Text>
|
|
<br />
|
|
</>
|
|
|
|
<Text>└{"─".repeat(innerWidth)}┘</Text>
|
|
</p>
|
|
);
|
|
};
|