diff --git a/aider/website/_includes/recording.css b/aider/website/_includes/recording.css index ac0285c3f..503b60446 100644 --- a/aider/website/_includes/recording.css +++ b/aider/website/_includes/recording.css @@ -115,6 +115,19 @@ li.active-marker { padding: 4px 8px; margin-left: -8px; } + +/* Make list items clickable */ +.transcript-item { + cursor: pointer; + transition: background-color 0.2s ease; + padding: 4px 8px; + margin-left: -8px; + border-radius: 4px; +} + +.transcript-item:hover { + background-color: #f0f0f0; +} .asciinema-player-theme-aider { /* Foreground (default text) color */ --term-color-foreground: #444444; /* colour238 */ diff --git a/aider/website/_includes/recording.js b/aider/website/_includes/recording.js index 7b354916b..1db74cae6 100644 --- a/aider/website/_includes/recording.js +++ b/aider/website/_includes/recording.js @@ -54,6 +54,30 @@ document.addEventListener('DOMContentLoaded', function() { item.appendChild(timeLink); item.appendChild(document.createTextNode(' ' + message)); + // Add class and click handler to the entire list item + item.classList.add('transcript-item'); + item.dataset.time = timeInSeconds; + item.dataset.message = message; + + item.addEventListener('click', function(e) { + // Prevent click event if the user clicked directly on the timestamp link + // This prevents double-firing of the event + if (e.target !== timeLink) { + e.preventDefault(); + if (player && typeof player.seek === 'function') { + player.seek(timeInSeconds); + player.play(); + + // Also trigger toast and speech + showToast(message); + speakText(message); + + // Highlight this timestamp + highlightTimestamp(timeInSeconds); + } + } + }); + markers.push([timeInSeconds, message]); } });