Custom SponsorBlock setting

client/components/Settings.vue

@@ -6,6 +6,7 @@ import Dropdown from '@/components/filter/Dropdown.vue';
 import '@/assets/styles/popup.scss';
 import { type SegmentOption, useSettingsStore } from '@/store/settings';
 import CheckBox from '~/components/form/CheckBox.vue';
+import BadgeButton from './buttons/BadgeButton.vue';
 
 defineEmits<{
   (e: 'close'): void;
@@ -17,9 +18,34 @@ const sponsorblockSegmentOptions = reactive([
   { label: 'Ask', value: 'ask' },
   { label: 'None', value: 'none' }
 ]);
+const sponsorBlockUrl = ref<string>(settingsStore.sponsorblockUrl);
+
+const isSponsorBlockUrlValid = computed(() => {
+  try {
+    const url = new URL(sponsorBlockUrl.value);
+    if (url.protocol != "http:" && url.protocol != "https:") {
+      return false;
+    }
+    return sponsorBlockUrl.value.endsWith("/");
+  } catch {
+    return false;
+  }
+});
 
 const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p'];
 const videoSpeedArray = ['0', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '1.75', '2', '2.25', '2.5', '2.75', '3'];
+
+function setSponsorBlockUrl() {
+  if (!isSponsorBlockUrlValid.value) {
+    return;
+  }
+  settingsStore.sponsorblockUrl = sponsorBlockUrl.value;
+}
+
+function resetSponsorBlockUrl() {
+  settingsStore.sponsorblockUrl = "https://sponsor.ajay.app/";
+  sponsorBlockUrl.value = settingsStore.sponsorblockUrl;
+}
 </script>
 
 <template>
@@ -76,12 +102,12 @@ const videoSpeedArray = ['0', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '1.75',
           alt="Sponsorblock icon"
         />Block ads and annoyances
       </h2>
-      <span class="small-label links"
-        >Using
-        <a href="https://sponsor.ajay.app/" target="_blank" rel="noreferrer noopener">
-          https://sponsor.ajay.app/</a
-        ></span
-      >
+      <span class="small-label links">
+        Using
+        <a :href="settingsStore.sponsorblockUrl" target="_blank" rel="noreferrer noopener">
+          {{ settingsStore.sponsorblockUrl }}
+        </a>
+      </span>
       <SwitchButton
         :value="settingsStore.sponsorblockEnabled"
         :label="'Enable SponsorBlock'"
@@ -90,6 +116,22 @@ const videoSpeedArray = ['0', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '1.75',
         @valuechange="val => settingsStore.setSponsorblockEnabled(val)"
       />
       <div class="sponsorblock-options-container">
+        <div class="sponsorblock-options" :class="{ disabled: !settingsStore.sponsorblockEnabled }">
+          <div class="sponsor-block-url-row">
+            <label for="sponsor-block-url">SponsorBlock URL</label>
+            <span class="sponsor-block-url-actions">
+              <input
+                id="sponsor-block-url"
+                v-model="sponsorBlockUrl"
+                class="sponsor-block-url-input"
+                :class="{'invalid-input': !isSponsorBlockUrlValid}"
+                type="text"
+                @change="setSponsorBlockUrl"
+                />
+              <BadgeButton :click="resetSponsorBlockUrl">Reset</BadgeButton>
+            </span>
+          </div>
+        </div>
         <div class="sponsorblock-options" :class="{ disabled: !settingsStore.sponsorblockEnabled }">
           <MultiOptionButton
             :options="sponsorblockSegmentOptions"
@@ -246,22 +288,24 @@ const videoSpeedArray = ['0', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '1.75',
         <label for="video-speed-input">Default video speed</label>
         <div class="video-speed-checkbox">
           <label for="as-list" style="padding-right: 5px"> (as list ?)</label>
-          <CheckBox id="as-list"
-                    :value="settingsStore.videoSpeedAsList"
-                    :label="''"
-                    @valuechange="val => settingsStore.setVideoSpeedAsList(val)"
+          <CheckBox
+              id="as-list"
+              :value="settingsStore.videoSpeedAsList"
+              :label="''"
+              @valuechange="val => settingsStore.setVideoSpeedAsList(val)"
           />
         </div>
-        <input v-if="!settingsStore.videoSpeedAsList"
-               id="video-speed-input"
-               class="settings-number-input"
-               type="number"
-               name="video-speed"
-               :value="settingsStore.defaultVideoSpeed"
-               step="0.1"
-               max="3"
-               min="0.1"
-               @change="(e: any) => settingsStore.setDefaultVideoSpeed(parseFloat(e.target.value))"
+        <input
+          v-if="!settingsStore.videoSpeedAsList"
+          id="video-speed-input"
+          class="settings-number-input"
+          type="number"
+          name="video-speed"
+          :value="settingsStore.defaultVideoSpeed"
+          step="0.1"
+          max="3"
+          min="0.1"
+          @change="(e: any) => settingsStore.setDefaultVideoSpeed(parseFloat(e.target.value))"
         />
         <Dropdown
           v-if="settingsStore.videoSpeedAsList"
@@ -422,21 +466,42 @@ const videoSpeedArray = ['0', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '1.75',
     width: calc(100% - 36px);
     justify-content: space-between;
     margin-top: 20px !important;
+  }
 
-    .settings-number-input {
-      all: unset;
-      border: 2px solid var(--bgcolor-alt-light);
-      width: 50px;
-      padding: 2px 5px;
-      border-radius: 5px;
-      transition: border 300ms $intro-easing;
+  .settings-number-input, .sponsor-block-url-input {
+    all: unset;
+    border: 2px solid var(--bgcolor-alt-light);
+    width: 50px;
+    padding: 2px 5px;
+    border-radius: 5px;
+    transition: border 300ms $intro-easing;
 
-      &:focus {
-        border: 2px solid var(--theme-color);
-      }
+    &:focus {
+      border: 2px solid var(--theme-color);
     }
   }
 
+  .sponsor-block-url-input {
+    width: 250px;
+  }
+
+  .invalid-input, .invalid-input:focus {
+    border: 2px solid #e00;
+  }
+
+  .sponsor-block-url-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+
+  .sponsor-block-url-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 1rem;
+  }
+
   .video-speed-checkbox {
     display: flex;
     flex: 1;

client/composables/sponsorBlock.ts

@@ -1,10 +1,11 @@
 import { sha256 } from 'js-sha256';
 import { SponsorBlockSegmentDto, SponsorBlockSegmentsDto } from '../../shared';
-
-const sponsorBlockApiUrl = 'https://sponsor.ajay.app/';
+import { useSettingsStore } from '~/store/settings';
 
 export const useSponsorBlock = () => {
   const { vtFetch } = useVtFetch();
+  const settings = useSettingsStore();
+  const sponsorBlockApi = settings.sponsorblockUrl;
 
   const skipSegments = ref<SponsorBlockSegmentsDto>(null);
 
@@ -14,7 +15,7 @@ export const useSponsorBlock = () => {
     const encodedVideoId = hash.hex();
     const shortHash = encodedVideoId.substring(0, 4);
 
-    const url = `${sponsorBlockApiUrl}api/skipSegments/${shortHash}?categories=["sponsor", "intro", "outro", "interaction", "selfpromo", "music_offtopic", "preview"]`;
+    const url = `${sponsorBlockApi}api/skipSegments/${shortHash}?categories=["sponsor", "intro", "outro", "interaction", "selfpromo", "music_offtopic", "preview"]`;
 
     vtFetch<Array<SponsorBlockSegmentsDto>>(url, { external: true }).then(response => {
       if (response && Array.isArray(response)) {

client/store/settings.ts

@@ -45,6 +45,7 @@ export const useSettingsStore = defineStore(
         showHomeTrendingVideos: true,
         showRecommendedVideos: true,
         sponsorblockEnabled: true,
+        sponsorblockUrl: 'https://sponsor.ajay.app/',
         sponsorblockSegmentInteraction: 'ask' as SegmentOption,
         sponsorblockSegmentIntro: 'ask' as SegmentOption,
         sponsorblockSegmentMusicOfftopic: 'ask' as SegmentOption,