feat(now-playing): album art in header, full-width visualizer, real HypeM art

Relocate the album art into the top header box, left-aligned with the
Now Playing metadata, and let the scatter visualizer span the full width
again (it previously gave up a 34-col left gutter to the art). Fullscreen
mode is unchanged.

The art column is sized to the cover's actual rendered width — derived
from its source aspect ratio and the terminal's cell pixel size — so the
metadata sits a consistent gap away whether the cover is square (Spotify)
or 16:9 (YouTube/SoundCloud), rather than floating after a fixed-width
column.

Fix and extend artwork resolution for stream-first services:

- SoundCloud: `fetch_thumbnail` passed `--print id`, which implies
  yt-dlp's `--simulate` and suppresses all file writes — so
  `--write-thumbnail` silently wrote nothing. Add `--no-simulate` to
  restore the write while keeping the printed id.
- HypeM: yt-dlp's extractor exposes no thumbnail field at all, so scrape
  the track page's stable Open Graph `og:image` (via a small blocking
  reqwest call) to recover the real cover.
- Any track that still has no art falls back to the bundled cover, so the
  header art box renders consistently instead of collapsing to the
  compact layout.

reqwest is added with default-features off + native-tls only to reuse the
TLS backend stream-download already pulls and avoid dragging rustls/ring,
which would conflict with librespot's pinned getrandom 0.2.6.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: program247365

Cargo.lock

@@ -24,6 +24,10 @@ image = { version = "0.25", default-features = false, features = ["jpeg", "png",
 serde_json = "1"
 spectrum-analyzer = "1.7"
 stream-download = { version = "0.22", features = ["process"] }
+# Blocking HTTP client for the HypeM artwork scrape (its yt-dlp extractor
+# exposes no thumbnail). Uses the same native-tls backend already pulled in by
+# stream-download's reqwest, so `blocking` is purely additive.
+reqwest = { version = "0.12", default-features = false, features = ["blocking", "native-tls"] }
 symphonia = { version = "0.5", default-features = false }
 rodio = { version = "0.22", default-features = false, features = ["playback", "mp3", "wav", "flac", "vorbis"] }
 souvlaki = { version = "0.8", default-features = false, features = ["use_zbus"] }

Cargo.toml

@@ -27,11 +27,12 @@ use crate::audio::AudioPlayer;
 use crate::download::{DownloadEvent, LoadingPhase};
 use crate::media_controls::MediaSessionHandle;
 use crate::playback_input::PlaybackInput;
-use crate::plugin::{self, ytdlp, TrackInfo};
+use crate::plugin::{self, hypem, ytdlp, TrackInfo};
 use crate::storage::{track_record, HistorySortField, SharedStorage, Storage, SyncWarning};
 use crate::tui::{
     draw, draw_history_browser, draw_replay_error, draw_startup, restore_terminal, setup_terminal,
-    AppState, HistoryPanelState, ProgressTrack, StartupProgressState, StartupScreenState, N_BANDS,
+    AppState, HistoryPanelState, ProgressTrack, StartupProgressState, StartupScreenState,
+    HEADER_ART_ROWS, N_BANDS,
 };
 
 const SEEK_STEP: Duration = Duration::from_secs(5);
@@ -199,11 +200,13 @@ fn browse_history_session(
     }
 }
 
-/// Path to the bundled fallback album cover for local files, which have no
-/// embedded art. The PNG is embedded in the binary and materialized into the
-/// cache on first use, so a Homebrew-installed binary needs no external asset.
-/// Best-effort: `None` if it can't be written (then the cover is simply blank).
-fn local_file_cover() -> Option<std::path::PathBuf> {
+/// Path to the bundled fallback album cover, used for any track with no
+/// artwork — local files (no embedded art) and remote sources whose extractor
+/// exposes no thumbnail (e.g. HypeM: yt-dlp can play it but its extractor
+/// returns no `thumbnail` field). The PNG is embedded in the binary and
+/// materialized into the cache on first use, so a Homebrew-installed binary
+/// needs no external asset. Best-effort: `None` if it can't be written.
+fn fallback_cover() -> Option<std::path::PathBuf> {
     const COVER: &[u8] = include_bytes!("../assets/local-cover.png");
     let path = plugin::cache_dir_path().ok()?.join("local-cover.png");
     if !path.exists() {
@@ -266,7 +269,7 @@ fn play_file_session(
                     service: None,
                     // Local files have no embedded art; use the bundled fallback
                     // cover so the macOS Now Playing widget is never blank.
-                    thumbnail_path: local_file_cover(),
+                    thumbnail_path: fallback_cover(),
                     is_live: false,
                     collection: None,
                     artist: None,
@@ -1188,16 +1191,31 @@ fn loop_playlist(
     }
 }
 
-/// Open and decode a thumbnail image into a ratatui-image stateful protocol.
+/// Open and decode a thumbnail image into a ratatui-image stateful protocol,
+/// plus the terminal-column width it will occupy at [`HEADER_ART_ROWS`] tall.
 /// Returns None if any step fails — the renderer treats that as "no image."
+///
+/// The width is derived from the source aspect ratio and the terminal's
+/// cell pixel size: at a fixed cell height, `cols = rows · (cell_h/cell_w) ·
+/// (img_w/img_h)`. Sizing the art column to this lets the header metadata sit
+/// flush against the cover regardless of square vs. 16:9 art.
 fn decode_thumbnail(
     picker: Option<&Picker>,
     path: Option<&Path>,
-) -> Option<ratatui_image::protocol::StatefulProtocol> {
+) -> Option<(ratatui_image::protocol::StatefulProtocol, u16)> {
     let picker = picker?;
     let path = path?;
     let dyn_img = image::ImageReader::open(path).ok()?.decode().ok()?;
-    Some(picker.new_resize_protocol(dyn_img))
+    let aspect = if dyn_img.height() > 0 {
+        dyn_img.width() as f32 / dyn_img.height() as f32
+    } else {
+        1.0
+    };
+    let (cell_w, cell_h) = picker.font_size();
+    let cols = (HEADER_ART_ROWS as f32 * (cell_h as f32 / cell_w as f32) * aspect)
+        .round()
+        .clamp(1.0, 40.0) as u16;
+    Some((picker.new_resize_protocol(dyn_img), cols))
 }
 
 fn play_single_track(
@@ -1255,7 +1273,18 @@ fn play_single_track(
     }
     let is_favorite = storage.lock().unwrap().favorite_for(&record.track_key)?;
 
-    let thumbnail = decode_thumbnail(picker, track.thumbnail_path.as_deref());
+    // Any track that still has no artwork (e.g. HypeM, whose yt-dlp extractor
+    // exposes no thumbnail) falls back to the bundled cover so the header art
+    // box renders consistently rather than collapsing to the compact layout.
+    if track.thumbnail_path.is_none() {
+        track.thumbnail_path = fallback_cover();
+    }
+
+    let (thumbnail, thumbnail_cols) = match decode_thumbnail(picker, track.thumbnail_path.as_deref())
+    {
+        Some((protocol, cols)) => (Some(protocol), cols),
+        None => (None, 0),
+    };
 
     let mut state = AppState {
         filename: track.title.clone(),
@@ -1281,6 +1310,7 @@ fn play_single_track(
         history_panel: None,
         sync_warning: sync_warning.cloned(),
         thumbnail,
+        thumbnail_cols,
         is_live: track.is_live,
         progress_track: None,
         scrub_preview: None,
@@ -1452,7 +1482,10 @@ fn prepare_track_for_playback(
     {
         if let Some(source_url) = track.source_url.clone() {
             if let Ok(cache_dir) = plugin::cache_dir_path() {
-                track.thumbnail_path = ytdlp::fetch_thumbnail(&source_url, &cache_dir);
+                // yt-dlp covers SoundCloud; HypeM's extractor has no thumbnail,
+                // so fall back to scraping its page's og:image.
+                track.thumbnail_path = ytdlp::fetch_thumbnail(&source_url, &cache_dir)
+                    .or_else(|| hypem::fetch_thumbnail(&source_url, &cache_dir));
             }
         }
     }
@@ -1730,6 +1763,7 @@ mod tests {
             history_panel: None,
             sync_warning: None,
             thumbnail: None,
+            thumbnail_cols: 0,
             is_live: false,
             progress_track: None,
             scrub_preview: None,

src/play_loop.rs

@@ -1,8 +1,12 @@
 use color_eyre::eyre::Result;
-use std::path::Path;
+use std::path::{Path, PathBuf};
+use std::time::Duration;
 
 use super::{ytdlp, ServicePlugin, TrackInfo};
 
+const BROWSER_UA: &str = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) \
+     AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36";
+
 pub struct HypeM;
 
 impl ServicePlugin for HypeM {
@@ -22,3 +26,99 @@ impl ServicePlugin for HypeM {
         Ok(tracks)
     }
 }
+
+/// Fetch a HypeM track's artwork and cache it, returning the cached path.
+///
+/// yt-dlp's HypeM extractor returns no `thumbnail` field, so the normal
+/// `ytdlp::fetch_thumbnail` path produces nothing. HypeM track pages still
+/// carry a stable Open Graph `og:image` (used for social-share previews) whose
+/// URL we can't construct from the id alone (the storage shard isn't derivable),
+/// so we read the page and extract it. Returns `None` for non-HypeM URLs or any
+/// failure — callers treat that as "no art" and fall back to the bundled cover.
+pub fn fetch_thumbnail(url: &str, cache_dir: &Path) -> Option<PathBuf> {
+    let id = track_id(url)?;
+    let client = reqwest::blocking::Client::builder()
+        .user_agent(BROWSER_UA)
+        .timeout(Duration::from_secs(10))
+        .build()
+        .ok()?;
+    let html = client.get(url).send().ok()?.error_for_status().ok()?.text().ok()?;
+    let image_url = extract_og_image(&html)?;
+    let bytes = client
+        .get(&image_url)
+        .send()
+        .ok()?
+        .error_for_status()
+        .ok()?
+        .bytes()
+        .ok()?;
+    let path = cache_dir.join(format!("hypem_{id}.jpg"));
+    std::fs::write(&path, &bytes).ok()?;
+    Some(path)
+}
+
+/// Extracts the HypeM track id from a `hypem.com/track/<id>` URL. Ids are five
+/// lowercase-alphanumeric chars; returns `None` for non-HypeM/non-track URLs.
+fn track_id(url: &str) -> Option<String> {
+    if !url.to_ascii_lowercase().contains("hypem.com") {
+        return None;
+    }
+    let after = url.split("/track/").nth(1)?;
+    let id: String = after
+        .chars()
+        .take_while(|c| c.is_ascii_alphanumeric())
+        .collect();
+    (id.len() == 5).then_some(id)
+}
+
+/// Pulls the `og:image` URL out of a page's `<meta>` tags, tolerating either
+/// attribute order (`property` before or after `content`).
+fn extract_og_image(html: &str) -> Option<String> {
+    html.split("<meta")
+        .find(|tag| tag.contains("og:image"))
+        .and_then(|tag| {
+            let start = tag.find("content=\"")? + "content=\"".len();
+            let rest = &tag[start..];
+            let end = rest.find('"')?;
+            Some(rest[..end].to_string())
+        })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn parses_track_id() {
+        assert_eq!(
+            track_id("https://hypem.com/track/39jtp/Artist+-+Song").as_deref(),
+            Some("39jtp")
+        );
+        assert_eq!(track_id("https://hypem.com/track/39jtp").as_deref(), Some("39jtp"));
+        assert_eq!(track_id("https://soundcloud.com/foo/bar"), None);
+        assert_eq!(track_id("https://hypem.com/popular"), None);
+    }
+
+    #[test]
+    fn extracts_og_image_property_first() {
+        let html = r#"<meta property="og:image" content="https://static.hypem.com/x_500.jpg">"#;
+        assert_eq!(
+            extract_og_image(html).as_deref(),
+            Some("https://static.hypem.com/x_500.jpg")
+        );
+    }
+
+    #[test]
+    fn extracts_og_image_content_first() {
+        let html = r#"<meta content="https://static.hypem.com/y_500.jpg" property="og:image" />"#;
+        assert_eq!(
+            extract_og_image(html).as_deref(),
+            Some("https://static.hypem.com/y_500.jpg")
+        );
+    }
+
+    #[test]
+    fn no_og_image_returns_none() {
+        assert_eq!(extract_og_image("<html><head></head></html>"), None);
+    }
+}

src/plugin/hypem.rs

@@ -5,7 +5,7 @@ use std::path::{Path, PathBuf};
 
 use crate::playback_input::{PendingDownload, PlaybackInput};
 
-mod hypem;
+pub mod hypem;
 mod soundcloud;
 mod youtube;
 pub mod ytdlp;

src/plugin/mod.rs

@@ -245,6 +245,10 @@ pub fn fetch_thumbnail(url: &str, cache_dir: &Path) -> Option<PathBuf> {
     let output_template = cache_dir.join("%(id)s.%(ext)s");
     let output = Command::new("yt-dlp")
         .arg("--skip-download")
+        // `--print` implies `--simulate`, which suppresses ALL file writes
+        // (including `--write-thumbnail`). `--no-simulate` re-enables the write
+        // while still printing the id we use to locate the cached file.
+        .arg("--no-simulate")
         .arg("--write-thumbnail")
         .arg("--convert-thumbnails")
         .arg("jpg")