bump version

Fix #2074 and Fix #2078

.editorconfig

@@ -0,0 +1,18 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,ts,tsx}]
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[package.json]
+indent_style = space
+indent_size = 2

.eslintrc.json

@@ -0,0 +1,37 @@
+{
+    "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/FUNDING.yml

@@ -0,0 +1,3 @@
+github: ajayyy-org
+patreon: ajayyy
+custom: [sponsor.ajay.app/donate]

.github/pull_request_template.md

@@ -0,0 +1,5 @@
+- [ ] I agree to license my contribution under GPL-3.0 and agree to allow distribution on app stores as outlined in [LICENSE-APPSTORE](https://github.com/ajayyy/SponsorBlock/blob/master/LICENSE-APPSTORE.txt)
+
+To test this pull request, follow the [instructions in the wiki](https://github.com/ajayyy/SponsorBlock/wiki/Testing-a-Pull-Request).
+
+***

.github/workflows/ci.yml

@@ -0,0 +1,70 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+
+  build:
+    name: Create artifacts
+    runs-on: ubuntu-latest
+
+    steps:
+      # Initialization
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm ci
+      - name: Copy configuration
+        run: cp config.json.example config.json
+
+      # Run linter
+      - name: Lint
+        run: npm run lint
+
+      # Create Chrome artifacts
+      - name: Create Chrome artifacts
+        run: npm run build:chrome
+      - uses: actions/upload-artifact@v3
+        with:
+          name: ChromeExtension
+          path: dist
+      - run: mkdir ./builds
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+        with:
+          args: zip -qq -r ./builds/ChromeExtension.zip ./dist
+
+      # Create Firefox artifacts
+      - name: Create Firefox artifacts
+        run: npm run build:firefox
+      - uses: actions/upload-artifact@v3
+        with:
+          name: FirefoxExtension
+          path: dist
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+        with:
+          args: zip -qq -r ./builds/FirefoxExtension.zip ./dist
+
+      # Create Beta artifacts (Builds with the name changed to beta)
+      - name: Create Chrome Beta artifacts
+        run: npm run build:chrome -- --env stream=beta
+      - uses: actions/upload-artifact@v3
+        with:
+          name: ChromeExtensionBeta
+          path: dist
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+        with:
+          args: zip -qq -r ./builds/ChromeExtensionBeta.zip ./dist
+
+      - name: Create Firefox Beta artifacts
+        run: npm run build:firefox -- --env stream=beta
+      - uses: actions/upload-artifact@v3
+        with:
+          name: FirefoxExtensionBeta
+          path: dist
+      - uses: montudor/action-zip@0852c26906e00f8a315c704958823928d8018b28
+        with:
+          args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
+

.github/workflows/release.yml

@@ -0,0 +1,140 @@
+name: Upload Release Build
+
+on: 
+  release:
+    types: [published]
+
+jobs:
+
+  build:
+    name: Upload Release
+    runs-on: ubuntu-latest
+
+    steps:
+      # Initialization
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Copy configuration
+        run: cp config.json.example config.json
+
+      # Create source artifact with submodule
+      - name: Create directory
+        run: cd ..; mkdir ./builds
+      - name: Zip Source code
+        run: zip -r ../builds/SourceCodeUseThisOne.zip *
+      - name: Upload Source to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: ../builds/SourceCodeUseThisOne.zip
+          name: SourceCodeUseThisOne.zip
+          path: ../builds/SourceCodeUseThisOne.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm ci
+      
+      # Create Chrome artifacts
+      - name: Create Chrome artifacts
+        run: npm run build:chrome
+      - 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
+      - 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
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/ChromeExtensionBeta.zip *
+      - name: Upload ChromeExtensionBeta to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: builds/ChromeExtensionBeta.zip
+          name: ChromeExtensionBeta.zip
+          path: ./builds/ChromeExtensionBeta.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+
+      # Create Safari artifacts
+      - name: Create Safari artifacts
+        run: npm run build:safari
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/SafariExtension.zip *
+      - name: Upload SafariExtension to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: builds/SafariExtension.zip
+          name: SafariExtension.zip
+          path: ./builds/SafariExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Create Edge artifacts
+      - name: Clear dist for Edge
+        run: rm -rf ./dist
+      - name: Create Edge artifacts
+        run: npm run build:edge
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/EdgeExtension.zip *
+      - name: Upload EdgeExtension to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: builds/EdgeExtension.zip
+          name: EdgeExtension.zip
+          path: ./builds/EdgeExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Firefox Beta
+      - name: Create Firefox Beta artifacts
+        run: npm run build:firefox -- --env stream=beta
+      - uses: actions/upload-artifact@v3
+        with:
+          name: FirefoxExtensionBeta
+          path: dist
+      - name: Zip Artifacts
+        run: cd ./dist ; zip -r ../builds/FirefoxExtensionBeta.zip *
+
+      # Create Firefox Signed Beta version
+      - name: Create Firefox Signed Beta artifacts
+        run: npm run web-sign
+        env:
+          WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
+          WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
+      - name: Install rename
+        run: sudo apt-get install rename
+      - name: Rename signed file
+        run: cd ./web-ext-artifacts ; rename 's/.*/FirefoxSignedInstaller.xpi/' *
+      - uses: actions/upload-artifact@v3
+        with:
+          name: FirefoxExtensionSigned.xpi
+          path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
+
+      - name: Upload FirefoxSignedInstaller.xpi to release
+        uses: Shopify/upload-to-release@07611424e04f1475ddf550e1c0dd650b867d5467
+        with:
+          args: web-ext-artifacts/FirefoxSignedInstaller.xpi
+          name: FirefoxSignedInstaller.xpi
+          path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/take-action.yml

@@ -0,0 +1,14 @@
+# .github/workflows/take.yml 
+name: Assign issue to contributor
+on: 
+  issue_comment:
+
+jobs:
+  assign:
+    name: Take an issue
+    runs-on: ubuntu-latest
+    steps:
+    - name: take the issue
+      uses: bdougie/take-action@28b86cd8d25593f037406ecbf96082db2836e928
+      env:
+        GITHUB_TOKEN: ${{ github.token }}

.github/workflows/tests.yml

@@ -0,0 +1,31 @@
+name: Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    name: Run tests
+    runs-on: ubuntu-latest
+
+    steps:
+      # Initialization
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm ci
+      - run: sudo apt-get install chromium-chromedriver
+      
+      - name: Copy configuration
+        run: cp config.json.example config.json
+      - name: Run tests
+        run: npm run test
+
+      - name: Upload results on fail
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: Test Results
+          path: ./test-results

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

@@ -0,0 +1,39 @@
+name: update oss attributions
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'package.json'
+      - 'package-lock.json'
+  workflow_dispatch:
+
+jobs:
+  update-oss:
+    runs-on: ubuntu-latest 
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install and generate attribution
+        run: |
+          npm ci
+          npm i -g oss-attribution-generator
+          generate-attribution
+          mv ./oss-attribution/attribution.txt ./public/oss-attribution/attribution.txt
+      - name: Prettify attributions
+        run: |
+          cd ci && npx ts-node prettify.ts
+
+      - name: Create pull request to update list
+        uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04
+        # v4.2.3
+        with:
+          commit-message: Update OSS Attribution
+          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
+          branch: ci/oss_attribution
+          title: Update OSS Attribution
+          body: Automated OSS Attribution update

.github/workflows/updateInvidous.yml

@@ -0,0 +1,31 @@
+name: update invidious
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 1 * *' # check every month
+
+jobs:
+  check-list:
+    runs-on: ubuntu-latest 
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - name: Download instance lists
+        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
+      - 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
+        with:
+          commit-message: Update Invidious List
+          author: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
+          branch: ci/update_invidious_list
+          title: Update Invidious List
+          body: Automated Invidious list update

.gitignore

@@ -1,2 +1,12 @@
-config.js
-ignored
+config.json
+ignored
+.idea/
+node_modules
+web-ext-artifacts
+.vscode/
+dist/
+tmp/
+.DS_Store
+ci/invidious_instances.json
+ci/piped_instances.json
+test-results

.gitmodules

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

@@ -0,0 +1,31 @@
+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 GPL-3.0 and agree to allow distribution on app stores as outlined in LICENSE-APPSTORE.
+
+# 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.
+

LICENSE-APPSTORE.txt

@@ -0,0 +1,13 @@
+The developers are aware that the terms of service that
+apply to apps distributed via Apple's App Store services and similar app stores may conflict
+with rights granted under the SponsorBlock license, the GNU General
+Public License, version 3. The copyright holders of the SponsorBlock 
+project do not wish this conflict to prevent the otherwise-compliant 
+distribution of derived apps via the App Store and similar app stores. 
+Therefore, we have committed not to pursue any license
+violation that results solely from the conflict between the GNU GPLv3
+and the Apple App Store terms of service or similar app stores. In
+other words, as long as you comply with the GPL in all other respects,
+including its requirements to provide users with source code and the
+text of the license, we will not object to your distribution of the
+SponsorBlock project through the App Store.

LICENSE-HISTORY.txt

@@ -0,0 +1,171 @@
+Prior to commit 7338af3b384e2297eaf710443121ac840099a9f1, this project was licensed under LGPL 3.0.
+
+You must follow LICENSE instead if you want to use any newer version.
+
+----
+
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

README.md

@@ -1,36 +1,78 @@
-![Logo](icons/LogoSponsorBlocker256px.png)
-<br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
+<p align="center">
+  <a href="https://sponsor.ajay.app"><img src="public/icons/LogoSponsorBlocker256px.png" alt="Logo"></img></a>
 
-# SponsorBlock
+  <br/>
+  <sub>Logo by <a href="https://github.com/munadikieh">@munadikieh</a></sub>
+</p>
 
-SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
+<h1 align="center">SponsorBlock</h1>
 
-# Available for Chrome and Firefox
+<p align="center">
+  <b>Download:</b>
+  <a href="https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone">Chrome/Chromium</a> |
+  <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://sponsor.ajay.app">Website</a> |
+  <a href="https://sponsor.ajay.app/stats">Stats</a>
+</p>
 
-Chrome: https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone/
+<p align="center">
+  <b>3rd-Party Ports:</b>
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports#mpv-media-player">MPV</a> |
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports#kodi">Kodi</a> |
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports#Chromecast">Chromecast</a> |
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports#ios">iOS</a>
+</p>
 
-Firefox: https://addons.mozilla.org/addon/sponsorblock/
+<p align="center">
+    <a href="https://addons.mozilla.org/addon/sponsorblock/?src=external-github"><img src="https://img.shields.io/amo/users/sponsorblock?label=Firefox%20Users" alt="Badge"></img></a>
+    <a href="https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone"><img src="https://img.shields.io/chrome-web-store/users/mnjggcdmjocbbbhaepdhchncahnbgone?label=Chrome%20Users" alt="Badge"></img></a>
+    <a href="https://sponsor.ajay.app/stats"><img src="https://img.shields.io/badge/dynamic/json?label=Submissions&query=totalSubmissions&suffix=%20segments&url=http%3A%2F%2Fsponsor.ajay.app%2Fapi%2FgetTotalStats&color=darkred" alt="Badge"></img></a>
+    <a href="https://sponsor.ajay.app/stats"><img src="https://img.shields.io/badge/dynamic/json?label=Active%20Users&query=apiUsers&url=http%3A%2F%2Fsponsor.ajay.app%2Fapi%2FgetTotalStats&color=darkblue" alt="Badge"></img></a>
+    <a href="https://sponsor.ajay.app/stats"><img src="https://img.shields.io/badge/dynamic/json?label=Time%20Saved%20From%20Skips&query=daysSaved&url=http%3A%2F%2Fsponsor.ajay.app%2Fapi%2FgetDaysSavedFormatted&color=darkgreen&suffix=%20days" alt="Badge"></img></a>
+</p>
+
+
+
+SponsorBlock is an open-source crowdsourced browser extension to skip sponsor segments in YouTube videos. Users submit when a sponsor happens from the extension, and the extension automatically skips sponsors it knows about. It also supports skipping other categories, such as intros, outros and reminders to subscribe.
+
+It also supports Invidious.
+
+**Translate:** [![Crowdin](https://badges.crowdin.net/sponsorblock/localized.svg)](https://crowdin.com/project/sponsorblock)
+
+# Important Links
+
+See the [Wiki](https://github.com/ajayyy/SponsorBlock/wiki) for important links.
 
 # Server
 
 The backend server code is available here: https://github.com/ajayyy/SponsorBlockServer
 
-It is a simple Sqlite database that will hold all the timing data.
+To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database ([License](https://github.com/ajayyy/SponsorBlock/wiki/Database-and-API-License)). If you are planning on using the database in another project, please read the [API Docs](https://wiki.sponsor.ajay.app/index.php/API_Docs) page for more information.
 
-To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database.db. So, you can download a backup or get archive.org to take a backup if you do desire.
+The dataset and API are now being used in some [ports](https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports) as well as a [neural network](https://github.com/andrewzlee/NeuralBlock).
 
-Hopefully this project can be combined with projects like [this](https://github.com/Sponsoff/sponsorship_remover) and use this data to create a neural network to predict when sponsored segments happen. That project is sadly abandoned now, so I have decided to attempt to revive this idea.
+# API
 
-# Previous extension
+You can read the API docs [here](https://wiki.sponsor.ajay.app/w/API_Docs).
 
-This project is partially based off of [this experimental extension](https://github.com/OfficialNoob/YTSponsorSkip). That extension has the basic video skipping functionality.
-
-# Build Yourself
-
-You can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
+# Building
+See [CONTRIBUTING.md](CONTRIBUTING.md)
 
 # Credit
 
-The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) is used to grab the time the video was published.
+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.
 
-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="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+Originally forked from [YTSponsorSkip](https://github.com/NDevTK/YTSponsorSkip), but very little code remains.
+
+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>
+* <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>
+* <a href="https://iconmonstr.com/about/#creator">Alexander Kahlkopf</a> from <a href="https://iconmonstr.com/">iconmonstr.com</a> and are licensed by <a href="https://iconmonstr.com/license/">iconmonstr License</a>
+
+
+### License
+
+This project is licensed under GNU GPL v3 or any later version

background.js

@@ -1,238 +0,0 @@
-var previousVideoID = null
-
-//the id of this user, randomly generated once per install
-var userID = null;
-
-//when a new tab is highlighted
-chrome.tabs.onActivated.addListener(
-  function(activeInfo) {
-    chrome.tabs.get(activeInfo.tabId, function(tab) {
-      let id = getYouTubeVideoID(tab.url);
-
-      //if this even is a YouTube tab
-      if (id) {
-        videoIDChange(id, activeInfo.tabId);
-      }
-    })
-  }
-);
-
-//when a tab changes URLs
-chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-    if (changeInfo != undefined && changeInfo.url != undefined) {
-      let id = getYouTubeVideoID(changeInfo.url);
-
-      //if URL changed and is youtube video message contentScript the video id
-      if (changeInfo.url && id) { 
-        videoIDChange(id, tabId);
-      }
-    }
-});
-
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "submitTimes") {
-    submitTimes(request.videoID, callback);
-
-    //this allows the callback to be called later by the submitTimes function
-    return true;
-  } else if (request.message == "addSponsorTime") {
-    addSponsorTime(request.time);
-  } else if (request.message == "getSponsorTimes") {
-    getSponsorTimes(request.videoID, function(sponsorTimes) {
-      callback({
-        sponsorTimes: sponsorTimes
-      })
-    });
-
-    //this allows the callback to be called later
-    return true;
-  } else if (request.message == "submitVote") {
-    submitVote(request.type, request.UUID, callback);
-
-    //this allows the callback to be called later
-    return true;
-  }
-});
-
-
-//gets the sponsor times from memory
-function getSponsorTimes(videoID, callback) {
-  let sponsorTimes = [];
-  let sponsorTimeKey = "sponsorTimes" + videoID;
-  chrome.storage.sync.get([sponsorTimeKey], function(result) {
-    let sponsorTimesStorage = result[sponsorTimeKey];
-    if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
-      sponsorTimes = sponsorTimesStorage;
-    }
-
-    callback(sponsorTimes)
-  });
-}
-
-function addSponsorTime(time) {
-  getSponsorTimes(previousVideoID, function(sponsorTimes) {
-    //add to sponsorTimes
-    if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
-      //it is an end time
-      sponsorTimes[sponsorTimes.length - 1][1] = parseInt(time);
-    } else {
-      //it is a start time
-      let sponsorTimesIndex = sponsorTimes.length;
-      sponsorTimes[sponsorTimesIndex] = [];
-
-      sponsorTimes[sponsorTimesIndex][0] = parseInt(time);
-    }
-
-    //save this info
-    let sponsorTimeKey = "sponsorTimes" + previousVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
-  });
-}
-
-function submitVote(type, UUID, callback) {
-  getUserID(function(userID) {
-    //publish this vote
-    sendRequestToServer('GET', "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        callback({
-          successType: 1
-        });
-      } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
-        //duplicate vote
-        callback({
-          successType: 0
-        });
-      } else if (error) {
-        //error while connect
-        callback({
-          successType: -1
-        });
-      }
-    })
-  })
-}
-
-function submitTimes(videoID, callback) {
-  //get the video times from storage
-  let sponsorTimeKey = 'sponsorTimes' + videoID;
-  chrome.storage.sync.get([sponsorTimeKey], function(result) {
-    let sponsorTimes = result[sponsorTimeKey];
-
-    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-      //submit these times
-      for (let i = 0; i < sponsorTimes.length; i++) {
-        getUserID(function(userIDStorage) {
-          //submit the sponsorTime
-          sendRequestToServer('GET', "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
-          + "&userID=" + userIDStorage, function(xmlhttp, error) {
-            if (xmlhttp.readyState == 4 && !error) {
-              callback({
-                statusCode: xmlhttp.status
-              });
-            } else if (error) {
-              callback({
-                statusCode: -1
-              });
-            }
-          });
-        });
-      }
-
-      //add these to the storage log
-      chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
-        let currentContributionAmount = 0;
-        if (result.sponsorTimesContributed != undefined) {
-          //current contribution amount is known
-          currentContributionAmount = result.sponsorTimesContributed;
-        }
-
-        //save the amount contributed
-        chrome.storage.sync.set({"sponsorTimesContributed": currentContributionAmount + sponsorTimes.length});
-      });
-    }
-  });
-}
-
-function videoIDChange(currentVideoID, tabId) {
-  //send a message to the content script
-  chrome.tabs.sendMessage(tabId, {
-    message: 'ytvideoid',
-    id: currentVideoID
-  });
-
-  //warn them if they had unsubmitted times
-  if (previousVideoID != null) {
-    //get the sponsor times from storage
-    let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
-    chrome.storage.sync.get([sponsorTimeKey], function(result) {
-      let sponsorTimes = result[sponsorTimeKey];
-
-      if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-        //warn them that they have unsubmitted sponsor times
-        chrome.notifications.create("stillThere" + Math.random(), {
-          type: "basic",
-          title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
-          message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
-          iconUrl: "./icons/LogoSponsorBlocker256px.png"
-        });
-      }
-
-      //set the previous video id to the currentID
-      previousVideoID = currentVideoID;
-    });
-  } else {
-    previousVideoID = currentVideoID;
-  }
-}
-
-function getUserID(callback) {
-  if (userID != null) {
-    callback(userID);
-    return;
-  }
-
-  //if it is not cached yet, grab it from storage
-  chrome.storage.sync.get(["userID"], function(result) {
-    let userIDStorage = result.userID;
-    if (userIDStorage != undefined) {
-      userID = userIDStorage;
-      callback(userID);
-    } else {
-      //generate a userID
-      userID = generateUUID();
-      
-      //save this UUID
-      chrome.storage.sync.set({"userID": userID});
-
-      callback(userID);
-    }
-  });
-}
-
-function sendRequestToServer(type, address, callback) {
-  let xmlhttp = new XMLHttpRequest();
-
-  xmlhttp.open(type, serverAddress + address, true);
-
-  if (callback != undefined) {
-    xmlhttp.onreadystatechange = function () {
-      callback(xmlhttp, false);
-    };
-  
-    xmlhttp.onerror = function(ev) {
-      callback(xmlhttp, true);
-    };
-  }
-
-  //submit this request
-  xmlhttp.send();
-}
-
-function getYouTubeVideoID(url) { // Return video id or false
-  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  var match = url.match(regExp);
-  return (match && match[7].length == 11) ? match[7] : false;
-}
-
-//uuid generator function from https://gist.github.com/jed/982883
-function generateUUID(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,generateUUID)}

ci/generateList.ts

@@ -0,0 +1,62 @@
+/*
+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
+- uptime >= 80%
+- 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

@@ -0,0 +1,34 @@
+import { InvidiousInstance, monitor } from "./invidiousType"
+
+import * as data from "../ci/invidious_instances.json";
+
+// only https servers
+const mapped = (data as InvidiousInstance[])
+  .filter((i) =>
+    i[1]?.type === "https"
+    && i[1]?.monitor?.enabled
+  )
+  .map((instance) => {
+    const monitor = instance[1].monitor as monitor;
+    return {
+      name: instance[0],
+      url: instance[1].uri,
+      uptime: monitor.uptime || 0,
+      down: monitor.down ?? false,
+      created_at: monitor.created_at,
+    }
+  });
+
+// reliability and sanity checks
+const reliableCheck = mapped
+  .filter(instance => {
+    const uptime = instance.uptime > 80 && !instance.down;
+    const nameIncluded = instance.url.includes(instance.name);
+    const ninetyDays = 90 * 24 * 60 * 60 * 1000;
+    const ninetyDaysAgo = new Date(Date.now() - ninetyDays);
+    const createdAt = new Date(instance.created_at).getTime() < ninetyDaysAgo.getTime();
+    return uptime && nameIncluded && createdAt;
+  })
+
+export const getInvidiousList = (): string[] =>
+  reliableCheck.map(instance => instance.name).sort()

ci/invidiousType.ts

@@ -0,0 +1,72 @@
+export type InvidiousInstance = [
+  string,
+  {
+    flag: string;
+    region: string;
+    stats: null | ivStats;
+    cors: null | boolean;
+    api: null | boolean;
+    type: "https" | "http" | "onion" | "i2p";
+    uri: string;
+    monitor: null | monitor;
+  }
+]
+
+export type monitor = {
+  token: string;
+  url: string;
+  alias: string;
+  last_status: number;
+  uptime: number;
+  down: boolean;
+  down_since: null | string;
+  up_since: null | string;
+  error: null | string;
+  period: number;
+  apdex_t: number;
+  string_match: string;
+  enabled: boolean;
+  published: boolean;
+  disabled_locations: string[];
+  recipients: string[];
+  last_check_at: string;
+  next_check_at: string;
+  created_at: string;
+  mute_until: null | string;
+  favicon_url: string;
+  custom_headers: Record<string, string>;
+  http_verb: string;
+  http_body: string;
+  ssl: {
+    tested_at: string;
+    expires_at: string;
+    valid: boolean;
+    error: null | string;
+  };
+}
+
+export type ivStats = {
+  version: string;
+  software: {
+    name: "invidious" | string;
+    version: string;
+    branch: "master" | string;
+  };
+  openRegistrations: boolean;
+  usage: {
+    users: {
+      total: number;
+      activeHalfyear: number;
+      activeMonth: number;
+    };
+  };
+  metadata: {
+    updatedAt: number;
+    lastChannelRefreshedAt: number;
+  };
+  playback: {
+    totalRequests: number;
+    successfulRequests: number;
+    ratio: number;
+  };
+}

ci/invidiouslist.json

@@ -0,0 +1 @@
+["www.youtubekids.com","inv.nadeko.net","inv.tux.pizza","invidious.adminforge.de","invidious.jing.rocks","invidious.nerdvpn.de","invidious.perennialte.ch","invidious.privacyredirect.com","invidious.reallyaweso.me","invidious.yourdevice.ch","iv.ggtyler.dev","iv.nboeck.de","yewtu.be"]

ci/pipedCI.ts

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

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

config.js.example

@@ -1,3 +0,0 @@
-//this file is loaded along iwth content.js
-//this file sets the server to connect to, and is gitignored
-var serverAddress = "https://sponsor.ajay.app";

config.json.example

@@ -0,0 +1,46 @@
+{
+    "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"],
+    "categorySupport": {
+        "sponsor": ["skip", "mute", "full"],
+        "selfpromo": ["skip", "mute", "full"],
+        "exclusive_access": ["full"],
+        "interaction": ["skip", "mute"],
+        "intro": ["skip", "mute"],
+        "outro": ["skip", "mute"],
+        "preview": ["skip", "mute"],
+        "filler": ["skip", "mute"],
+        "music_offtopic": ["skip"],
+        "poi_highlight": ["poi"],
+        "chapter": ["chapter"]
+    },
+    "wikiLinks": {
+        "sponsor": "https://wiki.sponsor.ajay.app/w/Sponsor",
+        "selfpromo": "https://wiki.sponsor.ajay.app/w/Unpaid/Self_Promotion",
+        "exclusive_access": "https://wiki.sponsor.ajay.app/w/Exclusive_Access",
+        "interaction": "https://wiki.sponsor.ajay.app/w/Interaction_Reminder_(Subscribe)",
+        "intro": "https://wiki.sponsor.ajay.app/w/Intermission/Intro_Animation",
+        "outro": "https://wiki.sponsor.ajay.app/w/Endcards/Credits",
+        "preview": "https://wiki.sponsor.ajay.app/w/Preview/Recap",
+        "filler": "https://wiki.sponsor.ajay.app/w/Filler_Tangent",
+        "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"
+        ]
+    }
+}

content.css

@@ -1,195 +0,0 @@
-.playerButtonImage {
-	height: 60%;
-	top: 0;
-	bottom: 0;
-	display: block;
-	margin: auto;
-}
-
-.playerButton {
-	vertical-align: top;
-}
-
-.sponsorSkipObject {
-    font-family: 'Source Sans Pro', sans-serif;
-}
-
-.sponsorSkipLogo {
-	height: 64px;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	margin: auto;
-	margin-left: 10px;
-}
-
-@keyframes fadeIn {
-	from { opacity: 0; }
-	  to { opacity: 1; }
-}
-
-.sponsorSkipNotice {
-    min-height: 165px;
-    min-width: 400px;
-    background-color: rgba(255, 217, 217, 0.8);
-    position: absolute;
-	z-index: 1;
-	border: 3px solid rgba(0, 0, 0, 0.8);
-	margin-top: -50px;
-
-	animation: fadeIn 0.5s;
-}
-
-/* if two are very close to eachother */
-.secondSkipNotice {
-	margin-left: 500px;
-
-  	transition: margin-left 0.2s;
-}
-
-.sponsorSkipMessage {
-    font-size: 18px;
-    color: #000000;
-    text-align: center;
-    margin-top: 10px;
-	font-weight: bold;
-	margin-top: 4px;
-}
-
-.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;
-}
-
-.sponsorTimesInfoMessage {
-	font-size: 15px;
-	font-weight: bold;
-    color: #000000;
-	text-align: center;
-}
-
-.voteButton {
-	height: 32px;
-	margin-right: 15px;
-	cursor: pointer;
-}
-.voteButton:hover {
-	filter: brightness(80%);
-}
-
-.submitButton {
-	background-color:#ec1c1c;
-	-moz-border-radius:28px;
-	-webkit-border-radius:28px;
-	border-radius:28px;
-	border:1px solid #d31919;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:14px;
-	padding:4px 15px;
-	text-decoration:none;
-    text-shadow:0px 0px 0px #662727;
-    
-    margin-top: 5px;
-    margin-right: 15px;
-}
-.submitButton:hover {
-	background-color:#bf2a2a;
-}
-
-.submitButton:focus {
-	outline: none;
-	background-color:#bf2a2a;
-}
-
-.submitButton:active {
-	position:relative;
-	top:1px;
-}
-
-@keyframes rotate {
-	from { transform: rotate(0deg); }
-	  to { transform: rotate(360deg); }
-}
-
-.sponsorSkipButton {
-	background-color:#ec1c1c;
-	-moz-border-radius:28px;
-	-webkit-border-radius:28px;
-	border-radius:28px;
-	border:1px solid #d31919;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:14px;
-	padding:4px 15px;
-	text-decoration:none;
-    text-shadow:0px 0px 0px #662727;
-    
-    margin-top: 5px;
-    margin-right: 15px;
-}
-.sponsorSkipButton:hover {
-	background-color:#bf2a2a;
-}
-
-.sponsorSkipButton:focus {
-	outline: none;
-	background-color:#bf2a2a;
-}
-
-.sponsorSkipButton:active {
-	position:relative;
-	top:1px;
-}
-
-.sponsorSkipDontShowButton {
-	-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-	-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
-	box-shadow:inset 0px 1px 0px 0px #cf866c;
-	background-color:#d0451b;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border:1px solid #942911;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:13px;
-	padding:6px 24px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #854629;
-}
-.sponsorSkipDontShowButton:hover {
-	background-color:#bc3315;
-}
-
-.sponsorSkipDontShowButton:focus {
-	outline: none;
-	background-color:#bc3315;
-}
-
-.sponsorSkipDontShowButton:active {
-	position:relative;
-	top:1px;
-}

content.js

@@ -1,650 +0,0 @@
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
-  videoIDChange(id);
-}
-
-//was sponsor data found when doing SponsorsLookup
-var sponsorDataFound = false;
-
-//the actual sponsorTimes if loaded and UUIDs associated with them
-var sponsorTimes = undefined;
-var UUIDs = undefined;
-
-//the video
-var v;
-
-//the last time looked at (used to see if this time is in the interval)
-var lastTime = -1;
-
-//the actual time (not video time) that the last skip happened
-var lastUnixTimeSkipped = -1;
-
-//the last time in the video a sponsor was skipped
-//used for the go back button
-var lastSponsorTimeSkipped = null;
-//used for ratings
-var lastSponsorTimeSkippedUUID = null;
-
-//if showing the start sponsor button or the end sponsor button on the player
-var showingStartSponsor = true;
-
-//should the video controls buttons be added
-var hideVideoPlayerControls = false;
-
-//should view counts be tracked
-var trackViewCount = false;
-chrome.storage.sync.get(["trackViewCount"], function(result) {
-  let trackViewCountStorage = result.trackViewCount;
-  if (trackViewCountStorage != undefined) {
-    trackViewCount = trackViewCountStorage;
-  } else {
-    trackViewCount = true;
-  }
-});
-
-//if the notice should not be shown
-//happens when the user click's the "Don't show notice again" button
-var dontShowNotice = false;
-chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
-  let dontShowNoticeAgain = result.dontShowNoticeAgain;
-  if (dontShowNoticeAgain != undefined) {
-    dontShowNotice = dontShowNoticeAgain;
-  }
-});
-
-chrome.runtime.onMessage.addListener( // Detect URL Changes
-  function(request, sender, sendResponse) {
-    //message from background script
-    if (request.message == "ytvideoid") { 
-      videoIDChange(request.id);
-    }
-
-    //messages from popup script
-    if (request.message == "sponsorStart") {
-      sponsorMessageStarted();
-    }
-
-    if (request.message == "isInfoFound") {
-      //send the sponsor times along with if it's found
-      sendResponse({
-        found: sponsorDataFound,
-        sponsorTimes: sponsorTimes,
-        UUIDs: UUIDs
-      })
-    }
-
-    if (request.message == "getVideoID") {
-      sendResponse({
-        videoID: getYouTubeVideoID(document.URL)
-      })
-    }
-
-    if (request.message == "showNoticeAgain") {
-      dontShowNotice = false;
-    }
-
-    if (request.message == "changeStartSponsorButton") {
-      changeStartSponsorButton(request.showStartSponsor, request.uploadButtonVisible);
-    }
-
-    if (request.message == "changeVideoPlayerControlsVisibility") {
-      hideVideoPlayerControls = request.value;
-
-      updateVisibilityOfPlayerControlsButton();
-    }
-
-    if (request.message == "trackViewCount") {
-      trackViewCount = request.value;
-    }
-});
-
-function videoIDChange(id) {
-  //reset last sponsor times
-  lastTime = -1;
-  lastUnixTimeSkipped = -1;
-
-  //reset sponsor data found check
-  sponsorDataFound = false;
-  sponsorsLookup(id);
-
-  //see if the onvideo control image needs to be changed
-  chrome.runtime.sendMessage({
-    message: "getSponsorTimes",
-    videoID: id
-  }, function(response) {
-    if (response != undefined) {
-      let sponsorTimes = response.sponsorTimes;
-      if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length >= 2) {
-        document.getElementById("submitButton").style.display = "unset";
-      } else if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
-        toggleStartSponsorButton();
-      }
-    }
-  });
-
-  //see if video control buttons should be added
-  chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
-    if (result.hideVideoPlayerControls != undefined) {
-      hideVideoPlayerControls = result.hideVideoPlayerControls;
-    }
-
-    updateVisibilityOfPlayerControlsButton();
-  });
-}
-
-function sponsorsLookup(id) {
-    v = document.querySelector('video') // Youtube video player
-    
-    //check database for sponsor times
-    sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        sponsorDataFound = true;
-
-        sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
-        UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
-
-        // If the sponsor data exists, add the event to run on the videos "ontimeupdate"
-        v.ontimeupdate = function () { 
-            sponsorCheck(sponsorTimes);
-        };
-      } else if (xmlhttp.readyState == 4) {
-        sponsorDataFound = false;
-
-        //check if this video was uploaded recently
-        //use the invidious api to get the time published
-        sendRequestToCustomServer('GET', "https://invidio.us/api/v1/videos/" + id, function(xmlhttp, error) {
-          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            let unixTimePublished = JSON.parse(xmlhttp.responseText).published;
-
-            //if less than 3 days old
-            if ((Date.now() / 1000) - unixTimePublished < 259200) {
-              setTimeout(() => sponsorsLookup(id), 10000);
-            }
-          }
-        });
-      }
-    });
-}
-
-function sponsorCheck(sponsorTimes) { // Video skipping
-  //see if any sponsor start time was just passed
-  for (let i = 0; i < sponsorTimes.length; i++) {
-    //this means part of the video was just skipped
-    if (Math.abs(v.currentTime - lastTime) > 1 && lastTime != -1) {
-      //make lastTime as if the video was playing normally
-      lastTime = v.currentTime - 0.0001;
-    }
-
-    let currentTime = Date.now();
-
-    //If the sponsor time is in between these times, skip it
-    //Checks if the last time skipped to is not too close to now, to make sure not to get too many
-    //  sponsor times in a row (from one troll)
-    //the last term makes 0 second start times possible
-    if ((Math.abs(v.currentTime - sponsorTimes[i][0]) < 0.3 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime
-          && (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && sponsorTimes[i][0] == 0)) {
-      //skip it
-      v.currentTime = sponsorTimes[i][1];
-
-      lastSponsorTimeSkipped = sponsorTimes[i][0];
-      
-      let currentUUID =  UUIDs[i];
-      lastSponsorTimeSkippedUUID = currentUUID; 
-
-      //send out the message saying that a sponsor message was skipped
-      openSkipNotice(currentUUID);
-
-      setTimeout(() => closeSkipNotice(currentUUID), 7000);
-
-      //send telemetry that a this sponsor was skipped happened
-      if (trackViewCount) {
-        sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
-      }
-    }
-  }
-
-  //don't keep track until they are loaded in
-  if (sponsorTimes.length > 0) {
-    lastTime = v.currentTime;
-  }
-}
-
-function goBackToPreviousTime(UUID) {
-  if (sponsorTimes != undefined) {
-    //add a tiny bit of time to make sure it is not skipped again
-    v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][0] + 0.001;
-
-    closeSkipNotice(UUID);
-  }
-}
-
-//Adds a sponsorship starts button to the player controls
-function addPlayerControlsButton() {
-  if (document.getElementById("startSponsorButton") != null) {
-    //it's already added
-    return;
-  }
-
-  let startSponsorButton = document.createElement("button");
-  startSponsorButton.id = "startSponsorButton";
-  startSponsorButton.className = "ytp-button playerButton";
-  startSponsorButton.setAttribute("title", "Sponsor Starts Now");
-  startSponsorButton.addEventListener("click", startSponsorClicked);
-
-  let startSponsorImage = document.createElement("img");
-  startSponsorImage.id = "startSponsorImage";
-  startSponsorImage.className = "playerButtonImage";
-  startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
-
-  //add the image to the button
-  startSponsorButton.appendChild(startSponsorImage);
-
-  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
-  
-  referenceNode.prepend(startSponsorButton);
-}
-
-function removePlayerControlsButton() {
-  document.getElementById("startSponsorButton").style.display = "none";
-  document.getElementById("submitButton").style.display = "none";
-}
-
-//adds or removes the player controls button to what it should be
-function updateVisibilityOfPlayerControlsButton() {
-  if (hideVideoPlayerControls) {
-    removePlayerControlsButton();
-  } else {
-    addPlayerControlsButton();
-    addSubmitButton();
-  }
-}
-
-function startSponsorClicked() {
-  toggleStartSponsorButton();
-
-  //send back current time with message
-  chrome.runtime.sendMessage({
-    message: "addSponsorTime",
-    time: v.currentTime
-  });
-}
-
-function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
-  if (showStartSponsor) {
-    showingStartSponsor = true;
-    document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
-
-    if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible) {
-      document.getElementById("submitButton").style.display = "unset";
-    } else if (!uploadButtonVisible) {
-      //disable submit button
-      document.getElementById("submitButton").style.display = "none";
-    }
-  } else {
-    showingStartSponsor = false;
-    document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
-
-    //disable submit button
-    document.getElementById("submitButton").style.display = "none";
-  }
-}
-
-function toggleStartSponsorButton() {
-  changeStartSponsorButton(!showingStartSponsor, true);
-}
-
-//shows the submit button on the video player
-function addSubmitButton() {
-  if (document.getElementById("submitButton") != null) {
-    //it's already added
-    return;
-  }
-  
-  //make a submit button
-  let submitButton = document.createElement("button");
-  submitButton.id = "submitButton";
-  submitButton.className = "ytp-button playerButton";
-  submitButton.setAttribute("title", "Submit Sponsor Times");
-  submitButton.addEventListener("click", submitSponsorTimes);
-  //hide it at the start
-  submitButton.style.display = "none";
-
-  let submitImage = document.createElement("img");
-  submitImage.id = "submitButtonImage";
-  submitImage.className = "playerButtonImage";
-  submitImage.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
-
-  //add the image to the button
-  submitButton.appendChild(submitImage);
-
-  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
-  referenceNode.prepend(submitButton);
-}
-
-//Opens the notice that tells the user that a sponsor was just skipped
-function openSkipNotice(UUID){
-  if (dontShowNotice) {
-    //don't show, return
-    return;
-  }
-
-  //check if page is loaded yet (for 0 second sponsors, the page might not be loaded yet)
-  //it looks for the view count div and sees if it is full yet
-  //querySelectorAll is being used like findElementById for multiple objects, because for
-  //some reason YouTube has put more than one object with one ID.
-  let viewCountNode = document.querySelectorAll("#count");
-  //check to see if the length is over zero, otherwise it's a different YouTube theme probably
-  if (viewCountNode.length > 0) {
-    //check if any of these have text
-    let viewCountVisible = false;
-    for (let i = 0; i < viewCountNode.length; i++) {
-      if (viewCountNode[i].innerText != null) {
-        viewCountVisible = true;
-        break;
-      }
-    }
-    if (!viewCountVisible) {
-      //this is the new YouTube layout and it is still loading
-      //wait a bit for opening the notice
-      setTimeout(() => openSkipNotice(UUID), 200);
-      return;
-    }
-  }
-
-  let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
-
-  if (amountOfPreviousNotices > 0) {
-    //already exists
-
-    let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
-    previousNotice.classList.add("secondSkipNotice")
-  }
-
-  let noticeElement = document.createElement("div");
-  //what sponsor time this is about
-  noticeElement.id = "sponsorSkipNotice" + UUID;
-  noticeElement.classList.add("sponsorSkipObject");
-  noticeElement.classList.add("sponsorSkipNotice");
-  noticeElement.style.zIndex = 5 + amountOfPreviousNotices;
-
-  let logoElement = document.createElement("img");
-  logoElement.id = "sponsorSkipLogo" + UUID;
-  logoElement.className = "sponsorSkipLogo";
-  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
-
-  let noticeMessage = document.createElement("div");
-  noticeMessage.id = "sponsorSkipMessage" + UUID;
-  noticeMessage.classList.add("sponsorSkipMessage");
-  noticeMessage.classList.add("sponsorSkipObject");
-  noticeMessage.innerText = "Hey, you just skipped a sponsor!";
-  
-  let noticeInfo = document.createElement("p");
-  noticeInfo.id = "sponsorSkipInfo" + UUID;
-  noticeInfo.classList.add("sponsorSkipInfo");
-  noticeInfo.classList.add("sponsorSkipObject");
-  noticeInfo.innerText = "This message will disapear in 7 seconds";
-  
-  //thumbs up and down buttons
-  let voteButtonsContainer = document.createElement("div");
-  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-  voteButtonsContainer.setAttribute("align", "center");
-
-  let upvoteButton = document.createElement("img");
-  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-  upvoteButton.className = "sponsorSkipObject voteButton";
-  upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
-  upvoteButton.addEventListener("click", () => vote(1, UUID));
-
-  let downvoteButton = document.createElement("img");
-  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-  downvoteButton.className = "sponsorSkipObject voteButton";
-  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
-  downvoteButton.addEventListener("click", () => vote(0, UUID));
-
-  //add thumbs up and down buttons to the container
-  voteButtonsContainer.appendChild(upvoteButton);
-  voteButtonsContainer.appendChild(downvoteButton);
-
-  let buttonContainer = document.createElement("div");
-  buttonContainer.setAttribute("align", "center");
-
-  let goBackButton = document.createElement("button");
-  goBackButton.innerText = "Go back";
-  goBackButton.className = "sponsorSkipButton";
-  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
-
-  let hideButton = document.createElement("button");
-  hideButton.innerText = "Dismiss";
-  hideButton.className = "sponsorSkipButton";
-  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
-
-  let dontShowAgainButton = document.createElement("button");
-  dontShowAgainButton.innerText = "Don't Show This Again";
-  dontShowAgainButton.className = "sponsorSkipDontShowButton";
-  dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
-
-  buttonContainer.appendChild(goBackButton);
-  buttonContainer.appendChild(hideButton);
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(dontShowAgainButton);
-
-  noticeElement.appendChild(logoElement);
-  noticeElement.appendChild(noticeMessage);
-  noticeElement.appendChild(noticeInfo);
-  noticeElement.appendChild(voteButtonsContainer);
-  noticeElement.appendChild(buttonContainer);
-
-  let referenceNode = document.getElementById("info");
-  if (referenceNode == null) {
-    //old YouTube
-    referenceNode = document.getElementById("watch-header");
-  }
-  referenceNode.prepend(noticeElement);
-}
-
-function afterDownvote(UUID) {
-  //change text to say thanks for voting
-  //remove buttons
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
-  }
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
-  }
-
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //add thanks for voting text
-  let thanksForVotingText = document.createElement("p");
-  thanksForVotingText.id = "sponsorTimesThanksForVotingText";
-  thanksForVotingText.innerText = "Thanks for voting!"
-
-  //add extra info for voting
-  let thanksForVotingInfoText = document.createElement("p");
-  thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
-  thanksForVotingInfoText.innerText = "Hit go back to get to where you came from."
-
-  //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText);
-}
-
-function addLoadingInfo(message, UUID) {
-  //change text to say thanks for message
-  //remove buttons
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
-  }
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
-  }
-
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //add thanks for voting text
-  let thanksForVotingText = document.createElement("p");
-  thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
-  thanksForVotingText.className = "sponsorTimesInfoMessage";
-  thanksForVotingText.innerText = message;
-
-  //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
-}
-
-function vote(type, UUID) {
-  //add loading info
-  addLoadingInfo("Loading...", UUID)
-
-  chrome.runtime.sendMessage({
-    message: "submitVote",
-    type: type,
-    UUID: UUID
-  }, function(response) {
-    if (response != undefined) {
-      //see if it was a success or failure
-      if (response.successType == 1) {
-        //success
-        if (type == 0) {
-          afterDownvote(UUID);
-        } else if (type == 1) {
-          closeSkipNotice(UUID);
-        }
-      } else if (response.successType == 0) {
-        //failure: duplicate vote
-        addLoadingInfo("It seems you've already voted before", UUID)
-      } else if (response.successType == -1) {
-        //failure: duplicate vote
-        addLoadingInfo("A connection error has occured.", UUID)
-      }
-    }
-  });
-}
-
-//Closes the notice that tells the user that a sponsor was just skipped for this UUID
-function closeSkipNotice(UUID){
-  let notice = document.getElementById("sponsorSkipNotice" + UUID);
-  if (notice != null) {
-    notice.remove();
-  }
-}
-
-//Closes all notices that tell the user that a sponsor was just skipped
-function closeAllSkipNotices(){
-  let notices = document.getElementsByClassName("sponsorSkipNotice");
-  for (let i = 0; i < notices.length; i++) {
-    notices[i].remove();
-  }
-}
-
-function dontShowNoticeAgain() {
-  chrome.storage.sync.set({"dontShowNoticeAgain": true});
-
-  dontShowNotice = true;
-
-  closeAllSkipNotices();
-}
-
-function sponsorMessageStarted() {
-    let v = document.querySelector('video');
-
-    //send back current time
-    chrome.runtime.sendMessage({
-      message: "time",
-      time: v.currentTime
-    });
-
-    //update button
-    toggleStartSponsorButton();
-}
-
-function submitSponsorTimes() {
-  //add loading animation
-  document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
-  document.getElementById("submitButton").style.animation = "rotate 1s 0s infinite";
-
-  let currentVideoID = getYouTubeVideoID(document.URL);
-
-  chrome.runtime.sendMessage({
-    message: "submitTimes",
-    videoID: currentVideoID
-  }, function(response) {
-    if (response != undefined) {
-      if (response.statusCode == 200) {
-        //hide loading message
-        let submitButton = document.getElementById("submitButton");
-        //finish this animation
-        submitButton.style.animation = "rotate 1s";
-        //when the animation is over, hide the button
-        submitButton.addEventListener("animationend", function() {
-          submitButton.style.animation = "unset";
-          submitButton.style.display = "none";
-        });
-
-        //clear the sponsor times
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-        chrome.storage.sync.set({[sponsorTimeKey]: []});
-      } else {
-        //for a more detailed error message, they should check the popup
-        //show that the upload failed
-        document.getElementById("submitButton").style.animation = "unset";
-        document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
-      }
-    }
-  });
-}
-
-function sendRequestToServer(type, address, callback) {
-  let xmlhttp = new XMLHttpRequest();
-
-  xmlhttp.open(type, serverAddress + address, true);
-
-  if (callback != undefined) {
-    xmlhttp.onreadystatechange = function () {
-      callback(xmlhttp, false);
-    };
-  
-    xmlhttp.onerror = function(ev) {
-      callback(xmlhttp, true);
-    };
-  }
-
-  //submit this request
-  xmlhttp.send();
-}
-
-function sendRequestToCustomServer(type, fullAddress, callback) {
-  let xmlhttp = new XMLHttpRequest();
-
-  xmlhttp.open(type, fullAddress, true);
-
-  if (callback != undefined) {
-    xmlhttp.onreadystatechange = function () {
-      callback(xmlhttp, false);
-    };
-  
-    xmlhttp.onerror = function(ev) {
-      callback(xmlhttp, true);
-    };
-  }
-
-  //submit this request
-  xmlhttp.send();
-}
-
-function getYouTubeVideoID(url) { // Returns with video id else returns false
-  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  var match = url.match(regExp);
-  return (match && match[7].length == 11) ? match[7] : false;
-}

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /public/_locales/en/*
+    translation: /public/_locales/%two_letters_code%/%original_file_name%

firefox_manifest.json

@@ -1,61 +0,0 @@
-{
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
-  "short_name": "SponsorBlock",
-  "version": "1.0.4",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
-  "content_scripts": [
-    {
-      "matches": [
-        "https://*.youtube.com/*"
-      ],
-      "js": [
-        "config.js",
-        "content.js"
-      ],
-      "css": [
-        "content.css",
-        "./libs/Source+Sans+Pro.css"
-      ]
-    }
-  ],
-  "web_accessible_resources": [
-    "icons/LogoSponsorBlocker256px.png",
-    "icons/IconSponsorBlocker256px.png",
-    "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png",
-    "icons/PlayerUploadIconSponsorBlocker256px.png",
-    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
-    "icons/upvote.png",
-    "icons/downvote.png"
-  ],
-  "permissions": [
-    "tabs",
-    "storage",
-    "notifications",
-    "https://sponsor.ajay.app/*"
-  ],
-  "browser_action": {
-    "default_title": "SponsorBlock",
-    "default_popup": "popup.html"
-  }, 
-  "background": {
-    "scripts":[
-      "config.js",
-      "background.js"
-    ]
-  },
-  "icons": {
-    "16": "icons/IconSponsorBlocker16px.png",
-    "32": "icons/IconSponsorBlocker32px.png",
-    "64": "icons/LogoSponsorBlocker64px.png",
-    "128": "icons/LogoSponsorBlocker128px.png",
-    "256": "icons/LogoSponsorBlocker256px.png"
-  },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "sponsorBlocker@ajay.app",
-      "strict_min_version": "57.0"
-    }
-  },
-  "manifest_version": 2
-}

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    "roots": [
+        "test"
+    ],
+    "transform": {
+        "^.+\\.ts$": "ts-jest"
+    },
+    "reporters": ["default", "github-actions"]
+}; 

libs/Source+Sans+Pro.css

@@ -1,56 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/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 */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/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 */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/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;
-}

manifest.json

@@ -1,55 +0,0 @@
-{
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
-  "short_name": "SponsorBlock",
-  "version": "1.0.4",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
-  "content_scripts": [
-    {
-      "matches": [
-        "https://*.youtube.com/*"
-      ],
-      "js": [
-        "config.js",
-        "content.js"
-      ],
-      "css": [
-        "content.css",
-        "./libs/Source+Sans+Pro.css"
-      ]
-    }
-  ],
-  "web_accessible_resources": [
-    "icons/LogoSponsorBlocker256px.png",
-    "icons/IconSponsorBlocker256px.png",
-    "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png",
-    "icons/PlayerUploadIconSponsorBlocker256px.png",
-    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
-    "icons/upvote.png",
-    "icons/downvote.png"
-  ],
-  "permissions": [
-    "tabs",
-    "storage",
-    "notifications",
-    "https://sponsor.ajay.app/*"
-  ],
-  "browser_action": {
-    "default_title": "SponsorBlock",
-    "default_popup": "popup.html"
-  }, 
-  "background": {
-    "scripts":[
-      "config.js",
-      "background.js"
-    ]
-  },
-  "icons": {
-    "16": "icons/IconSponsorBlocker16px.png",
-    "32": "icons/IconSponsorBlocker32px.png",
-    "64": "icons/LogoSponsorBlocker64px.png",
-    "128": "icons/LogoSponsorBlocker128px.png",
-    "256": "icons/LogoSponsorBlocker256px.png"
-  },
-  "manifest_version": 2
-}

manifest/beta-manifest-extra.json

@@ -0,0 +1,4 @@
+{
+    "name": "BETA - SponsorBlock"
+}
+  

manifest/chrome-manifest-extra.json

@@ -0,0 +1,156 @@
+{
+  "host_permissions": [
+    "https://*.youtube.com/*",
+    "https://sponsor.ajay.app/*"
+  ],
+  "optional_host_permissions": [
+    "*://*/*"
+  ],
+  "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/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"
+    ],
+    "matches": ["<all_urls>"]
+  }],
+  "content_scripts": [
+    {
+        "world": "MAIN",
+        "js": [
+            "./js/document.js"
+        ],
+        "matches": [
+            "https://*.youtube.com/*",
+            "https://www.youtube-nocookie.com/embed/*"
+        ],
+        "exclude_matches": [
+          "https://accounts.youtube.com/RotateCookiesPage*"
+      ],
+        "all_frames": true,
+        "run_at": "document_start"
+    },
+    {
+      "world": "ISOLATED",
+      "js": [
+          "./js/content.js"
+      ],
+      "css": [
+        "content.css",
+        "shared.css"
+      ],
+      "matches": [
+          "https://*.youtube.com/*",
+          "https://www.youtube-nocookie.com/embed/*"
+      ],
+      "exclude_matches": [
+        "https://accounts.youtube.com/RotateCookiesPage*"
+      ],
+      "all_frames": true,
+      "run_at": "document_start"
+  }
+  ],
+  "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
+        }
+    ]
+  },
+  "background": {
+    "service_worker": "./js/background.js"
+  },
+  "manifest_version": 3
+}

manifest/firefox-beta-manifest-extra.json

@@ -0,0 +1,8 @@
+{
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "sponsorBlockerBETA@ajay.app"
+        }
+    }
+}
+  

manifest/firefox-manifest-extra.json

@@ -0,0 +1,17 @@
+{
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "102.0"
+    },
+    "gecko_android": {
+      "strict_min_version": "113.0"
+    }
+  },
+  "background": {
+    "persistent": false
+  },
+  "browser_action": {
+    "default_area": "navbar"
+  }
+}

manifest/manifest-v2-extra.json

@@ -0,0 +1,136 @@
+{
+    "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"
+    ],
+    "permissions": [
+        "https://sponsor.ajay.app/*"
+    ],
+    "optional_permissions": [
+        "*://*/*"
+    ],
+    "browser_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
+            }
+        ]
+    },
+    "background": {
+        "scripts":[
+            "./js/background.js"
+        ]
+    },
+    "content_scripts": [{
+        "run_at": "document_start",
+        "matches": [
+            "https://*.youtube.com/*",
+            "https://www.youtube-nocookie.com/embed/*"
+        ],
+        "exclude_matches": [
+            "https://accounts.youtube.com/RotateCookiesPage*"
+        ],
+        "all_frames": true,
+        "js": [
+            "./js/content.js"
+        ],
+        "css": [
+            "content.css",
+            "shared.css"
+        ]
+    }],
+    "manifest_version": 2
+}  

manifest/manifest.json

@@ -0,0 +1,25 @@
+{
+    "name": "__MSG_fullName__",
+    "short_name": "SponsorBlock",
+    "version": "5.9.1",
+    "default_locale": "en",
+    "description": "__MSG_Description__",
+    "homepage_url": "https://sponsor.ajay.app",
+    "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"
+    },
+    "permissions": [
+        "storage",
+        "scripting"
+    ],
+    "options_ui": {
+        "page": "options/options.html",
+        "open_in_tab": true
+    }
+}  

manifest/safari-manifest-extra.json

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

oss-attribution/licenseInfos.json

@@ -0,0 +1,89 @@
+{
+  "content-scripts-register-polyfill": {
+    "ignore": false,
+    "name": "content-scripts-register-polyfill",
+    "version": "4.0.2",
+    "authors": "Federico Brigante <me@fregante.com> (https://fregante.com)",
+    "url": "https://github.com/fregante/content-scripts-register-polyfill",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n"
+  },
+  "escape-string-regexp": {
+    "ignore": false,
+    "name": "escape-string-regexp",
+    "version": "5.0.0",
+    "authors": "Sindre Sorhus <sindresorhus@gmail.com>",
+    "url": "https://github.com/sindresorhus/escape-string-regexp",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n"
+  },
+  "js-tokens": {
+    "ignore": false,
+    "name": "js-tokens",
+    "version": "4.0.0",
+    "authors": "Simon Lydell",
+    "url": "https://github.com/lydell/js-tokens",
+    "license": "MIT",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
+  },
+  "loose-envify": {
+    "ignore": false,
+    "name": "loose-envify",
+    "version": "1.4.0",
+    "authors": "Andres Suarez <zertosh@gmail.com>",
+    "url": "https://github.com/zertosh/loose-envify",
+    "license": "MIT",
+    "licenseText": "The MIT License (MIT)\n\nCopyright (c) 2015 Andres Suarez <zertosh@gmail.com>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
+  },
+  "react-dom": {
+    "ignore": false,
+    "name": "react-dom",
+    "version": "18.2.0",
+    "url": "https://github.com/facebook/react",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
+  },
+  "react": {
+    "ignore": false,
+    "name": "react",
+    "version": "18.2.0",
+    "url": "https://github.com/facebook/react",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
+  },
+  "scheduler": {
+    "ignore": false,
+    "name": "scheduler",
+    "version": "0.23.0",
+    "url": "https://github.com/facebook/react",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
+  },
+  "webext-content-scripts": {
+    "ignore": false,
+    "name": "webext-content-scripts",
+    "version": "2.5.5",
+    "authors": "Federico Brigante <me@fregante.com> (https://fregante.com)",
+    "url": "https://github.com/fregante/webext-content-scripts",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n"
+  },
+  "webext-patterns": {
+    "ignore": false,
+    "name": "webext-patterns",
+    "version": "1.3.0",
+    "authors": "Federico Brigante <me@fregante.com> (https://fregante.com)",
+    "url": "https://github.com/fregante/webext-patterns",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n"
+  },
+  "webext-polyfill-kinda": {
+    "ignore": false,
+    "name": "webext-polyfill-kinda",
+    "version": "1.0.2",
+    "authors": "Federico Brigante <me@fregante.com> (https://fregante.com)",
+    "url": "https://github.com/fregante/webext-polyfill-kinda",
+    "license": "MIT",
+    "licenseText": "MIT License\n\nCopyright (c) Federico Brigante <me@fregante.com> (https://fregante.com)\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n"
+  }
+}

package.json

@@ -0,0 +1,101 @@
+{
+  "name": "sponsorblock",
+  "version": "1.0.0",
+  "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"
+    }
+  },
+  "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": "^110.0.0",
+    "concurrently": "^7.6.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.35.0",
+    "eslint-plugin-react": "^7.32.2",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "rimraf": "^4.3.1",
+    "schema-utils": "^4.0.0",
+    "selenium-webdriver": "^4.8.1",
+    "ts-jest": "^29.0.5",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
+    "typescript": "4.9",
+    "web-ext": "^8.2.0",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0"
+  },
+  "scripts": {
+    "web-run": "npm run web-run:chrome",
+    "web-sign": "web-ext sign --channel unlisted -s dist",
+    "web-run:firefox": "cd dist && web-ext run --start-url https://addons.mozilla.org/firefox/addon/ublock-origin/",
+    "web-run:firefox-android": "cd dist && web-ext run -t firefox-android --firefox-apk org.mozilla.fenix",
+    "web-run:chrome": "cd dist && web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm -t chromium",
+    "build": "npm run build:chrome",
+    "build:chrome": "webpack --env browser=chrome --config webpack/webpack.prod.js",
+    "build:firefox": "webpack --env browser=firefox --config webpack/webpack.prod.js",
+    "build:safari": "webpack --env browser=safari --config webpack/webpack.prod.js",
+    "build:edge": "webpack --env browser=edge --config webpack/webpack.prod.js",
+    "build:dev": "npm run build:dev:chrome",
+    "build:dev:chrome": "webpack --env browser=chrome --config webpack/webpack.dev.js",
+    "build:dev:firefox": "webpack --env browser=firefox --config webpack/webpack.dev.js",
+    "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",
+    "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\"",
+    "clean": "rimraf dist",
+    "test": "npm run build:chrome && npx jest",
+    "test-without-building": "npx jest",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "funding": [
+    {
+      "type": "individual",
+      "url": "https://sponsor.ajay.app/donate"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/ajayyy-org"
+    },
+    {
+      "type": "patreon",
+      "url": "https://www.patreon.com/ajayyy"
+    },
+    {
+      "type": "individual",
+      "url": "https://paypal.me/ajayyy"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ajayyy/SponsorBlock.git"
+  },
+  "author": "Ajay Ramachandran",
+  "license": "GPL-3.0",
+  "private": true
+}

popup.css

@@ -1,135 +0,0 @@
-* {
-  font-family: 'Source Sans Pro', sans-serif;
-}
-
-h1 {
-	margin-top: 0px;
-}
-
-body {
-  font-size: 14px;
-  width: 300px;
-  background-color: #ffd9d9;
-}
-
-.recordingSubtitle {
-	margin-bottom: 10px;
-}
-
-.voteButton {
-	height: 32px;
-	margin-right: 15px;
-	cursor: pointer;
-}
-.voteButton:hover {
-	filter: brightness(80%);
-}
-
-.greenButton {
-	background-color:#ec1c1c;
-  -moz-border-radius:28px;
-  -webkit-border-radius:28px;
-  border-radius:28px;
-  border:1px solid #d31919;
-  display:inline-block;
-  cursor:pointer;
-  color:#ffffff;
-  font-size:16px;
-  padding:8px 37px;
-  text-decoration:none;
-  text-shadow:0px 0px 0px #662727;
-}
-.greenButton:hover {
-  background-color:#bf2a2a;
-}
-.greenButton:focus {
-	outline: none;
-	background-color:#bf2a2a;
-}
-.greenButton:active {
-  position:relative;
-  top:1px;
-}
-
-.dangerButton {
-	-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-	-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
-	box-shadow:inset 0px 1px 0px 0px #cf866c;
-	background-color:#d0451b;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border:1px solid #942911;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:13px;
-	padding:6px 24px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #854629;
-}
-.dangerButton:hover {
-	background-color:#bc3315;
-}
-.dangerButton:focus {
-	outline: none;
-	background-color:#bc3315;
-}
-.dangerButton:active {
-	position:relative;
-	top:1px;
-}
-
-.warningButton {
-	-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
-	-webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
-	box-shadow:inset 0px 1px 0px 0px #cfbd6c;
-	background-color:#d0821b;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border:1px solid #948b11;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:13px;
-	padding:6px 24px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #856829;
-}
-.warningButton:hover {
-	background-color:#bc8215;
-}
-.warningButton:focus {
-	outline: none;
-	background-color:#bc8215;
-}
-.warningButton:active {
-	position:relative;
-	top:1px;
-}
-
-.smallButton {
-	background-color:#f9902d;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border:1px solid #f9a72d;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:14px;
-	padding:6px 10px;
-	text-decoration:none;
-}
-.smallButton:hover {
-	background-color:#fa9806;
-}
-.smallButton:focus {
-	outline: none;
-	background-color:#fa9806;
-}
-.smallButton:active {
-	position:relative;
-	top:1px;
-}

popup.html

@@ -1,148 +0,0 @@
-<html>
-  <head>
-    <title>Set Page Color Popup</title>
-    <link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
-    <link rel="stylesheet" type="text/css" href="popup.css"/>
-  </head>
-
-  <center>
-    <div id="app">
-        <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
-
-        <h1>SponsorBlock</h1>
-
-        <!-- Loading text -->
-        <p id="loadingIndicator">Loading...</p>
-
-        <!-- Hidden until loading complete -->
-        <div id="mainControls" class="main" style="display: none">
-          <!-- If the video was found in the database -->
-          <div id="videoFound">
-              
-          </div>
-
-          <div id="downloadedSponsorMessageTimes">
-
-          </div>
-
-          <br/>
-
-          <button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button>
-
-          <div id="issueReporterContainer" style="display: none">
-
-            <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
-
-            <div id="issueReporterTimeButtons">
-
-            </div>
-
-          </div>
-
-          <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
-
-          <p>
-            <span id=sponsorTimesContributionsContainer style="display: none">
-                So far, you've submitted
-                <span id="sponsorTimesContributionsDisplay">
-                  0
-                </span>
-                <span id="sponsorTimesContributionsDisplayEndWord">
-                  sponsors.
-                </span>
-            </span>
-
-            <span id=sponsorTimesViewsContainer style="display: none">
-                You have saved people from 
-                <span id="sponsorTimesViewsDisplay">
-                  0
-                </span>
-                <span id="sponsorTimesViewsDisplayEndWord">
-                  sponsor segments.
-                </span>
-            </span>
-          </p>
-
-          <p> 
-            Click the button below when the sponsorship starts and ends to record and 
-            submit it to the database.
-          </p>
-  
-          <div>
-            <button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
-          </div>
-    
-          <div id="submissionSection" style="display: none">
-            <h3>Latest Sponsor Message Times Chosen</h3>
-            <b>
-              <div id="sponsorMessageTimes">
-      
-              </div>
-            </b>
-    
-            <button id="clearTimes" class="smallButton">Clear Times</button>
-    
-            <br/>
-            <br/>
-
-            <div id="submitTimesContainer" style="display: none">
-              <button id="submitTimes" class="smallButton">Submit Times</button>
-
-              <div id="submitTimesInfoMessageContainer" style="display: none">
-                <h3 id="submitTimesInfoMessage">
-
-                </h3>
-              </div>
-
-            </div>
-    
-          </div>
-
-          <div id="optionsButtonContainer">
-              <br/>
-              <br/>
-    
-              <button id="optionsButton" class="dangerButton">Options</button>
-          </div>
-
-          <div id="options" style="display: none">
-              <br/>
-
-              <h3>Options</h3>
-    
-              <button id="hideVideoPlayerControls" class="warningButton">Hide Button On YouTube Player</button>
-              <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Button On YouTube Player</button>
-              <br/>
-              <sub>
-                This hides the button that appears on the YouTube player to submit sponsors. I can see this being annoying for some 
-                people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears, 
-                use the button that appears on the notice saying "Don't show this again". You can always enable these settings again 
-                later.
-              </sub>
-
-              <br/>
-              <br/>
-
-              <button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button>
-              <button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button>
-              <br/>
-              <sub>
-                This feature tracks which sponsors 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 sponsor. Hopefully most people don't change this setting so that the view numbers
-                are accurate. :)
-              </sub>
-    
-              <br/>
-              <br/>
-
-              <button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button>
-          </div>
-        </div>
-      </div>
-  </center>
-
-  <!-- Scripts that need to load after the html -->
-  <script src="config.js"></script>
-  <script src="popup.js"></script>
-</html>

popup.js

@@ -1,569 +0,0 @@
-//setup click listeners
-document.getElementById("sponsorStart").addEventListener("click", sendSponsorStartMessage);
-document.getElementById("clearTimes").addEventListener("click", clearTimes);
-document.getElementById("submitTimes").addEventListener("click", submitTimes);
-document.getElementById("showNoticeAgain").addEventListener("click", showNoticeAgain);
-document.getElementById("hideVideoPlayerControls").addEventListener("click", hideVideoPlayerControls);
-document.getElementById("showVideoPlayerControls").addEventListener("click", showVideoPlayerControls);
-document.getElementById("disableSponsorViewTracking").addEventListener("click", disableSponsorViewTracking);
-document.getElementById("enableSponsorViewTracking").addEventListener("click", enableSponsorViewTracking);
-document.getElementById("optionsButton").addEventListener("click", openOptions);
-document.getElementById("reportAnIssue").addEventListener("click", reportAnIssue);
-
-//if true, the button now selects the end time
-var startTimeChosen = false;
-
-//the start and end time pairs (2d)
-var sponsorTimes = [];
-
-//current video ID of this tab
-var currentVideoID = null;
-
-//is this a YouTube tab?
-var isYouTubeTab = false;
-
-//if the don't show notice again variable is true, an option to 
-//  disable should be available
-chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
-  let dontShowNoticeAgain = result.dontShowNoticeAgain;
-  if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) {
-    document.getElementById("showNoticeAgain").style.display = "unset";
-  }
-});
-
-//show proper video player controls option
-chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
-  let hideVideoPlayerControls = result.hideVideoPlayerControls;
-  if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
-    document.getElementById("hideVideoPlayerControls").style.display = "none";
-    document.getElementById("showVideoPlayerControls").style.display = "unset";
-  }
-});
-
-//show proper tracking option
-chrome.storage.sync.get(["trackViewCount"], function(result) {
-  let trackViewCount = result.trackViewCount;
-  if (trackViewCount != undefined && !trackViewCount) {
-    document.getElementById("disableSponsorViewTracking").style.display = "none";
-    document.getElementById("enableSponsorViewTracking").style.display = "unset";
-  }
-});
-
-//get the amount of times this user has contributed and display it to thank them
-chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
-  if (result.sponsorTimesContributed != undefined) {
-    let sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
-    let sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
-    let sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
-
-    if (result.sponsorTimesContributed > 1) {
-      sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
-    } else {
-      sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
-    }
-    sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
-    sponsorTimesContributionsContainer.style.display = "unset";
-
-    //get the userID
-    chrome.storage.sync.get(["userID"], function(result) {
-      let userID = result.userID;
-      if (userID != undefined) {
-        //there are probably some views on these submissions then
-        //get the amount of views from the sponsors submitted
-        sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
-          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
-
-            if (viewCount != 0) {
-              let sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsContainer");
-              let sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplay");
-              let sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayEndWord");
-      
-              if (viewCount > 1) {
-                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
-              } else {
-                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
-              }
-              sponsorTimesViewsDisplay.innerText = viewCount;
-              sponsorTimesViewsContainer.style.display = "unset";
-            }
-          }
-        });
-      }
-    });
-  }
-});
-
-
-chrome.tabs.query({
-  active: true,
-  currentWindow: true
-}, loadTabData);
-
-function loadTabData(tabs) {
-  //set current videoID
-  currentVideoID = getYouTubeVideoID(tabs[0].url);
-
-  if (!currentVideoID) {
-    //this isn't a YouTube video then
-    displayNoVideo();
-    return;
-  }
-
-  //load video times for this video 
-  let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-  chrome.storage.sync.get([sponsorTimeKey], function(result) {
-    let sponsorTimesStorage = result[sponsorTimeKey];
-    if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
-      if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
-        startTimeChosen = true;
-        document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
-      }
-
-      sponsorTimes = sponsorTimesStorage;
-
-      displaySponsorTimes();
-
-      //show submission section
-      document.getElementById("submissionSection").style.display = "unset";
-
-      showSubmitTimesIfNecessary();
-    }
-  });
-
-  //check if this video's sponsors are known
-  chrome.tabs.sendMessage(
-    tabs[0].id,
-    {message: 'isInfoFound'},
-    infoFound
-  );
-}
-
-function infoFound(request) {
-  if(chrome.runtime.lastError) {
-    //This page doesn't have the injected content script, or at least not yet
-    displayNoVideo();
-    return;
-  }
-
-  //if request is undefined, then the page currently being browsed is not YouTube
-  if (request != undefined) {
-    //this must be a YouTube video
-    //set variable
-    isYouTubeTab = true;
-
-    //remove loading text
-    document.getElementById("mainControls").style.display = "unset"
-    document.getElementById("loadingIndicator").innerHTML = "";
-
-    if (request.found) {
-      document.getElementById("videoFound").innerHTML = "This video's sponsors are in the database!"
-
-      displayDownloadedSponsorTimes(request);
-    } else {
-      document.getElementById("videoFound").innerHTML = "No sponsors found"
-    }
-  }
-}
-
-function setVideoID(request) {
-  //if request is undefined, then the page currently being browsed is not YouTube
-  if (request != undefined) {
-    videoID = request.videoID;
-  }
-}
-
-function sendSponsorStartMessage() {
-    //the content script will get the message if a YouTube page is open
-    chrome.tabs.query({
-      active: true,
-      currentWindow: true
-    }, tabs => {
-      chrome.tabs.sendMessage(
-        tabs[0].id,
-        {from: 'popup', message: 'sponsorStart'}
-      );
-    });
-}
-
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "time") {
-    let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
-
-    if (sponsorTimes[sponsorTimesIndex] == undefined) {
-      sponsorTimes[sponsorTimesIndex] = [];
-    }
-
-    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.time;
-
-    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
-
-    updateStartTimeChosen();
-
-    //display video times on screen
-    displaySponsorTimes();
-
-    //show submission section
-    document.getElementById("submissionSection").style.display = "unset";
-
-    showSubmitTimesIfNecessary();
-  }
-});
-
-//display the video times from the array
-function displaySponsorTimes() {
-  //set it to the message
-  document.getElementById("sponsorMessageTimes").innerHTML = getSponsorTimesMessage(sponsorTimes);
-}
-
-//display the video times from the array at the top, in a different section
-function displayDownloadedSponsorTimes(request) {
-  if (request.sponsorTimes != undefined) {
-    //set it to the message
-    document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes);
-
-    //add them as buttons to the issue reporting container
-    let container = document.getElementById("issueReporterTimeButtons");
-    for (let i = 0; i < request.sponsorTimes.length; i++) {
-      let sponsorTimeButton = document.createElement("button");
-      sponsorTimeButton.className = "warningButton";
-      sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
-      
-      let votingButtons = document.createElement("div");
-
-      let UUID = request.UUIDs[i];
-
-      //thumbs up and down buttons
-      let voteButtonsContainer = document.createElement("div");
-      voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-      voteButtonsContainer.setAttribute("align", "center");
-      voteButtonsContainer.style.display = "none"
-
-      let upvoteButton = document.createElement("img");
-      upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-      upvoteButton.className = "voteButton";
-      upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
-      upvoteButton.addEventListener("click", () => vote(1, UUID));
-
-      let downvoteButton = document.createElement("img");
-      downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-      downvoteButton.className = "voteButton";
-      downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
-      downvoteButton.addEventListener("click", () => vote(0, UUID));
-
-      //add thumbs up and down buttons to the container
-      voteButtonsContainer.appendChild(document.createElement("br"));
-      voteButtonsContainer.appendChild(document.createElement("br"));
-      voteButtonsContainer.appendChild(upvoteButton);
-      voteButtonsContainer.appendChild(downvoteButton);
-
-      //add click listener to open up vote panel
-      sponsorTimeButton.addEventListener("click", function() {
-        voteButtonsContainer.style.display = "unset";
-      });
-
-      container.appendChild(sponsorTimeButton);
-      container.appendChild(voteButtonsContainer);
-
-      //if it is not the last iteration
-      if (i != request.sponsorTimes.length - 1) {
-        container.appendChild(document.createElement("br"));
-        container.appendChild(document.createElement("br"));
-      }
-    }
-  }
-}
-
-//get the message that visually displays the video times
-function getSponsorTimesMessage(sponsorTimes) {
-  let sponsorTimesMessage = "";
-
-  for (let i = 0; i < sponsorTimes.length; i++) {
-    for (let s = 0; s < sponsorTimes[i].length; s++) {
-      let timeMessage = getFormattedTime(sponsorTimes[i][s]);
-      //if this is an end time
-      if (s == 1) {
-        timeMessage = " to " + timeMessage;
-      } else if (i > 0) {
-        //add commas if necessary
-        timeMessage = ", " + timeMessage;
-      }
-
-      sponsorTimesMessage += timeMessage;
-    }
-  }
-
-  return sponsorTimesMessage;
-}
-
-function clearTimes() {
-  //send new sponsor time state to tab
-  if (sponsorTimes.length > 0) {
-    chrome.tabs.query({
-      active: true,
-      currentWindow: true
-    }, function(tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        message: "changeStartSponsorButton",
-        showStartSponsor: true,
-        uploadButtonVisible: false
-      });
-    });
-  }
-
-  //reset sponsorTimes
-  sponsorTimes = [];
-
-  let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-  chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
-
-  displaySponsorTimes();
-
-  //hide submission section
-  document.getElementById("submissionSection").style.display = "none";
-
-  resetStartTimeChosen();
-}
-
-function submitTimes() {
-  //make info message say loading
-  document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
-  document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-
-  if (sponsorTimes.length > 0) {
-    chrome.runtime.sendMessage({
-      message: "submitTimes",
-      videoID: currentVideoID
-    }, function(response) {
-      if (response != undefined) {
-        if (response.statusCode == 200) {
-          //hide loading message
-          document.getElementById("submitTimesInfoMessageContainer").style.display = "none";
-  
-          clearTimes();
-        } else if(response.statusCode == 400) {
-          document.getElementById("submitTimesInfoMessage").innerText = "Server said this request was invalid";
-          document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-        } else if(response.statusCode == 429) {
-          document.getElementById("submitTimesInfoMessage").innerText = "You have submitted too many sponsor times for this one video, are you sure there are this many?";
-          document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-        } else if(response.statusCode == 409) {
-          document.getElementById("submitTimesInfoMessage").innerText = "This has already been submitted before";
-          document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-        } else {
-          document.getElementById("submitTimesInfoMessage").innerText = "There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode;
-          document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-        }
-      }
-    });
-  }
-}
-
-function showNoticeAgain() {
-  chrome.storage.sync.set({"dontShowNoticeAgain": false});
-
-  chrome.tabs.query({
-    active: true,
-    currentWindow: true
-  }, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      message: "showNoticeAgain"
-    });
-  });
-
-  document.getElementById("showNoticeAgain").style.display = "none";
-}
-
-function hideVideoPlayerControls() {
-  chrome.storage.sync.set({"hideVideoPlayerControls": true});
-
-  chrome.tabs.query({
-    active: true,
-    currentWindow: true
-  }, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      message: "changeVideoPlayerControlsVisibility",
-      value: true
-    });
-  });
-
-  document.getElementById("hideVideoPlayerControls").style.display = "none";
-  document.getElementById("showVideoPlayerControls").style.display = "unset";
-}
-
-function showVideoPlayerControls() {
-  chrome.storage.sync.set({"hideVideoPlayerControls": false});
-
-  chrome.tabs.query({
-    active: true,
-    currentWindow: true
-  }, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      message: "changeVideoPlayerControlsVisibility",
-      value: false
-    });
-  });
-
-  document.getElementById("hideVideoPlayerControls").style.display = "unset";
-  document.getElementById("showVideoPlayerControls").style.display = "none";
-}
-
-function disableSponsorViewTracking() {
-  chrome.storage.sync.set({"trackViewCount": false});
-
-  chrome.tabs.query({
-    active: true,
-    currentWindow: true
-  }, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      message: "trackViewCount",
-      value: false
-    });
-  });
-
-  document.getElementById("disableSponsorViewTracking").style.display = "none";
-  document.getElementById("enableSponsorViewTracking").style.display = "unset";
-}
-
-function enableSponsorViewTracking() {
-  chrome.storage.sync.set({"trackViewCount": true});
-
-  chrome.tabs.query({
-    active: true,
-    currentWindow: true
-  }, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      message: "trackViewCount",
-      value: true
-    });
-  });
-
-  document.getElementById("enableSponsorViewTracking").style.display = "none";
-  document.getElementById("disableSponsorViewTracking").style.display = "unset";
-}
-
-function updateStartTimeChosen() {
-  //update startTimeChosen variable
-  if (!startTimeChosen) {
-    startTimeChosen = true;
-  document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
-  } else {
-    resetStartTimeChosen();
-  }
-}
-
-//set it to false
-function resetStartTimeChosen() {
-  startTimeChosen = false;
-  document.getElementById("sponsorStart").innerHTML = "Sponsorship Starts Now";
-}
-
-//hides and shows the submit times button when needed
-function showSubmitTimesIfNecessary() {
-  //check if an end time has been specified for the latest sponsor time
-  if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length > 1) {
-    //show submit times button
-    document.getElementById("submitTimesContainer").style.display = "unset";
-  } else {
-    //hide submit times button
-    document.getElementById("submitTimesContainer").style.display = "none";
-  }
-}
-
-//make the options div visisble
-function openOptions() {
-  document.getElementById("optionsButtonContainer").style.display = "none";
-  document.getElementById("options").style.display = "unset";
-}
-
-//this is not a YouTube video page
-function displayNoVideo() {
-  document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " +
-      "If you know this is a YouTube tab, close this popup and open it again.";
-}
-
-function reportAnIssue() {
-  document.getElementById("issueReporterContainer").style.display = "unset";
-  document.getElementById("reportAnIssue").style.display = "none";
-}
-
-function addVoteMessage(message, UUID) {
-  let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
-  //remove all children
-  while (container.firstChild) {
-    container.removeChild(container.firstChild);
-  }
-
-  let thanksForVotingText = document.createElement("h2");
-  thanksForVotingText.innerText = message;
-  //there are already breaks there
-  thanksForVotingText.style.marginBottom = "0px";
-
-  container.appendChild(thanksForVotingText);
-}
-
-function vote(type, UUID) {
-  //add loading info
-  addVoteMessage("Loading...", UUID)
-
-  //send the vote message to the tab
-  chrome.runtime.sendMessage({
-    message: "submitVote",
-    type: type,
-    UUID: UUID
-  }, function(response) {
-    if (response != undefined) {
-      //see if it was a success or failure
-      if (response.successType == 1) {
-        //success
-        addVoteMessage("Thanks for voting!", UUID)
-      } else if (response.successType == 0) {
-        //failure: duplicate vote
-        addVoteMessage("You have already voted this way before.", UUID)
-      } else if (response.successType == -1) {
-        //failure: duplicate vote
-        addVoteMessage("A connection error has occured.", UUID)
-      }
-    }
-  });
-}
-
-//converts time in seconds to minutes:seconds
-function getFormattedTime(seconds) {
-  let minutes = Math.floor(seconds / 60);
-  let secondsDisplay = Math.round(seconds - minutes * 60);
-  if (secondsDisplay < 10) {
-    //add a zero
-    secondsDisplay = "0" + secondsDisplay;
-  }
-
-  let formatted = minutes+ ":" + secondsDisplay;
-
-  return formatted;
-}
-
-function sendRequestToServer(type, address, callback) {
-  let xmlhttp = new XMLHttpRequest();
-
-  xmlhttp.open(type, serverAddress + address, true);
-
-  if (callback != undefined) {
-    xmlhttp.onreadystatechange = function () {
-      callback(xmlhttp, false);
-    };
-  
-    xmlhttp.onerror = function(ev) {
-      callback(xmlhttp, true);
-    };
-  }
-
-  //submit this request
-  xmlhttp.send();
-}
-
-function getYouTubeVideoID(url) { // Return video id or false
-  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  var match = url.match(regExp);
-  return (match && match[7].length == 11) ? match[7] : false;
-}

public/content.css

@@ -0,0 +1,893 @@
+: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 {
+	display: none;
+}
+
+#previewbar {
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    width: 100%;
+	pointer-events: none;
+
+	height: 100%;
+	transform: scaleY(0.6) translateY(-30%) translateY(1.5px);
+	z-index: 42;
+
+	transition: transform .1s cubic-bezier(0,0,0.2,1);
+}
+
+/* May 2024 hover preview */
+.YtPlayerProgressBarProgressBar #previewbar {
+	transform: none;
+}
+
+.ytp-big-mode #previewbar {
+	transform: scaleY(0.625) translateY(-30%) translateY(1.5px);
+}
+
+.ytp-big-mode .sponsorTwoTooltips .sponsorCategoryTooltip {
+	top: 75px !important;
+}
+
+.progress-bar-line > #previewbar {
+	height: 3px;
+}
+
+div:hover > #previewbar.sbNotInvidious {
+	transform: scaleY(1)
+}
+
+.previewbar {
+	display: inline-block;
+	height: 100%;
+	min-width: 1px;
+}
+
+.previewbar.requiredSegment {
+	transform: scaleY(3);
+}
+
+.previewbar.selectedSegment {
+	opacity: 1 !important;
+	z-index: 100;
+	transform: scaleY(1.5);
+}
+
+/* Make sure settings are upfront */
+.ytp-settings-menu {
+	z-index: 6000 !important;
+}
+
+/* Preview Bar page hacks */
+
+.ytp-tooltip:not(.sponsorCategoryTooltipVisible) .sponsorCategoryTooltip {
+	display: none !important;
+}
+
+.ytp-tooltip.sponsorCategoryTooltipVisible {
+	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 {
+    z-index: 10;
+    width: 100%;
+    height: 500px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.playerButtonImage {
+	height: 60%;
+	top: 0;
+	bottom: 0;
+	display: block;
+	margin: auto;
+}
+
+.playerButton {
+	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) {
+	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 {
+	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;
+
+	width: 0px !important;
+}
+
+.autoHiding.sbhidden.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;
+}
+
+.sponsorSkipLogo {
+	height: 18px;
+
+	float: left;
+}
+
+#categoryPill .sbPillNoText .sponsorSkipLogo {
+	margin-top: calc(2.6rem - 18px);
+    margin-bottom: calc(2.6rem - 18px);
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+}
+
+@keyframes fadeOut {
+	to { opacity: 0; }
+}
+
+.sponsorBlockSpacer {
+	background-color: rgb(100, 100, 100);
+	border-color: rgb(100, 100, 100);
+
+	margin-left: 5px;
+}
+
+.sbChatNotice {
+	min-width: 350px;
+	height: 70%;
+
+	position: absolute;
+	right: 5px;
+	bottom: 100px;
+	right: var(--skip-notice-right);
+}
+
+.sponsorSkipNoticeParent {
+    position: absolute;
+
+	bottom: 100px;
+	right: 10px;
+}
+
+.sponsorSkipNoticeParent, .sponsorSkipNotice {
+	border-spacing: 5px 10px;
+	padding-left: 5px;
+	padding-right: 5px;
+
+	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);
+}
+
+.sponsorSkipNotice .sbhidden {
+	display: none;
+}
+
+/* For Cloudtube */
+.sponsorSkipNotice td, .sponsorSkipNotice table, .sponsorSkipNotice th {
+	border: none;
+}
+
+.sponsorSkipNoticeFadeIn {
+	animation: fadeIn 0.5s ease-out;
+}
+
+.exportCopiedNotice .sponsorSkipNoticeFadeIn {
+	animation: none;
+}
+
+.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%;
+}
+
+.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;
+}
+
+.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);
+	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;
+}
+
+.sponsorTimesInfoIcon {
+	width: 30px;
+	padding-right: 10px;
+    padding-left: 10px;
+}
+
+.segmentSummary {
+	outline: none !important;
+}
+
+.submitButton {
+	background-color:#ec1c1c;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border:1px solid #d31919;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:4px 15px;
+	text-decoration:none;
+    text-shadow:0px 0px 0px #662727;
+
+    margin-top: 5px;
+    margin-right: 15px;
+}
+.submitButton:hover {
+	background-color:#bf2a2a;
+}
+
+.submitButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
+.submitButton:active {
+	position:relative;
+	top:1px;
+}
+
+@keyframes rotate {
+	from { transform: rotate(0deg); }
+	  to { transform: rotate(360deg); }
+}
+
+.sponsorSkipButton {
+	background-color:#ec1c1c;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border:1px solid #d31919;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:4px 15px;
+	text-decoration:none;
+    text-shadow:0px 0px 0px #662727;
+
+    margin-top: 5px;
+    margin-right: 15px;
+}
+.sponsorSkipButton:hover {
+	background-color:#bf2a2a;
+}
+
+.sponsorSkipButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
+.sponsorSkipButton:active {
+	position:relative;
+	top:1px;
+}
+
+.sponsorSkipDontShowButton {
+	-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
+	box-shadow:inset 0px 1px 0px 0px #cf866c;
+	background-color:#d0451b;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	border:1px solid #942911;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:13px;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #854629;
+}
+.sponsorSkipDontShowButton:hover {
+	background-color:#bc3315;
+}
+
+.sponsorSkipDontShowButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+
+.sponsorSkipDontShowButton:active {
+	position:relative;
+	top:1px;
+}
+
+/* Submission Notice */
+
+.sponsorTimeDisplay {
+	font-size: 15px;
+}
+
+.sponsorTimeEditButton {
+	text-decoration: underline;
+
+	margin-left: 13px;
+	margin-right: 13px;
+
+	font-size: 13px;
+
+	cursor: pointer;
+}
+
+.sponsorTimeEdit > input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.sponsorTimeMessagesRow {
+	max-height: 300px;
+	display: flex;
+
+	overflow: auto;
+}
+
+.sponsorTimeEdit {
+	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 {
+	font-size: 11px;
+
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.sponsorTimeEditSelector {
+	margin-top: 5px;
+	margin-bottom: 5px;
+
+	background-color: rgba(28, 28, 28, 0.9);
+    border-color: var(--sb-dark-red-outline);
+    color: white;
+    border-width: 3px;
+    padding: 3px;
+}
+
+.sponsorTimeEditSelector > option {
+	background-color: rgba(28, 28, 28, 0.9);
+	color: white;
+}
+
+/* Start SelectorComponent */
+
+.sbSelector {
+	position: absolute;
+	text-align: center;
+	width: calc(100% - var(--skip-notice-right) - var(--skip-notice-padding) * 2 - var(--skip-notice-margin) * 2 - var(--skip-notice-border-horizontal) * 2);
+
+	z-index: 1000;
+}
+
+.sbSelectorBackground {
+	text-align: center;
+
+	background-color: rgba(28, 28, 28, 0.9);
+	border-radius: 6px;
+	padding: 3px;
+	margin: auto;
+	width: 170px;
+}
+
+.sbSelectorOption {
+    cursor: pointer;
+    background-color: rgb(43, 43, 43);
+    padding: 5px;
+	margin: 5px;
+    color: white;
+    border-radius: 5px;
+    font-size: 14px;
+
+	margin-left: auto;
+    margin-right: auto;
+}
+
+.sbSelectorOption:hover {
+    background-color: #3a0000;
+}
+
+/* End SelectorComponent */
+
+.helpButton {
+	height: 25px;
+	cursor: pointer;
+	padding: 5px;
+
+	margin: auto;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+}
+.helpButton:hover {
+	opacity: 0.8;
+}
+
+.skipButtonControlBarContainer {
+	cursor: pointer;
+	display: flex;
+    color: white;
+}
+
+.skipButtonControlBarContainer.sbhidden {
+	display: none !important;
+}
+
+.skipButtonControlBarContainer.mobile {
+	bottom: 30%;
+    margin-left: 5px;
+	position: absolute;
+	height: 20px;
+
+	background-color: #00000030;
+	opacity: 0.5;
+	border-radius: 10px;
+	padding: 4px;
+}
+
+.skipButtonControlBarContainer.mobile.textDisabled {
+	padding: 0;
+	background-color: transparent;
+}
+
+.skipButtonControlBarContainer.mobile > div {
+	margin: auto;
+	margin-left: 5px;
+}
+
+#sbSkipIconControlBarImage {
+	height: 60%;
+    top: 0px;
+    bottom: 0px;
+    display: block;
+    margin: auto;
+}
+
+.mobile #sbSkipIconControlBarImage {
+	height: 100%;
+	width: 20px;
+}
+
+.sponsorBlockTooltip {
+    position: absolute;
+    background-color: rgba(28, 28, 28, 0.7);
+    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;
+}
+
+.sponsorBlockTooltip a {
+	color: white;
+}
+
+.sponsorBlockTooltip.sbTriangle::after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    left: 15%;
+    margin-left: -15px;
+    border-width: 15px;
+    border-style: solid;
+    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;
+}
+
+.sponsorBlockRectangleTooltip {
+    position: absolute;
+    border-radius: 5px;
+    padding: 10px;
+    min-width: 250px;
+    min-height: 75px;
+    white-space: normal;
+    line-height: 1.5em;
+}
+
+/* Description on right layout */
+#title > #categoryPillParent {
+	font-size: 2rem;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	line-height: 2.8rem;
+}
+#title > #categoryPillParent > #categoryPill.cbPillOpen {
+	margin-bottom: 5px;
+}
+
+#categoryPillParent {
+	height: fit-content;
+    margin-top: auto;
+	margin-bottom: auto;
+
+    position: relative;
+}
+
+.sponsorBlockCategoryPill {
+    border-radius: 25px;
+	padding-left: 8px;
+	padding-right: 8px;
+	margin-right: 3px;
+	cursor: pointer;
+	font-size: 75%;
+	height: 100%;
+	align-items: center;
+	inline-size: max-content;
+}
+
+.sponsorBlockCategoryPillTitleSection {
+	display: flex;
+	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

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

public/help/styles.css

@@ -0,0 +1,354 @@
+:root {
+  --color-scheme: dark;
+  --background: #333333;
+  --header-color: #212121;
+  --dialog-background: #181818;
+  --dialog-border: white;
+  --text: #c4c4c4;
+  --title: #dad8d8;
+  --disabled: #520000;
+  --black: black;
+  --white: white;
+}
+
+[data-theme="light"] {
+  --color-scheme: light;
+  --background: #f9f9f9;
+  --header-color: white;
+  --dialog-background: #f9f9f9;
+  --dialog-border: #282828;
+  --text: #262626;
+  --title: #707070;
+  --disabled: #ffcaca;
+  --black: white;
+  --white: black;
+}
+
+html {
+  color-scheme: var(--color-scheme);
+}
+
+.bigText {
+  font-size: 50px;
+}
+
+body {
+  background-color: var(--background);
+  font-family: sans-serif;
+}
+
+.center {
+  text-align: center;
+}
+
+.inline {
+  display: inline-block;
+}
+
+.container {
+  max-width: 60%;
+  margin: auto;
+}
+
+.projectPreview {
+  position: relative;
+}
+
+.projectPreviewImage {
+  position: absolute;
+  left: -90px;
+  width: 80px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+  position: absolute;
+  left: -210px;
+  width: 200px;
+  top: 50%;
+  transform: translateY(-20%);
+}
+
+.createdBy {
+  font-size: 14px;
+  text-align: center;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+#title {
+  background-color: #636363;
+
+  text-align: center;
+  vertical-align: middle;
+
+  font-size: 50px;
+  color: var(--header-color);
+
+  padding: 20px;
+  
+  text-decoration: none;
+
+  border-radius: 15px;
+
+  transition: font-size 1s;
+}
+
+.subtitle {
+  font-size: 40px;
+  color: #dad8d8;
+
+  padding-top: 10px;
+
+  transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+  font-size: 45px;
+
+  transition: font-size 0.4s;
+}
+
+.profilepic {
+  background-color: #636363 !important;
+  vertical-align: middle;
+}
+
+.profilepiccircle {
+  vertical-align: middle;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+a {
+  text-decoration: underline;
+  color: inherit;
+}
+
+.link {
+  padding: 20px;
+
+  height: 80px;
+
+  transition: height 0.2s;
+}
+
+.link:hover {
+  height: 95px;
+
+  transition: height 0.2s;
+}
+
+#contact,.smalllink {
+  font-size: 25px;
+  color: #e8e8e8;
+
+  text-align: center;
+  
+  padding: 10px;
+}
+
+#contact {
+  text-decoration: none;
+}
+
+p,li {
+  font-size: 16px;
+}
+
+p,li,a,span,div {
+  color: var(--text);
+}
+
+p,li,code,a {
+	text-align: left;
+	overflow-wrap: break-word;
+}
+
+.optionsFrame {
+  width: 100%;
+  height: 500px;
+}
+
+.previewImage {
+	max-height: 200px;
+}
+
+img {
+	max-width: 100%;
+
+	text-align: center;
+}
+
+#recentPostTitle {
+  font-size: 30px;
+  color: #dad8d8;
+}
+
+#recentPostDate {
+  font-size: 15px;
+  color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  color: var(--title);
+  text-align: center;
+}
+
+svg {
+ text-decoration: none; 
+}
+
+#sbDonate {
+  font-size: 10px;
+}
+
+@media screen and (orientation:portrait) {
+  .projectPreviewImage {
+    position: unset;
+    width: 50%;
+    display: block;
+    margin: auto;
+    transform: none;
+  }
+
+  .projectPreviewImageLarge {
+    position: unset;
+    left: 0;
+    width: 50%;
+    display: block;
+    margin: auto;
+    transform: unset;
+  }
+
+  .container {
+    max-width: 100%;
+    margin: 5px;
+    text-align: center;
+  }
+
+  p,li,code,a {
+    text-align: center;
+  }
+}
+
+/* keybind dialog */
+.key {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  display: inline-block;
+  min-width: 33px;
+  text-align: center;
+  font-weight: bold;
+  border-color: var(--white);
+  box-sizing: border-box;
+}
+
+.unbound, .key {
+  padding: 8px;
+}
+
+#keybind-dialog .dialog {
+  position: fixed;
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 15px;
+  max-height: 100vh;
+  width: 400px;
+  overflow-x: auto;
+  z-index: 100;
+  padding: 15px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  background-color: var(--dialog-background);
+  border-color: var(--dialog-border);
+}
+
+#change-keybind-buttons {
+  float: right;
+}
+
+#change-keybind-buttons > .option-button {
+  margin: 0 2px;
+}
+
+#change-keybind-settings {
+  margin: 15px 15px 30px;
+}
+
+#change-keybind-settings .key {
+  vertical-align: top;
+  margin: 15px 0 0 40px;
+  height: 34px;
+}
+
+#change-keybind-error {
+  margin-bottom: 15px;
+  color: red;
+  font-weight: bold;
+}
+
+.blocker {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 90;
+  background-color: #00000080;
+}
+
+.option-button {
+  cursor: pointer;
+
+  background-color: #c00000;
+  padding: 10px;
+  color: white;
+  border-radius: 5px;
+  font-size: 14px;
+
+  width: max-content;
+}
+
+.option-button:hover:not(.disabled) {
+  background-color: #fc0303;
+}
+
+.option-button.disabled {
+  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/PlayerCancelSegmentIconSponsorBlocker.svg

@@ -0,0 +1,68 @@
+<?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="PlayerCancelSegmentIconSponsorBlocker.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   inkscape:export-filename="D:\Dell Data\_Projects\_____SponsorSkip\ignored\svg\SponsorBlocker4.png"
+   inkscape:export-xdpi="43.436523"
+   inkscape:export-ydpi="43.436523">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>LogoSponsorBlocker2</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.83098592"
+     inkscape:cx="220.07455"
+     inkscape:cy="308.76246"
+     inkscape:window-x="477"
+     inkscape:window-y="961"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16"
+     inkscape:pagecheckerboard="true" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <title
+     id="title6">LogoSponsorBlocker2</title>
+  <path
+     class="cls-1"
+     d="m 282.58,568 a 65,65 0 0 1 -34.14,-9.66 C 95.41,463.94 2.54,300.46 0,121 a 64.91,64.91 0 0 1 34,-58.09 522.56,522.56 0 0 1 497.16,0 64.91,64.91 0 0 1 34,58.12 c -2.53,179.43 -95.4,342.91 -248.42,437.3 A 65,65 0 0 1 282.58,568 Z m 0,-548.31 A 502.24,502.24 0 0 0 43.4,80.22 45.27,45.27 0 0 0 19.7,120.75 c 2.44,172.67 91.81,330 239.07,420.83 a 46.19,46.19 0 0 0 47.61,0 C 453.64,450.73 543,293.42 545.45,120.75 A 45.26,45.26 0 0 0 521.75,80.21 502.26,502.26 0 0 0 282.58,19.69 Z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+  <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 224.94922 162.35352 L 282.57422 219.98047 L 340.20117 162.35352 L 384.33984 206.49219 L 326.71484 264.11719 L 384.33984 321.74414 L 340.20117 365.88281 L 282.57422 308.25781 L 224.94922 365.88281 L 180.81055 321.74414 L 238.4375 264.11719 L 180.81055 206.49219 L 224.94922 162.35352 z "
+     id="path10" />
+</svg>

public/icons/PlayerDeleteIconSponsorBlocker.svg

@@ -0,0 +1,88 @@
+<?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="PlayerDeleteIconSponsorBlocker.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   inkscape:export-filename="D:\Dell Data\_Projects\_____SponsorSkip\ignored\svg\SponsorBlocker4.png"
+   inkscape:export-xdpi="43.436523"
+   inkscape:export-ydpi="43.436523">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>LogoSponsorBlocker2</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.83098592"
+     inkscape:cx="209.2657"
+     inkscape:cy="235.85704"
+     inkscape:window-x="477"
+     inkscape:window-y="961"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <title
+     id="title6">LogoSponsorBlocker2</title>
+  <path
+     class="cls-1"
+     d="m 282.58,568 a 65,65 0 0 1 -34.14,-9.66 C 95.41,463.94 2.54,300.46 0,121 a 64.91,64.91 0 0 1 34,-58.09 522.56,522.56 0 0 1 497.16,0 64.91,64.91 0 0 1 34,58.12 c -2.53,179.43 -95.4,342.91 -248.42,437.3 A 65,65 0 0 1 282.58,568 Z m 0,-548.31 A 502.24,502.24 0 0 0 43.4,80.22 45.27,45.27 0 0 0 19.7,120.75 c 2.44,172.67 91.81,330 239.07,420.83 a 46.19,46.19 0 0 0 47.61,0 C 453.64,450.73 543,293.42 545.45,120.75 A 45.26,45.26 0 0 0 521.75,80.21 502.26,502.26 0 0 0 282.58,19.69 Z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+  <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 184.84375 113.77344 L 380.30664 113.77344 L 380.30664 161.31836 L 184.84375 161.31836 L 184.84375 113.77344 z M 184.84375 174.45703 L 380.30469 174.45703 L 380.30469 430.16992 L 184.84375 430.16992 L 184.84375 174.45703 z "
+     id="path10" />
+  <g
+     id="g849"
+     transform="matrix(1.1485222,0,0,1.1485222,-41.968703,-56.737897)"
+     style="fill:#ffffff">
+    <g
+       id="g869"
+       style="fill:#ffffff">
+      <path
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.84762007;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 223.01024,230.22964 H 245.1343 V 395.01181 H 223.01024 Z"
+         id="rect857" />
+      <path
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.84762007;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 271.51297,230.22964 h 22.12406 v 164.78217 h -22.12406 z"
+         id="rect859" />
+      <path
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.84762007;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 317.46292,230.22964 h 22.12406 v 164.78217 h -22.12406 z"
+         id="rect861" />
+    </g>
+  </g>
+</svg>

public/icons/PlayerInfoIconSponsorBlocker.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="svg16" version="1.1" viewBox="0 0 565.15 568">
+  <defs/>
+  <defs id="defs4"/>
+  <path id="path8" fill="#fff" d="M282.58 568a65 65 0 01-34.14-9.66C95.41 463.94 2.54 300.46 0 121a64.91 64.91 0 0134-58.09 522.56 522.56 0 01497.16 0 64.91 64.91 0 0134 58.12c-2.53 179.43-95.4 342.91-248.42 437.3a65 65 0 01-34.16 9.67zm0-548.31A502.24 502.24 0 0043.4 80.22a45.27 45.27 0 00-23.7 40.53c2.44 172.67 91.81 330 239.07 420.83a46.19 46.19 0 0047.61 0C453.64 450.73 543 293.42 545.45 120.75a45.26 45.26 0 00-23.7-40.54 502.26 502.26 0 00-239.17-60.52z"/>
+  <path id="path10" fill="#fff" d="M284.705 42.693A479.9 479.9 0 0054.37 100.42a22.53 22.53 0 00-11.7 20c2.4 169.84 93.001 318.22 228.161 401.59a22.48 22.48 0 0023.49 0c135.16-83.37 225.76-231.75 228.16-401.59a22.53 22.53 0 00-11.7-20 479.9 479.9 0 00-226.075-57.727zm-2.13 59.344c89.347 0 162.081 72.712 162.081 162.08 0 89.368-72.734 162.082-162.082 162.082-89.368 0-162.08-72.714-162.08-162.082s72.712-162.08 162.08-162.08zm0 30.389c-72.613 0-131.692 59.079-131.692 131.691 0 72.613 59.079 131.692 131.691 131.692 72.613 0 131.692-59.08 131.692-131.692 0-72.612-59.08-131.691-131.692-131.691zm-2.563 16.695c14.121 0 24.363 10.606 24.363 24.049 0 13.483-10.272 23.432-24.697 23.432-14.73 0-24.354-9.949-24.354-23.432 0-13.443 9.624-24.049 24.688-24.049zm-34.938 68.691h57.397l-.02 134.692 18.295.973v25.638h-76.32v-24.373l10.586-.953c5.754-.638 9.279-2.573 9.279-10.271v-89.155c0-7.08-1.905-9.32-8.014-9.32l-11.203-.629v-26.601z"/>
+</svg>

public/icons/PlayerStartIconSponsorBlocker.svg

@@ -0,0 +1,71 @@
+<?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)">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     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:window-maximized="1"
+     inkscape:current-layer="Layer_1-2" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <title
+     id="title6">LogoSponsorBlocker2</title>
+  <g
+     id="Layer_2"
+     data-name="Layer 2">
+    <g
+       id="Layer_1-2"
+       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" />
+      <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" />
+    </g>
+  </g>
+</svg>

public/icons/PlayerStopIconSponsorBlocker.svg

@@ -0,0 +1,67 @@
+<?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="PlayerStopIconSponsorBlocker.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   inkscape:export-filename="D:\Dell Data\_Projects\_____SponsorSkip\ignored\svg\SponsorBlocker4.png"
+   inkscape:export-xdpi="43.436523"
+   inkscape:export-ydpi="43.436523">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>LogoSponsorBlocker2</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.83098595"
+     inkscape:cx="194.89884"
+     inkscape:cy="305.06785"
+     inkscape:window-x="477"
+     inkscape:window-y="961"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <title
+     id="title6">LogoSponsorBlocker2</title>
+  <path
+     class="cls-1"
+     d="m 282.58,568 a 65,65 0 0 1 -34.14,-9.66 C 95.41,463.94 2.54,300.46 0,121 a 64.91,64.91 0 0 1 34,-58.09 522.56,522.56 0 0 1 497.16,0 64.91,64.91 0 0 1 34,58.12 c -2.53,179.43 -95.4,342.91 -248.42,437.3 A 65,65 0 0 1 282.58,568 Z m 0,-548.31 A 502.24,502.24 0 0 0 43.4,80.22 45.27,45.27 0 0 0 19.7,120.75 c 2.44,172.67 91.81,330 239.07,420.83 a 46.19,46.19 0 0 0 47.61,0 C 453.64,450.73 543,293.42 545.45,120.75 A 45.26,45.26 0 0 0 521.75,80.21 502.26,502.26 0 0 0 282.58,19.69 Z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+  <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 187.11914 147.00977 L 378.03125 147.00977 L 378.03125 351.04102 L 187.11914 351.04102 L 187.11914 147.00977 z "
+     id="path10" />
+</svg>

public/icons/PlayerUploadFailedIconSponsorBlocker.svg

@@ -0,0 +1,71 @@
+<?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="PlayerUploadFailedIconSponsorBlocker.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   inkscape:export-filename="D:\Dell Data\_Projects\_____SponsorSkip\ignored\svg\SponsorBlocker4.png"
+   inkscape:export-xdpi="43.436523"
+   inkscape:export-ydpi="43.436523">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>LogoSponsorBlocker2</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.83098592"
+     inkscape:cx="-277.20441"
+     inkscape:cy="286.71724"
+     inkscape:window-x="477"
+     inkscape:window-y="961"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <title
+     id="title6">LogoSponsorBlocker2</title>
+  <path
+     class="cls-1"
+     d="m 282.58,568 a 65,65 0 0 1 -34.14,-9.66 C 95.41,463.94 2.54,300.46 0,121 a 64.91,64.91 0 0 1 34,-58.09 522.56,522.56 0 0 1 497.16,0 64.91,64.91 0 0 1 34,58.12 c -2.53,179.43 -95.4,342.91 -248.42,437.3 A 65,65 0 0 1 282.58,568 Z m 0,-548.31 A 502.24,502.24 0 0 0 43.4,80.22 45.27,45.27 0 0 0 19.7,120.75 c 2.44,172.67 91.81,330 239.07,420.83 a 46.19,46.19 0 0 0 47.61,0 C 453.64,450.73 543,293.42 545.45,120.75 A 45.26,45.26 0 0 0 521.75,80.21 502.26,502.26 0 0 0 282.58,19.69 Z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+  <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 282.57422 123.27344 C 302.2486 123.27344 318.08789 139.67142 318.08789 160.03906 L 318.08789 310.16211 C 318.08789 330.52975 302.2486 346.92773 282.57422 346.92773 C 262.89984 346.92773 247.0625 330.52975 247.0625 310.16211 L 247.0625 160.03906 C 247.0625 139.67142 262.89984 123.27344 282.57422 123.27344 z M 282.57422 373.71094 C 302.2487 373.71094 318.08789 389.55014 318.08789 409.22461 C 318.08789 428.89909 302.2487 444.73633 282.57422 444.73633 C 262.89975 444.73633 247.06055 428.89909 247.06055 409.22461 C 247.06055 389.55014 262.89975 373.71094 282.57422 373.71094 z "
+     id="path10" />
+  <g
+     id="g821"
+     transform="translate(0,32.491428)"
+     style="fill:#ffffff" />
+</svg>

public/icons/PlayerUploadIconSponsorBlocker.svg

@@ -0,0 +1,67 @@
+<?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="PlayerUploadIconSponsorBlocker.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   inkscape:export-filename="D:\Dell Data\_Projects\_____SponsorSkip\ignored\svg\SponsorBlocker4.png"
+   inkscape:export-xdpi="43.436523"
+   inkscape:export-ydpi="43.436523">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>LogoSponsorBlocker2</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="0.83098595"
+     inkscape:cx="-374.9496"
+     inkscape:cy="291.99093"
+     inkscape:window-x="477"
+     inkscape:window-y="961"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg16" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <title
+     id="title6">LogoSponsorBlocker2</title>
+  <path
+     class="cls-1"
+     d="m 282.58,568 a 65,65 0 0 1 -34.14,-9.66 C 95.41,463.94 2.54,300.46 0,121 a 64.91,64.91 0 0 1 34,-58.09 522.56,522.56 0 0 1 497.16,0 64.91,64.91 0 0 1 34,58.12 c -2.53,179.43 -95.4,342.91 -248.42,437.3 A 65,65 0 0 1 282.58,568 Z m 0,-548.31 A 502.24,502.24 0 0 0 43.4,80.22 45.27,45.27 0 0 0 19.7,120.75 c 2.44,172.67 91.81,330 239.07,420.83 a 46.19,46.19 0 0 0 47.61,0 C 453.64,450.73 543,293.42 545.45,120.75 A 45.26,45.26 0 0 0 521.75,80.21 502.26,502.26 0 0 0 282.58,19.69 Z"
+     id="path8"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" />
+  <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 282.57422 112.11133 L 282.87109 112.11133 L 423.75977 365.75391 L 330.30273 365.75391 L 330.30273 409.21094 L 234.84766 409.21094 L 234.84766 365.75391 L 141.39062 365.75391 L 282.57422 112.11133 z "
+     id="path10" />
+</svg>

public/icons/bolt.svg

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

public/icons/campaign.svg

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

public/icons/check-smaller.svg

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

public/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/></svg>

public/icons/clipboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>

public/icons/close-smaller.svg

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

public/icons/dearrow.svg

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

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

public/icons/heart.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="heart.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, 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="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="32.916667"
+     inkscape:cx="11.98481"
+     inkscape:cy="12.01519"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     inkscape:window-x="1366"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0V0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"
+     id="path4"
+     style="fill:#800000" />
+</svg>

public/icons/help.svg

@@ -0,0 +1,58 @@
+<?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"
+   height="24"
+   viewBox="0 0 24 24"
+   width="24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="help.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="730"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>

public/icons/import.svg

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

public/icons/lightbulb.svg

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

public/icons/money.svg

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

public/icons/music-note.svg

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

public/icons/not_visible.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="not_visible.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, 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="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="16.458334"
+     inkscape:cx="3.8582278"
+     inkscape:cy="9.1443037"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="426"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>

public/icons/pause.svg

@@ -0,0 +1,59 @@
+<?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"
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="pause.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="730"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>