mirror of
https://github.com/gabehf/Koito.git
synced 2026-03-07 21:48:18 -08:00
36f984a1a2
* add dev branch container to workflow * correctly set the default range of ActivityGrid * fix: set name/short_name to koito (#61) * fix dev container push workflow * fix: race condition with using getComputedStyle primary color for dynamic activity grid darkening (#76) * Fix race condition with using getComputedStyle primary color for dynamic activity grid darkening Instead just use the color from the current theme directly. Tested works on initial load and theme changes. Fixes https://github.com/gabehf/Koito/issues/75 * Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name Split name out of the Theme struct to simplify custom theme saving/reading * fix: set first artist listed as primary by default (#81) * feat: add server-side configuration with default theme (#90) * docs: add example for usage of the main listenbrainz instance (#71) * docs: add example for usage of the main listenbrainz instance * Update scrobbler.md --------- Co-authored-by: Gabe Farrell <90876006+gabehf@users.noreply.github.com> * feat: add server-side cfg and default theme * fix: repair custom theme --------- Co-authored-by: m0d3rnX <jesper@posteo.de> * docs: add default theme cfg option to docs * feat: add ability to manually scrobble track (#91) * feat: add button to manually scrobble from ui * fix: ensure timestamp is in the past, log fix * test: add integration test * feat: add first listened to dates for media items (#92) * fix: ensure error checks for ErrNoRows * feat: add now playing endpoint and ui (#93) * wip * feat: add now playing * fix: set default theme when config is not set * feat: fetch images from subsonic server (#94) * fix: useQuery instead of useEffect for now playing * feat: custom artist separator regex (#95) * Fix race condition with using getComputedStyle primary color for dynamic activity grid darkening Instead just use the color from the current theme directly. Tested works on initial load and theme changes. Fixes https://github.com/gabehf/Koito/issues/75 * Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name Split name out of the Theme struct to simplify custom theme saving/reading * feat: add server-side configuration with default theme (#90) * docs: add example for usage of the main listenbrainz instance (#71) * docs: add example for usage of the main listenbrainz instance * Update scrobbler.md --------- Co-authored-by: Gabe Farrell <90876006+gabehf@users.noreply.github.com> * feat: add server-side cfg and default theme * fix: repair custom theme --------- Co-authored-by: m0d3rnX <jesper@posteo.de> * fix: rebase errors --------- Co-authored-by: pet <128837728+againstpetra@users.noreply.github.com> Co-authored-by: mlandry <mike.landry@gmail.com> Co-authored-by: m0d3rnX <jesper@posteo.de>
130 lines
4 KiB
TypeScript
130 lines
4 KiB
TypeScript
import {
|
|
isRouteErrorResponse,
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useRouteError,
|
|
} from "react-router";
|
|
|
|
import type { Route } from "./+types/root";
|
|
import './themes.css'
|
|
import "./app.css";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { ThemeProvider } from './providers/ThemeProvider';
|
|
import Sidebar from "./components/sidebar/Sidebar";
|
|
import Footer from "./components/Footer";
|
|
import { AppProvider } from "./providers/AppProvider";
|
|
|
|
// Create a client
|
|
const queryClient = new QueryClient()
|
|
|
|
export const links: Route.LinksFunction = () => [
|
|
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
|
{
|
|
rel: "preconnect",
|
|
href: "https://fonts.gstatic.com",
|
|
crossOrigin: "anonymous",
|
|
},
|
|
{
|
|
rel: "stylesheet",
|
|
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
|
|
},
|
|
];
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" style={{backgroundColor: 'black'}}>
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-title" content="Koito" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body className="min-h-screen">
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<>
|
|
<AppProvider>
|
|
<ThemeProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
<div className="flex-col flex sm:flex-row">
|
|
<Sidebar />
|
|
<div className="flex flex-col items-center mx-auto w-full ml-0 sm:ml-[40px]">
|
|
<Outlet />
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</QueryClientProvider>
|
|
</ThemeProvider>
|
|
</AppProvider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function HydrateFallback() {
|
|
return null
|
|
}
|
|
|
|
export function ErrorBoundary() {
|
|
const error = useRouteError();
|
|
let message = "Oops!";
|
|
let details = "An unexpected error occurred.";
|
|
let stack: string | undefined;
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
message = error.status === 404 ? "404" : "Error";
|
|
details = error.status === 404
|
|
? "The requested page could not be found."
|
|
: error.statusText || details;
|
|
} else if (import.meta.env.DEV && error instanceof Error) {
|
|
details = error.message;
|
|
stack = error.stack;
|
|
}
|
|
|
|
|
|
const title = `${message} - Koito`
|
|
|
|
return (
|
|
<AppProvider>
|
|
<ThemeProvider>
|
|
<title>{title}</title>
|
|
<div className="flex">
|
|
<Sidebar />
|
|
<div className="w-full flex flex-col">
|
|
<main className="pt-16 p-4 container mx-auto flex-grow">
|
|
<div className="flex gap-4 items-end">
|
|
<img className="w-[200px] rounded" src="../yuu.jpg" />
|
|
<div>
|
|
<h1>{message}</h1>
|
|
<p>{details}</p>
|
|
</div>
|
|
</div>
|
|
{stack && (
|
|
<pre className="w-full p-4 overflow-x-auto">
|
|
<code>{stack}</code>
|
|
</pre>
|
|
)}
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
</AppProvider>
|
|
);
|
|
}
|