record/ select your own video

src/components/video-editor/SettingsPanel.tsx

@@ -8,7 +8,8 @@ import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import Colorful from '@uiw/react-color-colorful';
 import { hsvaToHex } from '@uiw/color-convert';
-import { Trash2, Download, Crop, X, Bug, Upload, Coffee } from "lucide-react";
+import { Trash2, Download, Crop, X, Bug, Upload } from "lucide-react";
+import { GiHearts } from "react-icons/gi";
 import { toast } from "sonner";
 import type { ZoomDepth, CropRegion } from "./types";
 import { CropControl } from "./CropControl";
@@ -415,9 +416,9 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
             onClick={() => {
               window.electronAPI?.openExternalUrl('https://github.com/siddharthvaddem/openscreen/issues/new');
             }}
-            className="flex-1 flex items-center justify-center gap-2 text-xs text-slate-500 hover:text-slate-300 transition-colors py-2 group"
+            className="flex-1 flex items-center justify-center gap-2 text-xs py-2"
           >
-            <Bug className="w-3 h-3 group-hover:text-[#34B27B] transition-colors" />
+            <Bug className="w-3 h-3 text-[#34B27B]" />
             <span>Report a Bug</span>
           </button>
           <button
@@ -425,10 +426,10 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
             onClick={() => {
               window.electronAPI?.openExternalUrl('https://buymeacoffee.com/siddharthvaddem');
             }}
-            className="flex-1 flex items-center justify-center gap-2 text-xs text-slate-500 hover:text-slate-300 transition-colors py-2 group"
+            className="flex-1 flex items-center justify-center gap-2 text-xs"
           >
-            <Coffee className="w-3 h-3 group-hover:text-[#FFDD00] transition-colors" />
-            <span>Buy me a Coffee</span>
+            <GiHearts className="w-3 h-3 text-red-500" />
+            <span>Support my work</span>
           </button>
         </div>
       </div>

src/components/video-editor/VideoEditor.tsx

@@ -66,13 +66,13 @@ export default function VideoEditor() {
   useEffect(() => {
     async function loadVideo() {
       try {
-        const result = await window.electronAPI.getRecordedVideoPath();
+        const result = await window.electronAPI.getCurrentVideoPath();
         
         if (result.success && result.path) {
           const videoUrl = toFileUrl(result.path);
           setVideoPath(videoUrl);
         } else {
-          setError(result.message || 'Failed to load video');
+          setError('No video to load. Please record or select a video.');
         }
       } catch (err) {
         setError('Error loading video: ' + String(err));

src/components/video-editor/VideoPlayback.tsx

@@ -665,7 +665,13 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
     video.pause();
     allowPlaybackRef.current = false;
     currentTimeRef.current = 0;
-    setVideoReady(true);
+    
+    // hacky fix: To ensure video is fully ready for PixiJS
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setVideoReady(true);
+      });
+    });
   };
 
   const [resolvedWallpaper, setResolvedWallpaper] = useState<string | null>(null);