fix(map): 🐛 stabilize playback camera and control layout

Author: hletrd

e2e/travelback.spec.ts

@@ -10,6 +10,19 @@ const JSON_SEMANTIC_LOC_FIXTURE = path.resolve(__dirname, 'fixtures/google-seman
 const JSON_TIMELINE_EDITS_FIXTURE = path.resolve(__dirname, 'fixtures/google-timeline-edits.json')
 const JSON_SEMANTIC_SEG_FIXTURE = path.resolve(__dirname, 'fixtures/google-semantic-segments.json')
 
+function boxesOverlap(a: { x: number; y: number; width: number; height: number }, b: { x: number; y: number; width: number; height: number }) {
+  return !(
+    a.x + a.width <= b.x ||
+    b.x + b.width <= a.x ||
+    a.y + a.height <= b.y ||
+    b.y + b.height <= a.y
+  )
+}
+
+function shortestAngleDelta(from: number, to: number) {
+  return Math.abs(((to - from + 540) % 360) - 180)
+}
+
 /** Helper: wait for the app to be ready (map container rendered, with or without WebGL) */
 async function waitForApp(page: Page) {
   // Wait for the heading to be visible (confirms React rendered)
@@ -18,11 +31,6 @@ async function waitForApp(page: Page) {
   await page.waitForTimeout(500)
 }
 
-/** Helper: check if the map canvas loaded (WebGL worked) */
-async function hasMapCanvas(page: Page): Promise<boolean> {
-  return await page.locator('canvas').count() > 0
-}
-
 /** Helper: upload a GPX file and wait for the track to load */
 async function uploadGpx(page: Page) {
   const fileInput = page.locator('input[type="file"]')
@@ -101,6 +109,98 @@ test.describe('Travelback App', () => {
     await expect(page.getByRole('button', { name: /camera tracking/i })).toBeVisible()
   })
 
+  test('map zoom controls do not overlap top toolbars', async ({ page }) => {
+    await uploadGpx(page)
+
+    const zoomControls = page.locator('.maplibregl-ctrl-top-left .maplibregl-ctrl-group').first()
+    await expect(zoomControls).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByTestId('global-toolbar')).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByTestId('track-toolbar')).toBeVisible({ timeout: 10_000 })
+
+    await expect.poll(async () => {
+      const [zoomBox, globalToolbarBox, trackToolbarBox] = await Promise.all([
+        zoomControls.boundingBox(),
+        page.getByTestId('global-toolbar').boundingBox(),
+        page.getByTestId('track-toolbar').boundingBox(),
+      ])
+
+      if (!zoomBox || !globalToolbarBox || !trackToolbarBox) {
+        return true
+      }
+
+      return boxesOverlap(zoomBox, globalToolbarBox) || boxesOverlap(zoomBox, trackToolbarBox)
+    }, { timeout: 5_000, intervals: [120, 200, 300] }).toBeFalsy()
+  })
+
+  test('map camera movement stays stable during playback', async ({ page }) => {
+    await uploadGpx(page)
+
+    const playBtn = page.getByRole('button', { name: 'Play' })
+    await expect(playBtn).toBeVisible({ timeout: 10_000 })
+    await playBtn.click({ force: true })
+
+    const samples = await page.evaluate(async () => {
+      type CameraSample = { center: [number, number]; bearing: number }
+      type DebugWindow = Window & {
+        __travelbackDebug?: {
+          getCamera: () => CameraSample | null
+        }
+      }
+
+      const debugWindow = window as DebugWindow
+      const points: CameraSample[] = []
+
+      for (let i = 0; i < 16; i++) {
+        const camera = debugWindow.__travelbackDebug?.getCamera()
+        if (camera) {
+          points.push({ center: [...camera.center] as [number, number], bearing: camera.bearing })
+        }
+        await new Promise(resolve => setTimeout(resolve, 120))
+      }
+
+      return points
+    })
+
+    expect(samples.length).toBeGreaterThanOrEqual(8)
+
+    const centerJumpsMeters: number[] = []
+    const bearingJumps: number[] = []
+
+    for (let i = 1; i < samples.length; i++) {
+      const prev = samples[i - 1]
+      const next = samples[i]
+      const avgLatRad = ((prev.center[1] + next.center[1]) / 2) * (Math.PI / 180)
+      const dLngMeters = (next.center[0] - prev.center[0]) * 111320 * Math.cos(avgLatRad)
+      const dLatMeters = (next.center[1] - prev.center[1]) * 110540
+      centerJumpsMeters.push(Math.hypot(dLngMeters, dLatMeters))
+      bearingJumps.push(shortestAngleDelta(prev.bearing, next.bearing))
+    }
+
+    const steadyCenterJumps = centerJumpsMeters.slice(4)
+    const steadyBearingJumps = bearingJumps.slice(4)
+
+    expect(steadyCenterJumps.length).toBeGreaterThanOrEqual(4)
+    expect(steadyBearingJumps.length).toBeGreaterThanOrEqual(4)
+
+    const sortedCenterJumps = [...steadyCenterJumps].sort((a, b) => a - b)
+    const sortedBearingJumps = [...steadyBearingJumps].sort((a, b) => a - b)
+    const centerMedian = sortedCenterJumps[Math.floor(sortedCenterJumps.length / 2)]
+    const bearingMedian = sortedBearingJumps[Math.floor(sortedBearingJumps.length / 2)]
+    const centerP95 = sortedCenterJumps[Math.floor((sortedCenterJumps.length - 1) * 0.95)]
+    const bearingP95 = sortedBearingJumps[Math.floor((sortedBearingJumps.length - 1) * 0.95)]
+
+    const firstSample = samples[0]
+    const lastSample = samples[samples.length - 1]
+    const avgLatRad = ((firstSample.center[1] + lastSample.center[1]) / 2) * (Math.PI / 180)
+    const totalLngMeters = (lastSample.center[0] - firstSample.center[0]) * 111320 * Math.cos(avgLatRad)
+    const totalLatMeters = (lastSample.center[1] - firstSample.center[1]) * 110540
+    const totalDisplacementMeters = Math.hypot(totalLngMeters, totalLatMeters)
+
+    expect(totalDisplacementMeters).toBeGreaterThan(25)
+    expect(centerP95).toBeLessThan(Math.max(600, centerMedian * 8))
+    expect(bearingP95).toBeLessThan(Math.max(150, bearingMedian * 8))
+  })
+
   test('scene editor opens and allows adding scenes', async ({ page }) => {
     await uploadGpx(page)
 

src/app/globals.css

@@ -129,5 +129,6 @@ input[type="range"]::-webkit-slider-runnable-track {
 .vitro-toast-ok   { background: color-mix(in srgb, var(--ok) 80%, var(--go-bg)); }
 .vitro-toast-info { background: color-mix(in srgb, var(--info) 80%, var(--go-bg)); }
 
-/* Hide map controls on landing to prevent overlap with upload card */
-.hide-map-controls .maplibregl-ctrl-top-right { display: none; }
+/* Hide map zoom controls on landing to prevent overlap with upload card */
+.hide-map-controls .maplibregl-ctrl-top-right,
+.hide-map-controls .maplibregl-ctrl-top-left { display: none; }

src/app/page.tsx

@@ -34,7 +34,6 @@ function HomeInner() {
   const { t, locale, setLocale } = useLocale()
   const [fullTrack, setFullTrack] = useState<Track | null>(null)
   const [track, setTrack] = useState<Track | null>(null)
-  const [timelineRange, setTimelineRange] = useState<[number, number] | null>(null)
   const [isPlaying, setIsPlaying] = useState(false)
   const [progress, setProgress] = useState(0)
   const [speed, setSpeed] = useState(1)
@@ -52,6 +51,7 @@ function HomeInner() {
   const [showSceneEditor, setShowSceneEditor] = useState(false)
   const [transitionDuration, setTransitionDuration] = useState(0.03)
   const [showKeyboardHelp, setShowKeyboardHelp] = useState(false)
+  const [seekNonce, setSeekNonce] = useState(0)
   const { messages: toasts, addToast, dismissToast } = useToast()
 
   const mapViewRef = useRef<MapViewHandle>(null)
@@ -82,11 +82,13 @@ function HomeInner() {
 
       if (next >= 1) {
         setProgress(1)
+        progressRef.current = 1
         setIsPlaying(false)
         return
       }
 
       setProgress(next)
+      progressRef.current = next
       animFrameRef.current = requestAnimationFrame(animate)
     }
 
@@ -111,11 +113,21 @@ function HomeInner() {
           break
         case 'ArrowRight':
           e.preventDefault()
-          setProgress(p => Math.min(1, p + 0.02))
+          {
+            const next = Math.min(1, progressRef.current + 0.02)
+            setProgress(next)
+            progressRef.current = next
+            setSeekNonce(n => n + 1)
+          }
           break
         case 'ArrowLeft':
           e.preventDefault()
-          setProgress(p => Math.max(0, p - 0.02))
+          {
+            const next = Math.max(0, progressRef.current - 0.02)
+            setProgress(next)
+            progressRef.current = next
+            setSeekNonce(n => n + 1)
+          }
           break
         case 'f':
         case 'F':
@@ -155,20 +167,23 @@ function HomeInner() {
     setFullTrack(t)
     setTrack(t)
     setProgress(0)
+    progressRef.current = 0
     setIsPlaying(false)
   }, [])
 
   const handleJourneyComplete = useCallback((t: Track) => {
     setFullTrack(t)
     setTrack(t)
     setProgress(0)
+    progressRef.current = 0
     setIsPlaying(false)
     setIsCreatingJourney(false)
   }, [])
 
   const handleTogglePlay = useCallback(() => {
     if (progress >= 1) {
       setProgress(0)
+      progressRef.current = 0
       setIsPlaying(true)
     } else {
       setIsPlaying((p) => !p)
@@ -178,6 +193,7 @@ function HomeInner() {
   const handleSeek = useCallback((p: number) => {
     setProgress(p)
     progressRef.current = p
+    setSeekNonce(n => n + 1)
   }, [])
 
   const handleExport = useCallback(async (config: ExportConfig) => {
@@ -206,7 +222,7 @@ function HomeInner() {
 
       // Wait for resize to settle then wait for map idle
       await new Promise(r => setTimeout(r, 200))
-      await mapHandle.waitForIdle()
+      await mapHandle.waitForIdle(abortController.signal)
 
       const result = await exportVideo(
         canvas,
@@ -219,7 +235,7 @@ function HomeInner() {
           progressRef.current = progress
         },
         (p) => setExportProgress(p),
-        () => mapHandle.waitForIdle(),
+        () => mapHandle.waitForIdle(abortController.signal),
         abortController.signal,
       )
 
@@ -276,6 +292,7 @@ function HomeInner() {
       setFullTrack(parsed)
       setTrack(parsed)
       setProgress(0)
+      progressRef.current = 0
       setIsPlaying(false)
     } catch (err) {
       console.error('Sample load failed:', {
@@ -314,6 +331,8 @@ function HomeInner() {
         progress={progress}
         mapStyleKey={mapStyleKey}
         followCamera={followCamera}
+        suspendAutoCamera={isExporting}
+        seekNonce={seekNonce}
         scenes={scenes}
         duration={duration}
         transitionDuration={transitionDuration}
@@ -348,7 +367,7 @@ function HomeInner() {
       )}
 
       {/* Theme toggle + Language picker */}
-      <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+      <div data-testid="global-toolbar" className="absolute top-4 right-4 z-10 flex items-center gap-2">
         <select
           value={locale}
           onChange={e => setLocale(e.target.value as Locale)}
@@ -430,7 +449,7 @@ function HomeInner() {
 
       {/* Top-right toolbar */}
       {track && (
-        <div className="absolute top-4 right-16 z-10 flex flex-wrap gap-2 max-w-[calc(100vw-5rem)]">
+        <div data-testid="track-toolbar" className="absolute top-4 right-16 z-10 flex flex-wrap gap-2 max-w-[calc(100vw-5rem)]">
           <button
             onClick={() => {
               setTrack(null)

src/components/ExportPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { X, ChevronDown, Check, Share2, RotateCcw } from 'lucide-react'
-import type { VideoCodec, ExportConfig, ResolutionPreset } from '@/types'
+import type { VideoCodec, ExportConfig } from '@/types'
 import { CODEC_LABELS, RESOLUTION_PRESETS } from '@/types'
 import { isCodecSupported } from '@/lib/videoEncoder'
 import { useLocale } from '@/lib/i18n'
@@ -261,7 +261,7 @@ export default function ExportPanel({
                     <select value={codec}
                       onChange={e => setCodec(e.target.value as VideoCodec)}
                       className="vitro-select w-full px-3 py-2 text-sm">
-                      {(Object.entries(CODEC_LABELS) as [VideoCodec, string][]).map(([k, v]) => (
+                      {(Object.entries(CODEC_LABELS) as [VideoCodec, string][]).map(([k]) => (
                         <option key={k} value={k} disabled={codecSupport[k] === false}>
                           {t(`codec.${k}Desc` as 'codec.h264Desc' | 'codec.h265Desc' | 'codec.av1Desc')}{codecSupport[k] === false ? ` ${t('export.unsupported')}` : ''}
                         </option>
@@ -284,7 +284,6 @@ export default function ExportPanel({
                     <div>
                       <label className="vitro-label block text-sm font-medium mb-1">{t('export.mbps')}</label>
                       <input type="number" min={1} max={50} value={bitrate}
-                        onChange={e => setQuality('custom')}
                         className="vitro-input w-full px-3 py-2 text-sm"
                         readOnly
                       />

src/components/FileUpload.tsx

@@ -14,6 +14,9 @@ interface FileUploadProps {
   onCreateJourney?: () => void
 }
 
+const MAX_FILE_SIZE = 500 * 1024 * 1024
+const WARN_FILE_SIZE = 100 * 1024 * 1024
+
 export default function FileUpload({ onTrackLoaded, hasTrack, onShowGoogleGuide, onLoadSample, onCreateJourney }: FileUploadProps) {
   const { t } = useLocale()
   const [isDragging, setIsDragging] = useState(false)
@@ -26,9 +29,6 @@ export default function FileUpload({ onTrackLoaded, hasTrack, onShowGoogleGuide,
     return /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
   }, [])
 
-  const MAX_FILE_SIZE = 500 * 1024 * 1024 // 500 MB
-  const WARN_FILE_SIZE = 100 * 1024 * 1024 // 100 MB
-
   const handleFile = useCallback(async (file: File) => {
     setError(null)
     setLoading(true)