refactor: added per-download sponsorblock config

src/App.tsx

@@ -420,13 +420,13 @@ export default function App({ children }: { children: React.ReactNode }) {
 
     let sponsorblockRemove = null;
     let sponsorblockMark = null;
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (USE_SPONSORBLOCK || (resumeState?.sponsorblock_remove || resumeState?.sponsorblock_mark))) {
+    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && ((downloadConfig.sponsorblock && downloadConfig.sponsorblock !== 'auto') || resumeState?.sponsorblock_remove || resumeState?.sponsorblock_mark || USE_SPONSORBLOCK)) {
-      if (SPONSORBLOCK_MODE === 'remove' || resumeState?.sponsorblock_remove) {
+      if (downloadConfig?.sponsorblock === 'remove' || resumeState?.sponsorblock_remove || (SPONSORBLOCK_MODE === 'remove' && !downloadConfig.sponsorblock)) {
         sponsorblockRemove = resumeState?.sponsorblock_remove || (SPONSORBLOCK_REMOVE === 'custom' ? (
           SPONSORBLOCK_REMOVE_CATEGORIES.length > 0 ? SPONSORBLOCK_REMOVE_CATEGORIES.join(',') : 'default'
         ) : (SPONSORBLOCK_REMOVE));
         args.push('--sponsorblock-remove', sponsorblockRemove);
-      } else if (SPONSORBLOCK_MODE === 'mark' || resumeState?.sponsorblock_mark) {
+      } else if (downloadConfig?.sponsorblock === 'mark' || resumeState?.sponsorblock_mark || (SPONSORBLOCK_MODE === 'mark' && !downloadConfig.sponsorblock)) {
         sponsorblockMark = resumeState?.sponsorblock_mark || (SPONSORBLOCK_MARK === 'custom' ? (
           SPONSORBLOCK_MARK_CATEGORIES.length > 0 ? SPONSORBLOCK_MARK_CATEGORIES.join(',') : 'default'
         ) : (SPONSORBLOCK_MARK));
@@ -757,6 +757,7 @@ export default function App({ children }: { children: React.ReactNode }) {
           output_format: null,
           embed_metadata: null,
           embed_thumbnail: null,
+          sponsorblock: null,
           custom_command: null
         },
         downloadState.subtitle_id,
@@ -859,6 +860,7 @@ export default function App({ children }: { children: React.ReactNode }) {
           output_format: null,
           embed_metadata: null,
           embed_thumbnail: null,
+          sponsorblock: null,
           custom_command: null
         },
         downloadToStart.subtitle_id,

src/pages/downloader.tsx

@@ -496,6 +496,7 @@ export default function DownloaderPage() {
                         setDownloadConfigurationKey('output_format', null);
                         setDownloadConfigurationKey('embed_metadata', null);
                         setDownloadConfigurationKey('embed_thumbnail', null);
+                        setDownloadConfigurationKey('sponsorblock', null);
                     }}
                     >
                         <div className="flex items-center justify-between">
@@ -545,6 +546,7 @@ export default function DownloaderPage() {
                                     setDownloadConfigurationKey('output_format', null);
                                     setDownloadConfigurationKey('embed_metadata', null);
                                     setDownloadConfigurationKey('embed_thumbnail', null);
+                                    setDownloadConfigurationKey('sponsorblock', null);
                                 }}
                                 >
                                     <p className="text-xs">Suggested</p>
@@ -648,6 +650,7 @@ export default function DownloaderPage() {
                                     setDownloadConfigurationKey('output_format', null);
                                     setDownloadConfigurationKey('embed_metadata', null);
                                     setDownloadConfigurationKey('embed_thumbnail', null);
+                                    setDownloadConfigurationKey('sponsorblock', null);
                                 }}
                                 >
                                     {videoOnlyFormats && videoOnlyFormats.length > 0 && audioOnlyFormats && audioOnlyFormats.length > 0 && (
@@ -672,6 +675,7 @@ export default function DownloaderPage() {
                                     setDownloadConfigurationKey('output_format', null);
                                     setDownloadConfigurationKey('embed_metadata', null);
                                     setDownloadConfigurationKey('embed_thumbnail', null);
+                                    setDownloadConfigurationKey('sponsorblock', null);
                                 }}
                                 >
                                     {audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && (
@@ -1114,6 +1118,29 @@ export default function DownloaderPage() {
                                                     </RadioGroup>
                                                 )}
                                             </div>
+                                            <div className="sponsorblock">
+                                                <Label className="text-xs my-3">Sponsorblock Mode</Label>
+                                                <RadioGroup
+                                                orientation="horizontal"
+                                                className="flex items-center gap-4 flex-wrap"
+                                                value={downloadConfiguration.sponsorblock ?? 'auto'}
+                                                onValueChange={(value) => setDownloadConfigurationKey('sponsorblock', value)}
+                                                disabled={useCustomCommands}
+                                                >
+                                                    <div className="flex items-center gap-3">
+                                                        <RadioGroupItem value="auto" id="sb-auto" />
+                                                        <Label htmlFor="sb-auto">Follow Settings</Label>
+                                                    </div>
+                                                    <div className="flex items-center gap-3">
+                                                        <RadioGroupItem value="remove" id="sb-remove" />
+                                                        <Label htmlFor="sb-remove">Remove</Label>
+                                                    </div>
+                                                    <div className="flex items-center gap-3">
+                                                        <RadioGroupItem value="mark" id="sb-mark" />
+                                                        <Label htmlFor="sb-mark">Mark</Label>
+                                                    </div>
+                                                </RadioGroup>
+                                            </div>
                                             <div className="embeding-options">
                                                 <Label className="text-xs my-3">Embeding Options</Label>
                                                 <div className="flex items-center space-x-2 mt-3">

src/pages/settings.tsx

@@ -1057,7 +1057,7 @@ export default function SettingsPage() {
                                         className="flex items-center gap-4"
                                         value={sponsorblockRemove}
                                         onValueChange={(value) => saveSettingsKey('sponsorblock_remove', value)}
-                                        disabled={!useSponsorblock || sponsorblockMode !== "remove" || useCustomCommands}
+                                        disabled={/*!useSponsorblock || sponsorblockMode !== "remove" ||*/ useCustomCommands}
                                         >
                                             <div className="flex items-center gap-3">
                                                 <RadioGroupItem value="default" id="sponsorblock-remove-default" />
@@ -1078,7 +1078,7 @@ export default function SettingsPage() {
                                         className="flex flex-col items-start gap-2 mt-1"
                                         value={sponsorblockRemove === "custom" ? sponsorblockRemoveCategories : sponsorblockRemove === "default" ? sponsorblockCategories.filter((cat) => cat.code !== 'poi_highlight' && cat.code !== 'filler').map((cat) => cat.code) : sponsorblockRemove === "all" ? sponsorblockCategories.filter((cat) => cat.code !== 'poi_highlight').map((cat) => cat.code) : []}
                                         onValueChange={(value) => saveSettingsKey('sponsorblock_remove_categories', value)}
-                                        disabled={!useSponsorblock || sponsorblockMode !== "remove" || sponsorblockRemove !== "custom" || useCustomCommands}
+                                        disabled={/*!useSponsorblock || sponsorblockMode !== "remove" ||*/ sponsorblockRemove !== "custom" || useCustomCommands}
                                         >
                                             <div className="flex gap-2 flex-wrap items-center">
                                                 {sponsorblockCategories.map((category) => (
@@ -1104,7 +1104,7 @@ export default function SettingsPage() {
                                         className="flex items-center gap-4"
                                         value={sponsorblockMark}
                                         onValueChange={(value) => saveSettingsKey('sponsorblock_mark', value)}
-                                        disabled={!useSponsorblock || sponsorblockMode !== "mark" || useCustomCommands}
+                                        disabled={/*!useSponsorblock || sponsorblockMode !== "mark" ||*/ useCustomCommands}
                                         >
                                             <div className="flex items-center gap-3">
                                                 <RadioGroupItem value="default" id="sponsorblock-mark-default" />
@@ -1125,7 +1125,7 @@ export default function SettingsPage() {
                                         className="flex flex-col items-start gap-2 mt-1 mb-2"
                                         value={sponsorblockMark === "custom" ? sponsorblockMarkCategories : sponsorblockMark === "default" ? sponsorblockCategories.map((cat) => cat.code) : sponsorblockMark === "all" ? sponsorblockCategories.map((cat) => cat.code) : []}
                                         onValueChange={(value) => saveSettingsKey('sponsorblock_mark_categories', value)}
-                                        disabled={!useSponsorblock || sponsorblockMode !== "mark" || sponsorblockMark !== "custom" || useCustomCommands}
+                                        disabled={/*!useSponsorblock || sponsorblockMode !== "mark" ||*/ sponsorblockMark !== "custom" || useCustomCommands}
                                         >
                                             <div className="flex gap-2 flex-wrap items-center">
                                                 {sponsorblockCategories.map((category) => (

src/services/store.ts

@@ -58,6 +58,7 @@ export const useDownloaderPageStatesStore = create<DownloaderPageStatesStore>((s
         output_format: null,
         embed_metadata: null,
         embed_thumbnail: null,
+        sponsorblock: null,
         custom_command: null
     },
     isErrored: false,
@@ -83,6 +84,7 @@ export const useDownloaderPageStatesStore = create<DownloaderPageStatesStore>((s
             output_format: null,
             embed_metadata: null,
             embed_thumbnail: null,
+            sponsorblock: null,
             custom_command: null
         }
     })),

src/types/settings.ts

@@ -59,5 +59,6 @@ export interface DownloadConfiguration {
     output_format: string | null;
     embed_metadata: boolean | null;
     embed_thumbnail: boolean | null;
+    sponsorblock: string | null;
     custom_command: string | null;
 }