diff --git a/templates/quiz.html b/templates/quiz.html index c32937f..a4404da 100644 --- a/templates/quiz.html +++ b/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() { - +
- + +