- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -8,8 +8,7 @@
             max-width: 800px;
             margin: 2rem auto;
             padding: 0 1rem;
-            background-color: #121212;
-            color: white;
+            background-color: #f5f5f5;
         }
         .credentials {
             display: flex;
@@ -20,23 +19,10 @@
         input {
             padding: 0.5rem;
             width: 100%;
-            background: #282828;
-            border: 1px solid #404040;
-            color: white;
-            border-radius: 4px;
         }
         .setup-button {
-            padding: 0.75rem 1.5rem;
+            padding: 0.5rem 1rem;
             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;
@@ -48,26 +34,18 @@
             min-height: 80vh;
         }
         #pauseResumeButton {
-            width: 120px;
-            height: 120px;
+            width: 80px;
+            height: 80px;
             border-radius: 50%;
             border: none;
-            background: linear-gradient(145deg, #1DB954, #1ed760);
+            background-color: #1DB954;
             color: white;
-            font-size: 28px;
+            font-size: 24px;
             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;
         }
         #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>
@@ -137,27 +115,6 @@
         return hashParams;
     }
 
-    async function playTrackById(trackId) {
-        const token = localStorage.getItem('spotify_access_token');
-        try {
-            const response = 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}`]
-                })
-            });
-            if (response.status === 204) {
-                updatePauseResumeButton(true);
-            }
-        } catch (error) {
-            console.error('Error playing track:', error);
-        }
-    }
-
     function initializePlayer(token) {
         document.getElementById('setup').classList.add('hidden');
         document.getElementById('player').classList.remove('hidden');
@@ -198,12 +155,12 @@
                     })
                 });
 
-                // Auto-play the track if track ID is present in URL
+                // Auto-play using button click
                 const trackId = getUrlParameter('track');
                 if (trackId) {
                     setTimeout(() => {
-                        playTrackById(trackId);
-                    }, 1000); // Small delay to ensure device is ready
+                        pauseResumeButton.click();
+                    }, 1000);
                 }
             } catch (error) {
                 console.error('Error during player initialization:', error);