From 1d95368c8c5af160410652b2d8a7611e9300adea Mon Sep 17 00:00:00 2001
From: assistant <assistant@example.com>
Date: Tue, 31 Mar 2026 02:52:30 +0000
Subject: [PATCH] feat(tracks): track upload with validation + linking

---
 src/components/stages/StageTrackUploader.tsx |  2 +-
 src/components/stages/StageTracksSection.tsx | 34 ++++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/stages/StageTrackUploader.tsx b/src/components/stages/StageTrackUploader.tsx
index afc192b..a19cb3b 100644
--- a/src/components/stages/StageTrackUploader.tsx
+++ b/src/components/stages/StageTrackUploader.tsx
@@ -91,7 +91,7 @@ export function StageTrackUploader({ stageId }: StageTrackUploaderProps) {
         </button>
       </div>
 
-      <TrackUpload onTrackUploaded={handleTrackUploaded} maxSizeMB={100} />
+      <TrackUpload onTrackUploaded={handleTrackUploaded} maxSizeMB={50} />
 
       {pendingTrack && (
         <div className="flex items-center gap-2">
diff --git a/src/components/stages/StageTracksSection.tsx b/src/components/stages/StageTracksSection.tsx
index e2b03f1..33f2273 100644
--- a/src/components/stages/StageTracksSection.tsx
+++ b/src/components/stages/StageTracksSection.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { StageTrackUploader } from "@/components/stages/StageTrackUploader";
 import { Music, Plus, Radio, ArrowLeft } from "lucide-react";
 import Link from "next/link";
+import { toast } from "sonner";
 
 interface TrackSummary {
   id: string;
@@ -12,6 +13,7 @@ interface TrackSummary {
   artist: string;
   duration: number | null;
   bpm: number | null;
+  fileUrl: string | null;
 }
 
 interface StageData {
@@ -21,13 +23,20 @@ interface StageData {
   latitude: number;
   longitude: number;
   radius: number;
-  stageTrackLinks: { id: string; track: TrackSummary }[];
+  stageTrackLinks: { id: string; track: TrackSummary; loopMode?: string }[];
 }
 
 interface StageTracksSectionProps {
   stage: StageData;
 }
 
+function formatDuration(seconds: number | null): string {
+  if (seconds == null || isNaN(seconds)) return "--:--";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
 export function StageTracksSection({ stage }: StageTracksSectionProps) {
   return (
     <div className="mb-6">
@@ -45,7 +54,25 @@ export function StageTracksSection({ stage }: StageTracksSectionProps) {
         <div className="space-y-2">
           {stage.stageTrackLinks.map((link) => (
             <div key={link.id} className="flex items-center gap-3 p-3 rounded-lg bg-zinc-900 border border-zinc-800">
-              <Music className="w-4 h-4 text-violet-400 flex-shrink-0" />
+              {/* Play button or no-URL placeholder */}
+              {link.track.fileUrl ? (
+                <button
+                  className="flex-shrink-0 w-8 h-8 rounded-full bg-violet-600/30 hover:bg-violet-600/50 flex items-center justify-center transition-colors"
+                  title={`Play ${link.track.title}`}
+                  onClick={() => {
+                    const audio = new Audio(link.track.fileUrl!);
+                    audio.play().catch(() => toast.error("Playback failed"));
+                  }}
+                >
+                  <svg width="10" height="12" viewBox="0 0 10 12" fill="none" className="ml-0.5">
+                    <path d="M1 1.5L9 6L1 10.5V1.5Z" fill="currentColor" className="text-violet-300" />
+                  </svg>
+                </button>
+              ) : (
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center" title="No audio URL">
+                  <span className="text-xs text-zinc-600">—</span>
+                </div>
+              )}
               <div className="flex-1 min-w-0">
                 <p className="text-sm text-white truncate">{link.track.title}</p>
                 <p className="text-xs text-zinc-500">{link.track.artist}</p>
@@ -53,6 +80,9 @@ export function StageTracksSection({ stage }: StageTracksSectionProps) {
               {link.track.bpm && (
                 <span className="text-xs text-zinc-600 font-mono">{Math.round(link.track.bpm)} BPM</span>
               )}
+              <span className="text-xs text-zinc-600 font-mono tabular-nums">
+                {formatDuration(link.track.duration)}
+              </span>
             </div>
           ))}
           <StageTrackUploader stageId={stage.id} />