modified: templates/quiz.html

templates/quiz.html

@@ -286,13 +286,11 @@
       window.spotifyPlayer = player;
     };
     
+    // Globale Variable für den Abspiel-Timer
+    let playTimer = null;
+    
     function updatePlayButton(state) {
-      let playButton = document.getElementById('playPauseBtn');
-      if (state && !state.paused) {
-        playButton.innerHTML = i18n.pause;
-      } else {
-        playButton.innerHTML = '▶️ Play';
-      }
+      // Nicht mehr benötigt, kann entfernt oder leer bleiben
     }
     
     function setCorrectAnswer() {
@@ -312,18 +310,38 @@
       }
     }
     
-    function togglePlay() {
-      const deviceId = document.getElementById('device_id').value;
+    function extendPlayTime() {
+      // Hole die gewählte Verlängerungsdauer
+      const extendDuration = parseInt(document.getElementById('extendDuration').value, 10);
       
-      fetch('/toggle_playback', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ device_id: deviceId })
-      })
-      .then(response => response.json())
-      .catch(error => {
-        console.error('Error toggling playback:', error);
-      });
+      // Starte Wiedergabe, falls pausiert
+      if (window.spotifyPlayer) {
+        window.spotifyPlayer.resume().then(() => {
+          console.log('Playback resumed/extended');
+        });
+      }
+      
+      // Setze Timer für automatisches Pausieren
+      if (playTimer) {
+        clearTimeout(playTimer);
+      }
+      
+      playTimer = setTimeout(() => {
+        if (window.spotifyPlayer) {
+          window.spotifyPlayer.pause();
+        }
+      }, extendDuration * 1000);
+      
+      // Visuelles Feedback
+      const btn = document.getElementById('extendPlayBtn');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = `⏱️ +${extendDuration}s`;
+      btn.disabled = true;
+      
+      setTimeout(() => {
+        btn.innerHTML = originalText;
+        btn.disabled = false;
+      }, 1000);
     }
     
     function searchTracks() {
@@ -510,9 +528,18 @@ window.onload = function() {
       </label>
     </div>
     
-    <!-- Player Controls -->
+    <!-- Player Controls: Abspielzeit verlängern -->
     <div class="controls">
-      <button id="playPauseBtn" class="btn" onclick="togglePlay()">{{ translations['pause'] if translations.get('pause') else '⏸ Pause' }}</button>
+      <label style="margin-right: 10px; color: #e0e0e0; font-weight: 500;">
+        {{ translations['extend_playtime'] if translations.get('extend_playtime') else 'Extend Playtime' }}:
+        <select id="extendDuration" style="margin-left: 10px; padding: 8px 12px; border-radius: 15px; border: 2px solid rgba(29, 185, 84, 0.3); background: rgba(15, 20, 35, 0.6); color: #e0e0e0;">
+          <option value="10">10s</option>
+          <option value="15" selected>15s</option>
+          <option value="30">30s</option>
+          <option value="60">60s</option>
+        </select>
+      </label>
+      <button id="extendPlayBtn" class="btn" onclick="extendPlayTime()">🎵 {{ translations['extend_play'] if translations.get('extend_play') else '+Zeit abspielen' }}</button>
     </div>
     
     <!-- Antwort-Eingabe -->