115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { useState } from "react";
|
|
import { formatMMSS } from "../../utils/time";
|
|
import { CharArray } from "../../utils/string";
|
|
import { CHAR_HEIGHT, CHAR_WIDTH } from "../Kitty";
|
|
import { type InnerKittyProps, useKitty } from "../../context/KittyContext";
|
|
|
|
export const SpotifyPlayer = (props: {
|
|
title: string;
|
|
artist: string;
|
|
album: string;
|
|
duration: number;
|
|
played: number;
|
|
onTogglePause: (state: boolean) => void;
|
|
}) => {
|
|
const kitty = useKitty();
|
|
|
|
return (
|
|
<div
|
|
className="grid select-none"
|
|
style={{
|
|
gridTemplateColumns: `${CHAR_WIDTH}px ${
|
|
CHAR_WIDTH * 8
|
|
}px 1fr ${CHAR_WIDTH}px`,
|
|
gridTemplateRows: `${CHAR_HEIGHT}px ${
|
|
CHAR_HEIGHT * 3
|
|
}px ${CHAR_HEIGHT}px`,
|
|
}}
|
|
>
|
|
{kitty && <InnerSpotifyPlayer {...props} {...kitty} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const InnerSpotifyPlayer = (props: InnerKittyProps<typeof SpotifyPlayer>) => {
|
|
const [paused, setPaused] = useState(false);
|
|
|
|
const fillSize = Math.round(
|
|
(props.played / props.duration) * (props.cols - 2),
|
|
);
|
|
const emptySize = props.cols - 2 - fillSize;
|
|
|
|
const timeString = `${formatMMSS(props.played)}/${formatMMSS(
|
|
props.duration,
|
|
)}`;
|
|
const timeStringLeft = Math.round(
|
|
(props.cols - 2) / 2 - timeString.length / 2,
|
|
);
|
|
|
|
const fill = new CharArray(" ", fillSize)
|
|
.write(timeStringLeft, timeString)
|
|
.toString();
|
|
const empty = new CharArray(" ", emptySize)
|
|
.write(timeStringLeft - fillSize, timeString)
|
|
.toString();
|
|
|
|
const handleTogglePause = () => {
|
|
setPaused(!paused);
|
|
props.onTogglePause(!paused);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* title */}
|
|
<span
|
|
className="font-bold text-color5"
|
|
style={{ gridArea: "1 / 2 / 2 / 3" }}
|
|
>
|
|
Playback
|
|
</span>
|
|
|
|
{/* border right */}
|
|
<span style={{ gridArea: "1 / 4 / 2 / 5" }}>┐</span>
|
|
<span style={{ gridArea: "2 / 4 / 3 / 4" }}>
|
|
{"│\n".repeat(props.rows - 2)}
|
|
</span>
|
|
<span style={{ gridArea: "3 / 4 / 4 / 5" }}>┘</span>
|
|
|
|
{/* borer left */}
|
|
<span style={{ gridArea: "1 / 1 / 2 / 2" }}>┌</span>
|
|
<span style={{ gridArea: "2 / 1 / 3 / 1" }}>
|
|
{"│\n".repeat(props.rows - 2)}
|
|
</span>
|
|
<span style={{ gridArea: "3 / 1 / 4 / 2" }}>└</span>
|
|
|
|
{/* border top */}
|
|
<span className="overflow-hidden" style={{ gridArea: "1 / 3 / 2 / 4" }}>
|
|
{"─".repeat(props.cols - 2 - 8)}
|
|
</span>
|
|
|
|
{/* border bottom */}
|
|
<span className="overflow-hidden" style={{ gridArea: "3 / 2 / 4 / 4" }}>
|
|
{"─".repeat(props.cols - 2)}
|
|
</span>
|
|
|
|
{/* body */}
|
|
<div className="overflow-hidden" style={{ gridArea: "2 / 2 / 3 / 4" }}>
|
|
<span className="font-bold text-color6">
|
|
<span onClick={handleTogglePause}>
|
|
{paused ? "\udb81\udc0a " : "\udb80\udfe4 "}
|
|
</span>
|
|
{props.title} · {props.artist}
|
|
</span>
|
|
<br />
|
|
<span className="text-color3">{props.album}</span>
|
|
<br />
|
|
<div className="relative font-bold">
|
|
<span className="bg-color2 text-color8">{fill}</span>
|
|
<span className="bg-color8 text-color2">{empty}</span>
|
|
</div>
|
|
<br />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|