diff --git a/package.json b/package.json
index a3f4e2a..ef2c197 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-toggle": "^1.1.10",
"@radix-ui/react-toggle-group": "^1.1.11",
+ "@radix-ui/react-tooltip": "^1.2.8",
"@types/gif.js": "^0.2.5",
"@uiw/color-convert": "^2.9.2",
"@uiw/react-color-block": "^2.9.2",
diff --git a/src/App.tsx b/src/App.tsx
index ee42296..83b3972 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { LaunchWindow } from "./components/launch/LaunchWindow";
import { SourceSelector } from "./components/launch/SourceSelector";
+import { TooltipProvider } from "./components/ui/tooltip";
import { ShortcutsConfigDialog } from "./components/video-editor/ShortcutsConfigDialog";
import VideoEditor from "./components/video-editor/VideoEditor";
import { ShortcutsProvider } from "./contexts/ShortcutsContext";
@@ -25,23 +26,27 @@ export default function App() {
});
}, []);
- switch (windowType) {
- case "hud-overlay":
- return ;
- case "source-selector":
- return ;
- case "editor":
- return (
-
-
-
-
- );
- default:
- return (
-
-
Openscreen
-
- );
- }
+ const content = (() => {
+ switch (windowType) {
+ case "hud-overlay":
+ return ;
+ case "source-selector":
+ return ;
+ case "editor":
+ return (
+
+
+
+
+ );
+ default:
+ return (
+
+
Openscreen
+
+ );
+ }
+ })();
+
+ return {content};
}
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index aee9c2f..747d7d5 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -13,6 +13,7 @@ import {
} from "react-icons/md";
import { RxDragHandleDots2 } from "react-icons/rx";
import { ChevronDown } from "lucide-react";
+import { Tooltip } from "../ui/tooltip";
import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
import { useScreenRecorder } from "../../hooks/useScreenRecorder";
@@ -20,7 +21,7 @@ import { formatTimePadded } from "../../utils/timeUtils";
import { AudioLevelMeter } from "../ui/audio-level-meter";
import styles from "./LaunchWindow.module.css";
-const ICON_SIZE = 18;
+const ICON_SIZE = 20;
const ICON_CONFIG = {
drag: { icon: RxDragHandleDots2, size: ICON_SIZE },
@@ -278,24 +279,26 @@ export function LaunchWindow() {
{/* Open video file */}
-
+
+
+
{/* Open project */}
-
+
+
+
{/* Window controls */}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..bd6687b
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,70 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+ delayDuration = 200,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function TooltipRoot({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 6,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
+
+function Tooltip({
+ children,
+ content,
+ side,
+ className,
+}: {
+ children: React.ReactNode;
+ content: React.ReactNode;
+ side?: "top" | "right" | "bottom" | "left";
+ className?: string;
+}) {
+ return (
+
+ {children}
+
+ {content}
+
+
+ );
+}
+
+export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, Tooltip };