quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add context menu to Playlist for adding tracks to play next queue

Browse Source
This commit is contained in:
JSC
2025-10-04 19:16:25 +02:00
parent 4352e4c792
commit 9a2a9343d2
2 changed files with 88 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/player/Playlist.tsx
View File

@@ -3,11 +3,17 @@ import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { ScrollArea } from '@/components/ui/scroll-area' import { ScrollArea } from '@/components/ui/scroll-area'
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from '@/components/ui/context-menu'
import { filesService } from '@/lib/api/services/files' import { filesService } from '@/lib/api/services/files'
import { type PlayerPlaylist } from '@/lib/api/services/player' import { type PlayerPlaylist, playerService } from '@/lib/api/services/player'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { formatDuration } from '@/utils/format-duration' import { formatDuration } from '@/utils/format-duration'
import { Music, Play, Search, X } from 'lucide-react' import { Music, Play, Search, X, ListPlus } from 'lucide-react'
interface PlaylistProps { interface PlaylistProps {
playlist: PlayerPlaylist playlist: PlayerPlaylist
@@ -28,6 +34,14 @@ export function Playlist({
sound.name.toLowerCase().includes(searchQuery.toLowerCase()) sound.name.toLowerCase().includes(searchQuery.toLowerCase())
) )
const handleAddToPlayNext = async (soundId: number) => {
try {
await playerService.addToPlayNext(soundId)
} catch (error) {
console.error('Failed to add track to play next:', error)
}
}
return ( return (
<div className="w-full"> <div className="w-full">
{/* Header */} {/* Header */}
@@ -68,64 +82,73 @@ export function Playlist({
{filteredSounds.map((sound) => { {filteredSounds.map((sound) => {
const originalIndex = playlist.sounds.findIndex((s) => s.id === sound.id) const originalIndex = playlist.sounds.findIndex((s) => s.id === sound.id)
return ( return (
<div <ContextMenu key={sound.id}>
key={sound.id} <ContextMenuTrigger asChild>
className={cn( <div
'grid grid-cols-10 gap-2 items-center py-1.5 px-2 rounded hover:bg-muted/50 cursor-pointer text-xs', className={cn(
currentIndex === originalIndex && 'bg-primary/10 text-primary', 'grid grid-cols-10 gap-2 items-center py-1.5 px-2 rounded hover:bg-muted/50 cursor-pointer text-xs',
)} currentIndex === originalIndex && 'bg-primary/10 text-primary',
onClick={() => onTrackSelect(originalIndex)} )}
> onClick={() => onTrackSelect(originalIndex)}
{/* Track number/play icon - 1 column */} >
<div className="col-span-1 flex justify-center"> {/* Track number/play icon - 1 column */}
{currentIndex === originalIndex ? ( <div className="col-span-1 flex justify-center">
<Play className="h-3 w-3" /> {currentIndex === originalIndex ? (
) : ( <Play className="h-3 w-3" />
<span className="text-muted-foreground">{originalIndex + 1}</span> ) : (
)} <span className="text-muted-foreground">{originalIndex + 1}</span>
</div> )}
</div>
{/* Thumbnail - 1 column */} {/* Thumbnail - 1 column */}
<div className="col-span-1"> <div className="col-span-1">
<div <div
className={cn( className={cn(
'bg-muted rounded flex items-center justify-center overflow-hidden', 'bg-muted rounded flex items-center justify-center overflow-hidden',
variant === 'maximized' ? 'w-6 h-6' : 'w-5 h-5', variant === 'maximized' ? 'w-6 h-6' : 'w-5 h-5',
)} )}
> >
{sound.thumbnail ? ( {sound.thumbnail ? (
<img <img
src={filesService.getThumbnailUrl(sound.id)} src={filesService.getThumbnailUrl(sound.id)}
alt="" alt=""
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
<Music className="h-3 w-3 text-muted-foreground" /> <Music className="h-3 w-3 text-muted-foreground" />
)} )}
</div> </div>
</div> </div>
{/* Track name - 6 columns (takes most space) */} {/* Track name - 6 columns (takes most space) */}
<div className="col-span-6"> <div className="col-span-6">
<span <span
className={cn( className={cn(
'font-medium truncate block', 'font-medium truncate block',
variant === 'maximized' ? 'text-sm' : 'text-xs', variant === 'maximized' ? 'text-sm' : 'text-xs',
currentIndex === originalIndex ? 'text-primary' : 'text-foreground', currentIndex === originalIndex ? 'text-primary' : 'text-foreground',
)} )}
> >
{sound.name} {sound.name}
</span> </span>
</div> </div>
{/* Duration - 2 columns */} {/* Duration - 2 columns */}
<div className="col-span-2 text-right"> <div className="col-span-2 text-right">
<span className="text-muted-foreground text-xs whitespace-nowrap"> <span className="text-muted-foreground text-xs whitespace-nowrap">
{formatDuration(sound.duration)} {formatDuration(sound.duration)}
</span> </span>
</div> </div>
</div> </div>
)})} </ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onClick={() => handleAddToPlayNext(sound.id)}>
<ListPlus className="mr-2 h-4 w-4" />
Add to play next
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)})}
</div> </div>
</ScrollArea> </ScrollArea>

8
src/lib/api/services/player.ts
View File

@@ -38,6 +38,7 @@ export interface PlayerState {
index?: number index?: number
current_sound?: PlayerSound current_sound?: PlayerSound
playlist?: PlayerPlaylist playlist?: PlayerPlaylist
play_next_queue: PlayerSound[]
} }
export interface PlayerSeekRequest { export interface PlayerSeekRequest {
@@ -147,6 +148,13 @@ export class PlayerService {
async getState(): Promise<PlayerState> { async getState(): Promise<PlayerState> {
return apiClient.get<PlayerState>('/api/v1/player/state') return apiClient.get<PlayerState>('/api/v1/player/state')
} }
/**
* Add a sound to the play next queue
*/
async addToPlayNext(soundId: number): Promise<MessageResponse> {
return apiClient.post<MessageResponse>(`/api/v1/player/play-next/${soundId}`)
}
} }
export const playerService = new PlayerService() export const playerService = new PlayerService()