- remove client id input setup and hardcode CLIENT_ID

TobiasMue91 · TobiasMue91 · commit 85a240c9afeb · 2025-02-18T20:21:23.000+01:00
- auto-initialize spotify player on page load if token exists
- clean up auth flow by removing localStorage operations for client id
- fix svg indentation in toggle button icons
diff --git a/tools/spotify_music_quiz_cards.html b/tools/spotify_music_quiz_cards.html
@@ -87,16 +87,6 @@
     </style>
 </head>
 <body class="bg-gray-100 dark:bg-black min-h-screen overflow-hidden">
-<div id="setup" class="max-w-md mx-auto p-6">
-    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-8">
-        <input type="text" id="clientId" placeholder="Enter Spotify Client ID"
-               class="w-full px-4 py-2 mb-4 border rounded bg-white dark:bg-gray-700 text-black dark:text-white">
-        <button onclick="startAuth()"
-                class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition-colors">
-            Initialize
-        </button>
-    </div>
-</div>
 
 <div id="player" class="hidden h-screen flex justify-center items-center flex-col">
     <div class="flex flex-col items-center gap-8">
@@ -147,6 +137,7 @@ <h2 class="text-xl font-bold mb-4 text-black dark:text-white">
 <script>
     let playerInstance = null;
     let isPlaying = false;
+    const CLIENT_ID = '0c99c2a032ad459c984e55b14b5a78ae';
     const redirectUri = 'http://gptgames.dev/tools/spotify_music_quiz_cards.html';
 
     function togglePauseResume() {
@@ -165,13 +156,13 @@ <h2 class="text-xl font-bold mb-4 text-black dark:text-white">
 
         if (isPlaying) {
             button.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
-                <rect x="6" y="4" width="4" height="16" fill="white"/>
-                <rect x="14" y="4" width="4" height="16" fill="white"/>
-            </svg>`;
+            <rect x="6" y="4" width="4" height="16" fill="white"/>
+            <rect x="14" y="4" width="4" height="16" fill="white"/>
+        </svg>`;
         } else {
             button.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 24 24">
-                <path d="M8 5v14l11-7z" fill="white"/>
-            </svg>`;
+            <path d="M8 5v14l11-7z" fill="white"/>
+        </svg>`;
         }
     }
 
@@ -185,10 +176,8 @@ <h2 class="text-xl font-bold mb-4 text-black dark:text-white">
     };
 
     function startAuth() {
-        const clientId = document.getElementById('clientId').value;
-        localStorage.setItem('spotify_client_id', clientId);
         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)}`;
+        window.location.href = `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
     }
 
     function getHashParams() {
@@ -265,6 +254,13 @@ <h3 class="text-lg font-semibold">${track.name}</h3>
         });
         document.getElementById('createQRButton').onclick = showPlaylistModal;
         updateButtonIcon();
+
+        const token = localStorage.getItem('spotify_access_token') || getHashParams().access_token;
+        if (token) {
+            initializePlayer(token);
+        } else {
+            startAuth();
+        }
     });
 
     async function processPlaylist() {
@@ -322,8 +318,6 @@ <h3 class="text-lg font-semibold">${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({
@@ -377,12 +371,10 @@ <h3 class="text-lg font-semibold">${track.name}</h3>
     }
 
     function refreshAuth() {
-        const clientId = localStorage.getItem('spotify_client_id');
         localStorage.clear();
         sessionStorage.clear();
-        localStorage.setItem('spotify_client_id', clientId);
         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)}`;
+        window.location.href = `https://accounts.spotify.com/authorize?client_id=${CLIENT_ID}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}`;
     }
 
     async function spotifyFetch(url, options = {}) {
