- playing around with the spotify API

TobiasMue91 · TobiasMue91 · commit 159343559a88 · 2025-02-16T14:28:02.000+01:00
diff --git a/tools/spotify_qr.html b/tools/spotify_qr.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>Spotify Track QR Generator</title>
-  <script src="https://cdn.jsdelivr.net/npm/qrcode.js@1.0.0/qrcode.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100 min-h-screen flex items-center justify-center">
@@ -59,32 +59,27 @@ <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Spotify Track QR G
     const qrcode = document.getElementById('qrcode');
     const downloadButton = document.getElementById('downloadButton');
 
-    // Clear previous QR code
     qrcode.innerHTML = '';
 
-    // Generate new QR code
-    QRCode.toCanvas(qrcode, url, {
+    new QRCode(qrcode, {
+      text: url,
       width: 256,
-      margin: 2,
-      color: {
-        dark: '#000000',
-        light: '#ffffff'
-      }
-    }, function (error) {
-      if (error) {
-        console.error(error);
-        alert('Error generating QR code');
-        return;
-      }
+      height: 256,
+      colorDark: "#000000",
+      colorLight: "#ffffff",
+      correctLevel: QRCode.CorrectLevel.H
+    });
 
-      // Show QR code and download button
-      qrcode.classList.remove('hidden');
-      downloadButton.classList.remove('hidden');
+    qrcode.classList.remove('hidden');
+    downloadButton.classList.remove('hidden');
 
-      // Update download link
+    setTimeout(() => {
       const downloadLink = document.getElementById('downloadLink');
-      downloadLink.href = qrcode.toDataURL('image/png');
-    });
+      const canvas = qrcode.querySelector('canvas');
+      if (canvas) {
+        downloadLink.href = canvas.toDataURL('image/png');
+      }
+    }, 100);
   }
 </script>
 </body>
diff --git a/tools/spotify_test.html b/tools/spotify_test.html
@@ -140,54 +140,46 @@
             }
         });
 
-        playerInstance.addListener('ready', ({ device_id }) => {
-            fetch('https://api.spotify.com/v1/me/player', {
-                method: 'PUT',
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    device_ids: [device_id],
-                    play: false
-                })
-            }).then(response => {
-                if (response.status === 204) {
-                    // Add a small delay to ensure the device is fully registered
-                    setTimeout(() => {
-                        const trackId = getUrlParameter('track');
-                        if (trackId) {
-                            playTrackById(trackId, token);
-                        }
-                    }, 1000);
+        let deviceReady = false;
+        playerInstance.addListener('ready', async ({ device_id }) => {
+            deviceReady = true;
+            try {
+                await fetch('https://api.spotify.com/v1/me/player', {
+                    method: 'PUT',
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        device_ids: [device_id],
+                        play: false
+                    })
+                });
+
+                const trackId = getUrlParameter('track');
+                if (trackId) {
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    await fetch('https://api.spotify.com/v1/me/player/play', {
+                        method: 'PUT',
+                        headers: {
+                            'Authorization': `Bearer ${token}`,
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            uris: [`spotify:track:${trackId}`]
+                        })
+                    });
+                    updatePlayPauseButton(true);
                 }
-            });
+            } catch (error) {
+                console.error('Error during player initialization:', error);
+            }
         });
 
         playPauseButton.onclick = togglePlayPause;
         playerInstance.connect();
     }
 
-    async function playTrackById(trackId, token) {
-        try {
-            const response = await fetch('https://api.spotify.com/v1/me/player/play', {
-                method: 'PUT',
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    uris: [`spotify:track:${trackId}`]
-                })
-            });
-            if (response.status === 204) {
-                updatePlayPauseButton(true);
-            }
-        } catch (error) {
-            console.error('Error playing track:', error);
-        }
-    }
-
     const storedClientId = localStorage.getItem('spotify_client_id');
     if (storedClientId) {
         document.getElementById('clientId').value = storedClientId;
