Merge branch 'backround-music-playback'
This commit is contained in:
@@ -12,6 +12,7 @@ import TrpcProvider from "./_trpc/TrpcProvider";
|
||||
import ThemeProvider from './_providers/ThemeProvider'
|
||||
import GsapProvider from "./_providers/GsapProvicer";
|
||||
import {MessagesProvider} from "./_providers/MessagesProvider";
|
||||
import { MusicPlayerProvider } from "./music/_components/MusicPlayerProvider";
|
||||
import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
|
||||
import { cn } from "~/lib/utils";
|
||||
import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
|
||||
@@ -49,6 +50,7 @@ export default async function RootLayout({
|
||||
<body className="flex flex-col bg-background text-foreground">
|
||||
<ThemeProvider>
|
||||
<MessagesProvider>
|
||||
<MusicPlayerProvider>
|
||||
<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
|
||||
<TopNav />
|
||||
<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
|
||||
@@ -57,6 +59,7 @@ export default async function RootLayout({
|
||||
{modal}
|
||||
</AnimatedBackGroundContainer>
|
||||
<ChatFAB />
|
||||
</MusicPlayerProvider>
|
||||
</MessagesProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
|
||||
@@ -6,6 +6,7 @@ import type WaveSurfer from "wavesurfer.js";
|
||||
import { Download, Loader2, Pause, Play } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import { useMusicPlayer } from "./MusicPlayerProvider";
|
||||
|
||||
function formatTime(seconds: number) {
|
||||
if (!Number.isFinite(seconds)) return "0:00";
|
||||
@@ -28,32 +29,46 @@ function waveColors() {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Per-track waveform. Playback itself is owned by the shared MusicPlayer engine
|
||||
* (so it keeps running across navigation); this wavesurfer instance is only a
|
||||
* visual + seek surface that mirrors the engine when its track is active.
|
||||
*/
|
||||
export default function AudioPlayer(props: {
|
||||
/** Streaming-friendly source the player actually plays. */
|
||||
id: string;
|
||||
src: string;
|
||||
/** Original high-quality file offered via the download button. */
|
||||
downloadUrl: string;
|
||||
downloadName: string;
|
||||
}) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const wsRef = useRef<WaveSurfer | null>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [ready, setReady] = useState(false);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const { currentId, isPlaying, currentTime, toggle, seek, subscribeTime } = useMusicPlayer();
|
||||
const isActive = currentId === props.id;
|
||||
|
||||
// Reach live values from the once-created wavesurfer callbacks.
|
||||
const isActiveRef = useRef(isActive);
|
||||
isActiveRef.current = isActive;
|
||||
const currentTimeRef = useRef(currentTime);
|
||||
currentTimeRef.current = currentTime;
|
||||
const toggleRef = useRef(toggle);
|
||||
toggleRef.current = toggle;
|
||||
const seekRef = useRef(seek);
|
||||
seekRef.current = seek;
|
||||
|
||||
useEffect(() => {
|
||||
let ws: WaveSurfer | null = null;
|
||||
let cancelled = false;
|
||||
setReady(false);
|
||||
setCurrent(0);
|
||||
|
||||
(async () => {
|
||||
const WaveSurferClass = (await import("wavesurfer.js")).default;
|
||||
if (cancelled || !containerRef.current) return;
|
||||
ws = WaveSurferClass.create({
|
||||
const instance = WaveSurferClass.create({
|
||||
container: containerRef.current,
|
||||
url: props.src,
|
||||
height: 44,
|
||||
@@ -64,15 +79,20 @@ export default function AudioPlayer(props: {
|
||||
cursorWidth: 1,
|
||||
...waveColors(),
|
||||
});
|
||||
wsRef.current = ws;
|
||||
ws.on("ready", () => {
|
||||
ws = instance;
|
||||
wsRef.current = instance;
|
||||
instance.on("ready", () => {
|
||||
// This media is for drawing only — never let it make sound.
|
||||
instance.setMuted(true);
|
||||
setReady(true);
|
||||
setDuration(ws?.getDuration() ?? 0);
|
||||
setDuration(instance.getDuration());
|
||||
if (isActiveRef.current) instance.setTime(currentTimeRef.current);
|
||||
});
|
||||
// Clicking the waveform: start this track if it isn't playing, then seek.
|
||||
instance.on("interaction", (time: number) => {
|
||||
if (!isActiveRef.current) toggleRef.current(props.id);
|
||||
seekRef.current(time);
|
||||
});
|
||||
ws.on("play", () => setPlaying(true));
|
||||
ws.on("pause", () => setPlaying(false));
|
||||
ws.on("finish", () => setPlaying(false));
|
||||
ws.on("timeupdate", (t) => setCurrent(t));
|
||||
})();
|
||||
|
||||
return () => {
|
||||
@@ -82,15 +102,23 @@ export default function AudioPlayer(props: {
|
||||
};
|
||||
}, [props.src]);
|
||||
|
||||
// Mirror the engine's playback position onto the cursor while active.
|
||||
useEffect(() => {
|
||||
const ws = wsRef.current;
|
||||
if (!ws || !ready) return;
|
||||
if (!isActive) {
|
||||
ws.setTime(0);
|
||||
return;
|
||||
}
|
||||
ws.setTime(currentTimeRef.current);
|
||||
return subscribeTime((t) => wsRef.current?.setTime(t));
|
||||
}, [isActive, ready, subscribeTime]);
|
||||
|
||||
// Re-tint the waveform when the user toggles light/dark.
|
||||
useEffect(() => {
|
||||
wsRef.current?.setOptions(waveColors());
|
||||
}, [resolvedTheme]);
|
||||
|
||||
function togglePlay() {
|
||||
wsRef.current?.playPause();
|
||||
}
|
||||
|
||||
async function handleDownload() {
|
||||
setDownloading(true);
|
||||
try {
|
||||
@@ -114,6 +142,8 @@ export default function AudioPlayer(props: {
|
||||
}
|
||||
}
|
||||
|
||||
const playing = isActive && isPlaying;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
|
||||
<Button
|
||||
@@ -122,13 +152,13 @@ export default function AudioPlayer(props: {
|
||||
variant="ghost"
|
||||
aria-label={playing ? "Pause" : "Play"}
|
||||
disabled={!ready}
|
||||
onClick={togglePlay}
|
||||
onClick={() => toggle(props.id)}
|
||||
>
|
||||
{playing ? <Pause /> : <Play />}
|
||||
</Button>
|
||||
|
||||
<span className="w-10 shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums">
|
||||
{formatTime(current)}
|
||||
{formatTime(isActive ? currentTime : 0)}
|
||||
</span>
|
||||
|
||||
<div className="relative flex-1">
|
||||
|
||||
73
src/app/music/_components/MusicMiniPlayer.tsx
Normal file
73
src/app/music/_components/MusicMiniPlayer.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from "react";
|
||||
import { Music } from "lucide-react";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "~/components/ui/drawer";
|
||||
import { Slider } from "~/components/ui/slider";
|
||||
import { useMusicPlayer } from "./MusicPlayerProvider";
|
||||
import PlayerControls from "./PlayerControls";
|
||||
|
||||
function formatTime(seconds: number) {
|
||||
if (!Number.isFinite(seconds)) return "0:00";
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Global, persistent mini-player: a floating button (shown once something is
|
||||
* loaded) that opens a drawer with the transport controls and a scrubber, so
|
||||
* playback can be controlled from any page while it keeps running in the
|
||||
* background.
|
||||
*/
|
||||
export default function MusicMiniPlayer() {
|
||||
const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
if (!currentTrack) return null;
|
||||
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={setOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open player"
|
||||
className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
|
||||
>
|
||||
<Music className={isPlaying ? "animate-pulse" : ""} />
|
||||
<span className="truncate text-sm">{currentTrack.title}</span>
|
||||
</button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>{currentTrack.title}</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
|
||||
{formatTime(currentTime)}
|
||||
</span>
|
||||
<Slider
|
||||
className="flex-1"
|
||||
min={0}
|
||||
max={duration || 1}
|
||||
step={0.1}
|
||||
value={[currentTime]}
|
||||
onValueChange={([v]) => seek(v ?? 0)}
|
||||
/>
|
||||
<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
|
||||
{formatTime(duration)}
|
||||
</span>
|
||||
</div>
|
||||
<PlayerControls />
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
231
src/app/music/_components/MusicPlayerProvider.tsx
Normal file
231
src/app/music/_components/MusicPlayerProvider.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { trpc } from "~/app/_trpc/Client";
|
||||
import MusicMiniPlayer from "./MusicMiniPlayer";
|
||||
|
||||
export type PlayerTrack = {
|
||||
id: string;
|
||||
title: string;
|
||||
/** Streaming-friendly source actually played. */
|
||||
src: string;
|
||||
/** Original high-quality file for the download button. */
|
||||
downloadUrl: string;
|
||||
downloadName: string;
|
||||
};
|
||||
|
||||
type MusicPlayerValue = {
|
||||
tracks: PlayerTrack[];
|
||||
currentId: string | null;
|
||||
currentTrack: PlayerTrack | null;
|
||||
isPlaying: boolean;
|
||||
shuffle: boolean;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
/** Play button on a track: start it, or toggle play/pause if already current. */
|
||||
toggle: (id: string) => void;
|
||||
/** Global play/pause — acts on the current track (or starts the first one). */
|
||||
togglePlayCurrent: () => void;
|
||||
next: () => void;
|
||||
previous: () => void;
|
||||
toggleShuffle: () => void;
|
||||
seek: (seconds: number) => void;
|
||||
/** Subscribe to playback time updates (for waveform cursors). */
|
||||
subscribeTime: (cb: (time: number) => void) => () => void;
|
||||
};
|
||||
|
||||
const MusicPlayerContext = createContext<MusicPlayerValue | null>(null);
|
||||
|
||||
export function useMusicPlayer() {
|
||||
const ctx = useContext(MusicPlayerContext);
|
||||
if (!ctx) throw new Error("useMusicPlayer must be used within a MusicPlayerProvider");
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export function MusicPlayerProvider({ children }: { children: ReactNode }) {
|
||||
// The provider owns the playlist so playback survives navigating away from
|
||||
// the music page. The query is cached, so the music page shares this request.
|
||||
const { data } = trpc.music.list.useQuery();
|
||||
const tracks = useMemo<PlayerTrack[]>(
|
||||
() =>
|
||||
(data ?? []).map((t) => ({
|
||||
id: t.id,
|
||||
title: t.title,
|
||||
src: t.streamUrl ?? t.fileUrl,
|
||||
downloadUrl: t.fileUrl,
|
||||
downloadName: t.fileName,
|
||||
})),
|
||||
[data],
|
||||
);
|
||||
|
||||
const [currentId, setCurrentId] = useState<string | null>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [shuffle, setShuffle] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const tracksRef = useRef(tracks);
|
||||
tracksRef.current = tracks;
|
||||
|
||||
// Lightweight pub/sub so each waveform can follow playback time without every
|
||||
// player re-rendering on the audio element's frequent timeupdate.
|
||||
const timeSubs = useRef<Set<(t: number) => void>>(new Set());
|
||||
const subscribeTime = useCallback((cb: (t: number) => void) => {
|
||||
timeSubs.current.add(cb);
|
||||
return () => {
|
||||
timeSubs.current.delete(cb);
|
||||
};
|
||||
}, []);
|
||||
const emitTime = useCallback((t: number) => {
|
||||
timeSubs.current.forEach((cb) => cb(t));
|
||||
}, []);
|
||||
|
||||
const currentTrack = useMemo(
|
||||
() => tracks.find((t) => t.id === currentId) ?? null,
|
||||
[tracks, currentId],
|
||||
);
|
||||
|
||||
const toggle = useCallback((id: string) => {
|
||||
setCurrentId((prev) => {
|
||||
if (prev === id) {
|
||||
setIsPlaying((p) => !p);
|
||||
return prev;
|
||||
}
|
||||
setIsPlaying(true);
|
||||
return id;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const togglePlayCurrent = useCallback(() => {
|
||||
setCurrentId((prev) => {
|
||||
if (prev) {
|
||||
setIsPlaying((p) => !p);
|
||||
return prev;
|
||||
}
|
||||
const first = tracksRef.current[0]?.id ?? null;
|
||||
if (first) setIsPlaying(true);
|
||||
return first;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const step = useCallback((dir: 1 | -1) => {
|
||||
const ids = tracksRef.current.map((t) => t.id);
|
||||
if (ids.length === 0) return;
|
||||
setCurrentId((prev) => {
|
||||
let nextId: string;
|
||||
if (shuffle && dir === 1 && ids.length > 1) {
|
||||
do {
|
||||
nextId = ids[Math.floor(Math.random() * ids.length)]!;
|
||||
} while (nextId === prev);
|
||||
} else {
|
||||
const idx = prev ? ids.indexOf(prev) : -1;
|
||||
nextId = ids[(idx + dir + ids.length) % ids.length]!;
|
||||
}
|
||||
setIsPlaying(true);
|
||||
return nextId;
|
||||
});
|
||||
}, [shuffle]);
|
||||
const next = useCallback(() => step(1), [step]);
|
||||
const previous = useCallback(() => step(-1), [step]);
|
||||
const toggleShuffle = useCallback(() => setShuffle((s) => !s), []);
|
||||
|
||||
const stepRef = useRef(step);
|
||||
stepRef.current = step;
|
||||
|
||||
const seek = useCallback(
|
||||
(s: number) => {
|
||||
if (audioRef.current) audioRef.current.currentTime = s;
|
||||
setCurrentTime(s);
|
||||
emitTime(s);
|
||||
},
|
||||
[emitTime],
|
||||
);
|
||||
|
||||
// Persistent audio element + listeners, created once on the client.
|
||||
useEffect(() => {
|
||||
const audio = new Audio();
|
||||
audio.preload = "metadata";
|
||||
audioRef.current = audio;
|
||||
const onTime = () => {
|
||||
setCurrentTime(audio.currentTime);
|
||||
emitTime(audio.currentTime);
|
||||
};
|
||||
const onMeta = () => setDuration(audio.duration || 0);
|
||||
const onEnded = () => stepRef.current(1);
|
||||
audio.addEventListener("timeupdate", onTime);
|
||||
audio.addEventListener("loadedmetadata", onMeta);
|
||||
audio.addEventListener("ended", onEnded);
|
||||
return () => {
|
||||
audio.pause();
|
||||
audio.removeEventListener("timeupdate", onTime);
|
||||
audio.removeEventListener("loadedmetadata", onMeta);
|
||||
audio.removeEventListener("ended", onEnded);
|
||||
audioRef.current = null;
|
||||
};
|
||||
}, [emitTime]);
|
||||
|
||||
// Swap the source when the current track changes.
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (!currentTrack) {
|
||||
audio.removeAttribute("src");
|
||||
audio.load();
|
||||
return;
|
||||
}
|
||||
if (audio.src !== currentTrack.src) {
|
||||
audio.src = currentTrack.src;
|
||||
audio.load();
|
||||
setCurrentTime(0);
|
||||
setDuration(0);
|
||||
}
|
||||
}, [currentTrack]);
|
||||
|
||||
// Reflect the desired play state onto the element.
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio || !currentTrack) return;
|
||||
if (isPlaying) audio.play().catch(() => {});
|
||||
else audio.pause();
|
||||
}, [isPlaying, currentTrack]);
|
||||
|
||||
const value = useMemo<MusicPlayerValue>(
|
||||
() => ({
|
||||
tracks,
|
||||
currentId,
|
||||
currentTrack,
|
||||
isPlaying,
|
||||
shuffle,
|
||||
currentTime,
|
||||
duration,
|
||||
toggle,
|
||||
togglePlayCurrent,
|
||||
next,
|
||||
previous,
|
||||
toggleShuffle,
|
||||
seek,
|
||||
subscribeTime,
|
||||
}),
|
||||
[
|
||||
tracks, currentId, currentTrack, isPlaying, shuffle, currentTime, duration,
|
||||
toggle, togglePlayCurrent, next, previous, toggleShuffle, seek, subscribeTime,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<MusicPlayerContext.Provider value={value}>
|
||||
{children}
|
||||
<MusicMiniPlayer />
|
||||
</MusicPlayerContext.Provider>
|
||||
);
|
||||
}
|
||||
40
src/app/music/_components/PlayerControls.tsx
Normal file
40
src/app/music/_components/PlayerControls.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
'use client'
|
||||
|
||||
import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { useMusicPlayer } from "./MusicPlayerProvider";
|
||||
|
||||
export default function PlayerControls() {
|
||||
const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
|
||||
useMusicPlayer();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
|
||||
<SkipBack />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon-lg"
|
||||
variant="secondary"
|
||||
aria-label={isPlaying ? "Pause" : "Play"}
|
||||
onClick={togglePlayCurrent}
|
||||
>
|
||||
{isPlaying ? <Pause /> : <Play />}
|
||||
</Button>
|
||||
<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
|
||||
<SkipForward />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant={shuffle ? "secondary" : "ghost"}
|
||||
aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
|
||||
aria-pressed={shuffle}
|
||||
onClick={toggleShuffle}
|
||||
>
|
||||
<Shuffle />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,11 +15,11 @@ export default function MusicPage() {
|
||||
<ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
|
||||
<AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
|
||||
<div className="flex flex-wrap h-fit content-center">
|
||||
<AnimateTextIn className="flex flex-wrap mr-[1em]" position={0.5}>
|
||||
<AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
|
||||
<div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
|
||||
<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
|
||||
</AnimateTextIn>
|
||||
<AnimatePopUp position={2} className="items-center content-center">
|
||||
<AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
|
||||
<div className="flex flex-row">
|
||||
<img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
|
||||
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
|
||||
@@ -33,7 +33,7 @@ export default function MusicPage() {
|
||||
<div key={track.id}>
|
||||
<Card.AnimatedCard position={i + 1}>
|
||||
<Card.CardHeader>
|
||||
<AnimateTextIn position={i + 1.2} animation="slide">
|
||||
<AnimateTextIn once position={i + 1.2} animation="slide">
|
||||
<Card.CardTitle>{track.title}</Card.CardTitle>
|
||||
</AnimateTextIn>
|
||||
</Card.CardHeader>
|
||||
@@ -41,8 +41,9 @@ export default function MusicPage() {
|
||||
{track.description && (
|
||||
<p className="text-sm text-muted-foreground gsapant">{track.description}</p>
|
||||
)}
|
||||
<AnimatePopUp position={i + 1.3}>
|
||||
<AnimatePopUp duration={2} ease='elastic.inOut' position={i + 1.3} once>
|
||||
<AudioPlayer
|
||||
id={track.id}
|
||||
src={track.streamUrl ?? track.fileUrl}
|
||||
downloadUrl={track.fileUrl}
|
||||
downloadName={track.fileName}
|
||||
|
||||
Reference in New Issue
Block a user