{
+ const effectiveStart = Math.max(0, sourceStart + trimStart)
+ const effectiveEnd = Math.min(
+ sourceDuration,
+ Math.max(
+ effectiveStart,
+ sourceEnd ?? effectiveStart + (visibleClipWidth / Math.max(1, pixelsPerSecond)) * speed,
+ ),
+ )
+ const visibleStartX = visibleClipWidth * Math.max(0, Math.min(1, visibleStartRatio))
+ const visibleEndX = visibleClipWidth * Math.max(0, Math.min(1, visibleEndRatio))
+ const startOffset = (visibleStartX / Math.max(1, pixelsPerSecond)) * speed
+ const endOffset = (visibleEndX / Math.max(1, pixelsPerSecond)) * speed
+ const sourceA = isReversed ? effectiveEnd - endOffset : effectiveStart + startOffset
+ const sourceB = isReversed ? effectiveEnd - startOffset : effectiveStart + endOffset
+ const padSeconds = Math.max(2, ((visibleEndX - visibleStartX) / Math.max(1, pixelsPerSecond)) * 0.25)
+
+ return {
+ start: Math.max(0, Math.min(sourceA, sourceB) - padSeconds),
+ end: Math.min(sourceDuration, Math.max(sourceA, sourceB) + padSeconds),
+ }
+ }, [
+ sourceStart,
+ trimStart,
+ sourceDuration,
+ sourceEnd,
+ visibleClipWidth,
+ pixelsPerSecond,
+ speed,
+ visibleStartRatio,
+ visibleEndRatio,
+ isReversed,
+ ])
useEffect(() => {
conformStartedRef.current = false
@@ -141,6 +175,7 @@ export const ClipWaveform = memo(function ClipWaveform({
const loadBlobUrl = async () => {
try {
// First check if audio codec is supported
+ const { mediaLibraryService } = await importMediaLibraryService()
const media = await mediaLibraryService.getMedia(mediaId)
if (!mounted) return
@@ -197,6 +232,8 @@ export const ClipWaveform = memo(function ClipWaveform({
enabled: audioCodecSupported,
deferDurationSec: sourceDuration,
pixelsPerSecond,
+ visibleSourceStartSec: visibleSourceWindow.start,
+ visibleSourceEndSec: visibleSourceWindow.end,
})
const normalizationPeak = maxPeak > 0 ? maxPeak : 1
const peakSampleCount = useMemo(
@@ -264,19 +301,15 @@ export const ClipWaveform = memo(function ClipWaveform({
const windowStart = Math.max(0, peakIndex - halfWindow)
const windowEnd = Math.min(peakSampleCount, peakIndex + halfWindow + 1)
- let max1 = 0
- let max2 = 0
+ let windowPeak = 0
let windowSum = 0
let sampleCount = 0
for (let i = windowStart; i < windowEnd; i++) {
const value = stereo
? Math.max(peaks[i * 2] ?? 0, peaks[i * 2 + 1] ?? 0)
: (peaks[i] ?? 0)
- if (value >= max1) {
- max2 = max1
- max1 = value
- } else if (value > max2) {
- max2 = value
+ if (value > windowPeak) {
+ windowPeak = value
}
windowSum += value
sampleCount++
@@ -286,13 +319,9 @@ export const ClipWaveform = memo(function ClipWaveform({
continue
}
- const normalizedMax1 = Math.min(1, max1 / normalizationPeak)
- const normalizedMax2 = Math.min(1, max2 / normalizationPeak)
- const normalizedMean = Math.min(1, windowSum / sampleCount / normalizationPeak)
- const needle = Math.max(0, normalizedMax1 - normalizedMax2)
- const peakValue = Math.min(1, normalizedMean * 0.38 + normalizedMax2 * 0.34 + needle * 2.35)
- const amp = peakValue <= 0.001 ? 0 : Math.pow(peakValue, 1.05)
- amplitudes[x] = amp * maxWaveHeight
+ amplitudes[x] =
+ computeWaveformAmplitude(windowPeak, windowSum, sampleCount, normalizationPeak) *
+ maxWaveHeight
}
for (let x = 0; x < amplitudeCount; x++) {
@@ -373,8 +402,6 @@ export const ClipWaveform = memo(function ClipWaveform({
return (
- {/* Show shimmer skeleton behind canvas while loading progressively */}
- {isLoading && }
(null)
const queuedZoomScrollLeftRef = useRef(null)
const zoomApplyRafRef = useRef(null)
+ // Latest known scrollLeft, kept fresh by the scroll handler. Declared here so
+ // scheduleViewportSync can hand it to syncViewportFromContainer instead of
+ // reading container.scrollLeft back (a forced reflow after a width write).
+ const scrollLeftRef = useRef(0)
// Cached viewport box dimensions. clientWidth/clientHeight are invariant under
// scroll and horizontal zoom (only the *content* width changes), so reading
@@ -836,26 +840,42 @@ export const TimelineContent = memo(function TimelineContent({
// refreshes this cache; we fall back to a live read until it has measured once.
const viewportDimsRef = useRef<{ width: number; height: number } | null>(null)
- const syncViewportFromContainer = useCallback(() => {
+ const syncViewportFromContainer = useCallback((knownScrollLeft?: number, immediate = false) => {
const container = containerRef.current
if (!container) return
const dims = viewportDimsRef.current
const viewportWidth = dims?.width ?? container.clientWidth
const viewportHeight =
dims?.height ?? tracksContainerRef.current?.clientHeight ?? container.clientHeight
- useTimelineViewportStore.getState().setViewport({
- scrollLeft: container.scrollLeft,
- scrollTop: container.scrollTop,
+ // When the caller just wrote scrollLeft it passes that value so we can skip
+ // the read-back. Reading scrollLeft/scrollTop after a write forces a
+ // synchronous reflow — negligible normally, but ~16ms/frame at extreme zoom
+ // widths (>1M px). The main scroll container is overflow-y-hidden, so its
+ // scrollTop is always 0 in the known-value path.
+ const scrollLeft = knownScrollLeft ?? container.scrollLeft
+ const scrollTop = knownScrollLeft !== undefined ? 0 : container.scrollTop
+ const viewport = {
+ scrollLeft,
+ scrollTop,
viewportWidth,
viewportHeight,
- })
+ }
+ const viewportStore = useTimelineViewportStore.getState()
+ if (immediate) {
+ viewportStore.setViewportImmediate(viewport)
+ } else {
+ viewportStore.setViewport(viewport)
+ }
}, [])
const scheduleViewportSync = useCallback(() => {
if (viewportSyncRafRef.current !== null) return
viewportSyncRafRef.current = requestAnimationFrame(() => {
viewportSyncRafRef.current = null
- withPerfMeasure('tl.raf.viewportSync', syncViewportFromContainer)
+ // Pass the tracked scrollLeft (handleScroll updates it before scheduling)
+ // so the sync skips a container.scrollLeft read-back, which would force a
+ // synchronous reflow when a zoom width write landed the same frame.
+ withPerfMeasure('tl.raf.viewportSync', () => syncViewportFromContainer(scrollLeftRef.current))
})
}, [syncViewportFromContainer])
@@ -931,7 +951,6 @@ export const TimelineContent = memo(function TimelineContent({
// Track scroll position with coalesced updates for viewport culling
// Throttle at 50ms to match zoom throttle rate - prevents width jitter during zoom+scroll
- const scrollLeftRef = useRef(0)
const scrollUpdateTimeoutRef = useRef | null>(null)
const SCROLL_THROTTLE_MS = 50 // Match zoom throttle for synchronized updates
const setScrollPosition = useTimelineStore((s) => s.setScrollPosition)
@@ -987,10 +1006,15 @@ export const TimelineContent = memo(function TimelineContent({
// Apply pending scroll AFTER render when DOM has updated width
// This ensures zoom anchor works correctly even when timeline extends beyond content
useLayoutEffect(() => {
- if (pendingScrollRef.current !== null && containerRef.current) {
- containerRef.current.scrollLeft = pendingScrollRef.current
+ const container = containerRef.current
+ if (pendingScrollRef.current !== null && container) {
+ const next = pendingScrollRef.current
+ container.scrollLeft = next
pendingScrollRef.current = null
- syncViewportFromContainer()
+ // Keep scrollLeftRef fresh so the clamp effect below can decide without a
+ // forced scrollLeft read, and pass the known value to skip the read-back.
+ scrollLeftRef.current = next
+ syncViewportFromContainer(next)
}
})
@@ -1324,8 +1348,19 @@ export const TimelineContent = memo(function TimelineContent({
return
}
- const maxScrollLeft = Math.max(0, timelineWidth - container.clientWidth)
- if (container.scrollLeft <= maxScrollLeft + 1) {
+ // Use the cached viewport width and tracked scrollLeft instead of reading
+ // container.clientWidth / container.scrollLeft. Both are layout reads that,
+ // after this render's width write, force a synchronous reflow every frame —
+ // ~16ms at extreme zoom widths. clientWidth is invariant under horizontal
+ // zoom, and scrollLeftRef is kept fresh by the scroll handler and the
+ // pending-scroll effect above. Fall back to a live read only before the
+ // ResizeObserver has measured (mount).
+ const cachedWidth = viewportDimsRef.current?.width
+ const viewportWidthForClamp = cachedWidth ?? container.clientWidth
+ const maxScrollLeft = Math.max(0, timelineWidth - viewportWidthForClamp)
+ const currentScrollLeft =
+ cachedWidth !== undefined ? scrollLeftRef.current : container.scrollLeft
+ if (currentScrollLeft <= maxScrollLeft + 1) {
return
}
@@ -1333,7 +1368,7 @@ export const TimelineContent = memo(function TimelineContent({
// without subscribing broad UI surfaces to item-array churn.
container.scrollLeft = maxScrollLeft
scrollLeftRef.current = maxScrollLeft
- syncViewportFromContainer()
+ syncViewportFromContainer(maxScrollLeft)
}, [timelineWidth, syncViewportFromContainer])
// NOTE: itemsByTrack removed - TimelineTrack now fetches its own items
@@ -1480,7 +1515,8 @@ export const TimelineContent = memo(function TimelineContent({
scrollLeftRef.current = 0
useZoomStore.getState().setZoomLevelSynchronized(newZoomLevel)
container.scrollLeft = 0
- }, [clearQueuedZoomApply])
+ syncViewportFromContainer(0, true)
+ }, [clearQueuedZoomApply, syncViewportFromContainer])
const handleZoomTo100 = useCallback(
(centerFrame: number) => {
diff --git a/src/features/timeline/components/timeline-in-out-markers.tsx b/src/features/timeline/components/timeline-in-out-markers.tsx
index 5622a5749..19e331812 100644
--- a/src/features/timeline/components/timeline-in-out-markers.tsx
+++ b/src/features/timeline/components/timeline-in-out-markers.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useRef, useEffect, memo, forwardRef } from 'react
import { useTimelineStore } from '../stores/timeline-store'
import { useTimelineZoomContext } from '../contexts/timeline-zoom-context'
+import { usePlaybackStore } from '@/shared/state/playback'
const IO_LANE_HEIGHT = 14
const IO_HIT_AREA_HEIGHT = IO_LANE_HEIGHT + 6
@@ -48,12 +49,19 @@ export const TimelineInOutMarkers = memo(function TimelineInOutMarkers() {
const onMove = (ev: MouseEvent) => {
const rect = container.getBoundingClientRect()
const x = ev.clientX - rect.left
- setter.current(Math.max(0, pixelsToFrameRef.current(x)))
+ const frame = Math.max(0, pixelsToFrameRef.current(x))
+ setter.current(frame)
+ // Skim the preview to the boundary frame. Out is exclusive, so show the
+ // last included frame (out - 1) rather than the frame just past it.
+ const previewFrame =
+ handle === 'out' ? Math.max(0, Math.round(frame) - 1) : Math.round(frame)
+ usePlaybackStore.getState().setPreviewFrame(previewFrame)
}
const cleanup = () => {
document.removeEventListener('mousemove', onMove)
document.removeEventListener('mouseup', cleanup)
document.body.style.cursor = prevCursor
+ usePlaybackStore.getState().setPreviewFrame(null)
dragCleanupRef.current = null
}
document.addEventListener('mousemove', onMove)
diff --git a/src/features/timeline/components/timeline-item/clip-content.test.tsx b/src/features/timeline/components/timeline-item/clip-content.test.tsx
index d78b60e46..2195c90bc 100644
--- a/src/features/timeline/components/timeline-item/clip-content.test.tsx
+++ b/src/features/timeline/components/timeline-item/clip-content.test.tsx
@@ -45,6 +45,7 @@ describe('ClipContent', () => {
})
useSettingsStore.setState({
showFilmstrips: false,
+ enableFilmstripExtraction: false,
showWaveforms: false,
})
useMediaLibraryStore.setState({
@@ -105,7 +106,7 @@ describe('ClipContent', () => {
expect(screen.getByText('Linked clip')).toBeInTheDocument()
})
- it('uses settled zoom for filmstrip content by default', () => {
+ it('uses settled zoom for filmstrip content by default', async () => {
// Not interacting: content renders (mid-gesture deferral is covered by its
// own test below). pixelsPerSecond (180) and contentPixelsPerSecond (100)
// are set apart purely to verify which one the filmstrip reads.
@@ -118,6 +119,7 @@ describe('ClipContent', () => {
})
useSettingsStore.setState({
showFilmstrips: true,
+ enableFilmstripExtraction: true,
showWaveforms: false,
})
@@ -137,10 +139,10 @@ describe('ClipContent', () => {
// Default (no preferImmediateRendering): filmstrip tracks the SETTLED zoom
// (contentPixelsPerSecond = 100), not the live in-gesture pps (180). This is
// what keeps the filmstrip tile grid from re-rendering on every zoom frame.
- expect(screen.getByTestId('clip-filmstrip')).toHaveAttribute('data-pps', '100')
+ expect(await screen.findByTestId('clip-filmstrip')).toHaveAttribute('data-pps', '100')
})
- it('can opt clip internals into live zoom for immediate edit previews', () => {
+ it('can opt clip internals into live zoom for immediate edit previews', async () => {
useZoomStore.setState({
level: 1.8,
pixelsPerSecond: 180,
@@ -174,7 +176,7 @@ describe('ClipContent', () => {
/>,
)
- expect(screen.getByTestId('clip-waveform')).toHaveAttribute('data-pps', '180')
+ expect(await screen.findByTestId('clip-waveform')).toHaveAttribute('data-pps', '180')
})
it('defers filmstrip content for clips that mount during an active zoom gesture', () => {
@@ -188,7 +190,11 @@ describe('ClipContent', () => {
contentPixelsPerSecond: 100,
isZoomInteracting: true,
})
- useSettingsStore.setState({ showFilmstrips: true, showWaveforms: false })
+ useSettingsStore.setState({
+ showFilmstrips: true,
+ enableFilmstripExtraction: true,
+ showWaveforms: false,
+ })
const item: TimelineItem = {
id: 'video-defer',
diff --git a/src/features/timeline/components/timeline-item/clip-content.tsx b/src/features/timeline/components/timeline-item/clip-content.tsx
index 78a2bb1df..f237dd0eb 100644
--- a/src/features/timeline/components/timeline-item/clip-content.tsx
+++ b/src/features/timeline/components/timeline-item/clip-content.tsx
@@ -1,11 +1,7 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { Suspense, lazy, memo, useCallback, useEffect, useMemo, useState } from 'react'
import { Link2 } from 'lucide-react'
import { perfMarkRender } from '@/shared/logging/perf-marks'
import type { TimelineItem } from '@/types/timeline'
-import { ClipFilmstrip } from '../clip-filmstrip'
-import { ImageFilmstrip } from '../clip-filmstrip/image-filmstrip'
-import { ClipWaveform } from '../clip-waveform'
-import { CompoundClipWaveform } from '../clip-waveform/compound-clip-waveform'
import { useSettingsStore } from '@/features/timeline/deps/settings'
import { useMediaLibraryStore } from '@/features/timeline/deps/media-library-store'
import { useCompositionsStore } from '../../stores/compositions-store'
@@ -25,6 +21,26 @@ import { isGifUrl, isWebpUrl } from '@/shared/utils/media-utils'
const EMPTY_COMPOSITION_LOOKUP: Record = {}
const FILMSTRIP_MIN_WIDTH_PX = 5
+const LazyClipFilmstrip = lazy(() =>
+ import('../clip-filmstrip').then((module) => ({
+ default: module.ClipFilmstrip,
+ })),
+)
+const LazyImageFilmstrip = lazy(() =>
+ import('../clip-filmstrip/image-filmstrip').then((module) => ({
+ default: module.ImageFilmstrip,
+ })),
+)
+const LazyClipWaveform = lazy(() =>
+ import('../clip-waveform').then((module) => ({
+ default: module.ClipWaveform,
+ })),
+)
+const LazyCompoundClipWaveform = lazy(() =>
+ import('../clip-waveform/compound-clip-waveform').then((module) => ({
+ default: module.CompoundClipWaveform,
+ })),
+)
interface CompositionFilmstripSegmentProps {
segment: CompositionVisualSegment
@@ -101,23 +117,25 @@ function CompositionFilmstripSegment({
width: `${widthFraction * 100}%`,
}}
>
-
+
+
+
)
}
@@ -179,6 +197,8 @@ export const ClipContent = memo(function ClipContent({
)
const showWaveforms = useSettingsStore((s) => s.showWaveforms)
const showFilmstrips = useSettingsStore((s) => s.showFilmstrips)
+ const enableFilmstripExtraction = useSettingsStore((s) => s.enableFilmstripExtraction)
+ const showVideoFilmstrips = showFilmstrips && enableFilmstripExtraction
// Defer the heavy filmstrip/waveform mount for clips that first appear DURING
// an active zoom gesture. Zooming out brings many clips into the viewport at
@@ -400,24 +420,26 @@ export const ClipContent = memo(function ClipContent({
{/* Row 2: Filmstrip - flex-1 to fill remaining space */}
{showVisualContent && (
- {showFilmstrips && (
-
+ {showVideoFilmstrips && (
+
+
+
)}
)}
@@ -449,22 +471,24 @@ export const ClipContent = memo(function ClipContent({
transformOrigin: '50% 50%',
}}
>
-
+
+
+