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

feat: add dropdown menu for track links in MusicPlayer component

Browse Source
This commit is contained in:
JSC
2025-07-18 22:38:45 +02:00
parent 72398db750
commit a29ad0873e
1 changed files with 74 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/MusicPlayer.tsx
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>
)}