aiden
/
next-beats
mirror of https://github.com/btahir/next-beats
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix mobile screen icon sizing

Browse Source
main
btahir89 12 months ago
parent 85a0bf48e7
commit e90b974c70
2 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File

28
app/page.tsx
Unescape Escape View File

@ -624,7 +624,7 @@ const EnhancedLofiPlayer = () => {
{/* Controls Container */} {/* Controls Container */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between gap-3">
{/* Left Side - Playback Controls */} {/* Left Side - Playback Controls */}
{mounted && ( {mounted && (
<PlaybackControls <PlaybackControls
@ -638,22 +638,24 @@ const EnhancedLofiPlayer = () => {
{/* Right Side - Channel Management */} {/* Right Side - Channel Management */}
{mounted && ( {mounted && (
<ChannelManagement <div className="flex shrink-0 items-center">
isAddingChannel={isAddingChannel} <ChannelManagement
setIsAddingChannel={setIsAddingChannel} isAddingChannel={isAddingChannel}
newChannel={newChannel} setIsAddingChannel={setIsAddingChannel}
setNewChannel={setNewChannel} newChannel={newChannel}
saveChannel={handleSaveChannel} setNewChannel={setNewChannel}
currentTheme={currentTheme} saveChannel={handleSaveChannel}
currentChannel={currentChannel} currentTheme={currentTheme}
handleEditChannel={handleEditChannel} currentChannel={currentChannel}
setShowDeleteConfirm={setShowDeleteConfirm} handleEditChannel={handleEditChannel}
/> setShowDeleteConfirm={setShowDeleteConfirm}
/>
</div>
)} )}
</div> </div>
{/* Progress Bar */} {/* Progress Bar */}
<div className="px-2"> <div className="">
<div className="h-1 w-full overflow-hidden rounded-full bg-[var(--lofi-card-hover)]"> <div className="h-1 w-full overflow-hidden rounded-full bg-[var(--lofi-card-hover)]">
<div <div
className="h-full bg-[var(--lofi-accent)] transition-all duration-300" className="h-full bg-[var(--lofi-accent)] transition-all duration-300"

36
components/PlaybackControls.tsx
Unescape Escape View File

@ -24,51 +24,55 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
setVolume, setVolume,
changeChannel, changeChannel,
}) => ( }) => (
<div className="flex items-center justify-between"> <div className="flex w-full items-center justify-between gap-2">
{/* Left Side - Playback Controls */} {/* Left Side - Playback Controls */}
<div className="flex items-center space-x-2"> <div className="flex shrink-0 items-center space-x-1">
<button <button
onClick={() => changeChannel('prev')} onClick={() => changeChannel('prev')}
className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]" 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={16} /> <SkipBack size={14} className="sm:h-4 sm:w-4" />
</button> </button>
<button <button
onClick={() => setIsPlaying(!isPlaying)} onClick={() => setIsPlaying(!isPlaying)}
className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]" 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={16} /> : <Play size={16} />} {isPlaying ? (
<Pause size={14} className="sm:h-4 sm:w-4" />
) : (
<Play size={14} className="sm:h-4 sm:w-4" />
)}
</button> </button>
<button <button
onClick={() => changeChannel('next')} onClick={() => changeChannel('next')}
className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]" 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={16} /> <SkipForward size={14} className="sm:h-4 sm:w-4" />
</button> </button>
</div> </div>
{/* Right Side - Volume Control */} {/* Right Side - Volume Control */}
<div className="flex items-center space-x-2"> <div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
<button <button
onClick={() => setVolume(volume === 0 ? 0.7 : 0)} onClick={() => setVolume(volume === 0 ? 1 : 0)}
className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]" 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 ? ( {volume === 0 ? (
<VolumeX size={16} /> <VolumeX size={14} className="sm:h-4 sm:w-4" />
) : volume < 0.5 ? ( ) : volume < 0.5 ? (
<Volume1 size={16} /> <Volume1 size={14} className="sm:h-4 sm:w-4" />
) : ( ) : (
<Volume2 size={16} /> <Volume2 size={14} className="sm:h-4 sm:w-4" />
)} )}
</button> </button>
<input <input
type="range" type="range"
min={0} min={0}
max={1} max={1}
step={0.01} step={0.1}
value={volume} value={volume}
onChange={(e) => setVolume(parseFloat(e.target.value))} onChange={(e) => setVolume(parseFloat(e.target.value))}
className="w-16 accent-[var(--lofi-accent)]" className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
/> />
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save