feat: allow auto/pre-selected extension (#255)

* feat: allow auto/pre-selected extension

* fix: revert typo and changes made for local dev

.devcontainer/devcontainer.json

@@ -0,0 +1,27 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/go
+{
+	"name": "Go",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/go:1-1.23-bookworm",
+	"features": {
+		"ghcr.io/devcontainers-extra/features/pnpm:2": {},
+		"ghcr.io/devcontainers-extra/features/ffmpeg-apt-get:1": {},
+		"ghcr.io/devcontainers-extra/features/yt-dlp:2": {}
+	}
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "go version"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.gitignore

@@ -3,6 +3,7 @@
 result/
 result
 dist
+.pnpm-store/
 .pnpm-debug.log
 node_modules
 .env
@@ -26,3 +27,4 @@ frontend/.pnp.loader.mjs
 frontend/.yarn/install-state.gz
 .db.lock
 livestreams.dat
+.vite/deps

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "3.2.3",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build"
   },
   "author": "marcopiovanello",

frontend/src/assets/i18n/ca.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Anul·lacions
   pathOverrideOption: Sobreescriure en la ruta de sortida
   filenameOverrideOption: Sobreescriure el nom del fitxer
+  autoFileExtensionOption: Afegeix l'extensió de fitxer automàticament
   customFilename: Nom d'arxiu personalitzat (en blanc per utilitzar el predeterminat)
   customPath: Ruta personalitzada
   customArgs: Habilitar els arguments yt-dlp personalitzats (un gran poder comporta una gran responsabilitat)

frontend/src/assets/i18n/de.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: Überschreibungen
   pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
   filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
+  autoFileExtensionOption: Dateierweiterung automatisch hinzufügen
   customFilename: Benutzerdefinierter Dateiname (Leer lassen um Standardwert zu nutzen)
   customPath: Benutzerdefinierter Pfad
   customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (Auf viel Macht folgt große Verantwortung)

frontend/src/assets/i18n/en_US.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: Overrides
   pathOverrideOption: Enable output path overriding
   filenameOverrideOption: Enable output file name overriding
+  autoFileExtensionOption: Automatically add file extension
   customFilename: Custom filename (leave blank to use default)
   customPath: Custom path
   customArgs: Enable custom yt-dlp args (great power = great responsibilities)

frontend/src/assets/i18n/es.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Anulaciones
   pathOverrideOption: Sobreescribir en la ruta de salida
   filenameOverrideOption: Sobreescribir el nombre del fichero
+  autoFileExtensionOption: Agregar extensión de archivo automáticamente
   customFilename: Nombre de archivo personalizado (en blanco para usar el predeterminado)
   customPath: Ruta personalizada
   customArgs: Habilitar los argumentos yt-dlp personalizados (un gran poder conlleva una gran responsabilidad)

frontend/src/assets/i18n/fr.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: Remplacer
   pathOverrideOption: Activer le remplacement du chemin de sortie
   filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
+  autoFileExtensionOption: Ajouter automatiquement l'extension de fichier
   customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
   customPath: Chemin personnalisé
   customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)

frontend/src/assets/i18n/hu.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: Felülbírálások
   pathOverrideOption: Letöltési útvonal felülbírálása
   filenameOverrideOption: Letöltési fájlnév felülbírálása
+  autoFileExtensionOption: Automatikus fájlkiterjesztés
   customFilename: Egyedi fájlnév (hagyd üresen, hogy a fájlnév automatikusan generálódjon)
   customPath: Egyedi útvonal
   customArgs: Egyedi yt-dlp argumentumok (Nagy hatalommal nagy felelősség jár.)

frontend/src/assets/i18n/it_IT.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Sovrascritture
   pathOverrideOption: Abilita sovrascrittura percorso di output
   filenameOverrideOption: Abilita sovrascrittura del nome del file di output
+  autoFileExtensionOption: Aggiungi estensione automaticamente
   customFilename: Custom filename (leave blank to use default)
   customPath: Custom path
   customArgs: Enable custom yt-dlp args (great power = great responsabilities)

frontend/src/assets/i18n/ja.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: 上書き
   pathOverrideOption: 保存するディレクトリ
   filenameOverrideOption: ファイル名の上書き
+  autoFileExtensionOption: 自動ファイル拡張子
   customFilename:  (空白の場合は元のファイル名)
   customPath: 保存先
   customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)

frontend/src/assets/i18n/ko.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Overrides
   pathOverrideOption: Enable output path overriding
   filenameOverrideOption: Enable output file name overriding
+  autoFileExtensionOption: 자동으로 파일 확장자 추가
   customFilename: Custom filename (leave blank to use default)
   customPath: Custom path
   customArgs: Enable custom yt-dlp args (great power = great responsabilities)

frontend/src/assets/i18n/pl.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Przedefiniuj
   pathOverrideOption: Aktywuj zastąpienie ścieżki źródłowej
   filenameOverrideOption: Aktywuj zastępowanie nazwy pliku źródłowego
+  autoFileExtensionOption: Automatyczne rozszerzenie pliku
   customFilename: Wprowadź nazwę pliku (pozostaw puste, aby użyć nazwy domyślnej)
   customPath: Ustaw ścieżkę
   customArgs: Uwzględnij konfigurowalne argumenty yt-dlp (wielka moc = wielka odpowiedzialność)

frontend/src/assets/i18n/pt_BR.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: Substituições
   pathOverrideOption: Habilitar substituição do caminho de saída
   filenameOverrideOption: Habilitar substituição do nome do arquivo de saída
+  autoFileExtensionOption: Adicionar extensão de arquivo automaticamente
   customFilename: Nome de arquivo personalizado (deixe em branco para usar o padrão)
   customPath: Caminho personalizado
   customArgs: Habilitar argumentos personalizados do yt-dlp (grandes poderes = grandes responsabilidades)

frontend/src/assets/i18n/ru.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Переопределить
   pathOverrideOption: Активировать переопределение выходного пути
   filenameOverrideOption: Активировать переопределение имени выходного файла
+  autoFileExtensionOption: Автоматическое расширение файла
   customFilename: Задать имя файла (оставьте пустым, чтобы использовать значение по умолчанию)
   customPath: Задать путь
   customArgs: Включить настраиваемые аргументы yt-dlp (большая сила = большая ответственность)

frontend/src/assets/i18n/sv.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: Överskrivningar
   pathOverrideOption: Tillåt överskrivning av filsökvägen
   filenameOverrideOption: Tillåt överskrivning av filnamn
+  autoFileExtensionOption: Lägg till filändelse automatiskt
   customFilename: Eget filnamn (lämna blankt för standardnamn)
   customPath: Egen filsökväg
   customArgs: Tillåt egna yt-dlp-argument (frihet under ansvar!)

frontend/src/assets/i18n/uk.yaml

@@ -21,6 +21,7 @@ keys:
   overridesAnchor: Перевизначити
   pathOverrideOption: Активувати перевизначення вихідного шляху
   filenameOverrideOption: Активувати перевизначення імені вихідного файлу
+  autoFileExtensionOption: Автоматичне додавання розширення файлу
   customFilename: Введіть ім'я файлу (залишіть порожнім, щоб використовувати значення за замовчуванням)
   customPath: Задати шлях
   customArgs: Включити аргументи, що настроюються yt-dlp (велика сила = велика відповідальність)

frontend/src/assets/i18n/zh_CN.yaml

@@ -22,6 +22,7 @@ keys:
   overridesAnchor: 覆盖
   pathOverrideOption: 启用输出路径覆盖
   filenameOverrideOption: 启用输出文件名覆盖
+  autoFileExtensionOption: 自动文件扩展名
   customFilename: 自定义文件名（留空使用默认值）
   customPath: 自定义路径
   customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）

frontend/src/atoms/settings.ts

@@ -40,6 +40,7 @@ export interface SettingsState {
   cliArgs: string
   formatSelection: boolean
   fileRenaming: boolean
+  autoFileExtension: boolean
   pathOverriding: boolean
   enableCustomArgs: boolean
   listView: boolean
@@ -82,6 +83,11 @@ export const fileRenamingState = atomWithStorage(
   localStorage.getItem('file-renaming') === 'true'
 )
 
+export const autoFileExtensionState = atomWithStorage(
+  'auto-file-extension',
+  localStorage.getItem('auto-file-extension') === 'true'
+)
+
 export const pathOverridingState = atomWithStorage(
   'path-overriding',
   localStorage.getItem('path-overriding') === 'true'
@@ -168,6 +174,7 @@ export const settingsState = atom<SettingsState>((get) => ({
   cliArgs: get(latestCliArgumentsState),
   formatSelection: get(formatSelectionState),
   fileRenaming: get(fileRenamingState),
+  autoFileExtension: get(autoFileExtensionState),
   pathOverriding: get(pathOverridingState),
   enableCustomArgs: get(enableCustomArgsState),
   listView: get(listViewState),

frontend/src/components/DownloadDialog.tsx

@@ -11,7 +11,10 @@ import {
   Grid,
   IconButton,
   InputAdornment,
+  MenuItem,
   Paper,
+  Select,
+  SelectChangeEvent,
   TextField
 } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
@@ -83,6 +86,8 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
     filenameTemplateState
   )
 
+  const [fileExtension, setFileExtension] = useState('.%(ext)s')
+
   const [url, setUrl] = useState('')
 
   const [isPlaylist, setIsPlaylist] = useState(false)
@@ -115,7 +120,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
         url: immediate || line,
         args: `${toFormatArgs(codes)} ${downloadTemplate}`,
         pathOverride: downloadPath ?? '',
-        renameTo: settings.fileRenaming ? filenameTemplate : '',
+        renameTo: settings.fileRenaming ? filenameTemplate + (settings.autoFileExtension ? fileExtension : '') : '',
         playlist: isPlaylist,
       })
 
@@ -169,6 +174,10 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
     setFilenameTemplate(e.target.value)
   }
 
+  const handleFileExtensionChange = (e: SelectChangeEvent<string>) => {
+    setFileExtension(e.target.value)
+  }
+
   const handleCustomArgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setCustomArgs(e.target.value)
   }
@@ -286,7 +295,15 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                   }
                   {
                     settings.fileRenaming &&
-                    <Grid item xs={settings.pathOverriding ? 8 : 12}>
+                    <Grid item xs={
+                        !settings.autoFileExtension && !settings.pathOverriding
+                          ? 12
+                          : !settings.autoFileExtension && settings.pathOverriding
+                            ? 8
+                            : settings.autoFileExtension && !settings.pathOverriding
+                              ? 10
+                              : 6
+                      }>
                       <TextField
                         sx={{ mt: 1 }}
                         ref={customFilenameInputRef}
@@ -302,6 +319,22 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                       />
                     </Grid>
                   }
+                  {
+                    settings.autoFileExtension &&
+                    <Grid item xs={2}>
+                      <Select
+                        sx={{ mt: 1 }}
+                        fullWidth
+                        label={i18n.t('autoFileExtension')}
+                        value={fileExtension}
+                        onChange={handleFileExtensionChange}
+                        variant="outlined">
+                          <MenuItem value=".%(ext)s">Auto</MenuItem>
+                          <MenuItem value=".mp4">mp4</MenuItem>
+                          <MenuItem value=".mkv">mkv</MenuItem>
+                        </Select>
+                    </Grid>
+                  }
                   {
                     settings.pathOverriding &&
                     <Grid item xs={4}>

frontend/src/views/Settings.tsx

@@ -36,6 +36,7 @@ import {
   appTitleState,
   enableCustomArgsState,
   fileRenamingState,
+  autoFileExtensionState,
   formatSelectionState,
   languageState,
   languages,
@@ -61,6 +62,7 @@ export default function Settings() {
   const [formatSelection, setFormatSelection] = useAtom(formatSelectionState)
   const [pathOverriding, setPathOverriding] = useAtom(pathOverridingState)
   const [fileRenaming, setFileRenaming] = useAtom(fileRenamingState)
+  const [autoFileExtension, setAutoFileExtension] = useAtom(autoFileExtensionState)
   const [enableArgs, setEnableArgs] = useAtom(enableCustomArgsState)
 
   const [serverAddr, setServerAddr] = useAtom(serverAddressState)
@@ -343,12 +345,30 @@ export default function Settings() {
                 <Switch
                   defaultChecked={fileRenaming}
                   onChange={() => {
+                    if (fileRenaming) {
+                      setAutoFileExtension(false)
+                    }
                     setFileRenaming(state => !state)
                   }}
                 />
               }
               label={i18n.t('filenameOverrideOption')}
             />
+            {
+              <FormControlLabel
+                control={
+                  <Switch
+                    disabled={!fileRenaming}
+                    checked={fileRenaming ? autoFileExtension : false}
+                    defaultChecked={autoFileExtension}
+                    onChange={() => {
+                      setAutoFileExtension(state => !state)
+                    }}
+                  />
+                }
+                label={i18n.t('autoFileExtensionOption')}
+              /> 
+            }
             <FormControlLabel
               control={
                 <Switch