version bump, 1.5.2

- Adds paste button
- Fix autofocus behavior (using UIKit)
- Remove pointless sheet detents

ios/QueueCube.xcodeproj/project.pbxproj

@@ -14,6 +14,7 @@
 		CD8ACBBF2DC5B8F2008BF856 /* Exceptions for "QueueCube" folder in "QueueCube" target */ = {
 			isa = PBXFileSystemSynchronizedBuildFileExceptionSet;
 			membershipExceptions = (
+				App/Entitlements.plist,
 				App/Info.plist,
 			);
 			target = CD4E9B962D7691C20066FC17 /* QueueCube */;
@@ -268,7 +269,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 5;
+				CURRENT_PROJECT_VERSION = 12;
 				DEVELOPMENT_TEAM = DQQH5H6GBD;
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -283,7 +284,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.2;
+				MARKETING_VERSION = 1.5.2;
 				PRODUCT_BUNDLE_IDENTIFIER = net.buzzert.QueueCube;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";
@@ -304,7 +305,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 5;
+				CURRENT_PROJECT_VERSION = 12;
 				DEVELOPMENT_TEAM = DQQH5H6GBD;
 				ENABLE_PREVIEWS = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -319,7 +320,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.2;
+				MARKETING_VERSION = 1.5.2;
 				PRODUCT_BUNDLE_IDENTIFIER = net.buzzert.QueueCube;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SUPPORTED_PLATFORMS = "iphoneos iphonesimulator";

ios/QueueCube/Backend/API.swift

@@ -16,9 +16,19 @@ struct MediaItem: Codable
     let current: Bool?
     let playing: Bool?
     let metadata: Metadata?
+    let playbackError: String?
     
     var displayTitle: String {
-        metadata?.title ?? title ?? filename ?? "item \(id)"
+        metadata?.title ?? title ?? displayFilename ?? "item \(id)"
+    }
+    
+    private var displayFilename: String? {
+        guard let filename else { return nil }
+        if let url = URL(string: filename) {
+            return url.lastPathComponent
+        }
+        
+        return filename
     }
     
     // MARK: - Types
@@ -234,8 +244,6 @@ actor API
     private static func notifyError(_ error: any Swift.Error, continuation: AsyncStream<StreamEvent>.Continuation) {
         print("Websocket Error: \(error)")
 
-        let nsError = error as NSError
-
         // Always notify observers of WebSocket errors so reconnection can happen
         // The UI layer can decide whether to show the error to the user
         continuation.yield(.error(.websocketError(error)))
@@ -273,6 +281,7 @@ actor API
             case favoritesUpdate     = "favorites_update"
             case metadataUpdate      = "metadata_update"
             case mpdUpdate           = "mpd_update"
+            case playbackError       = "playback_error"
             
             // Private UI events
             case receivedWebsocketPong

ios/QueueCube/Localizable/Localizable.xcstrings

@@ -104,6 +104,16 @@
         }
       }
     },
+    "DELETE" : {
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Delete"
+          }
+        }
+      }
+    },
     "DISCOVERED" : {
       "localizations" : {
         "en" : {
@@ -247,6 +257,16 @@
     },
     "Nothing here yet." : {
 
+    },
+    "PLAYBACK_ERROR" : {
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Playback Error"
+          }
+        }
+      }
     },
     "PLAYLIST" : {
       "localizations" : {
@@ -360,6 +380,16 @@
         }
       }
     },
+    "Unknown error" : {
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Unknown Error"
+          }
+        }
+      }
+    },
     "URL" : {
       "localizations" : {
         "en" : {

ios/QueueCube/Localizable/Strings.swift

@@ -46,4 +46,6 @@ extension LocalizedStringKey
     static let notPlaying             = LocalizedStringKey("NOT_PLAYING")
     static let url                    = LocalizedStringKey("URL")
     static let title                  = LocalizedStringKey("TITLE")
+    static let playbackError          = LocalizedStringKey("PLAYBACK_ERROR")
+    static let delete                 = LocalizedStringKey("DELETE")
 }

ios/QueueCube/Views/AddMediaView.swift

@@ -10,17 +10,23 @@ import SwiftUI
 struct AddMediaView: View
 {
     @Binding var model: ViewModel
-    @FocusState var fieldFocused: Bool
     
     var body: some View {
         NavigationStack {
             Form {
                 // Add URL
                 Section {
-                    TextField(.addAnyURL, text: $model.fieldContents)
-                        .autocapitalization(.none)
-                        .autocorrectionDisabled()
-                        .focused($fieldFocused)
+                    HStack {
+                        AutofocusingTextField(String(localized: "ADD_ANY_URL"), text: $model.fieldContents)
+                            .autocapitalization(.none)
+                            .autocorrectionDisabled()
+                        
+                        PasteButton(payloadType: String.self) { payload in
+                            guard let contents = payload.first else { return }
+                            model.fieldContents = contents
+                        }
+                        .labelStyle(.iconOnly)
+                    }
                 }
                 
                 if model.supportsSearch {
@@ -35,8 +41,6 @@ struct AddMediaView: View
                     }
                 }
             }
-            .task { fieldFocused = true }
-            .onAppear { model.activeDetent = ViewModel.Detent.collapsed.value }
             .navigationTitle(.addMedia)
             .navigationBarTitleDisplayMode(.inline)
             .toolbar {
@@ -72,21 +76,6 @@ struct AddMediaView: View
         var onSearch: () -> Void    =   { }
         var supportsSearch: Bool = true
         
-        var activeDetent: PresentationDetent = Detent.collapsed.value
-        
-        enum Detent: CaseIterable
-        {
-            case collapsed
-            case expanded
-            
-            var value: PresentationDetent {
-                switch self {
-                    case .collapsed: .height(320.0)
-                    case .expanded: .large
-                }
-            }
-        }
-        
         fileprivate func addButtonTapped() {
             onAdd(fieldContents)
         }
@@ -107,11 +96,8 @@ struct SearchMediaView: View
                 Image(systemName: "magnifyingglass")
                     .foregroundColor(.secondary)
                 
-                TextField(.searchForMedia, text: $searchText)
+                AutofocusingTextField(String(localized: "SEARCH_FOR_MEDIA"), text: $searchText, onSubmit: performSearch)
                     .focused($searchFieldFocused)
-                    .onSubmit {
-                        performSearch()
-                    }
                 
                 if !searchText.isEmpty {
                     Button {
@@ -153,7 +139,6 @@ struct SearchMediaView: View
         .navigationTitle(.searchForMedia)
         .presentationBackground(.regularMaterial)
         .onAppear {
-            model.activeDetent = AddMediaView.ViewModel.Detent.expanded.value
             searchFieldFocused = true
         }
     }

ios/QueueCube/Views/AutofocusingTextField.swift

@@ -0,0 +1,71 @@
+//
+//  AutofocusingTextField.swift
+//  QueueCube
+//
+//  Created by James Magahern on 11/15/25.
+//
+
+import SwiftUI
+import UIKit
+
+/// Stupid: it appears to be impossible to make it so SwiftUI's `.focused(_:)` modifier takes place during the
+/// presentation of a sheet, so this needs to exist just to make sure it's made first responder as soon as it moves to
+/// the view hierarchy.
+struct AutofocusingTextField: UIViewRepresentable
+{
+    let placeholder: String
+    @Binding var text: String
+    var onSubmit: () -> Void = {}
+
+    init(_ placeholder: String, text: Binding<String>, onSubmit: @escaping () -> Void = {}) {
+        self.placeholder = placeholder
+        self._text = text
+        self.onSubmit = onSubmit
+    }
+
+    func makeUIView(context: Context) -> UITextField {
+        let tf = FirstResponderTextField()
+        tf.placeholder = placeholder
+        tf.delegate = context.coordinator
+        tf.returnKeyType = .done
+        tf.setContentHuggingPriority(.defaultHigh, for: .vertical)
+        tf.autocorrectionType = .no
+        tf.autocapitalizationType = .none
+        return tf
+    }
+
+    func updateUIView(_ uiView: UITextField, context: Context) {
+        if uiView.text != text {
+            uiView.text = text
+        }
+        context.coordinator.parent = self   // keep latest onSubmit/text binding
+    }
+
+    func makeCoordinator() -> Coordinator {
+        Coordinator(parent: self)
+    }
+
+    final class Coordinator: NSObject, UITextFieldDelegate {
+        var parent: AutofocusingTextField
+
+        init(parent: AutofocusingTextField) {
+            self.parent = parent
+        }
+
+        func textFieldDidChangeSelection(_ textField: UITextField) {
+            parent.text = textField.text ?? ""
+        }
+
+        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+            parent.onSubmit()
+            return true
+        }
+    }
+}
+
+final class FirstResponderTextField: UITextField {
+    override func didMoveToSuperview() {
+        super.didMoveToSuperview()
+        becomeFirstResponder()
+    }
+}

ios/QueueCube/Views/ContentView.swift

@@ -29,10 +29,6 @@ struct ContentView: View
             .sheet(isPresented: $model.isAddMediaSheetPresented) {
                 AddMediaView(model: $model.addMediaViewModel)
                     .presentationBackground(.regularMaterial)
-                    .presentationDetents(
-                        Set(AddMediaView.ViewModel.Detent.allCases.map { $0.value }),
-                        selection: $model.addMediaViewModel.activeDetent
-                    )
             }
             .sheet(isPresented: $model.isEditSheetPresented) {
                 EditItemView(model: $model.editMediaViewModel)
@@ -91,7 +87,8 @@ extension ContentView
                         title: mediaItem.displayTitle,
                         filename: mediaItem.filename ?? "<null>",
                         index: idx,
-                        isCurrent: mediaItem.current ?? false
+                        isCurrent: mediaItem.current ?? false,
+                        playbackError: mediaItem.playbackError
                     )
                 }
             }
@@ -104,7 +101,8 @@ extension ContentView
                         id: String(mediaItem.id),
                         title: mediaItem.displayTitle,
                         filename: mediaItem.filename ?? "<null>",
-                        isCurrent: nowPlaying.playingItem?.filename == mediaItem.filename
+                        isCurrent: nowPlaying.playingItem?.filename == mediaItem.filename,
+                        playbackError: mediaItem.playbackError
                     )
                 }
             }
@@ -121,9 +119,15 @@ extension ContentView
                         await clearConnectionErrorIfNecessary()
                         await handle(event: event)
                     case .error(let error):
+                        // Ignore if we're in the bg
+                        guard scenePhase == .active else { break }
+                    
                         // Check if this is a backgrounding error (connection abort)
-                        let nsError = error as NSError
-                        let isBackgroundingError = nsError.code == 53
+                        var isBackgroundingError = false
+                        if case let .websocketError(wsError) = error {
+                            let nsError = wsError as NSError
+                            isBackgroundingError = nsError.code == 53
+                        }
 
                         // Only show connection error to user if it's not a backgrounding error
                         if !isBackgroundingError {
@@ -158,7 +162,8 @@ extension ContentView
             
         case .websocketReconnected: fallthrough
         case .metadataUpdate: fallthrough
-        case .mpdUpdate:
+        case .mpdUpdate: fallthrough
+        case .playbackError:
             await refresh([.playlist, .nowPlaying, .favorites])
 
         case .receivedWebsocketPong:

ios/QueueCube/Views/MainView.swift

@@ -325,18 +325,9 @@ struct ServerSelectionToolbarModifier: ViewModifier
                                 }
                             }
                         }
-                        
-                        #if false
-                        // TODO
-                        Section {
-                            Button(.addServer) {
-                                
-                            }
-                        }
-                        #endif
                     } label: {
                         Label(model.selectedServer?.displayName ?? "Servers", systemImage: "chevron.down")
-                            .labelStyle(.titleAndIcon)
+                            .labelStyle(.titleOnly)
                     }
                     .buttonBorderShape(.capsule)
                     .buttonStyle(.bordered)

ios/QueueCube/Views/NowPlayingView.swift

@@ -41,16 +41,16 @@ struct NowPlayingView: View
                 VStack {
                     if let title = model.title {
                         Text(title)
-                            .font(.title2)
+                            .font(.title3)
                             .lineLimit(1)
                             .bold()
                     }
                     
                     if let subtitle = model.subtitle {
                         Text(subtitle)
-                            .font(.title3)
+                            .font(.subheadline)
                             .foregroundStyle(.secondary)
-                            .lineLimit(1)
+                            .lineLimit(2)
                     }
                     
                     if nothingQueued {

ios/QueueCube/Views/PlaylistView.swift

@@ -14,17 +14,19 @@ struct MediaListItem: Identifiable
     let filename: String
     let index: Int?
     let isCurrent: Bool
+    let playbackError: String?
     
     var id: String {
         _id + filename // temporary: we get duplicate ids from the server sometimes...
     }
     
-    init(id: String, title: String, filename: String, index: Int? = nil, isCurrent: Bool = false) {
+    init(id: String, title: String, filename: String, index: Int? = nil, isCurrent: Bool = false, playbackError: String? = nil) {
         self._id = id
         self.title = title
         self.filename = filename
         self.index = index
         self.isCurrent = isCurrent
+        self.playbackError = playbackError
     }
 }
 
@@ -45,6 +47,7 @@ class MediaListViewModel
     var onQueue:    (MediaListItem) -> Void = { _ in }
     var onEdit:     (MediaListItem) -> Void = { _ in }
     var onFavorite: (MediaListItem) -> Void = { _ in }
+    var onDelete:   (MediaListItem) -> Void = { _ in }
     
     init(mode: MediaListMode) {
         self.mode = mode
@@ -54,6 +57,8 @@ class MediaListViewModel
 struct MediaListView: View
 {
     @Binding var model: MediaListViewModel
+    @State private var errorAlertItem: MediaListItem? = nil
+    @State private var isShowingErrorAlert: Bool = false
 
     var body: some View {
         VStack {
@@ -70,20 +75,29 @@ struct MediaListView: View
                     let state = item.isCurrent ? (model.isPlaying ? MediaItemCell.State.playing : MediaItemCell.State.paused) : .queued
 
                     Button {
-                        switch model.mode {
-                        case .playlist:
-                            model.onSeek(item)
-                        case .favorites:
-                            model.onPlay(item)
+                        if let _ = item.playbackError {
+                            errorAlertItem = item
+                            isShowingErrorAlert = true
+                        } else {
+                            switch model.mode {
+                            case .playlist:
+                                model.onSeek(item)
+                            case .favorites:
+                                model.onPlay(item)
+                            }
                         }
                     } label: {
                         MediaItemCell(
                             title: item.title,
                             subtitle: item.filename,
-                            state: state
+                            state: state,
+                            playbackError: item.playbackError
                         )
                     }
-                    .listRowBackground((model.mode == .playlist && state != .queued) ? Color.accentColor.opacity(0.10) : nil)
+                    .listRowBackground(
+                        item.playbackError != nil ? Color.red.opacity(0.15) :
+                        (model.mode == .playlist && state != .queued ? Color.accentColor.opacity(0.10) : nil)
+                    )
                     .contextMenu {
                         Button(.copyTitle) {
                             UIPasteboard.general.string = item.title
@@ -123,6 +137,20 @@ struct MediaListView: View
                         }
                     }
                 }
+                .alert(.playbackError, isPresented: $isShowingErrorAlert, presenting: errorAlertItem) { item in
+                    Button(.cancel, role: .cancel) {
+                        errorAlertItem = nil
+                        isShowingErrorAlert = false
+                    }
+                    Button(.delete, role: .destructive) {
+                        model.items.removeAll { $0.id == item.id }
+                        model.onDelete(item)
+                        errorAlertItem = nil
+                        isShowingErrorAlert = false
+                    }
+                } message: { item in
+                    Text(item.playbackError ?? "Unknown error")
+                }
             }
         }
     }
@@ -134,26 +162,24 @@ struct MediaItemCell: View
     let title: String
     let subtitle: String
     let state: State
+    let playbackError: String?
 
     var body: some View {
-        let icon: String = switch state {
-            case .queued: "play.fill"
-            case .playing: "speaker.wave.3.fill"
-            case .paused: "speaker.fill"
-        }
-        
         HStack {
-            Image(systemName: icon)
-                .tint(Color.primary)
+            Image(systemName: iconName)
+                .tint(playbackError == nil ? Color.primary : Color.orange)
                 .frame(width: 15.0)
                 .padding(.trailing, 10.0)
             
             VStack(alignment: .leading) {
                 Text(title)
+                    .bold()
+                    .font(.subheadline)
                     .tint(.primary)
                     .lineLimit(1)
                 
                 Text(subtitle)
+                    .font(.caption)
                     .foregroundColor(.secondary)
                     .lineLimit(1)
             }
@@ -161,6 +187,19 @@ struct MediaItemCell: View
             Spacer()
         }
         .padding([.top, .bottom], 4.0)
+        .frame(minHeight: 44.0)
+    }
+    
+    private var iconName: String {
+        if playbackError != nil {
+            return "exclamationmark.triangle.fill"
+        }
+        
+        switch state {
+            case .queued:  return "play.fill"
+            case .playing: return "speaker.wave.3.fill"
+            case .paused:  return "speaker.fill"
+        }
     }
     
     // MARK: - Types
@@ -171,4 +210,3 @@ struct MediaItemCell: View
         case paused
     }
 }
-

web/backend/src/MediaPlayer.ts

@@ -37,6 +37,7 @@ enum UserEvent {
     FavoritesUpdate     = "favorites_update",
     MetadataUpdate      = "metadata_update",
     MPDUpdate           = "mpd_update",
+    PlaybackError       = "playback_error",
 }
 
 export interface Features {
@@ -57,6 +58,9 @@ export class MediaPlayer {
     private dataBuffer: string = '';
     private metadata: Map<string, LinkMetadata> = new Map();
     private bonjourInstance: Bonjour | null = null;
+    private playbackErrors: Map<string, string> = new Map();
+    private currentFile: string | null = null;
+    private lastLoadCandidate: string | null = null;
 
     constructor() {
         this.socket = this.tryRespawnPlayerProcess();
@@ -152,7 +156,8 @@ export class MediaPlayer {
                 const playlist = response.data as PlaylistItem[];
                 return playlist.map((item: PlaylistItem) => ({
                     ...item,
-                    metadata: this.metadata.get(item.filename) || {}
+                    metadata: this.metadata.get(item.filename) || {},
+                    playbackError: this.playbackErrors.get(item.filename)
                 }));
             });
     }
@@ -352,6 +357,8 @@ export class MediaPlayer {
     }
 
     private async loadFile(url: string, mode: string, fetchMetadata: boolean = true, options: string[] = []) {
+        this.lastLoadCandidate = url;
+        this.playbackErrors.delete(url);
         this.modify(UserEvent.PlaylistUpdate, () => this.writeCommand("loadfile", [url, mode, "-1", options.join(',')]));
 
         if (fetchMetadata) {
@@ -470,6 +477,24 @@ export class MediaPlayer {
                             this.pendingCommands.delete(response.request_id);
                         }
                     } else if (response.event) {
+                        if (response.event === "start-file") {
+                            // Clear any previous error for the file that is starting
+                            const file = response.file || this.lastLoadCandidate;
+                            if (file) {
+                                this.currentFile = file;
+                                this.playbackErrors.delete(file);
+                            }
+                        } else if (response.event === "end-file" && response.reason === "error") {
+                            const file = response.file || this.currentFile || this.lastLoadCandidate || "Unknown file";
+                            const errorMessage = response.error || response["file-error"] || "Unknown playback error";
+
+                            this.playbackErrors.set(file, errorMessage);
+                            this.handleEvent(UserEvent.PlaybackError, {
+                                filename: file,
+                                error: errorMessage
+                            });
+                        }
+
                         this.handleEvent(UserEvent.MPDUpdate, response);
                     } else {
                         console.log(response);

web/backend/src/types.ts

@@ -29,4 +29,5 @@ export interface PlaylistItem {
     playing?: boolean;
     current?: boolean;
     metadata?: LinkMetadata;
+    playbackError?: string;
 }

web/frontend/src/api/player.tsx

@@ -28,6 +28,7 @@ export interface PlaylistItem {
   id: number;
   playing: boolean | null;
   metadata?: Metadata;
+  playbackError?: string;
 }
 
 export const getDisplayTitle = (item: PlaylistItem): string => {
@@ -62,6 +63,7 @@ export enum ServerEvent {
   FavoritesUpdate     = "favorites_update",
   MetadataUpdate      = "metadata_update",
   MPDUpdate           = "mpd_update",
+  PlaybackError       = "playback_error",
   ScreenShare         = "screen_share",
 }
 

web/frontend/src/components/App.tsx

@@ -199,6 +199,7 @@ const App: React.FC = () => {
       case ServerEvent.NowPlayingUpdate:
       case ServerEvent.MetadataUpdate:
       case ServerEvent.MPDUpdate:
+      case ServerEvent.PlaybackError:
         fetchPlaylist();
         fetchNowPlaying();
         break;

web/frontend/src/components/SongRow.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useState, useRef, useEffect, ReactNode } from 'react';
-import { FaPlay, FaVolumeUp, FaVolumeOff } from 'react-icons/fa';
+import { FaPlay, FaVolumeUp, FaVolumeOff, FaExclamationTriangle } from 'react-icons/fa';
 import { getDisplayTitle, PlaylistItem } from '../api/player';
 
 export enum PlayState {
@@ -19,6 +19,7 @@ export interface SongRowProps {
 
 const SongRow: React.FC<SongRowProps> = ({ song, auxControl, playState, onDelete, onPlay }) => {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showErrorDetails, setShowErrorDetails] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   
   useEffect(() => {
@@ -38,6 +39,7 @@ const SongRow: React.FC<SongRowProps> = ({ song, auxControl, playState, onDelete
   }, [showDeleteConfirm]);
   
   const displayTitle = getDisplayTitle(song);
+  const hasError = !!song.playbackError;
   
   return (
     <div className={classNames(
@@ -46,16 +48,46 @@ const SongRow: React.FC<SongRowProps> = ({ song, auxControl, playState, onDelete
       "bg-black/30": playState === PlayState.NotPlaying,
     })}>
       <div className="flex flex-row gap-2">
-        <button 
-          className="text-white/40 hover:text-white transition-colors px-3 py-1 rounded"
-          onClick={onPlay}
-        >
-          {
-            playState === PlayState.Playing ? <FaVolumeUp size={12} /> 
-            : playState === PlayState.Paused ? <FaVolumeOff size={12} /> 
-            : <FaPlay size={12} />
-          }
-        </button>
+        <div className="relative">
+          <button 
+            className={classNames(
+              "transition-colors px-3 py-1 rounded", 
+              hasError ? "text-amber-300 hover:text-amber-100" : "text-white/40 hover:text-white"
+            )}
+            onClick={() => {
+              if (hasError) {
+                setShowErrorDetails((prev) => !prev);
+              } else {
+                onPlay();
+              }
+            }}
+            onMouseEnter={() => {
+              if (hasError) {
+                setShowErrorDetails(true);
+              }
+            }}
+            onMouseLeave={() => {
+              if (hasError) {
+                setShowErrorDetails(false);
+              }
+            }}
+            title={hasError ? song.playbackError : undefined}
+          >
+            {
+              hasError ? <FaExclamationTriangle size={12} /> : 
+              playState === PlayState.Playing ? <FaVolumeUp size={12} /> 
+              : playState === PlayState.Paused ? <FaVolumeOff size={12} /> 
+              : <FaPlay size={12} />
+            }
+          </button>
+
+          {hasError && showErrorDetails && (
+            <div className="absolute z-10 top-full left-0 mt-1 w-64 p-2 text-xs text-white bg-red-600/90 rounded shadow-lg">
+              <div className="font-semibold mb-1">Playback error</div>
+              <div className="break-words">{song.playbackError}</div>
+            </div>
+          )}
+        </div>
       </div>
       
       <div className="flex-grow min-w-0">