tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2025-03-14 09:50:12 +00:00
Code Issues Projects Releases Wiki Activity

refac, move ToggleConfig to component

Browse Source
This commit is contained in:
Simon 2025-01-10 15:28:17 +07:00
parent bf38cdc7f0
commit 5cc40315c4
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
3 changed files with 91 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/ToggleConfig.tsx Normal file
View File

@ -0,0 +1,43 @@
type ToggleConfigProps = {
name: string;
value: boolean;
updateCallback: (name: string, value: boolean) => void;
resetCallback?: (arg0: boolean) => void;
onValue?: boolean | string;
offValue?: boolean | string;
};
const ToggleConfig = ({
name,
value,
updateCallback,
resetCallback = undefined,
}: ToggleConfigProps) => {
return (
<div className="toggle">
<div className="toggleBox">
<input
name={name}
type="checkbox"
checked={value}
onChange={event => {
updateCallback(name, event.target.checked);
}}
/>
{!value && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{value && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
{resetCallback !== undefined && <button onClick={() => resetCallback(false)}>Reset</button>}
</div>
);
};
export default ToggleConfig;

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

@ -14,6 +14,7 @@ import Button from '../components/Button';
import updateChannelOverwrites from '../api/actions/updateChannelOverwrite';
import useIsAdmin from '../functions/useIsAdmin';
import InputConfig from '../components/InputConfig';
import ToggleConfig from '../components/ToggleConfig';
export type ChannelBaseOutletContextType = {
currentPage: number;
@ -269,30 +270,11 @@ const ChannelAbout = () => {
<div>
<p>Index playlists</p>
</div>
<div>
<div className="toggle">
<div className="toggleBox">
<input
name="index_playlists"
type="checkbox"
checked={indexPlaylists}
onChange={event => {
handleUpdateConfig('index_playlists', event.target.checked || null);
}}
/>
{!indexPlaylists && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{indexPlaylists && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
</div>
<ToggleConfig
name="index_playlists"
value={indexPlaylists}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
@ -305,29 +287,12 @@ const ChannelAbout = () => {
</div>
<div>
{enableSponsorblock !== null ? (
<div className="toggle">
<div className="toggleBox">
<input
name="enableSponsorblock"
type="checkbox"
checked={Boolean(enableSponsorblock)}
onChange={event => {
handleUpdateConfig('integrate_sponsorblock', event.target.checked);
}}
/>
{!enableSponsorblock && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{enableSponsorblock && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
<button onClick={() => handleToggleSponsorBlock(false)}>Reset</button>
</div>
<ToggleConfig
name="integrate_sponsorblock"
value={enableSponsorblock}
updateCallback={handleUpdateConfig}
resetCallback={handleToggleSponsorBlock}
/>
) : (
<button onClick={() => handleToggleSponsorBlock(true)}>Configure</button>
)}

201
frontend/src/pages/SettingsApplication.tsx
View File

@ -12,6 +12,7 @@ import loadAppsettingsConfig, { AppSettingsConfigType } from '../api/loader/load
import updateAppsettingsConfig from '../api/actions/updateAppsettingsConfig';
import loadApiToken from '../api/loader/loadApiToken';
import InputConfig from '../components/InputConfig';
import ToggleConfig from '../components/ToggleConfig';
type SnapshotType = {
id: string;
@ -214,31 +215,11 @@ const SettingsApplication = () => {
<div>
<p>Autostart download subscriptions</p>
</div>
<div className="toggle">
<div className="toggleBox">
<input
name="index_playlists"
type="checkbox"
checked={isAutostart}
onChange={event => {
handleUpdateConfig(
'subscriptions.auto_start',
event.target.checked || false,
);
}}
/>
{!isAutostart && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{isAutostart && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
<ToggleConfig
name="subscriptions.auto_start"
value={isAutostart}
updateCallback={handleUpdateConfig}
/>
</div>
</div>
<div className="info-box-item">
@ -341,58 +322,21 @@ const SettingsApplication = () => {
<div>
<p>Embed metadata</p>
</div>
<div className="toggle">
<div className="toggleBox">
<input
name="add_metadata"
type="checkbox"
checked={embedMetadata}
onChange={event => {
handleUpdateConfig('downloads.add_metadata', event.target.checked || false);
}}
/>
{!embedMetadata && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{embedMetadata && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
<ToggleConfig
name="downloads.add_metadata"
value={embedMetadata}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
<p>Embed Thumbnail</p>
</div>
<div className="toggle">
<div className="toggleBox">
<input
name="add_thumbnail"
type="checkbox"
checked={embedThumbnail}
onChange={event => {
handleUpdateConfig(
'downloads.add_thumbnail',
event.target.checked || false,
);
}}
/>
{!embedThumbnail && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{embedThumbnail && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
<ToggleConfig
name="downloads.add_thumbnail"
value={embedThumbnail}
updateCallback={handleUpdateConfig}
/>
</div>
</div>
<div className="info-box-item">
@ -446,28 +390,11 @@ const SettingsApplication = () => {
<div>
<p>Enable subtitle index</p>
</div>
<div className="toggle">
<div className="toggleBox">
<input
name="subtitle_index"
type="checkbox"
checked={indexSubtitles}
onChange={event => {
handleUpdateConfig('downloads.subtitle_index', event.target.checked);
}}
/>
{!indexSubtitles && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{indexSubtitles && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
<ToggleConfig
name="downloads.subtitle_index"
value={indexSubtitles}
updateCallback={handleUpdateConfig}
/>
</div>
</>
)}
@ -540,58 +467,21 @@ const SettingsApplication = () => {
<div>
<p>Enable returnyoutubedislike</p>
</div>
<div className="toggle">
<div className="toggleBox">
<input
name="downloads.integrate_ryd"
type="checkbox"
checked={downloadDislikes}
onChange={event => {
handleUpdateConfig('downloads.integrate_ryd', event.target.checked);
}}
/>
{!downloadDislikes && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{downloadDislikes && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
<ToggleConfig
name="downloads.integrate_ryd"
value={downloadDislikes}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div>
<p>Enable Sponsorblock</p>
</div>
<div className="toggle">
<div className="toggleBox">
<input
name="downloads.integrate_sponsorblock"
type="checkbox"
checked={enableSponsorBlock}
onChange={event => {
handleUpdateConfig(
'downloads.integrate_sponsorblock',
event.target.checked,
);
}}
/>
{!enableSponsorBlock && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{enableSponsorBlock && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
<ToggleConfig
name="downloads.integrate_sponsorblock"
value={enableSponsorBlock}
updateCallback={handleUpdateConfig}
/>
</div>
</div>
<div className="info-box-item">
@ -600,30 +490,11 @@ const SettingsApplication = () => {
<div>
<p>Enable Index Snapshot</p>
</div>
<div>
<div className="toggle">
<div className="toggleBox">
<input
name="application.enable_snapshot"
type="checkbox"
checked={enableSnapshots}
onChange={event => {
handleUpdateConfig('application.enable_snapshot', event.target.checked);
}}
/>
{!enableSnapshots && (
<label htmlFor="" className="ofbtn">
Off
</label>
)}
{enableSnapshots && (
<label htmlFor="" className="onbtn">
On
</label>
)}
</div>
</div>
</div>
<ToggleConfig
name="application.enable_snapshot"
value={enableSnapshots}
updateCallback={handleUpdateConfig}
/>
</div>
<div className="settings-box-wrapper">
<div></div>