![]()
);
}
+
+ return
{content};
}
diff --git a/src/components/launch/HudWindow.tsx b/src/components/launch/HudWindow.tsx
new file mode 100644
index 00000000..a62dc3ad
--- /dev/null
+++ b/src/components/launch/HudWindow.tsx
@@ -0,0 +1,11 @@
+import { Toaster } from "../ui/sonner";
+import { LaunchWindow } from "./LaunchWindow";
+
+export default function HudWindow() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index f7583b28..66cbe608 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -30,6 +30,7 @@ import { useLaunchWindowSystemState } from "./hooks/useLaunchWindowSystemState";
import { useRecordingTimer } from "./hooks/useRecordingTimer";
import { useWebcamPreviewOverlay } from "./hooks/useWebcamPreviewOverlay";
import styles from "./LaunchWindow.module.css";
+import { MarqueeText } from "./MarqueeText";
import { CountdownPopover } from "./popovers/CountdownPopover";
import {
LaunchPopoverCoordinatorProvider,
@@ -41,7 +42,6 @@ import { ProjectPopover } from "./popovers/ProjectPopover";
import { SourcePopover } from "./popovers/SourcePopover";
import { WebcamPopover } from "./popovers/WebcamPopover";
import { RecordingControls } from "./RecordingControls";
-import { MarqueeText } from "./SourceSelector";
const SHOW_DEV_UPDATE_PREVIEW = import.meta.env.DEV;
diff --git a/src/components/launch/MarqueeText.tsx b/src/components/launch/MarqueeText.tsx
new file mode 100644
index 00000000..8788e7c1
--- /dev/null
+++ b/src/components/launch/MarqueeText.tsx
@@ -0,0 +1,37 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+export function MarqueeText({ text }: { text: string }) {
+ const staticRef = useRef
(null);
+ const [overflowing, setOverflowing] = useState(false);
+
+ useLayoutEffect(() => {
+ const node = staticRef.current;
+ if (!node || node.textContent !== text) return;
+ const checkOverflow = () => {
+ setOverflowing(node.scrollWidth > node.clientWidth + 1);
+ };
+ checkOverflow();
+ const observer = new ResizeObserver(checkOverflow);
+ observer.observe(node);
+ return () => observer.disconnect();
+ }, [text]);
+
+ return (
+
+
+ {text}
+
+
+
+ {text}
+
+ {text}
+
+
+
+
+ );
+}
diff --git a/src/components/launch/SourceSelector.tsx b/src/components/launch/SourceSelector.tsx
index 8ce54000..d05f855e 100644
--- a/src/components/launch/SourceSelector.tsx
+++ b/src/components/launch/SourceSelector.tsx
@@ -1,6 +1,6 @@
import { AppWindowIcon, CaretUpIcon, MonitorIcon } from "@phosphor-icons/react";
import * as React from "react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useScopedT } from "@/contexts/I18nContext";
@@ -14,6 +14,7 @@ import {
import "./launchTheme.css";
import "./SourceSelector.css";
import { useHudInteraction } from "./contexts/HudInteractionContext";
+import { MarqueeText } from "./MarqueeText";
interface SourceSelectorProps {
/** List of available screen sources */
@@ -36,42 +37,6 @@ interface SourceSelectorProps {
children?: React.ReactNode;
}
-export function MarqueeText({ text }: { text: string }) {
- const staticRef = useRef(null);
- const [overflowing, setOverflowing] = useState(false);
-
- useLayoutEffect(() => {
- const node = staticRef.current;
- if (!node || node.textContent !== text) return;
- const checkOverflow = () => {
- setOverflowing(node.scrollWidth > node.clientWidth + 1);
- };
- checkOverflow();
- const observer = new ResizeObserver(checkOverflow);
- observer.observe(node);
- return () => observer.disconnect();
- }, [text]);
-
- return (
-
-
- {text}
-
-
-
- {text}
-
- {text}
-
-
-
-
- );
-}
-
/**
* SourceSelectorContent - The actual list of sources
*/
diff --git a/src/components/launch/popovers/ProjectPopover.tsx b/src/components/launch/popovers/ProjectPopover.tsx
index 22df11d0..4219fdfa 100644
--- a/src/components/launch/popovers/ProjectPopover.tsx
+++ b/src/components/launch/popovers/ProjectPopover.tsx
@@ -1,8 +1,9 @@
-import type { ReactElement } from "react";
+import { lazy, type ReactElement, Suspense } from "react";
+import type { ProjectLibraryEntry } from "../../video-editor/ProjectBrowserDialog";
import { useLaunchPopoverCoordinator } from "./LaunchPopoverCoordinator";
import { HudPopover } from "./PopoverScaffold";
-import ProjectBrowserDialog from "../../video-editor/ProjectBrowserDialog";
-import type { ProjectLibraryEntry } from "../../video-editor/ProjectBrowserDialog";
+
+const ProjectBrowserDialog = lazy(() => import("../../video-editor/ProjectBrowserDialog"));
const POPOVER_ID = "projects";
@@ -31,18 +32,20 @@ export function ProjectPopover({
trigger={trigger}
align="center"
>
- {
- if (!nextOpen) requestClose(POPOVER_ID);
- }}
- entries={entries}
- renderMode="inline"
- onOpenProject={(path) => {
- onOpenProject(path);
- requestClose(POPOVER_ID);
- }}
- />
+
+ {
+ if (!nextOpen) requestClose(POPOVER_ID);
+ }}
+ entries={entries}
+ renderMode="inline"
+ onOpenProject={(path) => {
+ onOpenProject(path);
+ requestClose(POPOVER_ID);
+ }}
+ />
+
);
}
diff --git a/src/components/video-editor/EditorWindow.tsx b/src/components/video-editor/EditorWindow.tsx
new file mode 100644
index 00000000..f45d9cb6
--- /dev/null
+++ b/src/components/video-editor/EditorWindow.tsx
@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { ShortcutsProvider } from "../../contexts/ShortcutsContext";
+import { loadAllCustomFonts } from "../../lib/customFonts";
+import { AnnouncementDialog } from "../announcements/AnnouncementDialog";
+import { LiveAnnouncementNotifications } from "../announcements/LiveAnnouncementNotifications";
+import { ShortcutsConfigDialog } from "./ShortcutsConfigDialog";
+import VideoEditor from "./VideoEditor";
+
+export default function EditorWindow() {
+ useEffect(() => {
+ loadAllCustomFonts().catch((error) => {
+ console.error("Failed to load custom fonts:", error);
+ });
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 8be41018..7cb58576 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -1110,6 +1110,8 @@ export function SettingsPanel({
);
const [experimentalUpdatesEnabled, setExperimentalUpdatesEnabled] = useState(false);
const [savingExperimentalUpdates, setSavingExperimentalUpdates] = useState(false);
+ const [internalActiveEffectSection] = useState("scene");
+ const activeEffectSection = activeEffectSectionProp ?? internalActiveEffectSection;
const removeBackgroundStateRef = useRef<{
aspectRatio: AspectRatio;
padding: Padding;
@@ -1166,6 +1168,8 @@ export function SettingsPanel({
};
useEffect(() => {
+ if (!isBackgroundPanel && activeEffectSection !== "scene") return;
+
let mounted = true;
(async () => {
try {
@@ -1196,7 +1200,7 @@ export function SettingsPanel({
return () => {
mounted = false;
};
- }, []);
+ }, [activeEffectSection, isBackgroundPanel]);
const colorPalette = [
"#FF0000",
@@ -1231,8 +1235,6 @@ export function SettingsPanel({
const customColorInputRef = useRef(null);
const cursorClickEffectColorInputRef = useRef(null);
const defaultWebcam = initialEditorPreferences.webcam;
- const [internalActiveEffectSection] = useState("scene");
- const activeEffectSection = activeEffectSectionProp ?? internalActiveEffectSection;
const [builtInCursorPreviewUrls, setBuiltInCursorPreviewUrls] = useState<
Partial>
>({});
diff --git a/src/components/video-editor/export/useExportRunner.ts b/src/components/video-editor/export/useExportRunner.ts
index 95aef628..0472f921 100644
--- a/src/components/video-editor/export/useExportRunner.ts
+++ b/src/components/video-editor/export/useExportRunner.ts
@@ -1,13 +1,8 @@
import { useCallback, useRef } from "react";
import { toast } from "sonner";
-import {
- DEFAULT_MP4_CODEC,
- type ExportSettings,
- GifExporter,
- ModernVideoExporter,
- VideoExporter,
-} from "@/lib/exporter";
import { getMp4ExportBitrate } from "@/lib/exporter/exportBitrate";
+import { DEFAULT_MP4_CODEC } from "@/lib/exporter/mp4Support";
+import type { ExportSettings } from "@/lib/exporter/types";
import { calculateMp4ExportDimensions } from "../exportDimensions";
import { resolveMp4ExportRouting } from "../mp4ExportRouting";
import { resolveMp4ExportSettings } from "../mp4ExportSettings";
@@ -116,6 +111,7 @@ export function useExportRunner(input: ExportRunnerInput) {
if (settings.format === "gif" && settings.gifConfig) {
// GIF Export
+ const { GifExporter } = await import("@/lib/exporter/gifExporter");
const gifExporter = new GifExporter({
videoUrl: videoPath,
width: settings.gifConfig.width,
@@ -143,7 +139,7 @@ export function useExportRunner(input: ExportRunnerInput) {
maxPendingFrames: smokeExportConfig.maxPendingFrames,
});
- exporterRef.current = gifExporter as unknown as VideoExporter;
+ exporterRef.current = gifExporter;
const result = await gifExporter.export();
if (result.success && result.blob) {
@@ -287,11 +283,15 @@ export function useExportRunner(input: ExportRunnerInput) {
const exporter =
pipelineModel === "modern"
- ? new ModernVideoExporter({
+ ? new (
+ await import("@/lib/exporter/modernVideoExporter")
+ ).ModernVideoExporter({
...exporterConfig,
backendPreference,
})
- : new VideoExporter(exporterConfig);
+ : new (await import("@/lib/exporter/videoExporter")).VideoExporter(
+ exporterConfig,
+ );
exporterRef.current = exporter;
const result = await exporter.export();
diff --git a/src/components/video-editor/project/useProjectLibraryController.ts b/src/components/video-editor/project/useProjectLibraryController.ts
index a2cdf5a5..3ecb33e4 100644
--- a/src/components/video-editor/project/useProjectLibraryController.ts
+++ b/src/components/video-editor/project/useProjectLibraryController.ts
@@ -1,6 +1,6 @@
/* biome-ignore-all lint/correctness/useExhaustiveDependencies: grouped editor domain objects contain the thumbnail renderer dependencies. */
import { type RefObject, useCallback, useEffect, useRef } from "react";
-import { FrameRenderer } from "@/lib/exporter";
+import { FrameRenderer } from "@/lib/exporter/frameRenderer";
import { toFileUrl } from "../projectPersistence";
import type { useAppearanceState } from "../state/useAppearanceState";
import type { useProjectState } from "../state/useProjectState";
diff --git a/src/components/video-editor/projectPersistence.ts b/src/components/video-editor/projectPersistence.ts
index 563199c0..c50546d3 100644
--- a/src/components/video-editor/projectPersistence.ts
+++ b/src/components/video-editor/projectPersistence.ts
@@ -9,7 +9,7 @@ import type {
GifFrameRate,
GifSizePreset,
} from "@/lib/exporter";
-import { isValidMp4FrameRate } from "@/lib/exporter";
+import { isValidMp4FrameRate } from "@/lib/exporter/types";
import {
TEMPORAL_MOTION_BLUR_DEFAULT_SAMPLE_COUNT,
TEMPORAL_MOTION_BLUR_DEFAULT_SHUTTER_FRACTION,
diff --git a/vite.config.ts b/vite.config.ts
index 3dd36633..b9b67604 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -126,7 +126,6 @@ export default defineConfig({
rollupOptions: {
output: {
manualChunks: {
- pixi: ["pixi.js"],
"react-vendor": ["react", "react-dom"],
"video-processing": ["mediabunny", "mp4box", "@fix-webm-duration/fix"],
},