External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: remaining timeline issues with targeting wrong radix ui scroll element

Browse Source
This commit is contained in:
Maze Winther
2025-08-05 14:07:05 +02:00
parent b83e6bedb7
commit 4f6d014286
3 changed files with 7 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/snap-indicator.tsx
+1 -3
View File
@@ -28,9 +28,7 @@ export function SnapIndicator({
// Track scroll position to lock snap indicator to frame // Track scroll position to lock snap indicator to frame
useEffect(() => { useEffect(() => {
const tracksViewport = tracksScrollRef.current?.querySelector( const tracksViewport = tracksScrollRef.current;
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
if (!tracksViewport) return; if (!tracksViewport) return;
apps/web/src/components/editor/timeline/timeline-playhead.tsx
+2 -6
View File
@@ -51,9 +51,7 @@ export function TimelinePlayhead({
// Track scroll position to lock playhead to frame // Track scroll position to lock playhead to frame
useEffect(() => { useEffect(() => {
const tracksViewport = tracksScrollRef.current?.querySelector( const tracksViewport = tracksScrollRef.current;
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
if (!tracksViewport) return; if (!tracksViewport) return;
@@ -86,9 +84,7 @@ export function TimelinePlayhead({
// Get the timeline content width and viewport width for right boundary // Get the timeline content width and viewport width for right boundary
const timelineContentWidth = const timelineContentWidth =
duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const tracksViewport = tracksScrollRef.current?.querySelector( const tracksViewport = tracksScrollRef.current;
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
const viewportWidth = tracksViewport?.clientWidth || 1000; const viewportWidth = tracksViewport?.clientWidth || 1000;
// Constrain playhead to never appear outside the timeline area // Constrain playhead to never appear outside the timeline area
apps/web/src/hooks/use-timeline-playhead.ts
+4 -12
View File
@@ -119,12 +119,8 @@ export function useTimelinePlayhead({
// Auto-scroll function during dragging // Auto-scroll function during dragging
const performAutoScroll = useCallback(() => { const performAutoScroll = useCallback(() => {
const rulerViewport = rulerScrollRef.current?.querySelector( const rulerViewport = rulerScrollRef.current;
"[data-radix-scroll-area-viewport]" const tracksViewport = tracksScrollRef.current;
) as HTMLElement;
const tracksViewport = tracksScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
if (!rulerViewport || !tracksViewport || !isScrubbing) return; if (!rulerViewport || !tracksViewport || !isScrubbing) return;
@@ -240,12 +236,8 @@ export function useTimelinePlayhead({
// Only auto-scroll during playback, not during manual interactions // Only auto-scroll during playback, not during manual interactions
if (!isPlaying || isScrubbing) return; if (!isPlaying || isScrubbing) return;
const rulerViewport = rulerScrollRef.current?.querySelector( const rulerViewport = rulerScrollRef.current;
"[data-radix-scroll-area-viewport]" const tracksViewport = tracksScrollRef.current;
) as HTMLElement;
const tracksViewport = tracksScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
if (!rulerViewport || !tracksViewport) return; if (!rulerViewport || !tracksViewport) return;
const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50 const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50