nostr music: tracks

src/components/ContentPreview/MusicTrackPreview.tsx

@@ -0,0 +1,24 @@
+
+import { useTranslation } from 'react-i18next'
+import { Event } from 'nostr-tools'
+
+export default function MusicTrackPreview({ event }: { event: Event }) {
+  const { t } = useTranslation()
+
+  const title = event.tags.find(tag => tag[0] === 'title')?.[1]
+  const artist = event.tags.find(tag => tag[0] === 'artist')?.[1]
+
+  return (
+    <div className="flex items-center gap-2 truncate">
+    <span>🎵</span>
+    <span className="font-medium truncate">
+    {title || t('music.untitled')}
+    </span>
+    {artist && (
+      <span className="text-muted-foreground truncate">
+      {t('music.by')} {artist}
+      </span>
+    )}
+    </div>
+  )
+}

src/components/ContentPreview/index.tsx

@@ -18,6 +18,7 @@ import PictureNotePreview from './PictureNotePreview'
 import PollPreview from './PollPreview'
 import ReactionPreview from './ReactionPreview'
 import VideoNotePreview from './VideoNotePreview'
+import MusicTrackPreview from './MusicTrackPreview'
 
 export default function ContentPreview({
   event,
@@ -120,6 +121,10 @@ export default function ContentPreview({
     return <ReactionPreview event={event} className={className} />
   }
 
+  if (event.kind === ExtendedKind.MUSIC_TRACK) {
+    return <MusicTrackPreview event={event} />
+  }
+
   return (
     <div className={className}>
       [

src/components/KindFilter/index.tsx

@@ -20,6 +20,7 @@ const KIND_FILTER_OPTIONS = [
   { kindGroup: [ExtendedKind.POLL], label: 'Polls' },
   { kindGroup: [ExtendedKind.VOICE, ExtendedKind.VOICE_COMMENT], label: 'Voice Posts' },
   { kindGroup: [ExtendedKind.PICTURE], label: 'Photo Posts' },
+  { kindGroup: [ExtendedKind.MUSIC_TRACK], label: 'Music Posts' },
   {
     kindGroup: [
       ExtendedKind.VIDEO,

src/components/Note/MusicTrackNote/index.tsx

@@ -0,0 +1,173 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import dayjs from 'dayjs'
+import { Event } from 'nostr-tools'
+import AudioPlayer from '@/components/AudioPlayer'
+
+interface MusicTrackNoteProps {
+  event: Event
+  className?: string
+}
+
+export default function MusicTrackNote({ event, className }: MusicTrackNoteProps) {
+  const { t } = useTranslation()
+
+  const metadata = useMemo(() => {
+    const getTagValue = (tagName: string) => {
+      const tag = event.tags.find(tag => tag[0] === tagName)
+      return tag?.[1] || null
+    }
+
+    const getTagValues = (tagName: string) => {
+      return event.tags
+      .filter(tag => tag[0] === tagName)
+      .map(tag => tag[1])
+      .filter(Boolean)
+    }
+
+
+    let lyrics = null
+    let credits = null
+
+    if (event.content) {
+      const creditsMatch = event.content.match(/Credits:\s*\n([\s\S]*)/i)
+      if (creditsMatch) {
+        credits = creditsMatch[1].trim()
+
+        const lyricsMatch = event.content.match(/^([\s\S]*?)Credits:/i)
+        lyrics = lyricsMatch ? lyricsMatch[1].trim() : null
+      } else {
+
+        lyrics = event.content
+      }
+    }
+
+    return {
+      title: getTagValue('title') || t('music.untitled'),
+                           url: getTagValue('url'),
+                           image: getTagValue('image'),
+                           license: getTagValue('license'),
+                           alt: getTagValue('alt'),
+                           releaseDate: getTagValue('released'),
+                           artist: getTagValue('artist'),
+                           album: getTagValue('album'),
+                           trackNumber: getTagValue('track_number'),
+                           duration: getTagValue('duration'),
+                           genres: getTagValues('t').filter(tag =>
+                           !['music', 'electronic', 'lofi pop'].includes(tag)
+                           ),
+                           lyrics,
+                           credits
+    }
+  }, [event, t])
+
+  if (!metadata.url) {
+    return (
+      <div className={`p-4 text-red-500 ${className || ''}`}>
+      {t('music.noAudioUrl')}
+      </div>
+    )
+  }
+
+  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"
+      />
+      </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 */}
+    <div className="pt-4 border-t space-y-1">
+    {metadata.license && (
+      <p className="text-xs text-muted-foreground">
+      {t('music.license')}: {metadata.license}
+      </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) => (
+        <span
+        key={index}
+        className="px-2 py-1 text-xs rounded-full bg-secondary"
+        >
+        {genre}
+        </span>
+      ))}
+      </div>
+    )}
+    </div>
+    </div>
+  )
+}

src/components/Note/index.tsx

@@ -38,6 +38,7 @@ import Reaction from './Reaction'
 import RelayReview from './RelayReview'
 import UnknownNote from './UnknownNote'
 import VideoNote from './VideoNote'
+import MusicTrackNote from './MusicTrackNote'
 
 export default function Note({
   event,
@@ -124,6 +125,8 @@ export default function Note({
     event.kind === ExtendedKind.ADDRESSABLE_SHORT_VIDEO
   ) {
     content = <VideoNote className="mt-2" event={event} />
+  } else if (event.kind === ExtendedKind.MUSIC_TRACK) {
+    content = <MusicTrackNote className="mt-2" event={event} />
   } else if (event.kind === ExtendedKind.RELAY_REVIEW) {
     content = <RelayReview className="mt-2" event={event} />
   } else if (event.kind === kinds.Emojisets) {

src/i18n/locales/en.ts

@@ -686,6 +686,18 @@ export default {
     'Allow insecure connections description':
       'Allow loading http:// resources and connecting to ws:// relays. May trigger browser mixed content warnings.',
     'reacted to': 'reacted to',
-    Reaction: 'Reaction'
+    Reaction: 'Reaction',
+    music: {
+      untitled: 'Untitled Track',
+      by: 'by',
+      album: 'Album',
+      track: 'Track',
+      released: 'Released',
+      license: 'License',
+      altText: 'Credit',
+      credits: 'Credits',  // Add this
+      showLyrics: 'Show Lyrics',  // Add this (optional)
+      noAudioUrl: 'No audio URL provided for this track',
+    }
   }
 }