tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2025-03-14 18:00:13 +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;

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

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

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