Add playlist and favorites commands, update sidebar
Backend: - Add playlist.rs commands: get_user_playlists, get_playlist, search_playlists - Add favorites.rs commands: get_favorites, add_favorite, remove_favorite - Add API client methods: search_playlists, add_favorite, remove_favorite Frontend: - Remove Radio and New from sidebar (no API support) - Sidebar now loads and displays user playlists dynamically - Add playlist and favorites views (placeholder for now) - Pass selectedPlaylistId and onPlaylistSelect to Sidebar
This commit is contained in:
1 parent
dd2600feaa
commit
bda4ea5b76
7 files changed
+276
-50
No files matched your search
@@ -424,6 +424,68 @@ impl QobuzClient {
|
|||||||
|
|
||||||
Ok(serde_json::from_value(playlists.clone())?)
|
Ok(serde_json::from_value(playlists.clone())?)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Search playlists
|
||||||
|
pub async fn search_playlists(&self, query: &str, limit: u32) -> Result<SearchResultsPage<Playlist>> {
|
||||||
|
let url = endpoints::build_url(paths::PLAYLIST_SEARCH);
|
||||||
|
let response: Value = self
|
||||||
|
.http
|
||||||
|
.get(&url)
|
||||||
|
.header("X-App-Id", self.app_id().await?)
|
||||||
|
.query(&[("query", query), ("limit", &limit.to_string())])
|
||||||
|
.send()
|
||||||
|
.await?
|
||||||
|
.json()
|
||||||
|
.await?;
|
||||||
|
|
||||||
|
let playlists = response
|
||||||
|
.get("playlists")
|
||||||
|
.ok_or_else(|| ApiError::ApiResponse("No playlists in response".to_string()))?;
|
||||||
|
|
||||||
|
Ok(serde_json::from_value(playlists.clone())?)
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Add item to favorites
|
||||||
|
pub async fn add_favorite(&self, fav_type: &str, item_id: &str) -> Result<()> {
|
||||||
|
let url = endpoints::build_url(paths::FAVORITE_CREATE);
|
||||||
|
let type_key = format!("{}_ids", fav_type); // album_ids, track_ids, artist_ids
|
||||||
|
|
||||||
|
let response = self
|
||||||
|
.http
|
||||||
|
.get(&url)
|
||||||
|
.header("X-App-Id", self.app_id().await?)
|
||||||
|
.header("X-User-Auth-Token", self.auth_token().await?)
|
||||||
|
.query(&[(&type_key, item_id)])
|
||||||
|
.send()
|
||||||
|
.await?;
|
||||||
|
|
||||||
|
if response.status().is_success() {
|
||||||
|
Ok(())
|
||||||
|
} else {
|
||||||
|
Err(ApiError::ApiResponse(format!("Failed to add favorite: {}", response.status())))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Remove item from favorites
|
||||||
|
pub async fn remove_favorite(&self, fav_type: &str, item_id: &str) -> Result<()> {
|
||||||
|
let url = endpoints::build_url(paths::FAVORITE_DELETE);
|
||||||
|
let type_key = format!("{}_ids", fav_type);
|
||||||
|
|
||||||
|
let response = self
|
||||||
|
.http
|
||||||
|
.get(&url)
|
||||||
|
.header("X-App-Id", self.app_id().await?)
|
||||||
|
.header("X-User-Auth-Token", self.auth_token().await?)
|
||||||
|
.query(&[(&type_key, item_id)])
|
||||||
|
.send()
|
||||||
|
.await?;
|
||||||
|
|
||||||
|
if response.status().is_success() {
|
||||||
|
Ok(())
|
||||||
|
} else {
|
||||||
|
Err(ApiError::ApiResponse(format!("Failed to remove favorite: {}", response.status())))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Default for QobuzClient {
|
impl Default for QobuzClient {
|
||||||
|
|||||||
@@ -0,0 +1,59 @@
|
|||||||
|
//! Favorites-related Tauri commands
|
||||||
|
|
||||||
|
use serde_json::Value;
|
||||||
|
use tauri::State;
|
||||||
|
use tokio::sync::Mutex;
|
||||||
|
|
||||||
|
use crate::api::client::QobuzClient;
|
||||||
|
|
||||||
|
/// Get user's favorites
|
||||||
|
/// fav_type can be: "albums", "tracks", or "artists"
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn get_favorites(
|
||||||
|
fav_type: String,
|
||||||
|
limit: Option<u32>,
|
||||||
|
offset: Option<u32>,
|
||||||
|
client: State<'_, std::sync::Arc<Mutex<QobuzClient>>>,
|
||||||
|
) -> Result<Value, String> {
|
||||||
|
log::info!("Command: get_favorites type={} limit={:?} offset={:?}", fav_type, limit, offset);
|
||||||
|
|
||||||
|
let client = client.lock().await;
|
||||||
|
client
|
||||||
|
.get_favorites(&fav_type, limit.unwrap_or(50), offset.unwrap_or(0))
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to get favorites: {}", e))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Add item to favorites
|
||||||
|
/// fav_type can be: "album", "track", or "artist"
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn add_favorite(
|
||||||
|
fav_type: String,
|
||||||
|
item_id: String,
|
||||||
|
client: State<'_, std::sync::Arc<Mutex<QobuzClient>>>,
|
||||||
|
) -> Result<(), String> {
|
||||||
|
log::info!("Command: add_favorite type={} id={}", fav_type, item_id);
|
||||||
|
|
||||||
|
let client = client.lock().await;
|
||||||
|
client
|
||||||
|
.add_favorite(&fav_type, &item_id)
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to add favorite: {}", e))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Remove item from favorites
|
||||||
|
/// fav_type can be: "album", "track", or "artist"
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn remove_favorite(
|
||||||
|
fav_type: String,
|
||||||
|
item_id: String,
|
||||||
|
client: State<'_, std::sync::Arc<Mutex<QobuzClient>>>,
|
||||||
|
) -> Result<(), String> {
|
||||||
|
log::info!("Command: remove_favorite type={} id={}", fav_type, item_id);
|
||||||
|
|
||||||
|
let client = client.lock().await;
|
||||||
|
client
|
||||||
|
.remove_favorite(&fav_type, &item_id)
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to remove favorite: {}", e))
|
||||||
|
}
|
||||||
@@ -3,11 +3,15 @@
|
|||||||
//! Exposes backend functionality to the frontend via IPC
|
//! Exposes backend functionality to the frontend via IPC
|
||||||
|
|
||||||
pub mod auth;
|
pub mod auth;
|
||||||
|
pub mod favorites;
|
||||||
pub mod playback;
|
pub mod playback;
|
||||||
|
pub mod playlist;
|
||||||
pub mod queue;
|
pub mod queue;
|
||||||
pub mod search;
|
pub mod search;
|
||||||
|
|
||||||
pub use auth::*;
|
pub use auth::*;
|
||||||
|
pub use favorites::*;
|
||||||
pub use playback::*;
|
pub use playback::*;
|
||||||
|
pub use playlist::*;
|
||||||
pub use queue::*;
|
pub use queue::*;
|
||||||
pub use search::*;
|
pub use search::*;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
//! Playlist-related Tauri commands
|
||||||
|
|
||||||
|
use tauri::State;
|
||||||
|
use tokio::sync::Mutex;
|
||||||
|
|
||||||
|
use crate::api::client::QobuzClient;
|
||||||
|
use crate::api::models::{Playlist, SearchResultsPage};
|
||||||
|
|
||||||
|
/// Get user's playlists
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn get_user_playlists(
|
||||||
|
client: State<'_, std::sync::Arc<Mutex<QobuzClient>>>,
|
||||||
|
) -> Result<Vec<Playlist>, String> {
|
||||||
|
log::info!("Command: get_user_playlists");
|
||||||
|
|
||||||
|
let client = client.lock().await;
|
||||||
|
client
|
||||||
|
.get_user_playlists()
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to get user playlists: {}", e))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Get a specific playlist by ID
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn get_playlist(
|
||||||
|
playlist_id: u64,
|
||||||
|
client: State<'_, std::sync::Arc<Mutex<QobuzClient>>>,
|
||||||
|
) -> Result<Playlist, String> {
|
||||||
|
log::info!("Command: get_playlist {}", playlist_id);
|
||||||
|
|
||||||
|
let client = client.lock().await;
|
||||||
|
client
|
||||||
|
.get_playlist(playlist_id)
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to get playlist: {}", e))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Search playlists
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn search_playlists(
|
||||||
|
query: String,
|
||||||
|
limit: Option<u32>,
|
||||||
|
client: State<'_, std::sync::Arc<Mutex<QobuzClient>>>,
|
||||||
|
) -> Result<SearchResultsPage<Playlist>, String> {
|
||||||
|
log::info!("Command: search_playlists \"{}\"", query);
|
||||||
|
|
||||||
|
let client = client.lock().await;
|
||||||
|
client
|
||||||
|
.search_playlists(&query, limit.unwrap_or(20))
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to search playlists: {}", e))
|
||||||
|
}
|
||||||
@@ -116,6 +116,14 @@ pub fn run() {
|
|||||||
commands::set_repeat,
|
commands::set_repeat,
|
||||||
commands::get_repeat,
|
commands::get_repeat,
|
||||||
commands::get_queue_state,
|
commands::get_queue_state,
|
||||||
|
// Playlist commands
|
||||||
|
commands::get_user_playlists,
|
||||||
|
commands::get_playlist,
|
||||||
|
commands::search_playlists,
|
||||||
|
// Favorites commands
|
||||||
|
commands::get_favorites,
|
||||||
|
commands::add_favorite,
|
||||||
|
commands::remove_favorite,
|
||||||
])
|
])
|
||||||
.run(tauri::generate_context!())
|
.run(tauri::generate_context!())
|
||||||
.expect("error while running tauri application");
|
.expect("error while running tauri application");
|
||||||
|
|||||||
@@ -1,24 +1,65 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Search, Home, Radio, Clock, Music, Disc3, Mic2, Plus, MoreVertical, ChevronDown, Heart } from 'lucide-svelte';
|
import { Search, Home, Clock, Music, Disc3, Mic2, Plus, MoreVertical, ChevronDown, Heart, ListMusic } from 'lucide-svelte';
|
||||||
|
import { invoke } from '@tauri-apps/api/core';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import NavigationItem from './NavigationItem.svelte';
|
import NavigationItem from './NavigationItem.svelte';
|
||||||
import UserCard from './UserCard.svelte';
|
import UserCard from './UserCard.svelte';
|
||||||
|
|
||||||
|
interface Playlist {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
tracks_count: number;
|
||||||
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
activeView: string;
|
activeView: string;
|
||||||
|
selectedPlaylistId?: number | null;
|
||||||
onNavigate: (view: string) => void;
|
onNavigate: (view: string) => void;
|
||||||
|
onPlaylistSelect?: (playlistId: number) => void;
|
||||||
onSettingsClick?: () => void;
|
onSettingsClick?: () => void;
|
||||||
onLogout?: () => void;
|
onLogout?: () => void;
|
||||||
userName?: string;
|
userName?: string;
|
||||||
subscription?: string;
|
subscription?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { activeView, onNavigate, onSettingsClick, onLogout, userName = 'User', subscription = 'Qobuz' }: Props = $props();
|
let {
|
||||||
|
activeView,
|
||||||
|
selectedPlaylistId = null,
|
||||||
|
onNavigate,
|
||||||
|
onPlaylistSelect,
|
||||||
|
onSettingsClick,
|
||||||
|
onLogout,
|
||||||
|
userName = 'User',
|
||||||
|
subscription = 'Qobuz'
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let userPlaylists = $state<Playlist[]>([]);
|
||||||
|
let playlistsLoading = $state(false);
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
loadUserPlaylists();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadUserPlaylists() {
|
||||||
|
playlistsLoading = true;
|
||||||
|
try {
|
||||||
|
const playlists = await invoke<Playlist[]>('get_user_playlists');
|
||||||
|
userPlaylists = playlists;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to load playlists:', err);
|
||||||
|
} finally {
|
||||||
|
playlistsLoading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function handleViewChange(view: string) {
|
function handleViewChange(view: string) {
|
||||||
console.log('Sidebar: handleViewChange called with view:', view);
|
|
||||||
console.log('Sidebar: onNavigate function exists:', !!onNavigate);
|
|
||||||
onNavigate(view);
|
onNavigate(view);
|
||||||
console.log('Sidebar: onNavigate called');
|
}
|
||||||
|
|
||||||
|
function handlePlaylistClick(playlist: Playlist) {
|
||||||
|
if (onPlaylistSelect) {
|
||||||
|
onPlaylistSelect(playlist.id);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -47,20 +88,6 @@
|
|||||||
>
|
>
|
||||||
{#snippet icon()}<Home size={18} />{/snippet}
|
{#snippet icon()}<Home size={18} />{/snippet}
|
||||||
</NavigationItem>
|
</NavigationItem>
|
||||||
<NavigationItem
|
|
||||||
label="New"
|
|
||||||
active={activeView === 'new'}
|
|
||||||
onclick={() => handleViewChange('new')}
|
|
||||||
>
|
|
||||||
{#snippet icon()}<Radio size={18} />{/snippet}
|
|
||||||
</NavigationItem>
|
|
||||||
<NavigationItem
|
|
||||||
label="Radio"
|
|
||||||
active={activeView === 'radio'}
|
|
||||||
onclick={() => handleViewChange('radio')}
|
|
||||||
>
|
|
||||||
{#snippet icon()}<Radio size={18} />{/snippet}
|
|
||||||
</NavigationItem>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Library Section -->
|
<!-- Library Section -->
|
||||||
@@ -101,20 +128,12 @@
|
|||||||
<div class="playlists-header">
|
<div class="playlists-header">
|
||||||
<div class="section-header">Playlists</div>
|
<div class="section-header">Playlists</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<button class="icon-btn">
|
<button class="icon-btn" onclick={loadUserPlaylists} title="Refresh playlists">
|
||||||
<MoreVertical size={14} />
|
<MoreVertical size={14} />
|
||||||
</button>
|
</button>
|
||||||
<button class="icon-btn">
|
|
||||||
<ChevronDown size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="create-btn">
|
|
||||||
<Plus size={18} />
|
|
||||||
<span>Create New...</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<NavigationItem
|
<NavigationItem
|
||||||
label="Favorites"
|
label="Favorites"
|
||||||
active={activeView === 'favorites'}
|
active={activeView === 'favorites'}
|
||||||
@@ -122,6 +141,22 @@
|
|||||||
>
|
>
|
||||||
{#snippet icon()}<Heart size={18} />{/snippet}
|
{#snippet icon()}<Heart size={18} />{/snippet}
|
||||||
</NavigationItem>
|
</NavigationItem>
|
||||||
|
|
||||||
|
{#if playlistsLoading}
|
||||||
|
<div class="playlists-loading">Loading...</div>
|
||||||
|
{:else if userPlaylists.length > 0}
|
||||||
|
{#each userPlaylists as playlist (playlist.id)}
|
||||||
|
<NavigationItem
|
||||||
|
label={playlist.name}
|
||||||
|
active={activeView === 'playlist' && selectedPlaylistId === playlist.id}
|
||||||
|
onclick={() => handlePlaylistClick(playlist)}
|
||||||
|
>
|
||||||
|
{#snippet icon()}<ListMusic size={18} />{/snippet}
|
||||||
|
</NavigationItem>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<div class="no-playlists">No playlists yet</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -246,28 +281,11 @@
|
|||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-btn {
|
.playlists-loading,
|
||||||
width: 100%;
|
.no-playlists {
|
||||||
height: 36px;
|
font-size: 13px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 0 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
cursor: pointer;
|
padding: 8px 12px;
|
||||||
transition: background-color 150ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn:hover {
|
|
||||||
background-color: var(--bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn span {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-section {
|
.user-section {
|
||||||
|
|||||||
+24
-1
@@ -119,10 +119,11 @@
|
|||||||
let userInfo = $state<{ userName: string; subscription: string } | null>(null);
|
let userInfo = $state<{ userName: string; subscription: string } | null>(null);
|
||||||
|
|
||||||
// View State
|
// View State
|
||||||
type ViewType = 'home' | 'search' | 'library' | 'settings' | 'album';
|
type ViewType = 'home' | 'search' | 'library' | 'settings' | 'album' | 'playlist' | 'favorites';
|
||||||
let activeView = $state<ViewType>('home');
|
let activeView = $state<ViewType>('home');
|
||||||
let viewHistory = $state<ViewType[]>(['home']);
|
let viewHistory = $state<ViewType[]>(['home']);
|
||||||
let selectedAlbum = $state<AlbumDetail | null>(null);
|
let selectedAlbum = $state<AlbumDetail | null>(null);
|
||||||
|
let selectedPlaylistId = $state<number | null>(null);
|
||||||
|
|
||||||
// Overlay States
|
// Overlay States
|
||||||
let isQueueOpen = $state(false);
|
let isQueueOpen = $state(false);
|
||||||
@@ -166,9 +167,17 @@
|
|||||||
if (activeView !== 'album') {
|
if (activeView !== 'album') {
|
||||||
selectedAlbum = null;
|
selectedAlbum = null;
|
||||||
}
|
}
|
||||||
|
if (activeView !== 'playlist') {
|
||||||
|
selectedPlaylistId = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handlePlaylistSelect(playlistId: number) {
|
||||||
|
selectedPlaylistId = playlistId;
|
||||||
|
navigateTo('playlist');
|
||||||
|
}
|
||||||
|
|
||||||
async function handleAlbumClick(albumId: string) {
|
async function handleAlbumClick(albumId: string) {
|
||||||
try {
|
try {
|
||||||
showToast('Loading album...', 'info');
|
showToast('Loading album...', 'info');
|
||||||
@@ -760,7 +769,9 @@
|
|||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<Sidebar
|
<Sidebar
|
||||||
{activeView}
|
{activeView}
|
||||||
|
{selectedPlaylistId}
|
||||||
onNavigate={navigateTo}
|
onNavigate={navigateTo}
|
||||||
|
onPlaylistSelect={handlePlaylistSelect}
|
||||||
onSettingsClick={() => navigateTo('settings')}
|
onSettingsClick={() => navigateTo('settings')}
|
||||||
onLogout={handleLogout}
|
onLogout={handleLogout}
|
||||||
userName={userInfo?.userName || 'User'}
|
userName={userInfo?.userName || 'User'}
|
||||||
@@ -794,6 +805,18 @@
|
|||||||
<h1>Library</h1>
|
<h1>Library</h1>
|
||||||
<p>Your library will appear here...</p>
|
<p>Your library will appear here...</p>
|
||||||
</div>
|
</div>
|
||||||
|
{:else if activeView === 'playlist' && selectedPlaylistId}
|
||||||
|
<div class="placeholder-view">
|
||||||
|
<h1>Playlist</h1>
|
||||||
|
<p>Playlist view coming soon... (ID: {selectedPlaylistId})</p>
|
||||||
|
<button class="back-btn" onclick={goBack}>Go Back</button>
|
||||||
|
</div>
|
||||||
|
{:else if activeView === 'favorites'}
|
||||||
|
<div class="placeholder-view">
|
||||||
|
<h1>Favorites</h1>
|
||||||
|
<p>Your favorite tracks and albums will appear here...</p>
|
||||||
|
<button class="back-btn" onclick={goBack}>Go Back</button>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user