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>
|
||||||
<td class="td-desc">{{ pl.description[:80] }}{% if pl.description | length > 80 %}…{% endif %}</td>
|
<td class="td-desc">{{ pl.description[:80] }}{% if pl.description | length > 80 %}…{% endif %}</td>
|
||||||
<td class="td-actions">
|
<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>
|
<button class="btn-sm" onclick="toggleEdit({{ pl.id }})">✏️ Editar</button>
|
||||||
<form method="post" action="/admin/playlists/{{ pl.id }}/delete"
|
<form method="post" action="/admin/playlists/{{ pl.id }}/delete"
|
||||||
onsubmit="return confirm('¿Eliminar {{ pl.name }}?')">
|
onsubmit="return confirm('¿Eliminar {{ pl.name }}?')">
|
||||||
@@ -133,6 +135,29 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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) {
|
function toggleEdit(id) {
|
||||||
const row = document.getElementById('edit-row-' + id);
|
const row = document.getElementById('edit-row-' + id);
|
||||||
const visible = row.style.display !== 'none';
|
const visible = row.style.display !== 'none';
|
||||||
@@ -149,6 +174,8 @@ function clearEmoji(id) {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.td-actions { display: flex; gap: .4rem; align-items: center; }
|
.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-row td { background: var(--surface2); padding: .75rem 1rem; }
|
||||||
.edit-form { display: flex; flex-direction: column; gap: .75rem; }
|
.edit-form { display: flex; flex-direction: column; gap: .75rem; }
|
||||||
|
|||||||
Reference in New Issue
Block a user