- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -8,7 +8,8 @@
             max-width: 800px;
             margin: 2rem auto;
             padding: 0 1rem;
-            background-color: #f5f5f5;
+            background-color: #121212;
+            color: white;
         }
         .credentials {
             display: flex;
@@ -19,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;
@@ -34,18 +48,26 @@
             min-height: 80vh;
         }
         #pauseResumeButton {
-            width: 80px;
-            height: 80px;
+            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);
+        }
+        #pauseResumeButton:active {
+            transform: scale(0.95);
         }
     </style>
 </head>
@@ -155,12 +177,29 @@
                     })
                 });
 
-                // Auto-play using button click
+                // If there's a track ID in the URL
                 const trackId = getUrlParameter('track');
                 if (trackId) {
-                    setTimeout(() => {
-                        pauseResumeButton.click();
-                    }, 5000);
+                    // First select the track via API
+                    try {
+                        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}`]
+                            })
+                        });
+
+                        // Then trigger the play button after 4 seconds
+                        setTimeout(() => {
+                            pauseResumeButton.click();
+                        }, 4000);
+                    } catch (error) {
+                        console.error('Error playing track:', error);
+                    }
                 }
             } catch (error) {
                 console.error('Error during player initialization:', error);