From 8bbb41a3cb7679d570fde3032e5bdc72b23d029b Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 5 Aug 2025 06:41:59 +0200 Subject: fix: ts error causing audio waveform signal issue --- apps/web/src/hooks/use-aspect-ratio.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'apps/web/src/hooks') diff --git a/apps/web/src/hooks/use-aspect-ratio.ts b/apps/web/src/hooks/use-aspect-ratio.ts index e3e85141..4bc7cfd5 100644 --- a/apps/web/src/hooks/use-aspect-ratio.ts +++ b/apps/web/src/hooks/use-aspect-ratio.ts @@ -1,12 +1,17 @@ import { useEditorStore } from "@/stores/editor-store"; import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store"; import { useTimelineStore } from "@/stores/timeline-store"; +import { useProjectStore } from "@/stores/project-store"; export function useAspectRatio() { - const { canvasSize, canvasMode, canvasPresets } = useEditorStore(); + const { canvasPresets } = useEditorStore(); + const { activeProject } = useProjectStore(); const { mediaItems } = useMediaStore(); const { tracks } = useTimelineStore(); + const canvasSize = activeProject?.canvasSize || { width: 1920, height: 1080 }; + const canvasMode = activeProject?.canvasMode || "preset"; + // Find the current preset based on canvas size const currentPreset = canvasPresets.find( (preset) => -- cgit v1.3.1 From 65b04f5759b04ad29d299a12fe7ee615daef7e70 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 5 Aug 2025 07:11:03 +0200 Subject: ts error --- apps/web/src/hooks/use-aspect-ratio.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'apps/web/src/hooks') diff --git a/apps/web/src/hooks/use-aspect-ratio.ts b/apps/web/src/hooks/use-aspect-ratio.ts index e3e85141..35d2cec4 100644 --- a/apps/web/src/hooks/use-aspect-ratio.ts +++ b/apps/web/src/hooks/use-aspect-ratio.ts @@ -1,9 +1,13 @@ import { useEditorStore } from "@/stores/editor-store"; import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store"; import { useTimelineStore } from "@/stores/timeline-store"; +import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store"; export function useAspectRatio() { - const { canvasSize, canvasMode, canvasPresets } = useEditorStore(); + const { canvasPresets } = useEditorStore(); + const { activeProject } = useProjectStore(); + const canvasSize = activeProject?.canvasSize || DEFAULT_CANVAS_SIZE; + const canvasMode = activeProject?.canvasMode || "preset"; const { mediaItems } = useMediaStore(); const { tracks } = useTimelineStore(); -- cgit v1.3.1 From 4f6d0142866653507fabf34644a238be44951b30 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 5 Aug 2025 14:07:05 +0200 Subject: fix: remaining timeline issues with targeting wrong radix ui scroll element --- apps/web/src/components/editor/snap-indicator.tsx | 4 +--- .../src/components/editor/timeline/timeline-playhead.tsx | 8 ++------ apps/web/src/hooks/use-timeline-playhead.ts | 16 ++++------------ 3 files changed, 7 insertions(+), 21 deletions(-) (limited to 'apps/web/src/hooks') diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx index 0a51e107..ac884b71 100644 --- a/apps/web/src/components/editor/snap-indicator.tsx +++ b/apps/web/src/components/editor/snap-indicator.tsx @@ -28,9 +28,7 @@ export function SnapIndicator({ // Track scroll position to lock snap indicator to frame useEffect(() => { - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; + const tracksViewport = tracksScrollRef.current; if (!tracksViewport) return; diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx index 695843a4..e84512ce 100644 --- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx +++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx @@ -51,9 +51,7 @@ export function TimelinePlayhead({ // Track scroll position to lock playhead to frame useEffect(() => { - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; + const tracksViewport = tracksScrollRef.current; if (!tracksViewport) return; @@ -86,9 +84,7 @@ export function TimelinePlayhead({ // Get the timeline content width and viewport width for right boundary const timelineContentWidth = duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; + const tracksViewport = tracksScrollRef.current; const viewportWidth = tracksViewport?.clientWidth || 1000; // Constrain playhead to never appear outside the timeline area diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts index ac59a8cd..08587228 100644 --- a/apps/web/src/hooks/use-timeline-playhead.ts +++ b/apps/web/src/hooks/use-timeline-playhead.ts @@ -119,12 +119,8 @@ export function useTimelinePlayhead({ // Auto-scroll function during dragging const performAutoScroll = useCallback(() => { - const rulerViewport = rulerScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; + const rulerViewport = rulerScrollRef.current; + const tracksViewport = tracksScrollRef.current; if (!rulerViewport || !tracksViewport || !isScrubbing) return; @@ -240,12 +236,8 @@ export function useTimelinePlayhead({ // Only auto-scroll during playback, not during manual interactions if (!isPlaying || isScrubbing) return; - const rulerViewport = rulerScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; - const tracksViewport = tracksScrollRef.current?.querySelector( - "[data-radix-scroll-area-viewport]" - ) as HTMLElement; + const rulerViewport = rulerScrollRef.current; + const tracksViewport = tracksScrollRef.current; if (!rulerViewport || !tracksViewport) return; const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50 -- cgit v1.3.1