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

16
src/App.tsx
View File

@@ -2,7 +2,7 @@ import { BrowserRouter } from "react-router-dom";
import { MusicPlayer } from "./components/MusicPlayer";
import { MusicVisualizer } from "./components/MusicVisualizer";
import { Nvim } from "./components/Nvim/Nvim";
import { Terminal } from "./components/Terminal";
import { Kitty } from "./components/Kitty";
import { AppContextProvider } from "./context/AppContext";
import { Waybar } from "./components/Waybar/Waybar";
@@ -17,23 +17,19 @@ function App() {
>
<Waybar />
<Terminal className="flex-1">
<Nvim />
</Terminal>
<Kitty className="flex-1"></Kitty>
<div className="flex gap-3">
<Terminal className="flex-1 select-none">
<div className="flex gap-3 h-[142px]">
<Kitty className="flex-1 select-none">
<MusicPlayer
title="Last Tango in Kyoto"
artist="Floating Bits"
album="Last Tango in Kyoto"
duration={93}
/>
</Terminal>
</Kitty>
<Terminal className="flex-1">
<MusicVisualizer />
</Terminal>
<Kitty className="flex-1"></Kitty>
</div>
</main>
</BrowserRouter>

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>
);
};

16
src/context/TerminalContext.tsx
View File

@@ -1,16 +0,0 @@
/* eslint-disable react-refresh/only-export-components */
import { createContext, useContext } from "react";
const TerminalContext = createContext<
{ cols: number; rows: number } | undefined
>(undefined);
export const TerminalContextProvider = TerminalContext.Provider;
export const useTerminal = () => {
const context = useContext(TerminalContext);
if (!context)
throw new Error("useTerminal must be used inside a Terminal component");
return context;
};

9
src/utils/terminal/cell.ts
View File

@@ -1,9 +0,0 @@
export type Cell = {
char: string;
} & CellStyle;
export type CellStyle = Partial<{
foreground: string;
background: string;
fontWeight: number;
}>;

7
src/utils/terminal/element.ts
View File

@@ -1,7 +0,0 @@
import { type Cell } from "./cell";
export interface TerminalElement {
readonly data: Array<Array<Cell>>;
readonly width: number;
readonly height: number;
}

38
src/utils/terminal/elements/box.ts
View File

@@ -1,38 +0,0 @@
import { type Cell, type CellStyle } from "../cell";
import { TerminalRenderer } from "../renderer";
import { type TerminalElement } from "../element";
export class TerminalBoxElement implements TerminalElement {
public readonly data: Array<Array<Cell>>;
constructor(
public readonly width: number,
public readonly height: number,
style: CellStyle = {},
) {
const canvas = new TerminalRenderer(width, height, style);
if (width == 1 && height > 1) {
for (let y = 0; y < height - 1; y++) {
canvas.write(0, y, "│");
}
} else if (height == 1 && width > 1) {
canvas.write(0, 0, "─".repeat(width - 2));
} else {
canvas.write(0, 0, "┌");
canvas.write(width - 1, 0, "┐");
canvas.write(0, height - 1, "└");
canvas.write(width - 1, height - 1, "┘");
canvas.write(1, 0, "─".repeat(width - 2));
canvas.write(1, height - 1, "─".repeat(width - 2));
for (let y = 1; y < height - 1; y++) {
canvas.write(0, y, "│");
canvas.write(width - 1, y, "│");
}
}
this.data = canvas.data;
}
}

124
src/utils/terminal/renderer.tsx
View File

@@ -1,124 +0,0 @@
import { type ReactNode } from "react";
import { floorAll } from "../math";
import { type CellStyle, type Cell } from "./cell";
import { type TerminalElement } from "./element";
export class TerminalRenderer implements TerminalElement {
public readonly data: Array<Array<Cell>>;
constructor(
public readonly width: number,
public readonly height: number,
public readonly defaultStyle: CellStyle = {},
) {
[this.width, this.height] = floorAll(this.width, this.height);
this.data = new Array(this.height).fill(0).map(() =>
new Array<Cell>(this.width).fill({
char: " ",
...defaultStyle,
}),
);
}
apply(x: number, y: number, cell: Partial<Cell>): void {
[x, y] = floorAll(x, y);
if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
this.data[y][x] = {
...this.data[y][x],
...cell,
};
}
write(x: number, y: number, text: string, style: CellStyle = {}): void {
[x, y] = floorAll(x, y);
for (let i = 0; i < text.length; i++) {
this.apply(x + i, y, {
char: text[i],
...style,
});
}
}
writeFilter(
x: number,
y: number,
text: string,
filter: (cell: Cell) => Cell,
): void {
[x, y] = floorAll(x, y);
for (let i = 0; i < text.length; i++) {
this.apply(x + i, y, {
...filter(this.data[y][x + i]),
char: text[i],
});
}
}
writeElement(canvas: TerminalElement, dx: number, dy: number): void {
[dx, dy] = floorAll(dx, dy);
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
this.apply(dx + x, dy + y, canvas.data[y][x]);
}
}
}
subCanvas(
x: number,
y: number,
width: number,
height: number,
): TerminalRenderer {
[x, y, width, height] = floorAll(x, y, width, height);
const canvas = new TerminalRenderer(width, height);
for (let cy = 0; cy < height; cy++) {
for (let cx = 0; cx < width; cx++) {
canvas.apply(cx, cy, this.data[y + cy][x + cx]);
}
}
return canvas;
}
render(): Array<ReactNode> {
const nodes: Array<ReactNode> = [];
for (let y = 0; y < this.height; y++) {
for (let x = 0; x < this.width; x++) {
const cell = this.data[y][x];
/*
const span = document.createElement("span");
span.innerHTML = cell.char;
span.style.color = cell.foreground ?? "unset";
span.style.background = cell.background ?? "unset";
span.style.fontWeight = String(cell.fontWeight ?? "unset");
target.appendChild(span);
*/
nodes.push(
<span
key={`${x}-${y}`}
style={{
color: cell.foreground,
background: cell.background,
fontWeight: cell.fontWeight,
}}
>
{cell.char}
</span>,
);
}
nodes.push(<br key={y} />);
}
return nodes;
}
}

0
src/utils/terminal/theme.ts → src/utils/theme.ts
View File