From f750c457651e80ae96a6828f94f24ab98c66a36b Mon Sep 17 00:00:00 2001 From: David <48634587+DavidHDev@users.noreply.github.com> Date: Wed, 20 Aug 2025 00:23:19 +0300 Subject: [PATCH 01/20] fix: adjust padding in HeaderBase for landing page (#563) --- README.md | 2 +- apps/web/src/components/header.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 99ab706e..6de558f9 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ OpenCut Logo -

OpenCut (prev AppCut)

+

OpenCut

A free, open-source video editor for web, desktop, and mobile.

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index 4d68efb2..2bfc82b7 100644 --- a/apps/web/src/components/header.tsx +++ b/apps/web/src/components/header.tsx @@ -46,7 +46,7 @@ export function Header() { return (
From ffc1d7526ee0309a2f071ca9f5b7469be4299a0e Mon Sep 17 00:00:00 2001 From: Megh Bari <142393952+megh-bari@users.noreply.github.com> Date: Wed, 20 Aug 2025 02:54:09 +0530 Subject: [PATCH 02/20] feat(rename-modal): enhance input visibility in dark theme with border (#561) --- apps/web/src/components/rename-project-dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/rename-project-dialog.tsx b/apps/web/src/components/rename-project-dialog.tsx index c50f9f71..dd8dfcc4 100644 --- a/apps/web/src/components/rename-project-dialog.tsx +++ b/apps/web/src/components/rename-project-dialog.tsx @@ -51,7 +51,7 @@ export function RenameProjectDialog({ } }} placeholder="Enter a new name" - className="mt-4" + className="mt-4 bg-background border-2 border-border" /> From 0e3c4ef13bba5c25583ea75e7f5cb0c814919610 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Fri, 22 Aug 2025 21:08:33 +0200 Subject: [PATCH 03/20] chore: gitignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index b4756346..31d36b92 100644 --- a/.gitignore +++ b/.gitignore @@ -29,4 +29,6 @@ node_modules # cursor bun.lockb apps/transcription/__pycache__ -apps/transcription/env \ No newline at end of file +apps/transcription/env + +apps/bg-remover/env \ No newline at end of file From fedde33cba8fd76945971c8056625df3bb05ec23 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Fri, 22 Aug 2025 21:08:43 +0200 Subject: [PATCH 04/20] claude.md --- CLAUDE.md | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..8bd9863d --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,168 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +OpenCut is a free, open-source video editor built with Next.js, focusing on privacy (no server processing), multi-track timeline editing, and real-time preview. The project is a monorepo using Turborepo with multiple apps including a web application, desktop app (Tauri), background remover tools, and transcription services. + +## Essential Commands + +**Development:** +```bash +# Root level development +bun dev # Start all apps in development mode +bun build # Build all apps +bun lint # Lint all code using Ultracite +bun format # Format all code using Ultracite + +# Web app specific (from apps/web/) +cd apps/web +bun run dev # Start Next.js development server with Turbopack +bun run build # Build for production +bun run lint # Run Biome linting +bun run lint:fix # Fix linting issues automatically +bun run format # Format code with Biome + +# Database operations (from apps/web/) +bun run db:generate # Generate Drizzle migrations +bun run db:migrate # Run migrations +bun run db:push:local # Push schema to local development database +bun run db:push:prod # Push schema to production database +``` + +**Testing:** +- No unified test commands are currently configured +- Individual apps may have their own test setups + +## Architecture & Key Components + +### State Management +The application uses **Zustand** for state management with separate stores for different concerns: +- **editor-store.ts**: Canvas presets, layout guides, app initialization +- **timeline-store.ts**: Timeline tracks, elements, playback state +- **media-store.ts**: Media files and asset management +- **playback-store.ts**: Video playback controls and timing +- **project-store.ts**: Project-level data and persistence +- **panel-store.ts**: UI panel visibility and layout +- **keybindings-store.ts**: Keyboard shortcut management +- **sounds-store.ts**: Audio effects and sound management +- **stickers-store.ts**: Sticker/graphics management + +### Storage System +**Multi-layer storage approach:** +- **IndexedDB**: Projects, saved sounds, and structured data +- **OPFS (Origin Private File System)**: Large media files for better performance +- **Storage Service** (`lib/storage/`): Abstraction layer managing both storage types + +### Editor Architecture +**Core editor components:** +- **Timeline Canvas**: Custom canvas-based timeline with tracks and elements +- **Preview Panel**: Real-time video preview (currently DOM-based, planned binary refactor) +- **Media Panel**: Asset management with drag-and-drop support +- **Properties Panel**: Context-sensitive element properties + +### Media Processing +- **FFmpeg Integration**: Client-side video processing using @ffmpeg/ffmpeg +- **Background Removal**: Python-based tools with multiple AI models (U2Net, SAM, Gemini) +- **Transcription**: Separate service for audio-to-text conversion + +## Development Focus Areas + +**✅ Recommended contribution areas:** +- Timeline functionality and UI improvements +- Project management features +- Performance optimizations +- Bug fixes in existing functionality +- UI/UX improvements outside preview panel +- Documentation and testing + +**⚠️ Areas to avoid (pending refactor):** +- Preview panel enhancements (fonts, stickers, effects) +- Export functionality improvements +- Preview rendering optimizations + +**Reason:** The preview system is planned for a major refactor from DOM-based rendering to binary rendering for consistency with export and better performance. + +## Code Quality Standards + +**Linting & Formatting:** +- Uses **Biome** for JavaScript/TypeScript linting and formatting +- Extends **Ultracite** configuration for strict type safety and AI-friendly code +- Comprehensive accessibility (a11y) rules enforced +- Zero configuration approach with subsecond performance + +**Key coding standards from Ultracite:** +- Strict TypeScript with no `any` types +- No React imports (uses automatic JSX runtime) +- Comprehensive accessibility requirements +- Use `for...of` instead of `Array.forEach` +- No TypeScript enums, use const objects +- Always include error handling with try-catch + +## Environment Setup + +**Required environment variables (apps/web/.env.local):** +```bash +# Database +DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut" + +# Authentication +BETTER_AUTH_SECRET="your-generated-secret-here" +BETTER_AUTH_URL="http://localhost:3000" + +# Redis +UPSTASH_REDIS_REST_URL="http://localhost:8079" +UPSTASH_REDIS_REST_TOKEN="example_token" + +# Content Management +MARBLE_WORKSPACE_KEY="workspace-key" +NEXT_PUBLIC_MARBLE_API_URL="https://api.marblecms.com" +``` + +**Docker services:** +```bash +# Start local database and Redis +docker-compose up -d +``` + +## Project Structure + +**Monorepo layout:** +- `apps/web/` - Main Next.js application +- `apps/desktop/` - Tauri desktop application +- `apps/bg-remover/` - Python background removal tools +- `apps/transcription/` - Audio transcription service +- `packages/` - Shared packages (auth, database) + +**Web app structure:** +- `src/components/` - React components organized by feature +- `src/stores/` - Zustand state management +- `src/hooks/` - Custom React hooks +- `src/lib/` - Utility functions and services +- `src/types/` - TypeScript type definitions +- `src/app/` - Next.js app router pages and API routes + +## Common Patterns + +**Error handling:** +```typescript +try { + const result = await processData(); + return { success: true, data: result }; +} catch (error) { + console.error('Operation failed:', error); + return { success: false, error: error.message }; +} +``` + +**Store usage:** +```typescript +const { tracks, addTrack, updateTrack } = useTimelineStore(); +``` + +**Media processing:** +```typescript +import { processVideo } from '@/lib/ffmpeg-utils'; +const processedVideo = await processVideo(inputFile, options); +``` \ No newline at end of file From 7756ed0d801f382f040f04ba58448040c5b01084 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Fri, 22 Aug 2025 23:02:43 +0200 Subject: [PATCH 05/20] ultracite --- .cursor/rules/ultracite.mdc | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.cursor/rules/ultracite.mdc b/.cursor/rules/ultracite.mdc index 392683c8..4a6b29fe 100644 --- a/.cursor/rules/ultracite.mdc +++ b/.cursor/rules/ultracite.mdc @@ -42,9 +42,13 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c - Don't insert comments as text nodes. - Use `<>...` instead of `...`. +### Function Parameters and Props +- Always use destructured props objects instead of individual parameters in functions. +- Example: `function helloWorld({ prop }: { prop: string })` instead of `function helloWorld(param: string)`. +- This applies to all functions, not just React components. + ### Correctness and Safety - Don't assign a value to itself. -- Use props instead of parameters in all functions. - Avoid unused imports and variables. - Don't use await inside loops. - Don't hardcode sensitive data like API keys and tokens. @@ -86,4 +90,4 @@ try { } catch (e) { console.log(e); } -``` \ No newline at end of file +``` From a4f2273e25995be234f20fb1c40d410620706e20 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sat, 23 Aug 2025 11:00:59 +0200 Subject: [PATCH 06/20] feat: mediabunny + preview canvas refactor --- .../editor/media-panel/views/captions.tsx | 2 +- .../src/components/editor/preview-panel.tsx | 538 +++++++++++------- apps/web/src/lib/media-processing.ts | 25 +- .../{ffmpeg-utils.ts => mediabunny-utils.ts} | 299 +++------- apps/web/src/lib/timeline-renderer.ts | 179 ++++++ bun.lock | 11 +- package.json | 1 + 7 files changed, 593 insertions(+), 462 deletions(-) rename apps/web/src/lib/{ffmpeg-utils.ts => mediabunny-utils.ts} (53%) create mode 100644 apps/web/src/lib/timeline-renderer.ts diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx index 4fe2cbd7..6e18781c 100644 --- a/apps/web/src/components/editor/media-panel/views/captions.tsx +++ b/apps/web/src/components/editor/media-panel/views/captions.tsx @@ -3,7 +3,7 @@ import { PropertyGroup } from "../../properties-panel/property-item"; import { BaseView } from "./base-view"; import { Language, LanguageSelect } from "@/components/language-select"; import { useState, useRef, useEffect } from "react"; -import { extractTimelineAudio } from "@/lib/ffmpeg-utils"; +import { extractTimelineAudio } from "@/lib/mediabunny-utils"; import { encryptWithRandomKey, arrayBufferToBase64 } from "@/lib/zk-encryption"; import { useTimelineStore } from "@/stores/timeline-store"; import { Loader2, Shield, Trash2, Upload } from "lucide-react"; diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 42c4becc..99c4edef 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -5,16 +5,19 @@ import { TimelineElement, TimelineTrack } from "@/types/timeline"; import { useMediaStore, type MediaItem } from "@/stores/media-store"; import { usePlaybackStore } from "@/stores/playback-store"; import { useEditorStore } from "@/stores/editor-store"; -import { VideoPlayer } from "@/components/ui/video-player"; -import { AudioPlayer } from "@/components/ui/audio-player"; import { Button } from "@/components/ui/button"; import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react"; import { useState, useRef, useEffect, useCallback } from "react"; +import { VideoSampleSink } from "mediabunny"; +import { renderTimelineFrame } from "@/lib/timeline-renderer"; import { cn } from "@/lib/utils"; import { formatTimeCode } from "@/lib/time"; import { EditableTimecode } from "@/components/ui/editable-timecode"; -import { FONT_CLASS_MAP } from "@/lib/font-config"; -import { DEFAULT_CANVAS_SIZE, DEFAULT_FPS, useProjectStore } from "@/stores/project-store"; +import { + DEFAULT_CANVAS_SIZE, + DEFAULT_FPS, + useProjectStore, +} from "@/stores/project-store"; import { TextElementDragState } from "@/types/editor"; import { Popover, @@ -37,8 +40,20 @@ export function PreviewPanel() { const { tracks, getTotalDuration, updateTextElement } = useTimelineStore(); const { mediaItems } = useMediaStore(); const { currentTime, toggle, setCurrentTime } = usePlaybackStore(); + const { isPlaying, volume, muted } = usePlaybackStore(); const { activeProject } = useProjectStore(); const previewRef = useRef(null); + const canvasRef = useRef(null); + const lastFrameTimeRef = useRef(0); + const renderSeqRef = useRef(0); + const offscreenCanvasRef = useRef( + null + ); + + const audioContextRef = useRef(null); + const audioGainRef = useRef(null); + const audioBuffersRef = useRef>(new Map()); + const playingSourcesRef = useRef>(new Set()); const containerRef = useRef(null); const [previewDimensions, setPreviewDimensions] = useState({ width: 0, @@ -262,6 +277,296 @@ export function PreviewPanel() { const activeElements = getActiveElements(); + // Ensure first frame after mount/seek renders immediately + useEffect(() => { + const onSeek = () => { + lastFrameTimeRef.current = -Infinity; + renderSeqRef.current++; + }; + window.addEventListener("playback-seek", onSeek as EventListener); + lastFrameTimeRef.current = -Infinity; + return () => { + window.removeEventListener("playback-seek", onSeek as EventListener); + }; + }, []); + + // Web Audio: schedule only on play/pause/seek/volume/mute changes + useEffect(() => { + const stopAll = () => { + for (const src of playingSourcesRef.current) { + try { + src.stop(); + } catch {} + } + playingSourcesRef.current.clear(); + }; + + type WebAudioWindow = Window & { + AudioContext?: typeof AudioContext; + webkitAudioContext?: typeof AudioContext; + }; + const ensureAudioGraph = async () => { + if (!audioContextRef.current) { + const win = window as WebAudioWindow; + const Ctx = win.AudioContext ?? win.webkitAudioContext; + if (!Ctx) return; + audioContextRef.current = new Ctx(); + } + if (!audioGainRef.current) { + audioGainRef.current = audioContextRef.current!.createGain(); + audioGainRef.current.connect(audioContextRef.current!.destination); + } + if (audioContextRef.current!.state === "suspended") { + try { + await audioContextRef.current!.resume(); + } catch {} + } + const gainValue = muted ? 0 : Math.max(0, Math.min(1, volume)); + audioGainRef.current!.gain.setValueAtTime( + gainValue, + audioContextRef.current!.currentTime + ); + }; + + const scheduleNow = async () => { + await ensureAudioGraph(); + const audioCtx = audioContextRef.current!; + const gain = audioGainRef.current!; + + const tracksSnapshot = useTimelineStore.getState().tracks; + const mediaList = useMediaStore.getState().mediaItems; + const idToMedia = new Map(mediaList.map((m) => [m.id, m] as const)); + const playbackNow = usePlaybackStore.getState().currentTime; + + const audible: Array<{ + id: string; + elementStart: number; + trimStart: number; + trimEnd: number; + duration: number; + muted: boolean; + trackMuted: boolean; + }> = []; + const uniqueIds = new Set(); + for (const track of tracksSnapshot) { + for (const element of track.elements) { + if (element.type !== "media") continue; + const media = idToMedia.get(element.mediaId); + if (!media || media.type !== "audio") continue; + const visibleDuration = + element.duration - element.trimStart - element.trimEnd; + if (visibleDuration <= 0) continue; + const localTime = playbackNow - element.startTime + element.trimStart; + if (localTime < 0 || localTime >= visibleDuration) continue; + audible.push({ + id: media.id, + elementStart: element.startTime, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + duration: element.duration, + muted: !!element.muted, + trackMuted: !!track.muted, + }); + uniqueIds.add(media.id); + } + } + + if (audible.length === 0) return; + + // Decode buffers as needed + const decodePromises: Array> = []; + for (const id of uniqueIds) { + if (!audioBuffersRef.current.has(id)) { + const mediaItem = idToMedia.get(id); + if (!mediaItem) continue; + const p = (async () => { + const arr = await mediaItem.file.arrayBuffer(); + const buf = await audioCtx.decodeAudioData(arr.slice(0)); + audioBuffersRef.current.set(id, buf); + })(); + decodePromises.push(p); + } + } + await Promise.all(decodePromises); + + const startAt = audioCtx.currentTime + 0.02; + for (const entry of audible) { + if (entry.muted || entry.trackMuted) continue; + const buffer = audioBuffersRef.current.get(entry.id); + if (!buffer) continue; + const visibleDuration = + entry.duration - entry.trimStart - entry.trimEnd; + const localTime = Math.max( + 0, + playbackNow - entry.elementStart + entry.trimStart + ); + const playDuration = Math.max(0, visibleDuration - localTime); + if (playDuration <= 0) continue; + const src = audioCtx.createBufferSource(); + src.buffer = buffer; + src.connect(gain); + try { + src.start(startAt, localTime, playDuration); + playingSourcesRef.current.add(src); + } catch {} + } + }; + + const onSeek = () => { + if (!isPlaying) return; + for (const src of playingSourcesRef.current) { + try { + src.stop(); + } catch {} + } + playingSourcesRef.current.clear(); + void scheduleNow(); + }; + + // Apply volume/mute changes immediately + void ensureAudioGraph(); + + // Start/stop on play state changes + for (const src of playingSourcesRef.current) { + try { + src.stop(); + } catch {} + } + playingSourcesRef.current.clear(); + if (isPlaying) { + void scheduleNow(); + } + + window.addEventListener("playback-seek", onSeek as EventListener); + return () => { + window.removeEventListener("playback-seek", onSeek as EventListener); + for (const src of playingSourcesRef.current) { + try { + src.stop(); + } catch {} + } + playingSourcesRef.current.clear(); + }; + }, [isPlaying, volume, muted, mediaItems]); + + // Canvas: draw current frame for visible elements using offscreen compositing + useEffect(() => { + const draw = async () => { + const canvas = canvasRef.current; + if (!canvas) return; + const mainCtx = canvas.getContext("2d"); + if (!mainCtx) return; + + // Set canvas internal resolution to avoid blurry scaling + const displayWidth = Math.max(1, Math.floor(previewDimensions.width)); + const displayHeight = Math.max(1, Math.floor(previewDimensions.height)); + if (canvas.width !== displayWidth || canvas.height !== displayHeight) { + canvas.width = displayWidth; + canvas.height = displayHeight; + } + + // Throttle rendering to project FPS during playback only + const fps = activeProject?.fps || DEFAULT_FPS; + const minDelta = 1 / fps; + if (isPlaying) { + if (currentTime - lastFrameTimeRef.current < minDelta) { + return; + } + lastFrameTimeRef.current = currentTime; + } + + // Invalidate older async renders when user scrubs rapidly + const mySeq = (renderSeqRef.current += 1); + + // Offscreen buffer to avoid flicker (reuse canvas) + if (!offscreenCanvasRef.current) { + const hasOffscreen = + typeof (globalThis as unknown as { OffscreenCanvas?: unknown }) + .OffscreenCanvas !== "undefined"; + if (hasOffscreen) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + offscreenCanvasRef.current = new (globalThis as any).OffscreenCanvas( + displayWidth, + displayHeight + ) as OffscreenCanvas; + } else { + const c = document.createElement("canvas"); + c.width = displayWidth; + c.height = displayHeight; + offscreenCanvasRef.current = c; + } + } + // Ensure size matches + if ( + offscreenCanvasRef.current && + (offscreenCanvasRef.current as HTMLCanvasElement).getContext + ) { + const c = offscreenCanvasRef.current as HTMLCanvasElement; + if (c.width !== displayWidth || c.height !== displayHeight) { + c.width = displayWidth; + c.height = displayHeight; + } + } else { + const c = offscreenCanvasRef.current as OffscreenCanvas; + // @ts-ignore width/height exist on OffscreenCanvas in modern browsers + if ( + (c as unknown as { width: number }).width !== displayWidth || + (c as unknown as { height: number }).height !== displayHeight + ) { + // @ts-ignore + (c as unknown as { width: number }).width = displayWidth; + // @ts-ignore + (c as unknown as { height: number }).height = displayHeight; + } + } + const offscreenCanvas = offscreenCanvasRef.current as + | HTMLCanvasElement + | OffscreenCanvas; + const offCtx = (offscreenCanvas as HTMLCanvasElement).getContext + ? (offscreenCanvas as HTMLCanvasElement).getContext("2d") + : (offscreenCanvas as OffscreenCanvas).getContext("2d"); + if (!offCtx) return; + + await renderTimelineFrame({ + ctx: offCtx as CanvasRenderingContext2D, + time: currentTime, + canvasWidth: displayWidth, + canvasHeight: displayHeight, + tracks, + mediaItems, + backgroundColor: + activeProject?.backgroundType === "blur" + ? "transparent" + : activeProject?.backgroundColor || "#000000", + useCache: false, + fps: activeProject?.fps || DEFAULT_FPS, + }); + + // Blit offscreen to visible canvas + mainCtx.clearRect(0, 0, displayWidth, displayHeight); + if ((offscreenCanvas as HTMLCanvasElement).getContext) { + mainCtx.drawImage(offscreenCanvas as HTMLCanvasElement, 0, 0); + } else { + mainCtx.drawImage( + offscreenCanvas as unknown as CanvasImageSource, + 0, + 0 + ); + } + }; + + void draw(); + }, [ + activeElements, + currentTime, + previewDimensions.width, + previewDimensions.height, + canvasSize.width, + canvasSize.height, + activeProject?.backgroundType, + activeProject?.backgroundColor, + ]); + // Get media elements for blur background (video/image only) const getBlurBackgroundElements = (): ActiveElement[] => { return activeElements.filter( @@ -275,213 +580,11 @@ export function PreviewPanel() { const blurBackgroundElements = getBlurBackgroundElements(); - // Render blur background layer - const renderBlurBackground = () => { - if ( - !activeProject?.backgroundType || - activeProject.backgroundType !== "blur" || - blurBackgroundElements.length === 0 - ) { - return null; - } + // Render blur background layer (handled by canvas now) + const renderBlurBackground = () => null; - // Use the first media element for background (could be enhanced to use primary/focused element) - const backgroundElement = blurBackgroundElements[0]; - const { element, mediaItem } = backgroundElement; - - if (!mediaItem) return null; - - const blurIntensity = activeProject.blurIntensity || 8; - - if (mediaItem.type === "video") { - return ( -
- -
- ); - } - - if (mediaItem.type === "image") { - return ( -
- {mediaItem.name} -
- ); - } - - return null; - }; - - // Render an element - const renderElement = (elementData: ActiveElement, index: number) => { - const { element, mediaItem } = elementData; - - // Text elements - if (element.type === "text") { - const fontClassName = - FONT_CLASS_MAP[element.fontFamily as keyof typeof FONT_CLASS_MAP] || ""; - - const scaleRatio = previewDimensions.width / canvasSize.width; - - return ( -
- handleTextMouseDown(e, element, elementData.track.id) - } - style={{ - left: `${ - 50 + - ((dragState.isDragging && dragState.elementId === element.id - ? dragState.currentX - : element.x) / - canvasSize.width) * - 100 - }%`, - top: `${ - 50 + - ((dragState.isDragging && dragState.elementId === element.id - ? dragState.currentY - : element.y) / - canvasSize.height) * - 100 - }%`, - transform: `translate(-50%, -50%) rotate(${element.rotation}deg)`, - opacity: element.opacity, - zIndex: 100 + index, // Text elements on top - }} - > -
- {element.content} -
-
- ); - } - - // Media elements - if (element.type === "media") { - // Test elements - if (!mediaItem || element.mediaId === "test") { - return ( -
-
-
🎬
-

{element.name}

-
-
- ); - } - - // Video elements - if (mediaItem.type === "video") { - return ( -
- -
- ); - } - - // Image elements - if (mediaItem.type === "image") { - return ( -
- {mediaItem.name} -
- ); - } - - // Audio elements (no visual representation) - if (mediaItem.type === "audio") { - return ( -
- -
- ); - } - } - - return null; - }; + // Render an element (canvas handles visuals now). Audio playback to be implemented via Web Audio. + const renderElement = (_elementData: ActiveElement) => null; return ( <> @@ -505,14 +608,23 @@ export function PreviewPanel() { }} > {renderBlurBackground()} + {activeElements.length === 0 ? (
No elements at current time
) : ( - activeElements.map((elementData, index) => - renderElement(elementData, index) - ) + activeElements.map((elementData) => renderElement(elementData)) )}
diff --git a/apps/web/src/lib/media-processing.ts b/apps/web/src/lib/media-processing.ts index 353c3113..15c71626 100644 --- a/apps/web/src/lib/media-processing.ts +++ b/apps/web/src/lib/media-processing.ts @@ -6,7 +6,7 @@ import { getImageDimensions, type MediaItem, } from "@/stores/media-store"; -import { generateThumbnail, getVideoInfo } from "./ffmpeg-utils"; +import { generateThumbnail, getVideoInfo } from "./mediabunny-utils"; export interface ProcessedMediaItem extends Omit {} @@ -37,33 +37,23 @@ export async function processMediaFiles( try { if (fileType === "image") { - // Get image dimensions const dimensions = await getImageDimensions(file); width = dimensions.width; height = dimensions.height; } else if (fileType === "video") { try { - // Use FFmpeg for comprehensive video info extraction - const videoInfo = await getVideoInfo(file); + const videoInfo = await getVideoInfo({ videoFile: file }); duration = videoInfo.duration; width = videoInfo.width; height = videoInfo.height; fps = videoInfo.fps; - // Generate thumbnail using FFmpeg - thumbnailUrl = await generateThumbnail(file, 1); + thumbnailUrl = await generateThumbnail({ + videoFile: file, + timeInSeconds: 1, + }); } catch (error) { - console.warn( - "FFmpeg processing failed, falling back to basic processing:", - error - ); - // Fallback to basic processing - const videoResult = await generateVideoThumbnail(file); - thumbnailUrl = videoResult.thumbnailUrl; - width = videoResult.width; - height = videoResult.height; - duration = await getMediaDuration(file); - // FPS will remain undefined for fallback + console.warn("Video processing failed", error); } } else if (fileType === "audio") { // For audio, we don't set width/height/fps (they'll be undefined) @@ -82,7 +72,6 @@ export async function processMediaFiles( fps, }); - // Yield back to the event loop to keep the UI responsive await new Promise((resolve) => setTimeout(resolve, 0)); completed += 1; diff --git a/apps/web/src/lib/ffmpeg-utils.ts b/apps/web/src/lib/mediabunny-utils.ts similarity index 53% rename from apps/web/src/lib/ffmpeg-utils.ts rename to apps/web/src/lib/mediabunny-utils.ts index 0643ecb9..28e6b97f 100644 --- a/apps/web/src/lib/ffmpeg-utils.ts +++ b/apps/web/src/lib/mediabunny-utils.ts @@ -1,7 +1,7 @@ import { FFmpeg } from "@ffmpeg/ffmpeg"; -import { toBlobURL } from "@ffmpeg/util"; import { useTimelineStore } from "@/stores/timeline-store"; import { useMediaStore } from "@/stores/media-store"; +import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny"; let ffmpeg: FFmpeg | null = null; @@ -14,256 +14,99 @@ export const initFFmpeg = async (): Promise => { return ffmpeg; }; -export const generateThumbnail = async ( - videoFile: File, - timeInSeconds = 1 -): Promise => { - const ffmpeg = await initFFmpeg(); +export async function generateThumbnail({ + videoFile, + timeInSeconds, +}: { + videoFile: File; + timeInSeconds: number; +}): Promise { + const input = new Input({ + source: new BlobSource(videoFile), + formats: ALL_FORMATS, + }); - const inputName = "input.mp4"; - const outputName = "thumbnail.jpg"; - - // Write input file - await ffmpeg.writeFile( - inputName, - new Uint8Array(await videoFile.arrayBuffer()) - ); - - // Generate thumbnail at specific time - await ffmpeg.exec([ - "-i", - inputName, - "-ss", - timeInSeconds.toString(), - "-vframes", - "1", - "-vf", - "scale=320:240", - "-q:v", - "2", - outputName, - ]); - - // Read output file - const data = await ffmpeg.readFile(outputName); - const blob = new Blob([data], { type: "image/jpeg" }); - - // Cleanup - await ffmpeg.deleteFile(inputName); - await ffmpeg.deleteFile(outputName); - - return URL.createObjectURL(blob); -}; - -export const trimVideo = async ( - videoFile: File, - startTime: number, - endTime: number, - onProgress?: (progress: number) => void -): Promise => { - const ffmpeg = await initFFmpeg(); - - const inputName = "input.mp4"; - const outputName = "output.mp4"; - - // Set up progress callback - if (onProgress) { - ffmpeg.on("progress", ({ progress }) => { - onProgress(progress * 100); - }); + const videoTrack = await input.getPrimaryVideoTrack(); + if (!videoTrack) { + throw new Error("No video track found in the file"); } - // Write input file - await ffmpeg.writeFile( - inputName, - new Uint8Array(await videoFile.arrayBuffer()) - ); + // Check if we can decode this video + const canDecode = await videoTrack.canDecode(); + if (!canDecode) { + throw new Error("Video codec not supported for decoding"); + } - const duration = endTime - startTime; + const sink = new VideoSampleSink(videoTrack); - // Trim video - await ffmpeg.exec([ - "-i", - inputName, - "-ss", - startTime.toString(), - "-t", - duration.toString(), - "-c", - "copy", // Use stream copy for faster processing - outputName, - ]); + const frame = await sink.getSample(timeInSeconds); - // Read output file - const data = await ffmpeg.readFile(outputName); - const blob = new Blob([data], { type: "video/mp4" }); + if (!frame) { + throw new Error("Could not get frame at specified time"); + } - // Cleanup - await ffmpeg.deleteFile(inputName); - await ffmpeg.deleteFile(outputName); + const canvas = document.createElement("canvas"); + canvas.width = 320; + canvas.height = 240; + const ctx = canvas.getContext("2d"); - return blob; -}; + if (!ctx) { + throw new Error("Could not get canvas context"); + } -export const getVideoInfo = async ( - videoFile: File -): Promise<{ + frame.draw(ctx, 0, 0, 320, 240); + + return new Promise((resolve, reject) => { + canvas.toBlob( + (blob) => { + if (blob) { + resolve(URL.createObjectURL(blob)); + } else { + reject(new Error("Failed to create thumbnail blob")); + } + }, + "image/jpeg", + 0.8 + ); + }); +} + +export async function getVideoInfo({ + videoFile, +}: { + videoFile: File; +}): Promise<{ duration: number; width: number; height: number; fps: number; -}> => { - const ffmpeg = await initFFmpeg(); +}> { + const input = new Input({ + source: new BlobSource(videoFile), + formats: ALL_FORMATS, + }); - const inputName = "input.mp4"; + const duration = await input.computeDuration(); + const videoTrack = await input.getPrimaryVideoTrack(); - // Write input file - await ffmpeg.writeFile( - inputName, - new Uint8Array(await videoFile.arrayBuffer()) - ); - - // Capture FFmpeg stderr output with a one-time listener pattern - let ffmpegOutput = ""; - let listening = true; - const listener = (data: string) => { - if (listening) ffmpegOutput += data; - }; - ffmpeg.on("log", ({ message }) => listener(message)); - - // Run ffmpeg to get info (stderr will contain the info) - try { - await ffmpeg.exec(["-i", inputName, "-f", "null", "-"]); - } catch (error) { - listening = false; - await ffmpeg.deleteFile(inputName); - console.error("FFmpeg execution failed:", error); - throw new Error( - "Failed to extract video info. The file may be corrupted or in an unsupported format." - ); + if (!videoTrack) { + throw new Error("No video track found in the file"); } - // Disable listener after exec completes - listening = false; - - // Cleanup - await ffmpeg.deleteFile(inputName); - - // Parse output for duration, resolution, and fps - // Example: Duration: 00:00:10.00, start: 0.000000, bitrate: 1234 kb/s - // Example: Stream #0:0: Video: h264 (High), yuv420p(progressive), 1920x1080 [SAR 1:1 DAR 16:9], 30 fps, 30 tbr, 90k tbn, 60 tbc - - const durationMatch = ffmpegOutput.match(/Duration: (\d+):(\d+):([\d.]+)/); - let duration = 0; - if (durationMatch) { - const [, h, m, s] = durationMatch; - duration = parseInt(h) * 3600 + parseInt(m) * 60 + parseFloat(s); - } - - const videoStreamMatch = ffmpegOutput.match( - /Video:.* (\d+)x(\d+)[^,]*, ([\d.]+) fps/ - ); - let width = 0, - height = 0, - fps = 0; - if (videoStreamMatch) { - width = parseInt(videoStreamMatch[1]); - height = parseInt(videoStreamMatch[2]); - fps = parseFloat(videoStreamMatch[3]); - } + // Get frame rate from packet statistics + const packetStats = await videoTrack.computePacketStats(100); + const fps = packetStats.averagePacketRate; return { duration, - width, - height, + width: videoTrack.displayWidth, + height: videoTrack.displayHeight, fps, }; -}; - -export const convertToWebM = async ( - videoFile: File, - onProgress?: (progress: number) => void -): Promise => { - const ffmpeg = await initFFmpeg(); - - const inputName = "input.mp4"; - const outputName = "output.webm"; - - // Set up progress callback - if (onProgress) { - ffmpeg.on("progress", ({ progress }) => { - onProgress(progress * 100); - }); - } - - // Write input file - await ffmpeg.writeFile( - inputName, - new Uint8Array(await videoFile.arrayBuffer()) - ); - - // Convert to WebM - await ffmpeg.exec([ - "-i", - inputName, - "-c:v", - "libvpx-vp9", - "-crf", - "30", - "-b:v", - "0", - "-c:a", - "libopus", - outputName, - ]); - - // Read output file - const data = await ffmpeg.readFile(outputName); - const blob = new Blob([data], { type: "video/webm" }); - - // Cleanup - await ffmpeg.deleteFile(inputName); - await ffmpeg.deleteFile(outputName); - - return blob; -}; - -export const extractAudio = async ( - videoFile: File, - format: "mp3" | "wav" = "mp3" -): Promise => { - const ffmpeg = await initFFmpeg(); - - const inputName = "input.mp4"; - const outputName = `output.${format}`; - - // Write input file - await ffmpeg.writeFile( - inputName, - new Uint8Array(await videoFile.arrayBuffer()) - ); - - // Extract audio - await ffmpeg.exec([ - "-i", - inputName, - "-vn", // Disable video - "-acodec", - format === "mp3" ? "libmp3lame" : "pcm_s16le", - outputName, - ]); - - // Read output file - const data = await ffmpeg.readFile(outputName); - const blob = new Blob([data], { type: `audio/${format}` }); - - // Cleanup - await ffmpeg.deleteFile(inputName); - await ffmpeg.deleteFile(outputName); - - return blob; -}; +} +// Audio mixing for timeline - keeping FFmpeg for now due to complexity +// TODO: Replace with Mediabunny audio processing when implementing canvas preview export const extractTimelineAudio = async ( onProgress?: (progress: number) => void ): Promise => { diff --git a/apps/web/src/lib/timeline-renderer.ts b/apps/web/src/lib/timeline-renderer.ts new file mode 100644 index 00000000..1c1eafcd --- /dev/null +++ b/apps/web/src/lib/timeline-renderer.ts @@ -0,0 +1,179 @@ +import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny"; +import type { TimelineTrack } from "@/types/timeline"; +import type { MediaItem } from "@/stores/media-store"; + +export interface RenderContext { + ctx: CanvasRenderingContext2D; + time: number; + canvasWidth: number; + canvasHeight: number; + tracks: TimelineTrack[]; + mediaItems: MediaItem[]; + backgroundColor?: string; + useCache?: boolean; + cache?: Map< + string, + Map< + number, + { + draw: ( + c: CanvasRenderingContext2D, + x: number, + y: number, + w: number, + h: number + ) => void; + } + > + >; + fps: number; +} + +export async function renderTimelineFrame({ + ctx, + time, + canvasWidth, + canvasHeight, + tracks, + mediaItems, + backgroundColor, + useCache = true, + cache, + fps, +}: RenderContext): Promise { + // Background + ctx.clearRect(0, 0, canvasWidth, canvasHeight); + if (backgroundColor && backgroundColor !== "transparent") { + ctx.fillStyle = backgroundColor; + ctx.fillRect(0, 0, canvasWidth, canvasHeight); + } + + const scaleX = 1; + const scaleY = 1; + const idToMedia = new Map(mediaItems.map((m) => [m.id, m] as const)); + const active: Array<{ + track: TimelineTrack; + element: TimelineTrack["elements"][number]; + mediaItem: MediaItem | null; + }> = []; + + for (let t = tracks.length - 1; t >= 0; t -= 1) { + const track = tracks[t]; + for (const element of track.elements) { + if ((element as any).hidden) continue; + const elementStart = element.startTime; + const elementEnd = + element.startTime + + (element.duration - element.trimStart - element.trimEnd); + if (time >= elementStart && time < elementEnd) { + let mediaItem: MediaItem | null = null; + if (element.type === "media") { + mediaItem = + element.mediaId === "test" + ? null + : idToMedia.get(element.mediaId) || null; + } + active.push({ track, element, mediaItem }); + } + } + } + + for (const { element, mediaItem } of active) { + if (element.type === "media" && mediaItem) { + if (mediaItem.type === "video") { + const input = new Input({ + source: new BlobSource(mediaItem.file), + formats: ALL_FORMATS, + }); + const track = await input.getPrimaryVideoTrack(); + if (!track) continue; + const decodable = await track.canDecode(); + if (!decodable) continue; + const sink = new VideoSampleSink(track); + + const localTime = time - element.startTime + element.trimStart; + const sample = await sink.getSample(localTime); + if (!sample) continue; + + const mediaW = Math.max(1, mediaItem.width || canvasWidth); + const mediaH = Math.max(1, mediaItem.height || canvasHeight); + const containScale = Math.min( + canvasWidth / mediaW, + canvasHeight / mediaH + ); + const drawW = mediaW * containScale; + const drawH = mediaH * containScale; + const drawX = (canvasWidth - drawW) / 2; + const drawY = (canvasHeight - drawH) / 2; + sample.draw(ctx, drawX, drawY, drawW, drawH); + } + if (mediaItem.type === "image") { + const img = new Image(); + await new Promise((resolve, reject) => { + img.onload = () => resolve(); + img.onerror = () => reject(new Error("Image load failed")); + img.src = mediaItem.url || URL.createObjectURL(mediaItem.file); + }); + const mediaW = Math.max( + 1, + mediaItem.width || img.naturalWidth || canvasWidth + ); + const mediaH = Math.max( + 1, + mediaItem.height || img.naturalHeight || canvasHeight + ); + const containScale = Math.min( + canvasWidth / mediaW, + canvasHeight / mediaH + ); + const drawW = mediaW * containScale; + const drawH = mediaH * containScale; + const drawX = (canvasWidth - drawW) / 2; + const drawY = (canvasHeight - drawH) / 2; + ctx.drawImage(img, drawX, drawY, drawW, drawH); + } + } + if (element.type === "text") { + const posX = canvasWidth / 2 + (element as any).x * scaleX; + const posY = canvasHeight / 2 + (element as any).y * scaleY; + ctx.save(); + ctx.translate(posX, posY); + ctx.rotate(((element as any).rotation * Math.PI) / 180); + ctx.globalAlpha = Math.max(0, Math.min(1, (element as any).opacity)); + const px = (element as any).fontSize * scaleX; + const weight = (element as any).fontWeight === "bold" ? "bold " : ""; + const style = (element as any).fontStyle === "italic" ? "italic " : ""; + ctx.font = `${style}${weight}${px}px ${(element as any).fontFamily}`; + ctx.fillStyle = (element as any).color; + ctx.textAlign = (element as any).textAlign; + ctx.textBaseline = "middle"; + const metrics = ctx.measureText((element as any).content); + const ascent = + (metrics as unknown as { actualBoundingBoxAscent?: number }) + .actualBoundingBoxAscent ?? px * 0.8; + const descent = + (metrics as unknown as { actualBoundingBoxDescent?: number }) + .actualBoundingBoxDescent ?? px * 0.2; + const textW = metrics.width; + const textH = ascent + descent; + const padX = 8 * scaleX; + const padY = 4 * scaleX; + if ((element as any).backgroundColor) { + ctx.save(); + ctx.fillStyle = (element as any).backgroundColor; + let bgLeft = -textW / 2; + if (ctx.textAlign === "left") bgLeft = 0; + if (ctx.textAlign === "right") bgLeft = -textW; + ctx.fillRect( + bgLeft - padX, + -textH / 2 - padY, + textW + padX * 2, + textH + padY * 2 + ); + ctx.restore(); + } + ctx.fillText((element as any).content, 0, 0); + ctx.restore(); + } + } +} diff --git a/bun.lock b/bun.lock index ea7c8c9a..95f7c874 100644 --- a/bun.lock +++ b/bun.lock @@ -4,6 +4,7 @@ "": { "name": "opencut", "dependencies": { + "mediabunny": "^1.9.3", "next": "^15.3.4", "react-country-flag": "^3.1.0", "wavesurfer.js": "^7.9.8", @@ -558,6 +559,10 @@ "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="], + "@types/dom-mediacapture-transform": ["@types/dom-mediacapture-transform@0.1.11", "", { "dependencies": { "@types/dom-webcodecs": "*" } }, "sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ=="], + + "@types/dom-webcodecs": ["@types/dom-webcodecs@0.1.13", "", {}, "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="], + "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="], "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="], @@ -896,6 +901,8 @@ "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="], + "mediabunny": ["mediabunny@1.9.3", "", { "dependencies": { "@types/dom-mediacapture-transform": "^0.1.11", "@types/dom-webcodecs": "0.1.13" } }, "sha512-uVspdzrpwvW8NxtGspHPOJvdNSY0dNFEmOQngSheX9PYX9oXijZENBjfYWOgm9c9IgSSlN2bdJF9iyPyY3f+fQ=="], + "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="], "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="], @@ -1320,10 +1327,10 @@ "motion/framer-motion/motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="], - "opencut/@types/node/undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="], - "next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="], + "opencut/@types/node/undici-types": ["undici-types@7.10.0", "", {}, "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="], + "opencut/next/@next/env": ["@next/env@15.4.5", "", {}, "sha512-ruM+q2SCOVCepUiERoxOmZY9ZVoecR3gcXNwCYZRvQQWRjhOiPJGmQ2fAiLR6YKWXcSAh7G79KEFxN3rwhs4LQ=="], "opencut/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.4.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-84dAN4fkfdC7nX6udDLz9GzQlMUwEMKD7zsseXrl7FTeIItF8vpk1lhLEnsotiiDt+QFu3O1FVWnqwcRD2U3KA=="], diff --git a/package.json b/package.json index 45a98282..616c97f7 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "format": "npx ultracite@latest format" }, "dependencies": { + "mediabunny": "^1.9.3", "next": "^15.3.4", "react-country-flag": "^3.1.0", "wavesurfer.js": "^7.9.8" From 03e68e77a98512ad66ea91aedfa7ece7fad60683 Mon Sep 17 00:00:00 2001 From: "Danilo Arantes F." <33551518+DaniloArantesF@users.noreply.github.com> Date: Mon, 25 Aug 2025 06:37:33 -0300 Subject: [PATCH 07/20] fix(editor): Don't log expected errors in `AudioWaveform` during unmount (#565) * Update README.md * fix(editor): Don't log expected errors in `AudioWaveform` during unmount --------- Co-authored-by: Maze <167211895+mazeincoding@users.noreply.github.com> Co-authored-by: Maze Winther --- apps/web/src/components/editor/audio-waveform.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx index 79bf401d..60406f61 100644 --- a/apps/web/src/components/editor/audio-waveform.tsx +++ b/apps/web/src/components/editor/audio-waveform.tsx @@ -67,8 +67,8 @@ const AudioWaveform: React.FC = ({ }); newWaveSurfer.on("error", (err) => { - console.error("WaveSurfer error:", err); if (mounted) { + console.error("WaveSurfer error:", err); setError(true); setIsLoading(false); } @@ -76,8 +76,8 @@ const AudioWaveform: React.FC = ({ await newWaveSurfer.load(audioUrl); } catch (err) { - console.error("Failed to initialize WaveSurfer:", err); if (mounted) { + console.error("Failed to initialize WaveSurfer:", err); setError(true); setIsLoading(false); } From 7434f909491ca81e880bb85908d021d343136b12 Mon Sep 17 00:00:00 2001 From: Taesu <166604494+bytaesu@users.noreply.github.com> Date: Tue, 26 Aug 2025 04:10:48 +0900 Subject: [PATCH 08/20] fix: use svh to prevent hero mobile layout shift (#572) * Update README.md * fix: use svh to prevent mobile layout shift --------- Co-authored-by: Maze <167211895+mazeincoding@users.noreply.github.com> Co-authored-by: Maze Winther --- apps/web/src/components/landing/hero.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 5c629433..1b557412 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -12,7 +12,7 @@ import Link from "next/link"; export function Hero() { return ( -
+
Date: Tue, 26 Aug 2025 11:44:00 +0200 Subject: [PATCH 09/20] style: sonner position --- apps/web/src/components/ui/sonner.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx index 549cf841..13694b43 100644 --- a/apps/web/src/components/ui/sonner.tsx +++ b/apps/web/src/components/ui/sonner.tsx @@ -12,6 +12,8 @@ const Toaster = ({ ...props }: ToasterProps) => { { "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground", }, }} + expand={false} + richColors {...props} /> ); From 2f7cd11ca123884969f90a94e59593d355518839 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 26 Aug 2025 11:51:08 +0200 Subject: [PATCH 10/20] refactor: type-safety --- .../editor/media-panel/views/stickers.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx index 7d3e073e..7e05e889 100644 --- a/apps/web/src/components/editor/media-panel/views/stickers.tsx +++ b/apps/web/src/components/editor/media-panel/views/stickers.tsx @@ -38,6 +38,7 @@ import { import { cn, generateUUID } from "@/lib/utils"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import Image from "next/image"; +import type { MediaItem } from "@/stores/media-store"; import { DraggableMediaItem } from "@/components/ui/draggable-item"; import { InputWithBack } from "@/components/ui/input-with-back"; import { StickerCategory } from "@/stores/stickers-store"; @@ -286,9 +287,9 @@ function StickersContentView({ category }: { category: StickerCategory }) { throw new Error("Failed to download sticker"); } - const mediaItem = { + const mediaItem: Omit = { name: iconName.replace(":", "-"), - type: "image" as const, + type: "image", file, url: URL.createObjectURL(file), width: 200, @@ -565,7 +566,12 @@ interface StickerItemProps { capSize?: boolean; } -function StickerItem({ iconName, onAdd, isAdding, capSize = false }: StickerItemProps) { +function StickerItem({ + iconName, + onAdd, + isAdding, + capSize = false, +}: StickerItemProps) { const [imageError, setImageError] = useState(false); const [hostIndex, setHostIndex] = useState(0); @@ -601,7 +607,10 @@ function StickerItem({ iconName, onAdd, isAdding, capSize = false }: StickerItem className="w-full h-full object-contain" style={ capSize - ? { maxWidth: "var(--sticker-max, 160px)", maxHeight: "var(--sticker-max, 160px)" } + ? { + maxWidth: "var(--sticker-max, 160px)", + maxHeight: "var(--sticker-max, 160px)", + } : undefined } onError={() => { From b459b46802a760a4a81ce91fdf24390e07375fb0 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 26 Aug 2025 15:04:25 +0200 Subject: [PATCH 11/20] refactor: type-safety & separate concerns --- .../editor/media-panel/views/captions.tsx | 18 +- .../editor/media-panel/views/media.tsx | 64 ++-- .../editor/media-panel/views/stickers.tsx | 20 +- .../editor/media-panel/views/text.tsx | 42 +-- .../src/components/editor/preview-panel.tsx | 18 +- .../editor/properties-panel/index.tsx | 8 +- .../src/components/editor/timeline/index.tsx | 30 +- .../editor/timeline/timeline-element.tsx | 10 +- .../editor/timeline/timeline-track.tsx | 36 +- apps/web/src/components/ui/draggable-item.tsx | 3 +- apps/web/src/constants/text-constants.ts | 27 ++ apps/web/src/hooks/use-aspect-ratio.ts | 12 +- .../src/hooks/use-timeline-element-resize.ts | 21 +- apps/web/src/lib/media-processing.ts | 5 +- apps/web/src/lib/mediabunny-utils.ts | 8 +- apps/web/src/lib/storage/storage-service.ts | 18 +- apps/web/src/lib/timeline-renderer.ts | 338 ++++++++---------- apps/web/src/stores/media-store.ts | 78 ++-- apps/web/src/stores/sounds-store.ts | 6 +- apps/web/src/stores/timeline-store.ts | 191 +++++----- apps/web/src/types/media.ts | 17 + apps/web/src/types/timeline.ts | 2 +- 22 files changed, 430 insertions(+), 542 deletions(-) create mode 100644 apps/web/src/constants/text-constants.ts create mode 100644 apps/web/src/types/media.ts diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx index 6e18781c..393481a5 100644 --- a/apps/web/src/components/editor/media-panel/views/captions.tsx +++ b/apps/web/src/components/editor/media-panel/views/captions.tsx @@ -6,6 +6,7 @@ import { useState, useRef, useEffect } from "react"; import { extractTimelineAudio } from "@/lib/mediabunny-utils"; import { encryptWithRandomKey, arrayBufferToBase64 } from "@/lib/zk-encryption"; import { useTimelineStore } from "@/stores/timeline-store"; +import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants"; import { Loader2, Shield, Trash2, Upload } from "lucide-react"; import { Dialog, @@ -162,24 +163,13 @@ export function Captions() { // Add all caption elements to the same track shortCaptions.forEach((caption, index) => { addElementToTrack(captionTrackId, { - type: "text", + ...DEFAULT_TEXT_ELEMENT, name: `Caption ${index + 1}`, content: caption.text, duration: caption.duration, startTime: caption.startTime, - trimStart: 0, - trimEnd: 0, - fontSize: 65, - fontFamily: "Arial", - color: "#ffffff", - textAlign: "center", - fontWeight: "bold", - fontStyle: "normal", - textDecoration: "none", - x: 0, - y: 0, - rotation: 0, - opacity: 1, + fontSize: 65, // Larger for captions + fontWeight: "bold", // Bold for captions } as TextElement); }); diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx index c84dde70..07a44a7c 100644 --- a/apps/web/src/components/editor/media-panel/views/media.tsx +++ b/apps/web/src/components/editor/media-panel/views/media.tsx @@ -2,7 +2,8 @@ import { useDragDrop } from "@/hooks/use-drag-drop"; import { processMediaFiles } from "@/lib/media-processing"; -import { useMediaStore, type MediaItem } from "@/stores/media-store"; +import { useMediaStore } from "@/stores/media-store"; +import { MediaFile } from "@/types/media"; import { ArrowDown01, CloudUpload, @@ -13,7 +14,7 @@ import { Music, Video, } from "lucide-react"; -import { useRef, useState, useMemo, useEffect } from "react"; +import { useRef, useState, useMemo } from "react"; import { useHighlightScroll } from "@/hooks/use-highlight-scroll"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; @@ -47,7 +48,7 @@ function MediaItemWithContextMenu({ children, onRemove, }: { - item: MediaItem; + item: MediaFile; children: React.ReactNode; onRemove: (e: React.MouseEvent, id: string) => Promise; }) { @@ -68,14 +69,12 @@ function MediaItemWithContextMenu({ } export function MediaView() { - const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore(); + const { mediaFiles, addMediaFile, removeMediaFile } = useMediaStore(); const { activeProject } = useProjectStore(); const { mediaViewMode, setMediaViewMode } = usePanelStore(); const fileInputRef = useRef(null); const [isProcessing, setIsProcessing] = useState(false); const [progress, setProgress] = useState(0); - const [searchQuery, setSearchQuery] = useState(""); - const [mediaFilter, setMediaFilter] = useState("all"); const [sortBy, setSortBy] = useState<"name" | "type" | "duration" | "size">( "name" ); @@ -96,16 +95,13 @@ export function MediaView() { setIsProcessing(true); setProgress(0); try { - // Process files (extract metadata, generate thumbnails, etc.) const processedItems = await processMediaFiles(files, (p) => setProgress(p) ); - // Add each processed media item to the store for (const item of processedItems) { - await addMediaItem(activeProject.id, item); + await addMediaFile(activeProject.id, item); } } catch (error) { - // Show error toast if processing fails console.error("Error processing files:", error); toast.error("Failed to process files"); } finally { @@ -122,13 +118,11 @@ export function MediaView() { const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker const handleFileChange = (e: React.ChangeEvent) => { - // When files are selected via file picker, process them if (e.target.files) processFiles(e.target.files); e.target.value = ""; // Reset input }; const handleRemove = async (e: React.MouseEvent, id: string) => { - // Remove a media item from the store e.stopPropagation(); if (!activeProject) { @@ -136,8 +130,7 @@ export function MediaView() { return; } - // Media store now handles cascade deletion automatically - await removeMediaItem(activeProject.id, id); + await removeMediaFile(activeProject.id, id); }; const formatDuration = (duration: number) => { @@ -147,28 +140,15 @@ export function MediaView() { return `${min}:${sec.toString().padStart(2, "0")}`; }; - const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems); - - useEffect(() => { - let filtered = mediaItems.filter((item) => { + const filteredMediaItems = useMemo(() => { + let filtered = mediaFiles.filter((item) => { if (item.ephemeral) return false; - if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) { - return false; - } - - if ( - searchQuery && - !item.name.toLowerCase().includes(searchQuery.toLowerCase()) - ) { - return false; - } - return true; }); filtered.sort((a, b) => { - let valueA: any; - let valueB: any; + let valueA: string | number; + let valueB: string | number; switch (sortBy) { case "name": @@ -196,8 +176,8 @@ export function MediaView() { return 0; }); - setFilteredMediaItems(filtered); - }, [mediaItems, mediaFilter, searchQuery, sortBy, sortOrder]); + return filtered; + }, [mediaFiles, sortBy, sortOrder]); const previewComponents = useMemo(() => { const previews = new Map(); @@ -276,7 +256,7 @@ export function MediaView() { return previews; }, [filteredMediaItems]); - const renderPreview = (item: MediaItem) => previewComponents.get(item.id); + const renderPreview = (item: MediaFile) => previewComponents.get(item.id); return ( <> @@ -481,12 +461,14 @@ function GridView({ highlightedId, registerElement, }: { - filteredMediaItems: MediaItem[]; - renderPreview: (item: MediaItem) => React.ReactNode; + filteredMediaItems: MediaFile[]; + renderPreview: (item: MediaFile) => React.ReactNode; handleRemove: (e: React.MouseEvent, id: string) => Promise; highlightedId: string | null; registerElement: (id: string, element: HTMLElement | null) => void; }) { + const { addElementAtTime } = useTimelineStore(); + return (
- useTimelineStore.getState().addMediaAtTime(item, currentTime) + addElementAtTime(item, currentTime) } rounded={false} variant="card" @@ -527,12 +509,14 @@ function ListView({ highlightedId, registerElement, }: { - filteredMediaItems: MediaItem[]; - renderPreview: (item: MediaItem) => React.ReactNode; + filteredMediaItems: MediaFile[]; + renderPreview: (item: MediaFile) => React.ReactNode; handleRemove: (e: React.MouseEvent, id: string) => Promise; highlightedId: string | null; registerElement: (id: string, element: HTMLElement | null) => void; }) { + const { addElementAtTime } = useTimelineStore(); + return (
{filteredMediaItems.map((item) => ( @@ -548,7 +532,7 @@ function ListView({ }} showPlusOnDrag={false} onAddToTimeline={(currentTime) => - useTimelineStore.getState().addMediaAtTime(item, currentTime) + addElementAtTime(item, currentTime) } variant="compact" isHighlighted={highlightedId === item.id} diff --git a/apps/web/src/components/editor/media-panel/views/stickers.tsx b/apps/web/src/components/editor/media-panel/views/stickers.tsx index 7e05e889..41afe285 100644 --- a/apps/web/src/components/editor/media-panel/views/stickers.tsx +++ b/apps/web/src/components/editor/media-panel/views/stickers.tsx @@ -35,10 +35,10 @@ import { ICONIFY_HOSTS, POPULAR_COLLECTIONS, } from "@/lib/iconify-api"; -import { cn, generateUUID } from "@/lib/utils"; +import { cn } from "@/lib/utils"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import Image from "next/image"; -import type { MediaItem } from "@/stores/media-store"; +import type { MediaFile } from "@/types/media"; import { DraggableMediaItem } from "@/components/ui/draggable-item"; import { InputWithBack } from "@/components/ui/input-with-back"; import { StickerCategory } from "@/stores/stickers-store"; @@ -186,9 +186,9 @@ function EmptyView({ message }: { message: string }) { function StickersContentView({ category }: { category: StickerCategory }) { const { activeProject } = useProjectStore(); - const { addMediaAtTime } = useTimelineStore(); + const { addElementAtTime } = useTimelineStore(); const { currentTime } = usePlaybackStore(); - const { addMediaItem } = useMediaStore(); + const { addMediaFile } = useMediaStore(); const { searchQuery, selectedCollection, @@ -287,7 +287,7 @@ function StickersContentView({ category }: { category: StickerCategory }) { throw new Error("Failed to download sticker"); } - const mediaItem: Omit = { + const mediaItem: Omit = { name: iconName.replace(":", "-"), type: "image", file, @@ -298,16 +298,16 @@ function StickersContentView({ category }: { category: StickerCategory }) { ephemeral: false, }; - await addMediaItem(activeProject.id, mediaItem); + await addMediaFile(activeProject.id, mediaItem); const added = useMediaStore .getState() - .mediaItems.find( + .mediaFiles.find( (m) => m.url === mediaItem.url && m.name === mediaItem.name ); if (!added) throw new Error("Sticker not in media store"); - addMediaAtTime(added, currentTime); + addElementAtTime(added, currentTime); toast.success(`Added "${iconName}" to timeline`); } catch (error) { @@ -640,8 +640,8 @@ function StickerItem({ name={displayName} preview={preview} dragData={{ - type: "sticker", - iconName: iconName, + id: "sticker-placeholder", + type: "image", name: displayName, }} onAddToTimeline={() => onAdd(iconName)} diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx index 49eacbc7..5d522c84 100644 --- a/apps/web/src/components/editor/media-panel/views/text.tsx +++ b/apps/web/src/components/editor/media-panel/views/text.tsx @@ -1,31 +1,7 @@ import { DraggableMediaItem } from "@/components/ui/draggable-item"; import { BaseView } from "./base-view"; -import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import { useTimelineStore } from "@/stores/timeline-store"; -import { type TextElement } from "@/types/timeline"; - -const textData: TextElement = { - id: "default-text", - type: "text", - name: "Default text", - content: "Default text", - fontSize: 48, - fontFamily: "Arial", - color: "#ffffff", - backgroundColor: "transparent", - textAlign: "center" as const, - fontWeight: "normal" as const, - fontStyle: "normal" as const, - textDecoration: "none" as const, - x: 0, - y: 0, - rotation: 0, - opacity: 1, - duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, - startTime: 0, - trimStart: 0, - trimEnd: 0, -}; +import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants"; export function TextView() { return ( @@ -38,14 +14,20 @@ export function TextView() {
} dragData={{ - id: textData.id, - type: textData.type, - name: textData.name, - content: textData.content, + id: "temp-text-id", + type: DEFAULT_TEXT_ELEMENT.type, + name: DEFAULT_TEXT_ELEMENT.name, + content: DEFAULT_TEXT_ELEMENT.content, }} aspectRatio={1} onAddToTimeline={(currentTime) => - useTimelineStore.getState().addTextAtTime(textData, currentTime) + useTimelineStore.getState().addElementAtTime( + { + ...DEFAULT_TEXT_ELEMENT, + id: "temp-text-id", + }, + currentTime + ) } showLabel={false} /> diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 99c4edef..d988e7fb 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -2,13 +2,13 @@ import { useTimelineStore } from "@/stores/timeline-store"; import { TimelineElement, TimelineTrack } from "@/types/timeline"; -import { useMediaStore, type MediaItem } from "@/stores/media-store"; +import { useMediaStore } from "@/stores/media-store"; +import { MediaFile } from "@/types/media"; import { usePlaybackStore } from "@/stores/playback-store"; import { useEditorStore } from "@/stores/editor-store"; import { Button } from "@/components/ui/button"; import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react"; import { useState, useRef, useEffect, useCallback } from "react"; -import { VideoSampleSink } from "mediabunny"; import { renderTimelineFrame } from "@/lib/timeline-renderer"; import { cn } from "@/lib/utils"; import { formatTimeCode } from "@/lib/time"; @@ -33,12 +33,12 @@ import { PLATFORM_LAYOUTS, type PlatformLayout } from "@/stores/editor-store"; interface ActiveElement { element: TimelineElement; track: TimelineTrack; - mediaItem: MediaItem | null; + mediaItem: MediaFile | null; } export function PreviewPanel() { const { tracks, getTotalDuration, updateTextElement } = useTimelineStore(); - const { mediaItems } = useMediaStore(); + const { mediaFiles } = useMediaStore(); const { currentTime, toggle, setCurrentTime } = usePlaybackStore(); const { isPlaying, volume, muted } = usePlaybackStore(); const { activeProject } = useProjectStore(); @@ -264,7 +264,7 @@ export function PreviewPanel() { mediaItem = element.mediaId === "test" ? null - : mediaItems.find((item) => item.id === element.mediaId) || + : mediaFiles.find((item) => item.id === element.mediaId) || null; } activeElements.push({ element, track, mediaItem }); @@ -334,7 +334,7 @@ export function PreviewPanel() { const gain = audioGainRef.current!; const tracksSnapshot = useTimelineStore.getState().tracks; - const mediaList = useMediaStore.getState().mediaItems; + const mediaList = mediaFiles; const idToMedia = new Map(mediaList.map((m) => [m.id, m] as const)); const playbackNow = usePlaybackStore.getState().currentTime; @@ -447,7 +447,7 @@ export function PreviewPanel() { } playingSourcesRef.current.clear(); }; - }, [isPlaying, volume, muted, mediaItems]); + }, [isPlaying, volume, muted, mediaFiles]); // Canvas: draw current frame for visible elements using offscreen compositing useEffect(() => { @@ -533,13 +533,11 @@ export function PreviewPanel() { canvasWidth: displayWidth, canvasHeight: displayHeight, tracks, - mediaItems, + mediaFiles, backgroundColor: activeProject?.backgroundType === "blur" ? "transparent" : activeProject?.backgroundColor || "#000000", - useCache: false, - fps: activeProject?.fps || DEFAULT_FPS, }); // Blit offscreen to visible canvas diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx index 6c79327e..150f9512 100644 --- a/apps/web/src/components/editor/properties-panel/index.tsx +++ b/apps/web/src/components/editor/properties-panel/index.tsx @@ -10,7 +10,7 @@ import { SquareSlashIcon } from "lucide-react"; export function PropertiesPanel() { const { selectedElements, tracks } = useTimelineStore(); - const { mediaItems } = useMediaStore(); + const { mediaFiles } = useMediaStore(); return ( <> @@ -28,11 +28,11 @@ export function PropertiesPanel() { ); } if (element?.type === "media") { - const mediaItem = mediaItems.find( - (item) => item.id === element.mediaId + const mediaFile = mediaFiles.find( + (file) => file.id === element.mediaId ); - if (mediaItem?.type === "audio") { + if (mediaFile?.type === "audio") { return ; } diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx index 284384eb..49769989 100644 --- a/apps/web/src/components/editor/timeline/index.tsx +++ b/apps/web/src/components/editor/timeline/index.tsx @@ -82,13 +82,11 @@ export function Timeline() { toggleTrackMute, dragState, } = useTimelineStore(); - const { mediaItems, addMediaItem } = useMediaStore(); + const { mediaFiles, addMediaFile } = useMediaStore(); const { activeProject } = useProjectStore(); - const { currentTime, duration, seek, setDuration, isPlaying, toggle } = - usePlaybackStore(); + const { currentTime, duration, seek, setDuration } = usePlaybackStore(); const [isDragOver, setIsDragOver] = useState(false); - const [isProcessing, setIsProcessing] = useState(false); - const [progress, setProgress] = useState(0); + const { addElementToNewTrack } = useTimelineStore(); const dragCounterRef = useRef(0); const timelineRef = useRef(null); const rulerRef = useRef(null); @@ -456,10 +454,10 @@ export function Timeline() { if (dragData.type === "text") { // Always create new text track to avoid overlaps - useTimelineStore.getState().addTextToNewTrack(dragData); + addElementToNewTrack(dragData); } else { // Handle media items - const mediaItem = mediaItems.find( + const mediaItem = mediaFiles.find( (item: any) => item.id === dragData.id ); if (!mediaItem) { @@ -467,7 +465,7 @@ export function Timeline() { return; } - useTimelineStore.getState().addMediaToNewTrack(mediaItem); + addElementToNewTrack(mediaItem); } } catch (error) { console.error("Error parsing dropped item data:", error); @@ -480,17 +478,12 @@ export function Timeline() { return; } - setIsProcessing(true); - setProgress(0); try { - const processedItems = await processMediaFiles( - e.dataTransfer.files, - (p) => setProgress(p) - ); + const processedItems = await processMediaFiles(e.dataTransfer.files); for (const processedItem of processedItems) { - await addMediaItem(activeProject.id, processedItem); - const currentMediaItems = useMediaStore.getState().mediaItems; - const addedItem = currentMediaItems.find( + await addMediaFile(activeProject.id, processedItem); + const currentMediaFiles = mediaFiles; + const addedItem = currentMediaFiles.find( (item) => item.name === processedItem.name && item.url === processedItem.url ); @@ -516,9 +509,6 @@ export function Timeline() { // Show error if file processing fails console.error("Error processing external files:", error); toast.error("Failed to process dropped files"); - } finally { - setIsProcessing(false); - setProgress(0); } } }; diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx index a1a33837..300c4c7b 100644 --- a/apps/web/src/components/editor/timeline/timeline-element.tsx +++ b/apps/web/src/components/editor/timeline/timeline-element.tsx @@ -40,10 +40,8 @@ export function TimelineElement({ onElementMouseDown, onElementClick, }: TimelineElementProps) { - const { mediaItems } = useMediaStore(); + const { mediaFiles } = useMediaStore(); const { - updateElementTrim, - updateElementDuration, removeElementFromTrack, removeElementFromTrackWithRipple, dragState, @@ -58,7 +56,7 @@ export function TimelineElement({ const mediaItem = element.type === "media" - ? mediaItems.find((item) => item.id === element.mediaId) + ? mediaFiles.find((file) => file.id === element.mediaId) : null; const hasAudio = mediaItem?.type === "audio" || mediaItem?.type === "video"; @@ -67,8 +65,6 @@ export function TimelineElement({ element, track, zoomLevel, - onUpdateTrim: updateElementTrim, - onUpdateDuration: updateElementDuration, }); const { requestRevealMedia } = useMediaPanelStore.getState(); @@ -190,7 +186,7 @@ export function TimelineElement({ } // Render media element -> - const mediaItem = mediaItems.find((item) => item.id === element.mediaId); + const mediaItem = mediaFiles.find((file) => file.id === element.mediaId); if (!mediaItem) { return ( diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx index 5a037710..ad3ca9b7 100644 --- a/apps/web/src/components/editor/timeline/timeline-track.tsx +++ b/apps/web/src/components/editor/timeline/timeline-track.tsx @@ -12,6 +12,7 @@ import { canElementGoOnTrack, } from "@/types/timeline"; import { usePlaybackStore } from "@/stores/playback-store"; +import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants"; import type { TimelineElement as TimelineElementType, DragData, @@ -33,7 +34,7 @@ export function TimelineTrackContent({ zoomLevel: number; onSnapPointChange?: (snapPoint: SnapPoint | null) => void; }) { - const { mediaItems } = useMediaStore(); + const { mediaFiles } = useMediaStore(); const { tracks, addTrack, @@ -537,7 +538,7 @@ export function TimelineTrackContent({ }); } else { // Media elements - const mediaItem = mediaItems.find( + const mediaItem = mediaFiles.find( (item) => item.id === dragData.id ); if (mediaItem) { @@ -890,29 +891,14 @@ export function TimelineTrackContent({ } addElementToTrack(targetTrackId, { - type: "text", - name: dragData.name || "Text", - content: dragData.content || "Default Text", - duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, + ...DEFAULT_TEXT_ELEMENT, + name: dragData.name || DEFAULT_TEXT_ELEMENT.name, + content: dragData.content || DEFAULT_TEXT_ELEMENT.content, startTime: textSnappedTime, - trimStart: 0, - trimEnd: 0, - fontSize: 48, - fontFamily: "Arial", - color: "#ffffff", - backgroundColor: "transparent", - textAlign: "center", - fontWeight: "normal", - fontStyle: "normal", - textDecoration: "none", - x: 0, - y: 0, - rotation: 0, - opacity: 1, }); } else { // Handle media items - const mediaItem = mediaItems.find((item) => item.id === dragData.id); + const mediaItem = mediaFiles.find((item) => item.id === dragData.id); if (!mediaItem) { toast.error("Media item not found"); @@ -1054,7 +1040,7 @@ export function TimelineTrackContent({ } else if (hasFiles) { // External file drops const { activeProject } = useProjectStore.getState(); - const { addMediaItem } = useMediaStore.getState(); + const { addMediaFile } = useMediaStore.getState(); const { addElementToTrack } = useTimelineStore.getState(); if (!activeProject) { @@ -1066,9 +1052,9 @@ export function TimelineTrackContent({ processMediaFiles(e.dataTransfer.files) .then(async (processedItems) => { for (const processedItem of processedItems) { - await addMediaItem(activeProject.id, processedItem); - const currentMediaItems = useMediaStore.getState().mediaItems; - const addedItem = currentMediaItems.find( + await addMediaFile(activeProject.id, processedItem); + const currentMediaFiles = mediaFiles; + const addedItem = currentMediaFiles.find( (item) => item.name === processedItem.name && item.url === processedItem.url diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx index 9e29c83b..c238b33c 100644 --- a/apps/web/src/components/ui/draggable-item.tsx +++ b/apps/web/src/components/ui/draggable-item.tsx @@ -12,11 +12,12 @@ import { createPortal } from "react-dom"; import { Plus } from "lucide-react"; import { cn } from "@/lib/utils"; import { usePlaybackStore } from "@/stores/playback-store"; +import { DragData } from "@/types/timeline"; export interface DraggableMediaItemProps { name: string; preview: ReactNode; - dragData: Record; + dragData: DragData; onDragStart?: (e: React.DragEvent) => void; onAddToTimeline?: (currentTime: number) => void; aspectRatio?: number; diff --git a/apps/web/src/constants/text-constants.ts b/apps/web/src/constants/text-constants.ts new file mode 100644 index 00000000..e3fcce38 --- /dev/null +++ b/apps/web/src/constants/text-constants.ts @@ -0,0 +1,27 @@ +import { TextElement } from "@/types/timeline"; +import { TIMELINE_CONSTANTS } from "./timeline-constants"; + +export const DEFAULT_TEXT_ELEMENT: Omit< + TextElement, + "id" +> = { + type: "text", + name: "Text", + content: "Default Text", + fontSize: 48, + fontFamily: "Arial", + color: "#ffffff", + backgroundColor: "transparent", + textAlign: "center", + fontWeight: "normal", + fontStyle: "normal", + textDecoration: "none", + x: 0, + y: 0, + rotation: 0, + opacity: 1, + duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, + startTime: 0, + trimStart: 0, + trimEnd: 0, +}; diff --git a/apps/web/src/hooks/use-aspect-ratio.ts b/apps/web/src/hooks/use-aspect-ratio.ts index c3fe20c6..b721b74e 100644 --- a/apps/web/src/hooks/use-aspect-ratio.ts +++ b/apps/web/src/hooks/use-aspect-ratio.ts @@ -6,7 +6,7 @@ import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store"; export function useAspectRatio() { const { canvasPresets } = useEditorStore(); const { activeProject } = useProjectStore(); - const { mediaItems } = useMediaStore(); + const { mediaFiles } = useMediaStore(); const { tracks } = useTimelineStore(); const canvasSize = activeProject?.canvasSize || DEFAULT_CANVAS_SIZE; @@ -24,14 +24,14 @@ export function useAspectRatio() { for (const track of tracks) { for (const element of track.elements) { if (element.type === "media") { - const mediaItem = mediaItems.find( - (item) => item.id === element.mediaId + const mediaFile = mediaFiles.find( + (file) => file.id === element.mediaId ); if ( - mediaItem && - (mediaItem.type === "video" || mediaItem.type === "image") + mediaFile && + (mediaFile.type === "video" || mediaFile.type === "image") ) { - return getMediaAspectRatio(mediaItem); + return getMediaAspectRatio(mediaFile); } } } diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts index 2875185c..4812459a 100644 --- a/apps/web/src/hooks/use-timeline-element-resize.ts +++ b/apps/web/src/hooks/use-timeline-element-resize.ts @@ -9,28 +9,15 @@ interface UseTimelineElementResizeProps { element: TimelineElement; track: TimelineTrack; zoomLevel: number; - onUpdateTrim: ( - trackId: string, - elementId: string, - trimStart: number, - trimEnd: number - ) => void; - onUpdateDuration: ( - trackId: string, - elementId: string, - duration: number - ) => void; } export function useTimelineElementResize({ element, track, zoomLevel, - onUpdateTrim, - onUpdateDuration, }: UseTimelineElementResizeProps) { const [resizing, setResizing] = useState(null); - const { mediaItems } = useMediaStore(); + const { mediaFiles } = useMediaStore(); const { updateElementStartTime, updateElementTrim, @@ -88,11 +75,11 @@ export function useTimelineElementResize({ // Media elements - check the media type if (element.type === "media") { - const mediaItem = mediaItems.find((item) => item.id === element.mediaId); - if (!mediaItem) return false; + const mediaFile = mediaFiles.find((file) => file.id === element.mediaId); + if (!mediaFile) return false; // Images can be extended (static content) - if (mediaItem.type === "image") { + if (mediaFile.type === "image") { return true; } diff --git a/apps/web/src/lib/media-processing.ts b/apps/web/src/lib/media-processing.ts index 15c71626..7a31466f 100644 --- a/apps/web/src/lib/media-processing.ts +++ b/apps/web/src/lib/media-processing.ts @@ -1,14 +1,13 @@ import { toast } from "sonner"; import { getFileType, - generateVideoThumbnail, getMediaDuration, getImageDimensions, - type MediaItem, } from "@/stores/media-store"; +import { MediaFile } from "@/types/media"; import { generateThumbnail, getVideoInfo } from "./mediabunny-utils"; -export interface ProcessedMediaItem extends Omit {} +export interface ProcessedMediaItem extends Omit {} export async function processMediaFiles( files: FileList | File[], diff --git a/apps/web/src/lib/mediabunny-utils.ts b/apps/web/src/lib/mediabunny-utils.ts index 28e6b97f..fcb3da0f 100644 --- a/apps/web/src/lib/mediabunny-utils.ts +++ b/apps/web/src/lib/mediabunny-utils.ts @@ -151,14 +151,14 @@ export const extractTimelineAudio = async ( for (const element of track.elements) { if (element.type === "media") { - const mediaItem = mediaStore.mediaItems.find( + const mediaFile = mediaStore.mediaFiles.find( (m) => m.id === element.mediaId ); - if (!mediaItem) continue; + if (!mediaFile) continue; - if (mediaItem.type === "video" || mediaItem.type === "audio") { + if (mediaFile.type === "video" || mediaFile.type === "audio") { audioElements.push({ - file: mediaItem.file, + file: mediaFile.file, startTime: element.startTime, duration: element.duration, trimStart: element.trimStart, diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts index b3376a5f..3aadf883 100644 --- a/apps/web/src/lib/storage/storage-service.ts +++ b/apps/web/src/lib/storage/storage-service.ts @@ -1,5 +1,5 @@ import { TProject } from "@/types/project"; -import { MediaItem } from "@/stores/media-store"; +import { MediaFile } from "@/types/media"; import { IndexedDBAdapter } from "./indexeddb-adapter"; import { OPFSAdapter } from "./opfs-adapter"; import { @@ -124,8 +124,8 @@ class StorageService { await this.projectsAdapter.remove(id); } - // Media operations - now project-specific - async saveMediaItem(projectId: string, mediaItem: MediaItem): Promise { + // Media operations + async saveMediaFile(projectId: string, mediaItem: MediaFile): Promise { const { mediaMetadataAdapter, mediaFilesAdapter } = this.getProjectMediaAdapters(projectId); @@ -148,10 +148,10 @@ class StorageService { await mediaMetadataAdapter.set(mediaItem.id, metadata); } - async loadMediaItem( + async loadMediaFile( projectId: string, id: string - ): Promise { + ): Promise { const { mediaMetadataAdapter, mediaFilesAdapter } = this.getProjectMediaAdapters(projectId); @@ -192,14 +192,14 @@ class StorageService { }; } - async loadAllMediaItems(projectId: string): Promise { + async loadAllMediaFiles(projectId: string): Promise { const { mediaMetadataAdapter } = this.getProjectMediaAdapters(projectId); const mediaIds = await mediaMetadataAdapter.list(); - const mediaItems: MediaItem[] = []; + const mediaItems: MediaFile[] = []; for (const id of mediaIds) { - const item = await this.loadMediaItem(projectId, id); + const item = await this.loadMediaFile(projectId, id); if (item) { mediaItems.push(item); } @@ -208,7 +208,7 @@ class StorageService { return mediaItems; } - async deleteMediaItem(projectId: string, id: string): Promise { + async deleteMediaFile(projectId: string, id: string): Promise { const { mediaMetadataAdapter, mediaFilesAdapter } = this.getProjectMediaAdapters(projectId); diff --git a/apps/web/src/lib/timeline-renderer.ts b/apps/web/src/lib/timeline-renderer.ts index 1c1eafcd..06825896 100644 --- a/apps/web/src/lib/timeline-renderer.ts +++ b/apps/web/src/lib/timeline-renderer.ts @@ -1,179 +1,159 @@ -import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny"; -import type { TimelineTrack } from "@/types/timeline"; -import type { MediaItem } from "@/stores/media-store"; - -export interface RenderContext { - ctx: CanvasRenderingContext2D; - time: number; - canvasWidth: number; - canvasHeight: number; - tracks: TimelineTrack[]; - mediaItems: MediaItem[]; - backgroundColor?: string; - useCache?: boolean; - cache?: Map< - string, - Map< - number, - { - draw: ( - c: CanvasRenderingContext2D, - x: number, - y: number, - w: number, - h: number - ) => void; - } - > - >; - fps: number; -} - -export async function renderTimelineFrame({ - ctx, - time, - canvasWidth, - canvasHeight, - tracks, - mediaItems, - backgroundColor, - useCache = true, - cache, - fps, -}: RenderContext): Promise { - // Background - ctx.clearRect(0, 0, canvasWidth, canvasHeight); - if (backgroundColor && backgroundColor !== "transparent") { - ctx.fillStyle = backgroundColor; - ctx.fillRect(0, 0, canvasWidth, canvasHeight); - } - - const scaleX = 1; - const scaleY = 1; - const idToMedia = new Map(mediaItems.map((m) => [m.id, m] as const)); - const active: Array<{ - track: TimelineTrack; - element: TimelineTrack["elements"][number]; - mediaItem: MediaItem | null; - }> = []; - - for (let t = tracks.length - 1; t >= 0; t -= 1) { - const track = tracks[t]; - for (const element of track.elements) { - if ((element as any).hidden) continue; - const elementStart = element.startTime; - const elementEnd = - element.startTime + - (element.duration - element.trimStart - element.trimEnd); - if (time >= elementStart && time < elementEnd) { - let mediaItem: MediaItem | null = null; - if (element.type === "media") { - mediaItem = - element.mediaId === "test" - ? null - : idToMedia.get(element.mediaId) || null; - } - active.push({ track, element, mediaItem }); - } - } - } - - for (const { element, mediaItem } of active) { - if (element.type === "media" && mediaItem) { - if (mediaItem.type === "video") { - const input = new Input({ - source: new BlobSource(mediaItem.file), - formats: ALL_FORMATS, - }); - const track = await input.getPrimaryVideoTrack(); - if (!track) continue; - const decodable = await track.canDecode(); - if (!decodable) continue; - const sink = new VideoSampleSink(track); - - const localTime = time - element.startTime + element.trimStart; - const sample = await sink.getSample(localTime); - if (!sample) continue; - - const mediaW = Math.max(1, mediaItem.width || canvasWidth); - const mediaH = Math.max(1, mediaItem.height || canvasHeight); - const containScale = Math.min( - canvasWidth / mediaW, - canvasHeight / mediaH - ); - const drawW = mediaW * containScale; - const drawH = mediaH * containScale; - const drawX = (canvasWidth - drawW) / 2; - const drawY = (canvasHeight - drawH) / 2; - sample.draw(ctx, drawX, drawY, drawW, drawH); - } - if (mediaItem.type === "image") { - const img = new Image(); - await new Promise((resolve, reject) => { - img.onload = () => resolve(); - img.onerror = () => reject(new Error("Image load failed")); - img.src = mediaItem.url || URL.createObjectURL(mediaItem.file); - }); - const mediaW = Math.max( - 1, - mediaItem.width || img.naturalWidth || canvasWidth - ); - const mediaH = Math.max( - 1, - mediaItem.height || img.naturalHeight || canvasHeight - ); - const containScale = Math.min( - canvasWidth / mediaW, - canvasHeight / mediaH - ); - const drawW = mediaW * containScale; - const drawH = mediaH * containScale; - const drawX = (canvasWidth - drawW) / 2; - const drawY = (canvasHeight - drawH) / 2; - ctx.drawImage(img, drawX, drawY, drawW, drawH); - } - } - if (element.type === "text") { - const posX = canvasWidth / 2 + (element as any).x * scaleX; - const posY = canvasHeight / 2 + (element as any).y * scaleY; - ctx.save(); - ctx.translate(posX, posY); - ctx.rotate(((element as any).rotation * Math.PI) / 180); - ctx.globalAlpha = Math.max(0, Math.min(1, (element as any).opacity)); - const px = (element as any).fontSize * scaleX; - const weight = (element as any).fontWeight === "bold" ? "bold " : ""; - const style = (element as any).fontStyle === "italic" ? "italic " : ""; - ctx.font = `${style}${weight}${px}px ${(element as any).fontFamily}`; - ctx.fillStyle = (element as any).color; - ctx.textAlign = (element as any).textAlign; - ctx.textBaseline = "middle"; - const metrics = ctx.measureText((element as any).content); - const ascent = - (metrics as unknown as { actualBoundingBoxAscent?: number }) - .actualBoundingBoxAscent ?? px * 0.8; - const descent = - (metrics as unknown as { actualBoundingBoxDescent?: number }) - .actualBoundingBoxDescent ?? px * 0.2; - const textW = metrics.width; - const textH = ascent + descent; - const padX = 8 * scaleX; - const padY = 4 * scaleX; - if ((element as any).backgroundColor) { - ctx.save(); - ctx.fillStyle = (element as any).backgroundColor; - let bgLeft = -textW / 2; - if (ctx.textAlign === "left") bgLeft = 0; - if (ctx.textAlign === "right") bgLeft = -textW; - ctx.fillRect( - bgLeft - padX, - -textH / 2 - padY, - textW + padX * 2, - textH + padY * 2 - ); - ctx.restore(); - } - ctx.fillText((element as any).content, 0, 0); - ctx.restore(); - } - } -} +import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny"; +import type { TimelineTrack } from "@/types/timeline"; +import type { MediaFile } from "@/types/media"; + +export interface RenderContext { + ctx: CanvasRenderingContext2D; + time: number; + canvasWidth: number; + canvasHeight: number; + tracks: TimelineTrack[]; + mediaFiles: MediaFile[]; + backgroundColor?: string; +} + +export async function renderTimelineFrame({ + ctx, + time, + canvasWidth, + canvasHeight, + tracks, + mediaFiles, + backgroundColor, +}: RenderContext): Promise { + // Background + ctx.clearRect(0, 0, canvasWidth, canvasHeight); + if (backgroundColor && backgroundColor !== "transparent") { + ctx.fillStyle = backgroundColor; + ctx.fillRect(0, 0, canvasWidth, canvasHeight); + } + + const scaleX = 1; + const scaleY = 1; + const idToMedia = new Map(mediaFiles.map((m) => [m.id, m] as const)); + const active: Array<{ + track: TimelineTrack; + element: TimelineTrack["elements"][number]; + mediaItem: MediaFile | null; + }> = []; + + for (let t = tracks.length - 1; t >= 0; t -= 1) { + const track = tracks[t]; + for (const element of track.elements) { + if ((element as any).hidden) continue; + const elementStart = element.startTime; + const elementEnd = + element.startTime + + (element.duration - element.trimStart - element.trimEnd); + if (time >= elementStart && time < elementEnd) { + let mediaItem: MediaFile | null = null; + if (element.type === "media") { + mediaItem = + element.mediaId === "test" + ? null + : idToMedia.get(element.mediaId) || null; + } + active.push({ track, element, mediaItem }); + } + } + } + + for (const { element, mediaItem } of active) { + if (element.type === "media" && mediaItem) { + if (mediaItem.type === "video") { + const input = new Input({ + source: new BlobSource(mediaItem.file), + formats: ALL_FORMATS, + }); + const track = await input.getPrimaryVideoTrack(); + if (!track) continue; + const decodable = await track.canDecode(); + if (!decodable) continue; + const sink = new VideoSampleSink(track); + + const localTime = time - element.startTime + element.trimStart; + const sample = await sink.getSample(localTime); + if (!sample) continue; + + const mediaW = Math.max(1, mediaItem.width || canvasWidth); + const mediaH = Math.max(1, mediaItem.height || canvasHeight); + const containScale = Math.min( + canvasWidth / mediaW, + canvasHeight / mediaH + ); + const drawW = mediaW * containScale; + const drawH = mediaH * containScale; + const drawX = (canvasWidth - drawW) / 2; + const drawY = (canvasHeight - drawH) / 2; + sample.draw(ctx, drawX, drawY, drawW, drawH); + } + if (mediaItem.type === "image") { + const img = new Image(); + await new Promise((resolve, reject) => { + img.onload = () => resolve(); + img.onerror = () => reject(new Error("Image load failed")); + img.src = mediaItem.url || URL.createObjectURL(mediaItem.file); + }); + const mediaW = Math.max( + 1, + mediaItem.width || img.naturalWidth || canvasWidth + ); + const mediaH = Math.max( + 1, + mediaItem.height || img.naturalHeight || canvasHeight + ); + const containScale = Math.min( + canvasWidth / mediaW, + canvasHeight / mediaH + ); + const drawW = mediaW * containScale; + const drawH = mediaH * containScale; + const drawX = (canvasWidth - drawW) / 2; + const drawY = (canvasHeight - drawH) / 2; + ctx.drawImage(img, drawX, drawY, drawW, drawH); + } + } + if (element.type === "text") { + const posX = canvasWidth / 2 + (element as any).x * scaleX; + const posY = canvasHeight / 2 + (element as any).y * scaleY; + ctx.save(); + ctx.translate(posX, posY); + ctx.rotate(((element as any).rotation * Math.PI) / 180); + ctx.globalAlpha = Math.max(0, Math.min(1, (element as any).opacity)); + const px = (element as any).fontSize * scaleX; + const weight = (element as any).fontWeight === "bold" ? "bold " : ""; + const style = (element as any).fontStyle === "italic" ? "italic " : ""; + ctx.font = `${style}${weight}${px}px ${(element as any).fontFamily}`; + ctx.fillStyle = (element as any).color; + ctx.textAlign = (element as any).textAlign; + ctx.textBaseline = "middle"; + const metrics = ctx.measureText((element as any).content); + const ascent = + (metrics as unknown as { actualBoundingBoxAscent?: number }) + .actualBoundingBoxAscent ?? px * 0.8; + const descent = + (metrics as unknown as { actualBoundingBoxDescent?: number }) + .actualBoundingBoxDescent ?? px * 0.2; + const textW = metrics.width; + const textH = ascent + descent; + const padX = 8 * scaleX; + const padY = 4 * scaleX; + if ((element as any).backgroundColor) { + ctx.save(); + ctx.fillStyle = (element as any).backgroundColor; + let bgLeft = -textW / 2; + if (ctx.textAlign === "left") bgLeft = 0; + if (ctx.textAlign === "right") bgLeft = -textW; + ctx.fillRect( + bgLeft - padX, + -textH / 2 - padY, + textW + padX * 2, + textH + padY * 2 + ); + ctx.restore(); + } + ctx.fillText((element as any).content, 0, 0); + ctx.restore(); + } + } +} diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts index 95676d75..2b7cb62e 100644 --- a/apps/web/src/stores/media-store.ts +++ b/apps/web/src/stores/media-store.ts @@ -2,44 +2,21 @@ import { create } from "zustand"; import { storageService } from "@/lib/storage/storage-service"; import { useTimelineStore } from "./timeline-store"; import { generateUUID } from "@/lib/utils"; - -export type MediaType = "image" | "video" | "audio"; - -export interface MediaItem { - id: string; - name: string; - type: MediaType; - file: File; - url?: string; // Object URL for preview - thumbnailUrl?: string; // For video thumbnails - duration?: number; // For video/audio duration - width?: number; // For video/image width - height?: number; // For video/image height - fps?: number; // For video frame rate - // Ephemeral items are used by timeline directly and should not appear in the media library or be persisted - ephemeral?: boolean; - // Text-specific properties - content?: string; // Text content - fontSize?: number; // Font size - fontFamily?: string; // Font family - color?: string; // Text color - backgroundColor?: string; // Background color - textAlign?: "left" | "center" | "right"; // Text alignment -} +import { MediaType, MediaFile } from "@/types/media"; interface MediaStore { - mediaItems: MediaItem[]; + mediaFiles: MediaFile[]; isLoading: boolean; - // Actions - now require projectId - addMediaItem: ( + // Actions + addMediaFile: ( projectId: string, - item: Omit + file: Omit ) => Promise; - removeMediaItem: (projectId: string, id: string) => Promise; + removeMediaFile: (projectId: string, id: string) => Promise; loadProjectMedia: (projectId: string) => Promise; clearProjectMedia: (projectId: string) => Promise; - clearAllMedia: () => void; // Clear local state only + clearAllMedia: () => void; } // Helper function to determine file type @@ -150,8 +127,7 @@ export const getMediaDuration = (file: File): Promise => { }); }; -// Helper to get aspect ratio from MediaItem -export const getMediaAspectRatio = (item: MediaItem): number => { +export const getMediaAspectRatio = (item: MediaFile): number => { if (item.width && item.height) { return item.width / item.height; } @@ -159,35 +135,35 @@ export const getMediaAspectRatio = (item: MediaItem): number => { }; export const useMediaStore = create((set, get) => ({ - mediaItems: [], + mediaFiles: [], isLoading: false, - addMediaItem: async (projectId, item) => { - const newItem: MediaItem = { - ...item, + addMediaFile: async (projectId, file) => { + const newItem: MediaFile = { + ...file, id: generateUUID(), }; // Add to local state immediately for UI responsiveness set((state) => ({ - mediaItems: [...state.mediaItems, newItem], + mediaFiles: [...state.mediaFiles, newItem], })); // Save to persistent storage in background try { - await storageService.saveMediaItem(projectId, newItem); + await storageService.saveMediaFile(projectId, newItem); } catch (error) { console.error("Failed to save media item:", error); // Remove from local state if save failed set((state) => ({ - mediaItems: state.mediaItems.filter((media) => media.id !== newItem.id), + mediaFiles: state.mediaFiles.filter((media) => media.id !== newItem.id), })); } }, - removeMediaItem: async (projectId: string, id: string) => { + removeMediaFile: async (projectId: string, id: string) => { const state = get(); - const item = state.mediaItems.find((media) => media.id === id); + const item = state.mediaFiles.find((media) => media.id === id); // Cleanup object URLs to prevent memory leaks if (item?.url) { @@ -199,7 +175,7 @@ export const useMediaStore = create((set, get) => ({ // 1) Remove from local state immediately set((state) => ({ - mediaItems: state.mediaItems.filter((media) => media.id !== id), + mediaFiles: state.mediaFiles.filter((media) => media.id !== id), })); // 2) Cascade into the timeline: remove any elements using this media ID @@ -238,7 +214,7 @@ export const useMediaStore = create((set, get) => ({ // 3) Remove from persistent storage try { - await storageService.deleteMediaItem(projectId, id); + await storageService.deleteMediaFile(projectId, id); } catch (error) { console.error("Failed to delete media item:", error); } @@ -248,7 +224,7 @@ export const useMediaStore = create((set, get) => ({ set({ isLoading: true }); try { - const mediaItems = await storageService.loadAllMediaItems(projectId); + const mediaItems = await storageService.loadAllMediaFiles(projectId); // Regenerate thumbnails for video items const updatedMediaItems = await Promise.all( @@ -275,7 +251,7 @@ export const useMediaStore = create((set, get) => ({ }) ); - set({ mediaItems: updatedMediaItems }); + set({ mediaFiles: updatedMediaItems }); } catch (error) { console.error("Failed to load media items:", error); } finally { @@ -287,7 +263,7 @@ export const useMediaStore = create((set, get) => ({ const state = get(); // Cleanup all object URLs - state.mediaItems.forEach((item) => { + state.mediaFiles.forEach((item) => { if (item.url) { URL.revokeObjectURL(item.url); } @@ -297,13 +273,13 @@ export const useMediaStore = create((set, get) => ({ }); // Clear local state - set({ mediaItems: [] }); + set({ mediaFiles: [] }); // Clear persistent storage try { - const mediaIds = state.mediaItems.map((item) => item.id); + const mediaIds = state.mediaFiles.map((item) => item.id); await Promise.all( - mediaIds.map((id) => storageService.deleteMediaItem(projectId, id)) + mediaIds.map((id) => storageService.deleteMediaFile(projectId, id)) ); } catch (error) { console.error("Failed to clear media items from storage:", error); @@ -314,7 +290,7 @@ export const useMediaStore = create((set, get) => ({ const state = get(); // Cleanup all object URLs - state.mediaItems.forEach((item) => { + state.mediaFiles.forEach((item) => { if (item.url) { URL.revokeObjectURL(item.url); } @@ -324,6 +300,6 @@ export const useMediaStore = create((set, get) => ({ }); // Clear local state - set({ mediaItems: [] }); + set({ mediaFiles: [] }); }, })); diff --git a/apps/web/src/stores/sounds-store.ts b/apps/web/src/stores/sounds-store.ts index 215253fb..6dffa198 100644 --- a/apps/web/src/stores/sounds-store.ts +++ b/apps/web/src/stores/sounds-store.ts @@ -247,7 +247,7 @@ export const useSoundsStore = create((set, get) => ({ type: "audio/mpeg", }); - await useMediaStore.getState().addMediaItem(activeProject.id, { + await useMediaStore.getState().addMediaFile(activeProject.id, { name: sound.name, type: "audio", file, @@ -257,12 +257,12 @@ export const useSoundsStore = create((set, get) => ({ const mediaItem = useMediaStore .getState() - .mediaItems.find((item) => item.file === file); + .mediaFiles.find((item) => item.file === file); if (!mediaItem) throw new Error("Failed to create media item"); const success = useTimelineStore .getState() - .addMediaAtTime(mediaItem, usePlaybackStore.getState().currentTime); + .addElementAtTime(mediaItem, usePlaybackStore.getState().currentTime); if (success) { return true; diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts index 3eada6de..884db23e 100644 --- a/apps/web/src/stores/timeline-store.ts +++ b/apps/web/src/stores/timeline-store.ts @@ -10,17 +10,15 @@ import { ensureMainTrack, validateElementTrackCompatibility, } from "@/types/timeline"; -import { - useMediaStore, - getMediaAspectRatio, - type MediaItem, -} from "./media-store"; +import { useMediaStore, getMediaAspectRatio } from "./media-store"; +import { MediaFile } from "@/types/media"; import { findBestCanvasPreset } from "@/lib/editor-utils"; import { storageService } from "@/lib/storage/storage-service"; import { useProjectStore } from "./project-store"; import { generateUUID } from "@/lib/utils"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import { checkElementOverlaps, resolveElementOverlaps } from "@/lib/timeline"; +import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants"; // Helper function to manage element naming with suffixes const getElementNameWithSuffix = ( @@ -207,10 +205,11 @@ interface TimelineStore { excludeElementId?: string ) => boolean; findOrCreateTrack: (trackType: TrackType) => string; - addMediaAtTime: (item: MediaItem, currentTime?: number) => boolean; - addTextAtTime: (item: TextElement, currentTime?: number) => boolean; - addMediaToNewTrack: (item: MediaItem) => boolean; - addTextToNewTrack: (item: TextElement | DragData) => boolean; + addElementAtTime: ( + item: MediaFile | TextElement, + currentTime?: number + ) => boolean; + addElementToNewTrack: (item: MediaFile | TextElement | DragData) => boolean; } export const useTimelineStore = create((set, get) => { @@ -502,7 +501,7 @@ export const useTimelineStore = create((set, get) => { if (isFirstElement && newElement.type === "media") { const mediaStore = useMediaStore.getState(); - const mediaItem = mediaStore.mediaItems.find( + const mediaItem = mediaStore.mediaFiles.find( (item) => item.id === newElement.mediaId ); @@ -1144,7 +1143,7 @@ export const useTimelineStore = create((set, get) => { } try { - await mediaStore.addMediaItem( + await mediaStore.addMediaFile( projectStore.activeProject.id, mediaData ); @@ -1155,7 +1154,7 @@ export const useTimelineStore = create((set, get) => { }; } - const newMediaItem = mediaStore.mediaItems.find( + const newMediaItem = mediaStore.mediaFiles.find( (item) => item.file === newFile ); @@ -1219,7 +1218,7 @@ export const useTimelineStore = create((set, get) => { getProjectThumbnail: async (projectId) => { try { const tracks = await storageService.loadTimeline(projectId); - const mediaItems = await storageService.loadAllMediaItems(projectId); + const mediaItems = await storageService.loadAllMediaFiles(projectId); if (!tracks || !mediaItems.length) return null; @@ -1230,20 +1229,20 @@ export const useTimelineStore = create((set, get) => { if (!firstMediaElement) return null; - const mediaItem = mediaItems.find( + const mediaFile = mediaItems.find( (item) => item.id === firstMediaElement.mediaId ); - if (!mediaItem) return null; + if (!mediaFile) return null; - if (mediaItem.type === "video" && mediaItem.file) { + if (mediaFile.type === "video" && mediaFile.file) { const { generateVideoThumbnail } = await import( "@/stores/media-store" ); - const { thumbnailUrl } = await generateVideoThumbnail(mediaItem.file); + const { thumbnailUrl } = await generateVideoThumbnail(mediaFile.file); return thumbnailUrl; } - if (mediaItem.type === "image" && mediaItem.url) { - return mediaItem.url; + if (mediaFile.type === "image" && mediaFile.url) { + return mediaFile.url; } return null; @@ -1401,30 +1400,24 @@ export const useTimelineStore = create((set, get) => { return get().addTrack(trackType); }, - addMediaAtTime: (item, currentTime = 0) => { - const trackType = item.type === "audio" ? "audio" : "media"; - const duration = - item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION; - - const tracks = get()._tracks.filter((t) => t.type === trackType); - - let targetTrackId = null; - for (const track of tracks) { - if (!get().checkElementOverlap(track.id, currentTime, duration)) { - targetTrackId = track.id; - break; - } - } - - if (!targetTrackId) { - targetTrackId = get().addTrack(trackType); + addElementAtTime: (item: MediaFile | TextElement, currentTime = 0) => { + if (item.type === "text") { + const targetTrackId = get().insertTrackAt("text", 0); + get().addElementToTrack( + targetTrackId, + buildTextElement(item, currentTime) + ); + return true; } + const media = item as MediaFile; + const trackType = media.type === "audio" ? "audio" : "media"; + const targetTrackId = get().insertTrackAt(trackType, 0); get().addElementToTrack(targetTrackId, { type: "media", - mediaId: item.id, - name: item.name, - duration, + mediaId: media.id, + name: media.name, + duration: media.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION, startTime: currentTime, trimStart: 0, trimEnd: 0, @@ -1433,42 +1426,24 @@ export const useTimelineStore = create((set, get) => { return true; }, - addTextAtTime: (item, currentTime = 0) => { - const targetTrackId = get().insertTrackAt("text", 0); - - get().addElementToTrack(targetTrackId, { - type: "text", - name: item.name || "Text", - content: item.content || "Default Text", - duration: item.duration || TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, - startTime: currentTime, - trimStart: 0, - trimEnd: 0, - fontSize: item.fontSize || 48, - fontFamily: item.fontFamily || "Arial", - color: item.color || "#ffffff", - backgroundColor: item.backgroundColor || "transparent", - textAlign: item.textAlign || "center", - fontWeight: item.fontWeight || "normal", - fontStyle: item.fontStyle || "normal", - textDecoration: item.textDecoration || "none", - x: item.x || 0, - y: item.y || 0, - rotation: item.rotation || 0, - opacity: item.opacity !== undefined ? item.opacity : 1, - }); - return true; - }, - - addMediaToNewTrack: (item) => { - const trackType = item.type === "audio" ? "audio" : "media"; - const targetTrackId = get().findOrCreateTrack(trackType); + addElementToNewTrack: (item) => { + if (item.type === "text") { + const targetTrackId = get().insertTrackAt("text", 0); + get().addElementToTrack( + targetTrackId, + buildTextElement(item as TextElement | DragData, 0) + ); + return true; + } + const media = item as MediaFile; + const trackType = media.type === "audio" ? "audio" : "media"; + const targetTrackId = get().insertTrackAt(trackType, 0); get().addElementToTrack(targetTrackId, { type: "media", - mediaId: item.id, - name: item.name, - duration: item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION, + mediaId: media.id, + name: media.name, + duration: media.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION, startTime: 0, trimStart: 0, trimEnd: 0, @@ -1476,41 +1451,41 @@ export const useTimelineStore = create((set, get) => { }); return true; }, - - addTextToNewTrack: (item) => { - const targetTrackId = get().insertTrackAt("text", 0); - - get().addElementToTrack(targetTrackId, { - type: "text", - name: item.name || "Text", - content: - ("content" in item ? item.content : "Default Text") || "Default Text", - duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, - startTime: 0, - trimStart: 0, - trimEnd: 0, - fontSize: ("fontSize" in item ? item.fontSize : 48) || 48, - fontFamily: - ("fontFamily" in item ? item.fontFamily : "Arial") || "Arial", - color: ("color" in item ? item.color : "#ffffff") || "#ffffff", - backgroundColor: - ("backgroundColor" in item ? item.backgroundColor : "transparent") || - "transparent", - textAlign: - ("textAlign" in item ? item.textAlign : "center") || "center", - fontWeight: - ("fontWeight" in item ? item.fontWeight : "normal") || "normal", - fontStyle: - ("fontStyle" in item ? item.fontStyle : "normal") || "normal", - textDecoration: - ("textDecoration" in item ? item.textDecoration : "none") || "none", - x: ("x" in item ? item.x : 0) || 0, - y: ("y" in item ? item.y : 0) || 0, - rotation: ("rotation" in item ? item.rotation : 0) || 0, - opacity: - "opacity" in item && item.opacity !== undefined ? item.opacity : 1, - }); - return true; - }, }; }); + +function buildTextElement( + raw: TextElement | DragData, + startTime: number +): CreateTimelineElement { + const t = raw as Partial; + + return { + type: "text", + name: t.name ?? DEFAULT_TEXT_ELEMENT.name, + content: t.content ?? DEFAULT_TEXT_ELEMENT.content, + duration: t.duration ?? TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION, + startTime, + trimStart: 0, + trimEnd: 0, + fontSize: + typeof t.fontSize === "number" + ? t.fontSize + : DEFAULT_TEXT_ELEMENT.fontSize, + fontFamily: t.fontFamily ?? DEFAULT_TEXT_ELEMENT.fontFamily, + color: t.color ?? DEFAULT_TEXT_ELEMENT.color, + backgroundColor: t.backgroundColor ?? DEFAULT_TEXT_ELEMENT.backgroundColor, + textAlign: t.textAlign ?? DEFAULT_TEXT_ELEMENT.textAlign, + fontWeight: t.fontWeight ?? DEFAULT_TEXT_ELEMENT.fontWeight, + fontStyle: t.fontStyle ?? DEFAULT_TEXT_ELEMENT.fontStyle, + textDecoration: t.textDecoration ?? DEFAULT_TEXT_ELEMENT.textDecoration, + x: typeof t.x === "number" ? t.x : DEFAULT_TEXT_ELEMENT.x, + y: typeof t.y === "number" ? t.y : DEFAULT_TEXT_ELEMENT.y, + rotation: + typeof t.rotation === "number" + ? t.rotation + : DEFAULT_TEXT_ELEMENT.rotation, + opacity: + typeof t.opacity === "number" ? t.opacity : DEFAULT_TEXT_ELEMENT.opacity, + }; +} diff --git a/apps/web/src/types/media.ts b/apps/web/src/types/media.ts new file mode 100644 index 00000000..6e94fcff --- /dev/null +++ b/apps/web/src/types/media.ts @@ -0,0 +1,17 @@ +export type MediaType = "image" | "video" | "audio"; + +// What's stored in media library +export interface MediaFile { + id: string; + name: string; + type: MediaType; + file: File; + url?: string; // Object URL for preview + thumbnailUrl?: string; // For video thumbnails + duration?: number; // For video/audio duration + width?: number; // For video/image width + height?: number; // For video/image height + fps?: number; // For video frame rate + // Ephemeral items are used by timeline directly and should not appear in the media library or be persisted + ephemeral?: boolean; +} diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts index cf946453..61ba6af0 100644 --- a/apps/web/src/types/timeline.ts +++ b/apps/web/src/types/timeline.ts @@ -1,4 +1,4 @@ -import { MediaType } from "@/stores/media-store"; +import { MediaType } from "@/types/media"; import { generateUUID } from "@/lib/utils"; export type TrackType = "media" | "text" | "audio"; From adc8cb37fcec21afac848b1e5dd724394c344050 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 27 Aug 2025 00:52:39 +0200 Subject: [PATCH 12/20] another huge refactor --- apps/web/src/app/editor/[project_id]/page.tsx | 16 +- .../src/components/background-settings.tsx | 184 -------- .../components/{ => editor}/editor-header.tsx | 12 +- .../src/components/editor/export-button.tsx | 246 ++++++++++ .../editor/media-panel/views/captions.tsx | 2 +- .../editor/media-panel/views/settings.tsx | 2 +- .../editor/media-panel/views/text.tsx | 2 +- .../components/{ => editor}/onboarding.tsx | 4 +- .../base-view.tsx => panel-base-view.tsx} | 37 +- .../{ => editor}/panel-preset-selector.tsx | 4 +- .../src/components/editor/preview-panel.tsx | 1 + .../editor/properties-panel/property-item.tsx | 4 +- .../properties-panel/text-properties.tsx | 422 ++++++++++-------- apps/web/src/components/export-button.tsx | 185 -------- .../{ => providers}/editor-provider.tsx | 0 apps/web/src/components/ui/progress.tsx | 4 +- apps/web/src/lib/export.ts | 147 ++++++ apps/web/src/lib/timeline-renderer.ts | 8 +- apps/web/src/stores/text-properties-store.ts | 33 ++ apps/web/src/types/export.ts | 17 + 20 files changed, 731 insertions(+), 599 deletions(-) delete mode 100644 apps/web/src/components/background-settings.tsx rename apps/web/src/components/{ => editor}/editor-header.tsx (93%) create mode 100644 apps/web/src/components/editor/export-button.tsx rename apps/web/src/components/{ => editor}/onboarding.tsx (97%) rename apps/web/src/components/editor/{media-panel/views/base-view.tsx => panel-base-view.tsx} (60%) rename apps/web/src/components/{ => editor}/panel-preset-selector.tsx (94%) delete mode 100644 apps/web/src/components/export-button.tsx rename apps/web/src/components/{ => providers}/editor-provider.tsx (100%) create mode 100644 apps/web/src/lib/export.ts create mode 100644 apps/web/src/stores/text-properties-store.ts create mode 100644 apps/web/src/types/export.ts diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index 4d5a27fc..1b53b6b5 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/apps/web/src/app/editor/[project_id]/page.tsx @@ -6,17 +6,17 @@ import { ResizablePanelGroup, ResizablePanel, ResizableHandle, -} from "../../../components/ui/resizable"; -import { MediaPanel } from "../../../components/editor/media-panel"; -import { PropertiesPanel } from "../../../components/editor/properties-panel"; -import { Timeline } from "../../../components/editor/timeline"; -import { PreviewPanel } from "../../../components/editor/preview-panel"; -import { EditorHeader } from "@/components/editor-header"; +} from "@/components/ui/resizable"; +import { MediaPanel } from "@/components/editor/media-panel"; +import { PropertiesPanel } from "@/components/editor/properties-panel"; +import { Timeline } from "@/components/editor/timeline"; +import { PreviewPanel } from "@/components/editor/preview-panel"; +import { EditorHeader } from "@/components/editor/editor-header"; import { usePanelStore } from "@/stores/panel-store"; import { useProjectStore } from "@/stores/project-store"; -import { EditorProvider } from "@/components/editor-provider"; +import { EditorProvider } from "@/components/providers/editor-provider"; import { usePlaybackControls } from "@/hooks/use-playback-controls"; -import { Onboarding } from "@/components/onboarding"; +import { Onboarding } from "@/components/editor/onboarding"; export default function Editor() { const { diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx deleted file mode 100644 index 0457cb05..00000000 --- a/apps/web/src/components/background-settings.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; -import { Button } from "./ui/button"; -import { BackgroundIcon } from "./icons"; -import { cn } from "@/lib/utils"; -import Image from "next/image"; -import { colors } from "@/data/colors/solid"; -import { useProjectStore } from "@/stores/project-store"; -import { PipetteIcon } from "lucide-react"; - -type BackgroundTab = "color" | "blur"; - -export function BackgroundSettings() { - const { activeProject, updateBackgroundType } = useProjectStore(); - - // ✅ Good: derive activeTab from activeProject during rendering - const activeTab = activeProject?.backgroundType || "color"; - - const handleColorSelect = (color: string) => { - updateBackgroundType("color", { backgroundColor: color }); - }; - - const handleBlurSelect = (blurIntensity: number) => { - updateBackgroundType("blur", { blurIntensity }); - }; - - const tabs = [ - { - label: "Color", - value: "color", - }, - { - label: "Blur", - value: "blur", - }, - ]; - - return ( - - - - - -
-

Background

-
- {tabs.map((tab) => ( - { - // Switch to the background type when clicking tabs - if (tab.value === "color") { - updateBackgroundType("color", { - backgroundColor: - activeProject?.backgroundColor || "#000000", - }); - } else { - updateBackgroundType("blur", { - blurIntensity: activeProject?.blurIntensity || 8, - }); - } - }} - className={cn( - "text-muted-foreground cursor-pointer", - activeTab === tab.value && "text-foreground" - )} - > - {tab.label} - - ))} -
-
- {activeTab === "color" ? ( - - ) : ( - - )} - - - ); -} - -function ColorView({ - selectedColor, - onColorSelect, -}: { - selectedColor: string; - onColorSelect: (color: string) => void; -}) { - return ( -
-
-
-
- -
- {colors.map((color) => ( - onColorSelect(color)} - /> - ))} -
-
- ); -} - -function ColorItem({ - color, - isSelected, - onClick, -}: { - color: string; - isSelected: boolean; - onClick: () => void; -}) { - return ( -
- ); -} - -function BlurView({ - selectedBlur, - onBlurSelect, -}: { - selectedBlur: number; - onBlurSelect: (blurIntensity: number) => void; -}) { - const blurLevels = [ - { label: "Light", value: 4 }, - { label: "Medium", value: 8 }, - { label: "Heavy", value: 18 }, - ]; - const blurImage = - "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"; - - return ( -
- {blurLevels.map((blur) => ( -
onBlurSelect(blur.value)} - > - {`Blur -
- - {blur.label} - -
-
- ))} -
- ); -} diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor/editor-header.tsx similarity index 93% rename from apps/web/src/components/editor-header.tsx rename to apps/web/src/components/editor/editor-header.tsx index ee5dfc17..ad2a5b5a 100644 --- a/apps/web/src/components/editor-header.tsx +++ b/apps/web/src/components/editor/editor-header.tsx @@ -1,10 +1,10 @@ "use client"; -import { Button } from "./ui/button"; +import { Button } from "../ui/button"; import { ChevronDown, ArrowLeft, SquarePen, Trash, Sun } from "lucide-react"; -import { HeaderBase } from "./header-base"; +import { HeaderBase } from "../header-base"; import { useProjectStore } from "@/stores/project-store"; -import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help"; +import { KeyboardShortcutsHelp } from "../keyboard-shortcuts-help"; import { useState } from "react"; import { DropdownMenu, @@ -12,10 +12,10 @@ import { DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, -} from "./ui/dropdown-menu"; +} from "../ui/dropdown-menu"; import Link from "next/link"; -import { RenameProjectDialog } from "./rename-project-dialog"; -import { DeleteProjectDialog } from "./delete-project-dialog"; +import { RenameProjectDialog } from "../rename-project-dialog"; +import { DeleteProjectDialog } from "../delete-project-dialog"; import { useRouter } from "next/navigation"; import { FaDiscord } from "react-icons/fa6"; import { useTheme } from "next-themes"; diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx new file mode 100644 index 00000000..e24d20df --- /dev/null +++ b/apps/web/src/components/editor/export-button.tsx @@ -0,0 +1,246 @@ +"use client"; + +import { useState } from "react"; +import { TransitionUpIcon } from "../icons"; +import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; +import { Button } from "../ui/button"; +import { Label } from "../ui/label"; +import { RadioGroup, RadioGroupItem } from "../ui/radio-group"; +import { Progress } from "../ui/progress"; +import { cn } from "@/lib/utils"; +import { + exportProject, + getExportMimeType, + getExportFileExtension, + DEFAULT_EXPORT_OPTIONS, +} from "@/lib/export"; +import { useProjectStore } from "@/stores/project-store"; +import { Download, X } from "lucide-react"; +import { ExportFormat, ExportQuality, ExportResult } from "@/types/export"; +import { PropertyGroup } from "./properties-panel/property-item"; + +export function ExportButton() { + const [isExportPopoverOpen, setIsExportPopoverOpen] = useState(false); + const { activeProject } = useProjectStore(); + + const handleExport = () => { + setIsExportPopoverOpen(true); + }; + + const hasProject = !!activeProject; + + return ( + + + + + {hasProject && } + + ); +} + +function ExportPopover({ + onOpenChange, +}: { + onOpenChange: (open: boolean) => void; +}) { + const { activeProject } = useProjectStore(); + const [format, setFormat] = useState( + DEFAULT_EXPORT_OPTIONS.format + ); + const [quality, setQuality] = useState( + DEFAULT_EXPORT_OPTIONS.quality + ); + const [isExporting, setIsExporting] = useState(false); + const [progress, setProgress] = useState(0); + const [exportResult, setExportResult] = useState(null); + + const handleExport = async () => { + if (!activeProject) return; + + setIsExporting(true); + setProgress(0); + setExportResult(null); + + const result = await exportProject({ + format, + quality, + fps: activeProject.fps, + onProgress: setProgress, + onCancel: () => false, // TODO: Add cancel functionality + }); + + setIsExporting(false); + setExportResult(result); + + if (result.success && result.buffer) { + // Download the file + const mimeType = getExportMimeType(format); + const extension = getExportFileExtension(format); + const blob = new Blob([result.buffer], { type: mimeType }); + const url = URL.createObjectURL(blob); + + const a = document.createElement("a"); + a.href = url; + a.download = `${activeProject.name}${extension}`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + + onOpenChange(false); + setExportResult(null); + setProgress(0); + } + }; + + const handleClose = () => { + if (!isExporting) { + onOpenChange(false); + setExportResult(null); + setProgress(0); + } + }; + + return ( + + <> +
+

+ {isExporting ? "Exporting project" : "Export project"} +

+ +
+ +
+ {!isExporting && ( + <> +
+ + setFormat(value as ExportFormat)} + > +
+ + +
+
+ + +
+ + + + + + setQuality(value as ExportQuality) + } + > +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ + + + )} + + {isExporting && ( +
+
+
+

+ {Math.round(progress * 100)}% +

+

100%

+
+ +
+ + +
+ )} + + {exportResult && !exportResult.success && ( +
+
Export failed
+

+ {exportResult.error || "Unknown error occurred"} +

+ +
+ )} +
+ + + ); +} diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx index 393481a5..59403a8d 100644 --- a/apps/web/src/components/editor/media-panel/views/captions.tsx +++ b/apps/web/src/components/editor/media-panel/views/captions.tsx @@ -1,6 +1,6 @@ import { Button } from "@/components/ui/button"; import { PropertyGroup } from "../../properties-panel/property-item"; -import { BaseView } from "./base-view"; +import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view"; import { Language, LanguageSelect } from "@/components/language-select"; import { useState, useRef, useEffect } from "react"; import { extractTimelineAudio } from "@/lib/mediabunny-utils"; diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx index d33b4cce..df1ec54f 100644 --- a/apps/web/src/components/editor/media-panel/views/settings.tsx +++ b/apps/web/src/components/editor/media-panel/views/settings.tsx @@ -7,7 +7,7 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { BaseView } from "./base-view"; +import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view"; import { PropertyItem, PropertyItemLabel, diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx index 5d522c84..22fc2413 100644 --- a/apps/web/src/components/editor/media-panel/views/text.tsx +++ b/apps/web/src/components/editor/media-panel/views/text.tsx @@ -1,5 +1,5 @@ import { DraggableMediaItem } from "@/components/ui/draggable-item"; -import { BaseView } from "./base-view"; +import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view"; import { useTimelineStore } from "@/stores/timeline-store"; import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants"; diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/editor/onboarding.tsx similarity index 97% rename from apps/web/src/components/onboarding.tsx rename to apps/web/src/components/editor/onboarding.tsx index ac4b0f04..8ee60690 100644 --- a/apps/web/src/components/onboarding.tsx +++ b/apps/web/src/components/editor/onboarding.tsx @@ -1,7 +1,7 @@ "use client"; -import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"; -import { Button } from "./ui/button"; +import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"; +import { Button } from "../ui/button"; import { ArrowRightIcon } from "lucide-react"; import { useState, useEffect } from "react"; import ReactMarkdown from "react-markdown"; diff --git a/apps/web/src/components/editor/media-panel/views/base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx similarity index 60% rename from apps/web/src/components/editor/media-panel/views/base-view.tsx rename to apps/web/src/components/editor/panel-base-view.tsx index 2cd33535..0cfb8f40 100644 --- a/apps/web/src/components/editor/media-panel/views/base-view.tsx +++ b/apps/web/src/components/editor/panel-base-view.tsx @@ -2,9 +2,11 @@ import { ScrollArea } from "@/components/ui/scroll-area"; import { Separator } from "@/components/ui/separator"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -interface BaseViewProps { +interface PanelBaseViewProps { children?: React.ReactNode; defaultTab?: string; + value?: string; + onValueChange?: (value: string) => void; tabs?: { value: string; label: string; @@ -28,29 +30,38 @@ function ViewContent({ ); } -export function BaseView({ +export function PanelBaseView({ children, defaultTab, + value, + onValueChange, tabs, className = "", ref, -}: BaseViewProps) { +}: PanelBaseViewProps) { return (
{!tabs || tabs.length === 0 ? ( {children} ) : ( - -
- - {tabs.map((tab) => ( - - {tab.label} - - ))} - + +
+
+ + {tabs.map((tab) => ( + + {tab.label} + + ))} + +
+
- {tabs.map((tab) => ( setIsExpanded(!isExpanded)} > - + {title} diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx index 744c2be5..139c7005 100644 --- a/apps/web/src/components/editor/properties-panel/text-properties.tsx +++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx @@ -6,8 +6,14 @@ import { useTimelineStore } from "@/stores/timeline-store"; import { Slider } from "@/components/ui/slider"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; -import { Switch } from "@/components/ui/switch"; // Add Switch import +import { Switch } from "@/components/ui/switch"; import { useState, useRef } from "react"; +import { PanelBaseView } from "@/components/editor/panel-base-view"; +import { + TEXT_PROPERTIES_TABS, + isTextPropertiesTab, + useTextPropertiesStore, +} from "@/stores/text-properties-store"; import { PropertyItem, PropertyItemLabel, @@ -22,6 +28,7 @@ export function TextProperties({ trackId: string; }) { const { updateTextElement } = useTimelineStore(); + const { activeTab, setActiveTab } = useTextPropertiesStore(); // Local state for input values to allow temporary empty/invalid states const [fontSizeInput, setFontSizeInput] = useState( @@ -105,199 +112,232 @@ export function TextProperties({ }; return ( -
-