feat: shared player with 6s cap, progress bar, stop button

components/ItemEditor.tsx

@@ -9,6 +9,7 @@ import { SOUND_CATEGORIES, EMOJIS } from "@/lib/bingo-data";
 import { Badge } from "./ui/badge";
 import { ResourceBrowser, DragData } from "./ResourceBrowser";
 import { playSoundOnce } from "@/lib/sounds";
+import { SoundPlayerBar } from "./SoundPlayerBar";
 
 type Item = {
   id: string;
@@ -222,7 +223,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
     if (!item) return;
 
     if (data.type === "sound") {
-      playSoundOnce(data.url);
+      playSoundOnce(data.url, data.originalName);
       await updateItem({ ...item, soundCategory: "custom", soundUrl: data.url });
     } else if (data.type === "image") {
       await updateItem({ ...item, imageUrl: data.url });
@@ -317,7 +318,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                   {editSoundUrl && (
                     <div className="flex items-center gap-1 text-[10px] font-mono text-cyan-400">
                       <span>✓ sound loaded</span>
-                      <button type="button" onClick={() => playSoundOnce(editSoundUrl)} className="px-1.5 py-0.5 rounded bg-slate-700/50 hover:bg-slate-600/50 text-xs cursor-pointer">▶</button>
+                      <button type="button" onClick={() => playSoundOnce(editSoundUrl!, "Preview")} className="px-1.5 py-0.5 rounded bg-slate-700/50 hover:bg-slate-600/50 text-xs cursor-pointer">▶</button>
                       <button type="button" onClick={() => setEditSoundUrl(null)} className="px-1.5 py-0.5 rounded bg-slate-700/50 hover:bg-red-800/50 text-xs cursor-pointer">✕</button>
                     </div>
                   )}
@@ -374,7 +375,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                 {item.soundUrl && (
                   <button
                     type="button"
-                    onClick={e => { e.stopPropagation(); playSoundOnce(item.soundUrl!); }}
+                    onClick={e => { e.stopPropagation(); playSoundOnce(item.soundUrl!, item.text); }}
                     className="text-[10px] text-cyan-500/60 hover:text-cyan-300 cursor-pointer relative z-10"
                   >
                     🔊
@@ -396,6 +397,9 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
       {/* Resource Browser dock */}
       <ResourceBrowser visible={showBrowser} onClose={() => setShowBrowser(false)} />
 
+      {/* Sound playback bar */}
+      <SoundPlayerBar />
+
       {/* All Items list */}
       <div className="space-y-1">
         <h4 className="text-[10px] font-mono text-slate-600 uppercase">All Items</h4>