RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: split constants by domain and isolate timeline panel from core

This commit is contained in:
Maze Winther 2026-04-01 19:27:49 +02:00
parent f4b9f40ab1
commit bd9ec023ee
72 changed files with 939 additions and 775 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/components/editor/panels/assets/views/assets.tsx
View File

@ -25,7 +25,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { DEFAULT_NEW_ELEMENT_DURATION_SECONDS } from "@/lib/timeline/creation";
import { useEditor } from "@/hooks/use-editor";
import { useFileUpload } from "@/hooks/use-file-upload";
import { invokeAction } from "@/lib/actions";
@ -257,7 +257,7 @@ function MediaAssetDraggable({
startTime: number;
}) => {
const duration =
asset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
asset.duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
const element = buildElementFromMedia({
mediaId: asset.id,
mediaType: asset.type,

14
apps/web/src/components/editor/panels/assets/views/settings/background.tsx
View File

@ -8,10 +8,10 @@ import {
SectionTitle,
} from "@/components/section";
import {
BLUR_INTENSITY_PRESETS,
DEFAULT_BLUR_INTENSITY,
DEFAULT_COLOR,
} from "@/constants/project-constants";
BACKGROUND_BLUR_INTENSITY_PRESETS,
DEFAULT_BACKGROUND_BLUR_INTENSITY,
DEFAULT_BACKGROUND_COLOR,
} from "@/lib/background/constants";
import { patternCraftGradients } from "@/data/colors/pattern-craft";
import { colors } from "@/data/colors/solid";
import { syntaxUIGradients } from "@/data/colors/syntax-ui";
@ -164,16 +164,16 @@ export function BackgroundContent() {
const currentBlurIntensity = isBlurBackground
? (activeProject.settings.background as { blurIntensity: number })
.blurIntensity
: DEFAULT_BLUR_INTENSITY;
: DEFAULT_BACKGROUND_BLUR_INTENSITY;
const currentBackgroundColor = isColorBackground
? (activeProject.settings.background as { color: string }).color
: DEFAULT_COLOR;
: DEFAULT_BACKGROUND_COLOR;
const canvasSize = activeProject.settings.canvasSize;
const blurPreviews = useMemo(
() =>
BLUR_INTENSITY_PRESETS.map((blur) => (
BACKGROUND_BLUR_INTENSITY_PRESETS.map((blur) => (
<BlurPreview
key={blur.value}
blur={blur}

2
apps/web/src/components/editor/panels/assets/views/settings/index.tsx
View File

@ -9,7 +9,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { FPS_PRESETS } from "@/constants/project-constants";
import { FPS_PRESETS } from "@/lib/fps/constants";
import { useEditor } from "@/hooks/use-editor";
import {
Section,

2
apps/web/src/components/editor/panels/preview/preview-viewport.tsx
View File

@ -17,7 +17,7 @@ import {
screenToCanvas,
} from "@/lib/preview/preview-coords";
import { clamp, isNearlyEqual } from "@/utils/math";
import { PREVIEW_ZOOM } from "@/constants/editor-constants";
import { PREVIEW_ZOOM } from "@/lib/preview/constants";
const MIDDLE_MOUSE_BUTTON = 1;
const IS_AT_FIT_EPSILON = 0.001;

2
apps/web/src/components/editor/panels/preview/toolbar.tsx
View File

@ -22,7 +22,7 @@ import {
SelectItem,
SelectSeparator,
} from "@/components/ui/select";
import { PREVIEW_ZOOM_PRESETS } from "@/constants/editor-constants";
import { PREVIEW_ZOOM_PRESETS } from "@/lib/preview/constants";
import { usePreviewViewport } from "./preview-viewport";
import { GridPopover } from "./guide-popover";
import { usePreviewStore } from "@/stores/preview-store";

2
apps/web/src/components/editor/panels/properties/tabs/speed-tab.tsx
View File

@ -11,7 +11,7 @@ import {
MAX_RETIME_RATE,
clampRetimeRate,
canMaintainPitch,
} from "@/constants/retime-constants";
} from "@/lib/retime/rate";
import type { AudioElement, VideoElement } from "@/lib/timeline";
import {
Section,

6
apps/web/src/components/editor/panels/properties/tabs/text-tab.tsx
View File

@ -18,13 +18,13 @@ import { Button } from "@/components/ui/button";
import { uppercase } from "@/utils/string";
import { clamp, formatNumberForDisplay } from "@/utils/math";
import { useEditor } from "@/hooks/use-editor";
import { DEFAULT_COLOR } from "@/constants/project-constants";
import {
CORNER_RADIUS_MAX,
DEFAULT_TEXT_COLOR,
CORNER_RADIUS_MIN,
MAX_FONT_SIZE,
MIN_FONT_SIZE,
} from "@/constants/text-constants";
} from "@/lib/text/constants";
import { usePropertyDraft } from "../hooks/use-property-draft";
import { useKeyframedColorProperty } from "../hooks/use-keyframed-color-property";
import { useKeyframedNumberProperty } from "../hooks/use-keyframed-number-property";
@ -343,7 +343,7 @@ function BackgroundSection({
trackId: string;
}) {
const editor = useEditor();
const lastSelectedColor = useRef(DEFAULT_COLOR);
const lastSelectedColor = useRef(DEFAULT_TEXT_COLOR);
const { localTime, isPlayheadWithinElementRange } = useElementPlayhead({
startTime: element.startTime,
duration: element.duration,

24
apps/web/src/components/editor/panels/timeline/bookmarks.tsx
View File

@ -6,10 +6,10 @@ import { useEditor } from "@/hooks/use-editor";
import type { BookmarkDragState } from "@/hooks/timeline/use-bookmark-drag";
import { BOOKMARK_TIME_EPSILON } from "@/lib/timeline/bookmarks";
import {
DEFAULT_BOOKMARK_COLOR,
TIMELINE_BOOKMARK_ROW_HEIGHT,
} from "@/constants/timeline-constants";
import { DEFAULT_FPS } from "@/constants/project-constants";
DEFAULT_TIMELINE_BOOKMARK_COLOR,
} from "./theme";
import { TIMELINE_BOOKMARK_ROW_HEIGHT_PX } from "./layout";
import { DEFAULT_FPS } from "@/lib/fps/constants";
import { getSnappedSeekTime } from "opencut-wasm";
import {
ArrowTurnBackwardIcon,
@ -83,12 +83,12 @@ export function TimelineBookmarksRow({
return (
<div
className="relative flex-1 overflow-hidden"
style={{ height: TIMELINE_BOOKMARK_ROW_HEIGHT }}
style={{ height: TIMELINE_BOOKMARK_ROW_HEIGHT_PX }}
>
<button
className="relative w-full cursor-default select-none border-0 bg-transparent p-0"
style={{
height: TIMELINE_BOOKMARK_ROW_HEIGHT,
height: TIMELINE_BOOKMARK_ROW_HEIGHT_PX,
width: `${dynamicTimelineWidth}px`,
}}
aria-label="Timeline ruler"
@ -153,7 +153,7 @@ function TimelineBookmark({
const left = timelineTimeToSnappedPixels({ time: displayTime, zoomLevel });
const bookmarkLeft = left - BOOKMARK_HALF_WIDTH_PX;
const rightHalfLeft = BOOKMARK_HALF_WIDTH_PX + Math.max(durationWidth, 0);
const iconColor = bookmark.color ?? DEFAULT_BOOKMARK_COLOR;
const iconColor = bookmark.color ?? DEFAULT_TIMELINE_BOOKMARK_COLOR;
const handleSeek = () => seekToBookmarkTime({ editor, time });
@ -298,12 +298,16 @@ function BookmarkPopoverContent({
}) {
const editor = useEditor();
const [draftColorHex, setDraftColorHex] = useState(
(bookmark.color ?? DEFAULT_BOOKMARK_COLOR).replace("#", "").toUpperCase(),
(bookmark.color ?? DEFAULT_TIMELINE_BOOKMARK_COLOR)
.replace("#", "")
.toUpperCase(),
);
useEffect(() => {
setDraftColorHex(
(bookmark.color ?? DEFAULT_BOOKMARK_COLOR).replace("#", "").toUpperCase(),
(bookmark.color ?? DEFAULT_TIMELINE_BOOKMARK_COLOR)
.replace("#", "")
.toUpperCase(),
);
}, [bookmark.color]);
@ -357,7 +361,7 @@ function BookmarkPopoverContent({
/>
{bookmark.color &&
bookmark.color.replace(/^#/, "").toUpperCase() !==
DEFAULT_BOOKMARK_COLOR.replace(/^#/, "").toUpperCase() && (
DEFAULT_TIMELINE_BOOKMARK_COLOR.replace(/^#/, "").toUpperCase() && (
<Button
type="button"
variant="text"

4
apps/web/src/components/editor/panels/timeline/drag-line.tsx
View File

@ -1,6 +1,6 @@
import { getDropLineY } from "@/lib/timeline/drop-utils";
import { getDropLineY } from "./drop-target";
import type { TimelineTrack, DropTarget } from "@/lib/timeline";
import { TIMELINE_LAYERS } from "@/constants/timeline-constants";
import { TIMELINE_LAYERS } from "./layers";
interface DragLineProps {
dropTarget: DropTarget | null;

508
apps/web/src/lib/timeline/drop-utils.ts → apps/web/src/components/editor/panels/timeline/drop-target.ts
View File

@ -1,257 +1,251 @@
import type {
TimelineTrack,
TimelineElement,
} from "@/lib/timeline";
import { TRACK_CONFIG, TRACK_GAP } from "@/constants/timeline-constants";
import type { ComputeDropTargetParams, DropTarget } from "@/lib/timeline";
import { resolveTrackPlacement } from "@/lib/timeline/placement";
function findElementAtPosition({
mouseX,
tracks,
trackIndex,
targetElementTypes,
pixelsPerSecond,
zoomLevel,
}: {
mouseX: number;
tracks: TimelineTrack[];
trackIndex: number;
targetElementTypes: string[];
pixelsPerSecond: number;
zoomLevel: number;
}): { elementId: string; trackId: string } | null {
const time = mouseX / (pixelsPerSecond * zoomLevel);
const track = tracks[trackIndex];
if (!track || !("elements" in track)) return null;
const hit = track.elements.find(
(element: TimelineElement) =>
targetElementTypes.includes(element.type) &&
element.startTime <= time &&
time < element.startTime + element.duration,
);
if (!hit) return null;
return { elementId: hit.id, trackId: track.id };
}
function getTrackAtY({
mouseY,
tracks,
verticalDragDirection,
}: {
mouseY: number;
tracks: TimelineTrack[];
verticalDragDirection?: "up" | "down" | null;
}): { trackIndex: number; relativeY: number } | null {
let cumulativeHeight = 0;
for (let i = 0; i < tracks.length; i++) {
const trackHeight = TRACK_CONFIG[tracks[i].type].height;
const trackTop = cumulativeHeight;
const trackBottom = trackTop + trackHeight;
if (mouseY >= trackTop && mouseY < trackBottom) {
return {
trackIndex: i,
relativeY: mouseY - trackTop,
};
}
if (i < tracks.length - 1 && verticalDragDirection) {
const gapTop = trackBottom;
const gapBottom = gapTop + TRACK_GAP;
if (mouseY >= gapTop && mouseY < gapBottom) {
const isDraggingUp = verticalDragDirection === "up";
return {
trackIndex: isDraggingUp ? i : i + 1,
relativeY: isDraggingUp ? trackHeight - 1 : 0,
};
}
}
cumulativeHeight += trackHeight + TRACK_GAP;
}
return null;
}
const EMPTY_TARGET_ELEMENT = null;
function fallbackNewTrackDropTarget({
xPosition,
}: {
xPosition: number;
}): DropTarget {
return {
trackIndex: 0,
isNewTrack: true,
insertPosition: null,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
export function computeDropTarget({
elementType,
mouseX,
mouseY,
tracks,
playheadTime,
isExternalDrop,
elementDuration,
pixelsPerSecond,
zoomLevel,
verticalDragDirection,
startTimeOverride,
excludeElementId,
targetElementTypes,
}: ComputeDropTargetParams): DropTarget {
const xPosition =
typeof startTimeOverride === "number"
? startTimeOverride
: isExternalDrop
? playheadTime
: Math.max(0, mouseX / (pixelsPerSecond * zoomLevel));
if (tracks.length === 0) {
const placementResult = resolveTrackPlacement({
tracks,
elementType,
timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
strategy: {
type: "preferIndex",
trackIndex: 0,
hoverDirection: "below",
createNewTrackOnly: true,
},
});
const emptyTimelineResult =
placementResult?.kind === "newTrack" ? placementResult : null;
if (!emptyTimelineResult) {
return fallbackNewTrackDropTarget({ xPosition });
}
return {
trackIndex: emptyTimelineResult.insertIndex,
isNewTrack: true,
insertPosition: emptyTimelineResult.insertPosition,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
const trackAtMouse = getTrackAtY({ mouseY, tracks, verticalDragDirection });
if (!trackAtMouse) {
const isAboveAllTracks = mouseY < 0;
const placementResult = resolveTrackPlacement({
tracks,
elementType,
timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
strategy: {
type: "preferIndex",
trackIndex: isAboveAllTracks ? 0 : tracks.length - 1,
hoverDirection: isAboveAllTracks ? "above" : "below",
createNewTrackOnly: true,
},
});
const outOfBoundsResult =
placementResult?.kind === "newTrack" ? placementResult : null;
if (!outOfBoundsResult) {
return fallbackNewTrackDropTarget({ xPosition });
}
return {
trackIndex: outOfBoundsResult.insertIndex,
isNewTrack: true,
insertPosition: outOfBoundsResult.insertPosition,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
const { trackIndex, relativeY } = trackAtMouse;
const track = tracks[trackIndex];
if (
targetElementTypes &&
targetElementTypes.length > 0
) {
const targetElement = findElementAtPosition({
mouseX,
tracks,
trackIndex,
targetElementTypes,
pixelsPerSecond,
zoomLevel,
});
if (targetElement) {
return {
trackIndex,
isNewTrack: false,
insertPosition: null,
xPosition,
targetElement,
};
}
}
const trackHeight = TRACK_CONFIG[track.type].height;
const placementResult = resolveTrackPlacement({
tracks,
elementType,
timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
strategy: {
type: "preferIndex",
trackIndex,
hoverDirection: relativeY < trackHeight / 2 ? "above" : "below",
verticalDragDirection,
},
});
if (!placementResult) {
return fallbackNewTrackDropTarget({ xPosition });
}
if (placementResult.kind === "existingTrack") {
const adjustedXPosition =
placementResult.adjustedStartTime ?? xPosition;
return {
trackIndex: placementResult.trackIndex,
isNewTrack: false,
insertPosition: null,
xPosition: adjustedXPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
return {
trackIndex: placementResult.insertIndex,
isNewTrack: true,
insertPosition: placementResult.insertPosition,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
export function getDropLineY({
dropTarget,
tracks,
}: {
dropTarget: DropTarget;
tracks: TimelineTrack[];
}): number {
const safeTrackIndex = Math.min(
Math.max(dropTarget.trackIndex, 0),
tracks.length,
);
let y = 0;
for (let i = 0; i < safeTrackIndex; i++) {
y += TRACK_CONFIG[tracks[i].type].height + TRACK_GAP;
}
return y;
}
import type { TimelineTrack, TimelineElement } from "@/lib/timeline";
import type { ComputeDropTargetParams, DropTarget } from "@/lib/timeline";
import { resolveTrackPlacement } from "@/lib/timeline/placement";
import { TIMELINE_TRACK_GAP_PX } from "./layout";
import { getTrackHeight } from "./track-layout";
function findElementAtPosition({
mouseX,
tracks,
trackIndex,
targetElementTypes,
pixelsPerSecond,
zoomLevel,
}: {
mouseX: number;
tracks: TimelineTrack[];
trackIndex: number;
targetElementTypes: string[];
pixelsPerSecond: number;
zoomLevel: number;
}): { elementId: string; trackId: string } | null {
const time = mouseX / (pixelsPerSecond * zoomLevel);
const track = tracks[trackIndex];
if (!track || !("elements" in track)) return null;
const hit = track.elements.find(
(element: TimelineElement) =>
targetElementTypes.includes(element.type) &&
element.startTime <= time &&
time < element.startTime + element.duration,
);
if (!hit) return null;
return { elementId: hit.id, trackId: track.id };
}
function getTrackAtY({
mouseY,
tracks,
verticalDragDirection,
}: {
mouseY: number;
tracks: TimelineTrack[];
verticalDragDirection?: "up" | "down" | null;
}): { trackIndex: number; relativeY: number } | null {
let cumulativeHeight = 0;
for (let i = 0; i < tracks.length; i++) {
const trackHeight = getTrackHeight({ type: tracks[i].type });
const trackTop = cumulativeHeight;
const trackBottom = trackTop + trackHeight;
if (mouseY >= trackTop && mouseY < trackBottom) {
return {
trackIndex: i,
relativeY: mouseY - trackTop,
};
}
if (i < tracks.length - 1 && verticalDragDirection) {
const gapTop = trackBottom;
const gapBottom = gapTop + TIMELINE_TRACK_GAP_PX;
if (mouseY >= gapTop && mouseY < gapBottom) {
const isDraggingUp = verticalDragDirection === "up";
return {
trackIndex: isDraggingUp ? i : i + 1,
relativeY: isDraggingUp ? trackHeight - 1 : 0,
};
}
}
cumulativeHeight += trackHeight + TIMELINE_TRACK_GAP_PX;
}
return null;
}
const EMPTY_TARGET_ELEMENT = null;
function fallbackNewTrackDropTarget({
xPosition,
}: {
xPosition: number;
}): DropTarget {
return {
trackIndex: 0,
isNewTrack: true,
insertPosition: null,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
export function computeDropTarget({
elementType,
mouseX,
mouseY,
tracks,
playheadTime,
isExternalDrop,
elementDuration,
pixelsPerSecond,
zoomLevel,
verticalDragDirection,
startTimeOverride,
excludeElementId,
targetElementTypes,
}: ComputeDropTargetParams): DropTarget {
const xPosition =
typeof startTimeOverride === "number"
? startTimeOverride
: isExternalDrop
? playheadTime
: Math.max(0, mouseX / (pixelsPerSecond * zoomLevel));
if (tracks.length === 0) {
const placementResult = resolveTrackPlacement({
tracks,
elementType,
timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
strategy: {
type: "preferIndex",
trackIndex: 0,
hoverDirection: "below",
createNewTrackOnly: true,
},
});
const emptyTimelineResult =
placementResult?.kind === "newTrack" ? placementResult : null;
if (!emptyTimelineResult) {
return fallbackNewTrackDropTarget({ xPosition });
}
return {
trackIndex: emptyTimelineResult.insertIndex,
isNewTrack: true,
insertPosition: emptyTimelineResult.insertPosition,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
const trackAtMouse = getTrackAtY({ mouseY, tracks, verticalDragDirection });
if (!trackAtMouse) {
const isAboveAllTracks = mouseY < 0;
const placementResult = resolveTrackPlacement({
tracks,
elementType,
timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
strategy: {
type: "preferIndex",
trackIndex: isAboveAllTracks ? 0 : tracks.length - 1,
hoverDirection: isAboveAllTracks ? "above" : "below",
createNewTrackOnly: true,
},
});
const outOfBoundsResult =
placementResult?.kind === "newTrack" ? placementResult : null;
if (!outOfBoundsResult) {
return fallbackNewTrackDropTarget({ xPosition });
}
return {
trackIndex: outOfBoundsResult.insertIndex,
isNewTrack: true,
insertPosition: outOfBoundsResult.insertPosition,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
const { trackIndex, relativeY } = trackAtMouse;
const track = tracks[trackIndex];
if (targetElementTypes && targetElementTypes.length > 0) {
const targetElement = findElementAtPosition({
mouseX,
tracks,
trackIndex,
targetElementTypes,
pixelsPerSecond,
zoomLevel,
});
if (targetElement) {
return {
trackIndex,
isNewTrack: false,
insertPosition: null,
xPosition,
targetElement,
};
}
}
const trackHeight = getTrackHeight({ type: track.type });
const placementResult = resolveTrackPlacement({
tracks,
elementType,
timeSpans: [{ startTime: xPosition, duration: elementDuration, excludeElementId }],
strategy: {
type: "preferIndex",
trackIndex,
hoverDirection: relativeY < trackHeight / 2 ? "above" : "below",
verticalDragDirection,
},
});
if (!placementResult) {
return fallbackNewTrackDropTarget({ xPosition });
}
if (placementResult.kind === "existingTrack") {
const adjustedXPosition = placementResult.adjustedStartTime ?? xPosition;
return {
trackIndex: placementResult.trackIndex,
isNewTrack: false,
insertPosition: null,
xPosition: adjustedXPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
return {
trackIndex: placementResult.insertIndex,
isNewTrack: true,
insertPosition: placementResult.insertPosition,
xPosition,
targetElement: EMPTY_TARGET_ELEMENT,
};
}
export function getDropLineY({
dropTarget,
tracks,
}: {
dropTarget: DropTarget;
tracks: TimelineTrack[];
}): number {
const safeTrackIndex = Math.min(
Math.max(dropTarget.trackIndex, 0),
tracks.length,
);
let y = 0;
for (let i = 0; i < safeTrackIndex; i++) {
y += getTrackHeight({ type: tracks[i].type }) + TIMELINE_TRACK_GAP_PX;
}
return y;
}

50
apps/web/src/components/editor/panels/timeline/index.tsx
View File

@ -38,20 +38,26 @@ import { SnapIndicator } from "./snap-indicator";
import type { SnapPoint } from "@/lib/timeline/snap-utils";
import type { TimelineTrack } from "@/lib/timeline";
import {
TIMELINE_CONSTANTS,
TRACK_GAP,
TIMELINE_SCROLLBAR_SIZE_PX,
} from "@/constants/timeline-constants";
TIMELINE_CONTENT_TOP_PADDING_PX,
TIMELINE_TRACK_GAP_PX,
TIMELINE_TRACK_LABELS_COLUMN_WIDTH_PX,
} from "./layout";
import { useElementInteraction } from "@/hooks/timeline/element/use-element-interaction";
import {
getTrackHeight,
getCumulativeHeightBefore,
getTotalTracksHeight,
canTracktHaveAudio,
canTrackHaveAudio,
canTrackBeHidden,
getTimelineZoomMin,
getTimelinePaddingPx,
} from "@/lib/timeline";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import {
getTrackHeight,
getCumulativeHeightBefore,
getTotalTracksHeight,
} from "./track-layout";
import { SELECTED_TRACK_ROW_CLASS } from "./theme";
import { TIMELINE_HORIZONTAL_WHEEL_STEP_PX } from "./interaction";
import { isMainTrack } from "@/lib/timeline/placement";
import { TimelineToolbar } from "./timeline-toolbar";
import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
@ -67,7 +73,7 @@ import { useEditor } from "@/hooks/use-editor";
import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
import { DragLine } from "./drag-line";
import { invokeAction } from "@/lib/actions";
import { resolveTimelineElementIntersections } from "@/lib/timeline/selection-hit-testing";
import { resolveTimelineElementIntersections } from "./selection-hit-testing";
import { cn } from "@/utils/ui";
const TRACKS_CONTAINER_MAX_HEIGHT = 800;
@ -230,7 +236,7 @@ export function Timeline() {
Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
const clamped =
Math.sign(raw) *
Math.min(Math.abs(raw), TIMELINE_CONSTANTS.HORIZONTAL_WHEEL_STEP_PX);
Math.min(Math.abs(raw), TIMELINE_HORIZONTAL_WHEEL_STEP_PX);
tracks.scrollLeft = Math.max(0, tracks.scrollLeft + clamped);
} else {
tracks.scrollTop = Math.max(0, tracks.scrollTop + e.deltaY);
@ -335,7 +341,7 @@ export function Timeline() {
const containerWidth =
tracksContainerRef.current?.clientWidth || FALLBACK_CONTAINER_WIDTH;
const contentWidth =
timelineDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
timelineDuration * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const paddingPx = getTimelinePaddingPx({
containerWidth,
zoomLevel,
@ -383,7 +389,7 @@ export function Timeline() {
const timelineHeaderHeight =
(timelineHeaderRef.current?.getBoundingClientRect().height ?? 0) +
TIMELINE_CONSTANTS.PADDING_TOP_PX || 0;
TIMELINE_CONTENT_TOP_PADDING_PX || 0;
return (
<section
@ -483,7 +489,7 @@ export function Timeline() {
TRACKS_CONTAINER_HEIGHT.max,
getTotalTracksHeight({ tracks }),
),
) + TIMELINE_CONSTANTS.PADDING_TOP_PX
) + TIMELINE_CONTENT_TOP_PADDING_PX
}px`,
}}
onMouseDown={(event) => {
@ -577,7 +583,10 @@ function TrackLabelsPanel({
);
return (
<div className="flex w-28 shrink-0 flex-col border-r">
<div
className="flex shrink-0 flex-col border-r"
style={{ width: `${TIMELINE_TRACK_LABELS_COLUMN_WIDTH_PX}px` }}
>
<div
className="shrink-0"
style={{ height: timelineHeaderHeight || 48 }}
@ -585,21 +594,24 @@ function TrackLabelsPanel({
<div ref={trackLabelsRef} className="flex-1 overflow-hidden">
<div ref={trackLabelsScrollRef} className="size-full overflow-hidden">
{tracks.length > 0 && (
<div className="flex flex-col" style={{ gap: `${TRACK_GAP}px` }}>
<div
className="flex flex-col"
style={{ gap: `${TIMELINE_TRACK_GAP_PX}px` }}
>
{tracks.map((track) => (
<div
key={track.id}
className={cn(
"group flex items-center px-3",
tracksWithSelection.has(track.id) &&
TIMELINE_CONSTANTS.TRACK_SELECTED_BG,
SELECTED_TRACK_ROW_CLASS,
)}
style={{
height: `${getTrackHeight({ type: track.type })}px`,
}}
>
<div className="flex min-w-0 flex-1 items-center justify-end gap-2">
{canTracktHaveAudio(track) && (
{canTrackHaveAudio(track) && (
<TrackToggleIcon
isOff={track.muted}
icons={{ on: VolumeHighIcon, off: VolumeOffIcon }}
@ -707,10 +719,10 @@ function TimelineTrackRows({
className={cn(
"absolute right-0 left-0 transition-colors",
tracksWithSelection.has(track.id) &&
TIMELINE_CONSTANTS.TRACK_SELECTED_BG,
SELECTED_TRACK_ROW_CLASS,
)}
style={{
top: `${TIMELINE_CONSTANTS.PADDING_TOP_PX + getCumulativeHeightBefore({ tracks, trackIndex: index })}px`,
top: `${TIMELINE_CONTENT_TOP_PADDING_PX + getCumulativeHeightBefore({ tracks, trackIndex: index })}px`,
height: `${getTrackHeight({ type: track.type })}px`,
}}
>
@ -753,7 +765,7 @@ function TimelineTrackRows({
timeline.toggleTrackMute({ trackId: track.id });
}}
>
{canTracktHaveAudio(track) && track.muted
{canTrackHaveAudio(track) && track.muted
? "Unmute track"
: "Mute track"}
</ContextMenuItem>

4
apps/web/src/components/editor/panels/timeline/interaction.ts Normal file
View File

@ -0,0 +1,4 @@
export const TIMELINE_DRAG_THRESHOLD_PX = 5;
export const TIMELINE_HORIZONTAL_WHEEL_STEP_PX = 40;
export const TIMELINE_ZOOM_BUTTON_FACTOR = 1.7;
export const TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD = 0.15;

6
apps/web/src/components/editor/panels/timeline/layers.ts Normal file
View File

@ -0,0 +1,6 @@
export const TIMELINE_LAYERS = {
trackContent: 10,
dragLine: 20,
playhead: 30,
snapIndicator: 40,
} as const;

16
apps/web/src/components/editor/panels/timeline/layout.ts Normal file
View File

@ -0,0 +1,16 @@
import type { TrackType } from "@/lib/timeline";
export const TIMELINE_TRACK_HEIGHTS_PX: Record<TrackType, number> = {
video: 65,
text: 25,
audio: 50,
graphic: 25,
effect: 25,
} as const;
export const TIMELINE_TRACK_GAP_PX = 6;
export const TIMELINE_TRACK_LABELS_COLUMN_WIDTH_PX = 112;
export const TIMELINE_RULER_HEIGHT_PX = 22;
export const TIMELINE_BOOKMARK_ROW_HEIGHT_PX = 16;
export const TIMELINE_SCROLLBAR_SIZE_PX = 12;
export const TIMELINE_CONTENT_TOP_PADDING_PX = 2;

269
apps/web/src/lib/timeline/selection-hit-testing.ts → apps/web/src/components/editor/panels/timeline/selection-hit-testing.ts
View File

@ -1,133 +1,136 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { getCumulativeHeightBefore, getTrackHeight } from "@/lib/timeline";
import type { TimelineTrack } from "@/lib/timeline";
type TimelineElementRef = { trackId: string; elementId: string };
interface SelectionRectangle {
left: number;
top: number;
right: number;
bottom: number;
}
function getNormalizedRectangle({
startPos,
endPos,
}: {
startPos: { x: number; y: number };
endPos: { x: number; y: number };
}): SelectionRectangle {
return {
left: Math.min(startPos.x, endPos.x),
top: Math.min(startPos.y, endPos.y),
right: Math.max(startPos.x, endPos.x),
bottom: Math.max(startPos.y, endPos.y),
};
}
function getSelectionRectangleInContent({
container,
scrollContainer,
startPos,
endPos,
}: {
container: HTMLElement;
scrollContainer: HTMLDivElement | null;
startPos: { x: number; y: number };
endPos: { x: number; y: number };
}): SelectionRectangle {
const containerRect = container.getBoundingClientRect();
const scrollRect = scrollContainer?.getBoundingClientRect() ?? containerRect;
const scrollLeft = scrollContainer?.scrollLeft ?? 0;
const scrollTop = scrollContainer?.scrollTop ?? 0;
const adjustedStart = {
x: startPos.x - containerRect.left + scrollLeft,
y: startPos.y - scrollRect.top + scrollTop,
};
const adjustedEnd = {
x: endPos.x - containerRect.left + scrollLeft,
y: endPos.y - scrollRect.top + scrollTop,
};
return getNormalizedRectangle({
startPos: adjustedStart,
endPos: adjustedEnd,
});
}
function isRectangleIntersecting({
elementRectangle,
selectionRectangle,
}: {
elementRectangle: SelectionRectangle;
selectionRectangle: SelectionRectangle;
}): boolean {
return !(
elementRectangle.right < selectionRectangle.left ||
elementRectangle.left > selectionRectangle.right ||
elementRectangle.bottom < selectionRectangle.top ||
elementRectangle.top > selectionRectangle.bottom
);
}
export function resolveTimelineElementIntersections({
container,
scrollContainer,
tracks,
zoomLevel,
startPos,
currentPos,
}: {
container: HTMLElement;
scrollContainer: HTMLDivElement | null;
tracks: TimelineTrack[];
zoomLevel: number;
startPos: { x: number; y: number };
currentPos: { x: number; y: number };
}): TimelineElementRef[] {
const selectionRectangle = getSelectionRectangleInContent({
container,
scrollContainer,
startPos,
endPos: currentPos,
});
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const selectedElements: TimelineElementRef[] = [];
for (const [trackIndex, track] of tracks.entries()) {
const trackTop = getCumulativeHeightBefore({
tracks,
trackIndex,
});
const trackHeight = getTrackHeight({ type: track.type });
const elementTop = TIMELINE_CONSTANTS.PADDING_TOP_PX + trackTop;
const elementBottom = elementTop + trackHeight;
for (const element of track.elements) {
const elementLeft = element.startTime * pixelsPerSecond;
const elementRight = elementLeft + element.duration * pixelsPerSecond;
const elementRectangle = {
left: elementLeft,
top: elementTop,
right: elementRight,
bottom: elementBottom,
};
if (
isRectangleIntersecting({
elementRectangle,
selectionRectangle,
})
) {
selectedElements.push({
trackId: track.id,
elementId: element.id,
});
}
}
}
return selectedElements;
}
import type { TimelineTrack } from "@/lib/timeline";
import { getTimelinePixelsPerSecond } from "@/lib/timeline/pixel-utils";
import {
TIMELINE_CONTENT_TOP_PADDING_PX,
} from "./layout";
import { getCumulativeHeightBefore, getTrackHeight } from "./track-layout";
type TimelineElementRef = { trackId: string; elementId: string };
interface SelectionRectangle {
left: number;
top: number;
right: number;
bottom: number;
}
function getNormalizedRectangle({
startPos,
endPos,
}: {
startPos: { x: number; y: number };
endPos: { x: number; y: number };
}): SelectionRectangle {
return {
left: Math.min(startPos.x, endPos.x),
top: Math.min(startPos.y, endPos.y),
right: Math.max(startPos.x, endPos.x),
bottom: Math.max(startPos.y, endPos.y),
};
}
function getSelectionRectangleInContent({
container,
scrollContainer,
startPos,
endPos,
}: {
container: HTMLElement;
scrollContainer: HTMLDivElement | null;
startPos: { x: number; y: number };
endPos: { x: number; y: number };
}): SelectionRectangle {
const containerRect = container.getBoundingClientRect();
const scrollRect = scrollContainer?.getBoundingClientRect() ?? containerRect;
const scrollLeft = scrollContainer?.scrollLeft ?? 0;
const scrollTop = scrollContainer?.scrollTop ?? 0;
const adjustedStart = {
x: startPos.x - containerRect.left + scrollLeft,
y: startPos.y - scrollRect.top + scrollTop,
};
const adjustedEnd = {
x: endPos.x - containerRect.left + scrollLeft,
y: endPos.y - scrollRect.top + scrollTop,
};
return getNormalizedRectangle({
startPos: adjustedStart,
endPos: adjustedEnd,
});
}
function isRectangleIntersecting({
elementRectangle,
selectionRectangle,
}: {
elementRectangle: SelectionRectangle;
selectionRectangle: SelectionRectangle;
}): boolean {
return !(
elementRectangle.right < selectionRectangle.left ||
elementRectangle.left > selectionRectangle.right ||
elementRectangle.bottom < selectionRectangle.top ||
elementRectangle.top > selectionRectangle.bottom
);
}
export function resolveTimelineElementIntersections({
container,
scrollContainer,
tracks,
zoomLevel,
startPos,
currentPos,
}: {
container: HTMLElement;
scrollContainer: HTMLDivElement | null;
tracks: TimelineTrack[];
zoomLevel: number;
startPos: { x: number; y: number };
currentPos: { x: number; y: number };
}): TimelineElementRef[] {
const selectionRectangle = getSelectionRectangleInContent({
container,
scrollContainer,
startPos,
endPos: currentPos,
});
const pixelsPerSecond = getTimelinePixelsPerSecond({ zoomLevel });
const selectedElements: TimelineElementRef[] = [];
for (const [trackIndex, track] of tracks.entries()) {
const trackTop = getCumulativeHeightBefore({
tracks,
trackIndex,
});
const trackHeight = getTrackHeight({ type: track.type });
const elementTop = TIMELINE_CONTENT_TOP_PADDING_PX + trackTop;
const elementBottom = elementTop + trackHeight;
for (const element of track.elements) {
const elementLeft = element.startTime * pixelsPerSecond;
const elementRight = elementLeft + element.duration * pixelsPerSecond;
const elementRectangle = {
left: elementLeft,
top: elementTop,
right: elementRight,
bottom: elementBottom,
};
if (
isRectangleIntersecting({
elementRectangle,
selectionRectangle,
})
) {
selectedElements.push({
trackId: track.id,
elementId: element.id,
});
}
}
}
return selectedElements;
}

2
apps/web/src/components/editor/panels/timeline/snap-indicator.tsx
View File

@ -6,7 +6,7 @@ import {
getCenteredLineLeft,
TIMELINE_INDICATOR_LINE_WIDTH_PX,
} from "@/lib/timeline";
import { TIMELINE_LAYERS } from "@/constants/timeline-constants";
import { TIMELINE_LAYERS } from "./layers";
interface SnapIndicatorProps {
snapPoint: SnapPoint | null;
zoomLevel: number;

29
apps/web/src/components/editor/panels/timeline/theme.ts Normal file
View File

@ -0,0 +1,29 @@
import type { TrackType } from "@/lib/timeline";
export const TIMELINE_TRACK_THEME: Record<
TrackType,
{
elementClassName: string;
waveformColor?: string;
}
> = {
video: { elementClassName: "transparent" },
text: { elementClassName: "bg-[#5DBAA0]" },
audio: {
elementClassName: "bg-[#8F5DBA]",
waveformColor: "rgba(255, 255, 255, 0.5)",
},
graphic: { elementClassName: "bg-[#BA5D7A]" },
effect: { elementClassName: "bg-[#5d93ba]" },
} as const;
export const SELECTED_TRACK_ROW_CLASS = "bg-accent/50";
export const DEFAULT_TIMELINE_BOOKMARK_COLOR = "#009dff";
export function getTimelineElementClassName({
type,
}: {
type: TrackType;
}): string {
return TIMELINE_TRACK_THEME[type].elementClassName.trim();
}

12
apps/web/src/components/editor/panels/timeline/timeline-element.tsx
View File

@ -12,8 +12,6 @@ import { useKeyframeSelection } from "@/hooks/timeline/element/use-keyframe-sele
import type { SnapPoint } from "@/lib/timeline/snap-utils";
import { getElementKeyframes } from "@/lib/animation";
import {
getElementClasses,
getTrackHeight,
canElementHaveAudio,
canElementBeHidden,
hasElementEffects,
@ -21,7 +19,11 @@ import {
timelineTimeToPixels,
timelineTimeToSnappedPixels,
} from "@/lib/timeline";
import { ELEMENT_TYPE_CONFIG } from "@/constants/timeline-constants";
import { getTrackHeight } from "./track-layout";
import {
getTimelineElementClassName,
TIMELINE_TRACK_THEME,
} from "./theme";
import {
ContextMenu,
ContextMenuContent,
@ -464,7 +466,7 @@ function ElementInner({
<div
className={cn(
"absolute inset-0 overflow-hidden rounded-sm",
getElementClasses({ type: track.type }),
getTimelineElementClassName({ type: track.type }),
isReducedOpacity && "opacity-50",
)}
>
@ -710,7 +712,7 @@ function AudioElementContent({ element }: { element: AudioElement }) {
<AudioWaveform
audioBuffer={audioBuffer}
audioUrl={audioUrl}
color={ELEMENT_TYPE_CONFIG.audio.waveformColor}
color={TIMELINE_TRACK_THEME.audio.waveformColor}
/>
<MediaElementHeader name={mediaLabel} hasFade={false} />
</div>

4
apps/web/src/components/editor/panels/timeline/timeline-playhead.tsx
View File

@ -9,9 +9,9 @@ import {
import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
import { useEditor } from "@/hooks/use-editor";
import {
TIMELINE_LAYERS,
TIMELINE_SCROLLBAR_SIZE_PX,
} from "@/constants/timeline-constants";
} from "./layout";
import { TIMELINE_LAYERS } from "./layers";
interface TimelinePlayheadProps {
zoomLevel: number;

14
apps/web/src/components/editor/panels/timeline/timeline-ruler.tsx
View File

@ -1,9 +1,9 @@
import { type JSX, useLayoutEffect, useRef } from "react";
import {
TIMELINE_CONSTANTS,
TIMELINE_RULER_HEIGHT,
} from "@/constants/timeline-constants";
import { DEFAULT_FPS } from "@/constants/project-constants";
BASE_TIMELINE_PIXELS_PER_SECOND,
} from "@/lib/timeline/scale";
import { TIMELINE_RULER_HEIGHT_PX } from "./layout";
import { DEFAULT_FPS } from "@/lib/fps/constants";
import { useEditor } from "@/hooks/use-editor";
import { getRulerConfig, shouldShowLabel } from "@/lib/timeline/ruler-utils";
import { useScrollPosition } from "@/hooks/timeline/use-scroll-position";
@ -31,7 +31,7 @@ export function TimelineRuler({
handleRulerMouseDown,
}: TimelineRulerProps) {
const duration = useEditor((e) => e.timeline.getTotalDuration());
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const pixelsPerSecond = BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const visibleDuration = dynamicTimelineWidth / pixelsPerSecond;
const effectiveDuration = Math.max(duration, visibleDuration);
const fps =
@ -107,7 +107,7 @@ export function TimelineRuler({
aria-valuemax={effectiveDuration}
aria-valuenow={0}
className="relative flex-1 overflow-x-visible"
style={{ height: TIMELINE_RULER_HEIGHT }}
style={{ height: TIMELINE_RULER_HEIGHT_PX }}
onWheel={handleWheel}
onClick={(event) => {
// Ruler seek already happens on mousedown via playhead scrubbing.
@ -124,7 +124,7 @@ export function TimelineRuler({
ref={rulerRef}
className="relative cursor-default select-none"
style={{
height: TIMELINE_RULER_HEIGHT,
height: TIMELINE_RULER_HEIGHT_PX,
width: `${dynamicTimelineWidth}px`,
}}
onMouseDown={handleRulerMouseDown}

11
apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
View File

@ -14,7 +14,10 @@ import {
SplitButtonSeparator,
} from "@/components/ui/split-button";
import { Slider } from "@/components/ui/slider";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import {
TIMELINE_ZOOM_BUTTON_FACTOR,
} from "./interaction";
import { TIMELINE_ZOOM_MAX } from "@/lib/timeline/scale";
import { sliderToZoom, zoomToSlider } from "@/lib/timeline/zoom-utils";
import { ScenesView } from "@/components/editor/scenes-view";
import { type TActionWithOptionalArgs, invokeAction } from "@/lib/actions";
@ -60,10 +63,10 @@ export function TimelineToolbar({
const newZoomLevel =
direction === "in"
? Math.min(
TIMELINE_CONSTANTS.ZOOM_MAX,
zoomLevel * TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR,
TIMELINE_ZOOM_MAX,
zoomLevel * TIMELINE_ZOOM_BUTTON_FACTOR,
)
: Math.max(minZoom, zoomLevel / TIMELINE_CONSTANTS.ZOOM_BUTTON_FACTOR);
: Math.max(minZoom, zoomLevel / TIMELINE_ZOOM_BUTTON_FACTOR);
setZoomLevel({ zoom: newZoomLevel });
};

5
apps/web/src/components/editor/panels/timeline/timeline-track.tsx
View File

@ -5,7 +5,8 @@ import { TimelineElement } from "./timeline-element";
import type { TimelineTrack } from "@/lib/timeline";
import type { TimelineElement as TimelineElementType } from "@/lib/timeline";
import type { SnapPoint } from "@/lib/timeline/snap-utils";
import { TIMELINE_CONSTANTS, TIMELINE_LAYERS } from "@/constants/timeline-constants";
import { TIMELINE_LAYERS } from "./layers";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { useEdgeAutoScroll } from "@/hooks/timeline/use-edge-auto-scroll";
import type { ElementDragState } from "@/lib/timeline";
import { useEditor } from "@/hooks/use-editor";
@ -59,7 +60,7 @@ export function TimelineTrackContent({
getMouseClientX: () => lastMouseXRef.current ?? 0,
rulerScrollRef,
tracksScrollRef,
contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
contentWidth: duration * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel,
});
return (

37
apps/web/src/components/editor/panels/timeline/track-layout.ts Normal file
View File

@ -0,0 +1,37 @@
import type { TrackType } from "@/lib/timeline";
import {
TIMELINE_TRACK_GAP_PX,
TIMELINE_TRACK_HEIGHTS_PX,
} from "./layout";
export function getTrackHeight({ type }: { type: TrackType }): number {
return TIMELINE_TRACK_HEIGHTS_PX[type];
}
export function getCumulativeHeightBefore({
tracks,
trackIndex,
}: {
tracks: Array<{ type: TrackType }>;
trackIndex: number;
}): number {
return tracks
.slice(0, trackIndex)
.reduce(
(sum, track) => sum + getTrackHeight({ type: track.type }) + TIMELINE_TRACK_GAP_PX,
0,
);
}
export function getTotalTracksHeight({
tracks,
}: {
tracks: Array<{ type: TrackType }>;
}): number {
const tracksHeight = tracks.reduce(
(sum, track) => sum + getTrackHeight({ type: track.type }),
0,
);
const gapsHeight = Math.max(0, tracks.length - 1) * TIMELINE_TRACK_GAP_PX;
return tracksHeight + gapsHeight;
}

2
apps/web/src/core/managers/audio-manager.ts
View File

@ -2,7 +2,7 @@ import type { EditorCore } from "@/core";
import {
clampRetimeRate,
shouldMaintainPitch,
} from "@/constants/retime-constants";
} from "@/lib/retime/rate";
import type { AudioClipSource } from "@/lib/media/audio";
import { createAudioContext, collectAudioClips } from "@/lib/media/audio";
import {

12
apps/web/src/core/managers/project-manager.ts
View File

@ -12,11 +12,9 @@ import { storageService } from "@/services/storage/service";
import { toast } from "sonner";
import { generateUUID } from "@/utils/id";
import { UpdateProjectSettingsCommand } from "@/lib/commands/project";
import {
DEFAULT_FPS,
DEFAULT_CANVAS_SIZE,
DEFAULT_COLOR,
} from "@/constants/project-constants";
import { DEFAULT_BACKGROUND_COLOR } from "@/lib/background/constants";
import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/constants";
import { DEFAULT_FPS } from "@/lib/fps/constants";
import { buildDefaultScene, getProjectDurationFromScenes } from "@/lib/scenes";
import { buildScene } from "@/services/renderer/scene-builder";
import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
@ -29,7 +27,7 @@ import {
import { loadFonts } from "@/lib/fonts/google-fonts";
import { DEFAULTS } from "@/lib/timeline/defaults";
import { getElementFontFamilies } from "@/lib/timeline/element-utils";
import { getRaisedProjectFpsForImportedMedia } from "@/lib/project/fps";
import { getRaisedProjectFpsForImportedMedia } from "@/lib/fps/utils";
import type { MediaAsset } from "@/lib/media/types";
export interface MigrationState {
@ -101,7 +99,7 @@ export class ProjectManager {
originalCanvasSize: null,
background: {
type: "color",
color: DEFAULT_COLOR,
color: DEFAULT_BACKGROUND_COLOR,
},
},
version: CURRENT_PROJECT_VERSION,

27
apps/web/src/hooks/timeline/element/use-element-interaction.ts
View File

@ -10,12 +10,10 @@ import { useEditor } from "@/hooks/use-editor";
import { useShiftKey } from "@/hooks/use-shift-key";
import { useTimelineStore } from "@/stores/timeline-store";
import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
import {
DRAG_THRESHOLD_PX,
TIMELINE_CONSTANTS,
} from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { TIMELINE_DRAG_THRESHOLD_PX } from "@/components/editor/panels/timeline/interaction";
import { snapTimeToFrame } from "opencut-wasm";
import { computeDropTarget } from "@/lib/timeline/drop-utils";
import { computeDropTarget } from "@/components/editor/panels/timeline/drop-target";
import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
import { generateUUID } from "@/utils/id";
import { snapElementEdge, type SnapPoint } from "@/lib/timeline/snap-utils";
@ -70,7 +68,7 @@ function getClickOffsetTime({
zoomLevel: number;
}): number {
const clickOffsetX = clientX - elementRect.left;
return clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
return clickOffsetX / (BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel);
}
function getVerticalDragDirection({
@ -136,7 +134,7 @@ function getDragDropTarget({
playheadTime: snappedTime,
isExternalDrop: false,
elementDuration,
pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
pixelsPerSecond: BASE_TIMELINE_PIXELS_PER_SECOND,
zoomLevel,
startTimeOverride: snappedTime,
excludeElementId: movingElement.id,
@ -288,7 +286,10 @@ export function useElementInteraction({
if (isPendingDrag && pendingDragRef.current) {
const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX);
const deltaY = Math.abs(clientY - pendingDragRef.current.startMouseY);
if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) {
if (
deltaX > TIMELINE_DRAG_THRESHOLD_PX ||
deltaY > TIMELINE_DRAG_THRESHOLD_PX
) {
const activeProject = editor.project.getActive();
if (!activeProject) return;
const scrollLeft = scrollContainer.scrollLeft;
@ -416,7 +417,10 @@ export function useElementInteraction({
if (mouseDownLocationRef.current) {
const deltaX = Math.abs(clientX - mouseDownLocationRef.current.x);
const deltaY = Math.abs(clientY - mouseDownLocationRef.current.y);
if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) {
if (
deltaX <= TIMELINE_DRAG_THRESHOLD_PX &&
deltaY <= TIMELINE_DRAG_THRESHOLD_PX
) {
mouseDownLocationRef.current = null;
endDrag();
onSnapPointChange?.(null);
@ -596,7 +600,10 @@ export function useElementInteraction({
if (mouseDownLocationRef.current) {
const deltaX = Math.abs(event.clientX - mouseDownLocationRef.current.x);
const deltaY = Math.abs(event.clientY - mouseDownLocationRef.current.y);
if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) {
if (
deltaX > TIMELINE_DRAG_THRESHOLD_PX ||
deltaY > TIMELINE_DRAG_THRESHOLD_PX
) {
mouseDownLocationRef.current = null;
return;
}

4
apps/web/src/hooks/timeline/element/use-element-resize.ts
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useRef, useCallback } from "react";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { snapTimeToFrame } from "opencut-wasm";
import type { TimelineElement, TimelineTrack } from "@/lib/timeline";
import { useEditor } from "@/hooks/use-editor";
@ -190,7 +190,7 @@ export function useTimelineElementResize({
const deltaX = clientX - resizing.startX;
let deltaTime =
deltaX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
deltaX / (BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel);
let resizeSnapPoint: SnapPoint | null = null;
const projectFps = editor.project.getActive().settings.fps;

13
apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
View File

@ -9,10 +9,8 @@ import { useEditor } from "@/hooks/use-editor";
import { useKeyframeSelection } from "./use-keyframe-selection";
import { snapTimeToFrame, getSnappedSeekTime } from "opencut-wasm";
import { timelineTimeToSnappedPixels } from "@/lib/timeline";
import {
DRAG_THRESHOLD_PX,
TIMELINE_CONSTANTS,
} from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { TIMELINE_DRAG_THRESHOLD_PX } from "@/components/editor/panels/timeline/interaction";
import { RetimeKeyframeCommand } from "@/lib/commands/timeline/element/keyframes/retime-keyframe";
import { BatchCommand } from "@/lib/commands";
import type { SelectedKeyframeRef } from "@/lib/animation/types";
@ -64,7 +62,7 @@ export function useKeyframeDrag({
const activeProject = editor.project.getActive();
const fps = activeProject.settings.fps;
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const pixelsPerSecond = BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const endDrag = useCallback(() => {
setDragState(initialDragState);
@ -127,7 +125,7 @@ export function useKeyframeDrag({
const handleMouseMove = ({ clientX }: MouseEvent) => {
if (isPendingDrag && pendingDragRef.current) {
const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX);
if (deltaX <= DRAG_THRESHOLD_PX) return;
if (deltaX <= TIMELINE_DRAG_THRESHOLD_PX) return;
const pending = pendingDragRef.current;
pendingDragRef.current = null;
@ -248,7 +246,8 @@ export function useKeyframeDrag({
const wasDrag =
mouseDownXRef.current !== null &&
Math.abs(event.clientX - mouseDownXRef.current) > DRAG_THRESHOLD_PX;
Math.abs(event.clientX - mouseDownXRef.current) >
TIMELINE_DRAG_THRESHOLD_PX;
mouseDownXRef.current = null;
if (wasDrag) return;

7
apps/web/src/hooks/timeline/use-bookmark-drag.ts
View File

@ -7,7 +7,7 @@ import {
} from "react";
import { useEditor } from "@/hooks/use-editor";
import { useShiftKey } from "@/hooks/use-shift-key";
import { DRAG_THRESHOLD_PX } from "@/constants/timeline-constants";
import { TIMELINE_DRAG_THRESHOLD_PX } from "@/components/editor/panels/timeline/interaction";
import { snapTimeToFrame } from "opencut-wasm";
import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils";
import {
@ -131,7 +131,10 @@ export function useBookmarkDrag({
const deltaX = Math.abs(event.clientX - startMouseX);
const deltaY = Math.abs(event.clientY - startMouseY);
if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) {
if (
deltaX <= TIMELINE_DRAG_THRESHOLD_PX &&
deltaY <= TIMELINE_DRAG_THRESHOLD_PX
) {
return;
}

5
apps/web/src/hooks/timeline/use-snap-indicator-position.ts
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { timelineTimeToSnappedPixels } from "@/lib/timeline";
import { TRACK_LABELS_WIDTH_PX } from "@/constants/timeline-constants";
import { TIMELINE_TRACK_LABELS_COLUMN_WIDTH_PX } from "@/components/editor/panels/timeline/layout";
interface UseSnapIndicatorPositionParams {
snapPoint: { time: number } | null;
zoomLevel: number;
@ -44,7 +44,8 @@ export function useSnapIndicatorPosition({
time: snapPoint?.time ?? 0,
zoomLevel,
});
const leftPosition = TRACK_LABELS_WIDTH_PX + timelinePosition - scrollLeft;
const leftPosition =
TIMELINE_TRACK_LABELS_COLUMN_WIDTH_PX + timelinePosition - scrollLeft;
return {
leftPosition,

19
apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
View File

@ -3,7 +3,8 @@ import { useEditor } from "@/hooks/use-editor";
import { processMediaAssets } from "@/lib/media/processing";
import { toast } from "sonner";
import { showMediaUploadToast } from "@/lib/media/upload-toast";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { DEFAULT_NEW_ELEMENT_DURATION_SECONDS } from "@/lib/timeline/creation";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { snapTimeToFrame } from "opencut-wasm";
import {
buildTextElement,
@ -14,7 +15,7 @@ import {
} from "@/lib/timeline/element-utils";
import { AddTrackCommand, InsertElementCommand } from "@/lib/commands/timeline";
import { BatchCommand } from "@/lib/commands";
import { computeDropTarget } from "@/lib/timeline/drop-utils";
import { computeDropTarget } from "@/components/editor/panels/timeline/drop-target";
import { getDragData, hasDragData } from "@/lib/drag-data";
import { isMainTrack } from "@/lib/timeline/placement";
import type { TrackType, DropTarget, ElementType } from "@/lib/timeline";
@ -82,14 +83,14 @@ export function useTimelineDragDrop({
elementType === "sticker" ||
elementType === "effect"
) {
return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
return DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
}
if (mediaId) {
const mediaAssets = editor.media.getAssets();
const media = mediaAssets.find((m) => m.id === mediaId);
return media?.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
return media?.duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
}
return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
return DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
},
[editor],
);
@ -158,7 +159,7 @@ export function useTimelineDragDrop({
playheadTime: currentTime,
isExternalDrop: isExternal,
elementDuration: duration,
pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
pixelsPerSecond: BASE_TIMELINE_PIXELS_PER_SECOND,
zoomLevel,
targetElementTypes,
});
@ -330,7 +331,7 @@ export function useTimelineDragDrop({
dragData.mediaType === "audio" ? "audio" : "video";
const duration =
mediaAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
mediaAsset.duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
const element = buildElementFromMedia({
mediaId: mediaAsset.id,
mediaType: mediaAsset.type,
@ -445,7 +446,7 @@ export function useTimelineDragDrop({
const duration =
createdAsset.duration ??
TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
const currentTracks = editor.timeline.getTracks();
const currentTime = editor.playback.getCurrentTime();
const onlyTrack = currentTracks[0];
@ -467,7 +468,7 @@ export function useTimelineDragDrop({
playheadTime: currentTime,
isExternalDrop: true,
elementDuration: duration,
pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
pixelsPerSecond: BASE_TIMELINE_PIXELS_PER_SECOND,
zoomLevel,
});

10
apps/web/src/hooks/timeline/use-timeline-playhead.ts
View File

@ -8,7 +8,7 @@ import {
getCenteredLineLeft,
timelineTimeToSnappedPixels,
} from "@/lib/timeline";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
interface UseTimelinePlayheadProps {
zoomLevel: number;
@ -67,7 +67,7 @@ export function useTimelinePlayhead({
const relativeMouseX = event.clientX - rulerRect.left;
const timelineContentWidth =
duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
duration * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const clampedMouseX = Math.max(
0,
@ -78,7 +78,7 @@ export function useTimelinePlayhead({
0,
Math.min(
duration,
clampedMouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
clampedMouseX / (BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel),
),
);
@ -161,7 +161,7 @@ export function useTimelinePlayhead({
getMouseClientX: () => lastMouseXRef.current,
rulerScrollRef,
tracksScrollRef,
contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
contentWidth: duration * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel,
});
useEffect(() => {
@ -248,7 +248,7 @@ export function useTimelinePlayhead({
if (!rulerViewport || !tracksViewport) return;
const playheadPixels =
time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevelRef.current;
time * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevelRef.current;
const viewportWidth = rulerViewport.clientWidth;
const scrollMinimum = 0;
const scrollMaximum = rulerViewport.scrollWidth - viewportWidth;

4
apps/web/src/hooks/timeline/use-timeline-seek.ts
View File

@ -1,6 +1,6 @@
import { useCallback, useRef } from "react";
import type { MutableRefObject, RefObject } from "react";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { getSnappedSeekTime } from "opencut-wasm";
import { useEditor } from "../use-editor";
@ -132,7 +132,7 @@ export function useTimelineSeek({
Math.min(
duration,
(mouseX + scrollLeft) /
(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
(BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel),
),
);

33
apps/web/src/hooks/timeline/use-timeline-zoom.ts
View File

@ -7,7 +7,14 @@ import {
useRef,
useState,
} from "react";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import {
TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD,
} from "@/components/editor/panels/timeline/interaction";
import {
TIMELINE_ZOOM_MAX,
TIMELINE_ZOOM_MIN,
BASE_TIMELINE_PIXELS_PER_SECOND,
} from "@/lib/timeline/scale";
import { useEditor } from "@/hooks/use-editor";
import { zoomToSlider } from "@/lib/timeline/zoom-utils";
@ -30,7 +37,7 @@ interface UseTimelineZoomReturn {
export function useTimelineZoom({
containerRef,
minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
minZoom = TIMELINE_ZOOM_MIN,
initialZoom,
initialScrollLeft,
initialPlayheadTime,
@ -49,7 +56,7 @@ export function useTimelineZoom({
hasInitializedRef.current = true;
return Math.max(
minZoom,
Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, initialZoom),
Math.min(TIMELINE_ZOOM_MAX, initialZoom),
);
}
return minZoom;
@ -91,7 +98,7 @@ export function useTimelineZoom({
setZoomLevel((prev) => {
const nextZoom = Math.max(
minZoom,
Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, prev * zoomFactor),
Math.min(TIMELINE_ZOOM_MAX, prev * zoomFactor),
);
return nextZoom;
});
@ -105,7 +112,7 @@ export function useTimelineZoom({
if (initialZoom !== undefined && !hasInitializedRef.current) {
hasInitializedRef.current = true;
setZoomLevel(
Math.max(minZoom, Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, initialZoom)),
Math.max(minZoom, Math.min(TIMELINE_ZOOM_MAX, initialZoom)),
);
return;
}
@ -126,7 +133,7 @@ export function useTimelineZoom({
: zoomLevelOrUpdater;
const clampedZoom = Math.max(
minZoom,
Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, nextZoom),
Math.min(TIMELINE_ZOOM_MAX, nextZoom),
);
return clampedZoom;
});
@ -153,12 +160,12 @@ export function useTimelineZoom({
});
const isCrossingThresholdUp =
previousSliderPercent <
TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
sliderPercent >= TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
sliderPercent >= TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
const isCrossingThresholdDown =
previousSliderPercent >=
TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
sliderPercent < TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD &&
sliderPercent < TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD;
const syncScroll = (scrollLeft: number) => {
scrollElement.scrollLeft = scrollLeft;
@ -178,11 +185,11 @@ export function useTimelineZoom({
isInPlayheadAnchorModeRef.current = true;
}
if (sliderPercent >= TIMELINE_CONSTANTS.ZOOM_ANCHOR_PLAYHEAD_THRESHOLD) {
if (sliderPercent >= TIMELINE_ZOOM_ANCHOR_PLAYHEAD_THRESHOLD) {
const playheadPixelsBefore =
playheadTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * previousZoom;
playheadTime * BASE_TIMELINE_PIXELS_PER_SECOND * previousZoom;
const playheadPixelsAfter =
playheadTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
playheadTime * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const viewportOffset = playheadPixelsBefore - currentScrollLeft;
const newScrollLeft = playheadPixelsAfter - viewportOffset;

4
apps/web/src/hooks/use-paste-media.ts
View File

@ -7,7 +7,7 @@ import { buildElementFromMedia } from "@/lib/timeline/element-utils";
import { AddMediaAssetCommand } from "@/lib/commands/media";
import { InsertElementCommand } from "@/lib/commands/timeline";
import { BatchCommand } from "@/lib/commands";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { DEFAULT_NEW_ELEMENT_DURATION_SECONDS } from "@/lib/timeline/creation";
import { isTypableDOMElement } from "@/utils/browser";
import type { MediaType } from "@/lib/media/types";
@ -74,7 +74,7 @@ export function usePasteMedia() {
);
const assetId = addMediaCmd.getAssetId();
const duration =
asset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
asset.duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS;
const trackType = asset.type === "audio" ? "audio" : "video";
const element = buildElementFromMedia({

11
apps/web/src/lib/background/constants.ts Normal file
View File

@ -0,0 +1,11 @@
export const BACKGROUND_BLUR_INTENSITY_PRESETS: Array<{
label: string;
value: number;
}> = [
{ label: "Light", value: 10 },
{ label: "Medium", value: 50 },
{ label: "Heavy", value: 100 },
] as const;
export const DEFAULT_BACKGROUND_BLUR_INTENSITY = 10;
export const DEFAULT_BACKGROUND_COLOR = "#000000";

10
apps/web/src/lib/canvas/constants.ts Normal file
View File

@ -0,0 +1,10 @@
import type { TCanvasSize } from "@/lib/project/types";
export const DEFAULT_CANVAS_PRESETS: TCanvasSize[] = [
{ width: 1920, height: 1080 },
{ width: 1080, height: 1920 },
{ width: 1080, height: 1080 },
{ width: 1440, height: 1080 },
];
export const DEFAULT_CANVAS_SIZE: TCanvasSize = { width: 1920, height: 1080 };

2
apps/web/src/lib/commands/media/add-media-asset.ts
View File

@ -5,7 +5,7 @@ import type { MediaAsset } from "@/lib/media/types";
import { generateUUID } from "@/utils/id";
import { storageService } from "@/services/storage/service";
import { hasMediaId } from "@/lib/timeline/element-utils";
import { getHighestImportedVideoFps } from "@/lib/project/fps";
import { getHighestImportedVideoFps } from "@/lib/fps/utils";
import { UpdateProjectSettingsCommand } from "@/lib/commands/project";
export class AddMediaAssetCommand extends Command {

4
apps/web/src/lib/commands/timeline/element/insert-element.ts
View File

@ -9,7 +9,7 @@ import type {
import { generateUUID } from "@/utils/id";
import { requiresMediaId } from "@/lib/timeline/element-utils";
import type { MediaAsset } from "@/lib/media/types";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { DEFAULT_NEW_ELEMENT_DURATION_SECONDS } from "@/lib/timeline/creation";
import { graphicsRegistry, registerDefaultGraphics } from "@/lib/graphics";
import {
applyPlacement,
@ -136,7 +136,7 @@ export class InsertElementCommand extends Command {
startTime: element.startTime,
trimStart: element.trimStart ?? 0,
trimEnd: element.trimEnd ?? 0,
duration: element.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
duration: element.duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS,
} as TimelineElement;
}

2
apps/web/src/lib/commands/timeline/element/retime/update-element-retime.ts
View File

@ -1,5 +1,5 @@
import { EditorCore } from "@/core";
import { clampRetimeRate } from "@/constants/retime-constants";
import { clampRetimeRate } from "@/lib/retime/rate";
import { clampAnimationsToDuration } from "@/lib/animation";
import { Command } from "@/lib/commands/base-command";
import { getTimelineDurationForSourceSpan, getSourceSpanAtClipTime } from "@/lib/retime";

4
apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
View File

@ -1,7 +1,7 @@
import { Command } from "@/lib/commands/base-command";
import type { TimelineTrack } from "@/lib/timeline";
import { EditorCore } from "@/core";
import { canTracktHaveAudio } from "@/lib/timeline";
import { canTrackHaveAudio } from "@/lib/timeline";
export class ToggleTrackMuteCommand extends Command {
private savedState: TimelineTrack[] | null = null;
@ -22,7 +22,7 @@ export class ToggleTrackMuteCommand extends Command {
}
const updatedTracks = this.savedState.map((track) =>
track.id === this.trackId && canTracktHaveAudio(track)
track.id === this.trackId && canTrackHaveAudio(track)
? { ...track, muted: !track.muted }
: track,
);

130
apps/web/src/lib/project/__tests__/fps.test.ts → apps/web/src/lib/fps/__tests__/fps.test.ts
View File

@ -1,65 +1,65 @@
import { describe, expect, test } from "bun:test";
import {
getHighestImportedVideoFps,
getRaisedProjectFpsForImportedMedia,
} from "@/lib/project/fps";
describe("getHighestImportedVideoFps", () => {
test("returns the highest valid video fps", () => {
expect(
getHighestImportedVideoFps({
mediaAssets: [
{ type: "audio" },
{ type: "video", fps: 30 },
{ type: "image", fps: 120 },
{ type: "video", fps: 60 },
],
}),
).toBe(60);
});
test("ignores missing and invalid fps values", () => {
expect(
getHighestImportedVideoFps({
mediaAssets: [
{ type: "video" },
{ type: "video", fps: 0 },
{ type: "video", fps: -10 },
{ type: "audio", fps: 120 },
],
}),
).toBeNull();
});
});
describe("getRaisedProjectFpsForImportedMedia", () => {
test("raises the project fps to match a higher-fps import", () => {
expect(
getRaisedProjectFpsForImportedMedia({
currentFps: 30,
importedAssets: [{ type: "video", fps: 60 }],
}),
).toBe(60);
});
test("does not lower the project fps for lower-fps imports", () => {
expect(
getRaisedProjectFpsForImportedMedia({
currentFps: 60,
importedAssets: [{ type: "video", fps: 10 }],
}),
).toBeNull();
});
test("ignores non-video imports", () => {
expect(
getRaisedProjectFpsForImportedMedia({
currentFps: 30,
importedAssets: [
{ type: "image", fps: 60 },
{ type: "audio", fps: 120 },
],
}),
).toBeNull();
});
});
import { describe, expect, test } from "bun:test";
import {
getHighestImportedVideoFps,
getRaisedProjectFpsForImportedMedia,
} from "@/lib/fps/utils";
describe("getHighestImportedVideoFps", () => {
test("returns the highest valid video fps", () => {
expect(
getHighestImportedVideoFps({
mediaAssets: [
{ type: "audio" },
{ type: "video", fps: 30 },
{ type: "image", fps: 120 },
{ type: "video", fps: 60 },
],
}),
).toBe(60);
});
test("ignores missing and invalid fps values", () => {
expect(
getHighestImportedVideoFps({
mediaAssets: [
{ type: "video" },
{ type: "video", fps: 0 },
{ type: "video", fps: -10 },
{ type: "audio", fps: 120 },
],
}),
).toBeNull();
});
});
describe("getRaisedProjectFpsForImportedMedia", () => {
test("raises the project fps to match a higher-fps import", () => {
expect(
getRaisedProjectFpsForImportedMedia({
currentFps: 30,
importedAssets: [{ type: "video", fps: 60 }],
}),
).toBe(60);
});
test("does not lower the project fps for lower-fps imports", () => {
expect(
getRaisedProjectFpsForImportedMedia({
currentFps: 60,
importedAssets: [{ type: "video", fps: 10 }],
}),
).toBeNull();
});
test("ignores non-video imports", () => {
expect(
getRaisedProjectFpsForImportedMedia({
currentFps: 30,
importedAssets: [
{ type: "image", fps: 60 },
{ type: "audio", fps: 120 },
],
}),
).toBeNull();
});
});

9
apps/web/src/lib/fps/constants.ts Normal file
View File

@ -0,0 +1,9 @@
export const FPS_PRESETS = [
{ value: "24", label: "24 fps" },
{ value: "25", label: "25 fps" },
{ value: "30", label: "30 fps" },
{ value: "60", label: "60 fps" },
{ value: "120", label: "120 fps" },
] as const;
export const DEFAULT_FPS = 30;

78
apps/web/src/lib/project/fps.ts → apps/web/src/lib/fps/utils.ts
View File

@ -1,39 +1,39 @@
import type { MediaAsset } from "@/lib/media/types";
type MediaAssetFpsInput = Pick<MediaAsset, "type" | "fps">;
export function getHighestImportedVideoFps({
mediaAssets,
}: {
mediaAssets: MediaAssetFpsInput[];
}): number | null {
let highestFps: number | null = null;
for (const asset of mediaAssets) {
const fps = asset.fps ?? Number.NaN;
if (asset.type !== "video") continue;
if (!Number.isFinite(fps) || fps <= 0) continue;
highestFps = highestFps === null ? fps : Math.max(highestFps, fps);
}
return highestFps;
}
export function getRaisedProjectFpsForImportedMedia({
currentFps,
importedAssets,
}: {
currentFps: number;
importedAssets: MediaAssetFpsInput[];
}): number | null {
const highestImportedVideoFps = getHighestImportedVideoFps({
mediaAssets: importedAssets,
});
if (highestImportedVideoFps === null || highestImportedVideoFps <= currentFps) {
return null;
}
return highestImportedVideoFps;
}
import type { MediaAsset } from "@/lib/media/types";
type MediaAssetFpsInput = Pick<MediaAsset, "type" | "fps">;
export function getHighestImportedVideoFps({
mediaAssets,
}: {
mediaAssets: MediaAssetFpsInput[];
}): number | null {
let highestFps: number | null = null;
for (const asset of mediaAssets) {
const fps = asset.fps ?? Number.NaN;
if (asset.type !== "video") continue;
if (!Number.isFinite(fps) || fps <= 0) continue;
highestFps = highestFps === null ? fps : Math.max(highestFps, fps);
}
return highestFps;
}
export function getRaisedProjectFpsForImportedMedia({
currentFps,
importedAssets,
}: {
currentFps: number;
importedAssets: MediaAssetFpsInput[];
}): number | null {
const highestImportedVideoFps = getHighestImportedVideoFps({
mediaAssets: importedAssets,
});
if (highestImportedVideoFps === null || highestImportedVideoFps <= currentFps) {
return null;
}
return highestImportedVideoFps;
}

12
apps/web/src/lib/media/audio.ts
View File

@ -4,7 +4,7 @@ import type {
RetimeConfig,
TimelineTrack,
} from "@/lib/timeline";
import { shouldMaintainPitch } from "@/constants/retime-constants";
import { shouldMaintainPitch } from "@/lib/retime/rate";
import type { MediaAsset } from "@/lib/media/types";
import { applyAudioMasteringToBuffer } from "@/lib/media/audio-mastering";
import type { AudioCapableElement } from "@/lib/timeline/audio-state";
@ -16,7 +16,7 @@ import {
doesElementHaveEnabledAudio,
} from "@/lib/timeline/audio-separation";
import { canElementHaveAudio, hasMediaId } from "@/lib/timeline/element-utils";
import { canTracktHaveAudio } from "@/lib/timeline";
import { canTrackHaveAudio } from "@/lib/timeline";
import { mediaSupportsAudio } from "@/lib/media/media-utils";
import { getSourceTimeAtClipTime, renderRetimedBuffer } from "@/lib/retime";
import { Input, ALL_FORMATS, BlobSource, AudioBufferSink } from "mediabunny";
@ -97,7 +97,7 @@ export async function collectAudioElements({
const pendingElements: Array<Promise<CollectedAudioElement | null>> = [];
for (const track of tracks) {
if (canTracktHaveAudio(track) && track.muted) continue;
if (canTrackHaveAudio(track) && track.muted) continue;
for (const element of track.elements) {
if (!canElementHaveAudio(element)) continue;
@ -108,7 +108,7 @@ export async function collectAudioElements({
: null;
if (!doesElementHaveEnabledAudio({ element, mediaAsset })) continue;
const isTrackMuted = canTracktHaveAudio(track) && track.muted;
const isTrackMuted = canTrackHaveAudio(track) && track.muted;
if (element.type === "audio") {
pendingElements.push(
@ -453,7 +453,7 @@ export async function collectAudioMixSources({
const pendingLibrarySources: Array<Promise<AudioMixSource | null>> = [];
for (const track of tracks) {
if (canTracktHaveAudio(track) && track.muted) continue;
if (canTrackHaveAudio(track) && track.muted) continue;
for (const element of track.elements) {
if (!canElementHaveAudio(element)) continue;
@ -515,7 +515,7 @@ export async function collectAudioClips({
const pendingLibraryClips: Array<Promise<AudioClipSource | null>> = [];
for (const track of tracks) {
const isTrackMuted = canTracktHaveAudio(track) && track.muted;
const isTrackMuted = canTrackHaveAudio(track) && track.muted;
for (const element of track.elements) {
if (!canElementHaveAudio(element)) continue;

9
apps/web/src/lib/panels/constants.ts Normal file
View File

@ -0,0 +1,9 @@
export const PANEL_CONFIG = {
panels: {
tools: 25,
preview: 50,
properties: 25,
mainContent: 50,
timeline: 50,
},
} as const;

7
apps/web/src/lib/preview/constants.ts Normal file
View File

@ -0,0 +1,7 @@
export const PREVIEW_ZOOM_PRESETS = [25, 50, 75, 100, 150, 200];
export const PREVIEW_ZOOM = {
min: 0.25,
max: 16,
step: 1.25,
} as const;

2
apps/web/src/lib/retime/audio-stretch.ts
View File

@ -1,5 +1,5 @@
import { PitchShifter } from "soundtouchjs";
import { clampRetimeRate, shouldMaintainPitch } from "@/constants/retime-constants";
import { clampRetimeRate, shouldMaintainPitch } from "@/lib/retime/rate";
import type { RetimeConfig } from "@/lib/timeline";
import { getSourceTimeAtClipTime } from "./resolve";

1
apps/web/src/lib/retime/index.ts
View File

@ -1,3 +1,4 @@
export * from "./rate";
export * from "./audio-stretch";
export * from "./presets";
export * from "./resolve";

2
apps/web/src/lib/retime/presets.ts
View File

@ -1,5 +1,5 @@
import type { RetimeConfig } from "@/lib/timeline";
import { clampRetimeRate } from "@/constants/retime-constants";
import { clampRetimeRate } from "@/lib/retime/rate";
export function buildConstantRetime({
rate,

55
apps/web/src/constants/retime-constants.ts → apps/web/src/lib/retime/rate.ts
View File

@ -1,30 +1,25 @@
export const DEFAULT_RETIME_RATE = 1;
export const MIN_RETIME_RATE = 0.01;
export const MAX_RETIME_RATE = 5;
export const MAX_PITCH_PRESERVE_RATE = 10;
export function clampRetimeRate({ rate }: { rate: number }): number {
if (!Number.isFinite(rate) || rate <= 0) {
return DEFAULT_RETIME_RATE;
}
return Math.min(Math.max(rate, MIN_RETIME_RATE), MAX_RETIME_RATE);
}
export function canMaintainPitch({ rate }: { rate: number }): boolean {
if (!Number.isFinite(rate) || rate <= 0) {
return false;
}
return clampRetimeRate({ rate }) <= MAX_PITCH_PRESERVE_RATE;
}
export function shouldMaintainPitch({
rate,
maintainPitch,
}: {
rate: number;
maintainPitch?: boolean;
}): boolean {
return maintainPitch === true && canMaintainPitch({ rate });
}
export const DEFAULT_RETIME_RATE = 1;
export const MIN_RETIME_RATE = 0.01;
export const MAX_RETIME_RATE = 5;
export function clampRetimeRate({ rate }: { rate: number }): number {
if (!Number.isFinite(rate) || rate <= 0) {
return DEFAULT_RETIME_RATE;
}
return Math.min(Math.max(rate, MIN_RETIME_RATE), MAX_RETIME_RATE);
}
export function canMaintainPitch({ rate }: { rate: number }): boolean {
return Number.isFinite(rate) && rate > 0;
}
export function shouldMaintainPitch({
rate,
maintainPitch,
}: {
rate: number;
maintainPitch?: boolean;
}): boolean {
return maintainPitch === true && canMaintainPitch({ rate });
}

2
apps/web/src/lib/retime/resolve.ts
View File

@ -1,5 +1,5 @@
import type { RetimeConfig } from "@/lib/timeline";
import { clampRetimeRate } from "@/constants/retime-constants";
import { clampRetimeRate } from "@/lib/retime/rate";
function getSafeRate({ rate }: { rate: number }): number {
return clampRetimeRate({ rate });

12
apps/web/src/lib/text/constants.ts Normal file
View File

@ -0,0 +1,12 @@
export const MIN_FONT_SIZE = 5;
export const MAX_FONT_SIZE = 300;
export const DEFAULT_TEXT_COLOR = "#000000";
/**
* higher value: smaller font size
* lower value: larger font size
*/
export const FONT_SIZE_SCALE_REFERENCE = 90;
export const CORNER_RADIUS_MIN = 0;
export const CORNER_RADIUS_MAX = 100;

1
apps/web/src/lib/timeline/creation.ts Normal file
View File

@ -0,0 +1 @@
export const DEFAULT_NEW_ELEMENT_DURATION_SECONDS = 5;

4
apps/web/src/lib/timeline/defaults.ts
View File

@ -1,4 +1,4 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { DEFAULT_NEW_ELEMENT_DURATION_SECONDS } from "@/lib/timeline/creation";
import type { TTimelineViewState } from "@/lib/project/types";
import type { BlendMode, Transform } from "@/lib/rendering";
import type { TextElement } from "./types";
@ -41,7 +41,7 @@ const defaultTextElement: Omit<TextElement, "id"> = {
textDecoration: "none",
letterSpacing: defaultTextLetterSpacing,
lineHeight: defaultTextLineHeight,
duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
duration: DEFAULT_NEW_ELEMENT_DURATION_SECONDS,
startTime: 0,
trimStart: 0,
trimEnd: 0,

4
apps/web/src/lib/timeline/drag-utils.ts
View File

@ -1,4 +1,4 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
export function getMouseTimeFromClientX({
clientX,
@ -14,6 +14,6 @@ export function getMouseTimeFromClientX({
const mouseX = clientX - containerRect.left + scrollLeft;
return Math.max(
0,
mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
mouseX / (BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel),
);
}

10
apps/web/src/lib/timeline/element-utils.ts
View File

@ -1,4 +1,4 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { DEFAULT_NEW_ELEMENT_DURATION_SECONDS } from "@/lib/timeline/creation";
import {
MASKABLE_ELEMENT_TYPES,
RETIMABLE_ELEMENT_TYPES,
@ -115,7 +115,7 @@ export function buildTextElement({
type: "text",
name: t.name ?? DEFAULTS.text.element.name,
content: t.content ?? DEFAULTS.text.element.content,
duration: t.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
duration: t.duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS,
startTime,
trimStart: 0,
trimEnd: 0,
@ -150,7 +150,7 @@ export function buildEffectElement({
name: capitalizeFirstLetter({ string: instance.type }),
effectType,
params: instance.params,
duration: duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
duration: duration ?? DEFAULT_NEW_ELEMENT_DURATION_SECONDS,
startTime,
trimStart: 0,
trimEnd: 0,
@ -178,7 +178,7 @@ export function buildStickerElement({
stickerId,
intrinsicWidth,
intrinsicHeight,
duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
duration: DEFAULT_NEW_ELEMENT_DURATION_SECONDS,
startTime,
trimStart: 0,
trimEnd: 0,
@ -208,7 +208,7 @@ export function buildGraphicElement({
name: name ?? capitalizeFirstLetter({ string: instance.definitionId }),
definitionId: instance.definitionId,
params: { ...instance.params, ...(params ?? {}) } as ParamValues,
duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
duration: DEFAULT_NEW_ELEMENT_DURATION_SECONDS,
startTime,
trimStart: 0,
trimEnd: 0,

2
apps/web/src/lib/timeline/index.ts
View File

@ -2,7 +2,7 @@ import type { TimelineTrack } from "./types";
export * from "./types";
export * from "./drag";
export * from "./track-utils";
export * from "./track-capabilities";
export * from "./track-element-update";
export * from "./element-utils";
export * from "./audio-separation";

4
apps/web/src/lib/timeline/pixel-utils.ts
View File

@ -1,4 +1,4 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
export const TIMELINE_INDICATOR_LINE_WIDTH_PX = 2;
@ -31,7 +31,7 @@ export function getTimelinePixelsPerSecond({
}: {
zoomLevel: number;
}): number {
return TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
return BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
}
export function timelineTimeToPixels({

4
apps/web/src/lib/timeline/placement/track-factory.ts
View File

@ -1,4 +1,4 @@
import { TRACK_CONFIG } from "@/constants/timeline-constants";
import { DEFAULT_TRACK_NAMES } from "@/lib/timeline/tracks";
import type { TrackType, TimelineTrack } from "@/lib/timeline";
export function buildEmptyTrack({
@ -10,7 +10,7 @@ export function buildEmptyTrack({
type: TrackType;
name?: string;
}): TimelineTrack {
const trackName = name ?? TRACK_CONFIG[type].defaultName;
const trackName = name ?? DEFAULT_TRACK_NAMES[type];
switch (type) {
case "video":

4
apps/web/src/lib/timeline/ruler-utils.ts
View File

@ -1,4 +1,4 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
/**
* frame intervals for labels - starts at 2 so there's always at least
@ -56,7 +56,7 @@ export function getRulerConfig({
zoomLevel: number;
fps: number;
}): RulerConfig {
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const pixelsPerSecond = BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const pixelsPerFrame = pixelsPerSecond / fps;
const labelIntervalSeconds = findOptimalInterval({

3
apps/web/src/lib/timeline/scale.ts Normal file
View File

@ -0,0 +1,3 @@
export const BASE_TIMELINE_PIXELS_PER_SECOND = 50;
export const TIMELINE_ZOOM_MIN = 0.1;
export const TIMELINE_ZOOM_MAX = 100;

4
apps/web/src/lib/timeline/snap-utils.ts
View File

@ -1,5 +1,5 @@
import type { Bookmark, TimelineTrack } from "@/lib/timeline";
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { BOOKMARK_TIME_EPSILON } from "@/lib/timeline/bookmarks";
import { getElementKeyframes } from "@/lib/animation";
@ -107,7 +107,7 @@ export function snapToNearestPoint({
zoomLevel: number;
snapThreshold?: number;
}): SnapResult {
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const pixelsPerSecond = BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel;
const thresholdInSeconds = snapThreshold / pixelsPerSecond;
let closestSnapPoint: SnapPoint | null = null;

20
apps/web/src/lib/timeline/track-capabilities.ts Normal file
View File

@ -0,0 +1,20 @@
import type {
TimelineTrack,
VideoTrack,
AudioTrack,
GraphicTrack,
TextTrack,
EffectTrack,
} from "@/lib/timeline";
export function canTrackHaveAudio(
track: TimelineTrack,
): track is VideoTrack | AudioTrack {
return track.type === "audio" || track.type === "video";
}
export function canTrackBeHidden(
track: TimelineTrack,
): track is VideoTrack | TextTrack | GraphicTrack | EffectTrack {
return track.type !== "audio";
}

62
apps/web/src/lib/timeline/track-utils.ts
View File

@ -1,62 +0,0 @@
import type {
TrackType,
TimelineTrack,
VideoTrack,
AudioTrack,
GraphicTrack,
TextTrack,
EffectTrack,
} from "@/lib/timeline";
import {
TRACK_CONFIG,
ELEMENT_TYPE_CONFIG,
TRACK_GAP,
} from "@/constants/timeline-constants";
export function canTracktHaveAudio(
track: TimelineTrack,
): track is VideoTrack | AudioTrack {
return track.type === "audio" || track.type === "video";
}
export function canTrackBeHidden(
track: TimelineTrack,
): track is VideoTrack | TextTrack | GraphicTrack | EffectTrack {
return track.type !== "audio";
}
export function getElementClasses({ type }: { type: TrackType }) {
return ELEMENT_TYPE_CONFIG[type].background.trim();
}
export function getTrackHeight({ type }: { type: TrackType }): number {
return TRACK_CONFIG[type].height;
}
export function getCumulativeHeightBefore({
tracks,
trackIndex,
}: {
tracks: Array<{ type: TrackType }>;
trackIndex: number;
}): number {
return tracks
.slice(0, trackIndex)
.reduce(
(sum, track) => sum + getTrackHeight({ type: track.type }) + TRACK_GAP,
0,
);
}
export function getTotalTracksHeight({
tracks,
}: {
tracks: Array<{ type: TrackType }>;
}): number {
const tracksHeight = tracks.reduce(
(sum, track) => sum + getTrackHeight({ type: track.type }),
0,
);
const gapsHeight = Math.max(0, tracks.length - 1) * TRACK_GAP;
return tracksHeight + gapsHeight;
}

9
apps/web/src/lib/timeline/tracks.ts Normal file
View File

@ -0,0 +1,9 @@
import type { TrackType } from "@/lib/timeline";
export const DEFAULT_TRACK_NAMES: Record<TrackType, string> = {
video: "Video track",
text: "Text track",
audio: "Audio track",
graphic: "Graphic track",
effect: "Effect track",
} as const;

15
apps/web/src/lib/timeline/zoom-utils.ts
View File

@ -1,4 +1,7 @@
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
import {
BASE_TIMELINE_PIXELS_PER_SECOND,
TIMELINE_ZOOM_MAX,
} from "@/lib/timeline/scale";
const PADDING_MAX_RATIO = 0.75;
const PADDING_MIN_RATIO = 0.15;
@ -16,9 +19,9 @@ export function getTimelineZoomMin({
const contentRatioAtMinZoom = 1 - PADDING_MAX_RATIO;
const availableWidth = safeContainerWidth * contentRatioAtMinZoom;
const zoomToFit =
availableWidth / (safeDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND);
availableWidth / (safeDuration * BASE_TIMELINE_PIXELS_PER_SECOND);
return Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, zoomToFit);
return Math.min(TIMELINE_ZOOM_MAX, zoomToFit);
}
export function getTimelinePaddingPx({
@ -49,7 +52,7 @@ export function getZoomPercent({
zoomLevel: number;
minZoom: number;
}): number {
return (zoomLevel - minZoom) / (TIMELINE_CONSTANTS.ZOOM_MAX - minZoom);
return (zoomLevel - minZoom) / (TIMELINE_ZOOM_MAX - minZoom);
}
/**
@ -59,7 +62,7 @@ export function getZoomPercent({
export function sliderToZoom({
sliderPosition,
minZoom,
maxZoom = TIMELINE_CONSTANTS.ZOOM_MAX,
maxZoom = TIMELINE_ZOOM_MAX,
}: {
sliderPosition: number;
minZoom: number;
@ -75,7 +78,7 @@ export function sliderToZoom({
export function zoomToSlider({
zoomLevel,
minZoom,
maxZoom = TIMELINE_CONSTANTS.ZOOM_MAX,
maxZoom = TIMELINE_ZOOM_MAX,
}: {
zoomLevel: number;
minZoom: number;

5
apps/web/src/services/renderer/scene-builder.ts
View File

@ -11,7 +11,7 @@ import { BlurBackgroundNode } from "./nodes/blur-background-node";
import { EffectLayerNode } from "./nodes/effect-layer-node";
import type { BaseNode } from "./nodes/base-node";
import type { TBackground, TCanvasSize } from "@/lib/project/types";
import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";
import { DEFAULT_BACKGROUND_BLUR_INTENSITY } from "@/lib/background/constants";
import { isMainTrack } from "@/lib/timeline/placement";
const PREVIEW_MAX_IMAGE_SIZE = 2048;
@ -252,7 +252,8 @@ export function buildScene({
const blurNodes = buildBlurBackgroundNodes({
track: mainTrack,
mediaMap,
blurIntensity: background.blurIntensity ?? DEFAULT_BLUR_INTENSITY,
blurIntensity:
background.blurIntensity ?? DEFAULT_BACKGROUND_BLUR_INTENSITY,
});
for (const node of blurNodes) {
rootNode.add(node);

16
apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts
View File

@ -1,10 +1,10 @@
import { describe, expect, test } from "bun:test";
import {
DEFAULT_BLUR_INTENSITY,
DEFAULT_CANVAS_SIZE,
DEFAULT_COLOR,
DEFAULT_FPS,
} from "@/constants/project-constants";
DEFAULT_BACKGROUND_BLUR_INTENSITY,
DEFAULT_BACKGROUND_COLOR,
} from "@/lib/background/constants";
import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/constants";
import { DEFAULT_FPS } from "@/lib/fps/constants";
import type { MediaAssetData } from "@/services/storage/types";
import { getProjectId, transformProjectV1ToV2 } from "../transformers/v1-to-v2";
import {
@ -119,7 +119,7 @@ describe("V1 to V2 Migration", () => {
const background = settings.background as Record<string, unknown>;
expect(background.type).toBe("color");
expect(background.color).toBe(DEFAULT_COLOR);
expect(background.color).toBe(DEFAULT_BACKGROUND_COLOR);
});
test("uses default blur intensity when missing", async () => {
@ -135,7 +135,9 @@ describe("V1 to V2 Migration", () => {
const settings = result.project.settings as Record<string, unknown>;
const background = settings.background as Record<string, unknown>;
expect(background.blurIntensity).toBe(DEFAULT_BLUR_INTENSITY);
expect(background.blurIntensity).toBe(
DEFAULT_BACKGROUND_BLUR_INTENSITY,
);
});
test("preserves currentSceneId", async () => {

24
apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
View File

@ -1,9 +1,9 @@
import {
DEFAULT_BLUR_INTENSITY,
DEFAULT_CANVAS_SIZE,
DEFAULT_COLOR,
DEFAULT_FPS,
} from "@/constants/project-constants";
DEFAULT_BACKGROUND_BLUR_INTENSITY,
DEFAULT_BACKGROUND_COLOR,
} from "@/lib/background/constants";
import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/constants";
import { DEFAULT_FPS } from "@/lib/fps/constants";
import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
import type { MediaAssetData } from "@/services/storage/types";
import type { MigrationResult, ProjectRecord } from "./types";
@ -739,14 +739,17 @@ function getBackgroundValue({
type: "blur",
blurIntensity: getNumberValue({
value: value.blurIntensity,
fallback: DEFAULT_BLUR_INTENSITY,
fallback: DEFAULT_BACKGROUND_BLUR_INTENSITY,
}),
};
}
return {
type: "color",
color: getStringValue({ value: value.color, fallback: DEFAULT_COLOR }),
color: getStringValue({
value: value.color,
fallback: DEFAULT_BACKGROUND_COLOR,
}),
};
}
@ -755,14 +758,17 @@ function getBackgroundValue({
type: "blur",
blurIntensity: getNumberValue({
value: blurIntensity,
fallback: DEFAULT_BLUR_INTENSITY,
fallback: DEFAULT_BACKGROUND_BLUR_INTENSITY,
}),
};
}
return {
type: "color",
color: getStringValue({ value: backgroundColor, fallback: DEFAULT_COLOR }),
color: getStringValue({
value: backgroundColor,
fallback: DEFAULT_BACKGROUND_COLOR,
}),
};
}

2
apps/web/src/stores/editor-store.ts
View File

@ -1,5 +1,5 @@
import { create } from "zustand";
import { DEFAULT_CANVAS_PRESETS } from "@/constants/project-constants";
import { DEFAULT_CANVAS_PRESETS } from "@/lib/canvas/constants";
import type { TCanvasSize } from "@/lib/project/types";
interface EditorState {

2
apps/web/src/stores/panel-store.ts
View File

@ -1,6 +1,6 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { PANEL_CONFIG } from "@/constants/editor-constants";
import { PANEL_CONFIG } from "@/lib/panels/constants";
export interface PanelSizes {
tools: number;