- try to debug auth problem

Author: TobiasMue91

tools/spotify_music_quiz_cards.html

@@ -211,13 +211,9 @@
             const [key, value] = param.split('=');
             hashParams[key] = decodeURIComponent(value);
         });
-
-        // If we got a new token, save it immediately
         if (hashParams.access_token) {
-            console.log('Got new token from hash:', hashParams.access_token.substring(0, 10) + '...');
             localStorage.setItem('spotify_access_token', hashParams.access_token);
         }
-
         return hashParams;
     }
 
@@ -226,10 +222,8 @@
         if (!playlistId) {
             throw new Error('Could not extract playlist ID from URL');
         }
-
         const response = await spotifyFetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks`);
         if (!response) return [];
-
         const data = await response.json();
         return data.items
             .filter(item => item?.track && item.track.album?.release_date)
@@ -244,13 +238,11 @@
     function createQRCard(track, isQRSide) {
         const card = document.createElement('div');
         card.className = 'card';
-
         if (isQRSide) {
             const qrContainer = document.createElement('div');
             qrContainer.className = 'qr-container';
             qrContainer.id = `qr-${track.id}`;
             card.appendChild(qrContainer);
-
             new QRCode(qrContainer, {
                 text: `https://www.gptgames.dev/tools/spotify_music_quiz_cards.html?track=${track.id}`,
                 width: 220,
@@ -262,62 +254,44 @@
         } else {
             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>
-            `;
+            metadata.innerHTML = `<h3 class="title">${track.name}</h3><p class="artist">${track.artist}</p><p class="year">${track.year}</p>`;
             card.appendChild(metadata);
         }
-
         return card;
     }
 
     async function createQRCodesFromPlaylist() {
         const input = prompt("Enter Spotify playlist URL:");
         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 = '';
-
-            // Create wrapper divs
             const qrPage = document.createElement('div');
             qrPage.className = 'page';
             const qrContainer = document.createElement('div');
             qrContainer.className = 'card-container';
-
-            // Create QR codes page
             const selectedTracks = tracks.slice(0, 21);
             selectedTracks.forEach(track => {
                 qrContainer.appendChild(createQRCard(track, true));
             });
-
             qrPage.appendChild(qrContainer);
             printArea.appendChild(qrPage);
-
-            // Create metadata page
             const metadataPage = document.createElement('div');
             metadataPage.className = 'page';
             const metadataContainer = document.createElement('div');
             metadataContainer.className = 'card-container';
-
             selectedTracks.forEach(track => {
                 metadataContainer.appendChild(createQRCard(track, false));
             });
-
             metadataPage.appendChild(metadataContainer);
             printArea.appendChild(metadataPage);
-
             setTimeout(() => {
                 window.print();
             }, 1000);
-
         } catch (error) {
             alert('Error processing tracks: ' + error.message);
             console.error('Detailed error:', error);
@@ -328,7 +302,6 @@ <h3 class="title">${track.name}</h3>
         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 => {
@@ -348,7 +321,6 @@ <h3 class="title">${track.name}</h3>
                     play: true
                 })
             });
-
             const trackId = getUrlParameter('track');
             if (trackId) {
                 await fetch(`https://api.spotify.com/v1/me/player/play?device_id=${device_id}`, {
@@ -364,8 +336,9 @@ <h3 class="title">${track.name}</h3>
             }
         });
 
-        document.getElementById('pauseResumeButton').onclick = togglePauseResume;
-        document.getElementById('createQRButton').onclick = createQRCodesFromPlaylist;
+        playerInstance.addListener('not_ready', ({ device_id }) => {
+            console.error('Device ID has gone offline', device_id);
+        });
 
         playerInstance.addListener('authentication_error', ({ message }) => {
             console.error('Authentication error:', message);
@@ -377,10 +350,14 @@ <h3 class="title">${track.name}</h3>
             refreshAuth();
         });
 
+        document.getElementById('pauseResumeButton').onclick = togglePauseResume;
+        document.getElementById('createQRButton').onclick = createQRCodesFromPlaylist;
         playerInstance.connect();
     }
 
     function refreshAuth() {
+        localStorage.clear();
+        sessionStorage.clear();
         const clientId = localStorage.getItem('spotify_client_id');
         const scope = 'streaming user-read-email user-read-private user-modify-playback-state playlist-read-private';
         window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
@@ -394,20 +371,13 @@ <h3 class="title">${track.name}</h3>
                 ...options.headers
             }
         });
-
         if (response.status === 401) {
-            localStorage.clear();
-            sessionStorage.clear();
-            const clientId = localStorage.getItem('spotify_client_id');
-            const scope = 'streaming user-read-email user-read-private user-modify-playback-state playlist-read-private';
-            window.location.href = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
+            refreshAuth();
             return;
         }
-
         if (!response.ok) {
             throw new Error(`API request failed with status ${response.status}`);
         }
-
         return response;
     }
 </script>