RomanNum3ral
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

abstract InputConfig to separate component

This commit is contained in:
Simon 2025-01-08 18:05:38 +07:00
parent 8d4bcb2f4b
commit 1a6f51a122
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
3 changed files with 90 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/InputConfig.tsx Normal file
View File

@ -0,0 +1,47 @@
type InputTextProps = {
type: 'text' | 'number';
name: string;
value: string | number | null;
setValue:
| React.Dispatch<React.SetStateAction<string | null>>
| React.Dispatch<React.SetStateAction<number | null>>;
oldValue: string | number | undefined;
updateCallback: (arg0: string, arg1: string | number | null) => void;
};
const InputConfig = ({ type, name, value, setValue, oldValue, updateCallback }: InputTextProps) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (type === 'number') {
const inputValue = e.target.value;
if (inputValue === '') {
setValue(null);
} else {
const numericValue = Number(inputValue);
(setValue as React.Dispatch<React.SetStateAction<number | null>>)(numericValue);
}
} else {
(setValue as React.Dispatch<React.SetStateAction<string | null>>)(e.target.value);
}
};
return (
<div>
<input type={type} name={name} value={value ?? ''} onChange={handleChange} />
<div className="button-box">
{value !== null && value !== oldValue && (
<>
<button onClick={() => updateCallback(name, value)}>Update</button>
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
<button onClick={() => setValue(oldValue as any)}>Cancel</button>
</>
)}
{oldValue !== undefined && (
<button onClick={() => updateCallback(name, null)}>reset</button>
)}
</div>
</div>
);
};
export default InputConfig;

249
frontend/src/pages/ChannelAbout.tsx
View File

@ -13,6 +13,7 @@ import FormattedNumber from '../components/FormattedNumber';
import Button from '../components/Button';
import updateChannelOverwrites from '../api/actions/updateChannelOverwrite';
import useIsAdmin from '../functions/useIsAdmin';
import InputConfig from '../components/InputConfig';
export type ChannelBaseOutletContextType = {
currentPage: number;
@ -43,7 +44,7 @@ const ChannelAbout = () => {
const [channelResponse, setChannelResponse] = useState<ChannelResponseType>();
const [downloadFormat, setDownloadFormat] = useState('');
const [downloadFormat, setDownloadFormat] = useState<string | null>(null);
const [autoDeleteAfter, setAutoDeleteAfter] = useState<number | null>(null);
const [indexPlaylists, setIndexPlaylists] = useState(false);
const [enableSponsorblock, setEnableSponsorblock] = useState<boolean | null>(null);
@ -59,7 +60,7 @@ const ChannelAbout = () => {
const channelResponse = await loadChannelById(channelId);
setChannelResponse(channelResponse);
setDownloadFormat(channelResponse?.data?.channel_overwrites?.download_format || '');
setDownloadFormat(channelResponse?.data?.channel_overwrites?.download_format || null);
setAutoDeleteAfter(channelResponse?.data?.channel_overwrites?.autodelete_days);
setIndexPlaylists(channelResponse?.data?.channel_overwrites?.index_playlists || false);
setEnableSponsorblock(channelResponse?.data?.channel_overwrites?.integrate_sponsorblock);
@ -85,19 +86,6 @@ const ChannelAbout = () => {
setRefresh(true);
};
const handleNumberChange =
(setValue: React.Dispatch<React.SetStateAction<number | null>>) =>
(e: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = e.target.value;
if (inputValue === '') {
setValue(null);
} else {
const numericValue = Number(inputValue);
setValue(isNaN(numericValue) ? null : numericValue);
}
};
const handleToggleSponsorBlock = async (isEnabled: boolean) => {
if (isEnabled) {
setEnableSponsorblock(true);
@ -251,79 +239,27 @@ const ChannelAbout = () => {
<div>
<p>Download Format</p>
</div>
<div>
<input
type="text"
name="download_format"
value={downloadFormat}
onChange={event => {
setDownloadFormat(event.target.value);
}}
/>
<div className="button-box">
{downloadFormat &&
downloadFormat !== channel.channel_overwrites?.download_format && (
<>
<button
onClick={() => handleUpdateConfig('download_format', downloadFormat)}
>
Update
</button>
<button
onClick={() =>
setDownloadFormat(channel.channel_overwrites?.download_format || '')
}
>
Cancel
</button>
</>
)}
{channel.channel_overwrites?.download_format !== undefined && (
<button onClick={() => handleUpdateConfig('download_format', null)}>
reset
</button>
)}
</div>
</div>
<InputConfig
type="text"
name="download_format"
value={downloadFormat}
setValue={setDownloadFormat}
oldValue={channel.channel_overwrites?.download_format}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
<p>Auto delete watched videos after x days</p>
</div>
<div>
<input
type="number"
name="autodelete_days"
value={autoDeleteAfter ?? ''}
onChange={handleNumberChange(setAutoDeleteAfter)}
/>
<div className="button-box">
{autoDeleteAfter !== null &&
autoDeleteAfter !== channel.channel_overwrites?.autodelete_days && (
<>
<button
onClick={() => handleUpdateConfig('autodelete_days', autoDeleteAfter)}
>
Update
</button>
<button
onClick={() =>
setAutoDeleteAfter(
channel.channel_overwrites?.autodelete_days || null,
)
}
>
Cancel
</button>
</>
)}
{channel.channel_overwrites?.autodelete_days !== undefined && (
<button onClick={() => handleUpdateConfig('autodelete_days', null)}>
Reset
</button>
)}
</div>
</div>
<InputConfig
type="number"
name="autodelete_days"
value={autoDeleteAfter}
setValue={setAutoDeleteAfter}
oldValue={channel.channel_overwrites?.autodelete_days}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
@ -404,139 +340,40 @@ const ChannelAbout = () => {
<div>
<p>Videos page size</p>
</div>
<div>
<input
type="number"
name="subscriptions_channel_size"
value={pageSizeVideo ?? ''}
onChange={handleNumberChange(setPageSizeVideo)}
/>
<div className="button-box">
{pageSizeVideo !== null &&
pageSizeVideo !== channel.channel_overwrites?.subscriptions_channel_size && (
<>
<button
onClick={() =>
handleUpdateConfig('subscriptions_channel_size', pageSizeVideo)
}
>
Update
</button>
<button
onClick={() =>
setPageSizeVideo(
channel.channel_overwrites?.subscriptions_channel_size || null,
)
}
>
Cancel
</button>
</>
)}
{channel.channel_overwrites?.subscriptions_channel_size !== undefined && (
<button
onClick={() => handleUpdateConfig('subscriptions_channel_size', null)}
>
Reset
</button>
)}
</div>
</div>
<InputConfig
type="number"
name="subscriptions_channel_size"
value={pageSizeVideo}
setValue={setPageSizeVideo}
oldValue={channel.channel_overwrites?.subscriptions_channel_size}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
<p>Shorts page size</p>
</div>
<div>
<input
type="number"
name="subscriptions_shorts_channel_size"
value={pageSizeShorts ?? ''}
onChange={handleNumberChange(setPageSizeShorts)}
/>
<div className="button-box">
{pageSizeShorts !== null &&
pageSizeShorts !==
channel.channel_overwrites?.subscriptions_shorts_channel_size && (
<>
<button
onClick={() =>
handleUpdateConfig(
'subscriptions_shorts_channel_size',
pageSizeShorts,
)
}
>
Update
</button>
<button
onClick={() =>
setPageSizeShorts(
channel.channel_overwrites?.subscriptions_shorts_channel_size ||
null,
)
}
>
Cancel
</button>
</>
)}
{channel.channel_overwrites?.subscriptions_shorts_channel_size !==
undefined && (
<button
onClick={() =>
handleUpdateConfig('subscriptions_shorts_channel_size', null)
}
>
Reset
</button>
)}
</div>
</div>
<InputConfig
type="number"
name="subscriptions_shorts_channel_size"
value={pageSizeShorts}
setValue={setPageSizeShorts}
oldValue={channel.channel_overwrites?.subscriptions_shorts_channel_size}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
<p>Live streams page size</p>
</div>
<div>
<input
type="number"
name="subscriptions_live_channel_size"
value={pageSizeStreams ?? ''}
onChange={handleNumberChange(setPageSizeStreams)}
/>
<div className="button-box">
{pageSizeStreams !== null &&
pageSizeStreams !==
channel.channel_overwrites?.subscriptions_live_channel_size && (
<>
<button
onClick={() =>
handleUpdateConfig('subscriptions_live_channel_size', pageSizeStreams)
}
>
Update
</button>
<button
onClick={() =>
setPageSizeStreams(
channel.channel_overwrites?.subscriptions_live_channel_size || null,
)
}
>
Cancel
</button>
</>
)}
{channel.channel_overwrites?.subscriptions_live_channel_size !== undefined && (
<button
onClick={() => handleUpdateConfig('subscriptions_live_channel_size', null)}
>
Reset
</button>
)}
</div>
</div>
<InputConfig
type="number"
name="subscriptions_live_channel_size"
value={pageSizeStreams}
setValue={setPageSizeStreams}
oldValue={channel.channel_overwrites?.subscriptions_live_channel_size}
updateCallback={handleUpdateConfig}
/>
</div>
</div>
</div>

1
frontend/src/style.css
View File

@ -131,7 +131,6 @@ button:hover {
padding: 5px 0;
display: inline-flex;
gap: 5px;
width: 100%;
}
.unsubscribe {