Add buffering state with loading overlay on artwork and improved cell updates

fethica · fethica · commit 0e6844bcf5dd · 2026-02-03T21:03:25.000-05:00
diff --git a/SwiftRadio/Cells/StationTableViewCell.swift b/SwiftRadio/Cells/StationTableViewCell.swift
@@ -12,6 +12,7 @@ import NVActivityIndicatorView
 class StationTableViewCell: UITableViewCell {
 
     // MARK: - UI
+    private var representedStation: RadioStation?
 
     private let cardBlurView: UIVisualEffectView = {
         let blur = UIBlurEffect(style: .systemUltraThinMaterialDark)
@@ -107,6 +108,22 @@ class StationTableViewCell: UITableViewCell {
         return view
     }()
 
+    private let bufferingOverlay: UIView = {
+        let view = UIView()
+        view.backgroundColor = UIColor.black.withAlphaComponent(0.5)
+        view.layer.cornerRadius = 12
+        view.clipsToBounds = true
+        view.alpha = 0
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    private let bufferingIndicator: NVActivityIndicatorView = {
+        let view = NVActivityIndicatorView(frame: .zero, type: .ballPulse, color: .white, padding: nil)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
     private var isAnimatingPulse = false
 
     // MARK: - Init
@@ -122,13 +139,16 @@ class StationTableViewCell: UITableViewCell {
 
     override func prepareForReuse() {
         super.prepareForReuse()
+        representedStation = nil
         titleLabel.text = nil
         subtitleLabel.text = nil
         stationImageView.image = nil
         stopPulseAnimation()
         pulseRingView.alpha = 0
         equalizerView.stopAnimating()
         equalizerView.alpha = 0
+        bufferingIndicator.stopAnimating()
+        bufferingOverlay.alpha = 0
     }
 
     // MARK: - Highlight / Tap Feedback
@@ -160,6 +180,8 @@ class StationTableViewCell: UITableViewCell {
         artworkContainer.addSubview(artworkShadowView)
         artworkContainer.addSubview(pulseRingView)
         artworkContainer.addSubview(stationImageView)
+        artworkContainer.addSubview(bufferingOverlay)
+        bufferingOverlay.addSubview(bufferingIndicator)
 
         // Subtitle stack: label + equalizer
         subtitleStack.addArrangedSubview(equalizerView)
@@ -223,25 +245,51 @@ class StationTableViewCell: UITableViewCell {
             pulseRingView.bottomAnchor.constraint(equalTo: stationImageView.bottomAnchor, constant: -pulseInset),
             pulseRingView.leadingAnchor.constraint(equalTo: stationImageView.leadingAnchor, constant: pulseInset),
             pulseRingView.trailingAnchor.constraint(equalTo: stationImageView.trailingAnchor, constant: -pulseInset),
+
+            // Buffering overlay on top of image
+            bufferingOverlay.topAnchor.constraint(equalTo: stationImageView.topAnchor),
+            bufferingOverlay.bottomAnchor.constraint(equalTo: stationImageView.bottomAnchor),
+            bufferingOverlay.leadingAnchor.constraint(equalTo: stationImageView.leadingAnchor),
+            bufferingOverlay.trailingAnchor.constraint(equalTo: stationImageView.trailingAnchor),
+            bufferingIndicator.centerXAnchor.constraint(equalTo: bufferingOverlay.centerXAnchor),
+            bufferingIndicator.centerYAnchor.constraint(equalTo: bufferingOverlay.centerYAnchor),
+            bufferingIndicator.widthAnchor.constraint(equalToConstant: 30),
+            bufferingIndicator.heightAnchor.constraint(equalToConstant: 20),
         ])
     }
 
     // MARK: - Now Playing
 
-    func setNowPlaying(isPlaying: Bool, isCurrentStation: Bool) {
+    func setNowPlaying(isPlaying: Bool, isBuffering: Bool, isCurrentStation: Bool) {
         guard isCurrentStation else {
             stopPulseAnimation()
             pulseRingView.alpha = 0
             equalizerView.stopAnimating()
             equalizerView.alpha = 0
+            bufferingIndicator.stopAnimating()
+            bufferingOverlay.alpha = 0
             return
         }
 
-        if isPlaying {
+        if isBuffering {
+            // Dark overlay + buffering indicator on artwork
+            stopPulseAnimation()
+            pulseRingView.alpha = 0
+            equalizerView.stopAnimating()
+            equalizerView.alpha = 0
+            bufferingIndicator.startAnimating()
+            bufferingOverlay.alpha = 1
+        } else if isPlaying {
+            // Pulse ring + equalizer
+            bufferingIndicator.stopAnimating()
+            bufferingOverlay.alpha = 0
             startPulseAnimation()
             equalizerView.startAnimating()
             equalizerView.alpha = 0.7
         } else {
+            // Stopped — subtle indicators
+            bufferingIndicator.stopAnimating()
+            bufferingOverlay.alpha = 0
             stopPulseAnimation()
             pulseRingView.alpha = 0.25
             pulseRingView.transform = .identity
@@ -277,11 +325,13 @@ class StationTableViewCell: UITableViewCell {
 
 extension StationTableViewCell {
     func configureStationCell(station: RadioStation) {
+        representedStation = station
         titleLabel.text = station.name
         subtitleLabel.text = station.desc
 
         station.getImage { [weak self] image in
-            self?.stationImageView.image = image
+            guard let self = self, self.representedStation == station else { return }
+            self.stationImageView.image = image
         }
     }
 }
diff --git a/SwiftRadio/ViewControllers/NowPlayingViewController.swift b/SwiftRadio/ViewControllers/NowPlayingViewController.swift
@@ -117,8 +117,13 @@ class NowPlayingViewController: UIViewController {
 
     func playerStateDidChange(_ state: FRadioPlayer.State) {
         switch state {
+        case .loading:
+            albumArtworkView.setBuffering(true)
         case .readyToPlay, .loadingFinished:
+            albumArtworkView.setBuffering(false)
             playbackStateDidChange(player.playbackState)
+        case .error:
+            albumArtworkView.setBuffering(false)
         default:
             break
         }
diff --git a/SwiftRadio/ViewControllers/StationsViewController.swift b/SwiftRadio/ViewControllers/StationsViewController.swift
@@ -40,13 +40,37 @@ class StationsViewController: BaseController, Handoffable {
         return controller
     }()
 
-    private let animationView: NVActivityIndicatorView = {
-        let activityIndicatorView = NVActivityIndicatorView(frame: .zero, type: .audioEqualizer, color: .white, padding: nil)
+    private var isBuffering = false
+
+    private let equalizerView: NVActivityIndicatorView = {
+        let view = NVActivityIndicatorView(frame: .zero, type: .audioEqualizer, color: .white, padding: nil)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    private let bufferingView: NVActivityIndicatorView = {
+        let view = NVActivityIndicatorView(frame: .zero, type: .ballPulse, color: .white, padding: nil)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    private lazy var nowPlayingIndicator: UIView = {
+        let container = UIView()
+        container.addSubview(equalizerView)
+        container.addSubview(bufferingView)
         NSLayoutConstraint.activate([
-            activityIndicatorView.widthAnchor.constraint(equalToConstant: 30),
-            activityIndicatorView.heightAnchor.constraint(equalToConstant: 20)
+            container.widthAnchor.constraint(equalToConstant: 30),
+            container.heightAnchor.constraint(equalToConstant: 20),
+            equalizerView.centerXAnchor.constraint(equalTo: container.centerXAnchor),
+            equalizerView.centerYAnchor.constraint(equalTo: container.centerYAnchor),
+            equalizerView.widthAnchor.constraint(equalTo: container.widthAnchor),
+            equalizerView.heightAnchor.constraint(equalTo: container.heightAnchor),
+            bufferingView.centerXAnchor.constraint(equalTo: container.centerXAnchor),
+            bufferingView.centerYAnchor.constraint(equalTo: container.centerYAnchor),
+            bufferingView.widthAnchor.constraint(equalTo: container.widthAnchor),
+            bufferingView.heightAnchor.constraint(equalTo: container.heightAnchor),
         ])
-        return activityIndicatorView
+        return container
     }()
 
     private lazy var tableView: UITableView = {
@@ -114,20 +138,45 @@ class StationsViewController: BaseController, Handoffable {
         }
 
         guard navigationItem.rightBarButtonItem == nil else { return }
-        let barButton = UIBarButtonItem(customView: animationView)
+        let barButton = UIBarButtonItem(customView: nowPlayingIndicator)
         barButton.target = self
         barButton.action = #selector(nowPlayingBarButtonPressed)
 
         let tapGesture = UITapGestureRecognizer(target: self, action: #selector(nowPlayingBarButtonPressed))
-        animationView.addGestureRecognizer(tapGesture)
-        animationView.isUserInteractionEnabled = true
+        nowPlayingIndicator.addGestureRecognizer(tapGesture)
+        nowPlayingIndicator.isUserInteractionEnabled = true
 
         navigationItem.rightBarButtonItem = barButton
-        startNowPlayingAnimation(player.isPlaying)
+        updateNowPlayingAnimation()
     }
 
-    private func startNowPlayingAnimation(_ animate: Bool) {
-        animate ? animationView.startAnimating() : animationView.stopAnimating()
+    private func updateNowPlayingAnimation() {
+        if isBuffering {
+            equalizerView.stopAnimating()
+            bufferingView.startAnimating()
+        } else if player.isPlaying {
+            bufferingView.stopAnimating()
+            equalizerView.startAnimating()
+        } else {
+            equalizerView.stopAnimating()
+            bufferingView.stopAnimating()
+        }
+    }
+
+    private func updateVisibleCellsNowPlaying() {
+        if !Thread.isMainThread {
+            DispatchQueue.main.async { [weak self] in
+                self?.updateVisibleCellsNowPlaying()
+            }
+            return
+        }
+
+        for case let cell as StationTableViewCell in tableView.visibleCells {
+            guard let indexPath = tableView.indexPath(for: cell) else { continue }
+            let station = searchController.isActive ? manager.searchedStations[indexPath.row] : manager.stations[indexPath.row]
+            let isCurrentStation = station == manager.currentStation
+            cell.setNowPlaying(isPlaying: player.isPlaying, isBuffering: isBuffering, isCurrentStation: isCurrentStation)
+        }
     }
 
     @objc private func nowPlayingBarButtonPressed() {
@@ -162,7 +211,7 @@ class StationsViewController: BaseController, Handoffable {
 extension StationsViewController: UITableViewDataSource {
 
     func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
-        100.0
+        104.0
     }
 
     func numberOfSections(in tableView: UITableView) -> Int {
@@ -189,7 +238,8 @@ extension StationsViewController: UITableViewDataSource {
 
             let station = searchController.isActive ? manager.searchedStations[indexPath.row] : manager.stations[indexPath.row]
             cell.configureStationCell(station: station)
-            cell.setNowPlaying(isPlaying: player.isPlaying, isCurrentStation: station == manager.currentStation)
+            let isCurrentStation = station == manager.currentStation
+            cell.setNowPlaying(isPlaying: player.isPlaying, isBuffering: isBuffering, isCurrentStation: isCurrentStation)
             return cell
         }
     }
@@ -232,9 +282,22 @@ extension StationsViewController: UISearchResultsUpdating {
 
 extension StationsViewController: FRadioPlayerObserver {
 
+    func radioPlayer(_ player: FRadioPlayer, playerStateDidChange state: FRadioPlayer.State) {
+        switch state {
+        case .loading:
+            isBuffering = true
+        case .readyToPlay, .loadingFinished, .error:
+            isBuffering = false
+        default:
+            break
+        }
+        updateNowPlayingAnimation()
+        updateVisibleCellsNowPlaying()
+    }
+
     func radioPlayer(_ player: FRadioPlayer, playbackStateDidChange state: FRadioPlayer.PlaybackState) {
-        startNowPlayingAnimation(player.isPlaying)
-        tableView.reloadData()
+        updateNowPlayingAnimation()
+        updateVisibleCellsNowPlaying()
     }
 
     func radioPlayer(_ player: FRadioPlayer, metadataDidChange metadata: FRadioPlayer.Metadata?) {
@@ -249,7 +312,7 @@ extension StationsViewController: StationsManagerObserver {
     }
 
     func stationsManager(_ manager: StationsManager, stationDidChange station: RadioStation?) {
+        updateVisibleCellsNowPlaying()
         updateNowPlayingBarButton(station: station)
-        tableView.reloadData()
     }
 }
diff --git a/SwiftRadio/Views/AlbumArtworkView.swift b/SwiftRadio/Views/AlbumArtworkView.swift
@@ -8,6 +8,7 @@
 
 import UIKit
 import Spring
+import NVActivityIndicatorView
 
 class AlbumArtworkView: UIView {
 
@@ -26,6 +27,19 @@ class AlbumArtworkView: UIView {
         return view
     }()
 
+    private let bufferingOverlay: UIView = {
+        let view = UIView()
+        view.backgroundColor = UIColor.black.withAlphaComponent(0.4)
+        view.alpha = 0
+        return view
+    }()
+
+    private let bufferingIndicator: NVActivityIndicatorView = {
+        let view = NVActivityIndicatorView(frame: .zero, type: .ballPulse, color: .white, padding: nil)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
     override init(frame: CGRect) {
         super.init(frame: frame)
         setupViews()
@@ -45,6 +59,16 @@ class AlbumArtworkView: UIView {
         }
     }
 
+    func setBuffering(_ isBuffering: Bool) {
+        if isBuffering {
+            bufferingIndicator.startAnimating()
+            UIView.animate(withDuration: 0.3) { self.bufferingOverlay.alpha = 1 }
+        } else {
+            UIView.animate(withDuration: 0.3) { self.bufferingOverlay.alpha = 0 }
+            bufferingIndicator.stopAnimating()
+        }
+    }
+
     func setPlaying(_ isPlaying: Bool) {
         let scale: CGFloat = isPlaying ? 1.0 : 0.85
         UIView.animate(
@@ -69,7 +93,11 @@ class AlbumArtworkView: UIView {
         containerView.translatesAutoresizingMaskIntoConstraints = false
 
         imageView.translatesAutoresizingMaskIntoConstraints = false
+        bufferingOverlay.translatesAutoresizingMaskIntoConstraints = false
+
         containerView.addSubview(imageView)
+        containerView.addSubview(bufferingOverlay)
+        bufferingOverlay.addSubview(bufferingIndicator)
         addSubview(containerView)
 
         NSLayoutConstraint.activate([
@@ -87,6 +115,16 @@ class AlbumArtworkView: UIView {
             imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
             imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
             imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
+
+            // Buffering overlay fills container
+            bufferingOverlay.topAnchor.constraint(equalTo: containerView.topAnchor),
+            bufferingOverlay.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
+            bufferingOverlay.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
+            bufferingOverlay.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
+            bufferingIndicator.centerXAnchor.constraint(equalTo: bufferingOverlay.centerXAnchor),
+            bufferingIndicator.centerYAnchor.constraint(equalTo: bufferingOverlay.centerYAnchor),
+            bufferingIndicator.widthAnchor.constraint(equalToConstant: 40),
+            bufferingIndicator.heightAnchor.constraint(equalToConstant: 30),
         ])
     }
 }
