templates editor #62

Dockerfile

@@ -27,4 +27,4 @@ COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
 ENV JWT_SECRET=secret
 
 EXPOSE 3033
-ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]

README.md

@@ -15,9 +15,9 @@ The bottleneck remains yt-dlp startup time.
 docker pull marcobaobao/yt-dlp-webui
 ```
 ```sh
-# latest stable
+# latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# latest dev version
+# latest stable version
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```
 

frontend/src/assets/i18n.yaml

@@ -1,7 +1,7 @@
 ---
 languages:
   english:
-    urlInput: YouTube or other supported service video URL
+    urlInput: Video URL
     statusTitle: Status
     statusReady: Ready
     selectFormatButton: Select format
@@ -36,6 +36,10 @@ languages:
     restartAppMessage: Needs a page reload to take effect
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   french:
     urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
     statusTitle: Statut
@@ -72,8 +76,12 @@ languages:
     restartAppMessage: Nécessite un rechargement de la page pour prendre effet
     servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
     appTitle: Nom de l'application
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   italian:
-    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
+    urlInput: URL Video
     statusTitle: Stato
     startButton: Inizia
     statusReady: Pronto
@@ -107,6 +115,10 @@ languages:
     restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: Titolo applicazione
+    savedTemplates: Template salvati
+    templatesEditor: Editor template
+    templatesEditorNameLabel: Nome template
+    templatesEditorContentLabel: Contentunto template
   chinese:
     urlInput: YouTube 或其他受支持服务的视频网址
     statusTitle: 状态
@@ -143,6 +155,10 @@ languages:
     restartAppMessage: 需要刷新页面才能生效
     servedFromReverseProxyCheckbox: 处于反向代理的子目录后
     appTitle: App 标题
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -177,6 +193,10 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -211,6 +231,10 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -245,6 +269,10 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -280,6 +308,10 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -314,6 +346,10 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -348,6 +384,10 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -382,3 +422,7 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content

frontend/src/atoms/downloadTemplate.ts

@@ -1,10 +1,23 @@
-import { atom } from 'recoil'
+import { atom, selector } from 'recoil'
+import { CustomTemplate } from '../types'
+import { ffetch } from '../lib/httpClient'
+import { serverURL } from './settings'
+import { pipe } from 'fp-ts/lib/function'
+import { getOrElse } from 'fp-ts/lib/Either'
 
-export const downloadTemplateState = atom({
-  key: 'downloadTemplateState',
-  default: localStorage.getItem('lastDownloadTemplate') ?? '',
+export const cookiesTemplateState = atom({
+  key: 'cookiesTemplateState',
+  default: localStorage.getItem('cookiesTemplate') ?? '',
+  effects: [
+    ({ onSet }) => onSet(e => localStorage.setItem('cookiesTemplate', e))
+  ]
+})
+
+export const customArgsState = atom({
+  key: 'customArgsState',
+  default: localStorage.getItem('customArgs') ?? '',
   effects: [
-    ({ onSet }) => onSet(e => localStorage.setItem('lastDownloadTemplate', e))
+    ({ onSet }) => onSet(e => localStorage.setItem('customArgs', e))
   ]
 })
 
@@ -14,4 +27,26 @@ export const filenameTemplateState = atom({
   effects: [
     ({ onSet }) => onSet(e => localStorage.setItem('lastFilenameTemplate', e))
   ]
+})
+
+export const downloadTemplateState = selector({
+  key: 'downloadTemplateState',
+  get: ({ get }) =>
+    `${get(customArgsState)} ${get(cookiesTemplateState)}`
+      .replace(/  +/g, ' ')
+      .trim()
+})
+
+export const savedTemplatesState = selector<CustomTemplate[]>({
+  key: 'savedTemplatesState',
+  get: async ({ get }) => {
+    const task = ffetch<CustomTemplate[]>(`${get(serverURL)}/api/v1/template/all`)
+    const either = await task()
+
+    return pipe(
+      either,
+      getOrElse(() => new Array<CustomTemplate>())
+    )
+  },
+  dangerouslyAllowMutability: true
 })

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}`)
-          }
         }
       )
     )