mirror of
https://github.com/Ernous/TorrServerJellyfin.git
synced 2025-12-19 21:46:11 +05:00
Merge pull request #52 from dancheskus/donation-dialog-fix
Donation fix
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -14,6 +14,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight'
|
|||||||
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 CreditCardIcon from '@material-ui/icons/CreditCard'
|
||||||
|
|
||||||
import ListIcon from '@material-ui/icons/List'
|
import ListIcon from '@material-ui/icons/List'
|
||||||
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
|
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
|
||||||
@@ -25,22 +26,24 @@ import RemoveAll from '../RemoveAll'
|
|||||||
import SettingsDialog from '../Settings'
|
import SettingsDialog from '../Settings'
|
||||||
import AboutDialog from '../About'
|
import AboutDialog from '../About'
|
||||||
import { playlistAllHost, shutdownHost, torrserverHost } from '../../utils/Hosts'
|
import { playlistAllHost, shutdownHost, torrserverHost } from '../../utils/Hosts'
|
||||||
import DonateDialog from '../Donate'
|
import DonateSnackbar from '../Donate'
|
||||||
|
import DonateDialog from '../Donate/DonateDialog'
|
||||||
import UploadDialog from '../Upload'
|
import UploadDialog from '../Upload'
|
||||||
import useStyles from './useStyles'
|
import useStyles from './useStyles'
|
||||||
|
|
||||||
export default function MiniDrawer() {
|
export default function MiniDrawer() {
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const [open, setOpen] = useState(false)
|
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
|
||||||
|
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
|
||||||
const [tsVersion, setTSVersion] = useState('')
|
const [tsVersion, setTSVersion] = useState('')
|
||||||
|
|
||||||
const handleDrawerOpen = () => {
|
const handleDrawerOpen = () => {
|
||||||
setOpen(true)
|
setIsDrawerOpen(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDrawerClose = () => {
|
const handleDrawerClose = () => {
|
||||||
setOpen(false)
|
setIsDrawerOpen(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -49,14 +52,14 @@ export default function MiniDrawer() {
|
|||||||
.then((txt) => {
|
.then((txt) => {
|
||||||
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
|
if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
|
||||||
})
|
})
|
||||||
}, [open])
|
}, [isDrawerOpen])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
<AppBar
|
<AppBar
|
||||||
position="fixed"
|
position="fixed"
|
||||||
className={clsx(classes.appBar, {
|
className={clsx(classes.appBar, {
|
||||||
[classes.appBarShift]: open,
|
[classes.appBarShift]: isDrawerOpen,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
@@ -66,7 +69,7 @@ export default function MiniDrawer() {
|
|||||||
onClick={handleDrawerOpen}
|
onClick={handleDrawerOpen}
|
||||||
edge="start"
|
edge="start"
|
||||||
className={clsx(classes.menuButton, {
|
className={clsx(classes.menuButton, {
|
||||||
[classes.hide]: open,
|
[classes.hide]: isDrawerOpen,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
@@ -80,13 +83,13 @@ export default function MiniDrawer() {
|
|||||||
<Drawer
|
<Drawer
|
||||||
variant="permanent"
|
variant="permanent"
|
||||||
className={clsx(classes.drawer, {
|
className={clsx(classes.drawer, {
|
||||||
[classes.drawerOpen]: open,
|
[classes.drawerOpen]: isDrawerOpen,
|
||||||
[classes.drawerClose]: !open,
|
[classes.drawerClose]: !isDrawerOpen,
|
||||||
})}
|
})}
|
||||||
classes={{
|
classes={{
|
||||||
paper: clsx({
|
paper: clsx({
|
||||||
[classes.drawerOpen]: open,
|
[classes.drawerOpen]: isDrawerOpen,
|
||||||
[classes.drawerClose]: !open,
|
[classes.drawerClose]: !isDrawerOpen,
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -95,7 +98,7 @@ export default function MiniDrawer() {
|
|||||||
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
|
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
||||||
<List>
|
<List>
|
||||||
@@ -114,7 +117,6 @@ export default function MiniDrawer() {
|
|||||||
|
|
||||||
<List>
|
<List>
|
||||||
<SettingsDialog />
|
<SettingsDialog />
|
||||||
<DonateDialog />
|
|
||||||
<AboutDialog />
|
<AboutDialog />
|
||||||
<ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
|
<ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
@@ -123,15 +125,27 @@ export default function MiniDrawer() {
|
|||||||
<ListItemText primary="Close server" />
|
<ListItemText primary="Close server" />
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<List>
|
||||||
|
<ListItem button key="Donation" onClick={() => setIsDonationDialogOpen(true)}>
|
||||||
|
<ListItemIcon>
|
||||||
|
<CreditCardIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary="Donate" />
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
|
||||||
<main className={classes.content}>
|
<main className={classes.content}>
|
||||||
<div className={classes.toolbar} />
|
<div className={classes.toolbar} />
|
||||||
|
|
||||||
<TorrentList />
|
<TorrentList />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<DonateDialog />
|
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
|
||||||
|
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ export default makeStyles((theme) => ({
|
|||||||
},
|
},
|
||||||
drawer: {
|
drawer: {
|
||||||
width: drawerWidth,
|
width: drawerWidth,
|
||||||
flexShrink: 0,
|
flexShrink: 1,
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
},
|
},
|
||||||
drawerOpen: {
|
drawerOpen: {
|
||||||
|
|||||||
@@ -1,86 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import ListItem from '@material-ui/core/ListItem'
|
|
||||||
import ListItemIcon from '@material-ui/core/ListItemIcon'
|
|
||||||
import ListItemText from '@material-ui/core/ListItemText'
|
|
||||||
import Dialog from '@material-ui/core/Dialog'
|
|
||||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
|
||||||
import DialogContent from '@material-ui/core/DialogContent'
|
|
||||||
import DialogActions from '@material-ui/core/DialogActions'
|
|
||||||
import Button from '@material-ui/core/Button'
|
|
||||||
import Snackbar from '@material-ui/core/Snackbar'
|
|
||||||
import IconButton from '@material-ui/core/IconButton'
|
|
||||||
import CreditCardIcon from '@material-ui/icons/CreditCard'
|
|
||||||
import List from '@material-ui/core/List'
|
|
||||||
import ButtonGroup from '@material-ui/core/ButtonGroup'
|
|
||||||
|
|
||||||
const donateFrame =
|
|
||||||
'<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
|
|
||||||
|
|
||||||
export default function DonateDialog() {
|
|
||||||
const [open, setOpen] = React.useState(false)
|
|
||||||
const [snakeOpen, setSnakeOpen] = React.useState(true)
|
|
||||||
|
|
||||||
// NOT USED FOR NOW
|
|
||||||
const handleClickOpen = () => {
|
|
||||||
setOpen(true)
|
|
||||||
}
|
|
||||||
const handleClose = () => {
|
|
||||||
setOpen(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{/* !!!!!!!!!!! Should be removed or moved to sidebar because it is not visible. It is hiddent behind header */}
|
|
||||||
<ListItem button key="Donate" onClick={handleClickOpen}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<CreditCardIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText primary="Donate" />
|
|
||||||
</ListItem>
|
|
||||||
{/* !!!!!!!!!!!!!!!!!!!! */}
|
|
||||||
|
|
||||||
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title" fullWidth>
|
|
||||||
<DialogTitle id="form-dialog-title">Donate</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<List>
|
|
||||||
<ListItem>
|
|
||||||
<ButtonGroup variant="outlined" color="primary" aria-label="contained primary button group">
|
|
||||||
<Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
|
|
||||||
<Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</ListItem>
|
|
||||||
<ListItem>
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: donateFrame }} />
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={handleClose} color="primary" variant="outlined">
|
|
||||||
Ok
|
|
||||||
</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
<Snackbar
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'center',
|
|
||||||
}}
|
|
||||||
open={snakeOpen}
|
|
||||||
onClose={() => { setSnakeOpen(false) }}
|
|
||||||
autoHideDuration={6000}
|
|
||||||
message="Donate?"
|
|
||||||
action={
|
|
||||||
<React.Fragment>
|
|
||||||
<IconButton size="small" aria-label="close" color="inherit" onClick={() => {
|
|
||||||
setSnakeOpen(false)
|
|
||||||
setOpen(true)
|
|
||||||
}}>
|
|
||||||
<CreditCardIcon fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
</React.Fragment>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
38
web/src/components/Donate/DonateDialog.js
Normal file
38
web/src/components/Donate/DonateDialog.js
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import ListItem from '@material-ui/core/ListItem'
|
||||||
|
import Dialog from '@material-ui/core/Dialog'
|
||||||
|
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||||
|
import DialogContent from '@material-ui/core/DialogContent'
|
||||||
|
import DialogActions from '@material-ui/core/DialogActions'
|
||||||
|
import List from '@material-ui/core/List'
|
||||||
|
import ButtonGroup from '@material-ui/core/ButtonGroup'
|
||||||
|
import Button from '@material-ui/core/Button'
|
||||||
|
|
||||||
|
const donateFrame =
|
||||||
|
'<iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&targets=TorrServer Donate&targets-hint=&default-sum=200&button-text=14&payment-type-choice=on&mobile-payment-type-choice=on&comment=on&hint=&successURL=&quickpay=shop&account=410013733697114" width="100%" height="302" frameborder="0" allowtransparency="true" scrolling="no"></iframe>'
|
||||||
|
|
||||||
|
export default function DonateDialog ({ onClose }) {
|
||||||
|
return (
|
||||||
|
<Dialog open onClose={onClose} aria-labelledby="form-dialog-title" fullWidth>
|
||||||
|
<DialogTitle id="form-dialog-title">Donate</DialogTitle>
|
||||||
|
<DialogContent>
|
||||||
|
<List>
|
||||||
|
<ListItem>
|
||||||
|
<ButtonGroup variant="outlined" color="primary" aria-label="contained primary button group">
|
||||||
|
<Button onClick={() => window.open('https://www.paypal.com/paypalme/yourok', '_blank')}>PayPal</Button>
|
||||||
|
<Button onClick={() => window.open('https://yoomoney.ru/to/410013733697114', '_blank')}>Yandex.Money</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</ListItem>
|
||||||
|
<ListItem>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: donateFrame }} />
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</DialogContent>
|
||||||
|
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={onClose} color="primary" variant="outlined">
|
||||||
|
Ok
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
48
web/src/components/Donate/index.js
Normal file
48
web/src/components/Donate/index.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import Button from '@material-ui/core/Button'
|
||||||
|
import Snackbar from '@material-ui/core/Snackbar'
|
||||||
|
import IconButton from '@material-ui/core/IconButton'
|
||||||
|
import CreditCardIcon from '@material-ui/icons/CreditCard'
|
||||||
|
import CloseIcon from '@material-ui/icons/Close'
|
||||||
|
import DonateDialog from './DonateDialog'
|
||||||
|
|
||||||
|
export default function DonateSnackbar() {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
const [snackbarOpen, setSnackbarOpen] = useState(true)
|
||||||
|
|
||||||
|
const disableSnackbar = () => {
|
||||||
|
setSnackbarOpen(false)
|
||||||
|
localStorage.setItem('snackbarIsClosed', true)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{open && <DonateDialog onClose={() => setOpen(false)} />}
|
||||||
|
|
||||||
|
<Snackbar
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'bottom',
|
||||||
|
horizontal: 'center',
|
||||||
|
}}
|
||||||
|
open={snackbarOpen}
|
||||||
|
onClose={disableSnackbar}
|
||||||
|
message="Donate?"
|
||||||
|
action={
|
||||||
|
<>
|
||||||
|
<Button style={{ marginRight: '10px' }} color="secondary" size="small" onClick={() => {
|
||||||
|
setOpen(true)
|
||||||
|
disableSnackbar()
|
||||||
|
}}>
|
||||||
|
<CreditCardIcon style={{ marginRight: '10px' }} fontSize="small" />
|
||||||
|
Support
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<IconButton size="small" aria-label="close" color="inherit" onClick={disableSnackbar}>
|
||||||
|
<CloseIcon fontSize="small" />
|
||||||
|
</IconButton>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -50,6 +50,7 @@ export const TorrentCardDescription = styled.div`
|
|||||||
background: #74c39c;
|
background: #74c39c;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
word-break: break-word;
|
||||||
`
|
`
|
||||||
|
|
||||||
export const TorrentCardDescriptionLabel = styled.div`
|
export const TorrentCardDescriptionLabel = styled.div`
|
||||||
|
|||||||
Reference in New Issue
Block a user