Merge pull request #1377 from erkinalp/patch-1

Fix the readme for SponsorLock

.eslintrc.js

@@ -0,0 +1,33 @@
+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

@@ -1,37 +0,0 @@
-{
-    "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",
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/ban-ts-comment": "off",
-        "@typescript-eslint/no-this-alias": "off"
-    },
-    "settings": {
-        "react": {
-            "version": "detect"
-        }
-    }
-}

.github/workflows/ci.yml

@@ -10,12 +10,10 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          submodules: recursive
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
+          node-version: '16'
       - run: npm ci
       - name: Copy configuration
         run: cp config.json.example config.json
@@ -27,44 +25,44 @@ jobs:
       # Create Chrome artifacts
       - name: Create Chrome artifacts
         run: npm run build:chrome
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: ChromeExtension
           path: dist
       - run: mkdir ./builds
-      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+      - uses: montudor/action-zip@v1
         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@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtension
           path: dist
-      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+      - uses: montudor/action-zip@v1
         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@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: ChromeExtensionBeta
           path: dist
-      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+      - uses: montudor/action-zip@v1
         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@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtensionBeta
           path: dist
-      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+      - uses: montudor/action-zip@v1
         with:
           args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
 

.github/workflows/release.yml

@@ -12,93 +12,98 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          submodules: recursive
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
+          node-version: '16'
+      - run: npm ci
       - 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 *
-      - name: Upload ChromeExtension to release
-        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
-        with:
-          args: builds/ChromeExtension.zip
-          name: ChromeExtension.zip
-          path: ./builds/ChromeExtension.zip
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
 
       # 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 *
-      - name: Upload FirefoxExtension to release
-        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
+      - uses: actions/upload-artifact@v2
+        with:
+          name: ChromeExtensionBeta
+          path: dist
       - 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
+      - uses: actions/upload-artifact@v2
+        with:
+          name: SafariExtension
+          path: dist
       - name: Zip Artifacts
         run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
-      - name: Upload SafariExtension to release
-        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
+      - 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
+        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 }}
+      - name: Upload FirefoxExtension to release
+        uses: Shopify/upload-to-release@master
+        with:
+          args: builds/FirefoxExtension.zip
+          name: FirefoxExtension.zip
+          path: ./builds/FirefoxExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Upload SafariExtension to release
+        uses: Shopify/upload-to-release@master
+        with:
+          args: builds/SafariExtension.zip
+          name: SafariExtension.zip
+          path: ./builds/SafariExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
       - name: Upload EdgeExtension to release
-        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        uses: Shopify/upload-to-release@master
         with:
           args: builds/EdgeExtension.zip
           name: EdgeExtension.zip
@@ -108,7 +113,7 @@ jobs:
       # Firefox Beta
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env stream=beta
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtensionBeta
           path: dist
@@ -125,13 +130,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@v3
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtensionSigned.xpi
           path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
 
       - name: Upload FirefoxSignedInstaller.xpi to release
-        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        uses: Shopify/upload-to-release@master
         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@28b86cd8d25593f037406ecbf96082db2836e928
+      uses: bdougie/take-action@main
       env:
         GITHUB_TOKEN: ${{ github.token }}

.github/workflows/tests.yml

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

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

@@ -12,25 +12,20 @@ jobs:
   update-oss:
     runs-on: ubuntu-latest 
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          submodules: recursive
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '18'
+          node-version: '16'
       - 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@2b011faafdcbc9ceb11414d64d0573f37c774b04
-        # v4.2.3
+        uses: peter-evans/create-pull-request@v3
         with:
           commit-message: Update OSS Attribution
           author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/updateInvidous.yml

@@ -8,24 +8,21 @@ jobs:
   check-list:
     runs-on: ubuntu-latest 
     steps:
-      - uses: actions/checkout@v3
-        with:
-          submodules: recursive
-      - name: Download instance lists
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Download instance list
         run: |
-          wget https://api.invidious.io/instances.json -O ci/invidious_instances.json
-          wget  https://github.com/TeamPiped/piped-uptime/raw/master/history/summary.json -O ci/piped_instances.json
+          wget https://api.invidious.io/instances.json -O ci/data.json
       - name: Install dependencies
         run: npm ci
       - name: "Run CI"
         run: npm run ci:invidious
 
       - name: Create pull request to update list
-        uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04
-        # v4.2.3
+        uses: peter-evans/create-pull-request@v3
         with:
           commit-message: Update Invidious List
-          author: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
+          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
           branch: ci/update_invidious_list
           title: Update Invidious List
           body: Automated Invidious list update

.gitignore

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

.gitmodules

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

CONTRIBUTING.md

@@ -1,31 +1 @@
-If you make any contributions to SponsorBlock after this file was created, you are agreeing that any code you have contributed will be licensed under LGPL-3.0 or later.
-
-# Translations
-https://crowdin.com/project/sponsorblock
-
-# Building
-## Building locally
-0. You must have [Node.js 16 or later](https://nodejs.org/) and npm installed. Works best on Linux
-1. Clone with submodules
-  ```bash
-  git clone --recursive https://github.com/ajayyy/SponsorBlock
-  ```
-  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.
-  - Comments are invalid in JSON, make sure they are all removed.
-  - You will need to repeat this step in the future if you get build errors related to `CompileConfig` or `property does not exist on type ConfigClass`. This can happen for example when a new category is added.
-3. Run `npm ci` in the repository to install dependencies.
-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.
-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/docs/Tools/about:debugging#loading_a_temporary_extension) in Firefox.
-
-## Developing with a clean profile and hot reloading
-Run `npm run dev` (for Chrome) or `npm run dev:firefox` (for Firefox) to run the extension using a clean browser profile with hot reloading. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).
-
-Known chromium bug: Extension is not loaded properly on first start. Visit `chrome://extensions/` and reload the extension.
-
-For Firefox for Android, use `npm run dev:firefox-android -- --adb-device <ip-address of the device>`. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information. You may need to edit package.json and add the parameters directly there.
-
+If you make any contributions to SponsorBlock after this file was created, you are agreeing that any code you have contributed will be licensed under LGPL-3.0.

README.md

@@ -5,7 +5,7 @@
   <sub>Logo by <a href="https://github.com/munadikieh">@munadikieh</a></sub>
 </p>
 
-<h1 align="center">SponsorBlock</h1>
+<h1 align="center">SponsorLock</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 and iOS</a> |
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/Safari">Safari for MacOS</a> |
   <a href="https://sponsor.ajay.app">Website</a> |
   <a href="https://sponsor.ajay.app/stats">Stats</a>
 </p>
@@ -36,9 +36,9 @@
 
 
 
-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.
+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.
 
-It also supports Invidious.
+It also supports Invidio.us.
 
 **Translate:** [![Crowdin](https://badges.crowdin.net/sponsorblock/localized.svg)](https://crowdin.com/project/sponsorblock)
 
@@ -56,14 +56,35 @@ The dataset and API are now being used in some [ports](https://github.com/ajayyy
 
 # API
 
-You can read the API docs [here](https://wiki.sponsor.ajay.app/w/API_Docs).
+You can read the API docs [here](https://wiki.sponsor.ajay.app/index.php/API_Docs).
 
 # Building
-See [CONTRIBUTING.md](CONTRIBUTING.md)
+
+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.
+
+    - 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 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.
+
+### Developing with a clean profile and hot reloading
+
+Run `npm run dev` (for Chrome) or `npm run dev:firefox` (for Firefox) to run the extension using a clean browser profile with hot reloading. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).
+
+Known chromium bug: Extension is not loaded properly on first start. Visit `chrome://extensions/` and reload the extension.
+
+For Firefox for Android, use `npm run dev:firefox-android -- --adb-device <ip-address of the device>`. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information.
 
 # Credit
 
-The awesome [Invidious API](https://docs.invidious.io/) was previously used, and the server is now using [NewLeaf](https://git.sr.ht/~cadence/NewLeaf) as a to get video info from YouTube.
+The awesome [Invidious API](https://docs.invidious.io/API.md) was previously used, and the server is now using [NewLeaf](https://git.sr.ht/~cadence/NewLeaf) as a to get video info from YouTube.
 
 Originally forked from [YTSponsorSkip](https://github.com/NDevTK/YTSponsorSkip), but very little code remains.
 

ci/generateList.ts

@@ -1,63 +0,0 @@
-/*
-This file is only ran by GitHub Actions in order to populate the Invidious instances list
-
-This file should not be shipped with the extension
-*/
-
-/*
-Criteria for inclusion:
-Invidious
-- 30d uptime >= 90%
-- available for at least 80/90 days
-- must have been up for at least 90 days
-- HTTPS only
-- url includes name (this is to avoid redirects)
-
-Piped
-- 30d uptime >= 90%
-- available for at least 80/90 days
-- must have been up for at least 90 days
-- must not be a wildcard redirect to piped.video
-- must be currently up
-- must have a functioning frontend
-- must have a functioning API
-*/
-
-import { writeFile, existsSync } from "fs"
-import { join } from "path"
-import { getInvidiousList } from "./invidiousCI";
-// import { getPipedList } from "./pipedCI";
-
-const checkPath = (path: string) => existsSync(path);
-const fixArray = (arr: string[]) => [...new Set(arr)].sort()
-
-async function generateList() {
-  // import file from https://api.invidious.io/instances.json
-  const invidiousPath = join(__dirname, "invidious_instances.json");
-  // import file from https://github.com/TeamPiped/piped-uptime/raw/master/history/summary.json
-  const pipedPath = join(__dirname, "piped_instances.json");
-
-  // check if files exist
-  if (!checkPath(invidiousPath) || !checkPath(pipedPath)) {
-    console.log("Missing files")
-    process.exit(1);
-  }
-
-  // static non-invidious instances
-  const staticInstances = ["www.youtubekids.com"];
-  // invidious instances
-  const invidiousList = fixArray(getInvidiousList())
-  // piped instnaces
-  // const pipedList = fixArray(await getPipedList())
-
-  console.log([...staticInstances, ...invidiousList])
-
-  writeFile(
-    join(__dirname, "./invidiouslist.json"),
-    JSON.stringify([...staticInstances, ...invidiousList]),
-    (err) => {
-      if (err) return console.log(err);
-    }
-  );
-}
-generateList()

ci/invidiousCI.ts

@@ -1,31 +1,55 @@
-import { InvidiousInstance, instanceMap } from "./invidiousType"
+/*
+This file is only ran by GitHub Actions in order to populate the Invidious instances list
 
-import * as data from "../ci/invidious_instances.json";
+This file should not be shipped with the extension
+*/
+
+import { writeFile, existsSync } from 'fs';
+import { join } from 'path';
+
+// import file from https://api.invidious.io/instances.json
+if (!existsSync(join(__dirname, "data.json"))) {
+  process.exit(1);
+}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import * as data from "../ci/data.json";
+
+type instanceMap = {
+  name: string,
+  url: string,
+  dailyRatios: {ratio: string, label: string }[],
+  thirtyDayUptime: string
+}[]
 
 // only https servers
 const mapped: instanceMap = data
-  .filter((i: InvidiousInstance) => i[1]?.type === "https")
-  .map((instance: InvidiousInstance) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  .filter((i: any) => i[1]?.type === 'https')
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  .map((instance: any) => {
     return {
       name: instance[0],
       url: instance[1].uri,
       dailyRatios: instance[1].monitor.dailyRatios,
-      thirtyDayUptime: instance[1]?.monitor["30dRatio"].ratio,
+      thirtyDayUptime: instance[1]?.monitor['30dRatio'].ratio,
     }
-  });
+  })
 
 // reliability and sanity checks
 const reliableCheck = mapped
-  .filter(instance => {
+  .filter((instance) => {
     // 30d uptime >= 90%
-    const thirtyDayUptime = Number(instance.thirtyDayUptime) >= 90;
+    const thirtyDayUptime = Number(instance.thirtyDayUptime) >= 90
     // available for at least 80/90 days
-    const dailyRatioCheck = instance.dailyRatios.filter(status => status.label !== "black");
-    return thirtyDayUptime && dailyRatioCheck.length >= 80;
+    const dailyRatioCheck = instance.dailyRatios.filter(status => status.label !== "black")
+    return (thirtyDayUptime && dailyRatioCheck.length >= 80)
   })
   // url includes name
-  .filter(instance => instance.url.includes(instance.name));
+  .filter(instance => instance.url.includes(instance.name))
 
-export function getInvidiousList(): string[] {
-  return reliableCheck.map(instance => instance.name).sort()
-}
+// finally map to array
+const result: string[] = reliableCheck.map(instance => instance.name)
+writeFile(join(__dirname, "./invidiouslist.json"), JSON.stringify(result), (err) => {
+  if (err) return console.log(err);
+})

ci/invidiousType.ts

@@ -1,54 +0,0 @@
-type ratio = {
-  ratio: string;
-  label: string;
-}
-
-export type instanceMap = {
-  name: string;
-  url: string;
-  dailyRatios: {ratio: string; label: string }[];
-  thirtyDayUptime: string;
-}[]
-
-export type InvidiousInstance = [
-  string,
-  {
-    flag: string;
-    region: string;
-    stats: null | {
-      version: string;
-      software: {
-        name: string;
-        version: string;
-        branch: string;
-      };
-      openRegistrations: boolean;
-      usage: {
-        users: {
-          total: number;
-          activeHalfyear: number;
-          activeMonth: number;
-        };
-      };
-      metadata: {
-        updatedAt: number;
-        lastChannelRefreshedAt: number;
-      };
-    };
-    cors: boolean | null;
-    api: boolean | null;
-    type: "https" | "http" | "onion" | "i2p";
-    uri: string;
-    monitor: null | {
-      monitorId: number;
-      createdAt: number;
-      statusClass: string;
-      name: string;
-      url: string | null;
-      type: "HTTP(s)";
-      dailyRatios: ratio[];
-      "90dRatio": ratio;
-      "30dRatio": ratio;
-    };
-  }
-]

ci/invidiouslist.json

@@ -1 +1 @@
-["www.youtubekids.com","anontube.lvkaszus.pl","inv.citw.lgbt","inv.in.projectsegfau.lt","inv.tux.pizza","inv.zzls.xyz","invidious.asir.dev","invidious.drgns.space","invidious.fdn.fr","invidious.flokinet.to","invidious.io.lol","invidious.lunar.icu","invidious.nerdvpn.de","invidious.no-logs.com","invidious.perennialte.ch","invidious.privacydev.net","invidious.private.coffee","invidious.projectsegfau.lt","invidious.protokolla.fi","invidious.slipfox.xyz","iv.datura.network","iv.ggtyler.dev","iv.melmac.space","iv.nboeck.de","onion.tube","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu","yt.cdaut.de","yt.drgnz.club","yt.oelrichsgarcia.de"]
+["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"]

ci/pipedCI.ts

@@ -1,92 +0,0 @@
-import * as data from "../ci/piped_instances.json";
-
-type percent = string
-type dailyMinutesDown = Record<string, number>
-
-type PipedInstance = {
-  name: string;
-  url: string;
-  icon: string;
-  slug: string;
-  status: string;
-  uptime: percent;
-  uptimeDay: percent;
-  uptimeWeek: percent;
-  uptimeMonth: percent;
-  uptimeYear: percent;
-  time: number;
-  timeDay: number;
-  timeWeek: number;
-  timeMonth: number;
-  timeYear: number;
-  dailyMinutesDown: dailyMinutesDown
-}
-
-const percentNumber = (percent: percent) => Number(percent.replace("%", ""))
-const ninetyDaysAgo = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000)
-
-function dailyMinuteFilter (dailyMinutesDown: dailyMinutesDown) {
-  let daysDown = 0
-  for (const [date, minsDown] of Object.entries(dailyMinutesDown)) {
-    if (new Date(date) >= ninetyDaysAgo && minsDown > 1000) { // if within 90 days and down for more than 1000 minutes
-      daysDown++
-    }
-  }
-  // return true f less than 10 days down
-  return daysDown < 10
-}
-
-const getHost = (url: string) => new URL(url).host
-
-const getWatchPage = async (instance: PipedInstance) =>
-  fetch(`https://${getHost(instance.url)}`, { redirect: "manual" })
-    .then(res => res.headers.get("Location"))
-    .catch(e => { console.log (e); return null })
-
-const siteOK = async (instance) => {
-  // check if entire site is redirect
-  const notRedirect = await fetch(instance.url, { redirect: "manual" })
-    .then(res => res.status == 200)
-  // only allow kavin to return piped.video
-  // if (instance.url.startsWith("https://piped.video") && instance.slug !== "kavin-rocks-official") return false
-  // check if frontend is OK
-  const watchPageStatus = await fetch(instance.frontendUrl)
-    .then(res => res.ok)
-  // test API - stream returns ok result
-  const streamStatus = await fetch(`${instance.apiUrl}/streams/BaW_jenozKc`)
-    .then(res => res.ok)
-  // get startTime of monitor
-  const age = await fetch(instance.historyUrl)
-    .then(res => res.text())
-    .then(text => { // startTime greater than 90 days ago
-      const date = text.match(/startTime: (.+)/)[1]
-      return Date.parse(date) < ninetyDaysAgo.valueOf()
-    })
-  // console.log(notRedirect, watchPageStatus, streamStatus, age, instance.frontendUrl, instance.apiUrl)
-  return notRedirect && watchPageStatus && streamStatus && age
-}
-
-const staticFilters = (data as PipedInstance[])
-  .filter(instance => {
-    const isup = instance.status === "up"
-    const monthCheck = percentNumber(instance.uptimeMonth) >= 90
-    const dailyMinuteCheck = dailyMinuteFilter(instance.dailyMinutesDown)
-    return isup && monthCheck && dailyMinuteCheck
-  })
-  .map(async instance => {
-    // get frontend url
-    const frontendUrl = await getWatchPage(instance)
-    if (!frontendUrl) return null // return false if frontend doesn't resolve
-    // get api base
-    const apiUrl = instance.url.replace("/healthcheck", "")
-    const historyUrl = `https://raw.githubusercontent.com/TeamPiped/piped-uptime/master/history/${instance.slug}.yml`
-    const pass = await siteOK({ apiUrl, historyUrl, frontendUrl, url: instance.url })
-    const frontendHost = getHost(frontendUrl)
-    return pass ? frontendHost : null
-  })
-
-export async function getPipedList(): Promise<string[]> {
-  const instances = await Promise.all(staticFilters)
-    .then(arr => arr.filter(i => i !== null))
-  return instances
-}

ci/prettify.ts

@@ -1,6 +0,0 @@
-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", "chapter", "music_offtopic"],
+    "categoryList": ["sponsor", "selfpromo", "exclusive_access", "interaction", "poi_highlight", "intro", "outro", "preview", "filler", "music_offtopic"],
     "categorySupport": {
         "sponsor": ["skip", "mute", "full"],
         "selfpromo": ["skip", "mute", "full"],
@@ -13,8 +13,7 @@
         "preview": ["skip", "mute"],
         "filler": ["skip", "mute"],
         "music_offtopic": ["skip"],
-        "poi_highlight": ["poi"],
-        "chapter": ["chapter"]
+        "poi_highlight": ["poi"]
     },
     "wikiLinks": {
         "sponsor": "https://wiki.sponsor.ajay.app/w/Sponsor",
@@ -28,19 +27,6 @@
         "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",
-        "chapter": "https://wiki.sponsor.ajay.app/w/Chapter"
-    },
-    "extensionImportList": {
-        "chromium": [
-            "enamippconapkdmgfgjchkhakpfinmaj"
-        ],
-        "firefox": [
-            "deArrow@ajay.app",
-            "deArrowBETA@ajay.app"
-        ],
-        "safari": [
-            "app.ajay.dearrow.extension"
-        ]
+        "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment"
     }
 }

jest.config.js

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

manifest/chrome-manifest-extra.json

@@ -1,12 +1,2 @@
 {
-  "optional_permissions": [
-    "declarativeContent",
-    "webNavigation"
-  ],
-  "background": {
-    "persistent": false
-  },
-  "permissions": [
-    "https://*.youtube.com/*"
-  ]
 }

manifest/firefox-manifest-extra.json

@@ -1,20 +1,7 @@
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "sponsorBlocker@ajay.app",
-      "strict_min_version": "48.0"
-    },
-    "gecko_android": {
-      "strict_min_version": "79.0"
+      "id": "sponsorLockAprilFools@ajay.app"
     }
-  },
-  "background": {
-    "persistent": false
-  },
-  "permissions": [
-    "scripting"
-  ],
-  "browser_action": {
-    "default_area": "navbar"
   }
 }

manifest/manifest.json

@@ -1,9 +1,9 @@
 {
-    "name": "__MSG_fullName__",
-    "short_name": "SponsorBlock",
-    "version": "5.4.29",
+    "name": "SponsorLock - Give Back Control!",
+    "short_name": "SponsorLock",
+    "version": "4.2.3",
     "default_locale": "en",
-    "description": "__MSG_Description__",
+    "description": "SponsorLock only shows you promotion, and skips all useful informaton.",
     "homepage_url": "https://sponsor.ajay.app",
     "content_scripts": [{
         "run_at": "document_start",
@@ -17,137 +17,71 @@
         ],
         "css": [
             "content.css",
-            "shared.css"
+            "./libs/Source+Sans+Pro.css",
+            "popup.css"
         ]
     }],
-    "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",
-        "icons/dearrow.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"
-    ],
+    "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",
+        "storage"
+    ],
+    "host_permissions": [
         "https://sponsor.ajay.app/*"
     ],
-    "optional_permissions": [
-        "*://*/*"
-    ],
-    "browser_action": {
+    "action": {
         "default_title": "SponsorBlock",
-        "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
-            },
-            {
-                "light": "icons/IconSponsorBlocker256px.png",
-                "dark": "icons/IconSponsorBlocker256px.png",
-                "size": 256
-            },
-            {
-                "light": "icons/IconSponsorBlocker512px.png",
-                "dark": "icons/IconSponsorBlocker512px.png",
-                "size": 512
-            },
-            {
-                "light": "icons/IconSponsorBlocker1024px.png",
-                "dark": "icons/IconSponsorBlocker1024px.png",
-                "size": 1024
-            }
-        ]
+        "default_popup": "popup.html"
     }, 
     "background": {
-        "scripts":[
-        "./js/background.js"
-        ]
+        "service_worker": "./js/background.js"
     },
     "icons": {
-        "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"
+        "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"
     },
     "options_ui": {
-        "page": "options/options.html",
+        "page": "options/lock-options.html",
         "open_in_tab": true
     },
-    "manifest_version": 2
+    "manifest_version": 3
 }  

manifest/safari-manifest-extra.json

@@ -1,11 +1,5 @@
 {
   "background": {
     "persistent": false
-  },
-  "permissions": [
-    "scripting"
-  ],
-  "optional_permissions": [
-    "webNavigation"
-  ]
+  }
 }

package.json

@@ -4,44 +4,36 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "content-scripts-register-polyfill": "^4.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "overrides": {
-    "content-scripts-register-polyfill": {
-      "webext-content-scripts": "v2.5.5"
-    }
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@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": "^119.0.1",
-    "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",
+    "@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",
     "schema-utils": "^4.0.0",
-    "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"
+    "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"
   },
   "scripts": {
     "web-run": "npm run web-run:chrome",
@@ -60,7 +52,7 @@
     "build:watch": "npm run build:watch:chrome",
     "build:watch:chrome": "webpack --env browser=chrome --config webpack/webpack.dev.js --watch",
     "build:watch:firefox": "webpack --env browser=firefox --config webpack/webpack.dev.js --watch",
-    "ci:invidious": "ts-node ci/generateList.ts",
+    "ci:invidious": "ts-node ci/invidiousCI.ts",
     "dev": "npm run build:dev && concurrently \"npm run web-run\" \"npm run build:watch\"",
     "dev:firefox": "npm run build:dev:firefox && concurrently \"npm run web-run:firefox\" \"npm run build:watch:firefox\"",
     "dev:firefox-android": "npm run build:dev:firefox && concurrently \"npm run web-run:firefox-android\" \"npm run build:watch:firefox\"",
@@ -71,12 +63,12 @@
     "lint:fix": "eslint src --fix"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=12.20.0"
   },
   "funding": [
     {
       "type": "individual",
-      "url": "https://sponsor.ajay.app/donate"
+      "url": "hhttps://sponsor.ajay.app/donate"
     },
     {
       "type": "github",

public/_locales/en/messages.json

@@ -0,0 +1,933 @@
+{
+    "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,13 +1,4 @@
-: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);
-}
-
-.sbhidden {
+.hidden {
 	display: none;
 }
 
@@ -18,44 +9,21 @@
     position: absolute;
     width: 100%;
 	pointer-events: none;
-
+	
 	height: 100%;
 	transform: scaleY(0.6) translateY(-30%) translateY(1.5px);
-	z-index: 42;
+	z-index: 40;
 
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
-.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 {
+#previewbar.hovered {
 	transform: scaleY(1)
 }
 
 .previewbar {
 	display: inline-block;
 	height: 100%;
-	min-width: 1px;
-}
-
-.previewbar.requiredSegment {
-	transform: scaleY(3);
-}
-
-.previewbar.selectedSegment {
-	opacity: 1 !important;
-	z-index: 100;
-	transform: scaleY(1.5);
 }
 
 /* Make sure settings are upfront */
@@ -73,58 +41,23 @@ div:hover > #previewbar.sbNotInvidious {
 	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 {
@@ -151,31 +84,17 @@ div:hover > .sponsorBlockChapterBar {
 	vertical-align: top;
 }
 
-.playerButton.sbhidden: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;
 }
 
-.autoHiding:not(.sbhidden) {
+.autoHiding:not(.hidden) {
 	transform: translateX(0%) scale(1);
 	/* opacity is from YouTube page */
 	transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
 }
 
-.autoHiding.sbhidden {
+.autoHiding.hidden {
 	transform: translateX(100%) scale(0);
 	/* opacity is from YouTube page */
 	transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
@@ -183,19 +102,15 @@ div:hover > .sponsorBlockChapterBar {
 	width: 0px !important;
 }
 
-.autoHiding.sbhidden.autoHideLeft {
+.autoHiding.hidden.autoHideLeft {
 	transform: translateX(-100%) scale(0);
 }
 
 .sponsorSkipObject {
 	font-family: Roboto, Arial, Helvetica, sans-serif;
-
-	margin-left: var(--skip-notice-margin);
-	margin-right: var(--skip-notice-margin);
-}
-
-.sponsorSkipObjectFirst {
-	margin-left: 0;
+		
+	margin-left: 2px;
+	margin-right: 2px;
 }
 
 .sponsorSkipLogo {
@@ -204,11 +119,6 @@ div:hover > .sponsorBlockChapterBar {
 	float: left;
 }
 
-#categoryPill .sbPillNoText .sponsorSkipLogo {
-	margin-top: calc(2.6rem - 18px);
-    margin-bottom: calc(2.6rem - 18px);
-}
-
 @keyframes fadeIn {
 	from { opacity: 0; }
 }
@@ -231,7 +141,7 @@ div:hover > .sponsorBlockChapterBar {
 	position: absolute;
 	right: 5px;
 	bottom: 100px;
-	right: var(--skip-notice-right);
+	right: 10px;
 }
 
 .sponsorSkipNoticeParent {
@@ -242,6 +152,9 @@ div:hover > .sponsorBlockChapterBar {
 }
 
 .sponsorSkipNoticeParent, .sponsorSkipNotice {
+	min-width: 350px;
+	max-width: 50%;
+
 	border-spacing: 5px 10px;
 	padding-left: 5px;
 	padding-right: 5px;
@@ -249,30 +162,21 @@ div:hover > .sponsorBlockChapterBar {
 	border-collapse: unset;
 }
 
-.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 {
-	max-width: calc(100% - 50px);
+	min-width: calc(100% - 50px);
 }
 
-.sponsorSkipNotice .sbhidden {
+.sponsorSkipNotice .hidden {
 	display: none;
 }
 
@@ -285,10 +189,6 @@ div:hover > .sponsorBlockChapterBar {
 	animation: fadeIn 0.5s ease-out;
 }
 
-.exportCopiedNotice .sponsorSkipNoticeFadeIn {
-	animation: none;
-}
-
 .sponsorSkipNoticeFaded {
 	opacity: 0.5;
 }
@@ -353,7 +253,7 @@ div:hover > .sponsorBlockChapterBar {
 .sponsorSkipNoticeButton:hover {
 	background-color: rgba(235, 235, 235,0.2);
 	border-radius: 4px;
-
+	
 	transition: background-color 0.4s;
 }
 
@@ -388,7 +288,7 @@ div:hover > .sponsorBlockChapterBar {
 	height: 10px;
 	width: 10px;
 	box-sizing: unset;
-
+	
 	padding: 2px 5px;
 
 	margin-left: 2px;
@@ -403,7 +303,7 @@ div:hover > .sponsorBlockChapterBar {
 	font-size: 14px;
 	font-weight: bold;
 	color: rgb(235, 235, 235);
-
+	
 	margin-top: auto;
 	display: inline-block;
 	margin-right: 10px;
@@ -441,23 +341,15 @@ div:hover > .sponsorBlockChapterBar {
 .sponsorTimesInfoMessage {
 	font-size: 13.3333px;
     color: rgb(235, 235, 235);
-	overflow-wrap: anywhere;
 }
 
-.sb-guidelines-notice .sponsorTimesInfoMessage td {
-	padding-left: 5px;
-	padding-top: 2px;
-	padding-bottom: 2px;
-    font-size: 15px;
-
-	display: flex;
-	align-items: center;
+.voteButton {
+	height: 24px;
+	width: 24px;
+	cursor: pointer;
 }
-
-.sponsorTimesInfoIcon {
-	width: 30px;
-	padding-right: 10px;
-    padding-left: 10px;
+.voteButton:hover {
+	filter: brightness(80%);
 }
 
 .segmentSummary {
@@ -477,7 +369,7 @@ div:hover > .sponsorBlockChapterBar {
 	padding:4px 15px;
 	text-decoration:none;
     text-shadow:0px 0px 0px #662727;
-
+    
     margin-top: 5px;
     margin-right: 15px;
 }
@@ -513,7 +405,7 @@ div:hover > .sponsorBlockChapterBar {
 	padding:4px 15px;
 	text-decoration:none;
     text-shadow:0px 0px 0px #662727;
-
+    
     margin-top: 5px;
     margin-right: 15px;
 }
@@ -571,11 +463,11 @@ div:hover > .sponsorBlockChapterBar {
 .sponsorTimeEditButton {
 	text-decoration: underline;
 
-	margin-left: 13px;
-	margin-right: 13px;
+	margin-left: 20px;
+	margin-right: 20px;
 
 	font-size: 13px;
-
+	
 	cursor: pointer;
 }
 
@@ -596,17 +488,10 @@ 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 {
@@ -621,68 +506,35 @@ input::-webkit-inner-spin-button {
 	margin-bottom: 5px;
 
 	background-color: rgba(28, 28, 28, 0.9);
-    border-color: var(--sb-dark-red-outline);
+    border-color: rgb(130,0,0,0.9);
     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 {
-	opacity: 0.8;
+	filter: brightness(80%);
+}
+
+.sbChatNotice iframe {
+	height: 32px;
+	cursor: pointer;
+	height: 100%;
+}
+
+.sbChatClose {
+	height: 14px;
+	cursor: pointer;
 }
 
 .skipButtonControlBarContainer {
@@ -691,7 +543,7 @@ input::-webkit-inner-spin-button {
     color: white;
 }
 
-.skipButtonControlBarContainer.sbhidden {
+.skipButtonControlBarContainer.hidden {
 	display: none !important;
 }
 
@@ -736,13 +588,11 @@ input::-webkit-inner-spin-button {
     border-radius: 5px;
     padding: 10px;
     max-width: 300px;
-	width: max-content;
     white-space: normal;
     line-height: 1.5em;
 	color: white;
 	font-size: 12px;
-	z-index: 10000;
-	font-weight: normal;
+	z-index: 1000;
 }
 
 .sponsorBlockTooltip a {
@@ -760,19 +610,8 @@ input::-webkit-inner-spin-button {
     border-color: rgba(28, 28, 28, 0.7) transparent transparent transparent;
 }
 
-.sponsorBlockTooltip.sbTriangle.centeredSBTriangle::after {
-	left: 50%;
-	right: 50%;
-}
-
-.sponsorBlockTooltip.sbTriangle.sbTopTriangle::after {
-	bottom: 100%;
-	top: unset;
-	border-color: transparent transparent rgba(28, 28, 28, 0.7) transparent;
-}
-
 .sponsorBlockLockedColor {
-	color: #ffc83d !important;
+	color: #ffc83d;
 }
 
 .sponsorBlockRectangleTooltip {
@@ -785,14 +624,6 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
-#categoryPillParent {
-	height: fit-content;
-    margin-top: auto;
-	margin-bottom: auto;
-
-    position: relative;
-}
-
 .sponsorBlockCategoryPill {
     border-radius: 25px;
 	padding-left: 8px;
@@ -810,72 +641,15 @@ 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;
-}
-
-.sponsorblock-chapter-visible {
-	display: inherit !important;
 }

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/IconSponsorBlocker32px.png" type="image/png">
+  <link rel="icon" href="../icons/LogoSponsorBlocker64px.png" type="image/png">
 
   <link href="styles.css" rel="stylesheet"/>
 
@@ -15,111 +15,28 @@
 
   <div id="title">
     <img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
-    SponsorBlock
+    SponsorLock
   </div>
 
   <div class="container sponsorBlockPageBody">
 
-    <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>
+        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>
-        __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>.
+	      <b>Please uninstall regular SponsorBlock before trying this out.</b> Good luck! This extension was created for April 1st 2022.
     </p>
 
-    <p>
-	      Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
-    </p>
-
-    <a href="https://dearrow.ajay.app"
-        target="_blank"
-        id="dearrow-link"
-        class="dearrow-link hidden"
-        rel="noreferrer">
-        <img src="/icons/dearrow.svg"/>
-
-        <span id="dearrow-link-text">
-          
-        </span>
-
-        <img src="/icons/close.png" class="close-button"/>
-    </a>
-
     <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
 
-    <p class="smallText">
-      __MSG_helpPageFeatureDisclaimer__
-    </p>
-
-    <iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
-
-    <h1>__MSG_helpPageHowSkippingWorks__</h1>
-
-    <p class="projectPreview">
-      <span class="projectPreviewImageLarge">
-          <img src="images/popup.png">
-      </span>
-
-      __MSG_helpPageHowSkippingWorks1__
-      
-      <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>
+    <iframe class="optionsFrame" src="../options/lock-options.html#embed" style="border: none"></iframe>
 
     <h1>__MSG_helpPageSourceCode__</h1>
 
     <h4 style="display: inline">Client:</h4>
     <!-- Github logo -->
-    <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+    <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>
 
     <h4 style="display: inline; padding-left: 20px">Server:</h4>
     <!-- Github logo -->
@@ -127,16 +44,6 @@
 
     <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/help/styles.css

@@ -322,33 +322,4 @@ svg {
   cursor: default;
   background-color: var(--disabled);
   color: grey;
-}
-
-.dearrow-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-
-  font-size: 16px;
-}
-
-.dearrow-link img {
-  width: 35px;
-  padding: 10px
-}
-
-.dearrow-link .close-button {
-  opacity: 0;
-  width: 15px;
-  filter: invert(0.3);
-  transition: opacity 0.2s;
-}
-
-.dearrow-link:hover .close-button {
-  opacity: 1;
-}
-
-.hidden {
-  display: none;
 }

public/icons/PlayerStartIconSponsorBlocker.svg

@@ -1,17 +1,20 @@
 <?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="0.92.4 (5da689c313, 2019-01-14)">
+   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/">
   <metadata
      id="metadata20">
     <rdf:RDF>
@@ -33,16 +36,17 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1920"
-     inkscape:window-height="1001"
+     inkscape:window-height="983"
      id="namedview18"
      showgrid="false"
      inkscape:zoom="0.83098592"
-     inkscape:cx="-0.3618106"
-     inkscape:cy="322.44266"
-     inkscape:window-x="477"
-     inkscape:window-y="961"
+     inkscape:cx="444.69697"
+     inkscape:cy="271.26356"
+     inkscape:window-x="380"
+     inkscape:window-y="768"
      inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1-2" />
+     inkscape:current-layer="Layer_1-2"
+     inkscape:pagecheckerboard="0" />
   <defs
      id="defs4">
     <style
@@ -58,14 +62,15 @@
        data-name="Layer 1"
        style="fill:#ffffff">
       <path
-         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" />
+         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" />
       <path
-         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" />
+         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" />
     </g>
   </g>
 </svg>

public/icons/bolt.svg

@@ -1,37 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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

@@ -1,38 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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/dearrow.svg

@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<svg
-   width="800px"
-   height="800px"
-   viewBox="0 0 36 36"
-   aria-hidden="true"
-   role="img"
-   class="iconify iconify--twemoji"
-   preserveAspectRatio="xMidYMid meet"
-   version="1.1"
-   id="svg10"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"
-   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="defs14" />
-  <sodipodi:namedview
-     id="namedview12"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="0.65479573"
-     inkscape:cx="493.2836"
-     inkscape:cy="514.66432"
-     inkscape:window-width="1920"
-     inkscape:window-height="983"
-     inkscape:window-x="435"
-     inkscape:window-y="768"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg10" />
-  <path
-     fill="#1213BD"
-     d="M36 18.302c0 4.981-2.46 9.198-5.655 12.462s-7.323 5.152-12.199 5.152s-9.764-1.112-12.959-4.376S0 23.283 0 18.302s2.574-9.38 5.769-12.644S13.271 0 18.146 0s9.394 2.178 12.589 5.442C33.931 8.706 36 13.322 36 18.302z"
-     id="path2" />
-  <path
-     fill="#ffffff"
-     d="m 30.394282,18.410186 c 0,3.468849 -1.143025,6.865475 -3.416513,9.137917 -2.273489,2.272442 -5.670115,2.92874 -9.137918,2.92874 -3.467803,0 -6.373515,-1.147212 -8.6470033,-3.419654 -2.2734888,-2.272442 -3.5871299,-5.178154 -3.5871299,-8.647003 0,-3.46885 0.9420533,-6.746149 3.2144954,-9.0196379 2.2724418,-2.2734888 5.5507878,-3.9513905 9.0196378,-3.9513905 3.46885,0 6.492841,1.9322561 8.76633,4.204698 2.273489,2.2724424 3.788101,5.2974804 3.788101,8.7663304 z"
-     id="path4"
-     style="fill:#88c9f9;fill-opacity:1;stroke-width:1.04673" />
-  <path
-     fill="#292f33"
-     d="m 23.95823,17.818306 c 0,3.153748 -2.644888,5.808102 -5.798635,5.808102 -3.153748,0 -5.599825,-2.654354 -5.599825,-5.808102 0,-3.153747 2.446077,-5.721714 5.599825,-5.721714 3.153747,0 5.798635,2.567967 5.798635,5.721714 z"
-     id="path8"
-     style="stroke-width:1.18339;fill:#0a62a5;fill-opacity:1" />
-</svg>

public/icons/export.svg

@@ -1,124 +0,0 @@
-<?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

@@ -1,93 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-<?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

@@ -1,37 +0,0 @@
-<?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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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(6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/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

@@ -0,0 +1,40 @@
+<!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

@@ -38,7 +38,7 @@
     --white: black;
 }
 
-.medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
+.medium-description, .switch-container, .optionLabel, .categoryTableElement {
     color: var(--white);
 }
 
@@ -123,14 +123,6 @@ 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;
 }
@@ -257,7 +249,7 @@ input[type='number'] {
     opacity: 0;
 }
 
-.hidden, .sbhidden {
+.hidden {
     display: none !important;
 }
 
@@ -317,15 +309,6 @@ 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%;
@@ -363,10 +346,6 @@ input[type='number'] {
     padding: 4px;
 }
 
-.switch-label {
-    width: inherit;
-}
-
 .switch {
     position: relative;
     display: inline-block;
@@ -691,42 +670,4 @@ svg {
     #options > div {
         max-width: 100%;
     }
-}
-
-.upsellButton {
-    cursor: pointer;
-    vertical-align: middle;
-}
-
-.no-bottom-border {
-    border: none !important;
-    padding: 20px 0px 0px 0px !important;
-}
-
-.promotion-container {
-    width: fit-content;
-}
-
-.dearrow-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-}
-
-.dearrow-link > img {
-    width: 40px;
-    margin-right: 4px;
-}
-
-.dearrow-link .close-button {
-    opacity: 0;
-    width: 15px;
-    filter: invert(0.3);
-    transition: opacity 0.2s;
-    margin-left: 10px;
-}
-  
-.dearrow-link:hover .close-button {
-    opacity: 1;
 }

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/IconSponsorBlocker32px.png" type="image/png">
+  <link rel="icon" href="../icons/LogoSponsorBlocker64px.png" type="image/png">
   
   <link href="options.css" rel="stylesheet"/>
 
@@ -65,21 +65,18 @@
 
 				</div>
 
-				<div id="deArrowPromotion" class="promotion-container hidden">
-					<a class="dearrow-link"
-                        href="https://dearrow.ajay.app"
-                        target="_blank"
-                        rel="noreferrer">
-                        <img src="/icons/dearrow.svg"/>
-
-                        <span class="promotion-description">
-                            __MSG_DeArrowPromotionMessage__
-                        </span>
-
-						<img src="/icons/close.png" class="close-button"/>
-                    </a>
+				<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">
@@ -92,7 +89,7 @@
 					</div>
 				</div>
 				
-				<div data-type="toggle" data-sync="fullVideoSegments" class="no-bottom-border">
+				<div data-type="toggle" data-sync="fullVideoSegments">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="fullVideoSegments" type="checkbox" checked>
@@ -104,19 +101,6 @@
 					</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>
@@ -125,20 +109,6 @@
 	
 					<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">
@@ -168,34 +138,6 @@
 					<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 id="ytNeuterPromotion" class="promotion-container">
-					<a class="dearrow-link"
-                        href="https://github.com/mchangrh/yt-neuter/blob/main/docs/filters/sponsorblock.md#install"
-                        target="_blank"
-                        rel="noreferrer">
-
-                        <span class="promotion-description">
-                            __MSG_YtNeuterMessage__
-                        </span>
-                    </a>
-
-					<div class="small-description">__MSG_requiresUblock__</div>
-				</div>
-
 			</div>
 
 			<div id="interface" class="option-group hidden">
@@ -232,18 +174,6 @@
 						<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">
@@ -318,18 +248,6 @@
 						</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">
@@ -359,18 +277,6 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="cleanPopup" data-no-safari="true">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="cleanPopup" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="cleanPopup">
-							__MSG_cleanPopup__
-						</label>
-					</div>
-				</div>
-
 				<div data-type="toggle" data-sync="darkMode">
 					<div class="switch-container">
 						<label class="switch">
@@ -383,18 +289,6 @@
 					</div>
 				</div>
 
-				<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="showNewFeaturePopups" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="showNewFeaturePopups">
-							__MSG_hideNewFeatureUpdates__
-						</label>
-					</div>
-				</div>
-
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
@@ -407,18 +301,6 @@
 					</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">
@@ -428,11 +310,6 @@
 					<div class="inline"></div>
 				</div>
 
-				<div data-type="keybind-change" data-sync="skipToHighlightKeybind">	
-					<label class="optionLabel">__MSG_skip_to_category__:</label>
-					<div class="inline"></div>
-				</div>
-
 				<div data-type="keybind-change" data-sync="startSponsorKeybind">	
 					<label class="optionLabel">__MSG_setStartSponsorShortcut__:</label>
 					<div class="inline"></div>
@@ -443,16 +320,6 @@
 					<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">
@@ -472,8 +339,6 @@
 						</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>
@@ -502,17 +367,11 @@
 					</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">
+				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="supportInvidious" type="checkbox">
@@ -523,11 +382,11 @@
 						</label>
 					</div>
 	
-					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube, Piped, YouTube Kids)</div>
+					<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
 					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
 				</div>
 	
-				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious">
+				<div data-type="private-text-change" data-sync="invidiousInstances" data-no-safari="true" data-dependent-on="supportInvidious">
 					<div class="option-button trigger-button">
 						__MSG_addInvidiousInstance__
 					</div>
@@ -602,7 +461,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,33 +1,3 @@
-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)
@@ -80,10 +50,37 @@ 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
-18.2.0 <https://github.com/facebook/react>
+17.0.2 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -110,7 +107,7 @@ SOFTWARE.
 ******************************
 
 react-dom
-18.2.0 <https://github.com/facebook/react>
+17.0.2 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -137,7 +134,7 @@ SOFTWARE.
 ******************************
 
 scheduler
-0.23.0 <https://github.com/facebook/react>
+0.20.2 <https://github.com/facebook/react>
 MIT License
 
 Copyright (c) Facebook, Inc. and its affiliates.
@@ -159,48 +156,3 @@ 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.5 <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.2 <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,12 +18,6 @@
 
 	<br/>
 
-	<div class="center">
-		__MSG_invidiousPermissionRefresh__
-	</div>
-
-	<br/>
-
 	<div class="center">
 		<div id="acceptPermissionButton" class="option-button inline">
 			__MSG_acceptPermission__

public/permissions/styles.css

@@ -19,7 +19,7 @@ body {
     font-weight: bold;
 }
 
-.hidden, .sbhidden {
+.hidden {
     display: none !important;
 }
 

public/popup.css

@@ -1,64 +1,41 @@
 :root {
   --sb-main-font-family: "Source Sans Pro", sans-serif;
-  --sb-main-bg-color: #222;
+  --sb-main-bg-color: #222626;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
-  --sb-grey-fg-color: #999;
   --sb-red-bg-color: #cc1717;
 }
 
 /*
- * Generic utilities
+ * Container when popup displayed in-page
  */
-.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;
-}
 
-#sponsorBlockPopupBody .hidden, #sponsorBlockPopupBody .sbhidden {
-  display: none !important;
+#sponsorBlockPopupContainer {
+  position: relative;
+  margin-bottom: 16px;
 }
 
 /*
- * <button> elements that have icons
+ * Disable fixed popup width when displayed in-page
  */
- #setUsernameButton,
- #copyUserID,
- #submitUsername {
-   color: var(--sb-main-fg-color);
-   background: transparent;
-   width: fit-content;
-   padding: 0;
-   border: none;
- }
+
+#sponsorBlockPopupContainer #sponsorBlockPopupBody {
+  width: auto;
+}
 
 /*
  * Main containers
  */
+
 #sponsorBlockPopupHTML {
   color-scheme: dark;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
 #sponsorBlockPopupBody {
   margin: 0;
   width: 374px;
-  max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
-  font-size: 14px;
   font-family: var(--sb-main-font-family);
+  font-size: 14px;
   background-color: var(--sb-main-bg-color);
   color: var(--sb-main-fg-color);
   color-scheme: dark;
@@ -68,59 +45,18 @@
   text-align: center;
 }
 
-#sponsorblockPopup a,
-#sponsorblockPopup button {
-  cursor: pointer;
-}
-
 /*
  * Disable transition on all elements until the extension has loaded
  */
+
 .sb-preload * {
   transition: none !important;
 }
 
 /*
- * Alert indicating that Beta server is enabled
+ * Close popup button when displayed in-page
  */
-#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;
@@ -130,7 +66,6 @@
   top: 5px;
   right: 5px;
   opacity: 0.5;
-  z-index: 1;
 }
 
 .sbCloseButton:hover {
@@ -140,70 +75,52 @@
 /*
  * Header logo
  */
+
 .sbPopupLogo {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  user-select: none;
-  padding: 10px 0px 0px;
   font-size: 32px;
+  font-weight: bold;
+  justify-content: center;
+  user-select: none;
+  padding: 20px 0 10px;
 }
+
 .sbPopupLogo img {
-  margin: 8px;
+  margin-right: 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;
 }
 
-#issueReporterImportExport {
-  position: relative;
-}
-
-#refreshSegmentsButton, #issueReporterImportExport button {
-  background: transparent;
-  border-radius: 50%;
-  border: none;
-}
-
-#refreshSegmentsButton:hover, #issueReporterImportExport button:hover {
+#refreshSegmentsButton: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);
 }
@@ -211,59 +128,44 @@
 /*
  * Individual segments summaries (clickable <summary>)
  */
+
 .segmentSummary {
-  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;
+  font-weight: bold;
+  padding: 7px;
+  list-style: none;
+  white-space: nowrap;
 }
 
 /*
  * Category dot in segment
  */
+
 .sponsorTimesCategoryColorCircle {
-  margin-right: 8px;
+  margin: 0 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;
 }
 
 /*
  * "Voted!" text that appears after voting on a segment
  */
+
 .sponsorTimesThanksForVotingText {
   font-size: large;
 }
@@ -271,44 +173,113 @@
 /*
  * 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;
-  overflow: hidden;
-  display: flex;
+  margin-top: 10px;
 }
+
 .sbControlsMenu-item {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  background: transparent;
-  user-select: none;
+  background-color: var(--sb-grey-bg-color);
+  border: 0;
+  padding: 0;
   cursor: pointer;
-  border: none;
-  flex: 1;
+  user-select: none;
   padding: 10px 15px;
-  transition: background-color 0.2s ease-in-out;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
+
 .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);
@@ -318,304 +289,258 @@
   }
 }
 
-/*
- * "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 {
-  background-color: #fff3cd;
-  padding: 10px 15px;
-  display: block;
-  color: #664d03;
-}
-#whitelistForceCheck:hover {
-  background-color: #f2e4b7;
+  font-weight: bold;
+  text-decoration: underline;
+  font-size: large;
+  cursor: pointer;
+  padding: 10px 0;
 }
 
 /*
- * Submit box
+ * Container around the "Segment Starts Now" and "Submit Times" buttons
  */
+
 #mainControls {
-  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;
+  flex-flow: column;
+  align-items: center;
+  margin-bottom: 12px;
 }
 
 /*
- * Generic red buttons used for "Start Segment Now", "Submit Times" etc.
+ * Generic buttons used for "Segment Starts Now" and "Submit Times"
  */
+
 .sbMediumButton {
-  border: none;
-  font-size: 16px;
-  padding: 8px 16px;
-  border-radius: 28px;
-  display: inline-block;
+  background-color: var(--sb-red-bg-color);
+  border: 0;
   -moz-border-radius: 28px;
   -webkit-border-radius: 28px;
+  border-radius: 28px;
+  display: inline-block;
+  cursor: pointer;
   color: var(--sb-main-fg-color);
-  transition: 0.01s background-color;
+  font-size: 16px;
+  padding: 8px 37px;
   font-family: var(--sb-main-font-family);
-  background-color: var(--sb-red-bg-color);
+  transition: 0.01s background-color;
 }
+
 .sbMediumButton:hover,
 .sbMediumButton:focus {
-  background-color: #ec1c1c;
   outline: none;
+  background-color: #ec1c1c;
 }
+
 .sbMediumButton:active {
   position: relative;
   top: 1px;
 }
+
 /*
  * "Submit Times" button
  */
+
 #submitTimes {
   margin-top: 12px;
 }
 
 /*
- * Your Work box
+ * Heading utility class
  */
-.sbYourWorkBox {
-  margin: 16px;
-  margin-bottom: 8px;
-  border-radius: 8px;
-  border: 2px solid var(--sb-grey-bg-color);
+
+.sbHeader {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 10px 0 5px;
 }
+
+/*
+ * Side-by-side section of "Your Work"
+ */
+
 .sbYourWorkCols {
   display: flex;
-  border-top: 2px solid var(--sb-grey-bg-color);
-  border-bottom: 2px solid var(--sb-grey-bg-color);
+  margin: 0 20px 12px;
 }
 
-.sbStatsSentence {
-  padding: 6px 14px;
+.sbYourWorkCols > div {
+  display: flex;
+  align-items: center;
+  width: 50%;
+  justify-content: center;
 }
 
-.sbExtraInfo {
-  display: inline-block;
+/*
+ * <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;
 }
 
 /*
  * Increase font size of username input and display
  */
+
 #usernameValue,
-#usernameInput {
+#usernameInput,
+#sponsorTimesContributionsDisplay {
   font-size: 16px;
   flex: 1 0;
 }
-#sponsorTimesContributionsDisplay {
-  font-size: 16px;
-}
- /*
- * Improve alignment of username and submissions
+
+/*
+ * Left align "Username" and "Submissions" labels
  */
-#usernameElement > p,
+
+#usernameElement > div > p,
 #sponsorTimesContributionsContainer {
-  text-align: left;
+  text-align: start;
 }
 
 /*
- * Username
+ * Enable flexbox for buttons with SVG icon
  */
-#usernameElement {
-  padding: 8px 14px;
-  min-width: 50%;
-  width: 100%;
-}
-#setUsernameContainer {
-  display: flex;
-  align-items: center;
-  width: fit-content;
-}
+
 #setUsernameContainer > button {
   display: flex;
 }
-#setUsernameButton {
-  margin-right: 5px;
-  flex: 0 1;
-}
-#submitUsername {
-  padding-left: 16px;
-}
+
+/*
+ * Improve position of "Copy User ID" button
+ */
+
 #copyUserID {
   width: 100%;
   flex: 0 1;
 }
+
 /*
- * Truncate username display
+ * Container around username display and edit
  */
-#usernameValue {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  margin: 0 8px 0 0;
-  max-width: 165px;
-}
-/*
- * Set username form container with "expanded" state
- */
-#setUsername.SBExpanded {
-  text-align: left;
-}
-/*
- * Set username input
- */
-#usernameInput {
-  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);
+
+#setUsernameContainer {
+  display: flex;
 }
 
 /*
- * Submissions
-*/
-#sponsorTimesContributionsContainer {
-  padding: 8px 14px;
-  border-left: 2px solid var(--sb-grey-bg-color);
+ * 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;
+}
+
+/*
+ * Set username form container with "expanded" state
+ */
+
+#setUsername {
+  display: flex;
+}
+
+#setUsername.SBExpanded {
+  width: 200%;
+}
+
+/*
+ * 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);
+  text-overflow: ellipsis;
 }
 
 /*
  * Footer
  */
+
 #sbFooter {
-  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;
+  margin-top: 10px;
+  padding-bottom: 20px;
 }
 
-#sponsorTimesDonateContainer a {
+#sbFooter 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;
 }
 
-#sponsorBlockPopupBody .u-mZ {
+/*
+ * Generic spacing classes
+ */
+
+.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,69 +6,32 @@
     <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" style="visibility: hidden">
+  <body id="sponsorBlockPopupBody">
     <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 id="sbPopupLogo" class="sbPopupLogo">
+      <header class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
-        <p class="u-mZ">SponsorBlock</p>
+        <p class="u-mZ">SponsorLock</p>
       </header>
 
       <div id="videoInfo">
         <!-- Loading text -->
-        <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
+        <p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p>
         <!-- If the video was found in the database -->
-        <p id="videoFound" class="u-mZ grey-text"></p>
+        <p id="videoFound" class="u-mZ"></p>
         <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
           <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
         </button>
-        <!-- Video Segments -->
         <div id="issueReporterContainer">
-          <div id="issueReporterTabs" class="hidden">
-            <span id="issueReporterTabSegments" class="sbSelected">
-              <span>__MSG_SegmentsCap__</span>
-            </span>
-            <span id="issueReporterTabChapters">
-              <span>__MSG_Chapters__</span>
-            </span>
-          </div>
           <div id="issueReporterTimeButtons"></div>
-          <div id="issueReporterImportExport" class="hidden">
-            <div id="importExportButtons">
-              <button id="importSegmentsButton" title="__MSG_importSegments__">
-                <img src="/icons/import.svg" alt="Refresh icon" id="importSegments" />
-              </button>
-              <button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
-                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
-              </button>
-            </div>
-
-            <span id="importSegmentsMenu" class="hidden">
-              <textarea id="importSegmentsText" rows="5" style="width:80%"></textarea>
-
-              <button id="importSegmentsSubmit" title="__MSG_importSegments__">
-                __MSG_Import__
-              </button>
-            </span>
-          </div>
         </div>
       </div>
 
-      <!-- Toggle Box -->
       <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
-          <input type="checkbox" style="display: none" id="whitelistToggle">
+        <label  style="display: none" id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
+          <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>
@@ -78,7 +41,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>
@@ -93,37 +56,31 @@
         </button>
       </div>
 
-      <a id="whitelistForceCheck" class="hidden">
+      <p id="whitelistForceCheck" class="u-mZ hidden">
         __MSG_forceChannelCheckPopup__
-      </a>
+      </p>
 
-      <!-- Submit box -->
       <div id="mainControls" style="display: none">
-        <h1 class="sbHeader">
+        <p class="sbHeader">
           __MSG_recordTimesDescription__
-        </h1>
-        <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
-        <div style="text-align: center; margin: 8px 0;">
-          <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
-          <button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_OpenSubmissionMenu__</button>
+        </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>
         </div>
-        <span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
       </div>
 
-      <!-- Your Work box -->
-      <div id="sbYourWorkBox" class="sbYourWorkBox">
-        <h1 class="sbHeader" style="padding: 8px 15px;">
-          __MSG_yourWork__
-        </h1>
-        <div class="sbYourWorkCols">
-          <!-- Username -->
-          <div id="usernameElement">
-            <p class="u-mZ grey-text">__MSG_Username__:
-              <!-- loading/errors -->
-              <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
-            </p>
+      <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>
             <div id="setUsernameContainer">
-              <p id="usernameValue"></p>
+              <p id="usernameValue" class="u-mZ"></p>
               <button id="setUsernameButton" title="__MSG_setUsername__">
                 <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
               </button>
@@ -132,70 +89,65 @@
               </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>
-          <!-- 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 id="sponsorTimesContributionsContainer" class="hidden">
+          <div>
+            <p class="u-mZ">__MSG_Submissions__:</p>
+            <span id="sponsorTimesContributionsDisplay">
+              0
+            </span>
           </div>
         </div>
-
-        <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_savedPeopleFrom__
-          <b>
-            <span id="sponsorTimesViewsDisplay">0</span>
-          </b>
-          <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-          <br />
-          <span class="sbExtraInfo">
-            (
-            <b>
-              <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-              <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
-            </b>
-            <span>__MSG_youHaveSavedTimeEnd__</span>
-            )
-          </span>
-        </p>
-        <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_youHaveSkipped__
-          <b>
-            <span id="sponsorTimesSkipsDoneDisplay">0</span>
-          </b>
-          <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-          <span class="sbExtraInfo">
-            (
-              <b>
-                <span id="sponsorTimeSavedDisplay">0</span>
-                <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
-              </b>
-            )
-          </span>
-        </p>
       </div>
 
-      <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
-        <img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
-        <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
-          __MSG_considerDonating__
-        </a>
-        <img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
-      </div>
+      <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>
 
-      <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 />
+      <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>
-        <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
-        <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
-        <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
+        <br/>
+        <a 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 id="helpButton">__MSG_help__</a>
       </footer>
 
       <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>

public/res/countries.json

@@ -1 +0,0 @@
-{"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

@@ -1,232 +0,0 @@
-.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: 390px;
-	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 .sbhidden {
-	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;
-}
-
-/*
- * Buttons that appear under a segment on click
- */
-.voteButton {
-	height: 20px;
-	padding: 0 5px;
-	cursor: pointer;
-}
-
-.voteButton:hover {
-	opacity: 0.8;
-}

src/background.ts

@@ -2,213 +2,116 @@ import * as CompileConfig from "../config.json";
 
 import Config from "./config";
 import { Registration } from "./types";
-import "content-scripts-register-polyfill";
-import { sendRealRequestToCustomServer, setupBackgroundRequestProxy } from "../maze-utils/src/background-request-proxy";
-import { setupTabUpdates } from "../maze-utils/src/tab-updates";
-import { generateUserID } from "../maze-utils/src/setup";
 
 // Make the config public for debugging purposes
-
-window.SB = Config;
+// window.SB = Config; //no window for service workers
 
 import Utils from "./utils";
-import { getExtensionIdsToImportFrom } from "./utils/crossExtension";
-import { isFirefoxOrSafari } from "../maze-utils/src";
-import { injectUpdatedScripts } from "../maze-utils/src/cleanup";
-import { logWarn } from "./utils/logger";
-import { chromeP } from "../maze-utils/src/browserApi";
 const utils = new Utils({
     registerFirefoxContentScript,
     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
-utils.wait(() => Config.isReady()).then(function() {
-    if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
-});
+if (utils.isFirefox()) {
+    utils.wait(() => Config.config !== null).then(function() {
+        if (Config.config.supportInvidious) utils.setupExtraSiteContentScripts();
+    });
+} 
 
-setupBackgroundRequestProxy();
-setupTabUpdates(Config);
+chrome.tabs.onUpdated.addListener(function(tabId) {
+	chrome.tabs.sendMessage(tabId, {
+        message: 'update',
+	}, () => void chrome.runtime.lastError ); // Suppress error on Firefox
+});
 
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-    switch(request.message) {
+	switch(request.message) {
         case "openConfig":
-            chrome.tabs.create({url: chrome.runtime.getURL('options/options.html' + (request.hash ? '#' + request.hash : ''))});
-            return false;
+            chrome.tabs.create({url: chrome.runtime.getURL('options/lock-options.html' + (request.hash ? '#' + request.hash : ''))});
+            return;
         case "openHelp":
             chrome.tabs.create({url: chrome.runtime.getURL('help/index.html')});
-            return false;
+            return;
         case "openPage":
             chrome.tabs.create({url: chrome.runtime.getURL(request.url)});
-            return false;
+            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;
         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) {
-                try {
-                    popupPort[sender.tab.id]?.postMessage(request);
-                } catch (e) {
-                    // This can happen if the popup is closed
-                }
-            }
-            return false;
-        default:
-            return false;
 	}
 });
 
-chrome.runtime.onMessageExternal.addListener((request, sender, callback) => {
-    if (getExtensionIdsToImportFrom().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(async () => {
+    setTimeout(function() {
         const userID = Config.config.userID;
 
         // If there is no userID, then it is the first install.
-        if (!userID && !Config.local.alreadyInstalled){
+        if (!userID){
             //open up the install page
             chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
 
             //generate a userID
-            const newUserID = generateUserID();
+            const newUserID = utils.generateUserID();
             //save this UUID
             Config.config.userID = newUserID;
-            Config.local.alreadyInstalled = true;
 
             // 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 do this once the old version understands how to clean itself up
-    if (!isFirefoxOrSafari() && chrome.runtime.getManifest().version !== "5.4.13") {
-        injectUpdatedScripts().catch(logWarn);
-    }
 });
 
 /**
  * Only works on Firefox.
  * Firefox requires that it be applied after every extension restart.
- *
- * @param {JSON} options
+ * 
+ * @param {JSON} options 
  */
-async function registerFirefoxContentScript(options: Registration) {
-    if ("scripting" in chrome && "getRegisteredContentScripts" in chrome.scripting) {
-        const existingRegistrations = await chromeP.scripting.getRegisteredContentScripts({
-            ids: [options.id]
-        }).catch(() => []);
-
-        if (existingRegistrations.length > 0 
-            && existingRegistrations[0].matches.every((match) => options.matches.includes(match))) {
-            // No need to register another script, already registered
-            return;
-        }
-    }
-
-    await unregisterFirefoxContentScript(options.id);
-
-    if ("scripting" in chrome && "getRegisteredContentScripts" in chrome.scripting) {
-        await chromeP.scripting.registerContentScripts([{
-            id: options.id,
-            runAt: "document_start",
-            matches: options.matches,
-            allFrames: options.allFrames,
-            js: options.js,
-            css: options.css,
-            persistAcrossSessions: true,
-        }]);
-    } else {
-        chrome.contentScripts.register({
-            allFrames: options.allFrames,
-            js: options.js?.map?.(file => ({file})),
-            css: options.css?.map?.(file => ({file})),
-            matches: options.matches
-        }).then((registration) => void (contentScriptRegistrations[options.id] = registration));
-    }
+function registerFirefoxContentScript(options: Registration) {
+    const oldRegistration = contentScriptRegistrations[options.id];
+    if (oldRegistration) oldRegistration.unregister();
 
+    browser.contentScripts.register({
+        allFrames: options.allFrames,
+        js: options.js,
+        css: options.css,
+        matches: options.matches
+    }).then((registration) => void (contentScriptRegistrations[options.id] = registration));
 }
 
 /**
  * Only works on Firefox.
  * Firefox requires that this is handled by the background script
+ * 
  */
-async function  unregisterFirefoxContentScript(id: string) {
-    if ("scripting" in chrome && "getRegisteredContentScripts" in chrome.scripting) {
-        try {
-            await chromeP.scripting.unregisterContentScripts({
-                ids: [id]
-            });
-        } catch (e) {
-            // Not registered yet
-        }
-    } else {
-        if (contentScriptRegistrations[id]) {
-            contentScriptRegistrations[id].unregister();
-            delete contentScriptRegistrations[id];
-        }
-    }
+function unregisterFirefoxContentScript(id: string) {
+    contentScriptRegistrations[id].unregister();
+    delete contentScriptRegistrations[id];
 }
 
 async function submitVote(type: number, UUID: string, category: string) {
@@ -216,7 +119,7 @@ async function submitVote(type: number, UUID: string, category: string) {
 
     if (userID == undefined || userID === "undefined") {
         //generate one
-        userID = generateUserID();
+        userID = utils.generateUserID();
         Config.config.userID = userID;
     }
 
@@ -247,9 +150,35 @@ 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 (sendRealRequestToCustomServer(type, serverAddress + address, data));
+    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;
 }

src/components/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/CategoryPillComponent.tsx

@@ -7,13 +7,11 @@ 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 "../../maze-utils/src/formating";
 
 export interface CategoryPillProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
-    showTextByDefault: boolean;
-    showTooltipOnClick: boolean;
 }
 
 export interface CategoryPillState {
@@ -45,23 +43,18 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
         return (
             <span style={style}
-                className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
+                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.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
-
-                    {
-                        (this.props.showTextByDefault || this.state.open) &&
-                            <span className="sponsorBlockCategoryPillTitle">
-                                {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
-                            </span>
-                    }
+                    <span className="sponsorBlockCategoryPillTitle">
+                        {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
+                    </span>
                 </span>
 
                 {this.state.open && (
@@ -86,12 +79,9 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.extension.getURL("icons/close.png")}
+                <img src={chrome.runtime.getURL("icons/close.png")}
                     className="categoryPillClose"
-                    onClick={() => {
-                        this.setState({ show: false });
-                        this.closeTooltip();
-                    }}>
+                    onClick={() => this.setState({ show: false })}>
                 </img>
             </span>
         );
@@ -101,14 +91,6 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
         event.stopPropagation();
 
         if (this.state.show) {
-            if (this.props.showTooltipOnClick) {
-                if (this.state.open) {
-                    this.closeTooltip();
-                } else {
-                    this.openTooltip();
-                }
-            }
-
             this.setState({ open: !this.state.open });
         }
     }
@@ -122,52 +104,58 @@ 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
                 });
-
-                this.closeTooltip();
             } else if (response.statusCode !== 403) {
-                alert(getErrorMessage(response.statusCode, response.responseText));
+                alert(GenericUtils.getErrorMessage(response.statusCode, response.responseText));
             }
         }
     }
 
     private getColor(): string {
-        // 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}))`;
+        const configObject = Config.config.barTypes["preview-" + this.state.segment?.category] 
+            || Config.config.barTypes[this.state.segment?.category];
+        return configObject?.color;
     }
 
     private getTextColor(): string {
-        // 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}))`;
+        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;
+        }
     }
 
     private openTooltip(): void {
-        if (this.tooltip) {
-            this.tooltip.close();
-        }
-
-        const tooltipMount = document.querySelector("#above-the-fold, ytm-slim-owner-renderer") as HTMLElement;
+        const tooltipMount = document.querySelector("ytd-video-primary-info-renderer > #container") as HTMLElement;
         if (tooltipMount) {
             this.tooltip = new Tooltip({
                 text: this.getTitleText(),
                 referenceNode: tooltipMount,
-                bottomOffset: "0px",
+                bottomOffset: "70px",
                 opacity: 0.95,
                 displayTriangle: false,
                 showLogo: false,
-                showGotIt: false,
-                prependElement: tooltipMount.firstElementChild as HTMLElement
+                showGotIt: false
             });
         }
     }
 
     private closeTooltip(): void {
-        this.tooltip?.close?.();
+        this.tooltip?.close();
         this.tooltip = null;
     }
 

src/components/CategorySkipOptionsComponent.tsx

@@ -1,17 +1,15 @@
 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 ToggleOptionComponent from "./ToggleOptionComponent";
+import { getCategorySuffix } from "../utils/categoryUtils";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
     defaultColor?: string;
     defaultPreviewColor?: string;
-    children?: React.ReactNode;
 }
 
 export interface CategorySkipOptionsState {
@@ -19,14 +17,7 @@ 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);
@@ -34,8 +25,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 {
@@ -62,7 +53,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)}
@@ -77,19 +68,17 @@ 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 !== "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) &&
+                    {this.props.category !== "exclusive_access" &&
                         <td id={this.props.category + "PreviewColorOption"}
                             className="previewColorOption">
                             <input
@@ -103,7 +92,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")}
@@ -113,8 +102,6 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             </a>
                         </td>
                 </tr>
-                
-                {this.getExtraOptionComponents(this.props.category)}
 
             </>
         );
@@ -123,10 +110,10 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
         let option: CategorySkipOption;
 
+        this.removeCurrentCategorySelection();
+
         switch (event.target.value) {
-            case "disable":
-                Config.config.categorySelections = Config.config.categorySelections.filter(
-                    categorySelection => categorySelection.name !== this.props.category);
+            case "disable": 
                 return;
             case "showOverlay":
                 option = CategorySkipOption.ShowOverlay;
@@ -139,34 +126,38 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             case "autoSkip":
                 option = CategorySkipOption.AutoSkip;
 
-                if (this.props.category === "filler" && !Config.config.isVip) {
-                    if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
-                        event.target.value = "disable";
-                    }
-                }
-
                 break;
         }
 
-        const existingSelection = Config.config.categorySelections.find(selection => selection.name === this.props.category);
-        if (existingSelection) {
-            existingSelection.option = option;
-        } else {
-            Config.config.categorySelections.push({
-                name: this.props.category,
-                option: option
-            });
-        }
+        Config.config.categorySelections.push({
+            name: this.props.category,
+            option: option
+        });
 
-        Config.forceSyncUpdate("categorySelections");
+        // 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;
+            }
+        }
     }
 
     getCategorySkipOptions(): JSX.Element[] {
         const elements: JSX.Element[] = [];
 
         let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
-        if (this.props.category === "chapter") optionNames = ["disable", "showOverlay"]
-        else if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
+        if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
 
         for (const optionName of optionNames) {
             elements.push(
@@ -181,8 +172,6 @@ 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
@@ -199,50 +188,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         }
 
         // Make listener get called
-        this.setBarColorTimeout = setTimeout(() => {
-            Config.config.barTypes = Config.config.barTypes;
-        }, 50);
-    }
-
-    getExtraOptionComponents(category: string): JSX.Element[] {
-        const result = [];
-        for (const option of this.getExtraOptions(category)) {
-            result.push(
-                <tr key={option.configKey}>
-                    <td id={`${category}_${option.configKey}`} className="categoryExtraOptions">
-                        <ToggleOptionComponent 
-                            configKey={option.configKey} 
-                            label={option.label}
-                            style={{width: "inherit"}}
-                        />
-                    </td>
-                </tr>
-            )
-        }
-
-        return result;
-    }
-
-    getExtraOptions(category: string): ToggleOption[] {
-        switch (category) {
-            case "chapter":
-                return [{
-                    configKey: "renderSegmentsAsChapters",
-                    label: chrome.i18n.getMessage("renderAsChapters"),
-                    dontDisable: true
-                }, {
-                    configKey: "showSegmentNameInChapterBar",
-                    label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
-                    dontDisable: true
-                }];
-            case "music_offtopic":
-                return [{
-                    configKey: "autoSkipOnMusicVideos",
-                    label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
-                }];
-            default:
-                return [];
-        }
+        Config.config.barTypes = Config.config.barTypes;
     }
 }
 

src/components/ChapterVoteComponent.tsx

@@ -1,133 +0,0 @@
-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 "../../maze-utils/src/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 ? "sbhidden" : "")}
-                        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 ? "sbhidden" : "")}
-                        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/KeybindComponent.tsx

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

src/components/KeybindDialogComponent.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { ChangeEvent } from "react";
-import Config from "../../config";
-import { Keybind, formatKey, keybindEquals } from "../../../maze-utils/src/config";
+import Config from "../config";
+import { Keybind } from "../types";
+import { keybindEquals, formatKey } from "../utils/configUtils";
 
 export interface KeybindDialogProps { 
     option: string;
@@ -123,7 +124,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: "c"}, {key: "o"},
+                {key: "ArrowRight"}, {key: "ArrowLeft"}, {key: "ArrowUp"}, {key: "ArrowDown"}, {key: "ArrowRight", ctrl: true}, {key: "ArrowLeft", ctrl: true}, {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/NoticeComponent.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import Config from "../config";
-import SbSvg from "../svg-icons/sb_svg";
 
 enum CountdownMode {
     Timer,
@@ -9,43 +8,39 @@ enum CountdownMode {
 }
 
 export interface NoticeProps {
-    noticeTitle: string;
+    noticeTitle: string,
 
-    maxCountdownTime?: () => number;
-    dontPauseCountdown?: boolean;
-    amountOfPreviousNotices?: number;
-    showInSecondSlot?: boolean;
-    timed?: boolean;
-    idSuffix?: string;
+    maxCountdownTime?: () => number,
+    amountOfPreviousNotices?: number,
+    showInSecondSlot?: boolean,
+    timed?: boolean,
+    idSuffix?: string,
 
-    fadeIn?: boolean;
-    startFaded?: boolean;
-    firstColumn?: React.ReactElement[] | React.ReactElement;
-    firstRow?: React.ReactElement;
-    bottomRow?: React.ReactElement[];
+    fadeIn?: boolean,
+    startFaded?: boolean,
+    firstColumn?: React.ReactElement,
+    firstRow?: React.ReactElement,
+    bottomRow?: React.ReactElement[],
 
-    smaller?: boolean;
-    limitWidth?: boolean;
-    extraClass?: string;
-    hideLogo?: boolean;
-    hideRightInfo?: boolean;
-    logoFill?: string;
+    smaller?: boolean,
+    limitWidth?: 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 {
-    maxCountdownTime: () => number;
+    noticeTitle: string,
 
-    countdownTime: number;
-    countdownMode: CountdownMode;
+    maxCountdownTime: () => number,
+
+    countdownTime: number,
+    countdownMode: CountdownMode,
 
     mouseHovering: boolean;
 
@@ -59,13 +54,9 @@ 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;
@@ -80,6 +71,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
         // Setup state
         this.state = {
+            noticeTitle: props.noticeTitle,
+
             maxCountdownTime,
 
             //the countdown until this notice closes
@@ -104,11 +97,9 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         return (
             <div id={"sponsorSkipNotice" + this.idSuffix} 
                 className={"sponsorSkipObject sponsorSkipNoticeParent"
-                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")
-                    + (this.props.extraClass ? ` ${this.props.extraClass}` : "")}
+                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")}
                 onMouseEnter={(e) => this.onMouseEnter(e) }
                 onMouseLeave={() => this.timerMouseLeave()}
-                ref={this.parentRef}
                 style={noticeStyle} >
                 <div className={"sponsorSkipNoticeTableContainer" 
                         + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
@@ -123,18 +114,16 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 {/* Left column */}
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
-                                    {!this.props.hideLogo &&
-                                        <SbSvg
-                                            id={"sponsorSkipLogo" + this.idSuffix} 
-                                            fill={this.props.logoFill}
-                                            className="sponsorSkipLogo sponsorSkipObject"/>
-                                    }
+                                    <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                        className="sponsorSkipLogo sponsorSkipObject"
+                                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
+                                    </img>
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}
-                                        style={{float: "left", marginRight: this.props.hideLogo ? "0px" : null}}
+                                        style={{float: "left"}}
                                         className="sponsorSkipMessage sponsorSkipObject">
                                         
-                                        {this.props.noticeTitle}
+                                        {this.state.noticeTitle}
                                     </span>
 
                                     {this.props.firstColumn}
@@ -143,30 +132,28 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 {this.props.firstRow}
 
                                 {/* Right column */}
-                                {!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>
-                                        ) : ""}
+                                <td className="sponsorSkipNoticeRightSection"
+                                    style={{top: "9.32px"}}>
                                     
+                                    {/* Time left */}
+                                    {this.props.timed ? ( 
+                                        <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
+                                            onClick={() => this.toggleManualPause()}
+                                            className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
 
-                                        {/* Close button */}
-                                        <img src={chrome.extension.getURL("icons/close.png")}
-                                            className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
-                                                            + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
-                                            onClick={() => this.close()}>
-                                        </img>
-                                    </td>
-                                }
+                                            {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>
                             </tr> 
 
                             {this.props.children}
@@ -196,21 +183,21 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                     <span 
                         id={"skipNoticeTimerText" + this.idSuffix}
                         key="skipNoticeTimerText"
-                        className={this.state.countdownMode !== CountdownMode.Timer ? "sbhidden" : ""} >
-                            {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())}
+                        className={this.state.countdownMode !== CountdownMode.Timer ? "hidden" : ""} >
+                            {this.state.countdownTime + "s"}
                     </span>
                 ),(
                     <img 
                         id={"skipNoticeTimerPaused" + this.idSuffix}
                         key="skipNoticeTimerPaused"
-                        className={this.state.countdownMode !== CountdownMode.Paused ? "sbhidden" : ""}
+                        className={this.state.countdownMode !== CountdownMode.Paused ? "hidden" : ""}
                         src={chrome.runtime.getURL("icons/pause.svg")}
                         alt={chrome.i18n.getMessage("paused")} />
                 ),(
                     <img 
                         id={"skipNoticeTimerStopped" + this.idSuffix}
                         key="skipNoticeTimerStopped"
-                        className={this.state.countdownMode !== CountdownMode.Stopped ? "sbhidden" : ""}
+                        className={this.state.countdownMode !== CountdownMode.Stopped ? "hidden" : ""}
                         src={chrome.runtime.getURL("icons/stop.svg")}
                         alt={chrome.i18n.getMessage("manualPaused")} />
         )];
@@ -299,7 +286,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     }
 
     pauseCountdown(): void {
-        if (!this.props.timed || this.props.dontPauseCountdown) return;
+        if (!this.props.timed) return;
 
         //remove setInterval
         if (this.countdownInterval) clearInterval(this.countdownInterval);
@@ -357,6 +344,12 @@ 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
 
@@ -391,10 +384,6 @@ 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,11 +1,9 @@
 import * as React from "react";
 
 export interface NoticeTextSelectionProps {
-    icon?: string;
-    text: string;
-    idSuffix: string;
-    onClick?: (event: React.MouseEvent) => unknown;
-    children?: React.ReactNode;
+    text: string,
+    idSuffix: string,
+    onClick?: (event: React.MouseEvent) => unknown
 }
 
 export interface NoticeTextSelectionState {
@@ -26,42 +24,14 @@ class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionPr
         }
 
         return (
-            <tr id={"sponsorTimesInfoMessage" + this.props.idSuffix}
+            <p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
                 onClick={this.props.onClick}
                 style={style}
                 className="sponsorTimesInfoMessage">
-                    
-                <td>
-                    {this.props.icon ? 
-                        <img src={chrome.runtime.getURL(this.props.icon)} className="sponsorTimesInfoIcon" /> 
-                    : null}
-
-                    <span>
-                        {this.getTextElements(this.props.text)}
-                    </span>
-                </td>
-            </tr>
+                    {this.props.text}
+            </p>
         );
     }
-
-    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

@@ -1,63 +0,0 @@
-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,31 +1,23 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorHideType, 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 "../../maze-utils/src/setup";
-import { keybindToString } from "../../maze-utils/src/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;
 
@@ -46,9 +38,9 @@ export interface SkipNoticeState {
     maxCountdownTime?: () => number;
     countdownText?: string;
 
-    skipButtonStates?: SkipButtonState[];
-    skipButtonCallbacks?: Array<(buttonIndex: number, index: number, forceSeek: boolean) => void>;
-    showSkipButton?: boolean[];
+    skipButtonText?: string;
+    skipButtonCallback?: (index: number) => void;
+    showSkipButton?: boolean;
 
     editing?: boolean;
     choosingCategory?: boolean;
@@ -73,7 +65,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
     amountOfPreviousNotices: number;
     showInSecondSlot: boolean;
-
+    
     idSuffix: string;
 
     noticeRef: React.MutableRefObject<NoticeComponent>;
@@ -106,7 +98,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;
@@ -117,15 +109,6 @@ 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,
@@ -133,13 +116,13 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             messageOnClick: null,
 
             //the countdown until this notice closes
-            maxCountdownTime,
-            countdownTime: maxCountdownTime(),
+            maxCountdownTime: () => Config.config.skipNoticeDuration,
+            countdownTime: Config.config.skipNoticeDuration,
             countdownText: null,
 
-            skipButtonStates,
-            skipButtonCallbacks,
-            showSkipButton: [true, true],
+            skipButtonText: this.getUnskipText(),
+            skipButtonCallback: (index) => this.unskip(index),
+            showSkipButton: true,
 
             editing: false,
             choosingCategory: false,
@@ -158,7 +141,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(null, 0, SkipButtonState.Start));
+            Object.assign(this.state, this.getUnskippedModeInfo(0, this.getSkipText()));
         }
     }
 
@@ -169,21 +152,13 @@ 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}
+            <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}
@@ -192,10 +167,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 ref={this.noticeRef}
                 closeListener={() => this.closeListener()}
                 smaller={this.state.smaller}
-                logoFill={Config.config.barTypes[this.segments[0].category].color}
                 limitWidth={true}
-                firstColumn={firstColumn}
-                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
+                bottomRow={[...this.getMessageBoxes()]}
                 onMouseEnter={() => this.onMouseEnter() } >
             </NoticeComponent>
         );
@@ -208,7 +181,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">
 
@@ -267,11 +240,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 }
 
                 {/* Unskip/Skip Button */}
-                {!this.props.smaller || this.segments[0].actionType === ActionType.Mute
-                    ? this.getSkipButton(1) : null}
+                {!this.props.smaller ? this.getSkipButton() : null}
 
-                {/* Never show button */}
-                {!this.autoSkip || this.props.startReskip ? "" :
+                {/* Never show button if autoSkip is enabled */}
+                {!this.autoSkip ? "" : 
                     <td className="sponsorSkipNoticeRightSection"
                         key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
@@ -345,17 +317,14 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         ];
     }
 
-    getSkipButton(buttonIndex: number): JSX.Element {
-        if (this.state.showSkipButton[buttonIndex] && (this.segments.length > 1
+    getSkipButton(): JSX.Element {
+        if (this.state.showSkipButton && (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: ([SkipNoticeAction.Unskip0, SkipNoticeAction.Unskip1].includes(this.state.actionState))
-                    ? this.selectedColor : this.unselectedColor
+                color: (this.state.actionState === SkipNoticeAction.Unskip) ? this.selectedColor : this.unselectedColor
             };
             if (this.contentContainer().onMobileYouTube) {
                 style.padding = "20px";
@@ -367,15 +336,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     <button id={"sponsorSkipUnskipButton" + this.idSuffix}
                             className="sponsorSkipObject sponsorSkipNoticeButton"
                             style={style}
-                            onClick={() => this.prepAction(buttonIndex === 1 ? SkipNoticeAction.Unskip1 : SkipNoticeAction.Unskip0)}>
-                        {this.getSkipButtonText(buttonIndex, forceSeek ? ActionType.Skip : null)
-                            + (!forceSeek && this.state.showKeybindHint
-                                ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
+                            onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
+                        {this.state.skipButtonText + (this.state.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
                     </button>
                 </span>
             );
         }
-        return null;
     }
 
     getSubmissionChooser(): JSX.Element[] {
@@ -383,7 +349,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}>
@@ -408,18 +374,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[] {
@@ -472,11 +438,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 case SkipNoticeAction.CopyDownvote:
                     this.resetStateToStart(SkipNoticeAction.CopyDownvote, true);
                     break;
-                case SkipNoticeAction.Unskip0:
-                    this.resetStateToStart(SkipNoticeAction.Unskip0);
-                    break;
-                case SkipNoticeAction.Unskip1:
-                    this.resetStateToStart(SkipNoticeAction.Unskip1);
+                case SkipNoticeAction.Unskip:
+                    this.resetStateToStart(SkipNoticeAction.Unskip);
                     break;
             }
         }
@@ -484,8 +447,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) {
@@ -504,11 +467,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             case SkipNoticeAction.CopyDownvote:
                 this.copyDownvote(index);
                 break;
-            case SkipNoticeAction.Unskip0:
-                this.unskipAction(0, index, false);
-                break;
-            case SkipNoticeAction.Unskip1:
-                this.unskipAction(1, index, true);
+            case SkipNoticeAction.Unskip:
+                this.unskipAction(index);
                 break;
             default:
                 this.resetStateToStart();
@@ -544,7 +504,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         const sponsorVideoID = this.props.contentContainer().sponsorVideoID;
         const sponsorTimesSubmitting : SponsorTime = {
             segment: this.segments[index].segment,
-            UUID: generateUserID() as SegmentUUID,
+            UUID: utils.generateUserID() as SegmentUUID,
             category: this.segments[index].category,
             actionType: this.segments[index].actionType,
             source: SponsorSourceType.Local
@@ -570,8 +530,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         });
     }
 
-    unskipAction(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.state.skipButtonCallbacks[buttonIndex](buttonIndex, index, forceSeek);
+    unskipAction(index: number): void {
+        this.state.skipButtonCallback(index);
     }
 
     openEditingOptions(): void {
@@ -598,29 +558,28 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         return this.props.contentContainer().lockedCategories.includes(category) ? "sponsorBlockLockedColor" : ""
     }
 
-    unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
+    unskip(index: number): void {
+        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime);
 
-        this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
+        this.unskippedMode(index, this.getReskipText());
     }
 
-    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);
+    reskip(index: number): void {
+        this.contentContainer().reskipSponsorTime(this.segments[index]);
 
         const newState: SkipNoticeState = {
-            skipButtonStates,
-            skipButtonCallbacks,
+            skipButtonText: this.getUnskipText(),
+            skipButtonCallback: this.unskip.bind(this),
 
             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();
@@ -628,54 +587,30 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     /** Sets up notice to be not skipped yet */
-    unskippedMode(buttonIndex: number, index: number, skipButtonState: SkipButtonState): void {
+    unskippedMode(index: number, buttonText: string): void {
         //setup new callback and reset countdown
-        this.setState(this.getUnskippedModeInfo(buttonIndex, index, skipButtonState), () => {
+        this.setState(this.getUnskippedModeInfo(index, buttonText), () => {
             this.noticeRef.current.resetCountdown();
         });
     }
 
-    getUnskippedModeInfo(buttonIndex: number, index: number, skipButtonState: SkipButtonState): SkipNoticeState {
+    getUnskippedModeInfo(index: number, buttonText: string): SkipNoticeState {
         const changeCountdown = this.segments[index].actionType !== ActionType.Poi;
 
-        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 maxCountdownTime = changeCountdown ? () => {
             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 {
@@ -722,7 +657,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             messages
         });
     }
-
+    
     addVoteButtonInfo(message: string): void {
         this.setState({
             thanksForVotingText: message
@@ -748,12 +683,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
-    unmutedListener(time: number): void {
-        if (this.props.segments.length === 1
-                && this.props.segments[0].actionType === ActionType.Mute
-                && time >= this.props.segments[0].segment[1]) {
+    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]) {
             this.setState({
-                showSkipButton: [false, true]
+                showSkipButton: false
             });
         }
     }
@@ -768,50 +703,36 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         });
     }
 
-    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) {
+    private getUnskipText(): string {
+        switch (this.props.segments[0].actionType) {
             case ActionType.Mute: {
                 return chrome.i18n.getMessage("unmute");
             }
-            case ActionType.Skip:
+            case ActionType.Skip: 
             default: {
                 return chrome.i18n.getMessage("unskip");
             }
         }
     }
 
-    private getRedoText(forceType?: ActionType): string {
-        const actionType = forceType || this.segments[0].actionType;
-        switch (actionType) {
+    private getReskipText(): string {
+        switch (this.props.segments[0].actionType) {
             case ActionType.Mute: {
                 return chrome.i18n.getMessage("mute");
             }
-            case ActionType.Skip:
+            case ActionType.Skip: 
             default: {
                 return chrome.i18n.getMessage("reskip");
             }
         }
     }
 
-    private getStartText(forceType?: ActionType): string {
-        const actionType = forceType || this.segments[0].actionType;
-        switch (actionType) {
+    private getSkipText(): string {
+        switch (this.props.segments[0].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,39 +1,32 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, 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 "../../maze-utils/src/formating";
-import { asyncRequestToServer } from "../utils/requests";
+
+
+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 categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
-    .map((name) => chrome.i18n.getMessage("category_" + name).split(/\/|\s|-/)));
+const DEFAULT_CATEGORY = "chooseACategory";
 
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
 
@@ -41,7 +34,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     categoryOptionRef: React.RefObject<HTMLSelectElement>;
     actionTypeOptionRef: React.RefObject<HTMLSelectElement>;
-    descriptionOptionRef: React.RefObject<HTMLInputElement>;
 
     configUpdateListener: () => void;
 
@@ -49,36 +41,26 @@ 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.previousSkipType = ActionType.Skip;
         this.state = {
             editing: false,
             sponsorTimeEdits: [null, null],
-            selectedCategory: DEFAULT_CATEGORY as Category,
-            description: sponsorTime.description || "",
-            suggestedNames: [],
-            chapterNameSelectorOpen: false,
-            chapterNameSelectorHovering: false
+            selectedCategory: DEFAULT_CATEGORY as Category
         };
     }
 
     componentDidMount(): void {
         // Prevent inputs from triggering key events
-        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', function (event) {
+        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('keydown', function (event) {
             event.stopPropagation();
         });
 
@@ -104,7 +86,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     render(): React.ReactElement {
         this.checkToShowFullVideoWarning();
-        this.checkToShowChapterWarning();
 
         const style: React.CSSProperties = {
             textAlign: "center"
@@ -114,6 +95,14 @@ 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 = {};
@@ -126,14 +115,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     style={timeDisplayStyle}
                     className="sponsorTimeDisplay">
 
-                        {sponsorTime.actionType !== ActionType.Poi ? (
-                            <span id={"startButton" + this.idSuffix}
-                                className="sponsorNowButton"
-                                onClick={() => this.setTimeTo(0, 0)}>
-                                    {chrome.i18n.getMessage("bracketStart")}
-                            </span>
-                        ): ""}
-
                         <span id={"nowButton0" + this.idSuffix}
                             className="sponsorNowButton"
                             onClick={() => this.setTimeToNow(0)}>
@@ -141,13 +122,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]}
-                            onKeyDown={(e) => e.stopPropagation()}
-                            onKeyUp={(e) => e.stopPropagation()}
-                            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 ? (
@@ -158,13 +137,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]}
-                                    onKeyDown={(e) => e.stopPropagation()}
-                                    onKeyUp={(e) => e.stopPropagation()}
-                                    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}
@@ -189,15 +166,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     style={timeDisplayStyle}
                     className="sponsorTimeDisplay"
                     onClick={this.toggleEditTime.bind(this)}>
-                        {getFormattedTime(segment[0], true) +
+                        {utils.getFormattedTime(segment[0], true) +
                             ((!isNaN(segment[1]) && sponsorTime.actionType !== ActionType.Poi)
-                                ? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment[1], true) : "")}
+                                ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segment[1], true) : "")}
                 </div>
             );
         }
 
         return (
-            <div id={"sponsorTimeEditContainer" + this.idSuffix} style={style}>
+            <div style={style}>
                 
                 {timeDisplay}
 
@@ -207,8 +184,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         className="sponsorTimeEditSelector sponsorTimeCategories"
                         defaultValue={sponsorTime.category}
                         ref={this.categoryOptionRef}
-                        style={{color: "inherit", backgroundColor: "inherit"}}
-                        onChange={(event) => this.categorySelectionChange(event)}>
+                        onChange={this.categorySelectionChange.bind(this)}>
                         {this.getCategoryOptions()}
                     </select>
 
@@ -218,7 +194,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
-                            src={chrome.extension.getURL("icons/help.svg")}
+                            src={chrome.runtime.getURL("icons/help.svg")}
                             title={chrome.i18n.getMessage("categoryGuidelines")} />
                     </a>
                 </div>
@@ -231,7 +207,6 @@ 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)}
@@ -239,34 +214,6 @@ 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}
-                            onKeyDown={(e) => e.stopPropagation()}
-                            onKeyUp={(e) => e.stopPropagation()}
-                            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 */}
@@ -277,8 +224,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     {chrome.i18n.getMessage("delete")}
                 </span>
 
-                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) 
-                    && sponsorTime.actionType !== ActionType.Chapter ? (
+                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) ? (
                     <span id={"sponsorTimePreviewButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
                         onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}>
@@ -294,14 +240,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </span>
                 ): ""}
 
-                {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) ? (
-                    <span id={"sponsorTimePreviewEndButton" + this.idSuffix}
-                        className="sponsorTimeEditButton"
-                        onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey, true)}>
-                        {chrome.i18n.getMessage("End")}
-                    </span>
-                ): ""}
-
                 {(!isNaN(segment[1]) && sponsorTime.actionType != ActionType.Full) ? (
                     <span id={"sponsorTimeEditButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
@@ -317,19 +255,19 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
         
         // check if change is small engough to show tooltip
-        const before = getFormattedTimeToSeconds(sponsorTimeEdits[index]);
-        const after = getFormattedTimeToSeconds(targetValue);
+        const before = utils.getFormattedTimeToSeconds(sponsorTimeEdits[index]);
+        const after = utils.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
@@ -342,7 +280,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
         
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
-        let timeAsNumber = getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
+        let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
         if (timeAsNumber !== null && e.deltaY != 0) {
             if (e.deltaY < 0) {
                 timeAsNumber += step;
@@ -351,8 +289,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             } else {
                 timeAsNumber = 0;
             }
-            
-            sponsorTimeEdits[index] = getFormattedTime(timeAsNumber, true);
+            sponsorTimeEdits[index] = utils.getFormattedTime(timeAsNumber, true);
             if (sponsorTime.actionType === ActionType.Poi) sponsorTimeEdits[1] = sponsorTimeEdits[0];
 
             this.setState({sponsorTimeEdits});
@@ -362,29 +299,26 @@ 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"), "scrollToEdit", () => { Config.config.scrollToEditTimeUpdate = true });
+            this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), () => { Config.config.scrollToEditTimeUpdate = true });
         }
     }
 
-    showToolTip(text: string, id: string, buttonFunction?: () => void): boolean {
+    showToolTip(text: string, buttonFunction?: () => void): boolean {
         const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
-        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"
-                });
-            }
+        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"
+            });
 
             return true;
         } else {
@@ -399,25 +333,12 @@ 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"), "fullVideoWarning")) {
+            if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"))) {
                 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}
@@ -427,13 +348,6 @@ 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}
@@ -451,10 +365,9 @@ 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 (chosenCategory !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === chosenCategory)) {
+        if (event.target.value !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === event.target.value)) {
+            const chosenCategory = event.target.value;
             event.target.value = DEFAULT_CATEGORY;
             
             // Alert that they have to enable this category first
@@ -468,12 +381,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
 
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
-        this.handleReplacingLostTimes(chosenCategory, sponsorTime.actionType, sponsorTime);
+        this.handleReplacingLostTimes(event.target.value as Category, sponsorTime.actionType, sponsorTime);
         this.saveEditTimes();
-
-        if (this.props.categoryChangeListener) {
-            this.props.categoryChangeListener(this.props.index, chosenCategory);
-        }
     }
 
     actionTypeSelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
@@ -505,8 +414,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             }
 
             this.previousSkipType = ActionType.Full;
-        } else if ((category === "chooseACategory" || ((CompileConfig.categorySupport[category]?.includes(ActionType.Skip)
-                        || CompileConfig.categorySupport[category]?.includes(ActionType.Chapter))
+        } else if ((category === "chooseACategory" || (CompileConfig.categorySupport[category]?.includes(ActionType.Skip) 
                         && ![ActionType.Poi, ActionType.Full].includes(this.getNextActionType(category, actionType))))
                     && this.previousSkipType !== ActionType.Skip) {
             if (this.timesBeforeChanging[0]) {
@@ -551,17 +459,12 @@ 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 {
@@ -584,56 +487,28 @@ 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 [getFormattedTime(sponsorTime.segment[0], true),
-            getFormattedTime(sponsorTime.segment[1], true)];
+        return [utils.getFormattedTime(sponsorTime.segment[0], true),
+            utils.getFormattedTime(sponsorTime.segment[1], true)];
     }
 
-    lastEditTime = 0;
-    editTimeTimeout: NodeJS.Timeout | null = null;
     saveEditTimes(): void {
-        // Rate limit edits
-        const timeSinceLastEdit = Date.now() - this.lastEditTime;
-        if (timeSinceLastEdit < 200) {
-            if (!this.editTimeTimeout) {
-                this.editTimeTimeout = setTimeout(() => {
-                    this.saveEditTimes();
-                }, timeSinceLastEdit)
-            }
-
-            return;
-        }
-
-        this.lastEditTime = Date.now();
-        this.editTimeTimeout = null;
-
         const sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
-        const category = this.categoryOptionRef.current.value as Category
 
         if (this.state.editing) {
-            const startTime = getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
-            const endTime = getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
+            const startTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
+            const endTime = utils.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 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;
+        const inputActionType = this.actionTypeOptionRef?.current?.value as ActionType;
+        sponsorTimesSubmitting[this.props.index].actionType = this.getNextActionType(category, inputActionType);
 
         Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
         Config.forceSyncUpdate("unsubmittedSegments");
@@ -652,20 +527,17 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             : CompileConfig.categorySupport[category]?.[0] ?? ActionType.Skip
     }
 
-    previewTime(ctrlPressed = false, shiftPressed = false, skipToEndTime = false): void {
+    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;
 
-        const startTime = sponsorTimes[index].segment[0];
-        const endTime = sponsorTimes[index].segment[1];
-
-        // If segment starts at 0:00, start playback at the end of the segment
-        const skipTime = (startTime === 0 || skipToEndTime) ? endTime : (startTime - (seekTime * this.props.contentContainer().v.playbackRate));
-
-        this.props.contentContainer().previewTime(skipTime, !skipToEndTime);
+        this.props.contentContainer().previewTime(skipTime - (seekTime * this.props.contentContainer().v.playbackRate));
     }
 
     inspectTime(): void {
@@ -709,41 +581,6 @@ 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 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,14 +1,10 @@
 import * as React from "react";
 import Config from "../config"
-import GenericNotice from "../render/GenericNotice";
-import { Category, ContentContainer } from "../types";
-import * as CompileConfig from "../../config.json";
+import { ContentContainer } from "../types";
 
 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
@@ -20,8 +16,8 @@ export interface SubmissionNoticeProps {
 }
 
 export interface SubmissionNoticeState {
-    noticeTitle: string;
-    messages: string[];
+    noticeTitle: string,
+    messages: string[],
     idSuffix: string;
 }
 
@@ -36,10 +32,6 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
     videoObserver: MutationObserver;
 
-    guidelinesReminder: GenericNotice;
-
-    lastSegmentCount: number;
-
     constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
@@ -49,14 +41,12 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     
         const noticeTitle = chrome.i18n.getMessage("confirmNoticeTitle");
 
-        this.lastSegmentCount = this.props.contentContainer().sponsorTimesSubmitting.length;
-
         // Setup state
         this.state = {
             noticeTitle,
             messages: [],
             idSuffix: "SubmissionNotice"
-        };
+        }
     }
 
     componentDidMount(): void {
@@ -77,42 +67,13 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         }
     }
 
-    componentDidUpdate() {
-        const currentSegmentCount = this.props.contentContainer().sponsorTimesSubmitting.length;
-        if (currentSegmentCount > this.lastSegmentCount) {
-            this.lastSegmentCount = currentSegmentCount;
-
-            const scrollElement = this.noticeRef.current.getElement().current.querySelector("#sponsorSkipNoticeMiddleRowSubmissionNotice");
-            scrollElement.scrollTo({
-                top: scrollElement.scrollHeight + 1000
-            });
-        }
-    }
-
     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}
-                firstColumn={[sortButton, exportButton]}>
+                zIndex={5000}>
 
                 {/* Text Boxes */}
                 {this.getMessageBoxes()}
@@ -167,7 +128,6 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                     index={i}
                     contentContainer={this.props.contentContainer}
                     submissionNotice={this}
-                    categoryChangeListener={this.categoryChangeListener.bind(this)}
                     ref={timeRef}>
                 </SponsorTimeEditComponent>
             );
@@ -194,10 +154,9 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     }
 
     cancel(): void {
-        this.guidelinesReminder?.close();
         this.noticeRef.current.close(true);
 
-        this.contentContainer().resetSponsorSubmissionNotice(false);
+        this.contentContainer().resetSponsorSubmissionNotice();
 
         this.props.closeListener();
     }
@@ -231,79 +190,6 @@ 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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Config from "../config";
+import { Category, SegmentUUID, SponsorTime } from "../types";
+
+export interface TooltipProps {
+    text: string;
+    show: boolean;
+}
+
+export interface TooltipState {
+
+}
+
+class TooltipComponent extends React.Component<TooltipProps, TooltipState> {
+
+    constructor(props: TooltipProps) {
+        super(props);
+    }
+
+    render(): React.ReactElement {
+        const style: React.CSSProperties = {
+            display: this.props.show ? "flex" : "none",
+            position: "absolute",
+        }
+
+        return (
+            <span style={style}
+                className={"sponsorBlockTooltip"} >
+                <span className="sponsorBlockTooltipText">
+                    {this.props.text}
+                </span>
+            </span>
+        );
+    }
+}
+
+export default TooltipComponent;

src/components/options/ToggleOptionComponent.tsx

@@ -1,57 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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,467 +1,436 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
-import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
-import { HashedValue } from "../maze-utils/src/hash";
-
-export interface Permission {
-    canSubmit: boolean;
-}
+import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
+import { keybindEquals } from "./utils/configUtils";
 
 interface SBConfig {
-    userID: string;
-    isVip: boolean;
-    permissions: Record<Category, Permission>;
+    userID: string,
+    isVip: boolean,
+    lastIsVipUpdate: number,
     /* Contains unsubmitted segments that the user has created. */
-    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;
-    showNewFeaturePopups: boolean;
-    donateClicked: number;
-    autoHideInfoButton: boolean;
-    autoSkipOnMusicVideos: boolean;
+    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,
     colorPalette: {
-        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;
-    deArrowInstalled: boolean;
-    showDeArrowPromotion: boolean;
-    showDeArrowInSettings: boolean;
-    shownDeArrowPromotion: boolean;
-    showZoomToFillError2: boolean;
-    cleanPopup: boolean;
+        red: string,
+        white: string,
+        locked: string
+    },
+    scrollToEditTimeUpdate: boolean,
+    categoryPillUpdate: boolean,
+    darkMode: boolean,
 
     // Used to cache calculated text color info
     categoryPillColors: {
         [key in Category]: {
-            lastColor: string;
-            textColor: string;
+            lastColor: string,
+            textColor: string
         }
-    };
+    }
 
-    skipKeybind: Keybind;
-    skipToHighlightKeybind: Keybind;
-    startSponsorKeybind: Keybind;
-    submitKeybind: Keybind;
-    nextChapterKeybind: Keybind;
-    previousChapterKeybind: Keybind;
+    skipKeybind: Keybind,
+    startSponsorKeybind: Keybind,
+    submitKeybind: Keybind,
 
     // What categories should be skipped
-    categorySelections: CategorySelection[];
-
-    payments: {
-        licenseKey: string;
-        lastCheck: number;
-        lastFreeCheck: number;
-        freeAccess: boolean;
-        chaptersAllowed: boolean;
-    };
+    categorySelections: CategorySelection[],
 
     // 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>;
-    navigationApiAvailable: boolean;
-    
-    // Used when sync storage disbaled
-    alreadyInstalled: boolean;
+    downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>,
 }
 
-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
+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();
         });
-    }
+    }), new Promise<void>((resolve) => {
+        chrome.storage.local.get(null, function(items) {
+            Config.cachedLocalStorage = <SBStorage> <unknown> items; 
+            resolve();
+        });
+    })]);
 }
 
 function migrateOldSyncFormats(config: SBConfig) {
-    if (config["showZoomToFillError"]) {
-        chrome.storage.sync.remove("showZoomToFillError");
-    }
+    //
+}
 
-    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];
-        }
-
-        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;
+// 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];
+                }
             }
         }
     }
 
-    if (config["disableAutoSkip"]) {
-        for (const selection of config.categorySelections) {
-            if (selection.name === "sponsor") {
-                selection.option = CategorySkipOption.ManualSkip;
-
-                chrome.storage.sync.remove("disableAutoSkip");
-            }
+    for (const key in Config.localDefaults) {
+        if(!Object.prototype.hasOwnProperty.call(Config.cachedLocalStorage, key)) {
+            Config.cachedLocalStorage[key] = Config.localDefaults[key];
         }
     }
-
-    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");
-    }
 }
 
-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,
-    showNewFeaturePopups: 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,
-    deArrowInstalled: false,
-    showDeArrowPromotion: true,
-    showDeArrowInSettings: true,
-    shownDeArrowPromotion: false,
-    showZoomToFillError2: true,
-    cleanPopup: false,
+// Sync config
+setupConfig();
 
-    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" },
-    skipToHighlightKeybind: { key: "Enter", ctrl: true },
-    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,
-    alreadyInstalled: false
-};
-
-const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);
-export default Config;
+export default Config;

src/dearrowPromotion.ts

@@ -1,72 +0,0 @@
-import { waitFor } from "../maze-utils/src";
-import { getYouTubeTitleNode } from "../maze-utils/src/elements";
-import { getHash } from "../maze-utils/src/hash";
-import { getVideoID, isOnInvidious, isOnMobileYouTube } from "../maze-utils/src/video";
-import Config from "./config";
-import { Tooltip } from "./render/Tooltip";
-import { isDeArrowInstalled } from "./utils/crossExtension";
-import { isVisible } from "./utils/pageUtils";
-import { asyncRequestToServer } from "./utils/requests";
-
-let tooltip: Tooltip = null;
-export async function tryShowingDeArrowPromotion() {
-    if (Config.config.showDeArrowPromotion
-            && !isOnMobileYouTube()
-            && !isOnInvidious()
-            && document.URL.includes("watch")
-            && Config.config.showUpsells 
-            && Config.config.showNewFeaturePopups
-            && (Config.config.skipCount > 30 || !Config.config.trackViewCount)) {
-
-            if (!await isDeArrowInstalled()) {
-                try {
-                    const element = await waitFor(() => getYouTubeTitleNode(), 5000, 500, (e) => isVisible(e)) as HTMLElement;
-                    if (element && element.innerText && badTitle(element.innerText)) {
-                        const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
-                        const deArrowData = await asyncRequestToServer("GET", "/api/branding/" + hashPrefix);
-                        if (!deArrowData.ok) return;
-
-                        const deArrowDataJson = JSON.parse(deArrowData.responseText);
-                        const title = deArrowDataJson?.[getVideoID()]?.titles?.[0];
-                        if (title && title.title && (title.locked || title.votes > 0)) {
-                            Config.config.showDeArrowPromotion = false;
-        
-                            tooltip = new Tooltip({
-                                text: chrome.i18n.getMessage("DeArrowTitleReplacementSuggestion") + "\n\n" + title.title,
-                                linkOnClick: () => {
-                                    window.open("https://dearrow.ajay.app");
-                                    Config.config.shownDeArrowPromotion = true;
-                                },
-                                secondButtonText: chrome.i18n.getMessage("hideNewFeatureUpdates"),
-                                referenceNode: element,
-                                prependElement: element.firstElementChild as HTMLElement,
-                                timeout: 15000,
-                                positionRealtive: false,
-                                containerAbsolute: true,
-                                bottomOffset: "inherit",
-                                topOffset: "55px",
-                                leftOffset: "0",
-                                rightOffset: "0",
-                                topTriangle: true,
-                                center: true,
-                                opacity: 1
-                            });
-                        }
-                    }
-                } catch { } // eslint-disable-line no-empty
-            } else {
-                Config.config.showDeArrowPromotion = false;
-            }
-        }
-}
-
-/**
- * Two upper case words (at least 2 letters long)
- */
-function badTitle(title: string): boolean {
-    return !!title.match(/\p{Lu}{2,} \p{Lu}{2,}[.!? ]/u);
-}
-
-export function hideDeArrowPromotion(): void {
-    if (tooltip) tooltip.close();
-}

src/document.ts

@@ -1,3 +0,0 @@
-import { init } from "../maze-utils/src/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,46 +1,15 @@
-import { localizeHtmlPage } from "../maze-utils/src/setup";
 import Config from "./config";
 import { showDonationLink } from "./utils/configUtils";
 
-import { waitFor } from "../maze-utils/src";
-import { isDeArrowInstalled } from "./utils/crossExtension";
+import Utils from "./utils";
+const utils = new Utils();
 
-if (document.readyState === "complete") {
-    init();
-} else {
-    document.addEventListener("DOMContentLoaded", init);
-}
-
-// DeArrow promotion
-waitFor(() => Config.isReady()).then(() => {
-    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
-        isDeArrowInstalled().then((installed) => {
-            if (!installed) {
-                const deArrowPromotion = document.getElementById("dearrow-link");
-                deArrowPromotion.classList.remove("hidden");
-
-                deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
-
-                const text = deArrowPromotion.querySelector("#dearrow-link-text");
-                text.textContent = `${chrome.i18n.getMessage("DeArrowPromotionMessage2").split("?")[0]}? ${chrome.i18n.getMessage("DeArrowPromotionMessage3")}`;
-
-                const closeButton = deArrowPromotion.querySelector(".close-button");
-                closeButton.addEventListener("click", (e) => {
-                    e.preventDefault();
-
-                    deArrowPromotion.classList.add("hidden");
-                    Config.config.showDeArrowPromotion = false;
-                    Config.config.showDeArrowInSettings = false;
-                });
-            }
-        });
-    }
-});
+window.addEventListener('DOMContentLoaded', init);
 
 async function init() {
-    localizeHtmlPage();
+    utils.localizeHtmlPage();
 
-    await waitFor(() => Config.config !== null);
+    await utils.wait(() => Config.config !== null);
 
     if (!Config.config.darkMode) {
         document.documentElement.setAttribute("data-theme", "light");

src/js-components/chat.ts

@@ -0,0 +1,47 @@
+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")
+    });
+}