This commit is contained in:
Ultradesu
@@ -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>
|
||||
|
||||
|
||||
+245
-53
@@ -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();
|
||||
|
||||
+124
-124
@@ -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">·</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">·</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">·</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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user