@@ -220,7 +220,7 @@ export default function VideoEditor() {
handleExport,
status,
cancelExport,
- onToggleShortcutsModal: () => {},
+ onToggleShortcutsModal: () => { },
});
const [copied, setCopied] = useState(false);
@@ -238,6 +238,53 @@ export default function VideoEditor() {
const toggleSection = (key: keyof typeof openSections) =>
setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
const downloadRef = useRef(null);
+ const parentRef = useRef(null);
+ const resizeRef = useRef(null);
+ const exportRef = useRef(null);
+ const [resizeHeight, setResizeHeight] = useState(0);
+ const [exportHeight, setExportHeight] = useState(0);
+ const [stickyOffset, setStickyOffset] = useState(0);
+
+ useEffect(() => {
+ if (typeof window === "undefined" || typeof ResizeObserver === "undefined") return;
+ const observer = new ResizeObserver((entries) => {
+ for (let entry of entries) {
+ if (entry.target === resizeRef.current) {
+ setResizeHeight(entry.target.getBoundingClientRect().height);
+ } else if (entry.target === exportRef.current) {
+ setExportHeight(entry.target.getBoundingClientRect().height);
+ }
+ }
+ });
+ if (resizeRef.current) observer.observe(resizeRef.current);
+ if (exportRef.current) observer.observe(exportRef.current);
+ return () => observer.disconnect();
+ }, [file]);
+
+ useEffect(() => {
+ if (typeof window === "undefined") return;
+ const handleScroll = () => {
+ if (!parentRef.current) return;
+ const parentRect = parentRef.current.getBoundingClientRect();
+ const parentTop = parentRect.top;
+ const parentHeight = parentRect.height;
+ const rightColumnHeight = resizeHeight + exportHeight + 40;
+ const maxOffset = Math.max(0, parentHeight - rightColumnHeight);
+ const currentOffset = -parentTop + 60;
+ if (parentTop < 60) {
+ setStickyOffset(Math.min(maxOffset, currentOffset));
+ } else {
+ setStickyOffset(0);
+ }
+ };
+ window.addEventListener("scroll", handleScroll);
+ window.addEventListener("resize", handleScroll);
+ handleScroll();
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ window.removeEventListener("resize", handleScroll);
+ };
+ }, [file, resizeHeight, exportHeight]);
/**
* Updates a text overlay property and syncs with recipe.
@@ -296,8 +343,8 @@ export default function VideoEditor() {
const qualityLabel = recipe.quality <= 21
? "High"
: recipe.quality <= 25
- ? "Balanced"
- : "Small file";
+ ? "Balanced"
+ : "Small file";
return `Exporting to ${width}×${height} ${recipe.format.toUpperCase()} • ${framingLabel} • ${speedLabel} • Quality: ${qualityLabel}`;
}, [recipe]);
@@ -326,372 +373,113 @@ export default function VideoEditor() {
+
+
+ + REFRAME +
++ Your video, any format +
+
+
+ No login. No ads. 100% private.
+
+
+
+ No login. No ads. 100% private - your video never leaves your device.
+
+ 0 || exportHeight > 0 ? `${resizeHeight + exportHeight + 40}px` : undefined }}
>
-
- - REFRAME -
-- Your video, any format -
-
-
- No login. No ads. 100% private.
-
-
-
- No login. No ads. 100% private - your video never leaves your device.
-
-
-
-
-
-
-
+ {/* BLOCK 1: Upload & Video Preview (Left Column) */}
+
-
- )}
-
- {file && (
- Upload a video to get started
-Supports MP4, MOV, WebM and more
-
-
- )}
-
-
-
+
- ⚠️ Large file - processing may take several minutes -
- )} - {file && ( -
-
-
-
-
- - › - Advanced settings - -
- -
-
-
-
+ {!file && (
+
- {/* Brightness */}
-
-
- } title="Output format" delay={190}>
-
-
- {/* Contrast */}
-
-
-
-
- updateRecipe({ brightness: Number(e.target.value) })}
- aria-label="Adjust brightness"
- className="w-full accent-film-600"
- />
-
-
- {/* Saturation */}
-
-
-
-
- updateRecipe({ contrast: Number(e.target.value) })}
- aria-label="Adjust contrast"
- className="w-full accent-film-600"
- />
-
-
-
-
-
-
- updateRecipe({ saturation: Number(e.target.value) })}
- aria-label="Adjust saturation"
- className="w-full accent-film-600"
- />
-
-
- - › - Advanced settings - -
- -
-
-
+
)}
- {status === "error" && error && (
- Upload a video to get started
+Supports MP4, MOV, WebM and more
-
diff --git a/src/components/__tests__/VideoEditorTabOrder.test.tsx b/src/components/__tests__/VideoEditorTabOrder.test.tsx
new file mode 100644
index 00000000..7f0a69af
--- /dev/null
+++ b/src/components/__tests__/VideoEditorTabOrder.test.tsx
@@ -0,0 +1,111 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { render } from '@testing-library/react'
+import VideoEditor from '../VideoEditor'
+
+// Mock sub-hooks and sub-components that are not necessary for testing DOM layout structure
+vi.mock('@/hooks/useVideoEditor', () => ({
+ useVideoEditor: () => ({
+ file: new File([""], "test.mp4", { type: "video/mp4" }),
+ duration: 60,
+ recipe: {
+ preset: 'vertical-9-16',
+ customWidth: 1080,
+ customHeight: 1920,
+ framing: 'fill',
+ trimStart: 0,
+ trimEnd: null,
+ rotate: 0,
+ speed: 1,
+ quality: 23,
+ format: 'mp4',
+ brightness: 0,
+ contrast: 1,
+ saturation: 1,
+ soundOnCompletion: true,
+ },
+ status: 'idle',
+ progress: 0,
+ result: null,
+ error: null,
+ exportStartedAt: null,
+ updateRecipe: vi.fn(),
+ handleFileSelect: vi.fn(),
+ fileError: '',
+ handleExport: vi.fn(),
+ cancelExport: vi.fn(),
+ reset: vi.fn(),
+ resetSettings: vi.fn(),
+ videoRef: { current: null },
+ seekTo: vi.fn(),
+ overlayFile: null,
+ setOverlayFile: vi.fn(),
+ overlayPosition: 'bottom-right',
+ setOverlayPosition: vi.fn(),
+ overlaySize: 150,
+ setOverlaySize: vi.fn(),
+ overlayOpacity: 100,
+ setOverlayOpacity: vi.fn(),
+ recommendedPreset: null,
+ currentTime: 0,
+ toggleSound: vi.fn(),
+ })
+}))
+
+vi.mock('@/hooks/useKeyboardShortcuts', () => ({
+ useKeyboardShortcuts: vi.fn()
+}))
+
+vi.mock('../LottiePlayer', () => ({
+ default: () =>
+}))
+
+describe('VideoEditor Tab Order & DOM Restructure', () => {
+ it('reorders DOM elements in logical reading/tab order: Upload -> Preset -> Framing -> Trim -> Rotate -> Audio -> Quality -> Export', () => {
+ const { container } = render(React.createElement(VideoEditor))
+
+ // Query for key elements representing each step
+ const fileUpload = container.querySelector('[id="upload-zone"]') || container.querySelector('button.text-film-600');
+ const resizeSection = container.querySelector('[aria-controls="resize-panel"]');
+ const trimSection = container.querySelector('[aria-controls="trim-panel"]');
+ const rotateSection = Array.from(container.querySelectorAll('[aria-controls="rotation-panel"]')).find(el => !el.closest('details'));
+ const audioSection = container.querySelector('[aria-controls="audio-panel"]');
+ const qualitySection = Array.from(container.querySelectorAll('[aria-controls="export-panel"]')).find(el => !el.closest('details'));
+ const exportButton = container.querySelector('#export-button');
+
+ // All controls must exist
+ expect(fileUpload).toBeTruthy();
+ expect(resizeSection).toBeTruthy();
+ expect(trimSection).toBeTruthy();
+ expect(rotateSection).toBeTruthy();
+ expect(audioSection).toBeTruthy();
+ expect(qualitySection).toBeTruthy();
+ expect(exportButton).toBeTruthy();
+
+ // Verify sequential DOM positions to guarantee logical focus order
+ const elementsInDOMOrder = [
+ fileUpload,
+ resizeSection,
+ trimSection,
+ rotateSection,
+ audioSection,
+ qualitySection,
+ exportButton
+ ];
+
+ // Find all focusable elements in the rendered container to verify their raw DOM order
+ const allRenderedElements = Array.from(container.querySelectorAll('*'));
+
+ const indices = elementsInDOMOrder.map(el => allRenderedElements.indexOf(el!));
+
+ // Check that each index is strictly greater than the previous one
+ for (let i = 0; i < indices.length - 1; i++) {
+ const current = indices[i];
+ const next = indices[i + 1];
+ expect(current).toBeDefined();
+ expect(next).toBeDefined();
+ expect(current!).toBeLessThan(next!);
+ }
+ })
+})
diff --git a/vitest.config.ts b/vitest.config.ts
index 220799df..968b8956 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,4 +1,5 @@
import { defineConfig } from 'vitest/config'
+import path from 'path'
export default defineConfig({
oxc: {
@@ -6,6 +7,11 @@ export default defineConfig({
runtime: 'automatic',
},
},
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
test: {
environment: 'jsdom',
globals: true,
-
- Error
-{error}
+ {file && ( +
+
- )}
-
- {status === "done" && result && (
-
+
-
- {!error.includes("Validation Failed") && (
-
- )}
-
-
)}
+ {file && file.size > 100 * 1024 * 1024 && (
+
+
+ )}
+
+ {/* BLOCK 2: Preset & Framing (Resize & Aspect Ratio) (Right Column) */}
+ + ⚠️ Large file - processing may take several minutes +
+ 0 || exportHeight > 0 ? `${stickyOffset}px` : undefined,
+ animationDelay: "50ms"
+ }}
+ >
{!file && (
-
+
)}
-
+ {/* BLOCK 3: Trim & Rotate (Left Column) */}
+ {file && (
+ Getting Started
@@ -700,7 +488,11 @@ export default function VideoEditor() {
+
+
+
+
+ )}
+
+ {/* BLOCK 4: Audio & Quality/Export Settings (Left Column) */}
+ {file && (
+
+
+
+
+ + › + Advanced settings + +
+ +
+
+
+
+ )}
+
+ {/* STATUS & RESULTS: (Left Column) */}
+ {status === "error" && error && (
+
+
+
+ {/* Brightness */}
+
+
+ } title="Output format" delay={190}>
+
+
+ {/* Contrast */}
+
+
+
+
+ updateRecipe({ brightness: Number(e.target.value) })}
+ aria-label="Adjust brightness"
+ className="w-full accent-film-600"
+ />
+
+
+ {/* Saturation */}
+
+
+
+
+ updateRecipe({ contrast: Number(e.target.value) })}
+ aria-label="Adjust contrast"
+ className="w-full accent-film-600"
+ />
+
+
+
+
+
+
+ updateRecipe({ saturation: Number(e.target.value) })}
+ aria-label="Adjust saturation"
+ className="w-full accent-film-600"
+ />
+
+
+ + › + Advanced settings + +
+ +
+
+
+
+ )}
+
+ {status === "done" && result && (
+
+
+
+ {!error.includes("Validation Failed") && (
+
+ )}
+ Error
+{error}
+
+
+ )}
+
+ {/* BLOCK 5: Keyboard Shortcuts & Export Button (Right Column) */}
+ 0 ? `${stickyOffset + resizeHeight + 20}px` : undefined
+ }}
+ >
+
+ {/* CLEAR-FIX element to wrap floats inside parent */}
+
{isMac ? "⌘" : "Ctrl"} + Enter to export
)}