Kevin O'Neill
88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/Button";
|
|
import { Play, Pause, Book } from "lucide-react";
|
|
|
|
interface PlayControlsProps {
|
|
audiobook: any;
|
|
isThisBookPlaying: boolean;
|
|
isPlaying: boolean;
|
|
currentTime: number;
|
|
onPlayPause: () => void;
|
|
formatTime: (seconds: number) => string;
|
|
}
|
|
|
|
export function PlayControls({
|
|
audiobook,
|
|
isThisBookPlaying,
|
|
isPlaying,
|
|
currentTime,
|
|
onPlayPause,
|
|
formatTime,
|
|
}: PlayControlsProps) {
|
|
const hasProgress = audiobook.progress && audiobook.progress.progress > 0;
|
|
const isFinished = audiobook.progress?.isFinished;
|
|
|
|
return (
|
|
<section>
|
|
<div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
|
|
<Button
|
|
variant="primary"
|
|
className="h-16 px-8 rounded-full shadow-lg hover:scale-105 transition-transform"
|
|
onClick={onPlayPause}
|
|
>
|
|
{isThisBookPlaying && isPlaying ? (
|
|
<>
|
|
<Pause className="w-6 h-6 mr-2" />
|
|
<span className="font-semibold">Pause</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play className="w-6 h-6 mr-2 fill-current" />
|
|
<span className="font-semibold">
|
|
{hasProgress && !isFinished ? "Resume" : "Play"}
|
|
</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
{hasProgress && !isFinished && (
|
|
<div className="text-center sm:text-left">
|
|
<div className="text-sm text-gray-400">Continue listening</div>
|
|
<div className="text-white font-medium">
|
|
{formatTime(
|
|
isThisBookPlaying ? currentTime : audiobook.progress.currentTime
|
|
)}{" "}
|
|
/ {formatTime(audiobook.duration)}
|
|
</div>
|
|
<div className="w-48 h-1 bg-[#181818] rounded-full mt-2">
|
|
<div
|
|
className="h-full bg-purple-500 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${
|
|
isThisBookPlaying
|
|
? (currentTime / audiobook.duration) * 100
|
|
: audiobook.progress.progress
|
|
}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{isFinished && (
|
|
<div className="flex items-center gap-2 text-green-500">
|
|
<Book className="w-5 h-5" />
|
|
<span className="font-medium">Finished</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-center text-sm text-gray-400 mt-4">
|
|
Use the player controls in the sidebar or bottom bar for playback speed,
|
|
seeking, and volume.
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|