Update
This commit is contained in:
74
CLAUDE.md
74
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
|
||||
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -331,6 +331,22 @@ const VideoPreview = ({
|
||||
{watermarked && (
|
||||
<Text
|
||||
key={`watermark-${fontsLoaded}`}
|
||||
ref={(node) => {
|
||||
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
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user