support for cron based subscriptions management

frontend/src/components/TemplatesEditor.tsx

@@ -1,7 +1,5 @@
 import AddIcon from '@mui/icons-material/Add'
 import CloseIcon from '@mui/icons-material/Close'
-import DeleteIcon from '@mui/icons-material/Delete'
-import EditIcon from '@mui/icons-material/Edit'
 import {
   Alert,
   AppBar,
@@ -20,13 +18,13 @@ import {
 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, useEffect, useState, useTransition } from 'react'
 import { serverURL } from '../atoms/settings'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { CustomTemplate } from '../types'
-import { useAtomValue } from 'jotai'
 import TemplateTextField from './TemplateTextField'
 
 const Transition = forwardRef(function Transition(

frontend/src/components/subscriptions/NoSubscriptions.tsx

@@ -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>
+  )
+}

frontend/src/components/subscriptions/SubscriptionsDialog.tsx

@@ -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

frontend/src/components/subscriptions/SubscriptionsEditDialog.tsx

@@ -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

frontend/src/components/subscriptions/SubscriptionsSpeedDial.tsx

@@ -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