🎬 Video Editor

\n {\n if (window.deferredPrompt) {\n window.deferredPrompt.prompt();\n }\n }}\n >\n Install\n \n \n {isExporting ? (\n <>\n

\n Exporting...\n \n ) : (\n <>📤 Export\n )}\n \n

\n\n {/* Main Content */}\n

\n {/* Video Preview */}\n

\n {project.clips.length > 0 ? (\n \n ) : (\n

🎬

No clips added yet

Upload videos or record new ones

\n )}\n

\n\n {/* Timeline with drag and drop */}\n

Timeline

\n {project.clips.length} clips • {project.totalDuration.toFixed(1)}s\n

\n {project.clips.length === 0 ? (\n

\n Drop video files here or use upload button\n

\n ) : (\n project.clips.map((clip, index) => (\n setSelectedClip(clip.id)}\n draggable\n onDragStart={() => handleDragStart(clip.id)}\n onDragOver={handleDragOver}\n onDrop={(e) => handleDrop(e, clip.id)}\n >\n

Clip {index + 1}

{clip.duration.toFixed(1)}s

{clip.file.name.substring(0, 15)}...

\n \n {/* Trim handles */}\n

\n \n {clip.effects.length > 0 && (\n

\n {clip.effects.length}\n

\n )}\n {\n e.stopPropagation();\n removeClip(clip.id);\n }}\n className=\"absolute -top-2 -right-2 bg-red-500 rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600\"\n >\n ×\n \n

\n ))\n )}\n

\n\n {/* Controls */}\n

\n {/* Upload/Record Buttons */}\n

\n fileInputRef.current?.click()}\n className=\"flex-1 bg-blue-600 py-3 rounded-lg font-medium flex items-center justify-center gap-2\"\n >\n 📁 Upload Videos\n \n \n 📹 Record\n \n

\n\n {/* Effects Button */}\n {selectedClip && (\n

\n setShowEffects(!showEffects)}\n className=\"flex-1 bg-purple-600 py-3 rounded-lg font-medium flex items-center justify-center gap-2\"\n >\n ✨ Add Effects\n \n {\n const clip = project.clips.find(c => c.id === selectedClip);\n if (clip && videoPreviewRef.current) {\n videoPreviewRef.current.src = clip.url;\n videoPreviewRef.current.currentTime = clip.trimStart;\n }\n }}\n className=\"px-4 py-3 bg-gray-600 rounded-lg font-medium\"\n >\n 👁️ Preview\n \n

\n )}\n\n {/* Project Actions */}\n

\n setShowProjects(true)}\n className=\"px-4 py-2 bg-gray-600 rounded-lg text-sm\"\n >\n 📁 Projects\n \n \n ➕ New\n \n

\n\n {/* Effects Panel */}\n {showEffects && (\n

Trending Effects

\n setShowEffects(false)}\n className=\"text-gray-400 text-xl\"\n >\n ×\n \n

\n \n {/* Effect Categories */}\n

\n {categories.map((category) => (\n setEffectCategory(category)}\n className={`px-3 py-1 rounded-full text-sm whitespace-nowrap ${\n effectCategory === category \n ? 'bg-purple-600 text-white' \n : 'bg-gray-700 text-gray-300'\n }`}\n >\n {category.charAt(0).toUpperCase() + category.slice(1)}\n \n ))}\n

\n \n

\n {filteredEffects.map((effect) => (\n applyEffect(effect.id)}\n className=\"effect-button bg-gray-700 p-3 rounded-lg text-center hover:bg-gray-600 transition-all\"\n >\n

{effect.thumbnail}

{effect.name}

\n {effect.popular && (\n

🔥 Trending

\n )}\n \n ))}\n

\n )}\n\n {/* Hidden file input */}\n \n\n {/* Hidden canvas for video processing */}\n