pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(music-player): using react-dom-curse

Browse Source
This commit is contained in:
Pihkaal
2024-02-09 23:51:47 +01:00
parent 71ab32c53a
commit dc03aaeb4f
12 changed files with 120 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Kitty.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { type ReactNode } from "react";
import clsx from "clsx";
import { Terminal } from "react-dom-curse";
export const Kitty = (props: { children?: ReactNode; className?: string }) => (
<div
className={clsx(
"overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
props.className,
)}
style={{ backdropFilter: "blur(2px)" }}
>
<Terminal>{props.children}</Terminal>
</div>
);

108
src/components/MusicPlayer.tsx
View File

@@ -1,20 +1,6 @@
import { useTerminal } from "~/context/TerminalContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { TerminalBoxElement } from "~/utils/terminal/elements/box";
import { useEffect, useState } from "react";
const theme = {
black: "#45475a",
red: "#f38ba8",
green: "#a6e3a1",
yellow: "#f9e2af",
blue: "#89bafa",
magenta: "#f5c2e7",
cyan: "#94e2d5",
white: "#bac2de",
grey: "#585B70",
lightGrey: "#a6adc8",
};
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);
@@ -29,8 +15,7 @@ export const MusicPlayer = (props: {
album: string;
duration: number;
}) => {
const { cols } = useTerminal();
const canvas = new TerminalRenderer(cols, 5);
const { terminal } = useTerminal();
const [played, setPlayed] = useState(0);
useEffect(() => {
@@ -41,45 +26,58 @@ export const MusicPlayer = (props: {
return () => clearInterval(interval);
}, [setPlayed, props.duration]);
canvas.writeElement(
new TerminalBoxElement(canvas.width, canvas.height),
0,
0,
);
canvas.write(1, 0, "Playback".substring(0, Math.min(8, canvas.width - 2)), {
foreground: theme.magenta,
});
const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
// Title and Artist
inner.write(2, 0, `${props.title} · ${props.artist}`, {
foreground: theme.cyan,
fontWeight: 700,
});
inner.apply(0, 0, {
char: "\udb81\udc0a",
foreground: theme.cyan,
fontWeight: 800,
});
// Album
inner.write(0, 1, props.album, { foreground: theme.yellow });
// Bar
inner.write(0, 2, " ".repeat(inner.width), {
foreground: theme.green,
background: "#55576d",
});
inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
foreground: "#55576d",
background: theme.green,
});
const time = `${formatDurationMSS(played)}/${formatDurationMSS(
props.duration,
)}`;
inner.write(inner.width / 2 - time.length / 2, 2, time, { fontWeight: 800 });
canvas.writeElement(inner, 1, 1);
return <p>{canvas.render()}</p>;
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>
);
};

64
src/components/Terminal.tsx
View File

@@ -1,64 +0,0 @@
import { useRef, useState, useEffect, type ReactNode } from "react";
import clsx from "clsx";
import { TerminalContextProvider } from "~/context/TerminalContext";
export const Terminal = (props: {
children?: ReactNode;
className?: string;
}) => {
const terminalRef = useRef<HTMLDivElement>(null);
const [size, setSize] = useState<{ cols: number; rows: number }>();
useEffect(() => {
const precision = 300;
const calculateSize = () => {
if (!terminalRef.current) return;
const node = document.createElement("span");
node.style.color = "transparent";
node.style.position = "absolute";
node.textContent = "A".repeat(precision);
terminalRef.current.appendChild(node);
setSize({
cols: Math.floor(
(terminalRef.current.offsetWidth - 4) /
(node.offsetWidth / precision),
),
rows: Math.floor(
(terminalRef.current.offsetHeight - 4) / node.offsetHeight,
),
});
node.remove();
};
calculateSize();
setTimeout(() => calculateSize(), 1);
window.addEventListener("resize", calculateSize);
return () => {
window.removeEventListener("resize", calculateSize);
};
}, []);
return (
<TerminalContextProvider value={size}>
<div
ref={terminalRef}
className={clsx(
"overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
props.className,
)}
style={{ backdropFilter: "blur(2px)" }}
>
{size && props.children}
</div>
</TerminalContextProvider>
);
};