Now Playing Bar

The Now Playing Bar is the persistent playback interface located at the bottom of the Spotty application. It presents the current track metadata, manages playback state through transport controls, and displays the status of active Spotify Connect devices.

The component serves as the primary coordination point for user-driven playback actions and visualizes real-time position updates using a synchronized timeline. It maintains a fixed dark appearance and utilizes responsive layouts to accommodate various window widths.

Component Architecture

The NowPlayingBar organizes sub-components into three distinct horizontal zones within an 80-point high container.

This diagram shows the structural hierarchy of the playback bar components and their vertical stacks.
Sources: Sources/Spotty/Views/NowPlayingBar.swift:15-50

Primary Layout Zones

Sources: Sources/Spotty/Views/NowPlayingBar.swift:23-45, Sources/Spotty/Views/NowPlayingComponents.swift

Data Flow and State Synchronization

The component observes a PlaybackStore to render state updates. The system uses a TimelineView with a one-second period to drive time-label updates without triggering full view body recomputations.

Position Refreshing

When player.showsPauseControl is true (indicating active playback), a background task executes a loop to refresh the track position every second.

The diagram illustrates the asynchronous loop used to keep playback time synchronized.
Sources: Sources/Spotty/Views/NowPlayingBar.swift:59-67

Time Formatting

The bar uses formatDuration to convert TimeInterval values into mm:ss strings. If no track is present, labels default to —:—. Negative values resulting from clock skew are clamped to 0:00.
Sources: Tests/SpottyBoundaryTests/FormattingAndSortingChecks.swift:17-23

Conditional Banners

The NowPlayingBar stack includes two conditional banners that appear above and below the main control area.

Playback Notice Banner

When the player.playbackNotice contains a message, a PlaybackNoticeBanner appears at the top. This banner provides immediate feedback for playback errors.

• Action: Clicking "Dismiss" calls player.dismissPlaybackNotice(id:).
• Accessibility: Posts an Announcement notification when a new notice arrives.
  Sources: Sources/Spotty/Views/NowPlayingBar.swift:16-20, Sources/Spotty/Views/NowPlayingBar.swift:115-132

Remote Playback Banner

If playback is occurring on a remote Spotify Connect device, a RemotePlaybackBanner renders at the bottom.

• Visuals: Uses SpottyPalette.mediaGreen background.
• Content: Displays track state (Playing/Paused) and the target device name.
• Icons: Maps device types (e.g., "computer") to specific PlaybackUtilitySymbol icons.
  Sources: Sources/Spotty/Views/NowPlayingBar.swift:52-54, Sources/Spotty/Views/NowPlayingBar.swift:87-113

Transport and progress controls

Transport Symbols

Icons for transport actions are rendered as TransportSymbol shapes. These are vector-based paths that maintain visual consistency with the Spotify design reference.

• Supported Types: Play, Pause, Skip Backward, Skip Forward, Shuffle, Repeat.
  Sources: Sources/Spotty/Views/TransportSymbol.swift

Volume and Sidebar Interaction

The right-hand side NowPlayingTimeControls manages the visibility of side panels.

1. Queue/History: Toggles the showsSidePanel binding to reveal the queue rail.
2. Connect: Switches the playbackPanel state to .connect to show available devices.
   Sources: Sources/Spotty/Views/SidePanelView.swift:23-38, Sources/Spotty/Views/NowPlayingBar.swift:44-46

Playlist Integration

Controls within the PlaylistDetailView (such as the large Play button and Shuffle toggle) interact with the same PlaybackStore underlying the Now Playing Bar, ensuring selection and playback state remain synchronized across the UI.
Sources: Sources/Spotty/Views/PlaylistDetailView.swift:54-95

The Now Playing Bar provides a unified interface for session control, ensuring that native macOS behaviors like accessibility labels, keyboard focus, and reduced motion are respected throughout the playback experience.