mirror of
https://github.com/tubearchivist/tubearchivist.git
synced 2025-03-14 09:50:12 +00:00
refac, move ToggleConfig to component
This commit is contained in:
parent
bf38cdc7f0
commit
5cc40315c4
43
frontend/src/components/ToggleConfig.tsx
Normal file
43
frontend/src/components/ToggleConfig.tsx
Normal 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;
|
@ -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>
|
||||
)}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user