- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -17,50 +17,40 @@
                 left: 0;
                 top: 0;
             }
-            .card {
-                break-inside: avoid;
-                page-break-inside: avoid;
-            }
         }
 
         .card {
             width: 6cm;
             height: 6cm;
-            position: relative;
-            perspective: 1000px;
-        }
-
-        .card-inner {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            transition: transform 0.8s;
-            transform-style: preserve-3d;
-        }
-
-        .card:hover .card-inner {
-            transform: rotateY(180deg);
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            background: white;
+            padding: 10px;
+            margin: 10px;
         }
 
-        .card-front, .card-back {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            backface-visibility: hidden;
+        .qr-container {
             display: flex;
-            align-items: center;
             justify-content: center;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            background: white;
+            margin-bottom: 10px;
         }
 
-        .card-back p.year {
+        .metadata {
+            text-align: center;
+        }
+
+        .metadata .year {
             font-size: 24px;
             margin-top: 8px;
         }
 
+        #printArea {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            padding: 20px;
+        }
+
         .hidden {
             display: none;
         }
@@ -103,7 +93,7 @@
     <button id="createQRButton" class="fixed top-4 right-4 bg-green-500 text-white py-2 px-4 rounded">Create QR codes from Playlist</button>
 </div>
 
-<div id="printArea" class="grid grid-cols-3 gap-4 p-4"></div>
+<div id="printArea"></div>
 
 <script>
     let playerInstance = null;
@@ -150,19 +140,15 @@
         if (!playlistId) {
             throw new Error('Could not extract playlist ID from URL');
         }
-
         const response = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`, {
             headers: {
                 'Authorization': `Bearer ${localStorage.getItem('spotify_access_token')}`
             }
         });
-
         if (!response.ok) {
             throw new Error(`API request failed with status ${response.status}`);
         }
-
         const data = await response.json();
-
         return data.items
             .filter(item => item?.track && item.track.album?.release_date)
             .map(item => ({
@@ -177,19 +163,17 @@
         const card = document.createElement('div');
         card.className = 'card';
 
-        // Create a container for the QR code
         const qrContainer = document.createElement('div');
         qrContainer.className = 'qr-container';
         qrContainer.id = `qr-${track.id}`;
 
-        // Create the metadata section
         const metadata = document.createElement('div');
         metadata.className = 'metadata';
         metadata.innerHTML = `
-        <h3 class="title">${track.name}</h3>
-        <p class="artist">${track.artist}</p>
-        <p class="year">${track.year}</p>
-    `;
+                <h3 class="title">${track.name}</h3>
+                <p class="artist">${track.artist}</p>
+                <p class="year">${track.year}</p>
+            `;
 
         card.appendChild(qrContainer);
         card.appendChild(metadata);
@@ -205,11 +189,8 @@ <h3 class="title">${track.name}</h3>
         return card;
     }
 
-
     async function createQRCodesFromPlaylist() {
         const input = prompt("Enter Spotify playlist URL:");
-        const maxTracks = 20;  // Limit to 20 tracks
-
         if (!input) return;
 
         try {
@@ -221,15 +202,13 @@ <h3 class="title">${track.name}</h3>
             const printArea = document.getElementById('printArea');
             printArea.innerHTML = '';
 
-            // Take only the first 20 tracks
-            tracks.slice(0, maxTracks).forEach(track => {
+            tracks.slice(0, 21).forEach(track => {
                 printArea.appendChild(createQRCard(track));
             });
 
-            // Add a small delay before printing to ensure QR codes are generated
             setTimeout(() => {
                 window.print();
-            }, 500);
+            }, 1000);
 
         } catch (error) {
             alert('Error processing tracks: ' + error.message);
@@ -240,12 +219,13 @@ <h3 class="title">${track.name}</h3>
     function initializePlayer(token) {
         document.getElementById('setup').classList.add('hidden');
         document.getElementById('player').classList.remove('hidden');
-
         localStorage.setItem('spotify_access_token', token);
 
         playerInstance = new Spotify.Player({
             name: 'Development Player',
-            getOAuthToken: cb => { cb(token); }
+            getOAuthToken: cb => {
+                cb(token);
+            }
         });
 
         playerInstance.addListener('ready', async ({ device_id }) => {
@@ -255,7 +235,10 @@ <h3 class="title">${track.name}</h3>
                     'Authorization': `Bearer ${token}`,
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ device_ids: [device_id], play: true })
+                body: JSON.stringify({
+                    device_ids: [device_id],
+                    play: true
+                })
             });
 
             const trackId = getUrlParameter('track');
@@ -266,7 +249,9 @@ <h3 class="title">${track.name}</h3>
                         'Authorization': `Bearer ${token}`,
                         'Content-Type': 'application/json'
                     },
-                    body: JSON.stringify({ uris: [`spotify:track:${trackId}`] })
+                    body: JSON.stringify({
+                        uris: [`spotify:track:${trackId}`]
+                    })
                 });
             }
         });