support for cron based subscriptions management
This commit is contained in:
38
frontend/src/components/subscriptions/NoSubscriptions.tsx
Normal file
38
frontend/src/components/subscriptions/NoSubscriptions.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import UpdateIcon from '@mui/icons-material/Update'
|
||||
import { Container, SvgIcon, Typography, styled } from '@mui/material'
|
||||
import { useI18n } from '../../hooks/useI18n'
|
||||
|
||||
const FlexContainer = styled(Container)({
|
||||
display: 'flex',
|
||||
minWidth: '100%',
|
||||
minHeight: '80vh',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column'
|
||||
})
|
||||
|
||||
const Title = styled(Typography)({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingBottom: '0.5rem'
|
||||
})
|
||||
|
||||
|
||||
export default function NoSubscriptions() {
|
||||
const { i18n } = useI18n()
|
||||
|
||||
return (
|
||||
<FlexContainer>
|
||||
<Title fontWeight={'500'} fontSize={72} color={'gray'}>
|
||||
<SvgIcon sx={{ fontSize: '200px' }}>
|
||||
<UpdateIcon />
|
||||
</SvgIcon>
|
||||
</Title>
|
||||
<Title fontWeight={'500'} fontSize={36} color={'gray'}>
|
||||
{i18n.t('subscriptionsEmptyLabel')}
|
||||
</Title>
|
||||
</FlexContainer>
|
||||
)
|
||||
}
|
||||
164
frontend/src/components/subscriptions/SubscriptionsDialog.tsx
Normal file
164
frontend/src/components/subscriptions/SubscriptionsDialog.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import {
|
||||
Alert,
|
||||
AppBar,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Dialog,
|
||||
Grid,
|
||||
IconButton,
|
||||
Paper,
|
||||
Slide,
|
||||
TextField,
|
||||
Toolbar,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { TransitionProps } from '@mui/material/transitions'
|
||||
import { matchW } from 'fp-ts/lib/Either'
|
||||
import { pipe } from 'fp-ts/lib/function'
|
||||
import { useAtomValue } from 'jotai'
|
||||
import { forwardRef, startTransition, useState } from 'react'
|
||||
import { customArgsState } from '../../atoms/downloadTemplate'
|
||||
import { serverURL } from '../../atoms/settings'
|
||||
import { useToast } from '../../hooks/toast'
|
||||
import { useI18n } from '../../hooks/useI18n'
|
||||
import { ffetch } from '../../lib/httpClient'
|
||||
import { Subscription } from '../../services/subscriptions'
|
||||
import ExtraDownloadOptions from '../ExtraDownloadOptions'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const Transition = forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement
|
||||
},
|
||||
ref: React.Ref<unknown>,
|
||||
) {
|
||||
return <Slide direction="up" ref={ref} {...props} />
|
||||
})
|
||||
|
||||
const SubscriptionsDialog: React.FC<Props> = ({ open, onClose }) => {
|
||||
const [subscriptionURL, setSubscriptionURL] = useState('')
|
||||
const [subscriptionCron, setSubscriptionCron] = useState('')
|
||||
|
||||
const customArgs = useAtomValue(customArgsState)
|
||||
|
||||
const { i18n } = useI18n()
|
||||
const { pushMessage } = useToast()
|
||||
|
||||
const baseURL = useAtomValue(serverURL)
|
||||
|
||||
const submit = async (sub: Omit<Subscription, 'id'>) => {
|
||||
const task = ffetch<void>(`${baseURL}/subscriptions`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(sub)
|
||||
})
|
||||
const either = await task()
|
||||
|
||||
pipe(
|
||||
either,
|
||||
matchW(
|
||||
(l) => pushMessage(l, 'error'),
|
||||
(_) => onClose()
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={onClose}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
{i18n.t('subscriptionsButtonLabel')}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Box sx={{
|
||||
backgroundColor: (theme) => theme.palette.background.default,
|
||||
minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
|
||||
}}>
|
||||
<Container sx={{ my: 4 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Paper
|
||||
elevation={4}
|
||||
sx={{
|
||||
p: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Grid container gap={1.5}>
|
||||
<Grid item xs={12}>
|
||||
<Alert severity="info">
|
||||
{i18n.t('subscriptionsInfo')}
|
||||
</Alert>
|
||||
<Alert severity="warning" sx={{ mt: 1 }}>
|
||||
{i18n.t('livestreamExperimentalWarning')}
|
||||
</Alert>
|
||||
</Grid>
|
||||
<Grid item xs={12} mt={1}>
|
||||
<TextField
|
||||
multiline
|
||||
fullWidth
|
||||
label={i18n.t('subscriptionsURLInput')}
|
||||
variant="outlined"
|
||||
placeholder="https://www.youtube.com/@SomeChannelThatExists/videos"
|
||||
onChange={(e) => setSubscriptionURL(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={8} mt={-2}>
|
||||
<ExtraDownloadOptions />
|
||||
</Grid>
|
||||
<Grid item xs={3.871}>
|
||||
<TextField
|
||||
multiline
|
||||
fullWidth
|
||||
label={i18n.t('cronExpressionLabel')}
|
||||
variant="outlined"
|
||||
placeholder="*/5 * * * *"
|
||||
onChange={(e) => setSubscriptionCron(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
sx={{ mt: 2 }}
|
||||
variant="contained"
|
||||
disabled={subscriptionURL === ''}
|
||||
onClick={() => startTransition(() => submit({
|
||||
url: subscriptionURL,
|
||||
params: customArgs,
|
||||
cron_expression: subscriptionCron
|
||||
}))}
|
||||
>
|
||||
{i18n.t('startButton')}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default SubscriptionsDialog
|
||||
@@ -0,0 +1,162 @@
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import {
|
||||
Alert,
|
||||
AppBar,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Dialog,
|
||||
Grid,
|
||||
IconButton,
|
||||
Paper,
|
||||
Slide,
|
||||
TextField,
|
||||
Toolbar,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { TransitionProps } from '@mui/material/transitions'
|
||||
import { matchW } from 'fp-ts/lib/Either'
|
||||
import { pipe } from 'fp-ts/lib/function'
|
||||
import { useAtomValue } from 'jotai'
|
||||
import { forwardRef, startTransition, useState } from 'react'
|
||||
import { customArgsState } from '../../atoms/downloadTemplate'
|
||||
import { serverURL } from '../../atoms/settings'
|
||||
import { useToast } from '../../hooks/toast'
|
||||
import { useI18n } from '../../hooks/useI18n'
|
||||
import { ffetch } from '../../lib/httpClient'
|
||||
import { Subscription } from '../../services/subscriptions'
|
||||
import ExtraDownloadOptions from '../ExtraDownloadOptions'
|
||||
|
||||
type Props = {
|
||||
subscription: Subscription | undefined
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const Transition = forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement
|
||||
},
|
||||
ref: React.Ref<unknown>,
|
||||
) {
|
||||
return <Slide direction="up" ref={ref} {...props} />
|
||||
})
|
||||
|
||||
const SubscriptionsEditDialog: React.FC<Props> = ({ subscription, onClose }) => {
|
||||
const [subscriptionURL, setSubscriptionURL] = useState('')
|
||||
const [subscriptionCron, setSubscriptionCron] = useState('')
|
||||
|
||||
const customArgs = useAtomValue(customArgsState)
|
||||
|
||||
const { i18n } = useI18n()
|
||||
const { pushMessage } = useToast()
|
||||
|
||||
const baseURL = useAtomValue(serverURL)
|
||||
|
||||
const editSubscription = async (sub: Subscription) => {
|
||||
const task = ffetch<void>(`${baseURL}/subscriptions`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(sub)
|
||||
})
|
||||
const either = await task()
|
||||
|
||||
pipe(
|
||||
either,
|
||||
matchW(
|
||||
(l) => pushMessage(l, 'error'),
|
||||
(_) => onClose()
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={!!subscription}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={() => onClose()}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
{i18n.t('subscriptionsButtonLabel')}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Box sx={{
|
||||
backgroundColor: (theme) => theme.palette.background.default,
|
||||
minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
|
||||
}}>
|
||||
<Container sx={{ my: 4 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Paper
|
||||
elevation={4}
|
||||
sx={{
|
||||
p: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Grid container gap={1.5}>
|
||||
<Grid item xs={12}>
|
||||
<Alert severity="info">
|
||||
Editing {subscription?.url}
|
||||
</Alert>
|
||||
</Grid>
|
||||
<Grid item xs={12} mt={1}>
|
||||
<TextField
|
||||
multiline
|
||||
fullWidth
|
||||
label={i18n.t('subscriptionsURLInput')}
|
||||
variant="outlined"
|
||||
defaultValue={subscription?.url}
|
||||
placeholder="https://www.youtube.com/@SomeChannelThatExists/videos"
|
||||
onChange={(e) => setSubscriptionURL(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={8} mt={-2}>
|
||||
<ExtraDownloadOptions />
|
||||
</Grid>
|
||||
<Grid item xs={3.871}>
|
||||
<TextField
|
||||
multiline
|
||||
fullWidth
|
||||
label={i18n.t('cronExpressionLabel')}
|
||||
variant="outlined"
|
||||
placeholder="*/5 * * * *"
|
||||
defaultValue={subscription?.cron_expression}
|
||||
onChange={(e) => setSubscriptionCron(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
sx={{ mt: 2 }}
|
||||
variant="contained"
|
||||
onClick={() => startTransition(async () => await editSubscription({
|
||||
id: subscription?.id ?? '',
|
||||
url: subscriptionURL || subscription?.url!,
|
||||
params: customArgs || subscription?.params!,
|
||||
cron_expression: subscriptionCron || subscription?.cron_expression!
|
||||
}))}
|
||||
>
|
||||
{i18n.t('editButtonLabel')}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default SubscriptionsEditDialog
|
||||
@@ -0,0 +1,27 @@
|
||||
import AddCircleIcon from '@mui/icons-material/AddCircle'
|
||||
import { SpeedDial, SpeedDialAction, SpeedDialIcon } from '@mui/material'
|
||||
import { useI18n } from '../../hooks/useI18n'
|
||||
|
||||
type Props = {
|
||||
onOpen: () => void
|
||||
}
|
||||
|
||||
const SubscriptionsSpeedDial: React.FC<Props> = ({ onOpen }) => {
|
||||
const { i18n } = useI18n()
|
||||
|
||||
return (
|
||||
<SpeedDial
|
||||
ariaLabel="Subscriptions speed dial"
|
||||
sx={{ position: 'absolute', bottom: 64, right: 24 }}
|
||||
icon={<SpeedDialIcon />}
|
||||
>
|
||||
<SpeedDialAction
|
||||
icon={<AddCircleIcon />}
|
||||
tooltipTitle={i18n.t('newSubscriptionButton')}
|
||||
onClick={onOpen}
|
||||
/>
|
||||
</SpeedDial>
|
||||
)
|
||||
}
|
||||
|
||||
export default SubscriptionsSpeedDial
|
||||
Reference in New Issue
Block a user