marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filename override, addressing #22

Browse Source
This commit is contained in:
marcobaobao
2023-01-07 12:04:07 +01:00
parent 97eb686eb1
commit 3754750f61
7 changed files with 324 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
frontend/src/Home.tsx
View File

@@ -9,6 +9,7 @@ import {
Grid,
IconButton,
InputAdornment,
InputLabel,
MenuItem,
Paper,
Select,
@@ -49,9 +50,11 @@ export default function Home({ socket }: Props) {
const [pickedAudioFormat, setPickedAudioFormat] = useState('');
const [pickedBestFormat, setPickedBestFormat] = useState('');
const [downloadPath, setDownloadPath] = useState<number>(0);
const [downloadPath, setDownloadPath] = useState(0);
const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([]);
const [fileNameOverride, setFilenameOverride] = useState('');
const [url, setUrl] = useState('');
const [workingUrl, setWorkingUrl] = useState('');
const [showBackdrop, setShowBackdrop] = useState(false);
@@ -141,14 +144,17 @@ export default function Home({ socket }: Props) {
url: immediate || url || workingUrl,
path: availableDownloadPaths[downloadPath],
params: cliArgs.toString() + toFormatArgs(codes),
renameTo: fileNameOverride,
})
setUrl('')
setWorkingUrl('')
setFilenameOverride('')
setTimeout(() => {
const input = document.getElementById('urlInput') as HTMLInputElement;
input.value = '';
setShowBackdrop(true);
setDownloadFormats(undefined);
resetInput()
setShowBackdrop(true)
setDownloadFormats(undefined)
}, 250);
}
@@ -159,16 +165,17 @@ export default function Home({ socket }: Props) {
socket.emit('send-url-format-selection', {
url: url,
})
setWorkingUrl(url)
setUrl('')
setPickedAudioFormat('');
setPickedVideoFormat('');
setPickedBestFormat('');
setPickedAudioFormat('')
setPickedVideoFormat('')
setPickedBestFormat('')
setTimeout(() => {
const input = document.getElementById('urlInput') as HTMLInputElement;
input.value = '';
resetInput()
setShowBackdrop(true)
}, 250);
}, 250)
}
/**
@@ -179,6 +186,14 @@ export default function Home({ socket }: Props) {
setUrl(e.target.value)
}
/**
* Update the filename override state whenever the input value changes
* @param e Input change event
*/
const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFilenameOverride(e.target.value)
}
/**
* Abort a specific download if id's provided, other wise abort all running ones.
* @param id The download id / pid
@@ -209,6 +224,16 @@ export default function Home({ socket }: Props) {
reader.readAsDataURL(urlList[0])
}
const resetInput = () => {
const input = document.getElementById('urlInput') as HTMLInputElement;
input.value = '';
const filename = document.getElementById('customFilenameInput') as HTMLInputElement;
if (filename) {
filename.value = '';
}
}
/* -------------------- styled components -------------------- */
const Input = styled('input')({
@@ -232,43 +257,63 @@ export default function Home({ socket }: Props) {
flexDirection: 'column',
}}
>
<Grid container spacing={1}>
<Grid item xs={10}>
<TextField
fullWidth
id="urlInput"
label={i18n.t('urlInput')}
variant="outlined"
onChange={handleUrlChange}
disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<label htmlFor="icon-button-file">
<Input id="icon-button-file" type="file" accept=".txt" onChange={parseUrlListFile} />
<IconButton color="primary" aria-label="upload file" component="span">
<FileUpload />
</IconButton>
</label>
</InputAdornment>
),
}}
/>
</Grid>
<Grid item xs={2}>
<FormControl fullWidth>
<Select
defaultValue={0}
value={downloadPath}
onChange={(e) => setDownloadPath(Number(e.target.value))}
>
{availableDownloadPaths.map((val: string, idx: number) => (
<MenuItem key={idx} value={idx}>{val}</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid container>
<TextField
fullWidth
id="urlInput"
label={i18n.t('urlInput')}
variant="outlined"
onChange={handleUrlChange}
disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<label htmlFor="icon-button-file">
<Input id="icon-button-file" type="file" accept=".txt" onChange={parseUrlListFile} />
<IconButton color="primary" aria-label="upload file" component="span">
<FileUpload />
</IconButton>
</label>
</InputAdornment>
),
}}
/>
</Grid>
<Grid container spacing={1} sx={{ mt: 1 }}>
{
settings.fileRenaming ?
<Grid item xs={8}>
<TextField
id="customFilenameInput"
fullWidth
label={i18n.t('customFilename')}
variant="outlined"
onChange={handleFilenameOverrideChange}
disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
/>
</Grid> :
null
}
{
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>
</FormControl>
</Grid> :
null
}
</Grid>
<Grid container spacing={1} pt={2}>
<Grid item>
@@ -291,119 +336,121 @@ export default function Home({ socket }: Props) {
</Grid>
</Paper>
</Grid>
</Grid>
</Grid >
{/* Format Selection grid */}
{downloadFormats ? <Grid container spacing={2} mt={2}>
<Grid item xs={12}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
}}
>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" component="div" pb={1}>
{downloadFormats.title}
</Typography>
{/* <Skeleton variant="rectangular" height={180} /> */}
</Grid>
<Grid item xs={12} pb={1}>
<img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
</Grid>
{/* video only */}
<Grid item xs={12}>
<Typography variant="body1" component="div">
Best quality
</Typography>
</Grid>
<Grid item pr={2} py={1}>
<Button
variant="contained"
disabled={pickedBestFormat !== ''}
onClick={() => {
setPickedBestFormat(downloadFormats.best.format_id)
setPickedVideoFormat('')
setPickedAudioFormat('')
}}>
{downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
</Button>
</Grid>
{/* video only */}
{downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
{
downloadFormats ? <Grid container spacing={2} mt={2}>
<Grid item xs={12}>
<Paper
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
}}
>
<Grid container>
<Grid item xs={12}>
<Typography variant="h6" component="div" pb={1}>
{downloadFormats.title}
</Typography>
{/* <Skeleton variant="rectangular" height={180} /> */}
</Grid>
<Grid item xs={12} pb={1}>
<img src={downloadFormats.thumbnail} height={260} width="100%" style={{ objectFit: 'cover' }} />
</Grid>
{/* video only */}
<Grid item xs={12}>
<Typography variant="body1" component="div">
Video data {downloadFormats.formats[1].acodec}
Best quality
</Typography>
</Grid>
: null
}
{downloadFormats.formats
.filter(format => format.acodec === 'none' && format.vcodec !== 'none')
.map((format, idx) => (
<Grid item pr={2} py={1} key={idx}>
<Button
variant="contained"
onClick={() => {
setPickedVideoFormat(format.format_id)
setPickedBestFormat('')
}}
disabled={pickedVideoFormat === format.format_id}
>
{format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
</Button>
</Grid>
))
}
{downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
<Grid item xs={12}>
<Typography variant="body1" component="div">
Audio data
</Typography>
</Grid>
: null
}
{downloadFormats.formats
.filter(format => format.acodec !== 'none' && format.vcodec === 'none')
.map((format, idx) => (
<Grid item pr={2} py={1} key={idx}>
<Button
variant="contained"
onClick={() => {
setPickedAudioFormat(format.format_id)
setPickedBestFormat('')
}}
disabled={pickedAudioFormat === format.format_id}
>
{format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
</Button>
</Grid>
))
}
<Grid item xs={12} pt={2}>
<ButtonGroup disableElevation variant="contained">
<Button
onClick={() => sendUrl()}
disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
> Download
</Button>
<Grid item pr={2} py={1}>
<Button
variant="contained"
disabled={pickedBestFormat !== ''}
onClick={() => {
setPickedAudioFormat('');
setPickedVideoFormat('');
setPickedBestFormat('');
}}
> Clear
setPickedBestFormat(downloadFormats.best.format_id)
setPickedVideoFormat('')
setPickedAudioFormat('')
}}>
{downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
</Button>
</ButtonGroup>
</Grid>
{/* video only */}
{downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
<Grid item xs={12}>
<Typography variant="body1" component="div">
Video data {downloadFormats.formats[1].acodec}
</Typography>
</Grid>
: null
}
{downloadFormats.formats
.filter(format => format.acodec === 'none' && format.vcodec !== 'none')
.map((format, idx) => (
<Grid item pr={2} py={1} key={idx}>
<Button
variant="contained"
onClick={() => {
setPickedVideoFormat(format.format_id)
setPickedBestFormat('')
}}
disabled={pickedVideoFormat === format.format_id}
>
{format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
</Button>
</Grid>
))
}
{downloadFormats.formats.filter(format => format.acodec === 'none' && format.vcodec !== 'none').length ?
<Grid item xs={12}>
<Typography variant="body1" component="div">
Audio data
</Typography>
</Grid>
: null
}
{downloadFormats.formats
.filter(format => format.acodec !== 'none' && format.vcodec === 'none')
.map((format, idx) => (
<Grid item pr={2} py={1} key={idx}>
<Button
variant="contained"
onClick={() => {
setPickedAudioFormat(format.format_id)
setPickedBestFormat('')
}}
disabled={pickedAudioFormat === format.format_id}
>
{format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
</Button>
</Grid>
))
}
<Grid item xs={12} pt={2}>
<ButtonGroup disableElevation variant="contained">
<Button
onClick={() => sendUrl()}
disabled={!pickedBestFormat && !(pickedAudioFormat || pickedVideoFormat)}
> Download
</Button>
<Button
onClick={() => {
setPickedAudioFormat('');
setPickedVideoFormat('');
setPickedBestFormat('');
}}
> Clear
</Button>
</ButtonGroup>
</Grid>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid> : null}
</Paper>
</Grid>
</Grid> : null
}
<Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
{ /*Super big brain flatMap moment*/
{
Array
.from<any>(messageMap)
.filter(flattened => [...flattened][0])
@@ -440,6 +487,6 @@ export default function Home({ socket }: Props) {
message="Connected"
onClose={() => setShowToast(false)}
/>
</Container>
</Container >
);
}

40
frontend/src/Settings.tsx
View File

@@ -25,8 +25,10 @@ import { CliArguments } from "./classes";
import {
LanguageUnion,
setCliArgs,
setFileRenaming,
setFormatSelection,
setLanguage,
setPathOverriding,
setServerAddr,
setServerPort,
setTheme,
@@ -158,10 +160,10 @@ export default function Settings({ socket }: Props) {
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Language</InputLabel>
<InputLabel>{i18n.t('languageSelect')}</InputLabel>
<Select
defaultValue={settings.language}
label="Language"
label={i18n.t('languageSelect')}
onChange={handleLanguageChange}
>
<MenuItem value="english">English</MenuItem>
@@ -176,10 +178,10 @@ export default function Settings({ socket }: Props) {
</Grid>
<Grid item xs={12} md={6}>
<FormControl fullWidth>
<InputLabel>Theme</InputLabel>
<InputLabel>{i18n.t('themeSelect')}</InputLabel>
<Select
defaultValue={settings.theme}
label="Theme"
label={i18n.t('themeSelect')}
onChange={handleThemeChange}
>
<MenuItem value="light">Light</MenuItem>
@@ -230,6 +232,35 @@ export default function Settings({ socket }: Props) {
}
label={i18n.t('formatSelectionEnabler')}
/>
<Grid>
<Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
{i18n.t('overridesAnchor')}
</Typography>
<Stack direction="column">
<FormControlLabel
control={
<Switch
defaultChecked={settings.pathOverriding}
onChange={() => {
dispatch(setPathOverriding(!settings.pathOverriding))
}}
/>
}
label={i18n.t('pathOverrideOption')}
/>
<FormControlLabel
control={
<Switch
defaultChecked={settings.fileRenaming}
onChange={() => {
dispatch(setFileRenaming(!settings.fileRenaming))
}}
/>
}
label={i18n.t('filenameOverrideOption')}
/>
</Stack>
</Grid>
<Grid>
<Stack direction="row">
<Button
@@ -239,7 +270,6 @@ export default function Settings({ socket }: Props) {
>
{i18n.t('updateBinButton')}
</Button>
{/* <Button sx={{ mr: 1, mt: 1 }} variant="outlined">Primary</Button> */}
</Stack>
</Grid>
</FormGroup>

49
frontend/src/assets/i18n.yaml
View File

@@ -18,6 +18,13 @@ languages:
toastConnected: 'Connected to '
toastUpdated: Updated yt-dlp binary!
formatSelectionEnabler: Enable video/audio formats selection
themeSelect: 'Theme'
languageSelect: 'Language'
overridesAnchor: Overrides
pathOverrideOption: Enable output path overriding
filenameOverrideOption: Enable output file name overriding
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path
italian:
urlInput: URL di YouTube o di qualsiasi altro servizio supportato
statusTitle: Stato
@@ -36,6 +43,13 @@ languages:
toastConnected: 'Connesso a '
toastUpdated: yt-dlp aggiornato con successo!
formatSelectionEnabler: Abilita la selezione dei formati audio/video
themeSelect: 'Tema'
languageSelect: 'Lingua'
overridesAnchor: Sovrascritture
pathOverrideOption: Abilita sovrascrittura percorso di output
filenameOverrideOption: Abilita sovrascrittura del nome del file di output
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path
chinese:
urlInput: YouTube 或其他受支持服务的视频网址
statusTitle: 状态
@@ -54,6 +68,13 @@ languages:
toastConnected: '已连接到 '
toastUpdated: 已更新 yt-dlp 可执行文件！
formatSelectionEnabler: 启用视频/音频格式选择
themeSelect: 'Theme'
languageSelect: 'Language'
overridesAnchor: Overrides
pathOverrideOption: Enable output path overriding
filenameOverrideOption: Enable output file name overriding
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path
spanish:
urlInput: YouTube or other supported service video url
statusTitle: Status
@@ -72,6 +93,13 @@ languages:
toastConnected: 'Connected to '
toastUpdated: Updated yt-dlp binary!
formatSelectionEnabler: Enable video/audio formats selection
themeSelect: 'Theme'
languageSelect: 'Language'
overridesAnchor: Overrides
pathOverrideOption: Enable output path overriding
filenameOverrideOption: Enable output file name overriding
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path
russian:
urlInput: YouTube or other supported service video url
statusTitle: Status
@@ -90,6 +118,13 @@ languages:
toastConnected: 'Connected to '
toastUpdated: Updated yt-dlp binary!
formatSelectionEnabler: Enable video/audio formats selection
themeSelect: 'Theme'
languageSelect: 'Language'
overridesAnchor: Overrides
pathOverrideOption: Enable output path overriding
filenameOverrideOption: Enable output file name overriding
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path
korean:
urlInput: YouTube나 다른 지원되는 사이트의 URL
statusTitle: 상태
@@ -108,6 +143,13 @@ languages:
toastConnected: '다음으로 연결됨 '
toastUpdated: yt-dlp 바이너리를 업데이트 했습니다
formatSelectionEnabler: 비디오/오디오 포멧 옵션 표시
themeSelect: 'Theme'
languageSelect: 'Language'
overridesAnchor: Overrides
pathOverrideOption: Enable output path overriding
filenameOverrideOption: Enable output file name overriding
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path
japanese:
urlInput: YouTubeまたはサポート済み動画のURL
statusTitle: 状態
@@ -126,3 +168,10 @@ languages:
toastConnected: '接続中 '
toastUpdated: yt-dlpを更新しました!
formatSelectionEnabler: 選択可能な動画/音源
themeSelect: 'Theme'
languageSelect: 'Language'
overridesAnchor: Overrides
pathOverrideOption: Enable output path overriding
filenameOverrideOption: Enable output file name overriding
customFilename: Custom filemame (leave blank to use default)
customPath: Custom path

26
frontend/src/features/settings/settingsSlice.ts
View File

@@ -1,6 +1,4 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit"
import { CliArguments } from "../../classes"
import { I18nBuilder } from "../../i18n"
export type LanguageUnion = "english" | "chinese" | "russian" | "italian" | "spanish" | "korean" | "japanese"
export type ThemeUnion = "light" | "dark"
@@ -13,6 +11,8 @@ export interface SettingsState {
cliArgs: string,
formatSelection: boolean,
ratelimit: string,
fileRenaming: boolean,
pathOverriding: boolean,
}
const initialState: SettingsState = {
@@ -23,6 +23,8 @@ const initialState: SettingsState = {
cliArgs: localStorage.getItem("cli-args") ?? "",
formatSelection: localStorage.getItem("format-selection") === "true",
ratelimit: localStorage.getItem("rate-limit") ?? "",
fileRenaming: localStorage.getItem("file-renaming") === "true",
pathOverriding: localStorage.getItem("path-overriding") === "true",
}
export const settingsSlice = createSlice({
@@ -57,9 +59,27 @@ export const settingsSlice = createSlice({
state.ratelimit = action.payload
localStorage.setItem("rate-limit", action.payload)
},
setPathOverriding: (state, action: PayloadAction<boolean>) => {
state.pathOverriding = action.payload
localStorage.setItem("path-overriding", action.payload.toString())
},
setFileRenaming: (state, action: PayloadAction<boolean>) => {
state.fileRenaming = action.payload
localStorage.setItem("file-renaming", action.payload.toString())
},
}
})
export const { setLanguage, setCliArgs, setTheme, setServerAddr, setServerPort, setFormatSelection, setRateLimit } = settingsSlice.actions
export const {
setLanguage,
setCliArgs,
setTheme,
setServerAddr,
setServerPort,
setFormatSelection,
setRateLimit,
setFileRenaming,
setPathOverriding,
} = settingsSlice.actions
export default settingsSlice.reducer