Playlist Card + Safe Args

public/script/fetchinfo.js

@@ -70,27 +70,89 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     if (data.type === "playlist") {
+
+      infoDiv.classList.add("playlist-mode");
       infoDiv.innerHTML = `
-        <p style="color:orange;"><strong>Playlist détectée – ${data.count} vidéos</strong></p>
-        <h3>${data.title}</h3>
-        <p><strong>Channel :</strong> ${data.channel || "Inconnu"}</p>
+      
+        <h3 style="color:var(--video-info-heading-color);"><strong>Playlist détectée: ${data.title}</strong></h3>
+        <h3 style="color:var(--video-info-heading-color);"><strong>Nombre de vidéos: ${data.count}</strong></h3>
+        <p><strong>Channel :</strong> ${data.channel || "Unknown"}</p>
         <div id="playlistVideos"></div>
       `;
       const listDiv = document.getElementById("playlistVideos");
-      data.videos.forEach(v => {
+     data.videos.forEach(v => {
         const durationStr = `${Math.floor(v.duration/60)}m ${(v.duration%60).toString().padStart(2,"0")}s`;
+        const videoUrl = v.id ? `https://www.youtube.com/watch?v=${v.id}` : v.url;
+
         listDiv.innerHTML += `
           <div style="margin-bottom:12px;">
             <img src="${v.thumbnail}" width="160" alt="Thumbnail">
             <p><strong>${v.title}</strong></p>
             <p>Durée : ${durationStr}</p>
-            <p>URL : <a href="${v.webpage_url}" target="_blank">${v.webpage_url}</a></p>
+            <p><a href="${videoUrl}" target="_blank">URL</a> 
+              <button class="copy-btn" data-url="${videoUrl}">
+                📋
+              </button>
+            </p>
           </div>
         `;
       });
+
+      listDiv.addEventListener("click", (e) => {
+        if (e.target.classList.contains("copy-btn")) {
+          const btn = e.target;
+          if (btn.disabled) return;
+
+          btn.disabled = true;
+          const url = btn.dataset.url;
+
+          navigator.clipboard.writeText(url)
+            .then(() => {
+              const original = btn.textContent;
+
+              // fade out + shrink
+              btn.style.opacity = 0;
+              btn.style.transform = "scale(0.7)";
+
+              setTimeout(() => {
+                btn.textContent = "✅";
+                btn.style.opacity = 1;
+                btn.style.transform = "scale(1)";
+
+                setTimeout(() => {
+                  btn.style.opacity = 0;
+                  btn.style.transform = "scale(0.7)";
+
+                  setTimeout(() => {
+                    btn.textContent = original;
+                    btn.style.opacity = 1;
+                    btn.style.transform = "scale(1)";
+                    btn.disabled = false; // réactive le bouton
+                  }, 300);
+
+                }, 1000);
+
+              }, 300);
+
+            })
+            .catch(() => {
+              const original = btn.textContent;
+              btn.textContent = "❌";
+              setTimeout(() => {
+                btn.textContent = original;
+                btn.disabled = false;
+              }, 1500);
+            });
+        }
+      });
+
+
+
       infoDiv.classList.add("visible");
     return;
-  }
+  } else {
+  infoDiv.classList.remove("playlist-mode");
+}
 
 
     // Vidéo normale

public/styles/layout/videoinfo.css

@@ -21,7 +21,6 @@
 #videoInfo.visible {
   opacity: 1;
   max-height: 1500px; 
-  overflow: visible;
 }
 
 #videoInfo h3 {
@@ -68,6 +67,81 @@
   text-decoration: underline;
 }
 
+/* --- Playlist Mode --- */
+#videoInfo.playlist-mode {
+  max-width: 900px; 
+}
+
+/* Style du bloc "Playlist détectée" */
+#videoInfo.playlist-mode > p {
+  text-align: center;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+/* Layout liste des vidéos */
+#playlistVideos {
+  margin-top: 1em;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 18px;
+}
+
+/* Un item de playlist */
+#playlistVideos > div {
+  background: #3f3f3f;
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  text-align: center;
+  transition: transform 0.2s ease;
+}
+
+#playlistVideos > div p {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+#videoInfo.playlist-mode {
+  max-width: 95%;
+}
+
+#playlistVideos > div:hover {
+  transform: scale(1.05);
+}
+
+#playlistVideos img {
+  width: 100%;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.copy-btn {
+  all: unset;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;          
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  vertical-align: middle;
+  transition: transform 0.1s ease, color 0.1s ease, opacity 0.15s ease;
+  font-size: 1em;
+}
+
+#playlistVideos > div p a{
+  text-decoration: none;
+  color: var(--video-info-link-color);
+}
+
+#playlistVideos > div p a:hover{
+  text-decoration: underline;
+}
+
+
 /* Responsive */
 @media (max-width: 480px) {
   #videoInfo {