Files
Recordly/src/App.tsx
T
webadderall 53c7aa7e77 feat(updater): Windows native notifications and toast window fixes
- Use native OS Notification on Windows instead of transparent overlay
  toast window (transparent BrowserWindows are unreliable on Windows)
- Set app user model ID on Windows for proper notification grouping
- Make toast window opaque with solid background on Windows
- Only set transparent body background on macOS for update-toast window
- Refactor UpdateToastWindow to inline styles for Windows compatibility
- Add primaryAction-based button rendering in toast UI
- Add polling fallback for toast payload in UpdateToastWindow
- Add global CSS variables for brand accent color
2026-03-29 19:30:02 +11:00

91 lines
3.1 KiB
TypeScript

import { useEffect, useState } from "react";
import { CountdownOverlay } from "./components/countdown/CountdownOverlay";
import { LaunchWindow } from "./components/launch/LaunchWindow";
import { SourceSelector } from "./components/launch/SourceSelector";
import { UpdateToastWindow } from "./components/launch/UpdateToastWindow";
import { Toaster } from "./components/ui/sonner";
import { ShortcutsConfigDialog } from "./components/video-editor/ShortcutsConfigDialog";
import VideoEditor from "./components/video-editor/VideoEditor";
import { useI18n } from "./contexts/I18nContext";
import { ShortcutsProvider } from "./contexts/ShortcutsContext";
import { loadAllCustomFonts } from "./lib/customFonts";
export default function App() {
const [windowType, setWindowType] = useState("");
const { locale, t } = useI18n();
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const type = params.get("windowType") || "";
const isMacOS = /mac/i.test(navigator.platform);
setWindowType(type);
if (
type === "hud-overlay" ||
type === "source-selector" ||
type === "countdown" ||
(type === "update-toast" && isMacOS)
) {
document.body.style.background = "transparent";
document.documentElement.style.background = "transparent";
document.getElementById("root")?.style.setProperty("background", "transparent");
}
if (type === "hud-overlay" || type === "update-toast") {
document.documentElement.style.overflow = "visible";
document.body.style.overflow = "visible";
document.getElementById("root")?.style.setProperty("overflow", "visible");
}
loadAllCustomFonts().catch((error) => {
console.error("Failed to load custom fonts:", error);
});
}, []);
useEffect(() => {
document.title =
windowType === "editor" ? t("app.editorTitle", "Recordly Editor") : t("app.name", "Recordly");
}, [windowType, locale, t]);
switch (windowType) {
case "hud-overlay":
return (
<>
<LaunchWindow />
<Toaster theme="dark" className="pointer-events-auto" />
</>
);
case "source-selector":
return <SourceSelector />;
case "countdown":
return <CountdownOverlay />;
case "update-toast":
return <UpdateToastWindow />;
case "editor":
return (
<ShortcutsProvider>
<VideoEditor />
<ShortcutsConfigDialog />
</ShortcutsProvider>
);
default:
return (
<div className="flex h-full w-full items-center justify-center bg-slate-950 text-white">
<div className="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-5 shadow-2xl shadow-black/30 backdrop-blur-xl">
<img
src="/app-icons/recordly-128.png"
alt={t("app.name", "Recordly")}
className="h-12 w-12 rounded-xl"
/>
<div>
<h1 className="text-xl font-semibold tracking-tight">{t("app.name", "Recordly")}</h1>
<p className="text-sm text-white/65">
{t("app.subtitle", "Screen recording and editing")}
</p>
</div>
</div>
</div>
);
}
}