62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { usePlayer } from "@/context/PlayerContext";
|
|
import LyricsDetail from "./LyricsDetail";
|
|
import { X } from "lucide-react";
|
|
import { useRef, useState, useEffect } from "react";
|
|
|
|
export default function RightSidebar() {
|
|
const { currentTrack, isLyricsOpen, toggleLyrics } = usePlayer();
|
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
|
|
// Sync current time from the global audio element
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
// Try to find the audio element in PlayerBar
|
|
const audio = document.querySelector('audio');
|
|
if (audio) {
|
|
setCurrentTime(audio.currentTime);
|
|
}
|
|
}, 100);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const handleSeek = (time: number) => {
|
|
const audio = document.querySelector('audio') as HTMLAudioElement;
|
|
if (audio) {
|
|
audio.currentTime = time;
|
|
}
|
|
};
|
|
|
|
// Only show on desktop when lyrics are open
|
|
if (!isLyricsOpen || !currentTrack) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<aside className="hidden lg:flex w-[350px] flex-shrink-0 bg-[#121212] rounded-lg flex-col overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-white/10">
|
|
<h2 className="text-lg font-bold">Lyrics</h2>
|
|
<button
|
|
onClick={toggleLyrics}
|
|
className="text-white/60 hover:text-white transition p-1"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Lyrics Content */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<LyricsDetail
|
|
track={currentTrack}
|
|
currentTime={currentTime}
|
|
onClose={toggleLyrics}
|
|
onSeek={handleSeek}
|
|
isInSidebar={true}
|
|
/>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|