Merge pull request #2384 from ajayyy/dependabot/npm_and_yarn/node-forge-1.3.2

Bump node-forge from 1.3.1 to 1.3.2

.github/workflows/release.yml

@@ -12,7 +12,8 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v4
+      - name: Checkout release branch w/submodules
+        uses: actions/checkout@v5
         with:
           submodules: recursive
       - uses: actions/setup-node@v4
@@ -34,12 +35,27 @@ jobs:
           path: ../builds/SourceCodeUseThisOne.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Checkout source maps branch
+        uses: actions/checkout@v5
+        with:
+          path: source-maps
+          ref: source-maps
+      - name: Set up committer info
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
       - run: npm ci
 
       # Create Firefox artifacts
       - name: Create Firefox artifacts
-        run: npm run build:firefox
+        run: npm run build:firefox -- --env ghpSourceMaps
       - run: mkdir ./builds
+      - name: Move Firefox source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/firefox/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/firefox/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/firefox/$VERSION/"
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/FirefoxExtension.zip *
       - name: Upload FirefoxExtension to release
@@ -52,7 +68,13 @@ jobs:
       
       # Create Chrome artifacts
       - name: Create Chrome artifacts
-        run: npm run build:chrome
+        run: npm run build:chrome -- --env ghpSourceMaps
+      - name: Move Chrome source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/chrome/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/chrome/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/chrome/$VERSION/"
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/ChromeExtension.zip *
       - name: Upload ChromeExtension to release
@@ -67,7 +89,13 @@ jobs:
       - name: Clear dist for Edge
         run: rm -rf ./dist
       - name: Create Edge artifacts
-        run: npm run build:edge
+        run: npm run build:edge -- --env ghpSourceMaps
+      - name: Move Edge source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/edge/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/edge/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/edge/$VERSION/"
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/EdgeExtension.zip *
       - name: Upload EdgeExtension to release
@@ -80,7 +108,13 @@ jobs:
 
       # Create Safari artifacts
       - name: Create Safari artifacts
-        run: npm run build:safari
+        run: npm run build:safari -- --env ghpSourceMaps
+      - name: Move Safari source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/safari/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/safari/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/safari/$VERSION/"
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
       - name: Upload SafariExtension to release
@@ -93,7 +127,13 @@ jobs:
 
       # Create Beta artifacts (Builds with the name changed to beta)
       - name: Create Chrome Beta artifacts
-        run: npm run build:chrome -- --env stream=beta
+        run: npm run build:chrome -- --env stream=beta --env ghpSourceMaps
+      - name: Move Chrome Beta source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/chrome-beta/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/chrome-beta/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/chrome-beta/$VERSION/"
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
       - name: Upload ChromeExtensionBeta to release
@@ -106,11 +146,17 @@ jobs:
 
       # Firefox Beta
       - name: Create Firefox Beta artifacts
-        run: npm run build:firefox -- --env stream=beta
+        run: npm run build:firefox -- --env stream=beta --env autoupdate --env ghpSourceMaps
       - uses: actions/upload-artifact@v4
         with:
           name: FirefoxExtensionBeta
           path: dist
+      - name: Move Firefox Beta source maps to source map repo
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          mkdir -p "./source-maps/firefox-beta/$VERSION/"
+          mv -v ./dist/**/*.js.map "./source-maps/firefox-beta/$VERSION/"
+          cp -v ./dist/**/*.js.LICENSE.txt "./source-maps/firefox-beta/$VERSION/"
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/FirefoxExtensionBeta.zip *
 
@@ -120,10 +166,8 @@ jobs:
         env:
           WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
           WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
-      - name: Install rename
-        run: sudo apt-get install rename
       - name: Rename signed file
-        run: cd ./web-ext-artifacts ; rename 's/.*/FirefoxSignedInstaller.xpi/' *
+        run: mv ./web-ext-artifacts/* ./web-ext-artifacts/FirefoxSignedInstaller.xpi
       - uses: actions/upload-artifact@v4
         with:
           name: FirefoxExtensionSigned.xpi
@@ -137,3 +181,80 @@ jobs:
           path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
           repo-token: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Commit & push new source maps
+        if: always()
+        run: |
+          VERSION=`jq -r '.version' ./dist/manifest.json`
+          cd ./source-maps
+          git add .
+          git commit -m "Publish source maps for version $VERSION"
+          git push
+
+      - name: Prepare new github pages deployment
+        shell: python
+        run: |
+          from pathlib import Path
+          import json
+          import shutil
+          import os
+
+          # config stuff
+          installer_name = "FirefoxSignedInstaller.xpi"
+          owner, repo_name = os.environ["GITHUB_REPOSITORY"].split("/")
+          owner = owner.lower()
+
+          # create the github paged dir
+          ghp_dir = Path("./github-pages")
+          ghp_dir.mkdir(parents=True, exist_ok=True)
+
+          # move in the installer
+          Path("./web-ext-artifacts", installer_name).rename(ghp_dir / installer_name)
+
+          # read manifest.json and extract parameters
+          with open("./dist/manifest.json") as f:
+            manifest = json.load(f)
+          current_version = manifest["version"]
+          ext_id = manifest["browser_specific_settings"]["gecko"]["id"]
+
+          # generate updates file
+          updates = {
+            "addons": {
+              ext_id: {
+                "updates": [
+                  {
+                    "version": current_version,
+                    # param doesn't actually matter, it's just a cachebuster
+                    "update_link": f"https://{owner}.github.io/{repo_name}/{installer_name}?v={current_version}",
+                  },
+                ],
+              },
+            },
+          }
+          (ghp_dir / "updates.json").write_text(json.dumps(updates))
+
+          # copy in source maps
+          def only_sourcemaps(cur, ls):
+            if '/' in cur:
+              return []
+            return set(ls) - {"chrome", "chrome-beta", "edge", "firefox", "firefox-beta", "safari"}
+          shutil.copytree("source-maps", ghp_dir, ignore=only_sourcemaps, dirs_exist_ok=True)
+
+      - name: Upload new github pages deployment
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./github-pages
+
+  deploy-ghp:
+    name: Deploy to github pages
+    needs: build
+    permissions:
+      id-token: write
+      pages: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/tests.yml

@@ -16,10 +16,15 @@ jobs:
         with:
           node-version: '18'
       - run: npm ci
-      - run: sudo apt-get install chromium-chromedriver
       
       - name: Copy configuration
         run: cp config.json.example config.json
+
+      - name: Set up WireGuard Connection
+        uses: niklaskeerl/easy-wireguard-action@50341d5f4b8245ff3a90e278aca67b2d283c78d0
+        with:
+          WG_CONFIG_FILE: ${{ secrets.WG_CONFIG_FILE }}
+
       - name: Run tests
         run: npm run test
 

CONTRIBUTING.md

@@ -5,7 +5,7 @@ https://crowdin.com/project/sponsorblock
 
 # Building
 ## Building locally
-0. You must have [Node.js 16 or later](https://nodejs.org/) and npm installed. Works best on Linux
+0. You must have [Node.js 22 or later](https://nodejs.org/) and npm installed. Works best on Linux
 1. Clone with submodules
   ```bash
   git clone --recursive https://github.com/ajayyy/SponsorBlock

config.json.example

@@ -2,7 +2,7 @@
     "serverAddress": "https://sponsor.ajay.app",
     "testingServerAddress": "https://sponsor.ajay.app/test",
     "serverAddressComment": "This specifies the default SponsorBlock server to connect to",
-    "categoryList": ["sponsor", "selfpromo", "exclusive_access", "interaction", "poi_highlight", "intro", "outro", "preview", "filler", "chapter", "music_offtopic"],
+    "categoryList": ["sponsor", "selfpromo", "exclusive_access", "interaction", "poi_highlight", "intro", "outro", "preview", "hook", "filler", "chapter", "music_offtopic"],
     "categorySupport": {
         "sponsor": ["skip", "mute", "full"],
         "selfpromo": ["skip", "mute", "full"],
@@ -11,6 +11,7 @@
         "intro": ["skip", "mute"],
         "outro": ["skip", "mute"],
         "preview": ["skip", "mute"],
+        "hook": ["skip", "mute"],
         "filler": ["skip", "mute"],
         "music_offtopic": ["skip"],
         "poi_highlight": ["poi"],
@@ -24,6 +25,7 @@
         "intro": "https://wiki.sponsor.ajay.app/w/Intermission/Intro_Animation",
         "outro": "https://wiki.sponsor.ajay.app/w/Endcards/Credits",
         "preview": "https://wiki.sponsor.ajay.app/w/Preview/Recap",
+        "hook": "https://wiki.sponsor.ajay.app/w/Hook/Greetings",
         "filler": "https://wiki.sponsor.ajay.app/w/Tangents/Jokes",
         "music_offtopic": "https://wiki.sponsor.ajay.app/w/Music:_Non-Music_Section",
         "poi_highlight": "https://wiki.sponsor.ajay.app/w/Highlight",

manifest/chrome-manifest-extra.json

@@ -53,6 +53,8 @@
       "icons/PlayerInfoIconSponsorBlocker.svg",
       "icons/PlayerDeleteIconSponsorBlocker.svg",
       "icons/dearrow.svg",
+      "icons/sb-pride.png",
+      "icons/pride.svg",
       "popup.html",
       "popup.css",
       "content.css",

manifest/manifest-v2-extra.json

@@ -45,6 +45,8 @@
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
         "icons/dearrow.svg",
+        "icons/sb-pride.png",
+        "icons/pride.svg",
         "popup.html",
         "popup.css",
         "content.css",

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.11.3",
+    "version": "6.1.0",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",
@@ -16,7 +16,8 @@
     },
     "permissions": [
         "storage",
-        "scripting"
+        "scripting",
+        "unlimitedStorage"
     ],
     "options_ui": {
         "page": "options/options.html",

package.json

@@ -23,7 +23,7 @@
     "@types/wicg-mediasession": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "chromedriver": "^110.0.0",
+    "chromedriver": "^140.0.0",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.35.0",
@@ -38,7 +38,7 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "4.9",
-    "web-ext": "^8.2.0",
+    "web-ext": "^8.10.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"

public/content.css

@@ -25,12 +25,21 @@
 	pointer-events: none;
 
 	height: 100%;
-	transform: scaleY(0.6) translateY(-30%) translateY(1.5px);
+	transform: scaleY(0.667) translateY(-30%) translateY(1.5px);
 	z-index: 42;
 
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
+/* Prevent bar from covering highlights on YTTV */
+#previewbar.sponsorblock-yttv-container  {
+	z-index: unset;
+}
+
+ytu-time-bar.ytu-storyboard {
+	text-align: center;
+}
+
 /* May 2024 hover preview */
 .YtPlayerProgressBarProgressBar #previewbar {
 	transform: none;
@@ -67,6 +76,11 @@ div:hover > #previewbar.sbNotInvidious {
 	min-width: 1px;
 }
 
+.previewbar-yttv {
+	height: 10px;
+	top: 14px;
+}
+
 .previewbar.requiredSegment {
 	transform: scaleY(3);
 }
@@ -88,19 +102,27 @@ div:hover > #previewbar.sbNotInvidious {
 	display: none !important;
 }
 
-.ytp-tooltip.sponsorCategoryTooltipVisible:not(.sponsorTooltipHasYTChapters) {
-	transform: translateY(-1em) !important;
-}
-
 /* Pull up for precise seeking */
 .ytp-tooltip.sponsorCategoryTooltipVisible .ytp-tooltip-edu {
 	transform: translateY(-1em) !important;
 }
 
+.ytp-tooltip.sponsorCategoryTooltipVisible {
+	transform: translateY(-1em) !important;
+}
+
 .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips {
 	transform: translateY(-2em) !important;
 }
 
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorHasOriginalTooltip {
+	transform: translateY(-2em) !important;
+}
+
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips.sponsorHasOriginalTooltip {
+	transform: translateY(-3em) !important;
+}
+
 .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible {
 	transform: translateY(-2em) !important;
 }
@@ -127,17 +149,17 @@ div:hover > #previewbar.sbNotInvidious {
 }
 
 .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips > .ytp-tooltip-text-wrapper {
-	transform: translateY(1em) !important;
+	transform: translateY(1.75em) !important;
 }
 
-.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible > .ytp-tooltip-text-wrapper > .ytp-tooltip-text {
-	display: block !important;
-	transform: translateY(1em) !important;
+.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible > .ytp-tooltip-text-wrapper .ytp-tooltip-text {
+	display: inline-block !important;
+	transform: translateY(0.75em) !important;
 }
 
-.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips > .ytp-tooltip-text-wrapper > .ytp-tooltip-text {
-	display: block !important;
-	transform: translateY(2em) !important;
+.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips > .ytp-tooltip-text-wrapper .ytp-tooltip-text {
+	display: inline-block !important;
+	transform: translateY(0.75em) !important;
 }
 
 div:hover > .sponsorBlockChapterBar {
@@ -166,6 +188,10 @@ div:hover > .sponsorBlockChapterBar {
 	margin: auto;
 }
 
+.sbChapterVoteButton {
+	padding: 0 !important;
+}
+
 .playerButton {
 	vertical-align: top;
 }
@@ -184,6 +210,16 @@ div:hover > .sponsorBlockChapterBar {
 	padding-right: 3.6px;
 }
 
+.sbButtonYTTV {
+	padding-left: 5px !important;
+}
+
+/* YTTV only */
+.ytu-player-controls > .skipButtonControlBarContainer > div {
+	padding-left: 5px;
+	align-content: center;
+}
+
 .autoHiding {
 	overflow: visible !important;
 }
@@ -655,6 +691,14 @@ input::-webkit-inner-spin-button {
 	color: white;
 }
 
+.hideSegmentSubmitButton {
+	cursor: pointer;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	position: absolute;
+}
+
 /* Start SelectorComponent */
 
 .sbSelector {
@@ -712,6 +756,13 @@ input::-webkit-inner-spin-button {
 	cursor: pointer;
 	display: flex;
     color: white;
+	align-items: center;
+}
+
+/* July 2025 test UI */
+.ytp-delhi-modern .skipButtonControlBarContainer {
+    height: 48px;
+    margin: auto 0;
 }
 
 .skipButtonControlBarContainer.sbhidden {
@@ -921,5 +972,27 @@ input::-webkit-inner-spin-button {
 }
 
 .sponsorblock-chapter-visible {
-	display: inherit !important;
+	display: block !important;
+}
+
+/* Pride theme */
+
+.playerButton.prideTheme:nth-of-type(1) {
+	filter: brightness(50%) sepia(100) saturate(100);
+}
+
+.playerButton.prideTheme:nth-of-type(2) {
+	filter: sepia(100) saturate(100) hue-rotate(0deg);
+}
+
+.playerButton.prideTheme:nth-of-type(3) {
+	filter: sepia(100) saturate(100) hue-rotate(45deg);
+}
+
+.playerButton.prideTheme:nth-of-type(4) {
+	filter: sepia(100) saturate(100) invert() hue-rotate(5deg);
+}
+
+.playerButton.prideTheme:nth-of-type(5) {
+	filter: sepia(100) saturate(100) invert() hue-rotate(35deg);
 }

public/help/index.html

@@ -21,128 +21,128 @@
   <div class="container sponsorBlockPageBody">
 
     <p class="createdBy">
-      <img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/>
+      <img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/>
       Created By <a href="https://ajay.app">Ajay Ramachandran</a> 
-      <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(Donate)</a>
     </p>
 
-    <p>
-        __MSG_helpPageThanksForInstalling__ By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a> and <a href="https://gist.github.com/ajayyy/9e8100f069348e0bc062641f34d6af12">Terms of Use</a>.
-    </p>
-
-    <p>
-	      Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
-    </p>
-
-    <a href="https://dearrow.ajay.app"
-        target="_blank"
-        id="dearrow-link"
-        class="dearrow-link hidden"
-        rel="noreferrer">
-        <img src="/icons/dearrow.svg"/>
-
-        <span id="dearrow-link-text">
-          
-        </span>
-
-        <img src="/icons/close.png" class="close-button"/>
-    </a>
-
-    <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
-
-    <p class="smallText">
-      __MSG_helpPageFeatureDisclaimer__
-    </p>
-
-    <iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
-
-    <h1>__MSG_helpPageHowSkippingWorks__</h1>
-
-    <p class="projectPreview">
-      <span class="projectPreviewImageLarge">
-          <img src="images/popup.png">
-      </span>
-
-      __MSG_helpPageHowSkippingWorks1__
+    <span class="help-page-flex-container">
+      <div class="left-sidebar">
+        <div class="box1">
+          <p>
+              __MSG_helpPageThanksForInstalling__ By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a> and <a href="https://gist.github.com/ajayyy/9e8100f069348e0bc062641f34d6af12">Terms of Use</a>.
+          </p>
       
-      <br/>
-      <br/>
-
-      __MSG_helpPageHowSkippingWorks2__
-    </p>
-
-    <div class="center"><img src="images/voting on notice.gif"></div>
-
-    <h1>__MSG_Submitting__</h1>
-
-    <p class="projectPreview">
-        <img class="projectPreviewImageLarge" src="https://i.imgur.com/A1ilk6x.gif">
-  
-        __MSG_helpPageSubmitting1__
-        
-        <br/>
-        <br/>
-
-        __MSG_helpPageSubmitting2__
-    </p>
-
-    <h1>__MSG_Editing__</h1>
-
-    <p class="projectPreview">
-        <span class="projectPreviewImageLarge">
-            <img src="https://wiki.sponsor.ajay.app/images/6/6a/Popup_only.png">
-        </span>
-  
-        __MSG_helpPageEditing1__
-
-    </p>
-
-    <h1>__MSG_helpPageTooSlow__</h1>
-
-    <p>
-      __MSG_helpPageTooSlow1__
-    </p>
-
-    <h1>__MSG_helpPageCopyOfDatabase__</h1>
-
-    <p>
-      __MSG_helpPageCopyOfDatabase1__ <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. __MSG_helpPageCopyOfDatabase2__
-    </p>
-
-    <h1>__MSG_helpPageNews__</h1>
-
-    <p>
-      See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
-    </p>
-
-    <h1>__MSG_helpPageSourceCode__</h1>
-
-    <h4 style="display: inline">Client:</h4>
-    <!-- Github logo -->
-    <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
-
-    <h4 style="display: inline; padding-left: 20px">Server:</h4>
-    <!-- Github logo -->
-    <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
-
-    <h1>__MSG_Credits__</h1>
-
-    <p>
-      Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,
-      <a href="https://github.com/ajayyy/SponsorBlockServer/graphs/contributors">SponsorBlockServer contributors</a> and
-      <a href="https://github.com/ajayyy/SponsorBlockSite/graphs/contributors">SponsorBlockSite contributors</a> such 
-      as <a href="https://github.com/NDevTK">NDev</a>, <a href="https://github.com/Joe-Dowd">Joe Dowd</a>,
-      <a href="https://mchang.name/">Michael Chang</a> and more.
-    </p>
-
-    <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
-
-    <p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+          <p>
+              Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
+          </p>
+      
+          <a href="https://dearrow.ajay.app"
+              target="_blank"
+              id="dearrow-link"
+              class="dearrow-link hidden"
+              rel="noreferrer">
+              <img src="/icons/dearrow.svg"/>
+      
+              <span id="dearrow-link-text">
+                
+              </span>
+      
+              <img src="/icons/close.png" class="close-button"/>
+          </a>
+      
+          <div id="donate-component" class="donate-ask">
+              <div class="donate-text">
+                  <img
+                      src="../icons/newprofilepic.jpg"
+                      alt="Ajay's avatar"
+                  ></img>
+                  __MSG_supportSponsorBlock__
+              </div>
+      
+              <a href="https://sponsor.ajay.app/donate" class="donate-button" target="_blank" rel="noopener">
+                  __MSG_Donate__
+              </a>
+          </div>
+        </div>
+        <div class="box3">
+          <h1>__MSG_helpPageHowSkippingWorks__</h1>
     
-    <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+          <p class="projectPreview">
+            __MSG_helpPageHowSkippingWorks2__
+          </p>
 
-    <p style="text-align: center;"><a href="/oss-attribution/attribution.txt">Open Source Licenses</a></p>
+          <div class="center"><img src="images/notice.png"></div>
+            
+          <p class="projectPreview">
+            __MSG_helpPageHowSkippingWorks1__
+          </p>
+          
+          <div class="center"><img style="height: 400px;" src="images/popup.png"></div>
 
-  </div>
+          <h1>__MSG_Submitting__</h1>
+    
+          <p class="projectPreview">
+              __MSG_helpPageSubmitting1__
+          </p>
 
+          <div class="center"><img src="images/votebuttons.gif"></div>
+
+          <p class="projectPreview">
+              __MSG_helpPageSubmitting2__
+          </p>
+
+          <div class="center"><img src="images/submission menu.png"></div>
+
+          <p class="projectPreview center">
+            <a href="https://wiki.sponsor.ajay.app/w/Guidelines" target="_blank">__MSG_guidelines__</a>
+            <br/>
+            <a href="https://wiki.sponsor.ajay.app/w/Advice_for_submitting" target="_blank">__MSG_AdviceForSubmitting__</a>
+          </p>
+
+          <h1>__MSG_helpPageCopyOfDatabase__</h1>
+    
+          <p>
+            __MSG_helpPageCopyOfDatabase1__ <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. __MSG_helpPageCopyOfDatabase2__
+          </p>
+    
+          <h4 style="display: inline">Client:</h4>
+          <!-- Github logo -->
+          <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+    
+          <h4 style="display: inline; padding-left: 20px">Server:</h4>
+          <!-- Github logo -->
+          <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+    
+          <h1>__MSG_Credits__</h1>
+    
+          <p>
+            Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,
+            <a href="https://github.com/ajayyy/SponsorBlockServer/graphs/contributors">SponsorBlockServer contributors</a> and
+            <a href="https://github.com/ajayyy/SponsorBlockSite/graphs/contributors">SponsorBlockSite contributors</a> such 
+            as <a href="https://github.com/NDevTK">NDev</a>, <a href="https://github.com/Joe-Dowd">Joe Dowd</a>,
+            <a href="https://mchang.name/">Michael Chang</a> and more.
+          </p>
+
+          <p>
+            Logo by <a href="https://github.com/munadikieh">Munadi Kiehl</a>
+          </p>
+    
+          <p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+          
+          <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+    
+          <p style="text-align: center;"><a href="/oss-attribution/attribution.txt">Open Source Licenses</a></p>
+        </div>
+      </div>
+    
+      <div class="box2">
+        <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
+    
+        <p class="smallText" style="margin-bottom: 0; margin-top: 0">
+          __MSG_helpPageFeatureDisclaimer__
+        </p>
+    
+        <iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
+      </div>
+    </span>
 </body>

public/help/styles.css

@@ -29,7 +29,11 @@ html {
 }
 
 .bigText {
-  font-size: 50px;
+  font-size: 30px;
+}
+
+.smallText {
+  font-size: 14px;
 }
 
 body {
@@ -46,7 +50,6 @@ body {
 }
 
 .container {
-  max-width: 60%;
   margin: auto;
 }
 
@@ -168,7 +171,7 @@ p,li,code,a {
 
 .optionsFrame {
   width: 100%;
-  height: 500px;
+  height: 100%;
 }
 
 .previewImage {
@@ -194,14 +197,59 @@ img {
 h1,h2,h3,h4,h5,h6 {
   color: var(--title);
   text-align: center;
+
+  font-size: 25px;
+  margin: 5px 0px;
 }
 
 svg {
  text-decoration: none; 
 }
 
-#sbDonate {
-  font-size: 10px;
+.donate-ask {
+  background-color: rgb(26, 26, 26, 0.95);
+  border-radius: 15px;
+
+  text-align: center;
+  padding: 10px;
+
+  margin: 0.7em 0px;
+}
+
+.donate-ask .donate-text {
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.donate-ask .donate-text img {
+  height: 2rem;
+  border-radius: 100%;
+
+  margin-right: 15px;
+}
+
+.donate-ask a {
+  text-decoration: none;
+  color: #eee;
+  border-radius: 15px;
+  background-color: rgb(58, 58, 58, 0.9);
+  padding: 10px;
+
+  transition: background-color 0.3s ease;
+
+  display: block;
+  width: fit-content;
+  margin: auto;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.donate-ask a:hover {
+  background-color: rgba(70, 70, 70, 0.9);
 }
 
 @media screen and (orientation:portrait) {
@@ -351,4 +399,50 @@ svg {
 
 .hidden {
   display: none;
+}
+
+.help-page-flex-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.left-sidebar {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 1 50%;
+}
+
+.box2 {
+  flex: 1 1 50%;
+}
+
+/* Mobile */
+@media only screen and (max-width: 600px) {
+  .box1 {
+    order: 1;
+  }
+
+  .box2 {
+    order: 2;
+  }
+
+  .box3 {
+    order: 3;
+  }
+
+  .left-sidebar {
+    display: contents;
+  }
+
+  .help-page-flex-container {
+    flex-direction: column;
+  }
+
+  .optionsFrame {
+    height: 500px;
+  }
 }

public/icons/loop.svg

@@ -0,0 +1,4 @@
+<svg width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 4-8 7h2s1-5 6-5c1.66 0 3.14.69 4.22 1.78L14 10h6V4l-2.35 2.35z"/>
+  <path d="M5.85 17.65C7.3 19.1 9.29 20 11.5 20c4.42 0 8-4 8-7h-2s-1 5-6 5c-1.66 0-3.14-.69-4.22-1.78L9.5 14h-6v6z"/>
+</svg>

public/icons/looped.svg

@@ -0,0 +1,4 @@
+<svg width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#80fff6">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 4-8 7h2s1-5 6-5c1.66 0 3.14.69 4.22 1.78L14 10h6V4l-2.35 2.35z"/>
+  <path d="M5.85 17.65C7.3 19.1 9.29 20 11.5 20c4.42 0 8-4 8-7h-2s-1 5-6 5c-1.66 0-3.14-.69-4.22-1.78L9.5 14h-6v6z"/>
+</svg>

public/icons/pride.svg

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 11718.75 3810"
+   width="1000"
+   height="325"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="pride.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs11" />
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.42575964"
+     inkscape:cx="863.16308"
+     inkscape:cy="32.882403"
+     inkscape:window-width="1536"
+     inkscape:window-height="799"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <path
+     fill="#750787"
+     d="M 0,0 H 15033.943 V 3810 H 0 Z"
+     id="path1"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#004dff"
+     d="M 0,0 H 15033.943 V 3175 H 0 Z"
+     id="path2"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#008026"
+     d="M 0,0 H 15033.943 V 2540 H 0 Z"
+     id="path3"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#ffed00"
+     d="M 0,0 H 15033.943 V 1905 H 0 Z"
+     id="path4"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#ff8c00"
+     d="M 0,0 H 15033.943 V 1270 H 0 Z"
+     id="path5"
+     style="stroke-width:1.58293" />
+  <path
+     fill="#e40303"
+     d="M 0,0 H 15033.943 V 635 H 0 Z"
+     id="path6"
+     style="stroke-width:1.58293" />
+  <path
+     d="M 0,-960.5 2864,1905 0,4770.5 Z"
+     id="path7" />
+  <path
+     fill="#613915"
+     d="M 0,-480 2384,1905 0,4290 Z"
+     id="path8" />
+  <path
+     fill="#74d7ee"
+     d="M 0,3810 V 0 l 1912,1905 z"
+     id="path9" />
+  <path
+     fill="#ffafc8"
+     d="M 0,3330 V 480 l 1420,1425 z"
+     id="path10" />
+  <path
+     fill="#ffffff"
+     d="M 0,960 951,1905 0,2850 Z"
+     id="path11" />
+  <rect
+     style="fill:#000000;fill-opacity:0.621027;stroke:#550000;stroke-width:42.5545"
+     id="rect11"
+     width="12283.648"
+     height="4656.5938"
+     x="-243.66638"
+     y="-421.53296" />
+</svg>

public/options/options.css

@@ -17,6 +17,10 @@
     --border-color: #484848;
     --black: black;
     --white: white;
+
+    --selector-red: #c00000;
+    --selector-red-hover: #fc0303;
+    --tab-selected: #950000;
 }
 
 [data-theme="light"] {
@@ -38,6 +42,10 @@
     --white: black;
 }
 
+[data-theme="pride"] {
+    --menu-background: #181818d0;
+}
+
 .medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
     color: var(--white);
 }
@@ -58,6 +66,12 @@ html, body {
     background-color: var(--background);
 }
 
+[data-theme="pride"] body {
+    background: url("../icons/pride.svg");
+    background-size: contain;
+}
+
+
 * {
     box-sizing: border-box;
 }
@@ -107,23 +121,119 @@ html, body {
 }
 
 .tab-heading.selected {
-    background-color: #c00000;
+    background-color: var(--selector-red);
     color: white;
 }
 
 .tab-heading:active {
-    background-color: #950000;
+    background-color: var(--tab-selected);
     color: white;
 }
 
-.option-group > div {
-    min-height: 50px;
-    padding: 15px 0;
-    border-bottom: 1px solid var(--border-color);
-    border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
+[data-theme="pride"] .tab-heading:nth-of-type(1) {
+    background-color: #2f0000;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(2) {
+    background-color: #3a2000;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(3) {
+    background-color: #3e3a00;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(4) {
+    background-color: #003e13;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(5) {
+    background-color: #00164a;
 }
 
-.categoryExtraOptions {
+[data-theme="pride"] .tab-heading:hover:nth-of-type(1) {
+    background-color: #550000;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(2),
+[data-theme="pride"] #category-type tr:nth-of-type(5n) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n) .slider {
+    background-color: #824700;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(3),
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 1) .slider {
+    background-color: #867d00;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(4),
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 2) .slider {
+    background-color: #00691f;
+}
+[data-theme="pride"] .tab-heading:hover:nth-of-type(5),
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 3) .slider {
+    background-color: #002374;
+}
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) .slider,
+[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 4) .slider {
+    background-color: #400449;
+}
+
+[data-theme="pride"] #category-type tr .optionsSelector {
+    color: var(--white);
+}
+[data-theme="pride"] .tab-heading:nth-of-type(1).selected {
+    background-color: #E40303;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(2).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 2) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #dd7a00;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(3).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 4) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(2n + 1) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 1) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #FFED00;
+    color: rgb(23, 23, 23);
+}
+[data-theme="pride"] .tab-heading:nth-of-type(4).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 6) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 2) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #008026;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 8) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 3) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #004DFF;
+}
+[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
+[data-theme="pride"] #category-type tr:nth-of-type(10n + 10) .optionsSelector,
+[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) input:checked + .slider,
+[data-theme="pride"] [data-type]:nth-of-type(5n + 4) :is(input:checked + .slider, .option-button, .optionsSelector) {
+    background-color: #750787;
+}
+
+
+.option-group > div, .extraOptionGroup {
+    min-height: 50px;
+    padding: 15px 0;
+    border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
+}
+.option-group > div {
+    border-bottom: 1px solid var(--border-color);
+}
+.extraOptionGroup {
+    border-top: 1px solid var(--border-color);
+}
+.extraOptionGroup tr:not(:last-child) {
+    padding-bottom: 15px;
+    display: block;
+}
+#category-type {
+    padding: 0;
+}
+
+#category-type .categoryExtraOptions {
     padding-bottom: 15px;
 }
 
@@ -298,7 +408,7 @@ input[type='number'] {
 .option-button {
     cursor: pointer;
 
-    background-color: #c00000;
+    background-color: var(--selector-red);
     padding: 10px;
     color: white;
     border-radius: 5px;
@@ -308,7 +418,7 @@ input[type='number'] {
 }
 
 .option-button:hover:not(.disabled) {
-    background-color: #fc0303;
+    background-color: var(--selector-red-hover);
 }
 
 .option-button.disabled {
@@ -364,6 +474,11 @@ input[type='number'] {
     padding: 4px;
 }
 
+.sb-number-input {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
 .switch-label {
     width: inherit;
 }
@@ -413,7 +528,7 @@ input[type='number'] {
 }
 
 input:checked + .slider {
-    background-color: #fc0303;
+    background-color: var(--selector-red-hover);
 }
 
 input:checked + .slider:before {
@@ -594,7 +709,7 @@ svg {
 }
 
 .optionsSelector {
-    background-color: #c00000;
+    background-color: var(--selector-red);
     color: white;
     
     border: none;
@@ -731,4 +846,53 @@ svg {
   
 .dearrow-link:hover .close-button {
     opacity: 1;
+}
+
+.invalid-advanced-config {
+    color: red;
+}
+
+.advanced-skip-options-menu {
+    margin-top: 10px;
+}
+
+.advanced-config-help-message {
+    margin-bottom: 10px;
+    transition: none;
+}
+
+.categoryChooserTopRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin-bottom: 10px;
+}
+
+.partiallyHidden {
+    opacity: 0.5;
+}
+
+.partiallyHidden:hover {
+    opacity: 1;
+}
+
+.reset-button svg {
+    margin-left: 5px;
+    width: 10px;
+    fill: var(--white);
+
+    cursor: pointer;
+}
+
+.skipProfileMenu {
+    position: absolute;
+}
+
+.configurationInfo > *:not(:last-child) {
+    margin-bottom: 10px;
+}
+
+.configurationInfo .option-text-box {
+    width: 100%;
 }

public/options/options.html

@@ -19,7 +19,7 @@
 		<div id="menubar" class="center">
 
 			<div id="title" class="titleBar">
-				<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
+				<img id="title-bar-logo" src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
 				SponsorBlock
 				<div id="version"></div>
 			</div>
@@ -80,67 +80,9 @@
                     </a>
 				</div>
 
-				<div data-type="toggle" data-sync="muteSegments">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="muteSegments" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="muteSegments">
-							__MSG_muteSegments__
-						</label>
-					</div>
-				</div>
-				
-				<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="fullVideoSegments" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="fullVideoSegments">
-							__MSG_fullVideoSegments__
-						</label>
-					</div>
-				</div>
+				<div data-type="react-AdvancedSkipOptionsComponent" class="hide-when-skip-profile"></div>
 
-				<div data-type="toggle" data-sync="fullVideoLabelsOnThumbnails" 
-						data-dependent-on="fullVideoSegments">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="fullVideoLabelsOnThumbnails" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="fullVideoLabelsOnThumbnails">
-							__MSG_fullVideoLabelsOnThumbnails__
-						</label>
-					</div>
-				</div>
-
-				<div data-type="number-change" data-sync="minDuration">
-					<label class="number-container">
-						<span class="optionLabel">__MSG_minDuration__</span>
-						<input type="number" step="0.1" min="0">
-					</label>
-	
-					<div class="small-description">__MSG_minDurationDescription__</div>
-				</div>
-				
-				<div data-type="toggle" data-sync="manualSkipOnFullVideo">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="manualSkipOnFullVideo" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="manualSkipOnFullVideo">
-							__MSG_enableManualSkipOnFullVideo__
-						</label>
-					</div>
-	
-					<div class="small-description">__MSG_whatManualSkipOnFullVideo__</div>
-				</div>
-
-				<div data-type="toggle" data-sync="forceChannelCheck">
+				<div data-type="toggle" data-sync="forceChannelCheck" class="hide-when-skip-profile">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="forceChannelCheck" type="checkbox" checked>
@@ -154,7 +96,7 @@
 					<div class="small-description">__MSG_whatForceChannelCheck__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="showCategoryWithoutPermission">
+				<div data-type="toggle" data-sync="showCategoryWithoutPermission" class="hide-when-skip-profile">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="showCategoryWithoutPermission" type="checkbox" checked>
@@ -363,15 +305,42 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="cleanPopup" data-no-safari="true">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="cleanPopup" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="cleanPopup">
-							__MSG_cleanPopup__
-						</label>
+				<div>
+					<div data-type="toggle" data-sync="cleanPopup">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="cleanPopup" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="cleanPopup">
+								__MSG_cleanPopup__
+							</label>
+						</div>
+					</div>
+
+					<br/>
+
+					<div data-type="toggle" data-sync="hideSegmentCreationInPopup">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="hideSegmentCreationInPopup" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="hideSegmentCreationInPopup">
+								__MSG_hideSegmentCreationInPopup__
+							</label>
+						</div>
+					</div>
+
+					<br />
+
+					<div data-type="selector" data-sync="segmentListDefaultTab">
+						<label class="optionLabel" for="segmentListDefaultTab">__MSG_segmentListDefaultTab__:</label>
+
+						<select id="segmentListDefaultTab" class="selector-element optionsSelector">
+							<option value="0">__MSG_SegmentsCap__</option>
+							<option value="1">__MSG_Chapters__</option>
+						</select>
 					</div>
 				</div>
 
@@ -387,6 +356,18 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-sync="prideTheme">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="prideTheme" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="prideTheme">
+							__MSG_prideTheme__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
 					<div class="switch-container">
 						<label class="switch">
@@ -472,6 +453,16 @@
 					<div class="inline"></div>
 				</div>
 
+				<div data-type="keybind-change" data-sync="upvoteKeybind">	
+					<label class="optionLabel">__MSG_setUpvoteKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="downvoteKeybind">	
+					<label class="optionLabel">__MSG_setDownvoteKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+				
 			</div>
 
 			<div id="import" class="option-group hidden">
@@ -556,7 +547,7 @@
 
 			<div id="advanced" class="option-group hidden">
 
-				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious">
+				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="supportInvidious" type="checkbox">
@@ -571,7 +562,7 @@
 					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
 				</div>
 	
-				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious">
+				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious" data-no-safari="true">
 					<div class="option-button trigger-button">
 						__MSG_addInvidiousInstance__
 					</div>

public/popup.css

@@ -3,8 +3,29 @@
   --sb-main-bg-color: #222;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
+  --sb-grey-bg-active-color: #444;
   --sb-grey-fg-color: #999;
   --sb-red-bg-color: #cc1717;
+  --sb-red-bg-active-color: #ec1c1c;
+  --sb-skip-profile-bg: #292828;
+  --sb-skip-profile-disabled: #808080;
+  --sb-skip-profile-option-bg: #222;
+  --sb-skip-profile-highlighted: rgb(127, 0, 0);
+}
+
+.prideTheme {
+  --sb-main-fg-color: #fff;
+  --sb-grey-bg-color: #008026;
+  --sb-grey-bg-active-color: #FF8C00;
+  --sb-grey-fg-color: #FFED00;
+  --sb-red-bg-color: #732982;
+  --sb-red-bg-active-color: #004CFF;
+  --sb-skip-profile-bg: #FFAFC8;
+  --sb-skip-profile-disabled: #74D7EE;
+  --sb-skip-profile-option-bg: #f687aa;
+  --sb-skip-profile-highlighted: #38153f;
+
+  background: url("icons/pride.svg");
 }
 
 /*
@@ -197,9 +218,7 @@
  * <details> wrapper around each segment
  */
 .votingButtons {
-  font-family: Arial, Helvetica, sans-serif;
   border-radius: 8px;
-  margin: 4px 16px;
 }
 .votingButtons[open] {
   padding-bottom: 5px;
@@ -208,6 +227,29 @@
   background-color: var(--sb-grey-bg-color);
 }
 
+/*
+ * Nested chapters
+ */ 
+.innerChapterList {
+  border-radius: 8px;
+}
+
+.innerChapterList > summary {
+  font-weight: bold;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.segmentWrapper:has(> .innerChapterList > summary:hover) {
+  background-color: var(--sb-grey-bg-color);
+}
+
+.segmentWrapper{
+  font-family: Arial, Helvetica, sans-serif;
+  border-radius: 8px;
+  margin: 4px 16px;
+}
+
 /*
  * Individual segments summaries (clickable <summary>)
  */
@@ -277,8 +319,10 @@
   border-radius: 8px;
   background-color: var(--sb-grey-bg-color);
   justify-content: space-evenly;
-  overflow: hidden;
   display: flex;
+  position: relative;
+
+  z-index: 1;
 }
 .sbControlsMenu-item {
   display: flex;
@@ -293,13 +337,29 @@
   padding: 10px 15px;
   transition: background-color 0.2s ease-in-out;
 }
-.sbControlsMenu-item:hover {
-  background-color: #444;
+.sbControlsMenu-item:first-child {
+  border-radius: 8px 0px 0px 8px;
+}
+.sbControlsMenu-item:last-child {
+  border-radius: 0px 8px 8px 0px;
+}
+.sbControlsMenu-item:hover, .sbControlsMenu-item:focus {
+  background-color: var(--sb-grey-bg-active-color) !important;
 }
 .sbControlsMenu-itemIcon {
   margin-bottom: 6px;
 }
 
+.prideTheme .sbControlsMenu-item:nth-child(1) {
+  background-color: #750787;
+}
+.prideTheme .sbControlsMenu-item:nth-child(3) {
+  background-color: #0035b1;
+}
+.prideTheme .sbControlsMenu-item:nth-child(4) {
+  background-color: #008026;
+}
+
 /*
  * Whitelist add/remove icon
  */
@@ -420,7 +480,7 @@
 }
 .sbMediumButton:hover,
 .sbMediumButton:focus {
-  background-color: #ec1c1c;
+  background-color: var(--sb-red-bg-active-color);
   outline: none;
 }
 .sbMediumButton:active {
@@ -558,12 +618,42 @@
   margin: 2px 1px;
 }
 #sbFooter a:hover {
-  background-color: #444;
+  background-color: var(--sb-grey-bg-active-color) !important;
+}
+
+.prideTheme #sbFooter a:nth-of-type(1) {
+  background-color: #E40303;
+}
+.prideTheme #sbFooter a:nth-of-type(2) {
+  background-color: #FF8C00;
+}
+.prideTheme #sbFooter a:nth-of-type(3) {
+  background-color: #b9ad00;
+}
+.prideTheme #sbFooter a:nth-of-type(4) {
+  background-color: #008026;
+}
+.prideTheme #sbFooter a:nth-of-type(5) {
+  background-color: #004DFF;
+}
+.prideTheme #sbFooter a:nth-of-type(6) {
+  background-color: #750787;
+}
+.prideTheme #sbFooter a:nth-of-type(7) {
+  background-color: #c7899d;
+}
+.prideTheme #sbFooter a:nth-of-type(8) {
+  background-color: #65b8cb;
+}
+.prideTheme #sbFooter a:nth-of-type(9) {
+  background-color: #613915;
 }
 
 #sponsorTimesDonateContainer a {
   color: var(--sb-main-fg-color);
   text-decoration: none;
+
+  padding-left: 5px;
 }
 
 /*
@@ -582,6 +672,10 @@
   margin: 0 !important;
 }
 
+#sponsorBlockPopupBody .u-mZ.cleanPopupMargin {
+  margin-top: 10px !important;
+}
+
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
@@ -618,4 +712,67 @@
 
 #issueReporterTabs > span.sbSelected > span::after {
   transform: scaleX(0.8);
+}
+
+.sbPopupButton {
+  width: 16px;
+  fill: var(--sb-main-fg-color);
+}
+
+#skipProfileMenu {
+  position: absolute;
+  top: 80px;
+  left: 50%;
+
+  background-color: var(--sb-skip-profile-bg);
+  border-radius: 10px;
+  padding: 10px;
+
+  transform: translateX(-50%);
+}
+
+#skipProfileActions {
+  padding-top: 10px;
+}
+
+.skipOptionAction {
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  font-size: 14px;
+  padding: 5px;
+  margin: 5px;
+
+  background-color: var(--sb-skip-profile-option-bg);
+  border-radius: 5px;
+
+  cursor: help;
+  user-select: none;
+
+  border-color: transparent;
+  border-width: 2px;
+  border-style: solid;
+}
+.skipOptionAction:not(.highlighted, .disabled):hover {
+  background-color: var(--sb-grey-bg-color);
+}
+.skipOptionAction.selected {
+  border-color: var(--sb-red-bg-color);
+}
+.skipOptionAction.highlighted {
+  border-color: var(--sb-skip-profile-highlighted);
+}
+.skipOptionAction:not(.highlighted, .disabled) {
+  cursor: pointer;
+}
+.skipOptionAction.disabled {
+  color: var(--sb-skip-profile-disabled);
+}
+
+.optionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
 }

public/popup.html

@@ -1,209 +1,13 @@
-<!DOCTYPE html>
 <html id="sponsorBlockPopupHTML">
-  <head>
-    <meta charset="utf-8" />
-    <title>__MSG_openPopup__</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
-    <link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
-    <link id="sponsorBlockStyleSheet" href="shared.css" rel="stylesheet">
-  </head>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
-  <body id="sponsorBlockPopupBody" style="visibility: hidden">
-    <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
+        <link href="popup.css" rel="stylesheet">
+        <link href="shared.css" rel="stylesheet">
+        <script src="./js/popup.js"></script>
+    </head>
 
-      <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
-        <img src="icons/close.png" width="15" height="15" alt="Close icon">
-      </button>
+    <body id="sponsorBlockPopupBody">
 
-      <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
-        __MSG_betaServerWarning__
-      </div>
-
-      <header id="sbPopupLogo" class="sbPopupLogo">
-        <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
-        <p class="u-mZ">SponsorBlock</p>
-      </header>
-
-      <div id="videoInfo">
-        <!-- Loading text -->
-        <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
-        <!-- If the video was found in the database -->
-        <p id="videoFound" class="u-mZ grey-text"></p>
-        <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
-          <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
-        </button>
-        <!-- Video Segments -->
-        <div id="issueReporterContainer">
-          <div id="issueReporterTabs" class="hidden">
-            <span id="issueReporterTabSegments" class="sbSelected">
-              <span>__MSG_SegmentsCap__</span>
-            </span>
-            <span id="issueReporterTabChapters">
-              <span>__MSG_Chapters__</span>
-            </span>
-          </div>
-          <div id="issueReporterTimeButtons"></div>
-          <div id="issueReporterImportExport" class="hidden">
-            <div id="importExportButtons">
-              <button id="importSegmentsButton" title="__MSG_importSegments__">
-                <img src="/icons/import.svg" alt="Refresh icon" id="importSegments" />
-              </button>
-              <button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
-                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
-              </button>
-            </div>
-
-            <span id="importSegmentsMenu" class="hidden">
-              <textarea id="importSegmentsText" rows="5" style="width:80%"></textarea>
-
-              <button id="importSegmentsSubmit" title="__MSG_importSegments__">
-                __MSG_Import__
-              </button>
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Toggle Box -->
-      <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
-          <input type="checkbox" style="display: none" id="whitelistToggle">
-          <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
-            <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
-          </svg>
-          <span id="whitelistChannel">__MSG_whitelistChannel__</span>
-          <span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
-        </label>
-        <!--github: mbledkowski/toggle-switch-->
-        <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
-          <span class="toggleSwitchContainer-switch">
-            <input type="checkbox" style="display: none" id="toggleSwitch" checked>
-            <span class="switchBg shadow"></span>
-            <span class="switchBg white"></span>
-            <span class="switchBg green"></span>
-            <span class="switchDot"></span>
-          </span>
-          <span id="disableSkipping">__MSG_disableSkipping__</span>
-          <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
-        </label>
-        <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
-          <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
-          __MSG_Options__
-        </button>
-      </div>
-
-      <a id="whitelistForceCheck" class="hidden">
-        __MSG_forceChannelCheckPopup__
-      </a>
-
-      <!-- Submit box -->
-      <div id="mainControls" style="display: none">
-        <h1 class="sbHeader">
-          __MSG_recordTimesDescription__
-        </h1>
-        <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
-        <div style="text-align: center; margin: 8px 0;">
-          <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
-          <button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_OpenSubmissionMenu__</button>
-        </div>
-        <span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
-      </div>
-
-      <!-- Your Work box -->
-      <div id="sbYourWorkBox" class="sbYourWorkBox">
-        <h1 class="sbHeader" style="padding: 8px 15px;">
-          __MSG_yourWork__
-        </h1>
-        <div class="sbYourWorkCols">
-          <!-- Username -->
-          <div id="usernameElement">
-            <p class="u-mZ grey-text">__MSG_Username__:
-              <!-- loading/errors -->
-              <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
-            </p>
-            <div id="setUsernameContainer">
-              <p id="usernameValue"></p>
-              <button id="setUsernameButton" title="__MSG_setUsername__">
-                <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
-              </button>
-              <button id="copyUserID" title="__MSG_copyPublicID__">
-                <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
-              </button>
-            </div>
-            <div id="setUsername" style="display: none">
-              <input id="usernameInput" placeholder="Username">
-              <button id="submitUsername">
-                <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
-              </button>
-            </div>
-          </div>
-          <!-- Submissions -->
-          <div id="sponsorTimesContributionsContainer" class="hidden">
-            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
-            <p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
-          </div>
-        </div>
-
-        <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_savedPeopleFrom__
-          <b>
-            <span id="sponsorTimesViewsDisplay">0</span>
-          </b>
-          <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-          <br />
-          <span class="sbExtraInfo">
-            (
-            <b>
-              <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-              <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
-            </b>
-            <span>__MSG_youHaveSavedTimeEnd__</span>
-            )
-          </span>
-        </p>
-        <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_youHaveSkipped__
-          <b>
-            <span id="sponsorTimesSkipsDoneDisplay">0</span>
-          </b>
-          <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-          <span class="sbExtraInfo">
-            (
-              <b>
-                <span id="sponsorTimeSavedDisplay">0</span>
-                <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
-              </b>
-            )
-          </span>
-        </p>
-      </div>
-
-      <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
-        <img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
-        <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
-          __MSG_considerDonating__
-        </a>
-        <img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
-      </div>
-
-      <footer id="sbFooter">
-        <a id="helpButton">__MSG_help__</a>
-        <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
-        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
-        <br />
-        <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
-        <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
-        <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
-        <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
-        <br />
-        <a id="debugLogs">__MSG_copyDebugLogs__</a>
-      </footer>
-
-      <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
-
-    </div>
-    <!-- Scripts that need to load after the html -->
-    <script src="./js/popup.js" async></script>
-  </body>
-</html>
+    </body>
+</html>

public/shared.css

@@ -28,6 +28,11 @@
 	min-width: 100%;
 }
 
+.sponsorSkipNoticeTableContainer.prideTheme {
+	background: url("icons/pride.svg");
+	background-size: cover;
+}
+
 .sponsorSkipNotice {
 	transition: all 0.1s ease-out;
 }

src/background.ts

@@ -3,7 +3,7 @@ import * as CompileConfig from "../config.json";
 import Config from "./config";
 import { Registration } from "./types";
 import "content-scripts-register-polyfill";
-import { sendRealRequestToCustomServer, setupBackgroundRequestProxy } from "../maze-utils/src/background-request-proxy";
+import { sendRealRequestToCustomServer, serializeOrStringify, setupBackgroundRequestProxy } from "../maze-utils/src/background-request-proxy";
 import { setupTabUpdates } from "../maze-utils/src/tab-updates";
 import { generateUserID } from "../maze-utils/src/setup";
 
@@ -13,6 +13,7 @@ import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
 import { injectUpdatedScripts } from "../maze-utils/src/cleanup";
 import { logWarn } from "./utils/logger";
 import { chromeP } from "../maze-utils/src/browserApi";
+import { getHash } from "../maze-utils/src/hash";
 const utils = new Utils({
     registerFirefoxContentScript,
     unregisterFirefoxContentScript
@@ -136,6 +137,12 @@ chrome.runtime.onInstalled.addListener(function () {
                 chrome.tabs.create({url: chrome.runtime.getURL("/permissions/index.html")});
             }
         }
+
+        getHash(Config.config!.userID!).then((userID) => {
+            if (userID == "60eed03c8644b7efa32df06977b3a4c11b62f63518e74a0e29baa1fd449cb54f") {
+                Config.config.prideTheme = true;
+            }
+        });
     }, 1500);
 
     if (!isFirefoxOrSafari()) {
@@ -227,33 +234,16 @@ async function submitVote(type: number, UUID: string, category: string, videoID:
 
     try {
         const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&videoID=" + videoID + "&userID=" + userID + typeSection);
-    
-        if (response.ok) {
-            return {
-                successType: 1,
-                responseText: await response.text()
-            };
-        } else if (response.status == 405) {
-            //duplicate vote
-            return {
-                successType: 0,
-                statusCode: response.status,
-                responseText: await response.text()
-            };
-        } else {
-            //error while connect
-            return {
-                successType: -1,
-                statusCode: response.status,
-                responseText: await response.text()
-            };
-        }
-    } catch (e) {
-        console.error(e);
+
         return {
-            successType: -1,
-            statusCode: -1,
-            responseText: ""
+            status: response.status,
+            ok: response.ok,
+            responseText: await response.text(),
+        };
+    } catch (e) {
+        console.error("Error while voting:", e);
+        return {
+            error: serializeOrStringify(e),
         };
     }
 }
@@ -263,4 +253,4 @@ async function asyncRequestToServer(type: string, address: string, data = {}) {
     const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
 
     return await (sendRealRequestToCustomServer(type, serverAddress + address, data));
-}
+}

src/components/CategoryPillComponent.tsx

@@ -8,7 +8,8 @@ import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
 import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
-import { getErrorMessage } from "../../maze-utils/src/formating";
+import { formatJSErrorMessage, getLongErrorMessage } from "../../maze-utils/src/formating";
+import { logRequest } from "../../maze-utils/src/background-request-proxy";
 
 export interface CategoryPillProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
@@ -59,7 +60,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL(Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png")}>
                     </img>
 
                     {
@@ -127,15 +128,19 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             const response = await this.props.vote(type, this.state.segment.UUID);
             await stopAnimation();
 
-            if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+            if ("error" in response) {
+                console.error("[SB] Caught error while attempting to vote on a FV label", response.error);
+                alert(formatJSErrorMessage(response.error));
+            } else if (response.ok || response.status === 429) {
                 this.setState({
                     open: false,
                     show: type === 1
                 });
 
                 this.closeTooltip();
-            } else if (response.statusCode !== 403) {
-                alert(getErrorMessage(response.statusCode, response.responseText));
+            } else if (response.status !== 403) {
+                logRequest({headers: null, ...response}, "SB", "vote on FV label");
+                alert(getLongErrorMessage(response.status, response.responseText));
             }
         }
     }

src/components/ChapterVoteComponent.tsx

@@ -8,7 +8,8 @@ import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
 import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 import { Tooltip } from "../render/Tooltip";
-import { getErrorMessage } from "../../maze-utils/src/formating";
+import { formatJSErrorMessage, getLongErrorMessage } from "../../maze-utils/src/formating";
+import { logRequest } from "../../maze-utils/src/background-request-proxy";
 
 export interface ChapterVoteProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
@@ -44,18 +45,18 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
             <>
                 {/* Upvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"}
-                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
+                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden " : " ") + (document.location.host === "tv.youtube.com" ? "sbButtonYTTV" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("upvoteButtonInfo")}
                         onClick={(e) => this.vote(e, 1)}>
-                    <ThumbsUpSvg className="playerButtonImage" 
+                    <ThumbsUpSvg className="playerButtonImage sbChapterVoteButton" 
                         fill={Config.config.colorPalette.white} 
                         width={this.state.size} height={this.state.size} />
                 </button>
 
                 {/* Downvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"}
-                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
+                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden " : " ") + (document.location.host === "tv.youtube.com" ? "sbButtonYTTV" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("reportButtonInfo")}
                         onClick={(e) => {
@@ -102,7 +103,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
                             }
                         }}>
                     <ThumbsDownSvg 
-                        className="playerButtonImage" 
+                        className="playerButtonImage sbChapterVoteButton"
                         fill={downvoteButtonColor(this.state.segment ? [this.state.segment] : null, SkipNoticeAction.Downvote, SkipNoticeAction.Downvote)} 
                         width={this.state.size} 
                         height={this.state.size} />
@@ -119,12 +120,16 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
             const response = await this.props.vote(type, this.state.segment.UUID);
             await stopAnimation();
 
-            if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+            if ("error" in response){
+                console.error("[SB] Caught error while attempting to vote on a chapter", response.error);
+                alert(formatJSErrorMessage(response.error));
+            } else if (response.ok || response.status == 429) {
                 this.setState({
                     show: type === 1
                 });
-            } else if (response.statusCode !== 403) {
-                alert(getErrorMessage(response.statusCode, response.responseText));
+            } else if (response.status !== 403) {
+                logRequest({headers: null, ...response}, "SB", "vote on chapter");
+                alert(getLongErrorMessage(response.status, response.responseText));
             }
         }
     }

src/components/NoticeComponent.tsx

@@ -160,7 +160,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                 style={noticeStyle} >
                 <div className={"sponsorSkipNoticeTableContainer" 
                         + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
-                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") 
+                        + (Config.config.prideTheme ? " prideTheme" : "")}>
                     <table className={"sponsorSkipObject sponsorSkipNotice"
                                 + (this.props.limitWidth ? " sponsorSkipNoticeLimitWidth" : "")}>
                         <tbody>
@@ -172,10 +173,18 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
                                     {!this.props.hideLogo &&
-                                        <SbSvg
-                                            id={"sponsorSkipLogo" + this.idSuffix} 
-                                            fill={this.props.logoFill}
-                                            className="sponsorSkipLogo sponsorSkipObject"/>
+                                        (
+                                            !Config.config.prideTheme ?
+                                                <SbSvg
+                                                    id={"sponsorSkipLogo" + this.idSuffix} 
+                                                    fill={this.props.logoFill}
+                                                    className="sponsorSkipLogo sponsorSkipObject"/>
+                                            :
+                                                <img 
+                                                    id={"sponsorSkipLogo" + this.idSuffix} 
+                                                    src={chrome.runtime.getURL("icons/sb-pride.png")}
+                                                    className="sponsorSkipLogo sponsorSkipObject"/>
+                                        )
                                     }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}

src/components/SkipNoticeComponent.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorTime, NoticeVisibilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";
 const utils = new Utils();
-import { getSkippingText, getUpcomingText } from "../utils/categoryUtils";
+import { getSkippingText, getUpcomingText, getVoteText } from "../utils/categoryUtils";
 
 import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
@@ -29,6 +29,7 @@ export interface SkipNoticeProps {
     autoSkip: boolean;
     startReskip?: boolean;
     upcomingNotice?: boolean;
+    voteNotice?: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
@@ -102,7 +103,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.autoSkip = props.autoSkip;
         this.contentContainer = props.contentContainer;
 
-        const noticeTitle = !this.props.upcomingNotice ? getSkippingText(this.segments, this.props.autoSkip) : getUpcomingText(this.segments);
+        const noticeTitle = this.props.voteNotice ? getVoteText(this.segments) : !this.props.upcomingNotice ? getSkippingText(this.segments, this.props.autoSkip) : getUpcomingText(this.segments);
 
         const previousSkipNotices = document.querySelectorAll(".sponsorSkipNoticeParent:not(.sponsorSkipUpcomingNotice)");
         this.amountOfPreviousNotices = previousSkipNotices.length;
@@ -186,8 +187,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 idSuffix={this.idSuffix}
                 fadeIn={this.props.fadeIn}
                 fadeOut={!this.props.upcomingNotice}
-                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAll
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAutoSkip && this.autoSkip)}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 style={noticeStyle}
@@ -242,15 +243,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         </div>
 
                         {/* Copy and Downvote Button */}
-                        <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
-                                className="voteButton"
-                                style={{marginLeft: "5px"}}
-                                onClick={() => this.openEditingOptions()}>
-                            <PencilSvg fill={this.state.editing === true
-                                            || this.state.actionState === SkipNoticeAction.CopyDownvote
-                                            || this.state.choosingCategory === true
-                                            ? this.selectedColor : this.unselectedColor} />
-                        </div>
+                        {
+                            !this.props.voteNotice &&
+                            <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
+                                    className="voteButton"
+                                    style={{marginLeft: "5px"}}
+                                    onClick={() => this.openEditingOptions()}>
+                                <PencilSvg fill={this.state.editing === true
+                                                || this.state.actionState === SkipNoticeAction.CopyDownvote
+                                                || this.state.choosingCategory === true
+                                                ? this.selectedColor : this.unselectedColor} />
+                            </div>
+                        }
                     </td>
 
                     :
@@ -278,11 +282,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 }
 
                 {/* Unskip/Skip Button */}
-                {!this.props.smaller || this.segments[0].actionType === ActionType.Mute
+                {!this.props.voteNotice && (!this.props.smaller || this.segments[0].actionType === ActionType.Mute)
                     ? this.getSkipButton(1) : null}
 
                 {/* Never show button */}
-                {!this.autoSkip || this.props.startReskip ? "" :
+                {!this.autoSkip || this.props.startReskip || this.props.voteNotice ? "" :
                     <td className="sponsorSkipNoticeRightSection"
                         key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
@@ -374,7 +378,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 style.minWidth = "100px";
             }
 
-            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || this.segments[0].actionType === ActionType.Mute) && !this.props.upcomingNotice;
+            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || !this.props.voteNotice || this.segments[0].actionType === ActionType.Mute) && !this.props.upcomingNotice;
 
             return (
                 <span className="sponsorSkipNoticeUnskipSection" style={{ visibility: !showSkipButton ? "hidden" : null }}>
@@ -624,14 +628,17 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
+        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek, this.props.voteNotice);
 
-        this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
+        this.unskippedMode(buttonIndex, index, this.segments[0].actionType === ActionType.Poi ? SkipButtonState.Undo : SkipButtonState.Redo);
     }
 
     reskip(buttonIndex: number, index: number, forceSeek: boolean): void {
         this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
+        this.reskippedMode(buttonIndex);
+    }
 
+    reskippedMode(buttonIndex: number): void {
         const skipButtonStates = this.state.skipButtonStates;
         skipButtonStates[buttonIndex] = SkipButtonState.Undo;
 
@@ -661,7 +668,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     getUnskippedModeInfo(buttonIndex: number, index: number, skipButtonState: SkipButtonState): SkipNoticeState {
-        const changeCountdown = this.segments[index].actionType !== ActionType.Poi;
+        const changeCountdown = !this.props.voteNotice && this.segments[index].actionType !== ActionType.Poi;
 
         const maxCountdownTime = changeCountdown ?
             this.getFullDurationCountdown(index) : this.state.maxCountdownTime;
@@ -697,7 +704,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     getFullDurationCountdown(index: number): () => number {
         return () => {
             const sponsorTime = this.segments[index];
-            const duration = Math.round((sponsorTime.segment[1] - getCurrentTime()) * (1 / getVideo().playbackRate));
+            const duration = Math.round((sponsorTime.segment[1] - (getCurrentTime() ?? 0)) * (1 / (getVideo()?.playbackRate ?? 1)));
 
             return Math.max(duration, Config.config.skipNoticeDuration);
         };

src/components/SponsorTimeEditComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorHideType, SponsorTime } from "../types";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import SelectorComponent, { SelectorOption } from "./SelectorComponent";
@@ -10,6 +10,9 @@ import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/sr
 import { asyncRequestToServer } from "../utils/requests";
 import { defaultPreviewTime } from "../utils/constants";
 import { getVideo, getVideoDuration } from "../../maze-utils/src/video";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { Tooltip } from "../render/Tooltip";
+import { logRequest } from "../../maze-utils/src/background-request-proxy";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -120,6 +123,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             style.marginTop = "15px";
         }
 
+        const borderColor = this.state.selectedCategory ? Config.config.barTypes[this.state.selectedCategory]?.color : null;
+
         // Create time display
         let timeDisplay: JSX.Element;
         const timeDisplayStyle: React.CSSProperties = {};
@@ -148,7 +153,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <input id={"submittingTime0" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput"
                             type="text"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             value={this.state.sponsorTimeEdits[0] ?? ""}
                             onKeyDown={(e) => e.stopPropagation()}
                             onKeyUp={(e) => e.stopPropagation()}
@@ -165,7 +170,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                 <input id={"submittingTime1" + this.idSuffix}
                                     className="sponsorTimeEdit sponsorTimeEditInput"
                                     type="text"
-                                    style={{color: "inherit", backgroundColor: "inherit"}}
+                                    style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                                     value={this.state.sponsorTimeEdits[1] ?? ""}
                                     onKeyDown={(e) => e.stopPropagation()}
                                     onKeyUp={(e) => e.stopPropagation()}
@@ -212,7 +217,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <select id={"sponsorTimeCategories" + this.idSuffix}
                         className="sponsorTimeEditSelector sponsorTimeCategories"
                         ref={this.categoryOptionRef}
-                        style={{color: "inherit", backgroundColor: "inherit"}}
+                        style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                         value={this.state.selectedCategory}
                         onChange={(event) => this.categorySelectionChange(event)}>
                         {this.getCategoryOptions()}
@@ -237,11 +242,27 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"
                             value={this.state.selectedActionType}
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             ref={this.actionTypeOptionRef}
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
                             {this.getActionTypeOptions(sponsorTime)}
                         </select>
+                        <img
+                            className="voteButton hideSegmentSubmitButton"
+                            title={chrome.i18n.getMessage("hideSegment")}
+                            src={sponsorTime.hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
+                            onClick={(e) => {
+                                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
+                                stopAnimation();
+    
+                                if (sponsorTime.hidden === SponsorHideType.Hidden) {
+                                    sponsorTime.hidden = SponsorHideType.Visible;
+                                } else {
+                                    sponsorTime.hidden = SponsorHideType.Hidden;
+                                }
+
+                                this.saveEditTimes();
+                        }}/>
                     </div>
                 ): ""}
 
@@ -250,7 +271,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
                         <input id={"chapterName" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             ref={this.descriptionOptionRef}
                             type="text"
                             value={this.state.description}
@@ -291,7 +312,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         </span>
                     ): ""}
 
-                    {(!isNaN(segment[1]) && this.state.selectedActionType != ActionType.Full) ? (
+                    {(!isNaN(segment[0]) && this.state.selectedActionType != ActionType.Full) ? (
                         <span id={"sponsorTimeInspectButton" + this.idSuffix}
                             className="sponsorTimeEditButton"
                             onClick={this.inspectTime.bind(this)}>
@@ -477,6 +498,23 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             return;
         }
 
+        // Hook update
+        if (!Config.config.hookUpdate && chosenCategory === "preview") {
+            Config.config.hookUpdate = true;
+
+            const target = event.target.closest(".sponsorSkipNotice tbody");
+            if (target) {
+                new Tooltip({
+                    text: chrome.i18n.getMessage("hookNewFeature"),
+                    referenceNode: target.parentElement,
+                    prependElement: target as HTMLElement,
+                    bottomOffset: "30px",
+                    opacity: 0.9,
+                    timeout: 100
+                });
+            }
+        }
+
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
         this.handleReplacingLostTimes(chosenCategory, sponsorTime.actionType, sponsorTime);
         this.saveEditTimes();
@@ -746,23 +784,26 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         if (this.props.contentContainer().channelIDInfo.status !== ChannelIDStatus.Found) return;
 
         this.fetchingSuggestions = true;
-        const result = await asyncRequestToServer("GET", "/api/chapterNames", {
-            description,
-            channelID: this.props.contentContainer().channelIDInfo.id
-        });
-
-        if (result.ok) {
-            try {
+        try {
+            const result = await asyncRequestToServer("GET", "/api/chapterNames", {
+                description,
+                channelID: this.props.contentContainer().channelIDInfo.id
+            });
+            if (result.ok) {
                 const names = JSON.parse(result.responseText) as {description: string}[];
                 this.setState({
                     suggestedNames: names.map(n => ({
                         label: n.description
                     }))
                 });
-            } catch (e) {} //eslint-disable-line no-empty
+            } else if (result.status !== 404) {
+                logRequest(result, "SB", "chapter suggestion")
+            }
+        } catch (e) {
+            console.warn("[SB] Caught error while fetching chapter suggestions", e);
+        } finally {
+            this.fetchingSuggestions = false;
         }
-
-        this.fetchingSuggestions = false;
     }
 
     configUpdate(): void {

src/components/options/AdvancedSkipOptionsComponent.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import Config from "../../config";
+import { configToText, parseConfig, } from "../../utils/skipRule";
+import { AdvancedSkipRule } from "../../utils/skipRule.type";
+
+let configSaveTimeout: NodeJS.Timeout | null = null;
+
+export function AdvancedSkipOptionsComponent() {
+    const [optionsOpen, setOptionsOpen] = React.useState(false);
+    const [config, setConfig] = React.useState(configToText(Config.local.skipRules));
+    const [configValid, setConfigValid] = React.useState(true);
+
+    return (
+        <div>
+            <div className="option-button" onClick={() => {
+                setOptionsOpen(!optionsOpen);
+            }}>
+                {chrome.i18n.getMessage("openAdvancedSkipOptions")}
+            </div>
+
+            {
+                optionsOpen &&
+                <div className="advanced-skip-options-menu">
+                    <div className={"advanced-config-help-message"}>
+                        <a target="_blank"
+                                rel="noopener noreferrer"
+                                href="https://wiki.sponsor.ajay.app/w/Advanced_Skip_Options">
+                            {chrome.i18n.getMessage("advancedSkipSettingsHelp")}
+                        </a>
+
+                        <span className={configValid ? "hidden" : "invalid-advanced-config"}>
+                            {" - "}
+                            {chrome.i18n.getMessage("advancedSkipNotSaved")}
+                        </span>
+                    </div>
+
+                    <textarea className={"option-text-box " + (configValid ? "" : "invalid-advanced-config")}
+                        rows={10}
+                        style={{ width: "80%" }}
+                        value={config}
+                        spellCheck={false}
+                        onChange={(e) => {
+                            setConfig(e.target.value);
+
+                            const compiled = compileConfig(e.target.value);
+                            setConfigValid(!!compiled && !(e.target.value.length > 0 && compiled.length === 0));
+
+                            if (compiled) {
+                                if (configSaveTimeout) {
+                                    clearTimeout(configSaveTimeout);
+                                }
+
+                                configSaveTimeout = setTimeout(() => {
+                                    Config.local.skipRules = compiled;
+                                }, 200);
+                            }
+                        }}
+                    />
+                </div>
+            }
+        </div>
+    );
+}
+
+function compileConfig(config: string): AdvancedSkipRule[] | null {
+    const { rules, errors } = parseConfig(config);
+
+    for (const error of errors) {
+        console.error(`[SB] Error on line ${error.span.start.line}: ${error.message}`);
+    }
+
+    if (errors.length === 0) {
+        return rules;
+    } else {
+        return null;
+    }
+}

src/components/options/CategoryChooserComponent.tsx

@@ -1,30 +1,171 @@
 import * as React from "react";
 
 import * as CompileConfig from "../../../config.json";
-import { Category } from "../../types";
-import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+import { Category, CategorySelection, CategorySkipOption } from "../../types";
+import { CategorySkipOptionsComponent, ExtraOptionComponent, ToggleOption } from "./CategorySkipOptionsComponent";
+import { SelectOptionComponent } from "./SelectOptionComponent";
+import Config, { ConfigurationID, CustomConfiguration } from "../../config";
+import { generateUserID } from "../../../maze-utils/src/setup";
 
-export interface CategoryChooserProps { 
+let forceUpdateSkipProfilesTimeout: NodeJS.Timeout | null = null;
+let forceUpdateSkipProfileIDsTimeout: NodeJS.Timeout | null = null;
 
-}
+export function CategoryChooserComponent() {
+    const [configurations, setConfigurations] = React.useState(Config.local!.skipProfiles);
+    const [selectedConfigurationID, setSelectedConfigurationID] = React.useState<ConfigurationID | null>(null);
+    const [channelListText, setChannelListText] = React.useState("");
 
-export interface CategoryChooserState {
+    const [configurationName, setConfigurationName] = React.useState("");
+    const [selections, setSelections] = React.useState<CategorySelection[]>([]);
 
-}
+    React.useEffect(() => {
+        setConfigurationName(getConfigurationValue(selectedConfigurationID, "name", ""));
 
-class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
+        updateChannelList(setChannelListText, selectedConfigurationID!);
+        setSelections(getConfigurationValue<CategorySelection[]>(selectedConfigurationID, "categorySelections"));
 
-    constructor(props: CategoryChooserProps) {
-        super(props);
-
-        // Setup state
-        this.state = {
-            
+        if (selectedConfigurationID === null) {
+            document.querySelectorAll(".hide-when-skip-profile").forEach((e) => e.classList.remove("hidden"));
+        } else {
+            document.querySelectorAll(".hide-when-skip-profile").forEach((e) => e.classList.add("hidden"));
         }
-    }
+    }, [selectedConfigurationID]);
+
+    const createNewConfig = () => {
+        let newID = generateUserID().substring(0, 5);
+        while (Config.local.skipProfiles[newID]) {
+            newID = generateUserID().substring(0, 5);
+        }
+
+        const newConfiguration: CustomConfiguration = {
+            name: `${chrome.i18n.getMessage("NewConfiguration")} ${Object.keys(Config.local.skipProfiles).length}`,
+            categorySelections: [],
+            showAutogeneratedChapters: null,
+            autoSkipOnMusicVideos: null,
+            skipNonMusicOnlyOnYoutubeMusic: null,
+            muteSegments: null,
+            fullVideoSegments: null,
+            manualSkipOnFullVideo: null,
+            minDuration: null
+        };
+
+        Config.local!.skipProfiles[newID] = newConfiguration;
+        forceUpdateConfigurations();
+        setConfigurations(Config.local!.skipProfiles);
+        setSelectedConfigurationID(newID as ConfigurationID);
+
+        updateChannelList(setChannelListText, newID as ConfigurationID);
+    };
+    React.useEffect(() => {
+        if (window.location.hash === "#newProfile") {
+            createNewConfig();
+        }
+    }, []);
+
+    return (
+        <>
+            <div className="categoryChooserTopRow">
+                <SelectOptionComponent
+                    id="channelProfiles"
+                    onChange={(value) => {
+                        if (value === "null") value = null;
+
+                        setSelectedConfigurationID(value as ConfigurationID);
+                        updateChannelList(setChannelListText, value as ConfigurationID);
+                    }}
+                    value={selectedConfigurationID!}
+                    options={[{
+                        value: "null",
+                        label: chrome.i18n.getMessage("DefaultConfiguration")
+                    }].concat(Object.entries(configurations).map(([key, value]) => ({
+                        value: key,
+                        label: value.name
+                    })))}
+                />
+
+                <div 
+                    className="option-button trigger-button"
+                    onClick={() => createNewConfig()}>
+                    {chrome.i18n.getMessage("NewConfiguration")}
+                </div>
+            </div>
+
+            {
+                selectedConfigurationID &&
+                <div className="configurationInfo">
+                    <input 
+                        type="text"
+                        id="configurationName"
+                        value={configurationName}
+                        placeholder={chrome.i18n.getMessage("ConfigurationName")}
+                        style={{width: document.getElementById("channelProfiles")?.clientWidth ?? null}}
+                        onChange={(e) => {
+                            const newName = e.target.value;
+                            getConfig(selectedConfigurationID)!.name = newName;
+                            setConfigurationName(newName);
+
+                            forceUpdateConfigurations();
+                            setConfigurations(Config.local!.skipProfiles);
+                        }}/>
+
+                    <div>
+                        {chrome.i18n.getMessage("ChannelListInstructionsSB")}
+                    </div>
+                
+                    <textarea 
+                        className="option-text-box" 
+                        rows={10} 
+                        value={channelListText}
+                        onChange={(e) => {
+                            const newText = e.target.value;
+                            setChannelListText(newText);
+
+                            const channels = newText.split("\n").map((channel) => channel.trim()).filter((channel) => channel !== "");
+                            if (channels.length > 0) {
+                                for (const [channelID, id] of Object.entries(Config.local!.channelSkipProfileIDs)) {
+                                    if (id === selectedConfigurationID) {
+                                        if (!channels.includes(channelID)) {
+                                            delete Config.local!.channelSkipProfileIDs[channelID];
+                                        }
+                                    }
+                                }
+
+                                for (const channel of channels) {
+                                    Config.local!.channelSkipProfileIDs[channel] = selectedConfigurationID;
+                                }
+                            }
+
+                            forceUpdateConfigurationIDs();
+                        }}/>
+                    
+                    <div 
+                        className="option-button trigger-button"
+                        onClick={() => {
+                            if (confirm(chrome.i18n.getMessage("areYouSureDeleteConfig"))) {
+                                delete Config.local.skipProfiles[selectedConfigurationID];
+                                forceUpdateConfigurations();
+
+                                for (const [channelID, id] of Object.entries(Config.local.channelSkipProfileIDs)) {
+                                    if (id === selectedConfigurationID) {
+                                        delete Config.local.channelSkipProfileIDs[channelID];
+                                    }
+                                }
+                                forceUpdateConfigurationIDs();
+
+                                if (Config.local.skipProfileTemp && Config.local.skipProfileTemp.configID === selectedConfigurationID) {
+                                    Config.local.skipProfileTemp = null;
+                                }
+
+                                setConfigurations(Config.local!.skipProfiles);
+                                const newID = Object.keys(Config.local!.skipProfiles)[0] as ConfigurationID;
+                                setSelectedConfigurationID(newID);
+                            }
+                        }}>
+                        {chrome.i18n.getMessage("DeleteConfiguration")}
+                    </div>
+                </div>
+            }
 
-    render(): React.ReactElement {
-        return (
             <table id="categoryChooserTable"
                 className="categoryChooserTable"> 
                 <tbody>
@@ -51,25 +192,170 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
                         </th>
                     </tr>
 
-                    {this.getCategorySkipOptions()}
+                    <CategorySkipOptions
+                        selectedConfigurationID={selectedConfigurationID}
+                        selections={selections}
+                        setSelections={setSelections}
+                    />
                 </tbody> 
             </table>
+
+            <ExtraOptionsComponent
+                selectedConfigurationID={selectedConfigurationID!}/>
+        </>
+    );
+}
+
+function CategorySkipOptions({ selectedConfigurationID, selections, setSelections}: { selectedConfigurationID: ConfigurationID | null;
+        selections: CategorySelection[]; setSelections: (s: CategorySelection[]) => void; }): JSX.Element {
+    const elements: JSX.Element[] = [];
+    const defaultSkipOption = selectedConfigurationID === null ? CategorySkipOption.Disabled : CategorySkipOption.FallbackToDefault;
+
+    for (const category of CompileConfig.categoryList) {
+        elements.push(
+            <CategorySkipOptionsComponent
+                category={category as Category}
+                selection={selections.find(selection => selection.name === category)?.option ?? defaultSkipOption}
+                updateSelection={(option: CategorySkipOption) => {
+                    const existingSelection = selections.find(selection => selection.name === category);
+                    const deletingSelection = (option === CategorySkipOption.Disabled && selectedConfigurationID === null)
+                        || (option === CategorySkipOption.FallbackToDefault && selectedConfigurationID !== null);
+                    if (existingSelection) {
+                        existingSelection.option = option;
+
+                        if (deletingSelection) {
+                            selections.splice(selections.indexOf(existingSelection), 1);
+                        }
+                    } else if (!deletingSelection) {
+                        selections.push({
+                            name: category as Category,
+                            option: option
+                        });
+                    }
+
+                    // Clone so React notices the change
+                    selections = [...selections];
+
+                    updateConfigurationValue(selectedConfigurationID, "categorySelections", selections, setSelections);
+                }}
+                isDefaultConfig={selectedConfigurationID === null}
+                selectedConfigurationID={selectedConfigurationID}
+                key={category}>
+            </CategorySkipOptionsComponent>
         );
     }
 
-    getCategorySkipOptions(): JSX.Element[] {
-        const elements: JSX.Element[] = [];
+    return <>
+        {elements}
+    </>;
+}
 
-        for (const category of CompileConfig.categoryList) {
-            elements.push(
-                <CategorySkipOptionsComponent category={category as Category}
-                    key={category}>
-                </CategorySkipOptionsComponent>
-            );
+function forceUpdateConfigurations() {
+    if (forceUpdateSkipProfilesTimeout) {
+        clearTimeout(forceUpdateSkipProfilesTimeout);
+    }
+
+    forceUpdateSkipProfilesTimeout = setTimeout(() => {
+        Config.forceLocalUpdate("skipProfiles");
+    }, 50);
+}
+
+function forceUpdateConfigurationIDs() {
+    if (forceUpdateSkipProfileIDsTimeout) {
+        clearTimeout(forceUpdateSkipProfileIDsTimeout);
+    }
+
+    forceUpdateSkipProfileIDsTimeout = setTimeout(() => {
+        Config.forceLocalUpdate("channelSkipProfileIDs");
+    }, 50);
+}
+
+function updateChannelList(setChannelListText: (value: string) => void, selectedConfigurationID: ConfigurationID) {
+    setChannelListText(Object.entries(Config.local!.channelSkipProfileIDs)
+        .filter(([, id]) => id === selectedConfigurationID)
+        .map(([channelID]) => channelID).join("\n"))
+}
+
+function getConfig(selectedConfigurationID: ConfigurationID | null) {
+    return selectedConfigurationID ? Config.local!.skipProfiles[selectedConfigurationID] : null;
+}
+
+export function getConfigurationValue<T>(selectedConfigurationID: ConfigurationID | null, option: string, defaultValue?: T): T {
+    if (selectedConfigurationID === null) {
+        if (defaultValue !== undefined) {
+            return defaultValue;
+        } else {
+            return Config.config[option];
         }
-
-        return elements;
+    } else {
+        return getConfig(selectedConfigurationID)[option];
     }
 }
 
-export default CategoryChooserComponent;
+export function updateConfigurationValue(selectedConfigurationID: ConfigurationID | null, option: string, value: unknown, setFunction?: (value: unknown) => void) {
+     if (selectedConfigurationID === null) {
+        Config.config[option] = value;
+    } else {
+        const config = getConfig(selectedConfigurationID);
+        if (value !== null) {
+            config[option] = value;
+        } else {
+            delete config[option];
+        }
+
+        forceUpdateConfigurations();
+    }
+
+    if (setFunction) setFunction(value);
+}
+
+function ExtraOptionsComponent(props: {selectedConfigurationID: ConfigurationID}): JSX.Element {
+    const options: ToggleOption[][] = [[{
+        configKey: "muteSegments",
+        label: chrome.i18n.getMessage("muteSegments"),
+        type: "toggle"
+    }], [{
+        configKey: "fullVideoSegments",
+        label: chrome.i18n.getMessage("fullVideoSegments"),
+        type: "toggle"
+    }, {
+        configKey: "fullVideoLabelsOnThumbnails",
+        label: chrome.i18n.getMessage("fullVideoLabelsOnThumbnails"),
+        type: "toggle",
+        dontShowOnCustomConfigs: true
+    }, {
+        configKey: "manualSkipOnFullVideo",
+        label: chrome.i18n.getMessage("enableManualSkipOnFullVideo"),
+        description: chrome.i18n.getMessage("whatManualSkipOnFullVideo"),
+        type: "toggle"
+    }], [{
+        configKey: "minDuration",
+        label: chrome.i18n.getMessage("minDuration"),
+        description: chrome.i18n.getMessage("minDurationDescription"),
+        type: "number"
+    }]];
+
+    const result: JSX.Element[] = [];
+
+    for (const optionGroup of options) {
+        const groupResult: JSX.Element[] = [];
+        for (const option of optionGroup) {
+            groupResult.push(
+                <ExtraOptionComponent
+                    option={option}
+                    selectedConfigurationID={props.selectedConfigurationID}
+                    key={option.configKey}/>
+            );
+        }
+
+        result.push(
+            <div className="extraOptionGroup" key={optionGroup.map(o => o.configKey).join("-")}>
+                {groupResult}
+            </div>
+        );
+    }
+
+    return (<>
+        {result}
+    </>);
+}

src/components/options/CategorySkipOptionsComponent.tsx

@@ -1,253 +1,295 @@
 import * as React from "react";
 
-import Config from "../../config"
+import Config, { ConfigurationID } from "../../config"
 import * as CompileConfig from "../../../config.json";
 import { Category, CategorySkipOption } from "../../types";
 
 import { getCategorySuffix } from "../../utils/categoryUtils";
-import ToggleOptionComponent from "./ToggleOptionComponent";
+import { ToggleOptionComponent } from "./ToggleOptionComponent";
+import { getConfigurationValue, updateConfigurationValue } from "./CategoryChooserComponent";
+import { NumberInputOptionComponent } from "./NumberInputOptionComponent";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
+    selection: CategorySkipOption;
+    updateSelection(selection: CategorySkipOption): void;
+    isDefaultConfig: boolean;
+    selectedConfigurationID: ConfigurationID;
     defaultColor?: string;
     defaultPreviewColor?: string;
     children?: React.ReactNode;
 }
 
-export interface CategorySkipOptionsState {
-    color: string;
-    previewColor: string;
-}
-
 export interface ToggleOption {
     configKey: string;
     label: string;
+    type: "toggle" | "number";
+    description?: string;
     dontDisable?: boolean;
+    dontShowOnCustomConfigs?: boolean;
 }
 
-class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
-    setBarColorTimeout: NodeJS.Timeout;
+export function CategorySkipOptionsComponent(props: CategorySkipOptionsProps): React.ReactElement {
+    const [color, setColor] = React.useState(props.defaultColor || Config.config.barTypes[props.category]?.color);
+    const [previewColor, setPreviewColor] = React.useState(props.defaultPreviewColor || Config.config.barTypes["preview-" + props.category]?.color);
 
-    constructor(props: CategorySkipOptionsProps) {
-        super(props);
+    const selectedOption = React.useMemo(() => {
+        switch (props.selection) {
+            case CategorySkipOption.ShowOverlay:
+                return "showOverlay";
+            case CategorySkipOption.ManualSkip:
+                return "manualSkip";
+            case CategorySkipOption.AutoSkip:
+                return "autoSkip";
+            case CategorySkipOption.FallbackToDefault:
+                return "fallbackToDefault";
+            default:
+                return "disable";
+        }
+    }, [props.selection]);
 
-        // Setup state
-        this.state = {
-            color: props.defaultColor || Config.config.barTypes[this.props.category]?.color,
-            previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category]?.color
-        };
-    }
+    const setBarColorTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
-    render(): React.ReactElement {
-        let defaultOption = "disable";
-        // Set the default opton properly
-        for (const categorySelection of Config.config.categorySelections) {
-            if (categorySelection.name === this.props.category) {
-                switch (categorySelection.option) {
-                    case CategorySkipOption.ShowOverlay:
-                        defaultOption = "showOverlay";
-                        break;
-                    case CategorySkipOption.ManualSkip:
-                        defaultOption = "manualSkip";
-                        break;
-                    case CategorySkipOption.AutoSkip:
-                        defaultOption = "autoSkip";
-                        break;
+    return (
+        <>
+            <tr id={props.category + "OptionsRow"}
+                className={`categoryTableElement`} >
+                <td id={props.category + "OptionName"}
+                    className="categoryTableLabel">
+                        {chrome.i18n.getMessage("category_" + props.category)}
+                </td>
+
+                <td id={props.category + "SkipOption"}
+                    className="skipOption">
+                    <select
+                        className="optionsSelector"
+                        value={selectedOption}
+                        onChange={(e) => skipOptionSelected(e, props.category, props.updateSelection)}>
+                            {getCategorySkipOptions(props.category, props.isDefaultConfig)}
+                    </select>
+                </td>
+
+                {props.category !== "chapter" &&
+                    <td id={props.category + "ColorOption"}
+                        className="colorOption">
+                        <input
+                            className="categoryColorTextBox option-text-box"
+                            type="color"
+                            disabled={!props.isDefaultConfig}
+                            onChange={(event) => {
+                                if (setBarColorTimeout.current) {
+                                    clearTimeout(setBarColorTimeout.current);
+                                }
+
+                                setColor(event.currentTarget.value);
+                                Config.config.barTypes[props.category].color = event.currentTarget.value;
+
+                                // Make listener get called
+                                setBarColorTimeout.current = setTimeout(() => {
+                                    Config.config.barTypes = Config.config.barTypes;
+                                }, 50);
+                            }}
+                            value={color} />
+                    </td>
                 }
 
-                break;
+                {!["chapter", "exclusive_access"].includes(props.category) &&
+                    <td id={props.category + "PreviewColorOption"}
+                        className="previewColorOption">
+                        <input
+                            className="categoryColorTextBox option-text-box"
+                            type="color"
+                            disabled={!props.isDefaultConfig}
+                            onChange={(event) => {
+                                if (setBarColorTimeout.current) {
+                                    clearTimeout(setBarColorTimeout.current);
+                                }
+
+                                setPreviewColor(event.currentTarget.value);
+                                Config.config.barTypes["preview-" + props.category].color = event.currentTarget.value;
+
+                                // Make listener get called
+                                setBarColorTimeout.current = setTimeout(() => {
+                                    Config.config.barTypes = Config.config.barTypes;
+                                }, 50);
+                            }}
+                            value={previewColor} />
+                    </td>
+                }
+
+            </tr>
+
+            <tr id={props.category + "DescriptionRow"}
+                className={`small-description categoryTableDescription`}>
+                    <td
+                        colSpan={2}>
+                        {chrome.i18n.getMessage("category_" + props.category + "_description")}
+                        {' '}
+                        <a href={CompileConfig.wikiLinks[props.category]} target="_blank" rel="noreferrer">
+                            {`${chrome.i18n.getMessage("LearnMore")}`}
+                        </a>
+                    </td>
+            </tr>
+            
+            <ExtraOptionComponents
+                category={props.category}
+                selectedConfigurationID={props.selectedConfigurationID}
+            />
+        </>
+    );
+}
+
+function skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>,
+        category: Category, updateSelection: (selection: CategorySkipOption) => void): void {
+    let option: CategorySkipOption;
+    switch (event.target.value) {
+        case "fallbackToDefault":
+            option = CategorySkipOption.FallbackToDefault;
+            break;
+        case "disable":
+            option = CategorySkipOption.Disabled;
+            break;
+        case "showOverlay":
+            option = CategorySkipOption.ShowOverlay;
+            break;
+        case "manualSkip":
+            option = CategorySkipOption.ManualSkip;
+            break;
+        case "autoSkip":
+            option = CategorySkipOption.AutoSkip;
+
+            if (category === "filler" && !Config.config.isVip) {
+                if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
+                    event.target.value = "disable";
+                }
             }
-        }
 
-        return (
-            <>
-                <tr id={this.props.category + "OptionsRow"}
-                    className={`categoryTableElement`} >
-                    <td id={this.props.category + "OptionName"}
-                        className="categoryTableLabel">
-                            {chrome.i18n.getMessage("category_" + this.props.category)}
-                    </td>
+            break;
+    }
 
-                    <td id={this.props.category + "SkipOption"}
-                        className="skipOption">
-                        <select
-                            className="optionsSelector"
-                            defaultValue={defaultOption}
-                            onChange={this.skipOptionSelected.bind(this)}>
-                                {this.getCategorySkipOptions()}
-                        </select>
-                    </td>
+    updateSelection(option);
+}
 
-                    {this.props.category !== "chapter" &&
-                        <td id={this.props.category + "ColorOption"}
-                            className="colorOption">
-                            <input
-                                className="categoryColorTextBox option-text-box"
-                                type="color"
-                                onChange={(event) => this.setColorState(event, false)}
-                                value={this.state.color} />
-                        </td>
-                    }
+function getCategorySkipOptions(category: Category, isDefaultConfig: boolean): JSX.Element[] {
+    const elements: JSX.Element[] = [];
 
-                    {!["chapter", "exclusive_access"].includes(this.props.category) &&
-                        <td id={this.props.category + "PreviewColorOption"}
-                            className="previewColorOption">
-                            <input
-                                className="categoryColorTextBox option-text-box"
-                                type="color"
-                                onChange={(event) => this.setColorState(event, true)}
-                                value={this.state.previewColor} />
-                        </td>
-                    }
+    let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
+    if (category === "chapter") optionNames = ["disable", "showOverlay"]
+    else if (category === "exclusive_access") optionNames = ["disable", "showOverlay"];
 
-                </tr>
+    if (!isDefaultConfig) {
+        optionNames = ["fallbackToDefault"].concat(optionNames);
+    }
 
-                <tr id={this.props.category + "DescriptionRow"}
-                    className={`small-description categoryTableDescription`}>
-                        <td
-                            colSpan={2}>
-                            {chrome.i18n.getMessage("category_" + this.props.category + "_description")}
-                            {' '}
-                            <a href={CompileConfig.wikiLinks[this.props.category]} target="_blank" rel="noreferrer">
-                                {`${chrome.i18n.getMessage("LearnMore")}`}
-                            </a>
-                        </td>
-                </tr>
-                
-                {this.getExtraOptionComponents(this.props.category)}
-
-            </>
+    for (const optionName of optionNames) {
+        elements.push(
+            <option key={optionName} value={optionName}>
+                {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(category)
+                                                                    : optionName) || chrome.i18n.getMessage(optionName)}
+            </option>
         );
     }
 
-    skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
-        let option: CategorySkipOption;
-
-        switch (event.target.value) {
-            case "disable":
-                Config.config.categorySelections = Config.config.categorySelections.filter(
-                    categorySelection => categorySelection.name !== this.props.category);
-                return;
-            case "showOverlay":
-                option = CategorySkipOption.ShowOverlay;
-
-                break;
-            case "manualSkip":
-                option = CategorySkipOption.ManualSkip;
-
-                break;
-            case "autoSkip":
-                option = CategorySkipOption.AutoSkip;
-
-                if (this.props.category === "filler" && !Config.config.isVip) {
-                    if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
-                        event.target.value = "disable";
-                    }
-                }
-
-                break;
-        }
-
-        const existingSelection = Config.config.categorySelections.find(selection => selection.name === this.props.category);
-        if (existingSelection) {
-            existingSelection.option = option;
-        } else {
-            Config.config.categorySelections.push({
-                name: this.props.category,
-                option: option
-            });
-        }
-
-        Config.forceSyncUpdate("categorySelections");
-    }
-
-    getCategorySkipOptions(): JSX.Element[] {
-        const elements: JSX.Element[] = [];
-
-        let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
-        if (this.props.category === "chapter") optionNames = ["disable", "showOverlay"]
-        else if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
-
-        for (const optionName of optionNames) {
-            elements.push(
-                <option key={optionName} value={optionName}>
-                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category) 
-                                                                     : optionName)}
-                </option>
-            );
-        }
-
-        return elements;
-    }
-
-    setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean): void {
-        clearTimeout(this.setBarColorTimeout);
-
-        if (preview) {
-            this.setState({
-                previewColor: event.currentTarget.value
-            });
-
-            Config.config.barTypes["preview-" + this.props.category].color = event.currentTarget.value;
-
-        } else {
-            this.setState({
-                color: event.currentTarget.value
-            });
-
-            Config.config.barTypes[this.props.category].color = event.currentTarget.value;
-        }
-
-        // Make listener get called
-        this.setBarColorTimeout = setTimeout(() => {
-            Config.config.barTypes = Config.config.barTypes;
-        }, 50);
-    }
-
-    getExtraOptionComponents(category: string): JSX.Element[] {
-        const result = [];
-        for (const option of this.getExtraOptions(category)) {
-            result.push(
-                <tr key={option.configKey}>
-                    <td id={`${category}_${option.configKey}`} className="categoryExtraOptions">
-                        <ToggleOptionComponent 
-                            configKey={option.configKey} 
-                            label={option.label}
-                            style={{width: "inherit"}}
-                        />
-                    </td>
-                </tr>
-            )
-        }
-
-        return result;
-    }
-
-    getExtraOptions(category: string): ToggleOption[] {
-        switch (category) {
-            case "chapter":
-                return [{
-                    configKey: "renderSegmentsAsChapters",
-                    label: chrome.i18n.getMessage("renderAsChapters"),
-                    dontDisable: true
-                }, {
-                    configKey: "showSegmentNameInChapterBar",
-                    label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
-                    dontDisable: true
-                }, {
-                    configKey: "showAutogeneratedChapters",
-                    label: chrome.i18n.getMessage("showAutogeneratedChapters"),
-                    dontDisable: true
-                }];
-            case "music_offtopic":
-                return [{
-                    configKey: "autoSkipOnMusicVideos",
-                    label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
-                }];
-            default:
-                return [];
-        }
-    }
+    return elements;
 }
 
-export default CategorySkipOptionsComponent;
+
+function ExtraOptionComponents(props: {category: string; selectedConfigurationID: ConfigurationID}): JSX.Element {
+    const result = [];
+    for (const option of getExtraOptions(props.category)) {
+        result.push(
+            <ExtraOptionComponent
+                key={option.configKey}
+                option={option}
+                selectedConfigurationID={props.selectedConfigurationID}
+            />
+        )
+    }
+
+    return (
+    <>
+        {result}
+    </>);
+}
+
+export function ExtraOptionComponent({option, selectedConfigurationID}: {option: ToggleOption; selectedConfigurationID: ConfigurationID}): JSX.Element {
+    const [value, setValue] = React.useState(getConfigurationValue(selectedConfigurationID, option.configKey));
+    React.useEffect(() => {
+        setValue(getConfigurationValue(selectedConfigurationID, option.configKey));
+    }, [selectedConfigurationID]);
+
+    return (
+        <tr key={option.configKey} className={`${option.dontShowOnCustomConfigs && selectedConfigurationID !== null ? "hidden" : ""}`}>
+            <td id={`${option.configKey}`} className="categoryExtraOptions">
+                {
+                    option.type === "toggle" ?
+                        <ToggleOptionComponent 
+                            checked={value ?? Config.config[option.configKey]}
+                            partiallyHidden={value === null}
+                            showResetButton={value !== null && selectedConfigurationID !== null}
+                            onChange={(checked) => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, checked, setValue);
+                            }}
+                            onReset={() => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, null, setValue);
+                            }}
+                            label={option.label}
+                            description={option.description}
+                            style={{width: "inherit"}}
+                        />
+                    :
+                        <NumberInputOptionComponent 
+                            value={value ?? Config.config[option.configKey]}
+                            partiallyHidden={value === null}
+                            showResetButton={value !== null && selectedConfigurationID !== null}
+                            onChange={(value) => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, value, setValue);
+                            }}
+                            onReset={() => {
+                                updateConfigurationValue(selectedConfigurationID, option.configKey, null, setValue);
+                            }}
+                            label={option.label}
+                            description={option.description}
+                            style={{width: "inherit"}}
+                        />
+                }
+            </td>
+        </tr>
+    );
+}
+
+function getExtraOptions(category: string): ToggleOption[] {
+    switch (category) {
+        case "chapter":
+            return [{
+                configKey: "renderSegmentsAsChapters",
+                label: chrome.i18n.getMessage("renderAsChapters"),
+                type: "toggle",
+                dontDisable: true,
+                dontShowOnCustomConfigs: true
+            }, {
+                configKey: "showSegmentNameInChapterBar",
+                label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
+                type: "toggle",
+                dontDisable: true,
+                dontShowOnCustomConfigs: true
+            }, {
+                configKey: "showAutogeneratedChapters",
+                label: chrome.i18n.getMessage("showAutogeneratedChapters"),
+                type: "toggle",
+                dontDisable: true
+            }];
+        case "music_offtopic":
+            return [{
+                configKey: "autoSkipOnMusicVideos",
+                label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
+                type: "toggle"
+            }, {
+                configKey: "skipNonMusicOnlyOnYoutubeMusic",
+                label: chrome.i18n.getMessage("skipNonMusicOnlyOnYoutubeMusic"),
+                type: "toggle"
+            }];
+        default:
+            return [];
+    }
+}

src/components/options/KeybindDialogComponent.tsx

@@ -146,7 +146,9 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
                 this.props.option !== "actuallySubmitKeybind" && this.equals(Config.config['actuallySubmitKeybind']) ||
                 this.props.option !== "previewKeybind" && this.equals(Config.config['previewKeybind']) ||
                 this.props.option !== "closeSkipNoticeKeybind" && this.equals(Config.config['closeSkipNoticeKeybind']) ||
-                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
+                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']) ||
+                this.props.option !== "downvoteKeybind" && this.equals(Config.config['downvoteKeybind']) ||
+                this.props.option !== "upvoteKeybind" && this.equals(Config.config['upvoteKeybind']))
             return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};
 
         return null;

src/components/options/NumberInputOptionComponent.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import ResetIcon from "../../svg-icons/resetIcon";
+
+export interface NumberInputOptionProps { 
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    value: number;
+    onChange(value: number): void;
+    partiallyHidden?: boolean;
+    showResetButton?: boolean;
+    onReset?(): void;
+}
+
+export function NumberInputOptionComponent(props: NumberInputOptionProps): React.ReactElement {
+    return (
+        <div className={`sb-number-option ${props.disabled ? "disabled" : ""} ${props.partiallyHidden ? "partiallyHidden" : ""}`}>
+            <div style={props.style}>
+                <label className="number-container">
+                    <span className="optionLabel">
+                        {props.label}
+                    </span>
+                    <input id={props.label} 
+                        className="sb-number-input"
+                        type="number"
+                        step="0.1"
+                        min="0"
+                        value={props.value}
+                        disabled={props.disabled} 
+                        onChange={(e) => props.onChange(Number(e.target.value))}/>
+                </label>
+
+                {
+                    props.showResetButton &&
+                        <span className="reset-button sb-switch-label" title={chrome.i18n.getMessage("fallbackToDefault")} onClick={() => {
+                            props.onReset?.();
+                        }}>
+                            <ResetIcon/>
+                        </span>
+                }
+            </div>
+
+            {
+                props.description &&
+                    <div className="small-description">
+                        {props.description}
+                    </div>
+            }
+        </div>
+    );
+}

src/components/options/SelectOptionComponent.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import ResetIcon from "../../svg-icons/resetIcon";
+
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+
+export interface SelectOptionComponentProps {
+    id: string;
+    onChange: (value: string) => void;
+    value: string;
+    label?: string;
+    title?: string;
+    options: SelectOption[];
+    style?: React.CSSProperties;
+    className?: string;
+    showResetButton?: boolean;
+    onReset?: () => void;
+    applyFormattingToOptions?: boolean;
+}
+
+export const SelectOptionComponent = (props: SelectOptionComponentProps) => {
+    return (
+        <div className={`sb-optionContainer ${props.className ?? ""}`} style={props.style}>
+            {
+                props.label &&
+                    <label className="sb-optionLabel" htmlFor={props.id}>
+                        {props.label}
+                    </label>
+            }
+            <select id={props.id}
+                className="sb-selector-element optionsSelector"
+                value={props.value}
+                title={props.title}
+                onChange={(e) => {
+                    props.onChange(e.target.value);
+                }}>
+                {getOptions(props.options)}
+            </select>
+
+            {
+                props.showResetButton &&
+                <div className="reset-button" onClick={() => {
+                    props.onReset?.();
+                }}>
+                    <ResetIcon/>
+                </div>
+            }
+        </div>
+    );
+};
+
+function getOptions(options: SelectOption[]): React.ReactNode[] {
+    return options.map((option) => {
+        return (
+            <option value={option.value} key={option.value}>{option.label}</option>
+        );
+    });
+}

src/components/options/ToggleOptionComponent.tsx

@@ -1,57 +1,50 @@
 import * as React from "react";
-
-import Config from "../../config";
+import ResetIcon from "../../svg-icons/resetIcon";
 
 export interface ToggleOptionProps { 
-    configKey: string;
     label: string;
+    description?: string;
     disabled?: boolean;
     style?: React.CSSProperties;
+    checked: boolean | null;
+    onChange(checked: boolean): void;
+    partiallyHidden?: boolean;
+    showResetButton?: boolean;
+    onReset?(): void;
 }
 
-export interface ToggleOptionState {
-    enabled: boolean;
-}
+export function ToggleOptionComponent(props: ToggleOptionProps): React.ReactElement {
+    return (
+        <div className={`sb-toggle-option ${props.disabled ? "disabled" : ""} ${props.partiallyHidden ? "partiallyHidden" : ""}`}>
+            <div className="switch-container" style={props.style}>
+                <label className="switch">
+                    <input id={props.label} 
+                        type="checkbox" 
+                        checked={props.checked} 
+                        disabled={props.disabled} 
+                        onChange={(e) => props.onChange(e.target.checked)}/>
+                    <span className="slider round"></span>
+                </label>
+                <label className="switch-label" htmlFor={props.label}>
+                    {props.label}
+                </label>
 
-class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOptionState> {
-
-    constructor(props: ToggleOptionProps) {
-        super(props);
-
-        // Setup state
-        this.state = {
-            enabled: Config.config[props.configKey]
-        }
-    }
-
-    render(): React.ReactElement {
-        return (
-            <div className={`sb-toggle-option ${this.props.disabled ? "disabled" : ""}`}>
-                <div className="switch-container" style={this.props.style}>
-                    <label className="switch">
-                        <input id={this.props.configKey} 
-                            type="checkbox" 
-                            checked={this.state.enabled} 
-                            disabled={this.props.disabled} 
-                            onChange={(e) => this.clicked(e)}/>
-                        <span className="slider round"></span>
-                    </label>
-                    <label className="switch-label" htmlFor={this.props.configKey}>
-                        {this.props.label}
-                    </label>
-                </div>
+                {
+                    props.showResetButton &&
+                        <div className="reset-button sb-switch-label" title={chrome.i18n.getMessage("fallbackToDefault")} onClick={() => {
+                            props.onReset?.();
+                        }}>
+                            <ResetIcon/>
+                        </div>
+                }
             </div>
-        );
-    }
 
-    clicked(event: React.ChangeEvent<HTMLInputElement>): void {
-        Config.config[this.props.configKey] = event.target.checked;
-
-        this.setState({
-            enabled: event.target.checked
-        });
-    }
-
-}
-
-export default ToggleOptionComponent;
+            {
+                props.description &&
+                    <div className="small-description">
+                        {props.description}
+                    </div>
+            }
+        </div>
+    );
+}

src/config.ts

@@ -1,20 +1,17 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
-import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
-import { HashedValue } from "../maze-utils/src/hash";
-
-export interface Permission {
-    canSubmit: boolean;
-}
+import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorHideType, SponsorTime, VideoID, SegmentListDefaultTab } from "./types";
+import { Keybind, keybindEquals, ProtoConfig } from "../maze-utils/src/config";
+import type { HashedValue } from "../maze-utils/src/hash";
+import { AdvancedSkipCheck, AdvancedSkipPredicate, AdvancedSkipRule, Permission, PredicateOperator } from "./utils/skipRule.type";
 
 interface SBConfig {
     userID: string;
     isVip: boolean;
     permissions: Record<Category, Permission>;
     defaultCategory: Category;
+    segmentListDefaultTab: SegmentListDefaultTab;
     renderSegmentsAsChapters: boolean;
-    whitelistedChannels: string[];
     forceChannelCheck: boolean;
     minutesSaved: number;
     skipCount: number;
@@ -32,7 +29,7 @@ interface SBConfig {
     trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
     showUpcomingNotice: boolean;
-    noticeVisibilityMode: NoticeVisbilityMode;
+    noticeVisibilityMode: NoticeVisibilityMode;
     hideVideoPlayerControls: boolean;
     hideInfoButtonPlayerControls: boolean;
     hideDeleteButtonPlayerControls: boolean;
@@ -57,6 +54,7 @@ interface SBConfig {
     donateClicked: number;
     autoHideInfoButton: boolean;
     autoSkipOnMusicVideos: boolean;
+    skipNonMusicOnlyOnYoutubeMusic: boolean;
     colorPalette: {
         red: string;
         white: string;
@@ -64,6 +62,7 @@ interface SBConfig {
     };
     scrollToEditTimeUpdate: boolean;
     categoryPillUpdate: boolean;
+    hookUpdate: boolean;
     showChapterInfoMessage: boolean;
     darkMode: boolean;
     showCategoryGuidelines: boolean;
@@ -79,6 +78,8 @@ interface SBConfig {
     shownDeArrowPromotion: boolean;
     showZoomToFillError2: boolean;
     cleanPopup: boolean;
+    hideSegmentCreationInPopup: boolean;
+    prideTheme: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -97,6 +98,8 @@ interface SBConfig {
     nextChapterKeybind: Keybind;
     previousChapterKeybind: Keybind;
     closeSkipNoticeKeybind: Keybind;
+    upvoteKeybind: Keybind;
+    downvoteKeybind: Keybind;
 
     // What categories should be skipped
     categorySelections: CategorySelection[];
@@ -136,16 +139,36 @@ interface SBConfig {
 
 export type VideoDownvotes = { segments: { uuid: HashedValue; hidden: SponsorHideType }[]; lastAccess: number };
 
+export type ConfigurationID = string & { __configurationID: never };
+
+export interface CustomConfiguration {
+    name: string;
+    categorySelections: CategorySelection[];
+    showAutogeneratedChapters: boolean | null;
+    autoSkipOnMusicVideos: boolean | null;
+    skipNonMusicOnlyOnYoutubeMusic: boolean | null;
+    muteSegments: boolean | null;
+    fullVideoSegments: boolean | null;
+    manualSkipOnFullVideo: boolean | null;
+    minDuration: number | null;
+}
+
 interface SBStorage {
     /* VideoID prefixes to UUID prefixes */
     downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
     navigationApiAvailable: boolean;
-    
+
     // Used when sync storage disabled
     alreadyInstalled: boolean;
 
     /* Contains unsubmitted segments that the user has created. */
     unsubmittedSegments: Record<string, SponsorTime[]>;
+
+    channelSkipProfileIDs: Record<string, ConfigurationID>;
+    skipProfileTemp: { time: number; configID: ConfigurationID } | null;
+    skipProfiles: Record<ConfigurationID, CustomConfiguration>;
+
+    skipRules: AdvancedSkipRule[];
 }
 
 class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
@@ -164,7 +187,84 @@ class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
     }
 }
 
-function migrateOldSyncFormats(config: SBConfig) {
+function migrateOldSyncFormats(config: SBConfig, local: SBStorage) {
+    if (local["skipRules"] && local["skipRules"].length !== 0 && local["skipRules"][0]["rules"]) {
+        const output: AdvancedSkipRule[] = [];
+
+        for (const rule of local["skipRules"]) {
+            const rules: object[] = rule["rules"];
+
+            if (rules.length !== 0) {
+                let predicate: AdvancedSkipPredicate = {
+                    kind: "check",
+                    ...rules[0] as AdvancedSkipCheck,
+                };
+
+                for (let i = 1; i < rules.length; i++) {
+                    predicate = {
+                        kind: "operator",
+                        operator: PredicateOperator.And,
+                        left: predicate,
+                        right: {
+                            kind: "check",
+                            ...rules[i] as AdvancedSkipCheck,
+                        },
+                    };
+                }
+
+                const comment = rule["comment"] as string;
+
+                output.push({
+                    predicate,
+                    skipOption: rule.skipOption,
+                    comments: comment.length === 0 ? [] : comment.split(/;\s*/),
+                });
+            }
+        }
+
+        local["skipRules"] = output;
+    }
+
+    if (config["whitelistedChannels"]) {
+        // convert to skipProfiles
+        const whitelistedChannels = config["whitelistedChannels"] as string[];
+        const skipProfileID: ConfigurationID = "default-whitelist" as ConfigurationID;
+
+        local.skipProfiles[skipProfileID] = {
+            name: chrome.i18n.getMessage("WhitelistedChannels"),
+            categorySelections: config.categorySelections
+                .filter((s) => !["exclusive_access", "chapter"].includes(s.name))
+                .map(s => ({
+                    name: s.name,
+                    option: CategorySkipOption.ShowOverlay
+            })),
+            showAutogeneratedChapters: null,
+            autoSkipOnMusicVideos: null,
+            skipNonMusicOnlyOnYoutubeMusic: null,
+            muteSegments: null,
+            fullVideoSegments: null,
+            manualSkipOnFullVideo: null,
+            minDuration: null
+        };
+        local.skipProfiles = local.skipProfiles;
+
+        for (const channelID of whitelistedChannels) {
+            local.channelSkipProfileIDs[channelID] = skipProfileID;
+        }
+        local.channelSkipProfileIDs = local.channelSkipProfileIDs;
+
+        chrome.storage.sync.remove("whitelistedChannels");
+    }
+
+    if (!config["changeChapterColor"]) {
+        config.barTypes["chapter"].color = "#ffd983";
+        config["changeChapterColor"] = true;
+        chrome.storage.sync.set({
+            "changeChapterColor": true,
+            "barTypes": config.barTypes
+        });
+    }
+
     if (config["showZoomToFillError"]) {
         chrome.storage.sync.remove("showZoomToFillError");
     }
@@ -185,7 +285,7 @@ function migrateOldSyncFormats(config: SBConfig) {
                 name: "chapter" as Category,
                 option: CategorySkipOption.ShowOverlay
             });
-    
+
             config.categorySelections = config.categorySelections;
         }
     }
@@ -276,8 +376,8 @@ const syncDefaults = {
     isVip: false,
     permissions: {},
     defaultCategory: "chooseACategory" as Category,
+    segmentListDefaultTab: SegmentListDefaultTab.Segments,
     renderSegmentsAsChapters: false,
-    whitelistedChannels: [],
     forceChannelCheck: false,
     minutesSaved: 0,
     skipCount: 0,
@@ -295,7 +395,7 @@ const syncDefaults = {
     trackDownvotesInPrivate: false,
     dontShowNotice: false,
     showUpcomingNotice: false,
-    noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
+    noticeVisibilityMode: NoticeVisibilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
     hideInfoButtonPlayerControls: false,
     hideDeleteButtonPlayerControls: false,
@@ -303,7 +403,7 @@ const syncDefaults = {
     hideSkipButtonPlayerControls: false,
     hideDiscordLaunches: 0,
     hideDiscordLink: false,
-    invidiousInstances: ["invidious.snopyta.org"], // leave as default
+    invidiousInstances: [],
     supportInvidious: false,
     serverAddress: CompileConfig.serverAddress,
     minDuration: 0,
@@ -320,8 +420,10 @@ const syncDefaults = {
     donateClicked: 0,
     autoHideInfoButton: true,
     autoSkipOnMusicVideos: false,
+    skipNonMusicOnlyOnYoutubeMusic: false,
     scrollToEditTimeUpdate: false, // false means the tooltip will be shown
     categoryPillUpdate: false,
+    hookUpdate: false,
     showChapterInfoMessage: true,
     darkMode: true,
     showCategoryGuidelines: true,
@@ -337,6 +439,8 @@ const syncDefaults = {
     shownDeArrowPromotion: false,
     showZoomToFillError2: true,
     cleanPopup: false,
+    hideSegmentCreationInPopup: false,
+    prideTheme: false,
 
     categoryPillColors: {},
 
@@ -356,6 +460,8 @@ const syncDefaults = {
     nextChapterKeybind: { key: "ArrowRight", ctrl: true },
     previousChapterKeybind: { key: "ArrowLeft", ctrl: true },
     closeSkipNoticeKeybind: { key: "Backspace" },
+    downvoteKeybind: { key: "h", shift: true },
+    upvoteKeybind: { key: "g", shift: true },
 
     categorySelections: [{
         name: "sponsor" as Category,
@@ -443,6 +549,14 @@ const syncDefaults = {
             color: "#005799",
             opacity: "0.7"
         },
+        "hook": {
+            color: "#395699",
+            opacity: "0.8"
+        },
+        "preview-hook": {
+            color: "#273963",
+            opacity: "0.7"
+        },
         "music_offtopic": {
             color: "#ff9900",
             opacity: "0.7"
@@ -466,7 +580,11 @@ const syncDefaults = {
         "preview-filler": {
             color: "#2E0066",
             opacity: "0.7"
-        }
+        },
+        "chapter": {
+            color: "#ffd983",
+            opacity: "0"
+        },
     }
 };
 
@@ -475,7 +593,12 @@ const localDefaults = {
     navigationApiAvailable: null,
     alreadyInstalled: false,
 
-    unsubmittedSegments: {}
+    unsubmittedSegments: {},
+    skipRules: [],
+
+    channelSkipProfileIDs: {},
+    skipProfiles: {},
+    skipProfileTemp: null
 };
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
@@ -498,7 +621,7 @@ export function generateDebugDetails(): string {
     output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
         ? "Default server address" : "Custom server address";
     output.config.invidiousInstances = output.config.invidiousInstances.length;
-    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
+    output.config.skipRules = output.config.skipRules.length;
 
     return JSON.stringify(output, null, 4);
-}
+}

src/content.ts

@@ -3,7 +3,6 @@ import {
     ActionType,
     Category,
     CategorySkipOption,
-    ChannelIDInfo,
     ChannelIDStatus,
     ContentContainer,
     ScheduledTime,
@@ -33,9 +32,9 @@ import { logDebug, logWarn } from "./utils/logger";
 import { importTimes } from "./utils/exporter";
 import { ChapterVote } from "./render/ChapterVote";
 import { openWarningDialog } from "./utils/warnings";
-import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
-import { getErrorMessage, getFormattedTime } from "../maze-utils/src/formating";
-import { getChannelIDInfo, getVideo, getIsAdPlaying, getIsLivePremiere, setIsAdPlaying, checkVideoIDChange, getVideoID, getYouTubeVideoID, setupVideoModule, checkIfNewVideoID, isOnInvidious, isOnMobileYouTube, getLastNonInlineVideoID, triggerVideoIDChange, triggerVideoElementChange, getIsInline, getCurrentTime, setCurrentTime, getVideoDuration, verifyCurrentTime, waitForVideo } from "../maze-utils/src/video";
+import { extensionUserAgent, isFirefoxOrSafari, waitFor } from "../maze-utils/src";
+import { formatJSErrorMessage, getFormattedTime, getLongErrorMessage } from "../maze-utils/src/formating";
+import { getChannelIDInfo, getVideo, getIsAdPlaying, getIsLivePremiere, setIsAdPlaying, checkVideoIDChange, getVideoID, getYouTubeVideoID, setupVideoModule, checkIfNewVideoID, isOnInvidious, isOnMobileYouTube, isOnYouTubeMusic, isOnYTTV, getLastNonInlineVideoID, triggerVideoIDChange, triggerVideoElementChange, getIsInline, getCurrentTime, setCurrentTime, getVideoDuration, verifyCurrentTime, waitForVideo } from "../maze-utils/src/video";
 import { Keybind, StorageChangesObject, isSafari, keybindEquals, keybindToString } from "../maze-utils/src/config";
 import { findValidElement } from "../maze-utils/src/dom"
 import { getHash, HashedValue } from "../maze-utils/src/hash";
@@ -52,6 +51,9 @@ import { isMobileControlsOpen } from "./utils/mobileUtils";
 import { defaultPreviewTime } from "./utils/constants";
 import { onVideoPage } from "../maze-utils/src/pageInfo";
 import { getSegmentsForVideo } from "./utils/segmentData";
+import { getCategoryDefaultSelection, getCategorySelection } from "./utils/skipRule";
+import { getSkipProfileBool, getSkipProfileIDForTab, hideTooShortSegments, setCurrentTabSkipProfile } from "./utils/skipProfiles";
+import { FetchResponse, logRequest } from "../maze-utils/src/background-request-proxy";
 
 cleanPage();
 
@@ -76,6 +78,7 @@ let sponsorTimes: SponsorTime[] = [];
 let existingChaptersImported = false;
 let importingChaptersWaitingForFocus = false;
 let importingChaptersWaiting = false;
+let loopedChapter :SponsorTime = null;
 // List of open skip notices
 const skipNotices: SkipNotice[] = [];
 let upcomingNotice: UpcomingNotice | null = null;
@@ -144,9 +147,6 @@ let lastCheckVideoTime = -1;
 // To determine if a video resolution change is happening
 let firstPlay = true;
 
-//is this channel whitelised from getting sponsors skipped
-let channelWhitelisted = false;
-
 let previewBar: PreviewBar = null;
 // Skip to highlight button
 let skipButtonControlBar: SkipButtonControlBar = null;
@@ -171,7 +171,7 @@ let popupInitialised = false;
 
 let submissionNotice: SubmissionNotice = null;
 
-let lastResponseStatus: number;
+let lastResponseStatus: number | Error | string;
 
 // Contains all of the functions and variables needed by the skip notice
 const skipNoticeContentContainer: ContentContainer = () => ({
@@ -220,9 +220,14 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             sendResponse({
                 found: sponsorDataFound,
                 status: lastResponseStatus,
-                sponsorTimes: sponsorTimes,
+                sponsorTimes: sponsorTimes.filter((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled),
                 time: getCurrentTime() ?? 0,
-                onMobileYouTube: isOnMobileYouTube()
+                onMobileYouTube: isOnMobileYouTube(),
+                videoID: getVideoID(),
+                loopedChapter: loopedChapter?.UUID,
+                channelID: getChannelIDInfo().id,
+                channelAuthor: getChannelIDInfo().author,
+                currentTabSkipProfileID: getSkipProfileIDForTab()
             });
 
             if (!request.updating && popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
@@ -231,29 +236,13 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             }
 
             popupInitialised = true;
-            break;
-        case "getVideoID":
-            sendResponse({
-                videoID: getVideoID(),
-            });
-
             break;
         case "getChannelID":
             sendResponse({
-                channelID: getChannelIDInfo().id
+                channelID: getChannelIDInfo().id,
+                isYTTV: (document.location.host === "tv.youtube.com")
             });
 
-            break;
-        case "isChannelWhitelisted":
-            sendResponse({
-                value: channelWhitelisted
-            });
-
-            break;
-        case "whitelistChange":
-            channelWhitelisted = request.value;
-            sponsorsLookup();
-
             break;
         case "submitTimes":
             openSubmissionMenu();
@@ -300,16 +289,25 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
         case "copyToClipboard":
             navigator.clipboard.writeText(request.text);
             break;
+        case "loopChapter":
+            if (!request.UUID){
+                loopedChapter = null;
+                break;
+            }
+            loopedChapter = {...utils.getSponsorTimeFromUUID(sponsorTimes, request.UUID)};
+            loopedChapter.segment = [loopedChapter.segment[1], loopedChapter.segment[0]];
+            break;
         case "importSegments": {
             const importedSegments = importTimes(request.data, getVideoDuration());
             let addedSegments = false;
             for (const segment of importedSegments) {
                 if (!sponsorTimesSubmitting.some(
                         (s) => Math.abs(s.segment[0] - segment.segment[0]) < 1
-                            && Math.abs(s.segment[1] - segment.segment[1]) < 1)) {
+                            && Math.abs(s.segment[1] - segment.segment[1]) < 1
+                            && s.description === segment.description)) {
                     const hasChaptersPermission = (Config.config.showCategoryWithoutPermission
                         || Config.config.permissions["chapter"]);
-                    if (segment.category === "chapter" && (!utils.getCategorySelection("chapter") || !hasChaptersPermission)) {
+                    if (segment.category === "chapter" && (!getCategoryDefaultSelection("chapter") || !hasChaptersPermission)) {
                         segment.category = "chooseACategory" as Category;
                         segment.actionType = ActionType.Skip;
                         segment.description = "";
@@ -352,6 +350,10 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
                 warn: window["SBLogs"].warn
             });
             break;
+        case "setCurrentTabSkipProfile":
+            setCurrentTabSkipProfile(request.configID);
+            channelIDChange();
+            break;
     }
 
     sendResponse({});
@@ -369,7 +371,7 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
                 updateVisibilityOfPlayerControlsButton()
                 break;
             case "categorySelections":
-                sponsorsLookup(true, true);
+                channelIDChange();
                 break;
             case "barTypes":
                 setCategoryColorCSSVariables();
@@ -381,9 +383,27 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
         }
     }
 }
+function contentLocalConfigUpdateListener(changes: StorageChangesObject) {
+    for (const key in changes) {
+        switch(key) {
+            case "channelSkipProfileIDs":
+            case "skipProfiles":
+            case "skipProfileTemp":
+            case "skipRules":
+                channelIDChange();
+                break;
+        }
+    }
+}
 
-if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
-    Config.configSyncListeners.push(contentConfigUpdateListener);
+if (!window.location.href.includes("youtube.com/live_chat")) {
+    if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
+        Config.configSyncListeners.push(contentConfigUpdateListener);
+    }
+
+    if (!Config.configLocalListeners.includes(contentLocalConfigUpdateListener)) {
+        Config.configLocalListeners.push(contentLocalConfigUpdateListener);
+    }
 }
 
 function resetValues() {
@@ -395,11 +415,11 @@ function resetValues() {
     sponsorTimes = [];
     existingChaptersImported = false;
     sponsorSkipped = [];
+    loopedChapter = null;
     lastResponseStatus = 0;
     shownSegmentFailedToFetchWarning = false;
 
     videoInfo = null;
-    channelWhitelisted = false;
     lockedCategories = [];
 
     //empty the preview bar
@@ -461,7 +481,8 @@ function videoIDChange(): void {
     chrome.runtime.sendMessage({
         message: "videoChanged",
         videoID: getVideoID(),
-        whitelisted: channelWhitelisted
+        channelID: getChannelIDInfo().id,
+        channelAuthor: getChannelIDInfo().author
     });
 
     sponsorsLookup();
@@ -552,6 +573,10 @@ function getPreviewBarAttachElement(): HTMLElement | null {
         }, {
             // For Vorapis v3
             selector: ".ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list"
+        }, {
+            // For YTTV
+            selector: ".yssi-slider > div.ytu-ss-timeline-container",
+            isVisibleCheck: false
         }
     ];
 
@@ -577,7 +602,7 @@ function createPreviewBar(): void {
 
     if (el) {
         const chapterVote = new ChapterVote(voteAsync);
-        previewBar = new PreviewBar(el, isOnMobileYouTube(), isOnInvidious(), chapterVote, () => importExistingChapters(true));
+        previewBar = new PreviewBar(el, isOnMobileYouTube(), isOnInvidious(), isOnYTTV(), chapterVote, () => importExistingChapters(true));
 
         updatePreviewBar();
     }
@@ -674,7 +699,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
     logDebug(`Ready to start skipping: ${skipInfo.index} at ${currentTime}`);
     if (skipInfo.index === -1) return;
 
-    if (Config.config.disableSkipping || channelWhitelisted || (getChannelIDInfo().status === ChannelIDStatus.Fetching && Config.config.forceChannelCheck)){
+    if (Config.config.disableSkipping || (getChannelIDInfo().status === ChannelIDStatus.Fetching && Config.config.forceChannelCheck)){
         return;
     }
 
@@ -688,7 +713,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         for (const segment of skipInfo.array) {
             if (shouldAutoSkip(segment) &&
                     segment.segment[0] >= skipTime[0] && segment.segment[1] <= skipTime[1]
-                    && segment.segment[0] === segment.scheduledTime) { // Don't include artifical scheduled segments (end times for mutes)
+                    && segment.segment[0] === segment.scheduledTime) { // Don't include artificial scheduled segments (end times for mutes)
                 skippingSegments.push(segment);
             }
         }
@@ -704,8 +729,11 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         if (incorrectVideoCheck(videoID, currentSkip)) return;
         forceVideoTime ||= Math.max(getCurrentTime(), getVirtualTime());
 
-        if ((shouldSkip(currentSkip) || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment))) {
-            if (forceVideoTime >= skipTime[0] - skipBuffer && forceVideoTime < skipTime[1]) {
+        if ((shouldSkip(currentSkip)
+                || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment
+                    && segment.actionType !== ActionType.Chapter
+                    && segment.hidden === SponsorHideType.Visible))) {
+            if (forceVideoTime >= skipTime[0] - skipBuffer && (forceVideoTime < skipTime[1] || skipTime[1] < skipTime[0])) {
                 skipToTime({
                     v: getVideo(),
                     skipTime,
@@ -713,7 +741,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                     openNotice: skipInfo.openNotice
                 });
 
-                // These are segments that start at the exact same time but need seperate notices
+                // These are segments that start at the exact same time but need separate notices
                 for (const extra of skipInfo.extraIndexes) {
                     const extraSkip = skipInfo.array[extra];
                     if (shouldSkip(extraSkip)) {
@@ -726,7 +754,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                     }
                 }
 
-                if (utils.getCategorySelection(currentSkip.category)?.option === CategorySkipOption.ManualSkip
+                if (getCategorySelection(currentSkip)?.option === CategorySkipOption.ManualSkip
                         || currentSkip.actionType === ActionType.Mute) {
                     forcedSkipTime = skipTime[0] + 0.001;
                 } else {
@@ -746,7 +774,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         }
 
         // Don't pretend to be earlier than we are, could result in loops
-        if (forcedSkipTime !== null && forceVideoTime > forcedSkipTime) {
+        if (forcedSkipTime !== null && forceVideoTime > forcedSkipTime && skipTime[1] > skipTime[0]) {
             forcedSkipTime = forceVideoTime;
         }
 
@@ -766,7 +794,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
 
             // Use interval instead of timeout near the end to combat imprecise video time
             const startIntervalTime = forceStartIntervalTime || performance.now();
-            const startVideoTime = Math.max(currentTime, getCurrentTime());
+            const startVideoTime = Math.max(currentTime, getVirtualTime());
             delayTime = (skipTime?.[0] - startVideoTime) * 1000 * (1 / getVideo().playbackRate);
 
             let startWaitingForReportedTimeToChange = true;
@@ -785,7 +813,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                 }
 
                 const intervalDuration = performance.now() - startIntervalTime;
-                if (intervalDuration + skipBuffer * 1000 >= delayTime || getCurrentTime() >= skipTime[0]) {
+                if (intervalDuration + skipBuffer * 1000 >= delayTime || getVirtualTime() + skipBuffer >= skipTime[0]) {
                     clearInterval(currentSkipInterval);
                     if (!isFirefoxOrSafari() && !getVideo().muted && !inMuteSegment(getCurrentTime(), true)) {
                         // Workaround for more accurate skipping on Chromium
@@ -793,7 +821,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                         getVideo().muted = false;
                     }
 
-                    skippingFunction(Math.max(getCurrentTime(), startVideoTime + getVideo().playbackRate * Math.max(delayTime, intervalDuration) / 1000));
+                    skippingFunction(Math.max(getVirtualTime(), startVideoTime + getVideo().playbackRate * Math.max(delayTime, intervalDuration) / 1000));
                 }
             }, 0);
         } else {
@@ -808,6 +836,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
             if (Config.config.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0] 
                     && !sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment)
                     && [ActionType.Skip, ActionType.Mute].includes(skippingSegments[0].actionType)
+                    && getCategorySelection(skippingSegments[0])?.option > CategorySkipOption.ShowOverlay
                     && !getVideo()?.paused) {
                 const maxPopupTime = 3000;
                 const timeUntilPopup = Math.max(0, offsetDelayTime - maxPopupTime);
@@ -836,7 +865,7 @@ function getVirtualTime(): number {
         (performance.now() - lastKnownVideoTime.preciseTime) * (getVideo()?.playbackRate || 1) / 1000 + lastKnownVideoTime.videoTime : null);
 
     if (Config.config.useVirtualTime && !isSafari() && virtualTime
-            && Math.abs(virtualTime - getCurrentTime()) < 0.2 && getCurrentTime() !== 0) {
+            && virtualTime > getCurrentTime() && virtualTime - getCurrentTime() < 0.8 && getCurrentTime() !== 0) {
         return Math.max(virtualTime, getCurrentTime());
     } else {
         return getCurrentTime();
@@ -861,7 +890,8 @@ function incorrectVideoCheck(videoID?: string, sponsorTime?: SponsorTime): boole
     const recordedVideoID = videoID || getVideoID();
     if (currentVideoID !== recordedVideoID || (sponsorTime
             && (!sponsorTimes || !sponsorTimes?.some((time) => time.segment[0] === sponsorTime.segment[0] && time.segment[1] === sponsorTime.segment[1]))
-            && !sponsorTimesSubmitting.some((time) => time.segment[0] === sponsorTime.segment[0] && time.segment[1] === sponsorTime.segment[1]))) {
+            && !sponsorTimesSubmitting.some((time) => time.segment[0] === sponsorTime.segment[0] && time.segment[1] === sponsorTime.segment[1])
+            && (!isLoopedChapter(sponsorTime)))) {
         // Something has really gone wrong
         console.error("[SponsorBlock] The videoID recorded when trying to skip is different than what it should be.");
         console.error("[SponsorBlock] VideoID recorded: " + recordedVideoID + ". Actual VideoID: " + currentVideoID);
@@ -1146,7 +1176,8 @@ function setupSkipButtonControlBar() {
                 forceAutoSkip: true
             }),
             selectSegment,
-            onMobileYouTube: isOnMobileYouTube()
+            onMobileYouTube: isOnMobileYouTube(),
+            onYTTV: isOnYTTV(),
         });
     }
 
@@ -1179,7 +1210,7 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
         const receivedSegments = segmentData.segments;
 
         if (receivedSegments && receivedSegments.length) {
-            sponsorDataFound = true;
+            sponsorDataFound = receivedSegments.findIndex((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled) !== -1;
 
             // Check if any old submissions should be kept
             if (sponsorTimes !== null && keepOldSubmissions) {
@@ -1195,16 +1226,6 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
             sponsorTimes = receivedSegments;
             existingChaptersImported = false;
 
-            // Hide all submissions smaller than the minimum duration
-            if (Config.config.minDuration !== 0) {
-                for (const segment of sponsorTimes) {
-                    const duration = segment.segment[1] - segment.segment[0];
-                    if (duration > 0 && duration < Config.config.minDuration) {
-                        segment.hidden = SponsorHideType.MinimumDuration;
-                    }
-                }
-            }
-
             if (keepOldSubmissions) {
                 for (const segment of oldSegments) {
                     const otherSegment = sponsorTimes.find((other) => segment.UUID === other.UUID);
@@ -1229,6 +1250,8 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
                 }
             }
 
+            hideTooShortSegments(sponsorTimes);
+
             if (!getVideo()) {
                 //there is still no video here
                 await waitForVideo();
@@ -1242,21 +1265,29 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
         }
     }
 
+    notifyPopupOfSegments();
     importExistingChapters(true);
 
+    if (Config.config.isVip) {
+        lockedCategoriesLookup();
+    }
+}
+
+function notifyPopupOfSegments(): void {
     // notify popup of segment changes
     chrome.runtime.sendMessage({
         message: "infoUpdated",
         found: sponsorDataFound,
         status: lastResponseStatus,
-        sponsorTimes: sponsorTimes,
+        sponsorTimes: sponsorTimes.filter((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled),
         time: getCurrentTime() ?? 0,
-        onMobileYouTube: isOnMobileYouTube()
+        onMobileYouTube: isOnMobileYouTube(),
+        videoID: getVideoID(),
+        loopedChapter: loopedChapter?.UUID,
+        channelID: getChannelIDInfo().id,
+        channelAuthor: getChannelIDInfo().author,
+        currentTabSkipProfileID: getSkipProfileIDForTab()
     });
-
-    if (Config.config.isVip) {
-        lockedCategoriesLookup();
-    }
 }
 
 function importExistingChapters(wait: boolean) {
@@ -1283,7 +1314,7 @@ function importExistingChapters(wait: boolean) {
                     }
                 }).catch(() => { importingChaptersWaiting = false; });
 
-            if (!Config.config.showAutogeneratedChapters) {
+            if (!getSkipProfileBool("showAutogeneratedChapters")) {
                 waitFor(() => hasAutogeneratedChapters(), wait ? 15000 : 0, 400).then(() => {
                     updateActiveSegment(getCurrentTime());
                 }).catch(() => { }); // eslint-disable-line @typescript-eslint/no-empty-function
@@ -1292,17 +1323,27 @@ function importExistingChapters(wait: boolean) {
     }
 }
 
+function handleExistingChaptersChannelChange() {
+    if (existingChaptersImported && hasAutogeneratedChapters() && !getSkipProfileBool("showAutogeneratedChapters")) {
+        sponsorTimes = sponsorTimes.filter((segment) => segment.source !== SponsorSourceType.Autogenerated);
+    }
+}
+
 async function lockedCategoriesLookup(): Promise<void> {
     const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
-    const response = await asyncRequestToServer("GET", "/api/lockCategories/" + hashPrefix);
+    try {
+        const response = await asyncRequestToServer("GET", "/api/lockCategories/" + hashPrefix);
 
-    if (response.ok) {
-        try {
+        if (response.ok) {
             const categoriesResponse = JSON.parse(response.responseText).filter((lockInfo) => lockInfo.videoID === getVideoID())[0]?.categories;
             if (Array.isArray(categoriesResponse)) {
                 lockedCategories = categoriesResponse;
             }
-        } catch (e) { } //eslint-disable-line no-empty
+        } else if (response.status !== 404) {
+            logRequest(response, "SB", "locked categories")
+        }
+    } catch (e) {
+        console.warn(`[SB] Caught error while looking up category locks for hashprefix ${hashPrefix}`, e)
     }
 }
 
@@ -1339,10 +1380,12 @@ function startSkipScheduleCheckingForStartSponsors() {
         // For highlight category
         const poiSegments = sponsorTimes
             .filter((time) => time.segment[1] > getCurrentTime()
-                && time.actionType === ActionType.Poi && time.hidden === SponsorHideType.Visible)
+                && time.actionType === ActionType.Poi
+                && time.hidden === SponsorHideType.Visible
+                && getCategorySelection(time).option !== CategorySkipOption.Disabled)
             .sort((a, b) => b.segment[0] - a.segment[0]);
         for (const time of poiSegments) {
-            const skipOption = utils.getCategorySelection(time.category)?.option;
+            const skipOption = getCategorySelection(time)?.option;
             if (skipOption !== CategorySkipOption.ShowOverlay) {
                 skipToTime({
                     v: getVideo(),
@@ -1355,13 +1398,6 @@ function startSkipScheduleCheckingForStartSponsors() {
             }
         }
 
-        const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
-        if (fullVideoSegment) {
-            waitFor(() => categoryPill).then(() => {
-                categoryPill?.setSegment(fullVideoSegment);
-            });
-        }
-
         if (startingSegmentTime !== -1) {
             startSponsorSchedule(undefined, startingSegmentTime);
         } else {
@@ -1390,7 +1426,7 @@ function updatePreviewBar(): void {
     const previewBarSegments: PreviewBarSegment[] = [];
     if (sponsorTimes) {
         sponsorTimes.forEach((segment) => {
-            if (segment.hidden !== SponsorHideType.Visible) return;
+            if (segment.hidden !== SponsorHideType.Visible || getCategorySelection(segment).option === CategorySkipOption.Disabled) return;
 
             previewBarSegments.push({
                 segment: segment.segment as [number, number],
@@ -1407,15 +1443,18 @@ function updatePreviewBar(): void {
     }
 
     sponsorTimesSubmitting.forEach((segment) => {
-        previewBarSegments.push({
-            segment: segment.segment as [number, number],
-            category: segment.category,
-            actionType: segment.actionType,
-            unsubmitted: true,
-            showLarger: segment.actionType === ActionType.Poi,
-            description: segment.description,
-            source: segment.source
-        });
+        if (segment.hidden === SponsorHideType.Visible
+                && (segment.actionType !== ActionType.Chapter || segment.segment.length > 1)) {
+            previewBarSegments.push({
+                segment: segment.segment as [number, number],
+                category: segment.category,
+                actionType: segment.actionType,
+                unsubmitted: true,
+                showLarger: segment.actionType === ActionType.Poi,
+                description: segment.description,
+                source: segment.source
+            });
+        }
     });
 
     previewBar.set(previewBarSegments.filter((segment) => segment.actionType !== ActionType.Full), getVideoDuration())
@@ -1430,18 +1469,25 @@ function updatePreviewBar(): void {
     }
 }
 
-//checks if this channel is whitelisted, should be done only after the channelID has been loaded
-async function channelIDChange(channelIDInfo: ChannelIDInfo) {
-    const whitelistedChannels = Config.config.whitelistedChannels;
-
-    //see if this is a whitelisted channel
-    if (whitelistedChannels != undefined &&
-            channelIDInfo.status === ChannelIDStatus.Found && whitelistedChannels.includes(channelIDInfo.id)) {
-        channelWhitelisted = true;
+function updateCategoryPill() {
+    const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
+    if (fullVideoSegment && getSkipProfileBool("fullVideoSegments")) {
+        categoryPill?.setSegment(fullVideoSegment);
+    } else {
+        categoryPill?.setVisibility(false);
     }
+}
 
+//checks if this channel is whitelisted, should be done only after the channelID has been loaded
+async function channelIDChange() {
     // check if the start of segments were missed
     if (Config.config.forceChannelCheck && sponsorTimes?.length > 0) startSkipScheduleCheckingForStartSponsors();
+
+    hideTooShortSegments(sponsorTimes);
+    handleExistingChaptersChannelChange();
+    updatePreviewBar();
+    updateCategoryPill();
+    notifyPopupOfSegments();
 }
 
 function videoElementChange(newVideo: boolean, video: HTMLVideoElement): void {
@@ -1489,9 +1535,12 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
         {array: ScheduledTime[]; index: number; endIndex: number; extraIndexes: number[]; openNotice: boolean} {
 
     const autoSkipSorter = (segment: ScheduledTime) => {
-        const skipOption = utils.getCategorySelection(segment.category)?.option;
-        if ((skipOption === CategorySkipOption.AutoSkip || shouldAutoSkip(segment))
-                && segment.actionType === ActionType.Skip) {
+        const skipOption = getCategorySelection(segment)?.option;
+        if (segment.hidden !== SponsorHideType.Visible) {
+            // Hidden segments sometimes end up here if another segment is at the same time, use them last
+            return 3;
+        } else if ((skipOption === CategorySkipOption.AutoSkip || shouldAutoSkip(segment))
+                && (segment.actionType === ActionType.Skip || segment.actionType === ActionType.Chapter)) {
             return 0;
         } else if (skipOption !== CategorySkipOption.ShowOverlay) {
             return 1;
@@ -1528,7 +1577,7 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
             array: submittedArray,
             index: minSponsorTimeIndex,
             endIndex: endTimeIndex,
-            extraIndexes, // Segments at same time that need seperate notices
+            extraIndexes, // Segments at same time that need separate notices
             openNotice: true
         };
     } else {
@@ -1563,8 +1612,16 @@ function getLatestEndTimeIndex(sponsorTimes: SponsorTime[], index: number, hideH
         return index;
     }
 
-    // Default to the normal endTime
-    let latestEndTimeIndex = index;
+    let latestEndTimeIndex = -1;
+    // Default to looped chapter if its end would have been skipped
+    if (loopedChapter
+        && (loopedChapter.segment[0] > sponsorTimes[index].segment[0]
+                && loopedChapter.segment[0] <= sponsorTimes[index]?.segment[1])){
+        latestEndTimeIndex = sponsorTimes.length - 1;
+    } else {
+        // or the normal end time otherwise 
+        latestEndTimeIndex = index;
+    }
 
     for (let i = 0; i < sponsorTimes?.length; i++) {
         const currentSegment = sponsorTimes[i].segment;
@@ -1607,7 +1664,8 @@ function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments:
     const shouldIncludeTime = (segment: ScheduledTime ) => (minimum === undefined
         || ((includeNonIntersectingSegments && segment.scheduledTime >= minimum)
             || (includeIntersectingSegments && segment.scheduledTime < minimum
-                    && segment.segment[1] > minimum && shouldSkip(segment)))) // Only include intersecting skippable segments
+                    && ((segment.segment[1] > minimum && shouldSkip(segment)) // Only include intersecting skippable segments
+                        || isLoopedChapter(segment)))))
         && (!hideHiddenSponsors || segment.hidden === SponsorHideType.Visible)
         && segment.segment.length === 2
         && segment.actionType !== ActionType.Poi
@@ -1629,6 +1687,12 @@ function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments:
         }
     });
 
+    if (loopedChapter){
+        possibleTimes.push({
+            ...loopedChapter,
+            scheduledTime: loopedChapter.segment[0]})
+    }
+
     for (let i = 0; i < possibleTimes.length; i++) {
         if (shouldIncludeTime(possibleTimes[i])) {
             scheduledTimes.push(possibleTimes[i].scheduledTime);
@@ -1678,7 +1742,11 @@ function sendTelemetryAndCount(skippingSegments: SponsorTime[], secondsSkipped:
                 counted = true;
             }
 
-            if (fullSkip) asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID + "&videoID=" + getVideoID());
+            if (fullSkip) asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID + "&videoID=" + getVideoID())
+                .then(r => {
+                    if (!r.ok) logRequest(r, "SB", "segment skip log");
+                })
+                .catch(e => console.warn("[SB] Caught error while attempting to log segment skip", e));
         }
     }
 }
@@ -1695,6 +1763,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
             && getCurrentTime() !== skipTime[1]) {
         switch(skippingSegments[0].actionType) {
             case ActionType.Poi:
+            case ActionType.Chapter:
             case ActionType.Skip: {
                 // Fix for looped videos not working when skipping to the end #426
                 // for some reason you also can't skip to 1 second before the end
@@ -1778,7 +1847,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
     if (autoSkip || isSubmittingSegment) sendTelemetryAndCount(skippingSegments, skipTime[1] - skipTime[0], true);
 }
 
-function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, unskipTime: number, startReskip: boolean) {
+function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, unskipTime: number, startReskip: boolean, voteNotice = false) {
     for (const skipNotice of skipNotices) {
         if (skippingSegments.length === skipNotice.segments.length
                 && skippingSegments.every((segment) => skipNotice.segments.some((s) => s.UUID === segment.UUID))) {
@@ -1792,7 +1861,7 @@ function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, un
     const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, () => {
         upcomingNotice?.close();
         upcomingNotice = null;
-    }, unskipTime, startReskip, upcomingNoticeShown);
+    }, unskipTime, startReskip, upcomingNoticeShown, voteNotice);
     if (isOnMobileYouTube() || Config.config.skipKeybind == null) newSkipNotice.setShowKeybindHint(false);
     skipNotices.push(newSkipNotice);
 
@@ -1811,13 +1880,13 @@ function createUpcomingNotice(skippingSegments: SponsorTime[], timeLeft: number,
     upcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft / 1000, autoSkip);
 }
 
-function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false) {
+function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false, voteNotice = false) {
     if (segment.actionType === ActionType.Mute) {
         getVideo().muted = false;
         videoMuted = false;
     }
 
-    if (forceSeek || segment.actionType === ActionType.Skip) {
+    if (forceSeek || segment.actionType === ActionType.Skip || segment.actionType === ActionType.Chapter || voteNotice) {
         //add a tiny bit of time to make sure it is not skipped again
         setCurrentTime(unskipTime ?? segment.segment[0] + 0.001);
     }
@@ -1849,6 +1918,11 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.id = baseID + "Button";
     newButton.classList.add("playerButton");
     newButton.classList.add("ytp-button");
+    if (Config.config.prideTheme) newButton.classList.add("prideTheme");
+    if (isOnYTTV()) {
+        // Some style needs to be set here, but the numbers don't matter 
+        newButton.setAttribute("style", "width: 40px; height: 40px");
+    }
     newButton.setAttribute("title", chrome.i18n.getMessage(title));
     newButton.addEventListener("click", () => {
         callback();
@@ -1878,19 +1952,32 @@ function createButton(baseID: string, title: string, callback: () => void, image
 }
 
 function shouldAutoSkip(segment: SponsorTime): boolean {
-    return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
-        && (utils.getCategorySelection(segment.category)?.option === CategorySkipOption.AutoSkip ||
-            (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
+    const canSkipNonMusic = !Config.config.skipNonMusicOnlyOnYoutubeMusic || isOnYouTubeMusic();
+    if (segment.category === "music_offtopic" && !canSkipNonMusic) {
+        return false;
+    }
+
+    return (!getSkipProfileBool("manualSkipOnFullVideo") || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
+        && (getCategorySelection(segment)?.option === CategorySkipOption.AutoSkip ||
+            (getSkipProfileBool("autoSkipOnMusicVideos") && canSkipNonMusic
+                && sponsorTimes?.some((s) => s.category === "music_offtopic" && getCategorySelection(segment)?.option === CategorySkipOption.AutoSkip)
                 && segment.actionType === ActionType.Skip)
-            || sponsorTimesSubmitting.some((s) => s.segment === segment.segment));
+            || sponsorTimesSubmitting.some((s) => s.segment === segment.segment))
+        || isLoopedChapter(segment);
 }
 
 function shouldSkip(segment: SponsorTime): boolean {
-    return (segment.actionType !== ActionType.Full
-            && segment.source !== SponsorSourceType.YouTube
-            && utils.getCategorySelection(segment.category)?.option !== CategorySkipOption.ShowOverlay)
-            || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
-                && segment.actionType === ActionType.Skip);
+    return segment.hidden === SponsorHideType.Visible && (segment.actionType !== ActionType.Full
+            && getCategorySelection(segment)?.option > CategorySkipOption.ShowOverlay)
+            || (getSkipProfileBool("autoSkipOnMusicVideos")
+                && sponsorTimes?.some((s) => s.category === "music_offtopic" && getCategorySelection(segment)?.option === CategorySkipOption.AutoSkip)
+                && segment.actionType === ActionType.Skip)
+            || isLoopedChapter(segment);
+}
+
+function isLoopedChapter(segment: SponsorTime): boolean{
+    return !!segment && !!loopedChapter && segment.segment[1] != undefined
+        && segment.segment[0] === loopedChapter.segment[0] && segment.segment[1] === loopedChapter.segment[1];
 }
 
 /** Creates any missing buttons on the YouTube player if possible. */
@@ -1923,7 +2010,7 @@ async function updateVisibilityOfPlayerControlsButton(): Promise<void> {
     updateEditButtonsOnPlayer();
 
     // Don't show the info button on embeds
-    if (Config.config.hideInfoButtonPlayerControls || document.URL.includes("/embed/") || isOnInvidious()
+    if (Config.config.hideInfoButtonPlayerControls || document.URL.includes("/embed/") || isOnInvidious() || isOnYTTV()
         || document.getElementById("sponsorBlockPopupContainer") != null) {
         playerButtons.info.button.style.display = "none";
     } else {
@@ -1979,9 +2066,11 @@ function updateEditButtonsOnPlayer(): void {
 function getRealCurrentTime(): number {
     // Used to check if replay button
     const playButtonSVGData = document.querySelector(".ytp-play-button")?.querySelector(".ytp-svg-fill")?.getAttribute("d");
+    const playButtonSVGDataNew = document.querySelector(".ytp-play-button")?.querySelector("path")?.getAttribute("d");
     const replaceSVGData = "M 18,11 V 7 l -5,5 5,5 v -4 c 3.3,0 6,2.7 6,6 0,3.3 -2.7,6 -6,6 -3.3,0 -6,-2.7 -6,-6 h -2 c 0,4.4 3.6,8 8,8 4.4,0 8,-3.6 8,-8 0,-4.4 -3.6,-8 -8,-8 z";
+    const replaceSVGDataNew = "M11.29 2.92C14.85 1.33 18.87 1.06 22";
 
-    if (playButtonSVGData === replaceSVGData) {
+    if (playButtonSVGData === replaceSVGData || playButtonSVGDataNew.startsWith(replaceSVGDataNew)) {
         // At the end of the video
         return getVideoDuration();
     } else {
@@ -1990,7 +2079,12 @@ function getRealCurrentTime(): number {
 }
 
 function startOrEndTimingNewSegment() {
-    verifyCurrentTime();
+    if (isOnYTTV() && getIsLivePremiere()) {
+        alert(chrome.i18n.getMessage("yttvLiveContentWarning"));
+        return;
+    }
+
+    verifyCurrentTime(getRealCurrentTime());
     const roundedTime = Math.round((getRealCurrentTime() + Number.EPSILON) * 1000) / 1000;
     if (!isSegmentCreationInProgress()) {
         sponsorTimesSubmitting.push({
@@ -2071,6 +2165,7 @@ function updateSponsorTimesSubmitting(getFromConfig = true) {
                 category: segmentTime.category,
                 actionType: segmentTime.actionType,
                 description: segmentTime.description,
+                hidden: segmentTime.hidden,
                 source: segmentTime.source
             });
         }
@@ -2216,25 +2311,29 @@ function clearSponsorTimes() {
 async function vote(type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent): Promise<VoteResponse> {
     if (skipNotice !== null && skipNotice !== undefined) {
         //add loading info
-        skipNotice.addVoteButtonInfo.bind(skipNotice)(chrome.i18n.getMessage("Loading"))
-        skipNotice.setNoticeInfoMessage.bind(skipNotice)();
+        skipNotice.addVoteButtonInfo(chrome.i18n.getMessage("Loading"))
+        skipNotice.setNoticeInfoMessage();
     }
 
     const response = await voteAsync(type, UUID, category);
     if (response != undefined) {
         //see if it was a success or failure
         if (skipNotice != null) {
-            if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+            if ("error" in response) {
+                skipNotice.setNoticeInfoMessage(formatJSErrorMessage(response.error))
+                skipNotice.resetVoteButtonInfo();
+            } else if (response.ok || response.status === 429) {
                 //success (treat rate limits as a success)
-                skipNotice.afterVote.bind(skipNotice)(utils.getSponsorTimeFromUUID(sponsorTimes, UUID), type, category);
-            } else if (response.successType == -1) {
-                if (response.statusCode === 403 && response.responseText.startsWith("Vote rejected due to a tip from a moderator.")) {
+                skipNotice.afterVote(utils.getSponsorTimeFromUUID(sponsorTimes, UUID), type, category);
+            } else {
+                logRequest({headers: null, ...response}, "SB", "vote on segment");
+                if (response.status === 403 && response.responseText.startsWith("Vote rejected due to a tip from a moderator.")) {
                     openWarningDialog(skipNoticeContentContainer);
                 } else {
-                    skipNotice.setNoticeInfoMessage.bind(skipNotice)(getErrorMessage(response.statusCode, response.responseText))
+                    skipNotice.setNoticeInfoMessage(getLongErrorMessage(response.status, response.responseText))
                 }
 
-                skipNotice.resetVoteButtonInfo.bind(skipNotice)();
+                skipNotice.resetVoteButtonInfo();
             }
         }
     }
@@ -2271,7 +2370,7 @@ async function voteAsync(type: number, UUID: SegmentUUID, category?: Category):
             category: category,
             videoID: getVideoID()
         }, (response) => {
-            if (response.successType === 1) {
+            if (response.ok === true) {
                 // Change the sponsor locally
                 const segment = utils.getSponsorTimeFromUUID(sponsorTimes, UUID);
                 if (segment) {
@@ -2400,13 +2499,23 @@ async function sendSubmitMessage(): Promise<boolean> {
         }
     }
 
-    const response = await asyncRequestToServer("POST", "/api/skipSegments", {
-        videoID: getVideoID(),
-        userID: Config.config.userID,
-        segments: sponsorTimesSubmitting,
-        videoDuration: getVideoDuration(),
-        userAgent: `${chrome.runtime.id}/v${chrome.runtime.getManifest().version}`
-    });
+    let response: FetchResponse;
+    try {
+        response = await asyncRequestToServer("POST", "/api/skipSegments", {
+            videoID: getVideoID(),
+            userID: Config.config.userID,
+            segments: sponsorTimesSubmitting,
+            videoDuration: getVideoDuration(),
+            userAgent: extensionUserAgent(),
+        });
+    } catch (e) {
+        console.error("[SB] Caught error while attempting to submit segments", e);
+        // Show that the upload failed
+        playerButtons.submit.button.style.animation = "unset";
+        playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
+        alert(formatJSErrorMessage(e));
+        return false;
+    }
 
     if (response.status === 200) {
         stopAnimation();
@@ -2440,11 +2549,7 @@ async function sendSubmitMessage(): Promise<boolean> {
         sponsorTimesSubmitting = [];
 
         updatePreviewBar();
-
-        const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
-        if (fullVideoSegment) {
-            categoryPill?.setSegment(fullVideoSegment);
-        }
+        updateCategoryPill();
 
         return true;
     } else {
@@ -2455,7 +2560,8 @@ async function sendSubmitMessage(): Promise<boolean> {
         if (response.status === 403 && response.responseText.startsWith("Submission rejected due to a tip from a moderator.")) {
             openWarningDialog(skipNoticeContentContainer);
         } else {
-            alert(getErrorMessage(response.status, response.responseText));
+            logRequest(response, "SB", "segment submission");
+            alert(getLongErrorMessage(response.status, response.responseText));
         }
     }
 
@@ -2485,6 +2591,8 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
 }
 
 function updateActiveSegment(currentTime: number): void {
+    if (!chrome.runtime?.id) return;
+
     previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
 
     chrome.runtime.sendMessage({
@@ -2532,24 +2640,31 @@ function previousChapter(): void {
     }
 }
 
-function addHotkeyListener(): void {
-    document.addEventListener("keydown", hotkeyListener);
+async function handleKeybindVote(type: number): Promise<void>{
+    let lastSkipNotice = skipNotices[0]?.skipNoticeRef.current;
+    lastSkipNotice?.onMouseEnter();
 
-    const onLoad = () => {
-        // Allow us to stop propagation to YouTube by being deeper
-        document.removeEventListener("keydown", hotkeyListener);
-        document.body.addEventListener("keydown", hotkeyListener);
+    if (!lastSkipNotice) {
+        const lastSegment = [...sponsorTimes].reverse()?.find((s) => s.source == SponsorSourceType.Server && (s.segment[0] <= getCurrentTime() && getCurrentTime() - (s.segment[1] || s.segment[0]) <= Config.config.skipNoticeDuration));
+        if (!lastSegment) return;
 
-        addCleanupListener(() => {
-            document.body.removeEventListener("keydown", hotkeyListener);
-        });
-    };
-
-    if (document.readyState === "complete") {
-        onLoad();
-    } else {
-        document.addEventListener("DOMContentLoaded", onLoad);
+        createSkipNotice([lastSegment], shouldAutoSkip(lastSegment), lastSegment?.segment[0] + 0.001,false, true);
+        lastSkipNotice = await skipNotices[0].waitForSkipNoticeRef();
+        lastSkipNotice?.reskippedMode(0);
     }
+
+    vote(type,lastSkipNotice?.segments[0]?.UUID, undefined, lastSkipNotice);
+    return;
+}
+
+function addHotkeyListener(): void {
+    document.addEventListener("keydown", hotkeyListener, true);
+    document.addEventListener("keyup", hotkeyPropagationListener, true);
+
+    addCleanupListener(() => {
+        document.body.removeEventListener("keydown", hotkeyListener, true);
+        document.body.removeEventListener("keyup", hotkeyPropagationListener, true);
+    });
 }
 
 function hotkeyListener(e: KeyboardEvent): void {
@@ -2575,9 +2690,11 @@ function hotkeyListener(e: KeyboardEvent): void {
     const openSubmissionMenuKey = Config.config.submitKeybind;
     const nextChapterKey = Config.config.nextChapterKeybind;
     const previousChapterKey = Config.config.previousChapterKeybind;
+    const upvoteKey = Config.config.upvoteKeybind;
+    const downvoteKey = Config.config.downvoteKeybind;
 
     if (keybindEquals(key, skipKey)) {
-        if (activeSkipKeybindElement) {
+        if (activeSkipKeybindElement && !(activeSkipKeybindElement instanceof SkipButtonControlBar)) {
             activeSkipKeybindElement.toggleSkip.call(activeSkipKeybindElement);
         }
 
@@ -2618,6 +2735,38 @@ function hotkeyListener(e: KeyboardEvent): void {
         if (sponsorTimes.length > 0) e.stopPropagation();
         previousChapter();
         return;
+    } else if (keybindEquals(key, upvoteKey)) {
+        handleKeybindVote(1);
+        return;
+    } else if (keybindEquals(key, downvoteKey)) {
+        handleKeybindVote(0);
+        return;
+    }
+}
+
+function hotkeyPropagationListener(e: KeyboardEvent): void {
+    if ((["textarea", "input"].includes(document.activeElement?.tagName?.toLowerCase())
+        || (document.activeElement as HTMLElement)?.isContentEditable
+        || document.activeElement?.id?.toLowerCase()?.match(/editable|input/))
+            && document.hasFocus()) return;
+
+    const key: Keybind = {
+        key: e.key,
+        code: e.code,
+        alt: e.altKey,
+        ctrl: e.ctrlKey,
+        shift: e.shiftKey
+    };
+
+    const nextChapterKey = Config.config.nextChapterKeybind;
+    const previousChapterKey = Config.config.previousChapterKeybind;
+
+    if (keybindEquals(key, nextChapterKey)) {
+        if (sponsorTimes.length > 0) e.stopPropagation();
+        return;
+    } else if (keybindEquals(key, previousChapterKey)) {
+        if (sponsorTimes.length > 0) e.stopPropagation();
+        return;
     }
 }
 
@@ -2668,8 +2817,9 @@ function showTimeWithoutSkips(skippedDuration: number): void {
     // YouTube player time display
     const selector =
         isOnInvidious()     ? ".vjs-duration" :
+        isOnYTTV()          ? ".ypl-full-controls .ypmcs-control .time-info-bar" :
         isOnMobileYouTube() ? ".ytwPlayerTimeDisplayContent" :
-                              ".ytp-time-display.notranslate .ytp-time-wrapper";
+                              ".ytp-time-display.notranslate .ytp-time-wrapper .ytp-time-contents";
     const display = document.querySelector(selector);
     if (!display) return;
 

src/dearrowPromotion.ts

@@ -32,7 +32,7 @@ export async function tryShowingDeArrowPromotion() {
                         const title = deArrowDataJson?.[getVideoID()]?.titles?.[0];
                         if (title && title.title && (title.locked || title.votes > 0)) {
                             Config.config.showDeArrowPromotion = false;
-        
+
                             tooltip = new Tooltip({
                                 text: chrome.i18n.getMessage("DeArrowTitleReplacementSuggestion") + "\n\n" + title.title,
                                 linkOnClick: () => {
@@ -71,4 +71,4 @@ function badTitle(title: string): boolean {
 
 export function hideDeArrowPromotion(): void {
     if (tooltip) tooltip.close();
-}
+}

src/help.ts

@@ -47,6 +47,6 @@ async function init() {
     }
 
     if (!showDonationLink()) {
-        document.getElementById("sbDonate").style.display = "none";
+        document.getElementById("donate-component").style.display = "none";
     }
 }

src/js-components/previewBar.ts

@@ -3,18 +3,19 @@ Based on code from
 https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
 */
 
-'use strict';
-
 import Config from "../config";
 import { ChapterVote } from "../render/ChapterVote";
-import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types";
+import { ActionType, Category, CategorySkipOption, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types";
 import { partition } from "../utils/arrayUtils";
 import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
-import { findValidElement } from "../../maze-utils/src/dom";
+import { findNonEmptyElement, findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
 import { hasAutogeneratedChapters, isVisible } from "../utils/pageUtils";
 import { isVorapisInstalled } from "../utils/compatibility";
+import { isOnYTTV } from "../../maze-utils/src/video";
+import { getCategorySelection } from "../utils/skipRule";
+import { getSkipProfileBool } from "../utils/skipProfiles";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -41,6 +42,12 @@ class PreviewBar {
     categoryTooltip?: HTMLDivElement;
     categoryTooltipContainer?: HTMLElement;
     chapterTooltip?: HTMLDivElement;
+
+    // ScrubTooltips for YTTV only
+    categoryScrubTooltip?: HTMLDivElement;
+    categoryScrubTooltipContainer?: HTMLElement;
+    chapterScrubTooltip?: HTMLDivElement;
+
     lastSmallestSegment: Record<string, {
         index: number;
         segment: PreviewBarSegment;
@@ -49,6 +56,7 @@ class PreviewBar {
     parent: HTMLElement;
     onMobileYouTube: boolean;
     onInvidious: boolean;
+    onYTTV: boolean;
     progressBar: HTMLElement;
 
     segments: PreviewBarSegment[] = [];
@@ -70,14 +78,19 @@ class PreviewBar {
     unfilteredChapterGroups: ChapterGroup[];
     chapterGroups: ChapterGroup[];
 
-    constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, updateExistingChapters: () => void, test=false) {
+    constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, onYTTV: boolean, chapterVote: ChapterVote, updateExistingChapters: () => void, test=false) {
         if (test) return;
         this.container = document.createElement('ul');
         this.container.id = 'previewbar';
 
+        if (onYTTV) {
+            this.container.classList.add("sponsorblock-yttv-container");
+        }
+
         this.parent = parent;
         this.onMobileYouTube = onMobileYouTube;
         this.onInvidious = onInvidious;
+        this.onYTTV = onYTTV;
         this.chapterVote = chapterVote;
         this.updateExistingChapters = updateExistingChapters;
 
@@ -97,26 +110,53 @@ class PreviewBar {
 
         // Create label placeholder
         this.categoryTooltip = document.createElement("div");
-        this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        if (isOnYTTV()) {
+            this.categoryTooltip.className = "sponsorCategoryTooltip";
+        } else {
+            this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        }
         this.chapterTooltip = document.createElement("div");
-        this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        if (isOnYTTV()) {
+            this.chapterTooltip.className = "sponsorCategoryTooltip";
+        } else {
+            this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        }
 
-        // global chaper tooltip or duration tooltip
-        // YT, Vorapis, unknown
-        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
-        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip)") as HTMLElement;
+        if (isOnYTTV()) {
+            this.categoryScrubTooltip = document.createElement("div");
+            this.categoryScrubTooltip.className = "sponsorCategoryTooltip";
+            this.chapterScrubTooltip = document.createElement("div");
+            this.chapterScrubTooltip.className = "sponsorCategoryTooltip";
+        }
+
+        // global chapter tooltip or duration tooltip
+        // YT, Vorapis, unknown, YTTV
+        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container, .yssi-slider .ys-seek-details .time-info-bar") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+        const defaultTooltipSelector = ".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-tooltip-title:not(.sponsorCategoryTooltip) span, .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip), .current-time:not(.sponsorCategoryTooltip)";
+        const originalTooltip = findNonEmptyElement([
+            defaultTooltipSelector,
+            ".ytp-tooltip-progress-bar-pill-title"
+        ]) ?? document.querySelector(defaultTooltipSelector);
         if (!tooltipTextWrapper || !tooltipTextWrapper.parentElement) return;
 
         // Grab the tooltip from the text wrapper as the tooltip doesn't have its classes on init
         this.categoryTooltipContainer = tooltipTextWrapper.parentElement;
-        // YT, Vorapis
-        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title, .ytp-progress-tooltip-text") as HTMLElement;
+        // YT, Vorapis, YTTV
+        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title, .ytp-progress-tooltip-text, .current-time") as HTMLElement;
         if (!this.categoryTooltipContainer || !titleTooltip) return;
 
         tooltipTextWrapper.insertBefore(this.categoryTooltip, titleTooltip.nextSibling);
         tooltipTextWrapper.insertBefore(this.chapterTooltip, titleTooltip.nextSibling);
 
-        const seekBar = document.querySelector(".ytp-progress-bar-container");
+        if (isOnYTTV()) {
+            const scrubTooltipTextWrapper = document.querySelector(".yssi-slider .ysl-filmstrip-lens .time-info-bar")
+            if (!this.categoryTooltipContainer) return;
+    
+            scrubTooltipTextWrapper.appendChild(this.categoryScrubTooltip);
+            scrubTooltipTextWrapper.appendChild(this.chapterScrubTooltip);
+        }
+
+        const seekBar = (document.querySelector(".ytp-progress-bar-container, .ypcs-scrub-slider-slot.ytu-player-controls"));
         if (!seekBar) return;
 
         let mouseOnSeekBar = false;
@@ -147,15 +187,11 @@ class PreviewBar {
             }
 
             const hasAYouTubeChapterRemoved = this.hasYouTubeChapters
-                || (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters());
+                || (!getSkipProfileBool("showAutogeneratedChapters") && hasAutogeneratedChapters());
             if (hasAYouTubeChapterRemoved) {
                 // Hide original tooltip if some chapter has been filtered out
                 originalTooltip.style.display = "none";
                 noYoutubeChapters = true;
-
-                originalTooltip.classList.add("sponsorTooltipHasYTChapters");
-            } else {
-                originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
             }
 
             if (mainSegment === null && secondarySegment === null) {
@@ -163,17 +199,29 @@ class PreviewBar {
                     this.categoryTooltipContainer.classList.remove(TOOLTIP_VISIBLE_CLASS);
                     originalTooltip.style.removeProperty("display");
                 }
+                if (this.onYTTV) {
+                    this.setTooltipTitle(mainSegment, this.categoryTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterTooltip);
+                    this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
+                }
+
+                this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
             } else {
                 this.categoryTooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);
-                if (mainSegment !== null && secondarySegment !== null) {
+                const hasTwoTooltips = mainSegment !== null && secondarySegment !== null;
+                if (hasTwoTooltips) {
                     this.categoryTooltipContainer.classList.add("sponsorTwoTooltips");
-                    originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
                 } else {
                     this.categoryTooltipContainer.classList.remove("sponsorTwoTooltips");
                 }
 
                 this.setTooltipTitle(mainSegment, this.categoryTooltip);
                 this.setTooltipTitle(secondarySegment, this.chapterTooltip);
+                if (this.onYTTV) {
+                    this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
+                }
 
                 if (isVorapisInstalled()) {
                     const tooltipParent = tooltipTextWrapper.parentElement!;
@@ -181,11 +229,15 @@ class PreviewBar {
                 }
 
                 if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent)
-                        || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)) {
+                        || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)
+                        || !originalTooltip.textContent) {
                     if (originalTooltip.style.display !== "none") originalTooltip.style.display = "none";
+                    this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
                     noYoutubeChapters = true;
                 } else if (originalTooltip.style.display === "none") {
                     originalTooltip.style.removeProperty("display");
+                    this.categoryTooltipContainer.classList.add("sponsorHasOriginalTooltip");
+                    noYoutubeChapters = false;
                 }
 
                 // To prevent offset issue
@@ -211,6 +263,21 @@ class PreviewBar {
             }
 
             tooltip.style.removeProperty("display");
+
+            // For July 2025 test layout
+            if (document.querySelector(".ytp-delhi-modern")) {
+                tooltip.style.display = "inline-block";
+
+                // Class gets added back, so grab the top value for when the class is removed
+                tooltip.style.removeProperty("top");
+                tooltip.classList.remove("ytp-tooltip-text-no-title");
+
+                if (tooltip === this.chapterTooltip) {
+                    tooltip.style.top = `calc(${window.getComputedStyle(tooltip).getPropertyValue("top")} + 5px)`;
+                } else {
+                    tooltip.style.top = window.getComputedStyle(tooltip).getPropertyValue("top");
+                }
+            }
         } else {
             tooltip.style.display = "none";
         }
@@ -226,7 +293,12 @@ class PreviewBar {
         }
 
         // On the seek bar
-        this.parent.prepend(this.container);
+        if (this.onYTTV) {
+            // order of sibling elements matters on YTTV
+            this.parent.insertBefore(this.container, this.parent.firstChild.nextSibling.nextSibling);
+        } else {
+            this.parent.prepend(this.container);
+        }
     }
 
     clear(): void {
@@ -248,14 +320,14 @@ class PreviewBar {
     set(segments: PreviewBarSegment[], videoDuration: number): void {
         this.segments = segments ?? [];
         this.videoDuration = videoDuration ?? 0;
-        this.hasYouTubeChapters = segments.some((segment) => segment.source === SponsorSourceType.YouTube);
+        this.hasYouTubeChapters = segments.some((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source));
 
         // Remove unnecessary original chapters if submitted replacements exist
         for (const chapter of this.segments.filter((s) => s.actionType === ActionType.Chapter && s.source === SponsorSourceType.Server)) {
             const segmentDuration = chapter.segment[1] - chapter.segment[0];
             
             const duplicate = this.segments.find((s) => s.actionType === ActionType.Chapter 
-                && s.source === SponsorSourceType.YouTube
+                && [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(s.source) 
                 && Math.abs(s.segment[0] - chapter.segment[0]) < Math.min(3, segmentDuration / 3)
                 && Math.abs(s.segment[1] - chapter.segment[1]) < Math.min(3, segmentDuration / 3));
             
@@ -303,7 +375,7 @@ class PreviewBar {
         this.chapterMargin = 2;
         if (this.originalChapterBar) {
             this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement>
-            this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]);
+            this.existingChapters = this.segments.filter((s) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(s.source)).sort((a, b) => a.segment[0] - b.segment[0]);
 
             if (this.existingChapters?.length > 0) {
                 const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
@@ -325,7 +397,7 @@ class PreviewBar {
         this.createChaptersBar(this.segments.sort((a, b) => a.segment[0] - b.segment[0]));
 
         if (chapterChevron) {
-            if (this.segments.some((segment) => segment.source === SponsorSourceType.YouTube)) {
+            if (this.segments.some((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))) {
                 chapterChevron.style.removeProperty("display");
             } else if (this.segments) {
                 chapterChevron.style.display = "none";
@@ -362,6 +434,10 @@ class PreviewBar {
             bar.style.marginRight = `${this.chapterMargin}px`;
         }
 
+        if (this.onYTTV) {
+            bar.classList.add("previewbar-yttv");
+        }
+
         return bar;
     }
 
@@ -383,11 +459,11 @@ class PreviewBar {
             this.unfilteredChapterGroups = this.createChapterRenderGroups(segments);
         }
         
-        if ((segments.every((segments) => segments.source === SponsorSourceType.YouTube)
+        if ((segments.every((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))
             || (!Config.config.renderSegmentsAsChapters
                 && segments.every((segment) => segment.actionType !== ActionType.Chapter
-                    || segment.source === SponsorSourceType.YouTube)))
-            && !(hasAutogeneratedChapters() && !Config.config.showAutogeneratedChapters)) {
+                    || [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))))
+            && !(hasAutogeneratedChapters() && !getSkipProfileBool("showAutogeneratedChapters"))) {
 
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
             this.originalChapterBar.style.removeProperty("display");
@@ -414,7 +490,7 @@ class PreviewBar {
             this.chapterGroups = this.unfilteredChapterGroups;
         }
 
-        if (this.chapterGroups.length === 0 && !Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+        if (this.chapterGroups.length === 0 && !getSkipProfileBool("showAutogeneratedChapters") && hasAutogeneratedChapters()) {
             // Add placeholder chapter group for whole video
             this.chapterGroups = [{
                 segment: [0, this.videoDuration],
@@ -816,7 +892,7 @@ class PreviewBar {
         if (!Config.config.showSegmentNameInChapterBar
                 || Config.config.disableSkipping
                 || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0 
-                    && (Config.config.showAutogeneratedChapters || !hasAutogeneratedChapters()))) {
+                    && (getSkipProfileBool("showAutogeneratedChapters") || !hasAutogeneratedChapters()))) {
             const chaptersContainer = this.getChaptersContainer();
             if (chaptersContainer) {
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
@@ -834,7 +910,8 @@ class PreviewBar {
         const activeSegments = segments.filter((segment) => {
             return segment.hidden === SponsorHideType.Visible
                 && segment.segment[0] <= currentTime && segment.segment[1] > currentTime
-                && segment.category !== DEFAULT_CATEGORY;
+                && segment.category !== DEFAULT_CATEGORY
+                && getCategorySelection(segment).option !== CategorySkipOption.Disabled
         });
 
         this.setActiveSegments(activeSegments);
@@ -868,8 +945,10 @@ class PreviewBar {
                 })[0];
 
                 const chapterButton = this.getChapterButton(chaptersContainer);
-                chapterButton.classList.remove("ytp-chapter-container-disabled");
-                chapterButton.disabled = false;
+                if (chapterButton) {
+                    chapterButton.classList.remove("ytp-chapter-container-disabled");
+                    chapterButton.disabled = false;
+                }
 
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
                 chapterTitle.style.display = "none";
@@ -878,6 +957,9 @@ class PreviewBar {
                     const elem = document.createElement("div");
                     chapterTitle.parentElement.insertBefore(elem, chapterTitle);
                     elem.classList.add("sponsorChapterText");
+                    if (document.location.host === "tv.youtube.com") {
+                        elem.style.lineHeight = "initial";
+                    }
                     return elem;
                 })()) as HTMLDivElement;
                 chapterCustomText.innerText = chosenSegment.description || shortCategoryName(chosenSegment.category);
@@ -890,7 +972,15 @@ class PreviewBar {
 
                 if (chosenSegment.source === SponsorSourceType.Server) {
                     const chapterVoteContainer = this.chapterVote.getContainer();
-                    if (!chapterButton.contains(chapterVoteContainer)) {
+                    if (document.location.host === "tv.youtube.com") {
+                        if (!chaptersContainer.contains(chapterVoteContainer)) {
+                            const oldVoteContainers = document.querySelectorAll("#chapterVote");
+                            if (oldVoteContainers.length > 0) {
+                                oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
+                            }
+                            chaptersContainer.appendChild(chapterVoteContainer);
+                        }
+                    } else if (!chapterButton.contains(chapterVoteContainer)) {
                         const oldVoteContainers = document.querySelectorAll("#chapterVote");
                         if (oldVoteContainers.length > 0) {
                             oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
@@ -904,7 +994,7 @@ class PreviewBar {
                 } else {
                     this.chapterVote.setVisibility(false);
                 }
-            } else if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+            } else if (!getSkipProfileBool("showAutogeneratedChapters") && hasAutogeneratedChapters()) {
                 // Keep original hidden
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
@@ -929,6 +1019,18 @@ class PreviewBar {
     }
 
     private getChaptersContainer(): HTMLElement {
+        if (document.location.host === "tv.youtube.com") {
+            if (!document.querySelector(".ytp-chapter-container")) {
+                const dest = document.querySelector(".ypcs-control-buttons-left");
+                if (!dest) return null;
+                const sbChapterContainer = document.createElement("div");
+                sbChapterContainer.className = "ytp-chapter-container";
+                const sbChapterTitleContent = document.createElement("div");
+                sbChapterTitleContent.className = "ytp-chapter-title-content";
+                sbChapterContainer.appendChild(sbChapterTitleContent);
+                dest.appendChild(sbChapterContainer);
+            }
+        }
         return document.querySelector(".ytp-chapter-container") as HTMLElement;
     }
 

src/js-components/skipButtonControlBar.ts

@@ -9,6 +9,7 @@ export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
     selectSegment: (UUID: SegmentUUID) => void;
     onMobileYouTube: boolean;
+    onYTTV: boolean;
 }
 
 export class SkipButtonControlBar {
@@ -21,6 +22,7 @@ export class SkipButtonControlBar {
 
     showKeybindHint = true;
     onMobileYouTube: boolean;
+    onYTTV: boolean;
 
     enabled = false;
 
@@ -40,6 +42,7 @@ export class SkipButtonControlBar {
     constructor(props: SkipButtonControlBarProps) {
         this.skip = props.skip;
         this.onMobileYouTube = props.onMobileYouTube;
+        this.onYTTV = props.onYTTV;
 
         this.container = document.createElement("div");
         this.container.classList.add("skipButtonControlBarContainer");
@@ -50,6 +53,10 @@ export class SkipButtonControlBar {
         this.skipIcon.src = chrome.runtime.getURL("icons/skipIcon.svg");
         this.skipIcon.classList.add("ytp-button");
         this.skipIcon.id = "sbSkipIconControlBarImage";
+        if (this.onYTTV) {
+            this.skipIcon.style.width = "24px";
+            this.skipIcon.style.height = "24px";
+        }
 
         this.textContainer = document.createElement("div");
 
@@ -84,7 +91,7 @@ export class SkipButtonControlBar {
         this.chapterText = document.querySelector(".ytp-chapter-container");
 
         if (mountingContainer && !mountingContainer.contains(this.container)) {
-            if (this.onMobileYouTube) {
+            if (this.onMobileYouTube || this.onYTTV) {
                 mountingContainer.appendChild(this.container);
             } else {
                 mountingContainer.insertBefore(this.container, this.chapterText);
@@ -101,8 +108,10 @@ export class SkipButtonControlBar {
     }
 
     private getMountingContainer(): HTMLElement {
-        if (!this.onMobileYouTube) {
+        if (!this.onMobileYouTube && !this.onYTTV) {
             return document.querySelector(".ytp-left-controls");
+        } else if (this.onYTTV) {
+            return document.querySelector(".ypcs-control-buttons-left");
         } else {
             return document.getElementById("player-container-id");
         }

src/messageTypes.ts

@@ -2,7 +2,8 @@
 // Message and Response Types
 //
 
-import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
+import { ConfigurationID } from "./config";
+import { SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "./types";
 
 interface BaseMessage {
     from?: string;
@@ -12,20 +13,13 @@ interface DefaultMessage {
     message:
         "update"
         | "sponsorStart"
-        | "getVideoID"
         | "getChannelID"
-        | "isChannelWhitelisted"
         | "submitTimes"
         | "refreshSegments"
         | "closePopup"
         | "getLogs";
 }
 
-interface BoolValueMessage {
-    message: "whitelistChange";
-    value: boolean;
-}
-
 interface IsInfoFoundMessage {
     message: "isInfoFound";
     updating: boolean;
@@ -58,6 +52,11 @@ interface ImportSegmentsMessage {
     data: string;
 }
 
+interface LoopChapterMessage {
+    message: "loopChapter";
+    UUID: SegmentUUID;
+}
+
 interface KeyDownMessage {
     message: "keydown";
     key: string;
@@ -70,14 +69,24 @@ interface KeyDownMessage {
     metaKey: boolean;
 }
 
-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage);
+interface SetCurrentTabSkipProfileResponse {
+    message: "setCurrentTabSkipProfile";
+    configID: ConfigurationID | null;
+}
+
+export type Message = BaseMessage & (DefaultMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage | LoopChapterMessage | SetCurrentTabSkipProfileResponse);
 
 export interface IsInfoFoundMessageResponse {
     found: boolean;
-    status: number;
+    status: number | string | Error;
     sponsorTimes: SponsorTime[];
     time: number;
     onMobileYouTube: boolean;
+    videoID: VideoID;
+    loopedChapter: SegmentUUID | null;
+    channelID: string;
+    channelAuthor: string;
+    currentTabSkipProfileID: ConfigurationID | null;
 }
 
 interface GetVideoIdResponse {
@@ -86,6 +95,7 @@ interface GetVideoIdResponse {
 
 export interface GetChannelIDResponse {
     channelID: string;
+    isYTTV: boolean;
 }
 
 export interface SponsorStartResponse {
@@ -96,6 +106,10 @@ export interface IsChannelWhitelistedResponse {
     value: boolean;
 }
 
+export interface LoopedChapterResponse {
+    UUID: SegmentUUID;
+}
+
 export type MessageResponse =
     IsInfoFoundMessageResponse
     | GetVideoIdResponse
@@ -106,13 +120,16 @@ export type MessageResponse =
     | VoteResponse
     | ImportSegmentsResponse
     | RefreshSegmentsResponse
-    | LogResponse;
+    | LogResponse
+    | LoopedChapterResponse;
 
-export interface VoteResponse {
-    successType: number;
-    statusCode: number;
+export type VoteResponse = {
+    status: number;
+    ok: boolean;
     responseText: string;
-}
+} | {
+    error: Error | string;
+};
 
 interface ImportSegmentsResponse {
     importedSegments: SponsorTime[];
@@ -139,7 +156,8 @@ export type InfoUpdatedMessage = IsInfoFoundMessageResponse & {
 export interface VideoChangedPopupMessage {
     message: "videoChanged";
     videoID: string;
-    whitelisted: boolean;
+    channelID: string;
+    channelAuthor: string;
 }
 
 export type PopupMessage = TimeUpdateMessage | InfoUpdatedMessage | VideoChangedPopupMessage;

src/options.ts

@@ -18,6 +18,7 @@ import { getHash } from "../maze-utils/src/hash";
 import { isFirefoxOrSafari } from "../maze-utils/src";
 import { isDeArrowInstalled } from "./utils/crossExtension";
 import { asyncRequestToServer } from "./utils/requests";
+import AdvancedSkipOptions from "./render/AdvancedSkipOptions";
 const utils = new Utils();
 let embed = false;
 
@@ -71,6 +72,12 @@ async function init() {
         document.documentElement.setAttribute("data-theme", "light");
     }
 
+    if (Config.config.prideTheme) {
+        document.documentElement.setAttribute("data-theme", "pride");
+
+        (document.getElementById("title-bar-logo") as HTMLImageElement).src = "../icons/sb-pride.png";
+    }
+
     const donate = document.getElementById("sbDonate");
     donate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
     if (!showDonationLink()) {
@@ -114,8 +121,25 @@ async function init() {
 
         if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
             optionsElements[i].classList.add("hidden", "hiding");
-            if (!dependentOn)
+            if (!dependentOn) {
+                if (optionsElements[i].getAttribute("data-no-safari") === "true" && optionsElements[i].id === "support-invidious") {
+                    // Put message about being disabled on safari
+                    const infoBox = document.createElement("div");
+                    infoBox.innerText = chrome.i18n.getMessage("invidiousDisabledSafari");
+                    
+                    const link = document.createElement("a");
+                    link.style.display = "block";
+                    const url = "https://bugs.webkit.org/show_bug.cgi?id=290508";
+                    link.href = url;
+                    link.innerText = url;
+
+                    infoBox.appendChild(link);
+
+                    optionsElements[i].parentElement.insertBefore(infoBox, optionsElements[i].nextSibling);
+                }
+
                 continue;
+            }
         }
 
         const option = optionsElements[i].getAttribute("data-sync");
@@ -178,6 +202,17 @@ async function init() {
                                 document.documentElement.setAttribute("data-theme", "light");
                             }
                             break;
+                        case "prideTheme":
+                            if (checkbox.checked) {
+                                document.documentElement.setAttribute("data-theme", "pride");
+                            } else {
+                                if (Config.config.darkMode) {
+                                    document.documentElement.setAttribute("data-theme", "dark");
+                                } else {
+                                    document.documentElement.setAttribute("data-theme", "light");
+                                }
+                            }
+                            break;
                         case "trackDownvotes":
                             if (!checkbox.checked) {
                                 Config.local.downvotedSegments = {};
@@ -333,6 +368,9 @@ async function init() {
             case "react-CategoryChooserComponent":
                 categoryChoosers.push(new CategoryChooser(optionsElements[i]));
                 break;
+            case "react-AdvancedSkipOptionsComponent":
+                new AdvancedSkipOptions(optionsElements[i]);
+                break;
             case "react-UnsubmittedVideosComponent":
                 unsubmittedVideos.push(new UnsubmittedVideos(optionsElements[i]));
                 break;
@@ -393,7 +431,7 @@ async function shouldHideOption(element: Element): Promise<boolean> {
 /**
  * Called when the config is updated
  */
-function optionsConfigUpdateListener(changes: StorageChangesObject) {
+function optionsConfigUpdateListener() {
     const optionsContainer = document.getElementById("options");
     const optionsElements = optionsContainer.querySelectorAll("*");
 
@@ -404,12 +442,6 @@ function optionsConfigUpdateListener(changes: StorageChangesObject) {
                 break;
         }
     }
-
-    if (changes.categorySelections || changes.payments) {
-        for (const chooser of categoryChoosers) {
-            chooser.update();
-        }
-    }
 }
 
 function optionsLocalConfigUpdateListener(changes: StorageChangesObject) {
@@ -588,6 +620,8 @@ function activatePrivateTextChange(element: HTMLElement) {
                     if (userInfo.warnings > 0 || userInfo.banned) {
                         setButton.classList.add("hidden");
                     }
+                }).catch(e => {
+                    console.error("[SB] Caught error while fetching user info for the new user ID", e)
                 });
             }
 

src/popup/PopupComponent.tsx

@@ -0,0 +1,722 @@
+import * as React from "react";
+import { YourWorkComponent } from "./YourWorkComponent";
+import { isSafari } from "../../maze-utils/src/config";
+import { showDonationLink } from "../utils/configUtils";
+import Config, { ConfigurationID, generateDebugDetails } from "../config";
+import { IsInfoFoundMessageResponse, LogResponse, Message, MessageResponse, PopupMessage } from "../messageTypes";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { SegmentListComponent } from "./SegmentListComponent";
+import { ActionType, SegmentUUID, SponsorSourceType, SponsorTime } from "../types";
+import { SegmentSubmissionComponent } from "./SegmentSubmissionComponent";
+import { copyToClipboardPopup } from "./popupUtils";
+import { getSkipProfileID, getSkipProfileIDForChannel, getSkipProfileIDForTab, getSkipProfileIDForTime, getSkipProfileIDForVideo, setCurrentTabSkipProfile } from "../utils/skipProfiles";
+import { SelectOptionComponent } from "../components/options/SelectOptionComponent";
+import * as Video from "../../maze-utils/src/video";
+
+export enum LoadingStatus {
+    Loading,
+    SegmentsFound,
+    NoSegmentsFound,
+    ConnectionError,
+    JSError,
+    StillLoading,
+    NoVideo
+}
+
+export interface LoadingData {
+    status: LoadingStatus;
+    code?: number;
+    error?: Error | string;
+}
+
+type SkipProfileAction = "forJustThisVideo" | "forThisChannel" | "forThisTab" | "forAnHour" | null;
+interface SkipProfileOption {
+    name: SkipProfileAction;
+    active: () => boolean;
+}
+
+interface SegmentsLoadedProps {
+    setStatus: (status: LoadingData) => void;
+    setVideoID: (videoID: string | null) => void;
+    setCurrentTime: (time: number) => void;
+    setSegments: (segments: SponsorTime[]) => void;
+    setLoopedChapter: (loopedChapter: SegmentUUID | null) => void;
+}
+
+interface LoadSegmentsProps extends SegmentsLoadedProps {
+    updating: boolean;
+}
+
+interface SkipProfileRadioButtonsProps {
+    selected: SkipProfileAction;
+    setSelected: (s: SkipProfileAction, updateConfig: boolean) => void;
+    disabled: boolean;
+    configID: ConfigurationID | null;
+    videoID: string;
+}
+
+interface SkipOptionActionComponentProps {
+    selected: boolean;
+    setSelected: (s: boolean) => void;
+    highlighted: boolean;
+    disabled: boolean;
+    overridden: boolean;
+    label: string;
+}
+
+let loadRetryCount = 0;
+
+export const PopupComponent = () => {
+    const [status, setStatus] = React.useState<LoadingData>({
+        status: LoadingStatus.Loading
+    });
+    const [extensionEnabled, setExtensionEnabled] = React.useState(!Config.config!.disableSkipping);
+    const [showForceChannelCheckWarning, setShowForceChannelCheckWarning] = React.useState(false);
+    const [showNoticeButton, setShowNoticeButton] = React.useState(Config.config!.dontShowNotice);
+
+    const [currentTime, setCurrentTime] = React.useState<number>(0);
+    const [segments, setSegments] = React.useState<SponsorTime[]>([]);
+    const [loopedChapter, setLoopedChapter] = React.useState<SegmentUUID | null>(null);
+
+    const [videoID, setVideoID] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        loadSegments({
+            updating: false,
+            setStatus,
+            setVideoID,
+            setCurrentTime,
+            setSegments,
+            setLoopedChapter
+        });
+
+        setupComPort({
+            setStatus,
+            setVideoID,
+            setCurrentTime,
+            setSegments,
+            setLoopedChapter
+        });
+
+        forwardClickEvents(sendMessage);
+    }, []);
+
+    return (
+        <div id="sponsorblockPopup" className={Config.config.prideTheme ? "prideTheme" : ""}>
+            {
+                window !== window.top &&
+                <button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
+                    sendMessage({ message: "closePopup" });
+                }}>
+                    <img src="icons/close.png" width="15" height="15" alt="Close icon"/>
+                </button>
+            }
+
+            {
+                Config.config!.testingServer &&
+                <div id="sbBetaServerWarning"
+                        title={chrome.i18n.getMessage("openOptionsPage")}
+                        onClick={() => {
+                            chrome.runtime.sendMessage({ "message": "openConfig", "hash": "advanced" });
+                        }}>
+                    {chrome.i18n.getMessage("betaServerWarning")}
+                </div>
+            }
+
+            <header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
+                <img src={Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png"}
+                    alt="SponsorBlock Logo"
+                    width="40"
+                    height="40"
+                    id="sponsorBlockPopupLogo"
+                />
+                <p className="u-mZ">
+                    SponsorBlock
+                </p>
+            </header>
+
+            <p id="videoFound" 
+                    className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}>
+                {getVideoStatusText(status)}
+            </p>
+
+            <button id="refreshSegmentsButton" title={chrome.i18n.getMessage("refreshSegments")} onClick={(e) => {
+                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+
+                sendMessage({ message: "refreshSegments" }).then(() => {
+                    loadSegments({
+                        updating: true,
+                        setStatus,
+                        setVideoID,
+                        setCurrentTime,
+                        setSegments,
+                        setLoopedChapter
+                    }).then(() => stopAnimation());
+                });
+
+            }}>
+                <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
+            </button>
+
+            <SegmentListComponent
+                videoID={videoID}
+                currentTime={currentTime}
+                status={status.status}
+                segments={segments}
+                loopedChapter={loopedChapter}
+                sendMessage={sendMessage} />
+
+            {/* Toggle Box */}
+            <div className="sbControlsMenu">
+                {
+                    videoID &&
+                        <SkipProfileButton
+                            videoID={videoID}
+                            setShowForceChannelCheckWarning={setShowForceChannelCheckWarning}
+                        />
+                }
+                <label id="disableExtension" htmlFor="toggleSwitch" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
+                    <span className="toggleSwitchContainer-switch">
+                        <input type="checkbox" 
+                            style={{ "display": "none" }} 
+                            id="toggleSwitch" 
+                            checked={extensionEnabled}
+                            onChange={(e) => {
+                                Config.config!.disableSkipping = !e.target.checked;
+                                setExtensionEnabled(e.target.checked)
+                            }}/>
+                        <span className="switchBg shadow"></span>
+                        <span className="switchBg white"></span>
+                        <span className="switchBg green"></span>
+                        <span className="switchDot"></span>
+                    </span>
+                    <span id="disableSkipping" className={extensionEnabled ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("enableSkipping")}
+                    </span>
+                    <span id="enableSkipping" className={!extensionEnabled ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("disableSkipping")}
+                    </span>
+                </label>
+                <button id="optionsButton" 
+                    className="sbControlsMenu-item" 
+                    title={chrome.i18n.getMessage("Options")}
+                    onClick={() => {
+                        chrome.runtime.sendMessage({ "message": "openConfig" });
+                    }}>
+                <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" className="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
+                    {chrome.i18n.getMessage("Options")}
+                </button>
+            </div>
+
+            {
+                showForceChannelCheckWarning &&
+                <a id="whitelistForceCheck" onClick={() => {
+                    chrome.runtime.sendMessage({ "message": "openConfig", "hash": "behavior" });
+                }}>
+                    {chrome.i18n.getMessage("forceChannelCheckPopup")}
+                </a>
+            }
+
+            {
+                !Config.config.cleanPopup && !Config.config.hideSegmentCreationInPopup &&
+                <SegmentSubmissionComponent
+                    videoID={videoID || ""}
+                    status={status.status}
+                    sendMessage={sendMessage} />
+            }
+            
+
+            {/* Your Work box */}
+            {
+                !Config.config.cleanPopup &&
+                <YourWorkComponent/>
+            }
+
+            {/* Footer */}
+            {
+                !Config.config.cleanPopup &&
+                <footer id="sbFooter">
+                    <a id="helpButton"
+                        onClick={() => {
+                            chrome.runtime.sendMessage({ "message": "openHelp" });
+                        }}>
+                            {chrome.i18n.getMessage("help")}
+                    </a>
+                    <a href="https://sponsor.ajay.app" target="_blank" rel="noreferrer">
+                        {chrome.i18n.getMessage("website")}
+                    </a>
+                    <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noreferrer" className={isSafari() ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("viewLeaderboard")}
+                    </a>
+                    <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" className={!showDonationLink() ? " hidden" : ""} onClick={() => {
+                        Config.config!.donateClicked = Config.config!.donateClicked + 1;
+                    }}>
+                        {chrome.i18n.getMessage("Donate")}
+                    </a>
+                    <br />
+                    <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noreferrer">
+                        GitHub
+                    </a>
+                    <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noreferrer">
+                        Discord
+                    </a>
+                    <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noreferrer">
+                        Matrix
+                    </a>
+                    <a href="https://wiki.sponsor.ajay.app/w/Guidelines" target="_blank" rel="noreferrer">
+                        {chrome.i18n.getMessage("guidelines")}
+                    </a>
+                    <br />
+                    <a id="debugLogs"
+                            onClick={async () => {
+                                const logs = await sendMessage({ message: "getLogs" }) as LogResponse;
+
+                                copyToClipboardPopup(`${generateDebugDetails()}\n\nWarn:\n${logs.warn.join("\n")}\n\nDebug:\n${logs.debug.join("\n")}`, sendMessage);
+                            }}>
+                        {chrome.i18n.getMessage("copyDebugLogs")}
+                    </a>
+                </footer>
+            }
+
+            {
+                showNoticeButton &&
+                <button id="showNoticeAgain" onClick={() => {
+                    Config.config!.dontShowNotice = false;
+                    setShowNoticeButton(false);
+                }}>
+                    { chrome.i18n.getMessage("showNotice") }
+                </button>
+            }
+        </div>
+    );
+};
+
+function getVideoStatusText(status: LoadingData): string {
+    switch (status.status) {
+        case LoadingStatus.Loading:
+            return chrome.i18n.getMessage("Loading");
+        case LoadingStatus.SegmentsFound:
+            return chrome.i18n.getMessage("sponsorFound");
+        case LoadingStatus.NoSegmentsFound:
+            return chrome.i18n.getMessage("sponsor404");
+        case LoadingStatus.ConnectionError:
+            return `${chrome.i18n.getMessage("connectionError")} ${chrome.i18n.getMessage("errorCode").replace("{code}", `${status.code}`)}`;
+        case LoadingStatus.JSError:
+            return `${chrome.i18n.getMessage("connectionError")} ${status.error}`;
+        case LoadingStatus.StillLoading:
+            return chrome.i18n.getMessage("segmentsStillLoading");
+        case LoadingStatus.NoVideo:
+            return chrome.i18n.getMessage("noVideoID");
+    }
+}
+
+async function loadSegments(props: LoadSegmentsProps): Promise<void> {
+    const response = await sendMessage({ message: "isInfoFound", updating: props.updating }) as IsInfoFoundMessageResponse;
+
+    if (response && response.videoID) {
+        segmentsLoaded(response, props);
+    } else {
+        // Handle error if it exists
+        chrome.runtime.lastError;
+
+        props.setStatus({
+            status: LoadingStatus.NoVideo,
+        });
+
+        if (!props.updating) {
+            loadRetryCount++;
+            if (loadRetryCount < 6) {
+                setTimeout(() => loadSegments(props), 100 * loadRetryCount);
+            }
+        }
+    }
+}
+
+function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoadedProps): void {
+    if (response.found) {
+        props.setStatus({
+            status: LoadingStatus.SegmentsFound
+        });
+    } else if (typeof response.status !== "number") {
+        props.setStatus({
+            status: LoadingStatus.JSError,
+            error: response.status,
+        })
+    } else if (response.status === 404 || response.status === 200) {
+        props.setStatus({
+            status: LoadingStatus.NoSegmentsFound
+        });
+    } else if (response.status) {
+        props.setStatus({
+            status: LoadingStatus.ConnectionError,
+            code: response.status
+        });
+    } else {
+        props.setStatus({
+            status: LoadingStatus.StillLoading
+        });
+    }
+
+    
+    props.setVideoID(response.videoID);
+    Video.setVideoID(response.videoID as Video.VideoID);
+    props.setCurrentTime(response.time);
+    Video.setChanelIDInfo(response.channelID, response.channelAuthor);
+    setCurrentTabSkipProfile(response.currentTabSkipProfileID);
+    props.setSegments((response.sponsorTimes || [])
+        .filter((segment) => segment.source === SponsorSourceType.Server)
+        .sort((a, b) => b.segment[1] - a.segment[1])
+        .sort((a, b) => a.segment[0] - b.segment[0])
+        .sort((a, b) => a.actionType === ActionType.Full ? -1 : b.actionType === ActionType.Full ? 1 : 0));
+    props.setLoopedChapter(response.loopedChapter);
+}
+
+function sendMessage(request: Message): Promise<MessageResponse> {
+    return new Promise((resolve) => {
+        if (chrome.tabs) {
+            chrome.tabs.query({
+                active: true,
+                currentWindow: true
+            }, (tabs) => chrome.tabs.sendMessage(tabs[0].id, request, resolve));
+        } else {
+            chrome.runtime.sendMessage({ message: "tabs", data: request }, resolve);
+        }
+    });
+}
+
+function setupComPort(props: SegmentsLoadedProps): void {
+    const port = chrome.runtime.connect({ name: "popup" });
+    port.onDisconnect.addListener(() => setupComPort(props));
+    port.onMessage.addListener((msg) => onMessage(props, msg));
+}
+
+function onMessage(props: SegmentsLoadedProps, msg: PopupMessage) {
+    switch (msg.message) {
+        case "time":
+            props.setCurrentTime(msg.time);
+            break;
+        case "infoUpdated":
+            segmentsLoaded(msg, props);
+            break;
+        case "videoChanged":
+            props.setStatus({
+                status: LoadingStatus.StillLoading
+            });
+            props.setVideoID(msg.videoID);
+            Video.setVideoID(msg.videoID as Video.VideoID);
+            Video.setChanelIDInfo(msg.channelID, msg.channelAuthor);
+            props.setSegments([]);
+            break;
+    }
+}
+
+function forwardClickEvents(sendMessage: (request: Message) => Promise<MessageResponse>): void {
+    if (window !== window.top) {
+        document.addEventListener("keydown", (e) => {
+            const target = e.target as HTMLElement;
+            if (target.tagName === "INPUT"
+                || target.tagName === "TEXTAREA"
+                || e.key === "ArrowUp"
+                || e.key === "ArrowDown") {
+                return;
+            }
+
+            if (e.key === " ") {
+                // No scrolling
+                e.preventDefault();
+            }
+
+            sendMessage({
+                message: "keydown",
+                key: e.key,
+                keyCode: e.keyCode,
+                code: e.code,
+                which: e.which,
+                shiftKey: e.shiftKey,
+                ctrlKey: e.ctrlKey,
+                altKey: e.altKey,
+                metaKey: e.metaKey
+            });
+        });
+    }
+}
+
+// Copy over styles from parent window
+window.addEventListener("message", async (e): Promise<void> => {
+    if (e.source !== window.parent) return;
+    if (e.origin.endsWith(".youtube.com") && e.data && e.data?.type === "style") {
+        const style = document.createElement("style");
+        style.textContent = e.data.css;
+        document.head.appendChild(style);
+    }
+});
+
+function SkipProfileButton(props: {videoID: string; setShowForceChannelCheckWarning: (v: boolean) => void}): JSX.Element {
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const channelSkipProfileSet = getSkipProfileIDForChannel() !== null;
+    const skipProfileSet = getSkipProfileID() !== null;
+
+    React.useEffect(() => {
+        setMenuOpen(false);
+    }, [props.videoID]);
+
+    return (
+        <>
+            <label id="skipProfileButton" 
+                    htmlFor="skipProfileToggle"
+                    className="toggleSwitchContainer sbControlsMenu-item"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                        if (menuOpen && !Config.config.forceChannelCheck && getSkipProfileID() !== null) {
+                            props.setShowForceChannelCheckWarning(true);
+                        }
+
+                        setMenuOpen(!menuOpen);
+                    }}>
+                <svg viewBox="0 0 24 24" width="23" height="23" className={"SBWhitelistIcon sbControlsMenu-itemIcon " + (menuOpen ? " rotated" : "")}>
+                    <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
+                </svg>
+                <span id="whitelistChannel" className={!(!menuOpen && !channelSkipProfileSet && !skipProfileSet) ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("addChannelToSkipProfile")}
+                </span>
+                <span id="whitelistChannel" className={!(!menuOpen && channelSkipProfileSet) ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("editChannelsSkipProfile")}
+                </span>
+                <span id="whitelistChannel" className={!(!menuOpen && !channelSkipProfileSet && skipProfileSet) ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("editActiveSkipProfile")}
+                </span>
+                <span id="unwhitelistChannel" className={!menuOpen ? " hidden" : ""}>
+                    {chrome.i18n.getMessage("closeSkipProfileMenu")}
+                </span>
+            </label>
+
+            {
+                props.videoID &&
+                <SkipProfileMenu open={menuOpen} videoID={props.videoID} />
+            }
+        </>
+    );
+}
+
+const skipProfileOptions: SkipProfileOption[] = [{
+        name: "forAnHour",
+        active: () => getSkipProfileIDForTime() !== null
+    }, {
+        name: "forThisTab",
+        active: () => getSkipProfileIDForTab() !== null
+    }, {
+        name: "forJustThisVideo",
+        active: () => getSkipProfileIDForVideo() !== null
+    }, {
+        name: "forThisChannel",
+        active: () => getSkipProfileIDForChannel() !== null
+    }];
+
+function SkipProfileMenu(props: {open: boolean; videoID: string}): JSX.Element {
+    const [configID, setConfigID] = React.useState<ConfigurationID | null>(null);
+    const [selectedSkipProfileAction, setSelectedSkipProfileAction] = React.useState<SkipProfileAction>(null);
+    const [allSkipProfiles, setAllSkipProfiles] = React.useState(Object.entries(Config.local!.skipProfiles));
+
+    React.useEffect(() => {
+        if (props.open) {
+            const channelInfo = Video.getChannelIDInfo();
+            if (!channelInfo) {
+                if (Video.isOnYTTV()) {
+                    alert(chrome.i18n.getMessage("yttvNoChannelWhitelist"));
+                } else {
+                    alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
+                }
+            }
+        }
+
+        setConfigID(getSkipProfileID());
+    }, [props.open, props.videoID]);
+
+    React.useEffect(() => {
+        Config.configLocalListeners.push(() => {
+            setAllSkipProfiles(Object.entries(Config.local!.skipProfiles));
+        });
+    }, []);
+
+    return (
+        <div id="skipProfileMenu" className={`${!props.open ? " hidden" : ""}`}
+            aria-label={chrome.i18n.getMessage("SkipProfileMenu")}>
+            <div style={{position: "relative"}}>
+                <SelectOptionComponent
+                    id="sbSkipProfileSelection"
+                    title={chrome.i18n.getMessage("SelectASkipProfile")}
+                    onChange={(value) => {
+                        if (value === "new") {
+                            chrome.runtime.sendMessage({ message: "openConfig", hash: "newProfile" });
+                            return;
+                        }
+                        
+                        const configID = value === "null" ? null : value as ConfigurationID;
+                        setConfigID(configID);
+                        if (configID === null) {
+                            setSelectedSkipProfileAction(null);
+                        }
+
+                        if (selectedSkipProfileAction) {
+                            updateSkipProfileSetting(selectedSkipProfileAction, configID);
+
+                            if (configID === null) {
+                                for (const option of skipProfileOptions) {
+                                    if (option.name !== selectedSkipProfileAction && option.active()) {
+                                        updateSkipProfileSetting(option.name, null);
+                                    }
+                                }
+                            }
+                        }
+                    }}
+                    value={configID ?? "null"}
+                    options={[{
+                        value: "null",
+                        label: chrome.i18n.getMessage("DefaultConfiguration")
+                    }].concat(allSkipProfiles.map(([key, value]) => ({
+                        value: key,
+                        label: value.name
+                    }))).concat([{
+                        value: "new",
+                        label: chrome.i18n.getMessage("CreateNewConfiguration")
+                    }])}
+                />
+
+                <SkipProfileRadioButtons
+                    selected={selectedSkipProfileAction}
+                    setSelected={(s, updateConfig) => {
+                        if (updateConfig) {
+                            if (s === null) {
+                                updateSkipProfileSetting(selectedSkipProfileAction, null);
+                            } else {
+                                updateSkipProfileSetting(s, configID);
+                            }
+                        } else if (s !== null) {
+                            setConfigID(getSkipProfileID());
+                        }
+
+                        setSelectedSkipProfileAction(s);
+                    }}
+                    disabled={configID === null}
+                    configID={configID}
+                    videoID={props.videoID}
+                />
+            </div>
+        </div>
+    );
+}
+
+function SkipProfileRadioButtons(props: SkipProfileRadioButtonsProps): JSX.Element {
+    const result: JSX.Element[] = [];
+
+    React.useEffect(() => {
+        if (props.configID === null) {
+            props.setSelected(null, false);
+        } else {
+            for (const option of skipProfileOptions) {
+                if (option.active()) {
+                    if (props.selected !== option.name) {
+                        props.setSelected(option.name, false);
+                    }
+
+                    return;
+                }
+            }
+        }
+    }, [props.configID, props.videoID, props.selected]);
+
+    let alreadySelected = false;
+    for (const option of skipProfileOptions) {
+        const highlighted = option.active() && props.selected !== option.name;
+        const overridden = !highlighted && alreadySelected;
+        result.push(
+            <SkipOptionActionComponent
+                highlighted={highlighted}
+                label={chrome.i18n.getMessage(`skipProfile_${option.name}`)}
+                selected={props.selected === option.name}
+                overridden={overridden}
+                disabled={props.disabled || overridden}
+                key={option.name}
+                setSelected={(s) => {
+                    props.setSelected(s ? option.name : null, true);
+                }}/>
+        );
+
+        if (props.selected === option.name) {
+            alreadySelected = true;
+        }
+    }
+
+    return <div id="skipProfileActions">
+        {result}
+    </div>
+}
+
+function SkipOptionActionComponent(props: SkipOptionActionComponentProps): JSX.Element {
+    let title = "";
+    if (props.selected) {
+        title = chrome.i18n.getMessage("clickToNotApplyThisProfile");
+    } else if ((props.highlighted && !props.disabled) || props.overridden) {
+        title = chrome.i18n.getMessage("skipProfileBeingOverriddenByHigherPriority");
+    } else if (!props.highlighted && !props.disabled) {
+        title = chrome.i18n.getMessage("clickToApplyThisProfile");
+    } else if (props.disabled) {
+        title = chrome.i18n.getMessage("selectASkipProfileFirst");
+    }
+
+    return (
+        <div className={`skipOptionAction ${props.selected ? "selected" : ""} ${props.highlighted ? "highlighted" : ""} ${props.disabled ? "disabled" : ""}`}
+            title={title}
+            role="button"
+            tabIndex={0}
+            aria-pressed={props.selected}
+            onClick={() => {
+                // Need to uncheck or disable a higher priority option first
+                if (!props.disabled && !props.highlighted) {
+                    props.setSelected(!props.selected);
+                }
+            }}>
+            {props.label}
+        </div>
+    );
+}
+
+function updateSkipProfileSetting(action: SkipProfileAction, configID: ConfigurationID | null) {
+    switch (action) {
+        case "forAnHour":
+            Config.local!.skipProfileTemp = configID ? { time: Date.now(), configID } : null;
+            break;
+        case "forThisTab":
+            setCurrentTabSkipProfile(configID);
+
+            sendMessage({
+                message: "setCurrentTabSkipProfile",
+                configID
+            });
+            break;
+        case "forJustThisVideo":
+            if (configID) {
+                Config.local!.channelSkipProfileIDs[Video.getVideoID()!] = configID;
+            } else {
+                delete Config.local!.channelSkipProfileIDs[Video.getVideoID()!];
+            }
+
+            Config.forceLocalUpdate("channelSkipProfileIDs");
+            break;
+        case "forThisChannel": {
+            const channelInfo = Video.getChannelIDInfo();
+
+            if (configID) {
+                Config.local!.channelSkipProfileIDs[channelInfo.id] = configID;
+                delete Config.local!.channelSkipProfileIDs[channelInfo.author];
+            } else {
+                delete Config.local!.channelSkipProfileIDs[channelInfo.id];
+                delete Config.local!.channelSkipProfileIDs[channelInfo.author];
+            }
+
+            Config.forceLocalUpdate("channelSkipProfileIDs");
+            break;
+        }
+    }
+}

src/popup/SegmentListComponent.tsx

@@ -0,0 +1,575 @@
+import * as React from "react";
+import { ActionType, SegmentListDefaultTab, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
+import Config from "../config";
+import { waitFor } from "../../maze-utils/src";
+import { shortCategoryName } from "../utils/categoryUtils";
+import { formatJSErrorMessage, getFormattedTime, getShortErrorMessage } from "../../maze-utils/src/formating";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { asyncRequestToServer } from "../utils/requests";
+import { Message, MessageResponse, VoteResponse } from "../messageTypes";
+import { LoadingStatus } from "./PopupComponent";
+import GenericNotice from "../render/GenericNotice";
+import { exportTimes } from "../utils/exporter";
+import { copyToClipboardPopup } from "./popupUtils";
+import { logRequest } from "../../maze-utils/src/background-request-proxy";
+
+interface SegmentListComponentProps {
+    videoID: VideoID;
+    currentTime: number;
+    status: LoadingStatus;
+    segments: SponsorTime[];
+    loopedChapter: SegmentUUID | null;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+enum SegmentListTab {
+    Segments,
+    Chapter
+}
+
+interface SegmentWithNesting extends SponsorTime {
+    innerChapters?: (SegmentWithNesting|SponsorTime)[];
+}
+
+function isSegment(segment) {
+    return segment.actionType !== ActionType.Chapter;
+}
+
+function isChapter(segment) {
+    return segment.actionType === ActionType.Chapter;
+}
+
+export const SegmentListComponent = (props: SegmentListComponentProps) => {
+    const [tab, setTab] = React.useState(SegmentListTab.Segments);
+    const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
+
+    React.useEffect(() => {
+        if (!Config.isReady()) {
+            waitFor(() => Config.isReady()).then(() => {
+                setIsVip(Config.config.isVip);
+            });
+        } else {
+            setIsVip(Config.config.isVip);
+        }
+    }, []);
+
+    const [hasSegments, hasChapters] = React.useMemo(() => {
+        const hasSegments = Boolean(props.segments.find(isSegment))
+        const hasChapters = Boolean(props.segments.find(isChapter))
+        return [hasSegments, hasChapters];
+    }, [props.segments]);
+
+    React.useEffect(() => {
+        const setTabBasedOnConfig = () => {
+            const preferChapters = Config.config.segmentListDefaultTab === SegmentListDefaultTab.Chapters;
+            if (preferChapters) {
+                setTab(hasChapters ? SegmentListTab.Chapter : SegmentListTab.Segments);
+            } else {
+                setTab(hasSegments ? SegmentListTab.Segments : SegmentListTab.Chapter);
+            }
+        };
+
+        if (Config.isReady()) {
+            setTabBasedOnConfig();
+        } else {
+            waitFor(() => Config.isReady()).then(setTabBasedOnConfig);
+        }
+    }, [props.videoID, hasSegments, hasChapters]);
+
+    const segmentsWithNesting = React.useMemo(() => {
+        const result: SegmentWithNesting[] = [];
+        const chapterStack: SegmentWithNesting[] = [];
+        for (let seg of props.segments) {
+            seg = {...seg};
+            // non-chapter, do not nest
+            if (seg.actionType !== ActionType.Chapter) {
+                result.push(seg);
+                continue;
+            }
+            // traverse the stack
+            while (chapterStack.length !== 0) {
+                // where's Array.prototype.at() :sob:
+                const lastChapter = chapterStack[chapterStack.length - 1];
+                // we know lastChapter.startTime <= seg.startTime, as content.ts sorts these
+                // so only compare endTime - if new ends before last, new is nested inside last
+                if (lastChapter.segment[1] >= seg.segment[1]) {
+                    lastChapter.innerChapters ??= [];
+                    lastChapter.innerChapters.push(seg);
+                    chapterStack.push(seg);
+                    break;
+                }
+                // last did not match, pop it off the stack
+                chapterStack.pop();
+            }
+            // chapter stack not empty = we found a place for the chapter
+            if (chapterStack.length !== 0) {
+                continue;
+            }
+            // push the chapter to the top-level list and to the stack
+            result.push(seg);
+            chapterStack.push(seg);
+
+        }
+        return result;
+    }, [props.segments])
+
+
+    return (
+        <div id="issueReporterContainer">
+            <div id="issueReporterTabs" className={hasSegments && hasChapters ? "" : "hidden"}>
+                <span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => {
+                    setTab(SegmentListTab.Segments);
+                }}>
+                    <span>{chrome.i18n.getMessage("SegmentsCap")}</span>
+                </span>
+                <span id="issueReporterTabChapters" className={tab === SegmentListTab.Chapter ? "sbSelected" : ""} onClick={() => {
+                    setTab(SegmentListTab.Chapter);
+                }}>
+                    <span>{chrome.i18n.getMessage("Chapters")}</span>
+                </span>
+            </div>
+            <div id="issueReporterTimeButtons"
+                    onMouseLeave={() => selectSegment({
+                        segment: null,
+                        sendMessage: props.sendMessage
+                    })}>
+                {
+                    segmentsWithNesting.map((segment) => (
+                        <SegmentListItem
+                            key={segment.UUID}
+                            videoID={props.videoID}
+                            segment={segment}
+                            currentTime={props.currentTime}
+                            isVip={isVip}
+                            loopedChapter={props.loopedChapter} // UUID instead of boolean so it can be passed down to nested chapters 
+
+                            tabFilter={tab === SegmentListTab.Chapter ? isChapter : isSegment}
+                            sendMessage={props.sendMessage}
+                        />
+                    ))
+                }
+            </div>
+            
+            <ImportSegments
+                status={props.status}
+                segments={props.segments}
+                sendMessage={props.sendMessage}
+            />
+        </div>
+    );
+};
+
+function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter, tabFilter, sendMessage }: {
+    segment: SegmentWithNesting;
+    videoID: VideoID;
+    currentTime: number;
+    isVip: boolean;
+    loopedChapter: SegmentUUID;
+    
+    tabFilter: (segment: SponsorTime) => boolean;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}) {
+    const [voteMessage, setVoteMessage] = React.useState<string | null>(null);
+    const [hidden, setHidden] = React.useState(segment.hidden ?? SponsorHideType.Visible); // undefined ?? undefined lol
+    const [isLooped, setIsLooped] = React.useState(loopedChapter === segment.UUID);
+
+    // Update internal state if the hidden property of the segment changes
+    React.useEffect(() => {
+        setHidden(segment.hidden ?? SponsorHideType.Visible);
+    }, [segment.hidden])
+
+    let extraInfo: string;
+    switch (hidden) {
+        case SponsorHideType.Visible:
+            extraInfo = "";
+            break;
+        case SponsorHideType.Downvoted:
+            extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
+            break;
+        case SponsorHideType.MinimumDuration:
+            extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
+            break;
+        case SponsorHideType.Hidden:
+            extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
+            break;
+        default:
+            // hidden satisfies never; // need to upgrade TS
+            console.warn(`[SB] Unhandled variant of SponsorHideType in SegmentListItem: ${hidden}`);
+            extraInfo = "";
+    }
+
+    return (
+        <div className={"segmentWrapper " + (!tabFilter(segment) ? "hidden" : "")}>
+            <details data-uuid={segment.UUID}
+                    onDoubleClick={() => skipSegment({
+                        segment,
+                        sendMessage
+                    })}
+                    onMouseEnter={() => {
+                        selectSegment({
+                            segment,
+                            sendMessage
+                        });
+                    }}
+                    className={"votingButtons"}
+                    >
+                <summary className={"segmentSummary " + (
+                    currentTime >= segment.segment[0] ? (
+                        currentTime < segment.segment[1] ? "segmentActive" : "segmentPassed"
+                    ) : ""
+                )}>
+                    <div>
+                        {
+                            segment.actionType !== ActionType.Chapter &&
+                            <span className="sponsorTimesCategoryColorCircle dot" style={{ backgroundColor: Config.config.barTypes[segment.category]?.color }}></span>
+                        }
+                        <span className="summaryLabel">{(segment.description || shortCategoryName(segment.category)) + extraInfo}</span>
+                    </div>
+
+                    <div style={{ margin: "5px" }}>
+                        {
+                            segment.actionType === ActionType.Full ? chrome.i18n.getMessage("full") :
+                            (getFormattedTime(segment.segment[0], true) +
+                                (segment.actionType !== ActionType.Poi
+                                    ? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment.segment[1], true)
+                                    : ""))
+                        }
+                    </div>
+                </summary>
+
+                <div className={"sbVoteButtonsContainer " + (voteMessage ? "hidden" : "")}>
+                    <img
+                        className="voteButton"
+                        title="Upvote"
+                        src={chrome.runtime.getURL("icons/thumbs_up.svg")}
+                        onClick={() => {
+                            vote({
+                                type: 1,
+                                UUID: segment.UUID,
+                                setVoteMessage: setVoteMessage,
+                                sendMessage
+                            });
+                        }}/>
+                    <img
+                        className="voteButton"
+                        title="Downvote"
+                        src={segment.locked && isVip ? chrome.runtime.getURL("icons/thumbs_down_locked.svg") : chrome.runtime.getURL("icons/thumbs_down.svg")}
+                        onClick={() => {
+                            vote({
+                                type: 0,
+                                UUID: segment.UUID,
+                                setVoteMessage: setVoteMessage,
+                                sendMessage
+                            });
+                        }}/>
+                    <img
+                        className="voteButton"
+                        title="Copy Segment ID"
+                        src={chrome.runtime.getURL("icons/clipboard.svg")}
+                        onClick={async (e) => {
+                            const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+
+                            try {
+                                if (segment.UUID.length > 60) {
+                                    copyToClipboardPopup(segment.UUID, sendMessage);
+                                } else {
+                                    const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                                        UUID: segment.UUID,
+                                        videoID: videoID
+                                    });
+                                    if (segmentIDData.ok && segmentIDData.responseText) {
+                                        copyToClipboardPopup(segmentIDData.responseText, sendMessage);
+                                    } else {
+                                        logRequest(segmentIDData, "SB", "segment UUID resolution");
+                                    }
+                                }
+                            } catch (e) {
+                                console.error("[SB] Caught error while attempting to resolve and copy segment UUID", e);
+                            } finally {
+                                stopAnimation();
+                            }
+
+                        }}/>
+                    {
+                        segment.actionType === ActionType.Chapter &&
+                        <img
+                            className="voteButton"
+                            title={isLooped ? chrome.i18n.getMessage("unloopChapter") : chrome.i18n.getMessage("loopChapter")}
+                            src={isLooped ? chrome.runtime.getURL("icons/looped.svg") : chrome.runtime.getURL("icons/loop.svg")}
+                            onClick={(e) => {
+                                if (isLooped) {
+                                    loopChapter({
+                                        segment: null,
+                                        element: e.currentTarget,
+                                        sendMessage
+                                    });
+                                } else {
+                                    loopChapter({
+                                        segment,
+                                        element: e.currentTarget,
+                                        sendMessage
+                                    });
+                                }
+
+                                setIsLooped(!isLooped);
+                            }}/>
+                    }
+                    {
+                        (segment.actionType === ActionType.Skip || segment.actionType === ActionType.Mute
+                            || segment.actionType === ActionType.Poi
+                            && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(hidden)) &&
+                        <img
+                            className="voteButton"
+                            title={chrome.i18n.getMessage("hideSegment")}
+                            src={hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
+                            onClick={(e) => {
+                                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
+                                stopAnimation();
+
+                                const newState = hidden === SponsorHideType.Hidden ? SponsorHideType.Visible : SponsorHideType.Hidden;
+                                setHidden(newState);
+                                sendMessage({
+                                    message: "hideSegment",
+                                    type: newState,
+                                    UUID: segment.UUID
+                                });
+                            }}/>
+                    }
+                    {
+                        segment.actionType !== ActionType.Full &&
+                        <img
+                            className="voteButton"
+                            title={segment.actionType === ActionType.Chapter ? chrome.i18n.getMessage("playChapter") : chrome.i18n.getMessage("skipSegment")}
+                            src={chrome.runtime.getURL("icons/skip.svg")}
+                            onClick={(e) => {
+                                skipSegment({
+                                    segment,
+                                    element: e.currentTarget,
+                                    sendMessage
+                                });
+                            }}/>
+                    }
+                </div>
+
+                <div className={"sponsorTimesVoteStatusContainer " + (voteMessage ? "" : "hidden")}>
+                    <div className="sponsorTimesThanksForVotingText">
+                        {voteMessage}
+                    </div>
+                </div>
+            </details>
+
+            {
+                segment.innerChapters
+                && <InnerChapterList
+                    chapters={segment.innerChapters}
+                    videoID={videoID}
+                    currentTime={currentTime}
+                    isVip={isVip}
+                    loopedChapter={loopedChapter}
+                    tabFilter={tabFilter}
+                    sendMessage={sendMessage}
+                />
+            }
+        </div>
+    );
+}
+
+function InnerChapterList({ chapters, videoID, currentTime, isVip, loopedChapter, tabFilter, sendMessage }: {
+    chapters: (SegmentWithNesting)[];
+    videoID: VideoID;
+    currentTime: number;
+    isVip: boolean;
+    loopedChapter: SegmentUUID;
+
+    tabFilter: (segment: SponsorTime) => boolean;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}) {
+    return <details className="innerChapterList" open>
+        <summary
+            onClick={(e) => {
+                e.currentTarget.firstChild.textContent = (e.currentTarget.parentElement as HTMLDetailsElement).open ? chrome.i18n.getMessage("expandChapters").replace("{0}", String(chapters.length)) : chrome.i18n.getMessage("collapseChapters");
+            }}>
+            {chrome.i18n.getMessage("collapseChapters")}
+        </summary>
+        <div className="innerChaptersContainer">
+            {
+                chapters.map((chapter) => {
+                    return <SegmentListItem
+                        key={chapter.UUID}
+                        videoID={videoID}
+                        segment={chapter}
+                        currentTime={currentTime}
+                        isVip={isVip}
+                        loopedChapter={loopedChapter}
+
+                        tabFilter={tabFilter}
+                        sendMessage={sendMessage}
+                    />
+                })
+            }
+        </div>
+    </details>
+}
+
+async function vote(props: {
+    type: number;
+    UUID: SegmentUUID;
+    setVoteMessage: (message: string | null) => void;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): Promise<void> {
+    props.setVoteMessage(chrome.i18n.getMessage("Loading"));
+
+    const response = await props.sendMessage({
+        message: "submitVote",
+        type: props.type,
+        UUID: props.UUID
+    }) as VoteResponse;
+
+    if (response != undefined) {
+        let messageDuration = 1_500;
+        // See if it was a success or failure
+        if ("error" in response) {
+            // JS error
+            console.error("[SB] Caught error while attempting to submit a vote", response.error);
+            props.setVoteMessage(formatJSErrorMessage(response.error));
+            messageDuration = 10_000;
+        }
+        else if (response.ok || response.status === 429) {
+            // Success (treat rate limits as a success)
+            props.setVoteMessage(chrome.i18n.getMessage("voted"));
+        } else {
+            // Error
+            logRequest({headers: null, ...response}, "SB", "vote on segment");
+            props.setVoteMessage(getShortErrorMessage(response.status, response.responseText));
+            messageDuration = 10_000;
+        }
+        setTimeout(() => props.setVoteMessage(null), messageDuration);
+    }
+}
+
+function skipSegment({ segment, element, sendMessage }: {
+    segment: SponsorTime;
+    element?: HTMLElement;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    if (segment.actionType === ActionType.Chapter) {
+        sendMessage({
+            message: "unskip",
+            UUID: segment.UUID
+        });
+    } else {
+        sendMessage({
+            message: "reskip",
+            UUID: segment.UUID
+        });
+    }
+
+    if (element) {
+        const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
+        stopAnimation();
+    }
+}
+
+function selectSegment({ segment, sendMessage }: {
+    segment: SponsorTime | null;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    sendMessage({
+        message: "selectSegment",
+        UUID: segment?.UUID
+    });
+}
+
+function loopChapter({ segment, element, sendMessage }: {
+    segment: SponsorTime;
+    element: HTMLElement;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    sendMessage({
+        message: "loopChapter",
+        UUID: segment?.UUID
+    });
+
+    if (element) {
+        const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
+        stopAnimation();
+    }
+}
+
+interface ImportSegmentsProps {
+    status: LoadingStatus;
+    segments: SponsorTime[];
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+function ImportSegments(props: ImportSegmentsProps) {
+    const [importMenuVisible, setImportMenuVisible] = React.useState(false);
+    const textArea = React.useRef<HTMLTextAreaElement>(null);
+
+    return (
+        <div id="issueReporterImportExport" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
+            <div id="importExportButtons">
+            <button id="importSegmentsButton"
+                    className={props.status === LoadingStatus.SegmentsFound || props.status === LoadingStatus.NoSegmentsFound ? "" : "hidden"}
+                    title={chrome.i18n.getMessage("importSegments")}
+                    onClick={() => {
+                        setImportMenuVisible(!importMenuVisible);
+                    }}>
+                <img src="/icons/import.svg" alt="Import icon" id="importSegments" />
+            </button>
+            <button id="exportSegmentsButton"
+                    className={props.segments.length === 0 ? "hidden" : ""}
+                    title={chrome.i18n.getMessage("exportSegments")}
+                    onClick={(e) => {
+                        copyToClipboardPopup(exportTimes(props.segments), props.sendMessage);
+
+                        const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+                        stopAnimation();
+                        new GenericNotice(null, "exportCopied", {
+                            title:  chrome.i18n.getMessage(`CopiedExclamation`),
+                            timed: true,
+                            maxCountdownTime: () => 0.6,
+                            referenceNode: e.currentTarget.parentElement,
+                            dontPauseCountdown: true,
+                            style: {
+                                top: 0,
+                                bottom: 0,
+                                minWidth: 0,
+                                right: "30px",
+                                margin: "auto",
+                                height: "max-content"
+                            },
+                            hideLogo: true,
+                            hideRightInfo: true
+                        });
+                    }}>
+                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
+            </button>
+            </div>
+
+            <span id="importSegmentsMenu" className={importMenuVisible ? "" : "hidden"}>
+                <textarea id="importSegmentsText" rows={5} style={{ width: "80%" }} ref={textArea}></textarea>
+
+                <button id="importSegmentsSubmit"
+                        title={chrome.i18n.getMessage("importSegments")}
+                        onClick={() => {
+                            const text = textArea.current.value;
+
+                            props.sendMessage({
+                                message: "importSegments",
+                                data: text
+                            });
+
+                            setImportMenuVisible(false);
+                        }}>
+                    {chrome.i18n.getMessage("Import")}
+                </button>
+            </span>
+        </div>
+    )
+}

src/popup/SegmentSubmissionComponent.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { VideoID } from "../types";
+import Config from "../config";
+import { Message, MessageResponse } from "../messageTypes";
+import { LoadingStatus } from "./PopupComponent";
+
+interface SegmentSubmissionComponentProps {
+    videoID: VideoID;
+    status: LoadingStatus;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+export const SegmentSubmissionComponent = (props: SegmentSubmissionComponentProps) => {
+    const segments = Config.local.unsubmittedSegments[props.videoID];
+
+    const [showSubmitButton, setShowSubmitButton] = React.useState(segments && segments.length > 0);
+    const [showStartSegment, setShowStartSegment] = React.useState(!segments || segments[segments.length - 1].segment.length === 2);
+
+    return (
+        <div id="mainControls" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
+            <h1 className="sbHeader">
+                {chrome.i18n.getMessage("recordTimesDescription")}
+            </h1>
+            <sub className="sponsorStartHint grey-text">
+                {chrome.i18n.getMessage("popupHint")}
+            </sub>
+            <div style={{ textAlign: "center", margin: "8px 0" }}>
+                <button id="sponsorStart" 
+                        className="sbMediumButton"
+                        style={{ marginRight: "8px" }}
+                        onClick={() => {
+                            props.sendMessage({
+                                from: "popup",
+                                message: "sponsorStart"
+                            });
+
+                            setShowStartSegment(!showStartSegment);
+                            setShowSubmitButton(true);
+
+                            // Once data is saved, make sure it is correct
+                            setTimeout(() => {
+                                const segments = Config.local.unsubmittedSegments[props.videoID];
+                                setShowStartSegment(!segments || segments[segments.length - 1].segment.length === 2);
+
+                                setShowSubmitButton(segments && segments.length > 0);
+                            }, 200);
+                        }}>
+                    {showStartSegment ? chrome.i18n.getMessage("sponsorStart") : chrome.i18n.getMessage("sponsorEnd")}
+                </button>
+                <button id="submitTimes" 
+                        className={"sbMediumButton " + (showSubmitButton ? "" : "hidden")}
+                        onClick={() => {
+                            props.sendMessage({
+                                message: "submitTimes"
+                            });
+                        }}>
+                    {chrome.i18n.getMessage("OpenSubmissionMenu")}
+                </button>
+            </div>
+            <span id="submissionHint" className={showSubmitButton ? "" : "hidden"}>
+                {chrome.i18n.getMessage("submissionEditHint")}
+            </span>
+        </div>
+    );
+};

src/popup/YourWorkComponent.tsx

@@ -0,0 +1,223 @@
+import * as React from "react";
+import { getHash } from "../../maze-utils/src/hash";
+import { formatJSErrorMessage, getShortErrorMessage } from "../../maze-utils/src/formating";
+import Config from "../config";
+import { asyncRequestToServer } from "../utils/requests";
+import PencilIcon from "../svg-icons/pencilIcon";
+import ClipboardIcon from "../svg-icons/clipboardIcon";
+import CheckIcon from "../svg-icons/checkIcon";
+import { showDonationLink } from "../utils/configUtils";
+import { FetchResponse, logRequest } from "../../maze-utils/src/background-request-proxy";
+
+export const YourWorkComponent = () => {
+    const [isSettingUsername, setIsSettingUsername] = React.useState(false);
+    const [username, setUsername] = React.useState("");
+    const [newUsername, setNewUsername] = React.useState("");
+    const [usernameSubmissionStatus, setUsernameSubmissionStatus] = React.useState("");
+    const [submissionCount, setSubmissionCount] = React.useState("");
+    const [viewCount, setViewCount] = React.useState(0);
+    const [minutesSaved, setMinutesSaved] = React.useState(0);
+    const [showDonateMessage, setShowDonateMessage] = React.useState(false);
+
+    React.useEffect(() => {
+        (async () => {
+            const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions", "segmentCount"];
+            let result: FetchResponse;
+            try {
+                result = await asyncRequestToServer("GET", "/api/userInfo", {
+                    publicUserID: await getHash(Config.config!.userID!),
+                    values
+                });
+            } catch (e) {
+                console.error("[SB] Caught error while fetching user info", e);
+                return
+            }
+
+            if (result.ok) {
+                const userInfo = JSON.parse(result.responseText);
+                setUsername(userInfo.userName);
+                setSubmissionCount(Math.max(Config.config.sponsorTimesContributed ?? 0, userInfo.segmentCount).toLocaleString());
+                setViewCount(userInfo.viewCount);
+                setMinutesSaved(userInfo.minutesSaved);
+
+                if (username === "sponege") {
+                    Config.config.prideTheme = true;
+                }
+
+                Config.config!.isVip = userInfo.vip;
+                Config.config!.permissions = userInfo.permissions;
+
+                setShowDonateMessage(Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
+                    && viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10 && showDonationLink());
+            } else {
+                logRequest(result, "SB", "user info");
+            }
+        })();
+    }, []);
+
+    return (
+        <div className="sbYourWorkBox">
+            <h2 className="sbHeader" style={{ "padding": "8px 15px" }}>
+                {chrome.i18n.getMessage("yourWork")}
+            </h2>
+            <div className="sbYourWorkCols">
+                {/* Username */}
+                <div id="usernameElement">
+                    <p className="u-mZ grey-text">
+                        {chrome.i18n.getMessage("Username")}:
+                        {/* loading/errors */}
+                        <span id="setUsernameStatus" 
+                            className={`u-mZ white-text${!usernameSubmissionStatus ? " hidden" : ""}`}>
+                            {usernameSubmissionStatus}
+                        </span>
+                    </p>
+                    <div id="setUsernameContainer" className={isSettingUsername ? " hidden" : ""}>
+                        <p id="usernameValue">{username}</p>
+                        <button id="setUsernameButton" 
+                            title={chrome.i18n.getMessage("setUsername")}
+                            onClick={() => {
+                                setNewUsername(username);
+                                setIsSettingUsername(!isSettingUsername);
+                            }}>
+                            <PencilIcon id="sbPopupIconEdit" className="sbPopupButton" />
+                        </button>
+                        <button id="copyUserID" 
+                            title={chrome.i18n.getMessage("copyPublicID")}
+                            onClick={async () => {
+                                window.navigator.clipboard.writeText(await getHash(Config.config!.userID!));
+                            }}>
+                            <ClipboardIcon id="sbPopupIconCopyUserID" className="sbPopupButton" />
+                        </button>
+                    </div>
+                    <div id="setUsername" className={!isSettingUsername ? " hidden" : " SBExpanded"}>
+                        <input id="usernameInput" 
+                            placeholder={chrome.i18n.getMessage("Username")}
+                            value={newUsername}
+                            onChange={(e) => {
+                                setNewUsername(e.target.value);
+                            }}/>
+                        <button id="submitUsername"
+                            onClick={() => {
+                                if (newUsername.length > 0) {
+                                    setUsernameSubmissionStatus(chrome.i18n.getMessage("Loading"));
+                                    asyncRequestToServer("POST", `/api/setUsername?userID=${Config.config!.userID}&username=${newUsername}`)
+                                    .then((result) => {
+                                        if (result.ok) {
+                                            setUsernameSubmissionStatus("");
+                                            setUsername(newUsername);
+                                            setIsSettingUsername(!isSettingUsername);
+                                        } else {
+                                            logRequest(result, "SB", "username change");
+                                            setUsernameSubmissionStatus(getShortErrorMessage(result.status, result.responseText));
+                                        }
+                                    }).catch((e) => {
+                                        console.error("[SB] Caught error while requesting a username change", e)
+                                        setUsernameSubmissionStatus(formatJSErrorMessage(e));
+                                    });
+                                }
+                            }}>
+                            <CheckIcon id="sbPopupIconCheck" className="sbPopupButton" />
+                        </button>
+                    </div>
+                </div>
+                <SubmissionCounts
+                    isSettingUsername={isSettingUsername}
+                    submissionCount={submissionCount}
+                />
+            </div>
+
+            <TimeSavedMessage
+                viewCount={viewCount}
+                minutesSaved={minutesSaved}
+            />
+
+            {showDonateMessage && <DonateMessage onClose={() => {
+                setShowDonateMessage(false);
+                Config.config.showPopupDonationCount = 100;
+            }} />}
+
+        </div>
+    );
+};
+
+function SubmissionCounts(props: { isSettingUsername: boolean; submissionCount: string }): JSX.Element {
+    return <>
+        <div id="sponsorTimesContributionsContainer" className={props.isSettingUsername ? " hidden" : ""}>
+            <p className="u-mZ grey-text">
+                {chrome.i18n.getMessage("Submissions")}:
+            </p>
+            <p id="sponsorTimesContributionsDisplay" className="u-mZ">{props.submissionCount}</p>
+        </div>
+    </>
+}
+
+function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minutesSaved: number }): JSX.Element {
+    return (
+        <>
+            {
+                viewCount > 0 &&
+                <p id="sponsorTimesViewsContainer" className="u-mZ sbStatsSentence">
+                    {chrome.i18n.getMessage("savedPeopleFrom")}
+                    <b>
+                        <span id="sponsorTimesViewsDisplay">{viewCount.toLocaleString()}</span>{" "}
+                    </b>
+                    <span id="sponsorTimesViewsDisplayEndWord">{viewCount !== 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>
+                    <br />
+                    <span className="sbExtraInfo">
+                        {"("}{" "}
+                        <b>
+                            <span id="sponsorTimesOthersTimeSavedDisplay">{getFormattedHours(minutesSaved)}</span>{" "}
+                            <span id="sponsorTimesOthersTimeSavedEndWord">{minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
+                        </b>
+                        <span>{chrome.i18n.getMessage("youHaveSavedTimeEnd")}</span>{" "}
+                        {" )"}
+                    </span>
+                </p>
+            }
+            <p id="sponsorTimesSkipsDoneContainer" className="u-mZ sbStatsSentence">
+                {chrome.i18n.getMessage("youHaveSkipped")}
+                <b>
+                    <span id="sponsorTimesSkipsDoneDisplay">{Config.config.skipCount}</span>{" "}
+                </b>
+                <span id="sponsorTimesSkipsDoneEndWord">{Config.config.skipCount > 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>{" "}
+                <span className="sbExtraInfo">
+                    {"("}{" "}
+                    <b>
+                        <span id="sponsorTimeSavedDisplay">{getFormattedHours(Config.config.minutesSaved)}</span>{" "}
+                        <span id="sponsorTimeSavedEndWord">{Config.config.minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
+                    </b>
+                    {")"}
+                </span>
+            </p>
+        </>
+    );
+}
+
+function DonateMessage(props: { onClose: () => void }): JSX.Element {
+    return (
+        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center", display: "flex" }}>
+            <img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
+            <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
+                Config.config.donateClicked = Config.config.donateClicked + 1;
+            }}>
+                {chrome.i18n.getMessage("considerDonating")}
+            </a>
+            <img id="sbCloseDonate" src="/icons/close.png" alt={chrome.i18n.getMessage("closeIcon")} height="8" style={{ paddingLeft: "5px", cursor: "pointer" }} onClick={props.onClose} />
+        </div>
+    );
+}
+
+/**
+ * Converts time in minutes to 2d 5h 25.1
+ * If less than 1 hour, just returns minutes
+ *
+ * @param {float} minutes
+ * @returns {string}
+ */
+function getFormattedHours(minutes) {
+    minutes = Math.round(minutes * 10) / 10;
+    const years = Math.floor(minutes / 525600); // Assumes 365.0 days in a year
+    const days = Math.floor(minutes / 1440) % 365;
+    const hours = Math.floor(minutes / 60) % 24;
+    return (years > 0 ? years + chrome.i18n.getMessage("yearAbbreviation") + " " : "") + (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
+}

src/popup/popup.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { PopupComponent } from "./PopupComponent";
+import { waitFor } from "../../maze-utils/src";
+import Config from "../config";
+
+
+document.addEventListener("DOMContentLoaded", async () => {
+    await waitFor(() => Config.isReady());
+
+    const root = createRoot(document.body);
+    root.render(<PopupComponent/>);
+})

src/popup/popupUtils.ts

@@ -0,0 +1,12 @@
+import { Message, MessageResponse } from "../messageTypes";
+
+export function copyToClipboardPopup(text: string, sendMessage: (request: Message) => Promise<MessageResponse>): void {
+    if (window === window.top) {
+        window.navigator.clipboard.writeText(text);
+    } else {
+        sendMessage({
+            message: "copyToClipboard",
+            text
+        });
+    }
+}

src/render/AdvancedSkipOptions.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { createRoot } from 'react-dom/client';
+
+import { AdvancedSkipOptionsComponent } from "../components/options/AdvancedSkipOptionsComponent";
+
+class AdvancedSkipOptions {
+    constructor(element: Element) {
+        const root = createRoot(element);
+        root.render(
+            <AdvancedSkipOptionsComponent />
+        );
+    }
+}
+
+export default AdvancedSkipOptions;

src/render/CategoryChooser.tsx

@@ -1,24 +1,16 @@
 import * as React from "react";
 import { createRoot } from 'react-dom/client';
 
-import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
+import { CategoryChooserComponent } from "../components/options/CategoryChooserComponent";
 
 class CategoryChooser {
 
-    ref: React.RefObject<CategoryChooserComponent>;
-
     constructor(element: Element) {
-        this.ref = React.createRef();
-
         const root = createRoot(element);
         root.render(
-            <CategoryChooserComponent ref={this.ref} />
+            <CategoryChooserComponent />
         );
     }
-
-    update(): void {
-        this.ref.current?.forceUpdate();
-    }
 }
 
 export default CategoryChooser;

src/render/CategoryPill.tsx

@@ -121,7 +121,7 @@ export class CategoryPill {
     async setSegment(segment: SponsorTime): Promise<void> {
         await waitFor(() => this.ref.current);
 
-        if (this.ref.current?.state?.segment !== segment) {
+        if (this.ref.current?.state?.segment !== segment || !this.ref.current?.state?.show) {
             const newState = {
                 segment,
                 show: true,

src/render/ChapterVote.tsx

@@ -20,6 +20,10 @@ export class ChapterVote {
         this.container.id = "chapterVote";
         this.container.style.height = "100%";
 
+        if (document.location.host === "tv.youtube.com") {
+            this.container.style.lineHeight = "initial";
+        }
+
         this.root = createRoot(this.container);
         this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
     }

src/render/SkipNotice.tsx

@@ -5,7 +5,7 @@ import Utils from "../utils";
 const utils = new Utils();
 
 import SkipNoticeComponent from "../components/SkipNoticeComponent";
-import { SponsorTime, ContentContainer, NoticeVisbilityMode } from "../types";
+import { SponsorTime, ContentContainer, NoticeVisibilityMode } from "../types";
 import Config from "../config";
 import { SkipNoticeAction } from "../utils/noticeUtils";
 
@@ -20,7 +20,7 @@ class SkipNotice {
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
     root: Root;
 
-    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, componentDidMount: () => void, unskipTime: number = null, startReskip = false, upcomingNoticeShown: boolean) {
+    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, componentDidMount: () => void, unskipTime: number = null, startReskip = false, upcomingNoticeShown: boolean, voteNotice = false) {
         this.skipNoticeRef = React.createRef();
 
         this.segments = segments;
@@ -42,18 +42,18 @@ class SkipNotice {
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);
-
         this.root = createRoot(this.noticeElement);
         this.root.render(
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 startReskip={startReskip}
+                voteNotice={voteNotice}
                 contentContainer={contentContainer}
                 ref={this.skipNoticeRef}
                 closeListener={() => this.close()}
-                smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                fadeIn={!upcomingNoticeShown}
+                smaller={!voteNotice && (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAll 
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAutoSkip && autoSkip))}
+                fadeIn={!upcomingNoticeShown && !voteNotice}
                 unskipTime={unskipTime}
                 componentDidMount={componentDidMount} />
         );
@@ -81,6 +81,26 @@ class SkipNotice {
     unmutedListener(time: number): void {
         this.skipNoticeRef?.current?.unmutedListener(time);
     }
+
+    async waitForSkipNoticeRef(): Promise<SkipNoticeComponent> {
+        const waitForRef = () => new Promise<SkipNoticeComponent>((resolve) => {
+            const observer = new MutationObserver(() => {
+            if (this.skipNoticeRef.current) {
+                observer.disconnect();
+                resolve(this.skipNoticeRef.current);
+            }
+            });
+
+            observer.observe(document.getElementsByClassName("sponsorSkipNoticeContainer")[0], { childList: true, subtree: true});
+
+            if (this.skipNoticeRef.current) {
+            observer.disconnect();
+            resolve(this.skipNoticeRef.current);
+            }
+        });
+
+        return this.skipNoticeRef?.current || await waitForRef();
+    }
 }
 
 export default SkipNotice;

src/svg-icons/checkIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface CheckIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const CheckIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: CheckIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/>
+  </svg>
+);
+
+export default CheckIcon;

src/svg-icons/clipboardIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export interface ClipboardIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const ClipboardIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: ClipboardIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z" />
+  </svg>
+);
+
+export default ClipboardIcon;

src/svg-icons/pencilIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface PencilIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const PencilIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: PencilIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/>
+  </svg>
+);
+
+export default PencilIcon;

src/svg-icons/resetIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export interface AddIconProps {
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const ResetIcon = ({
+  className = "",
+  style = {},
+  onClick
+}: AddIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    onClick={onClick} >
+    <path
+      d="M 23.993883,23.993883 H 0.006117 V 0.006117 h 23.987766 z"
+      fill="none"
+      id="path2"
+      style={{strokeWidth: 0.99949}} />
+    <path
+      d="m 3.508834,3.5213414 c -2.1778668,2.1778667 -3.52964574,5.1668007 -3.52964574,8.4861686 0,6.638738 5.37707764,12.000795 12.01581474,12.000795 6.638737,0 12.015814,-5.362057 12.015814,-12.000795 0,-5.6023732 -3.830041,-10.273521 -9.011861,-11.61028034 V 3.5213414 c 3.499607,1.2316209 6.007907,4.5660093 6.007907,8.4861686 0,4.971544 -4.040317,9.011861 -9.01186,9.011861 -4.9715438,0 -9.0118611,-4.040317 -9.0118611,-9.011861 0,-2.4932821 1.0363647,-4.7162068 2.6735186,-6.3383421 L 10.493026,10.505534 V -0.00830443 H -0.02081174 Z"
+      id="path4"
+      style={{strokeWidth: 1.50198}} />
+  </svg>
+);
+
+export default ResetIcon;

src/types.ts

@@ -6,7 +6,7 @@ export interface ContentContainer {
     (): {
         vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void;
         dontShowNoticeAgain: () => void;
-        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void;
+        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean, voteNotice?: boolean) => void;
         sponsorTimes: SponsorTime[];
         sponsorTimesSubmitting: SponsorTime[];
         skipNotices: SkipNotice[];
@@ -30,6 +30,7 @@ export interface VideoDurationResponse {
 }
 
 export enum CategorySkipOption {
+    FallbackToDefault = -2,
     Disabled = -1,
     ShowOverlay,
     ManualSkip,
@@ -70,7 +71,8 @@ export type Category = string & { __categoryBrand: unknown };
 export enum SponsorSourceType {
     Server = undefined,
     Local = 1,
-    YouTube = 2
+    YouTube = 2,
+    Autogenerated = 3
 }
 
 export interface SegmentContainer {
@@ -219,10 +221,15 @@ export interface ToggleSkippable {
     setShowKeybindHint: (show: boolean) => void;
 }
 
-export enum NoticeVisbilityMode {
+export enum NoticeVisibilityMode {
     FullSize = 0,
     MiniForAutoSkip = 1,
     MiniForAll = 2,
     FadedForAutoSkip = 3,
     FadedForAll = 4
+}
+
+export enum SegmentListDefaultTab {
+    Segments,
+    Chapters,
 }

src/utils.ts

@@ -1,11 +1,13 @@
 import Config, { VideoDownvotes } from "./config";
-import { CategorySelection, SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType, CategorySkipOption } from "./types";
+import { SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType } from "./types";
 
 import { getHash, HashedValue } from "../maze-utils/src/hash";
 import { waitFor } from "../maze-utils/src";
 import { findValidElementFromSelector } from "../maze-utils/src/dom";
 import { isSafari } from "../maze-utils/src/config";
 import { asyncRequestToServer } from "./utils/requests";
+import { FetchResponse, logRequest } from "../maze-utils/src/background-request-proxy";
+import { formatJSErrorMessage, getLongErrorMessage } from "../maze-utils/src/formating";
 
 export default class Utils {
     
@@ -199,7 +201,7 @@ export default class Utils {
 
     getSponsorIndexFromUUID(sponsorTimes: SponsorTime[], UUID: string): number {
         for (let i = 0; i < sponsorTimes.length; i++) {
-            if (sponsorTimes[i].UUID.startsWith(UUID) || UUID.startsWith(sponsorTimes[i].UUID)) {
+            if (sponsorTimes[i].UUID && (sponsorTimes[i].UUID.startsWith(UUID) || UUID.startsWith(sponsorTimes[i].UUID))) {
                 return i;
             }
         }
@@ -211,15 +213,6 @@ export default class Utils {
         return sponsorTimes[this.getSponsorIndexFromUUID(sponsorTimes, UUID)];
     }
 
-    getCategorySelection(category: string): CategorySelection {
-        for (const selection of Config.config.categorySelections) {
-            if (selection.name === category) {
-                return selection;
-            }
-        }
-        return { name: category, option: CategorySkipOption.Disabled} as CategorySelection;
-    }
-
     /**
      * @returns {String[]} Domains in regex form
      */
@@ -249,6 +242,7 @@ export default class Utils {
             ".main-video-section > .video-container", // Cloudtube
             ".shaka-video-container", // Piped
             "#player-container.ytk-player", // YT Kids
+            "#id-tv-container" // YTTV
         ];
 
         let referenceNode = findValidElementFromSelector(selectors)
@@ -284,13 +278,24 @@ export default class Utils {
                 || !Config.config.trackDownvotes) return;
 
         if (segmentUUID.length < 60) {
-            const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
-                UUID: segmentUUID,
-                videoID
-            });
+            let segmentIDData: FetchResponse;
+            try {
+                segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                    UUID: segmentUUID,
+                    videoID
+                });
+            } catch (e) {
+                console.error("[SB] Caught error while trying to resolve the segment UUID to be hidden", e);
+                alert(`${chrome.i18n.getMessage("segmentHideFailed")}\n${formatJSErrorMessage(e)}`);
+                return;
+            }
 
             if (segmentIDData.ok && segmentIDData.responseText) {
                 segmentUUID = segmentIDData.responseText;
+            } else {
+                logRequest(segmentIDData, "SB", "segment UUID resolution");
+                alert(`${chrome.i18n.getMessage("segmentHideFailed")}\n${getLongErrorMessage(segmentIDData.status, segmentIDData.responseText)}`);
+                return;
             }
         }
 

src/utils/categoryUtils.ts

@@ -6,6 +6,7 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     if (autoSkip) {
         let messageId = "";
         switch (segments[0].actionType) {
+            case ActionType.Chapter:
             case ActionType.Skip:
                 messageId = "skipped";
                 break;
@@ -21,6 +22,7 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     } else {
         let messageId = "";
         switch (segments[0].actionType) {
+            case ActionType.Chapter:
             case ActionType.Skip:
                 messageId = "skip_category";
                 break;
@@ -44,6 +46,14 @@ export function getUpcomingText(segments: SponsorTime[]): string {
     return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
 }
 
+export function getVoteText(segments: SponsorTime[]): string {
+    const categoryName = chrome.i18n.getMessage(segments.length > 1 ? "multipleSegments" 
+        : "category_" + segments[0].category + "_short") || chrome.i18n.getMessage("category_" + segments[0].category);
+        
+    const messageId = "voted_on";
+    return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
+}
+
 
 export function getCategorySuffix(category: Category): string {
     if (category.startsWith("poi_")) {

src/utils/constants.ts

@@ -98,6 +98,23 @@ export function getGuidelineInfo(category: Category): TextBox[] {
                 icon: "icons/right-arrow.svg",
                 text: chrome.i18n.getMessage(`generic_guideline2`)
             }];
+        case "hook":
+            return [{
+                icon: "icons/campaign.svg",
+                text: chrome.i18n.getMessage(`category_${category}_guideline1`)
+            }, {
+                icon: "icons/check-smaller.svg",
+                text: chrome.i18n.getMessage(`category_${category}_guideline2`)
+            }, {
+                icon: "icons/close-smaller.svg",
+                text: chrome.i18n.getMessage(`category_${category}_guideline3`)
+            }, {
+                icon: "icons/segway.png",
+                text: chrome.i18n.getMessage(`generic_guideline1`)
+            }, {
+                icon: "icons/right-arrow.svg",
+                text: chrome.i18n.getMessage(`generic_guideline2`)
+            }];
         case "filler":
             return [{
                 icon: "icons/stopwatch.svg",

src/utils/exporter.ts

@@ -16,7 +16,7 @@ export function exportTimes(segments: SponsorTime[]): string {
     let result = "";
     for (const segment of segments) {
         if (![ActionType.Full, ActionType.Mute].includes(segment.actionType)
-                && segment.source !== SponsorSourceType.YouTube) {
+                && ![SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source)) {
             result += exportTime(segment) + "\n";
         }
     }
@@ -34,9 +34,12 @@ function exportTime(segment: SponsorTime): string {
 
 export function importTimes(data: string, videoDuration: number): SponsorTime[] {
     const lines = data.split("\n");
+    const timeRegex = /(?:((?:\d+:)?\d+:\d+)+(?:\.\d+)?)|(?:\d+(?=s| second))/g;
+    const anyLineHasTime = lines.some((line) => timeRegex.test(line));
+
     const result: SponsorTime[] = [];
     for (const line of lines) {
-        const match = line.match(/(?:((?:\d+:)?\d+:\d+)+(?:\.\d+)?)|(?:\d+(?=s| second))/g);
+        const match = line.match(timeRegex);
         if (match) {
             const startTime = getFormattedTimeToSeconds(match[0]);
             if (startTime !== null) {
@@ -71,6 +74,18 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
 
                 result.push(segment);
             }
+        } else if (!anyLineHasTime) {
+            // Adding chapters with placeholder times
+            const segment: SponsorTime = {
+                segment: [0, 0],
+                category: "chapter" as Category,
+                actionType: ActionType.Chapter,
+                description: line,
+                source: SponsorSourceType.Local,
+                UUID: generateUserID() as SegmentUUID
+            };
+
+            result.push(segment);
         }
     }
 

src/utils/pageUtils.ts

@@ -1,6 +1,6 @@
 import { ActionType, Category, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
-import Config from "../config";
+import { getSkipProfileBool } from "./skipProfiles";
 
 export function getControls(): HTMLElement {
     const controlsSelectors = [
@@ -13,7 +13,9 @@ export function getControls(): HTMLElement {
         // Piped shaka player
         ".shaka-bottom-controls",
         // Vorapis v3
-        ".html5-player-chrome"
+        ".html5-player-chrome",
+        // tv.youtube.com
+        ".ypcs-control-buttons-right"
     ];
 
     for (const controlsSelector of controlsSelectors) {
@@ -64,7 +66,9 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
     const chaptersBox = document.querySelector("ytd-macro-markers-list-renderer");
     const title = chaptersBox?.closest("ytd-engagement-panel-section-list-renderer")?.querySelector("#title-text.ytd-engagement-panel-title-header-renderer");
     if (title?.textContent?.includes("Key moment")) return [];
-    if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) return [];
+
+    const autogenerated = hasAutogeneratedChapters();
+    if (!getSkipProfileBool("showAutogeneratedChapters") && autogenerated) return [];
 
     const chapters: SponsorTime[] = [];
     // .ytp-timed-markers-container indicates that key-moments are present, which should not be divided
@@ -88,7 +92,7 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
                     category: "chapter" as Category,
                     actionType: ActionType.Chapter,
                     description: description.innerText,
-                    source: SponsorSourceType.YouTube,
+                    source: autogenerated ? SponsorSourceType.Autogenerated : SponsorSourceType.YouTube,
                     UUID: null
                 };
             }

src/utils/requests.ts

@@ -2,17 +2,6 @@ import Config from "../config";
 import * as CompileConfig from "../../config.json";
 import { FetchResponse, sendRequestToCustomServer } from "../../maze-utils/src/background-request-proxy";
 
-/**
- * Sends a request to a custom server
- * 
- * @param type The request type. "GET", "POST", etc.
- * @param address The address to add to the SponsorBlock server address
- * @param callback 
- */    
-export function asyncRequestToCustomServer(type: string, url: string, data = {}, headers = {}): Promise<FetchResponse> {
-    return sendRequestToCustomServer(type, url, data, headers);
-}
-
 /**
  * Sends a request to the SponsorBlock server with address added as a query
  * 
@@ -23,25 +12,5 @@ export function asyncRequestToCustomServer(type: string, url: string, data = {},
 export async function asyncRequestToServer(type: string, address: string, data = {}, headers = {}): Promise<FetchResponse> {
     const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
 
-    return await (asyncRequestToCustomServer(type, serverAddress + address, data, headers));
+    return await (sendRequestToCustomServer(type, serverAddress + address, data, headers));
 }
-
-/**
- * Sends a request to the SponsorBlock server with address added as a query
- * 
- * @param type The request type. "GET", "POST", etc.
- * @param address The address to add to the SponsorBlock server address
- * @param callback 
- */
-export function sendRequestToServer(type: string, address: string, callback?: (response: FetchResponse) => void): void {
-    const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
-
-    // Ask the background script to do the work
-    chrome.runtime.sendMessage({
-        message: "sendRequest",
-        type,
-        url: serverAddress + address
-    }, (response) => {
-        callback(response);
-    });
-}

src/utils/segmentData.ts

@@ -1,10 +1,12 @@
 import { DataCache } from "../../maze-utils/src/cache";
 import { getHash, HashedValue } from "../../maze-utils/src/hash";
-import Config from "../config";
+import Config, {  } from "../config";
 import * as CompileConfig from "../../config.json";
-import { ActionType, ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
+import { ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getHashParams } from "./pageUtils";
 import { asyncRequestToServer } from "./requests";
+import { extensionUserAgent } from "../../maze-utils/src";
+import { logRequest, serializeOrStringify } from "../../maze-utils/src/background-request-proxy";
 
 const segmentDataCache = new DataCache<VideoID, SegmentResponse>(() => {
     return {
@@ -17,7 +19,7 @@ const pendingList: Record<VideoID, Promise<SegmentResponse>> = {};
 
 export interface SegmentResponse {
     segments: SponsorTime[] | null;
-    status: number;
+    status: number | Error | string;
 }
 
 export async function getSegmentsForVideo(videoID: VideoID, ignoreCache: boolean): Promise<SegmentResponse> {
@@ -36,37 +38,42 @@ export async function getSegmentsForVideo(videoID: VideoID, ignoreCache: boolean
     const pendingData = fetchSegmentsForVideo(videoID);
     pendingList[videoID] = pendingData;
 
-    const result = await pendingData;
-    delete pendingList[videoID];
+    let result: Awaited<typeof pendingData>;
+    try {
+        result = await pendingData;
+    } catch (e) {
+        console.error("[SB] Caught error while fetching segments", e);
+        return {
+            segments: null,
+            status: serializeOrStringify(e),
+        }
+    } finally {
+        delete pendingList[videoID];
+    }
 
     return result;
 }
 
 async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse> {
-    const categories: string[] = Config.config.categorySelections.map((category) => category.name);
-
     const extraRequestData: Record<string, unknown> = {};
     const hashParams = getHashParams();
     if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
 
-    const hashPrefix = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
-    const hasDownvotedSegments = !!Config.local.downvotedSegments[hashPrefix];
+    const hashPrefix = (await getHash(videoID, 1)).slice(0, 5) as VideoID & HashedValue;
+    const hasDownvotedSegments = !!Config.local.downvotedSegments[hashPrefix.slice(0, 4)];
     const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
         categories: CompileConfig.categoryList,
         actionTypes: ActionTypes,
         trimUUIDs: hasDownvotedSegments ? null : 5,
         ...extraRequestData
     }, {
-        "X-CLIENT-NAME": `${chrome.runtime.id}/v${chrome.runtime.getManifest().version}`
+        "X-CLIENT-NAME": extensionUserAgent(),
     });
 
     if (response.ok) {
-        const enabledActionTypes = getEnabledActionTypes();
-
         const receivedSegments: SponsorTime[] = JSON.parse(response.responseText)
                     ?.filter((video) => video.videoID === videoID)
                     ?.map((video) => video.segments)?.[0]
-                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType) && categories.includes(segment.category))
                     ?.map((segment) => ({
                         ...segment,
                         source: SponsorSourceType.Server
@@ -85,22 +92,12 @@ async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse>
             // Setup with null data
             segmentDataCache.setupCache(videoID);
         }
+    } else if (response.status !== 404) {
+        logRequest(response, "SB", "skip segments");
     }
 
     return {
         segments: null,
         status: response.status
     };
-}
-
-function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
-    const actionTypes = [ActionType.Skip, ActionType.Poi, ActionType.Chapter];
-    if (Config.config.muteSegments) {
-        actionTypes.push(ActionType.Mute);
-    }
-    if (Config.config.fullVideoSegments || forceFullVideo) {
-        actionTypes.push(ActionType.Full);
-    }
-
-    return actionTypes;
 }

src/utils/skipProfiles.ts

@@ -0,0 +1,97 @@
+import { getChannelIDInfo, getVideoID } from "../../maze-utils/src/video";
+import Config, { ConfigurationID, CustomConfiguration } from "../config";
+import { SponsorHideType, SponsorTime } from "../types";
+
+let currentTabSkipProfile: ConfigurationID = null;
+
+export function getSkipProfileIDForTime(): ConfigurationID | null {
+    if (Config.local.skipProfileTemp !== null && Config.local.skipProfileTemp.time > Date.now() - 60 * 60 * 1000) {
+        return Config.local.skipProfileTemp.configID;
+    } else {
+        return null;
+    }
+}
+
+export function getSkipProfileIDForTab(): ConfigurationID | null {
+    return currentTabSkipProfile;
+}
+
+export function setCurrentTabSkipProfile(configID: ConfigurationID | null) {
+    currentTabSkipProfile = configID ?? null;
+}
+
+export function getSkipProfileIDForVideo(): ConfigurationID | null {
+    return Config.local.channelSkipProfileIDs[getVideoID()] ?? null;
+}
+
+export function getSkipProfileIDForChannel(): ConfigurationID | null {
+    const channelInfo = getChannelIDInfo();
+
+    if (!channelInfo) {
+        return null;
+    }
+
+    return Config.local.channelSkipProfileIDs[channelInfo.id]
+        ?? Config.local.channelSkipProfileIDs[channelInfo.author]
+       ?? null;
+}
+
+export function getSkipProfileID(): ConfigurationID | null {
+    const configID =
+        getSkipProfileIDForTime()
+        ?? getSkipProfileIDForTab()
+        ?? getSkipProfileIDForVideo()
+        ?? getSkipProfileIDForChannel();
+    
+    return configID ?? null;
+}
+
+export function getSkipProfile(): CustomConfiguration | null {
+    const configID = getSkipProfileID();
+    
+    if (configID) {
+        return Config.local.skipProfiles[configID];
+    }
+
+    return null;
+}
+
+type SkipProfileBoolKey =
+    "showAutogeneratedChapters"
+    | "autoSkipOnMusicVideos"
+    | "skipNonMusicOnlyOnYoutubeMusic"
+    | "muteSegments"
+    | "fullVideoSegments"
+    | "manualSkipOnFullVideo";
+
+export function getSkipProfileBool(key: SkipProfileBoolKey): boolean {
+    return getSkipProfileValue<boolean>(key);
+}
+
+export function getSkipProfileNum(key: "minDuration"): number {
+    return getSkipProfileValue<number>(key);
+}
+
+function getSkipProfileValue<T>(key: keyof CustomConfiguration): T {
+    const profile = getSkipProfile();
+    if (profile && profile[key] !== null) {
+        return profile[key] as T;
+    }
+
+    return Config.config[key];
+}
+
+export function hideTooShortSegments(sponsorTimes: SponsorTime[]) {
+    const minDuration = getSkipProfileNum("minDuration");
+
+    if (minDuration !== 0) {
+        for (const segment of sponsorTimes) {
+            const duration = segment.segment[1] - segment.segment[0];
+            if (duration > 0 && duration < minDuration && (segment.hidden === SponsorHideType.Visible || SponsorHideType.MinimumDuration)) {
+                segment.hidden = SponsorHideType.MinimumDuration;
+            } else if (segment.hidden === SponsorHideType.MinimumDuration) {
+                segment.hidden = SponsorHideType.Visible;
+            }
+        }
+    }
+}

src/utils/skipRule.ts

@@ -0,0 +1,931 @@
+import { getCurrentPageTitle } from "../../maze-utils/src/elements";
+import { getChannelIDInfo, getVideoDuration } from "../../maze-utils/src/video";
+import Config from "../config";
+import {ActionType, ActionTypes, CategorySelection, CategorySkipOption, SponsorSourceType, SponsorTime} from "../types";
+import { getSkipProfile, getSkipProfileBool } from "./skipProfiles";
+import { VideoLabelsCacheData } from "./videoLabels";
+import * as CompileConfig from "../../config.json";
+import { AdvancedSkipCheck, AdvancedSkipPredicate, AdvancedSkipRule, PredicateOperator, SkipRuleAttribute, SkipRuleOperator } from "./skipRule.type";
+
+const SKIP_RULE_ATTRIBUTES = Object.values(SkipRuleAttribute);
+const SKIP_RULE_OPERATORS = Object.values(SkipRuleOperator);
+const INVERTED_SKIP_RULE_OPERATORS = {
+    "<=": SkipRuleOperator.Greater,
+    "<": SkipRuleOperator.GreaterOrEqual,
+    ">=": SkipRuleOperator.Less,
+    ">": SkipRuleOperator.LessOrEqual,
+    "!=": SkipRuleOperator.Equal,
+    "==": SkipRuleOperator.NotEqual,
+    "!*=": SkipRuleOperator.Contains,
+    "*=": SkipRuleOperator.NotContains,
+    "!~=": SkipRuleOperator.Regex,
+    "~=": SkipRuleOperator.NotRegex,
+    "!~i=": SkipRuleOperator.RegexIgnoreCase,
+    "~i=": SkipRuleOperator.NotRegexIgnoreCase,
+};
+const WORD_EXTRA_CHARACTER = /[a-zA-Z0-9.]/;
+const OPERATOR_EXTRA_CHARACTER = /[<>=!~*&|-]/;
+const ANY_EXTRA_CHARACTER = /[a-zA-Z0-9<>=!~*&|.-]/;
+
+export function getCategorySelection(segment: SponsorTime | VideoLabelsCacheData): CategorySelection {
+    // First check skip rules
+    for (const rule of Config.local.skipRules) {
+        if (isSkipPredicatePassing(segment, rule.predicate)) {
+            return { name: segment.category, option: rule.skipOption } as CategorySelection;
+        }
+    }
+
+    // Action type filters
+    if ("actionType" in segment && (segment as SponsorTime).actionType === "mute" && !getSkipProfileBool("muteSegments")) {
+        return { name: segment.category, option: CategorySkipOption.Disabled } as CategorySelection;
+    }
+
+    // Then check skip profile
+    const profile = getSkipProfile();
+    if (profile) {
+        const profileSelection = profile.categorySelections.find(selection => selection.name === segment.category);
+        if (profileSelection) {
+            return profileSelection;
+        }
+    }
+
+    // Then fallback to default
+    for (const selection of Config.config.categorySelections) {
+        if (selection.name === segment.category) {
+            return selection;
+        }
+    }
+    return { name: segment.category, option: CategorySkipOption.Disabled} as CategorySelection;
+}
+
+function getSkipCheckValue(segment: SponsorTime | VideoLabelsCacheData, rule: AdvancedSkipCheck): string | number | undefined {
+    switch (rule.attribute) {
+        case SkipRuleAttribute.StartTime:
+            return (segment as SponsorTime).segment?.[0];
+        case SkipRuleAttribute.EndTime:
+            return (segment as SponsorTime).segment?.[1];
+        case SkipRuleAttribute.Duration:
+            return (segment as SponsorTime).segment?.[1] - (segment as SponsorTime).segment?.[0];
+        case SkipRuleAttribute.StartTimePercent: {
+            const startTime = (segment as SponsorTime).segment?.[0];
+            if (startTime === undefined) return undefined;
+
+            return startTime / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.EndTimePercent: {
+            const endTime = (segment as SponsorTime).segment?.[1];
+            if (endTime === undefined) return undefined;
+
+            return endTime / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.DurationPercent: {
+            const startTime = (segment as SponsorTime).segment?.[0];
+            const endTime = (segment as SponsorTime).segment?.[1];
+            if (startTime === undefined || endTime === undefined) return undefined;
+
+            return (endTime - startTime) / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.Category:
+            return segment.category;
+        case SkipRuleAttribute.ActionType:
+            return (segment as SponsorTime).actionType;
+        case SkipRuleAttribute.Description:
+            return (segment as SponsorTime).description || "";
+        case SkipRuleAttribute.Source:
+            switch ((segment as SponsorTime).source) {
+                case SponsorSourceType.Local:
+                    return "local";
+                case SponsorSourceType.YouTube:
+                    return "youtube";
+                case SponsorSourceType.Autogenerated:
+                    return "autogenerated";
+                case SponsorSourceType.Server:
+                    return "server";
+                default:
+                    return undefined;
+            }
+        case SkipRuleAttribute.ChannelID:
+            return getChannelIDInfo().id;
+        case SkipRuleAttribute.ChannelName:
+            return getChannelIDInfo().author;
+        case SkipRuleAttribute.VideoDuration:
+            return getVideoDuration();
+        case SkipRuleAttribute.Title:
+            return getCurrentPageTitle() || "";
+        default:
+            return undefined;
+    }
+}
+
+function isSkipCheckPassing(segment: SponsorTime | VideoLabelsCacheData, rule: AdvancedSkipCheck): boolean {
+    const value = getSkipCheckValue(segment, rule);
+
+    switch (rule.operator) {
+        case SkipRuleOperator.Less:
+            return typeof value === "number" && value < (rule.value as number);
+        case SkipRuleOperator.LessOrEqual:
+            return typeof value === "number" && value <= (rule.value as number);
+        case SkipRuleOperator.Greater:
+            return typeof value === "number" && value > (rule.value as number);
+        case SkipRuleOperator.GreaterOrEqual:
+            return typeof value === "number" && value >= (rule.value as number);
+        case SkipRuleOperator.Equal:
+            return value === rule.value;
+        case SkipRuleOperator.NotEqual:
+            return value !== rule.value;
+        case SkipRuleOperator.Contains:
+            return String(value).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
+        case SkipRuleOperator.NotContains:
+            return !String(value).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
+        case SkipRuleOperator.Regex:
+            return new RegExp(rule.value as string).test(String(value));
+        case SkipRuleOperator.RegexIgnoreCase:
+            return new RegExp(rule.value as string, "i").test(String(value));
+        case SkipRuleOperator.NotRegex:
+            return !new RegExp(rule.value as string).test(String(value));
+        case SkipRuleOperator.NotRegexIgnoreCase:
+            return !new RegExp(rule.value as string, "i").test(String(value));
+        default:
+            return false;
+    }
+}
+
+function isSkipPredicatePassing(segment: SponsorTime | VideoLabelsCacheData, predicate: AdvancedSkipPredicate): boolean {
+    if (predicate.kind === "check") {
+        return isSkipCheckPassing(segment, predicate as AdvancedSkipCheck);
+    } else { // predicate.kind === "operator"
+        // TODO Is recursion fine to use here?
+        if (predicate.operator == PredicateOperator.And) {
+            return isSkipPredicatePassing(segment, predicate.left) && isSkipPredicatePassing(segment, predicate.right);
+        } else { // predicate.operator === PredicateOperator.Or
+            return isSkipPredicatePassing(segment, predicate.left) || isSkipPredicatePassing(segment, predicate.right);
+        }
+    }
+}
+
+export function getCategoryDefaultSelection(category: string): CategorySelection {
+    for (const selection of Config.config.categorySelections) {
+        if (selection.name === category) {
+            return selection;
+        }
+    }
+    return { name: category, option: CategorySkipOption.Disabled} as CategorySelection;
+}
+
+type TokenType =
+    | "if" // Keywords
+    | "disabled" | "show overlay" | "manual skip" | "auto skip" // Skip option
+    | `${SkipRuleAttribute}` // Segment attributes
+    | `${SkipRuleOperator}` // Segment attribute operators
+    | "and" | "or" | "not" // Expression operators
+    | "(" | ")" | "comment" // Syntax
+    | "string" | "number" // Literal values
+    | "eof" | "error"; // Sentinel and special tokens
+
+export interface SourcePos {
+    line: number;
+}
+
+export interface Span {
+    start: SourcePos;
+    end: SourcePos;
+}
+
+interface Token {
+    type: TokenType;
+    span: Span;
+    value: string;
+}
+
+class Lexer {
+    private readonly source: string;
+    private start: number;
+    private current: number;
+
+    private start_pos: SourcePos;
+    private current_pos: SourcePos;
+
+    public constructor(source: string) {
+        this.source = source;
+        this.start = 0;
+        this.current = 0;
+        this.start_pos = { line: 1 };
+        this.current_pos = { line: 1 };
+    }
+
+    private makeToken(type: TokenType): Token {
+        return {
+            type,
+            span: { start: this.start_pos, end: this.current_pos, },
+            value: this.source.slice(this.start, this.current),
+        };
+    }
+
+    /**
+     * Returns the UTF-16 value at the current position and advances it forward.
+     * If the end of the source string has been reached, returns <code>null</code>.
+     *
+     * @return current UTF-16 value, or <code>null</code> on EOF
+     */
+    private consume(): string | null {
+        if (this.source.length > this.current) {
+            // The UTF-16 value at the current position, which could be either a Unicode code point or a lone surrogate.
+            // The check above this is also based on the UTF-16 value count, so this should not be able to fail on “weird” inputs.
+            const c = this.source[this.current];
+            this.current++;
+
+            if (c === "\n") {
+                // Cannot use this.current_pos.line++, because SourcePos is mutable and used in tokens without copying
+                this.current_pos = { line: this.current_pos.line + 1, };
+            }
+
+            return c;
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * Returns the UTF-16 value at the current position without advancing it.
+     * If the end of the source string has been reached, returns <code>null</code>.
+     *
+     * @return current UTF-16 value, or <code>null</code> on EOF
+     */
+    private peek(): string | null {
+        if (this.source.length > this.current) {
+            // See comment in consume() for Unicode expectations here
+            return this.source[this.current];
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * Checks the word at the current position against a list of
+     * expected keywords. The keyword can consist of multiple characters.
+     * If a match is found, the current position is advanced by the length
+     * of the keyword found.
+     *
+     * @param keywords the expected set of keywords at the current position
+     * @param caseSensitive whether to do a case-sensitive comparison
+     * @return the matching keyword, or <code>null</code>
+     */
+    private expectKeyword(keywords: readonly string[], caseSensitive: boolean): string | null {
+        for (const keyword of keywords) {
+            // slice() clamps to string length, so cannot cause out of bounds errors
+            const actual = this.source.slice(this.current, this.current + keyword.length);
+
+            if (caseSensitive && keyword === actual || !caseSensitive && keyword.toLowerCase() === actual.toLowerCase()) {
+                // Does not handle keywords containing line feeds, which shouldn't happen anyway
+                this.current += keyword.length;
+                return keyword;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Skips a series of whitespace characters starting at the current
+     * position. May advance the current position multiple times, once,
+     * or not at all.
+     */
+    private skipWhitespace() {
+        let c = this.peek();
+        const whitespace = /\s+/;
+
+        while (c != null) {
+            if (!whitespace.test(c)) {
+                return;
+            }
+
+            this.consume();
+            c = this.peek();
+        }
+    }
+
+    /**
+     * Skips all characters until the next <code>"\n"</code> (line feed)
+     * character occurs (inclusive). Will always advance the current position
+     * at least once.
+     */
+    private skipLine() {
+        let c = this.consume();
+        while (c != null) {
+            if (c == '\n') {
+                return;
+            }
+
+            c = this.consume();
+        }
+    }
+
+    /**
+     * @return whether the lexer has reached the end of input
+     */
+    private isEof(): boolean {
+        return this.current >= this.source.length;
+    }
+
+    /**
+     * Sets the start position of the next token that will be emitted
+     * to the current position.
+     *
+     * More characters need to be consumed after calling this, as
+     * an empty token would be emitted otherwise.
+     */
+    private resetToCurrent() {
+        this.start = this.current;
+        this.start_pos = this.current_pos;
+    }
+
+    public nextToken(): Token {
+        this.skipWhitespace();
+        this.resetToCurrent();
+
+        if (this.isEof()) {
+            return this.makeToken("eof");
+        }
+
+        const keyword = this.expectKeyword([
+            "if", "and", "or", "not",
+            "(", ")",
+            "//",
+        ].concat(SKIP_RULE_ATTRIBUTES)
+            .concat(SKIP_RULE_OPERATORS), true);
+        let type: TokenType | null = null;
+        let kind: "word" | "operator" | null = null;
+
+        if (keyword !== null) {
+            if ((SKIP_RULE_ATTRIBUTES as string[]).includes(keyword)) {
+                kind = "word";
+                type = keyword as TokenType;
+            } else if ((SKIP_RULE_OPERATORS as string[]).includes(keyword)) {
+                kind = "operator";
+                type = keyword as TokenType;
+            } else {
+                switch (keyword) {
+                    case "if":  // Fallthrough
+                    case "and": // Fallthrough
+                    case "or": // Fallthrough
+                    case "not": kind = "word"; type = keyword as TokenType; break;
+
+                    case "(": return this.makeToken("(");
+                    case ")": return this.makeToken(")");
+
+                    case "//":
+                        this.resetToCurrent();
+                        this.skipLine();
+                        return this.makeToken("comment");
+
+                    default:
+                }
+            }
+        } else {
+            const keyword2 = this.expectKeyword(
+                [ "disabled", "show overlay", "manual skip", "auto skip" ], false);
+
+            if (keyword2 !== null) {
+                kind = "word";
+                type = keyword2 as TokenType;
+            }
+        }
+
+        if (type !== null) {
+            const more = kind == "operator" ? OPERATOR_EXTRA_CHARACTER : kind == "word" ? WORD_EXTRA_CHARACTER : ANY_EXTRA_CHARACTER;
+
+            let c = this.peek();
+            let error = false;
+            while (c !== null && more.test(c)) {
+                error = true;
+                this.consume();
+                c = this.peek();
+            }
+
+            return this.makeToken(error ? "error" : type);
+        }
+
+        let c = this.consume();
+
+        if (c === '"') {
+            // Parses string according to ECMA-404 2nd edition (JSON), section 9 “String”
+            let output = "";
+            let c = this.consume();
+            let error = false;
+
+            while (c !== null && c !== '"') {
+                if (c == '\\') {
+                    c = this.consume();
+
+                    switch (c) {
+                        case '"':
+                            output = output.concat('"');
+                            break;
+                        case '\\':
+                            output = output.concat('\\');
+                            break;
+                        case '/':
+                            output = output.concat('/');
+                            break;
+                        case 'b':
+                            output = output.concat('\b');
+                            break;
+                        case 'f':
+                            output = output.concat('\f');
+                            break;
+                        case 'n':
+                            output = output.concat('\n');
+                            break;
+                        case 'r':
+                            output = output.concat('\r');
+                            break;
+                        case 't':
+                            output = output.concat('\t');
+                            break;
+                        case 'u': {
+                            // UTF-16 value sequence
+                            const digits = this.source.slice(this.current, this.current + 4);
+
+                            if (digits.length < 4 || !/[0-9a-zA-Z]{4}/.test(digits)) {
+                                error = true;
+                                output = output.concat(`\\u`);
+                                c = this.consume();
+                                continue;
+                            }
+
+                            const value = parseInt(digits, 16);
+                            // fromCharCode() takes a UTF-16 value without performing validity checks,
+                            // which is exactly what is needed here – in JSON, code units outside the
+                            // BMP are represented by two Unicode escape sequences.
+                            output = output.concat(String.fromCharCode(value));
+                            break;
+                        }
+                        default:
+                            error = true;
+                            output = output.concat(`\\${c}`);
+                            break;
+                    }
+                } else if (c === '\n') {
+                    // Unterminated / multi-line string, unsupported
+                    error = true;
+                    // Prevent unterminated strings from consuming the entire rest of the input
+                    break;
+                } else {
+                    output = output.concat(c);
+                }
+
+                c = this.consume();
+            }
+
+            return {
+                type: error || c !== '"' ? "error" : "string",
+                span: { start: this.start_pos, end: this.current_pos, },
+                value: output,
+            };
+        } else if (/[0-9-]/.test(c)) {
+            // Parses number according to ECMA-404 2nd edition (JSON), section 8 “Numbers”
+            if (c === '-') {
+                c = this.consume();
+
+                if (!/[0-9]/.test(c)) {
+                    return this.makeToken("error");
+                }
+            }
+
+            const leadingZero = c === '0';
+            let next = this.peek();
+            let error = false;
+
+            while (next !== null && /[0-9]/.test(next)) {
+                this.consume();
+                next = this.peek();
+
+                if (leadingZero) {
+                    error = true;
+                }
+            }
+
+
+            if (next !== null && next === '.') {
+                this.consume();
+                next = this.peek();
+
+                if (next === null || !/[0-9]/.test(next)) {
+                    return this.makeToken("error");
+                }
+
+                do {
+                    this.consume();
+                    next = this.peek();
+                } while (next !== null && /[0-9]/.test(next));
+            }
+
+            next = this.peek();
+
+            if (next != null && (next === 'e' || next === 'E')) {
+                this.consume();
+                next = this.peek();
+
+                if (next === null) {
+                    return this.makeToken("error");
+                }
+
+                if (next === '+' || next === '-') {
+                    this.consume();
+                    next = this.peek();
+                }
+
+                while (next !== null && /[0-9]/.test(next)) {
+                    this.consume();
+                    next = this.peek();
+                }
+            }
+
+            return this.makeToken(error ? "error" : "number");
+        }
+
+        // Consume common characters up to a space for a more useful value in the error token
+        const common = ANY_EXTRA_CHARACTER;
+        c = this.peek();
+        while (c !== null && common.test(c)) {
+            this.consume();
+            c = this.peek();
+        }
+
+        return this.makeToken("error");
+    }
+}
+
+export interface ParseError {
+    span: Span;
+    message: string;
+}
+
+class Parser {
+    private lexer: Lexer;
+
+    private previous: Token;
+    private current: Token;
+
+    private readonly rules: AdvancedSkipRule[];
+    private readonly errors: ParseError[];
+
+    private erroring: boolean;
+    private panicMode: boolean;
+
+    public constructor(lexer: Lexer) {
+        this.lexer = lexer;
+        this.previous = null;
+        this.current = lexer.nextToken();
+        this.rules = [];
+        this.errors = [];
+        this.erroring = false;
+        this.panicMode = false;
+    }
+
+    // Helper functions
+
+    /**
+     * Adds an error message. The current skip rule will be marked as erroring.
+     *
+     * @param span the range of the error
+     * @param message the message to report
+     * @param panic if <code>true</code>, all further errors will be silenced
+     *              until panic mode is disabled again
+     */
+    private errorAt(span: Span, message: string, panic: boolean) {
+        if (!this.panicMode) {
+            this.errors.push({span, message,});
+        }
+
+        this.panicMode ||= panic;
+        this.erroring = true;
+    }
+
+    /**
+     * Adds an error message for an error occurring at the previous token
+     * (which was just consumed).
+     *
+     * @param message the message to report
+     * @param panic if <code>true</code>, all further errors will be silenced
+     *              until panic mode is disabled again
+     */
+    private error(message: string, panic: boolean) {
+        this.errorAt(this.previous.span, message, panic);
+    }
+
+    /**
+     * Adds an error message for an error occurring at the current token
+     * (which has not been consumed yet).
+     *
+     * @param message the message to report
+     * @param panic if <code>true</code>, all further errors will be silenced
+     *              until panic mode is disabled again
+     */
+    private errorAtCurrent(message: string, panic: boolean) {
+        this.errorAt(this.current.span, message, panic);
+    }
+
+    /**
+     * Consumes the current token, which can then be accessed at <code>previous</code>.
+     * The next token will be at <code>current</code> after this call.
+     *
+     * If a token of type <code>error</code> is found, issues an error message.
+     */
+    private consume() {
+        this.previous = this.current;
+        // Intentionally ignoring `error` tokens here;
+        // by handling those in later privates with more context (match(), expect(), ...),
+        // the user gets better errors
+        this.current = this.lexer.nextToken();
+    }
+
+    /**
+     * Checks the current token (that has not been consumed yet) against a set of expected token types.
+     *
+     * @param expected the set of expected token types
+     * @return whether the actual current token matches any expected token type
+     */
+    private match(expected: readonly TokenType[]): boolean {
+        if (expected.includes(this.current.type)) {
+            this.consume();
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * Checks the current token (that has not been consumed yet) against a set of expected token types.
+     *
+     * If there is no match, issues an error message which will be prepended to <code>, got: <token type></code>.
+     *
+     * @param expected the set of expected token types
+     * @param message the error message to report in case the actual token doesn't match
+     * @param panic if <code>true</code>, all further errors will be silenced
+     *              until panic mode is disabled again
+     */
+    private expect(expected: readonly TokenType[], message: string, panic: boolean) {
+        if (!this.match(expected)) {
+            this.errorAtCurrent(message.concat(this.current.type === "error" ?  `, got: ${JSON.stringify(this.current.value)}` : `, got: \`${this.current.type}\``), panic);
+        }
+    }
+
+    /**
+     * Synchronize with the next rule block and disable panic mode.
+     * Skips all tokens until the <code>if</code> keyword is found.
+     */
+    private synchronize() {
+        this.panicMode = false;
+
+        while (!this.isEof()) {
+            if (this.current.type === "if") {
+                return;
+            }
+
+            this.consume();
+        }
+    }
+
+    /**
+     * @return whether the parser has reached the end of input
+     */
+    private isEof(): boolean {
+        return this.current.type === "eof";
+    }
+
+    // Parsing functions
+
+    /**
+     * Parse the config. Should only ever be called once on a given
+     * <code>Parser</code> instance.
+     */
+    public parse(): { rules: AdvancedSkipRule[]; errors: ParseError[] } {
+        while (!this.isEof()) {
+            this.erroring = false;
+            const rule = this.parseRule();
+
+            if (!this.erroring && rule) {
+                this.rules.push(rule);
+            }
+
+            if (this.panicMode) {
+                this.synchronize();
+            }
+        }
+
+        return { rules: this.rules, errors: this.errors, };
+    }
+
+    private parseRule(): AdvancedSkipRule | null {
+        const rule: AdvancedSkipRule = {
+            predicate: null,
+            skipOption: null,
+            comments: [],
+        };
+
+        while (this.match(["comment"])) {
+            rule.comments.push(this.previous.value.trim());
+        }
+
+        this.expect(["if"], rule.comments.length !== 0 ? "expected `if` after `comment`" : "expected `if`", true);
+        rule.predicate = this.parsePredicate();
+
+        this.expect(["disabled", "show overlay", "manual skip", "auto skip"], "expected skip option after condition", true);
+        switch (this.previous.type) {
+            case "disabled":
+                rule.skipOption = CategorySkipOption.Disabled;
+                break;
+            case "show overlay":
+                rule.skipOption = CategorySkipOption.ShowOverlay;
+                break;
+            case "manual skip":
+                rule.skipOption = CategorySkipOption.ManualSkip;
+                break;
+            case "auto skip":
+                rule.skipOption = CategorySkipOption.AutoSkip;
+                break;
+            default:
+            // Ignore, should have already errored
+        }
+
+        return rule;
+    }
+
+    private parsePredicate(): AdvancedSkipPredicate | null {
+        return this.parseOr();
+    }
+
+    private parseOr(): AdvancedSkipPredicate | null {
+        let left = this.parseAnd();
+
+        while (this.match(["or"])) {
+            const right = this.parseAnd();
+
+            left = {
+                kind: "operator",
+                operator: PredicateOperator.Or,
+                left, right,
+            };
+        }
+
+        return left;
+    }
+
+    private parseAnd(): AdvancedSkipPredicate | null {
+        let left = this.parseUnary();
+
+        while (this.match(["and"])) {
+            const right = this.parseUnary();
+
+            left = {
+                kind: "operator",
+                operator: PredicateOperator.And,
+                left, right,
+            };
+        }
+
+        return left;
+    }
+
+    private parseUnary(): AdvancedSkipPredicate | null {
+        if (this.match(["not"])) {
+            const predicate = this.parseUnary();
+            return predicate ? invertPredicate(predicate) : null;
+        }
+
+        return this.parsePrimary();
+    }
+
+    private parsePrimary(): AdvancedSkipPredicate | null {
+        if (this.match(["("])) {
+            const predicate = this.parsePredicate();
+            this.expect([")"], "expected `)` after condition", true);
+            return predicate;
+        } else {
+            return this.parseCheck();
+        }
+    }
+
+    private parseCheck(): AdvancedSkipCheck | null {
+        this.expect(SKIP_RULE_ATTRIBUTES, `expected attribute after \`${this.previous.type}\``, true);
+
+        if (this.erroring) {
+            return null;
+        }
+
+        const attribute = this.previous.type as SkipRuleAttribute;
+        this.expect(SKIP_RULE_OPERATORS, `expected operator after \`${attribute}\``, true);
+
+        if (this.erroring) {
+            return null;
+        }
+
+        const operator = this.previous.type as SkipRuleOperator;
+        this.expect(["string", "number"], `expected string or number after \`${operator}\``, true);
+
+        if (this.erroring) {
+            return null;
+        }
+
+        const value = this.previous.type === "number" ? Number(this.previous.value) : this.previous.value;
+
+        if ([SkipRuleOperator.Equal, SkipRuleOperator.NotEqual].includes(operator)) {
+            if (attribute === SkipRuleAttribute.Category
+                && !CompileConfig.categoryList.includes(value as string)) {
+                this.error(`unknown category: \`${value}\``, false);
+                return null;
+            } else if (attribute === SkipRuleAttribute.ActionType
+                && !ActionTypes.includes(value as ActionType)) {
+                this.error(`unknown action type: \`${value}\``, false);
+                return null;
+            } else if (attribute === SkipRuleAttribute.Source
+                && !["local", "youtube", "autogenerated", "server"].includes(value as string)) {
+                this.error(`unknown chapter source: \`${value}\``, false);
+                return null;
+            }
+        }
+
+        return {
+            kind: "check",
+            attribute, operator, value,
+        };
+    }
+}
+
+export function parseConfig(config: string): { rules: AdvancedSkipRule[]; errors: ParseError[] } {
+    const parser = new Parser(new Lexer(config));
+    return parser.parse();
+}
+
+export function configToText(config: AdvancedSkipRule[]): string {
+    let result = "";
+
+    for (const rule of config) {
+        for (const comment of rule.comments) {
+            result += "// " + comment + "\n";
+        }
+
+        result += "if ";
+        result += predicateToText(rule.predicate, null);
+
+        switch (rule.skipOption) {
+            case CategorySkipOption.Disabled:
+                result += "\nDisabled";
+                break;
+            case CategorySkipOption.ShowOverlay:
+                result += "\nShow Overlay";
+                break;
+            case CategorySkipOption.ManualSkip:
+                result += "\nManual Skip";
+                break;
+            case CategorySkipOption.AutoSkip:
+                result += "\nAuto Skip";
+                break;
+            default:
+                return null; // Invalid skip option
+        }
+
+        result += "\n\n";
+    }
+
+    return result.trim();
+}
+
+function predicateToText(predicate: AdvancedSkipPredicate, outerPrecedence: "or" | "and" | "not" | null): string {
+    if (predicate.kind === "check") {
+        return `${predicate.attribute} ${predicate.operator} ${JSON.stringify(predicate.value)}`;
+    } else if (predicate.displayInverted) {
+        // Should always be fine, considering `not` has the highest precedence
+        return `not ${predicateToText(invertPredicate(predicate), "not")}`;
+    } else {
+        let text: string;
+
+        if (predicate.operator === PredicateOperator.And) {
+            text = `${predicateToText(predicate.left, "and")} and ${predicateToText(predicate.right, "and")}`;
+        } else { // Or
+            text = `${predicateToText(predicate.left, "or")} or ${predicateToText(predicate.right, "or")}`;
+        }
+
+        return outerPrecedence !== null && outerPrecedence !== predicate.operator ? `(${text})` : text;
+    }
+}
+
+function invertPredicate(predicate: AdvancedSkipPredicate): AdvancedSkipPredicate {
+    if (predicate.kind === "check") {
+        return {
+            ...predicate,
+            operator: INVERTED_SKIP_RULE_OPERATORS[predicate.operator],
+        };
+    } else {
+        // not (a and b) == (not a or not b)
+        // not (a or b) == (not a and not b)
+        return {
+            kind: "operator",
+            operator: predicate.operator === "and" ? PredicateOperator.Or : PredicateOperator.And,
+            left: predicate.left ? invertPredicate(predicate.left) : null,
+            right: predicate.right ? invertPredicate(predicate.right) : null,
+            displayInverted: !predicate.displayInverted,
+        };
+    }
+}

src/utils/skipRule.type.ts

@@ -0,0 +1,71 @@
+import type { CategorySkipOption } from "../types";
+
+export interface Permission {
+    canSubmit: boolean;
+}
+
+// Note that attributes that are prefixes of other attributes (like `time.start`) need to be ordered *after*
+// the longer attributes, because these are matched sequentially. Using the longer attribute would otherwise result
+// in an error token.
+export enum SkipRuleAttribute {
+    StartTimePercent = "time.startPercent",
+    StartTime = "time.start",
+    EndTimePercent = "time.endPercent",
+    EndTime = "time.end",
+    DurationPercent = "time.durationPercent",
+    Duration = "time.duration",
+    Category = "category",
+    ActionType = "actionType",
+    Description = "chapter.name",
+    Source = "chapter.source",
+    ChannelID = "channel.id",
+    ChannelName = "channel.name",
+    VideoDuration = "video.duration",
+    Title = "video.title"
+}
+
+// Note that operators that are prefixes of other attributes (like `<`) need to be ordered *after* the longer
+// operators, because these are matched sequentially. Using the longer operator would otherwise result
+// in an error token.
+export enum SkipRuleOperator {
+    LessOrEqual = "<=",
+    Less = "<",
+    GreaterOrEqual = ">=",
+    Greater = ">",
+    NotEqual = "!=",
+    Equal = "==",
+    NotContains = "!*=",
+    Contains = "*=",
+    NotRegex = "!~=",
+    Regex = "~=",
+    NotRegexIgnoreCase = "!~i=",
+    RegexIgnoreCase = "~i="
+}
+
+export interface AdvancedSkipCheck {
+    kind: "check";
+    attribute: SkipRuleAttribute;
+    operator: SkipRuleOperator;
+    value: string | number;
+}
+
+export enum PredicateOperator {
+    And = "and",
+    Or = "or",
+}
+
+export interface AdvancedSkipOperator {
+    kind: "operator";
+    operator: PredicateOperator;
+    left: AdvancedSkipPredicate;
+    right: AdvancedSkipPredicate;
+    displayInverted?: boolean;
+}
+
+export type AdvancedSkipPredicate = AdvancedSkipCheck | AdvancedSkipOperator;
+
+export interface AdvancedSkipRule {
+    predicate: AdvancedSkipPredicate;
+    skipOption: CategorySkipOption;
+    comments: string[];
+}

src/utils/thumbnails.ts

@@ -1,9 +1,10 @@
-import { isOnInvidious, parseYouTubeVideoIDFromURL } from "../../maze-utils/src/video";
+import { extractVideoID, isOnInvidious } from "../../maze-utils/src/video";
 import Config from "../config";
 import { getHasStartSegment, getVideoLabel } from "./videoLabels";
 import { getThumbnailSelector, setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
 import { VideoID } from "../types";
 import { getSegmentsForVideo } from "./segmentData";
+import { onMobile } from "../../maze-utils/src/pageInfo";
 
 export async function handleThumbnails(thumbnails: HTMLImageElement[]): Promise<void> {
     await Promise.all(thumbnails.map((t) => {
@@ -18,7 +19,7 @@ export async function labelThumbnail(thumbnail: HTMLImageElement): Promise<HTMLE
         return null;
     }
     
-    const videoID = extractVideoID(thumbnail);
+    const videoID = await extractVideoIDFromElement(thumbnail);
     if (!videoID) {
         hideThumbnailLabel(thumbnail);
         return null;
@@ -61,7 +62,7 @@ function thumbnailHoverListener(e: MouseEvent) {
     let fetched = false;
     const preFetch = async () => {
         fetched = true;
-        const videoID = extractVideoID(thumbnail);
+        const videoID = await extractVideoIDFromElement(thumbnail);
         if (videoID && await getHasStartSegment(videoID)) {
             void getSegmentsForVideo(videoID, false);
         }
@@ -84,18 +85,28 @@ function thumbnailHoverListener(e: MouseEvent) {
 function getLink(thumbnail: HTMLImageElement): HTMLAnchorElement | null {
     if (isOnInvidious()) {
         return thumbnail.parentElement as HTMLAnchorElement | null;
-    } else if (thumbnail.nodeName.toLowerCase() === "yt-thumbnail-view-model") {
-        return thumbnail.closest("yt-lockup-view-model")?.querySelector("a.yt-lockup-metadata-view-model-wiz__title");
+    } else if (!onMobile()) {
+        const link = thumbnail.querySelector("a#thumbnail, a.reel-item-endpoint, a.yt-lockup-metadata-view-model__title, a.yt-lockup-metadata-view-model__title-link, a.yt-lockup-view-model__content-image, a.yt-lockup-metadata-view-model-wiz__title") as HTMLAnchorElement;
+        if (link) {
+            return link;
+        } else if (thumbnail.nodeName === "YTD-HERO-PLAYLIST-THUMBNAIL-RENDERER"
+            || thumbnail.nodeName === "YT-THUMBNAIL-VIEW-MODEL"
+        ) {
+            return thumbnail.closest("a") as HTMLAnchorElement;
+        } else {
+            return null;
+        }
     } else {
-        return thumbnail.querySelector("#thumbnail");
+        // Big thumbnails, compact thumbnails, shorts, channel feature, playlist header
+        return thumbnail.querySelector("a.media-item-thumbnail-container, a.compact-media-item-image, a.reel-item-endpoint, :scope > a, .amsterdam-playlist-thumbnail-wrapper > a") as HTMLAnchorElement;
     }
 }
 
-function extractVideoID(thumbnail: HTMLImageElement): VideoID | null {
+async function extractVideoIDFromElement(thumbnail: HTMLImageElement): Promise<VideoID | null> {
     const link = getLink(thumbnail);
     if (!link || link.nodeName !== "A" || !link.href) return null; // no link found
 
-    return parseYouTubeVideoIDFromURL(link.href)?.videoID;
+    return await extractVideoID(link);
 }
 
 function getOldThumbnailLabel(thumbnail: HTMLImageElement): HTMLElement | null {

src/utils/videoLabels.ts

@@ -1,12 +1,11 @@
 import { Category, CategorySkipOption, VideoID } from "../types";
 import { getHash } from "../../maze-utils/src/hash";
-import Utils from "../utils";
 import { logWarn } from "./logger";
 import { asyncRequestToServer } from "./requests";
+import { getCategorySelection } from "./skipRule";
+import { FetchResponse, logRequest } from "../../maze-utils/src/background-request-proxy";
 
-const utils = new Utils();
-
-interface VideoLabelsCacheData {
+export interface VideoLabelsCacheData {
     category: Category;
     hasStartSegment: boolean;
 }
@@ -26,8 +25,15 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
         return cachedEntry;
     }
 
-    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}?hasStartSegment=true`);
+    let response: FetchResponse;
+    try {
+        response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}?hasStartSegment=true`);
+    } catch (e) {
+        console.error("[SB] Caught error while fetching video labels", e)
+        return null;
+    }
     if (response.status !== 200) {
+        logRequest(response, "SB", "video labels");
         // No video labels or server down
         labelCache[hashPrefix] = {
             timestamp: Date.now(),
@@ -68,7 +74,7 @@ export async function getVideoLabel(videoID: VideoID): Promise<Category | null>
 
     if (result) {
         const category = result.videos[videoID]?.category;
-        if (category && utils.getCategorySelection(category).option !== CategorySkipOption.Disabled) {
+        if (category && getCategorySelection(result.videos[videoID]).option !== CategorySkipOption.Disabled) {
             return category;
         } else {
             return null;
@@ -87,4 +93,4 @@ export async function getHasStartSegment(videoID: VideoID): Promise<boolean | nu
     }
 
     return null;
-}
+}

src/utils/warnings.ts

@@ -1,4 +1,6 @@
 import { objectToURI } from "../../maze-utils/src";
+import { FetchResponse, logRequest } from "../../maze-utils/src/background-request-proxy";
+import { formatJSErrorMessage, getLongErrorMessage } from "../../maze-utils/src/formating";
 import { getHash } from "../../maze-utils/src/hash";
 import Config from "../config";
 import GenericNotice, { NoticeOptions } from "../render/GenericNotice";
@@ -12,15 +14,26 @@ export interface ChatConfig {
 }
 
 export async function openWarningDialog(contentContainer: ContentContainer): Promise<void> {
-    const userInfo = await asyncRequestToServer("GET", "/api/userInfo", {
-        publicUserID: await getHash(Config.config.userID),
-        values: ["warningReason"]
-    });
+    let userInfo: FetchResponse;
+    try {
+        userInfo = await asyncRequestToServer("GET", "/api/userInfo", {
+            publicUserID: await getHash(Config.config.userID),
+            values: ["warningReason"]
+        });
+    } catch (e) {
+        console.error("[SB] Caught error while trying to fetch user's active warnings", e)
+        return;
+    }
 
     if (userInfo.ok) {
         const warningReason = JSON.parse(userInfo.responseText)?.warningReason;
-        const userNameData = await asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
-        const userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
+        let userName = "";
+        try {
+            const userNameData = await asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
+            userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
+        } catch (e) {
+            console.warn("[SB] Caught non-fatal error while trying to resolve user's username", e);
+        }
         const publicUserID = await getHash(Config.config.userID);
 
         let notice: GenericNotice = null;
@@ -42,15 +55,22 @@ export async function openWarningDialog(contentContainer: ContentContainer): Pro
                 {
                     name: chrome.i18n.getMessage("warningConfirmButton"),
                     listener: async () => {
-                        const result = await asyncRequestToServer("POST", "/api/warnUser", {
-                            userID: Config.config.userID,
-                            enabled: false
-                        });
+                        let result: FetchResponse;
+                        try {
+                            result = await asyncRequestToServer("POST", "/api/warnUser", {
+                                userID: Config.config.userID,
+                                enabled: false
+                            });
+                        } catch (e) {
+                            console.error("[SB] Caught error while trying to acknowledge user's active warning", e);
+                            alert(formatJSErrorMessage(e));
+                        }
 
                         if (result.ok) {
                             notice?.close();
                         } else {
-                            alert(`${chrome.i18n.getMessage("warningError")} ${result.status}`);
+                            logRequest(result, "SB", "warning acknowledgement");
+                            alert(getLongErrorMessage(result.status, result.responseText));
                         }
                     }
             }],
@@ -58,6 +78,8 @@ export async function openWarningDialog(contentContainer: ContentContainer): Pro
         };
 
         notice = new GenericNotice(contentContainer, "warningNotice", options);
+    } else {
+        logRequest(userInfo, "SB", "user's active warnings");
     }
 }
 

test/previewBar.test.ts

@@ -1,9 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import PreviewBar, { PreviewBarSegment } from "../src/js-components/previewBar";
 
 describe("createChapterRenderGroups", () => {
     let previewBar: PreviewBar;
     beforeEach(() => {
-        previewBar = new PreviewBar(null, null, null, null, null, true);
+        previewBar = new PreviewBar(null, null, null, null, null, null, true);
     })
 
     it("Two unrelated times", () => {

test/selenium.test.ts

@@ -4,7 +4,7 @@ import * as Path from "path";
 
 import * as fs from "fs";
 
-test("Selenium Chrome test", async () => {
+xtest("Selenium Chrome test", async () => {
     let driver: WebDriver;
     try {
         driver = await setup();   
@@ -12,6 +12,11 @@ test("Selenium Chrome test", async () => {
         console.warn("A browser is probably not installed, skipping selenium tests");
         console.warn(e);
 
+        if (String(e).includes("This version of ChromeDriver only supports")) {
+            // Count as failure
+            throw e;
+        }
+
         return;
     }
 
@@ -127,6 +132,8 @@ async function editSegments(driver: WebDriver, index: number, expectedStartTimeB
     await endTimeBox.clear();
     await endTimeBox.sendKeys(endTime);
 
+    await driver.sleep(1000);
+
     editButton = await driver.findElement(By.id("sponsorTimeEditButtonSubmissionNotice" + index));
     await editButton.click();
 

tsconfig-production.json

@@ -5,7 +5,7 @@
         "noImplicitAny": false,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
-        "sourceMap": false,
+        "sourceMap": true,
         "outDir": "dist/js",
         "noEmitOnError": false,
         "typeRoots": [ "node_modules/@types" ],
@@ -20,4 +20,4 @@
     "include": [
         "src/**/*"
     ]
-}
+}

tsconfig.json

@@ -12,7 +12,7 @@
         "resolveJsonModule": true,
         "jsx": "react",
         "lib": [
-            "es2019",
+            "es2020",
             "dom",
             "dom.iterable"
         ]

webpack/webpack.common.js

@@ -93,7 +93,7 @@ module.exports = env => {
 
     return {
         entry: {
-            popup: path.join(__dirname, srcDir + 'popup.ts'),
+            popup: path.join(__dirname, srcDir + 'popup/popup.tsx'),
             background: path.join(__dirname, srcDir + 'background.ts'),
             content: path.join(__dirname, srcDir + 'content.ts'),
             options: path.join(__dirname, srcDir + 'options.ts'),
@@ -189,7 +189,8 @@ module.exports = env => {
             new BuildManifest({
                 browser: env.browser,
                 pretty: env.mode === "production",
-                stream: env.stream
+                stream: env.stream,
+                autoupdate: env.autoupdate,
             }),
             new configDiffPlugin()
         ],
@@ -200,4 +201,4 @@ module.exports = env => {
         }
 
     };
-};
+};

webpack/webpack.manifest.js

@@ -23,10 +23,13 @@ const schema = {
         pretty: {
             type: 'boolean'
         },
-        steam: {
+        stream: {
             type: 'string'
+        },
+        autoupdate: {
+            type: 'boolean',
         }
-    }  
+    }
 };
 
 class BuildManifest {
@@ -39,6 +42,7 @@ class BuildManifest {
     apply() {
         const distFolder = path.resolve(__dirname, "../dist/");
         const distManifestFile = path.resolve(distFolder, "manifest.json");
+        const [owner, repo_name] = (process.env.GITHUB_REPOSITORY ?? "ajayyy/SponsorBlock").split("/");
 
         // Add missing manifest elements
         if (this.options.browser.toLowerCase() === "firefox") {
@@ -51,6 +55,7 @@ class BuildManifest {
         }  else if (this.options.browser.toLowerCase() === "safari") {
             mergeObjects(manifest, manifestV2ManifestExtra);
             mergeObjects(manifest, safariManifestExtra);
+            manifest.optional_permissions = manifest.optional_permissions.filter((a) => a !== "*://*/*");
         }
 
         if (this.options.stream === "beta") {
@@ -61,6 +66,10 @@ class BuildManifest {
             }
         }
 
+        if (this.options.autoupdate === true && this.options.browser.toLowerCase() === "firefox") {
+            manifest.browser_specific_settings.gecko.update_url = `https://${owner.toLowerCase()}.github.io/${repo_name}/updates.json`;
+        }
+
         let result = JSON.stringify(manifest);
         if (this.options.pretty) result = JSON.stringify(manifest, null, 2);
 
@@ -85,4 +94,4 @@ function mergeObjects(object1, object2) {
     }
 }
 
-module.exports = BuildManifest;
+module.exports = BuildManifest;

webpack/webpack.prod.js

@@ -1,12 +1,40 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const { SourceMapDevToolPlugin } = require('webpack');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
-module.exports = env => {
+async function createGHPSourceMapURL(env) {
+    const manifest = require("../manifest/manifest.json");
+    const version = manifest.version;
+    const [owner, repo_name] = (process.env.GITHUB_REPOSITORY ?? "ajayyy/SponsorBlock").split("/");
+    const ghpUrl = `https://${owner.toLowerCase()}.github.io/${repo_name}/${env.browser}${env.stream === "beta" ? "-beta" : ""}/${version}/`;
+    // make a request to the url and check if we got redirected
+    // firefox doesn't seem to like getting redirected on a source map request
+    try {
+        const resp = await fetch(ghpUrl);
+        return resp.url;
+    } catch {
+        return ghpUrl;
+    }
+}
+
+module.exports = async env => {
     let mode = "production";
     env.mode = mode;
 
     return merge(common(env), {
-        mode
+        mode,
+        ...(env.ghpSourceMaps
+            ? {
+                devtool: false,
+                plugins: [new SourceMapDevToolPlugin({
+                    publicPath: await createGHPSourceMapURL(env),
+                    filename: '[file].map[query]',
+                })],
+            }
+            : {
+                devtool: "source-map",
+            }
+        ),
     });
-};
+};