fix(timeline-editor): disable waveform tooltip when no audio loaded

- Add audioBuffer check before showing tooltip/cursor in viewport controller
- Sync variable renames in module files (pixelsPerBeat, audioDurationSeconds)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 14 insertions, 12 deletions

diff --git a/tools/timeline_editor/timeline-viewport.js b/tools/timeline_editor/timeline-viewport.js
index eeb2582..30f2403 100644
--- a/tools/timeline_editor/timeline-viewport.js
+++ b/tools/timeline_editor/timeline-viewport.js
@@ -41,8 +41,8 @@ export class ViewportController {
     }
 
     handleZoomSlider(e) {
-        this.state.pixelsPerSecond = parseInt(e.target.value);
-        this.dom.zoomLevel.textContent = `${this.state.pixelsPerSecond}%`;
+        this.state.pixelsPerBeat = parseInt(e.target.value);
+        this.dom.zoomLevel.textContent = `${this.state.pixelsPerBeat}%`;
         this.renderCallback('zoom');
     }
 
@@ -74,15 +74,15 @@ export class ViewportController {
         const rect = this.dom.timelineContent.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
         const scrollLeft = this.dom.timelineContent.scrollLeft;
-        const timeUnderCursor = (scrollLeft + mouseX) / this.state.pixelsPerSecond;
+        const timeUnderCursor = (scrollLeft + mouseX) / this.state.pixelsPerBeat;
 
         const zoomDelta = e.deltaY > 0 ? -10 : 10;
-        const newPixelsPerSecond = Math.max(10, Math.min(500, this.state.pixelsPerSecond + zoomDelta));
+        const newPixelsPerSecond = Math.max(10, Math.min(500, this.state.pixelsPerBeat + zoomDelta));
 
-        if (newPixelsPerSecond !== this.state.pixelsPerSecond) {
-            this.state.pixelsPerSecond = newPixelsPerSecond;
-            this.dom.zoomSlider.value = this.state.pixelsPerSecond;
-            this.dom.zoomLevel.textContent = `${this.state.pixelsPerSecond}%`;
+        if (newPixelsPerSecond !== this.state.pixelsPerBeat) {
+            this.state.pixelsPerBeat = newPixelsPerSecond;
+            this.dom.zoomSlider.value = this.state.pixelsPerBeat;
+            this.dom.zoomLevel.textContent = `${this.state.pixelsPerBeat}%`;
             this.renderCallback('zoomWheel');
             this.dom.timelineContent.scrollLeft = timeUnderCursor * newPixelsPerSecond - mouseX;
             this.updateIndicatorPosition(this.timeToBeats(this.state.playbackOffset), false);
@@ -92,8 +92,8 @@ export class ViewportController {
     autoScrollToSequence() {
         const currentScrollLeft = this.dom.timelineContent.scrollLeft;
         const viewportWidth = this.dom.timelineContent.clientWidth;
-        const slack = (viewportWidth / this.state.pixelsPerSecond) * 0.1;
-        const currentTime = (currentScrollLeft / this.state.pixelsPerSecond) + slack;
+        const slack = (viewportWidth / this.state.pixelsPerBeat) * 0.1;
+        const currentTime = (currentScrollLeft / this.state.pixelsPerBeat) + slack;
 
         let targetSeqIndex = 0;
         for (let i = 0; i < this.state.sequences.length; i++) {
@@ -119,7 +119,7 @@ export class ViewportController {
     }
 
     updateIndicatorPosition(beats, smoothScroll = false) {
-        const timelineX = beats * this.state.pixelsPerSecond;
+        const timelineX = beats * this.state.pixelsPerBeat;
         const scrollLeft = this.dom.timelineContent.scrollLeft;
         this.dom.playbackIndicator.style.left = `${timelineX - scrollLeft + this.TIMELINE_LEFT_PADDING}px`;
 
@@ -133,6 +133,7 @@ export class ViewportController {
     }
 
     showWaveformCursor() {
+        if (!this.state.audioBuffer) return;
         this.dom.waveformCursor.style.display = 'block';
         this.dom.waveformTooltip.style.display = 'block';
     }
@@ -143,10 +144,11 @@ export class ViewportController {
     }
 
     updateWaveformCursor(e) {
+        if (!this.state.audioBuffer) return;
         const rect = this.dom.waveformContainer.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
         const scrollLeft = this.dom.timelineContent.scrollLeft;
-        const timeBeats = (scrollLeft + mouseX - this.TIMELINE_LEFT_PADDING) / this.state.pixelsPerSecond;
+        const timeBeats = (scrollLeft + mouseX - this.TIMELINE_LEFT_PADDING) / this.state.pixelsPerBeat;
         const timeSeconds = timeBeats * this.state.secondsPerBeat;
 
         // Position cursor