- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -5,67 +5,74 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            max-width: 800px;
-            margin: 2rem auto;
-            padding: 0 1rem;
+            margin: 0;
+            padding: 0;
             background-color: #121212;
             color: white;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
+
         .credentials {
+            width: 80%;
+            max-width: 500px;
+            margin: 2rem auto;
             display: flex;
             flex-direction: column;
             gap: 1rem;
-            margin-bottom: 2rem;
         }
+
         input {
-            padding: 0.5rem;
+            padding: 1rem;
             width: 100%;
             background: #282828;
             border: 1px solid #404040;
             color: white;
-            border-radius: 4px;
+            border-radius: 8px;
+            font-size: 16px;
         }
+
         .setup-button {
-            padding: 0.75rem 1.5rem;
+            padding: 1rem;
             cursor: pointer;
             background: #1DB954;
             border: none;
             color: white;
-            border-radius: 4px;
+            border-radius: 8px;
+            font-size: 16px;
             font-weight: bold;
-            transition: background-color 0.2s;
-        }
-        .setup-button:hover {
-            background: #1ed760;
         }
+
         .hidden {
             display: none;
         }
+
         #player {
             display: flex;
             justify-content: center;
             align-items: center;
-            min-height: 80vh;
+            flex-grow: 1;
         }
+
         #pauseResumeButton {
-            width: 120px;
-            height: 120px;
+            width: 200px;
+            height: 200px;
             border-radius: 50%;
             border: none;
-            background: linear-gradient(145deg, #1DB954, #1ed760);
+            background: #1DB954;
             color: white;
-            font-size: 28px;
+            font-size: 60px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 6px 12px rgba(29, 185, 84, 0.3);
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            transition: transform 0.2s;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
         }
+
         #pauseResumeButton:hover {
             transform: scale(1.05);
-            box-shadow: 0 8px 16px rgba(29, 185, 84, 0.4);
         }
+
         #pauseResumeButton:active {
             transform: scale(0.95);
         }
@@ -144,7 +151,7 @@
         playerInstance = new Spotify.Player({
             name: 'Development Player',
             getOAuthToken: cb => { cb(token); },
-            volume: 0.5
+            volume: 1.0
         });
 
         playerInstance.addListener('initialization_error', () => {
@@ -165,6 +172,7 @@
 
         playerInstance.addListener('ready', async ({ device_id }) => {
             try {
+                // First, become active device
                 await fetch('https://api.spotify.com/v1/me/player', {
                     method: 'PUT',
                     headers: {
@@ -173,26 +181,30 @@
                     },
                     body: JSON.stringify({
                         device_ids: [device_id],
-                        play: false
+                        play: true  // Changed to true to ensure playback starts
                     })
                 });
 
+                // Then, after a short delay, play the track if specified
                 const trackId = getUrlParameter('track');
                 if (trackId) {
-                    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}`]
-                            })
-                        });
-                    } catch (error) {
-                        console.error('Error playing track:', error);
-                    }
+                    // Add a small delay to ensure device is ready
+                    setTimeout(async () => {
+                        try {
+                            await fetch(`https://api.spotify.com/v1/me/player/play?device_id=${device_id}`, {
+                                method: 'PUT',
+                                headers: {
+                                    'Authorization': `Bearer ${token}`,
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                    uris: [`spotify:track:${trackId}`]
+                                })
+                            });
+                        } catch (error) {
+                            console.error('Error playing track:', error);
+                        }
+                    }, 1000);
                 }
             } catch (error) {
                 console.error('Error during player initialization:', error);