mirror of https://github.com/btahir/next-beats
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
SkipBack,
|
|
Play,
|
|
Pause,
|
|
SkipForward,
|
|
VolumeX,
|
|
Volume1,
|
|
Volume2,
|
|
} from 'lucide-react'
|
|
|
|
interface PlaybackControlsProps {
|
|
isPlaying: boolean
|
|
setIsPlaying: (playing: boolean) => void
|
|
volume: number
|
|
setVolume: (vol: number) => void
|
|
changeChannel: (direction: 'next' | 'prev') => void
|
|
}
|
|
|
|
const PlaybackControls: React.FC<PlaybackControlsProps> = ({
|
|
isPlaying,
|
|
setIsPlaying,
|
|
volume,
|
|
setVolume,
|
|
changeChannel,
|
|
}) => (
|
|
<div className="flex w-full items-center justify-between sm:justify-start sm:gap-8">
|
|
{/* Left Side - Playback Controls */}
|
|
<div className="flex shrink-0 items-center space-x-1">
|
|
<button
|
|
onClick={() => changeChannel('prev')}
|
|
className="rounded-[var(--lofi-button-radius)] pl-0 pr-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:px-2"
|
|
>
|
|
<SkipBack size={14} className="sm:h-4 sm:w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => setIsPlaying(!isPlaying)}
|
|
className="rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
|
|
>
|
|
{isPlaying ? (
|
|
<Pause size={14} className="sm:h-4 sm:w-4" />
|
|
) : (
|
|
<Play size={14} className="sm:h-4 sm:w-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => changeChannel('next')}
|
|
className="rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
|
|
>
|
|
<SkipForward size={14} className="sm:h-4 sm:w-4" />
|
|
</button>
|
|
{/* Right Side - Volume Control */}
|
|
<div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
|
|
<button
|
|
onClick={() => setVolume(volume === 0 ? 0.5 : 0)}
|
|
className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
|
|
>
|
|
{volume === 0 ? (
|
|
<VolumeX size={14} className="sm:h-4 sm:w-4" />
|
|
) : volume < 0.5 ? (
|
|
<Volume1 size={14} className="sm:h-4 sm:w-4" />
|
|
) : (
|
|
<Volume2 size={14} className="sm:h-4 sm:w-4" />
|
|
)}
|
|
</button>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={1}
|
|
step={0.01}
|
|
value={volume}
|
|
onChange={(e) => setVolume(parseFloat(e.target.value))}
|
|
onTouchStart={(e) => {
|
|
// Prevent default touch behavior
|
|
e.stopPropagation()
|
|
}}
|
|
className="w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)] touch-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export default PlaybackControls
|