Redesign Hope iOS UI, harden playback, and document project handoff

Sources/Features/Media/MediaPanelView.swift

@@ -14,31 +14,76 @@ struct MediaPanelView: View {
     @State private var streamURL = ""
     @State private var streamMessage: String?
     @State private var trackToDelete: MediaTrack?
+    @State private var browseMode = 0
+    @State private var showAddStream = false
+    @State private var isAddingStream = false
+    @State private var isLoadingLibrary = false
+    @State private var seekPosition: Double = 0
+    @State private var isSeeking = false
 
     var body: some View {
         ScrollView {
-            VStack(spacing: 20) {
-                if let stateError = playerController.stateError {
-                    Label(stateError, systemImage: "wifi.exclamationmark")
-                        .font(.subheadline)
-                        .foregroundStyle(.red)
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .padding(12)
-                        .background(Color.red.opacity(0.1), in: RoundedRectangle(cornerRadius: 14))
+            LazyVStack(alignment: .leading, spacing: 24) {
+                if playerController.stateError != nil {
+                    VStack(alignment: .leading, spacing: 8) {
+                        Label("Music server unavailable", systemImage: "wifi.exclamationmark")
+                            .font(.headline)
+                        Text("Check that your Hope server is running and you’re connected to its network. We’ll reconnect automatically.")
+                            .font(.subheadline).foregroundStyle(.secondary)
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                }
+                if playerController.track != nil {
+                    VStack(spacing: 20) {
+                        nowPlayingCard
+                        seekSection
+                        transportControls
+                        volumeSection
+                    }
+                    .padding(16)
+                    .background(Color(.secondarySystemGroupedBackground), in: RoundedRectangle(cornerRadius: 16))
+                }
+                if let error = playerController.playbackError {
+                    Label(error, systemImage: "exclamationmark.circle")
+                        .font(.subheadline).foregroundStyle(.red)
                 }
-                nowPlayingCard
-                transportControls
-                seekSection
-                volumeSection
                 pendingSection
                 choicesSection
-                searchSection
-                librarySection
-                addStreamSection
+                Picker("Browse music", selection: $browseMode) {
+                    Text("Library").tag(0)
+                    Text("Search").tag(1)
+                }.pickerStyle(.segmented)
+                if browseMode == 0 { librarySection }
+                else { searchSection }
             }
             .padding()
         }
-        .navigationTitle("Media")
+        .background(Color(.systemGroupedBackground))
+        .navigationTitle("Music")
+        .toolbar {
+            ToolbarItem(placement: .topBarTrailing) {
+                Button {
+                    streamMessage = nil
+                    showAddStream = true
+                } label: {
+                    Image(systemName: "plus").frame(minWidth: 44, minHeight: 44)
+                }
+                .accessibilityLabel("Add radio station")
+            }
+        }
+        .sheet(isPresented: $showAddStream) {
+            NavigationStack {
+                Form { addStreamSection }
+                    .navigationTitle("Add a station")
+                    .navigationBarTitleDisplayMode(.inline)
+                    .toolbar {
+                        ToolbarItem(placement: .cancellationAction) {
+                            Button("Cancel") { showAddStream = false }.disabled(isAddingStream)
+                        }
+                    }
+            }
+            .interactiveDismissDisabled(isAddingStream)
+        }
         .onAppear {
             playerController.startDefaultPolling()
             refreshLibrary()
@@ -60,18 +105,7 @@ struct MediaPanelView: View {
     private var nowPlayingCard: some View {
         HStack(spacing: 12) {
             if let artURL = playerController.track?.artURL, let url = URL(string: absolute(artURL)) {
-                AsyncImage(url: url) { phase in
-                    switch phase {
-                    case .success(let image):
-                        image.resizable().scaledToFill()
-                    default:
-                        Image(systemName: "music.note")
-                            .font(.title2)
-                            .foregroundStyle(.secondary)
-                            .frame(maxWidth: .infinity, maxHeight: .infinity)
-                            .background(Color(.systemGray6))
-                    }
-                }
+                PinnedArtwork(url: url)
                 .frame(width: 72, height: 72)
                 .clipShape(RoundedRectangle(cornerRadius: 10))
             } else {
@@ -92,7 +126,7 @@ struct MediaPanelView: View {
                 Text(subtitle)
                     .font(.subheadline)
                     .foregroundStyle(.secondary)
-                    .lineLimit(1)
+                    .lineLimit(2)
                 if playerController.track != nil {
                     Text(statusText)
                         .font(.caption)
@@ -101,8 +135,6 @@ struct MediaPanelView: View {
             }
             Spacer()
         }
-        .padding(12)
-        .background(Color(.secondarySystemBackground), in: RoundedRectangle(cornerRadius: 14))
     }
 
     private var transportControls: some View {
@@ -110,13 +142,15 @@ struct MediaPanelView: View {
             Button(action: seekBackward) {
                 Image(systemName: "gobackward.10")
                     .font(.title3)
+                    .frame(width: 44, height: 44)
             }
             .accessibilityLabel("Seek back 10 seconds")
-            .disabled(playerController.track == nil)
+            .disabled(playerController.duration <= 0 || playerController.track?.kind == "stream")
 
             Button(action: togglePlayPause) {
                 Image(systemName: playerController.desired == "playing" && playerController.track != nil ? "pause.circle.fill" : "play.circle.fill")
-                    .font(.system(size: 44))
+                    .font(.largeTitle)
+                    .frame(width: 56, height: 56)
                     .foregroundStyle(playerController.track == nil ? Color.secondary : Color.accentColor)
             }
             .accessibilityLabel(playerController.desired == "playing" && playerController.track != nil ? "Pause" : "Play")
@@ -125,13 +159,15 @@ struct MediaPanelView: View {
             Button(action: seekForward) {
                 Image(systemName: "goforward.10")
                     .font(.title3)
+                    .frame(width: 44, height: 44)
             }
             .accessibilityLabel("Seek forward 10 seconds")
-            .disabled(playerController.track == nil)
+            .disabled(playerController.duration <= 0 || playerController.track?.kind == "stream")
 
             Button(role: .destructive, action: stopPlayback) {
                 Image(systemName: "stop.circle")
                     .font(.title2)
+                    .frame(width: 44, height: 44)
             }
             .accessibilityLabel("Stop playback")
             .disabled(playerController.track == nil)
@@ -140,14 +176,23 @@ struct MediaPanelView: View {
 
     private var seekSection: some View {
         VStack(spacing: 4) {
-            if playerController.track != nil {
+            if playerController.track?.kind == "stream" {
+                Label("Live radio", systemImage: "dot.radiowaves.left.and.right")
+                    .font(.subheadline).foregroundStyle(.secondary)
+            } else if playerController.track != nil {
                 Slider(
                     value: Binding(
-                        get: { playerController.currentTime },
-                        set: { newValue in Task { playerController.seek(to: newValue) } }
+                        get: { min(isSeeking ? seekPosition : playerController.currentTime, max(playerController.duration, 1)) },
+                        set: { seekPosition = $0 }
                     ),
-                    in: 0...max(playerController.duration, 1)
+                    in: 0...max(playerController.duration, 1),
+                    onEditingChanged: { editing in
+                        isSeeking = editing
+                        if !editing { playerController.seek(to: seekPosition) }
+                    }
                 )
+                .disabled(playerController.duration <= 0)
+                .accessibilityLabel("Playback position")
                 HStack {
                     Text(fmtTime(playerController.currentTime))
                         .font(.caption.monospacedDigit())
@@ -172,6 +217,7 @@ struct MediaPanelView: View {
             Image(systemName: "speaker.fill")
                 .foregroundStyle(.secondary)
             Slider(value: $settings.volume, in: 0...1)
+                .accessibilityLabel("Music volume")
                 .onChange(of: settings.volume) { _, newValue in
                     playerController.setVolume(newValue)
                 }
@@ -227,15 +273,19 @@ struct MediaPanelView: View {
 
     private var searchSection: some View {
         VStack(alignment: .leading, spacing: 8) {
-            Text("Search YouTube Music")
+            Text("Find your next favorite")
                 .font(.headline)
+            Text("Search songs and artists on YouTube Music.")
+                .font(.subheadline).foregroundStyle(.secondary)
             HStack(spacing: 8) {
                 TextField("Song, artist, lyrics…", text: $searchQuery)
                     .textFieldStyle(.roundedBorder)
                     .submitLabel(.search)
                     .onSubmit(performSearch)
-                Button("Find", action: performSearch)
+                Button("Search", action: performSearch)
+                    .accessibilityIdentifier("music.search")
                     .buttonStyle(.bordered)
+                    .frame(minHeight: 44)
                     .disabled(searchQuery.trimmingCharacters(in: .whitespaces).isEmpty || isSearching)
             }
             if isSearching {
@@ -251,7 +301,7 @@ struct MediaPanelView: View {
                     .foregroundStyle(.red)
             } else if let results = searchResults {
                 if results.isEmpty {
-                    Text("No results.")
+                    Text("No matches. Try a different song or artist.")
                         .font(.subheadline)
                         .foregroundStyle(.secondary)
                 } else {
@@ -286,19 +336,24 @@ struct MediaPanelView: View {
                     .font(.headline)
                 Spacer()
                 Button(action: refreshLibrary) {
-                    Image(systemName: "arrow.clockwise")
+                    Image(systemName: "arrow.clockwise").frame(width: 44, height: 44)
                 }
+                .disabled(isLoadingLibrary)
                 .accessibilityLabel("Refresh library")
             }
-            if let libraryError {
+            if let libraryError, playerController.stateError == nil {
                 Text(libraryError)
                     .font(.subheadline)
                     .foregroundStyle(.red)
             } else if let tracks = libraryTracks {
                 if tracks.isEmpty {
-                    Text("Downloaded songs and streams live here.")
-                        .font(.subheadline)
-                        .foregroundStyle(.secondary)
+                    ContentUnavailableView {
+                        Label("A home for your favorites", systemImage: "music.note.list")
+                    } description: {
+                        Text("Search for a song to save it here, or add a radio station using the + button.")
+                    } actions: {
+                        Button("Find music") { browseMode = 1 }.buttonStyle(.bordered)
+                    }
                 } else {
                     ForEach(tracks, id: \.id) { track in
                         HStack(spacing: 8) {
@@ -319,23 +374,24 @@ struct MediaPanelView: View {
                                 Image(systemName: "xmark")
                                     .font(.subheadline.weight(.semibold))
                                     .foregroundStyle(.red)
+                                    .frame(width: 44, height: 44)
                             }
                             .accessibilityLabel("Remove \(track.title ?? track.id)")
                         }
                     }
                 }
+            } else if isLoadingLibrary {
+                ProgressView("Loading your library…").frame(maxWidth: .infinity).padding(.vertical, 24)
             }
         }
     }
 
     private var addStreamSection: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text("Add live stream")
-                .font(.headline)
+        Section {
             TextField("Station name", text: $streamName)
-                .textFieldStyle(.roundedBorder)
+                .accessibilityLabel("Station name")
             TextField("https://… audio stream URL", text: $streamURL)
-                .textFieldStyle(.roundedBorder)
+                .accessibilityLabel("Audio stream URL")
                 .keyboardType(.URL)
                 .autocorrectionDisabled()
                 .textContentType(.URL)
@@ -345,9 +401,10 @@ struct MediaPanelView: View {
                     .font(.subheadline)
                     .foregroundStyle(streamMessage.hasPrefix("Added") ? Color.green : Color.red)
             }
-            Button("Add", action: addStream)
-                .buttonStyle(.bordered)
-                .disabled(streamURL.trimmingCharacters(in: .whitespaces).isEmpty)
+            Button(isAddingStream ? "Adding station…" : "Add station", action: addStream)
+                .disabled(streamURL.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || isAddingStream)
+        } footer: {
+            Text("Use a direct MP3 or AAC audio stream address, rather than the station’s website.")
         }
     }
 
@@ -361,22 +418,22 @@ struct MediaPanelView: View {
             VStack(alignment: .leading, spacing: 2) {
                 Text(title)
                     .font(.subheadline.weight(.semibold))
-                    .lineLimit(1)
+                    .lineLimit(2)
                 if !detail.isEmpty {
                     Text(detail)
                         .font(.caption)
                         .foregroundStyle(.secondary)
-                        .lineLimit(1)
+                        .lineLimit(2)
                 }
             }
             Spacer()
-            Button("Play", action: onPlay)
-                .buttonStyle(.bordered)
-                .controlSize(.small)
+            Button(action: onPlay) {
+                Image(systemName: "play.fill").frame(width: 44, height: 44)
+            }
+                .accessibilityLabel("Play \(title)")
                 .disabled(!playEnabled)
         }
-        .padding(10)
-        .background(Color(.secondarySystemBackground), in: RoundedRectangle(cornerRadius: 12))
+        .padding(.vertical, 10)
     }
 
     private func rowDetail(channel: String?, duration: Double?, status: String? = nil, inLibrary: Bool? = nil) -> String {
@@ -389,8 +446,8 @@ struct MediaPanelView: View {
     }
 
     private func performSearch() {
-        let query = searchQuery.trimmingCharacters(in: .whitespaces)
-        guard !query.isEmpty else { return }
+        let query = searchQuery.trimmingCharacters(in: .whitespacesAndNewlines)
+        guard !query.isEmpty, !isSearching else { return }
         isSearching = true
         searchError = nil
         Task {
@@ -405,7 +462,10 @@ struct MediaPanelView: View {
     }
 
     private func refreshLibrary() {
+        guard !isLoadingLibrary else { return }
+        isLoadingLibrary = true
         Task {
+            defer { isLoadingLibrary = false }
             do {
                 let library = try await MediaAPI(config: serverConfig).library()
                 libraryTracks = library.tracks
@@ -417,15 +477,22 @@ struct MediaPanelView: View {
     }
 
     private func addStream() {
-        let url = streamURL.trimmingCharacters(in: .whitespaces)
-        guard !url.isEmpty else { return }
+        let url = streamURL.trimmingCharacters(in: .whitespacesAndNewlines)
+        guard !isAddingStream else { return }
+        guard let parsed = URL(string: url), ["https", "http"].contains(parsed.scheme?.lowercased() ?? ""), parsed.host != nil else {
+            streamMessage = "Enter a complete http:// or https:// audio stream address."
+            return
+        }
+        isAddingStream = true
         let name = streamName.trimmingCharacters(in: .whitespaces).isEmpty ? url : streamName.trimmingCharacters(in: .whitespaces)
         Task {
+            defer { isAddingStream = false }
             do {
                 try await MediaAPI(config: serverConfig).addStream(room: "default", name: name, url: url)
                 streamMessage = "Added \(name)"
                 streamName = ""
                 streamURL = ""
+                showAddStream = false
                 refreshLibrary()
             } catch {
                 streamMessage = "Could not add stream: \(error.localizedDescription)"
@@ -514,3 +581,30 @@ struct MediaPanelView: View {
         return h > 0 ? "\(h):\(String(format: "%02d", m)):\(String(format: "%02d", s))" : "\(m):\(String(format: "%02d", s))"
     }
 }
+
+/// Artwork uses the same trust policy as token and media requests.
+private struct PinnedArtwork: View {
+    let url: URL
+    @State private var artwork: UIImage?
+
+    var body: some View {
+        Group {
+            if let artwork { Image(uiImage: artwork).resizable().scaledToFill() }
+            else {
+                Image(systemName: "music.note").font(.title2).foregroundStyle(.secondary)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    .background(Color(.tertiarySystemFill))
+            }
+        }
+        .accessibilityHidden(true)
+        .task(id: url) {
+            artwork = nil
+            let session = TLSPinning.session()
+            defer { session.invalidateAndCancel() }
+            guard let (data, response) = try? await session.data(from: url),
+                  (response as? HTTPURLResponse)?.statusCode == 200,
+                  !Task.isCancelled else { return }
+            artwork = UIImage(data: data)
+        }
+    }
+}