- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -8,6 +8,8 @@
             max-width: 800px;
             margin: 2rem auto;
             padding: 0 1rem;
+            background-color: #121212;
+            color: white;
         }
         .credentials {
             display: flex;
@@ -18,10 +20,23 @@
         input {
             padding: 0.5rem;
             width: 100%;
+            background: #282828;
+            border: 1px solid #404040;
+            color: white;
+            border-radius: 4px;
         }
         .setup-button {
-            padding: 0.5rem 1rem;
+            padding: 0.75rem 1.5rem;
             cursor: pointer;
+            background: #1DB954;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            font-weight: bold;
+            transition: background-color 0.2s;
+        }
+        .setup-button:hover {
+            background: #1ed760;
         }
         .hidden {
             display: none;
@@ -32,19 +47,27 @@
             align-items: center;
             min-height: 80vh;
         }
-        #playPauseButton {
-            width: 100px;
-            height: 100px;
+        #pauseResumeButton {
+            width: 120px;
+            height: 120px;
             border-radius: 50%;
             border: none;
-            background-color: #1DB954;
+            background: linear-gradient(145deg, #1DB954, #1ed760);
             color: white;
-            font-size: 24px;
+            font-size: 28px;
             cursor: pointer;
-            transition: transform 0.2s;
+            transition: all 0.3s ease;
+            box-shadow: 0 6px 12px rgba(29, 185, 84, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        #pauseResumeButton:hover {
+            transform: scale(1.05);
+            box-shadow: 0 8px 16px rgba(29, 185, 84, 0.4);
         }
-        #playPauseButton:hover {
-            transform: scale(1.1);
+        #pauseResumeButton:active {
+            transform: scale(0.95);
         }
     </style>
 </head>
@@ -54,31 +77,26 @@
     <button class="setup-button" onclick="startAuth()">Initialize Player</button>
 </div>
 <div id="player" class="hidden">
-    <button id="playPauseButton">▶</button>
+    <button id="pauseResumeButton">⏸️</button>
 </div>
 
 <script>
     let playerInstance = null;
     let isPlaying = false;
     const redirectUri = 'http://gptgames.dev/tools/spotify_test.html';
-    const playPauseButton = document.getElementById('playPauseButton');
+    const pauseResumeButton = document.getElementById('pauseResumeButton');
 
-    function togglePlayPause() {
+    function togglePauseResume() {
         if (isPlaying) {
             playerInstance.pause();
         } else {
-            const trackId = getUrlParameter('track');
-            if (trackId) {
-                playTrackById(trackId);
-            } else {
-                playerInstance.resume();
-            }
+            playerInstance.resume();
         }
     }
 
-    function updatePlayPauseButton(playing) {
+    function updatePauseResumeButton(playing) {
         isPlaying = playing;
-        playPauseButton.textContent = isPlaying ? '▐▐' : '▶';
+        pauseResumeButton.textContent = isPlaying ? '⏸️' : '▶️';
     }
 
     function getUrlParameter(name) {
@@ -133,7 +151,7 @@
                 })
             });
             if (response.status === 204) {
-                updatePlayPauseButton(true);
+                updatePauseResumeButton(true);
             }
         } catch (error) {
             console.error('Error playing track:', error);
@@ -162,7 +180,7 @@
 
         playerInstance.addListener('player_state_changed', state => {
             if (state) {
-                updatePlayPauseButton(!state.paused);
+                updatePauseResumeButton(!state.paused);
             }
         });
 
@@ -179,12 +197,20 @@
                         play: false
                     })
                 });
+
+                // Auto-play the track if track ID is present in URL
+                const trackId = getUrlParameter('track');
+                if (trackId) {
+                    setTimeout(() => {
+                        playTrackById(trackId);
+                    }, 1000); // Small delay to ensure device is ready
+                }
             } catch (error) {
                 console.error('Error during player initialization:', error);
             }
         });
 
-        playPauseButton.onclick = togglePlayPause;
+        pauseResumeButton.onclick = togglePauseResume;
         playerInstance.connect();
     }