Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
deezer docker jellyfin koito lastfm listenbrainz maloja mopidy mpris music music-assistant plex scrobble self-hosted spotify subsonic tautulli youtube-music
Something went wrong. Try again.
4.9 kB · 157 lines
TSX
at debugStartup
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158import React from 'react';import { createBrowserRouter, createHashRouter, type RouteObject, RouterProvider, useLocation,} from "react-router-dom";import {connect, type ConnectedProps, Provider} from 'react-redux'import './App.css';import CopyToClipboard from "./components/CopyToClipboard";import ExternalLink from "./components/ExternalLink";import {store} from './store';import Dashboard from "./dashboard/dashboard";import RecentPage from "./recent/RecentPage";import ScrobbledPage from "./scrobbled/ScrobbledPage";import DeadPage from "./deadLetter/DeadPage";import {clientUpdate, sourceUpdate} from "./status/ducks";import {useEventSource, useEventSourceListener} from "@react-nano/use-event-source";import Version from "./Version";
function NoMatch() { const location = useLocation();
return ( <div> No page for <code>{location.pathname}</code> exists! </div> );}
// https://tailwindflex.com/@sienna/copy-code-blockfunction MissingDocs() { return ( <div> <div>Oops! You need to build docs first. Run the following commands to build:</div> <code className="mt-5 text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-gray-900 text-white rounded-lg p-4 pl-6"> <span className="flex gap-4"> <span className="shrink-0 text-gray-500"> $ </span>
<span className="flex-1"> <span> npm run <span className="text-yellow-500">docs:install</span> && npm run <span className="text-yellow-500">docs:build</span> </span> </span> </span>
<CopyToClipboard text="npm run docs:install && npm run docs:build"/> </code> </div> );}
const routes: RouteObject[] = [ { path: "/", element: <Dashboard/>, }, { path: "/recent", element: <RecentPage/>, }, { path: "/scrobbled", element: <ScrobbledPage/>, }, { path: "/dead", element: <DeadPage/>, }, { path: "/docs", element: <MissingDocs/> }, { path: "*", element: <NoMatch/> }];
const genRouter = () => { const useHashRouter = __USE_HASH_ROUTER__ === 'true'; return useHashRouter ? createHashRouter(routes) : createBrowserRouter(routes);}
const router = genRouter();
const mapDispatchToProps = (dispatch) => { return { updateSource: (payload) => dispatch(sourceUpdate(payload)), updateClient: (payload) => dispatch(clientUpdate(payload)) }}
const connector = connect(null, mapDispatchToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
const Global = (props: PropsFromRedux) => { const { updateSource, updateClient } = props;
const [sourceEventSource, eventSourceStatus] = useEventSource("api/events", false); useEventSourceListener(sourceEventSource, ['source', 'client'], evt => { const data = JSON.parse(evt.data); if(data.from === 'source') { updateSource(data); } else if(data.from === 'client') { updateClient(data); } }, [updateSource, updateClient]);
return <span/>;}
const ConnectedGlobal = connector(Global);
function App() { return ( <Provider store={store}> <div className="min-w-screen min-h-screen bg-gray-800 font-sans text-white"> <div className="space-x-4 p-6 md:px-10 md:py-6 leading-6 font-semibold bg-gray-800 text-white"> <div className="container mx-auto"> <div className="flex items-center justify-between"> <a href="/" className="flex items-center no-underline pr-4"> <img src="/icon.svg" style={{maxWidth: '30px'}}/> <span className="ml-2">Multi Scrobbler</span> </a> <Version/> <span className="space-x-3" style={{marginLeft: 'auto'}}> <a target="_blank" href="https://status.multi-scrobbler.app"> Services Monitor </a> <a href="/docs"> Docs </a> <a target="_blank" href="https://github.com/FoxxMD/multi-scrobbler"> Github <ExternalLink/> </a> </span> </div> </div> </div> <div className="container mx-auto"> <ConnectedGlobal/> <RouterProvider router={router}/> </div> </div> </Provider> );}
export default App;