From c6d66e66c648c87d337585647776df4f8fd5c20d Mon Sep 17 00:00:00 2001
From: David Inostroza <deivid@deivid.xyz>
Date: Thu, 23 Apr 2026 13:59:23 -0400
Subject: [PATCH] =?UTF-8?q?agrega=20bot=C3=B3n=20reproducir=20en=20panel?=
 =?UTF-8?q?=20de=20playlists=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/templates/admin/playlists.html | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/app/templates/admin/playlists.html b/app/templates/admin/playlists.html
index 9288c8d..15f2559 100644
--- a/app/templates/admin/playlists.html
+++ b/app/templates/admin/playlists.html
@@ -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; }