feat(app): use components from nextjs branch
This commit is contained in:
Pihkaal
@@ -1,46 +1,83 @@
|
||||
import { Fragment, useRef, useEffect, useState } from "react";
|
||||
import { ProgressBar, Group, useFrame, useTerminal } from "react-dom-curse";
|
||||
import { theme } from "~/utils/theme";
|
||||
import {
|
||||
type RefObject,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { type InnerKittyProps, useKitty } from "../../context/KittyContext";
|
||||
import { CHAR_WIDTH } from "../Kitty";
|
||||
|
||||
export const Cava = () => {
|
||||
const { width } = useTerminal();
|
||||
export const Cava = (props: { audio: RefObject<HTMLAudioElement> }) => {
|
||||
const kitty = useKitty();
|
||||
|
||||
const audioContext = useRef(new AudioContext());
|
||||
const analyser = useRef(audioContext.current.createAnalyser());
|
||||
const bufferLength = useRef(analyser.current.frequencyBinCount);
|
||||
const dataArray = useRef(new Uint8Array(bufferLength.current));
|
||||
return (
|
||||
<div
|
||||
className="grid select-none text-[#b2b9d7]"
|
||||
style={{
|
||||
gap: `${CHAR_WIDTH}px`,
|
||||
gridTemplateColumns: `repeat(auto-fill, ${CHAR_WIDTH * 2}px)`,
|
||||
gridTemplateRows: `1fr`,
|
||||
}}
|
||||
>
|
||||
{kitty && <InnerCava {...props} {...kitty} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FrequencyBar = (props: {
|
||||
value: number;
|
||||
max: number;
|
||||
height: number;
|
||||
}) => {
|
||||
const WIDTH = 2;
|
||||
const GRADIENT = "▁▂▃▄▅▆▇█";
|
||||
const FULL_BLOCK = "█";
|
||||
|
||||
const fraction = props.value / props.max;
|
||||
const totalCharacters = props.height * GRADIENT.length;
|
||||
const filledCharacters = fraction * totalCharacters;
|
||||
|
||||
const fullBlocksCount = Math.floor(filledCharacters / GRADIENT.length);
|
||||
const remainderIndex = Math.floor(filledCharacters % GRADIENT.length);
|
||||
|
||||
let bar = "";
|
||||
|
||||
const emptyBlocksCount =
|
||||
props.height - fullBlocksCount - (remainderIndex > 0 ? 1 : 0);
|
||||
bar += `${" ".repeat(WIDTH)}\n`.repeat(Math.max(emptyBlocksCount, 0));
|
||||
|
||||
if (remainderIndex > 0) {
|
||||
bar += `${GRADIENT[remainderIndex]!.repeat(WIDTH)}\n`;
|
||||
}
|
||||
bar += `${FULL_BLOCK.repeat(WIDTH)}\n`.repeat(fullBlocksCount);
|
||||
|
||||
return <span>{bar}</span>;
|
||||
};
|
||||
|
||||
const InnerCava = (props: InnerKittyProps<typeof Cava>) => {
|
||||
const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
|
||||
const analyserRef = useRef<AnalyserNode | null>(null);
|
||||
const audioContextRef = useRef<AudioContext | null>(null);
|
||||
const [barHeights, setBarHeights] = useState(
|
||||
new Array<number>(Math.round(width / 3)).fill(0),
|
||||
new Array<number>(Math.round(props.cols / 3)).fill(0),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const audioElement = document.querySelector("audio");
|
||||
if (!audioElement) return;
|
||||
const requestRef = useRef<number>();
|
||||
const calculateBarHeights = useCallback(() => {
|
||||
if (!analyserRef.current) return;
|
||||
|
||||
const audioSource =
|
||||
audioContext.current.createMediaElementSource(audioElement);
|
||||
audioSource.connect(analyser.current);
|
||||
analyser.current.connect(audioContext.current.destination);
|
||||
void audioElement.play();
|
||||
const bufferLength = analyserRef.current.frequencyBinCount;
|
||||
const dataArray = new Uint8Array(bufferLength);
|
||||
analyserRef.current.getByteFrequencyData(dataArray);
|
||||
|
||||
const analyzerElement = analyser.current;
|
||||
|
||||
return () => {
|
||||
audioSource.disconnect();
|
||||
analyzerElement.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useFrame(() => {
|
||||
analyser.current.getByteFrequencyData(dataArray.current);
|
||||
|
||||
const barCount = Math.floor(width / 3);
|
||||
const barCount = Math.round(props.cols / 3);
|
||||
const newBarHeights = [];
|
||||
|
||||
for (let i = 0; i < barCount; i++) {
|
||||
const startIndex = Math.floor((i / barCount) * bufferLength.current);
|
||||
const endIndex = Math.floor(((i + 1) / barCount) * bufferLength.current);
|
||||
const slice = dataArray.current.slice(startIndex, endIndex);
|
||||
const startIndex = Math.floor((i / barCount) * bufferLength);
|
||||
const endIndex = Math.floor(((i + 1) / barCount) * bufferLength);
|
||||
const slice = dataArray.slice(startIndex, endIndex);
|
||||
const sum = slice.reduce((acc, val) => acc + val, 0);
|
||||
const average = sum / slice.length;
|
||||
newBarHeights.push(average);
|
||||
@@ -52,45 +89,46 @@ export const Cava = () => {
|
||||
: barHeights;
|
||||
|
||||
const smoothedBarHeights = newBarHeights.map((height, i) => {
|
||||
const smoothingFactor = 0.1;
|
||||
const smoothingFactor = 1;
|
||||
return (
|
||||
stateBarHeights[i] + (height - stateBarHeights[i]) * smoothingFactor
|
||||
stateBarHeights[i]! + (height - stateBarHeights[i]!) * smoothingFactor
|
||||
);
|
||||
});
|
||||
|
||||
setBarHeights(smoothedBarHeights);
|
||||
});
|
||||
|
||||
return (
|
||||
<Group
|
||||
x={0}
|
||||
y={0}
|
||||
width={width}
|
||||
height={5}
|
||||
style={{ foreground: theme.white }}
|
||||
>
|
||||
{barHeights.map((height, x) => (
|
||||
<Fragment key={x}>
|
||||
<ProgressBar
|
||||
x={x * 3}
|
||||
y={4}
|
||||
size={5}
|
||||
min={0}
|
||||
max={255}
|
||||
value={height}
|
||||
orientation="top"
|
||||
/>
|
||||
<ProgressBar
|
||||
x={x * 3 + 1}
|
||||
y={4}
|
||||
size={5}
|
||||
min={0}
|
||||
max={255}
|
||||
value={height}
|
||||
orientation="top"
|
||||
/>
|
||||
</Fragment>
|
||||
))}
|
||||
</Group>
|
||||
);
|
||||
requestRef.current = requestAnimationFrame(calculateBarHeights);
|
||||
}, [props.cols, barHeights]);
|
||||
|
||||
useEffect(() => {
|
||||
const audioElement = props.audio.current;
|
||||
if (!audioElement) return;
|
||||
|
||||
const audioContext = new AudioContext();
|
||||
audioContextRef.current = audioContext;
|
||||
|
||||
const analyser = audioContext.createAnalyser();
|
||||
analyser.fftSize = 256;
|
||||
|
||||
console.log("ok");
|
||||
void audioElement.play().then(() => void audioContext.resume());
|
||||
|
||||
if (!sourceRef.current) {
|
||||
const source = audioContext.createMediaElementSource(audioElement);
|
||||
source.connect(analyser);
|
||||
analyser.connect(audioContext.destination);
|
||||
sourceRef.current = source;
|
||||
analyserRef.current = analyser;
|
||||
}
|
||||
|
||||
requestRef.current = requestAnimationFrame(calculateBarHeights);
|
||||
|
||||
return () => {
|
||||
if (requestRef.current) cancelAnimationFrame(requestRef.current);
|
||||
};
|
||||
}, [props.cols, props.audio]);
|
||||
|
||||
return barHeights.map((value, i) => (
|
||||
<FrequencyBar key={i} value={value} max={255 / 2} height={props.rows} />
|
||||
));
|
||||
};
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { parseBlob, type IAudioMetadata } from "music-metadata-browser";
|
||||
|
||||
import song from "/audio/colorful-flowers.mp3";
|
||||
import { Kitty } from "../Kitty";
|
||||
import { Cava } from "./Cava";
|
||||
import { SpotifyPlayer } from "./SpotifyPlayer";
|
||||
|
||||
export const Music = () => {
|
||||
const [metadata, setMetadata] = useState<IAudioMetadata>();
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const audio = useRef<HTMLAudioElement>(null);
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
setCurrentTime(audio.current?.currentTime ?? 0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (metadata) return;
|
||||
|
||||
void fetch(song)
|
||||
.then(r => r.blob())
|
||||
.then(b => parseBlob(b))
|
||||
.then(setMetadata);
|
||||
}, [metadata]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />
|
||||
{metadata && audio.current && (
|
||||
<>
|
||||
<Kitty className="flex-1 select-none">
|
||||
<SpotifyPlayer
|
||||
title={metadata.common.title ?? "Unknown"}
|
||||
artist={metadata.common.artist ?? "Unknown"}
|
||||
album={metadata.common.album ?? "Unknown"}
|
||||
played={currentTime}
|
||||
duration={audio.current.duration}
|
||||
/>
|
||||
</Kitty>
|
||||
|
||||
<Kitty className="flex-1">
|
||||
<Cava />
|
||||
</Kitty>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,79 +1,108 @@
|
||||
import { useEffect } from "react";
|
||||
import { Bar, Frame, Group, Text, useTerminal } from "react-dom-curse";
|
||||
import { theme } from "~/utils/theme";
|
||||
|
||||
const formatDurationMSS = (duration: number) => {
|
||||
duration = Math.floor(duration);
|
||||
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const seconds = duration % 60;
|
||||
|
||||
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||||
};
|
||||
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;
|
||||
played: number;
|
||||
duration: number;
|
||||
played: number;
|
||||
onTogglePause: (state: boolean) => void;
|
||||
}) => {
|
||||
const { width } = useTerminal();
|
||||
|
||||
const time = `${formatDurationMSS(props.played)}/${formatDurationMSS(
|
||||
props.duration,
|
||||
)}`;
|
||||
const kitty = useKitty();
|
||||
|
||||
return (
|
||||
<Group
|
||||
x={0}
|
||||
y={0}
|
||||
width={width}
|
||||
height={5}
|
||||
style={{ foreground: theme.white }}
|
||||
<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`,
|
||||
}}
|
||||
>
|
||||
<Frame x={0} y={0} width={width} height={5} border="single">
|
||||
<Text x={0} y={0} style={{ foreground: theme.cyan, bold: true }}>
|
||||
{props.title} · {props.artist}
|
||||
</Text>
|
||||
<Text x={0} y={1} style={{ foreground: theme.yellow }}>
|
||||
{props.album}
|
||||
</Text>
|
||||
|
||||
<Group x={0} y={2} width={width} height={1}>
|
||||
<Bar
|
||||
x={0}
|
||||
y={0}
|
||||
style={{
|
||||
foreground: theme.green,
|
||||
background: "#55576d",
|
||||
bold: true,
|
||||
}}
|
||||
char=" "
|
||||
size={width}
|
||||
direction="right"
|
||||
/>
|
||||
<Bar
|
||||
x={0}
|
||||
y={0}
|
||||
style={{
|
||||
foreground: "#55576d",
|
||||
background: theme.green,
|
||||
bold: true,
|
||||
}}
|
||||
char=" "
|
||||
size={width * (props.played / props.duration)}
|
||||
direction="right"
|
||||
/>
|
||||
<Text x={Math.floor(width / 2 - time.length / 2 - 1)} y={0}>
|
||||
{time}
|
||||
</Text>
|
||||
</Group>
|
||||
</Frame>
|
||||
|
||||
<Text x={1} y={0} style={{ foreground: theme.magenta }}>
|
||||
{"Playback".substring(0, Math.min(8, width - 2))}
|
||||
</Text>
|
||||
</Group>
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
71
src/components/Music/index.tsx
Normal file
71
src/components/Music/index.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { type IAudioMetadata, parseBlob } from "music-metadata-browser";
|
||||
import { Kitty } from "../Kitty";
|
||||
import { SpotifyPlayer } from "./SpotifyPlayer";
|
||||
import { Cava } from "./Cava";
|
||||
|
||||
const song = "/audio/asinine-vivement-quoi.mp3";
|
||||
|
||||
export const Music = () => {
|
||||
const audio = useRef<HTMLAudioElement>(null);
|
||||
|
||||
const [metadata, setMetadata] = useState<IAudioMetadata>();
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
|
||||
const handleTimeUpdate = useCallback(() => {
|
||||
setCurrentTime(audio.current?.currentTime ?? 0);
|
||||
}, []);
|
||||
|
||||
const handleTogglePause = useCallback((paused: boolean) => {
|
||||
if (!audio.current) return;
|
||||
|
||||
if (paused) {
|
||||
void audio.current.pause();
|
||||
} else {
|
||||
void audio.current.play();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (metadata) return;
|
||||
|
||||
void fetch(song)
|
||||
.then((r) => r.blob())
|
||||
.then((b) => parseBlob(b))
|
||||
.then((m) => {
|
||||
if (!audio.current) return;
|
||||
|
||||
setMetadata(m);
|
||||
audio.current.volume = 0.01;
|
||||
});
|
||||
}, [metadata]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row">
|
||||
<audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />
|
||||
{audio.current && metadata ? (
|
||||
<>
|
||||
<Kitty className="h-full w-1/2 pb-2 pl-2 pr-1 pt-1" rows={5}>
|
||||
<SpotifyPlayer
|
||||
title={metadata.common.title ?? "Unknown"}
|
||||
artist={metadata.common.artist ?? "Unknown"}
|
||||
album={metadata.common.album ?? "Unknown"}
|
||||
played={currentTime}
|
||||
onTogglePause={handleTogglePause}
|
||||
duration={audio.current.duration}
|
||||
/>
|
||||
</Kitty>
|
||||
|
||||
<Kitty className="h-full w-1/2 pb-2 pl-1 pr-2 pt-1" rows={5}>
|
||||
<Cava audio={audio} />
|
||||
</Kitty>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Kitty className="h-full w-1/2 pb-2 pl-2 pr-1 pt-1" rows={5} />
|
||||
<Kitty className="h-full w-1/2 pb-2 pl-1 pr-2 pt-1" rows={5} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user