agrega botón reproducir en panel de playlists admin
Cada fila del mantenedor ahora tiene un botón "▶ Reproducir" que fuerza la reproducción inmediata en Spotify, sin necesidad de ir al reproductor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -74,6 +74,8 @@
|
||||
</td>
|
||||
<td class="td-desc">{{ pl.description[:80] }}{% if pl.description | length > 80 %}…{% endif %}</td>
|
||||
<td class="td-actions">
|
||||
<button class="btn-sm btn-play-now" id="play-btn-{{ pl.id }}"
|
||||
onclick="playNow('{{ pl.spotify_id }}', '{{ pl.spotify_type }}', {{ pl.id }})">▶ Reproducir</button>
|
||||
<button class="btn-sm" onclick="toggleEdit({{ pl.id }})">✏️ Editar</button>
|
||||
<form method="post" action="/admin/playlists/{{ pl.id }}/delete"
|
||||
onsubmit="return confirm('¿Eliminar {{ pl.name }}?')">
|
||||
@@ -133,6 +135,29 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function playNow(spotifyId, spotifyType, plId) {
|
||||
const btn = document.getElementById('play-btn-' + plId);
|
||||
btn.disabled = true;
|
||||
btn.textContent = '⏳';
|
||||
|
||||
const body = spotifyType === 'track'
|
||||
? { uris: [`spotify:track:${spotifyId}`] }
|
||||
: { context_uri: `spotify:${spotifyType}:${spotifyId}` };
|
||||
|
||||
try {
|
||||
const res = await fetch('/player/play', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
btn.textContent = res.ok ? '✓ Reproduciendo' : '✗ Error';
|
||||
} catch (_) {
|
||||
btn.textContent = '✗ Error';
|
||||
}
|
||||
|
||||
setTimeout(() => { btn.disabled = false; btn.textContent = '▶ Reproducir'; }, 2500);
|
||||
}
|
||||
|
||||
function toggleEdit(id) {
|
||||
const row = document.getElementById('edit-row-' + id);
|
||||
const visible = row.style.display !== 'none';
|
||||
@@ -149,6 +174,8 @@ function clearEmoji(id) {
|
||||
|
||||
<style>
|
||||
.td-actions { display: flex; gap: .4rem; align-items: center; }
|
||||
.btn-play-now { color: var(--green); border-color: rgba(29,185,84,.4); }
|
||||
.btn-play-now:hover { background: rgba(29,185,84,.12); }
|
||||
|
||||
.edit-row td { background: var(--surface2); padding: .75rem 1rem; }
|
||||
.edit-form { display: flex; flex-direction: column; gap: .75rem; }
|
||||
|
||||
Reference in New Issue
Block a user