lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-10-03 11:07:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prevent click jitter from shifting clips and restore export spacing

Browse Source
This commit is contained in:
webadderall
2026-09-19 18:12:02 +10:00
parent baea6afb90
commit 3e53a8d838
6 changed files with 112 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/layout/EditorExportMenu.tsx
+10 -5
View File
@@ -112,9 +112,14 @@ export function EditorExportMenu(props: Props) {
</span>
</Button>
</PopoverTrigger>
<PopoverContent align="end" sideOffset={10} className="w-[360px] p-0">
<PopoverContent
aria-label="Export"
align="end"
sideOffset={10}
className="w-[360px] p-0"
>
{isExporting ? (
<Card className="rounded-none bg-transparent p-1 text-foreground shadow-none">
<Card className="rounded-none bg-transparent p-5 text-foreground shadow-none">
<div className="mb-3 flex items-center justify-between gap-3">
<div>
<p className="text-sm font-semibold text-foreground">
@@ -186,7 +191,7 @@ export function EditorExportMenu(props: Props) {
) : null}
</Card>
) : exportError ? (
<Card className="rounded-none bg-transparent p-1 text-foreground shadow-none">
<Card className="rounded-none bg-transparent p-5 text-foreground shadow-none">
<p className="text-sm font-semibold text-foreground">
{t("editor.exportStatus.issue", "Export issue")}
</p>
@@ -241,7 +246,7 @@ export function EditorExportMenu(props: Props) {
</div>
</Card>
) : exportedFilePath ? (
<Card className="rounded-none bg-transparent p-1 text-foreground shadow-none">
<Card className="rounded-none bg-transparent p-5 text-foreground shadow-none">
<p className="text-sm font-semibold text-foreground">
{t("editor.exportStatus.complete", "Export complete")}
</p>
@@ -305,7 +310,7 @@ export function EditorExportMenu(props: Props) {
mp4OutputDimensions={mp4OutputDimensions}
gifOutputDimensions={gifOutputDimensions}
onExport={handleStartExportFromDropdown}
className="rounded-none bg-transparent p-1 shadow-none"
className="rounded-none bg-transparent p-5 shadow-none"
/>
)}
</PopoverContent>
src/components/video-editor/timeline/components/wrapper/TimelineWrapper.tsx
+10 -1
View File
@@ -1,3 +1,4 @@
import { KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
import type {
DragEndEvent,
DragMoveEvent,
@@ -44,10 +45,16 @@ export default function TimelineWrapper({
onLiveSpanPreviewChange,
onDraggingChange,
}: TimelineWrapperProps) {
// Treat small pointer jitter as a selection, never as a persisted timeline edit.
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
useSensor(KeyboardSensor),
);
const totalMs = Math.max(0, Math.round(videoDuration * 1000));
const onResizeEnd = useCallback(
(event: ResizeEndEvent) => {
if (Math.abs(event.delta.x) <= 4) return;
const updatedSpan = event.active.data.current.getSpanFromResizeEvent?.(event);
if (!updatedSpan) return;
@@ -66,6 +73,7 @@ export default function TimelineWrapper({
const onDragEnd = useCallback(
(event: DragEndEvent) => {
if (Math.hypot(event.delta.x, event.delta.y) <= 4) return;
const proposedRowId = event.over?.id as string;
const updatedSpan = event.active.data.current.getSpanFromDragEvent?.(event);
if (!updatedSpan || !proposedRowId) return;
@@ -174,7 +182,7 @@ export default function TimelineWrapper({
} else {
showTooltip(null);
}
const moved = Math.hypot(event.delta?.x ?? 0, event.delta?.y ?? 0) > 0.01;
const moved = Math.hypot(event.delta?.x ?? 0, event.delta?.y ?? 0) > 4;
if (moved) {
onLiveSpanPreviewChange?.(event.active.id as string, previewSpan);
}
@@ -249,6 +257,7 @@ export default function TimelineWrapper({
return (
<TimelineContext
sensors={sensors}
range={range}
onRangeChanged={handleRangeChange}
onResizeEnd={onResizeEndWithTooltip}