ab/furumusic
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Activity

Improved torrent UI
Build and Publish / Build and Publish Docker Image (push) Successful in 2m50s
Details

Browse Source
This commit is contained in:
Ultradesu
2026-05-26 14:47:10 +03:00
parent 16de1fb711
commit 31ae57a5a3
11 changed files with 895 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+1 -1
View File
@@ -1397,7 +1397,7 @@ checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"
[[package]]
name = "furumusic"
version = "0.1.10"
version = "0.1.12"
dependencies = [
"anyhow",
"async-trait",
Cargo.toml
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "furumusic"
version = "0.1.11"
version = "0.1.12"
edition = "2024"
description = "Reusable web-app boilerplate: auth, OIDC/SSO, admin panel, user management, i18n, PostgreSQL"
src/config.rs
+63
View File
@@ -316,11 +316,17 @@ impl_env_overrides!(
);
impl AppConfig {
fn normalize_host_paths(&mut self) {
self.agent_inbox_dir = normalize_host_path(&self.agent_inbox_dir);
self.agent_storage_dir = normalize_host_path(&self.agent_storage_dir);
}
/// Build config: start from defaults, then overlay env vars.
/// Used at startup before the DB is available (to get `database_url`).
pub fn load() -> Self {
let mut cfg = Self::default();
cfg.apply_env_overrides();
cfg.normalize_host_paths();
cfg
}
@@ -331,6 +337,7 @@ impl AppConfig {
let mut sources = ConfigSources::default();
cfg.apply_db_overrides(db, &mut sources).await;
cfg.apply_env_overrides_tracked(&mut sources);
cfg.normalize_host_paths();
(cfg, sources)
}
@@ -392,6 +399,44 @@ impl AppConfig {
}
}
fn normalize_host_path(value: &str) -> String {
let trimmed = value.trim();
if trimmed.is_empty() {
return String::new();
}
normalize_windows_user_path(trimmed).unwrap_or_else(|| trimmed.to_owned())
}
#[cfg(not(windows))]
fn normalize_windows_user_path(value: &str) -> Option<String> {
let normalized = value.replace('\\', "/");
let mut parts = normalized.split('/').filter(|part| !part.is_empty());
let drive = parts.next()?;
if drive.len() != 2 || !drive.ends_with(':') {
return None;
}
if !parts.next()?.eq_ignore_ascii_case("Users") {
return None;
}
let user = parts.next()?;
if user.is_empty() {
return None;
}
let mut out = format!("/Users/{user}");
for part in parts {
out.push('/');
out.push_str(part);
}
Some(out)
}
#[cfg(windows)]
fn normalize_windows_user_path(_value: &str) -> Option<String> {
None
}
#[cfg(test)]
mod tests {
use super::*;
@@ -403,6 +448,24 @@ mod tests {
assert_eq!(cfg.log_level, "info");
}
#[cfg(not(windows))]
#[test]
fn normalizes_windows_user_path_on_unix() {
assert_eq!(
normalize_host_path(r"C:\Users\ab\repos\furumusic\media\uploads"),
"/Users/ab/repos/furumusic/media/uploads"
);
}
#[cfg(not(windows))]
#[test]
fn leaves_unix_path_unchanged() {
assert_eq!(
normalize_host_path("/Users/ab/repos/furumusic/media/uploads"),
"/Users/ab/repos/furumusic/media/uploads"
);
}
// SAFETY: tests run with --test-threads=1 so no concurrent env access.
unsafe fn set(k: &str, v: &str) {
unsafe { std::env::set_var(k, v) };
src/i18n/phrases.rs
+142
View File
@@ -264,4 +264,146 @@ translations! {
settings_agent_completion_tokens: "Completion tokens" , "Токенов на ответ";
settings_agent_tokens_per_sec: "Tokens/sec" , "Токенов/сек";
settings_agent_status_loading: "Checking connection" , "Проверка подключения";
// Player UI
player_library: "Library" , "Библиотека";
player_artists: "Artists" , "Артисты";
player_releases: "Releases" , "Релизы";
player_tracks: "Tracks" , "Треки";
player_title: "Title" , "Название";
player_duration: "Duration" , "Длительность";
player_following: "Following" , "Подписки";
player_follow: "Follow" , "Подписаться";
player_followed: "Following" , "Вы подписаны";
player_unfollow_artist: "Unfollow artist" , "Отписаться от артиста";
player_follow_artist: "Follow artist" , "Подписаться на артиста";
player_no_followed_artists: "No followed artists" , "Нет подписок на артистов";
player_playlists: "Playlists" , "Плейлисты";
player_published_playlists: "Published Playlists" , "Опубликованные плейлисты";
player_public: "Public" , "Публичный";
player_published: "Published" , "Опубликован";
player_by: "by" , "от";
player_tracks_count: "tracks" , "треков";
player_files_count: "files" , "файлов";
player_releases_count: "releases" , "релизов";
player_plays_count: "plays" , "прослушиваний";
player_likes_count: "likes" , "лайков";
player_likes_playlist: "Likes" , "Лайки";
player_listened: "listened" , "прослушано";
player_search_placeholder: "Search artists, releases, tracks..." , "Поиск артистов, релизов, треков...";
player_no_results: "No results found" , "Ничего не найдено";
player_new_playlist: "New Playlist" , "Новый плейлист";
player_rename_playlist: "Rename Playlist" , "Переименовать плейлист";
player_playlist_name: "Playlist name" , "Название плейлиста";
player_add_to_playlist: "Add to Playlist" , "Добавить в плейлист";
player_cancel: "Cancel" , "Отмена";
player_create: "Create" , "Создать";
player_save: "Save" , "Сохранить";
player_delete: "Delete" , "Удалить";
player_delete_playlist_confirm: "Delete this playlist?" , "Удалить этот плейлист?";
player_rename: "Rename" , "Переименовать";
player_close: "Close" , "Закрыть";
player_log_out: "Log out" , "Выйти";
player_admin_panel: "Admin Panel" , "Админка";
player_info: "Info" , "Информация";
player_no_details: "No details available." , "Нет подробностей.";
player_release_info: "Release info" , "Информация о релизе";
player_track_info: "Track info" , "Информация о треке";
player_type: "Type" , "Тип";
player_year: "Year" , "Год";
player_uploaders: "Uploaders" , "Загрузили";
player_unknown: "unknown" , "неизвестно";
player_unknown_size: "unknown size" , "размер неизвестен";
player_unknown_release: "Unknown release" , "Неизвестный релиз";
player_unknown_track: "Unknown track" , "Неизвестный трек";
player_unknown_audio: "unknown audio details" , "детали аудио неизвестны";
player_release_year: "Release year" , "Год релиза";
player_audio: "Audio" , "Аудио";
player_size: "Size" , "Размер";
player_uploader: "Uploader" , "Загрузил";
player_play: "Play" , "Играть";
player_like: "Like" , "Лайк";
player_add_to_queue: "Add to queue" , "Добавить в очередь";
player_add_to_end_queue: "Add to end of queue" , "Добавить в конец очереди";
player_play_next: "Play next" , "Играть следующим";
player_queue: "Queue" , "Очередь";
player_next: "Next" , "Далее";
player_previous: "Previous" , "Назад";
player_clear: "Clear" , "Очистить";
player_remove: "Remove" , "Удалить";
player_queue_empty: "Queue is empty" , "Очередь пуста";
player_shuffle: "Shuffle" , "Перемешать";
player_repeat: "Repeat" , "Повтор";
player_volume: "Volume" , "Громкость";
player_appears_on: "Appears on" , "Участвует в";
player_albums: "Albums" , "Альбомы";
player_eps: "EPs" , "EP";
player_singles: "Singles" , "Синглы";
player_compilations: "Compilations" , "Сборники";
player_mixtapes: "Mixtapes" , "Микстейпы";
player_live_releases: "Live releases" , "Концертные релизы";
player_soundtracks: "Soundtracks" , "Саундтреки";
// Player torrent/history UI
player_torrent_manager: "Torrent manager" , "Торрент-менеджер";
player_import_torrent: "Import torrent" , "Импортировать торрент";
player_client_idle: "Client idle" , "Клиент простаивает";
player_active: "active" , "активно";
player_ai_idle: "AI idle" , "ИИ простаивает";
player_ai_prefix: "AI" , "ИИ";
player_processing: "processing" , "обрабатывается";
player_queued: "queued" , "в очереди";
player_saved: "saved" , "сохранено";
player_saved_torrents: "Saved torrents" , "Сохранённые торренты";
player_refresh: "Refresh" , "Обновить";
player_no_saved_torrents: "No saved torrents" , "Сохранённых торрентов нет";
player_torrent_file: "Torrent file" , "Torrent-файл";
player_magnet_link: "Magnet link" , "Magnet-ссылка";
player_preview_content: "Preview content" , "Предпросмотр";
player_download_selected: "Download selected" , "Скачать выбранное";
player_pause_download: "Pause download" , "Поставить на паузу";
player_expand_all: "Expand all" , "Развернуть всё";
player_collapse: "Collapse" , "Свернуть";
player_selected: "selected" , "выбрано";
player_preview: "Preview" , "Предпросмотр";
player_downloading: "Downloading" , "Скачивается";
player_moving: "Moving" , "Перемещается";
player_completed: "Completed" , "Готово";
player_failed: "Failed" , "Ошибка";
player_paused: "Paused" , "Пауза";
player_no_torrent_selected: "No torrent selected" , "Торрент не выбран";
player_down: "down" , "вниз";
player_up: "up" , "вверх";
player_peers: "peers" , "пиры";
player_live: "live" , "активных";
player_seen: "seen" , "видели";
player_eta: "eta" , "осталось";
player_loading_history: "Loading history..." , "Загрузка истории...";
player_failed_load_history: "Failed to load history" , "Не удалось загрузить историю";
player_total_plays: "total plays" , "прослушиваний всего";
player_play_history: "Play history" , "История прослушиваний";
player_no_plays_yet: "No plays yet" , "Прослушиваний пока нет";
player_page: "Page" , "Страница";
player_of: "of" , "из";
player_choose_torrent: "Choose a .torrent file or paste a magnet link." , "Выберите .torrent файл или вставьте magnet-ссылку.";
player_reading_torrent: "Reading torrent file..." , "Читаю torrent-файл...";
player_resolving_magnet: "Resolving magnet metadata. This can take a while..." , "Получаю метаданные magnet-ссылки. Это может занять время...";
player_preview_failed: "Preview failed" , "Предпросмотр не удался";
player_all_files_selected: "All files are selected by default. Clear or adjust the tree before download." , "Все файлы выбраны по умолчанию. Перед скачиванием можно очистить или изменить выбор.";
player_opening_saved_torrent: "Opening saved torrent..." , "Открываю сохранённый торрент...";
player_saved_torrent_opened: "Saved torrent opened. Adjust files or resume download." , "Сохранённый торрент открыт. Можно изменить файлы или продолжить скачивание.";
player_remove_torrent_confirm: "Remove this torrent from the client list? Downloaded files will stay on disk." , "Удалить этот торрент из списка клиента? Скачанные файлы останутся на диске.";
player_torrent_removed: "Torrent removed from the client list." , "Торрент удалён из списка клиента.";
player_select_one_file: "Select at least one file." , "Выберите хотя бы один файл.";
player_starting_download: "Starting download..." , "Запускаю скачивание...";
player_download_started: "Download started. Files will move to inbox when complete." , "Скачивание началось. После завершения файлы будут перенесены во входящие.";
player_pausing_download: "Pausing download..." , "Ставлю скачивание на паузу...";
player_download_paused: "Download paused. Start again when you are ready." , "Скачивание на паузе. Можно продолжить позже.";
player_status_failed: "Status failed" , "Не удалось получить статус";
player_start_failed: "Start failed" , "Не удалось запустить";
player_pause_failed: "Pause failed" , "Не удалось поставить на паузу";
player_load_torrents_failed: "Could not load torrents" , "Не удалось загрузить торренты";
player_open_torrent_failed: "Could not open torrent" , "Не удалось открыть торрент";
player_delete_torrent_failed: "Could not delete torrent" , "Не удалось удалить торрент";
player_load_ai_queue_failed: "Could not load AI queue" , "Не удалось загрузить очередь ИИ";
}
src/player/dto.rs
+6
View File
@@ -162,6 +162,12 @@ pub(super) struct UserProfile {
pub(super) stats: UserStats,
}
#[derive(Debug, Serialize, JsonSchema)]
pub(super) struct AgentQueueStatus {
pub(super) queued_count: i64,
pub(super) processing_count: i64,
}
#[derive(Debug, Serialize, JsonSchema)]
pub(super) struct PlayHistoryItem {
pub(super) id: i64,
src/player/mod.rs
+98
View File
@@ -105,6 +105,36 @@ async fn me_handler(
.into_response()
}
// ---------------------------------------------------------------------------
// GET /api/player/agent-queue
// ---------------------------------------------------------------------------
async fn agent_queue_handler(
session: Session,
db: Database,
pool: &sqlx::PgPool,
) -> cot::Result<cot::response::Response> {
let Some(_user) = auth::get_session_user(&session, &db).await else {
return Ok(json_error(StatusCode::UNAUTHORIZED, "not authenticated"));
};
let (queued_count, processing_count): (i64, i64) = sqlx::query_as(
r#"SELECT
COUNT(*) FILTER (WHERE status = 'queued') AS queued_count,
COUNT(*) FILTER (WHERE status = 'processing') AS processing_count
FROM furumusic__pending_review"#,
)
.fetch_one(pool)
.await
.map_err(|e| cot::Error::internal(e.to_string()))?;
Json(AgentQueueStatus {
queued_count,
processing_count,
})
.into_response()
}
// ---------------------------------------------------------------------------
// GET /api/player/artists?page=N&limit=N
// ---------------------------------------------------------------------------
@@ -2134,6 +2164,30 @@ impl App for PlayerApp {
},
"player_me",
),
Route::with_handler_and_name(
"/agent-queue",
{
let pool = Arc::clone(&pool);
let pool_config = Arc::clone(&pool_config);
get(move |session: Session, db: Database| {
let pool = Arc::clone(&pool);
let pool_config = Arc::clone(&pool_config);
async move {
let pg_pool = pool
.get_or_init(|| async {
sqlx::postgres::PgPoolOptions::new()
.max_connections(5)
.connect(&pool_config.database_url)
.await
.expect("player pool")
})
.await;
agent_queue_handler(session, db, pg_pool).await
}
})
},
"player_agent_queue",
),
// -- Torrent import widget --
Route::with_handler_and_name(
"/torrents",
@@ -2370,6 +2424,50 @@ impl App for PlayerApp {
},
"player_torrent_start",
),
Route::with_handler_and_name(
"/torrents/{id}/pause",
{
let pool = Arc::clone(&pool);
let pool_config = Arc::clone(&pool_config);
let torrent_service = Arc::clone(&torrent_service);
let scheduler_handle = Arc::clone(&self.scheduler_handle);
post(move |session: Session, db: Database, path: Path<PathStringId>| {
let pool = Arc::clone(&pool);
let pool_config = Arc::clone(&pool_config);
let torrent_service = Arc::clone(&torrent_service);
let scheduler_handle = Arc::clone(&scheduler_handle);
async move {
let Some(user) = auth::get_session_user(&session, &db).await else {
return Ok(json_error(
StatusCode::UNAUTHORIZED,
"not authenticated",
));
};
let pg_pool = pool
.get_or_init(|| async {
sqlx::postgres::PgPoolOptions::new()
.max_connections(5)
.connect(&pool_config.database_url)
.await
.expect("player pool")
})
.await;
let service = torrent_service
.get_or_init(|| async {
Arc::new(TorrentService::new(Arc::clone(&scheduler_handle)))
})
.await;
match service.pause(pg_pool, user.id, &path.0.id).await {
Ok(job) => Json(job).into_response(),
Err(err) => {
Ok(json_error(StatusCode::BAD_REQUEST, &err.to_string()))
}
}
}
})
},
"player_torrent_pause",
),
Route::with_handler_and_name(
"/torrents/{id}/status",
{
src/torrents.rs
+51 -2
View File
@@ -210,6 +210,11 @@ impl TorrentSessionRow {
let progress_percent = progress_percent(downloaded_bytes, total_bytes)
.unwrap_or(self.progress_percent)
.clamp(0.0, 100.0);
let progress_percent = if status == "complete" {
100.0
} else {
progress_percent
};
let live = stats.as_ref().and_then(|s| s.live.as_ref());
let peer_stats = live.map(|l| &l.snapshot.peer_stats);
@@ -334,9 +339,13 @@ impl TorrentJob {
selected_size: self.selected_size(),
downloaded_bytes,
uploaded_bytes,
progress_percent: progress_percent(downloaded_bytes, total_bytes)
progress_percent: if self.status == TorrentJobStatus::Complete {
100.0
} else {
progress_percent(downloaded_bytes, total_bytes)
.unwrap_or(self.progress_percent)
.clamp(0.0, 100.0),
.clamp(0.0, 100.0)
},
download_speed_mbps: live.map(|l| l.download_speed.mbps),
upload_speed_mbps: live.map(|l| l.upload_speed.mbps),
peers_live: peer_stats.map(|p| p.live),
@@ -687,6 +696,9 @@ impl TorrentService {
let id = id.to_string();
tokio::spawn(async move {
if let Err(err) = handle.wait_until_completed().await {
if service.is_paused(&id).await {
return;
}
service.stop_torrent(&handle).await;
service.fail_job(&pool, &id, err.to_string()).await;
return;
@@ -703,6 +715,34 @@ impl TorrentService {
Ok(dto)
}
pub async fn pause(
&self,
pool: &PgPool,
user_id: i64,
id: &str,
) -> anyhow::Result<TorrentJobDto> {
self.ensure_memory_job(pool, user_id, id).await?;
let (dto, handle) = {
let mut jobs = self.jobs.lock().await;
let job = jobs.get_mut(id).context("torrent job not found")?;
if job.user_id != user_id {
bail!("torrent job not found");
}
job.refresh_progress();
job.status = TorrentJobStatus::Paused;
job.updated_at = now_string();
let handle = job.handle.take();
(job.dto(), handle)
};
persist_progress(pool, &dto).await?;
if let Some(handle) = handle {
self.stop_torrent(&handle).await;
}
Ok(dto)
}
async fn memory_details(&self, user_id: i64, id: &str) -> Option<TorrentSessionDto> {
let jobs = self.jobs.lock().await;
let job = jobs.get(id)?;
@@ -733,6 +773,13 @@ impl TorrentService {
Ok(job.dto())
}
async fn is_paused(&self, id: &str) -> bool {
let jobs = self.jobs.lock().await;
jobs.get(id)
.map(|job| job.status == TorrentJobStatus::Paused)
.unwrap_or(false)
}
async fn fail_job(&self, pool: &PgPool, id: &str, error: String) {
let dto = {
let mut jobs = self.jobs.lock().await;
@@ -824,6 +871,8 @@ impl TorrentService {
let job = jobs.get_mut(id).context("torrent job not found")?;
job.refresh_progress();
job.status = TorrentJobStatus::Complete;
job.downloaded_bytes = job.selected_size();
job.progress_percent = 100.0;
job.completed_at = Some(now_string());
job.updated_at = now_string();
let dto = job.dto();
templates/player/modals.html
+50 -34
View File
@@ -4,7 +4,7 @@
<div class="modal-box info-modal">
<div class="info-modal-head">
<h3 x-text="$store.info.modal.title"></h3>
<button class="mobile-list-action" @click="$store.info.close()" title="Close">
<button class="mobile-list-action" @click="$store.info.close()" title="{{ t.player_close }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
@@ -20,13 +20,13 @@
<template x-if="$store.playlists.modal">
<div class="modal-overlay" @click.self="$store.playlists.modal = null">
<div class="modal-box">
<h3 x-text="$store.playlists.modal.mode === 'create' ? 'New Playlist' : 'Rename Playlist'"></h3>
<input type="text" x-model="$store.playlists.modal.title" placeholder="Playlist name"
<h3 x-text="$store.playlists.modal.mode === 'create' ? '{{ t.player_new_playlist }}' : '{{ t.player_rename_playlist }}'"></h3>
<input type="text" x-model="$store.playlists.modal.title" placeholder="{{ t.player_playlist_name }}"
@keydown.enter="$store.playlists.submitModal()" x-init="$nextTick(() => $el.focus())">
<div class="modal-footer">
<button class="modal-btn modal-btn-ghost" @click="$store.playlists.modal = null">Cancel</button>
<button class="modal-btn modal-btn-ghost" @click="$store.playlists.modal = null">{{ t.player_cancel }}</button>
<button class="modal-btn modal-btn-primary" @click="$store.playlists.submitModal()"
x-text="$store.playlists.modal.mode === 'create' ? 'Create' : 'Save'"></button>
x-text="$store.playlists.modal.mode === 'create' ? '{{ t.player_create }}' : '{{ t.player_save }}'"></button>
</div>
</div>
</div>
@@ -36,7 +36,7 @@
<template x-if="$store.playlists.picker">
<div class="modal-overlay" @click.self="$store.playlists.picker = null">
<div class="modal-box">
<h3>Add to Playlist</h3>
<h3>{{ t.player_add_to_playlist }}</h3>
<div class="modal-playlist-list">
<template x-for="pl in $store.playlists.list.filter(p => p.kind === 'user' && p.is_own)" :key="pl.id">
<div class="modal-playlist-item" @click="$store.playlists.addToPicked(pl.id)">
@@ -46,8 +46,8 @@
</template>
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-ghost" @click="$store.playlists.picker = null">Cancel</button>
<button class="modal-btn modal-btn-primary" @click="$store.playlists.picker = null; $store.playlists.showCreate()">New Playlist</button>
<button class="modal-btn modal-btn-ghost" @click="$store.playlists.picker = null">{{ t.player_cancel }}</button>
<button class="modal-btn modal-btn-primary" @click="$store.playlists.picker = null; $store.playlists.showCreate()">{{ t.player_new_playlist }}</button>
</div>
</div>
</div>
@@ -59,7 +59,7 @@
<div class="modal-box torrent-modal">
<div class="torrent-modal-head">
<div>
<h3>Torrent manager</h3>
<h3>{{ t.player_torrent_manager }}</h3>
<p class="torrent-message" style="margin:4px 0 0"
:class="{ error: $store.torrents.error }"
x-text="$store.torrents.message"></p>
@@ -68,6 +68,11 @@
<span class="torrent-status-pill"
:class="{ active: $store.torrents.activeCount() > 0 }"
x-text="$store.torrents.clientSummary()"></span>
<span class="torrent-status-pill torrent-agent-pill"
:class="{ active: $store.torrents.agentBusy() }">
<span class="torrent-agent-dot"></span>
<span x-text="$store.torrents.agentSummary()"></span>
</span>
<span class="torrent-status-pill"
x-text="$store.torrents.sessions.length + ' saved'"></span>
</div>
@@ -76,27 +81,36 @@
<div class="torrent-manager-layout">
<aside class="torrent-manager-sidebar">
<div class="torrent-manager-title">
<span>Saved torrents</span>
<span>{{ t.player_saved_torrents }}</span>
<button class="modal-btn modal-btn-ghost" style="padding:4px 8px"
@click="$store.torrents.loadSessions()"
:disabled="$store.torrents.loading">Refresh</button>
:disabled="$store.torrents.loading">{{ t.player_refresh }}</button>
</div>
<div class="torrent-session-list">
<template x-if="!$store.torrents.loadingSessions && $store.torrents.sessions.length === 0">
<div class="empty-state" style="padding:28px 12px">
<p>No saved torrents</p>
<p>{{ t.player_no_saved_torrents }}</p>
</div>
</template>
<template x-for="job in $store.torrents.sessions" :key="job.id">
<div class="torrent-session-row"
:class="{ active: $store.torrents.previewData && $store.torrents.previewData.id === job.id }"
@click="$store.torrents.openSession(job.id)">
<div style="min-width:0">
<div class="torrent-session-name" x-text="job.name"></div>
<div class="torrent-session-main">
<div class="torrent-session-topline">
<div class="torrent-session-name" x-text="job.name"></div>
<span class="torrent-status-badge"
:class="$store.torrents.statusBadgeClass(job)"
x-text="$store.torrents.statusLabel(job)"></span>
</div>
<div class="torrent-session-meta" x-text="$store.torrents.sessionMeta(job)"></div>
<div class="torrent-session-progress">
<div class="torrent-session-progress-bar"
:style="'width:' + $store.torrents.progressValue(job) + '%'"></div>
</div>
</div>
<button class="torrent-session-remove"
@click.stop="$store.torrents.removeSession(job.id)">Delete</button>
@click.stop="$store.torrents.removeSession(job.id)">{{ t.player_delete }}</button>
</div>
</template>
</div>
@@ -105,12 +119,12 @@
<section class="torrent-workspace">
<div class="torrent-modal-grid">
<div>
<label for="torrent-file-input">Torrent file</label>
<label for="torrent-file-input">{{ t.player_torrent_file }}</label>
<input id="torrent-file-input" type="file" accept=".torrent,application/x-bittorrent"
@change="$store.torrents.file = $event.target.files[0] || null">
</div>
<div>
<label for="torrent-magnet-input">Magnet link</label>
<label for="torrent-magnet-input">{{ t.player_magnet_link }}</label>
<input id="torrent-magnet-input" type="text"
x-model="$store.torrents.magnet"
placeholder="magnet:?xt=urn:btih:...">
@@ -118,20 +132,20 @@
</div>
<div class="torrent-actions">
<button class="modal-btn modal-btn-primary" @click="$store.torrents.preview()" :disabled="$store.torrents.loading">
Preview content
{{ t.player_preview_content }}
</button>
<button class="modal-btn modal-btn-ghost" @click="$store.torrents.clearSelection()" :disabled="!$store.torrents.previewData">Clear</button>
<button class="modal-btn modal-btn-ghost" @click="$store.torrents.clearSelection()" :disabled="!$store.torrents.previewData">{{ t.player_clear }}</button>
</div>
<template x-if="$store.torrents.currentJob">
<div class="torrent-progress-card">
<div class="torrent-progress-head">
<span x-text="$store.torrents.statusText($store.torrents.currentJob)"></span>
<span x-text="$store.torrents.currentJob.progress_percent.toFixed(1) + '%'"></span>
<span x-text="$store.torrents.progressValue($store.torrents.currentJob).toFixed(1) + '%'"></span>
</div>
<div class="torrent-progress-track">
<div class="torrent-progress-bar"
:style="'width:' + Math.max(0, Math.min(100, $store.torrents.currentJob.progress_percent || 0)) + '%'"></div>
:style="'width:' + $store.torrents.progressValue($store.torrents.currentJob) + '%'"></div>
</div>
<div class="torrent-progress-details">
<span x-text="$store.torrents.bytes($store.torrents.currentJob.downloaded_bytes) + ' / ' + $store.torrents.bytes($store.torrents.currentJob.selected_size || $store.torrents.currentJob.total_size)"></span>
@@ -146,18 +160,21 @@
<div style="min-width:0">
<div class="torrent-preview-title" x-text="$store.torrents.previewData.name"></div>
<div class="torrent-preview-meta"
x-text="$store.torrents.previewData.files.length + ' files - ' + $store.torrents.bytes($store.torrents.previewData.total_size)"></div>
x-text="$store.torrents.previewData.files.length + ' {{ t.player_files_count }} - ' + $store.torrents.bytes($store.torrents.previewData.total_size)"></div>
</div>
<button class="modal-btn modal-btn-primary" @click="$store.torrents.start()" :disabled="$store.torrents.loading">
Download selected
<button class="modal-btn"
:class="$store.torrents.isCurrentDownloading() ? 'modal-btn-pause' : 'modal-btn-primary'"
@click="$store.torrents.isCurrentDownloading() ? $store.torrents.pause() : $store.torrents.start()"
:disabled="$store.torrents.loading">
<span x-text="$store.torrents.isCurrentDownloading() ? '{{ t.player_pause_download }}' : '{{ t.player_download_selected }}'"></span>
</button>
</div>
<div class="torrent-tree-toolbar">
<div class="torrent-selected-summary"
x-text="$store.torrents.selected.size + ' selected - ' + $store.torrents.bytes($store.torrents.selectedBytes())"></div>
x-text="$store.torrents.selected.size + ' {{ t.player_selected }} - ' + $store.torrents.bytes($store.torrents.selectedBytes())"></div>
<div class="torrent-actions" style="margin-top:0">
<button class="modal-btn modal-btn-ghost" @click="$store.torrents.expandAll(true)">Expand all</button>
<button class="modal-btn modal-btn-ghost" @click="$store.torrents.expandAll(false)">Collapse</button>
<button class="modal-btn modal-btn-ghost" @click="$store.torrents.expandAll(true)">{{ t.player_expand_all }}</button>
<button class="modal-btn modal-btn-ghost" @click="$store.torrents.expandAll(false)">{{ t.player_collapse }}</button>
</div>
</div>
<div class="torrent-file-tree">
@@ -215,20 +232,20 @@
<template x-if="$store.history.modal">
<div class="modal-overlay" @click.self="$store.history.close()">
<div class="modal-box history-modal">
<h3>Play history</h3>
<h3>{{ t.player_play_history }}</h3>
<p class="torrent-message" :class="{ error: $store.history.error }"
x-text="$store.history.message"></p>
<div class="history-list">
<template x-if="!$store.history.loading && $store.history.items.length === 0">
<div class="empty-state" style="padding:32px 16px">
<p>No plays yet</p>
<p>{{ t.player_no_plays_yet }}</p>
</div>
</template>
<template x-for="item in $store.history.items" :key="item.id">
<div class="history-row">
<div style="min-width:0">
<div class="history-title" x-text="item.track_title"></div>
<div class="history-release" x-text="item.release_title || 'Unknown release'"></div>
<div class="history-release" x-text="item.release_title || '{{ t.player_unknown_release }}'"></div>
</div>
<div>
<div class="history-date" x-text="$store.history.date(item.played_at)"></div>
@@ -241,18 +258,17 @@
<button class="modal-btn modal-btn-ghost"
@click="$store.history.load($store.history.page - 1)"
:disabled="$store.history.loading || $store.history.page <= 1">
Previous
{{ t.player_previous }}
</button>
<span class="history-release"
x-text="'Page ' + $store.history.page + ' of ' + $store.history.totalPages()"></span>
x-text="'{{ t.player_page }} ' + $store.history.page + ' {{ t.player_of }} ' + $store.history.totalPages()"></span>
<button class="modal-btn modal-btn-primary"
@click="$store.history.load($store.history.page + 1)"
:disabled="$store.history.loading || $store.history.page >= $store.history.totalPages()">
Next
{{ t.player_next }}
</button>
</div>
</div>
</div>
</template>
</div>
templates/player/scripts.html
+245 -53
View File
@@ -1,5 +1,80 @@
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
<script>
const T = {
info: "{{ t.player_info }}",
noDetails: "{{ t.player_no_details }}",
loadingHistory: "{{ t.player_loading_history }}",
failedLoadHistory: "{{ t.player_failed_load_history }}",
totalPlays: "{{ t.player_total_plays }}",
unknown: "{{ t.player_unknown }}",
unknownSize: "{{ t.player_unknown_size }}",
unknownRelease: "{{ t.player_unknown_release }}",
unknownTrack: "{{ t.player_unknown_track }}",
unknownAudio: "{{ t.player_unknown_audio }}",
type: "{{ t.player_type }}",
year: "{{ t.player_year }}",
tracks: "{{ t.player_tracks }}",
uploaders: "{{ t.player_uploaders }}",
artists: "{{ t.player_artists }}",
releaseYear: "{{ t.player_release_year }}",
duration: "{{ t.player_duration }}",
audio: "{{ t.player_audio }}",
size: "{{ t.player_size }}",
uploader: "{{ t.player_uploader }}",
trackWord: "{{ t.player_tracks_count }}",
clientIdle: "{{ t.player_client_idle }}",
active: "{{ t.player_active }}",
aiIdle: "{{ t.player_ai_idle }}",
aiPrefix: "{{ t.player_ai_prefix }}",
processing: "{{ t.player_processing }}",
queued: "{{ t.player_queued }}",
saved: "{{ t.player_saved }}",
preview: "{{ t.player_preview }}",
downloading: "{{ t.player_downloading }}",
moving: "{{ t.player_moving }}",
completed: "{{ t.player_completed }}",
failed: "{{ t.player_failed }}",
paused: "{{ t.player_paused }}",
noTorrentSelected: "{{ t.player_no_torrent_selected }}",
down: "{{ t.player_down }}",
up: "{{ t.player_up }}",
peers: "{{ t.player_peers }}",
live: "{{ t.player_live }}",
seen: "{{ t.player_seen }}",
eta: "{{ t.player_eta }}",
selected: "{{ t.player_selected }}",
chooseTorrent: "{{ t.player_choose_torrent }}",
readingTorrent: "{{ t.player_reading_torrent }}",
resolvingMagnet: "{{ t.player_resolving_magnet }}",
previewFailed: "{{ t.player_preview_failed }}",
allFilesSelected: "{{ t.player_all_files_selected }}",
openingSavedTorrent: "{{ t.player_opening_saved_torrent }}",
savedTorrentOpened: "{{ t.player_saved_torrent_opened }}",
removeTorrentConfirm: "{{ t.player_remove_torrent_confirm }}",
torrentRemoved: "{{ t.player_torrent_removed }}",
selectOneFile: "{{ t.player_select_one_file }}",
startingDownload: "{{ t.player_starting_download }}",
downloadStarted: "{{ t.player_download_started }}",
pausingDownload: "{{ t.player_pausing_download }}",
downloadPaused: "{{ t.player_download_paused }}",
statusFailed: "{{ t.player_status_failed }}",
startFailed: "{{ t.player_start_failed }}",
pauseFailed: "{{ t.player_pause_failed }}",
loadTorrentsFailed: "{{ t.player_load_torrents_failed }}",
openTorrentFailed: "{{ t.player_open_torrent_failed }}",
deleteTorrentFailed: "{{ t.player_delete_torrent_failed }}",
loadAiQueueFailed: "{{ t.player_load_ai_queue_failed }}",
deletePlaylistConfirm: "{{ t.player_delete_playlist_confirm }}",
albums: "{{ t.player_albums }}",
eps: "{{ t.player_eps }}",
singles: "{{ t.player_singles }}",
compilations: "{{ t.player_compilations }}",
mixtapes: "{{ t.player_mixtapes }}",
liveReleases: "{{ t.player_live_releases }}",
soundtracks: "{{ t.player_soundtracks }}",
likesPlaylist: "{{ t.player_likes_playlist }}",
};
function formatTime(seconds) {
if (!seconds || isNaN(seconds)) return '0:00';
const s = Math.floor(seconds);
@@ -30,8 +105,8 @@ document.addEventListener('alpine:init', () => {
modal: null,
open(title, body) {
this.modal = {
title: title || 'Info',
body: body || 'No details available.',
title: title || T.info,
body: body || T.noDetails,
};
},
close() {
@@ -125,16 +200,16 @@ document.addEventListener('alpine:init', () => {
page = Math.max(1, page || 1);
this.loading = true;
this.error = false;
this.message = 'Loading history...';
this.message = T.loadingHistory;
try {
const res = await fetch(`/api/player/history?page=${page}&limit=${this.perPage}`);
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to load history');
if (!res.ok) throw new Error(data.error || T.failedLoadHistory);
this.items = data.items || [];
this.page = data.page || page;
this.perPage = data.per_page || this.perPage;
this.total = data.total || 0;
this.message = this.total ? (this.total + ' total plays') : '';
this.message = this.total ? (this.total + ' ' + T.totalPlays) : '';
} catch (err) {
this.error = true;
this.message = err.message || String(err);
@@ -650,13 +725,13 @@ document.addEventListener('alpine:init', () => {
const releases = this.currentArtist?.releases || [];
const order = ['album', 'ep', 'single', 'compilation', 'mixtape', 'live', 'soundtrack'];
const labels = {
album: 'Albums',
ep: 'EPs',
single: 'Singles',
compilation: 'Compilations',
mixtape: 'Mixtapes',
live: 'Live releases',
soundtrack: 'Soundtracks',
album: T.albums,
ep: T.eps,
single: T.singles,
compilation: T.compilations,
mixtape: T.mixtapes,
live: T.liveReleases,
soundtrack: T.soundtracks,
};
const groups = new Map();
for (const release of releases) {
@@ -692,7 +767,7 @@ document.addEventListener('alpine:init', () => {
},
bytes(value) {
if (!value) return 'unknown size';
if (!value) return T.unknownSize;
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let size = Number(value);
let idx = 0;
@@ -707,39 +782,39 @@ document.addEventListener('alpine:init', () => {
const rows = uploaders || [];
if (!rows.length) return 'UFO';
return rows
.map(row => `${row.name || 'UFO'} (${row.track_count} track${row.track_count === 1 ? '' : 's'})`)
.map(row => `${row.name || 'UFO'} (${row.track_count} ${T.trackWord})`)
.join(', ');
},
releaseInfo(release) {
if (!release) return '';
const lines = [
release.title || 'Unknown release',
`Type: ${release.release_type || 'unknown'}`,
`Year: ${release.year || 'unknown'}`,
`Tracks: ${release.track_count || release.tracks?.length || 0}`,
`Uploaders: ${this.uploadersInfo(release.uploaders || [])}`,
release.title || T.unknownRelease,
`${T.type}: ${release.release_type || T.unknown}`,
`${T.year}: ${release.year || T.unknown}`,
`${T.tracks}: ${release.track_count || release.tracks?.length || 0}`,
`${T.uploaders}: ${this.uploadersInfo(release.uploaders || [])}`,
];
return lines.join('\n');
},
trackInfo(track) {
if (!track) return '';
const artists = this.trackArtistLinks(track).map(artist => artist.label).join(', ') || 'unknown';
const artists = this.trackArtistLinks(track).map(artist => artist.label).join(', ') || T.unknown;
const audio = [
track.audio_format || null,
track.audio_bitrate ? `${track.audio_bitrate} kbps` : null,
track.audio_sample_rate ? `${track.audio_sample_rate} Hz` : null,
track.audio_bit_depth ? `${track.audio_bit_depth}-bit` : null,
].filter(Boolean).join(' · ') || 'unknown audio details';
].filter(Boolean).join(' · ') || T.unknownAudio;
const lines = [
track.title || 'Unknown track',
`Artists: ${artists}`,
`Release year: ${track.release_year || 'unknown'}`,
`Duration: ${formatTime(track.duration_seconds)}`,
`Audio: ${audio}`,
`Size: ${this.bytes(track.file_size_bytes)}`,
`Uploader: ${track.uploader_name || 'UFO'}`,
track.title || T.unknownTrack,
`${T.artists}: ${artists}`,
`${T.releaseYear}: ${track.release_year || T.unknown}`,
`${T.duration}: ${formatTime(track.duration_seconds)}`,
`${T.audio}: ${audio}`,
`${T.size}: ${this.bytes(track.file_size_bytes)}`,
`${T.uploader}: ${track.uploader_name || 'UFO'}`,
];
return lines.join('\n');
},
@@ -1015,16 +1090,23 @@ document.addEventListener('alpine:init', () => {
message: '',
error: false,
_pollTimer: null,
_refreshTimer: null,
queuedTasks: 0,
processingTasks: 0,
loadingAgentStatus: false,
open() {
this.modal = true;
this.message = '';
this.error = false;
this.loadSessions();
this.loadAgentStatus();
this._startRefresh();
},
close() {
this.modal = false;
this._stopRefresh();
},
_setMessage(message, error = false) {
@@ -1048,35 +1130,116 @@ document.addEventListener('alpine:init', () => {
return this.sessions.filter(job => job.active || job.status === 'downloading' || job.status === 'moving').length;
},
isDownloading(job) {
return !!job && (job.active || job.status === 'downloading' || job.status === 'moving');
},
isCurrentDownloading() {
return this.isDownloading(this.currentJob);
},
normalizedStatus(job) {
const status = String(job?.status || 'preview').toLowerCase();
if (status === 'complete') return 'completed';
return status;
},
statusLabel(job) {
const labels = {
preview: T.preview,
downloading: T.downloading,
moving: T.moving,
completed: T.completed,
failed: T.failed,
paused: T.paused,
};
const status = this.normalizedStatus(job);
return labels[status] || status;
},
statusBadgeClass(job) {
return 'status-' + this.normalizedStatus(job);
},
progressValue(job) {
if (!job) return 0;
if (this.normalizedStatus(job) === 'completed') return 100;
return Math.max(0, Math.min(100, Number(job.progress_percent || 0)));
},
clientSummary() {
const active = this.activeCount();
return active > 0 ? active + ' active' : 'Client idle';
return active > 0 ? active + ' ' + T.active : T.clientIdle;
},
agentSummary() {
const queued = Number(this.queuedTasks || 0);
const processing = Number(this.processingTasks || 0);
if (queued === 0 && processing === 0) return T.aiIdle;
const parts = [];
if (processing > 0) parts.push(processing + ' ' + T.processing);
parts.push(queued + ' ' + T.queued);
return T.aiPrefix + ' ' + parts.join(' / ');
},
agentBusy() {
return Number(this.queuedTasks || 0) > 0 || Number(this.processingTasks || 0) > 0;
},
statusText(job) {
if (!job) return 'No torrent selected';
if (!job) return T.noTorrentSelected;
const state = job.client_state ? ' / ' + job.client_state : '';
return job.status + state;
return this.statusLabel(job) + state;
},
speedText(job) {
if (!job) return '0 B/s';
const down = Number(job.download_speed_mbps || 0);
const up = Number(job.upload_speed_mbps || 0);
return 'down ' + down.toFixed(2) + ' MiB/s - up ' + up.toFixed(2) + ' MiB/s';
return T.down + ' ' + down.toFixed(2) + ' MiB/s - ' + T.up + ' ' + up.toFixed(2) + ' MiB/s';
},
peerText(job) {
if (!job) return 'peers n/a';
if (!job) return T.peers + ' n/a';
const live = job.peers_live == null ? '?' : job.peers_live;
const seen = job.peers_seen == null ? '?' : job.peers_seen;
return 'peers ' + live + ' live / ' + seen + ' seen' + (job.eta ? ' - eta ' + job.eta : '');
return T.peers + ' ' + live + ' ' + T.live + ' / ' + seen + ' ' + T.seen + (job.eta ? ' - ' + T.eta + ' ' + job.eta : '');
},
sessionMeta(job) {
if (!job) return '';
const size = this.bytes(job.selected_size || job.total_size);
return job.status + ' - ' + (job.progress_percent || 0).toFixed(1) + '% - ' + size;
return this.progressValue(job).toFixed(1) + '% - ' + size;
},
async loadAgentStatus() {
this.loadingAgentStatus = true;
try {
const res = await fetch('/api/player/agent-queue');
const data = await res.json();
if (!res.ok) throw new Error(data.error || T.loadAiQueueFailed);
this.queuedTasks = Number(data.queued_count || 0);
this.processingTasks = Number(data.processing_count || 0);
} catch {
this.queuedTasks = 0;
this.processingTasks = 0;
} finally {
this.loadingAgentStatus = false;
}
},
_startRefresh() {
this._stopRefresh();
this._refreshTimer = setInterval(() => {
if (!this.modal) return;
this.loadSessions();
this.loadAgentStatus();
}, 5000);
},
_stopRefresh() {
if (this._refreshTimer) clearInterval(this._refreshTimer);
this._refreshTimer = null;
},
_rememberJob(job) {
@@ -1104,7 +1267,7 @@ document.addEventListener('alpine:init', () => {
try {
const res = await fetch('/api/player/torrents');
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Could not load torrents');
if (!res.ok) throw new Error(data.error || T.loadTorrentsFailed);
this.sessions = Array.isArray(data) ? data : [];
} catch (err) {
this._setMessage(err.message || String(err), true);
@@ -1116,13 +1279,13 @@ document.addEventListener('alpine:init', () => {
async openSession(id) {
if (!id || this.loading) return;
this.loading = true;
this._setMessage('Opening saved torrent...');
this._setMessage(T.openingSavedTorrent);
try {
const res = await fetch(`/api/player/torrents/session/${id}`);
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Could not open torrent');
if (!res.ok) throw new Error(data.error || T.openTorrentFailed);
this._applySession(data);
this._setMessage('Saved torrent opened. Adjust files or resume download.');
this._setMessage(T.savedTorrentOpened);
if (data.job && (data.job.active || data.job.status === 'downloading' || data.job.status === 'moving')) {
this._poll(data.job.id);
}
@@ -1135,12 +1298,12 @@ document.addEventListener('alpine:init', () => {
async removeSession(id) {
if (!id || this.loading) return;
if (!confirm('Remove this torrent from the client list? Downloaded files will stay on disk.')) return;
if (!confirm(T.removeTorrentConfirm)) return;
this.loading = true;
try {
const res = await fetch(`/api/player/torrents/session/${id}`, { method: 'DELETE' });
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Could not delete torrent');
if (!res.ok) throw new Error(data.error || T.deleteTorrentFailed);
this.sessions = this.sessions.filter(job => job.id !== id);
if (this.previewData && this.previewData.id === id) {
this.previewData = null;
@@ -1148,7 +1311,7 @@ document.addEventListener('alpine:init', () => {
this.treeRoot = null;
this.selected = new Set();
}
this._setMessage('Torrent removed from the client list.');
this._setMessage(T.torrentRemoved);
} catch (err) {
this._setMessage(err.message || String(err), true);
} finally {
@@ -1172,7 +1335,7 @@ document.addEventListener('alpine:init', () => {
if (this.loading) return;
const magnet = this.magnet.trim();
if (!this.file && !magnet) {
this._setMessage('Choose a .torrent file or paste a magnet link.', true);
this._setMessage(T.chooseTorrent, true);
return;
}
@@ -1182,7 +1345,7 @@ document.addEventListener('alpine:init', () => {
this.currentJob = null;
this.selected = new Set();
this.expanded = new Set();
this._setMessage(this.file ? 'Reading torrent file...' : 'Resolving magnet metadata. This can take a while...');
this._setMessage(this.file ? T.readingTorrent : T.resolvingMagnet);
try {
const payload = this.file
@@ -1194,10 +1357,10 @@ document.addEventListener('alpine:init', () => {
body: JSON.stringify(payload),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Preview failed');
if (!res.ok) throw new Error(data.error || T.previewFailed);
this._applySession(data);
this._setMessage('All files are selected by default. Clear or adjust the tree before download.');
this._setMessage(T.allFilesSelected);
await this.loadSessions();
} catch (err) {
this._setMessage(err.message || String(err), true);
@@ -1393,12 +1556,12 @@ document.addEventListener('alpine:init', () => {
if (!this.previewData || this.loading) return;
const selected = [...this.selected];
if (selected.length === 0) {
this._setMessage('Select at least one file.', true);
this._setMessage(T.selectOneFile, true);
return;
}
this.loading = true;
this._setMessage('Starting download...');
this._setMessage(T.startingDownload);
try {
const res = await fetch(`/api/player/torrents/${this.previewData.id}/start`, {
method: 'POST',
@@ -1406,10 +1569,10 @@ document.addEventListener('alpine:init', () => {
body: JSON.stringify({ selected_files: selected }),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Start failed');
if (!res.ok) throw new Error(data.error || T.startFailed);
this.currentJob = data;
this._rememberJob(data);
this._setMessage('Download started. Files will move to inbox when complete.');
this._setMessage(T.downloadStarted);
this._poll(data.id);
await this.loadSessions();
} catch (err) {
@@ -1419,23 +1582,48 @@ document.addEventListener('alpine:init', () => {
}
},
async pause() {
if (!this.currentJob || this.loading || !this.isCurrentDownloading()) return;
this.loading = true;
this._setMessage(T.pausingDownload);
try {
const res = await fetch(`/api/player/torrents/${this.currentJob.id}/pause`, {
method: 'POST',
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || T.pauseFailed);
this.currentJob = data;
this._rememberJob(data);
this._setMessage(T.downloadPaused);
if (this._pollTimer) clearInterval(this._pollTimer);
this._pollTimer = null;
await this.loadSessions();
} catch (err) {
this._setMessage(err.message || String(err), true);
} finally {
this.loading = false;
}
},
_poll(id) {
if (this._pollTimer) clearInterval(this._pollTimer);
this._pollTimer = setInterval(async () => {
try {
const res = await fetch(`/api/player/torrents/${id}/status`);
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Status failed');
if (!res.ok) throw new Error(data.error || T.statusFailed);
this.currentJob = data;
this._rememberJob(data);
this._setMessage(
data.status + ' - ' + data.progress_percent.toFixed(1) + '% - ' + this.bytes(data.downloaded_bytes),
this.statusLabel(data) + ' - ' + this.progressValue(data).toFixed(1) + '% - ' + this.bytes(data.downloaded_bytes),
data.status === 'failed'
);
if (data.status === 'complete' || data.status === 'failed') {
clearInterval(this._pollTimer);
this._pollTimer = null;
this.loadSessions();
this.loadAgentStatus();
}
} catch (err) {
this._setMessage(err.message || String(err), true);
@@ -1481,6 +1669,10 @@ document.addEventListener('alpine:init', () => {
));
},
displayTitle(pl) {
return pl?.kind === 'likes' ? T.likesPlaylist : (pl?.title || '');
},
showCreate() {
this.modal = { mode: 'create', title: '' };
},
@@ -1517,7 +1709,7 @@ document.addEventListener('alpine:init', () => {
},
async deletePlaylist(id) {
if (!confirm('Delete this playlist?')) return;
if (!confirm(T.deletePlaylistConfirm)) return;
try {
await fetch(`/api/player/playlists/${id}`, { method: 'DELETE' });
await this.reload();
templates/player/shell.html
+124 -124
View File
@@ -16,7 +16,7 @@
<div class="user-name" x-text="$store.user.profile?.name || ''"></div>
<div class="user-role" x-text="$store.user.profile?.role || ''"></div>
</div>
<button class="user-logout-btn" @click="$store.user.logout()" title="Log out">
<button class="user-logout-btn" @click="$store.user.logout()" title="{{ t.player_log_out }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
<polyline points="16 17 21 12 16 7"/>
@@ -27,37 +27,37 @@
<div class="user-stats">
<button class="user-stat" @click="$store.history.open()">
<span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.plays)"></span>
<span class="user-stat-label">plays</span>
<span class="user-stat-label">{{ t.player_plays_count }}</span>
</button>
<div class="user-stat">
<span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.liked_tracks)"></span>
<span class="user-stat-label">likes</span>
<span class="user-stat-label">{{ t.player_likes_count }}</span>
</div>
<div class="user-stat">
<span class="user-stat-value" x-text="$store.user.duration($store.user.profile?.stats?.listened_minutes)"></span>
<span class="user-stat-label">listened</span>
<span class="user-stat-label">{{ t.player_listened }}</span>
</div>
</div>
</div>
<div class="sidebar-header">
<h2>Library</h2>
<h2>{{ t.player_library }}</h2>
</div>
<div class="sidebar-nav">
<div class="sidebar-nav-item"
:class="{ active: $store.library.view === 'artists' }"
@click="$store.library.goArtists()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
Artists
{{ t.player_artists }}
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">
Following
{{ t.player_following }}
<span x-show="$store.follows.artists.length > 0"
x-text="'(' + $store.follows.artists.length + ')'"></span>
</div>
<template x-if="$store.follows.artists.length === 0">
<div class="following-empty">No followed artists</div>
<div class="following-empty">{{ t.player_no_followed_artists }}</div>
</template>
<div class="following-list" x-show="$store.follows.artists.length > 0" x-cloak>
<template x-for="artist in $store.follows.artists" :key="artist.id">
@@ -84,20 +84,20 @@
<template x-if="pl.kind === 'likes'">
<span style="display:flex;align-items:center;gap:6px">
<svg viewBox="0 0 24 24" fill="var(--accent)" stroke="none" width="14" height="14"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
<span x-text="pl.title"></span>
<span x-text="$store.playlists.displayTitle(pl)"></span>
</span>
</template>
<template x-if="pl.kind !== 'likes'">
<span x-text="pl.title"></span>
<span x-text="$store.playlists.displayTitle(pl)"></span>
</template>
<span class="playlist-count" x-text="pl.track_count + ' tracks'"></span>
<span class="playlist-count" x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
</div>
<template x-if="pl.is_own && pl.kind === 'user'">
<div class="playlist-item-actions">
<button class="playlist-action-btn" @click.stop="$store.playlists.startRename(pl)" title="Rename">
<button class="playlist-action-btn" @click.stop="$store.playlists.startRename(pl)" title="{{ t.player_rename }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</button>
<button class="playlist-action-btn" @click.stop="$store.playlists.deletePlaylist(pl.id)" title="Delete">
<button class="playlist-action-btn" @click.stop="$store.playlists.deletePlaylist(pl.id)" title="{{ t.player_delete }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
</button>
</div>
@@ -106,22 +106,22 @@
</template>
<button class="sidebar-create-btn" @click="$store.playlists.showCreate()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Playlist
{{ t.player_new_playlist }}
</button>
<template x-if="$store.playlists.publishedList().length > 0">
<div class="playlist-public-section">
<div class="sidebar-section-title playlist-subtitle">Published Playlists</div>
<div class="sidebar-section-title playlist-subtitle">{{ t.player_published_playlists }}</div>
<template x-for="pl in $store.playlists.publishedList()" :key="'published-' + pl.id">
<div class="playlist-item-row">
<div class="playlist-item playlist-item-public" @click="$store.library.openPlaylist(pl.id)">
<div class="playlist-title-line">
<span class="playlist-title-text" x-text="pl.title"></span>
<span class="playlist-public-badge">Public</span>
<span class="playlist-title-text" x-text="$store.playlists.displayTitle(pl)"></span>
<span class="playlist-public-badge">{{ t.player_public }}</span>
</div>
<div class="playlist-meta-line">
<span class="playlist-owner" x-show="pl.owner_name" x-text="'by ' + pl.owner_name"></span>
<span class="playlist-owner" x-show="pl.owner_name" x-text="'{{ t.player_by }} ' + pl.owner_name"></span>
<span x-show="pl.owner_name">&middot;</span>
<span x-text="pl.track_count + ' tracks'"></span>
<span x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
</div>
</div>
</div>
@@ -130,7 +130,7 @@
</template>
</div>
<div class="sidebar-bottom">
<a href="/admin/">Admin Panel</a>
<a href="/admin/">{{ t.player_admin_panel }}</a>
</div>
</div>
@@ -139,10 +139,10 @@
<aside class="mobile-library-drawer">
<div class="mobile-drawer-head">
<div>
<div class="mobile-drawer-title">Library</div>
<div class="playlist-count">Playlists and followed artists</div>
<div class="mobile-drawer-title">{{ t.player_library }}</div>
<div class="playlist-count">{{ t.player_playlists }} / {{ t.player_following }}</div>
</div>
<button class="mobile-list-action" @click="$store.mobile.closeLibrary()" title="Close">
<button class="mobile-list-action" @click="$store.mobile.closeLibrary()" title="{{ t.player_close }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
@@ -155,18 +155,18 @@
:class="{ active: $store.library.view === 'artists' }"
@click="$store.library.goArtists(); $store.mobile.closeLibrary()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
Artists
{{ t.player_artists }}
</div>
</div>
<div class="mobile-drawer-section">
<div class="sidebar-section-title">
Following
{{ t.player_following }}
<span x-show="$store.follows.artists.length > 0"
x-text="'(' + $store.follows.artists.length + ')'"></span>
</div>
<template x-if="$store.follows.artists.length === 0">
<div class="following-empty">No followed artists</div>
<div class="following-empty">{{ t.player_no_followed_artists }}</div>
</template>
<div class="following-list" x-show="$store.follows.artists.length > 0" x-cloak>
<template x-for="artist in $store.follows.artists" :key="'mobile-follow-' + artist.id">
@@ -186,7 +186,7 @@
</div>
<button class="mobile-list-action"
@click.stop="$store.follows.toggle(artist.id)"
title="Unfollow artist">
title="{{ t.player_unfollow_artist }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
@@ -199,27 +199,27 @@
</div>
<div class="mobile-drawer-section">
<div class="sidebar-section-title">Playlists</div>
<div class="sidebar-section-title">{{ t.player_playlists }}</div>
<template x-for="pl in $store.playlists.regularList()" :key="'mobile-playlist-' + pl.id">
<div class="playlist-item-row">
<div class="playlist-item" @click="$store.library.openPlaylist(pl.id); $store.mobile.closeLibrary()">
<template x-if="pl.kind === 'likes'">
<span style="display:flex;align-items:center;gap:6px">
<svg viewBox="0 0 24 24" fill="var(--accent)" stroke="none" width="14" height="14"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
<span x-text="pl.title"></span>
<span x-text="$store.playlists.displayTitle(pl)"></span>
</span>
</template>
<template x-if="pl.kind !== 'likes'">
<span x-text="pl.title"></span>
<span x-text="$store.playlists.displayTitle(pl)"></span>
</template>
<span class="playlist-count" x-text="pl.track_count + ' tracks'"></span>
<span class="playlist-count" x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
</div>
<template x-if="pl.is_own && pl.kind === 'user'">
<div class="playlist-item-actions">
<button class="playlist-action-btn" @click.stop="$store.mobile.closeLibrary(); $store.playlists.startRename(pl)" title="Rename">
<button class="playlist-action-btn" @click.stop="$store.mobile.closeLibrary(); $store.playlists.startRename(pl)" title="{{ t.player_rename }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</button>
<button class="playlist-action-btn" @click.stop="$store.playlists.deletePlaylist(pl.id)" title="Delete">
<button class="playlist-action-btn" @click.stop="$store.playlists.deletePlaylist(pl.id)" title="{{ t.player_delete }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
</button>
</div>
@@ -228,22 +228,22 @@
</template>
<button class="sidebar-create-btn" @click="$store.mobile.closeLibrary(); $store.playlists.showCreate()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Playlist
{{ t.player_new_playlist }}
</button>
<template x-if="$store.playlists.publishedList().length > 0">
<div class="playlist-public-section">
<div class="sidebar-section-title playlist-subtitle">Published Playlists</div>
<div class="sidebar-section-title playlist-subtitle">{{ t.player_published_playlists }}</div>
<template x-for="pl in $store.playlists.publishedList()" :key="'mobile-published-' + pl.id">
<div class="playlist-item-row">
<div class="playlist-item playlist-item-public" @click="$store.library.openPlaylist(pl.id); $store.mobile.closeLibrary()">
<div class="playlist-title-line">
<span class="playlist-title-text" x-text="pl.title"></span>
<span class="playlist-public-badge">Public</span>
<span class="playlist-title-text" x-text="$store.playlists.displayTitle(pl)"></span>
<span class="playlist-public-badge">{{ t.player_public }}</span>
</div>
<div class="playlist-meta-line">
<span class="playlist-owner" x-show="pl.owner_name" x-text="'by ' + pl.owner_name"></span>
<span class="playlist-owner" x-show="pl.owner_name" x-text="'{{ t.player_by }} ' + pl.owner_name"></span>
<span x-show="pl.owner_name">&middot;</span>
<span x-text="pl.track_count + ' tracks'"></span>
<span x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
</div>
</div>
</div>
@@ -262,7 +262,7 @@
<div class="content-topbar" @click.outside="$store.user.menuOpen = false">
<button class="mobile-library-btn"
@click="$store.user.menuOpen = false; $store.mobile.toggleLibrary()"
title="Library">
title="{{ t.player_library }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 016.5 17H20"/>
<path d="M4 4.5A2.5 2.5 0 016.5 2H20v20H6.5A2.5 2.5 0 014 19.5z"/>
@@ -270,7 +270,7 @@
</button>
<div class="search-bar">
<span class="search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
<input id="search-input" type="text" placeholder="Search artists, releases, tracks..."
<input id="search-input" type="text" placeholder="{{ t.player_search_placeholder }}"
x-model="$store.library.searchQuery"
@input.debounce.300ms="$store.library.search($store.library.searchQuery)"
@keydown.escape="$store.library.clearSearch(); $el.blur()">
@@ -285,14 +285,13 @@
</div>
<button class="torrent-import-btn"
@click="$store.torrents.open()"
title="Import torrent">
title="{{ t.player_import_torrent }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
<span class="version-chip">v{{ t.app_version() }}</span>
<button class="mobile-account-chip"
x-show="$store.user.profile"
x-cloak
@@ -314,20 +313,20 @@
<div class="user-stats">
<button class="user-stat" @click="$store.history.open(); $store.user.menuOpen = false">
<span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.plays)"></span>
<span class="user-stat-label">plays</span>
<span class="user-stat-label">{{ t.player_plays_count }}</span>
</button>
<div class="user-stat">
<span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.liked_tracks)"></span>
<span class="user-stat-label">likes</span>
<span class="user-stat-label">{{ t.player_likes_count }}</span>
</div>
<div class="user-stat">
<span class="user-stat-value" x-text="$store.user.duration($store.user.profile?.stats?.listened_minutes)"></span>
<span class="user-stat-label">listened</span>
<span class="user-stat-label">{{ t.player_listened }}</span>
</div>
</div>
<button class="modal-btn modal-btn-primary mobile-account-logout"
@click="$store.user.logout()">
Log out
{{ t.player_log_out }}
</button>
</div>
</div>
@@ -343,13 +342,13 @@
<template x-if="$store.library.searchResults.artists.length === 0 && $store.library.searchResults.releases.length === 0 && $store.library.searchResults.tracks.length === 0">
<div class="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<p>No results found</p>
<p>{{ t.player_no_results }}</p>
</div>
</template>
<!-- Artists section -->
<template x-if="$store.library.searchResults.artists.length > 0">
<div class="search-section">
<h2 class="search-section-title">Artists</h2>
<h2 class="search-section-title">{{ t.player_artists }}</h2>
<div class="search-artists-row">
<template x-for="artist in $store.library.searchResults.artists" :key="artist.id">
<div class="search-artist-card" @click="$store.library.openArtist(artist.id)">
@@ -363,7 +362,7 @@
<button class="artist-follow-card-btn"
:class="{ followed: $store.follows.has(artist.id) }"
@click.stop="$store.follows.toggle(artist.id)"
:title="$store.follows.has(artist.id) ? 'Unfollow artist' : 'Follow artist'">
:title="$store.follows.has(artist.id) ? '{{ t.player_unfollow_artist }}' : '{{ t.player_follow_artist }}'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
@@ -381,7 +380,7 @@
<!-- Releases section -->
<template x-if="$store.library.searchResults.releases.length > 0">
<div class="search-section">
<h2 class="search-section-title">Releases</h2>
<h2 class="search-section-title">{{ t.player_releases }}</h2>
<div class="search-releases-row">
<template x-for="release in $store.library.searchResults.releases" :key="release.id">
<div class="search-release-card" @click="$store.library.openRelease(release.id)" style="position:relative">
@@ -392,7 +391,7 @@
<template x-if="!release.cover_url">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/></svg>
</template>
<button class="card-info-btn" @click.stop="$store.info.open('Release info', $store.library.releaseInfo(release))" :title="$store.library.releaseInfo(release)" aria-label="Release info">
<button class="card-info-btn" @click.stop="$store.info.open('{{ t.player_release_info }}', $store.library.releaseInfo(release))" :title="$store.library.releaseInfo(release)" aria-label="{{ t.player_release_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
</div>
@@ -409,13 +408,13 @@
<!-- Tracks section -->
<template x-if="$store.library.searchResults.tracks.length > 0">
<div class="search-section">
<h2 class="search-section-title">Tracks</h2>
<h2 class="search-section-title">{{ t.player_tracks }}</h2>
<div class="track-list-header">
<span>#</span>
<span>Title</span>
<span>{{ t.player_title }}</span>
<span></span>
<span></span>
<span style="text-align:right">Duration</span>
<span style="text-align:right">{{ t.player_duration }}</span>
</div>
<template x-for="(track, idx) in $store.library.searchResults.tracks" :key="track.id">
<div class="track-row"
@@ -435,22 +434,22 @@
</div>
<span></span>
<div class="track-actions">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('Track info', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="Track info">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
<button class="track-action-btn play-btn" @click.stop="$store.library.playSearchTrack(idx)" title="Play">
<button class="track-action-btn play-btn" @click.stop="$store.library.playSearchTrack(idx)" title="{{ t.player_play }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="Like">
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
<svg viewBox="0 0 24 24" :fill="$store.likes.has(track.id) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="Play next">
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="Add to queue">
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="Add to playlist">
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
</button>
</div>
@@ -467,7 +466,7 @@
<!-- Artists Grid -->
<template x-if="$store.library.view === 'artists'">
<div>
<h1 class="section-title">Artists</h1>
<h1 class="section-title">{{ t.player_artists }}</h1>
<div class="card-grid">
<template x-for="artist in $store.library.artists" :key="artist.id">
<div class="card" @click="$store.library.openArtist(artist.id)">
@@ -481,7 +480,7 @@
<button class="artist-follow-card-btn"
:class="{ followed: $store.follows.has(artist.id) }"
@click.stop="$store.follows.toggle(artist.id)"
:title="$store.follows.has(artist.id) ? 'Unfollow artist' : 'Follow artist'">
:title="$store.follows.has(artist.id) ? '{{ t.player_unfollow_artist }}' : '{{ t.player_follow_artist }}'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
@@ -491,7 +490,7 @@
</button>
</div>
<div class="card-title" x-text="artist.name"></div>
<div class="card-subtitle" x-text="artist.release_count + ' releases · ' + artist.track_count + ' tracks'"></div>
<div class="card-subtitle" x-text="artist.release_count + ' {{ t.player_releases_count }} · ' + artist.track_count + ' {{ t.player_tracks_count }}'"></div>
</div>
</template>
</div>
@@ -506,7 +505,7 @@
<template x-if="$store.library.view === 'artist_detail' && $store.library.currentArtist">
<div>
<div class="breadcrumb">
<a @click="$store.library.goArtists()">Artists</a>
<a @click="$store.library.goArtists()">{{ t.player_artists }}</a>
<span>/</span>
<span x-text="$store.library.currentArtist.name"></span>
</div>
@@ -522,24 +521,24 @@
<div>
<div class="artist-name" x-text="$store.library.currentArtist.name"></div>
<div class="artist-stats">
<span x-text="$store.library.currentArtist.releases.length + ' releases'"></span>
<span x-text="$store.library.currentArtist.releases.length + ' {{ t.player_releases_count }}'"></span>
<span>•</span>
<span x-text="$store.library.currentArtist.total_track_count + ' tracks'"></span>
<span x-text="$store.library.currentArtist.total_track_count + ' {{ t.player_tracks_count }}'"></span>
<span>•</span>
<span x-text="$store.library.currentArtist.total_play_count + ' plays'"></span>
<span x-text="$store.library.currentArtist.total_play_count + ' {{ t.player_plays_count }}'"></span>
</div>
<div class="release-actions">
<button class="release-action-btn secondary"
:class="{ followed: $store.follows.has($store.library.currentArtist.id) }"
@click="$store.follows.toggle($store.library.currentArtist.id)"
:title="$store.follows.has($store.library.currentArtist.id) ? 'Unfollow artist' : 'Follow artist'">
:title="$store.follows.has($store.library.currentArtist.id) ? '{{ t.player_unfollow_artist }}' : '{{ t.player_follow_artist }}'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path x-show="!$store.follows.has($store.library.currentArtist.id)" d="M19 8v6M16 11h6"/>
<path x-show="$store.follows.has($store.library.currentArtist.id)" d="M16 11l2 2 4-5"/>
</svg>
<span x-text="$store.follows.has($store.library.currentArtist.id) ? 'Following' : 'Follow'"></span>
<span x-text="$store.follows.has($store.library.currentArtist.id) ? '{{ t.player_followed }}' : '{{ t.player_follow }}'"></span>
</button>
</div>
</div>
@@ -557,10 +556,10 @@
<template x-if="!release.cover_url">
<span class="placeholder-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/></svg></span>
</template>
<button class="card-info-btn" @click.stop="$store.info.open('Release info', $store.library.releaseInfo(release))" :title="$store.library.releaseInfo(release)" aria-label="Release info">
<button class="card-info-btn" @click.stop="$store.info.open('{{ t.player_release_info }}', $store.library.releaseInfo(release))" :title="$store.library.releaseInfo(release)" aria-label="{{ t.player_release_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
<button class="card-enqueue-btn" @click.stop="$store.library.enqueueRelease(release.id)" title="Add to queue">
<button class="card-enqueue-btn" @click.stop="$store.library.enqueueRelease(release.id)" title="{{ t.player_add_to_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
<button class="card-play-btn" @click.stop="$store.library.playRelease(release.id)">
@@ -570,7 +569,7 @@
<div class="card-title" x-text="release.title"></div>
<div class="card-subtitle">
<span x-text="release.year || ''"></span>
<span x-text="release.track_count + ' tracks'"></span>
<span x-text="release.track_count + ' {{ t.player_tracks_count }}'"></span>
</div>
</div>
</template>
@@ -579,13 +578,13 @@
</template>
<template x-if="$store.library.currentArtist.featured_tracks && $store.library.currentArtist.featured_tracks.length > 0">
<section class="artist-release-group">
<h2 class="artist-release-group-title">Appears on</h2>
<h2 class="artist-release-group-title">{{ t.player_appears_on }}</h2>
<div class="track-list-header">
<span>#</span>
<span>Title</span>
<span>{{ t.player_title }}</span>
<span></span>
<span></span>
<span style="text-align:right">Duration</span>
<span style="text-align:right">{{ t.player_duration }}</span>
</div>
<template x-for="(track, idx) in $store.library.currentArtist.featured_tracks" :key="track.id">
<div class="track-row"
@@ -609,22 +608,22 @@
</div>
<span></span>
<div class="track-actions">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('Track info', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="Track info">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
<button class="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentArtist.featured_tracks, idx)" title="Play">
<button class="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentArtist.featured_tracks, idx)" title="{{ t.player_play }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="Like">
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
<svg viewBox="0 0 24 24" :fill="$store.likes.has(track.id) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="Play next">
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="Add to queue">
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="Add to playlist">
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
</button>
</div>
@@ -640,7 +639,7 @@
<template x-if="$store.library.view === 'release_detail' && $store.library.currentRelease">
<div>
<div class="breadcrumb">
<a @click="$store.library.goArtists()">Artists</a>
<a @click="$store.library.goArtists()">{{ t.player_artists }}</a>
<span>/</span>
<template x-if="$store.library.currentRelease.artists.length > 0">
<a @click="$store.library.openArtist($store.library.currentRelease.artists[0].id)" x-text="$store.library.currentRelease.artists[0].name"></a>
@@ -671,29 +670,29 @@
<div class="release-year" x-text="$store.library.currentRelease.year || ''"></div>
<div class="release-actions">
<button class="release-action-btn secondary"
@click.stop="$store.info.open('Release info', $store.library.releaseInfo($store.library.currentRelease))"
@click.stop="$store.info.open('{{ t.player_release_info }}', $store.library.releaseInfo($store.library.currentRelease))"
:title="$store.library.releaseInfo($store.library.currentRelease)"
aria-label="Release info">
aria-label="{{ t.player_release_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
Info
{{ t.player_info }}
</button>
<button class="release-action-btn primary" @click="$store.queue.playRelease($store.library.currentRelease.tracks, 0)">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
Play
{{ t.player_play }}
</button>
<button class="like-btn like-btn-lg" style="margin-left:4px"
:class="{ liked: $store.likes.isReleaseLiked($store.library.currentRelease) }"
@click.stop="$store.likes.toggleRelease($store.library.currentRelease.id)"
title="Like">
title="{{ t.player_like }}">
<svg viewBox="0 0 24 24" :fill="$store.likes.isReleaseLiked($store.library.currentRelease) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
</button>
<button class="release-action-btn secondary" @click="$store.queue.addToEnd($store.library.currentRelease.tracks)" title="Add to end of queue">
<button class="release-action-btn secondary" @click="$store.queue.addToEnd($store.library.currentRelease.tracks)" title="{{ t.player_add_to_end_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Queue
{{ t.player_queue }}
</button>
<button class="release-action-btn secondary" @click="$store.queue.addNextInQueue($store.library.currentRelease.tracks)" title="Play next">
<button class="release-action-btn secondary" @click="$store.queue.addNextInQueue($store.library.currentRelease.tracks)" title="{{ t.player_play_next }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
Next
{{ t.player_next }}
</button>
</div>
</div>
@@ -701,10 +700,10 @@
<!-- Track list -->
<div class="track-list-header">
<span>#</span>
<span>Title</span>
<span>{{ t.player_title }}</span>
<span></span>
<span></span>
<span style="text-align:right">Duration</span>
<span style="text-align:right">{{ t.player_duration }}</span>
</div>
<template x-for="(track, idx) in $store.library.currentRelease.tracks" :key="track.id">
<div class="track-row"
@@ -724,22 +723,22 @@
</div>
<span></span>
<div class="track-actions">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('Track info', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="Track info">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
<button class="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentRelease.tracks, idx)" title="Play">
<button class="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentRelease.tracks, idx)" title="{{ t.player_play }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="Like">
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
<svg viewBox="0 0 24 24" :fill="$store.likes.has(track.id) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="Play next">
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="Add to queue">
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="Add to playlist">
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
</button>
</div>
@@ -753,28 +752,28 @@
<template x-if="$store.library.view === 'playlist_detail' && $store.library.currentPlaylist">
<div>
<div class="breadcrumb">
<a @click="$store.library.goArtists()">Library</a>
<a @click="$store.library.goArtists()">{{ t.player_library }}</a>
<span>/</span>
<span x-text="$store.library.currentPlaylist.title"></span>
<span x-text="$store.playlists.displayTitle($store.library.currentPlaylist)"></span>
</div>
<h1 class="section-title" x-text="$store.library.currentPlaylist.title"></h1>
<h1 class="section-title" x-text="$store.playlists.displayTitle($store.library.currentPlaylist)"></h1>
<div class="playlist-detail-meta"
x-show="$store.library.currentPlaylist.owner_name || $store.library.currentPlaylist.is_public">
<span x-show="$store.library.currentPlaylist.owner_name"
x-text="'by ' + $store.library.currentPlaylist.owner_name"></span>
x-text="'{{ t.player_by }} ' + $store.library.currentPlaylist.owner_name"></span>
<span x-show="$store.library.currentPlaylist.owner_name && $store.library.currentPlaylist.is_public">&middot;</span>
<span class="playlist-public-badge"
x-show="$store.library.currentPlaylist.is_public">Published</span>
x-show="$store.library.currentPlaylist.is_public">{{ t.player_published }}</span>
</div>
<template x-if="$store.library.currentPlaylist.description">
<p style="color:var(--text-subdued);margin-bottom:16px" x-text="$store.library.currentPlaylist.description"></p>
</template>
<div class="track-list-header">
<span>#</span>
<span>Title</span>
<span>{{ t.player_title }}</span>
<span></span>
<span></span>
<span style="text-align:right">Duration</span>
<span style="text-align:right">{{ t.player_duration }}</span>
</div>
<template x-for="(track, idx) in $store.library.currentPlaylist.tracks" :key="track.id">
<div class="track-row"
@@ -794,22 +793,22 @@
</div>
<span></span>
<div class="track-actions">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('Track info', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="Track info">
<button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
<button class="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentPlaylist.tracks, idx)" title="Play">
<button class="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentPlaylist.tracks, idx)" title="{{ t.player_play }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="Like">
<button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
<svg viewBox="0 0 24 24" :fill="$store.likes.has(track.id) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="Play next">
<button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="Add to queue">
<button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</button>
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="Add to playlist">
<button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
</button>
</div>
@@ -827,14 +826,14 @@
@click="$store.queue.visible = false"></div>
<div class="queue-panel" :class="{ hidden: !$store.queue.visible }">
<div class="queue-header">
<h3>Queue</h3>
<button class="queue-clear-btn" @click="$store.queue.clear()">Clear</button>
<h3>{{ t.player_queue }}</h3>
<button class="queue-clear-btn" @click="$store.queue.clear()">{{ t.player_clear }}</button>
</div>
<div class="queue-tracks">
<template x-if="$store.queue.tracks.length === 0">
<div class="empty-state">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
<p>Queue is empty</p>
<p>{{ t.player_queue_empty }}</p>
</div>
</template>
<template x-for="(track, idx) in $store.queue.tracks" :key="idx + '-' + track.id">
@@ -870,10 +869,10 @@
</div>
</div>
<div class="queue-track-actions">
<button class="queue-track-remove info-btn" @click.stop="$store.info.open('Track info', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="Track info">
<button class="queue-track-remove info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_info }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</button>
<button class="queue-track-remove" @click.stop="$store.queue.remove(idx)" title="Remove">
<button class="queue-track-remove" @click.stop="$store.queue.remove(idx)" title="{{ t.player_remove }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
@@ -916,10 +915,10 @@
<div class="player-controls">
<div class="player-buttons">
<button class="player-btn" :class="{ active: $store.player.shuffle }" @click="$store.player.toggleShuffle()" title="Shuffle">
<button class="player-btn" :class="{ active: $store.player.shuffle }" @click="$store.player.toggleShuffle()" title="{{ t.player_shuffle }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
</button>
<button class="player-btn" @click="$store.player.prev()" title="Previous">
<button class="player-btn" @click="$store.player.prev()" title="{{ t.player_previous }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>
<button class="player-btn player-btn-play" @click="$store.player.toggle()">
@@ -930,10 +929,10 @@
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>
</template>
</button>
<button class="player-btn" @click="$store.player.next()" title="Next">
<button class="player-btn" @click="$store.player.next()" title="{{ t.player_next }}">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
</button>
<button class="player-btn" :class="{ active: $store.player.repeatMode !== 'off' }" @click="$store.player.cycleRepeat()" title="Repeat">
<button class="player-btn" :class="{ active: $store.player.repeatMode !== 'off' }" @click="$store.player.cycleRepeat()" title="{{ t.player_repeat }}">
<template x-if="$store.player.repeatMode !== 'one'">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
</template>
@@ -951,6 +950,7 @@
</div>
<span class="player-time" x-text="formatTime($store.player.duration)"></span>
</div>
<div class="player-version-chip">v{{ t.app_version() }}</div>
</div>
<div class="player-right">
@@ -968,13 +968,13 @@
</button>
<div class="volume-slider"
@pointerdown.prevent="$store.player.startVolumeDrag($event)"
aria-label="Volume">
aria-label="{{ t.player_volume }}">
<div class="volume-slider-fill" :style="'width:' + ($store.player.volume * 100) + '%'">
<div class="volume-slider-thumb"></div>
</div>
</div>
</div>
<button class="queue-toggle-btn" :class="{ active: $store.queue.visible }" @click="$store.queue.visible = !$store.queue.visible" title="Queue">
<button class="queue-toggle-btn" :class="{ active: $store.queue.visible }" @click="$store.queue.visible = !$store.queue.visible" title="{{ t.player_queue }}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
</button>
</div>
templates/player/styles.html
+114 -4
View File
@@ -1232,6 +1232,20 @@ button.user-stat:hover {
white-space: nowrap;
}
.player-version-chip {
width: 100%;
max-width: 600px;
margin-top: -2px;
padding-left: 0;
color: var(--text-subdued);
opacity: 0.55;
font-size: 9px;
line-height: 1;
font-weight: 500;
text-align: center;
pointer-events: none;
}
.mobile-account-chip {
display: none;
align-items: center;
@@ -1707,6 +1721,10 @@ button.user-stat:hover {
.modal-btn:hover { filter: brightness(1.1); }
.modal-btn-primary { background: var(--accent); color: #000; }
.modal-btn-pause {
background: #f0b84d;
color: #111;
}
.modal-btn-ghost { background: transparent; color: var(--text-secondary); }
.modal-footer {
@@ -1764,6 +1782,23 @@ button.user-stat:hover {
color: #9ff0b9;
}
.torrent-agent-pill.active {
border-color: rgba(240,184,77,0.45);
color: #ffd78a;
}
.torrent-agent-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--text-subdued);
}
.torrent-agent-pill.active .torrent-agent-dot {
background: #f0b84d;
box-shadow: 0 0 0 3px rgba(240,184,77,0.14);
}
.torrent-manager-layout {
display: grid;
grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
@@ -1818,6 +1853,17 @@ button.user-stat:hover {
.torrent-session-row:hover,
.torrent-session-row.active { background: var(--bg-hover); }
.torrent-session-main {
min-width: 0;
}
.torrent-session-topline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.torrent-session-name {
min-width: 0;
color: var(--text-primary);
@@ -1828,6 +1874,45 @@ button.user-stat:hover {
white-space: nowrap;
}
.torrent-status-badge {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
.torrent-status-badge.status-preview {
background: rgba(122,162,255,0.14);
color: #a8c0ff;
}
.torrent-status-badge.status-downloading,
.torrent-status-badge.status-moving {
background: rgba(29,185,84,0.16);
color: #9ff0b9;
}
.torrent-status-badge.status-completed {
background: rgba(105,214,161,0.2);
color: #b8ffd2;
}
.torrent-status-badge.status-paused {
background: rgba(240,184,77,0.18);
color: #ffd78a;
}
.torrent-status-badge.status-failed {
background: rgba(229,96,96,0.18);
color: #ffb9b9;
}
.torrent-session-meta {
margin-top: 4px;
color: var(--text-subdued);
@@ -1837,6 +1922,22 @@ button.user-stat:hover {
white-space: nowrap;
}
.torrent-session-progress {
height: 5px;
margin-top: 7px;
overflow: hidden;
border-radius: 999px;
background: var(--bg-secondary);
}
.torrent-session-progress-bar {
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent), #7ee4a2);
transition: width 0.25s ease;
}
.torrent-session-remove {
align-self: flex-start;
border: 1px solid rgba(229,96,96,0.24);
@@ -2256,10 +2357,6 @@ button.user-stat:hover {
display: block;
}
.version-chip {
display: none;
}
.torrent-modal {
width: calc(100vw - 24px);
}
@@ -2397,6 +2494,13 @@ button.user-stat:hover {
gap: 6px;
}
.player-version-chip {
max-width: none;
padding-left: 0;
opacity: 0.62;
font-size: 9px;
}
.player-time {
min-width: 34px;
font-size: 10px;
@@ -2703,6 +2807,12 @@ button.user-stat:hover {
.player-track-artist { font-size: 10px; }
.player-buttons { gap: 10px; }
.player-version-chip {
padding-left: 0;
font-size: 8px;
opacity: 0.58;
}
.volume-control {
gap: 4px;
}