templates editor #62

2023-10-30 11:48:10 +01:00
parent cd5c210eac
commit 19f9b10844
24 changed files with 798 additions and 141 deletions
--- a/frontend/src/components/CookiesTextField.tsx
+++ b/frontend/src/components/CookiesTextField.tsx
@@ -6,7 +6,7 @@ import { pipe } from 'fp-ts/lib/function'
 import { useMemo } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
-import { downloadTemplateState } from '../atoms/downloadTemplate'
+import { cookiesTemplateState } from '../atoms/downloadTemplate'
 import { cookiesState, serverURL } from '../atoms/settings'
 import { useSubscription } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
@@ -70,7 +70,7 @@ const validateCookie = (cookie: string) => pipe(

 const CookiesTextField: React.FC = () => {
  const serverAddr = useRecoilValue(serverURL)
-  const [customArgs, setCustomArgs] = useRecoilState(downloadTemplateState)
+  const [, setCookies] = useRecoilState(cookiesTemplateState)
  const [savedCookies, setSavedCookies] = useRecoilState(cookiesState)

  const { pushMessage } = useToast()
@@ -124,22 +124,18 @@ const CookiesTextField: React.FC = () => {
      validateNetscapeCookies,
      O.fromPredicate(f => f === true),
      O.match(
-        () => {
-          if (customArgs.includes(flag)) {
-            setCustomArgs(a => a.replace(flag, ''))
-          }
-        },
+        () => setCookies(''),
        async () => {
          pipe(
            await submitCookies(cookies),
            E.match(
              (l) => pushMessage(`${l}`, 'error'),
-              () => pushMessage(`Saved Netscape cookies`, 'success')
+              () => {
+                pushMessage(`Saved Netscape cookies`, 'success')
+                setCookies(flag)
+              }
            )
          )
-          if (!customArgs.includes(flag)) {
-            setCustomArgs(a => `${a} ${flag}`)
-          }
        }
      )
    )
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/frontend/src/components/DownloadDialog.tsx
@@ -1,7 +1,9 @@
 import { FileUpload } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import {
+  Autocomplete,
  Backdrop,
+  Box,
  Button,
  Checkbox,
  Container,
@@ -10,10 +12,7 @@ import {
  Grid,
  IconButton,
  InputAdornment,
-  InputLabel,
-  MenuItem,
  Paper,
-  Select,
  TextField
 } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
@@ -30,7 +29,7 @@ import {
  useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
+import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
@@ -39,6 +38,7 @@ import { useRPC } from '../hooks/useRPC'
 import { CliArguments } from '../lib/argsParser'
 import type { DLMetadata } from '../types'
 import { isValidURL, toFormatArgs } from '../utils'
+import ExtraDownloadOptions from './ExtraDownloadOptions'

 const Transition = forwardRef(function Transition(
  props: TransitionProps & {
@@ -60,19 +60,18 @@ export default function DownloadDialog({
  onClose,
  onDownloadStart
 }: Props) {
-  // recoil state
  const settings = useRecoilValue(settingsState)
  const isConnected = useRecoilValue(connectedState)
  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+  const downloadTemplate = useRecoilValue(downloadTemplateState)

-  // ephemeral state
  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
  const [pickedBestFormat, setPickedBestFormat] = useState('')

-  const [customArgs, setCustomArgs] = useRecoilState(downloadTemplateState)
-  const [downloadPath, setDownloadPath] = useState(0)
+  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [downloadPath, setDownloadPath] = useState('')

  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
    filenameTemplateState
@@ -83,20 +82,16 @@ export default function DownloadDialog({

  const [isPlaylist, setIsPlaylist] = useState(false)

-  // memos
  const cliArgs = useMemo(() =>
    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
  )

-  // context
  const { i18n } = useI18n()
  const { client } = useRPC()

-  // refs
  const urlInputRef = useRef<HTMLInputElement>(null)
  const customFilenameInputRef = useRef<HTMLInputElement>(null)

-  // transitions
  const [isPending, startTransition] = useTransition()

  /**
@@ -108,13 +103,13 @@ export default function DownloadDialog({
    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
    if (pickedBestFormat !== '') codes.push(pickedBestFormat)

-    client.download(
-      immediate || url || workingUrl,
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
-      availableDownloadPaths[downloadPath] ?? '',
-      filenameTemplate,
-      isPlaylist,
-    )
+    client.download({
+      url: immediate || url || workingUrl,
+      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      pathOverride: downloadPath ?? '',
+      renameTo: settings.fileRenaming ? filenameTemplate : '',
+      playlist: isPlaylist,
+    })

    setUrl('')
    setWorkingUrl('')
@@ -177,36 +172,40 @@ export default function DownloadDialog({
  }

  return (
-    <div>
-      <Dialog
-        fullScreen
-        open={open}
-        onClose={onClose}
-        TransitionComponent={Transition}
-      >
-        <Backdrop
-          sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-          open={isPending}
-        />
-        <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">
-              Download
-            </Typography>
-          </Toolbar>
-        </AppBar>
-        <Container sx={{ my: 4 }}>
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={isPending}
+      />
+      <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">
+            Download
+          </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',
@@ -267,8 +266,9 @@ export default function DownloadDialog({
                  }
                  {
                    settings.fileRenaming &&
-                    <Grid item xs={8}>
+                    <Grid item xs={settings.pathOverriding ? 8 : 12}>
                      <TextField
+                        sx={{ mt: 1 }}
                        ref={customFilenameInputRef}
                        fullWidth
                        label={i18n.t('customFilename')}
@@ -286,22 +286,30 @@ export default function DownloadDialog({
                    settings.pathOverriding &&
                    <Grid item xs={4}>
                      <FormControl fullWidth>
-                        <InputLabel>{i18n.t('customPath')}</InputLabel>
-                        <Select
-                          label={i18n.t('customPath')}
-                          defaultValue={0}
-                          variant={'outlined'}
-                          value={downloadPath}
-                          onChange={(e) => setDownloadPath(Number(e.target.value))}
-                        >
-                          {availableDownloadPaths.map((val: string, idx: number) => (
-                            <MenuItem key={idx} value={idx}>{val}</MenuItem>
-                          ))}
-                        </Select>
+                        <Autocomplete
+                          disablePortal
+                          options={availableDownloadPaths.map((dir) => ({ label: dir, dir }))}
+                          autoHighlight
+                          getOptionLabel={(option) => option.label}
+                          onChange={(_, value) => {
+                            setDownloadPath(value?.dir!)
+                          }}
+                          renderOption={(props, option) => (
+                            <Box
+                              component="li"
+                              sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+                              {...props}>
+                              {option.label}
+                            </Box>
+                          )}
+                          sx={{ width: '100%', mt: 1 }}
+                          renderInput={(params) => <TextField {...params} label={i18n.t('customPath')} />}
+                        />
                      </FormControl>
                    </Grid>
                  }
                </Grid>
+                <ExtraDownloadOptions />
                <Grid container spacing={1} pt={2} justifyContent="space-between">
                  <Grid item>
                    <Button
@@ -357,7 +365,7 @@ export default function DownloadDialog({
            pickedAudioFormat={pickedAudioFormat}
          />}
        </Container>
-      </Dialog>
-    </div>
+      </Box>
+    </Dialog>
  )
 }
--- a/frontend/src/components/ExtraDownloadOptions.tsx
+++ b/frontend/src/components/ExtraDownloadOptions.tsx
@@ -0,0 +1,37 @@
+import { Autocomplete, Box, TextField, Typography } from '@mui/material'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { useI18n } from '../hooks/useI18n'
+
+const ExtraDownloadOptions: React.FC = () => {
+  const { i18n } = useI18n()
+
+  const customTemplates = useRecoilValue(savedTemplatesState)
+  const [, setCustomArgs] = useRecoilState(customArgsState)
+
+  return (
+    <>
+      <Autocomplete
+        disablePortal
+        options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
+        autoHighlight
+        getOptionLabel={(option) => option.label}
+        onChange={(_, value) => {
+          setCustomArgs(value?.content!)
+        }}
+        renderOption={(props, option) => (
+          <Box
+            component="li"
+            sx={{ mr: 2, flexShrink: 0 }}
+            {...props}>
+            {option.label}
+          </Box>
+        )}
+        sx={{ width: '100%', mt: 2 }}
+        renderInput={(params) => <TextField {...params} label={i18n.t('savedTemplates')} />}
+      />
+    </>
+  )
+}
+
+export default ExtraDownloadOptions
--- a/frontend/src/components/HomeActions.tsx
+++ b/frontend/src/components/HomeActions.tsx
@@ -4,30 +4,38 @@ import { loadingAtom } from '../atoms/ui'
 import DownloadDialog from './DownloadDialog'
 import HomeSpeedDial from './HomeSpeedDial'
 import { useToast } from '../hooks/toast'
+import TemplatesEditor from './TemplatesEditor'

 const HomeActions: React.FC = () => {
  const [, setIsLoading] = useRecoilState(loadingAtom)
-  const [openDialog, setOpenDialog] = useState(false)
+
+  const [openDownload, setOpenDownload] = useState(false)
+  const [openEditor, setOpenEditor] = useState(false)

  const { pushMessage } = useToast()

  return (
    <>
      <HomeSpeedDial
-        onOpen={() => setOpenDialog(true)}
+        onDownloadOpen={() => setOpenDownload(true)}
+        onEditorOpen={() => setOpenEditor(true)}
      />
      <DownloadDialog
-        open={openDialog}
+        open={openDownload}
        onClose={() => {
-          setOpenDialog(false)
+          setOpenDownload(false)
          setIsLoading(true)
        }}
        onDownloadStart={(url) => {
          pushMessage(`Requested ${url}`, 'info')
-          setOpenDialog(false)
+          setOpenDownload(false)
          setIsLoading(true)
        }}
      />
+      <TemplatesEditor
+        open={openEditor}
+        onClose={() => setOpenEditor(false)}
+      />
    </>
  )
 }
--- a/frontend/src/components/HomeSpeedDial.tsx
+++ b/frontend/src/components/HomeSpeedDial.tsx
@@ -1,4 +1,5 @@
 import AddCircleIcon from '@mui/icons-material/AddCircle'
+import BuildCircleIcon from '@mui/icons-material/BuildCircle'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
 import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import {
@@ -12,10 +13,11 @@ import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'

 type Props = {
-  onOpen: () => void
+  onDownloadOpen: () => void
+  onEditorOpen: () => void
 }

-const HomeSpeedDial: React.FC<Props> = ({ onOpen }) => {
+const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
  const [, setListView] = useRecoilState(listViewState)

  const { i18n } = useI18n()
@@ -39,10 +41,15 @@ const HomeSpeedDial: React.FC<Props> = ({ onOpen }) => {
        tooltipTitle={i18n.t('abortAllButton')}
        onClick={abort}
      />
+      <SpeedDialAction
+        icon={<BuildCircleIcon />}
+        tooltipTitle={i18n.t('templatesEditor')}
+        onClick={onEditorOpen}
+      />
      <SpeedDialAction
        icon={<AddCircleIcon />}
-        tooltipTitle={`New download`}
-        onClick={onOpen}
+        tooltipTitle={i18n.t('newDownload')}
+        onClick={onDownloadOpen}
      />
    </SpeedDial>
  )
--- a/frontend/src/components/SocketSubscriber.tsx
+++ b/frontend/src/components/SocketSubscriber.tsx
@@ -1,5 +1,5 @@
 import * as O from 'fp-ts/Option'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { share, take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
@@ -14,7 +14,7 @@ import { datetimeCompareFunc, isRPCResponse } from '../utils'
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }

 const SocketSubscriber: React.FC<Props> = ({ children }) => {
-  const [, setIsConnected] = useRecoilState(connectedState)
+  const [connected, setIsConnected] = useRecoilState(connectedState)
  const [, setDownloads] = useRecoilState(downloadsState)

  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
@@ -62,7 +62,11 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
    }
  )

-  useSubscription(timer(0, 1000), () => client.running())
+  useEffect(() => {
+    if (connected) {
+      timer(0, 1000).subscribe(() => client.running())
+    }
+  }, [connected])

  return (
    <>{children}</>
--- a/frontend/src/components/TemplatesEditor.tsx
+++ b/frontend/src/components/TemplatesEditor.tsx
@@ -0,0 +1,226 @@
+import AddIcon from '@mui/icons-material/Add'
+import CloseIcon from '@mui/icons-material/Close'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  AppBar,
+  Backdrop,
+  Box,
+  Button,
+  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 { forwardRef, useEffect, useState, useTransition } from 'react'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { ffetch } from '../lib/httpClient'
+import { CustomTemplate } from '../types'
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+interface Props extends React.HTMLAttributes<HTMLBaseElement> {
+  open: boolean
+  onClose: () => void
+}
+
+const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
+  const [templateName, setTemplateName] = useState('')
+  const [templateContent, setTemplateContent] = useState('')
+
+  const serverAddr = useRecoilValue(serverURL)
+  const [isPending, startTransition] = useTransition()
+
+  const [templates, setTemplates] = useState<CustomTemplate[]>([])
+
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
+
+  useEffect(() => {
+    if (open) {
+      getTemplates()
+    }
+  }, [open])
+
+  const getTemplates = async () => {
+    const task = ffetch<CustomTemplate[]>(`${serverAddr}/api/v1/template/all`)
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l),
+        (r) => setTemplates(r)
+      )
+    )
+  }
+
+  const addTemplate = async () => {
+    const task = ffetch<unknown>(`${serverAddr}/api/v1/template`, {
+      method: 'POST',
+      body: JSON.stringify({
+        name: templateName,
+        content: templateContent,
+      })
+    })
+
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'warning'),
+        () => {
+          pushMessage('Added template')
+          getTemplates()
+          setTemplateName('')
+          setTemplateContent('')
+        }
+      )
+    )
+  }
+
+  const deleteTemplate = async (id: string) => {
+    const task = ffetch<unknown>(`${serverAddr}/api/v1/template/${id}`, {
+      method: 'DELETE',
+    })
+
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'warning'),
+        () => {
+          pushMessage('Deleted template')
+          getTemplates()
+        }
+      )
+    )
+  }
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={isPending}
+      />
+      <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('templatesEditor')}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
+      }}>
+        <Grid container spacing={2} sx={{ p: 4 }}>
+          <Grid item xs={12}>
+            <Paper
+              elevation={4}
+              sx={{
+                p: 2,
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Grid container spacing={2} justifyContent="center" alignItems="center">
+                <Grid item xs={3}>
+                  <TextField
+                    fullWidth
+                    label={i18n.t('templatesEditorNameLabel')}
+                    onChange={e => setTemplateName(e.currentTarget.value)}
+                    value={templateName}
+                  />
+                </Grid>
+                <Grid item xs={9}>
+                  <TextField
+                    fullWidth
+                    label={i18n.t('templatesEditorContentLabel')}
+                    onChange={e => setTemplateContent(e.currentTarget.value)}
+                    value={templateContent}
+                    InputProps={{
+                      endAdornment: <Button
+                        variant='contained'
+                        onClick={() => startTransition(() => { addTemplate() })}
+                      >
+                        <AddIcon />
+                      </Button>
+                    }}
+                  />
+                </Grid>
+              </Grid>
+              {templates.map(template => (
+                <Grid
+                  container
+                  spacing={2}
+                  justifyContent="center"
+                  alignItems="center"
+                  key={template.id}
+                  sx={{ mt: 1 }}
+                >
+                  <Grid item xs={3}>
+                    <TextField
+                      fullWidth
+                      label={i18n.t('templatesEditorNameLabel')}
+                      value={template.name}
+                    />
+                  </Grid>
+                  <Grid item xs={9}>
+                    <TextField
+                      fullWidth
+                      label={i18n.t('templatesEditorContentLabel')}
+                      value={template.content}
+                      InputProps={{
+                        endAdornment: <Button
+                          variant='contained'
+                          onClick={() => {
+                            startTransition(() => { deleteTemplate(template.id) })
+                          }}>
+                          <DeleteIcon />
+                        </Button>
+                      }}
+                    />
+                  </Grid>
+                </Grid>
+              ))}
+            </Paper>
+          </Grid>
+        </Grid>
+      </Box>
+    </Dialog >
+  )
+}
+
+export default TemplatesEditor