- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -56,8 +56,9 @@
             background: white;
         }
 
-        .card-back {
-            transform: rotateY(180deg);
+        .card-back p.year {
+            font-size: 24px;
+            margin-top: 8px;
         }
 
         .hidden {
@@ -176,7 +177,6 @@
         const card = document.createElement('div');
         card.className = 'card';
 
-        // Create the inner structure first
         const cardInner = document.createElement('div');
         cardInner.className = 'card-inner';
 
@@ -190,46 +190,52 @@
         <div class="p-4">
             <h3 class="text-xl font-bold">${track.name}</h3>
             <p class="text-gray-600">${track.artist}</p>
-            <p class="text-gray-500">${track.year}</p>
+            <p class="text-gray-500 year">${track.year}</p>
         </div>
     `;
 
-        // Assemble the card
         cardInner.appendChild(cardFront);
         cardInner.appendChild(cardBack);
         card.appendChild(cardInner);
 
-        // Generate QR code after the element is in the DOM
-        setTimeout(() => {
-            new QRCode(cardFront, {
-                text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
-                width: 200,
-                height: 200
-            });
-        }, 0);
+        // Create QR code with larger size
+        new QRCode(cardFront, {
+            text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
+            width: 220,
+            height: 220,
+            colorDark: "#000000",
+            colorLight: "#ffffff",
+        });
 
         return card;
     }
 
+
     async function createQRCodesFromPlaylist() {
         const input = prompt("Enter Spotify playlist URL:");
+        const maxTracks = 20;  // Limit to 20 tracks
+
         if (!input) return;
 
         try {
             const tracks = await getPlaylistTracks(input);
-
             if (tracks.length === 0) {
                 throw new Error('No valid tracks found in playlist');
             }
 
             const printArea = document.getElementById('printArea');
             printArea.innerHTML = '';
 
-            tracks.forEach(track => {
+            // Take only the first 20 tracks
+            tracks.slice(0, maxTracks).forEach(track => {
                 printArea.appendChild(createQRCard(track));
             });
 
-            window.print();
+            // Add a small delay before printing to ensure QR codes are generated
+            setTimeout(() => {
+                window.print();
+            }, 500);
+
         } catch (error) {
             alert('Error processing tracks: ' + error.message);
             console.error('Detailed error:', error);