Tunio Desktop client
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

88 lines
3.7 KiB

import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import settings from 'electron-settings';
import { ThemeProvider } from 'styled-components';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import './styles/App.global.css';
import Layout from './components/layout/Layout';
import PlaylistList from './components/playlist/PlaylistList';
import PlaylistView from './components/playlist/PlaylistView';
import Config from './components/settings/Config';
import NowPlayingView from './components/player/NowPlayingView';
import Login from './components/settings/Login';
import StarredView from './components/starred/StarredView';
import Dashboard from './components/dashboard/Dashboard';
import PlayerBar from './components/player/PlayerBar';
import AlbumView from './components/library/AlbumView';
import ArtistView from './components/library/ArtistView';
import AlbumList from './components/library/AlbumList';
import ArtistList from './components/library/ArtistList';
import GenreList from './components/library/GenreList';
import { MockFooter } from './components/settings/styled';
import { useAppSelector } from './redux/hooks';
import PageModal from './components/modal/PageModal';
import NowPlayingMiniView from './components/player/NowPlayingMiniView';
import { GlobalContextMenu } from './components/shared/ContextMenu';
import SearchView from './components/search/SearchView';
import FolderList from './components/library/FolderList';
import { getTheme } from './shared/utils';
import { defaultDark } from './styles/styledTheme';
import { mockSettings } from './shared/mockSettings';
const App = () => {
const [theme, setTheme] = useState<any>(defaultDark);
const [font, setFont] = useState('Poppins');
const misc = useAppSelector((state) => state.misc);
useEffect(() => {
const themes: any =
process.env.NODE_ENV === 'test'
? mockSettings.themesDefault
: _.concat(settings.getSync('themes'), settings.getSync('themesDefault'));
setTheme(getTheme(themes, misc.theme) || defaultDark);
}, [misc.theme]);
useEffect(() => {
setFont(misc.font);
}, [misc.font]);
if (!localStorage.getItem('server') || !localStorage.getItem('serverBase64')) {
return (
<ThemeProvider theme={theme}>
<Layout disableSidebar footer={<MockFooter />} font={font}>
<Login />
</Layout>
</ThemeProvider>
);
}
return (
<ThemeProvider theme={theme}>
<Router>
<Layout footer={<PlayerBar />} font={font}>
<Switch>
<Route exact path="/library/album" component={AlbumList} />
<Route exact path="/library/artist" component={ArtistList} />
<Route exact path="/library/genre" component={GenreList} />
<Route exact path="/library/artist/:id" component={ArtistView} />
<Route exact path="/library/album/:id" component={AlbumView} />
<Route exact path="/library/folder" component={FolderList} />
<Route exact path="/library/folder/:id" component={FolderList} />
<Route exact path="/nowplaying" component={NowPlayingView} />
<Route exact path="/playlist/:id" component={PlaylistView} />
<Route exact path="/playlist" component={PlaylistList} />
<Route exact path="/starred" component={StarredView} />
<Route exact path="/config" component={Config} />
<Route exact path="/search" component={SearchView} />
<Route path="/" component={Dashboard} />
</Switch>
</Layout>
<PageModal />
<NowPlayingMiniView />
<GlobalContextMenu />
</Router>
</ThemeProvider>
);
};
export default App;