diff --git a/CLAUDE.md b/CLAUDE.md index 4c69319..78074c2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -167,29 +167,65 @@ ### Admin/Management ## Frontend Component Structure +### Application Entry & Shell (`/resources/js/`) +- **app.tsx**: Main Inertia.js application entry with error boundaries, context providers (GA4, Mitt, Axios), and global toaster +- **app-shell.tsx**: Layout wrapper providing either header or sidebar variants using SidebarProvider +- **ssr.tsx**: Server-side rendering entry point for enhanced performance + ### Editor System (`/resources/js/modules/editor/`) -- **Main Editor** (`editor.jsx`): Central responsive component managing canvas, sidebars, and responsive design -- **Editor Controls** (`editor-controls.jsx`): Video playback controls with play/pause, reset, refresh, and download -- **Editor Canvas** (`editor-canvas.jsx`): Konva.js-based canvas with drag-and-drop timeline editing -- **Multiple Sidebars**: EditNavSidebar, EditSidebar, TextSidebar for different editing modes -- **AI Integration** (`editor-ai-sheet.jsx`): AI-powered meme generation interface +- **editor.jsx**: Central responsive orchestrator managing canvas, sidebars, viewport detection, and responsive design +- **editor-controls.jsx**: Video playback controls with play/pause, reset, refresh, download via event emission +- **editor-canvas.jsx**: Responsive canvas wrapper that scales the video editor to fit different screen sizes +- **editor-ai-sheet.jsx**: AI-powered meme generation interface with job polling, status tracking, and credit management +- **editor-header.jsx**: Header component for the editor interface with navigation controls -### State Management Architecture -- **VideoEditorStore**: Video playback state, text element selection -- **MediaStore**: Meme/background selection, AI integration, API calls, generation history -- **UserStore**: User authentication and profile management -- **PricingStore**: Subscription and credit management -- **localSettingsStore**: User preferences and UI settings +### Canvas & Video Processing (`/resources/js/modules/editor/partials/canvas/`) +- **video-editor.jsx**: Core Konva.js canvas with timeline processing, video/image handling, and FFmpeg export +- **video-preview.jsx**: Video preview component with element selection and transformation utilities +- **video-download-modal.jsx**: Download interface for multiple export formats (MOV, WebM, GIF, WebP) +- **video-export.jsx**: Export functionality with FFmpeg.wasm integration and format conversion -### Component Communication -- **Mitt.js Event System**: Event-driven architecture for editor interactions -- **Common Events**: `video-play`, `video-reset`, `video-open-download-modal`, `open-ai-editor-sheet`, `text-element-selected` -- **Responsive Design**: Mobile-first with progressive enhancement, viewport detection hooks +### Sidebar Components (`/resources/js/modules/editor/partials/`) +- **edit-nav-sidebar.jsx**: Navigation sidebar for switching between memes and backgrounds +- **edit-sidebar.jsx**: Main editing sidebar with content selection interfaces +- **text-sidebar.jsx**: Text editing sidebar for customizing meme captions and text properties -### UI Component Library -- **Radix UI Base**: Comprehensive accessible component primitives -- **Custom Components**: Animated elements, error boundaries, tailwind breakpoint utilities -- **Styling**: Tailwind CSS with custom design system and responsive utilities +### Authentication System (`/resources/js/modules/auth/`) +- **AuthDialog.jsx**: Modal dialog for Google OAuth authentication with login/signup switching +- **auth-user.jsx**: User authentication component and user state management + +### State Management Stores (`/resources/js/stores/`) +- **MediaStore.js**: Comprehensive store for meme/background selection, AI generation, API calls, generation history, job polling +- **VideoEditorStore.js**: Video playback state, text element selection for canvas interactions +- **UserStore.js**: User authentication, billing, credits, premium export functionality +- **PricingStore.js**: Subscription management, pricing tiers, and upgrade flows +- **localSettingsStore.js**: User preferences, UI settings, appearance themes + +### Page Components (`/resources/js/pages/`) +- **Home System**: `home.tsx` with Hero, Features, FAQ sections and animated counters +- **Dashboard**: `dashboard.tsx` with user analytics and generation history +- **Authentication Pages**: Login, register, password reset, email verification flows +- **Settings Pages**: Profile, appearance, password management interfaces +- **Admin Pages**: Dashboard, background generation tools for content management + +### UI Component Library (`/resources/js/components/ui/`) +- **Radix UI Base**: Complete accessible component primitives (buttons, dialogs, sheets, forms, tables) +- **Form Controls**: Input, textarea, select, checkbox, radio-group with validation +- **Layout Components**: Card, dialog, sheet, sidebar, tabs, accordion for structured layouts +- **Feedback Components**: Alert, toast, progress, skeleton, spinner for user feedback +- **Navigation**: Breadcrumb, navigation-menu, pagination for app navigation +- **Data Display**: Table, avatar, badge, chart for content presentation + +### Enhanced UI Components (`/resources/js/components/magicui/` & `/resources/js/components/reactbits/`) +- **Animation Components**: Animated beam, gradient text, sparkles text, word rotation +- **Special Effects**: CountUp, GlitchText, ShinyText, TiltedCard for engaging interactions +- **Layout Enhancements**: Bento grid, marquee, pulsating button for dynamic layouts + +### Utility Systems (`/resources/js/`) +- **Hooks**: Custom React hooks for appearance, mobile detection, user initials, navigation +- **Plugins**: Context providers for Axios, Google Analytics, Mitt.js event system +- **Layouts**: Flexible layout system with auth, app, and settings variants +- **Types**: TypeScript definitions for global types, API responses, and component props ## Backend Architecture diff --git a/resources/js/modules/editor/partials/canvas/video-export.jsx b/resources/js/modules/editor/partials/canvas/video-export.jsx index f25bbf0..653c851 100644 --- a/resources/js/modules/editor/partials/canvas/video-export.jsx +++ b/resources/js/modules/editor/partials/canvas/video-export.jsx @@ -224,11 +224,17 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark opacity: WATERMARK_CONFIG.opacity, align: 'center', verticalAlign: 'middle', - offsetX: 90, // Approximate half-width to center the text - offsetY: 5, // Approximate half-height to center the text }); layer.add(watermarkText); + + // Force text measurement and update offset for proper centering + watermarkText._setTextData(); + const textWidth = watermarkText.width(); + const textHeight = watermarkText.height(); + watermarkText.offsetX(textWidth / 2); + watermarkText.offsetY(textHeight / 2); + layer.draw(); const dataURL = stage.toDataURL({ diff --git a/resources/js/modules/editor/partials/canvas/video-preview.jsx b/resources/js/modules/editor/partials/canvas/video-preview.jsx index 2cf6630..555ac82 100644 --- a/resources/js/modules/editor/partials/canvas/video-preview.jsx +++ b/resources/js/modules/editor/partials/canvas/video-preview.jsx @@ -331,6 +331,22 @@ const VideoPreview = ({ {watermarked && ( { + if (node && fontsLoaded) { + // Force text measurement after font loading + setTimeout(() => { + node._setTextData(); + // Update offset to properly center the text + const textWidth = node.width(); + const textHeight = node.height(); + node.offsetX(textWidth / 2); + node.offsetY(textHeight / 2); + if (layerRef.current) { + layerRef.current.batchDraw(); + } + }, 0); + } + }} text="memefa.st" x={dimensions.width / 2} y={dimensions.height / 2 + dimensions.height * 0.2} @@ -342,8 +358,6 @@ const VideoPreview = ({ opacity={WATERMARK_CONFIG.opacity} align="center" verticalAlign="middle" - offsetX={90} // Approximate half-width to center the text - offsetY={5} // Approximate half-height to center the text draggable={false} listening={false} // Prevents any mouse interactions />