huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

export working

Browse Source
This commit is contained in:
Siddharth
2025-11-16 16:02:21 -07:00
parent 75388e1218
commit 34e9efdb73
18 changed files with 1336 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/ExportDialog.tsx
+153
View File
@@ -0,0 +1,153 @@
import { useEffect, useState } from 'react';
import { X, Download, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { ExportProgress } from '@/lib/exporter';
interface ExportDialogProps {
isOpen: boolean;
onClose: () => void;
progress: ExportProgress | null;
isExporting: boolean;
error: string | null;
onCancel?: () => void;
}
function formatTime(seconds: number): string {
if (!isFinite(seconds) || seconds < 0) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
export function ExportDialog({
isOpen,
onClose,
progress,
isExporting,
error,
onCancel,
}: ExportDialogProps) {
const [showSuccess, setShowSuccess] = useState(false);
useEffect(() => {
if (!isExporting && progress && progress.percentage >= 100 && !error) {
setShowSuccess(true);
const timer = setTimeout(() => {
setShowSuccess(false);
onClose();
}, 2000);
return () => clearTimeout(timer);
}
}, [isExporting, progress, error, onClose]);
if (!isOpen) return null;
return (
<>
<div
className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 animate-in fade-in duration-200"
onClick={isExporting ? undefined : onClose}
/>
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-[#23232a] rounded-2xl shadow-2xl border border-[#34B27B] p-8 w-[90vw] max-w-md animate-in zoom-in-95 duration-200">
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3">
{showSuccess ? (
<>
<div className="w-10 h-10 rounded-full bg-[#34B27B] flex items-center justify-center">
<Download className="w-6 h-6 text-white" />
</div>
<span className="text-xl font-bold text-slate-200">Export Complete!</span>
</>
) : (
<>
{isExporting ? (
<Loader2 className="w-6 h-6 text-[#34B27B] animate-spin" />
) : (
<Download className="w-6 h-6 text-[#34B27B]" />
)}
<span className="text-xl font-bold text-slate-200">
{error ? 'Export Failed' : isExporting ? 'Exporting Video' : 'Export Video'}
</span>
</>
)}
</div>
{!isExporting && (
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="hover:bg-[#34B27B]/20 text-slate-200"
>
<X className="w-5 h-5" />
</Button>
)}
</div>
{error && (
<div className="mb-6">
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4">
<p className="text-sm text-red-400">{error}</p>
</div>
</div>
)}
{isExporting && progress && (
<div className="space-y-4">
<div className="space-y-2">
<div className="flex justify-between text-sm text-slate-400">
<span>Progress</span>
<span className="font-mono">{progress.percentage.toFixed(1)}%</span>
</div>
<div className="h-3 bg-[#18181b] rounded-full overflow-hidden border border-[#34B27B]/30">
<div
className="h-full bg-gradient-to-r from-[#34B27B] to-[#2a9964] transition-all duration-300 ease-out"
style={{ width: `${Math.min(progress.percentage, 100)}%` }}
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<div className="text-slate-400 mb-1">Frame</div>
<div className="text-slate-200 font-mono">
{progress.currentFrame} / {progress.totalFrames}
</div>
</div>
<div>
<div className="text-slate-400 mb-1">Time Remaining</div>
<div className="text-slate-200 font-mono">
{formatTime(progress.estimatedTimeRemaining)}
</div>
</div>
</div>
{onCancel && (
<div className="pt-4 border-t border-[#34B27B]/20">
<Button
onClick={onCancel}
variant="outline"
className="w-full bg-transparent border-slate-600 text-slate-300 hover:bg-slate-800"
>
Cancel Export
</Button>
</div>
)}
</div>
)}
{showSuccess && (
<div className="text-center py-8">
<p className="text-lg text-slate-200">Video saved successfully!</p>
</div>
)}
{!isExporting && !error && !showSuccess && (
<div className="text-center py-4">
<p className="text-slate-400">Ready to export your video</p>
</div>
)}
</div>
</>
);
}
src/components/video-editor/SettingsPanel.tsx
+3 -1
View File
@@ -40,6 +40,7 @@ interface SettingsPanelProps {
cropRegion?: CropRegion;
onCropChange?: (region: CropRegion) => void;
videoElement?: HTMLVideoElement | null;
onExport?: () => void;
}
const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
@@ -50,7 +51,7 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
{ depth: 5, label: "3.5×" },
];
export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, showShadow, onShadowChange, showBlur, onBlurChange, cropRegion, onCropChange, videoElement }: SettingsPanelProps) {
export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth, onZoomDepthChange, selectedZoomId, onZoomDelete, showShadow, onShadowChange, showBlur, onBlurChange, cropRegion, onCropChange, videoElement, onExport }: SettingsPanelProps) {
const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
const [gradient, setGradient] = useState<string>(GRADIENTS[0]);
const [showCropDropdown, setShowCropDropdown] = useState(false);
@@ -241,6 +242,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
<Button
type="button"
size="lg"
onClick={onExport}
className="w-full py-5 text-lg flex items-center justify-center gap-3 bg-[#34B27B] text-white rounded-xl shadow-lg hover:bg-[#34B27B]/80 transition-all"
>
<Download className="w-6 h-6" />
src/components/video-editor/VideoEditor.tsx
+106
View File
@@ -2,11 +2,13 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";
import VideoPlayback, { VideoPlaybackRef } from "./VideoPlayback";
import PlaybackControls from "./PlaybackControls";
import TimelineEditor from "./timeline/TimelineEditor";
import { SettingsPanel } from "./SettingsPanel";
import { ExportDialog } from "./ExportDialog";
import type { Span } from "dnd-timeline";
import {
DEFAULT_ZOOM_DEPTH,
@@ -17,6 +19,7 @@ import {
type ZoomRegion,
type CropRegion,
} from "./types";
import { VideoExporter, type ExportProgress } from "@/lib/exporter";
const WALLPAPER_COUNT = 12;
const WALLPAPER_PATHS = Array.from({ length: WALLPAPER_COUNT }, (_, i) => `/wallpapers/wallpaper${i + 1}.jpg`);
@@ -34,9 +37,14 @@ export default function VideoEditor() {
const [cropRegion, setCropRegion] = useState<CropRegion>(DEFAULT_CROP_REGION);
const [zoomRegions, setZoomRegions] = useState<ZoomRegion[]>([]);
const [selectedZoomId, setSelectedZoomId] = useState<string | null>(null);
const [isExporting, setIsExporting] = useState(false);
const [exportProgress, setExportProgress] = useState<ExportProgress | null>(null);
const [exportError, setExportError] = useState<string | null>(null);
const [showExportDialog, setShowExportDialog] = useState(false);
const videoPlaybackRef = useRef<VideoPlaybackRef>(null);
const nextZoomIdRef = useRef(1);
const exporterRef = useRef<VideoExporter | null>(null);
useEffect(() => {
async function loadVideo() {
@@ -155,6 +163,95 @@ export default function VideoEditor() {
}
}, [selectedZoomId, zoomRegions]);
const handleExport = useCallback(async () => {
if (!videoPath) {
toast.error('No video loaded');
return;
}
const video = videoPlaybackRef.current?.video;
if (!video) {
toast.error('Video not ready');
return;
}
setShowExportDialog(true);
setIsExporting(true);
setExportProgress(null);
setExportError(null);
try {
// Pause video during export
const wasPlaying = isPlaying;
if (wasPlaying) {
videoPlaybackRef.current?.pause();
}
// Determine export dimensions (use video dimensions)
const width = video.videoWidth;
const height = video.videoHeight;
const exporter = new VideoExporter({
videoUrl: videoPath,
width,
height,
frameRate: 60,
bitrate: 15_000_000,
codec: 'avc1.640033',
wallpaper,
zoomRegions,
showShadow,
showBlur,
cropRegion,
onProgress: (progress) => {
setExportProgress(progress);
},
});
exporterRef.current = exporter;
const result = await exporter.export();
if (result.success && result.blob) {
// Save the blob using Electron
const arrayBuffer = await result.blob.arrayBuffer();
const timestamp = Date.now();
const fileName = `export-${timestamp}.mp4`;
const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
if (saveResult.success) {
toast.success('Video exported successfully!');
} else {
setExportError(saveResult.message || 'Failed to save video');
toast.error(saveResult.message || 'Failed to save video');
}
} else {
setExportError(result.error || 'Export failed');
toast.error(result.error || 'Export failed');
}
// Resume playback if it was playing
if (wasPlaying) {
videoPlaybackRef.current?.play();
}
} catch (error) {
console.error('Export error:', error);
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
setExportError(errorMessage);
toast.error(`Export failed: ${errorMessage}`);
} finally {
setIsExporting(false);
exporterRef.current = null;
}
}, [videoPath, wallpaper, zoomRegions, showShadow, showBlur, cropRegion, isPlaying]);
const handleCancelExport = useCallback(() => {
if (exporterRef.current) {
exporterRef.current.cancel();
toast.info('Export cancelled');
}
}, []);
if (loading) {
return (
<div className="flex items-center justify-center h-screen bg-background">
@@ -173,6 +270,14 @@ export default function VideoEditor() {
return (
<div className="flex h-screen bg-background bg-black p-8 gap-8">
<Toaster position="top-center" />
<ExportDialog
isOpen={showExportDialog}
onClose={() => setShowExportDialog(false)}
progress={exportProgress}
isExporting={isExporting}
error={exportError}
onCancel={handleCancelExport}
/>
<div className="flex flex-col flex-[7] min-w-0 gap-6">
<div className="flex flex-col gap-3 flex-1">
{videoPath && (
@@ -232,6 +337,7 @@ export default function VideoEditor() {
cropRegion={cropRegion}
onCropChange={setCropRegion}
videoElement={videoPlaybackRef.current?.video || null}
onExport={handleExport}
/>
</div>
);
src/components/video-editor/VideoPlayback.tsx
+3
View File
@@ -422,6 +422,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
autoDensity: true,
});
// Lock ticker to 60fps for consistent animation speed across all displays
app.ticker.maxFPS = 60;
if (!mounted) {
app.destroy(true, { children: true, texture: true, textureSource: true });
return;