bump version

Fixes #1757

.eslintrc.js

@@ -1,33 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-        node: true,
-        jest: true,
-        jasmine: true,
-    },
-    extends: [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true,
-        },
-        ecmaVersion: 12,
-        sourceType: "module",
-    },
-    plugins: ["react", "@typescript-eslint"],
-    rules: {
-        // TODO: Remove warn rules when not needed anymore
-        "no-self-assign": "off",
-        "@typescript-eslint/no-empty-interface": "off",
-    },
-    settings: {
-        react: {
-            version: "detect",
-        },
-    },
-};

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true,
+        "jest": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint"],
+    "rules": {
+        "@typescript-eslint/no-unused-vars": "error",
+        "no-self-assign": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "react/prop-types": [2, { "ignore": ["children"] }],
+        "@typescript-eslint/member-delimiter-style": "warn"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

.github/workflows/ci.yml

@@ -10,10 +10,12 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
         with:
-          node-version: '16'
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
       - run: npm ci
       - name: Copy configuration
         run: cp config.json.example config.json
@@ -25,44 +27,44 @@ jobs:
       # Create Chrome artifacts
       - name: Create Chrome artifacts
         run: npm run build:chrome
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: ChromeExtension
           path: dist
       - run: mkdir ./builds
-      - uses: montudor/action-zip@v1
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
         with:
           args: zip -qq -r ./builds/ChromeExtension.zip ./dist
 
       # Create Firefox artifacts
       - name: Create Firefox artifacts
         run: npm run build:firefox
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: FirefoxExtension
           path: dist
-      - uses: montudor/action-zip@v1
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
         with:
           args: zip -qq -r ./builds/FirefoxExtension.zip ./dist
 
       # Create Beta artifacts (Builds with the name changed to beta)
       - name: Create Chrome Beta artifacts
         run: npm run build:chrome -- --env stream=beta
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: ChromeExtensionBeta
           path: dist
-      - uses: montudor/action-zip@v1
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
         with:
           args: zip -qq -r ./builds/ChromeExtensionBeta.zip ./dist
 
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env stream=beta
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: FirefoxExtensionBeta
           path: dist
-      - uses: montudor/action-zip@v1
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
         with:
           args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
 

.github/workflows/release.yml

@@ -12,98 +12,93 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
         with:
-          node-version: '16'
-      - run: npm ci
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
       - name: Copy configuration
         run: cp config.json.example config.json
+
+      # Create source artifact with submodule
+      - name: Create directory
+        run: cd ..; mkdir ./builds
+      - name: Zip Source code
+        run: zip -r ../builds/SourceCodeUseThisOne.zip *
+      - name: Upload Source to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: ../builds/SourceCodeUseThisOne.zip
+          name: SourceCodeUseThisOne.zip
+          path: ../builds/SourceCodeUseThisOne.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm ci
       
       # Create Chrome artifacts
       - name: Create Chrome artifacts
         run: npm run build:chrome
-      - uses: actions/upload-artifact@v2
-        with:
-          name: ChromeExtension
-          path: dist
       - run: mkdir ./builds
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/ChromeExtension.zip *
-
-      # Create Firefox artifacts
-      - name: Create Firefox artifacts
-        run: npm run build:firefox
-      - uses: actions/upload-artifact@v2
-        with:
-          name: FirefoxExtension
-          path: dist
-      - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/FirefoxExtension.zip *
-
-      # Create Beta artifacts (Builds with the name changed to beta)
-      - name: Create Chrome Beta artifacts
-        run: npm run build:chrome -- --env stream=beta
-      - uses: actions/upload-artifact@v2
-        with:
-          name: ChromeExtensionBeta
-          path: dist
-      - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
-
-
-      # Create Safari artifacts
-      - name: Create Safari artifacts
-        run: npm run build:safari
-      - uses: actions/upload-artifact@v2
-        with:
-          name: SafariExtension
-          path: dist
-      - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
-      # Create Edge artifacts
-      - name: Clear dist for Edge
-        run: rm -rf ./dist
-      - name: Create Edge artifacts
-        run: npm run build:edge
-      - uses: actions/upload-artifact@v2
-        with:
-          name: EdgeExtension
-          path: dist
-      - name: Zip Artifacts
-        run: cd ./dist ; zip -r ../builds/EdgeExtension.zip *
-
-      # Upload each release asset
       - name: Upload ChromeExtension to release
-        uses: Shopify/upload-to-release@master
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
         with:
           args: builds/ChromeExtension.zip
           name: ChromeExtension.zip
           path: ./builds/ChromeExtension.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - name: Upload ChromeExtensionBeta to release
-        uses: Shopify/upload-to-release@master
-        with:
-          args: builds/ChromeExtensionBeta.zip
-          name: ChromeExtensionBeta.zip
-          path: ./builds/ChromeExtensionBeta.zip
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Create Firefox artifacts
+      - name: Create Firefox artifacts
+        run: npm run build:firefox
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/FirefoxExtension.zip *
       - name: Upload FirefoxExtension to release
-        uses: Shopify/upload-to-release@master
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
         with:
           args: builds/FirefoxExtension.zip
           name: FirefoxExtension.zip
           path: ./builds/FirefoxExtension.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Create Beta artifacts (Builds with the name changed to beta)
+      - name: Create Chrome Beta artifacts
+        run: npm run build:chrome -- --env stream=beta
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
+      - name: Upload ChromeExtensionBeta to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: builds/ChromeExtensionBeta.zip
+          name: ChromeExtensionBeta.zip
+          path: ./builds/ChromeExtensionBeta.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+
+      # Create Safari artifacts
+      - name: Create Safari artifacts
+        run: npm run build:safari
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
       - name: Upload SafariExtension to release
-        uses: Shopify/upload-to-release@master
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
         with:
           args: builds/SafariExtension.zip
           name: SafariExtension.zip
           path: ./builds/SafariExtension.zip
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Create Edge artifacts
+      - name: Clear dist for Edge
+        run: rm -rf ./dist
+      - name: Create Edge artifacts
+        run: npm run build:edge
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/EdgeExtension.zip *
       - name: Upload EdgeExtension to release
-        uses: Shopify/upload-to-release@master
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
         with:
           args: builds/EdgeExtension.zip
           name: EdgeExtension.zip
@@ -113,7 +108,7 @@ jobs:
       # Firefox Beta
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env stream=beta
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: FirefoxExtensionBeta
           path: dist
@@ -130,13 +125,13 @@ jobs:
         run: sudo apt-get install rename
       - name: Rename signed file
         run: cd ./web-ext-artifacts ; rename 's/.*/FirefoxSignedInstaller.xpi/' *
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: FirefoxExtensionSigned.xpi
           path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
 
       - name: Upload FirefoxSignedInstaller.xpi to release
-        uses: Shopify/upload-to-release@master
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
         with:
           args: web-ext-artifacts/FirefoxSignedInstaller.xpi
           name: FirefoxSignedInstaller.xpi

.github/workflows/take-action.yml

@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: take the issue
-      uses: bdougie/take-action@main
+      uses: bdougie/take-action@28b86cd8d25593f037406ecbf96082db2836e928
       env:
         GITHUB_TOKEN: ${{ github.token }}

.github/workflows/tests.yml

@@ -3,18 +3,29 @@ name: Tests
 on: [push, pull_request]
 
 jobs:
-
-  build:
+  test:
     name: Run tests
     runs-on: ubuntu-latest
 
     steps:
       # Initialization
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
         with:
-          node-version: '16'
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        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: Run tests
-        run: npm run test-without-building
+        run: npm run test
+
+      - name: Upload results on fail
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: Test Results
+          path: ./test-results

.github/workflows/update-oss-attribution.yml

@@ -12,20 +12,25 @@ jobs:
   update-oss:
     runs-on: ubuntu-latest 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
         with:
-          node-version: '16'
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
       - name: Install and generate attribution
         run: |
           npm ci
           npm i -g oss-attribution-generator
           generate-attribution
           mv ./oss-attribution/attribution.txt ./public/oss-attribution/attribution.txt
+      - name: Prettify attributions
+        run: |
+          cd ci && npx ts-node prettify.ts
 
       - name: Create pull request to update list
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04
+        # v4.2.3
         with:
           commit-message: Update OSS Attribution
           author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/updateInvidous.yml

@@ -8,8 +8,9 @@ jobs:
   check-list:
     runs-on: ubuntu-latest 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
       - name: Download instance list
         run: |
           wget https://api.invidious.io/instances.json -O ci/data.json
@@ -19,7 +20,8 @@ jobs:
         run: npm run ci:invidious
 
       - name: Create pull request to update list
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04
+        # v4.2.3
         with:
           commit-message: Update Invidious List
           author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.gitignore

@@ -7,4 +7,5 @@ web-ext-artifacts
 dist/
 tmp/
 .DS_Store
-ci/data.json
+ci/data.json
+test-results

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "public/_locales"]
+	path = public/_locales
+	url = https://github.com/ajayyy/ExtensionTranslations

README.md

@@ -5,7 +5,7 @@
   <sub>Logo by <a href="https://github.com/munadikieh">@munadikieh</a></sub>
 </p>
 
-<h1 align="center">SponsorLock</h1>
+<h1 align="center">SponsorBlock</h1>
 
 <p align="center">
   <b>Download:</b>
@@ -13,7 +13,7 @@
   <a href="https://addons.mozilla.org/addon/sponsorblock/?src=external-github">Firefox</a> |
   <a href="https://github.com/ajayyy/SponsorBlock/wiki/Android">Android</a> |
   <a href="https://github.com/ajayyy/SponsorBlock/wiki/Edge">Edge</a> |
-  <a href="https://github.com/ajayyy/SponsorBlock/wiki/Safari">Safari for MacOS</a> |
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/Safari">Safari for MacOS and iOS</a> |
   <a href="https://sponsor.ajay.app">Website</a> |
   <a href="https://sponsor.ajay.app/stats">Stats</a>
 </p>
@@ -36,7 +36,7 @@
 
 
 
-SponsorLock is an open-source crowdsourced browser extension to isolate sponsor segments in YouTube videos. Users submit when a sponsor happens from the extension, and the extension only shows you sponsor segments.
+SponsorBlock is an open-source crowdsourced browser extension to skip sponsor segments in YouTube videos. Users submit when a sponsor happens from the extension, and the extension automatically skips sponsors it knows about. It also supports skipping other categories, such as intros, outros and reminders to subscribe.
 
 It also supports Invidio.us.
 
@@ -62,17 +62,29 @@ You can read the API docs [here](https://wiki.sponsor.ajay.app/index.php/API_Doc
 
 You must have [Node.js 16](https://nodejs.org/) and npm installed.
 
-1. Copy the file `config.json.example` to `config.json` and adjust configuration as desired.
+1. Clone with submodules
+
+```bash
+git clone https://github.com/ajayyy/SponsorBlock --recurse-submodules=yes
+```
+
+Or if you already cloned it, pull submodules with
+
+```bash
+git submodule update --init --recursive
+```
+
+2. Copy the file `config.json.example` to `config.json` and adjust configuration as desired.
 
     - You will need to repeat this step in the future if you get build errors related to `CompileConfig`. This can happen for example when a new category is added.
 
-2. Run `npm install` in the repository to install dependencies.
+3. Run `npm install` in the repository to install dependencies.
 
-3. Run `npm run build:dev` (for Chrome) or `npm run build:dev:firefox` (for Firefox) to generate a development version of the extension with source maps.
+4. Run `npm run build:dev` (for Chrome) or `npm run build:dev:firefox` (for Firefox) to generate a development version of the extension with source maps.
 
     - You can also run `npm run build` (for Chrome) or `npm run build:firefox` (for Firefox) to generate a production build.
 
-4. The built extension is now in `dist/`. You can load this folder directly in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/#manifest), or convert it to a zip file to load it as a [temporary extension](https://developer.mozilla.org/en-US/docs/Tools/about:debugging#loading_a_temporary_extension) in Firefox.
+5. The built extension is now in `dist/`. You can load this folder directly in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/#manifest), or convert it to a zip file to load it as a [temporary extension](https://developer.mozilla.org/en-US/docs/Tools/about:debugging#loading_a_temporary_extension) in Firefox.
 
 ### Developing with a clean profile and hot reloading
 

ci/invidiousCI.ts

@@ -16,10 +16,10 @@ if (!existsSync(join(__dirname, "data.json"))) {
 import * as data from "../ci/data.json";
 
 type instanceMap = {
-  name: string,
-  url: string,
-  dailyRatios: {ratio: string, label: string }[],
-  thirtyDayUptime: string
+  name: string;
+  url: string;
+  dailyRatios: {ratio: string; label: string }[];
+  thirtyDayUptime: string;
 }[]
 
 // only https servers
@@ -49,7 +49,7 @@ const reliableCheck = mapped
   .filter(instance => instance.url.includes(instance.name))
 
 // finally map to array
-const result: string[] = reliableCheck.map(instance => instance.name)
+const result: string[] = reliableCheck.map(instance => instance.name).sort()
 writeFile(join(__dirname, "./invidiouslist.json"), JSON.stringify(result), (err) => {
   if (err) return console.log(err);
 })

ci/invidiouslist.json

@@ -1 +1 @@
-["yewtu.be","invidious.snopyta.org","vid.puffyan.us","invidious.kavin.rocks","invidio.xamh.de","inv.riverside.rocks","invidious-us.kavin.rocks","invidious.osi.kr","tube.cthd.icu","yt.artemislena.eu","youtube.076.ne.jp","invidious.namazso.eu"]
+["inv.bp.projectsegfau.lt","inv.odyssey346.dev","inv.riverside.rocks","inv.vern.cc","invidious.baczek.me","invidious.epicsite.xyz","invidious.esmailelbob.xyz","invidious.flokinet.to","invidious.lidarshield.cloud","invidious.nerdvpn.de","invidious.privacydev.net","invidious.snopyta.org","invidious.tiekoetter.com","invidious.weblibre.org","iv.melmac.space","vid.puffyan.us","watch.thekitty.zone","y.com.sb","yewtu.be","yt.artemislena.eu","yt.funami.tech","yt.oelrichsgarcia.de"]

ci/prettify.ts

@@ -0,0 +1,6 @@
+import { writeFile } from 'fs';
+
+import * as license from "../oss-attribution/licenseInfos.json";
+
+const result = JSON.stringify(license, null, 2);
+writeFile("../oss-attribution/licenseInfos.json", result, err => { if (err) return console.log(err) } );

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", "music_offtopic"],
+    "categoryList": ["sponsor", "selfpromo", "exclusive_access", "interaction", "poi_highlight", "intro", "outro", "preview", "filler", "chapter", "music_offtopic"],
     "categorySupport": {
         "sponsor": ["skip", "mute", "full"],
         "selfpromo": ["skip", "mute", "full"],
@@ -13,7 +13,8 @@
         "preview": ["skip", "mute"],
         "filler": ["skip", "mute"],
         "music_offtopic": ["skip"],
-        "poi_highlight": ["poi"]
+        "poi_highlight": ["poi"],
+        "chapter": ["chapter"]
     },
     "wikiLinks": {
         "sponsor": "https://wiki.sponsor.ajay.app/w/Sponsor",
@@ -27,6 +28,13 @@
         "music_offtopic": "https://wiki.sponsor.ajay.app/w/Music:_Non-Music_Section",
         "poi_highlight": "https://wiki.sponsor.ajay.app/w/Highlight",
         "guidelines": "https://wiki.sponsor.ajay.app/w/Guidelines",
-        "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment"
-    }
+        "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment",
+        "chapter": "https://wiki.sponsor.ajay.app/w/Chapter"
+    },
+    "extensionCommunicationAllowList": [
+        "enamippconapkdmgfgjchkhakpfinmaj",
+        "deArrow@ajay.app",
+        "deArrowBETA@ajay.app",
+        "app.ajay.dearrow.extension"
+    ]
 }

jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
     "transform": {
         "^.+\\.ts$": "ts-jest"
     },
+    "reporters": ["default", "github-actions"]
 }; 

manifest/chrome-manifest-extra.json

@@ -1,2 +1,8 @@
 {
+  "optional_permissions": [
+    "declarativeContent"
+  ],
+  "background": {
+    "persistent": false
+  }
 }

manifest/firefox-manifest-extra.json

@@ -1,7 +1,7 @@
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "sponsorLockAprilFools@ajay.app"
+      "id": "sponsorBlocker@ajay.app"
     }
   }
 }

manifest/manifest.json

@@ -1,9 +1,9 @@
 {
-    "name": "SponsorLock - Give Back Control!",
-    "short_name": "SponsorLock",
-    "version": "4.2.3",
+    "name": "__MSG_fullName__",
+    "short_name": "SponsorBlock",
+    "version": "5.4.8",
     "default_locale": "en",
-    "description": "SponsorLock only shows you promotion, and skips all useful informaton.",
+    "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",
     "content_scripts": [{
         "run_at": "document_start",
@@ -17,71 +17,124 @@
         ],
         "css": [
             "content.css",
+            "shared.css",
             "./libs/Source+Sans+Pro.css",
             "popup.css"
         ]
     }],
-    "web_accessible_resources": [{
-        "resources": [
-            "icons/LogoSponsorBlocker256px.png",
-            "icons/IconSponsorBlocker256px.png",
-            "icons/PlayerStartIconSponsorBlocker.svg",
-            "icons/PlayerStopIconSponsorBlocker.svg",
-            "icons/PlayerUploadIconSponsorBlocker.svg",
-            "icons/PlayerUploadFailedIconSponsorBlocker.svg",
-            "icons/PlayerCancelSegmentIconSponsorBlocker.svg",
-            "icons/clipboard.svg",
-            "icons/settings.svg",
-            "icons/pencil.svg",
-            "icons/check.svg",
-            "icons/upvote.png",
-            "icons/downvote.png",
-            "icons/thumbs_down.svg",
-            "icons/thumbs_down_locked.svg",
-            "icons/thumbs_up.svg",
-            "icons/help.svg",
-            "icons/report.png",
-            "icons/close.png",
-            "icons/skipIcon.svg",
-            "icons/refresh.svg",
-            "icons/beep.ogg",
-            "icons/pause.svg",
-            "icons/stop.svg",
-            "icons/heart.svg",
-            "icons/visible.svg",
-            "icons/not_visible.svg",
-            "icons/PlayerInfoIconSponsorBlocker.svg",
-            "icons/PlayerDeleteIconSponsorBlocker.svg",
-            "popup.html",
-            "content.css"
-        ],
-        "matches": ["<all_urls>"]
-    }],
-    "permissions": [
-        "storage"
+    "web_accessible_resources": [
+        "icons/LogoSponsorBlocker256px.png",
+        "icons/IconSponsorBlocker256px.png",
+        "icons/PlayerStartIconSponsorBlocker.svg",
+        "icons/PlayerStopIconSponsorBlocker.svg",
+        "icons/PlayerUploadIconSponsorBlocker.svg",
+        "icons/PlayerUploadFailedIconSponsorBlocker.svg",
+        "icons/PlayerCancelSegmentIconSponsorBlocker.svg",
+        "icons/clipboard.svg",
+        "icons/settings.svg",
+        "icons/pencil.svg",
+        "icons/check.svg",
+        "icons/check-smaller.svg",
+        "icons/upvote.png",
+        "icons/downvote.png",
+        "icons/thumbs_down.svg",
+        "icons/thumbs_down_locked.svg",
+        "icons/thumbs_up.svg",
+        "icons/help.svg",
+        "icons/report.png",
+        "icons/close.png",
+        "icons/skipIcon.svg",
+        "icons/refresh.svg",
+        "icons/beep.ogg",
+        "icons/pause.svg",
+        "icons/stop.svg",
+        "icons/skip.svg",
+        "icons/heart.svg",
+        "icons/visible.svg",
+        "icons/not_visible.svg",
+        "icons/sort.svg",
+        "icons/money.svg",
+        "icons/segway.png",
+        "icons/close-smaller.svg",
+        "icons/right-arrow.svg",
+        "icons/campaign.svg",
+        "icons/star.svg",
+        "icons/lightbulb.svg",
+        "icons/bolt.svg",
+        "icons/stopwatch.svg",
+        "icons/music-note.svg",
+        "icons/import.svg",
+        "icons/export.svg",
+        "icons/PlayerInfoIconSponsorBlocker.svg",
+        "icons/PlayerDeleteIconSponsorBlocker.svg",
+        "popup.html",
+        "popup.css",
+        "content.css",
+        "shared.css",
+        "js/document.js",
+        "libs/Source+Sans+Pro.css",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2",
+        "libs/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2"
     ],
-    "host_permissions": [
+    "permissions": [
+        "storage",
         "https://sponsor.ajay.app/*"
     ],
-    "action": {
+    "optional_permissions": [
+        "*://*/*",
+        "webNavigation"
+    ],
+    "browser_action": {
         "default_title": "SponsorBlock",
-        "default_popup": "popup.html"
+        "default_popup": "popup.html",
+        "default_icon": {
+            "16": "icons/IconSponsorBlocker16px.png",
+            "32": "icons/IconSponsorBlocker32px.png",
+            "64": "icons/IconSponsorBlocker64px.png",
+            "128": "icons/IconSponsorBlocker128px.png"
+        },
+        "theme_icons": [
+            {
+                "light": "icons/IconSponsorBlocker16px.png",
+                "dark": "icons/IconSponsorBlocker16px.png",
+                "size": 16
+            },
+            {
+                "light": "icons/IconSponsorBlocker32px.png",
+                "dark": "icons/IconSponsorBlocker32px.png",
+                "size": 32
+            },
+            {
+                "light": "icons/IconSponsorBlocker64px.png",
+                "dark": "icons/IconSponsorBlocker64px.png",
+                "size": 64
+            },
+            {
+                "light": "icons/IconSponsorBlocker128px.png",
+                "dark": "icons/IconSponsorBlocker128px.png",
+                "size": 128
+            }
+        ]
     }, 
     "background": {
-        "service_worker": "./js/background.js"
+        "scripts":[
+        "./js/background.js"
+        ]
     },
     "icons": {
-        "16": "icons/LogoSponsorBlocker64px.png",
-        "32": "icons/LogoSponsorBlocker64px.png",
-        "64": "icons/LogoSponsorBlocker64px.png",
-        "128": "icons/LogoSponsorBlocker128px.png",
-        "256": "icons/LogoSponsorBlocker256px.png",
-        "512": "icons/LogoSponsorBlocker512px.png",
-        "1024": "icons/LogoSponsorBlocker1024px.png"
+        "16": "icons/IconSponsorBlocker16px.png",
+        "32": "icons/IconSponsorBlocker32px.png",
+        "64": "icons/IconSponsorBlocker64px.png",
+        "128": "icons/IconSponsorBlocker128px.png",
+        "256": "icons/IconSponsorBlocker256px.png",
+        "512": "icons/IconSponsorBlocker512px.png",
+        "1024": "icons/IconSponsorBlocker1024px.png"
     },
     "options_ui": {
-        "page": "options/lock-options.html",
+        "page": "options/options.html",
         "open_in_tab": true
     },
-    "manifest_version": 3
+    "manifest_version": 2
 }  

package.json

@@ -4,36 +4,40 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@ajayyy/maze-utils": "1.1.29",
+    "content-scripts-register-polyfill": "^4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.178",
-    "@types/firefox-webext-browser": "^94.0.1",
-    "@types/jest": "^27.4.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "@types/selenium-webdriver": "^4.0.17",
-    "@types/wicg-mediasession": "^1.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
-    "chromedriver": "^97.0.4",
-    "concurrently": "^7.0.0",
-    "copy-webpack-plugin": "^10.2.4",
-    "eslint": "^8.8.0",
-    "eslint-plugin-react": "^7.28.0",
-    "jest": "^27.5.0",
-    "rimraf": "^3.0.2",
+    "@types/chrome": "^0.0.220",
+    "@types/firefox-webext-browser": "^111.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/selenium-webdriver": "^4.1.13",
+    "@types/wicg-mediasession": "^1.1.4",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "chromedriver": "^110.0.0",
+    "concurrently": "^7.6.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.35.0",
+    "eslint-plugin-react": "^7.32.2",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "rimraf": "^4.3.1",
     "schema-utils": "^4.0.0",
-    "selenium-webdriver": "^4.1.1",
-    "ts-jest": "^27.1.3",
-    "ts-loader": "^9.2.6",
-    "ts-node": "^10.4.0",
-    "typescript": "4.5",
-    "web-ext": "^6.6.0",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-merge": "^4.2.2"
+    "selenium-webdriver": "^4.8.1",
+    "ts-jest": "^29.0.5",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "typescript": "4.9",
+    "web-ext": "^7.6.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0"
   },
   "scripts": {
     "web-run": "npm run web-run:chrome",
@@ -63,12 +67,12 @@
     "lint:fix": "eslint src --fix"
   },
   "engines": {
-    "node": ">=12.20.0"
+    "node": ">=16"
   },
   "funding": [
     {
       "type": "individual",
-      "url": "hhttps://sponsor.ajay.app/donate"
+      "url": "https://sponsor.ajay.app/donate"
     },
     {
       "type": "github",

public/_locales/en/messages.json

@@ -1,933 +0,0 @@
-{
-    "fullName": {
-        "message": "SponsorBlock for YouTube - Skip Sponsorships",
-        "description": "Name of the extension."
-    },
-    "Description": {
-        "message": "Skip sponsorships, subscription begging and more on YouTube videos. Report sponsors on videos you watch to save others' time.",
-        "description": "Description of the extension."
-    },
-    "400": {
-        "message": "Server said this request was invalid"
-    },
-    "429": {
-        "message": "You have submitted too many sponsor times for this one video, are you sure there are this many?"
-    },
-    "409": {
-        "message": "This has already been submitted before"
-    },
-    "channelWhitelisted": {
-        "message": "Channel Whitelisted!"
-    },
-    "Segment": {
-        "message": "segment"
-    },
-    "Segments": {
-        "message": "segments"
-    },
-    "upvoteButtonInfo": {
-        "message": "Upvote this submission"
-    },
-    "reportButtonTitle": {
-        "message": "Report"
-    },
-    "reportButtonInfo": {
-        "message": "Report this submission as incorrect."
-    },
-    "Dismiss": {
-        "message": "Dismiss"
-    },
-    "Loading": {
-        "message": "Loading..."
-    },
-    "Hide": {
-        "message": "Never Show"
-    },
-    "hitGoBack": {
-        "message": "Hit unskip to get to where you came from."
-    },
-    "unskip": {
-        "message": "Unskip"
-    },
-    "reskip": {
-        "message": "Reskip"
-    },
-    "unmute": {
-        "message": "Unmute"
-    },
-    "paused": {
-        "message": "Paused"
-    },
-    "manualPaused": {
-        "message": "Timer Stopped"
-    },
-    "confirmMSG": {
-        "message": "To edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
-    },
-    "clearThis": {
-        "message": "Are you sure you want to clear this?\n\n"
-    },
-    "Unknown": {
-        "message": "There was an error submitting your sponsor times, please try again later."
-    },
-    "sponsorFound": {
-        "message": "This video has segments in the database!"
-    },
-    "sponsor404": {
-        "message": "No segments found"
-    },
-    "sponsorStart": {
-        "message": "Segment Starts Now"
-    },
-    "sponsorEnd": {
-        "message": "Segment Ends Now"
-    },
-    "sponsorCancel": {
-        "message": "Cancel Creating Segment"
-    },
-    "noVideoID": {
-        "message": "No YouTube video found.\nIf this is incorrect, refresh the tab."
-    },
-    "refreshSegments": {
-        "message": "Refresh segments"
-    },
-    "success": {
-        "message": "Success!"
-    },
-    "voted": {
-        "message": "Voted!"
-    },
-    "serverDown": {
-        "message": "It seems the server is down. Contact the dev immediately."
-    },
-    "connectionError": {
-        "message": "A connection error has occured. Error code: "
-    },
-    "clearTimes": {
-        "message": "Clear Segments"
-    },
-    "openPopup": {
-        "message": "Open SponsorBlock Popup"
-    },
-    "closePopup": {
-        "message": "Close Popup"
-    },
-    "SubmitTimes": {
-        "message": "Submit Segments"
-    },
-    "submitCheck": {
-        "message": "Are you sure you want to submit this?"
-    },
-    "whitelistChannel": {
-         "message": "Whitelist channel"
-    },
-    "removeFromWhitelist": {
-         "message": "Remove channel from whitelist"
-    },
-    "voteOnTime": {
-         "message": "Vote On A Segment"
-    },
-    "Submissions": {
-         "message": "Submissions"
-    },
-    "savedPeopleFrom": {
-         "message": "You've saved people from "
-    },
-    "viewLeaderboard": {
-         "message": "Leaderboard"
-    },
-    "recordTimesDescription": {
-         "message": "Submit"
-    },
-    "submissionEditHint": {
-        "message": "Section editing will appear after you click submit",
-        "description": "Appears in the popup to inform them that editing has been moved to the video player."
-    },
-    "popupHint": {
-         "message": "Hint: You can setup keybinds for submitting in the options"
-    },
-    "clearTimesButton": {
-        "message": "Clear Times"
-    },
-    "submitTimesButton": {
-        "message": "Submit Times"
-    },
-    "publicStats": {
-        "message": "This is used on the public stats page to show off how much you've contributed. See it"
-    },
-    "Username": {
-        "message": "Username"
-    },
-    "setUsername": {
-        "message": "Set Username"
-    },
-    "copyPublicID": {
-        "message": "Copy Public UserID"
-    },
-    "discordAdvert": {
-        "message": "Come join the official discord server to give suggestions and feedback!"
-    },
-    "hideThis": {
-        "message": "Hide this"
-    },
-    "Options": {
-        "message": "Options"
-    },
-    "showButtons": {
-        "message": "Show Buttons On YouTube Player"
-    },
-    "hideButtons": {
-        "message": "Hide Buttons On YouTube Player"
-    },
-    "hideButtonsDescription": {
-        "message": "This hides the buttons that appear on the YouTube player to submit skip segments."
-    },
-    "showSkipButton": {
-        "message": "Keep Skip To Highlight Button On Player"
-    },
-    "showInfoButton": {
-        "message": "Show Info Button On YouTube Player"
-    },
-    "hideInfoButton": {
-        "message": "Hide Info Button On YouTube Player"
-    },
-    "autoHideInfoButton": {
-        "message": "Auto-hide Info Button"
-    },
-    "hideDeleteButton": {
-        "message": "Hide Delete Button On YouTube Player"
-    },
-    "showDeleteButton": {
-        "message": "Show Delete Button On YouTube Player"
-    },
-    "enableViewTracking": {
-        "message": "Enable Skip Count Tracking"
-    },
-    "whatViewTracking": {
-        "message": "This feature tracks which segments you have skipped to let users know how much their submission has helped others and used as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message to the server each time you skip a segment. Hopefully most people don't change this setting so that the view numbers are accurate. :)"
-    },
-    "enableViewTrackingInPrivate": {
-        "message": "Enable Skip Count Tracking In Private/Incognito tabs"
-    },
-    "enableTrackDownvotes": {
-        "message": "Store segment downvotes"
-    },
-    "whatTrackDownvotes": {
-        "message": "Any segments you downvote will remain hidden even after refreshing"
-    },
-    "trackDownvotesWarning": {
-        "message": "Warning: Disabling this will delete all previously stored downvotes"
-    },
-    "enableQueryByHashPrefix": {
-        "message": "Query By Hash Prefix"
-    },
-    "whatQueryByHashPrefix": {
-        "message": "Instead of requesting segments from the server using the videoID, the first 4 characters of the hash of the videoID are sent. This server will send back data for all videos with similar hashes."
-    },
-    "enableRefetchWhenNotFound": {
-        "message": "Refetch Segments On New Videos"
-    },
-    "whatRefetchWhenNotFound": {
-        "message": "If the video is new, and there are no segments found, it will keep refetching every few minutes while you watch."
-    },
-    "showNotice": {
-        "message": "Show Notice Again"
-    },
-    "showSkipNotice": {
-        "message": "Show Notice After A Segment Is Skipped"
-    },
-    "noticeVisibilityMode0": {
-        "message": "Full Size Skip Notices"
-    },
-    "noticeVisibilityMode1": {
-        "message": "Small Skip Notices for Auto Skip"
-    },
-    "noticeVisibilityMode2": {
-        "message": "All Small Skip Notices"
-    },
-    "noticeVisibilityMode3": {
-        "message": "Faded Skip Notices for Auto Skip"
-    },
-    "noticeVisibilityMode4": {
-        "message": "All Faded Skip Notices"
-    },
-    "longDescription": {
-        "message": "SponsorBlock lets you skip over sponsors, intros, outros, subscription reminders, and other annoying parts of YouTube videos. SponsorBlock is a crowdsourced browser extension that lets anyone submit the start and end times of sponsored segments and other segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment. You can also skip over non music sections of music videos.",
-        "description": "Full description of the extension on the store pages."
-    },
-    "website": {
-        "message": "Website",
-        "description": "Used on Firefox Store Page"
-    },
-    "sourceCode": {
-        "message": "Source Code",
-        "description": "Used on Firefox Store Page"
-    },
-    "noticeUpdate": {
-        "message": "The notice has been upgraded!",
-        "description": "The first line of the message displayed after the notice was upgraded."
-    },
-    "noticeUpdate2": {
-        "message": "If you still don't like it, hit the never show button.",
-        "description": "The second line of the message displayed after the notice was upgraded."
-    },
-    "setSkipShortcut": {
-        "message": "Skip segment",
-        "description": "Keybind label"
-    },
-    "setStartSponsorShortcut": {
-        "message": "Start/stop segment",
-        "description": "Keybind label"
-    },
-    "setSubmitKeybind": {
-        "message": "Submit segments",
-        "description": "Keybind label"
-    },
-    "keybindDescription": {
-        "message": "Select a key by typing it and choose any modifier keys you wish to use."
-    },
-    "0": {
-        "message": "Connection Timeout. Check your internet connection. If your internet is working, the server is probably overloaded or down."
-    },
-    "disableSkipping": {
-        "message": "Skipping is enabled"
-    },
-    "enableSkipping": {
-        "message": "Skipping is disabled"
-    },
-    "yourWork": {
-        "message": "Your Work",
-        "description": "Used to describe the section that will show you the statistics from your submissions."
-    },
-    "502": {
-        "message": "The server seems to be overloaded. Try again in a few seconds."
-    },
-    "errorCode": {
-        "message": "Error Code: "
-    },
-    "skip": {
-        "message": "Skip"
-    },
-    "mute": {
-        "message": "Mute"
-    },
-    "full": {
-        "message": "Full Video",
-        "description": "Used for the name of the option to label an entire video as sponsor or self promotion."
-    },
-    "skip_category": {
-        "message": "Skip {0}?"
-    },
-    "mute_category": {
-        "message": "Mute {0}?"
-    },
-    "skip_to_category": {
-        "message": "Skip to {0}?",
-        "description": "Used for skipping to things (Skip to Highlight)"
-    },
-    "skipped": {
-        "message": "{0} Skipped",
-        "description": "Example: Sponsor Skipped"
-    },
-    "muted": {
-        "message": "{0} Muted",
-        "description": "Example: Sponsor Muted"
-    },
-    "skipped_to_category": {
-        "message": "Skipped to {0}",
-        "description": "Used for skipping to things (Skipped to Highlight)"
-    },
-    "disableAutoSkip": {
-        "message": "Disable Auto Skip"
-    },
-    "enableAutoSkip": {
-        "message": "Enable Auto Skip"
-    },
-    "audioNotification": {
-        "message": "Audio Notification On Skip"
-    },
-    "audioNotificationDescription": {
-        "message": "Audio notification on skip will play a sound whenever a segment is skipped. If disabled (or auto skip is disabled), no sound will be played."
-    },
-    "showTimeWithSkips": {
-        "message": "Show Time With Skips Removed"
-    },
-    "showTimeWithSkipsDescription": {
-        "message": "This time appears in brackets next to the current time on below the seekbar. This shows the total video duration minus any segments. This includes segments marked as only \"Show In Seekbar\"."
-    },
-    "youHaveSkipped": {
-        "message": "You've skipped "
-    },
-    "minLower": {
-        "message": "minute"
-    },
-    "minsLower": {
-        "message": "minutes"
-    },
-    "hourLower": {
-        "message": "hour"
-    },
-    "hoursLower": {
-        "message": "hours"
-    },
-    "youHaveSavedTime": {
-        "message": "You've saved people",
-        "description": "You've saved people from 887,362 segments (236d 15h 5.3 minutes of their lives)."
-    },
-    "youHaveSavedTimeEnd": {
-        "message": " of their lives",
-        "description": "You've saved people from 887,362 segments (236d 15h 5.3 minutes of their lives)."
-    },
-    "statusReminder": {
-        "message": "Check status.sponsor.ajay.app for server status."
-    },
-    "changeUserID": {
-        "message": "Import/Export Your UserID"
-    },
-    "whatChangeUserID": {
-        "message": "This should be kept private. This is like a password and should not be shared with anyone. If someone has this, they can impersonate you. If you are looking for your public userID, click the clipboard icon in the popup."
-    },
-    "setUserID": {
-        "message": "Set UserID"
-    },
-    "userIDChangeWarning": {
-        "message": "Warning: Changing the UserID is permanent. Are you sure you would like to do this? Make sure to backup your old one just in case."
-    },
-    "createdBy": {
-        "message": "Created By"
-    },
-    "supportOtherSites": {
-        "message": "Support 3rd Party YouTube-Sites"
-    },
-    "supportOtherSitesDescription": {
-        "message": "Support third party YouTube clients. To enable support, you must accept the extra permissions. This does NOT work in incognito on Chrome and other Chromium variants.",
-        "description": "This replaces the 'supports Invidious' option because it now works on other YouTube sites such as Cloudtube"
-    },
-    "supportedSites": {
-        "message": "Supported Sites: "
-    },
-    "optionsInfo": {
-        "message": "Enable Invidious support, disable autoskip, hide buttons and more."
-    },
-    "addInvidiousInstance": {
-        "message": "Add 3rd-Party Client Instance"
-    },
-    "addInvidiousInstanceDescription": {
-        "message": "Add a custom instance. This must be formatted with JUST the domain. Example: invidious.ajay.app"
-    },
-    "add": {
-        "message": "Add"
-    },
-    "addInvidiousInstanceError": {
-        "message": "This is an invalid domain. This should JUST include the domain part. Example: invidious.ajay.app"
-    },
-    "resetInvidiousInstance": {
-        "message": "Reset Invidious Instance List"
-    },
-    "resetInvidiousInstanceAlert": {
-        "message": "You are about to reset the Invidious instance list"
-    },
-    "currentInstances": {
-        "message": "Current Instances:"
-    },
-    "minDuration": {
-        "message": "Minimum duration (seconds):"
-    },
-    "minDurationDescription": {
-        "message": "Segments shorter than the set value will not be skipped or show in the player."
-    },
-    "skipNoticeDuration": {
-        "message": "Skip notice duration (seconds):"
-    },
-    "skipNoticeDurationDescription": {
-        "message": "The skip notice will stay on screen for at least this many seconds. For manual skipping, it may be visible for longer."
-    },
-    "shortCheck": {
-        "message": "The following submission is shorter than your minimum duration option. This could mean that this is already submitted, and just being ignored due to this option. Are you sure you would like to submit?"
-    },
-    "liveOrPremiere": {
-        "message": "Submitting on an active livestream or premiere is not allowed. Please wait until it finishes, then refresh the page and verify that the segments are still valid."
-    },
-    "showUploadButton": {
-        "message": "Show Upload Button"
-    },
-    "customServerAddress": {
-        "message": "SponsorBlock Server Address"
-    },
-    "customServerAddressDescription": {
-        "message": "The address SponsorBlock uses to make calls to the server.\nUnless you have your own server instance, this should not be changed."
-    },
-    "save": {
-        "message": "Save"
-    },
-    "reset": {
-        "message": "Reset"
-    },
-    "customAddressError": {
-        "message": "This address is not in the right form. Make sure you have http:// or https:// at the beginning and no trailing slashes."
-    },
-    "areYouSureReset": {
-        "message": "Are you sure you would like to reset this?"
-    },
-    "mobileUpdateInfo": {
-        "message": "m.youtube.com is now supported"
-    },
-    "exportOptions": {
-        "message": "Import/Export All Options"
-    },
-    "exportOptionsCopy": {
-        "message": "Edit/copy"
-    },
-    "exportOptionsDownload": {
-        "message": "Save to file"
-    },
-    "exportOptionsUpload": {
-        "message": "Load from file"
-    },
-    "whatExportOptions": {
-        "message": "This is your entire configuration in JSON. This includes your userID, so be sure to share this wisely."
-    },
-    "setOptions": {
-        "message": "Set Options"
-    },
-    "exportOptionsWarning": {
-        "message": "Warning: Changing the options is permanent and can break your install. Are you sure you would like to do this? Make sure to backup your old one just in case."
-    },
-    "incorrectlyFormattedOptions": {
-        "message": "This JSON is not formatted correctly. Your options have not been changed."
-    },
-    "confirmNoticeTitle" : {
-        "message": "Submit Segment"
-    },
-    "submit": {
-        "message": "Submit"
-    },
-    "cancel": {
-        "message": "Cancel"
-    },
-    "delete": {
-        "message": "Delete"
-    },
-    "preview": {
-        "message": "Preview"
-    },
-    "unsubmitted": {
-        "message": "Unsubmitted"
-    },
-    "inspect": {
-        "message": "Inspect"
-    },
-    "edit": {
-        "message": "Edit"
-    },
-    "copyDebugInformation": {
-        "message": "Copy Debug Information To Clipboard"
-    },
-    "copyDebugInformationFailed": {
-        "message": "Failed to write to clipboard"
-    },
-    "copyDebugInformationOptions": {
-        "message": "Copies information to the clipboard to be provided to a developer when raising a bug / when a developer requests it. Sensitive information such as your user ID, whitelisted channels, and custom server address have been removed. However it does contain information such as your useragent, browser, operating system, and extension version number. "
-    },
-    "copyDebugInformationComplete": {
-        "message": "The debug information has been copied to the clip board. Feel free to remove any information you would rather not share. Save this in a text file or paste into the bug report."
-    },
-    "keyAlreadyUsed": {
-        "message": "This shortcut is bound to another action. Please select a different one."
-    },
-    "to": {
-        "message": "to",
-        "description": "Used between segments. Example: 1:20 to 1:30"
-    },
-    "category_sponsor": {
-        "message": "Useful Content"
-    },
-    "category_sponsor_description": {
-        "message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes/creators/websites/products they like."
-    },
-    "category_selfpromo": {
-        "message": "Unpaid/Self Promotion"
-    },
-    "category_selfpromo_description": {
-        "message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
-    },
-    "category_exclusive_access": {
-        "message": "Exclusive Access"
-    },
-    "category_exclusive_access_description": {
-        "message": "Only for labeling entire videos. Used when a video showcases a product, service or location that they've received free or subsidized access to."
-    },
-    "category_exclusive_access_pill": {
-        "message": "This video showcases a product, service or location that they've received free or subsidized access to",
-        "description": "Short description for this category"
-    },
-    "category_interaction": {
-        "message": "Interaction Reminder (Subscribe)"
-    },
-    "category_interaction_description": {
-        "message": "When there is a short reminder to like, subscribe or follow them in the middle of content. If it is long or about something specific, it should be under self promotion instead."
-    },
-    "category_interaction_short": {
-        "message": "Interaction Reminder"
-    },
-    "category_intro": {
-        "message": "Intermission/Intro Animation"
-    },
-    "category_intro_description": {
-        "message": "An interval without actual content. Could be a pause, static frame, repeating animation. This should not be used for transitions containing information."
-    },
-    "category_intro_short": {
-        "message": "Intermission"
-    },
-    "category_outro": {
-        "message": "Endcards/Credits"
-    },
-    "category_outro_description": {
-        "message": "Credits or when the YouTube endcards appear. Not for conclusions with information."
-    },
-    "category_preview": {
-        "message": "Preview/Recap"
-    },
-    "category_preview_description": {
-        "message": "Quick recap of previous episodes, or a preview of what's coming up later in the current video. Meant for edited together clips, not for spoken summaries."
-    },
-    "category_filler": {
-        "message": "Filler Tangent/Jokes"
-    },
-    "category_filler_description": {
-        "message": "Tangential scenes added only for filler or humor that are not required to understand the main content of the video. This should not include segments providing context or background details."
-    },
-    "category_filler_short": {
-        "message": "Filler"
-    },
-    "category_music_offtopic": {
-        "message": "Music: Non-Music Section"
-    },
-    "category_music_offtopic_description": {
-        "message": "Only for use in music videos. This only should be used for sections of music videos that aren't already covered by another category."
-    },
-    "category_music_offtopic_short": {
-        "message": "Non-Music"
-    },
-    "category_poi_highlight": {
-        "message": "Highlight"
-    },
-    "category_poi_highlight_description": {
-        "message": "The part of the video that most people are looking for. Similar to \"Video starts at x\" comments."
-    },
-    "category_livestream_messages": {
-        "message": "Livestream: Donation/Message Readings"
-    },
-    "category_livestream_messages_short": {
-        "message": "Message Reading"
-    },
-    "autoSkip": {
-        "message": "Auto Skip"
-    },
-    "manualSkip": {
-        "message": "Manual Skip"
-    },
-    "showOverlay": {
-        "message": "Show In Seek Bar"
-    },
-    "disable": {
-        "message": "Disable"
-    },
-    "autoSkip_POI": {
-        "message": "Auto skip to the start"
-    },
-    "manualSkip_POI": {
-        "message": "Ask when video loads"
-    },
-    "showOverlay_POI": {
-        "message": "Show In Seek Bar"
-    },
-    "showOverlay_full": {
-        "message": "Show Label"
-    },
-    "autoSkipOnMusicVideos": {
-        "message": "Auto skip all segments when there is a non-music segment"
-    },
-    "muteSegments": {
-        "message": "Allow segments that mute audio instead of skip"
-    },
-    "fullVideoSegments": {
-        "message": "Show an icon when a video is entirely an advertisement",
-        "description": "Referring to the category pill that is now shown on videos that are entirely sponsor or entirely selfpromo"
-    },
-    "previewColor": {
-        "message": "Unsubmitted Color",
-        "description": "Referring to submissions that have not been sent to the server yet."
-    },
-    "seekBarColor": {
-        "message": "Seek Bar Color"
-    },
-    "category": {
-        "message": "Category"
-    },
-    "skipOption": {
-        "message": "Skip Option",
-        "description": "Used on the options page to describe the ways to skip the segment (auto skip, manual, etc.)"
-    },
-    "enableTestingServer": {
-        "message": "Enable Beta Testing Server"
-    },
-    "whatEnableTestingServer": {
-        "message": "Your submissions and votes WILL NOT COUNT towards the main server. Only use this for testing."
-    },
-    "testingServerWarning": {
-        "message": "All submissions and votes WILL NOT COUNT towards the main server while connecting to the test server. Make sure to disable this when you want to make real submissions."
-    },
-    "bracketNow": {
-        "message": "(Now)"
-    },
-    "moreCategories": {
-        "message": "More Categories"
-    },
-    "chooseACategory": {
-        "message": "Choose a Category"
-    },
-    "enableThisCategoryFirst": {
-        "message": "To submit segments with the category of \"{0}\", you must enable it in the options. You will be redirected to the options now.",
-        "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
-    },
-    "poiOnlyOneSegment": {
-        "message": "Warning: This type of segment can have a maximum of one active at a time. Submitting multiple will cause a random one to be shown."
-    },
-    "youMustSelectACategory": {
-        "message": "You must select a category for all segments you are submitting!"
-    },
-    "bracketEnd": {
-        "message": "(End)"
-    },
-    "hiddenDueToDownvote": {
-        "message": "hidden: downvote"
-    },
-    "hiddenDueToDuration": {
-        "message": "hidden: too short"
-    },
-    "manuallyHidden": {
-        "message": "manually hidden"
-    },
-    "channelDataNotFound": {
-        "description": "This error appears in an alert when they try to whitelist a channel and the extension is unable to determine what channel they are looking at.",
-        "message": "Channel ID is not loaded yet. If you are using an embedded video, try using the YouTube homepage instead. This could also be caused by changes in the YouTube layout, if you think so, make a comment here:"
-    },
-    "videoInfoFetchFailed": {
-        "message": "It seems that something is blocking SponsorBlock's ability to get video data. Please see https://github.com/ajayyy/SponsorBlock/issues/741 for more info."
-    },
-    "youtubePermissionRequest": {
-        "message": "It seems that SponsorBlock is unable to reach the YouTube API. To fix this, accept the permission prompt that will appear next, wait a few seconds, and then reload the page."
-    },
-    "acceptPermission": {
-        "message": "Accept permission"
-    },
-    "permissionRequestSuccess": {
-        "message": "Permission request succeeded!"
-    },
-    "permissionRequestFailed": {
-        "message": "Permission request failed, did you click deny?"
-    },
-    "adblockerIssueWhitelist": {
-        "message": "If you are unable to resolve this, then disable the setting 'Force Channel Check Before Skipping', as SponsorBlock is unable to retrieve the channel information for this video"
-    },
-    "forceChannelCheck": {
-        "message": "Force Channel Check Before Skipping"
-    },
-    "whatForceChannelCheck": {
-        "message": "By default, it will skip segments right away before it even knows what the channel is. By default, some segments at the start of the video might be skipped on whitelisted channels. Enabling this option will prevent this but making all skipping have a slight delay as getting the channelID can take some time. This delay might be unnoticeable if you have fast internet."
-    },
-    "forceChannelCheckPopup": {
-        "message": "Consider Enabling \"Force Channel Check Before Skipping\""
-    },
-    "downvoteDescription": {
-        "message": "Incorrect/Wrong Timing"
-    },
-    "incorrectCategory": {
-        "message": "Change Category"
-    },
-    "nonMusicCategoryOnMusic": {
-        "message": "This video is categorized as music. Are you sure this has a sponsor? If this is actually a \"Non-Music segment\", open up the extension options and enable this category. Then, you can submit this segment as \"Non-Music\" instead of sponsor. Please read the guidelines if you are confused."
-    },
-    "multipleSegments": {
-        "message": "Multiple Segments"
-    },
-    "guidelines": {
-        "message": "Guidelines"
-    },
-    "readTheGuidelines": {
-        "message": "Read The Guidelines!!",
-        "description": "Show the first time they submit or if they are \"high risk\""
-    },
-    "categoryUpdate1": {
-        "message": "Categories are here!"
-    },
-    "categoryUpdate2": {
-        "message": "Open the options to skip intros, outros, merch, etc."
-    },
-    "help": {
-        "message": "Help"
-    },
-    "GotIt": {
-        "message": "Got it",
-        "description": "Used as the button to dismiss a tooltip"
-    },
-    "fullVideoTooltipWarning": {
-        "message": "This segment is large. If the whole video is about one topic, then change from \"Skip\" to \"Full Video\". See the guidelines for more information."
-    },
-    "categoryPillTitleText": {
-        "message": "This entire video is labeled as this category and is too tightly integrated to be able to separate"
-    },
-    "experiementOptOut": {
-        "message": "Opt-out of all future experiments",
-        "description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."
-    },
-    "hideForever": {
-        "message": "Hide forever"
-    },
-    "warningChatInfo": {
-        "message": "You got a warning and cannot submit segments temporarily. This means that we noticed you were making some common mistakes that are not malicious, please just confirm that you understand the rules and we will remove the warning. You can also join this chat using discord.gg/SponsorBlock or matrix.to/#/#sponsor:ajay.app"
-    },
-    "voteRejectedWarning": {
-        "message": "Vote rejected due to a warning. Click to open a chat to resolve it, or come back later when you have time.",
-        "description": "This is an integrated chat panel that will appearing allowing them to talk to the Discord/Matrix chat without leaving their browser."
-    },
-    "Donate": {
-        "message": "Donate"
-    },
-    "considerDonating": {
-        "message": "Help fund development"
-    },
-    "hideDonationLink": {
-        "message": "Hide Donation Link"
-    },
-    "darkModeOptionsPage": {
-        "message": "Dark Mode On Options Page"
-    },
-    "helpPageThanksForInstalling": {
-        "message": "Thanks for installing SponsorBlock."
-    },
-    "helpPageReviewOptions": {
-        "message": "Please review the options below"
-    },
-    "helpPageFeatureDisclaimer": {
-        "message": "Many features are disabled by default. If you want to skip intros, outros, use Invidious, etc., enable them below. You can also hide/show UI elements."
-    },
-    "helpPageHowSkippingWorks": {
-        "message": "How skipping works"
-    },
-    "helpPageHowSkippingWorks1": {
-        "message": "Video segments will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are."
-    },
-    "helpPageHowSkippingWorks2": {
-        "message": "Whenever you skip a segment, you will get notice. If the timing seems wrong vote down by clicking downvote! You can also vote in the popup."
-    },
-    "Submitting": {
-        "message": "Submitting"
-    },
-    "helpPageSubmitting1": {
-        "message": "Submitting can either be done in the popup by hitting the \"Segment Starts Now\" button or in the video player with the buttons on the player."
-    },
-    "helpPageSubmitting2": {
-        "message": "Clicking the play button indicated the start of a segment and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete."
-    },
-    "Editing": {
-        "message": "Editing"
-    },
-    "helpPageEditing1": {
-        "message": "If you messed up, you can edit or delete your segments after clicking the up arrow button."
-    },
-    "helpPageTooSlow": {
-        "message": "This is too slow"
-    },
-    "helpPageTooSlow1": {
-        "message": "There are hotkeys if you want to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the apostrophe to submit. These can be changed in the options. If you don't use QWERTY, you should probably change the keybinding."
-    },
-    "helpPageCopyOfDatabase": {
-        "message": "Can I get a copy of the Database? What happens if you disappear?"
-    },
-    "helpPageCopyOfDatabase1": {
-        "message": "The database is public and available at"
-    },
-    "helpPageCopyOfDatabase2": {
-        "message": "The source code is freely available. So, even if something happens to me, your submissions are not lost."
-    },
-    "helpPageNews": {
-        "message": "News and how it is made"
-    },
-    "helpPageSourceCode": {
-        "message": "Where can I get the source code?"
-    },
-    "Credits": {
-        "message": "Credits"
-    },
-    "LearnMore": {
-        "message": "Learn More"
-    },
-	  "CopyDownvoteButtonInfo": {
-        "message": "Downvotes and creates a local copy for you to resubmit"
-    },
-	  "OpenCategoryWikiPage": {
-		    "message": "Open this category's wiki page."
-	  },
-	  "CopyAndDownvote": {
-        "message": "Copy and downvote"
-    },
-	  "ContinueVoting": {
-        "message": "Continue Voting"
-    },
-	  "ChangeCategoryTooltip": {
-        "message": "This will instantly apply to your segments"
-    },
-    "SponsorTimeEditScrollNewFeature": {
-        "message": "Use your mousewheel while hovering over the edit box to quickly adjust the time. Combinations of the ctrl or shift key can be used to fine tune the changes."
-    },
-    "categoryPillNewFeature": {
-        "message": "New! See when a video is entirely sponsored or self-promotion"
-    },
-    "dayAbbreviation": {
-        "message": "d",
-        "description": "100d"
-    },
-    "hourAbbreviation": {
-        "message": "h",
-        "description": "100h"
-    },
-    "optionsTabBehavior": {
-        "message": "Behavior",
-        "description": "Appears in Options as a tab header for options related to categories and skipping behavior. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
-    "optionsTabInterface": {
-        "message": "Interface",
-        "description": "Appears in Options as a tab header for options related to GUI and sounds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
-    "optionsTabKeyBinds": {
-        "message": "Keyboard shortcuts",
-        "description": "Appears in Options as a tab header for keybinds. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
-    "optionsTabBackup": {
-        "message": "Backup/Restore",
-        "description": "Appears in Options as a tab header for options related to saving/restoring your settings. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
-    "optionsTabAdvanced": {
-        "message": "Miscellaneous",
-        "description": "Appears in Options as a tab header for advanced/niche options. To fit inside the button, it should not be longer than ~20-25 characters (depending on their width)."
-    },
-    "noticeVisibilityLabel": {
-        "message": "Skip notice appearance",
-        "description": "Option label"
-    },
-    "unbind": {
-        "message": "Unbind",
-        "description": "Unbind keyboard shortcut"
-    },
-    "notSet": {
-        "message": "Not set"
-    },
-    "change": {
-        "message": "Change"
-    },
-    "youtubeKeybindWarning": {
-        "message": "This is a built-in YouTube shortcut. Are you sure you want to use it?"
-    }
-}

public/content.css

@@ -1,3 +1,12 @@
+:root {
+	--skip-notice-right: 10px;
+	--skip-notice-padding: 5px;
+	--skip-notice-margin: 5px;
+	--skip-notice-border-horizontal: 5px;
+	--skip-notice-border-vertical: 10px;
+	--sb-dark-red-outline: rgb(130,0,0,0.9);
+}
+
 .hidden {
 	display: none;
 }
@@ -9,21 +18,38 @@
     position: absolute;
     width: 100%;
 	pointer-events: none;
-	
+
 	height: 100%;
 	transform: scaleY(0.6) translateY(-30%) translateY(1.5px);
-	z-index: 40;
+	z-index: 42;
 
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
-#previewbar.hovered {
+.ytp-big-mode #previewbar {
+	transform: scaleY(0.625) translateY(-30%) translateY(1.5px);
+}
+
+.ytp-big-mode .sponsorTwoTooltips .sponsorCategoryTooltip {
+	top: 75px !important;
+}
+
+.progress-bar-line > #previewbar {
+	height: 3px;
+}
+
+div:hover > #previewbar.sbNotInvidious {
 	transform: scaleY(1)
 }
 
 .previewbar {
 	display: inline-block;
 	height: 100%;
+	min-width: 1px;
+}
+
+.previewbar.requiredSegment {
+	transform: scaleY(3)
 }
 
 /* Make sure settings are upfront */
@@ -41,23 +67,58 @@
 	transform: translateY(-1em) !important;
 }
 
+/* Pull up for precise seeking */
+.ytp-tooltip.sponsorCategoryTooltipVisible .ytp-tooltip-edu {
+	transform: translateY(-1em) !important;
+}
+
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips {
+	transform: translateY(-2em) !important;
+}
+
 .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible {
 	transform: translateY(-2em) !important;
 }
 
+.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips {
+	transform: translateY(-4em) !important;
+}
+
 #movie_player:not(.ytp-big-mode) .ytp-tooltip.sponsorCategoryTooltipVisible > .ytp-tooltip-text-wrapper {
 	transform: translateY(1em) !important;
 }
 
+#movie_player:not(.ytp-big-mode) .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips > .ytp-tooltip-text-wrapper {
+	transform: translateY(2em) !important;
+}
+
+/* Pull up for precise seeking */
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips .ytp-tooltip-edu {
+	transform: translateY(-2em) !important;
+}
+
 .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible > .ytp-tooltip-text-wrapper {
 	transform: translateY(0.5em) !important;
 }
 
+.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips > .ytp-tooltip-text-wrapper {
+	transform: translateY(1em) !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.sponsorTwoTooltips > .ytp-tooltip-text-wrapper > .ytp-tooltip-text {
+	display: block !important;
+	transform: translateY(2em) !important;
+}
+
+div:hover > .sponsorBlockChapterBar {
+	z-index: 41 !important;
+}
+
 /*  */
 
 .popup {
@@ -84,6 +145,20 @@
 	vertical-align: top;
 }
 
+.playerButton.hidden:not(.autoHiding) {
+	display: none !important;
+}
+
+/* Removes auto width from being a ytp-player-button */
+.sbPlayerDownvote {
+	width: auto !important;
+}
+
+/* Adds back the padding */
+.sbPlayerDownvote svg {
+	padding-right: 3.6px;
+}
+
 .autoHiding {
 	overflow: visible !important;
 }
@@ -108,9 +183,13 @@
 
 .sponsorSkipObject {
 	font-family: Roboto, Arial, Helvetica, sans-serif;
-		
-	margin-left: 2px;
-	margin-right: 2px;
+
+	margin-left: var(--skip-notice-margin);
+	margin-right: var(--skip-notice-margin);
+}
+
+.sponsorSkipObjectFirst {
+	margin-left: 0;
 }
 
 .sponsorSkipLogo {
@@ -141,7 +220,7 @@
 	position: absolute;
 	right: 5px;
 	bottom: 100px;
-	right: 10px;
+	right: var(--skip-notice-right);
 }
 
 .sponsorSkipNoticeParent {
@@ -152,9 +231,6 @@
 }
 
 .sponsorSkipNoticeParent, .sponsorSkipNotice {
-	min-width: 350px;
-	max-width: 50%;
-
 	border-spacing: 5px 10px;
 	padding-left: 5px;
 	padding-right: 5px;
@@ -162,18 +238,32 @@
 	border-collapse: unset;
 }
 
+.sponsorSkipNoticeParent {
+	min-width: 350px;
+	max-width: 50%;
+}
+
+.sponsorSkipNotice {
+	width: 100%;
+}
+
 .sponsorSkipNoticeTableContainer {
+	color: white;
 	background-color: rgba(28, 28, 28, 0.9);
 	border-radius: 5px;
 	min-width: 100%;
 }
 
+.exportCopiedNotice .sponsorSkipNoticeTableContainer {
+	background-color: transparent;
+}
+
 .sponsorSkipNotice {
 	transition: all 0.1s ease-out;
 }
 
 .sponsorSkipNoticeLimitWidth {
-	min-width: calc(100% - 50px);
+	max-width: calc(100% - 50px);
 }
 
 .sponsorSkipNotice .hidden {
@@ -189,6 +279,10 @@
 	animation: fadeIn 0.5s ease-out;
 }
 
+.exportCopiedNotice .sponsorSkipNoticeFadeIn {
+	animation: none;
+}
+
 .sponsorSkipNoticeFaded {
 	opacity: 0.5;
 }
@@ -253,7 +347,7 @@
 .sponsorSkipNoticeButton:hover {
 	background-color: rgba(235, 235, 235,0.2);
 	border-radius: 4px;
-	
+
 	transition: background-color 0.4s;
 }
 
@@ -288,7 +382,7 @@
 	height: 10px;
 	width: 10px;
 	box-sizing: unset;
-	
+
 	padding: 2px 5px;
 
 	margin-left: 2px;
@@ -303,7 +397,7 @@
 	font-size: 14px;
 	font-weight: bold;
 	color: rgb(235, 235, 235);
-	
+
 	margin-top: auto;
 	display: inline-block;
 	margin-right: 10px;
@@ -341,15 +435,23 @@
 .sponsorTimesInfoMessage {
 	font-size: 13.3333px;
     color: rgb(235, 235, 235);
+	overflow-wrap: anywhere;
 }
 
-.voteButton {
-	height: 24px;
-	width: 24px;
-	cursor: pointer;
+.sb-guidelines-notice .sponsorTimesInfoMessage td {
+	padding-left: 5px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+    font-size: 15px;
+
+	display: flex;
+	align-items: center;
 }
-.voteButton:hover {
-	filter: brightness(80%);
+
+.sponsorTimesInfoIcon {
+	width: 30px;
+	padding-right: 10px;
+    padding-left: 10px;
 }
 
 .segmentSummary {
@@ -369,7 +471,7 @@
 	padding:4px 15px;
 	text-decoration:none;
     text-shadow:0px 0px 0px #662727;
-    
+
     margin-top: 5px;
     margin-right: 15px;
 }
@@ -405,7 +507,7 @@
 	padding:4px 15px;
 	text-decoration:none;
     text-shadow:0px 0px 0px #662727;
-    
+
     margin-top: 5px;
     margin-right: 15px;
 }
@@ -467,7 +569,7 @@
 	margin-right: 20px;
 
 	font-size: 13px;
-	
+
 	cursor: pointer;
 }
 
@@ -488,10 +590,17 @@ input::-webkit-inner-spin-button {
 	font-size: 14px;
 
 	-moz-appearance: textfield;
+	appearance: textfield;
 }
 
 .sponsorTimeEditInput {
 	width: 90px;
+	border: 3px solid var(--sb-dark-red-outline);
+}
+
+.sponsorTimeEditInput.sponsorChapterNameInput {
+	width: auto;
+	padding: 3px;
 }
 
 .sponsorNowButton {
@@ -506,35 +615,68 @@ input::-webkit-inner-spin-button {
 	margin-bottom: 5px;
 
 	background-color: rgba(28, 28, 28, 0.9);
-    border-color: rgb(130,0,0,0.9);
+    border-color: var(--sb-dark-red-outline);
     color: white;
     border-width: 3px;
     padding: 3px;
 }
 
+.sponsorTimeEditSelector > option {
+	background-color: rgba(28, 28, 28, 0.9);
+	color: white;
+}
+
+/* Start SelectorComponent */
+
+.sbSelector {
+	position: absolute;
+	text-align: center;
+	width: calc(100% - var(--skip-notice-right) - var(--skip-notice-padding) * 2 - var(--skip-notice-margin) * 2 - var(--skip-notice-border-horizontal) * 2);
+
+	z-index: 1000;
+}
+
+.sbSelectorBackground {
+	text-align: center;
+
+	background-color: rgba(28, 28, 28, 0.9);
+	border-radius: 6px;
+	padding: 3px;
+	margin: auto;
+	width: 170px;
+}
+
+.sbSelectorOption {
+    cursor: pointer;
+    background-color: rgb(43, 43, 43);
+    padding: 5px;
+	margin: 5px;
+    color: white;
+    border-radius: 5px;
+    font-size: 14px;
+
+	margin-left: auto;
+    margin-right: auto;
+}
+
+.sbSelectorOption:hover {
+    background-color: #3a0000;
+}
+
+/* End SelectorComponent */
+
 .helpButton {
 	height: 25px;
 	cursor: pointer;
 	padding: 5px;
-	
+
 	margin: auto;
     top: 0;
     bottom: 0;
     position: absolute;
 }
 .helpButton:hover {
-	filter: brightness(80%);
-}
-
-.sbChatNotice iframe {
-	height: 32px;
-	cursor: pointer;
-	height: 100%;
-}
-
-.sbChatClose {
-	height: 14px;
-	cursor: pointer;
+	opacity: 0.8;
 }
 
 .skipButtonControlBarContainer {
@@ -610,8 +752,13 @@ input::-webkit-inner-spin-button {
     border-color: rgba(28, 28, 28, 0.7) transparent transparent transparent;
 }
 
+.sponsorBlockTooltip.sbTriangle.centeredSBTriangle::after {
+	left: 50%;
+	right: 50%;
+}
+
 .sponsorBlockLockedColor {
-	color: #ffc83d;
+	color: #ffc83d !important;
 }
 
 .sponsorBlockRectangleTooltip {
@@ -641,15 +788,68 @@ input::-webkit-inner-spin-button {
 	align-items: center;
 }
 
+.sponsorBlockCategoryPillTitle {
+	white-space: nowrap;
+}
+
 .categoryPillClose {
 	display: none;
 	height: 10px;
 	width: 10px;
 	box-sizing: unset;
-	
+
 	margin: 0px 0px 0px 5px;
 }
 
 .sponsorBlockCategoryPill:hover .categoryPillClose {
 	display: inherit;
-}
+}
+
+/* tweak for mobile duration */
+#sponsorBlockDurationAfterSkips.ytm-time-display {
+	padding-left: 4px;
+	margin: 0px;
+	color: #fff;
+	opacity: .7;
+}
+
+/* full video labels on thumbnails */
+.sponsorThumbnailLabel {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0.5em;
+	margin: 0.5em;
+	border-radius: 2em;
+	z-index: 1000;
+	background-color: var(--category-color, #000);
+	opacity: 0.7;
+	box-shadow: 0 0 8px 2px #333;
+	font-size: 10px;
+}
+
+.sponsorThumbnailLabel.sponsorThumbnailLabelVisible {
+	display: flex;
+}
+
+.sponsorThumbnailLabel svg {
+	height: 2em;
+	fill: var(--category-text-color, #fff);
+}
+
+.sponsorThumbnailLabel span {
+	display: none;
+	padding-left: 0.25em;
+	font-size: 1.5em;
+	color: var(--category-text-color, #fff);
+}
+
+.sponsorThumbnailLabel:hover {
+	border-radius: 0.25em;
+	opacity: 1;
+}
+
+.sponsorThumbnailLabel:hover span {
+	display: inline;
+}

public/help/index.html

@@ -4,7 +4,7 @@
   <title> SponsorBlock </title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" /> 
-  <link rel="icon" href="../icons/LogoSponsorBlocker64px.png" type="image/png">
+  <link rel="icon" href="../icons/IconSponsorBlocker32px.png" type="image/png">
 
   <link href="styles.css" rel="stylesheet"/>
 
@@ -15,28 +15,97 @@
 
   <div id="title">
     <img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
-    SponsorLock
+    SponsorBlock
   </div>
 
   <div class="container sponsorBlockPageBody">
 
-    <p>
-        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 class="createdBy">
+      <img src="https://ajay.app/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>
-	      <b>Please uninstall regular SponsorBlock before trying this out.</b> Good luck! This extension was created for April 1st 2022.
+        __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>
 
     <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
 
-    <iframe class="optionsFrame" src="../options/lock-options.html#embed" style="border: none"></iframe>
+    <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__
+      
+      <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/tree/april-fools-2022"><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>
+    <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 -->
@@ -44,6 +113,16 @@
 
     <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>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>

public/icons/PlayerStartIconSponsorBlocker.svg

@@ -1,20 +1,17 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    viewBox="0 0 565.15 568"
    version="1.1"
    id="svg16"
    sodipodi:docname="PlayerStartIconSponsorBlocker.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
-   inkscape:export-filename="/home/ajay/projects/sb-extension/public/icons/LogoSponsorBlocker1024px.png"
-   inkscape:export-xdpi="173.9155"
-   inkscape:export-ydpi="173.9155"
-   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"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
   <metadata
      id="metadata20">
     <rdf:RDF>
@@ -36,17 +33,16 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1920"
-     inkscape:window-height="983"
+     inkscape:window-height="1001"
      id="namedview18"
      showgrid="false"
      inkscape:zoom="0.83098592"
-     inkscape:cx="444.69697"
-     inkscape:cy="271.26356"
-     inkscape:window-x="380"
-     inkscape:window-y="768"
+     inkscape:cx="-0.3618106"
+     inkscape:cy="322.44266"
+     inkscape:window-x="477"
+     inkscape:window-y="961"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1-2"
-     inkscape:pagecheckerboard="0" />
+     inkscape:current-layer="Layer_1-2" />
   <defs
      id="defs4">
     <style
@@ -62,15 +58,14 @@
        data-name="Layer 1"
        style="fill:#ffffff">
       <path
-         id="path953"
-         style="fill:none;stroke:#07a500;stroke-width:40"
-         d="M 279.39062,24.197266 C 179.21701,24.603169 98.318528,101.48391 98.605469,196.00391 c 0.159023,40.69515 15.666041,80.00792 43.744141,110.89843 V 147.87891 l 16.75935,97.00627 C 164.72335,211.06602 65.553309,180.55346 92.112522,170.56303 L 193.6089,410.46016 435.49163,328.41259 443.41016,147.87891 v 46.7539 l 18.32422,-0.0996 C 461.16135,100.01356 379.56507,23.790617 279.39062,24.197266 Z M 443.41016,195.51367 v 74.92188 c 12.04625,-23.34115 18.3128,-48.96032 18.32617,-74.92188 z"
-         sodipodi:nodetypes="cccccccccccccccc" />
+         class="cls-1"
+         d="M282.58,568a65,65,0,0,1-34.14-9.66C95.41,463.94,2.54,300.46,0,121A64.91,64.91,0,0,1,34,62.91a522.56,522.56,0,0,1,497.16,0,64.91,64.91,0,0,1,34,58.12c-2.53,179.43-95.4,342.91-248.42,437.3A65,65,0,0,1,282.58,568Zm0-548.31A502.24,502.24,0,0,0,43.4,80.22a45.27,45.27,0,0,0-23.7,40.53c2.44,172.67,91.81,330,239.07,420.83a46.19,46.19,0,0,0,47.61,0C453.64,450.73,543,293.42,545.45,120.75a45.26,45.26,0,0,0-23.7-40.54A502.26,502.26,0,0,0,282.58,19.69Z"
+         id="path8"
+         style="fill:#ffffff" />
       <path
-         style="fill:#008000"
-         d="m 281.94584,119.65312 -239.275918,0.7668 c 0,0 -0.08983,-8.3148 0,0 2.4,169.84 93.000158,318.21985 228.160158,401.58985 7.20735,4.41633 16.28288,4.41633 23.49023,0 135.16,-83.37 225.76016,-231.74985 228.16016,-401.58985 v 0 z M 220.41016,145.74023 411.2793,255.93945 220.41016,366.14062 Z"
-         id="path10"
-         sodipodi:nodetypes="cccccccccccc" />
+         style="fill:#ffffff"
+         d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 220.41016 145.74023 L 411.2793 255.93945 L 220.41016 366.14062 L 220.41016 145.74023 z "
+         id="path10" />
     </g>
   </g>
 </svg>

public/icons/bolt.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="bolt.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M19.95 42 22 27.9H14.7Q14.15 27.9 13.9 27.4Q13.65 26.9 13.9 26.45L26.15 6H28.2L26.15 20.05H33.35Q33.9 20.05 34.175 20.55Q34.45 21.05 34.2 21.5L22 42Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/icons/campaign.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="campaign.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M36.5 25.5V22.5H44V25.5ZM39 40 32.95 35.5 34.75 33.1 40.8 37.6ZM34.9 14.85 33.1 12.45 39 8 40.8 10.4ZM10.5 38V30H7Q5.75 30 4.875 29.125Q4 28.25 4 27V21Q4 19.75 4.875 18.875Q5.75 18 7 18H16L26 12V36L16 30H13.5V38ZM28 30.7V17.3Q29.35 18.5 30.175 20.225Q31 21.95 31 24Q31 26.05 30.175 27.775Q29.35 29.5 28 30.7Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/icons/check-smaller.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="check-smaller.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="26.25"
+     inkscape:cx="12.038095"
+     inkscape:cy="12"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     fill="#ffffff"
+     d="M 17.69347,4.9833775 9.9421192,12.940517 6.3065298,9.5107153 3.7684768,12.048769 9.9421192,18.016623 20.231523,7.5214304 Z"
+     id="path2"
+     style="stroke-width:0.68596" />
+</svg>

public/icons/close-smaller.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="close-smaller.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M12.45 37.65 10.35 35.55 21.9 24 10.35 12.45 12.45 10.35 24 21.9 35.55 10.35 37.65 12.45 26.1 24 37.65 35.55 35.55 37.65 24 26.1Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/icons/export.svg

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 67.671 67.671"
+   style="enable-background:new 0 0 67.671 67.671;"
+   xml:space="preserve"
+   sodipodi:docname="export.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   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="defs41" /><sodipodi:namedview
+   id="namedview39"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="9.309749"
+   inkscape:cx="33.889206"
+   inkscape:cy="33.835499"
+   inkscape:window-width="1920"
+   inkscape:window-height="983"
+   inkscape:window-x="0"
+   inkscape:window-y="768"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1"
+   inkscape:showpageshadow="2"
+   inkscape:deskcolor="#d1d1d1" />
+<g
+   id="g6"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,6)">
+	<path
+   d="M 52.946,23.348 H 42.834 v 6 h 10.112 c 3.007,0 5.34,1.536 5.34,2.858 v 26.606 c 0,1.322 -2.333,2.858 -5.34,2.858 H 14.724 c -3.007,0 -5.34,-1.536 -5.34,-2.858 V 32.207 c 0,-1.322 2.333,-2.858 5.34,-2.858 h 10.11 v -6 h -10.11 c -6.359,0 -11.34,3.891 -11.34,8.858 v 26.606 c 0,4.968 4.981,8.858 11.34,8.858 h 38.223 c 6.358,0 11.34,-3.891 11.34,-8.858 V 32.207 C 64.286,27.239 59.305,23.348 52.946,23.348 Z"
+   id="path2"
+   style="fill:#ffffff" />
+	<path
+   d="m 24.957,14.955 c 0.768,0 1.535,-0.293 2.121,-0.879 l 3.756,-3.756 v 13.028 6 11.494 c 0,1.657 1.343,3 3,3 1.657,0 3,-1.343 3,-3 v -11.494 -6 -13.231 l 3.959,3.959 c 0.586,0.586 1.354,0.879 2.121,0.879 0.767,0 1.535,-0.293 2.121,-0.879 1.172,-1.171 1.172,-3.071 0,-4.242 L 36.078,0.877 C 35.492,0.291 34.725,0 33.958,0 33.95,0 33.943,0 33.935,0 33.927,0 33.92,0 33.912,0 33.145,0 32.378,0.291 31.792,0.877 l -8.957,8.957 c -1.172,1.171 -1.172,3.071 0,4.242 0.587,0.586 1.354,0.879 2.122,0.879 z"
+   id="path4"
+   style="fill:#ffffff" />
+</g>
+<g
+   id="g8"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g10"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g12"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g14"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g16"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g18"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g20"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g22"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g24"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g26"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g28"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g30"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g32"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g34"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+<g
+   id="g36"
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
+</g>
+</svg>

public/icons/import.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 67.671 67.671"
+   style="enable-background:new 0 0 67.671 67.671;"
+   xml:space="preserve"
+   sodipodi:docname="import.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   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="defs41" /><sodipodi:namedview
+   id="namedview39"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="9.309749"
+   inkscape:cx="33.889206"
+   inkscape:cy="33.835499"
+   inkscape:window-width="1920"
+   inkscape:window-height="983"
+   inkscape:window-x="0"
+   inkscape:window-y="768"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g6"
+   inkscape:showpageshadow="2"
+   inkscape:deskcolor="#d1d1d1" />
+<g
+   id="g6">
+	<path
+   d="M 49.575492,25.197675 H 41.24694 v 4.941783 h 8.328552 c 2.476657,0 4.398187,1.265096 4.398187,2.353936 v 21.913515 c 0,1.088839 -1.92153,2.353936 -4.398187,2.353936 H 18.094685 c -2.476657,0 -4.398188,-1.265097 -4.398188,-2.353936 V 32.494218 c 0,-1.08884 1.921531,-2.353936 4.398188,-2.353936 h 8.326905 v -4.941784 h -8.326905 c -5.237467,0 -9.3399709,3.204747 -9.3399709,7.29572 v 21.913514 c 0,4.091797 4.1025039,7.29572 9.3399709,7.29572 h 31.48163 c 5.236643,0 9.339971,-3.204747 9.339971,-7.29572 V 32.494218 c -8.24e-4,-4.091797 -4.103328,-7.296543 -9.340794,-7.296543 z"
+   id="path2"
+   style="fill:#ffffff;stroke-width:0.823631" />
+	<path
+   d="m 41.312006,34.701548 c -0.632548,0 -1.128592,0.43489 -1.74692,0.723971 L 36.47153,38.519075 V 22.847033 17.90525 8.4384399 c 0,-1.3647558 -1.106136,-2.4708916 -2.470892,-2.4708916 -1.364756,0 -2.470892,1.1061358 -2.470892,2.4708916 v 9.4668101 9.883566 10.897456 l -3.260753,-3.260753 c -0.482648,-0.482648 -1.115196,-0.723971 -1.746921,-0.723971 -0.631724,0 -1.264272,0.241323 -1.74692,0.723971 -0.965295,0.964471 -0.965295,2.529369 0,3.493841 l 7.377259,7.377259 c 0.482647,0.482647 1.114372,0.722324 1.746097,0.722324 h 0.01894 0.01894 c 0.631724,0 1.263449,-0.239677 1.746097,-0.722324 L 43.05975,38.91936 c 0.965295,-0.964472 0.965295,-2.52937 0,-3.493841 -0.483471,-0.482648 -1.115195,-0.723971 -1.747744,-0.723971 z"
+   id="path4"
+   sodipodi:nodetypes="sscccssscccssccsscssccs"
+   style="fill:#ffffff;stroke-width:0.823631" />
+</g>
+<g
+   id="g8">
+</g>
+<g
+   id="g10">
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+<g
+   id="g36">
+</g>
+</svg>

public/icons/lightbulb.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="lightbulb.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M24 44Q22.3 44 21.125 42.825Q19.95 41.65 19.95 39.95H28.05Q28.05 41.65 26.875 42.825Q25.7 44 24 44ZM15.9 36.85V33.85H32.1V36.85ZM16.15 30.8Q12.85 28.65 10.925 25.425Q9 22.2 9 18.15Q9 12.05 13.45 7.6Q17.9 3.15 24 3.15Q30.1 3.15 34.55 7.6Q39 12.05 39 18.15Q39 22.2 37.1 25.425Q35.2 28.65 31.85 30.8Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/icons/money.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="money.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="6.5625"
+     inkscape:cx="37.942857"
+     inkscape:cy="29.714286"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 22.070204,47.757552 V 42.214123 Q 18.308592,41.554191 15.89984,39.343419 13.491088,37.132647 12.435197,33.766994 l 3.695619,-1.517844 q 1.121884,3.167674 3.233667,4.718514 2.111782,1.55084 5.081476,1.55084 3.167674,0 5.213463,-1.583837 2.045789,-1.583837 2.045789,-4.355551 0,-2.903701 -1.814813,-4.487538 -1.814813,-1.583836 -6.830296,-3.233666 -4.75151,-1.517844 -7.094269,-4.025586 -2.342759,-2.507741 -2.342759,-6.269354 0,-3.629626 2.342759,-6.0713741 2.342759,-2.4417484 6.104371,-2.7717144 V 0.24244792 h 3.959592 V 5.7198835 q 2.969694,0.329966 5.114473,1.9467994 2.144779,1.6168335 3.266663,4.1245751 l -3.695619,1.583837 q -0.923905,-2.111783 -2.474745,-3.068684 -1.55084,-0.9569014 -4.058582,-0.9569014 -3.035687,0 -4.817503,1.3858574 -1.781817,1.385857 -1.781817,3.761612 0,2.507742 1.979796,4.058582 1.979796,1.55084 7.325246,3.20067 4.487537,1.385857 6.632316,3.992589 2.144779,2.606731 2.144779,6.566323 0,4.157572 -2.441748,6.69831 -2.441749,2.540738 -7.193259,3.266663 v 5.477436 z"
+     id="path2"
+     style="fill:#ffffff;stroke-width:1.31986" />
+</svg>

public/icons/music-note.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="music-note.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M19.65 42Q16.5 42 14.325 39.825Q12.15 37.65 12.15 34.5Q12.15 31.35 14.325 29.175Q16.5 27 19.65 27Q21.05 27 22.175 27.4Q23.3 27.8 24.15 28.5V6H35.85V12.75H27.15V34.5Q27.15 37.65 24.975 39.825Q22.8 42 19.65 42Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/icons/right-arrow.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="right-arrow.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24.07619"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 17.039265,39.62264 14.838095,37.382164 28.320259,23.9 14.838095,10.417836 17.039265,8.1773601 32.761905,23.9 Z"
+     id="path2"
+     style="fill:#ffffff;stroke-width:0.786132" />
+</svg>

public/icons/skip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>

public/icons/sort.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/></svg>

public/icons/star.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="star.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M11.65 44 16.3 28.8 4 20H19.2L24 4L28.8 20H44L31.7 28.8L36.35 44L24 34.6Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/icons/stopwatch.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   width="48"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="stopwatch.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   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="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="13.125"
+     inkscape:cx="24"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="482"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M14.45 34Q16.3 35.95 18.8 36.975Q21.3 38 24 38Q29.85 38 33.925 33.925Q38 29.85 38 24Q38 18.15 33.925 14.075Q29.85 10 24 10V24ZM24 44Q19.75 44 16.1 42.475Q12.45 40.95 9.75 38.25Q7.05 35.55 5.525 31.9Q4 28.25 4 24Q4 19.8 5.525 16.15Q7.05 12.5 9.75 9.8Q12.45 7.1 16.1 5.55Q19.75 4 24 4Q28.2 4 31.85 5.55Q35.5 7.1 38.2 9.8Q40.9 12.5 42.45 16.15Q44 19.8 44 24Q44 28.25 42.45 31.9Q40.9 35.55 38.2 38.25Q35.5 40.95 31.85 42.475Q28.2 44 24 44Z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

public/libs/Source+Sans+Pro.css

@@ -3,7 +3,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@@ -11,7 +11,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
@@ -19,7 +19,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
@@ -27,7 +27,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
@@ -35,7 +35,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@@ -43,7 +43,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@@ -51,7 +51,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
@@ -59,7 +59,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@@ -67,7 +67,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
@@ -75,7 +75,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
@@ -83,7 +83,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
@@ -91,7 +91,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
@@ -99,7 +99,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@@ -107,6 +107,6 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+}

public/options/lock-options.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<!-- Link to specific tabs by using their ID in the URL like: options.html#keybinds -->
-
-<head>
-  <title>__MSG_Options__ - SponsorBlock</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
-  <link rel="icon" href="../icons/LogoSponsorBlocker64px.png" type="image/png">
-  
-  <link href="options.css" rel="stylesheet"/>
-
-  <script src="../js/options.js"></script>
-</head>
-
-<body class="sponsorBlockPageBody">
-
-	<div id="options-container">
-
-		<div id="menubar" class="center">
-
-			<div id="title" class="titleBar">
-				<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
-				SponsorLock
-				<div id="version"></div>
-			</div>
-		</div>
-
-		</div>
-
-		<div id="options">
-			<div style="font-size: 75px;">
-				With SponsorLock, <b>we</b> decide for <b>you</b>!
-			</div>
-
-			Would you want it any other way?
-		</div>
-
-	</div>
-
-</body>

public/options/options.css

@@ -123,6 +123,14 @@ html, body {
     border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
 }
 
+.categoryExtraOptions {
+    padding-bottom: 20px;
+}
+
+#music_offtopic_autoSkipOnMusicVideos {
+    padding-bottom: 0;
+}
+
 .option-group > div:last-child, .option-group > #keybind-dialog {
     border-bottom: inherit;
 }
@@ -309,6 +317,15 @@ input[type='number'] {
     color: grey;
 }
 
+.sb-toggle-option.disabled .slider {
+    cursor: default;
+}
+
+/* To hide everything except upsell button */
+.disabled td:not(.skipOption, .categoryExtraOptions), .disabled td.skipOption > :not(.upsellButton) {
+    opacity: 0.3;
+}
+
 #options {
     height: 100vh;
     flex-basis: 80%;
@@ -346,6 +363,10 @@ input[type='number'] {
     padding: 4px;
 }
 
+.switch-label {
+    width: inherit;
+}
+
 .switch {
     position: relative;
     display: inline-block;
@@ -670,4 +691,14 @@ svg {
     #options > div {
         max-width: 100%;
     }
+}
+
+.upsellButton {
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.no-bottom-border {
+    border: none !important;
+    padding: 20px 0px 0px 0px !important;
 }

public/options/options.html

@@ -5,7 +5,7 @@
   <title>__MSG_Options__ - SponsorBlock</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" /> 
-  <link rel="icon" href="../icons/LogoSponsorBlocker64px.png" type="image/png">
+  <link rel="icon" href="../icons/IconSponsorBlocker32px.png" type="image/png">
   
   <link href="options.css" rel="stylesheet"/>
 
@@ -65,18 +65,6 @@
 
 				</div>
 
-				<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="autoSkipOnMusicVideos" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="autoSkipOnMusicVideos">
-							__MSG_autoSkipOnMusicVideos__
-						</label>
-					</div>
-				</div>
-	
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">
@@ -89,7 +77,7 @@
 					</div>
 				</div>
 				
-				<div data-type="toggle" data-sync="fullVideoSegments">
+				<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="fullVideoSegments" type="checkbox" checked>
@@ -101,6 +89,19 @@
 					</div>
 				</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>
@@ -109,6 +110,20 @@
 	
 					<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 class="switch-container">
@@ -138,6 +153,20 @@
 					<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
 				</div>
 
+				<div data-type="toggle" data-sync="showCategoryWithoutPermission">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="showCategoryWithoutPermission" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="showCategoryWithoutPermission">
+							__MSG_enableShowCategoryWithoutPermission__
+						</label>
+					</div>
+	
+					<div class="small-description">__MSG_whatShowCategoryWithoutPermission__</div>
+				</div>
+
 			</div>
 
 			<div id="interface" class="option-group hidden">
@@ -174,6 +203,18 @@
 						<option value="4">__MSG_noticeVisibilityMode4__</option>
 					</select>
 				</div>
+
+				<div data-type="toggle" data-sync="showCategoryGuidelines">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="showCategoryGuidelines" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="showCategoryGuidelines">
+							__MSG_showCategoryGuidelines__
+						</label>
+					</div>
+				</div>
 	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="hideVideoPlayerControls">
 					<div class="switch-container">
@@ -248,6 +289,18 @@
 						</label>
 					</div>
 				</div>
+
+				<div data-type="toggle" data-sync="allowScrollingToEdit">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="allowScrollingToEdit" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="allowScrollingToEdit">
+							__MSG_allowScrollingToEdit__
+						</label>
+					</div>
+				</div>
 	
 				<div data-type="toggle" data-sync="audioNotificationOnSkip">
 					<div class="switch-container">
@@ -301,6 +354,18 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-toggle-type="reverse" data-sync="showUpsells" data-no-safari="true">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="showUpsell" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="showUpsells">
+							__MSG_hideUpsells__
+						</label>
+					</div>
+				</div>
+
 			</div>
 
 			<div id="keybinds" class="option-group hidden">
@@ -320,6 +385,16 @@
 					<div class="inline"></div>
 				</div>
 
+				<div data-type="keybind-change" data-sync="nextChapterKeybind">	
+					<label class="optionLabel">__MSG_nextChapterKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="previousChapterKeybind">	
+					<label class="optionLabel">__MSG_previousChapterKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
 			</div>
 
 			<div id="import" class="option-group hidden">
@@ -339,6 +414,8 @@
 						</div>
 					</div>
 				</div>
+
+				<div data-type="react-UnsubmittedVideosComponent"></div>
 	
 				<div data-type="private-text-change" data-sync="*" data-confirm-message="exportOptionsWarning">
 					<h2>__MSG_exportOptions__</h2>
@@ -367,11 +444,17 @@
 					</div>
 				</div>
 
+				<div data-type="button-press" data-sync="resetToDefault" data-confirm-message="confirmResetToDefault">
+					<div class="option-button trigger-button">
+						__MSG_resetToDefault__
+					</div>
+				</div>
+
 			</div>
 
 			<div id="advanced" class="option-group hidden">
 
-				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
+				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="supportInvidious" type="checkbox">
@@ -382,11 +465,11 @@
 						</label>
 					</div>
 	
-					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
+					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube, Piped)</div>
 					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
 				</div>
 	
-				<div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true" data-dependent-on="supportInvidious">
+				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious">
 					<div class="option-button trigger-button">
 						__MSG_addInvidiousInstance__
 					</div>
@@ -461,7 +544,7 @@
 	
 					<div class="small-description">__MSG_copyDebugInformationOptions__</div>
 				</div>
-	
+
 				<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">

public/oss-attribution/attribution.txt

@@ -1,3 +1,204 @@
+@ajayyy/maze-utils
+1.1.7 <https://github.com/ajayyy/SponsorBlock>
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
+
+
+******************************
+
+content-scripts-register-polyfill
+4.0.2 <https://github.com/fregante/content-scripts-register-polyfill>
+MIT License
+
+Copyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+******************************
+
+escape-string-regexp
+5.0.0 <https://github.com/sindresorhus/escape-string-regexp>
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+******************************
+
 js-tokens
 4.0.0 <https://github.com/lydell/js-tokens>
 The MIT License (MIT)
@@ -50,37 +251,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
-******************************
-
-object-assign
-4.1.1 <https://github.com/sindresorhus/object-assign>
-The MIT License (MIT)
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-
 ******************************
 
 react
-17.0.2 <https://github.com/facebook/react>
+18.2.0 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -107,7 +281,7 @@ SOFTWARE.
 ******************************
 
 react-dom
-17.0.2 <https://github.com/facebook/react>
+18.2.0 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -134,7 +308,7 @@ SOFTWARE.
 ******************************
 
 scheduler
-0.20.2 <https://github.com/facebook/react>
+0.23.0 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -156,3 +330,48 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+
+******************************
+
+webext-content-scripts
+2.5.2 <https://github.com/fregante/webext-content-scripts>
+MIT License
+
+Copyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+******************************
+
+webext-patterns
+1.3.0 <https://github.com/fregante/webext-patterns>
+MIT License
+
+Copyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+******************************
+
+webext-polyfill-kinda
+1.0.0 <https://github.com/fregante/webext-polyfill-kinda>
+MIT License
+
+Copyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

public/permissions/index.html

@@ -18,6 +18,12 @@
 
 	<br/>
 
+	<div class="center">
+		__MSG_invidiousPermissionRefresh__
+	</div>
+
+	<br/>
+
 	<div class="center">
 		<div id="acceptPermissionButton" class="option-button inline">
 			__MSG_acceptPermission__

public/popup.css

@@ -1,41 +1,64 @@
 :root {
   --sb-main-font-family: "Source Sans Pro", sans-serif;
-  --sb-main-bg-color: #222626;
+  --sb-main-bg-color: #222;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
+  --sb-grey-fg-color: #999;
   --sb-red-bg-color: #cc1717;
 }
 
 /*
- * Container when popup displayed in-page
+ * Generic utilities
  */
-
-#sponsorBlockPopupContainer {
+.grey-text {
+  color: var(--sb-grey-fg-color);
+}
+.white-text {
+  color: var(--sb-main-fg-color);
+}
+.sbHeader {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: left;
+  margin: 0;
+}
+#sponsorBlockPopupBody .u-mZ {
+  margin: 0 !important;
   position: relative;
-  margin-bottom: 16px;
+}
+
+#sponsorBlockPopupBody .hidden {
+  display: none !important;
 }
 
 /*
- * Disable fixed popup width when displayed in-page
+ * <button> elements that have icons
  */
-
-#sponsorBlockPopupContainer #sponsorBlockPopupBody {
-  width: auto;
-}
+ #setUsernameButton,
+ #copyUserID,
+ #submitUsername {
+   color: var(--sb-main-fg-color);
+   background: transparent;
+   width: fit-content;
+   padding: 0;
+   border: none;
+ }
 
 /*
  * Main containers
  */
-
 #sponsorBlockPopupHTML {
   color-scheme: dark;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 #sponsorBlockPopupBody {
   margin: 0;
   width: 374px;
-  font-family: var(--sb-main-font-family);
+  max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
   font-size: 14px;
+  font-family: var(--sb-main-font-family);
   background-color: var(--sb-main-bg-color);
   color: var(--sb-main-fg-color);
   color-scheme: dark;
@@ -45,18 +68,59 @@
   text-align: center;
 }
 
+#sponsorblockPopup a,
+#sponsorblockPopup button {
+  cursor: pointer;
+}
+
 /*
  * Disable transition on all elements until the extension has loaded
  */
-
 .sb-preload * {
   transition: none !important;
 }
 
 /*
- * Close popup button when displayed in-page
+ * Alert indicating that Beta server is enabled
  */
+#sbBetaServerWarning {
+  padding: 8px;
+  font-size: 1em;
+  font-weight: 700;
+  color: var(--sb-main-fg-color);
+  background-color: var(--sb-red-bg-color);
+  cursor: pointer;
+}
 
+/*
+ * Container when popup displayed in-page (content.ts)
+ */
+#sponsorBlockPopupContainer {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+#sponsorBlockPopupContainer iframe {
+  width: 100%;
+}
+
+/*
+ * Disable popup max height when displayed in-page (content.ts)
+ */
+#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
+  max-height: none;
+}
+
+/*
+ * Disable fixed popup width when displayed in-page (content.ts)
+ */
+#sponsorBlockPopupBody.is-embedded {
+  width: auto;
+}
+
+/*
+ * Close popup button when displayed in-page (top-right corner)
+ */
 .sbCloseButton {
   background: transparent;
   border: 0;
@@ -75,52 +139,70 @@
 /*
  * Header logo
  */
-
 .sbPopupLogo {
   display: flex;
   align-items: center;
-  font-size: 32px;
-  font-weight: bold;
   justify-content: center;
+  font-weight: bold;
   user-select: none;
-  padding: 20px 0 10px;
+  padding: 10px 0px 0px;
+  font-size: 32px;
 }
-
 .sbPopupLogo img {
-  margin-right: 8px;
+  margin: 8px;
 }
 
-/*
- * Refresh segments button
- */
-
 #refreshSegmentsButton {
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-  cursor: pointer;
   display: flex;
+  align-items: center;
   padding: 5px;
   margin: 5px auto;
-  align-items: center;
 }
 
-#refreshSegmentsButton:hover {
+#issueReporterImportExport {
+  position: relative;
+}
+
+#refreshSegmentsButton, #issueReporterImportExport button {
+  background: transparent;
+  border-radius: 50%;
+  border: none;
+}
+
+#refreshSegmentsButton:hover, #issueReporterImportExport button:hover {
   background-color: var(--sb-grey-bg-color);
 }
 
+#issueReporterImportExport button {
+  padding: 5px;
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
+#issueReporterImportExport img {
+  width: 24px;
+  display: block;
+}
+
+#importSegmentsText {
+  margin-top: 7px;
+}
+
+#importSegmentsMenu button {
+  padding: 10px;
+}
+
 /*
  * <details> wrapper around each segment
  */
-
 .votingButtons {
   font-family: Arial, Helvetica, sans-serif;
+  border-radius: 8px;
+  margin: 4px 16px;
 }
-
 .votingButtons[open] {
   padding-bottom: 5px;
 }
-
 .votingButtons:hover {
   background-color: var(--sb-grey-bg-color);
 }
@@ -128,44 +210,72 @@
 /*
  * Individual segments summaries (clickable <summary>)
  */
-
 .segmentSummary {
-  cursor: pointer;
-  font-weight: bold;
-  padding: 7px;
-  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   white-space: nowrap;
+  font-weight: bold;
+  list-style: none;
+  cursor: pointer;
+  padding: 4px 8px;
+}
+.segmentSummary > div {
+  text-align: left;
+}
+
+.segmentSummary::-webkit-details-marker {
+  display: none !important;
+}
+
+.segmentActive {
+  color: #bdfffb;
+}
+
+.segmentPassed {
+  color: #adadad;
 }
 
 /*
  * Category dot in segment
  */
-
 .sponsorTimesCategoryColorCircle {
-  margin: 0 8px;
+  margin-right: 8px;
 }
-
 .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
 }
+/*
+ * Category name in segment
+ */
+.summaryLabel {
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
+.sbVoteButtonsContainer {
+  text-align: right;
+}
 
 /*
  * Buttons that appear under a segment on click
  */
-
 .voteButton {
   height: 20px;
   padding: 0 5px;
   cursor: pointer;
 }
 
+.voteButton:hover {
+  opacity: 0.8;
+}
+
 /*
  * "Voted!" text that appears after voting on a segment
  */
-
 .sponsorTimesThanksForVotingText {
   font-size: large;
 }
@@ -173,113 +283,44 @@
 /*
  * Main controls menu
  */
-
 .sbControlsMenu {
+  margin: 16px;
+  margin-top: 6px;
+  border-radius: 8px;
   background-color: var(--sb-grey-bg-color);
-  display: flex;
   justify-content: space-evenly;
-  margin-top: 10px;
-}
-
-.sbControlsMenu-item {
-  background-color: var(--sb-grey-bg-color);
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-  user-select: none;
-  padding: 10px 15px;
-  flex: 1;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
-
+.sbControlsMenu-item {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background: transparent;
+  user-select: none;
+  cursor: pointer;
+  border: none;
+  flex: 1;
+  padding: 10px 15px;
+  transition: background-color 0.2s ease-in-out;
+}
 .sbControlsMenu-item:hover {
   background-color: #444;
 }
-
 .sbControlsMenu-itemIcon {
   margin-bottom: 6px;
 }
 
-/*
- * "Skipping is enabled" toggle
- */
-
-.toggleSwitchContainer {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.toggleSwitchContainer-switch {
-  display: flex;
-  margin-bottom: 6px;
-}
-
-.switchBg {
-  display: block;
-  width: 50px;
-  height: 23px;
-  border-radius: 18.5px;
-}
-
-.switchBg.shadow {
-  box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
-  opacity: 1;
-}
-
-.switchBg.white {
-  position: absolute;
-  background-color: #ccc;
-  opacity: 1;
-}
-
-.switchBg.green {
-  position: absolute;
-  background-color: #00a205;
-  opacity: 0;
-  transition: opacity 0.2s ease-out;
-}
-
-.switchDot {
-  background-color: var(--sb-main-fg-color);
-  border-radius: 50%;
-  width: 15px;
-  height: 15px;
-  margin: 4px;
-  position: absolute;
-  box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
-  transition: transform 0.2s ease-out;
-}
-
-#toggleSwitch:checked ~ .switchDot {
-  transform: translateX(27px);
-}
-
-#toggleSwitch:checked ~ .switchBg.green {
-  opacity: 1;
-}
-
-#toggleSwitch:checked ~ .switchBg.white {
-  opacity: 0;
-  transition: opacity 0.2s step-end;
-}
-
 /*
  * Whitelist add/remove icon
  */
-
 .SBWhitelistIcon > path {
   fill: var(--sb-main-fg-color);
 }
-
 .SBWhitelistIcon.rotated {
   transform: rotate(45deg);
 }
-
 @keyframes rotate {
   from {
     transform: rotate(0deg);
@@ -289,258 +330,304 @@
   }
 }
 
+/*
+ * "Skipping is enabled" toggle
+ */
+.toggleSwitchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.toggleSwitchContainer-switch {
+  display: flex;
+  margin-bottom: 6px;
+}
+.switchBg {
+  width: 50px;
+  height: 23px;
+  display: block;
+  border-radius: 18.5px;
+}
+.switchBg.shadow {
+  box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
+  opacity: 1;
+}
+.switchBg.white {
+  opacity: 1;
+  position: absolute;
+  background-color: #ccc;
+}
+.switchBg.green {
+  opacity: 0;
+  position: absolute;
+  background-color: #00a205;
+  transition: opacity 0.2s ease-out;
+}
+.switchDot {
+  width: 15px;
+  margin: 4px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  transition: transform 0.2s ease-out;
+  background-color: var(--sb-main-fg-color);
+  box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
+}
+#toggleSwitch:checked ~ .switchDot {
+  transform: translateX(27px);
+}
+#toggleSwitch:checked ~ .switchBg.green {
+  opacity: 1;
+}
+#toggleSwitch:checked ~ .switchBg.white {
+  transition: opacity 0.2s step-end;
+  opacity: 0;
+}
+
 /*
  * Notice that appears when whitelisting a channel, that recommends
  * enabling the "Force Channel Check Before Skipping" option
  */
-
 #whitelistForceCheck {
-  font-weight: bold;
-  text-decoration: underline;
-  font-size: large;
-  cursor: pointer;
-  padding: 10px 0;
+  background-color: #fff3cd;
+  padding: 10px 15px;
+  display: block;
+  color: #664d03;
+}
+#whitelistForceCheck:hover {
+  background-color: #f2e4b7;
 }
 
 /*
- * Container around the "Segment Starts Now" and "Submit Times" buttons
+ * Submit box
  */
-
 #mainControls {
-  flex-flow: column;
-  align-items: center;
-  margin-bottom: 12px;
+  margin: 16px;
+  padding: 8px 14px;
+  text-align: left;
+  border-radius: 8px;
+  border: 2px solid var(--sb-grey-bg-color);
+}
+.sponsorStartHint {
+  display: block;
+  text-align: left;
+  padding-top: 3px;
 }
 
 /*
- * Generic buttons used for "Segment Starts Now" and "Submit Times"
+ * Generic red buttons used for "Start Segment Now", "Submit Times" etc.
  */
-
 .sbMediumButton {
-  background-color: var(--sb-red-bg-color);
-  border: 0;
-  -moz-border-radius: 28px;
-  -webkit-border-radius: 28px;
+  border: none;
+  font-size: 16px;
+  padding: 8px 16px;
   border-radius: 28px;
   display: inline-block;
-  cursor: pointer;
+  -moz-border-radius: 28px;
+  -webkit-border-radius: 28px;
   color: var(--sb-main-fg-color);
-  font-size: 16px;
-  padding: 8px 37px;
-  font-family: var(--sb-main-font-family);
   transition: 0.01s background-color;
+  font-family: var(--sb-main-font-family);
+  background-color: var(--sb-red-bg-color);
 }
-
 .sbMediumButton:hover,
 .sbMediumButton:focus {
-  outline: none;
   background-color: #ec1c1c;
+  outline: none;
 }
-
 .sbMediumButton:active {
   position: relative;
   top: 1px;
 }
-
 /*
  * "Submit Times" button
  */
-
 #submitTimes {
   margin-top: 12px;
 }
 
 /*
- * Heading utility class
+ * Your Work box
  */
-
-.sbHeader {
-  font-size: 20px;
-  font-weight: bold;
-  margin: 10px 0 5px;
+.sbYourWorkBox {
+  margin: 16px;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  border: 2px solid var(--sb-grey-bg-color);
 }
-
-/*
- * Side-by-side section of "Your Work"
- */
-
 .sbYourWorkCols {
   display: flex;
-  margin: 0 20px 12px;
+  border-top: 2px solid var(--sb-grey-bg-color);
+  border-bottom: 2px solid var(--sb-grey-bg-color);
 }
 
-.sbYourWorkCols > div {
-  display: flex;
-  align-items: center;
-  width: 50%;
-  justify-content: center;
+.sbStatsSentence {
+  padding: 6px 14px;
 }
 
-/*
- * <button> elements that have icons
- */
-
-#setUsernameButton,
-#submitUsername,
-#copyUserID {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  padding: 0;
-  color: var(--sb-main-fg-color);
-  width: fit-content;
-}
-
-/*
- * Prevent username from wrapping
- */
-
-#setUsernameButton {
-  flex: 0 1;
-  margin-right: 5px;
-}
-
-/*
- * Set username button
- */
-
-#submitUsername {
-  padding-left: 7px;
+.sbExtraInfo {
+  display: inline-block;
 }
 
 /*
  * Increase font size of username input and display
  */
-
 #usernameValue,
-#usernameInput,
-#sponsorTimesContributionsDisplay {
+#usernameInput {
   font-size: 16px;
   flex: 1 0;
 }
-
-/*
- * Left align "Username" and "Submissions" labels
+#sponsorTimesContributionsDisplay {
+  font-size: 16px;
+}
+ /*
+ * Improve alignment of username and submissions
  */
-
-#usernameElement > div > p,
+#usernameElement > p,
 #sponsorTimesContributionsContainer {
-  text-align: start;
+  text-align: left;
 }
 
 /*
- * Enable flexbox for buttons with SVG icon
+ * Username
  */
-
+#usernameElement {
+  padding: 8px 14px;
+  min-width: 50%;
+  width: 100%;
+}
+#setUsernameContainer {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
 #setUsernameContainer > button {
   display: flex;
 }
-
-/*
- * Improve position of "Copy User ID" button
- */
-
+#setUsernameButton {
+  margin-right: 5px;
+  flex: 0 1;
+}
+#submitUsername {
+  padding-left: 16px;
+}
 #copyUserID {
   width: 100%;
   flex: 0 1;
 }
-
-/*
- * Container around username display and edit
- */
-
-#setUsernameContainer {
-  display: flex;
-}
-
-/*
- * Improve alignment of username and submissions
- */
-
-#usernameElement > div,
-#sponsorTimesContributionsContainer > div {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-}
-
 /*
  * Truncate username display
  */
-
 #usernameValue {
-  overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 130px;
-  margin-right: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0 8px 0 0;
+  max-width: 165px;
 }
-
 /*
  * Set username form container with "expanded" state
  */
-
-#setUsername {
-  display: flex;
-}
-
 #setUsername.SBExpanded {
-  width: 200%;
+  text-align: left;
 }
-
 /*
  * Set username input
  */
-
 #usernameInput {
-  background: transparent;
-  padding: 2px;
-  border: var(--sb-main-fg-color) 1px solid;
-  color: var(--sb-main-fg-color);
-  width: calc(100% - 24px);
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: calc(100% - 68px);
   text-overflow: ellipsis;
+  color: var(--sb-main-fg-color);
+  background-color: var(--sb-grey-bg-color);
+}
+
+/*
+ * Submissions
+*/
+#sponsorTimesContributionsContainer {
+  padding: 8px 14px;
+  border-left: 2px solid var(--sb-grey-bg-color);
 }
 
 /*
  * Footer
  */
-
 #sbFooter {
-  margin-top: 10px;
-  padding-bottom: 20px;
+  padding: 8px 0;
+}
+#sbFooter a {
+  transition: background 0.3s ease !important;
+  color: var(--sb-main-fg-color);
+  display: inline-block;
+  text-decoration: none;
+  border-radius: 4px;
+  background-color: #333;
+  padding: 4px 8px;
+  font-weight: 500;
+  margin: 2px 1px;
+}
+#sbFooter a:hover {
+  background-color: #444;
 }
 
-#sbFooter a {
+#sponsorTimesDonateContainer a {
   color: var(--sb-main-fg-color);
-  cursor: pointer;
   text-decoration: none;
 }
 
 /*
  * "Show Notice Again" button
  */
-
 #showNoticeAgain {
   background: transparent;
   border: 1px solid #fff;
   border-radius: 5px;
   color: var(--sb-main-fg-color);
-  cursor: pointer;
   margin-bottom: 20px;
   padding: 5px;
 }
 
-/*
- * Generic spacing classes
- */
-
-.u-mZ {
+#sponsorBlockPopupBody .u-mZ {
   margin: 0 !important;
 }
 
-/*
- * Generic hide utility classes
- */
-
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
+
+#issueReporterTabs {
+  margin: 5px;
+}
+
+#issueReporterTabs > span {
+  padding: 2px 4px;
+  margin: 0 3px;
+  cursor: pointer;
+  background-color: #444848;
+  border-radius: 10px;
+}
+
+#issueReporterTabs > span > span {
+  position: relative;
+  padding: 0.2em 0;
+}
+
+#issueReporterTabs > span > span::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.1em;
+  background-color: rgb(145, 0, 0);
+  transition: transform 300ms;
+  transform: scaleX(0);
+  transform-origin: center;
+}
+
+#issueReporterTabs > span.sbSelected > span::after {
+  transform: scaleX(0.8);
+}

public/popup.html

@@ -6,32 +6,69 @@
     <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>
 
-  <body id="sponsorBlockPopupBody">
+  <body id="sponsorBlockPopupBody" style="visibility: hidden">
     <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
 
+      <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
+        <img src="icons/close.png" width="15" height="15" alt="Close icon">
+      </button>
+
+      <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
+        __MSG_betaServerWarning__
+      </div>
+
       <header class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
-        <p class="u-mZ">SponsorLock</p>
+        <p class="u-mZ">SponsorBlock</p>
       </header>
 
       <div id="videoInfo">
         <!-- Loading text -->
-        <p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p>
+        <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"></p>
+        <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  style="display: none" id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
-          <input type="checkbox" style="display:none;" id="whitelistToggle">
+        <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>
@@ -41,7 +78,7 @@
         <!--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>
+            <input type="checkbox" style="display: none" id="toggleSwitch" checked>
             <span class="switchBg shadow"></span>
             <span class="switchBg white"></span>
             <span class="switchBg green"></span>
@@ -56,31 +93,37 @@
         </button>
       </div>
 
-      <p id="whitelistForceCheck" class="u-mZ hidden">
+      <a id="whitelistForceCheck" class="hidden">
         __MSG_forceChannelCheckPopup__
-      </p>
+      </a>
 
+      <!-- Submit box -->
       <div id="mainControls" style="display: none">
-        <p class="sbHeader">
+        <h1 class="sbHeader">
           __MSG_recordTimesDescription__
-        </p>
-        <sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
-        <div>
-          <button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
-        </div>
-        <div id="submissionSection" style="display: none">
-          <b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
-          <button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
+        </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>
 
-      <h1 class="recordingSubtitle sbHeader" style="display: none">__MSG_yourWork__</h1>
-      <div class="sbYourWorkCols" style="display: none">
-        <div id="usernameElement">
-          <div>
-            <p class="u-mZ">__MSG_Username__:</p>
+      <!-- Your Work box -->
+      <div 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" class="u-mZ"></p>
+              <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>
@@ -89,65 +132,70 @@
               </button>
             </div>
             <div id="setUsername" style="display: none">
-              <div id="setUsernameStatusContainer" style="display: none">
-                <p id="setUsernameStatus" class="u-mZ"></p>
-              </div>
               <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>
-        </div>
-        <div id="sponsorTimesContributionsContainer" class="hidden">
-          <div>
-            <p class="u-mZ">__MSG_Submissions__:</p>
-            <span id="sponsorTimesContributionsDisplay">
-              0
-            </span>
+          <!-- 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>
 
-      <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
-        __MSG_savedPeopleFrom__
-        <b><span id="sponsorTimesViewsDisplay">
-            0
-          </span></b>
-        <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-        <br>
-        (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-          <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
-        <span>__MSG_youHaveSavedTimeEnd__</span>).
-      </p>
-      <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
-        __MSG_youHaveSkipped__
-        <b><span id="sponsorTimesSkipsDoneDisplay">
-            0
-          </span></b>
-        <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-        (<b><span id="sponsorTimeSavedDisplay">
-            0
-          </span>
-          <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
-      </p>
+      <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"  style="display: none">
-        <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="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
-        </div>
-
-        <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> |
-        <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
-        <br/>
-        <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> |
+      <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">$</a>
       </footer>
 
       <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>

public/res/countries.json

@@ -0,0 +1 @@
+{"Albania":{"allowed":true},"Algeria":{"allowed":true},"Angola":{"allowed":true},"Argentina":{"allowed":true},"Armenia":{"allowed":true},"Australia":{"allowed":false},"Austria":{"allowed":false},"Azerbaijan":{"allowed":true},"Bangladesh":{"allowed":true},"Belarus":{"allowed":true},"Belgium":{"allowed":false},"Belize":{"allowed":true},"Benin":{"allowed":true},"Bhutan":{"allowed":true},"Bolivia":{"allowed":true},"Bosnia and Herzegovina":{"allowed":true},"Botswana":{"allowed":true},"Brazil":{"allowed":true},"Bulgaria":{"allowed":true},"Burkina Faso":{"allowed":true},"Burundi":{"allowed":true},"Cameroon":{"allowed":true},"Canada":{"allowed":false},"Central African Republic":{"allowed":true},"Chad":{"allowed":true},"Chile":{"allowed":true},"China":{"allowed":true},"Colombia":{"allowed":true},"Comoros":{"allowed":true},"Costa Rica":{"allowed":true},"Croatia":{"allowed":true},"Cyprus":{"allowed":false},"Czech Republic":{"allowed":false},"Denmark":{"allowed":false},"Djibouti":{"allowed":true},"Dominican Republic":{"allowed":true},"DR Congo":{"allowed":true},"Ecuador":{"allowed":true},"Egypt":{"allowed":true},"El Salvador":{"allowed":true},"Estonia":{"allowed":false},"Eswatini":{"allowed":true},"Ethiopia":{"allowed":true},"Fiji":{"allowed":true},"Finland":{"allowed":false},"France":{"allowed":false},"Gabon":{"allowed":true},"Gambia":{"allowed":true},"Georgia":{"allowed":true},"Germany":{"allowed":false},"Ghana":{"allowed":true},"Greece":{"allowed":true},"Guatemala":{"allowed":true},"Guinea":{"allowed":true},"Guinea-Bissau":{"allowed":true},"Guyana":{"allowed":true},"Haiti":{"allowed":true},"Honduras":{"allowed":true},"Hungary":{"allowed":true},"Iceland":{"allowed":false},"India":{"allowed":true},"Iran":{"allowed":true},"Iraq":{"allowed":true},"Ireland":{"allowed":false},"Israel":{"allowed":false},"Italy":{"allowed":false},"Ivory Coast":{"allowed":true},"Jamaica":{"allowed":true},"Japan":{"allowed":false},"Jordan":{"allowed":true},"Kazakhstan":{"allowed":true},"Kenya":{"allowed":true},"Kiribati":{"allowed":true},"Kyrgyzstan":{"allowed":true},"Laos":{"allowed":true},"Latvia":{"allowed":true},"Lebanon":{"allowed":true},"Lesotho":{"allowed":true},"Liberia":{"allowed":true},"Lithuania":{"allowed":true},"Luxembourg":{"allowed":false},"Madagascar":{"allowed":true},"Malawi":{"allowed":true},"Malaysia":{"allowed":true},"Maldives":{"allowed":true},"Mali":{"allowed":true},"Malta":{"allowed":false},"Mauritania":{"allowed":true},"Mauritius":{"allowed":true},"Mexico":{"allowed":true},"Micronesia":{"allowed":true},"Moldova":{"allowed":true},"Mongolia":{"allowed":true},"Montenegro":{"allowed":true},"Morocco":{"allowed":true},"Mozambique":{"allowed":true},"Myanmar":{"allowed":true},"Namibia":{"allowed":true},"Nepal":{"allowed":true},"Netherlands":{"allowed":false},"Nicaragua":{"allowed":true},"Niger":{"allowed":true},"Nigeria":{"allowed":true},"North Macedonia":{"allowed":true},"Norway":{"allowed":false},"Pakistan":{"allowed":true},"Panama":{"allowed":true},"Papua New Guinea":{"allowed":true},"Paraguay":{"allowed":true},"Peru":{"allowed":true},"Philippines":{"allowed":true},"Poland":{"allowed":true},"Portugal":{"allowed":true},"Republic of the Congo":{"allowed":true},"Romania":{"allowed":true},"Russia":{"allowed":true},"Rwanda":{"allowed":true},"Saint Lucia":{"allowed":true},"Samoa":{"allowed":true},"Sao Tome and Principe":{"allowed":true},"Senegal":{"allowed":true},"Serbia":{"allowed":true},"Seychelles":{"allowed":true},"Sierra Leone":{"allowed":true},"Slovakia":{"allowed":true},"Slovenia":{"allowed":false},"Solomon Islands":{"allowed":true},"South Africa":{"allowed":true},"South Korea":{"allowed":false},"South Sudan":{"allowed":true},"Spain":{"allowed":false},"Sri Lanka":{"allowed":true},"Sudan":{"allowed":true},"Suriname":{"allowed":true},"Sweden":{"allowed":false},"Switzerland":{"allowed":false},"Syria":{"allowed":true},"Taiwan":{"allowed":false},"Tajikistan":{"allowed":true},"Tanzania":{"allowed":true},"Thailand":{"allowed":true},"Timor-Leste":{"allowed":true},"Togo":{"allowed":true},"Tonga":{"allowed":true},"Trinidad and Tobago":{"allowed":true},"Tunisia":{"allowed":true},"Turkey":{"allowed":true},"Turkmenistan":{"allowed":true},"Tuvalu":{"allowed":true},"Uganda":{"allowed":true},"Ukraine":{"allowed":true},"United Arab Emirates":{"allowed":false},"United Kingdom":{"allowed":false},"United States":{"allowed":false},"Uruguay":{"allowed":true},"Uzbekistan":{"allowed":true},"Vanuatu":{"allowed":true},"Venezuela":{"allowed":true},"Vietnam":{"allowed":true},"Yemen":{"allowed":true},"Zambia":{"allowed":true},"Zimbabwe":{"allowed":true}}

public/shared.css

@@ -0,0 +1,219 @@
+.sponsorSkipNoticeParent {
+    position: absolute;
+
+	bottom: 100px;
+	right: var(--skip-notice-right);
+}
+
+.sponsorSkipNoticeParent, .sponsorSkipNotice {
+	border-spacing: var(--skip-notice-border-horizontal) var(--skip-notice-border-vertical);
+	padding-left: var(--skip-notice-padding);
+	padding-right: var(--skip-notice-padding);
+
+	border-collapse: unset;
+}
+
+.sponsorSkipNoticeParent {
+	min-width: 350px;
+	max-width: 50%;
+}
+
+.sponsorSkipNotice {
+	width: 100%;
+}
+
+.sponsorSkipNoticeTableContainer {
+	background-color: rgba(28, 28, 28, 0.9);
+	border-radius: 5px;
+	min-width: 100%;
+}
+
+.sponsorSkipNotice {
+	transition: all 0.1s ease-out;
+}
+
+.sponsorSkipNoticeLimitWidth {
+	max-width: calc(100% - 50px);
+}
+
+.sponsorSkipNotice .hidden {
+	display: none;
+}
+
+/* For Cloudtube */
+.sponsorSkipNotice td, .sponsorSkipNotice table, .sponsorSkipNotice th {
+	border: none;
+}
+
+.sponsorSkipNoticeFadeIn {
+	animation: fadeIn 0.5s ease-out;
+}
+
+.sponsorSkipNoticeFaded {
+	opacity: 0.5;
+}
+
+.sponsorSkipNoticeFadeOut {
+	transition: opacity 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	opacity: 0 !important;
+	animation: none !important;
+}
+
+.sponsorSkipNotice .sponsorSkipNoticeTimeLeft {
+	color: #eeeeee;
+
+	border-radius: 4px;
+    padding: 2px 5px;
+    font-size: 12px;
+
+	display: flex;
+    align-items: center;
+
+	border: 1px solid #eeeeee;
+}
+
+.sponsorSkipNoticeTimeLeft img {
+	vertical-align: middle;
+    height: 13px;
+
+	padding-top: 7.8%;
+    padding-bottom: 7.8%;
+}
+
+/* if two are very close to eachother */
+.secondSkipNotice {
+	bottom: 290px;
+}
+
+.noticeLeftIcon {
+	display: flex;
+  	align-items: center;
+}
+
+.sponsorSkipNotice .sponsorSkipNoticeUnskipSection {
+	float: left;
+
+	border-left: 1px solid rgb(150, 150, 150);
+}
+
+.sponsorSkipNoticeButton {
+	background: none;
+	color: rgb(235, 235, 235);
+	border: none;
+	display: inline-block;
+	font-size: 13.3333px !important;
+
+	cursor: pointer;
+
+	margin-right: 10px;
+
+    padding: 2px 5px;
+}
+
+.sponsorSkipNoticeButton:hover {
+	background-color: rgba(235, 235, 235,0.2);
+	border-radius: 4px;
+
+	transition: background-color 0.4s;
+}
+
+.sponsorSkipNoticeFirstRow .sponsorSkipNoticeButton.sponsorSkipSmallButton {
+	height: 1.3em;
+	padding: 0;
+}
+
+.sponsorTimesVoteButtonsContainer {
+	float: left;
+	vertical-align:middle;
+	padding: 2px 5px;
+
+	margin-right: 4px;
+}
+
+.sponsorTimesVoteButtonsContainer div{
+	display: inline-block;
+}
+
+.sponsorSkipNoticeRightSection {
+    right: 0;
+	position: absolute;
+
+	float: right;
+
+	margin-right: 10px;
+	display: flex;
+	align-items: center;
+}
+
+.sponsorSkipNoticeRightButton {
+	margin-right: 0;
+}
+
+.sponsorSkipNoticeCloseButton {
+	height: 10px;
+	width: 10px;
+	box-sizing: unset;
+
+	padding: 2px 5px;
+
+	margin-left: 2px;
+    float: right;
+}
+
+.sponsorSkipNoticeCloseButton.biggerCloseButton {
+	padding: 20px;
+}
+
+.sponsorSkipMessage {
+	font-size: 14px;
+	font-weight: bold;
+	color: rgb(235, 235, 235);
+
+	margin-top: auto;
+	display: inline-block;
+	margin-right: 10px;
+	margin-bottom: auto;
+}
+
+.sponsorSkipInfo {
+	font-size: 10px;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+}
+
+#sponsorTimesThanksForVotingText {
+	font-size: 20px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+#sponsorTimesThanksForVotingInfoText {
+	font-size: 12px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+}
+
+.sponsorTimesVoteButtonMessage {
+	float: left;
+}
+
+.sponsorTimesInfoMessage {
+	font-size: 13.3333px;
+    color: rgb(235, 235, 235);
+}
+
+.sb-guidelines-notice .sponsorTimesInfoMessage td {
+	padding-left: 5px;
+	padding-top: 2px;
+	padding-bottom: 2px;
+    font-size: 15px;
+
+	display: flex;
+	align-items: center;
+}

src/background.ts

@@ -2,9 +2,14 @@ import * as CompileConfig from "../config.json";
 
 import Config from "./config";
 import { Registration } from "./types";
+import "content-scripts-register-polyfill";
+import { sendRealRequestToCustomServer, setupBackgroundRequestProxy } from "@ajayyy/maze-utils/lib/background-request-proxy";
+import { setupTabUpdates } from "@ajayyy/maze-utils/lib/tab-updates";
+import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
 
 // Make the config public for debugging purposes
-// window.SB = Config; //no window for service workers
+
+window.SB = Config;
 
 import Utils from "./utils";
 const utils = new Utils({
@@ -12,62 +17,98 @@ const utils = new Utils({
     unregisterFirefoxContentScript
 });
 
+const popupPort: Record<string, chrome.runtime.Port> = {};
+
 // Used only on Firefox, which does not support non persistent background pages.
 const contentScriptRegistrations = {};
 
 // Register content script if needed
-if (utils.isFirefox()) {
-    utils.wait(() => Config.config !== null).then(function() {
-        if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
-    });
-} 
-
-chrome.tabs.onUpdated.addListener(function(tabId) {
-	chrome.tabs.sendMessage(tabId, {
-        message: 'update',
-	}, () => void chrome.runtime.lastError ); // Suppress error on Firefox
+utils.wait(() => Config.config !== null).then(function() {
+    if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
 });
 
+setupBackgroundRequestProxy();
+setupTabUpdates(Config);
+
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-	switch(request.message) {
+    switch(request.message) {
         case "openConfig":
-            chrome.tabs.create({url: chrome.runtime.getURL('options/lock-options.html' + (request.hash ? '#' + request.hash : ''))});
-            return;
+            chrome.tabs.create({url: chrome.runtime.getURL('options/options.html' + (request.hash ? '#' + request.hash : ''))});
+            return false;
         case "openHelp":
             chrome.tabs.create({url: chrome.runtime.getURL('help/index.html')});
-            return;
+            return false;
         case "openPage":
             chrome.tabs.create({url: chrome.runtime.getURL(request.url)});
-            return;
-        case "sendRequest":
-            sendRequestToCustomServer(request.type, request.url, request.data).then(async (response) => {
-                callback({
-                    responseText: await response.text(),
-                    status: response.status,
-                    ok: response.ok
-                });
-            });
-        
-            return true;
+            return false;
         case "submitVote":
             submitVote(request.type, request.UUID, request.category).then(callback);
-        
+
             //this allows the callback to be called later
             return true;
-        case "registerContentScript": 
+        case "registerContentScript":
             registerFirefoxContentScript(request);
             return false;
-        case "unregisterContentScript": 
+        case "unregisterContentScript":
             unregisterFirefoxContentScript(request.id)
             return false;
+        case "tabs": {
+            chrome.tabs.query({
+                active: true,
+                currentWindow: true
+            }, tabs => {
+                chrome.tabs.sendMessage(
+                    tabs[0].id,
+                    request.data,
+                    (response) => {
+                        callback(response);
+                    }
+                );
+            });
+            return true;
+        }
+        case "time":
+        case "infoUpdated":
+        case "videoChanged":
+            if (sender.tab) {
+                popupPort[sender.tab.id]?.postMessage(request);
+            }
+            return false;
+        default:
+            return false;
 	}
 });
 
+chrome.runtime.onMessageExternal.addListener((request, sender, callback) => {
+    if (CompileConfig.extensionCommunicationAllowList.includes(sender.id)) {
+        if (request.message === "requestConfig") {
+            callback({
+                userID: Config.config.userID,
+                allowExpirements: Config.config.allowExpirements,
+                showDonationLink: Config.config.showDonationLink,
+                showUpsells: Config.config.showUpsells,
+                darkMode: Config.config.darkMode,
+            })
+        }
+    }
+});
+
+chrome.runtime.onConnect.addListener((port) => {
+    if (port.name === "popup") {
+        chrome.tabs.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            popupPort[tabs[0].id] = port;
+        });
+    }
+});
+
 //add help page on install
 chrome.runtime.onInstalled.addListener(function () {
     // This let's the config sync to run fully before checking.
     // This is required on Firefox
-    setTimeout(function() {
+    setTimeout(async () => {
         const userID = Config.config.userID;
 
         // If there is no userID, then it is the first install.
@@ -76,27 +117,33 @@ chrome.runtime.onInstalled.addListener(function () {
             chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
 
             //generate a userID
-            const newUserID = utils.generateUserID();
+            const newUserID = generateUserID();
             //save this UUID
             Config.config.userID = newUserID;
 
             // Don't show update notification
             Config.config.categoryPillUpdate = true;
         }
+
+        if (Config.config.supportInvidious) {
+            if (!(await utils.containsInvidiousPermission())) {
+                chrome.tabs.create({url: chrome.extension.getURL("/permissions/index.html")});
+            }
+        }
     }, 1500);
 });
 
 /**
  * Only works on Firefox.
  * Firefox requires that it be applied after every extension restart.
- * 
- * @param {JSON} options 
+ *
+ * @param {JSON} options
  */
 function registerFirefoxContentScript(options: Registration) {
     const oldRegistration = contentScriptRegistrations[options.id];
     if (oldRegistration) oldRegistration.unregister();
 
-    browser.contentScripts.register({
+    chrome.contentScripts.register({
         allFrames: options.allFrames,
         js: options.js,
         css: options.css,
@@ -107,11 +154,13 @@ function registerFirefoxContentScript(options: Registration) {
 /**
  * Only works on Firefox.
  * Firefox requires that this is handled by the background script
- * 
+ *
  */
 function unregisterFirefoxContentScript(id: string) {
-    contentScriptRegistrations[id].unregister();
-    delete contentScriptRegistrations[id];
+    if (contentScriptRegistrations[id]) {
+        contentScriptRegistrations[id].unregister();
+        delete contentScriptRegistrations[id];
+    }
 }
 
 async function submitVote(type: number, UUID: string, category: string) {
@@ -119,7 +168,7 @@ async function submitVote(type: number, UUID: string, category: string) {
 
     if (userID == undefined || userID === "undefined") {
         //generate one
-        userID = utils.generateUserID();
+        userID = generateUserID();
         Config.config.userID = userID;
     }
 
@@ -150,35 +199,9 @@ async function submitVote(type: number, UUID: string, category: string) {
     }
 }
 
+
 async function asyncRequestToServer(type: string, address: string, data = {}) {
     const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
 
-    return await (sendRequestToCustomServer(type, serverAddress + address, data));
-}
-
-/**
- * Sends a request to the specified url
- * 
- * @param type The request type "GET", "POST", etc.
- * @param address The address to add to the SponsorBlock server address
- * @param callback 
- */
-async function sendRequestToCustomServer(type: string, url: string, data = {}) {
-    // If GET, convert JSON to parameters
-    if (type.toLowerCase() === "get") {
-        url = utils.objectToURI(url, data, true);
-
-        data = null;
-    }
-
-    const response = await fetch(url, {
-        method: type,
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        redirect: 'follow',
-        body: data ? JSON.stringify(data) : null
-    });
-
-    return response;
+    return await (sendRealRequestToCustomServer(type, serverAddress + address, data));
 }

src/components/CategoryPillComponent.tsx

@@ -7,8 +7,8 @@ import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
 import { AnimationUtils } from "../utils/animationUtils";
-import { GenericUtils } from "../utils/genericUtils";
 import { Tooltip } from "../render/Tooltip";
+import { getErrorMessage } from "@ajayyy/maze-utils/lib/formating";
 
 export interface CategoryPillProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
@@ -43,14 +43,14 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
         return (
             <span style={style}
-                className={"sponsorBlockCategoryPill"} 
+                className={"sponsorBlockCategoryPill"}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
                 onMouseLeave={() => this.closeTooltip()}>
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
                     <span className="sponsorBlockCategoryPillTitle">
                         {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
@@ -79,7 +79,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.runtime.getURL("icons/close.png")}
+                <img src={chrome.extension.getURL("icons/close.png")}
                     className="categoryPillClose"
                     onClick={() => this.setState({ show: false })}>
                 </img>
@@ -104,52 +104,40 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             await stopAnimation();
 
             if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
-                this.setState({ 
-                    open: false, 
+                this.setState({
+                    open: false,
                     show: type === 1
                 });
             } else if (response.statusCode !== 403) {
-                alert(GenericUtils.getErrorMessage(response.statusCode, response.responseText));
+                alert(getErrorMessage(response.statusCode, response.responseText));
             }
         }
     }
 
     private getColor(): string {
-        const configObject = Config.config.barTypes["preview-" + this.state.segment?.category] 
-            || Config.config.barTypes[this.state.segment?.category];
-        return configObject?.color;
+        // Handled by setCategoryColorCSSVariables() of content.ts
+        const category = this.state.segment?.category;
+        return category == null ? null : `var(--sb-category-preview-${category}, var(--sb-category-${category}))`;
     }
 
     private getTextColor(): string {
-        const color = this.getColor();
-        if (!color) return null;
-
-        const existingCalculatedColor = Config.config.categoryPillColors[this.state.segment?.category];
-        if (existingCalculatedColor && existingCalculatedColor.lastColor === color) {
-            return existingCalculatedColor.textColor;
-        } else {
-            const luminance = GenericUtils.getLuminance(color);
-            const textColor = luminance > 128 ? "black" : "white";
-            Config.config.categoryPillColors[this.state.segment?.category] = {
-                lastColor: color,
-                textColor
-            };
-
-            return textColor;
-        }
+        // Handled by setCategoryColorCSSVariables() of content.ts
+        const category = this.state.segment?.category;
+        return category == null ? null : `var(--sb-category-text-preview-${category}, var(--sb-category-text-${category}))`;
     }
 
     private openTooltip(): void {
-        const tooltipMount = document.querySelector("ytd-video-primary-info-renderer > #container") as HTMLElement;
+        const tooltipMount = document.querySelector("#above-the-fold") as HTMLElement;
         if (tooltipMount) {
             this.tooltip = new Tooltip({
                 text: this.getTitleText(),
                 referenceNode: tooltipMount,
-                bottomOffset: "70px",
+                bottomOffset: "0px",
                 opacity: 0.95,
                 displayTriangle: false,
                 showLogo: false,
-                showGotIt: false
+                showGotIt: false,
+                prependElement: tooltipMount.firstElementChild as HTMLElement
             });
         }
     }

src/components/ChapterVoteComponent.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import Config from "../config";
+import { ActionType, Category, SegmentUUID, SponsorTime } from "../types";
+
+import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
+import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
+import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
+import { VoteResponse } from "../messageTypes";
+import { AnimationUtils } from "../utils/animationUtils";
+import { Tooltip } from "../render/Tooltip";
+import { getErrorMessage } from "@ajayyy/maze-utils/lib/formating";
+
+export interface ChapterVoteProps {
+    vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
+    size?: string;
+}
+
+export interface ChapterVoteState {
+    segment?: SponsorTime;
+    show: boolean;
+    size?: string;
+}
+
+class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVoteState> {
+    tooltip?: Tooltip;
+
+    constructor(props: ChapterVoteProps) {
+        super(props);
+
+        this.state = {
+            segment: null,
+            show: false,
+            size: props.size ?? "22px"
+        };
+    }
+
+    render(): React.ReactElement {
+        if (this.tooltip && !this.state.show) {
+            this.tooltip.close();
+            this.tooltip = null;
+        }
+
+        return (
+            <>
+                {/* Upvote Button */}
+                <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"}
+                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "hidden" : "")}
+                        draggable="false"
+                        title={chrome.i18n.getMessage("upvoteButtonInfo")}
+                        onClick={(e) => this.vote(e, 1)}>
+                    <ThumbsUpSvg className="playerButtonImage" 
+                        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 ? "hidden" : "")}
+                        draggable="false"
+                        title={chrome.i18n.getMessage("reportButtonInfo")}
+                        onClick={(e) => {
+                            const chapterNode = document.querySelector(".ytp-chapter-container") as HTMLElement;
+
+                            if (this.tooltip) {
+                                this.tooltip.close();
+                                this.tooltip = null;
+                            } else {
+                                if (this.state.segment?.actionType === ActionType.Chapter) {
+                                    const referenceNode = chapterNode?.parentElement?.parentElement;
+                                    if (referenceNode) {
+                                        const outerBounding = referenceNode.getBoundingClientRect();
+                                        const buttonBounding = (e.target as HTMLElement)?.parentElement?.getBoundingClientRect();
+                                        
+                                        this.tooltip = new Tooltip({
+                                            referenceNode: chapterNode?.parentElement?.parentElement,
+                                            prependElement: chapterNode?.parentElement,
+                                            showLogo: false,
+                                            showGotIt: false,
+                                            bottomOffset: `${outerBounding.height + 25}px`,
+                                            leftOffset: `${buttonBounding.x - outerBounding.x}px`,
+                                            extraClass: "centeredSBTriangle",
+                                            buttons: [
+                                                {
+                                                    name: chrome.i18n.getMessage("incorrectVote"),
+                                                    listener: (event) => this.vote(event, 0, e.target as HTMLElement).then(() => {
+                                                        this.tooltip?.close();
+                                                        this.tooltip = null;
+                                                    })
+                                                }, {
+                                                    name: chrome.i18n.getMessage("harmfulVote"),
+                                                    listener: (event) => this.vote(event, 30, e.target as HTMLElement).then(() => {
+                                                        this.tooltip?.close();
+                                                        this.tooltip = null;
+                                                    })
+                                                }
+                                            ]
+                                        });
+                                    }
+                                } else {
+                                    this.vote(e, 0, e.target as HTMLElement)
+                                }
+                            }
+                        }}>
+                    <ThumbsDownSvg 
+                        className="playerButtonImage" 
+                        fill={downvoteButtonColor(this.state.segment ? [this.state.segment] : null, SkipNoticeAction.Downvote, SkipNoticeAction.Downvote)} 
+                        width={this.state.size} 
+                        height={this.state.size} />
+                </button>
+            </>
+        );
+    }
+
+    private async vote(event: React.MouseEvent, type: number, element?: HTMLElement): Promise<void> {
+        event.stopPropagation();
+        if (this.state.segment) {
+            const stopAnimation = AnimationUtils.applyLoadingAnimation(element ?? event.currentTarget as HTMLElement, 0.3);
+
+            const response = await this.props.vote(type, this.state.segment.UUID);
+            await stopAnimation();
+
+            if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+                this.setState({
+                    show: type === 1
+                });
+            } else if (response.statusCode !== 403) {
+                alert(getErrorMessage(response.statusCode, response.responseText));
+            }
+        }
+    }
+}
+
+export default ChapterVoteComponent;

src/components/NoticeComponent.tsx

@@ -8,39 +8,42 @@ enum CountdownMode {
 }
 
 export interface NoticeProps {
-    noticeTitle: string,
+    noticeTitle: string;
 
-    maxCountdownTime?: () => number,
-    amountOfPreviousNotices?: number,
-    showInSecondSlot?: boolean,
-    timed?: boolean,
-    idSuffix?: string,
+    maxCountdownTime?: () => number;
+    dontPauseCountdown?: boolean;
+    amountOfPreviousNotices?: number;
+    showInSecondSlot?: boolean;
+    timed?: boolean;
+    idSuffix?: string;
 
-    fadeIn?: boolean,
-    startFaded?: boolean,
-    firstColumn?: React.ReactElement,
-    firstRow?: React.ReactElement,
-    bottomRow?: React.ReactElement[],
+    fadeIn?: boolean;
+    startFaded?: boolean;
+    firstColumn?: React.ReactElement[] | React.ReactElement;
+    firstRow?: React.ReactElement;
+    bottomRow?: React.ReactElement[];
 
-    smaller?: boolean,
-    limitWidth?: boolean,
+    smaller?: boolean;
+    limitWidth?: boolean;
+    extraClass?: string;
+    hideLogo?: boolean;
+    hideRightInfo?: boolean;
 
     // Callback for when this is closed
-    closeListener: () => void,
-    onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void,
+    closeListener: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 
-    zIndex?: number,
-    style?: React.CSSProperties
+    zIndex?: number;
+    style?: React.CSSProperties;
     biggerCloseButton?: boolean;
+    children?: React.ReactNode;
 }
 
 export interface NoticeState {
-    noticeTitle: string,
+    maxCountdownTime: () => number;
 
-    maxCountdownTime: () => number,
-
-    countdownTime: number,
-    countdownMode: CountdownMode,
+    countdownTime: number;
+    countdownMode: CountdownMode;
 
     mouseHovering: boolean;
 
@@ -54,9 +57,13 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
     amountOfPreviousNotices: number;
 
+    parentRef: React.RefObject<HTMLDivElement>;
+
     constructor(props: NoticeProps) {
         super(props);
 
+        this.parentRef = React.createRef();
+
         const maxCountdownTime = () => {
             if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
             else return Config.config.skipNoticeDuration;
@@ -71,8 +78,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
         // Setup state
         this.state = {
-            noticeTitle: props.noticeTitle,
-
             maxCountdownTime,
 
             //the countdown until this notice closes
@@ -97,9 +102,11 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         return (
             <div id={"sponsorSkipNotice" + this.idSuffix} 
                 className={"sponsorSkipObject sponsorSkipNoticeParent"
-                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")}
+                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")
+                    + (this.props.extraClass ? ` ${this.props.extraClass}` : "")}
                 onMouseEnter={(e) => this.onMouseEnter(e) }
                 onMouseLeave={() => this.timerMouseLeave()}
+                ref={this.parentRef}
                 style={noticeStyle} >
                 <div className={"sponsorSkipNoticeTableContainer" 
                         + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
@@ -114,16 +121,18 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 {/* Left column */}
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
-                                    <img id={"sponsorSkipLogo" + this.idSuffix} 
-                                        className="sponsorSkipLogo sponsorSkipObject"
-                                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
-                                    </img>
+                                    {!this.props.hideLogo &&
+                                        <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                            className="sponsorSkipLogo sponsorSkipObject"
+                                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                        </img>
+                                    }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}
-                                        style={{float: "left"}}
+                                        style={{float: "left", marginRight: this.props.hideLogo ? "0px" : null}}
                                         className="sponsorSkipMessage sponsorSkipObject">
                                         
-                                        {this.state.noticeTitle}
+                                        {this.props.noticeTitle}
                                     </span>
 
                                     {this.props.firstColumn}
@@ -132,28 +141,30 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 {this.props.firstRow}
 
                                 {/* Right column */}
-                                <td className="sponsorSkipNoticeRightSection"
-                                    style={{top: "9.32px"}}>
+                                {!this.props.hideRightInfo &&
+                                    <td className="sponsorSkipNoticeRightSection"
+                                        style={{top: "9.32px"}}>
+                                        
+                                        {/* Time left */}
+                                        {this.props.timed ? ( 
+                                            <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
+                                                onClick={() => this.toggleManualPause()}
+                                                className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
+
+                                                {this.getCountdownElements()}
+
+                                            </span>
+                                        ) : ""}
                                     
-                                    {/* Time left */}
-                                    {this.props.timed ? ( 
-                                        <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
-                                            onClick={() => this.toggleManualPause()}
-                                            className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
 
-                                            {this.getCountdownElements()}
-
-                                        </span>
-                                    ) : ""}
-                                
-
-                                    {/* Close button */}
-                                    <img src={chrome.runtime.getURL("icons/close.png")}
-                                        className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
-                                                        + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
-                                        onClick={() => this.close()}>
-                                    </img>
-                                </td>
+                                        {/* Close button */}
+                                        <img src={chrome.extension.getURL("icons/close.png")}
+                                            className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
+                                                            + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
+                                            onClick={() => this.close()}>
+                                        </img>
+                                    </td>
+                                }
                             </tr> 
 
                             {this.props.children}
@@ -184,7 +195,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                         id={"skipNoticeTimerText" + this.idSuffix}
                         key="skipNoticeTimerText"
                         className={this.state.countdownMode !== CountdownMode.Timer ? "hidden" : ""} >
-                            {this.state.countdownTime + "s"}
+                            {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())}
                     </span>
                 ),(
                     <img 
@@ -286,7 +297,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     }
 
     pauseCountdown(): void {
-        if (!this.props.timed) return;
+        if (!this.props.timed || this.props.dontPauseCountdown) return;
 
         //remove setInterval
         if (this.countdownInterval) clearInterval(this.countdownInterval);
@@ -344,12 +355,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         if (!silent) this.props.closeListener();
     }
 
-    changeNoticeTitle(title: string): void {
-        this.setState({
-            noticeTitle: title
-        });
-    }
-    
     addNoticeInfoMessage(message: string, message2 = ""): void {
         //TODO: Replace
 
@@ -384,6 +389,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
         }
     }
+
+    getElement(): React.RefObject<HTMLDivElement> {
+        return this.parentRef;
+    }
 }
 
 export default NoticeComponent;

src/components/NoticeTextSectionComponent.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 
 export interface NoticeTextSelectionProps {
-    text: string,
-    idSuffix: string,
-    onClick?: (event: React.MouseEvent) => unknown
+    icon?: string;
+    text: string;
+    idSuffix: string;
+    onClick?: (event: React.MouseEvent) => unknown;
+    children?: React.ReactNode;
 }
 
 export interface NoticeTextSelectionState {
@@ -24,14 +26,42 @@ class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionPr
         }
 
         return (
-            <p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
+            <tr id={"sponsorTimesInfoMessage" + this.props.idSuffix}
                 onClick={this.props.onClick}
                 style={style}
                 className="sponsorTimesInfoMessage">
-                    {this.props.text}
-            </p>
+                    
+                <td>
+                    {this.props.icon ? 
+                        <img src={chrome.runtime.getURL(this.props.icon)} className="sponsorTimesInfoIcon" /> 
+                    : null}
+
+                    <span>
+                        {this.getTextElements(this.props.text)}
+                    </span>
+                </td>
+            </tr>
         );
     }
+
+    private getTextElements(text: string): Array<string | React.ReactElement> {
+        const elements: Array<string | React.ReactElement> = [];
+        const textParts = text.split(/(?=\s+)/);
+        for (const textPart of textParts) {
+            if (textPart.match(/^\s*http/)) {
+                elements.push(
+                    <a href={textPart} target="_blank" rel="noreferrer">
+                        {textPart}
+                    </a>
+                );
+            } else {
+                elements.push(textPart);
+            }
+
+        }
+
+        return elements;
+    }
 }
 
 export default NoticeTextSelectionComponent;

src/components/SelectorComponent.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+export interface SelectorOption {
+    label: string;
+}
+
+export interface SelectorProps { 
+    id: string;
+    options: SelectorOption[];
+    onChange: (value: string) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+
+export interface SelectorState {
+
+}
+
+class SelectorComponent extends React.Component<SelectorProps, SelectorState> {
+
+    constructor(props: SelectorProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            
+        }
+    }
+
+    render(): React.ReactElement {
+        return (
+            <div id={this.props.id}
+                style={{display: this.props.options.length > 0 ? "inherit" : "none"}}
+                className="sbSelector">
+                <div onMouseEnter={this.props.onMouseEnter}
+                    onMouseLeave={this.props.onMouseLeave}
+                    className="sbSelectorBackground">
+                    {this.getOptions()}
+                </div>
+            </div>
+        );
+    }
+
+    getOptions(): React.ReactElement[] {
+        const result: React.ReactElement[] = [];
+        for (const option of this.props.options) {
+            result.push(
+                <div className="sbSelectorOption"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        this.props.onChange(option.label);
+                    }}
+                    key={option.label}>
+                    {option.label}
+                </div>
+            );
+        }
+
+        return result;
+    }
+}
+
+export default SelectorComponent;

src/components/SkipNoticeComponent.tsx

@@ -1,23 +1,31 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorHideType, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";
 const utils = new Utils();
 import { getSkippingText } from "../utils/categoryUtils";
-import { keybindToString } from "../utils/configUtils";
 
 import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import PencilSvg from "../svg-icons/pencil_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
+import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
+import { keybindToString } from "@ajayyy/maze-utils/lib/config";
+
+enum SkipButtonState {
+    Undo, // Unskip
+    Redo, // Reskip
+    Start // Skip
+}
 
 export interface SkipNoticeProps {
     segments: SponsorTime[];
 
     autoSkip: boolean;
+    startReskip?: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
@@ -38,9 +46,9 @@ export interface SkipNoticeState {
     maxCountdownTime?: () => number;
     countdownText?: string;
 
-    skipButtonText?: string;
-    skipButtonCallback?: (index: number) => void;
-    showSkipButton?: boolean;
+    skipButtonStates?: SkipButtonState[];
+    skipButtonCallbacks?: Array<(buttonIndex: number, index: number, forceSeek: boolean) => void>;
+    showSkipButton?: boolean[];
 
     editing?: boolean;
     choosingCategory?: boolean;
@@ -65,7 +73,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
     amountOfPreviousNotices: number;
     showInSecondSlot: boolean;
-    
+
     idSuffix: string;
 
     noticeRef: React.MutableRefObject<NoticeComponent>;
@@ -98,7 +106,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         if (this.segments.length > 1) {
             this.segments.sort((a, b) => a.segment[0] - b.segment[0]);
         }
-    
+
         // This is the suffix added at the end of every id
         for (const segment of this.segments) {
             this.idSuffix += segment.UUID;
@@ -109,6 +117,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.unselectedColor = Config.config.colorPalette.white;
         this.lockedColor = Config.config.colorPalette.locked;
 
+        const isMuteSegment = this.segments[0].actionType === ActionType.Mute;
+        const maxCountdownTime = isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration;
+
+        const defaultSkipButtonState = this.props.startReskip ? SkipButtonState.Redo : SkipButtonState.Undo;
+        const skipButtonStates = [defaultSkipButtonState, isMuteSegment ? SkipButtonState.Start : defaultSkipButtonState];
+
+        const defaultSkipButtonCallback = this.props.startReskip ? this.reskip.bind(this) : this.unskip.bind(this);
+        const skipButtonCallbacks = [defaultSkipButtonCallback, isMuteSegment ? this.reskip.bind(this) : defaultSkipButtonCallback];
+
         // Setup state
         this.state = {
             noticeTitle,
@@ -116,13 +133,13 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             messageOnClick: null,
 
             //the countdown until this notice closes
-            maxCountdownTime: () => Config.config.skipNoticeDuration,
-            countdownTime: Config.config.skipNoticeDuration,
+            maxCountdownTime,
+            countdownTime: maxCountdownTime(),
             countdownText: null,
 
-            skipButtonText: this.getUnskipText(),
-            skipButtonCallback: (index) => this.unskip(index),
-            showSkipButton: true,
+            skipButtonStates,
+            skipButtonCallbacks,
+            showSkipButton: [true, true],
 
             editing: false,
             choosingCategory: false,
@@ -141,7 +158,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
         if (!this.autoSkip) {
             // Assume manual skip is only skipping 1 submission
-            Object.assign(this.state, this.getUnskippedModeInfo(0, this.getSkipText()));
+            Object.assign(this.state, this.getUnskippedModeInfo(null, 0, SkipButtonState.Start));
         }
     }
 
@@ -152,13 +169,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
         }
 
+        // If it started out as smaller, always keep the
+        // skip button there
+        const showFirstSkipButton = this.props.smaller || this.segments[0].actionType === ActionType.Mute;
+        const firstColumn = showFirstSkipButton ? (
+            this.getSkipButton(0)
+        ) : null;
+
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
                 fadeIn={true}
-                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll 
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
                     || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
@@ -168,7 +192,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 closeListener={() => this.closeListener()}
                 smaller={this.state.smaller}
                 limitWidth={true}
-                bottomRow={[...this.getMessageBoxes()]}
+                firstColumn={firstColumn}
+                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
                 onMouseEnter={() => this.onMouseEnter() } >
             </NoticeComponent>
         );
@@ -181,7 +206,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 key={0}>
 
                 {/* Vote Button Container */}
-                {!this.state.thanksForVotingText ? 
+                {!this.state.thanksForVotingText ?
                     <td id={"sponsorTimesVoteButtonsContainer" + this.idSuffix}
                         className="sponsorTimesVoteButtonsContainer">
 
@@ -240,10 +265,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 }
 
                 {/* Unskip/Skip Button */}
-                {!this.props.smaller ? this.getSkipButton() : null}
+                {!this.props.smaller || this.segments[0].actionType === ActionType.Mute
+                    ? this.getSkipButton(1) : null}
 
-                {/* Never show button if autoSkip is enabled */}
-                {!this.autoSkip ? "" : 
+                {/* Never show button */}
+                {!this.autoSkip || this.props.startReskip ? "" :
                     <td className="sponsorSkipNoticeRightSection"
                         key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
@@ -317,14 +343,17 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         ];
     }
 
-    getSkipButton(): JSX.Element {
-        if (this.state.showSkipButton && (this.segments.length > 1 
+    getSkipButton(buttonIndex: number): JSX.Element {
+        if (this.state.showSkipButton[buttonIndex] && (this.segments.length > 1
                 || this.segments[0].actionType !== ActionType.Poi
                 || this.props.unskipTime)) {
 
+            const forceSeek = buttonIndex === 1 && this.segments[0].actionType === ActionType.Mute;
+
             const style: React.CSSProperties = {
                 marginLeft: "4px",
-                color: (this.state.actionState === SkipNoticeAction.Unskip) ? this.selectedColor : this.unselectedColor
+                color: ([SkipNoticeAction.Unskip0, SkipNoticeAction.Unskip1].includes(this.state.actionState))
+                    ? this.selectedColor : this.unselectedColor
             };
             if (this.contentContainer().onMobileYouTube) {
                 style.padding = "20px";
@@ -336,12 +365,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     <button id={"sponsorSkipUnskipButton" + this.idSuffix}
                             className="sponsorSkipObject sponsorSkipNoticeButton"
                             style={style}
-                            onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
-                        {this.state.skipButtonText + (this.state.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
+                            onClick={() => this.prepAction(buttonIndex === 1 ? SkipNoticeAction.Unskip1 : SkipNoticeAction.Unskip0)}>
+                        {this.getSkipButtonText(buttonIndex, forceSeek ? ActionType.Skip : null)
+                            + (!forceSeek && this.state.showKeybindHint
+                                ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
                     </button>
                 </span>
             );
         }
+        return null;
     }
 
     getSubmissionChooser(): JSX.Element[] {
@@ -349,7 +381,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         for (let i = 0; i < this.segments.length; i++) {
             elements.push(
                 <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                        style={{opacity: this.getSubmissionChooserOpacity(i), 
+                        style={{opacity: this.getSubmissionChooserOpacity(i),
                                 color: this.getSubmissionChooserColor(i)}}
                         onClick={() => this.performAction(i)}
                         key={"submission" + i + this.segments[i].category + this.idSuffix}>
@@ -374,18 +406,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     getSubmissionChooserColor(index: number): string {
         const isDownvote = this.state.actionState == SkipNoticeAction.Downvote;
         const isCopyDownvote = this.state.actionState == SkipNoticeAction.CopyDownvote;
-        const shouldWarnUser = Config.config.isVip && (isDownvote || isCopyDownvote) 
+        const shouldWarnUser = Config.config.isVip && (isDownvote || isCopyDownvote)
                                         && this.segments[index].locked === 1;
 
         return shouldWarnUser ? this.lockedColor : this.unselectedColor;
     }
 
     onMouseEnter(): void {
-        // if (this.state.smaller) {
-        //     this.setState({
-        //         smaller: false
-        //     });
-        // }
+        if (this.state.smaller) {
+            this.setState({
+                smaller: false
+            });
+        }
     }
 
     getMessageBoxes(): JSX.Element[] {
@@ -438,8 +470,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 case SkipNoticeAction.CopyDownvote:
                     this.resetStateToStart(SkipNoticeAction.CopyDownvote, true);
                     break;
-                case SkipNoticeAction.Unskip:
-                    this.resetStateToStart(SkipNoticeAction.Unskip);
+                case SkipNoticeAction.Unskip0:
+                    this.resetStateToStart(SkipNoticeAction.Unskip0);
+                    break;
+                case SkipNoticeAction.Unskip1:
+                    this.resetStateToStart(SkipNoticeAction.Unskip1);
                     break;
             }
         }
@@ -447,8 +482,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
     /**
      * Performs the action from the current state
-     * 
-     * @param index 
+     *
+     * @param index
      */
     performAction(index: number, action?: SkipNoticeAction): void {
         switch (action ?? this.state.actionState) {
@@ -467,8 +502,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             case SkipNoticeAction.CopyDownvote:
                 this.copyDownvote(index);
                 break;
-            case SkipNoticeAction.Unskip:
-                this.unskipAction(index);
+            case SkipNoticeAction.Unskip0:
+                this.unskipAction(0, index, false);
+                break;
+            case SkipNoticeAction.Unskip1:
+                this.unskipAction(1, index, true);
                 break;
             default:
                 this.resetStateToStart();
@@ -504,7 +542,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         const sponsorVideoID = this.props.contentContainer().sponsorVideoID;
         const sponsorTimesSubmitting : SponsorTime = {
             segment: this.segments[index].segment,
-            UUID: utils.generateUserID() as SegmentUUID,
+            UUID: generateUserID() as SegmentUUID,
             category: this.segments[index].category,
             actionType: this.segments[index].actionType,
             source: SponsorSourceType.Local
@@ -530,8 +568,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         });
     }
 
-    unskipAction(index: number): void {
-        this.state.skipButtonCallback(index);
+    unskipAction(buttonIndex: number, index: number, forceSeek: boolean): void {
+        this.state.skipButtonCallbacks[buttonIndex](buttonIndex, index, forceSeek);
     }
 
     openEditingOptions(): void {
@@ -558,28 +596,29 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         return this.props.contentContainer().lockedCategories.includes(category) ? "sponsorBlockLockedColor" : ""
     }
 
-    unskip(index: number): void {
-        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime);
+    unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
+        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
 
-        this.unskippedMode(index, this.getReskipText());
+        this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
     }
 
-    reskip(index: number): void {
-        this.contentContainer().reskipSponsorTime(this.segments[index]);
+    reskip(buttonIndex: number, index: number, forceSeek: boolean): void {
+        this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
+
+        const skipButtonStates = this.state.skipButtonStates;
+        skipButtonStates[buttonIndex] = SkipButtonState.Undo;
+
+        const skipButtonCallbacks = this.state.skipButtonCallbacks;
+        skipButtonCallbacks[buttonIndex] = this.unskip.bind(this);
 
         const newState: SkipNoticeState = {
-            skipButtonText: this.getUnskipText(),
-            skipButtonCallback: this.unskip.bind(this),
+            skipButtonStates,
+            skipButtonCallbacks,
 
             maxCountdownTime: () => Config.config.skipNoticeDuration,
             countdownTime: Config.config.skipNoticeDuration
         };
 
-        // See if the title should be changed
-        if (!this.autoSkip) {
-            newState.noticeTitle = chrome.i18n.getMessage("noticeTitle");
-        }       
-
         //reset countdown
         this.setState(newState, () => {
             this.noticeRef.current.resetCountdown();
@@ -587,30 +626,54 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     /** Sets up notice to be not skipped yet */
-    unskippedMode(index: number, buttonText: string): void {
+    unskippedMode(buttonIndex: number, index: number, skipButtonState: SkipButtonState): void {
         //setup new callback and reset countdown
-        this.setState(this.getUnskippedModeInfo(index, buttonText), () => {
+        this.setState(this.getUnskippedModeInfo(buttonIndex, index, skipButtonState), () => {
             this.noticeRef.current.resetCountdown();
         });
     }
 
-    getUnskippedModeInfo(index: number, buttonText: string): SkipNoticeState {
+    getUnskippedModeInfo(buttonIndex: number, index: number, skipButtonState: SkipButtonState): SkipNoticeState {
         const changeCountdown = this.segments[index].actionType !== ActionType.Poi;
 
-        const maxCountdownTime = changeCountdown ? () => {
+        const maxCountdownTime = changeCountdown ?
+            this.getFullDurationCountdown(index) : this.state.maxCountdownTime;
+
+        const skipButtonStates = this.state.skipButtonStates;
+        const skipButtonCallbacks = this.state.skipButtonCallbacks;
+        if (buttonIndex === null) {
+            for (let i = 0; i < this.segments.length; i++) {
+                skipButtonStates[i] = skipButtonState;
+                skipButtonCallbacks[i] = this.reskip.bind(this);
+            }
+        } else {
+            skipButtonStates[buttonIndex] = skipButtonState;
+            skipButtonCallbacks[buttonIndex] = this.reskip.bind(this);
+
+            if (buttonIndex === 1) {
+                // Trigger both to move at once
+                skipButtonStates[0] = SkipButtonState.Redo;
+                skipButtonCallbacks[0] = this.reskip.bind(this);
+            }
+        }
+
+        return {
+            skipButtonStates,
+            skipButtonCallbacks,
+            // change max duration to however much of the sponsor is left
+            maxCountdownTime,
+            countdownTime: maxCountdownTime(),
+            showSkipButton: buttonIndex === 1 ? [true, true] : this.state.showSkipButton
+        } as SkipNoticeState;
+    }
+
+    getFullDurationCountdown(index: number): () => number {
+        return () => {
             const sponsorTime = this.segments[index];
             const duration = Math.round((sponsorTime.segment[1] - this.contentContainer().v.currentTime) * (1 / this.contentContainer().v.playbackRate));
 
             return Math.max(duration, Config.config.skipNoticeDuration);
-        } : this.state.maxCountdownTime;
-
-        return {
-            skipButtonText: buttonText,
-            skipButtonCallback: (index) => this.reskip(index),
-            // change max duration to however much of the sponsor is left
-            maxCountdownTime: maxCountdownTime,
-            countdownTime: maxCountdownTime()
-        } as SkipNoticeState;
+        };
     }
 
     afterVote(segment: SponsorTime, type: number, category: Category): void {
@@ -657,7 +720,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             messages
         });
     }
-    
+
     addVoteButtonInfo(message: string): void {
         this.setState({
             thanksForVotingText: message
@@ -683,12 +746,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
-    unmutedListener(): void {
-        if (this.props.segments.length === 1 
-                && this.props.segments[0].actionType === ActionType.Mute 
-                && this.contentContainer().v.currentTime >= this.props.segments[0].segment[1]) {
+    unmutedListener(time: number): void {
+        if (this.props.segments.length === 1
+                && this.props.segments[0].actionType === ActionType.Mute
+                && time >= this.props.segments[0].segment[1]) {
             this.setState({
-                showSkipButton: false
+                showSkipButton: [false, true]
             });
         }
     }
@@ -703,36 +766,50 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         });
     }
 
-    private getUnskipText(): string {
-        switch (this.props.segments[0].actionType) {
+    private getSkipButtonText(buttonIndex: number, forceType?: ActionType): string {
+        switch (this.state.skipButtonStates[buttonIndex]) {
+            case SkipButtonState.Undo:
+                return this.getUndoText(forceType);
+            case SkipButtonState.Redo:
+                return this.getRedoText(forceType);
+            case SkipButtonState.Start:
+                return this.getStartText(forceType);
+        }
+    }
+
+    private getUndoText(forceType?: ActionType): string {
+        const actionType = forceType || this.segments[0].actionType;
+        switch (actionType) {
             case ActionType.Mute: {
                 return chrome.i18n.getMessage("unmute");
             }
-            case ActionType.Skip: 
+            case ActionType.Skip:
             default: {
                 return chrome.i18n.getMessage("unskip");
             }
         }
     }
 
-    private getReskipText(): string {
-        switch (this.props.segments[0].actionType) {
+    private getRedoText(forceType?: ActionType): string {
+        const actionType = forceType || this.segments[0].actionType;
+        switch (actionType) {
             case ActionType.Mute: {
                 return chrome.i18n.getMessage("mute");
             }
-            case ActionType.Skip: 
+            case ActionType.Skip:
             default: {
                 return chrome.i18n.getMessage("reskip");
             }
         }
     }
 
-    private getSkipText(): string {
-        switch (this.props.segments[0].actionType) {
+    private getStartText(forceType?: ActionType): string {
+        const actionType = forceType || this.segments[0].actionType;
+        switch (actionType) {
             case ActionType.Mute: {
                 return chrome.i18n.getMessage("mute");
             }
-            case ActionType.Skip: 
+            case ActionType.Skip:
             default: {
                 return chrome.i18n.getMessage("skip");
             }

src/components/SponsorTimeEditComponent.tsx

@@ -1,32 +1,41 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, Category, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
 import Utils from "../utils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
 import { RectangleTooltip } from "../render/RectangleTooltip";
-
+import SelectorComponent, { SelectorOption } from "./SelectorComponent";
+import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
+import { getFormattedTime, getFormattedTimeToSeconds } from "@ajayyy/maze-utils/lib/formating";
 
 const utils = new Utils();
 
 export interface SponsorTimeEditProps {
-    index: number,
+    index: number;
 
-    idSuffix: string,
+    idSuffix: string;
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: ContentContainer,
+    contentContainer: ContentContainer;
 
     submissionNotice: SubmissionNoticeComponent;
     categoryList?: Category[];
+    categoryChangeListener?: (index: number, category: Category) => void;
+    children?: React.ReactNode;
 }
 
 export interface SponsorTimeEditState {
     editing: boolean;
     sponsorTimeEdits: [string, string];
     selectedCategory: Category;
+    description: string;
+    suggestedNames: SelectorOption[];
+    chapterNameSelectorOpen: boolean;
+    chapterNameSelectorHovering: boolean;
 }
 
-const DEFAULT_CATEGORY = "chooseACategory";
+const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
+    .map((name) => chrome.i18n.getMessage("category_" + name).split(/\/|\s|-/)));
 
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
 
@@ -34,6 +43,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     categoryOptionRef: React.RefObject<HTMLSelectElement>;
     actionTypeOptionRef: React.RefObject<HTMLSelectElement>;
+    descriptionOptionRef: React.RefObject<HTMLInputElement>;
 
     configUpdateListener: () => void;
 
@@ -41,26 +51,36 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     // Used when selecting POI or Full
     timesBeforeChanging: number[] = [];
     fullVideoWarningShown = false;
+    categoryNameWarningShown = false;
+
+    // For description auto-complete
+    fetchingSuggestions: boolean;
 
     constructor(props: SponsorTimeEditProps) {
         super(props);
 
         this.categoryOptionRef = React.createRef();
         this.actionTypeOptionRef = React.createRef();
+        this.descriptionOptionRef = React.createRef();
 
         this.idSuffix = this.props.idSuffix;
-
         this.previousSkipType = ActionType.Skip;
+
+        const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
         this.state = {
             editing: false,
             sponsorTimeEdits: [null, null],
-            selectedCategory: DEFAULT_CATEGORY as Category
+            selectedCategory: DEFAULT_CATEGORY as Category,
+            description: sponsorTime.description || "",
+            suggestedNames: [],
+            chapterNameSelectorOpen: false,
+            chapterNameSelectorHovering: false
         };
     }
 
     componentDidMount(): void {
         // Prevent inputs from triggering key events
-        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('keydown', function (event) {
+        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', function (event) {
             event.stopPropagation();
         });
 
@@ -86,6 +106,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     render(): React.ReactElement {
         this.checkToShowFullVideoWarning();
+        this.checkToShowChapterWarning();
 
         const style: React.CSSProperties = {
             textAlign: "center"
@@ -95,14 +116,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             style.marginTop = "15px";
         }
 
-        // This method is required to get !important
-        // https://stackoverflow.com/a/45669262/1985387
-        const oldYouTubeDarkStyles = (node) => {
-            if (node) {
-                node.style.setProperty("color", "black", "important");
-                node.style.setProperty("text-shadow", "none", "important");
-            }
-        };
         // Create time display
         let timeDisplay: JSX.Element;
         const timeDisplayStyle: React.CSSProperties = {};
@@ -122,11 +135,11 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         </span>
                         <input id={"submittingTime0" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput"
-                            ref={oldYouTubeDarkStyles}
                             type="text"
+                            style={{color: "inherit", backgroundColor: "inherit"}}
                             value={this.state.sponsorTimeEdits[0]}
-                            onChange={(e) => {this.handleOnChange(0, e, sponsorTime, e.target.value)}}
-                            onWheel={(e) => {this.changeTimesWhenScrolling(0, e, sponsorTime)}}>
+                            onChange={(e) => this.handleOnChange(0, e, sponsorTime, e.target.value)}
+                            onWheel={(e) => this.changeTimesWhenScrolling(0, e, sponsorTime)}>
                         </input>
 
                         {sponsorTime.actionType !== ActionType.Poi ? (
@@ -137,11 +150,11 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
                                 <input id={"submittingTime1" + this.idSuffix}
                                     className="sponsorTimeEdit sponsorTimeEditInput"
-                                    ref={oldYouTubeDarkStyles}
                                     type="text"
+                                    style={{color: "inherit", backgroundColor: "inherit"}}
                                     value={this.state.sponsorTimeEdits[1]}
-                                    onChange={(e) => {this.handleOnChange(1, e, sponsorTime, e.target.value)}}
-                                    onWheel={(e) => {this.changeTimesWhenScrolling(1, e, sponsorTime)}}>
+                                    onChange={(e) => this.handleOnChange(1, e, sponsorTime, e.target.value)}
+                                    onWheel={(e) => this.changeTimesWhenScrolling(1, e, sponsorTime)}>
                                 </input>
 
                                 <span id={"nowButton1" + this.idSuffix}
@@ -166,15 +179,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     style={timeDisplayStyle}
                     className="sponsorTimeDisplay"
                     onClick={this.toggleEditTime.bind(this)}>
-                        {utils.getFormattedTime(segment[0], true) +
+                        {getFormattedTime(segment[0], true) +
                             ((!isNaN(segment[1]) && sponsorTime.actionType !== ActionType.Poi)
-                                ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segment[1], true) : "")}
+                                ? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment[1], true) : "")}
                 </div>
             );
         }
 
         return (
-            <div style={style}>
+            <div id={"sponsorTimeEditContainer" + this.idSuffix} style={style}>
                 
                 {timeDisplay}
 
@@ -184,7 +197,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         className="sponsorTimeEditSelector sponsorTimeCategories"
                         defaultValue={sponsorTime.category}
                         ref={this.categoryOptionRef}
-                        onChange={this.categorySelectionChange.bind(this)}>
+                        style={{color: "inherit", backgroundColor: "inherit"}}
+                        onChange={(event) => this.categorySelectionChange(event)}>
                         {this.getCategoryOptions()}
                     </select>
 
@@ -194,7 +208,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
-                            src={chrome.runtime.getURL("icons/help.svg")}
+                            src={chrome.extension.getURL("icons/help.svg")}
                             title={chrome.i18n.getMessage("categoryGuidelines")} />
                     </a>
                 </div>
@@ -207,6 +221,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"
                             defaultValue={sponsorTime.actionType}
+                            style={{color: "inherit", backgroundColor: "inherit"}}
                             ref={this.actionTypeOptionRef}
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
                             {this.getActionTypeOptions(sponsorTime)}
@@ -214,6 +229,32 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </div>
                 ): ""}
 
+                {/* Chapter Name */}
+                {sponsorTime.actionType === ActionType.Chapter ? (
+                    <div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
+                        <input id={"chapterName" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
+                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            ref={this.descriptionOptionRef}
+                            type="text"
+                            value={this.state.description}
+                            onContextMenu={(e) => e.stopPropagation()}
+                            onChange={(e) => this.descriptionUpdate(e.target.value)}
+                            onFocus={() => this.setState({chapterNameSelectorOpen: true})}>
+                        </input>
+                        {this.state.description 
+                            && (this.state.chapterNameSelectorOpen || this.state.chapterNameSelectorHovering) &&
+                            <SelectorComponent
+                                id={"chapterNameSelector" + this.idSuffix}
+                                options={this.state.suggestedNames}
+                                onMouseEnter={() => this.setState({chapterNameSelectorHovering: true})}
+                                onMouseLeave={() => this.setState({chapterNameSelectorHovering: false})}
+                                onChange={(v) => this.descriptionUpdate(v)}
+                            />
+                        }
+                    </div>
+                ): ""}
+
                 <br/>
 
                 {/* Editing Tools */}
@@ -224,7 +265,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     {chrome.i18n.getMessage("delete")}
                 </span>
 
-                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) ? (
+                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) 
+                    && sponsorTime.actionType !== ActionType.Chapter ? (
                     <span id={"sponsorTimePreviewButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
                         onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
@@ -240,6 +282,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </span>
                 ): ""}
 
+                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) 
+                    && sponsorTime.actionType === ActionType.Chapter ? (
+                    <span id={"sponsorTimePreviewButton" + this.idSuffix}
+                        className="sponsorTimeEditButton"
+                        onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
+                        {chrome.i18n.getMessage("End")}
+                    </span>
+                ): ""}
+
                 {(!isNaN(segment[1]) && sponsorTime.actionType != ActionType.Full) ? (
                     <span id={"sponsorTimeEditButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
@@ -255,19 +306,19 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
         
         // check if change is small engough to show tooltip
-        const before = utils.getFormattedTimeToSeconds(sponsorTimeEdits[index]);
-        const after = utils.getFormattedTimeToSeconds(targetValue);
+        const before = getFormattedTimeToSeconds(sponsorTimeEdits[index]);
+        const after = getFormattedTimeToSeconds(targetValue);
         const difference = Math.abs(before - after);
-        if (0 < difference && difference< 0.5) this.showScrollToEditToolTip();
+        if (0 < difference && difference < 0.5) this.showScrollToEditToolTip();
 
         sponsorTimeEdits[index] = targetValue;
         if (index === 0 && sponsorTime.actionType === ActionType.Poi) sponsorTimeEdits[1] = targetValue;
 
-        this.setState({sponsorTimeEdits});
-        this.saveEditTimes();
+        this.setState({sponsorTimeEdits}, () => this.saveEditTimes());
     }
 
     changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
+        if (!Config.config.allowScrollingToEdit) return;
         let step = 0;
         // shift + ctrl = 1
         // ctrl = 0.1
@@ -280,7 +331,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
         
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
-        let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
+        let timeAsNumber = getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
         if (timeAsNumber !== null && e.deltaY != 0) {
             if (e.deltaY < 0) {
                 timeAsNumber += step;
@@ -289,7 +340,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             } else {
                 timeAsNumber = 0;
             }
-            sponsorTimeEdits[index] = utils.getFormattedTime(timeAsNumber, true);
+            
+            sponsorTimeEdits[index] = getFormattedTime(timeAsNumber, true);
             if (sponsorTime.actionType === ActionType.Poi) sponsorTimeEdits[1] = sponsorTimeEdits[0];
 
             this.setState({sponsorTimeEdits});
@@ -299,26 +351,29 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     showScrollToEditToolTip(): void {
         if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
-            this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), () => { Config.config.scrollToEditTimeUpdate = true });
+            this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), "scrollToEdit", () => { Config.config.scrollToEditTimeUpdate = true });
         }
     }
 
-    showToolTip(text: string, buttonFunction?: () => void): boolean {
+    showToolTip(text: string, id: string, buttonFunction?: () => void): boolean {
         const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
-        if (element) { 
-            new RectangleTooltip({
-                text,
-                referenceNode: element.parentElement,
-                prependElement: element,
-                timeout: 15,
-                bottomOffset: 0 + "px",
-                leftOffset: -318 + "px",
-                backgroundColor: "rgba(28, 28, 28, 1.0)",
-                htmlId: "sponsorTimesContainer" + this.idSuffix,
-                buttonFunction,
-                fontSize: "14px",
-                maxHeight: "200px"
-            });
+        if (element) {
+            const htmlId = `sponsorRectangleTooltip${id + this.idSuffix}`;
+            if (!document.getElementById(htmlId)) {
+                new RectangleTooltip({
+                    text,
+                    referenceNode: element.parentElement,
+                    prependElement: element,
+                    timeout: 15,
+                    bottomOffset: 0 + "px",
+                    leftOffset: -318 + "px",
+                    backgroundColor: "rgba(28, 28, 28, 1.0)",
+                    htmlId,
+                    buttonFunction,
+                    fontSize: "14px",
+                    maxHeight: "200px"
+                });
+            }
 
             return true;
         } else {
@@ -333,12 +388,25 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         if (videoPercentage > 0.6 && !this.fullVideoWarningShown 
                 && (sponsorTime.category === "sponsor" || sponsorTime.category === "selfpromo" || sponsorTime.category === "chooseACategory")) {
-            if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"))) {
+            if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"), "fullVideoWarning")) {
                 this.fullVideoWarningShown = true;
             }
         }
     }
 
+    checkToShowChapterWarning(): void {
+        const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+
+        if (sponsorTime.actionType === ActionType.Chapter && sponsorTime.description
+                && !this.categoryNameWarningShown
+                && categoryNamesGrams.some(
+                    (category) => sponsorTime.description.toLowerCase().includes(category.toLowerCase()))) {
+            if (this.showToolTip(chrome.i18n.getMessage("chapterNameTooltipWarning"), "chapterWarning")) {
+                this.categoryNameWarningShown = true;
+            }
+        }
+    }
+
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
             <option value={DEFAULT_CATEGORY}
@@ -348,6 +416,13 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         )];
 
         for (const category of (this.props.categoryList ?? CompileConfig.categoryList)) {
+            // If permission not loaded, treat it like we have permission except chapter
+            const defaultBlockCategories = ["chapter"];
+            const permission = (Config.config.showCategoryWithoutPermission
+                || Config.config.permissions[category as Category]);
+            if ((defaultBlockCategories.includes(category) 
+                || (permission !== undefined && !Config.config.showCategoryWithoutPermission)) && !permission) continue;
+
             elements.push(
                 <option value={category}
                         key={category}
@@ -365,9 +440,10 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
+        const chosenCategory = event.target.value as Category;
+
         // See if show more categories was pressed
-        if (event.target.value !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === event.target.value)) {
-            const chosenCategory = event.target.value;
+        if (chosenCategory !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === chosenCategory)) {
             event.target.value = DEFAULT_CATEGORY;
             
             // Alert that they have to enable this category first
@@ -381,8 +457,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
 
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
-        this.handleReplacingLostTimes(event.target.value as Category, sponsorTime.actionType, sponsorTime);
+        this.handleReplacingLostTimes(chosenCategory, sponsorTime.actionType, sponsorTime);
         this.saveEditTimes();
+
+        if (this.props.categoryChangeListener) {
+            this.props.categoryChangeListener(this.props.index, chosenCategory);
+        }
     }
 
     actionTypeSelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
@@ -414,7 +494,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             }
 
             this.previousSkipType = ActionType.Full;
-        } else if ((category === "chooseACategory" || (CompileConfig.categorySupport[category]?.includes(ActionType.Skip) 
+        } else if ((category === "chooseACategory" || ((CompileConfig.categorySupport[category]?.includes(ActionType.Skip)
+                        || CompileConfig.categorySupport[category]?.includes(ActionType.Chapter))
                         && ![ActionType.Poi, ActionType.Full].includes(this.getNextActionType(category, actionType))))
                     && this.previousSkipType !== ActionType.Skip) {
             if (this.timesBeforeChanging[0]) {
@@ -459,12 +540,17 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
         if (time === null) time = sponsorTime.segment[0];
 
+        const addedTime = sponsorTime.segment.length === 1;
         sponsorTime.segment[index] = time;
         if (sponsorTime.actionType === ActionType.Poi) sponsorTime.segment[1] = time;
 
+        if (addedTime) {
+            this.props.contentContainer().updateEditButtonsOnPlayer();
+        }
+
         this.setState({
             sponsorTimeEdits: this.getFormattedSponsorTimesEdits(sponsorTime)
-        }, this.saveEditTimes);
+        }, () => this.saveEditTimes());
     }
 
     toggleEditTime(): void {
@@ -487,28 +573,39 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     /** Returns an array in the sponsorTimeEdits form (formatted time string) from a normal seconds sponsor time */
     getFormattedSponsorTimesEdits(sponsorTime: SponsorTime): [string, string] {
-        return [utils.getFormattedTime(sponsorTime.segment[0], true),
-            utils.getFormattedTime(sponsorTime.segment[1], true)];
+        return [getFormattedTime(sponsorTime.segment[0], true),
+            getFormattedTime(sponsorTime.segment[1], true)];
     }
 
     saveEditTimes(): void {
         const sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
+        const category = this.categoryOptionRef.current.value as Category
 
         if (this.state.editing) {
-            const startTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
-            const endTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
+            const startTime = getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
+            const endTime = getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
 
             // Change segment time only if the format was correct
             if (startTime !== null && endTime !== null) {
+                const addingTime = sponsorTimesSubmitting[this.props.index].segment.length === 1;
                 sponsorTimesSubmitting[this.props.index].segment = [startTime, endTime];
+
+                if (addingTime) {
+                    this.props.contentContainer().updateEditButtonsOnPlayer();
+                }
             }
+        } else if (this.state.sponsorTimeEdits[1] === null && category === "outro" && !sponsorTimesSubmitting[this.props.index].segment[1]) {
+            sponsorTimesSubmitting[this.props.index].segment[1] = this.props.contentContainer().v.duration;
+            this.props.contentContainer().updateEditButtonsOnPlayer();
         }
 
-        const category = this.categoryOptionRef.current.value as Category
         sponsorTimesSubmitting[this.props.index].category = category;
 
-        const inputActionType = this.actionTypeOptionRef?.current?.value as ActionType;
-        sponsorTimesSubmitting[this.props.index].actionType = this.getNextActionType(category, inputActionType);
+        const actionType = this.getNextActionType(category, this.actionTypeOptionRef?.current?.value as ActionType);
+        sponsorTimesSubmitting[this.props.index].actionType = actionType;
+
+        const description = actionType === ActionType.Chapter ? this.descriptionOptionRef?.current?.value : "";
+        sponsorTimesSubmitting[this.props.index].description = description;
 
         Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
         Config.forceSyncUpdate("unsubmittedSegments");
@@ -530,14 +627,19 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     previewTime(ctrlPressed = false, shiftPressed = false): void {
         const sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
         const index = this.props.index;
-
-        const skipTime = sponsorTimes[index].segment[0];
-
         let seekTime = 2;
         if (ctrlPressed) seekTime = 0.5;
         if (shiftPressed) seekTime = 0.25;
 
-        this.props.contentContainer().previewTime(skipTime - (seekTime * this.props.contentContainer().v.playbackRate));
+        const startTime = sponsorTimes[index].segment[0];
+        const endTime = sponsorTimes[index].segment[1];
+        const isChapter = sponsorTimes[index].actionType === ActionType.Chapter;
+
+        // If segment starts at 0:00, start playback at the end of the segment
+        const skipToEndTime = startTime === 0 || isChapter;
+        const skipTime = skipToEndTime ? endTime : (startTime - (seekTime * this.props.contentContainer().v.playbackRate));
+
+        this.props.contentContainer().previewTime(skipTime, !isChapter);
     }
 
     inspectTime(): void {
@@ -581,6 +683,41 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
     }
 
+    descriptionUpdate(description: string): void {
+        this.setState({
+            description
+        }, () => {
+            this.saveEditTimes();
+        });
+
+        if (!this.fetchingSuggestions) {
+            this.fetchSuggestions(description);
+        }
+    }
+
+    async fetchSuggestions(description: string): Promise<void> {
+        if (this.props.contentContainer().channelIDInfo.status !== ChannelIDStatus.Found) return;
+
+        this.fetchingSuggestions = true;
+        const result = await utils.asyncRequestToServer("GET", "/api/chapterNames", {
+            description,
+            channelID: this.props.contentContainer().channelIDInfo.id
+        });
+
+        if (result.ok) {
+            try {
+                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
+        }
+
+        this.fetchingSuggestions = false;
+    }
+
     configUpdate(): void {
         this.forceUpdate();
     }

src/components/SubmissionNoticeComponent.tsx

@@ -1,10 +1,14 @@
 import * as React from "react";
 import Config from "../config"
-import { ContentContainer } from "../types";
+import GenericNotice from "../render/GenericNotice";
+import { Category, ContentContainer } from "../types";
+import * as CompileConfig from "../../config.json";
 
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
+import { getGuidelineInfo } from "../utils/constants";
+import { exportTimes } from "../utils/exporter";
 
 export interface SubmissionNoticeProps { 
     // Contains functions and variables from the content script needed by the skip notice
@@ -16,8 +20,8 @@ export interface SubmissionNoticeProps {
 }
 
 export interface SubmissionNoticeState {
-    noticeTitle: string,
-    messages: string[],
+    noticeTitle: string;
+    messages: string[];
     idSuffix: string;
 }
 
@@ -32,6 +36,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
     videoObserver: MutationObserver;
 
+    guidelinesReminder: GenericNotice;
+
     constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
@@ -68,12 +74,29 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     }
 
     render(): React.ReactElement {
+        const sortButton = 
+            <img id={"sponsorSkipSortButton" + this.state.idSuffix} 
+                className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipSmallButton"
+                onClick={() => this.sortSegments()}
+                title={chrome.i18n.getMessage("sortSegments")}
+                key="sortButton"
+                src={chrome.extension.getURL("icons/sort.svg")}>
+            </img>;
+        const exportButton = 
+            <img id={"sponsorSkipExportButton" + this.state.idSuffix} 
+                className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipSmallButton"
+                onClick={() => this.exportSegments()}
+                title={chrome.i18n.getMessage("exportSegments")}
+                key="exportButton"
+                src={chrome.extension.getURL("icons/export.svg")}>
+            </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 idSuffix={this.state.idSuffix}
                 ref={this.noticeRef}
                 closeListener={this.cancel.bind(this)}
-                zIndex={5000}>
+                zIndex={5000}
+                firstColumn={[sortButton, exportButton]}>
 
                 {/* Text Boxes */}
                 {this.getMessageBoxes()}
@@ -128,6 +151,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                     index={i}
                     contentContainer={this.props.contentContainer}
                     submissionNotice={this}
+                    categoryChangeListener={this.categoryChangeListener.bind(this)}
                     ref={timeRef}>
                 </SponsorTimeEditComponent>
             );
@@ -154,9 +178,10 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     }
 
     cancel(): void {
+        this.guidelinesReminder?.close();
         this.noticeRef.current.close(true);
 
-        this.contentContainer().resetSponsorSubmissionNotice();
+        this.contentContainer().resetSponsorSubmissionNotice(false);
 
         this.props.closeListener();
     }
@@ -190,6 +215,79 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
         this.cancel();
     }
+
+    sortSegments(): void {
+        let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
+        sponsorTimesSubmitting = sponsorTimesSubmitting.sort((a, b) => a.segment[0] - b.segment[0]);
+
+        Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
+        Config.forceSyncUpdate("unsubmittedSegments");
+
+        this.forceUpdate();
+    }
+
+    exportSegments() {
+        const sponsorTimesSubmitting = this.props.contentContainer()
+            .sponsorTimesSubmitting.sort((a, b) => a.segment[0] - b.segment[0]);
+        window.navigator.clipboard.writeText(exportTimes(sponsorTimesSubmitting));
+
+        new GenericNotice(null, "exportCopied", {
+            title: chrome.i18n.getMessage(`CopiedExclamation`),
+            timed: true,
+            maxCountdownTime: () => 0.6,
+            referenceNode: document.querySelector(".noticeLeftIcon"),
+            dontPauseCountdown: true,
+            style: {
+                top: 0,
+                bottom: 0,
+                minWidth: 0,
+                right: "30px",
+                margin: "auto"
+            },
+            hideLogo: true,
+            hideRightInfo: true,
+            extraClass: "exportCopiedNotice"
+        });
+    }
+
+    categoryChangeListener(index: number, category: Category): void {
+        const dialogWidth = this.noticeRef?.current?.getElement()?.current?.offsetWidth;
+        if (category !== "chooseACategory" && Config.config.showCategoryGuidelines
+                && this.contentContainer().v.offsetWidth > dialogWidth * 2) {
+            const options = {
+                title:  chrome.i18n.getMessage(`category_${category}`),
+                textBoxes: getGuidelineInfo(category),
+                buttons: [{
+                        name: chrome.i18n.getMessage("FullDetails"),
+                        listener: () => window.open(CompileConfig.wikiLinks[category])
+                    },
+                    {
+                        name: chrome.i18n.getMessage("Hide"),
+                        listener: () => {
+                            Config.config.showCategoryGuidelines = false;
+                            this.guidelinesReminder?.close();
+                            this.guidelinesReminder = null;
+                        }
+                }],
+                timed: false,
+                style: {
+                    right: `${dialogWidth + 10}px`,
+                },
+                extraClass: "sb-guidelines-notice"
+            };
+
+            if (options.textBoxes) {
+                if (this.guidelinesReminder) {
+                    this.guidelinesReminder.update(options);
+                } else {
+                    this.guidelinesReminder = new GenericNotice(null, "GuidelinesReminder", options);
+                }
+            } else {
+                this.guidelinesReminder?.close();
+                this.guidelinesReminder = null;
+            }
+        }
+    }
 }
 
 export default SubmissionNoticeComponent;

src/components/TooltipComponent.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import Config from "../config";
-import { Category, SegmentUUID, SponsorTime } from "../types";
 
 export interface TooltipProps {
     text: string;

src/components/options/CategoryChooserComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
-import * as CompileConfig from "../../config.json";
-import { Category } from "../types";
+import * as CompileConfig from "../../../config.json";
+import { Category } from "../../types";
 import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
 
 export interface CategoryChooserProps { 

src/components/options/CategorySkipOptionsComponent.tsx

@@ -1,15 +1,17 @@
 import * as React from "react";
 
-import Config from "../config"
-import * as CompileConfig from "../../config.json";
-import { Category, CategorySkipOption } from "../types";
+import Config from "../../config"
+import * as CompileConfig from "../../../config.json";
+import { Category, CategorySkipOption } from "../../types";
 
-import { getCategorySuffix } from "../utils/categoryUtils";
+import { getCategorySuffix } from "../../utils/categoryUtils";
+import ToggleOptionComponent from "./ToggleOptionComponent";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
     defaultColor?: string;
     defaultPreviewColor?: string;
+    children?: React.ReactNode;
 }
 
 export interface CategorySkipOptionsState {
@@ -17,7 +19,14 @@ export interface CategorySkipOptionsState {
     previewColor: string;
 }
 
+export interface ToggleOption {
+    configKey: string;
+    label: string;
+    dontDisable?: boolean;
+}
+
 class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
+    setBarColorTimeout: NodeJS.Timeout;
 
     constructor(props: CategorySkipOptionsProps) {
         super(props);
@@ -25,8 +34,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         // 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,
-        }
+            previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category]?.color
+        };
     }
 
     render(): React.ReactElement {
@@ -53,7 +62,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         return (
             <>
                 <tr id={this.props.category + "OptionsRow"}
-                    className="categoryTableElement">
+                    className={`categoryTableElement`} >
                     <td id={this.props.category + "OptionName"}
                         className="categoryTableLabel">
                             {chrome.i18n.getMessage("category_" + this.props.category)}
@@ -68,17 +77,19 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                                 {this.getCategorySkipOptions()}
                         </select>
                     </td>
-                    
-                    <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>
 
-                    {this.props.category !== "exclusive_access" &&
+                    {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>
+                    }
+
+                    {!["chapter", "exclusive_access"].includes(this.props.category) &&
                         <td id={this.props.category + "PreviewColorOption"}
                             className="previewColorOption">
                             <input
@@ -92,7 +103,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                 </tr>
 
                 <tr id={this.props.category + "DescriptionRow"}
-                    className="small-description categoryTableDescription">
+                    className={`small-description categoryTableDescription`}>
                         <td
                             colSpan={2}>
                             {chrome.i18n.getMessage("category_" + this.props.category + "_description")}
@@ -102,6 +113,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             </a>
                         </td>
                 </tr>
+                
+                {this.getExtraOptionComponents(this.props.category)}
 
             </>
         );
@@ -110,10 +123,10 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
         let option: CategorySkipOption;
 
-        this.removeCurrentCategorySelection();
-
         switch (event.target.value) {
-            case "disable": 
+            case "disable":
+                Config.config.categorySelections = Config.config.categorySelections.filter(
+                    categorySelection => categorySelection.name !== this.props.category);
                 return;
             case "showOverlay":
                 option = CategorySkipOption.ShowOverlay;
@@ -129,35 +142,25 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                 break;
         }
 
-        Config.config.categorySelections.push({
-            name: this.props.category,
-            option: option
-        });
-
-        // Forces the Proxy to send this to the chrome storage API
-        Config.config.categorySelections = Config.config.categorySelections;
-    }
-
-    /** Removes this category from the config list of category selections */
-    removeCurrentCategorySelection(): void {
-        // Remove it if it exists
-        for (let i = 0; i < Config.config.categorySelections.length; i++) {
-            if (Config.config.categorySelections[i].name === this.props.category) {
-                Config.config.categorySelections.splice(i, 1);
-
-                // Forces the Proxy to send this to the chrome storage API
-                Config.config.categorySelections = Config.config.categorySelections;
-
-                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 === "exclusive_access") optionNames = ["disable", "showOverlay"];
+        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(
@@ -172,6 +175,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     }
 
     setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean): void {
+        clearTimeout(this.setBarColorTimeout);
+
         if (preview) {
             this.setState({
                 previewColor: event.currentTarget.value
@@ -188,7 +193,50 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         }
 
         // Make listener get called
-        Config.config.barTypes = Config.config.barTypes;
+        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
+                }];
+            case "music_offtopic":
+                return [{
+                    configKey: "autoSkipOnMusicVideos",
+                    label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
+                }];
+            default:
+                return [];
+        }
     }
 }
 

src/components/options/KeybindComponent.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-import Config from "../config";
-import { Keybind } from "../types";
+import { createRoot, Root } from 'react-dom/client';
+import Config from "../../config";
 import KeybindDialogComponent from "./KeybindDialogComponent";
-import { keybindEquals, keybindToString, formatKey } from "../utils/configUtils";
+import { formatKey, Keybind, keybindEquals, keybindToString } from "@ajayyy/maze-utils/lib/config";
 
 export interface KeybindProps { 
     option: string;
@@ -14,6 +13,7 @@ export interface KeybindState {
 }
 
 let dialog;
+let root: Root;
 
 class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
     constructor(props: KeybindProps) {
@@ -56,11 +56,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
         dialog = parent.document.createElement("div");
         dialog.id = "keybind-dialog";
         parent.document.body.prepend(dialog);
-        ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
+        root = createRoot(dialog);
+        root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />);
     }
 
     closeEditDialog(updateWith: Keybind): void {
-        ReactDOM.unmountComponentAtNode(dialog);
+        root.unmount();
         dialog.remove();
         if (updateWith != null)
             this.setState({keybind: updateWith});

src/components/options/KeybindDialogComponent.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { ChangeEvent } from "react";
-import Config from "../config";
-import { Keybind } from "../types";
-import { keybindEquals, formatKey } from "../utils/configUtils";
+import Config from "../../config";
+import { Keybind, formatKey, keybindEquals } from "@ajayyy/maze-utils/lib/config";
 
 export interface KeybindDialogProps { 
     option: string;
@@ -124,7 +123,7 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
         let youtubeShortcuts: Keybind[];
         if (/[a-zA-Z0-9,.+\-\][:]/.test(this.state.key.key)) {
             youtubeShortcuts = [{key: "k"}, {key: "j"}, {key: "l"}, {key: "p", shift: true}, {key: "n", shift: true}, {key: ","}, {key: "."}, {key: ",", shift: true}, {key: ".", shift: true},
-                {key: "ArrowRight"}, {key: "ArrowLeft"}, {key: "ArrowUp"}, {key: "ArrowDown"}, {key: "ArrowRight", ctrl: true}, {key: "ArrowLeft", ctrl: true}, {key: "c"}, {key: "o"},
+                {key: "ArrowRight"}, {key: "ArrowLeft"}, {key: "ArrowUp"}, {key: "ArrowDown"}, {key: "c"}, {key: "o"},
                 {key: "w"}, {key: "+"}, {key: "-"}, {key: "f"}, {key: "t"}, {key: "i"}, {key: "m"}, {key: "a"}, {key: "s"}, {key: "d"}, {key: "Home"}, {key: "End"},
                 {key: "0"}, {key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}, {key: "]"}, {key: "["}];
         } else {

src/components/options/ToggleOptionComponent.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+
+import Config from "../../config";
+
+export interface ToggleOptionProps { 
+    configKey: string;
+    label: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}
+
+export interface ToggleOptionState {
+    enabled: boolean;
+}
+
+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>
+            </div>
+        );
+    }
+
+    clicked(event: React.ChangeEvent<HTMLInputElement>): void {
+        Config.config[this.props.configKey] = event.target.checked;
+
+        this.setState({
+            enabled: event.target.checked
+        });
+    }
+
+}
+
+export default ToggleOptionComponent;

src/components/options/UnsubmittedVideoListComponent.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+
+import Config from "../../config";
+import UnsubmittedVideoListItem from "./UnsubmittedVideoListItem";
+
+export interface UnsubmittedVideoListProps {
+
+}
+
+export interface UnsubmittedVideoListState {
+
+}
+
+class UnsubmittedVideoListComponent extends React.Component<UnsubmittedVideoListProps, UnsubmittedVideoListState> {
+
+    constructor(props: UnsubmittedVideoListProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+
+        };
+    }
+
+    render(): React.ReactElement {
+        // Render nothing if there are no unsubmitted segments
+        if (Object.keys(Config.config.unsubmittedSegments).length == 0)
+            return <></>;
+
+        return (
+            <table id="unsubmittedVideosList"
+                className="categoryChooserTable"
+                style={{marginTop: "10px"}} >
+                <tbody>
+                    {/* Headers */}
+                    <tr id="UnsubmittedVideosListHeader"
+                            className="categoryTableElement categoryTableHeader">
+                        <th id="UnsubmittedVideoID">
+                            {chrome.i18n.getMessage("videoID")}
+                        </th>
+
+                        <th id="UnsubmittedSegmentCount">
+                            {chrome.i18n.getMessage("segmentCount")}
+                        </th>
+
+                        <th id="UnsubmittedVideoActions">
+                            {chrome.i18n.getMessage("actions")}
+                        </th>
+
+                    </tr>
+
+                    {this.getUnsubmittedVideos()}
+                </tbody>
+            </table>
+        );
+    }
+
+    getUnsubmittedVideos(): JSX.Element[] {
+        const elements: JSX.Element[] = [];
+
+        for (const videoID of Object.keys(Config.config.unsubmittedSegments)) {
+            elements.push(
+                <UnsubmittedVideoListItem videoID={videoID} key={videoID}>
+                </UnsubmittedVideoListItem>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default UnsubmittedVideoListComponent;

src/components/options/UnsubmittedVideoListItem.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+import Config from "../../config";
+import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
+
+export interface UnsubmittedVideosListItemProps {
+    videoID: string;
+    children?: React.ReactNode;
+}
+
+export interface UnsubmittedVideosListItemState {
+}
+
+class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItemProps, UnsubmittedVideosListItemState> {
+
+    constructor(props: UnsubmittedVideosListItemProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+
+        };
+    }
+
+    render(): React.ReactElement {
+        const segmentCount = Config.config.unsubmittedSegments[this.props.videoID]?.length ?? 0;
+
+        return (
+            <>
+                <tr id={this.props.videoID + "UnsubmittedSegmentsRow"}
+                    className="categoryTableElement">
+                    <td id={this.props.videoID + "UnsubmittedVideoID"}
+                        className="categoryTableLabel">
+                        <a href={`https://youtu.be/${this.props.videoID}`}
+                           target="_blank" rel="noreferrer">
+                            {this.props.videoID}
+                        </a>
+                    </td>
+
+                    <td id={this.props.videoID + "UnsubmittedSegmentCount"}>
+                        {segmentCount}
+                    </td>
+
+                    <td id={this.props.videoID + "UnsubmittedVideoActions"}>
+                        <div id={this.props.videoID + "ExportSegmentsAction"}
+                             className="option-button inline low-profile"
+                             onClick={this.exportSegments.bind(this)}>
+                            {chrome.i18n.getMessage("exportSegments")}
+                        </div>
+                        {" "}
+                        <div id={this.props.videoID + "ExportSegmentsAsURLAction"}
+                             className="option-button inline low-profile"
+                             onClick={this.exportSegmentsAsURL.bind(this)}>
+                            {chrome.i18n.getMessage("exportSegmentsAsURL")}
+                        </div>
+                        {" "}
+                        <div id={this.props.videoID + "ClearSegmentsAction"}
+                             className="option-button inline low-profile"
+                             onClick={this.clearSegments.bind(this)}>
+                            {chrome.i18n.getMessage("clearTimes")}
+                        </div>
+                    </td>
+
+                </tr>
+
+            </>
+        );
+    }
+
+    clearSegments(): void {
+        if (confirm(chrome.i18n.getMessage("clearThis"))) {
+            delete Config.config.unsubmittedSegments[this.props.videoID];
+            Config.forceSyncUpdate("unsubmittedSegments");
+        }
+    }
+
+    exportSegments(): void {
+        this.copyToClipboard(exportTimes(Config.config.unsubmittedSegments[this.props.videoID]));
+    }
+
+    exportSegmentsAsURL(): void {
+        this.copyToClipboard(`https://youtube.com/watch?v=${this.props.videoID}${exportTimesAsHashParam(Config.config.unsubmittedSegments[this.props.videoID])}`)
+    }
+
+    copyToClipboard(text: string): void {
+        navigator.clipboard.writeText(text)
+            .then(() => {
+                alert(chrome.i18n.getMessage("CopiedExclamation"));
+            })
+            .catch(() => {
+                alert(chrome.i18n.getMessage("copyDebugInformationFailed"));
+            });
+    }
+}
+
+export default UnsubmittedVideoListItem;

src/components/options/UnsubmittedVideosComponent.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import Config from "../../config";
+import UnsubmittedVideoListComponent from "./UnsubmittedVideoListComponent";
+
+export interface UnsubmittedVideosProps {
+
+}
+
+export interface UnsubmittedVideosState {
+    tableVisible: boolean;
+}
+
+class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps, UnsubmittedVideosState> {
+
+    constructor(props: UnsubmittedVideosProps) {
+        super(props);
+
+        this.state = {
+            tableVisible: false,
+        };
+    }
+
+    render(): React.ReactElement {
+        const videoCount = Object.keys(Config.config.unsubmittedSegments).length;
+        const segmentCount = Object.values(Config.config.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc + vid.length, 0);
+
+        return <>
+            <div style={{marginBottom: "10px"}}>
+                {segmentCount == 0 ?
+                    chrome.i18n.getMessage("unsubmittedSegmentCountsZero") :
+                    chrome.i18n.getMessage("unsubmittedSegmentCounts")
+                        .replace("{0}", `${segmentCount} ${chrome.i18n.getMessage("unsubmittedSegments" + (segmentCount == 1 ? "Singular" : "Plural"))}`)
+                        .replace("{1}", `${videoCount} ${chrome.i18n.getMessage("videos" + (videoCount == 1 ? "Singular" : "Plural"))}`)
+                }
+            </div>
+
+            {videoCount > 0 && <div className="option-button inline" onClick={() => this.setState({tableVisible: !this.state.tableVisible})}>
+                {chrome.i18n.getMessage(this.state.tableVisible ? "hideUnsubmittedSegments" : "showUnsubmittedSegments")}
+            </div>}
+            {" "}
+            <div className="option-button inline" onClick={this.clearAllSegments}>
+                {chrome.i18n.getMessage("clearUnsubmittedSegments")}
+            </div>
+
+            {this.state.tableVisible && <UnsubmittedVideoListComponent/>}
+        </>;
+    }
+
+    clearAllSegments(): void {
+        if (confirm(chrome.i18n.getMessage("clearUnsubmittedSegmentsConfirm")))
+            Config.config.unsubmittedSegments = {};
+    }
+}
+
+export default UnsubmittedVideosComponent;

src/config.ts

@@ -1,436 +1,443 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
-import { keybindEquals } from "./utils/configUtils";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
+import { Keybind, ProtoConfig, keybindEquals } from "@ajayyy/maze-utils/lib/config";
+import { HashedValue } from "@ajayyy/maze-utils/lib/hash";
+
+export interface Permission {
+    canSubmit: boolean;
+}
 
 interface SBConfig {
-    userID: string,
-    isVip: boolean,
-    lastIsVipUpdate: number,
+    userID: string;
+    isVip: boolean;
+    permissions: Record<Category, Permission>;
     /* Contains unsubmitted segments that the user has created. */
-    unsubmittedSegments: Record<string, SponsorTime[]>,
-    defaultCategory: Category,
-    whitelistedChannels: string[],
-    forceChannelCheck: boolean,
-    minutesSaved: number,
-    skipCount: number,
-    sponsorTimesContributed: number,
-    submissionCountSinceCategories: number, // New count used to show the "Read The Guidelines!!" message
-    showTimeWithSkips: boolean,
-    disableSkipping: boolean,
-    muteSegments: boolean,
-    fullVideoSegments: boolean,
-    trackViewCount: boolean,
-    trackViewCountInPrivate: boolean,
-    trackDownvotes: boolean,
-    dontShowNotice: boolean,
-    noticeVisibilityMode: NoticeVisbilityMode,
-    hideVideoPlayerControls: boolean,
-    hideInfoButtonPlayerControls: boolean,
-    hideDeleteButtonPlayerControls: boolean,
-    hideUploadButtonPlayerControls: boolean,
-    hideSkipButtonPlayerControls: boolean,
-    hideDiscordLaunches: number,
-    hideDiscordLink: boolean,
-    invidiousInstances: string[],
-    supportInvidious: boolean,
-    serverAddress: string,
-    minDuration: number,
-    skipNoticeDuration: number,
-    audioNotificationOnSkip: boolean,
-    checkForUnlistedVideos: boolean,
-    testingServer: boolean,
-    refetchWhenNotFound: boolean,
-    ytInfoPermissionGranted: boolean,
-    allowExpirements: boolean,
-    showDonationLink: boolean,
-    showPopupDonationCount: number,
-    donateClicked: number,
-    autoHideInfoButton: boolean,
-    autoSkipOnMusicVideos: boolean,
+    unsubmittedSegments: Record<string, SponsorTime[]>;
+    defaultCategory: Category;
+    renderSegmentsAsChapters: boolean;
+    whitelistedChannels: string[];
+    forceChannelCheck: boolean;
+    minutesSaved: number;
+    skipCount: number;
+    sponsorTimesContributed: number;
+    submissionCountSinceCategories: number; // New count used to show the "Read The Guidelines!!" message
+    showTimeWithSkips: boolean;
+    disableSkipping: boolean;
+    muteSegments: boolean;
+    fullVideoSegments: boolean;
+    fullVideoLabelsOnThumbnails: boolean;
+    manualSkipOnFullVideo: boolean;
+    trackViewCount: boolean;
+    trackViewCountInPrivate: boolean;
+    trackDownvotes: boolean;
+    dontShowNotice: boolean;
+    noticeVisibilityMode: NoticeVisbilityMode;
+    hideVideoPlayerControls: boolean;
+    hideInfoButtonPlayerControls: boolean;
+    hideDeleteButtonPlayerControls: boolean;
+    hideUploadButtonPlayerControls: boolean;
+    hideSkipButtonPlayerControls: boolean;
+    hideDiscordLaunches: number;
+    hideDiscordLink: boolean;
+    invidiousInstances: string[];
+    supportInvidious: boolean;
+    serverAddress: string;
+    minDuration: number;
+    skipNoticeDuration: number;
+    audioNotificationOnSkip: boolean;
+    checkForUnlistedVideos: boolean;
+    testingServer: boolean;
+    refetchWhenNotFound: boolean;
+    ytInfoPermissionGranted: boolean;
+    allowExpirements: boolean;
+    showDonationLink: boolean;
+    showPopupDonationCount: number;
+    showUpsells: boolean;
+    donateClicked: number;
+    autoHideInfoButton: boolean;
+    autoSkipOnMusicVideos: boolean;
     colorPalette: {
-        red: string,
-        white: string,
-        locked: string
-    },
-    scrollToEditTimeUpdate: boolean,
-    categoryPillUpdate: boolean,
-    darkMode: boolean,
+        red: string;
+        white: string;
+        locked: string;
+    };
+    scrollToEditTimeUpdate: boolean;
+    categoryPillUpdate: boolean;
+    showChapterInfoMessage: boolean;
+    darkMode: boolean;
+    showCategoryGuidelines: boolean;
+    showCategoryWithoutPermission: boolean;
+    showSegmentNameInChapterBar: boolean;
+    useVirtualTime: boolean;
+    showSegmentFailedToFetchWarning: boolean;
+    allowScrollingToEdit: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
         [key in Category]: {
-            lastColor: string,
-            textColor: string
+            lastColor: string;
+            textColor: string;
         }
-    }
+    };
 
-    skipKeybind: Keybind,
-    startSponsorKeybind: Keybind,
-    submitKeybind: Keybind,
+    skipKeybind: Keybind;
+    startSponsorKeybind: Keybind;
+    submitKeybind: Keybind;
+    nextChapterKeybind: Keybind;
+    previousChapterKeybind: Keybind;
 
     // What categories should be skipped
-    categorySelections: CategorySelection[],
+    categorySelections: CategorySelection[];
+
+    payments: {
+        licenseKey: string;
+        lastCheck: number;
+        lastFreeCheck: number;
+        freeAccess: boolean;
+        chaptersAllowed: boolean;
+    };
 
     // Preview bar
     barTypes: {
-        "preview-chooseACategory": PreviewBarOption,
-        "sponsor": PreviewBarOption,
-        "preview-sponsor": PreviewBarOption,
-        "selfpromo": PreviewBarOption,
-        "preview-selfpromo": PreviewBarOption,
-        "exclusive_access": PreviewBarOption,
-        "interaction": PreviewBarOption,
-        "preview-interaction": PreviewBarOption,
-        "intro": PreviewBarOption,
-        "preview-intro": PreviewBarOption,
-        "outro": PreviewBarOption,
-        "preview-outro": PreviewBarOption,
-        "preview": PreviewBarOption,
-        "preview-preview": PreviewBarOption,
-        "music_offtopic": PreviewBarOption,
-        "preview-music_offtopic": PreviewBarOption,
-        "poi_highlight": PreviewBarOption,
-        "preview-poi_highlight": PreviewBarOption,
-        "filler": PreviewBarOption,
-        "preview-filler": PreviewBarOption,
-    }
+        "preview-chooseACategory": PreviewBarOption;
+        "sponsor": PreviewBarOption;
+        "preview-sponsor": PreviewBarOption;
+        "selfpromo": PreviewBarOption;
+        "preview-selfpromo": PreviewBarOption;
+        "exclusive_access": PreviewBarOption;
+        "interaction": PreviewBarOption;
+        "preview-interaction": PreviewBarOption;
+        "intro": PreviewBarOption;
+        "preview-intro": PreviewBarOption;
+        "outro": PreviewBarOption;
+        "preview-outro": PreviewBarOption;
+        "preview": PreviewBarOption;
+        "preview-preview": PreviewBarOption;
+        "music_offtopic": PreviewBarOption;
+        "preview-music_offtopic": PreviewBarOption;
+        "poi_highlight": PreviewBarOption;
+        "preview-poi_highlight": PreviewBarOption;
+        "filler": PreviewBarOption;
+        "preview-filler": PreviewBarOption;
+    };
 }
 
-export type VideoDownvotes = { segments: { uuid: HashedValue, hidden: SponsorHideType }[] , lastAccess: number };
+export type VideoDownvotes = { segments: { uuid: HashedValue; hidden: SponsorHideType }[]; lastAccess: number };
 
 interface SBStorage {
     /* VideoID prefixes to UUID prefixes */
-    downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>,
+    downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
+    navigationApiAvailable: boolean;
 }
 
-export interface SBObject {
-    configSyncListeners: Array<(changes: StorageChangesObject) => unknown>;
-    syncDefaults: SBConfig;
-    localDefaults: SBStorage;
-    cachedSyncConfig: SBConfig;
-    cachedLocalStorage: SBStorage;
-    config: SBConfig;
-    local: SBStorage;
-    forceSyncUpdate(prop: string): void;
-    forceLocalUpdate(prop: string): void;
-}
-
-const Config: SBObject = {
-    /**
-     * Callback function when an option is updated
-     */
-    configSyncListeners: [],
-    syncDefaults: {
-        userID: null,
-        isVip: false,
-        lastIsVipUpdate: 0,
-        unsubmittedSegments: {},
-        defaultCategory: "chooseACategory" as Category,
-        whitelistedChannels: [],
-        forceChannelCheck: false,
-        minutesSaved: 0,
-        skipCount: 0,
-        sponsorTimesContributed: 0,
-        submissionCountSinceCategories: 0,
-        showTimeWithSkips: true,
-        disableSkipping: false,
-        muteSegments: true,
-        fullVideoSegments: true,
-        trackViewCount: true,
-        trackViewCountInPrivate: true,
-        trackDownvotes: true,
-        dontShowNotice: false,
-        noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
-        hideVideoPlayerControls: false,
-        hideInfoButtonPlayerControls: false,
-        hideDeleteButtonPlayerControls: false,
-        hideUploadButtonPlayerControls: false,
-        hideSkipButtonPlayerControls: false,
-        hideDiscordLaunches: 0,
-        hideDiscordLink: false,
-        invidiousInstances: ["invidious.snopyta.org"], // leave as default
-        supportInvidious: false,
-        serverAddress: CompileConfig.serverAddress,
-        minDuration: 0,
-        skipNoticeDuration: 4,
-        audioNotificationOnSkip: false,
-        checkForUnlistedVideos: false,
-        testingServer: false,
-        refetchWhenNotFound: true,
-        ytInfoPermissionGranted: false,
-        allowExpirements: true,
-        showDonationLink: true,
-        showPopupDonationCount: 0,
-        donateClicked: 0,
-        autoHideInfoButton: true,
-        autoSkipOnMusicVideos: false,
-        scrollToEditTimeUpdate: false, // false means the tooltip will be shown
-        categoryPillUpdate: false,
-        darkMode: true,
-
-        categoryPillColors: {},
-
-        /**
-         * Default keybinds should not set "code" as that's gonna be different based on the user's locale. They should also only use EITHER ctrl OR alt modifiers (or none).
-         * Using ctrl+alt, or shift may produce a different character that we will not be able to recognize in different locales.
-         * The exception for shift is letters, where it only capitalizes. So shift+A is fine, but shift+1 isn't.
-         * Don't forget to add the new keybind to the checks in "KeybindDialogComponent.isKeybindAvailable()" and in "migrateOldFormats()"!
-         *      TODO: Find a way to skip having to update these checks. Maybe storing keybinds in a Map?
-         */
-        skipKeybind: {key: "Enter"},
-        startSponsorKeybind: {key: ";"},
-        submitKeybind: {key: "'"},
-
-        categorySelections: [{
-            name: "sponsor" as Category,
-            option: CategorySkipOption.AutoSkip
-        }, {
-            name: "interaction" as Category,
-            option: CategorySkipOption.AutoSkip
-        }, {
-            name: "selfpromo" as Category,
-            option: CategorySkipOption.AutoSkip
-        }],
-
-        colorPalette: {
-            red: "#780303",
-            white: "#ffffff",
-            locked: "#ffc83d"
-        },
-
-        // Preview bar
-        barTypes: {
-            "preview-chooseACategory": {
-                color: "#ffffff",
-                opacity: "0.7"
-            },
-            "sponsor": {
-                color: "#807EFB",
-                opacity: "0.7"
-            },
-            "preview-sponsor": {
-                color: "#007800",
-                opacity: "0.7"
-            },
-            "selfpromo": {
-                color: "#ffff00",
-                opacity: "0.7"
-            },
-            "preview-selfpromo": {
-                color: "#bfbf35",
-                opacity: "0.7"
-            },
-            "exclusive_access": {
-                color: "#008a5c",
-                opacity: "0.7"
-            },
-            "interaction": {
-                color: "#cc00ff",
-                opacity: "0.7"
-            },
-            "preview-interaction": {
-                color: "#6c0087",
-                opacity: "0.7"
-            },
-            "intro": {
-                color: "#00ffff",
-                opacity: "0.7"
-            },
-            "preview-intro": {
-                color: "#008080",
-                opacity: "0.7"
-            },
-            "outro": {
-                color: "#0202ed",
-                opacity: "0.7"
-            },
-            "preview-outro": {
-                color: "#000070",
-                opacity: "0.7"
-            },
-            "preview": {
-                color: "#008fd6",
-                opacity: "0.7"
-            },
-            "preview-preview": {
-                color: "#005799",
-                opacity: "0.7"
-            },
-            "music_offtopic": {
-                color: "#ff9900",
-                opacity: "0.7"
-            },
-            "preview-music_offtopic": {
-                color: "#a6634a",
-                opacity: "0.7"
-            },
-            "poi_highlight": {
-                color: "#ff1684",
-                opacity: "0.7"
-            },
-            "preview-poi_highlight": {
-                color: "#9b044c",
-                opacity: "0.7"
-            },
-            "filler": {
-                color: "#7300FF",
-                opacity: "0.9"
-            },
-            "preview-filler": {
-                color: "#2E0066",
-                opacity: "0.7"
-            }
-        }
-    },
-    localDefaults: {
-        downvotedSegments: {}
-    },
-    cachedSyncConfig: null,
-    cachedLocalStorage: null,
-    config: null,
-    local: null,
-    forceSyncUpdate,
-    forceLocalUpdate
-};
-
-// Function setup
-
-function configProxy(): { sync: SBConfig, local: SBStorage } {
-    chrome.storage.onChanged.addListener((changes: {[key: string]: chrome.storage.StorageChange}, areaName) => {
-        if (areaName === "sync") {
-            for (const key in changes) {
-                Config.cachedSyncConfig[key] = changes[key].newValue;
-            }
-    
-            for (const callback of Config.configSyncListeners) {
-                callback(changes);
-            }
-        } else if (areaName === "local") {
-            for (const key in changes) {
-                Config.cachedLocalStorage[key] = changes[key].newValue;
-            }
-        }
-    });
-	
-    const syncHandler: ProxyHandler<SBConfig> = {
-        set<K extends keyof SBConfig>(obj: SBConfig, prop: K, value: SBConfig[K]) {
-            Config.cachedSyncConfig[prop] = value;
-
-            chrome.storage.sync.set({
-                [prop]: value
-            });
-
-            return true;
-        },
-
-        get<K extends keyof SBConfig>(obj: SBConfig, prop: K): SBConfig[K] {
-            const data = Config.cachedSyncConfig[prop];
-
-            return obj[prop] || data;
-        },
-	
-        deleteProperty(obj: SBConfig, prop: keyof SBConfig) {
-            chrome.storage.sync.remove(<string> prop);
-            
-            return true;
-        }
-
-    };
-
-    const localHandler: ProxyHandler<SBStorage> = {
-        set<K extends keyof SBStorage>(obj: SBStorage, prop: K, value: SBStorage[K]) {
-            Config.cachedLocalStorage[prop] = value;
-
-            chrome.storage.local.set({
-                [prop]: value
-            });
-
-            return true;
-        },
-
-        get<K extends keyof SBStorage>(obj: SBStorage, prop: K): SBStorage[K] {
-            const data = Config.cachedLocalStorage[prop];
-
-            return obj[prop] || data;
-        },
-	
-        deleteProperty(obj: SBStorage, prop: keyof SBStorage) {
-            chrome.storage.local.remove(<string> prop);
-            
-            return true;
-        }
-
-    };
-
-    return {
-        sync: new Proxy<SBConfig>({ handler: syncHandler } as unknown as SBConfig, syncHandler),
-        local: new Proxy<SBStorage>({ handler: localHandler } as unknown as SBStorage, localHandler)
-    };
-}
-
-function forceSyncUpdate(prop: string): void {
-    chrome.storage.sync.set({
-        [prop]: Config.cachedSyncConfig[prop]
-    });
-}
-
-function forceLocalUpdate(prop: string): void {
-    chrome.storage.local.set({
-        [prop]: Config.cachedLocalStorage[prop]
-    });
-}
-
-async function fetchConfig(): Promise<void> { 
-    await Promise.all([new Promise<void>((resolve) => {
-        chrome.storage.sync.get(null, function(items) {
-            Config.cachedSyncConfig = <SBConfig> <unknown> items;
-            resolve();
+class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
+    resetToDefault() {
+        chrome.storage.sync.set({
+            ...this.syncDefaults,
+            userID: this.config.userID,
+            minutesSaved: this.config.minutesSaved,
+            skipCount: this.config.skipCount,
+            sponsorTimesContributed: this.config.sponsorTimesContributed
         });
-    }), new Promise<void>((resolve) => {
-        chrome.storage.local.get(null, function(items) {
-            Config.cachedLocalStorage = <SBStorage> <unknown> items; 
-            resolve();
-        });
-    })]);
+    }
 }
 
 function migrateOldSyncFormats(config: SBConfig) {
-    //
-}
+    if (!config["chapterCategoryAdded"]) {
+        config["chapterCategoryAdded"] = true;
 
-async function setupConfig() {
-    await fetchConfig();
-    addDefaults();
-    const config = configProxy();
-    migrateOldSyncFormats(config.sync);
+        if (!config.categorySelections.some((s) => s.name === "chapter")) {
+            config.categorySelections.push({
+                name: "chapter" as Category,
+                option: CategorySkipOption.ShowOverlay
+            });
+    
+            config.categorySelections = config.categorySelections;
+        }
+    }
 
-    Config.config = config.sync;
-    Config.local = config.local;
-}
+    if (config["segmentTimes"]) {
+        const unsubmittedSegments = {};
+        for (const item of config["segmentTimes"]) {
+            unsubmittedSegments[item[0]] = item[1];
+        }
 
-// Add defaults
-function addDefaults() {
-    for (const key in Config.syncDefaults) {
-        if(!Object.prototype.hasOwnProperty.call(Config.cachedSyncConfig, key)) {
-            Config.cachedSyncConfig[key] = Config.syncDefaults[key];
-        } else if (key === "barTypes") {
-            for (const key2 in Config.syncDefaults[key]) {
-                if(!Object.prototype.hasOwnProperty.call(Config.cachedSyncConfig[key], key2)) {
-                    Config.cachedSyncConfig[key][key2] = Config.syncDefaults[key][key2];
-                }
+        chrome.storage.sync.remove("segmentTimes", () => config.unsubmittedSegments = unsubmittedSegments);
+    }
+
+    if (config["exclusive_accessCategoryAdded"] !== undefined) {
+        chrome.storage.sync.remove("exclusive_accessCategoryAdded");
+    }
+
+    if (config["fillerUpdate"] !== undefined) {
+        chrome.storage.sync.remove("fillerUpdate");
+    }
+    if (config["highlightCategoryAdded"] !== undefined) {
+        chrome.storage.sync.remove("highlightCategoryAdded");
+    }
+    if (config["highlightCategoryUpdate"] !== undefined) {
+        chrome.storage.sync.remove("highlightCategoryUpdate");
+    }
+
+    if (config["askAboutUnlistedVideos"]) {
+        chrome.storage.sync.remove("askAboutUnlistedVideos");
+    }
+
+    if (!config["autoSkipOnMusicVideosUpdate"]) {
+        config["autoSkipOnMusicVideosUpdate"] = true;
+        for (const selection of config.categorySelections) {
+            if (selection.name === "music_offtopic"
+                && selection.option === CategorySkipOption.AutoSkip) {
+
+                config.autoSkipOnMusicVideos = true;
+                break;
             }
         }
     }
 
-    for (const key in Config.localDefaults) {
-        if(!Object.prototype.hasOwnProperty.call(Config.cachedLocalStorage, key)) {
-            Config.cachedLocalStorage[key] = Config.localDefaults[key];
+    if (config["disableAutoSkip"]) {
+        for (const selection of config.categorySelections) {
+            if (selection.name === "sponsor") {
+                selection.option = CategorySkipOption.ManualSkip;
+
+                chrome.storage.sync.remove("disableAutoSkip");
+            }
         }
     }
+
+    if (typeof config["skipKeybind"] == "string") {
+        config["skipKeybind"] = { key: config["skipKeybind"] };
+    }
+
+    if (typeof config["startSponsorKeybind"] == "string") {
+        config["startSponsorKeybind"] = { key: config["startSponsorKeybind"] };
+    }
+
+    if (typeof config["submitKeybind"] == "string") {
+        config["submitKeybind"] = { key: config["submitKeybind"] };
+    }
+
+    // Unbind key if it matches a previous one set by the user (should be ordered oldest to newest)
+    const keybinds = ["skipKeybind", "startSponsorKeybind", "submitKeybind"];
+    for (let i = keybinds.length - 1; i >= 0; i--) {
+        for (let j = 0; j < keybinds.length; j++) {
+            if (i == j)
+                continue;
+            if (keybindEquals(config[keybinds[i]], config[keybinds[j]]))
+                config[keybinds[i]] = null;
+        }
+    }
+
+    // Remove some old unused options
+    if (config["sponsorVideoID"] !== undefined) {
+        chrome.storage.sync.remove("sponsorVideoID");
+    }
+    if (config["previousVideoID"] !== undefined) {
+        chrome.storage.sync.remove("previousVideoID");
+    }
+
+    // populate invidiousInstances with new instances if 3p support is **DISABLED**
+    if (!config["supportInvidious"] && config["invidiousInstances"].length < invidiousList.length) {
+        config["invidiousInstances"] = [...new Set([...invidiousList, ...config["invidiousInstances"]])];
+    }
+
+    if (config["lastIsVipUpdate"]) {
+        chrome.storage.sync.remove("lastIsVipUpdate");
+    }
 }
 
-// Sync config
-setupConfig();
+const syncDefaults = {
+    userID: null,
+    isVip: false,
+    permissions: {},
+    unsubmittedSegments: {},
+    defaultCategory: "chooseACategory" as Category,
+    renderSegmentsAsChapters: false,
+    whitelistedChannels: [],
+    forceChannelCheck: false,
+    minutesSaved: 0,
+    skipCount: 0,
+    sponsorTimesContributed: 0,
+    submissionCountSinceCategories: 0,
+    showTimeWithSkips: true,
+    disableSkipping: false,
+    muteSegments: true,
+    fullVideoSegments: true,
+    fullVideoLabelsOnThumbnails: true,
+    manualSkipOnFullVideo: false,
+    trackViewCount: true,
+    trackViewCountInPrivate: true,
+    trackDownvotes: true,
+    dontShowNotice: false,
+    noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
+    hideVideoPlayerControls: false,
+    hideInfoButtonPlayerControls: false,
+    hideDeleteButtonPlayerControls: false,
+    hideUploadButtonPlayerControls: false,
+    hideSkipButtonPlayerControls: false,
+    hideDiscordLaunches: 0,
+    hideDiscordLink: false,
+    invidiousInstances: ["invidious.snopyta.org"], // leave as default
+    supportInvidious: false,
+    serverAddress: CompileConfig.serverAddress,
+    minDuration: 0,
+    skipNoticeDuration: 4,
+    audioNotificationOnSkip: false,
+    checkForUnlistedVideos: false,
+    testingServer: false,
+    refetchWhenNotFound: true,
+    ytInfoPermissionGranted: false,
+    allowExpirements: true,
+    showDonationLink: true,
+    showPopupDonationCount: 0,
+    showUpsells: true,
+    donateClicked: 0,
+    autoHideInfoButton: true,
+    autoSkipOnMusicVideos: false,
+    scrollToEditTimeUpdate: false, // false means the tooltip will be shown
+    categoryPillUpdate: false,
+    showChapterInfoMessage: true,
+    darkMode: true,
+    showCategoryGuidelines: true,
+    showCategoryWithoutPermission: false,
+    showSegmentNameInChapterBar: true,
+    useVirtualTime: true,
+    showSegmentFailedToFetchWarning: true,
+    allowScrollingToEdit: true,
 
-export default Config;
+    categoryPillColors: {},
+
+    /**
+     * Default keybinds should not set "code" as that's gonna be different based on the user's locale. They should also only use EITHER ctrl OR alt modifiers (or none).
+     * Using ctrl+alt, or shift may produce a different character that we will not be able to recognize in different locales.
+     * The exception for shift is letters, where it only capitalizes. So shift+A is fine, but shift+1 isn't.
+     * Don't forget to add the new keybind to the checks in "KeybindDialogComponent.isKeybindAvailable()" and in "migrateOldFormats()"!
+     *      TODO: Find a way to skip having to update these checks. Maybe storing keybinds in a Map?
+     */
+    skipKeybind: { key: "Enter" },
+    startSponsorKeybind: { key: ";" },
+    submitKeybind: { key: "'" },
+    nextChapterKeybind: { key: "ArrowRight", ctrl: true },
+    previousChapterKeybind: { key: "ArrowLeft", ctrl: true },
+
+    categorySelections: [{
+        name: "sponsor" as Category,
+        option: CategorySkipOption.AutoSkip
+    }, {
+        name: "poi_highlight" as Category,
+        option: CategorySkipOption.ManualSkip
+    }, {
+        name: "exclusive_access" as Category,
+        option: CategorySkipOption.ShowOverlay
+    }, {
+        name: "chapter" as Category,
+        option: CategorySkipOption.ShowOverlay
+    }],
+
+    payments: {
+        licenseKey: null,
+        lastCheck: 0,
+        lastFreeCheck: 0,
+        freeAccess: false,
+        chaptersAllowed: false
+    },
+
+    colorPalette: {
+        red: "#780303",
+        white: "#ffffff",
+        locked: "#ffc83d"
+    },
+
+    // Preview bar
+    barTypes: {
+        "preview-chooseACategory": {
+            color: "#ffffff",
+            opacity: "0.7"
+        },
+        "sponsor": {
+            color: "#00d400",
+            opacity: "0.7"
+        },
+        "preview-sponsor": {
+            color: "#007800",
+            opacity: "0.7"
+        },
+        "selfpromo": {
+            color: "#ffff00",
+            opacity: "0.7"
+        },
+        "preview-selfpromo": {
+            color: "#bfbf35",
+            opacity: "0.7"
+        },
+        "exclusive_access": {
+            color: "#008a5c",
+            opacity: "0.7"
+        },
+        "interaction": {
+            color: "#cc00ff",
+            opacity: "0.7"
+        },
+        "preview-interaction": {
+            color: "#6c0087",
+            opacity: "0.7"
+        },
+        "intro": {
+            color: "#00ffff",
+            opacity: "0.7"
+        },
+        "preview-intro": {
+            color: "#008080",
+            opacity: "0.7"
+        },
+        "outro": {
+            color: "#0202ed",
+            opacity: "0.7"
+        },
+        "preview-outro": {
+            color: "#000070",
+            opacity: "0.7"
+        },
+        "preview": {
+            color: "#008fd6",
+            opacity: "0.7"
+        },
+        "preview-preview": {
+            color: "#005799",
+            opacity: "0.7"
+        },
+        "music_offtopic": {
+            color: "#ff9900",
+            opacity: "0.7"
+        },
+        "preview-music_offtopic": {
+            color: "#a6634a",
+            opacity: "0.7"
+        },
+        "poi_highlight": {
+            color: "#ff1684",
+            opacity: "0.7"
+        },
+        "preview-poi_highlight": {
+            color: "#9b044c",
+            opacity: "0.7"
+        },
+        "filler": {
+            color: "#7300FF",
+            opacity: "0.9"
+        },
+        "preview-filler": {
+            color: "#2E0066",
+            opacity: "0.7"
+        }
+    }
+};
+
+const localDefaults = {
+    downvotedSegments: {},
+    navigationApiAvailable: null
+};
+
+const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
+export default Config;

src/document.ts

@@ -0,0 +1,3 @@
+import { init } from "@ajayyy/maze-utils/lib/injected/document";
+
+init();

src/globals.d.ts

@@ -1,6 +1,6 @@
 import { SBObject } from "./config";
 declare global {
-    interface Window { SB: SBObject; }
+    interface Window { SB: SBObject }
     // Remove this once the API becomes stable and types are shipped in @types/chrome
     namespace chrome {
         namespace declarativeContent {

src/help.ts

@@ -1,15 +1,15 @@
+import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
 import Config from "./config";
 import { showDonationLink } from "./utils/configUtils";
 
-import Utils from "./utils";
-const utils = new Utils();
+import { waitFor } from "@ajayyy/maze-utils";
 
 window.addEventListener('DOMContentLoaded', init);
 
 async function init() {
-    utils.localizeHtmlPage();
+    localizeHtmlPage();
 
-    await utils.wait(() => Config.config !== null);
+    await waitFor(() => Config.config !== null);
 
     if (!Config.config.darkMode) {
         document.documentElement.setAttribute("data-theme", "light");

src/js-components/chat.ts

@@ -1,47 +0,0 @@
-import Config from "../config";
-import Utils from "../utils";
-const utils = new Utils();
-
-export interface ChatConfig {
-    displayName: string,
-    composerInitialValue?: string,
-    customDescription?: string
-}
-
-export function openChat(config: ChatConfig): void {
-    const chat = document.createElement("div");
-    chat.classList.add("sbChatNotice");
-    chat.style.zIndex = "2000";
-
-    const iframe= document.createElement("iframe");
-    iframe.src = "https://chat.sponsor.ajay.app/#" + utils.objectToURI("", config, false);
-    chat.appendChild(iframe);
-
-    const closeButton  = document.createElement("img");
-    closeButton.classList.add("sbChatClose");
-    closeButton.src = chrome.runtime.getURL("icons/close.png");
-    closeButton.addEventListener("click", () => {
-        chat.remove();
-        closeButton.remove();
-    });
-    chat.appendChild(closeButton);
-
-    const referenceNode = utils.findReferenceNode();
-    referenceNode.prepend(chat);
-}
-
-export async function openWarningChat(warningMessage: string): Promise<void> {
-    const warningReasonMatch = warningMessage.match(/Warning reason: '(.+)'/);
-    alert(chrome.i18n.getMessage("warningChatInfo") + `\n\n${warningReasonMatch ? ` Warning reason: ${warningReasonMatch[1]}` : ``}`);
-
-    const userNameData = await utils.asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
-    const userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
-    const publicUserID = await utils.getHash(Config.config.userID);
-
-    openChat({
-        displayName: `${userName ? userName : ``}${userName !== publicUserID ? ` | ${publicUserID}` : ``}`,
-        composerInitialValue: `I got a warning and confirm I [REMOVE THIS CAPITAL TEXT TO CONFIRM] reread the guidelines.` +
-                                warningReasonMatch ? ` Warning reason: ${warningReasonMatch[1]}` : ``,
-        customDescription: chrome.i18n.getMessage("warningChatInfo")
-    });
-}

src/js-components/skipButtonControlBar.ts

@@ -1,11 +1,8 @@
 import Config from "../config";
 import { SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
-import { keybindToString } from "../utils/configUtils";
-
-import Utils from "../utils";
 import { AnimationUtils } from "../utils/animationUtils";
-const utils = new Utils();
+import { keybindToString } from "@ajayyy/maze-utils/lib/config";
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
@@ -53,7 +50,7 @@ export class SkipButtonControlBar {
         this.skipIcon.id = "sbSkipIconControlBarImage";
 
         this.textContainer = document.createElement("div");
-        
+
         this.container.appendChild(this.skipIcon);
         this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
@@ -73,7 +70,7 @@ export class SkipButtonControlBar {
     attachToPage(): void {
         const mountingContainer = this.getMountingContainer();
         this.chapterText = document.querySelector(".ytp-chapter-container");
-    
+
         if (mountingContainer && !mountingContainer.contains(this.container)) {
             if (this.onMobileYouTube) {
                 mountingContainer.appendChild(this.container);
@@ -105,6 +102,7 @@ export class SkipButtonControlBar {
         this.enabled = true;
 
         this.refreshText();
+        this.container?.classList?.remove("textDisabled");
         this.textContainer?.classList?.remove("hidden");
         AnimationUtils.disableAutoHideAnimation(this.skipIcon);
 
@@ -137,7 +135,6 @@ export class SkipButtonControlBar {
 
     disable(): void {
         this.container.classList.add("hidden");
-        this.textContainer?.classList?.remove("hidden");
 
         this.chapterText?.classList?.remove("hidden");
         this.getChapterPrefix()?.classList?.remove("hidden");
@@ -145,13 +142,17 @@ export class SkipButtonControlBar {
         this.enabled = false;
     }
 
+    isEnabled(): boolean {
+        return this.enabled;
+    }
+
     toggleSkip(): void {
         this.skip(this.segment);
         this.disableText();
     }
 
     disableText(): void {
-        if (Config.config.hideVideoPlayerControls || Config.config.hideSkipButtonPlayerControls) {
+        if (Config.config.hideSkipButtonPlayerControls) {
             this.disable();
             return;
         }
@@ -172,10 +173,10 @@ export class SkipButtonControlBar {
         const overlay = document.getElementById("player-control-overlay");
 
         if (overlay && this.enabled) {
-            if (overlay?.classList?.contains("pointer-events-off")) {
-                this.hideButton();
-            } else {
+            if (overlay?.classList?.contains("fadein")) {
                 this.showButton();
+            } else {
+                this.hideButton();
             }
         }
     }
@@ -220,4 +221,3 @@ export class SkipButtonControlBar {
         this.container.style.left = this.left + "px";
     }
 }
-

src/messageTypes.ts

@@ -9,14 +9,15 @@ interface BaseMessage {
 }
 
 interface DefaultMessage {
-    message: 
+    message:
         "update"
         | "sponsorStart"
         | "getVideoID"
         | "getChannelID"
         | "isChannelWhitelisted"
         | "submitTimes"
-        | "refreshSegments";
+        | "refreshSegments"
+        | "closePopup";
 }
 
 interface BoolValueMessage {
@@ -29,6 +30,11 @@ interface IsInfoFoundMessage {
     updating: boolean;
 }
 
+interface SkipMessage {
+    message: "unskip" | "reskip";
+    UUID: SegmentUUID;
+}
+
 interface SubmitVoteMessage {
     message: "submitVote";
     type: number;
@@ -41,11 +47,35 @@ interface HideSegmentMessage {
     UUID: SegmentUUID;
 }
 
-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SubmitVoteMessage | HideSegmentMessage);
+interface CopyToClipboardMessage {
+    message: "copyToClipboard";
+    text: string;
+}
+
+interface ImportSegmentsMessage {
+    message: "importSegments";
+    data: string;
+}
+
+interface KeyDownMessage {
+    message: "keydown";
+    key: string;
+    keyCode: number;
+    code: string;
+    which: number;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+}
+
+export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage);
 
 export interface IsInfoFoundMessageResponse {
     found: boolean;
+    status: number;
     sponsorTimes: SponsorTime[];
+    time: number;
     onMobileYouTube: boolean;
 }
 
@@ -53,29 +83,51 @@ interface GetVideoIdResponse {
     videoID: string;
 }
 
-interface GetChannelIDResponse {
+export interface GetChannelIDResponse {
     channelID: string;
 }
 
-interface SponsorStartResponse {
+export interface SponsorStartResponse {
     creatingSegment: boolean;
 }
 
-interface IsChannelWhitelistedResponse {
+export interface IsChannelWhitelistedResponse {
     value: boolean;
 }
 
-export type MessageResponse = 
+export type MessageResponse =
     IsInfoFoundMessageResponse
     | GetVideoIdResponse
     | GetChannelIDResponse
     | SponsorStartResponse
     | IsChannelWhitelistedResponse
-    | Record<string, never>
-    | VoteResponse;
+    | Record<string, never> // empty object response {}
+    | VoteResponse
+    | ImportSegmentsResponse;
 
 export interface VoteResponse {
     successType: number;
     statusCode: number;
     responseText: string;
-}
+}
+
+interface ImportSegmentsResponse {
+    importedSegments: SponsorTime[];
+}
+
+export interface TimeUpdateMessage {
+    message: "time";
+    time: number;
+}
+
+export type InfoUpdatedMessage = IsInfoFoundMessageResponse & {
+    message: "infoUpdated";
+}
+
+export interface VideoChangedPopupMessage {
+    message: "videoChanged";
+    videoID: string;
+    whitelisted: boolean;
+}
+
+export type PopupMessage = TimeUpdateMessage | InfoUpdatedMessage | VideoChangedPopupMessage;

src/options.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from 'react-dom/client';
 
 import Config from "./config";
 import * as CompileConfig from "../config.json";
@@ -10,15 +10,23 @@ window.SB = Config;
 
 import Utils from "./utils";
 import CategoryChooser from "./render/CategoryChooser";
-import KeybindComponent from "./components/KeybindComponent";
+import UnsubmittedVideos from "./render/UnsubmittedVideos";
+import KeybindComponent from "./components/options/KeybindComponent";
 import { showDonationLink } from "./utils/configUtils";
+import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
+import { StorageChangesObject } from "@ajayyy/maze-utils/lib/config";
+import { getHash } from "@ajayyy/maze-utils/lib/hash";
+import { isFirefoxOrSafari } from "@ajayyy/maze-utils";
 const utils = new Utils();
 let embed = false;
 
+const categoryChoosers: CategoryChooser[] = [];
+const unsubmittedVideos: UnsubmittedVideos[] = [];
+
 window.addEventListener('DOMContentLoaded', init);
 
 async function init() {
-    utils.localizeHtmlPage();
+    localizeHtmlPage();
 
     // selected tab
     if (location.hash != "") {
@@ -102,7 +110,7 @@ async function init() {
                 // Add click listener
                 checkbox.addEventListener("click", async () => {
                     // Confirm if required
-                    if (confirmMessage && ((confirmOnTrue && checkbox.checked) || (!confirmOnTrue && !checkbox.checked)) 
+                    if (confirmMessage && ((confirmOnTrue && checkbox.checked) || (!confirmOnTrue && !checkbox.checked))
                             && !confirm(chrome.i18n.getMessage(confirmMessage))){
                         checkbox.checked = !checkbox.checked;
                         return;
@@ -119,7 +127,7 @@ async function init() {
                             if (!checkbox.checked) {
                                 // Enable the notice
                                 Config.config["dontShowNotice"] = false;
-                                
+
                                 const showNoticeSwitch = <HTMLInputElement> document.querySelector("[data-sync='dontShowNotice'] > div > label > input");
                                 showNoticeSwitch.checked = true;
                             }
@@ -161,7 +169,7 @@ async function init() {
             }
             case "text-change": {
                 const textChangeInput = <HTMLInputElement> optionsElements[i].querySelector(".option-text-box");
-                
+
                 const textChangeSetButton = <HTMLElement> optionsElements[i].querySelector(".text-change-set");
 
                 textChangeInput.value = Config.config[option];
@@ -179,7 +187,7 @@ async function init() {
                             }
 
                             // Permission needed on Firefox
-                            if (utils.isFirefox()) {
+                            if (isFirefoxOrSafari()) {
                                 const permissionSuccess = await new Promise((resolve) => {
                                     chrome.permissions.request({
                                         origins: [textChangeInput.value + "/"],
@@ -232,17 +240,28 @@ async function init() {
             }
             case "button-press": {
                 const actionButton = optionsElements[i].querySelector(".trigger-button");
+                const confirmMessage = optionsElements[i].getAttribute("data-confirm-message");
 
-                switch(optionsElements[i].getAttribute("data-sync")) {
-                    case "copyDebugInformation":
-                        actionButton.addEventListener("click", copyDebugOutputToClipboard);
-                        break;
-                }
+                actionButton.addEventListener("click", () => {
+                    if (confirmMessage !== null && !confirm(chrome.i18n.getMessage(confirmMessage))) {
+                        return;
+                    }
+                    switch (optionsElements[i].getAttribute("data-sync")) {
+                        case "copyDebugInformation":
+                            copyDebugOutputToClipboard();
+                            break;
+                        case "resetToDefault":
+                            Config.resetToDefault();
+                            window.location.reload();
+                            break;
+                    }
+                });
 
                 break;
             }
             case "keybind-change": {
-                ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
+                const root = createRoot(optionsElements[i].querySelector("div"));
+                root.render(React.createElement(KeybindComponent, {option: option}));
                 break;
             }
             case "display": {
@@ -279,7 +298,10 @@ async function init() {
                 break;
             }
             case "react-CategoryChooserComponent":
-                new CategoryChooser(optionsElements[i]);
+                categoryChoosers.push(new CategoryChooser(optionsElements[i]));
+                break;
+            case "react-UnsubmittedVideosComponent":
+                unsubmittedVideos.push(new UnsubmittedVideos(optionsElements[i]));
                 break;
         }
     }
@@ -327,8 +349,8 @@ function createStickyHeader() {
 
 /**
  * Handle special cases where an option shouldn't show
- * 
- * @param {String} element 
+ *
+ * @param {String} element
  */
 async function shouldHideOption(element: Element): Promise<boolean> {
     return (element.getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
@@ -337,10 +359,8 @@ async function shouldHideOption(element: Element): Promise<boolean> {
 
 /**
  * Called when the config is updated
- * 
- * @param {String} element 
  */
-function optionsConfigUpdateListener() {
+function optionsConfigUpdateListener(changes: StorageChangesObject) {
     const optionsContainer = document.getElementById("options");
     const optionsElements = optionsContainer.querySelectorAll("*");
 
@@ -348,14 +368,25 @@ function optionsConfigUpdateListener() {
         switch (optionsElements[i].getAttribute("data-type")) {
             case "display":
                 updateDisplayElement(<HTMLElement> optionsElements[i])
+                break;
+        }
+    }
+
+    if (changes.categorySelections || changes.payments) {
+        for (const chooser of categoryChoosers) {
+            chooser.update();
+        }
+    } else if (changes.unsubmittedSegments) {
+        for (const chooser of unsubmittedVideos) {
+            chooser.update();
         }
     }
 }
 
 /**
  * Will set display elements to the proper text
- * 
- * @param element 
+ *
+ * @param element
  */
 function updateDisplayElement(element: HTMLElement) {
     const displayOption = element.getAttribute("data-sync")
@@ -382,9 +413,9 @@ function updateDisplayElement(element: HTMLElement) {
 
 /**
  * Initializes the option to add Invidious instances
- * 
- * @param element 
- * @param option 
+ *
+ * @param element
+ * @param option
  */
 function invidiousInstanceAddInit(element: HTMLElement, option: string) {
     const textBox = <HTMLInputElement> element.querySelector(".option-text-box");
@@ -401,7 +432,7 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
             let instanceList = Config.config[option];
             if (!instanceList) instanceList = [];
 
-            instanceList.push(textBox.value);
+            instanceList.push(textBox.value.trim().toLowerCase());
 
             Config.config[option] = instanceList;
 
@@ -436,18 +467,12 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
 
 /**
  * Run when the invidious button is being initialized
- * 
- * @param checkbox 
- * @param option 
+ *
+ * @param checkbox
+ * @param option
  */
 function invidiousInit(checkbox: HTMLInputElement, option: string) {
-    let permissions = ["declarativeContent"];
-    if (utils.isFirefox()) permissions = [];
-
-    chrome.permissions.contains({
-        origins: utils.getPermissionRegex(),
-        permissions: permissions
-    }, function (result) {
+    utils.containsInvidiousPermission().then((result) => {
         if (result != checkbox.checked) {
             Config.config[option] = result;
 
@@ -458,33 +483,19 @@ function invidiousInit(checkbox: HTMLInputElement, option: string) {
 
 /**
  * Run whenever the invidious checkbox is clicked
- * 
- * @param checkbox 
- * @param option 
+ *
+ * @param checkbox
+ * @param option
  */
 async function invidiousOnClick(checkbox: HTMLInputElement, option: string): Promise<void> {
-    return new Promise((resolve) => {
-        if (checkbox.checked) {
-            utils.setupExtraSitePermissions(function (granted) {
-                if (!granted) {
-                    Config.config[option] = false;
-                    checkbox.checked = false;
-                } else {
-                    checkbox.checked = true;
-                }
-
-                resolve();
-            });
-        } else {
-            utils.removeExtraSiteRegistration();
-        }
-    });
+    const enabled = await utils.applyInvidiousPermissions(checkbox.checked, option);
+    checkbox.checked = enabled;
 }
 
 /**
  * Will trigger the textbox to appear to be able to change an option's text.
- * 
- * @param element 
+ *
+ * @param element
  */
 function activatePrivateTextChange(element: HTMLElement) {
     const button = element.querySelector(".trigger-button");
@@ -501,7 +512,7 @@ function activatePrivateTextChange(element: HTMLElement) {
             element.querySelector(".option-hidden-section").classList.remove("hidden");
             return;
     }
-    
+
     let result = Config.config[option];
     // See if anything extra must be done
     switch (option) {
@@ -512,7 +523,7 @@ function activatePrivateTextChange(element: HTMLElement) {
     }
 
     textBox.value = result;
-    
+
     const setButton = element.querySelector(".text-change-set");
     setButton.addEventListener("click", async () => {
         setTextOption(option, element, textBox.value);
@@ -523,7 +534,7 @@ function activatePrivateTextChange(element: HTMLElement) {
         case "userID":
             if (Config.config[option]) {
                 utils.asyncRequestToServer("GET", "/api/userInfo", {
-                    userID: Config.config[option],
+                    publicUserID: getHash(Config.config[option]),
                     values: ["warnings", "banned"]
                 }).then((result) => {
                     const userInfo = JSON.parse(result.responseText);
@@ -541,7 +552,7 @@ function activatePrivateTextChange(element: HTMLElement) {
 
 /**
  * Function to run when a textbox change is submitted
- * 
+ *
  * @param option data-sync value
  * @param element main container div
  * @param value new text
@@ -551,7 +562,7 @@ async function setTextOption(option: string, element: HTMLElement, value: string
     const confirmMessage = element.getAttribute("data-confirm-message");
 
     if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
-        
+
         // See if anything extra must be done
         switch (option) {
             case "*":
@@ -563,13 +574,13 @@ async function setTextOption(option: string, element: HTMLElement, value: string
 
                     if (newConfig.supportInvidious) {
                         const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > div > label > input");
-                        
+
                         checkbox.checked = true;
                         await invidiousOnClick(checkbox, "supportInvidious");
                     }
 
                     window.location.reload();
-                    
+
                 } catch (e) {
                     alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
                 }
@@ -587,8 +598,9 @@ async function setTextOption(option: string, element: HTMLElement, value: string
 function downloadConfig() {
     const file = document.createElement("a");
     const jsonData = JSON.parse(JSON.stringify(Config.cachedSyncConfig));
-    file.setAttribute("href", "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData)));
-    file.setAttribute("download", "SponsorBlockConfig.json");
+    const dateTimeString = new Date().toJSON().replace("T", "_").replace(/:/g, ".").replace(/.\d+Z/g, "")
+    file.setAttribute("href", `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(jsonData))}`);
+    file.setAttribute("download", `SponsorBlockConfig_${dateTimeString}.json`);
     document.body.append(file);
     file.click();
     file.remove();
@@ -611,7 +623,7 @@ function uploadConfig(e) {
 /**
  * Validates the value used for the database server address.
  * Returns null and alerts the user if there is an issue.
- * 
+ *
  * @param input Input server address
  */
 function validateServerAddress(input: string): string {
@@ -645,7 +657,7 @@ function copyDebugOutputToClipboard() {
 
     // Sanitise sensitive user config values
     delete output.config.userID;
-    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress) 
+    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;
@@ -662,4 +674,4 @@ function copyDebugOutputToClipboard() {
 
 function isIncognitoAllowed(): Promise<boolean> {
     return new Promise((resolve) => chrome.extension.isAllowedIncognitoAccess(resolve));
-}
+}

src/permissions.ts

@@ -1,5 +1,6 @@
 import Config from "./config";
 import Utils from "./utils";
+import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
 const utils = new Utils();
 
 // This is needed, if Config is not imported before Utils, things break.
@@ -9,27 +10,19 @@ Config.config;
 window.addEventListener('DOMContentLoaded', init);
 
 async function init() {
-    utils.localizeHtmlPage();
-
-    const domains = document.location.hash.replace("#", "").split(",");
+    localizeHtmlPage();
 
     const acceptButton = document.getElementById("acceptPermissionButton");
     acceptButton.addEventListener("click", () => {
-        chrome.permissions.request({
-            origins: utils.getPermissionRegex(domains),
-            permissions: []
-        }, (granted)  => {
-            if (granted) {
+        utils.applyInvidiousPermissions(Config.config.supportInvidious).then((enabled) => {
+            Config.config.supportInvidious = enabled;
+
+            if (enabled) {
                 alert(chrome.i18n.getMessage("permissionRequestSuccess"));
-
-                Config.config.ytInfoPermissionGranted = true;
-
-                chrome.tabs.getCurrent((tab) => {
-                    chrome.tabs.remove(tab.id);
-                });
+                window.close();
             } else {
                 alert(chrome.i18n.getMessage("permissionRequestFailed"));
             }
-        });
+        })
     });
 }

src/render/CategoryChooser.tsx

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

src/render/CategoryPill.tsx

@@ -1,19 +1,26 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from "react-dom/client";
 import CategoryPillComponent, { CategoryPillState } from "../components/CategoryPillComponent";
 import Config from "../config";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
-import { GenericUtils } from "../utils/genericUtils";
 import { Tooltip } from "./Tooltip";
+import { waitFor } from "@ajayyy/maze-utils";
+import { getYouTubeTitleNode } from "@ajayyy/maze-utils/lib/elements";
+
+const id = "categoryPill";
 
 export class CategoryPill {
     container: HTMLElement;
     ref: React.RefObject<CategoryPillComponent>;
+    root: Root;
 
-    unsavedState: CategoryPillState;
+    lastState: CategoryPillState;
 
     mutationObserver?: MutationObserver;
+    onMobileYouTube: boolean;
+    onInvidious: boolean;
+    vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
     
     constructor() {
         this.ref = React.createRef();
@@ -21,50 +28,63 @@ export class CategoryPill {
 
     async attachToPage(onMobileYouTube: boolean, onInvidious: boolean,
             vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>): Promise<void> {
+        this.onMobileYouTube = onMobileYouTube;
+        this.onInvidious = onInvidious;
+        this.vote = vote;
+
+        this.attachToPageInternal();
+    }
+
+    private async attachToPageInternal(): Promise<void> {
         const referenceNode = 
-            await GenericUtils.wait(() => 
-                // New YouTube Title, YouTube, Mobile YouTube, Invidious
-                document.querySelector("#title h1, .ytd-video-primary-info-renderer.title, .slim-video-information-title, #player-container + .h-box > h1") as HTMLElement);
+            await waitFor(() => getYouTubeTitleNode());
 
         if (referenceNode && !referenceNode.contains(this.container)) {
-            this.container = document.createElement('span');
-            this.container.id = "categoryPill";
-            this.container.style.display = "relative";
+            if (!this.container) {
+                this.container = document.createElement('span');
+                this.container.id = id;
+                this.container.style.display = "relative";
 
-            referenceNode.prepend(this.container);
-            referenceNode.style.display = "flex";
+                this.root = createRoot(this.container);
+                this.ref = React.createRef();
+                this.root.render(<CategoryPillComponent ref={this.ref} vote={this.vote} />);
 
-            if (this.ref.current) {
-                this.unsavedState = this.ref.current.state;
-            }
-
-            ReactDOM.render(
-                <CategoryPillComponent ref={this.ref} vote={vote} />,
-                this.container
-            );
-
-            if (this.unsavedState) {
-                this.ref.current?.setState(this.unsavedState);
-                this.unsavedState = null;
-            }
-
-            if (onMobileYouTube) {
-                if (this.mutationObserver) {
-                    this.mutationObserver.disconnect();
+                if (this.onMobileYouTube) {
+                    if (this.mutationObserver) {
+                        this.mutationObserver.disconnect();
+                    }
+                    
+                    this.mutationObserver = new MutationObserver((changes) => {
+                        if (changes.some((change) => change.removedNodes.length > 0)) {
+                            this.attachToPageInternal();
+                        }
+                    });
+    
+                    this.mutationObserver.observe(referenceNode, { 
+                        childList: true,
+                        subtree: true
+                    });
                 }
-                
-                this.mutationObserver = new MutationObserver(() => this.attachToPage(onMobileYouTube, onInvidious, vote));
+            }
 
-                this.mutationObserver.observe(referenceNode, { 
-                    childList: true,
-                    subtree: true
+            if (this.lastState) {
+                waitFor(() => this.ref.current).then(() => {
+                    this.ref.current?.setState(this.lastState);
                 });
             }
+
+            // Use a parent because YouTube does weird things to the top level object
+            // react would have to rerender if container was the top level
+            const parent = document.createElement("span");
+            parent.appendChild(this.container);
+
+            referenceNode.prepend(parent);
+            referenceNode.style.display = "flex";
         }
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.container);
+        this.root.unmount();
         this.container.remove();
     }
 
@@ -74,11 +94,8 @@ export class CategoryPill {
             open: show ? this.ref.current?.state.open : false
         };
 
-        if (this.ref.current) {
-            this.ref.current?.setState(newState);
-        } else {
-            this.unsavedState = newState;
-        }
+        this.ref.current?.setState(newState);
+        this.lastState = newState;
     }
 
     async setSegment(segment: SponsorTime): Promise<void> {
@@ -89,16 +106,13 @@ export class CategoryPill {
                 open: false
             };
 
-            if (this.ref.current) {
-                this.ref.current?.setState(newState);
-            } else {
-                this.unsavedState = newState;
-            }
+            this.ref.current?.setState(newState);
+            this.lastState = newState;
 
             if (!Config.config.categoryPillUpdate) {
                 Config.config.categoryPillUpdate = true;
 
-                const watchDiv = await GenericUtils.wait(() => document.querySelector("#info.ytd-watch-flexy") as HTMLElement);
+                const watchDiv = await waitFor(() => document.querySelector("#info.ytd-watch-flexy") as HTMLElement);
                 if (watchDiv) {
                     new Tooltip({
                         text: chrome.i18n.getMessage("categoryPillNewFeature"),
@@ -112,5 +126,9 @@ export class CategoryPill {
                 }
             }
         }
+
+        if (this.onMobileYouTube && !document.contains(this.container)) {
+            this.attachToPageInternal();
+        }
     }
 }

src/render/ChapterVote.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { createRoot, Root } from 'react-dom/client';
+import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
+import { VoteResponse } from "../messageTypes";
+import { Category, SegmentUUID, SponsorTime } from "../types";
+
+export class ChapterVote {
+    container: HTMLElement;
+    ref: React.RefObject<ChapterVoteComponent>;
+    root: Root;
+
+    unsavedState: ChapterVoteState;
+
+    mutationObserver?: MutationObserver;
+    
+    constructor(vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>) {
+        this.ref = React.createRef();
+
+        this.container = document.createElement('span');
+        this.container.id = "chapterVote";
+        this.container.style.height = "100%";
+
+        this.root = createRoot(this.container);
+        this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
+    }
+
+    getContainer(): HTMLElement {
+        return this.container;
+    }
+
+    close(): void {
+        this.root.unmount();
+        this.container.remove();
+    }
+
+    setVisibility(show: boolean): void {
+        const newState = {
+            show,
+            ...(!show ? { segment: null } : {})
+        };
+
+        if (this.ref.current) {
+            this.ref.current?.setState(newState);
+        } else {
+            this.unsavedState = newState;
+        }
+    }
+
+    async setSegment(segment: SponsorTime): Promise<void> {
+        if (this.ref.current?.state?.segment !== segment) {
+            const newState = {
+                segment,
+                show: true
+            };
+
+            if (this.ref.current) {
+                this.ref.current?.setState(newState);
+            } else {
+                this.unsavedState = newState;
+            }
+        }
+    }
+}

src/render/GenericNotice.tsx

@@ -1,24 +1,31 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot, Root } from 'react-dom/client';
 import NoticeComponent from "../components/NoticeComponent";
 
 import Utils from "../utils";
 const utils = new Utils();
 
-import { ContentContainer } from "../types";
+import { ButtonListener, ContentContainer } from "../types";
 import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
 
-export interface ButtonListener {
-    name: string,
-    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+export interface TextBox {
+    icon: string;
+    text: string;
 }
 
 export interface NoticeOptions {
-    title: string,
-    textBoxes?: string[],
-    buttons?: ButtonListener[],
-    fadeIn?: boolean,
-    timed?: boolean
+    title: string;
+    referenceNode?: HTMLElement;
+    textBoxes?: TextBox[];
+    buttons?: ButtonListener[];
+    fadeIn?: boolean;
+    timed?: boolean;
+    style?: React.CSSProperties;
+    extraClass?: string;
+    maxCountdownTime?: () => number;
+    dontPauseCountdown?: boolean;
+    hideLogo?: boolean;
+    hideRightInfo?: boolean;
 }
 
 export default class GenericNotice {
@@ -27,52 +34,80 @@ export default class GenericNotice {
 
     noticeElement: HTMLDivElement;
     noticeRef: React.MutableRefObject<NoticeComponent>;
+    idSuffix: string;
+    root: Root;
 
     constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
         this.noticeRef = React.createRef();
+        this.idSuffix = idSuffix;
 
         this.contentContainer = contentContainer;
 
-        const referenceNode = utils.findReferenceNode();
+        const referenceNode = options.referenceNode ?? utils.findReferenceNode();
     
         this.noticeElement = document.createElement("div");
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);
 
-        ReactDOM.render(
+        this.root = createRoot(this.noticeElement);
+
+        this.update(options);
+    }
+
+    update(options: NoticeOptions): void {
+        this.root.render(
             <NoticeComponent
                 noticeTitle={options.title}
-                idSuffix={idSuffix}
+                idSuffix={this.idSuffix}
                 fadeIn={options.fadeIn ?? true}
                 timed={options.timed ?? true}
                 ref={this.noticeRef}
+                style={options.style}
+                extraClass={options.extraClass}
+                maxCountdownTime={options.maxCountdownTime}
+                dontPauseCountdown={options.dontPauseCountdown}
+                hideLogo={options.hideLogo}
+                hideRightInfo={options.hideRightInfo}
                 closeListener={() => this.close()} >
-                    
-                    {this.getMessageBox(idSuffix, options.textBoxes)}
+                    {options.textBoxes?.length > 0 ?
+                        <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
+                            className="sponsorTimeMessagesRow"
+                            style={{maxHeight: this.contentContainer ? (this.contentContainer().v.offsetHeight - 200) + "px" : null}}>
+                            <td style={{width: "100%"}}>
+                                {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
+                            </td>
+                        </tr>
+                    : null}
 
-                    <tr id={"sponsorSkipNoticeSpacer" + idSuffix}
-                        className="sponsorBlockSpacer">
-                    </tr>
+                    {!options.hideLogo ?
+                        <>
+                            <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
+                                className="sponsorBlockSpacer">
+                            </tr>
 
-                    <div className="sponsorSkipNoticeRightSection"
-                        style={{position: "relative"}}>
+                            <tr className="sponsorSkipNoticeRightSection"
+                                style={{position: "relative"}}>
+                                <td>
+                                    {this.getButtons(options.buttons)}
+                                </td>
+                            </tr>
+                        </>
+                    : null}
 
-                        {this.getButtons(options.buttons)}
-                    </div>
-            </NoticeComponent>,
-            this.noticeElement
+            </NoticeComponent>
         );
     }
 
-    getMessageBox(idSuffix: string, textBoxes: string[]): JSX.Element[] { 
+    getMessageBoxes(idSuffix: string, textBoxes: TextBox[]): JSX.Element[] { 
         if (textBoxes) {
             const result = [];
             for (let i = 0; i < textBoxes.length; i++) {
                 result.push(
                     <NoticeTextSelectionComponent idSuffix={idSuffix}
                         key={i}
-                        text={textBoxes[i]} />
+                        icon={textBoxes[i].icon}
+                        text={textBoxes[i].text} />
                 )
             }
 
@@ -104,7 +139,7 @@ export default class GenericNotice {
     }
 
     close(): void {
-        ReactDOM.unmountComponentAtNode(this.noticeElement);
+        this.root.unmount();
 
         this.noticeElement.remove();
     }