-
);
}
diff --git a/src/components/LaunchWindow.tsx b/src/components/LaunchWindow.tsx
index 5d9533a..d608630 100644
--- a/src/components/LaunchWindow.tsx
+++ b/src/components/LaunchWindow.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
import { useScreenRecorder } from "../hooks/useScreenRecorder";
import { Button } from "@/components/ui/button";
import { BsRecordCircle } from "react-icons/bs";
@@ -6,43 +7,71 @@ import { MdMonitor } from "react-icons/md";
export function LaunchWindow() {
const { recording, toggleRecording } = useScreenRecorder();
+ const [selectedSource, setSelectedSource] = useState("Screen");
+ const [hasSelectedSource, setHasSelectedSource] = useState(false);
+
+ useEffect(() => {
+ const checkSelectedSource = async () => {
+ if (window.electronAPI) {
+ const source = await window.electronAPI.getSelectedSource();
+ if (source) {
+ setSelectedSource(source.name);
+ setHasSelectedSource(true);
+ } else {
+ setSelectedSource("Screen");
+ setHasSelectedSource(false);
+ }
+ }
+ };
+
+ checkSelectedSource();
+
+ const interval = setInterval(checkSelectedSource, 500);
+ return () => clearInterval(interval);
+ }, []);
+
+ const truncateText = (text: string, maxLength: number = 6) => {
+ if (text.length <= maxLength) return text;
+ return text.substring(0, maxLength) + "...";
+ };
+
+ const openSourceSelector = () => {
+ if (window.electronAPI) {
+ window.electronAPI.openSourceSelector();
+ }
+ };
return (
Default Window
+Pangolin
-
+
-
+
diff --git a/src/components/SourceSelector.tsx b/src/components/SourceSelector.tsx
new file mode 100644
index 0000000..999d2db
--- /dev/null
+++ b/src/components/SourceSelector.tsx
@@ -0,0 +1,202 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card } from "@/components/ui/card";
+
+interface DesktopSource {
+ id: string;
+ name: string;
+ thumbnail: string | null;
+ display_id: string;
+ appIcon: string | null;
+}
+
+export function SourceSelector() {
+ const [sources, setSources] = useState([]);
+ const [selectedSource, setSelectedSource] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ loadSources();
+ }, []);
+
+ const loadSources = async () => {
+ try {
+ setLoading(true);
+ const rawSources = await window.electronAPI.getSources({
+ types: ['screen', 'window'],
+ thumbnailSize: { width: 320, height: 180 },
+ fetchWindowIcons: true
+ });
+
+ const formattedSources = rawSources.map(source => {
+ let displayName = source.name;
+
+ if (source.id.startsWith('window:') && source.name.includes(' — ')) {
+ displayName = source.name.split(' — ')[1] || source.name;
+ }
+
+ return {
+ id: source.id,
+ name: displayName,
+ thumbnail: source.thumbnail,
+ display_id: source.display_id,
+ appIcon: source.appIcon
+ };
+ });
+
+ setSources(formattedSources);
+ } catch (error) {
+ console.error('Error loading sources:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const screenSources = sources.filter(source => source.id.startsWith('screen:'));
+ const windowSources = sources.filter(source => source.id.startsWith('window:'));
+
+ const handleSourceSelect = (source: DesktopSource) => {
+ setSelectedSource(source);
+ };
+
+ const handleShare = async () => {
+ if (selectedSource) {
+ await window.electronAPI.selectSource(selectedSource);
+ }
+ };
+
+ if (loading) {
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..85d83be
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+ getSources: (opts: Electron.SourcesOptions) => Promise
switchToEditor: () => Promise
+ openSourceSelector: () => Promise
+ selectSource: (source: any) => Promise
+ getSelectedSource: () => Promise
}
}
\ No newline at end of file
+
+ );
+ }
+
+ return (
+
+
+
+ Loading sources...
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+
+
+ Screens
+
+
+ Windows
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {screenSources.map((source) => (
+ handleSourceSelect(source)}
+ >
+
+ ))}
+
+
+
+
+ 
+ {selectedSource?.id === source.id && (
+
+
+
+ )}
+
+
+
+
+ {source.name}
+
+
+ {windowSources.map((source) => (
+ handleSourceSelect(source)}
+ >
+
+ ))}
+
+
+
+
+
+ {selectedSource?.id === source.id && (
+
+
+
+ )}
+
+
+
+
+ {source.appIcon && (
+ 
+ )}
+
+
+ {source.name}
+
+
+
+
+
+
+
+