- playing around with the spotify API

TobiasMue91 · TobiasMue91 · commit 1c81d5313cad · 2025-02-16T14:14:18.000+01:00
diff --git a/tools/spotify_test.html b/tools/spotify_test.html
@@ -3,36 +3,81 @@
 <head>
     <title>Spotify Track Player</title>
     <style>
-        body { font-family: Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
-        .credentials { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
-        input { padding: 0.5rem; width: 100%; }
-        button { padding: 0.5rem 1rem; cursor: pointer; }
-        .hidden { display: none; }
-        #status { margin: 1rem 0; padding: 1rem; background: #f0f0f0; }
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+        .credentials {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        input {
+            padding: 0.5rem;
+            width: 100%;
+        }
+        .setup-button {
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+        }
+        .hidden {
+            display: none;
+        }
+        #player {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 80vh;
+        }
+        #playPauseButton {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            border: none;
+            background-color: #1DB954;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        #playPauseButton:hover {
+            transform: scale(1.1);
+        }
     </style>
 </head>
 <body>
 <div id="setup" class="credentials">
     <input type="text" id="clientId" placeholder="Enter Spotify Client ID">
-    <button onclick="startAuth()">Initialize Player</button>
+    <button class="setup-button" onclick="startAuth()">Initialize Player</button>
 </div>
 <div id="player" class="hidden">
-    <div id="status">Status: Initializing...</div>
+    <button id="playPauseButton">▐▐</button>
 </div>
 
 <script>
     let playerInstance = null;
+    let isPlaying = false;
     const redirectUri = 'http://gptgames.dev/tools/spotify_test.html';
-    const statusDiv = document.getElementById('status');
+    const playPauseButton = document.getElementById('playPauseButton');
+
+    function togglePlayPause() {
+        if (isPlaying) {
+            playerInstance.pause();
+        } else {
+            playerInstance.resume();
+        }
+    }
 
-    function updateStatus(message) {
-        console.log(message);
-        statusDiv.textContent = `Status: ${message}`;
+    function updatePlayPauseButton(playing) {
+        isPlaying = playing;
+        playPauseButton.textContent = isPlaying ? '▐▐' : '▶';
     }
 
     function getUrlParameter(name) {
         const urlParams = new URLSearchParams(window.location.search);
-        console.log('getUrlParameter', name, urlParams.get(name));
         return urlParams.get(name);
     }
 
@@ -72,34 +117,30 @@
     function initializePlayer(token) {
         document.getElementById('setup').classList.add('hidden');
         document.getElementById('player').classList.remove('hidden');
-        updateStatus('Initializing player...');
 
         playerInstance = new Spotify.Player({
             name: 'Development Player',
             getOAuthToken: cb => { cb(token); },
             volume: 0.5
         });
 
-        playerInstance.addListener('initialization_error', ({ message }) => {
-            updateStatus(`Initialization Error: ${message}`);
+        playerInstance.addListener('initialization_error', () => {
             localStorage.removeItem('spotify_access_token');
         });
 
-        playerInstance.addListener('authentication_error', ({ message }) => {
-            updateStatus(`Authentication Error: ${message}`);
+        playerInstance.addListener('authentication_error', () => {
             localStorage.removeItem('spotify_access_token');
             document.getElementById('setup').classList.remove('hidden');
             document.getElementById('player').classList.add('hidden');
         });
 
         playerInstance.addListener('player_state_changed', state => {
             if (state) {
-                updateStatus(`Now Playing: ${state.track_window.current_track.name} by ${state.track_window.current_track.artists[0].name}`);
+                updatePlayPauseButton(!state.paused);
             }
         });
 
         playerInstance.addListener('ready', ({ device_id }) => {
-            updateStatus('Connecting to Spotify...');
             fetch('https://api.spotify.com/v1/me/player', {
                 method: 'PUT',
                 headers: {
@@ -120,6 +161,7 @@
             });
         });
 
+        playPauseButton.onclick = togglePlayPause;
         playerInstance.connect();
     }
 
@@ -136,10 +178,10 @@
                 })
             });
             if (response.status === 204) {
-                updateStatus('Loading track...');
+                updatePlayPauseButton(true);
             }
         } catch (error) {
-            updateStatus('Error playing track: ' + error);
+            console.error('Error playing track:', error);
         }
     }
 
