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

Add background gradient

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
2023-09-13 17:53:12 +02:00
parent 1f95ec7a0c
commit dd49bd517c
4 changed files with 132 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/App.tsx
View File

@@ -15,7 +15,12 @@ limitations under the License.
*/
import { Suspense, useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import {
BrowserRouter as Router,
Switch,
Route,
useLocation,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
import { OverlayProvider } from "@react-aria/overlays";
import { History } from "history";
@@ -35,6 +40,26 @@ import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
const SentryRoute = Sentry.withSentryRouting(Route);
interface BackgroundProviderProps {
children: JSX.Element;
}
const BackgroundProvider = ({ children }: BackgroundProviderProps) => {
const { pathname } = useLocation();
useEffect(() => {
let backgroundImage = "";
if (!["/login", "/register"].includes(pathname)) {
backgroundImage = "var(--background-gradient)";
}
document.getElementsByTagName("body")[0].style.backgroundImage =
backgroundImage;
}, [pathname]);
return <>{children}</>;
};
interface AppProps {
history: History;
}
@@ -56,40 +81,42 @@ export default function App({ history }: AppProps) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
<Router history={history}>
{loaded ? (
<Suspense fallback={null}>
<ClientProvider>
<MediaDevicesProvider>
<InspectorContextProvider>
<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="/inspector">
<SequenceDiagramViewerPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</InspectorContextProvider>
</MediaDevicesProvider>
</ClientProvider>
</Suspense>
) : (
<LoadingView />
)}
<BackgroundProvider>
{loaded ? (
<Suspense fallback={null}>
<ClientProvider>
<MediaDevicesProvider>
<InspectorContextProvider>
<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="/inspector">
<SequenceDiagramViewerPage />
</SentryRoute>
<SentryRoute path="*">
<RoomPage />
</SentryRoute>
</Switch>
</OverlayProvider>
</Sentry.ErrorBoundary>
</InspectorContextProvider>
</MediaDevicesProvider>
</ClientProvider>
</Suspense>
) : (
<LoadingView />
)}
</BackgroundProvider>
</Router>
);
}