rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add theme URL param and adjust cpd theme based on it.

Browse Source 
Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo K
2024-02-21 21:41:40 +01:00
parent 11457da794
commit f613b17824
5 changed files with 80 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/App.tsx
View File

@@ -35,6 +35,7 @@ import { CrashView, LoadingView } from "./FullScreenView";
import { DisconnectedBanner } from "./DisconnectedBanner";
import { Initializer } from "./initializer";
import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
import { useUrlParams } from "./UrlParams";
const SentryRoute = Sentry.withSentryRouting(Route);
@@ -58,6 +59,31 @@ const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
return <>{children}</>;
};
interface ThemeProviderProps {
children: JSX.Element;
}
const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
const { theme } = useUrlParams();
const [previousTheme, setCurrentTheme] = useState<string | null>(
document.body.classList.item(0),
);
useEffect(() => {
// Don't update the current theme if the url does not contain a theme prop.
if (!theme) return;
const themeString = "cpd-theme-" + (theme ?? "dark");
if (themeString !== previousTheme) {
if (previousTheme) {
document.body.classList.remove(previousTheme);
}
document.body.classList.add(themeString);
setCurrentTheme(themeString);
}
}, [previousTheme, theme]);
return <>{children}</>;
};
interface AppProps {
history: History;
}
@@ -78,37 +104,39 @@ export const App: FC<AppProps> = ({ history }) => {
// @ts-ignore
<Router history={history}>
<BackgroundProvider>
<TooltipProvider>
{loaded ? (
<Suspense fallback={null}>
<ClientProvider>
<MediaDevicesProvider>
<Sentry.ErrorBoundary fallback={errorPage}>
<OverlayProvider>
<DisconnectedBanner />
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</MediaDevicesProvider>
</ClientProvider>
</Suspense>
) : (
<LoadingView />
)}
</TooltipProvider>
<ThemeProvider>
<TooltipProvider>
{loaded ? (
<Suspense fallback={null}>
<ClientProvider>
<MediaDevicesProvider>
<Sentry.ErrorBoundary fallback={errorPage}>
<OverlayProvider>
<DisconnectedBanner />
<Switch>
<SentryRoute exact path="/">
<HomePage />
</SentryRoute>
<SentryRoute exact path="/login">
<LoginPage />
</SentryRoute>
<SentryRoute exact path="/register">
<RegisterPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</MediaDevicesProvider>
</ClientProvider>
</Suspense>
) : (
<LoadingView />
)}
</TooltipProvider>
</ThemeProvider>
</BackgroundProvider>
</Router>
);