diff --git a/README.md b/README.md
index b24a8b7d..53ba27e1 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ The Linux desktop app TIDAL never built.
SONE finally gives Linux users a first-class streaming client. It delivers the complete, fully-featured experience you expect with seamless library management and a sleek, familiar workflow—and then supercharges it.
-We went beyond the basics with direct-to-DAC bit-perfect ALSA output, a resizable-adaptive floating miniplayer, custom themes, Discord Rich Presence, and multi-service scrobbling (Last.fm, Libre.fm, ListenBrainz)—all wrapped in a fast, native Linux app.
+We went beyond the basics with direct-to-DAC bit-perfect ALSA output, a resizable-adaptive floating miniplayer, music video playback, custom themes, Discord Rich Presence, and multi-service scrobbling (Last.fm, Libre.fm, ListenBrainz)—all wrapped in a fast, native Linux app.
Table of Contents
@@ -65,6 +65,12 @@ We went beyond the basics with direct-to-DAC bit-perfect ALSA output, a resizabl
- **Autoplay** — discovers and plays similar tracks when your queue ends
- **Gapless playback** — seamless, silence-free transitions between tracks in normal output mode. On by default; requires GStreamer 1.24+ and falls back automatically when unavailable
+### Video
+
+- **Music video playback** — a dedicated player (fullscreen or minimized to the bar) with adaptive HLS that starts at your selected quality; videos and tracks share one queue (shuffle, repeat, autoplay, history) controllable from the tray, MPRIS media keys, miniplayer, and shortcuts
+- **Favorite & browse** — love videos separately from tracks, with dedicated Tracks/Videos tabs on your loved page — a paginated, searchable grid with tab-aware Play/Shuffle
+- **Find videos** — add them to playlists (mixed playlists show accurate "N Videos · M Tracks"), and discover them across Explore and search — a Videos section, a dedicated Videos tab, and rows in Top Hits
+
### Interface
- **Custom themes** — 15 presets and a full color picker for accent and background with both light/dark mode
@@ -445,6 +451,13 @@ No. SONE is a streaming client only — it streams directly from TIDAL and does
+
+Can I watch music videos?
+
+Yes. SONE plays TIDAL music videos in a dedicated player — fullscreen or minimized to the player bar — and videos share the same queue, shuffle, repeat, autoplay, favorites, and history as your audio tracks. You can browse and search videos, love them, and add them to playlists. Video audio is streamed and does not use the bit-perfect lossless signal path that music tracks use.
+
+
+
I'm getting a "Device busy" error in exclusive or bit-perfect mode
@@ -492,4 +505,4 @@ All trademarks belong to their respective owners.
---
-**TL;DR** — SONE is an open-source, native Linux desktop client for TIDAL built with Tauri 2 and Rust. It streams lossless FLAC and Hi-Res audio up to 24-bit/192kHz, with exclusive ALSA output that bypasses PulseAudio and PipeWire entirely for bit-perfect playback directly to your DAC. Lightweight, encrypted at rest, and fully offline — no telemetry, no tracking.
+**TL;DR** — SONE is an open-source, native Linux desktop client for TIDAL built with Tauri 2 and Rust. It streams lossless FLAC and Hi-Res audio up to 24-bit/192kHz, with exclusive ALSA output that bypasses PulseAudio and PipeWire entirely for bit-perfect playback directly to your DAC. It also plays TIDAL music videos in a dedicated player — fullscreen or minimized to the bar — that shares a single queue (shuffle, repeat, autoplay, favorites, and history) with your audio tracks. Lightweight, encrypted at rest, and fully offline — no telemetry, no tracking.
diff --git a/data/io.github.lullabyX.sone.metainfo.xml b/data/io.github.lullabyX.sone.metainfo.xml
index dcf5e8e7..51f21f0a 100644
--- a/data/io.github.lullabyX.sone.metainfo.xml
+++ b/data/io.github.lullabyX.sone.metainfo.xml
@@ -34,6 +34,12 @@
Gapless, silence-free playback
Volume normalization (ReplayGain) with automatic album/track switching
+
Video
+
+
Music video playback in a dedicated player — full-screen or minimized to the player bar, with HLS streaming that starts at your selected quality and adapts to your bandwidth (video audio is streamed, not the bit-perfect path)
+
Videos and tracks share one queue, with shuffle, repeat, autoplay, and history across both
+
Favorite videos, browse them in Loved Tracks/Videos tabs, add them to playlists, and find them in Explore and search
+
Interface and customization
Modern, fully customizable light and dark themes
@@ -104,6 +110,9 @@
dark modeproxymcp
+ music video
+ music videos
+ videoio.github.lullabyX.sone.desktop
@@ -149,6 +158,36 @@
+
+
+
Music Videos
+
+
Watch music videos in a dedicated video player — go full-screen or minimize it to the player bar and keep browsing
+
HLS streaming that starts at your selected quality and adapts down smoothly when your bandwidth drops
+
Videos and tracks share one queue — previous, next, shuffle, repeat, autoplay, and history all work across both
+
+
Video Player
+
+
Full transport, favorite, quality, volume, full-screen, and minimize controls
+
The playing video is restored when you relaunch SONE
+
Control video from the tray, MPRIS media keys, the miniplayer, and in-app keyboard shortcuts, just like audio
+
+
Favorites
+
+
Favorite videos, kept separate from your loved tracks and reflected everywhere you see them
+
Loved page now has Tracks and Videos tabs — a paginated, searchable video grid with tab-aware Play and Shuffle, and starting one queues the rest
+
+
Playlists
+
+
Add videos to your playlists; mixed playlists show an accurate "N Videos · M Tracks" count
+
+
Explore & Search
+
+
New video sections while you explore — Featured playlist promos and wide 16:9 video cards
+
Videos in search — a Videos section in All Results, a dedicated Videos tab, and video rows in Top Hits
+
+
+
Profiles
diff --git a/package.json b/package.json
index 9c550d25..72927bb6 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"@tauri-apps/api": "2.11.0",
"@tauri-apps/plugin-deep-link": "2.4.9",
"@tauri-apps/plugin-opener": "2.5.4",
+ "hls.js": "^1.6.16",
"jotai": "^2.17.1",
"lucide-react": "^0.563.0",
"qrcode.react": "^4.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c183fd8..fa9a9698 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
'@tauri-apps/plugin-opener':
specifier: 2.5.4
version: 2.5.4
+ hls.js:
+ specifier: ^1.6.16
+ version: 1.6.16
jotai:
specifier: ^2.17.1
version: 2.17.1(@babel/core@7.29.0)(@babel/template@7.28.6)(@types/react@19.2.10)(react@19.2.4)
@@ -1435,6 +1438,9 @@ packages:
hermes-parser@0.25.1:
resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+ hls.js@1.6.16:
+ resolution: {integrity: sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==}
+
html-encoding-sniffer@6.0.0:
resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -3274,6 +3280,8 @@ snapshots:
dependencies:
hermes-estree: 0.25.1
+ hls.js@1.6.16: {}
+
html-encoding-sniffer@6.0.0:
dependencies:
'@exodus/bytes': 1.15.1
diff --git a/src-tauri/src/cache.rs b/src-tauri/src/cache.rs
index 84c9c1a9..02c2bb2a 100644
--- a/src-tauri/src/cache.rs
+++ b/src-tauri/src/cache.rs
@@ -187,7 +187,7 @@ impl DiskCacheInner {
const MAX_DISK_BYTES: u64 = 2 * 1024 * 1024 * 1024; // 2 GB
const EVICT_TARGET: u64 = MAX_DISK_BYTES * 9 / 10; // 1.8 GB
-const CURRENT_SCHEMA_VERSION: u8 = 3;
+const CURRENT_SCHEMA_VERSION: u8 = 5;
pub struct DiskCache {
base_dir: PathBuf,
diff --git a/src-tauri/src/commands/library.rs b/src-tauri/src/commands/library.rs
index d1587cfa..3fe9d86f 100644
--- a/src-tauri/src/commands/library.rs
+++ b/src-tauri/src/commands/library.rs
@@ -3,6 +3,7 @@ use tauri::{Manager, State};
use crate::cache::{CacheResult, CacheTier};
use crate::tidal_api::{
AllFavoriteIds, PaginatedTracks, TidalAlbumDetail, TidalArtistDetail, TidalPlaylist, TidalTrack,
+ TidalVideo,
};
use crate::AppState;
use crate::SoneError;
@@ -840,6 +841,63 @@ pub async fn remove_favorite_track(
Ok(())
}
+#[tauri::command(rename_all = "camelCase")]
+pub async fn get_favorite_video_ids(
+ state: State<'_, AppState>,
+ user_id: u64,
+) -> Result, SoneError> {
+ log::debug!("[get_favorite_video_ids]");
+ let client = state.tidal_client.lock().await;
+ client.get_favorite_video_ids(user_id).await
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn get_favorite_videos(
+ state: State<'_, AppState>,
+ user_id: u64,
+ offset: u32,
+ limit: u32,
+) -> Result, SoneError> {
+ log::debug!(
+ "[get_favorite_videos]: user_id={}, offset={}, limit={}",
+ user_id,
+ offset,
+ limit
+ );
+ let client = state.tidal_client.lock().await;
+ client.get_favorite_videos(user_id, offset, limit).await
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn add_favorite_video(
+ state: State<'_, AppState>,
+ user_id: u64,
+ video_id: u64,
+) -> Result<(), SoneError> {
+ log::debug!(
+ "[add_favorite_video]: user_id={}, video_id={}",
+ user_id,
+ video_id
+ );
+ let client = state.tidal_client.lock().await;
+ client.add_favorite_video(user_id, video_id).await
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn remove_favorite_video(
+ state: State<'_, AppState>,
+ user_id: u64,
+ video_id: u64,
+) -> Result<(), SoneError> {
+ log::debug!(
+ "[remove_favorite_video]: user_id={}, video_id={}",
+ user_id,
+ video_id
+ );
+ let client = state.tidal_client.lock().await;
+ client.remove_favorite_video(user_id, video_id).await
+}
+
#[tauri::command(rename_all = "camelCase")]
pub async fn get_favorite_album_ids(
state: State<'_, AppState>,
@@ -1364,6 +1422,14 @@ pub async fn get_playlist_folders(
Ok(data)
}
+#[tauri::command(rename_all = "camelCase")]
+pub async fn get_all_flattened_playlists(
+ state: State<'_, AppState>,
+) -> Result, SoneError> {
+ let mut client = state.tidal_client.lock().await;
+ client.get_all_flattened_playlists().await
+}
+
#[tauri::command(rename_all = "camelCase")]
pub async fn create_playlist_folder(
state: State<'_, AppState>,
diff --git a/src-tauri/src/commands/playback.rs b/src-tauri/src/commands/playback.rs
index 6bc520d0..a4a666fc 100644
--- a/src-tauri/src/commands/playback.rs
+++ b/src-tauri/src/commands/playback.rs
@@ -2,7 +2,7 @@ use serde::Deserialize;
use std::sync::atomic::Ordering;
use tauri::State;
-use crate::tidal_api::StreamInfo;
+use crate::tidal_api::{StreamInfo, TidalVideo, VideoStreamInfo};
use crate::AppState;
use crate::SoneError;
@@ -212,6 +212,28 @@ pub async fn get_stream_info(
Ok(info)
}
+/// Resolve a music video's HLS master playlist URL. Pure resolver — video
+/// plays in the WebView, so this never touches the audio pipeline.
+#[tauri::command(rename_all = "camelCase")]
+pub async fn get_video_stream_info(
+ state: State<'_, AppState>,
+ video_id: u64,
+ video_quality: Option,
+) -> Result {
+ let quality = video_quality.unwrap_or_else(|| "HIGH".to_string());
+ let mut client = state.tidal_client.lock().await;
+ client.get_video_stream_url(video_id, &quality).await
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub async fn get_video_metadata(
+ state: State<'_, AppState>,
+ video_id: u64,
+) -> Result {
+ let mut client = state.tidal_client.lock().await;
+ client.get_video(video_id).await
+}
+
#[tauri::command]
pub async fn pause_track(state: State<'_, AppState>) -> Result<(), SoneError> {
log::debug!("[pause_track]");
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index cd6060d5..3c8c2daf 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -828,6 +828,10 @@ pub fn run() {
commands::library::is_track_favorited,
commands::library::add_favorite_track,
commands::library::remove_favorite_track,
+ commands::library::get_favorite_video_ids,
+ commands::library::get_favorite_videos,
+ commands::library::add_favorite_video,
+ commands::library::remove_favorite_video,
commands::library::get_favorite_album_ids,
commands::library::is_album_favorited,
commands::library::add_favorite_album,
@@ -846,6 +850,7 @@ pub fn run() {
commands::library::get_favorite_mixes,
commands::library::get_favorite_artists,
commands::library::get_playlist_folders,
+ commands::library::get_all_flattened_playlists,
commands::library::create_playlist_folder,
commands::library::rename_playlist_folder,
commands::library::delete_playlist_folder,
@@ -882,6 +887,8 @@ pub fn run() {
commands::playback::set_next_track,
commands::playback::clear_next_track,
commands::playback::get_stream_info,
+ commands::playback::get_video_stream_info,
+ commands::playback::get_video_metadata,
commands::playback::pause_track,
commands::playback::resume_track,
commands::playback::stop_track,
diff --git a/src-tauri/src/mcp/sanitizer.rs b/src-tauri/src/mcp/sanitizer.rs
index f4d1f2e9..e2994ad5 100644
--- a/src-tauri/src/mcp/sanitizer.rs
+++ b/src-tauri/src/mcp/sanitizer.rs
@@ -141,6 +141,8 @@ mod tests {
audio_modes: None,
media_metadata: None,
mixes: None,
+ item_type: None,
+ image_id: None,
}
}
diff --git a/src-tauri/src/tidal_api.rs b/src-tauri/src/tidal_api.rs
index 42b4eb43..b8870e51 100644
--- a/src-tauri/src/tidal_api.rs
+++ b/src-tauri/src/tidal_api.rs
@@ -110,6 +110,12 @@ pub struct TidalTrack {
/// Present on track detail responses — contains mix IDs like `TRACK_MIX`.
#[serde(default)]
pub mixes: Option,
+ /// From the `/playlists/{id}/items` wrapper `type` — "track" or "video".
+ #[serde(default)]
+ pub item_type: Option,
+ /// Video thumbnail UUID (videos carry `imageId` instead of `album.cover`).
+ #[serde(default)]
+ pub image_id: Option,
}
#[derive(Debug, Serialize, Deserialize, Clone)]
@@ -136,6 +142,49 @@ impl TidalTrack {
}
}
+/// Parse `/playlists/{id}/items` wrapper entries (`{ item, type }`) into TidalTracks.
+/// A video's inner `item` deserializes cleanly (its missing track-only fields are
+/// all `#[serde(default)]`); we stamp `item_type` from the wrapper and copy `imageId`.
+fn parse_playlist_items(items: Vec) -> Result, SoneError> {
+ let mut out = Vec::with_capacity(items.len());
+ for entry in items {
+ let item_type = entry
+ .get("type")
+ .and_then(|t| t.as_str())
+ .map(|s| s.to_lowercase());
+ let Some(inner) = entry.get("item") else {
+ continue;
+ };
+ // A playlist can interleave tracks and videos; a video item may carry a
+ // null or absent `duration`, which fails TidalTrack's required u32 and
+ // would abort the ENTIRE playlist. Default it to 0 so one such item can't
+ // blank the list — the video player reads the real length from the stream.
+ let mut inner = inner.clone();
+ // NOTE (verified): use `is_none_or`, NOT `map_or(true, …)` — clippy's
+ // `unnecessary_map_or` lint (warn-by-default on this repo's rustc 1.95)
+ // would fail `cargo clippy -- -D warnings`. `id`/`title` remain hard-required
+ // (the only other non-default TidalTrack fields); real video items always
+ // carry them, so defaulting `duration` alone resolves the observed abort.
+ if inner.get("duration").is_none_or(|d| d.is_null()) {
+ if let Some(obj) = inner.as_object_mut() {
+ obj.insert("duration".to_string(), Value::from(0u32));
+ }
+ }
+ let mut track: TidalTrack = serde_json::from_value(inner.clone())
+ .map_err(|e| SoneError::Parse(format!("{} - Item: {}", e, inner)))?;
+ if track.image_id.is_none() {
+ track.image_id = inner
+ .get("imageId")
+ .and_then(|v| v.as_str())
+ .map(|s| s.to_string());
+ }
+ track.item_type = item_type;
+ track.backfill_artist();
+ out.push(track);
+ }
+ Ok(out)
+}
+
#[derive(Debug, Serialize, Deserialize, Clone)]
#[serde(rename_all = "camelCase")]
pub struct TidalAlbumDetail {
@@ -379,6 +428,7 @@ impl From for TidalPlaylist {
description: a.description,
image: None,
number_of_tracks: Some(0),
+ number_of_videos: Some(0),
creator: None,
playlist_type: a.playlist_type,
duration: Some(0),
@@ -396,6 +446,7 @@ pub struct TidalPlaylist {
pub description: Option,
pub image: Option,
pub number_of_tracks: Option,
+ pub number_of_videos: Option,
pub creator: Option,
/// "USER" | "EDITORIAL" | "ARTIST"
#[serde(default)]
@@ -417,6 +468,7 @@ impl From for TidalPlaylist {
// Prefer squareImage, fallback to image
image: raw.square_image.or(raw.image),
number_of_tracks: raw.number_of_tracks,
+ number_of_videos: raw.number_of_videos,
creator: raw.creator,
playlist_type: raw.playlist_type,
duration: raw.duration,
@@ -501,6 +553,40 @@ pub struct StreamInfo {
pub track_peak_amplitude: Option,
}
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct VideoStreamInfo {
+ pub url: String,
+ pub video_quality: String,
+ pub manifest_mime_type: String,
+ pub video_id: u64,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct TidalVideo {
+ pub id: u64,
+ pub title: String,
+ #[serde(default)]
+ pub duration: Option,
+ #[serde(default)]
+ pub image_id: Option,
+ #[serde(default)]
+ pub vibrant_color: Option,
+ #[serde(default)]
+ pub quality: Option,
+ #[serde(default, rename = "type")]
+ pub video_type: Option,
+ #[serde(default)]
+ pub explicit: Option,
+ #[serde(default)]
+ pub ads_pre_paywall_only: Option,
+ #[serde(default)]
+ pub artist: Option,
+ #[serde(default)]
+ pub artists: Option>,
+}
+
// ==================== v2 Home Feed MIX types ====================
// These structs document the v2 MIX shape. Not yet consumed by backend code
// (home feed items pass through as raw Value), but available for future typed parsing.
@@ -643,6 +729,8 @@ pub struct TidalSearchResults {
pub tracks: Vec,
pub playlists: Vec,
#[serde(default)]
+ pub videos: Vec,
+ #[serde(default)]
pub top_hit_type: Option,
/// Ordered top hits from the v2 search API (mixed entity types, ranked by relevance)
#[serde(default)]
@@ -789,6 +877,41 @@ impl DirectHitItem {
number_of_tracks: None,
})
}
+ "VIDEOS" => {
+ let artist_name = val
+ .get("artists")
+ .and_then(|a| a.as_array())
+ .and_then(|arr| arr.first())
+ .and_then(|a| a.get("name").and_then(|v| v.as_str()))
+ .or_else(|| {
+ val.get("artist")
+ .and_then(|a| a.get("name").and_then(|v| v.as_str()))
+ })
+ .map(String::from);
+ Some(DirectHitItem {
+ hit_type,
+ id: val.get("id").and_then(|v| v.as_u64()),
+ uuid: None,
+ name: None,
+ title: val.get("title").and_then(|v| v.as_str()).map(String::from),
+ picture: None,
+ cover: None,
+ // Videos carry a thumbnail UUID under `imageId`, not album cover.
+ image: val
+ .get("imageId")
+ .and_then(|v| v.as_str())
+ .map(String::from),
+ artist_name,
+ album_id: None,
+ album_title: None,
+ album_cover: None,
+ duration: val
+ .get("duration")
+ .and_then(|v| v.as_u64())
+ .map(|d| d as u32),
+ number_of_tracks: None,
+ })
+ }
"PLAYLISTS" => Some(DirectHitItem {
hit_type,
id: None,
@@ -1531,6 +1654,7 @@ impl TidalClient {
description: Some(description.to_string()),
image: None,
number_of_tracks: None,
+ number_of_videos: None,
creator: None,
playlist_type: Some("USER".to_string()),
duration: None,
@@ -1578,6 +1702,7 @@ impl TidalClient {
.form(&[
("trackIds", &track_id.to_string()),
("onDupes", &"FAIL".to_string()),
+ ("onArtifactNotFound", &"FAIL".to_string()),
])
.send()
.await?;
@@ -1778,12 +1903,14 @@ impl TidalClient {
&mut self,
playlist_id: &str,
) -> Result, SoneError> {
- let path = format!("/playlists/{}/tracks", playlist_id);
+ // `/items` (not `/tracks`) returns the real entries: tracks AND videos,
+ // each wrapped as `{ "item": {...}, "type": "track" | "video" }`.
+ let path = format!("/playlists/{}/items", playlist_id);
#[derive(Deserialize)]
#[serde(rename_all = "camelCase")]
- struct TracksResponse {
- items: Vec,
+ struct ItemsResponse {
+ items: Vec,
total_number_of_items: u32,
}
@@ -1806,14 +1933,12 @@ impl TidalClient {
)
.await?;
- let mut data: TracksResponse = serde_json::from_str(&body)
+ let data: ItemsResponse = serde_json::from_str(&body)
.map_err(|e| SoneError::Parse(format!("{} - Body: {}", e, body)))?;
let fetched = data.items.len() as u32;
- for t in &mut data.items {
- t.backfill_artist();
- }
- all_tracks.append(&mut data.items);
+ let mut tracks = parse_playlist_items(data.items)?;
+ all_tracks.append(&mut tracks);
if fetched == 0 || all_tracks.len() as u32 >= data.total_number_of_items {
break;
@@ -1846,17 +1971,18 @@ impl TidalClient {
if let Some(od) = order_direction {
params.push(("orderDirection", od));
}
+ // `/items` returns tracks AND videos, each wrapped as `{ item, type }`.
let body = self
.api_get_body(
- &format!("/playlists/{}/tracks", playlist_id),
+ &format!("/playlists/{}/items", playlist_id),
¶ms,
)
.await?;
#[derive(Deserialize)]
#[serde(rename_all = "camelCase")]
- struct TracksResponse {
- items: Vec,
+ struct ItemsResponse {
+ items: Vec,
total_number_of_items: u32,
#[serde(default)]
offset: u32,
@@ -1864,13 +1990,11 @@ impl TidalClient {
limit: u32,
}
- let mut data: TracksResponse = serde_json::from_str(&body)
+ let data: ItemsResponse = serde_json::from_str(&body)
.map_err(|e| SoneError::Parse(format!("{} - Body: {}", e, body)))?;
- for t in &mut data.items {
- t.backfill_artist();
- }
+ let items = parse_playlist_items(data.items)?;
Ok(PaginatedTracks {
- items: data.items,
+ items,
total_number_of_items: data.total_number_of_items,
offset: data.offset,
limit: data.limit,
@@ -2205,6 +2329,194 @@ impl TidalClient {
Ok(())
}
+ pub async fn add_favorite_video(&self, user_id: u64, video_id: u64) -> Result<(), SoneError> {
+ let tokens = self.tokens.as_ref().ok_or(SoneError::NotAuthenticated)?;
+ let video_id_str = video_id.to_string();
+
+ let response = self
+ .client
+ .post(format!(
+ "{}/users/{}/favorites/videos",
+ TIDAL_API_URL, user_id
+ ))
+ .header("Authorization", format!("Bearer {}", tokens.access_token))
+ .query(&[("countryCode", self.country_code.as_str())])
+ .form(&[
+ ("videoIds", video_id_str.as_str()),
+ ("onArtifactNotFound", "FAIL"),
+ ])
+ .send()
+ .await?;
+
+ let status = response.status();
+ let body = response.text().await.unwrap_or_default();
+
+ if !status.is_success() {
+ return Err(SoneError::Api {
+ status: status.as_u16(),
+ body,
+ });
+ }
+
+ Ok(())
+ }
+
+ pub async fn remove_favorite_video(
+ &self,
+ user_id: u64,
+ video_id: u64,
+ ) -> Result<(), SoneError> {
+ let tokens = self.tokens.as_ref().ok_or(SoneError::NotAuthenticated)?;
+
+ let response = self
+ .client
+ .delete(format!(
+ "{}/users/{}/favorites/videos/{}",
+ TIDAL_API_URL, user_id, video_id
+ ))
+ .header("Authorization", format!("Bearer {}", tokens.access_token))
+ .query(&[("countryCode", self.country_code.as_str())])
+ .send()
+ .await?;
+
+ let status = response.status();
+ let body = response.text().await.unwrap_or_default();
+
+ if !status.is_success() {
+ return Err(SoneError::Api {
+ status: status.as_u16(),
+ body,
+ });
+ }
+
+ Ok(())
+ }
+
+ pub async fn get_favorite_video_ids(&self, user_id: u64) -> Result, SoneError> {
+ let tokens = self.tokens.as_ref().ok_or(SoneError::NotAuthenticated)?;
+
+ // The favorites/videos content endpoint caps page size (a single
+ // limit=10000 request is rejected — which left every video heart empty on
+ // startup). Page through it at the known-good size and accumulate the ids.
+ const PAGE: u32 = 50;
+ let mut ids: Vec = Vec::new();
+ let mut offset: u32 = 0;
+ loop {
+ let limit_str = PAGE.to_string();
+ let offset_str = offset.to_string();
+ let response = self
+ .client
+ .get(format!(
+ "{}/users/{}/favorites/videos",
+ TIDAL_API_URL, user_id
+ ))
+ .header("Authorization", format!("Bearer {}", tokens.access_token))
+ .query(&[
+ ("countryCode", self.country_code.as_str()),
+ ("limit", limit_str.as_str()),
+ ("offset", offset_str.as_str()),
+ ("order", "DATE"),
+ ("orderDirection", "DESC"),
+ ])
+ .send()
+ .await?;
+
+ let status = response.status();
+ let body = response.text().await.unwrap_or_default();
+ if !status.is_success() {
+ return Err(SoneError::Api {
+ status: status.as_u16(),
+ body,
+ });
+ }
+
+ // Parse leniently: pull each item's id directly. Deserializing the full
+ // TidalVideo would fail the whole page if any one favorite is missing a
+ // required field.
+ let json: serde_json::Value =
+ serde_json::from_str(&body).map_err(|e| SoneError::Parse(e.to_string()))?;
+ let items = json.get("items").and_then(|i| i.as_array());
+ let count = items.map(|a| a.len()).unwrap_or(0);
+ if let Some(items) = items {
+ ids.extend(
+ items
+ .iter()
+ .filter_map(|it| it.get("item")?.get("id")?.as_u64()),
+ );
+ }
+
+ if count < PAGE as usize {
+ break;
+ }
+ offset += PAGE;
+ if offset >= 10_000 {
+ break; // safety cap — never loop unbounded
+ }
+ }
+
+ log::debug!("[get_favorite_video_ids] collected {} ids", ids.len());
+ Ok(ids)
+ }
+
+ pub async fn get_favorite_videos(
+ &self,
+ user_id: u64,
+ offset: u32,
+ limit: u32,
+ ) -> Result, SoneError> {
+ let tokens = self.tokens.as_ref().ok_or(SoneError::NotAuthenticated)?;
+ let limit_str = limit.to_string();
+ let offset_str = offset.to_string();
+ let response = self
+ .client
+ .get(format!(
+ "{}/users/{}/favorites/videos",
+ TIDAL_API_URL, user_id
+ ))
+ .header("Authorization", format!("Bearer {}", tokens.access_token))
+ .query(&[
+ ("countryCode", self.country_code.as_str()),
+ ("limit", limit_str.as_str()),
+ ("offset", offset_str.as_str()),
+ ("order", "DATE"),
+ ("orderDirection", "DESC"),
+ ])
+ .send()
+ .await?;
+
+ let status = response.status();
+ let body = response.text().await.unwrap_or_default();
+
+ if !status.is_success() {
+ return Err(SoneError::Api {
+ status: status.as_u16(),
+ body,
+ });
+ }
+
+ #[derive(Deserialize)]
+ struct FavItem {
+ #[serde(default)]
+ item: Option,
+ }
+
+ #[derive(Deserialize)]
+ struct FavResponse {
+ #[serde(default)]
+ items: Vec,
+ }
+
+ let data = serde_json::from_str::(&body)
+ .map_err(|e| SoneError::Parse(format!("{} - Body: {}", e, body)))?;
+
+ Ok(data
+ .items
+ .into_iter()
+ .filter_map(|f| f.item)
+ .filter_map(|v| serde_json::from_value::(v).ok())
+ .collect())
+ }
+
pub async fn is_album_favorited(&self, user_id: u64, album_id: u64) -> Result {
let tokens = self.tokens.as_ref().ok_or(SoneError::NotAuthenticated)?;
let response = self
@@ -2778,6 +3090,57 @@ impl TidalClient {
})
}
+ /// Fetch ALL playlists across every folder via the flattened endpoint,
+ /// paginating with the response `cursor` until exhausted. Returns the raw
+ /// folder items (same shape `normalizeFolderItem` consumes).
+ pub async fn get_all_flattened_playlists(
+ &mut self,
+ ) -> Result, SoneError> {
+ let url = format!(
+ "{}/my-collection/playlists/folders/flattened",
+ TIDAL_API_V2_URL
+ );
+ let cc = self.country_code.clone();
+ let mut accumulated: Vec = Vec::new();
+ let mut cursor = String::new();
+ const MAX_PAGES: u32 = 40;
+
+ for _ in 0..MAX_PAGES {
+ let mut params: Vec<(&str, &str)> = vec![
+ ("offset", "0"),
+ ("limit", "50"),
+ ("order", "DATE"),
+ ("orderDirection", "DESC"),
+ ("countryCode", &cc),
+ ("locale", "en_US"),
+ ("deviceType", "BROWSER"),
+ ];
+ if !cursor.is_empty() {
+ params.push(("cursor", &cursor));
+ }
+
+ let body = self.api_get_body(&url, ¶ms).await?;
+ let value: serde_json::Value = serde_json::from_str(&body).map_err(|e| {
+ SoneError::Parse(format!("{} - Body: {}", e, &body[..body.len().min(500)]))
+ })?;
+
+ if let Some(items) = value.get("items").and_then(|v| v.as_array()) {
+ accumulated.extend(items.iter().cloned());
+ }
+
+ match value.get("cursor").and_then(|c| c.as_str()) {
+ Some(next) if !next.is_empty() => cursor = next.to_string(),
+ _ => break,
+ }
+ }
+
+ log::debug!(
+ "[get_all_flattened_playlists]: accumulated {} items",
+ accumulated.len()
+ );
+ Ok(accumulated)
+ }
+
pub async fn create_playlist_folder(
&self,
folder_id: &str,
@@ -3007,7 +3370,11 @@ impl TidalClient {
.header("Authorization", format!("Bearer {}", tokens.access_token))
.header("If-None-Match", &etag)
.query(&[("countryCode", self.country_code.as_str())])
- .form(&[("trackIds", ids_str.as_str()), ("onDupes", "SKIP")])
+ .form(&[
+ ("trackIds", ids_str.as_str()),
+ ("onDupes", "SKIP"),
+ ("onArtifactNotFound", "FAIL"),
+ ])
.send()
.await?;
@@ -3178,6 +3545,79 @@ impl TidalClient {
})
}
+ pub async fn get_video_stream_url(
+ &mut self,
+ video_id: u64,
+ video_quality: &str,
+ ) -> Result {
+ let cc = self.country_code.clone();
+ let body = self
+ .api_get_body(
+ &format!("/videos/{}/playbackinfopostpaywall", video_id),
+ &[
+ ("countryCode", &cc),
+ ("videoquality", video_quality),
+ ("playbackmode", "STREAM"),
+ ("assetpresentation", "FULL"),
+ ],
+ )
+ .await?;
+
+ #[derive(Deserialize)]
+ #[serde(rename_all = "camelCase")]
+ struct PlaybackInfo {
+ video_id: u64,
+ video_quality: String,
+ manifest_mime_type: String,
+ manifest: String,
+ }
+
+ let data = serde_json::from_str::(&body)
+ .map_err(|e| SoneError::Parse(format!("{} - Body: {}", e, body)))?;
+
+ use base64::Engine;
+ let manifest_bytes = base64::engine::general_purpose::STANDARD
+ .decode(&data.manifest)
+ .map_err(|e| SoneError::Parse(format!("Failed to decode manifest: {}", e)))?;
+ let manifest_str = String::from_utf8(manifest_bytes)
+ .map_err(|e| SoneError::Parse(format!("Invalid manifest encoding: {}", e)))?;
+
+ #[derive(Deserialize)]
+ #[serde(rename_all = "camelCase")]
+ struct EmuManifest {
+ urls: Vec,
+ }
+
+ let manifest_data = serde_json::from_str::(&manifest_str)
+ .map_err(|e| SoneError::Parse(format!("{} - Manifest: {}", e, manifest_str)))?;
+
+ let url = manifest_data
+ .urls
+ .into_iter()
+ .next()
+ .ok_or(SoneError::Parse("No URL in video manifest".into()))?;
+
+ Ok(VideoStreamInfo {
+ url,
+ video_quality: data.video_quality,
+ manifest_mime_type: data.manifest_mime_type,
+ video_id: data.video_id,
+ })
+ }
+
+ pub async fn get_video(&mut self, video_id: u64) -> Result {
+ let cc = self.country_code.clone();
+ self.api_get(
+ &format!("/videos/{}", video_id),
+ &[
+ ("countryCode", &cc),
+ ("locale", "en_US"),
+ ("deviceType", "BROWSER"),
+ ],
+ )
+ .await
+ }
+
pub async fn get_track_lyrics(&mut self, track_id: u64) -> Result {
let cc = self.country_code.clone();
self.api_get(
@@ -3249,7 +3689,7 @@ impl TidalClient {
("query", query),
("countryCode", &cc),
("limit", &limit_str),
- ("types", "ARTISTS,ALBUMS,TRACKS,PLAYLISTS"),
+ ("types", "ARTISTS,ALBUMS,TRACKS,PLAYLISTS,VIDEOS"),
("includeContributors", "true"),
("includeUserPlaylists", "true"),
("includeDidYouMean", "true"),
@@ -3259,7 +3699,7 @@ impl TidalClient {
],
)
.await?;
- self.parse_search_response(&body, query, "v2")
+ Self::parse_search_response(&body, query, "v2")
}
async fn search_v1(
@@ -3277,18 +3717,17 @@ impl TidalClient {
("countryCode", &cc),
("limit", &limit_str),
("offset", "0"),
- ("types", "ARTISTS,ALBUMS,TRACKS,PLAYLISTS"),
+ ("types", "ARTISTS,ALBUMS,TRACKS,PLAYLISTS,VIDEOS"),
("includeContributors", "true"),
("includeUserPlaylists", "true"),
("supportsUserData", "true"),
],
)
.await?;
- self.parse_search_response(&body, query, "v1")
+ Self::parse_search_response(&body, query, "v1")
}
fn parse_search_response(
- &self,
body: &str,
query: &str,
tag: &str,
@@ -3310,6 +3749,8 @@ impl TidalClient {
tracks: Option>,
#[serde(default)]
playlists: Option>,
+ #[serde(default)]
+ videos: Option>,
}
let data: SR = serde_json::from_str(body)
@@ -3326,13 +3767,19 @@ impl TidalClient {
.unwrap_or_default();
log::debug!(
- "search [{}]: t={} al={} ar={} pl={} th={} for '{}'",
+ "search [{}]: t={} al={} ar={} pl={} v={} th={} [{}] for '{}'",
tag,
data.tracks.as_ref().map(|s| s.items.len()).unwrap_or(0),
data.albums.as_ref().map(|s| s.items.len()).unwrap_or(0),
data.artists.as_ref().map(|s| s.items.len()).unwrap_or(0),
data.playlists.as_ref().map(|s| s.items.len()).unwrap_or(0),
+ data.videos.as_ref().map(|s| s.items.len()).unwrap_or(0),
top_hits.len(),
+ top_hits
+ .iter()
+ .map(|h| h.hit_type.as_str())
+ .collect::>()
+ .join(","),
query
);
@@ -3354,6 +3801,7 @@ impl TidalClient {
.playlists
.map(|s| s.items.into_iter().map(|p| p.into()).collect())
.unwrap_or_default(),
+ videos: data.videos.map(|s| s.items).unwrap_or_default(),
top_hit_type: None,
top_hits,
})
@@ -3693,12 +4141,7 @@ impl TidalClient {
Self::add_unique_sections(&mut all_sections, &mut seen_titles, sections);
}
- if let Ok(mut sections) = self.fetch_page_endpoint("pages/rising").await {
- sections.retain(|s| {
- s.section_type != "VIDEO_LIST"
- && s.title != "Video Playlists"
- && s.title != "New Videos"
- });
+ if let Ok(sections) = self.fetch_page_endpoint("pages/rising").await {
Self::add_unique_sections(&mut all_sections, &mut seen_titles, sections);
}
@@ -3879,12 +4322,14 @@ impl TidalClient {
.unwrap_or("")
.to_string();
- // Only skip truly non-content promotional types
- if section_type == "FEATURED_PROMOTIONS"
- || section_type == "MULTIPLE_TOP_PROMOTIONS"
- || section_type == "TEXT_BLOCK"
+ // Only skip truly non-content promotional types. MULTIPLE_TOP_PROMOTIONS
+ // is content (a "Featured" row of playlist/video promos handled by the
+ // frontend). FEATURED_PROMOTIONS is a distinct type the UI does not render —
+ // letting it through emits id-less cards, so skip it.
+ if section_type == "TEXT_BLOCK"
|| section_type == "SOCIAL"
|| section_type == "ARTICLE_LIST"
+ || section_type == "FEATURED_PROMOTIONS"
{
return None;
}
@@ -5510,6 +5955,47 @@ mod home_tab_tests {
use super::*;
use serde_json::json;
+ #[test]
+ fn search_parses_video_section() {
+ let body = json!({
+ "tracks": { "items": [] },
+ "videos": { "items": [
+ { "id": 111, "title": "A Music Video", "duration": 215,
+ "imageId": "abc", "artists": [{ "id": 5, "name": "Some Artist" }] },
+ { "id": 222, "title": "Another" }
+ ]}
+ })
+ .to_string();
+ let res = TidalClient::parse_search_response(&body, "q", "test").expect("parses");
+ assert_eq!(res.videos.len(), 2);
+ assert_eq!(res.videos[0].id, 111);
+ assert_eq!(res.videos[0].title, "A Music Video");
+ // A missing videos section yields an empty vec, never an error.
+ let none = TidalClient::parse_search_response(
+ &json!({ "tracks": { "items": [] } }).to_string(),
+ "q",
+ "test",
+ )
+ .expect("parses");
+ assert!(none.videos.is_empty());
+ }
+
+ #[test]
+ fn direct_hit_parses_video_type() {
+ let item = json!({
+ "type": "VIDEOS",
+ "value": { "id": 999, "title": "Top Video", "duration": 180,
+ "imageId": "img-uuid", "artists": [{ "id": 1, "name": "Star" }] }
+ });
+ let hit = DirectHitItem::from_typed_value(&item).expect("video hit parses");
+ assert_eq!(hit.hit_type, "VIDEOS");
+ assert_eq!(hit.id, Some(999));
+ assert_eq!(hit.title.as_deref(), Some("Top Video"));
+ assert_eq!(hit.image.as_deref(), Some("img-uuid"));
+ assert_eq!(hit.artist_name.as_deref(), Some("Star"));
+ assert_eq!(hit.duration, Some(180));
+ }
+
#[test]
fn parses_tabs_from_vibes() {
let body = json!({
@@ -5532,6 +6018,41 @@ mod home_tab_tests {
let body = json!({ "items": [] });
assert!(TidalClient::parse_home_tabs(&body).is_empty());
}
+
+ #[test]
+ fn parse_playlist_items_tolerates_null_or_missing_duration() {
+ let items = vec![
+ serde_json::json!({ "type": "track", "item": { "id": 1, "title": "A", "duration": 100 } }),
+ serde_json::json!({ "type": "video", "item": { "id": 2, "title": "V", "duration": null } }),
+ serde_json::json!({ "type": "video", "item": { "id": 3, "title": "V2" } }),
+ ];
+ let out = super::parse_playlist_items(items).expect("must not abort on null duration");
+ assert_eq!(out.len(), 3, "no item should be dropped");
+ assert_eq!(out[1].duration, 0);
+ assert_eq!(out[2].duration, 0);
+ }
+
+ #[test]
+ fn parse_v1_module_skips_featured_promotions() {
+ let module = serde_json::json!({
+ "type": "FEATURED_PROMOTIONS",
+ "pagedList": { "items": [ { "header": "X", "artifactId": "1", "type": "PLAYLIST" } ] }
+ });
+ assert!(
+ super::TidalClient::parse_v1_module(&module).is_none(),
+ "FEATURED_PROMOTIONS must be skipped, not rendered as cards"
+ );
+ }
+
+ #[test]
+ fn parse_v1_module_keeps_multiple_top_promotions() {
+ let module = serde_json::json!({
+ "type": "MULTIPLE_TOP_PROMOTIONS",
+ "title": "Featured",
+ "pagedList": { "items": [ { "header": "X", "artifactId": "1", "type": "PLAYLIST" } ] }
+ });
+ assert!(super::TidalClient::parse_v1_module(&module).is_some());
+ }
}
#[cfg(test)]
diff --git a/src/App.css b/src/App.css
index c5f4ac44..f5f52e90 100644
--- a/src/App.css
+++ b/src/App.css
@@ -335,6 +335,57 @@ textarea {
}
}
+/* Wider cards for video rows (New Music Videos, Classics) — fewer per row. */
+.card-scroll-item-video {
+ flex: 0 0 calc((100% - (var(--cols) - 1) * 16px) / var(--cols));
+ scroll-snap-align: start;
+ min-width: 0;
+ --cols: 2;
+}
+@container (min-width: 9em) {
+ .card-scroll-item-video {
+ --cols: 3;
+ }
+}
+@container (min-width: 12em) {
+ .card-scroll-item-video {
+ --cols: 4;
+ }
+}
+@container (min-width: 15em) {
+ .card-scroll-item-video {
+ --cols: 5;
+ }
+}
+@container (min-width: 18em) {
+ .card-scroll-item-video {
+ --cols: 6;
+ }
+}
+
+/* Featured / promo cards — widest. */
+.card-scroll-item-promo {
+ flex: 0 0 calc((100% - (var(--cols) - 1) * 16px) / var(--cols));
+ scroll-snap-align: start;
+ min-width: 0;
+ --cols: 1;
+}
+@container (min-width: 8em) {
+ .card-scroll-item-promo {
+ --cols: 2;
+ }
+}
+@container (min-width: 14em) {
+ .card-scroll-item-promo {
+ --cols: 3;
+ }
+}
+@container (min-width: 20em) {
+ .card-scroll-item-promo {
+ --cols: 4;
+ }
+}
+
/* Toast slide-in */
@keyframes toastIn {
from {
diff --git a/src/api/tidal.ts b/src/api/tidal.ts
index 07715bc0..abafc450 100644
--- a/src/api/tidal.ts
+++ b/src/api/tidal.ts
@@ -22,6 +22,7 @@ import type {
Profile,
SearchResults,
SuggestionsResponse,
+ TidalVideo,
Track,
} from "../types";
@@ -503,6 +504,7 @@ const V2_TYPE_TO_SECTION: Record = {
ARTIST: "ARTIST_LIST",
PLAYLIST: "PLAYLIST_LIST",
MIX: "MIX_LIST",
+ VIDEO: "VIDEO_LIST",
};
function parseArtistPageV2(json: any): ArtistPageData {
@@ -527,10 +529,14 @@ function parseArtistPageV2(json: any): ArtistPageData {
if (rawItems.length === 0) continue;
const firstType = rawItems[0]?.type as string;
- if (firstType === "VIDEO" || firstType === "TRACK_CREDITS") continue;
+ if (firstType === "TRACK_CREDITS") continue;
const sectionType = V2_TYPE_TO_SECTION[firstType] || firstType;
- const items = rawItems.map((i: any) => i.data || i);
+ const items = rawItems.map((i: any) =>
+ firstType === "VIDEO"
+ ? { ...(i.data || i), _itemType: "VIDEO" }
+ : i.data || i,
+ );
if (sectionType === "TRACK_LIST" && result.topTracks.length === 0) {
result.topTracks = items;
@@ -790,6 +796,18 @@ export async function fetchMediaTracks(item: MediaItemType): Promise {
case "artist": {
return await getArtistTopTracks(item.id);
}
+ case "video":
+ // A music video carries its own id under trackIds when added to a
+ // playlist (the server classifies it), so yield a single video item.
+ return [
+ {
+ id: item.id,
+ title: item.title,
+ itemType: "video",
+ imageId: item.imageId,
+ duration: item.duration ?? 0,
+ },
+ ];
}
}
@@ -939,6 +957,18 @@ export async function getFavoriteMixes(
);
}
+export async function getFavoriteVideos(
+ userId: number,
+ offset: number = 0,
+ limit: number = 50,
+): Promise {
+ return invoke("get_favorite_videos", {
+ userId,
+ offset,
+ limit,
+ });
+}
+
// ==================== Playlist Folders ====================
export async function getPlaylistFolders(
@@ -961,6 +991,11 @@ export async function getPlaylistFolders(
});
}
+export async function getFlattenedPlaylists(): Promise {
+ const items = await invoke("get_all_flattened_playlists");
+ return items.map(normalizeFolderItem).filter((i) => i.kind === "playlist");
+}
+
export async function getAllPlaylists(
userId: number,
offset: number = 0,
@@ -1009,6 +1044,7 @@ function normalizeFolderItem(item: PlaylistFolderItem): PlaylistOrFolder {
image: d.squareImage || d.image,
squareImage: d.squareImage,
numberOfTracks: d.numberOfTracks,
+ numberOfVideos: d.numberOfVideos,
creator: { id: d.creator.id, name: d.creator.name ?? undefined },
playlistType: d.type,
duration: d.duration,
diff --git a/src/atoms/favorites.ts b/src/atoms/favorites.ts
index bbfcece8..18fd699f 100644
--- a/src/atoms/favorites.ts
+++ b/src/atoms/favorites.ts
@@ -3,6 +3,7 @@ import { atomWithStorage } from "jotai/utils";
import type { AlbumDetail, ArtistDetail, FavoriteMix } from "../types";
export const favoriteTrackIdsAtom = atom>(new Set());
+export const favoriteVideoIdsAtom = atom>(new Set());
export const favoriteAlbumIdsAtom = atom>(new Set());
export const favoritePlaylistUuidsAtom = atom>(new Set());
export const followedArtistIdsAtom = atom>(new Set());
diff --git a/src/atoms/video.ts b/src/atoms/video.ts
new file mode 100644
index 00000000..925d8762
--- /dev/null
+++ b/src/atoms/video.ts
@@ -0,0 +1,10 @@
+import { atom } from "jotai";
+import type { TidalVideo, VideoStreamInfo } from "../types";
+
+/** The video currently open in the takeover player (null = closed). */
+export const currentVideoAtom = atom(null);
+export const videoPlayingAtom = atom(false);
+export const videoStreamAtom = atom(null);
+export const videoFullscreenAtom = atom(false);
+/** Overlay visible when true; minimized to the player bar when false. */
+export const videoExpandedAtom = atom(false);
diff --git a/src/components/AddToPlaylistMenu.tsx b/src/components/AddToPlaylistMenu.tsx
index 841a3c27..742cae8a 100644
--- a/src/components/AddToPlaylistMenu.tsx
+++ b/src/components/AddToPlaylistMenu.tsx
@@ -8,6 +8,7 @@ import { authTokensAtom } from "../atoms/auth";
import { getAllPlaylists } from "../api/tidal";
import { useContextMenu } from "../hooks/useContextMenu";
import { type Playlist, getTidalImageUrl } from "../types";
+import { playlistCountLabel } from "../utils/itemHelpers";
import TidalImage from "./TidalImage";
import MenuPortal from "./MenuPortal";
import Toggle from "./Toggle";
@@ -573,8 +574,11 @@ export default function AddToPlaylistMenu({
{playlist.title}
- {playlist.numberOfTracks != null
- ? `${playlist.numberOfTracks} track${playlist.numberOfTracks !== 1 ? "s" : ""}`
+ {playlist.numberOfTracks != null || playlist.numberOfVideos != null
+ ? playlistCountLabel(
+ playlist.numberOfTracks,
+ playlist.numberOfVideos,
+ )
: "Playlist"}
diff --git a/src/components/AppInitializer.tsx b/src/components/AppInitializer.tsx
index ddb65a7c..8f8c4c80 100644
--- a/src/components/AppInitializer.tsx
+++ b/src/components/AppInitializer.tsx
@@ -29,12 +29,14 @@ import {
import { userPlaylistsAtom, deletedPlaylistIdsAtom } from "../atoms/playlists";
import {
favoriteTrackIdsAtom,
+ favoriteVideoIdsAtom,
favoriteAlbumIdsAtom,
favoritePlaylistUuidsAtom,
followedArtistIdsAtom,
favoriteMixIdsAtom,
} from "../atoms/favorites";
import { currentViewAtom } from "../atoms/navigation";
+import { currentVideoAtom, videoPlayingAtom } from "../atoms/video";
import {
isPlayingAtom,
currentTrackAtom,
@@ -160,6 +162,7 @@ export function AppInitializer() {
const setCurrentUserAvatar = useSetAtom(currentUserAvatarAtom);
const setUserPlaylists = useSetAtom(userPlaylistsAtom);
const setFavoriteTrackIds = useSetAtom(favoriteTrackIdsAtom);
+ const setFavoriteVideoIds = useSetAtom(favoriteVideoIdsAtom);
const setFavoriteAlbumIds = useSetAtom(favoriteAlbumIdsAtom);
const setFavoritePlaylistUuids = useSetAtom(favoritePlaylistUuidsAtom);
const setFollowedArtistIds = useSetAtom(followedArtistIdsAtom);
@@ -181,6 +184,7 @@ export function AppInitializer() {
playPrevious,
pauseTrack,
resumeTrack,
+ togglePlayPause,
setVolume,
setBitPerfect,
toggleShuffle,
@@ -437,6 +441,13 @@ export function AppInitializer() {
console.error("Failed to load favorite mix IDs:", error),
);
+ // Video IDs separate (not in unified favorite-ids response)
+ invoke("get_favorite_video_ids", { userId })
+ .then((ids) => setFavoriteVideoIds(new Set(ids)))
+ .catch((error) =>
+ console.error("Failed to load favorite video IDs:", error),
+ );
+
// Non-blocking background preload (2s delay to avoid startup congestion)
const timer = setTimeout(() => {
// Preload in parallel (errors are non-fatal)
@@ -752,11 +763,25 @@ export function AppInitializer() {
// VOLUME SYNC to backend (one-time, reads volume from store)
// ================================================================
useEffect(() => {
- if (!volumeSyncedRef.current) {
- volumeSyncedRef.current = true;
- const vol = store.get(volumeAtom);
- invoke("set_volume", { level: vol }).catch(() => {});
- }
+ if (volumeSyncedRef.current) return;
+ volumeSyncedRef.current = true;
+ // Never push a persisted volume into a bit-perfect pipeline — it must stay at
+ // unity. bitPerfectAtom hydrates asynchronously (get_bit_perfect resolves AFTER
+ // this mount effect), so reading the atom here yields its default `false` and
+ // leaks a non-unity volume (e.g. one set during video) on cold start. Read the
+ // authoritative value from the backend instead.
+ (async () => {
+ let bitPerfect = store.get(bitPerfectAtom);
+ try {
+ bitPerfect = await invoke("get_bit_perfect");
+ } catch {
+ // Fall back to the atom's current value on IPC failure.
+ }
+ if (!bitPerfect) {
+ const vol = store.get(volumeAtom);
+ invoke("set_volume", { level: vol }).catch(() => {});
+ }
+ })();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -999,11 +1024,7 @@ export function AppInitializer() {
// ================================================================
useEffect(() => {
const unlistenToggle = listen("tray:toggle-play", () => {
- if (store.get(isPlayingAtom)) {
- pauseTrack();
- } else {
- resumeTrack();
- }
+ togglePlayPause();
});
const unlistenNext = listen("tray:next-track", () => {
playNext({ explicit: true });
@@ -1012,14 +1033,16 @@ export function AppInitializer() {
playPrevious();
});
const unlistenMprisPlay = listen("mpris:play", () => {
- if (!store.get(isPlayingAtom)) {
- resumeTrack();
- }
+ const playing = store.get(currentVideoAtom)
+ ? store.get(videoPlayingAtom)
+ : store.get(isPlayingAtom);
+ if (!playing) resumeTrack();
});
const unlistenMprisPause = listen("mpris:pause", () => {
- if (store.get(isPlayingAtom)) {
- pauseTrack();
- }
+ const playing = store.get(currentVideoAtom)
+ ? store.get(videoPlayingAtom)
+ : store.get(isPlayingAtom);
+ if (playing) pauseTrack();
});
const unlistenMprisStop = listen("mpris:stop", () => {
invoke("stop_track").catch(() => {});
@@ -1033,7 +1056,7 @@ export function AppInitializer() {
unlistenMprisPause.then((fn) => fn());
unlistenMprisStop.then((fn) => fn());
};
- }, [store, playNext, playPrevious, pauseTrack, resumeTrack]);
+ }, [store, playNext, playPrevious, pauseTrack, resumeTrack, togglePlayPause]);
// ================================================================
// TRAY TOOLTIP — update with current track info
@@ -1063,6 +1086,7 @@ export function AppInitializer() {
const pushMetadata = () => {
const track = store.get(currentTrackAtom);
if (!track) return;
+ if (store.get(currentVideoAtom)) return; // video is current → don't overwrite MPRIS with audio metadata
const streamInfo = store.get(streamInfoAtom);
const favoriteIds = store.get(favoriteTrackIdsAtom);
// Track.album has no artist field; fall back to track's own artist.
@@ -1106,7 +1130,9 @@ export function AppInitializer() {
useEffect(() => {
const pushStatus = () => {
- const playing = store.get(isPlayingAtom);
+ const playing = store.get(currentVideoAtom)
+ ? store.get(videoPlayingAtom)
+ : store.get(isPlayingAtom);
invoke("update_mpris_playback_status", {
isPlaying: playing,
positionSecs: getInterpolatedPosition(),
@@ -1114,8 +1140,14 @@ export function AppInitializer() {
};
pushStatus();
- const unsub = store.sub(isPlayingAtom, pushStatus);
- return unsub;
+ const unsubPlaying = store.sub(isPlayingAtom, pushStatus);
+ const unsubVideoPlaying = store.sub(videoPlayingAtom, pushStatus);
+ const unsubVideo = store.sub(currentVideoAtom, pushStatus);
+ return () => {
+ unsubPlaying();
+ unsubVideoPlaying();
+ unsubVideo();
+ };
}, [store]);
useEffect(() => {
@@ -1208,11 +1240,7 @@ export function AppInitializer() {
// ================================================================
useShortcuts({
playPause: () => {
- if (store.get(isPlayingAtom)) {
- pauseTrack();
- } else {
- resumeTrack();
- }
+ togglePlayPause();
},
nextTrack: () => playNext({ explicit: true }),
prevTrack: () => playPrevious(),
diff --git a/src/components/ArtistPage.tsx b/src/components/ArtistPage.tsx
index eb04e10d..2ab15c4c 100644
--- a/src/components/ArtistPage.tsx
+++ b/src/components/ArtistPage.tsx
@@ -20,6 +20,7 @@ import {
import { useStore } from "jotai";
import { isPlayingAtom, currentTrackAtom } from "../atoms/playback";
import { usePlaybackActions } from "../hooks/usePlaybackActions";
+import { useMediaPlay } from "../hooks/useMediaPlay";
import { useFavorites } from "../hooks/useFavorites";
import { useNavigation } from "../hooks/useNavigation";
import { useToast } from "../contexts/ToastContext";
@@ -100,6 +101,7 @@ export default function ArtistPage({
playFromSource,
playAllFromSource,
} = usePlaybackActions();
+ const playMedia = useMediaPlay();
const {
followedArtistIds,
followArtist,
@@ -439,7 +441,18 @@ export default function ArtistPage({
const handleCardClick = useCallback(
(item: any, sectionType: string) => {
- if (sectionType === "ALBUM_LIST") {
+ if (sectionType === "VIDEO_LIST") {
+ if (item.id != null) {
+ playMedia({
+ type: "video",
+ id: Number(item.id),
+ title: item.title || getItemTitle(item),
+ imageId: item.imageId,
+ artist: item.artist?.name || item.artists?.[0]?.name,
+ duration: item.duration,
+ }).catch(() => {});
+ }
+ } else if (sectionType === "ALBUM_LIST") {
navigateToAlbum(item.id, {
title: item.title,
cover: item.cover,
@@ -469,7 +482,13 @@ export default function ArtistPage({
}
}
},
- [navigateToAlbum, navigateToArtist, navigateToPlaylist, navigateToMix],
+ [
+ navigateToAlbum,
+ navigateToArtist,
+ navigateToPlaylist,
+ navigateToMix,
+ playMedia,
+ ],
);
const artistPlaying = (() => {
@@ -718,9 +737,13 @@ export default function ArtistPage({
}
if (
- ["ALBUM_LIST", "ARTIST_LIST", "PLAYLIST_LIST", "MIX_LIST"].includes(
- section.type,
- )
+ [
+ "ALBUM_LIST",
+ "ARTIST_LIST",
+ "PLAYLIST_LIST",
+ "MIX_LIST",
+ "VIDEO_LIST",
+ ].includes(section.type)
) {
return (
([]);
+ const [loadingMoreVideos, setLoadingMoreVideos] = useState(false);
+ const [hasMoreVideos, setHasMoreVideos] = useState(false);
+ const [videoContextMenu, setVideoContextMenu] = useState<{
+ item: MediaItemType;
+ position: { x: number; y: number };
+ } | null>(null);
+ const videosOffsetRef = useRef(0);
+ const hasMoreVideosRef = useRef(true);
+ const bgFetchingVideosRef = useRef(false);
+ const videosSentinelRef = useRef(null);
+ const [tab, setTab] = useViewTab<"tracks" | "videos">("tracks");
const [allTracks, setAllTracks] = useState([]);
const [totalTracks, setTotalTracks] = useState(0);
@@ -133,15 +163,128 @@ export default function FavoritesView({ onBack }: FavoritesViewProps) {
console.error("Failed to load favorites:", err);
setError(safeErrorMessage(err, "Failed to load favorites"));
} finally {
- if (generationRef.current !== gen) return;
- setLoading(false);
- setSortLoading(false);
+ if (generationRef.current === gen) {
+ setLoading(false);
+ setSortLoading(false);
+ }
}
};
loadFavorites();
}, [authTokens?.user_id, sortColumn, sortDirection]);
+ // Load favorite videos — first page only; more via infinite scroll (or all at
+ // once when the search bar is focused). Mirrors the tracks pagination.
+ useEffect(() => {
+ const userId = authTokens?.user_id;
+ if (userId == null) return;
+ let cancelled = false;
+ videosOffsetRef.current = 0;
+ hasMoreVideosRef.current = true;
+ bgFetchingVideosRef.current = false;
+ getFavoriteVideos(userId, 0, VIDEO_PAGE_SIZE)
+ .then((items) => {
+ if (cancelled) return;
+ setVideos(items);
+ videosOffsetRef.current = items.length;
+ hasMoreVideosRef.current = items.length === VIDEO_PAGE_SIZE;
+ setHasMoreVideos(hasMoreVideosRef.current);
+ })
+ .catch((err) => {
+ console.error("Failed to load favorite videos:", err);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [authTokens?.user_id]);
+
+ // The `videos` list is the fetched favorites; trim it by the live favorite set so
+ // an unfav removes instantly. But do NOT trim before that set has hydrated on
+ // restart (it would hide everything). Latch once the set has been non-empty at
+ // least once — after that, an empty set means the user genuinely unfaved them all,
+ // so the grid must go empty (not fall back to the unfiltered fetch). Latch via a
+ // guarded render-phase update (React's supported pattern) instead of a
+ // setState-in-effect, which would trip react-hooks/set-state-in-effect.
+ const [favIdsHydrated, setFavIdsHydrated] = useState(false);
+ if (favoriteVideoIds.size > 0 && !favIdsHydrated) {
+ setFavIdsHydrated(true);
+ }
+
+ const displayedVideos = useMemo(
+ () =>
+ favIdsHydrated || favoriteVideoIds.size > 0
+ ? videos.filter((v) => favoriteVideoIds.has(v.id))
+ : videos,
+ [videos, favoriteVideoIds, favIdsHydrated],
+ );
+
+ // Load ALL remaining favorite-video pages (so local search covers everything,
+ // and — when a queue is playing — so prev/next reach the whole library, matching
+ // the tracks tab). `onPageFetched` receives each fresh page as it arrives.
+ const fetchRemainingVideos = useCallback(
+ async (onPageFetched?: (videos: TidalVideo[]) => void) => {
+ if (bgFetchingVideosRef.current || !hasMoreVideosRef.current) return;
+ const userId = authTokens?.user_id;
+ if (userId == null) return;
+ bgFetchingVideosRef.current = true;
+ try {
+ while (hasMoreVideosRef.current) {
+ const page = await getFavoriteVideos(
+ userId,
+ videosOffsetRef.current,
+ VIDEO_PAGE_SIZE,
+ );
+ startTransition(() => {
+ setVideos((prev) => {
+ const seen = new Set(prev.map((v) => v.id));
+ return [...prev, ...page.filter((v) => !seen.has(v.id))];
+ });
+ });
+ videosOffsetRef.current += page.length;
+ hasMoreVideosRef.current = page.length === VIDEO_PAGE_SIZE;
+ setHasMoreVideos(hasMoreVideosRef.current);
+ onPageFetched?.(page);
+ }
+ } catch (err) {
+ console.error("Failed to background-fetch favorite videos:", err);
+ } finally {
+ bgFetchingVideosRef.current = false;
+ }
+ },
+ [authTokens?.user_id],
+ );
+
+ // Infinite-scroll one more page of favorite videos.
+ const loadMoreVideos = useCallback(async () => {
+ if (
+ loadingMoreVideos ||
+ !hasMoreVideosRef.current ||
+ bgFetchingVideosRef.current
+ )
+ return;
+ const userId = authTokens?.user_id;
+ if (userId == null) return;
+ setLoadingMoreVideos(true);
+ try {
+ const page = await getFavoriteVideos(
+ userId,
+ videosOffsetRef.current,
+ VIDEO_PAGE_SIZE,
+ );
+ setVideos((prev) => {
+ const seen = new Set(prev.map((v) => v.id));
+ return [...prev, ...page.filter((v) => !seen.has(v.id))];
+ });
+ videosOffsetRef.current += page.length;
+ hasMoreVideosRef.current = page.length === VIDEO_PAGE_SIZE;
+ setHasMoreVideos(hasMoreVideosRef.current);
+ } catch (err) {
+ console.error("Failed to load more favorite videos:", err);
+ } finally {
+ setLoadingMoreVideos(false);
+ }
+ }, [loadingMoreVideos, authTokens?.user_id]);
+
// Fetch all remaining pages in the background, appending to state as they arrive
const fetchRemaining = useCallback(
async (onPageFetched?: (items: Track[]) => void) => {
@@ -249,18 +392,79 @@ export default function FavoritesView({ onBack }: FavoritesViewProps) {
return { filteredTracks: filtered, displayNumbers: numbers };
}, [tracks, searchQuery]);
+ // Local search also filters the Videos tab (title / artist).
+ const filteredVideos = useMemo(() => {
+ const q = searchQuery.trim().toLowerCase();
+ if (!q) return displayedVideos;
+ return displayedVideos.filter((v) => {
+ const title = (v.title ?? "").toLowerCase();
+ const artist = (
+ v.artist?.name ??
+ v.artists?.map((a) => a.name).join(" ") ??
+ ""
+ ).toLowerCase();
+ return title.includes(q) || artist.includes(q);
+ });
+ }, [displayedVideos, searchQuery]);
+
+ // Infinite-scroll observer for the Videos tab (disabled while filtering —
+ // focusing the search bar loads everything up front instead).
+ useEffect(() => {
+ const el = videosSentinelRef.current;
+ if (!el) return;
+ const obs = new IntersectionObserver(
+ (entries) => {
+ if (entries[0].isIntersecting) loadMoreVideos();
+ },
+ { rootMargin: "300px" },
+ );
+ obs.observe(el);
+ return () => obs.disconnect();
+ }, [loadMoreVideos, hasMoreVideos, tab, isFiltering]);
+
const handleSearchFocus = useCallback(() => {
if (hasMoreRef.current && !bgFetchingRef.current) {
setTimeout(() => fetchRemaining(), 0);
}
- }, [fetchRemaining]);
+ if (hasMoreVideosRef.current && !bgFetchingVideosRef.current) {
+ setTimeout(() => fetchRemainingVideos(), 0);
+ }
+ }, [fetchRemaining, fetchRemainingVideos]);
- const favoritesSource = (allTracks: Track[]) => ({
- type: "favorites" as const,
- id: "favorites" as const,
- name: "Loved Tracks",
- allTracks,
- });
+ const { navigateToExplore, navigateToExplorePage } = useNavigation();
+
+ // "Go to videos" CTA: reuse the Explore page's Videos link (its apiPath is
+ // runtime data), falling back to the Explore landing if not found.
+ const handleGoToVideos = useCallback(async () => {
+ try {
+ const { sections } = await getPageSection("pages/explore");
+ for (const s of sections) {
+ const item = (s.items as any[] | undefined)?.find(
+ (i) => i?.apiPath && getItemTitle(i) === "Videos",
+ );
+ if (item) {
+ navigateToExplorePage(item.apiPath, "Videos");
+ return;
+ }
+ }
+ } catch {
+ // fall through
+ }
+ navigateToExplore();
+ }, [navigateToExplore, navigateToExplorePage]);
+
+ // Stable identity so it doesn't destabilize handlePlayTrack (onPlay) and
+ // defeat TrackList's memo — otherwise every tab switch re-renders the whole
+ // virtualized list.
+ const favoritesSource = useCallback(
+ (allTracks: Track[]) => ({
+ type: "favorites" as const,
+ id: "favorites" as const,
+ name: "Loved Tracks",
+ allTracks,
+ }),
+ [],
+ );
const handlePlayTrack = useCallback(
async (track: Track, _index: number) => {
@@ -316,6 +520,69 @@ export default function FavoritesView({ onBack }: FavoritesViewProps) {
}
};
+ // Video-tab counterparts of favoritesSource/handlePlayAll/handleShuffle. A
+ // distinct source id ("favorites-videos") lets the header play button reflect
+ // the video queue independently of the tracks queue; type stays "favorites" so
+ // "Playing from" still navigates back to this page.
+ const videosSource = useCallback(
+ (list: Track[]) => ({
+ type: "favorites" as const,
+ id: "favorites-videos" as const,
+ name: "Loved Videos",
+ allTracks: list,
+ }),
+ [],
+ );
+
+ // Grow the queue to the full favorite-video library in the background, so
+ // prev/next reach beyond the currently-loaded pages (mirrors the tracks tab).
+ const appendRemainingVideosToQueue = useCallback(() => {
+ if (hasMoreVideosRef.current && !bgFetchingVideosRef.current) {
+ fetchRemainingVideos((vids) => appendToQueue(vids.map(videoToTrack)));
+ }
+ }, [fetchRemainingVideos, appendToQueue]);
+
+ const handlePlayVideo = useCallback(
+ async (video: TidalVideo) => {
+ const list = displayedVideos.map(videoToTrack);
+ try {
+ await playFromSource(videoToTrack(video), list, {
+ source: videosSource(list),
+ });
+ appendRemainingVideosToQueue();
+ } catch (err) {
+ console.error("Failed to play video:", err);
+ }
+ },
+ [displayedVideos, playFromSource, videosSource, appendRemainingVideosToQueue],
+ );
+
+ const handlePlayAllVideos = async () => {
+ const list = displayedVideos.map(videoToTrack);
+ if (list.length === 0) return;
+ try {
+ await playAllFromSource(list, { source: videosSource(list) });
+ appendRemainingVideosToQueue();
+ } catch (err) {
+ console.error("Failed to play loved videos:", err);
+ }
+ };
+
+ const handleShuffleVideos = async () => {
+ const pool = displayedVideos.map(videoToTrack);
+ if (pool.length === 0) return;
+ const firstIdx = Math.floor(Math.random() * pool.length);
+ const first = pool[firstIdx];
+ const rest = pool.filter((_, i) => i !== firstIdx);
+ try {
+ setShuffledQueue(rest, { source: videosSource(pool) });
+ await playTrack(first);
+ appendRemainingVideosToQueue();
+ } catch (err) {
+ console.error("Failed to shuffle loved videos:", err);
+ }
+ };
+
if (loading) {
return ;
}
@@ -372,11 +639,11 @@ export default function FavoritesView({ onBack }: FavoritesViewProps) {
+ {/* Hide the audio chrome (sidebar + heavy library grids + player bar) while a
+ fullscreen video overlay is open. An opaque overlay does NOT stop WebKit from
+ compositing the layer tree beneath it every video frame — at 4K that throttles
+ the compositor ~3x and makes the video stutter. display:none removes those
+ layers from compositing entirely. `contents` keeps the wrapper layout-neutral
+ for the fixed-positioned chrome when no video is playing. */}
+
@@ -104,9 +119,12 @@ export default function Layout({ children }: LayoutProps) {