fix missing tags
- fix linting - remove unnecessary fluff
This commit is contained in:
parent
fb98f867cd
commit
74e1c054b9
1 changed files with 65 additions and 74 deletions
|
|
@ -54,7 +54,7 @@ export default function MusicTrackNote({ event, className }: MusicTrackNoteProps
|
|||
trackNumber: getTagValue('track_number'),
|
||||
duration: getTagValue('duration'),
|
||||
genres: getTagValues('t').filter(tag =>
|
||||
!['music', 'electronic', 'lofi pop'].includes(tag)
|
||||
!['music'].includes(tag)
|
||||
),
|
||||
lyrics,
|
||||
credits
|
||||
|
|
@ -71,73 +71,71 @@ export default function MusicTrackNote({ event, className }: MusicTrackNoteProps
|
|||
|
||||
return (
|
||||
<div className={`space-y-4 p-4 ${className || ''}`}>
|
||||
{/* Main track container */}
|
||||
<div className="flex gap-4 flex-col sm:flex-row">
|
||||
{/* Cover Art */}
|
||||
{metadata.image && (
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={metadata.alt || metadata.title}
|
||||
className="w-48 h-48 object-cover rounded-lg shadow-md"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/* Main track container */}
|
||||
<div className="flex gap-4 flex-col sm:flex-row">
|
||||
{/* Cover Art */}
|
||||
{metadata.image && (
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src={metadata.image}
|
||||
alt={metadata.alt || metadata.title}
|
||||
className="w-48 h-48 object-cover rounded-lg shadow-md"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Track Info */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<h3 className="text-xl font-bold">{metadata.title}</h3>
|
||||
|
||||
{metadata.artist && (
|
||||
<p className="text-muted-foreground">
|
||||
{t('music.by')} {metadata.artist}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{metadata.album && (
|
||||
<p className="text-sm">
|
||||
{t('music.album')}: {metadata.album}
|
||||
{metadata.trackNumber && ` • ${t('music.track')} ${metadata.trackNumber}`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{metadata.releaseDate && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('music.released')}: {dayjs(metadata.releaseDate).format('MMMM D, YYYY')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Audio Player */}
|
||||
<div className="mt-4">
|
||||
<AudioPlayer
|
||||
src={metadata.url}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Show lyrics if they exist */}
|
||||
{metadata.lyrics && (
|
||||
<div className="pt-2">
|
||||
<p className="text-sm whitespace-pre-wrap text-muted-foreground">
|
||||
{metadata.lyrics}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show credits if they exist */}
|
||||
{metadata.credits && (
|
||||
<div className="pt-2">
|
||||
<p className="text-sm italic text-muted-foreground whitespace-pre-wrap">
|
||||
<span className="font-semibold not-italic">{t('music.credits')}:</span><br />
|
||||
{metadata.credits}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Track Info */}
|
||||
<div className="flex-1 space-y-2">
|
||||
<h3 className="text-xl font-bold">{metadata.title}</h3>
|
||||
|
||||
{metadata.artist && (
|
||||
<p className="text-muted-foreground">
|
||||
{t('music.by')} {metadata.artist}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{metadata.album && (
|
||||
<p className="text-sm">
|
||||
{t('music.album')}: {metadata.album}
|
||||
{metadata.trackNumber && ` • ${t('music.track')} ${metadata.trackNumber}`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{metadata.releaseDate && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('music.released')}: {dayjs(metadata.releaseDate).format('MMMM D, YYYY')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Audio Player */}
|
||||
<div className="mt-4">
|
||||
<AudioPlayer
|
||||
src={metadata.url}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Show lyrics if they exist */}
|
||||
{metadata.lyrics && (
|
||||
<div className="pt-2">
|
||||
<p className="text-sm whitespace-pre-wrap text-muted-foreground">
|
||||
{metadata.lyrics}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show credits if they exist */}
|
||||
{metadata.credits && (
|
||||
<div className="pt-2">
|
||||
<p className="text-sm italic text-muted-foreground whitespace-pre-wrap">
|
||||
<span className="font-semibold not-italic">{t('music.credits')}:</span><br />
|
||||
{metadata.credits}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* License and Metadata Footer */}
|
||||
|
|
@ -148,13 +146,6 @@ export default function MusicTrackNote({ event, className }: MusicTrackNoteProps
|
|||
</p>
|
||||
)}
|
||||
|
||||
{/* Only show alt if it's different from what we've shown
|
||||
{metadata.alt && !metadata.credits && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('music.altText')}: {metadata.alt}
|
||||
</p>
|
||||
)}
|
||||
*/}
|
||||
{metadata.genres.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{metadata.genres.map((genre, index) => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue