sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 13:36:09 +05:00
Code Issues Packages Projects Releases Wiki Activity

dark sidebar and dialogs

Browse Source
This commit is contained in:
nikk gitanes
2021-06-17 16:11:30 +03:00
parent 22d1f733f8
commit 545432678b
5 changed files with 135 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
web/src/components/About.jsx
View File

@@ -9,20 +9,11 @@ import InfoIcon from '@material-ui/icons/Info'
import ListItem from '@material-ui/core/ListItem' import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon' import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText' import ListItemText from '@material-ui/core/ListItemText'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { echoHost } from 'utils/Hosts' import { echoHost } from 'utils/Hosts'
export default function AboutDialog() { export default function AboutDialog() {
const { t } = useTranslation() const { t } = useTranslation()
// https://material-ui.com/ru/customization/default-theme/
const darkTheme = createMuiTheme({
palette: {
type: 'dark',
primary: { main: '#00a572' },
background: { paper: '#575757' },
},
})
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [torrServerVersion, setTorrServerVersion] = useState('') const [torrServerVersion, setTorrServerVersion] = useState('')
useEffect(() => { useEffect(() => {
@@ -38,61 +29,59 @@ export default function AboutDialog() {
<ListItemText primary={t('About')} /> <ListItemText primary={t('About')} />
</ListItem> </ListItem>
<ThemeProvider theme={darkTheme}> <Dialog
<Dialog open={open}
open={open} onClose={() => setOpen(false)}
onClose={() => setOpen(false)} aria-labelledby='form-dialog-title'
aria-labelledby='form-dialog-title' fullWidth='true'
fullWidth='true' maxWidth='sm'
maxWidth='sm' >
> <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
<DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
<DialogContent>
<center>
<h2>TorrServer {torrServerVersion}</h2>
<a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
https://github.com/YouROK/TorrServer
</a>
</center>
<DialogContent> <DialogContent>
<center> <center>
<h2>TorrServer {torrServerVersion}</h2> <h2>{t('ThanksToEveryone')}</h2>
<a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
https://github.com/YouROK/TorrServer
</a>
</center> </center>
<DialogContent> <br />
<center> <h2>{t('SpecialThanks')}</h2>
<h2>{t('ThanksToEveryone')}</h2> <b>anacrolix Matt Joiner</b>&nbsp;
</center> <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
<br /> github.com/anacrolix
<h2>{t('SpecialThanks')}</h2> </a>
<b>anacrolix Matt Joiner</b>&nbsp; <br />
<a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'> <b>nikk</b>&nbsp;
github.com/anacrolix <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
</a> github.com/tsynik
<br /> </a>
<b>nikk</b>&nbsp; <br />
<a style={{ color: '#00a572' }} href='https://github.com/tsynik'> <b>dancheskus</b>&nbsp;
github.com/tsynik <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
</a> github.com/dancheskus
<br /> </a>
<b>dancheskus</b>&nbsp; <br />
<a style={{ color: '#00a572' }} href='https://github.com/dancheskus'> <b>tw1cker Руслан Пахнев</b>&nbsp;
github.com/dancheskus <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
</a> github.com/Nemiroff
<br /> </a>
<b>tw1cker Руслан Пахнев</b>&nbsp; <br />
<a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'> <b>SpAwN_LMG</b>
github.com/Nemiroff <br />
</a>
<br />
<b>SpAwN_LMG</b>
<br />
</DialogContent>
</DialogContent> </DialogContent>
</DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus> <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
{t('Close')} {t('Close')}
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</ThemeProvider>
</div> </div>
) )
} }

120
web/src/components/Add/AddDialog.jsx
View File

@@ -12,6 +12,8 @@ import usePreviousState from 'utils/usePreviousState'
import { useQuery } from 'react-query' import { useQuery } from 'react-query'
import { getTorrents } from 'utils/Utils' import { getTorrents } from 'utils/Utils'
import parseTorrent from 'parse-torrent' import parseTorrent from 'parse-torrent'
import { ThemeProvider } from '@material-ui/core/styles'
import { lightTheme } from 'components/App'
import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
import { ButtonWrapper, Content, Header } from './style' import { ButtonWrapper, Content, Header } from './style'
@@ -207,69 +209,71 @@ export default function AddDialog({
} }
return ( return (
<Dialog <ThemeProvider theme={lightTheme}>
open <Dialog
onClose={handleClose} open
aria-labelledby='form-dialog-title' onClose={handleClose}
fullScreen={fullScreen} aria-labelledby='form-dialog-title'
fullWidth fullScreen={fullScreen}
maxWidth='md' fullWidth
> maxWidth='md'
<Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header> >
<Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
<Content isEditMode={isEditMode}> <Content isEditMode={isEditMode}>
{!isEditMode && ( {!isEditMode && (
<LeftSideComponent <LeftSideComponent
setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
setSelectedFile={setSelectedFile}
torrentSource={torrentSource}
setTorrentSource={setTorrentSource}
selectedFile={selectedFile}
/>
)}
<RightSideComponent
originalTorrentTitle={originalTorrentTitle}
setTitle={setTitle}
setPosterUrl={setPosterUrl}
setIsPosterUrlCorrect={setIsPosterUrlCorrect}
setIsUserInteractedWithPoster={setIsUserInteractedWithPoster} setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
setSelectedFile={setSelectedFile} setPosterList={setPosterList}
isTorrentSourceCorrect={isTorrentSourceCorrect}
isHashAlreadyExists={isHashAlreadyExists}
title={title}
parsedTitle={parsedTitle}
posterUrl={posterUrl}
isPosterUrlCorrect={isPosterUrlCorrect}
posterList={posterList}
currentLang={currentLang}
posterSearchLanguage={posterSearchLanguage}
setPosterSearchLanguage={setPosterSearchLanguage}
posterSearch={posterSearch}
removePoster={removePoster}
updateTitleFromSource={updateTitleFromSource}
torrentSource={torrentSource} torrentSource={torrentSource}
setTorrentSource={setTorrentSource} isCustomTitleEnabled={isCustomTitleEnabled}
selectedFile={selectedFile} setIsCustomTitleEnabled={setIsCustomTitleEnabled}
isEditMode={isEditMode}
/> />
)} </Content>
<RightSideComponent <ButtonWrapper>
originalTorrentTitle={originalTorrentTitle} <Button onClick={handleClose} color='primary' variant='outlined'>
setTitle={setTitle} {t('Cancel')}
setPosterUrl={setPosterUrl} </Button>
setIsPosterUrlCorrect={setIsPosterUrlCorrect}
setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
setPosterList={setPosterList}
isTorrentSourceCorrect={isTorrentSourceCorrect}
isHashAlreadyExists={isHashAlreadyExists}
title={title}
parsedTitle={parsedTitle}
posterUrl={posterUrl}
isPosterUrlCorrect={isPosterUrlCorrect}
posterList={posterList}
currentLang={currentLang}
posterSearchLanguage={posterSearchLanguage}
setPosterSearchLanguage={setPosterSearchLanguage}
posterSearch={posterSearch}
removePoster={removePoster}
updateTitleFromSource={updateTitleFromSource}
torrentSource={torrentSource}
isCustomTitleEnabled={isCustomTitleEnabled}
setIsCustomTitleEnabled={setIsCustomTitleEnabled}
isEditMode={isEditMode}
/>
</Content>
<ButtonWrapper> <Button
<Button onClick={handleClose} color='primary' variant='outlined'> variant='contained'
{t('Cancel')} style={{ minWidth: '110px' }}
</Button> disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
onClick={handleSave}
<Button color='primary'
variant='contained' >
style={{ minWidth: '110px' }} {isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect} </Button>
onClick={handleSave} </ButtonWrapper>
color='primary' </Dialog>
> </ThemeProvider>
{isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
</Button>
</ButtonWrapper>
</Dialog>
) )
} }

1
web/src/components/App/Sidebar.jsx
View File

@@ -27,7 +27,6 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
<List> <List>
<SettingsDialog /> <SettingsDialog />
<CloseServer /> <CloseServer />
</List> </List>

28
web/src/components/App/index.jsx
View File

@@ -12,10 +12,27 @@ import TorrentList from 'components/TorrentList'
import DonateSnackbar from 'components/Donate' import DonateSnackbar from 'components/Donate'
import DonateDialog from 'components/Donate/DonateDialog' import DonateDialog from 'components/Donate/DonateDialog'
import useChangeLanguage from 'utils/useChangeLanguage' import useChangeLanguage from 'utils/useChangeLanguage'
import { ThemeProvider } from '@material-ui/core/styles'
import { AppWrapper, AppHeader, LanguageSwitch } from './style' import { AppWrapper, AppHeader, LanguageSwitch } from './style'
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
// https://material-ui.com/ru/customization/default-theme/
export const darkTheme = createMuiTheme({
palette: {
type: 'dark',
primary: { main: '#00a572' },
background: { paper: '#575757' },
},
})
export const lightTheme = createMuiTheme({
palette: {
type: 'light',
primary: { main: '#00a572' },
background: { paper: '#cbe8d9' },
},
})
export default function App() { export default function App() {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -68,12 +85,13 @@ export default function App() {
</LanguageSwitch> </LanguageSwitch>
</div> </div>
</AppHeader> </AppHeader>
<ThemeProvider theme={darkTheme}>
<Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} /> <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
</ThemeProvider>
<TorrentList /> <TorrentList />
<ThemeProvider theme={darkTheme}>
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />} {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
</ThemeProvider>
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />} {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
</AppWrapper> </AppWrapper>
</Div100vh> </Div100vh>

5
web/src/components/App/style.js
View File

@@ -19,7 +19,7 @@ export const CenteredGrid = styled.div`
export const AppHeader = styled.div` export const AppHeader = styled.div`
background: #00a572; background: #00a572;
color: rgba(0, 0, 0, 0.87); color: #1a1a1a;
grid-area: head; grid-area: head;
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
@@ -37,7 +37,8 @@ export const AppSidebarStyle = styled.div`
overflow-x: hidden; overflow-x: hidden;
transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms; transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
border-right: 1px solid rgba(0, 0, 0, 0.12); border-right: 1px solid rgba(0, 0, 0, 0.12);
background: #eee; background: #575757;
color: #eee;
white-space: nowrap; white-space: nowrap;
`} `}
` `