Compare commits

..

2 Commits

Author SHA1 Message Date
JSC
cbb7febd26 fix: correct property names in Track interface for consistency
Some checks failed
Frontend CI / lint (push) Failing after 5m3s
Frontend CI / build (push) Has been skipped
2025-07-18 22:38:51 +02:00
JSC
a29ad0873e feat: add dropdown menu for track links in MusicPlayer component 2025-07-18 22:38:45 +02:00
2 changed files with 76 additions and 6 deletions

View File

@@ -2,6 +2,12 @@ import { useRef } from 'react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { useMusicPlayer } from '@/contexts/MusicPlayerContext'
import {
Play,
@@ -18,7 +24,10 @@ import {
Maximize2,
Minimize2,
Minus,
ArrowRightToLine
ArrowRightToLine,
ExternalLink,
Download,
Globe
} from 'lucide-react'
import { formatDuration } from '@/lib/format-duration'
@@ -154,9 +163,39 @@ export function MusicPlayer() {
<div className="p-4 space-y-3">
{/* Track info */}
<div className="space-y-1">
<h3 className="font-medium text-sm leading-tight line-clamp-1">
{currentTrack?.title || 'No track selected'}
</h3>
<div className="flex items-center gap-2">
{(currentTrack?.file_url || currentTrack?.service_url) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 shrink-0"
title="Open track links"
>
<ExternalLink className="h-3 w-3" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
{currentTrack?.file_url && (
<DropdownMenuItem onClick={() => window.open(currentTrack.file_url, '_blank')}>
<Download className="h-3 w-3" />
Open File
</DropdownMenuItem>
)}
{currentTrack?.service_url && (
<DropdownMenuItem onClick={() => window.open(currentTrack.service_url, '_blank')}>
<Globe className="h-3 w-3" />
Open Service
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
)}
<h3 className="font-medium text-sm leading-tight line-clamp-1">
{currentTrack?.title || 'No track selected'}
</h3>
</div>
{currentTrack?.artist && (
<p className="text-xs text-muted-foreground line-clamp-1">
{currentTrack.artist}
@@ -307,7 +346,37 @@ export function MusicPlayer() {
{/* Track info */}
<div className="text-center mb-6">
<h1 className="text-2xl font-bold mb-2">{currentTrack?.title || 'No track selected'}</h1>
<div className="flex items-center justify-center gap-3 mb-2">
{(currentTrack?.file_url || currentTrack?.service_url) && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0 shrink-0"
title="Open track links"
>
<ExternalLink className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
{currentTrack?.file_url && (
<DropdownMenuItem onClick={() => window.open(currentTrack.file_url, '_blank')}>
<Download className="h-4 w-4" />
Open File
</DropdownMenuItem>
)}
{currentTrack?.service_url && (
<DropdownMenuItem onClick={() => window.open(currentTrack.service_url, '_blank')}>
<Globe className="h-4 w-4" />
Open Service
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
)}
<h1 className="text-2xl font-bold">{currentTrack?.title || 'No track selected'}</h1>
</div>
{currentTrack?.artist && (
<p className="text-lg text-muted-foreground">{currentTrack.artist}</p>
)}

View File

@@ -8,7 +8,8 @@ export interface Track {
artist?: string
duration: number
thumbnail?: string
url: string
file_url: string
service_url?: string
}
export type PlayMode = 'continuous' | 'loop-playlist' | 'loop-one' | 'random' | 'single'