Merge pull request #317 from ajayyy/react

Categories Improvements

.github/workflows/ci.yml

@@ -21,14 +21,42 @@ jobs:
         run: npm run build:chrome
       - uses: actions/upload-artifact@v1
         with:
-          name: Chrome Extension
+          name: ChromeExtension
           path: dist
+      - run: mkdir ./builds
+      - uses: montudor/action-zip@v0.1.0
+        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@v1
         with:
-          name: Firefox Extension
+          name: FirefoxExtension
           path: dist
+      - uses: montudor/action-zip@v0.1.0
+        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@v1
+        with:
+          name: ChromeExtensionBeta
+          path: dist
+      - uses: montudor/action-zip@v0.1.0
+        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@v1
+        with:
+          name: FirefoxExtensionBeta
+          path: dist
+      - uses: montudor/action-zip@v0.1.0
+        with:
+          args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
 

.github/workflows/release.yml

@@ -0,0 +1,78 @@
+name: Upload Release Build
+
+on: 
+  release:
+    types: [published]
+
+jobs:
+
+  build:
+    name: Upload Release
+    runs-on: ubuntu-latest
+
+    steps:
+      # Initialization
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+      - run: npm install
+      - name: Copy configuration
+        run: cp config.json.example config.json
+
+      # Create Chrome artifacts
+      - name: Create Chrome artifacts
+        run: npm run build:chrome
+      - uses: actions/upload-artifact@v1
+        with:
+          name: ChromeExtension
+          path: dist
+      - run: mkdir ./builds
+      - uses: montudor/action-zip@v0.1.0
+        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@v1
+        with:
+          name: FirefoxExtension
+          path: dist
+      - uses: montudor/action-zip@v0.1.0
+        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@v1
+        with:
+          name: ChromeExtensionBeta
+          path: dist
+      - uses: montudor/action-zip@v0.1.0
+        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@v1
+        with:
+          name: FirefoxExtensionBeta
+          path: dist
+      - uses: montudor/action-zip@v0.1.0
+        with:
+          args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
+
+      # Upload each release asset
+      - name: Upload to release
+        uses: Shopify/upload-to-release@master
+        with:
+          args: builds/ChromeExtension.zip
+          name: ChromeExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Upload to release
+        uses: Shopify/upload-to-release@master
+        with:
+          args: builds/FirefoxExtension.zip
+          name: FirefoxExtension.zip
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+

README.md

@@ -34,43 +34,45 @@ SponsorBlock is an extension that will skip over sponsored segments of YouTube v
 
 Also support Invidio.us.
 
+# 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.
+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://api.sponsor.ajay.app/database.db. So, you can download a backup or get archive.org to take a backup for you if you want.
+To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database.db. If you are planning on using the database in another project, please read the [API Docs](https://github.com/ajayyy/SponsorBlock/wiki/API-Docs) page for more information.
 
-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.
+The dataset and API are now being used in some [ports](https://github.com/ajayyy/SponsorBlock/wiki/Unofficial-Ports) as well as a [neural network](https://github.com/andrewzlee/NeuralBlock).
+
+A [previous project](https://github.com/Sponsoff/sponsorship_remover) attempted 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 starting from a crowd-sourced system instead.
 
 # API
 
 You can read the API docs [here](https://github.com/ajayyy/SponsorBlockServer#api-docs).
 
-# Build Yourself
+# Building
 
-You can load this project as an unpacked extension. Make sure to rename the `config.json.example` file to `config.json` before installing.
+There are also other build scripts available. Install `npm`, then run `npm install` in the repository to install dependencies. 
 
-There are also other build scripts available. Install `npm`, then run `npm install` in the repository.
+Run `npm run build` to generate a Chrome extension.
+
+Use `npm run build:firefox` to generate a Firefox extension.
+
+The result is in `dist`. This can be loaded as an unpacked extension
 
 ## Developing with a clean profile
 
 Run `npm run dev` to run the extension using a clean browser profile with hot reloading. Use `npm run dev:firefox` for Firefox. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).
 
-## Packing
-
-Run `npm run build` to generate a packed Chrome extension.
-
-Use `npm run build:firefox` to generate a Firefox extension.
-
-The result is in `dist`.
-
 # Credit
 
-The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) used to be used.
+The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) was previously used.
 
-Original code from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but not much of the code is left.
+Originally forked from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but zero code remains.
 
 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>
 

config.json.example

@@ -1,4 +1,6 @@
 {
     "serverAddress": "https://sponsor.ajay.app",
-    "serverAddressComment": "This specifies the default SponsorBlock server to conect to"
-}
+    "testingServerAddress": "https://sponsor.ajay.app/test",
+    "serverAddressComment": "This specifies the default SponsorBlock server to conect to",
+    "categoryList": ["sponsor", "intro", "outro", "interaction", "selfpromo", "offtopic"]
+}

crowdin.yml

@@ -1,10 +1,3 @@
 files:
-  - source: /_locales/en/*
-    translation: /_locales/%two_letters_code%/%original_file_name%
-    languages_mapping:
-        two_letters_code:
-           pl-PL: "pl_PL"
-           pr-BR: "pt_BR"
-           pr-PT: "pt_PT"
-           zh-CN: "zh_CH"
-           zh-TW: "zh_TW"
+  - source: /public/_locales/en/*
+    translation: /public/_locales/%two_letters_code%/%original_file_name%

manifest/beta-manifest-extra.json

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

manifest/firefox-beta-manifest-extra.json

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

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "__MSG_Name__",
-    "version": "1.2.9",
+    "version": "1.2.26",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "content_scripts": [{
@@ -32,6 +32,7 @@
         "icons/downvote.png",
         "icons/report.png",
         "icons/close.png",
+        "icons/beep.ogg",
         "icons/PlayerInfoIconSponsorBlocker256px.png",
         "icons/PlayerDeleteIconSponsorBlocker256px.png",
         "popup.html",
@@ -67,4 +68,4 @@
         "open_in_tab": true
     },
     "manifest_version": 2
-}  
+}  

package.json

@@ -4,7 +4,15 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "concurrently": "^5.1.0"
+    "@types/react": "^16.9.22",
+    "@types/react-dom": "^16.9.5",
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.6",
+    "babel-preset-env": "^1.7.0",
+    "concurrently": "^5.1.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
   "devDependencies": {
     "web-ext": "^4.0.0",
@@ -24,16 +32,19 @@
   },
   "scripts": {
     "web-run": "npm run web-run:chrome",
-    "web-run:firefox": "cd dist && web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm",
+    "web-run:firefox": "cd dist && web-ext run --start-url https://addons.mozilla.org/firefox/addon/ublock-origin/",
     "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: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",
-    "dev": "npm run build && concurrently \"npm run web-run\" \"npm run build:watch\"",
-    "dev:firefox": "npm run build:firefox && concurrently \"npm run web-run:firefox\" \"npm run build:watch:firefox\"",
+    "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\"",
     "clean": "rimraf dist",
     "test": "npx jest"
   },

public/_locales/af/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/am/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ar/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/bg/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/bn/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ca/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/cs/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/da/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/de/messages.json

@@ -1,20 +1,8 @@
 {
-    "Name": {
-        "message": "SponsorBlock",
-        "description": "Name of the extension."
-    },
-    "fullName": {
-        "message": "SponsorBlock for YouTube - Skip Sponsorships",
-        "description": "Name of the extension."
-    },
-
     "Description": {
         "message": "Überspringe die gesponserten Inhalte in YouTube-Videos. Melde gesponsorte Inhalte in den von dir angesehenen Videos und erspare anderen die Zeit.",
         "description": "Description of the extension."
     },
-    "helpPage": {
-        "message": "index_en.html"
-    },
     "400": {
         "message": "Ungültige Anforderung"
     },
@@ -33,7 +21,7 @@
     "Sponsors": {
         "message": "Sponsoren"
     },
-   "Segment": {
+    "Segment": {
         "message": "gesponsorter Inhalt"
     },
     "Segments": {
@@ -133,37 +121,37 @@
         "message": "Bist du sicher, dass die Auswahl abgeschickt werden soll?"
     },
     "whitelistChannel": {
-         "message": "Kanal auf Whitelist setzen "
+        "message": "Kanal auf Whitelist setzen "
     },
     "removeFromWhitelist": {
-         "message": "Kanal von Whitelist entfernen"
+        "message": "Kanal von Whitelist entfernen"
     },
     "voteOnTime": {
-         "message": "Stimme für Zeiten ab"
+        "message": "Stimme für Zeiten ab"
     },
     "recordTimes": {
-         "message": "Lege das Zeitfenster eines gesponsorten Inhalts fest"
+        "message": "Lege das Zeitfenster eines gesponsorten Inhalts fest"
     },
     "soFarUHSubmited": {
-         "message": "Gemeldet wurden von dir bisher"
+        "message": "Gemeldet wurden von dir bisher"
     },
     "savedPeopleFrom": {
-         "message": "Du hast andere Benutzer bewahrt vor"
+        "message": "Du hast andere Benutzer bewahrt vor"
     },
     "viewLeaderboard": {
-         "message": "Siehe Rangliste"
+        "message": "Siehe Rangliste"
     },
     "here": {
         "message": "hier"
     },
     "recordTimesDescription": {
-         "message": "Klicke den Knopf unten, wenn der gesponsorte Inhalt beginnt und endet, um aufzunehmen und\n einzusenden"
+        "message": "Klicke den Knopf unten, wenn der gesponsorte Inhalt beginnt und endet, um aufzunehmen und\n einzusenden"
     },
     "popupHint": {
-         "message": "Hinweis: In den Optionen lässt sich eine Taste für das Festlegen von Anfang/Ende des gesponsorten Inhalts, sowie für das Einsenden festlegen"
+        "message": "Hinweis: In den Optionen lässt sich eine Taste für das Festlegen von Anfang/Ende des gesponsorten Inhalts, sowie für das Einsenden festlegen"
     },
     "lastTimes": {
-         "message": "Letzte ausgewählte Zeitabschnitte"
+        "message": "Letzte ausgewählte Zeitabschnitte"
     },
     "clearTimesButton": {
         "message": "Zeiten löschen"

public/_locales/el/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/en/messages.json

@@ -160,7 +160,7 @@
          "message": "Click the button below when the sponsorship starts and ends to record and\nsubmit it to the database."
     },
     "popupHint": {
-         "message": "Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit. (This can be changed in the options)"
+         "message": "Hint: Press the semicolon key while focused on a video to report the start/end of a sponsor and quote to submit. (This can be changed in the options)"
     },
     "lastTimes": {
          "message": "Latest Sponsor Message Times Chosen"
@@ -226,7 +226,7 @@
         "message": "Show Notice Again"
     },
     "longDescription": {
-        "message": "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.",
+        "message": "SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that lets anyone submit the start and end times of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.",
         "description": "Full description of the extension on the store pages."
     },
     "website": {
@@ -291,6 +291,12 @@
     "autoSkipDescription": {
         "message": "Auto skip will skip sponsors for you. If disabled, a notice will appear asking if you'd like to skip."
     },
+    "audioNotification": {
+        "message": "Audio Notification On Skip"
+    },
+    "audioNotificationDescription": {
+        "message": "Audio notification on skip will play a sound whenever a sponsor is skipped. If disabled (or auto skip is disabled), no sound will be played."
+    },
     "youHaveSkipped": {
         "message": "You have skipped "
     },
@@ -381,17 +387,11 @@
     "whatAutoUpvote": {
         "message": "With this enabled, the extension will upvote all submissions you view if you do not report them. If the notice is disabled, this will not occur."
     },
-    "invidiousInfo1": {
-        "message": "Invidious (the 3rd party YouTube site) support has been added!"
-    },
-    "invidiousInfo2": {
-        "message": "You MUST enable it in the options for it to work."
-    },
     "minDuration": {
         "message": "Minimum duration (seconds):"
     },
     "minDurationDescription": {
-        "message": "Sponsor segments shorter than the set value will not be skipeed or show in the player."
+        "message": "Sponsor segments shorter than the set value will not be skipped or show in the player."
      },
     "shortCheck": {
         "message": "The following submission is shorter than your minimum duration option. This could mean that this is already submitted, and just being ignored due to this option. Are you sure you would like to submit?"
@@ -428,5 +428,108 @@
     },
     "whatUnlistedCheck": {
         "message": "This setting will significantly slow down SponsorBlock. Sponsor lookups require sending the video ID to the server. If you are concerned about unlisted video IDs being sent over the internet, enable this option."
+    },
+    "mobileUpdateInfo": {
+        "message": "m.youtube.com is now supported"
+    },
+    "exportOptions": {
+        "message": "Import/Export All Options"
+    },
+    "whatExportOptions": {
+        "message": "This is your entire configuration in JSON. This includes your userID, so be sure to share this wisely."
+    },
+    "setOptions": {
+        "message": "Set Options"
+    },
+    "exportOptionsWarning": {
+        "message": "Warning: Changing the options is permanent and can break your install. Are you sure you would like to do this? Make sure to backup your old one just in case."
+    },
+    "incorrectlyFormattedOptions": {
+        "message": "This JSON is not formatted correctly. Your options have not been changed."
+    },
+    "confirmNoticeTitle" : {
+        "message": "Submit Segment"
+    },
+    "submit": {
+        "message": "Submit"
+    },
+    "cancel": {
+        "message": "Cancel"
+    },
+    "delete": {
+        "message": "Delete"
+    },
+    "preview": {
+        "message": "Preview"
+    },
+    "edit": {
+        "message": "Edit"
+    },
+    "copyDebugInformation": {
+        "message": "Copy Debug Information To Clipboard"
+    },
+    "copyDebugInformationFailed": {
+        "message": "Failed to write to clipboard"
+    },
+    "copyDebugInformationOptions": {
+        "message": "Copies information to the clipboard to be provided to a developer when raising a bug / when a developer requests it. Sensitive information such as your user ID, whitelisted channels, and custom server address have been removed. However it does contain information such as your useragent, browser, operating system, and extension version number. "
+    },
+    "copyDebugInformationComplete": {
+        "message": "The debug information has been copied to the clip board. Feel free to remove any information you would rather not share. Save this in a text file or paste into the bug report."
+    },
+    "theKey": {
+        "message": "The key"
+    },
+    "keyAlreadyUsedByYouTube": {
+        "message": "is already used by youtube. Please select another key."
+    },
+    "keyAlreadyUsed": {
+        "message": "is bound to another action. Please select another key."
+    },
+    "to": {
+        "message": "to",
+        "description": "Used between sponsor times. Example: 1:20 to 1:30"
+    },
+    "category_sponsor": {
+        "message": "Sponsor"
+    },
+    "category_intro": {
+        "message": "Intro"
+    },
+    "category_outro": {
+        "message": "Outro"
+    },
+    "category_interaction": {
+        "message": "Interaction (Redundant Like, Subscribe, Follow, etc.)"
+    },
+    "category_selfpromo": {
+        "message": "Self-Promotion and Merchandise"
+    },
+    "category_offtopic": {
+        "message": "Offtopic tangent (Subjective)"
+    },
+    "disable": {
+        "message": "Disable"
+    },
+    "manualSkip": {
+        "message": "Manual Skip"
+    },
+    "showOverlay": {
+        "message": "Show In Seek Bar"
+    },
+    "enableTestingServer": {
+        "message": "Enable Beta Testing Server"
+    },
+    "whatEnableTestingServer": {
+        "message": "Your submissions and votes WILL NOT COUNT towards the main server. Only use this for testing."
+    },
+    "testingServerWarning": {
+        "message": "All submissions and votes WILL NOT COUNT towards the main server while connecting to the test server. Make sure to disable this when you want to make real submissions."
+    },
+    "bracketNow": {
+        "message": "(Now)"
+    },
+    "moreCategories": {
+        "message": "More Categories"
     }
 }

public/_locales/es/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/et/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/fa/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/fi/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/fil/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/fr/messages.json

@@ -1,20 +1,12 @@
 {
-    "Name": {
-        "message": "SponsorBlock",
-        "description": "Name of the extension."
-    },
     "fullName": {
         "message": "SponsorBlock pour YouTube - Supprime les messages commerciaux et publicités intégrées",
         "description": "Name of the extension."
     },
-
     "Description": {
         "message": "Passe automatiquement les messages commerciaux intégrés dans les vidéos YouTube. Soumettez les segments commerciaux dans les vidéos que vous regardez pour aidez les autres.",
         "description": "Description of the extension."
     },
-    "helpPage": {
-        "message": "index_en.html"
-    },
     "400": {
         "message": "Soumission invalide"
     },
@@ -25,7 +17,7 @@
         "message": "Déja soumis"
     },
     "channelWhitelisted": {
-        "message": "Cette chaîne est sur la liste blanche !"
+        "message": "Chaîne mise sur liste blanche !"
     },
     "Sponsor": {
         "message": "message commercial"
@@ -43,16 +35,16 @@
         "message": "Message commercial passé"
     },
     "reportButtonTitle": {
-        "message": "Incorrect"
+        "message": "Signaler"
     },
     "reportButtonInfo": {
-        "message": "Signaler que ce segment commercial est incorrect ou n'existe pas."
+        "message": "Signaler que ce segment commercial est incorrect."
     },
     "Dismiss": {
         "message": "Fermer"
     },
     "Loading": {
-        "message": "Chargement en cours..."
+        "message": "Chargement..."
     },
     "Mins": {
         "message": "Minutes"
@@ -85,10 +77,10 @@
         "message": "Une erreur s'est produite lors de la soumission, veuillez ré-essayer plus tard."
     },
     "sponsorFound": {
-        "message": "Les messages commerciaux sont déjà dans notre base de donnée pour cette vidéo !"
+        "message": "Les messages commerciaux pour cette vidéo sont déjà dans notre base de donnée !"
     },
     "sponsor404": {
-        "message": "Pas de messages commerciaux trouvés"
+        "message": "Pas de sponsors trouvés"
     },
     "sponsorStart": {
         "message": "Début du message commercial"
@@ -138,9 +130,6 @@
     "removeFromWhitelist": {
         "message": "Supprimer la chaîne de la liste blanche"
     },
-    "whitelistDescription": {
-        "message": "Ajouter à la liste blanche les chaînes qui publient des messages commerciaux de façon éthique pour encourager les bons comportements, ou qui publient des messages commerciaux divertissants ou drôles. Ou pas, c'est votre choix."
-    },
     "voteOnTime": {
         "message": "Voter sur un segment commercial"
     },
@@ -187,7 +176,7 @@
         "message": "Cacher"
     },
     "Options": {
-        "message": "Options"
+        "message": "Paramètres"
     },
     "showButtons": {
         "message": "Montrer les boutons sur le lecteur YouTube"
@@ -259,5 +248,147 @@
     },
     "keybindDescriptionComplete": {
         "message": "Le raccourci choisi est : "
+    },
+    "0": {
+        "message": "Délai de connexion dépassé. Vérifiez votre connexion internet. Si votre connexion internet fonctionne, le serveur est probablement surchargé ou hors service."
+    },
+    "disableSkipping": {
+        "message": "Désactiver SponsorBlock"
+    },
+    "enableSkipping": {
+        "message": "Activer SponsorBlock"
+    },
+    "yourWork": {
+        "message": "Votre travail",
+        "description": "Used to describe the section that will show you the statistics from your submissions."
+    },
+    "502": {
+        "message": "Le serveur semble être surchargé. Réessayez dans quelques secondes."
+    },
+    "errorCode": {
+        "message": "Code d'erreur : "
+    },
+    "noticeTitleNotSkipped": {
+        "message": "Passer le sponsor ?"
+    },
+    "skip": {
+        "message": "Passer"
+    },
+    "disableAutoSkip": {
+        "message": "Désactiver le passage automatique"
+    },
+    "enableAutoSkip": {
+        "message": "Activer le passage automatique"
+    },
+    "autoSkipDescription": {
+        "message": "Le passage automatique passera automatiquement les sponsors pour vous. Si désactivé, un avis apparaîtra vous demandant si vous souhaitez passer."
+    },
+    "audioNotification": {
+        "message": "Notification audio lors du passage"
+    },
+    "audioNotificationDescription": {
+        "message": "La notification audio lors du passage jouera un son à chaque fois qu'un sponsor est ignoré. Si désactivé (ou si le passage automatique est désactivé), aucun son ne sera joué."
+    },
+    "youHaveSkipped": {
+        "message": "Vous avez passé "
+    },
+    "youHaveSaved": {
+        "message": "Vous avez économisé "
+    },
+    "minLower": {
+        "message": "minute"
+    },
+    "minsLower": {
+        "message": "minutes"
+    },
+    "hourLower": {
+        "message": "heure"
+    },
+    "hoursLower": {
+        "message": "heures"
+    },
+    "youHaveSavedTime": {
+        "message": "Vous avez économisé"
+    },
+    "youHaveSavedTimeEnd": {
+        "message": " aux autres."
+    },
+    "guildlinesSummary": {
+        "message": "- Assurez-vous que votre segment ne contient que des segments de promotion payante, rien d'autre.\n- Assurez-vous que passer ce segment ne sautera pas de contenu important\n- Si la vidéo entière est un sponsor, s'il vous plaît, ne le signalez pas. Un système complet de reportage vidéo sortira bientôt.\n- Veuillez ne pas signaler les avertissements qui pourraient montrer des biais (si une vidéo de revue est sponsorisée, ne sautez pas quand ils le mentionnent)."
+    },
+    "statusReminder": {
+        "message": "Vérifiez status.sponsor.ajay.app pour le status du serveur."
+    },
+    "changeUserID": {
+        "message": "Importer/Exporter votre ID d'utilisateur"
+    },
+    "whatChangeUserID": {
+        "message": "Gardez ça privé. C'est comme un mot de passe et ne devrait pas être partagé avec quiconque. Si quelqu'un l'obtiens, il peut vous usurper."
+    },
+    "setUserID": {
+        "message": "Définir l'ID utilisateur"
+    },
+    "userIDChangeWarning": {
+        "message": "AVERTISSEMENT : La modification de l'ID d'utilisateur est permanente. Êtes-vous sûr de vouloir faire ça ? Assurez-vous de sauvegarder votre ancien au cas où."
+    },
+    "createdBy": {
+        "message": "Créé par"
+    },
+    "autoSkip": {
+        "message": "Passage automatique"
+    },
+    "showSkipNotice": {
+        "message": "Afficher l'avis après le passage d'un sponsor"
+    },
+    "keybindCurrentlySet": {
+        "message": ". Il est actuellement réglé sur :"
+    },
+    "supportInvidious": {
+        "message": "Soutenir Invidious"
+    },
+    "supportInvidiousDescription": {
+        "message": "Invidious (invidio.us) est un client YouTube tiers. Pour l'activer, vous devez accepter les autorisations supplémentaires. Cela ne fonctionne PAS en mode incongnito sur Chrome et d'autres variantes de Chromium."
+    },
+    "optionsInfo": {
+        "message": "Activer Invidious, désactiver le passage automatique, masquer les boutons et plus encore."
+    },
+    "addInvidiousInstance": {
+        "message": "Ajouter une instance Invidious"
+    },
+    "addInvidiousInstanceDescription": {
+        "message": "Ajouter une instance Invidious personnalisée. Doit être formaté avec SEULEMENT le domaine. Exemple: invidious.ajay.app"
+    },
+    "add": {
+        "message": "Ajouter"
+    },
+    "addInvidiousInstanceError": {
+        "message": "Ce domaine n'est pas valide. Il devrait JUSTE inclure le domaine. Exemple: invidious.ajay.app"
+    },
+    "resetInvidiousInstance": {
+        "message": "Réinitialiser la liste d'instances Invidious"
+    },
+    "resetInvidiousInstanceAlert": {
+        "message": "Vous êtes sur le point de réinitialiser la liste des instances Invidious"
+    },
+    "currentInstances": {
+        "message": "Instances actuelles:"
+    },
+    "enableAutoUpvote": {
+        "message": "Vote automatique"
+    },
+    "whatAutoUpvote": {
+        "message": "Si cette option est activée, l'extension votera en faveur de tous les segments que vous visualiserez si vous ne les signalez pas. Si l'avis est désactivé, cela ne se produira pas."
+    },
+    "minDuration": {
+        "message": "Durée minimale (en secondes):"
+    },
+    "minDurationDescription": {
+        "message": "Les segments sponsorisés plus courts que la valeur définie ne seront pas passé ni affichés dans le lecteur."
+    },
+    "shortCheck": {
+        "message": "Le segment suivant est plus court que votre option de durée minimale. Cela pourrait signifier qu'il est déjà soumis, et just ignoré par cette option. Êtes-vous sûr de vouloir soumettre ?"
+    },
+    "reset": {
+        "message": "Réinitialiser"
     }
 }

public/_locales/gu/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/he/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/hi/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/hr/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/hu/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/it/messages.json

@@ -1,20 +1,12 @@
 {
-    "Name": {
-        "message": "SponsorBlock",
-        "description": "Name of the extension."
-    },
     "fullName": {
         "message": "SponsorBlock per YouTube - Salta gli sponsor",
         "description": "Name of the extension."
     },
-
     "Description": {
         "message": "Salta i contenuti sponsorizzati nei video di YouTube. Segnala gli annunci incorporati nei video che guardi per far risparmiare tempo agli altri.",
         "description": "Description of the extension."
     },
-    "helpPage": {
-        "message": "index_en.html"
-    },
     "400": {
         "message": "Richiesta non valida"
     },
@@ -33,7 +25,7 @@
     "Sponsors": {
         "message": "sponsorizzazioni"
     },
-   "Segment": {
+    "Segment": {
         "message": "spezzone sponsorizzato"
     },
     "Segments": {
@@ -84,7 +76,6 @@
     "Unknown": {
         "message": "Si è verificato un errore durante l'invio dello spezzone sponsorizzato, per favore riprova più tardi."
     },
-  
     "sponsorFound": {
         "message": "I contenuti sponsorizzati di questo video sono nel database!"
     },
@@ -134,40 +125,37 @@
         "message": "Sei sicuro di volerlo inviare?"
     },
     "whitelistChannel": {
-         "message": "Aggiungi Canale alla Whitelist"
+        "message": "Aggiungi Canale alla Whitelist"
     },
     "removeFromWhitelist": {
-         "message": "Rimuovi Canale dalla Whitelist"
-    },
-    "whitelistDescription": {
-         "message": "Aggiungi alla whitelist i canali che sponsorizzano eticamente per incoraggiare ad un comportamento corretto, oppure se sono semplicemente intrattenenti e divertenti. Oppure non farlo, decidi tu."
+        "message": "Rimuovi Canale dalla Whitelist"
     },
     "voteOnTime": {
-         "message": "Vota uno Spezzone Sponsorizzato"
+        "message": "Vota uno Spezzone Sponsorizzato"
     },
     "recordTimes": {
-         "message": "Registra uno Spezzone Sponsorizzato"
+        "message": "Registra uno Spezzone Sponsorizzato"
     },
     "soFarUHSubmited": {
-         "message": "Fino ad ora hai inviato"
+        "message": "Fino ad ora hai inviato"
     },
     "savedPeopleFrom": {
-         "message": "Hai salvato le persone da "
+        "message": "Hai salvato le persone da "
     },
     "viewLeaderboard": {
-         "message": "Guarda la classifica"
+        "message": "Guarda la classifica"
     },
     "here": {
         "message": "qui"
     },
     "recordTimesDescription": {
-         "message": "Premi il pulsante qui sotto quando inizia e finisce la sponsorizzazione per registrarla e\ninviarla al database."
+        "message": "Premi il pulsante qui sotto quando inizia e finisce la sponsorizzazione per registrarla e\ninviarla al database."
     },
     "popupHint": {
-         "message": "Suggerimento: Premi il tasto punto e virgola mentre il video è attivo per segnalare l'inizio/fine di una sponsorizzazione e virgolette per inviare."
+        "message": "Suggerimento: Premi il tasto punto e virgola mentre il video è attivo per segnalare l'inizio/fine di una sponsorizzazione e virgolette per inviare."
     },
     "lastTimes": {
-         "message": "Ultimi minutaggi sponsorizzati scelti"
+        "message": "Ultimi minutaggi sponsorizzati scelti"
     },
     "clearTimesButton": {
         "message": "Cancella Minutaggi"
@@ -197,7 +185,7 @@
         "message": "Nascondi i Pulsanti nel Lettore di YouTube"
     },
     "hideButtonsDescription": {
-		"message": "Nasconde i pulsanti che appaiono nel lettore di YouTube per inviare spezzoni sponsorizzati. Capisco che può essere fastidioso per alcune\n persone. Invece di utilizzare quei pulsanti, è possibile utilizzare questo popup per inviare gli spezzoni sponsorizzati. Per nascondere l'avviso che appare, \nusa il bottone \"Non mostrare più\" nell'avviso. Potrai sempre abilitare nuovamente queste impostazioni in futuro."
+        "message": "Nasconde i pulsanti che appaiono nel lettore di YouTube per inviare spezzoni sponsorizzati. Capisco che può essere fastidioso per alcune\n persone. Invece di utilizzare quei pulsanti, è possibile utilizzare questo popup per inviare gli spezzoni sponsorizzati. Per nascondere l'avviso che appare, \nusa il bottone \"Non mostrare più\" nell'avviso. Potrai sempre abilitare nuovamente queste impostazioni in futuro."
     },
     "showInfoButton": {
         "message": "Mostra il Pulsante Informazioni nel Lettore di YouTube"

public/_locales/ja/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/kn/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ko/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/lt/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/lv/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ml/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/mr/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ms/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/nl/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/no/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/pl_PL/messages.json

@@ -1,390 +1,373 @@
 {
-  "Name": {
-      "message": "SponsorBlock",
-      "description": "Nazwa rozszerzenia."
-  },
-  "fullName": {
-      "message": "SponsorBlock na YouTube - Omiń reklamy sponsorów",
-      "description": "Nazwa rozszerzenia."
-  },
-
-  "Description": {
-      "message": "Przewijaj reklamy sponsorów w filmach na YouTube. Zgłaszaj reklamy w nagraniach żeby nie marnować czasu innych.",
-      "description": "Opis rozszerzenia."
-  },
-  "helpPage": {
-      "message": "index_en.html"
-  },
-  "400": {
-      "message": "Serwer odpowiedział, że to zapytanie jest niepoprawne"
-  },
-  "429": {
-      "message": "Zgłosiłeś bardzo dużo segmentów reklamowych dla tego jednego nagrania, jesteś pewien, że jest ich tak dużo?"
-  },
-  "409": {
-      "message": "Treść została już wcześniej zgłoszona"
-  },
-  "channelWhitelisted": {
-      "message": "Kanał dodany do wyjątków!"
-  },
-  "Sponsor": {
-      "message": "sponsor"
-  },
-  "Sponsors": {
-      "message": "sponsorzy"
-  },
- "Segment": {
-      "message": "segmet sponsorowany"
-  },
-  "Segments": {
-      "message": "segmenty sponsorowane"
-  },
-  "noticeTitle": {
-      "message": "Segment przewinięty"
-  },
-  "reportButtonTitle": {
-      "message": "Zgłoś"
-  },
-  "reportButtonInfo": {
-      "message": "Zgłoś ten segment reklamowy jako nieprawidłowy."
-  },
-  "Dismiss": {
-      "message": "Odrzuć"
-  },
-  "Loading": {
-      "message": "Ładowanie..."
-  },
-  "Mins": {
-      "message": "Minuty"
-  },
-  "Secs": {
-      "message": "Sekundy"
-  },
-  "Hide": {
-      "message": "Nigdy nie pokazuj"
-  },
-  "hitGoBack": {
-      "message": "Kliknij cofnij aby przenieść się do miejsca przed przewinięciem."
-  },
-  "unskip": {
-      "message": "Cofnij"
-  },
-  "reskip": {
-      "message": "Przewiń"
-  },
-  "paused": {
-      "message": "Zatrzymany"
-  },
-  "confirmMSG": {
-      "message": "Żeby zmienić lub usunąć wartości, kliknij na guzik informacji lub otwórz okienko rozszerzenia klikając w ikonę rozszerzenia znajdującą się w prawym górnym rogu."
-  },
-  "clearThis": {
-      "message": "Jesteś pewien, że chcesz to usunąć?\n\n"
-  },
-  "Unknown": {
-      "message": "Wystąpił błąd podczas przesyłania twojego zgłoszenia, proszę spróbować ponownie później."
-  },
-  "sponsorFound": {
-      "message": "Segmenty reklamowe dla tego nagrania są już w bazie!"
-  },
-  "sponsor404": {
-      "message": "Nie znaleziono segmentów reklamowych"
-  },
-  "sponsorStart": {
-      "message": "Reklama zaczyna się teraz"
-  },
-  "sponsorEnd": {
-      "message": "Reklama kończy się teraz"
-  },
-  "noVideoID": {
-      "message": "Nie znaleziono nagrania wideo w tej karcie. Jeśli wiesz, że to karta YouTube'a, zamknij to okienko i otwórz je ponownie. Jeśli to nie zadziała spróbuj przeładować stronę."
-  },
-  "success": {
-      "message": "Sukces!"
-  },
-  "voted": {
-      "message": "Zagłosowano!"
-  },
-  "voteFail": {
-      "message": "Już na to głosowałeś."
-  },
-  "serverDown": {
-      "message": "Wygląda na to, że serwer nie działa. Skontaktuj się z dewloperem."
-  },
-  "connectionError": {
-      "message": "Błąd z połączeniem. Kod błędu: "
-  },
-  "wantToSubmit": {
-      "message": "Chcesz zgłosić segment sponsorowany dla nagrania z id"
-  },
-  "leftTimes": {
-      "message": "Wygląda na to, że masz nie wysłane segmenty reklamowe. Cofnij się do tej strony i zgłoś je (nie zostały usunięte)."
-  },
-  "clearTimes": {
-      "message": "Wyczyść segmenty reklamowe"
-  },
-  "openPopup": {
-      "message": "Otwórz okienko SponsorBlock"
-  },
-  "SubmitTimes": {
-      "message": "Zgłoś segmenty reklamowe"
-  },
-  "submitCheck": {
-      "message": "Jesteś pewien, że chcesz to zgłosić?"
-  },
-  "whitelistChannel": {
-       "message": "Dodaj kanał do wyjątków"
-  },
-  "removeFromWhitelist": {
-       "message": "Usuń kanał z listy wyjątków"
-  },
-  "voteOnTime": {
-       "message": "Głosuj na segment reklamowy"
-  },
-  "recordTimes": {
-       "message": "Nagraj czasy segmentów reklamowych"
-  },
-  "soFarUHSubmited": {
-       "message": "Jak na razie zgłosiłeś:"
-  },
-  "savedPeopleFrom": {
-       "message": "Ocaliłeś ludzi przed "
-  },
-  "viewLeaderboard": {
-       "message": "Zobacz ranking użytkowników"
-  },
-  "here": {
-      "message": "tutaj"
-  },
-  "recordTimesDescription": {
-       "message": "Kliknij guzik poniżej kiedy segment reklamowy się zaczyna i kończy żeby go oznaczyć i wysłać do bazy danych."
-  },
-  "popupHint": {
-       "message": "Podpowiedź: Klikając średnik kiedy zaznaczone jest zgłaszanie wideo możesz oznaczyć początek reklamy, znakiem cytatu oznaczysz jej koniec. (Klawisze można zmienić w opcjach)"
-  },
-  "lastTimes": {
-       "message": "Ostanie wybrane czasy reklam"
-  },
-  "clearTimesButton": {
-      "message": "Usuń czasy"
-  },
-  "submitTimesButton": {
-      "message": "Zgłoś czasy"
-  },
-  "publicStats": {
-      "message": "Ten dane są używane na naszej stronie żeby pokazać twój wkład. Zobacz to"
-  },
-  "setUsername": {
-      "message": "Ustaw nazwę użytkownika"
-  },
-  "discordAdvert": {
-      "message": "Dołącz do oficjalnego serwera na discordzie i podziel się wrażeniami i sugestiami!"
-  },
-  "hideThis": {
-      "message": "Ukryj to"
-  },
-  "Options": {
-      "message": "Opcje"
-  },
-  "showButtons": {
-      "message": "Pokaż guziki w odtwarzaczu YouTube"
-  },
-  "hideButtons": {
-      "message": "Ukryj guziki w odtwarzaczu YouTube"
-  },
-  "hideButtonsDescription": {
-      "message": "Ta opcja ukrywa guziki zgłaszania reklamy w odtwarzaczu. Wiem, że mogą one irytować niektórych. Zamiast zgłaszania bezpośrednio w odtwarzaczu możesz to zrobić w tym okienku. Zawsze możesz zmienić te opcje później."
-  },
-  "showInfoButton": {
-      "message": "Pokaż guzik informacyjny w odtwarzaczu YouTube"
-  },
-  "hideInfoButton": {
-      "message": "Ukryj guzik informacyjny w odtwarzaczu YouTube"
-  },
-  "whatInfoButton": {
-      "message": "Jest to guzik otwierający popup na stronie YouTube."
-  },
-  "hideDeleteButton": {
-      "message": "Ukryj guzik usuwania w odtwarzaczu YouTube"
-  },
-  "showDeleteButton": {
-      "message": "Pokaż guzik usuwania w odtwarzaczu YouTube"
-  },
-  "whatDeleteButton": {
-      "message": "Ten guzik pozwala ci wyczyścić wszystkie segmenty reklamowe w odtwarzaczu YouTube."
-  },
-  "disableViewTracking": {
-      "message": "Wyłącz licznik przewinięć"
-  },
-  "enableViewTracking": {
-      "message": "Włącz licznik przewinięć"
-  },
-  "whatViewTracking": {
-      "message": "Ta opcja śledzi które segmenty pominąłeś i informuje zgłaszających ile czasu Ci zaoszczędzili, też wraz systemem głosowania pomaga wykrywać spam w zgłoszeniach. Rozszerzenie wysyła zapytanie do serwera za każdym razem kiedy przewinąłeś segment reklamowy. Miejmy nadzieję, że większość ludzi tego nie wyłączy i licznik wyświetleń będzie rzetelny. :)"
-  },
-  "showNotice": {
-      "message": "Pokaż informacje ponownie"
-  },
-  "longDescription": {
-      "message": "SponsorBlock jest rozszerzeniem które przewinie segmenty sponsorów w filmach na YouTube. SponsorBlock jest opartym na crowdsourcing rozszerzeniem które pozwala każdemu zgłaszać początek i koniec segmentu reklamowego w filmach na YouTube. Kiedy ktoś zgłosi taki fragment zostanie on pominięty przez innych użytkowników rozszerzenia.",
-      "description": "Pełny opis rozszerzenia na stronie w sklepie."
-  },
-  "website": {
-      "message": "Strona",
-      "description": "Używane w sklepie Firefoxa"
-  },
-  "sourceCode": {
-      "message": "Kod źródłowy",
-      "description": "Używane w sklepie Firefoxa"
-  },
-  "noticeUpdate": {
-      "message": "Informacje zostały zaktualizowane!",
-      "description": "Pierwsza linia po aktualizacji informacji."
-  },
-  "noticeUpdate2": {
-      "message": "Jeśli nadal jej nie lubisz wybierz opcje nie pokazuj więcej.",
-      "description": "Druga linia po aktualizacji informacji."
-  },
-  "setStartSponsorShortcut": {
-      "message": "Ustaw klawisz do oznaczania początku reklamy"
-  },
-  "setSubmitKeybind": {
-      "message": "Ustaw klawisz do wysyłania czasów"
-  },
-  "keybindDescription": {
-      "message": "Wybierz klawisz klikając go na klawiaturze"
-  },
-  "keybindDescriptionComplete": {
-      "message": "Ustawiony klawisz to: "
-  },
-  "0": {
-      "message": "Połączenie przerwane z powodu braku odpowiedzi. Sprawdź swoje połączenie z internetem. Jeśli wszystko z nim w porządku oznacza to, że serwer jest prawdopodobnie przeciążony lub nie działa."
-  },
-  "disableSkipping": {
-      "message": "Wyłącz SponsorBlock"
-  },
-  "enableSkipping": {
-      "message": "Włącz SponsorBlock"
-  },
-  "yourWork": {
-      "message": "Twój wkład",
-      "description": "Nagłowek sekcji ze statystykami użytkownika."
-  },
-  "502": {
-      "message": "Serwer jest prawdopodobnie przeciążony, spróbuj ponownie za kilka sekund."
-  },
-  "errorCode": {
-      "message": "Kod błędu: "
-  },
-  "noticeTitleNotSkipped": {
-      "message": "Przewinąć reklamę?"
-  },
-  "skip": {
-      "message": "Przewiń"
-  },
-  "disableAutoSkip": {
-      "message": "Wyłącz auto przewijanie"
-  },
-  "enableAutoSkip": {
-      "message": "Włącz auto przewijanie"
-  },
-  "autoSkipDescription": {
-      "message": "Auto przewijanie przewinie segment za ciebie, wyłączone wyświetli komunikat z pytaniem czy chcesz przewinąć reklamę."
-  },
-  "youHaveSkipped": {
-      "message": "Przewinąłeś "
-  },
-  "youHaveSaved": {
-      "message": "Oszczędziłeś sobie "
-  },
-  "minLower": {
-      "message": "minuta"
-  },
-  "minsLower": {
-      "message": "minuty"
-  },
-  "hourLower": {
-      "message": "godzina"
-  },
-  "hoursLower": {
-      "message": "godziny"
-  },
-  "youHaveSavedTime": {
-      "message": "Oszczędziłeś ludziom"
-  },
-  "youHaveSavedTimeEnd": {
-      "message": " czasu."
-  },
-  "guildlinesSummary": {
-      "message": "- Upewnij się, że zgłaszany fragment zawiera tylko reklamę i nic więcej.\n- Upewnij się, że nie zostanie przewinięta wartościowa treść\n- Jeśli całe nagranie to reklama, proszę nie zgłaszaj go. Blokowanie całych nagrań pojawi się wkrótce.\n- Nie ukrywaj treści które są istotne dla użytkownika (nie ukrywaj informacji, że recenzja produktu została opłacona przez producenta)"
-  },
-  "statusReminder": {
-      "message": "Wejdź na status.sponsor.ajay.app żeby sprawdzić czy serwer działa."
-  },
-  "changeUserID": {
-      "message": "Zaimportuj/Wyeksportuj swój UserID"
-  },
-  "whatChangeUserID": {
-      "message": "Ta informacja jest poufna i działa jak hasło, użytkownik który ma do niej dostęp może zgłaszać treści jako ty."
-  },
-  "setUserID": {
-      "message": "Ustaw UserID"
-  },
-  "userIDChangeWarning": {
-      "message": "Ostrzeżenie: Zmiana UserID jest nieodwracalna. Jesteś pewien, że chcesz to zrobić? Skopiuj obecny UserID na wszelki wypadek."
-  },
-  "createdBy": {
-      "message": "Stworzony przez"
-  },
-  "autoSkip": {
-      "message": "Auto przewijanie"
-  },
-  "showSkipNotice": {
-      "message": "Pokaż informację po przewiniętym fragmencie"
-  },
-  "keybindCurrentlySet": {
-      "message": ". Jest obecnie ustawione jako:"
-  },
-  "supportInvidious": {
-      "message": "Wesprzyj Invidious"
-  },
-  "supportInvidiousDescription": {
-      "message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach Chromium."
-  },
-  "optionsInfo": {
-      "message": "Wesprzyj Invidious, wyłącz auto przewijanie, ukryj guziki i więcej."
-  },
-  "addInvidiousInstance": {
-      "message": "Dodaj instancje Invidious"
-  },
-  "addInvidiousInstanceDescription": {
-      "message": "Dodaj niestandardową instancje Invidious. W formie domeny. Na przykład: invidious.ajay.app"
-  },
-  "add": {
-      "message": "Dodaj"
-  },
-  "addInvidiousInstanceError": {
-      "message": "Ta domena jest nieprawidłowa. Wartość powinna zawierać TYLKO domenę. Na przykład: invidious.ajay.app"
-  },
-  "resetInvidiousInstance": {
-      "message": "Zresetuj listę instancji Invidious"
-  },
-  "resetInvidiousInstanceAlert": {
-      "message": "Zresetujesz listę instancji Invidious"
-  },
-  "currentInstances": {
-      "message": "Obecne instancje:"
-  },
-  "enableAutoUpvote": {
-      "message": "Auto potwierdzanie"
-  },
-  "whatAutoUpvote": {
-      "message": "To ustawienie sprawia, że wszystkie przewinięte przez ciebie a nie zgłoszone jako błąd segmenty reklamowe zostaną potwierdzone jako prawidłowe. Ta opcja nie działa jeśli okienko z informacją o przewinięciu jest ukryte."
-  },
-  "invidiousInfo1": {
-      "message": "Invidious (nieoficjalny klient YouTube) została dodana do wspieranych!"
-  },
-  "invidiousInfo2": {
-      "message": "Musisz odblokować to w opcjach aby móc to zrobić."
-  }
+    "fullName": {
+        "message": "SponsorBlock na YouTube - Omiń reklamy sponsorów",
+        "description": "Name of the extension."
+    },
+    "Description": {
+        "message": "Przewijaj reklamy sponsorów w filmach na YouTube. Zgłaszaj reklamy w nagraniach żeby nie marnować czasu innych.",
+        "description": "Description of the extension."
+    },
+    "400": {
+        "message": "Serwer odpowiedział, że to zapytanie jest niepoprawne"
+    },
+    "429": {
+        "message": "Zgłosiłeś bardzo dużo segmentów reklamowych dla tego jednego nagrania, jesteś pewien, że jest ich tak dużo?"
+    },
+    "409": {
+        "message": "Treść została już wcześniej zgłoszona"
+    },
+    "channelWhitelisted": {
+        "message": "Kanał dodany do wyjątków!"
+    },
+    "Sponsors": {
+        "message": "sponsorzy"
+    },
+    "Segment": {
+        "message": "segmet sponsorowany"
+    },
+    "Segments": {
+        "message": "segmenty sponsorowane"
+    },
+    "noticeTitle": {
+        "message": "Segment przewinięty"
+    },
+    "reportButtonTitle": {
+        "message": "Zgłoś"
+    },
+    "reportButtonInfo": {
+        "message": "Zgłoś ten segment reklamowy jako nieprawidłowy."
+    },
+    "Dismiss": {
+        "message": "Odrzuć"
+    },
+    "Loading": {
+        "message": "Ładowanie..."
+    },
+    "Mins": {
+        "message": "Minuty"
+    },
+    "Secs": {
+        "message": "Sekundy"
+    },
+    "Hide": {
+        "message": "Nigdy nie pokazuj"
+    },
+    "hitGoBack": {
+        "message": "Kliknij cofnij aby przenieść się do miejsca przed przewinięciem."
+    },
+    "unskip": {
+        "message": "Cofnij"
+    },
+    "reskip": {
+        "message": "Przewiń"
+    },
+    "paused": {
+        "message": "Zatrzymany"
+    },
+    "confirmMSG": {
+        "message": "Żeby zmienić lub usunąć wartości, kliknij na guzik informacji lub otwórz okienko rozszerzenia klikając w ikonę rozszerzenia znajdującą się w prawym górnym rogu."
+    },
+    "clearThis": {
+        "message": "Jesteś pewien, że chcesz to usunąć?\n\n"
+    },
+    "Unknown": {
+        "message": "Wystąpił błąd podczas przesyłania twojego zgłoszenia, proszę spróbować ponownie później."
+    },
+    "sponsorFound": {
+        "message": "Segmenty reklamowe dla tego nagrania są już w bazie!"
+    },
+    "sponsor404": {
+        "message": "Nie znaleziono segmentów reklamowych"
+    },
+    "sponsorStart": {
+        "message": "Reklama zaczyna się teraz"
+    },
+    "sponsorEnd": {
+        "message": "Reklama kończy się teraz"
+    },
+    "noVideoID": {
+        "message": "Nie znaleziono nagrania wideo w tej karcie. Jeśli wiesz, że to karta YouTube'a, zamknij to okienko i otwórz je ponownie. Jeśli to nie zadziała spróbuj przeładować stronę."
+    },
+    "success": {
+        "message": "Sukces!"
+    },
+    "voted": {
+        "message": "Zagłosowano!"
+    },
+    "voteFail": {
+        "message": "Już na to głosowałeś."
+    },
+    "serverDown": {
+        "message": "Wygląda na to, że serwer nie działa. Skontaktuj się z dewloperem."
+    },
+    "connectionError": {
+        "message": "Błąd z połączeniem. Kod błędu: "
+    },
+    "wantToSubmit": {
+        "message": "Chcesz zgłosić segment sponsorowany dla nagrania z id"
+    },
+    "leftTimes": {
+        "message": "Wygląda na to, że masz nie wysłane segmenty reklamowe. Cofnij się do tej strony i zgłoś je (nie zostały usunięte)."
+    },
+    "clearTimes": {
+        "message": "Wyczyść segmenty reklamowe"
+    },
+    "openPopup": {
+        "message": "Otwórz okienko SponsorBlock"
+    },
+    "SubmitTimes": {
+        "message": "Zgłoś segmenty reklamowe"
+    },
+    "submitCheck": {
+        "message": "Jesteś pewien, że chcesz to zgłosić?"
+    },
+    "whitelistChannel": {
+        "message": "Dodaj kanał do wyjątków"
+    },
+    "removeFromWhitelist": {
+        "message": "Usuń kanał z listy wyjątków"
+    },
+    "voteOnTime": {
+        "message": "Głosuj na segment reklamowy"
+    },
+    "recordTimes": {
+        "message": "Nagraj czasy segmentów reklamowych"
+    },
+    "soFarUHSubmited": {
+        "message": "Jak na razie zgłosiłeś:"
+    },
+    "savedPeopleFrom": {
+        "message": "Ocaliłeś ludzi przed "
+    },
+    "viewLeaderboard": {
+        "message": "Zobacz ranking użytkowników"
+    },
+    "here": {
+        "message": "tutaj"
+    },
+    "recordTimesDescription": {
+        "message": "Kliknij guzik poniżej kiedy segment reklamowy się zaczyna i kończy żeby go oznaczyć i wysłać do bazy danych."
+    },
+    "popupHint": {
+        "message": "Podpowiedź: Klikając średnik kiedy zaznaczone jest zgłaszanie wideo możesz oznaczyć początek reklamy, znakiem cytatu oznaczysz jej koniec. (Klawisze można zmienić w opcjach)"
+    },
+    "lastTimes": {
+        "message": "Ostanie wybrane czasy reklam"
+    },
+    "clearTimesButton": {
+        "message": "Usuń czasy"
+    },
+    "submitTimesButton": {
+        "message": "Zgłoś czasy"
+    },
+    "publicStats": {
+        "message": "Ten dane są używane na naszej stronie żeby pokazać twój wkład. Zobacz to"
+    },
+    "setUsername": {
+        "message": "Ustaw nazwę użytkownika"
+    },
+    "discordAdvert": {
+        "message": "Dołącz do oficjalnego serwera na discordzie i podziel się wrażeniami i sugestiami!"
+    },
+    "hideThis": {
+        "message": "Ukryj to"
+    },
+    "Options": {
+        "message": "Opcje"
+    },
+    "showButtons": {
+        "message": "Pokaż guziki w odtwarzaczu YouTube"
+    },
+    "hideButtons": {
+        "message": "Ukryj guziki w odtwarzaczu YouTube"
+    },
+    "hideButtonsDescription": {
+        "message": "Ta opcja ukrywa guziki zgłaszania reklamy w odtwarzaczu. Wiem, że mogą one irytować niektórych. Zamiast zgłaszania bezpośrednio w odtwarzaczu możesz to zrobić w tym okienku. Zawsze możesz zmienić te opcje później."
+    },
+    "showInfoButton": {
+        "message": "Pokaż guzik informacyjny w odtwarzaczu YouTube"
+    },
+    "hideInfoButton": {
+        "message": "Ukryj guzik informacyjny w odtwarzaczu YouTube"
+    },
+    "whatInfoButton": {
+        "message": "Jest to guzik otwierający popup na stronie YouTube."
+    },
+    "hideDeleteButton": {
+        "message": "Ukryj guzik usuwania w odtwarzaczu YouTube"
+    },
+    "showDeleteButton": {
+        "message": "Pokaż guzik usuwania w odtwarzaczu YouTube"
+    },
+    "whatDeleteButton": {
+        "message": "Ten guzik pozwala ci wyczyścić wszystkie segmenty reklamowe w odtwarzaczu YouTube."
+    },
+    "disableViewTracking": {
+        "message": "Wyłącz licznik przewinięć"
+    },
+    "enableViewTracking": {
+        "message": "Włącz licznik przewinięć"
+    },
+    "whatViewTracking": {
+        "message": "Ta opcja śledzi które segmenty pominąłeś i informuje zgłaszających ile czasu Ci zaoszczędzili, też wraz systemem głosowania pomaga wykrywać spam w zgłoszeniach. Rozszerzenie wysyła zapytanie do serwera za każdym razem kiedy przewinąłeś segment reklamowy. Miejmy nadzieję, że większość ludzi tego nie wyłączy i licznik wyświetleń będzie rzetelny. :)"
+    },
+    "showNotice": {
+        "message": "Pokaż informacje ponownie"
+    },
+    "longDescription": {
+        "message": "SponsorBlock jest rozszerzeniem które przewinie segmenty sponsorów w filmach na YouTube. SponsorBlock jest opartym na crowdsourcing rozszerzeniem które pozwala każdemu zgłaszać początek i koniec segmentu reklamowego w filmach na YouTube. Kiedy ktoś zgłosi taki fragment zostanie on pominięty przez innych użytkowników rozszerzenia.",
+        "description": "Full description of the extension on the store pages."
+    },
+    "website": {
+        "message": "Strona",
+        "description": "Used on Firefox Store Page"
+    },
+    "sourceCode": {
+        "message": "Kod źródłowy",
+        "description": "Used on Firefox Store Page"
+    },
+    "noticeUpdate": {
+        "message": "Informacje zostały zaktualizowane!",
+        "description": "The first line of the message displayed after the notice was upgraded."
+    },
+    "noticeUpdate2": {
+        "message": "Jeśli nadal jej nie lubisz wybierz opcje nie pokazuj więcej.",
+        "description": "The second line of the message displayed after the notice was upgraded."
+    },
+    "setStartSponsorShortcut": {
+        "message": "Ustaw klawisz do oznaczania początku reklamy"
+    },
+    "setSubmitKeybind": {
+        "message": "Ustaw klawisz do wysyłania czasów"
+    },
+    "keybindDescription": {
+        "message": "Wybierz klawisz klikając go na klawiaturze"
+    },
+    "keybindDescriptionComplete": {
+        "message": "Ustawiony klawisz to: "
+    },
+    "0": {
+        "message": "Połączenie przerwane z powodu braku odpowiedzi. Sprawdź swoje połączenie z internetem. Jeśli wszystko z nim w porządku oznacza to, że serwer jest prawdopodobnie przeciążony lub nie działa."
+    },
+    "disableSkipping": {
+        "message": "Wyłącz SponsorBlock"
+    },
+    "enableSkipping": {
+        "message": "Włącz SponsorBlock"
+    },
+    "yourWork": {
+        "message": "Twój wkład",
+        "description": "Used to describe the section that will show you the statistics from your submissions."
+    },
+    "502": {
+        "message": "Serwer jest prawdopodobnie przeciążony, spróbuj ponownie za kilka sekund."
+    },
+    "errorCode": {
+        "message": "Kod błędu: "
+    },
+    "noticeTitleNotSkipped": {
+        "message": "Przewinąć reklamę?"
+    },
+    "skip": {
+        "message": "Przewiń"
+    },
+    "disableAutoSkip": {
+        "message": "Wyłącz auto przewijanie"
+    },
+    "enableAutoSkip": {
+        "message": "Włącz auto przewijanie"
+    },
+    "autoSkipDescription": {
+        "message": "Auto przewijanie przewinie segment za ciebie, wyłączone wyświetli komunikat z pytaniem czy chcesz przewinąć reklamę."
+    },
+    "youHaveSkipped": {
+        "message": "Przewinąłeś "
+    },
+    "youHaveSaved": {
+        "message": "Oszczędziłeś sobie "
+    },
+    "minLower": {
+        "message": "minuta"
+    },
+    "minsLower": {
+        "message": "minuty"
+    },
+    "hourLower": {
+        "message": "godzina"
+    },
+    "hoursLower": {
+        "message": "godziny"
+    },
+    "youHaveSavedTime": {
+        "message": "Oszczędziłeś ludziom"
+    },
+    "youHaveSavedTimeEnd": {
+        "message": " czasu."
+    },
+    "guildlinesSummary": {
+        "message": "- Upewnij się, że zgłaszany fragment zawiera tylko reklamę i nic więcej.\n- Upewnij się, że nie zostanie przewinięta wartościowa treść\n- Jeśli całe nagranie to reklama, proszę nie zgłaszaj go. Blokowanie całych nagrań pojawi się wkrótce.\n- Nie ukrywaj treści które są istotne dla użytkownika (nie ukrywaj informacji, że recenzja produktu została opłacona przez producenta)"
+    },
+    "statusReminder": {
+        "message": "Wejdź na status.sponsor.ajay.app żeby sprawdzić czy serwer działa."
+    },
+    "changeUserID": {
+        "message": "Zaimportuj/Wyeksportuj swój UserID"
+    },
+    "whatChangeUserID": {
+        "message": "Ta informacja jest poufna i działa jak hasło, użytkownik który ma do niej dostęp może zgłaszać treści jako ty."
+    },
+    "setUserID": {
+        "message": "Ustaw UserID"
+    },
+    "userIDChangeWarning": {
+        "message": "Ostrzeżenie: Zmiana UserID jest nieodwracalna. Jesteś pewien, że chcesz to zrobić? Skopiuj obecny UserID na wszelki wypadek."
+    },
+    "createdBy": {
+        "message": "Stworzony przez"
+    },
+    "autoSkip": {
+        "message": "Auto przewijanie"
+    },
+    "showSkipNotice": {
+        "message": "Pokaż informację po przewiniętym fragmencie"
+    },
+    "keybindCurrentlySet": {
+        "message": ". Jest obecnie ustawione jako:"
+    },
+    "supportInvidious": {
+        "message": "Wesprzyj Invidious"
+    },
+    "supportInvidiousDescription": {
+        "message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach Chromium."
+    },
+    "optionsInfo": {
+        "message": "Wesprzyj Invidious, wyłącz auto przewijanie, ukryj guziki i więcej."
+    },
+    "addInvidiousInstance": {
+        "message": "Dodaj instancje Invidious"
+    },
+    "addInvidiousInstanceDescription": {
+        "message": "Dodaj niestandardową instancje Invidious. W formie domeny. Na przykład: invidious.ajay.app"
+    },
+    "add": {
+        "message": "Dodaj"
+    },
+    "addInvidiousInstanceError": {
+        "message": "Ta domena jest nieprawidłowa. Wartość powinna zawierać TYLKO domenę. Na przykład: invidious.ajay.app"
+    },
+    "resetInvidiousInstance": {
+        "message": "Zresetuj listę instancji Invidious"
+    },
+    "resetInvidiousInstanceAlert": {
+        "message": "Zresetujesz listę instancji Invidious"
+    },
+    "currentInstances": {
+        "message": "Obecne instancje:"
+    },
+    "enableAutoUpvote": {
+        "message": "Auto potwierdzanie"
+    },
+    "whatAutoUpvote": {
+        "message": "To ustawienie sprawia, że wszystkie przewinięte przez ciebie a nie zgłoszone jako błąd segmenty reklamowe zostaną potwierdzone jako prawidłowe. Ta opcja nie działa jeśli okienko z informacją o przewinięciu jest ukryte."
+    }
 }

public/_locales/pt_BR/messages.json

@@ -1,19 +1,11 @@
 {
-    "Name": {
-        "message": "SponsorBlock",
-        "description": "Nome da extensão."
-    },
     "fullName": {
         "message": "SponsorBlock para YouTube - Pule patrocínios",
-        "description": "Nome da extensão."
+        "description": "Name of the extension."
     },
-
     "Description": {
         "message": "Pule patrocinadores em vídeos do YouTube. Reporte patrocinadores em videos que você assiste para salvar o tempo dos outros.",
-        "description": "Descrição da extensão."
-    },
-    "helpPage": {
-        "message": "index_en.html"
+        "description": "Description of the extension."
     },
     "400": {
         "message": "O servidor disse que esse pedido foi inválido"
@@ -33,7 +25,7 @@
     "Sponsors": {
         "message": "patrocinadores"
     },
-   "Segment": {
+    "Segment": {
         "message": "segmento de patrocinador"
     },
     "Segments": {
@@ -84,7 +76,6 @@
     "Unknown": {
         "message": "Teve um erro ao enviar seus segmentos, tente novamente depois."
     },
-  
     "sponsorFound": {
         "message": "Os patrocinadores desse vídeo estão no banco de dados!"
     },
@@ -134,40 +125,37 @@
         "message": "Tem a certeza que pretende submeter?"
     },
     "whitelistChannel": {
-         "message": "Meter canal na Whitelist"
+        "message": "Meter canal na Whitelist"
     },
     "removeFromWhitelist": {
-         "message": "Remover canal da Whitelist"
-    },
-    "whitelistDescription": {
-         "message": "Colocar na Whitelist canais com patrocínios éticos que encoragem boas atitude, ou simplesmente canais com patrocínios engraçados. Ou não, é consigo."
+        "message": "Remover canal da Whitelist"
     },
     "voteOnTime": {
-         "message": "Vote num intervalo de patrocínio"
+        "message": "Vote num intervalo de patrocínio"
     },
     "recordTimes": {
-         "message": "Registe um intervalo de patrocínio"
+        "message": "Registe um intervalo de patrocínio"
     },
     "soFarUHSubmited": {
-         "message": "Até agora submeteu"
+        "message": "Até agora submeteu"
     },
     "savedPeopleFrom": {
-         "message": "Poupaste a outros de "
+        "message": "Poupaste a outros de "
     },
     "viewLeaderboard": {
-         "message": "Ver a leaderboard"
+        "message": "Ver a leaderboard"
     },
     "here": {
         "message": "aqui"
     },
     "recordTimesDescription": {
-         "message": "Carregue neste botão abaixo quando o patrocínio começar e quando\n acabar para registar e submetê-lo à base de dados"
+        "message": "Carregue neste botão abaixo quando o patrocínio começar e quando\n acabar para registar e submetê-lo à base de dados"
     },
     "popupHint": {
-         "message": "Dica: Carregue na tecla ; enquanto num vídeo para registar o começo/fim de um patrocínio e \" para submeter"
+        "message": "Dica: Carregue na tecla ; enquanto num vídeo para registar o começo/fim de um patrocínio e \" para submeter"
     },
     "lastTimes": {
-         "message": "Intervalos de Patrocínios Escolhidos mais Recentemente"
+        "message": "Intervalos de Patrocínios Escolhidos mais Recentemente"
     },
     "clearTimesButton": {
         "message": "Limpar Intervalos"
@@ -231,14 +219,14 @@
     },
     "longDescription": {
         "message": "SponsorBlock é uma extensão que salta segmentos patrocinados em vídeos do YouTube. SponsorBlock é uma extenção crowdfunded que permite a qualquer um submeter o início e o fim de segmentos patrocinados. Assim que uma pessoa submete essa informação todos com a extenção poderam saltar automaticamete o patrocínio.",
-        "description": "Descrição completa da extençao nas lojas dos browsers."
+        "description": "Full description of the extension on the store pages."
     },
     "website": {
         "message": "Site",
-        "description": "Usado na pagina da loja do Firefox"
+        "description": "Used on Firefox Store Page"
     },
     "sourceCode": {
         "message": "Código fonte",
-        "description": "Usado na pagina da loja do Firefox"
+        "description": "Used on Firefox Store Page"
     }
-}
+}

public/_locales/pt_PT/messages.json

@@ -1,19 +1,11 @@
 {
-    "Name": {
-        "message": "SponsorBlock",
-        "description": "Nome da extensão."
-    },
     "fullName": {
         "message": "SponsorBlock para o YouTube - Salte patrocínios",
-        "description": "Nome da extensão."
+        "description": "Name of the extension."
     },
-
     "Description": {
         "message": "Salte patrocinadores em vídeos do YouTube. Reporte patrocinadores em vídeos que assista para poupar tempo a outros.",
-        "description": "Descrição da extensão."
-    },
-    "helpPage": {
-        "message": "index_en.html"
+        "description": "Description of the extension."
     },
     "400": {
         "message": "O servidor disse que este pedido foi inválido"
@@ -33,7 +25,7 @@
     "Sponsors": {
         "message": "patrocinadores"
     },
-   "Segment": {
+    "Segment": {
         "message": "segmento de patrocínio"
     },
     "Segments": {
@@ -133,40 +125,37 @@
         "message": "Tem a certeza que pretende submeter?"
     },
     "whitelistChannel": {
-         "message": "Meter canal na Whitelist"
+        "message": "Meter canal na Whitelist"
     },
     "removeFromWhitelist": {
-         "message": "Remover canal da Whitelist"
-    },
-    "whitelistDescription": {
-         "message": "Colocar na Whitelist canais com patrocínios éticos que encoragem boas atitude, ou simplesmente canais com patrocínios engraçados. Ou não, é consigo."
+        "message": "Remover canal da Whitelist"
     },
     "voteOnTime": {
-         "message": "Vote num intervalo de patrocínio"
+        "message": "Vote num intervalo de patrocínio"
     },
     "recordTimes": {
-         "message": "Registe um intervalo de patrocínio"
+        "message": "Registe um intervalo de patrocínio"
     },
     "soFarUHSubmited": {
-         "message": "Até agora submeteu"
+        "message": "Até agora submeteu"
     },
     "savedPeopleFrom": {
-         "message": "Poupaste a outros de "
+        "message": "Poupaste a outros de "
     },
     "viewLeaderboard": {
-         "message": "Ver a leaderboard"
+        "message": "Ver a leaderboard"
     },
     "here": {
         "message": "aqui"
     },
     "recordTimesDescription": {
-         "message": "Carregue neste botão abaixo quando o patrocínio começar e quando\n acabar para registar e submetê-lo à base de dados"
+        "message": "Carregue neste botão abaixo quando o patrocínio começar e quando\n acabar para registar e submetê-lo à base de dados"
     },
     "popupHint": {
-         "message": "Dica: Carregue na tecla ; enquanto num vídeo para registar o começo/fim de um patrocínio e \" para submeter"
+        "message": "Dica: Carregue na tecla ; enquanto num vídeo para registar o começo/fim de um patrocínio e \" para submeter"
     },
     "lastTimes": {
-         "message": "Intervalos de Patrocínios Escolhidos mais Recentemente"
+        "message": "Intervalos de Patrocínios Escolhidos mais Recentemente"
     },
     "clearTimesButton": {
         "message": "Limpar Intervalos"
@@ -230,14 +219,14 @@
     },
     "longDescription": {
         "message": "SponsorBlock é uma extensão que salta segmentos patrocinados em vídeos do YouTube. SponsorBlock é uma extenção crowdfunded que permite a qualquer um submeter o início e o fim de segmentos patrocinados. Assim que uma pessoa submete essa informação todos com a extenção poderam saltar automaticamete o patrocínio.",
-        "description": "Descrição completa da extençao nas lojas dos browsers."
+        "description": "Full description of the extension on the store pages."
     },
     "website": {
         "message": "Site",
-        "description": "Usado na pagina da loja do Firefox"
+        "description": "Used on Firefox Store Page"
     },
     "sourceCode": {
         "message": "Código fonte",
-        "description": "Usado na pagina da loja do Firefox"
+        "description": "Used on Firefox Store Page"
     }
-}
+}

public/_locales/ro/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ru/messages.json

@@ -1,19 +1,11 @@
 {
-    "Name": {
-        "message": "SponsorBlock",
-        "description": "Название расширения, не переводится."
-    },
     "fullName": {
         "message": "SponsorBlock для YouTube - Пропускайте спонсорские вставки",
-        "description": "Название расширения."
+        "description": "Name of the extension."
     },
-
     "Description": {
         "message": "Пропускайте спонсорские вставки в видео на YouTube. Сообщайте о спонсорских вставках в видео, которые Вы смотрите, чтобы сэкономить время других пользователей.",
-        "description": "Описание раширения."
-    },
-    "helpPage": {
-        "message": "index_en.html"
+        "description": "Description of the extension."
     },
     "400": {
         "message": "Сервер отклонил этот запрос."
@@ -28,12 +20,12 @@
         "message": "Канал добавлен в белый список!"
     },
     "Sponsor": {
-        "message": "Спонсор"
+        "message": "спонсора"
     },
     "Sponsors": {
-        "message": "Спонсоры"
+        "message": "спонсоров"
     },
-   "Segment": {
+    "Segment": {
         "message": "спонсорская вставка"
     },
     "Segments": {
@@ -84,7 +76,6 @@
     "Unknown": {
         "message": "При отправке отчета о спонсорском сегменте произошла ошибка. Попытайтесь отправить его позже."
     },
-  
     "sponsorFound": {
         "message": "Спонсоры этого видео уже находятся в базе данных!"
     },
@@ -123,5 +114,299 @@
     },
     "submitCheck": {
         "message": "Вы уверены, что хотите отправить эту информацию?"
+    },
+    "whitelistChannel": {
+        "message": "Добавить канал в белый список"
+    },
+    "removeFromWhitelist": {
+        "message": "Удалить канал из белого списка"
+    },
+    "voteOnTime": {
+        "message": "Проголосовать за время спонсорской вставки"
+    },
+    "recordTimes": {
+        "message": "Записать время спонсорской вставки"
+    },
+    "soFarUHSubmited": {
+        "message": "На данный момент Вы отправили"
+    },
+    "savedPeopleFrom": {
+        "message": "Вы помогли людям сэкономить "
+    },
+    "viewLeaderboard": {
+        "message": "Посмотреть доску почёта"
+    },
+    "here": {
+        "message": "здесь"
+    },
+    "recordTimesDescription": {
+        "message": "Нажмите кнопку ниже, когда спонсорская вставка начинается и заканчивается, чтобы записать\nи отправить её в базу данных."
+    },
+    "popupHint": {
+        "message": "Подсказка: нажмите ;, чтобы сообщить начало/конец спонсорской вставки, и \", чтобы отправить. (Это можно изменить в настройках)"
+    },
+    "lastTimes": {
+        "message": "Последнее выбранное время спонсорской вставки"
+    },
+    "clearTimesButton": {
+        "message": "Очистить время"
+    },
+    "submitTimesButton": {
+        "message": "Отправить время"
+    },
+    "publicStats": {
+        "message": "Оно используется на публичной странице статистики, чтобы показать Ваш вклад. Её можно посмотреть "
+    },
+    "setUsername": {
+        "message": "Установить имя пользователя"
+    },
+    "discordAdvert": {
+        "message": "Присоединяйтесь к официальному серверу Discord, чтобы оставить предложения и обратную связь!"
+    },
+    "hideThis": {
+        "message": "Скрыть это"
+    },
+    "Options": {
+        "message": "Настройки"
+    },
+    "showButtons": {
+        "message": "Показывать кнопки в плеере YouTube"
+    },
+    "hideButtons": {
+        "message": "Скрыть кнопки в плеере YouTube"
+    },
+    "hideButtonsDescription": {
+        "message": "Эта настройка скрывает кнопки для отправки спонсорских вставок, которые появляются в плеере YouTube. Они могут раздражать\n некоторых. Вместо кнопок для отправки спонсорских вставок можно использовать это всплывающее окно. Чтобы скрыть\nуведомление, нажмите кнопку \"Не показывать снова\" в уведомлении. Вы всегда сможете включить эти настройки обратно."
+    },
+    "showInfoButton": {
+        "message": "Показывать кнопку информации в плеере YouTube"
+    },
+    "hideInfoButton": {
+        "message": "Скрыть кнопку информации в плеере YouTube"
+    },
+    "whatInfoButton": {
+        "message": "Эта кнопка открывает всплывающее окно на странице YouTube."
+    },
+    "hideDeleteButton": {
+        "message": "Скрыть кнопку удаления в плеере YouTube"
+    },
+    "showDeleteButton": {
+        "message": "Показывать кнопку удаления в плеере YouTube"
+    },
+    "whatDeleteButton": {
+        "message": "Эта кнопка позволяет Вам очистить все спонсорские вставки в плеере YouTube."
+    },
+    "disableViewTracking": {
+        "message": "Отключить отслеживание количества пропусков спонсорских вставок"
+    },
+    "enableViewTracking": {
+        "message": "Включить отслеживание количества пропусков спонсорских вставок"
+    },
+    "whatViewTracking": {
+        "message": "Эта возможность отслеживает, какие спонсорские вставки Вы пропустили, чтобы помочь пользователям узнать, насколько их\nвклад помог другим, и используется как метрика, чтобы убедиться, что спам не попадает в базу данных. Расширение отправляет\nсообщение на сервер каждый раз, когда Вы пропускаете спонсорскую вставку. Надеемся, большая часть пользователей не поменяет эту настройку, так что у нас будет точная статистика просмотров :)"
+    },
+    "showNotice": {
+        "message": "Показывать уведомление снова"
+    },
+    "longDescription": {
+        "message": "SponsorBlock — это расширение, которое пропускает спонсорские вставки в видео на YouTube. SponsorBlock — это краудсорсинговое расширение, которое позволяет каждому отправить время начала и конца спонсорских сегментов в видео на YouTube. После того, как кто-нибудь отправляет эту информацию, все остальные пользователи расширения будут автоматически пропускать спонсорские сегменты.",
+        "description": "Full description of the extension on the store pages."
+    },
+    "website": {
+        "message": "Сайт",
+        "description": "Used on Firefox Store Page"
+    },
+    "sourceCode": {
+        "message": "Исходный код",
+        "description": "Used on Firefox Store Page"
+    },
+    "noticeUpdate": {
+        "message": "Уведомление было обновлено!",
+        "description": "The first line of the message displayed after the notice was upgraded."
+    },
+    "noticeUpdate2": {
+        "message": "Если оно Вам всё равно не нравится, нажмите \"не показывать\".",
+        "description": "The second line of the message displayed after the notice was upgraded."
+    },
+    "setStartSponsorShortcut": {
+        "message": "Назначить горячую клавишу для начала спонсорской вставки"
+    },
+    "setSubmitKeybind": {
+        "message": "Назначить горячую клавишу для отправки"
+    },
+    "keybindDescription": {
+        "message": "Нажмите клавишу, чтобы выбрать её"
+    },
+    "keybindDescriptionComplete": {
+        "message": "Клавиша назначена на: "
+    },
+    "0": {
+        "message": "Таймаут подключения. Проверьте ваше соединение с интернетом. Если ваш интернет работает, сервер, скорее всего, перегружен или лежит."
+    },
+    "disableSkipping": {
+        "message": "Отключить SponsorBlock"
+    },
+    "enableSkipping": {
+        "message": "Включить SponsorBlock"
+    },
+    "yourWork": {
+        "message": "Ваша работа",
+        "description": "Used to describe the section that will show you the statistics from your submissions."
+    },
+    "502": {
+        "message": "Похоже, сервер перегружен. Попробуйте ещё раз через несколько секунд."
+    },
+    "errorCode": {
+        "message": "Код ошибки: "
+    },
+    "noticeTitleNotSkipped": {
+        "message": "Пропустить спонсорскую вставку?"
+    },
+    "skip": {
+        "message": "Пропустить"
+    },
+    "disableAutoSkip": {
+        "message": "Отключить автоматический пропуск"
+    },
+    "enableAutoSkip": {
+        "message": "Включить автоматический пропуск"
+    },
+    "autoSkipDescription": {
+        "message": "Автоматический пропуск будет пропускать спонсорские вставки за Вас. Если выключено, будет показываться уведомление с предложением пропустить."
+    },
+    "youHaveSkipped": {
+        "message": "Вы пропустили "
+    },
+    "youHaveSaved": {
+        "message": "Вы сэкономили "
+    },
+    "minLower": {
+        "message": "минуту"
+    },
+    "minsLower": {
+        "message": "минут"
+    },
+    "hourLower": {
+        "message": "час"
+    },
+    "hoursLower": {
+        "message": "часов"
+    },
+    "youHaveSavedTime": {
+        "message": "Вы сэкономили людям"
+    },
+    "youHaveSavedTimeEnd": {
+        "message": " их жизней."
+    },
+    "guildlinesSummary": {
+        "message": "- Убедитесь, что Ваш сегмент содержит только платную интеграцию, и больше ничего.\n- Убедитесь, что пропуск этого сегмента не пропустит никакой ценный контент\n- Если всё видео целиком спонсорское, пожалуйста, не сообщайте о нём. Система для сообщения о целых видео скоро выйдет.\n- Пожалуйста, не сообщайте об отказах от ответственности, которые могут показать предвзятость (если видео с обзором проплачено, не пропускайте, когда они это упоминают)."
+    },
+    "statusReminder": {
+        "message": "Смотрите состояние сервера на status.sponsor.ajay.app."
+    },
+    "changeUserID": {
+        "message": "Импортировать/экспортировать Ваш идентификатор пользователя"
+    },
+    "whatChangeUserID": {
+        "message": "Это нужно держать в секрете. Это как пароль, не стоит им ни с кем делиться. Если он у кого-то есть, он сможет выдать себя за Вас."
+    },
+    "setUserID": {
+        "message": "Установить идентификатор пользователя"
+    },
+    "userIDChangeWarning": {
+        "message": "Внимание: изменение идентификатора пользователя необратимо. Вы действительно хотите это сделать? Сделайте резервную копию вашего старого на всякий случай."
+    },
+    "createdBy": {
+        "message": "Создано"
+    },
+    "autoSkip": {
+        "message": "Автоматический пропуск"
+    },
+    "showSkipNotice": {
+        "message": "Показывать уведомление после пропуска спонсорской вставки"
+    },
+    "keybindCurrentlySet": {
+        "message": ". Он сейчас назначен на:"
+    },
+    "supportInvidious": {
+        "message": "Поддержка Invidious"
+    },
+    "supportInvidiousDescription": {
+        "message": "Invidious (invidio.us) — это неофициальный клиент YouTube. Чтобы включить поддержку, Вам понадобится принять дополнительные разрешения. Это НЕ работает в приватном режиме в Chrome и других вариантах Chromium."
+    },
+    "optionsInfo": {
+        "message": "Включить поддержку Invidious, выключить автоматический пропуск, скрыть кнопки и не только."
+    },
+    "addInvidiousInstance": {
+        "message": "Добавить инстанс Invidious"
+    },
+    "addInvidiousInstanceDescription": {
+        "message": "Добавить свой инстанс Invidious. Формат: ТОЛЬКО домен. Например, invidious.ajay.app"
+    },
+    "add": {
+        "message": "Добавить"
+    },
+    "addInvidiousInstanceError": {
+        "message": "Это неправильный домен. Введите ТОЛЬКО домен. Например, invidious.ajay.app"
+    },
+    "resetInvidiousInstance": {
+        "message": "Сбросить список инстансов Invidious"
+    },
+    "resetInvidiousInstanceAlert": {
+        "message": "Вы собираетесь сбросить список инстансов Invidious"
+    },
+    "currentInstances": {
+        "message": "Текущие инстансы:"
+    },
+    "enableAutoUpvote": {
+        "message": "Автоматически голосовать \"за\""
+    },
+    "whatAutoUpvote": {
+        "message": "Если это включено, расширение будет голосовать \"за\" все предложения других пользователей, если Вы на них не пожалуетесь. Если уведомление отключено, это не будет происходить."
+    },
+    "minDuration": {
+        "message": "Минимальная длительность (секунд):"
+    },
+    "minDurationDescription": {
+        "message": "Спонсорские сегменты короче этого значения не будут пропускаться и не будут показаны в плеере."
+    },
+    "shortCheck": {
+        "message": "Следующий диапазон времени короче, чем Ваша настройка минимальной длительности. Это может означать, что он уже был отправлен, и просто игнорируется из-за этой настройки. Вы действительно хотите отправить?"
+    },
+    "showUploadButton": {
+        "message": "Показывать кнопку отправки"
+    },
+    "whatUploadButton": {
+        "message": "Эта кнопка появляется в плеере YouTube после того, как Вы выбрали отметку времени и готовы к отправке."
+    },
+    "customServerAddress": {
+        "message": "Адрес сервера SponsorBlock"
+    },
+    "customServerAddressDescription": {
+        "message": "Адрес, по которому SponsorBlock обращается к серверу.\nМеняйте только если Вы подняли свой сервер."
+    },
+    "save": {
+        "message": "Сохранить"
+    },
+    "reset": {
+        "message": "Сбросить"
+    },
+    "customAddressError": {
+        "message": "Этот адрес неправильного формата. Убедитесь, что он начинается с http:// или https://, и что на конце нет слэшей."
+    },
+    "areYouSureReset": {
+        "message": "Вы действительно хотите это сбросить?"
+    },
+    "confirmPrivacy": {
+        "message": "Было обнаружено, что это видео непубличное. Нажмите \"отмена\", если не хотите проверять его на спонсоров."
+    },
+    "unlistedCheck": {
+        "message": "Игнорировать непубличные видео"
+    },
+    "whatUnlistedCheck": {
+        "message": "Эта настройка значительно замедлит SponsorBlock. Поиск спонсоров требует отправки идентификатора видео на сервер. Если Вас беспокоит отправка идентификаторов непубличных видео по интернету, включите эту настройку."
+    },
+    "mobileUpdateInfo": {
+        "message": "m.youtube.com теперь поддерживается"
     }
 }

public/_locales/sk/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/sl/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/sr/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/sv/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/sw/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/ta/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/te/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/th/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/tr/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/uk/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/vi/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/zh_CN/messages.json

@@ -0,0 +1 @@
+{}

public/_locales/zh_TW/messages.json

@@ -0,0 +1 @@
+{}

public/content.css

@@ -80,13 +80,15 @@
 
 	border-radius: 5px;
 
-	animation: fadeIn 0.5s;
-
 	border-spacing: 5px 10px;
 	padding-left: 5px;
 	padding-right: 5px;
 }
 
+.sponsorSkipNoticeFadeIn {
+	animation: fadeIn 0.5s;
+}
+
 .sponsorSkipNoticeFadeOut {
 	animation: fadeOut 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
@@ -311,4 +313,66 @@
 .sponsorSkipDontShowButton:active {
 	position:relative;
 	top:1px;
+}
+
+/* Submission Notice */
+
+.sponsorTimeDisplay {
+	font-size: 15px;
+}
+
+.sponsorTimeEditButton {
+	text-decoration: underline;
+
+	margin-left: 20px;
+	margin-right: 20px;
+
+	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;
+}
+
+.sponsorTimeEditMinutes {
+	width: 30px;
+}
+
+.sponsorTimeEditSeconds {
+	width: 60px;
+}
+
+.sponsorNowButton {
+	font-size: 11px;
+
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.sponsorTimeCategories {
+	margin-top: 5px;
+	margin-bottom: 5px;
+
+	background-color: rgba(28, 28, 28, 0.9);
+    border-color: rgb(130,0,0,0.9);
+    color: white;
+    border-width: 3px;
+    padding: 3px;
 }

public/options/options.css

@@ -323,4 +323,27 @@ svg {
 
     font-size: 14px;
     color: white;
+}
+
+/* React styles */
+
+.categoryTableElement {
+    font-size: 16px;
+
+    color: white;
+}
+
+.categoryTableElement > * {
+    padding-right: 15px;
+    padding-bottom: 15px;
+}
+
+.categoryOptionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
 }

public/options/options.html

@@ -24,6 +24,13 @@
 	
 		<div id="options" class="hidden">
 
+			<div id="category-type" option-type="react-CategoryChooserComponent">
+
+			</div>
+
+			<br/>
+			<br/>
+
 			<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
 				<label class="switch-container" label-name="__MSG_supportInvidious__">
 					<label class="switch">
@@ -76,24 +83,6 @@
 
 			<br/>
 			<br/>
-
-			<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
-				<label class="switch-container" label-name="__MSG_autoSkip__">
-					<label class="switch">
-						<input type="checkbox" checked>
-						<span class="slider round"></span>
-					</label>
-				</label>
-	
-				<br/>
-				<br/>
-	
-				<div class="small-description">__MSG_autoSkipDescription__</div>
-			</div>
-
-			<br/>
-			<br/>
-	
 	
 			<div option-type="keybind-change" sync-option="startSponsorKeybind">
 				<div class="option-button trigger-button">
@@ -228,6 +217,23 @@
 				<div class="small-description">__MSG_whatUploadButton__</div>
 			</div>
 
+			<br/>
+			<br/>
+
+			<div option-type="toggle" sync-option="audioNotificationOnSkip">
+				<label class="switch-container" label-name="__MSG_audioNotification__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_audioNotificationDescription__</div>
+			</div>
+
 			<br/>
 			<br/>
 	
@@ -305,6 +311,62 @@
 				</div>
 			</div>
 
+			<br/>
+			<br/>
+	
+			<div option-type="private-text-change" sync-option="*" confirm-message="exportOptionsWarning">
+				<div class="option-button trigger-button">
+					__MSG_exportOptions__
+				</div>
+	
+				<br/>
+	
+				<div class="small-description">__MSG_whatExportOptions__</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<input class="option-text-box" type="text">
+	
+					<br/>
+					<br/>
+	
+					<div class="option-button text-change-set">
+						__MSG_setOptions__
+					</div>
+				</div>
+			</div>
+
+			<br/>
+			<br/>
+
+			<div option-type="button-press" sync-option="copyDebugInformation" confirm-message="copyDebugInformation">
+				<div class="option-button trigger-button">
+					__MSG_copyDebugInformation__
+				</div>
+	
+				<br/>
+	
+				<div class="small-description">__MSG_copyDebugInformationOptions__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" sync-option="testingServer" confirm-message="testingServerWarning">
+				<label class="switch-container" label-name="__MSG_enableTestingServer__">
+					<label class="switch">
+						<input type="checkbox">
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_whatEnableTestingServer__</div>
+			</div>
+
 			<br/>
 			<br/>
 

public/popup.html

@@ -39,29 +39,15 @@
 
             <div id="submissionSection"  class="popupElement" style="display: none">
               <h3 class="popupElement">__MSG_lastTimes__</h3>
-              <b>
-                <div id="sponsorMessageTimes" class="popupElement">
-        
-                </div>
-              </b>
+              
+              <b>Sponsor Editing has been moved and will appear after you click submit</b>
 
               <br/>
       
-              <button id="clearTimes" class="smallButton popupElement">__MSG_clearTimesButton__</button>
-      
               <div id="submitTimesContainer" class="popupElement" style="display: none">
 
-                <br/>
-                <br/>
-
                 <button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
 
-                <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
-                  <h3 id="submitTimesInfoMessage" class="popupElement">
-
-                  </h3>
-                </div>
-
               </div>
 
             </div>

src/background.ts

@@ -1,5 +1,8 @@
 import * as Types from "./types";
+
 import Config from "./config";
+// Make the config public for debugging purposes
+(<any> window).SB = Config;
 
 import Utils from "./utils";
 var utils = new Utils({
@@ -85,10 +88,6 @@ chrome.runtime.onInstalled.addListener(function (object) {
             const newUserID = utils.generateUserID();
             //save this UUID
             Config.config.userID = newUserID;
-            
-            //TODO: Remove when invidious support is old
-            // Don't show this to new users
-            Config.config.invidiousUpdateInfoShowCount = 6;
         }
     }, 1500);
 });
@@ -185,13 +184,13 @@ function submitVote(type, UUID, callback) {
     });
 }
 
-async function submitTimes(videoID, callback) {
+async function submitTimes(videoID: string, callback) {
     //get the video times from storage
     let sponsorTimes = Config.config.sponsorTimes.get(videoID);
     let userID = Config.config.userID;
 		
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-        let durationResult = <Types.videoDurationResponse> await new Promise((resolve, reject) => {
+        let durationResult = <Types.VideoDurationResponse> await new Promise((resolve, reject) => {
             chrome.tabs.query({
                 active: true,
                 currentWindow: true
@@ -219,21 +218,24 @@ async function submitTimes(videoID, callback) {
                     + "&userID=" + userID, function(xmlhttp, error) {
                 if (xmlhttp.readyState == 4 && !error) {
                     callback({
-                        statusCode: xmlhttp.status
+                        statusCode: xmlhttp.status,
+                        responseText: xmlhttp.responseText
                     });
 
+                    
+
                     if (xmlhttp.status == 200) {
                         //save the amount contributed
                         if (!increasedContributionAmount) {
                             increasedContributionAmount = true;
                             Config.config.sponsorTimesContributed = Config.config.sponsorTimesContributed + sponsorTimes.length;
                         }
-                    } else if (error) {
-                        callback({
-                            statusCode: -1
-                        });
                     }
-                }  
+                } else if (error) {
+                    callback({
+                        statusCode: -1
+                    });
+                }
             });
         }
     }

src/components/CategoryChooserComponent.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+import Config from "../config"
+import * as CompileConfig from "../../config.json";
+import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+
+export interface CategoryChooserProps { 
+
+}
+
+export interface CategoryChooserState {
+
+}
+
+class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
+
+    constructor(props: CategoryChooserProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            
+        }
+    }
+
+    render() {
+        return (
+            <table id="categoryChooserTable"
+                className="categoryChooserTable"> 
+                <tbody>
+                    {this.getCategorySkipOptions()}
+                </tbody> 
+            </table>
+        );
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
+        let elements: JSX.Element[] = [];
+
+        for (const category of CompileConfig.categoryList) {
+            elements.push(
+                <CategorySkipOptionsComponent category={category}
+                    defaultColor={"00d400"}
+                    key={category}>
+                </CategorySkipOptionsComponent>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default CategoryChooserComponent;

src/components/CategorySkipOptionsComponent.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+
+import Config from "../config"
+import { CategorySkipOption } from "../types";
+
+export interface CategorySkipOptionsProps { 
+    category: string;
+    defaultColor: string;
+}
+
+export interface CategorySkipOptionsState {
+    color: string;
+}
+
+class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
+
+    constructor(props: CategorySkipOptionsProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            color: props.defaultColor
+        }
+    }
+
+    render() {
+        let defaultOption = "disable";
+        // Set the default opton properly
+        for (const categorySelection of Config.config.categorySelections) {
+            if (categorySelection.name === this.props.category) {
+                switch (categorySelection.option) {
+                    case CategorySkipOption.ShowOverlay:
+                        defaultOption = "showOverlay";
+                        break;
+                    case CategorySkipOption.ManualSkip:
+                        defaultOption = "manualSkip";
+                        break;
+                    case CategorySkipOption.AutoSkip:
+                        defaultOption = "autoSkip";
+                        break;
+                }
+            }
+        }
+
+        return (
+            <tr id={this.props.category + "OptionsRow"}
+                className="categoryTableElement">
+                <td id={this.props.category + "OptionName"}
+                    className="categoryTableLabel">
+                        {chrome.i18n.getMessage("category_" + this.props.category)}
+                </td>
+
+                <td id={this.props.category + "SkipOption"}>
+                    <select
+                        className="categoryOptionsSelector"
+                        defaultValue={defaultOption}
+                        onChange={this.skipOptionSelected.bind(this)}>
+                            {this.getCategorySkipOptions()}
+                    </select>
+                </td>
+
+                {/* TODO: Add colour chooser */}
+            </tr>
+        );
+    }
+
+    skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+        let option: CategorySkipOption;
+
+        this.removeCurrentCategorySelection();
+
+        switch (event.target.value) {
+            case "disable": 
+                return;
+            case "showOverlay":
+                option = CategorySkipOption.ShowOverlay;
+
+                break;
+            case "manualSkip":
+                option = CategorySkipOption.ManualSkip;
+
+                break;
+            case "autoSkip":
+                option = CategorySkipOption.AutoSkip;
+
+                break;
+        }
+
+        Config.config.categorySelections.push({
+            name: this.props.category,
+            option: option
+        });
+
+        // Forces the Proxy to send this to the chrome storage API
+        Config.config.categorySelections = Config.config.categorySelections;
+    }
+
+    /** Removes this category from the config list of category selections */
+    removeCurrentCategorySelection(): void {
+        // Remove it if it exists
+        for (let i = 0; i < Config.config.categorySelections.length; i++) {
+            if (Config.config.categorySelections[i].name === this.props.category) {
+                Config.config.categorySelections.splice(i, 1);
+
+                // Forces the Proxy to send this to the chrome storage API
+                Config.config.categorySelections = Config.config.categorySelections;
+
+                break;
+            }
+        }
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
+        let elements: JSX.Element[] = [];
+""
+        let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
+
+        for (const optionName of optionNames) {
+            elements.push(
+                <option key={optionName} value={optionName}>
+                    {chrome.i18n.getMessage(optionName)}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default CategorySkipOptionsComponent;

src/components/NoticeComponent.tsx

@@ -0,0 +1,246 @@
+import * as React from "react";
+
+export interface NoticeProps {
+    noticeTitle: string,
+
+    maxCountdownTime?: () => number,
+    amountOfPreviousNotices?: number,
+    timed?: boolean,
+    idSuffix?: string,
+
+    fadeIn?: boolean,
+
+    // Callback for when this is closed
+    closeListener: () => void,
+
+    zIndex?: number
+}
+
+export interface NoticeState {
+    noticeTitle: string,
+
+    maxCountdownTime?: () => number,
+
+    countdownTime: number,
+    countdownText: string,
+}
+
+class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
+    countdownInterval: NodeJS.Timeout;
+    idSuffix: any;
+
+    amountOfPreviousNotices: number;
+
+    constructor(props: NoticeProps) {
+        super(props);
+
+        let maxCountdownTime = () => {
+            if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
+            else return 4;
+        };
+    
+        //the id for the setInterval running the countdown
+        this.countdownInterval = null;
+
+        this.amountOfPreviousNotices = props.amountOfPreviousNotices || 0;
+
+        this.idSuffix = props.idSuffix || "";
+
+        // Setup state
+        this.state = {
+            noticeTitle: props.noticeTitle,
+
+            maxCountdownTime,
+
+            //the countdown until this notice closes
+            countdownTime: maxCountdownTime(),
+            countdownText: null,
+        }
+    }
+
+    componentDidMount() {
+        this.startCountdown();
+    }
+
+    render() {
+        let noticeStyle: React.CSSProperties = {
+            zIndex: this.props.zIndex || (50 + this.amountOfPreviousNotices)
+        }
+
+        return (
+            <table id={"sponsorSkipNotice" + this.idSuffix} 
+                className={"sponsorSkipObject sponsorSkipNotice" + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")}
+                style={noticeStyle}
+                onMouseEnter={this.pauseCountdown.bind(this)}
+                onMouseLeave={this.startCountdown.bind(this)}> 
+                <tbody>
+
+                    {/* First row */}
+                    <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
+                        {/* Left column */}
+                        <td>
+                            {/* Logo */}
+                            <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                className="sponsorSkipLogo sponsorSkipObject"
+                                src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                            </img>
+
+                            <span id={"sponsorSkipMessage" + this.idSuffix}
+                                className="sponsorSkipMessage sponsorSkipObject">
+                                
+                                {this.state.noticeTitle}
+                            </span>
+                        </td>
+
+                        {/* Right column */}
+                        <td className="sponsorSkipNoticeRightSection"
+                            style={{top: "11px"}}>
+                            
+                            {/* Time left */}
+                            {this.props.timed ? ( 
+                                <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
+                                    className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
+
+                                    {this.state.countdownText || (this.state.countdownTime + "s")}
+                                </span>
+                            ) : ""}
+                        
+
+                            {/* Close button */}
+                            <img src={chrome.extension.getURL("icons/close.png")}
+                                className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
+                                onClick={() => this.close()}>
+                            </img>
+                        </td>
+                    </tr> 
+
+                    {this.props.children}
+
+                </tbody> 
+            </table>
+        );
+    }
+
+    //called every second to lower the countdown before hiding the notice
+    countdown() {
+        if (!this.props.timed) return;
+
+        let countdownTime = this.state.countdownTime - 1;
+
+        if (countdownTime <= 0) {
+            //remove this from setInterval
+            clearInterval(this.countdownInterval);
+
+            //time to close this notice
+            this.close();
+
+            return;
+        }
+
+        if (countdownTime == 3) {
+            //start fade out animation
+            let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+            notice.style.removeProperty("animation");
+            notice.classList.add("sponsorSkipNoticeFadeOut");
+        }
+
+        this.setState({
+            countdownTime
+        })
+    }
+
+    pauseCountdown() {
+        if (!this.props.timed) return;
+
+        //remove setInterval
+        clearInterval(this.countdownInterval);
+        this.countdownInterval = null;
+
+        //reset countdown and inform the user
+        this.setState({
+            countdownTime: this.state.maxCountdownTime(),
+            countdownText: chrome.i18n.getMessage("paused")
+        });
+        
+        //remove the fade out class if it exists
+        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        notice.classList.remove("sponsorSkipNoticeFadeOut");
+        notice.style.animation = "none";
+    }
+
+    startCountdown() {
+        if (!this.props.timed) return;
+
+        //if it has already started, don't start it again
+        if (this.countdownInterval !== null) return;
+
+        this.setState({
+            countdownTime: this.state.maxCountdownTime(),
+            countdownText: null
+        });
+
+        this.countdownInterval = setInterval(this.countdown.bind(this), 1000);
+    }
+
+    resetCountdown() {
+        if (!this.props.timed) return;
+
+        this.setState({
+            countdownTime: this.state.maxCountdownTime(),
+            countdownText: null
+        });
+    }
+    
+    /**
+     * @param silent If true, the close listener will not be called
+     */
+    close(silent?: boolean) {
+        //remove setInterval
+        if (this.countdownInterval !== null) clearInterval(this.countdownInterval);
+
+        if (!silent) this.props.closeListener();
+    }
+
+    changeNoticeTitle(title) {
+        this.setState({
+            noticeTitle: title
+        });
+    }
+    
+    addNoticeInfoMessage(message: string, message2: string = "") {
+        //TODO: Replace
+
+        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+
+        let previousInfoMessage2 = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix + "2");
+        if (previousInfoMessage2 != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage2);
+        }
+        
+        //add info
+        let thanksForVotingText = document.createElement("p");
+        thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
+        thanksForVotingText.className = "sponsorTimesInfoMessage";
+        thanksForVotingText.innerText = message;
+
+        //add element to div
+        document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
+    
+        if (message2 !== undefined) {
+            let thanksForVotingText2 = document.createElement("p");
+            thanksForVotingText2.id = "sponsorTimesInfoMessage" + this.idSuffix + "2";
+            thanksForVotingText2.className = "sponsorTimesInfoMessage";
+            thanksForVotingText2.innerText = message2;
+
+            //add element to div
+            document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
+        }
+    }
+}
+
+export default NoticeComponent;

src/components/NoticeTextSectionComponent.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export interface NoticeTextSelectionProps {
+    text: string,
+    idSuffix: string
+}
+
+export interface NoticeTextSelectionState {
+
+}
+
+class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionProps, NoticeTextSelectionState> {
+
+    constructor(props: NoticeTextSelectionProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
+                className="sponsorTimesInfoMessage">
+                    {this.props.text}
+            </p>
+        );
+    }
+}
+
+export default NoticeTextSelectionComponent;

src/components/SkipNoticeComponent.tsx

@@ -0,0 +1,321 @@
+import * as React from "react";
+import Config from "../config"
+import { ContentContainer } from "../types";
+
+import Utils from "../utils";
+var utils = new Utils();
+
+import NoticeComponent from "./NoticeComponent";
+import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
+
+
+export interface SkipNoticeProps { 
+    UUID: string;
+    autoSkip: boolean;
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    closeListener: () => void
+}
+
+export interface SkipNoticeState {
+    noticeTitle: string,
+
+    messages: string[],
+
+    countdownTime: number,
+    maxCountdownTime: () => number;
+    countdownText: string,
+
+    unskipText: string,
+    unskipCallback: () => void
+}
+
+class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
+    UUID: string;
+    autoSkip: boolean;
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    amountOfPreviousNotices: number;
+    audio: HTMLAudioElement;
+    
+    idSuffix: any;
+
+    noticeRef: React.MutableRefObject<NoticeComponent>;
+
+    constructor(props: SkipNoticeProps) {
+        super(props);
+        this.noticeRef = React.createRef();
+
+        this.UUID = props.UUID;
+        this.autoSkip = props.autoSkip;
+        this.contentContainer = props.contentContainer;
+        this.audio = null;
+    
+        let noticeTitle = chrome.i18n.getMessage("noticeTitle");
+    
+        if (!this.autoSkip) {
+            noticeTitle = chrome.i18n.getMessage("noticeTitleNotSkipped");
+        }
+    
+        //add notice
+        this.amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+    
+        //this is the suffix added at the end of every id
+        this.idSuffix = this.UUID + this.amountOfPreviousNotices;
+
+        if (this.amountOfPreviousNotices > 0) {
+            //another notice exists
+
+            let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
+            previousNotice.classList.add("secondSkipNotice")
+        }
+
+        // Setup state
+        this.state = {
+            noticeTitle,
+            messages: [],
+
+            //the countdown until this notice closes
+            maxCountdownTime: () => 4,
+            countdownTime: 4,
+            countdownText: null,
+
+            unskipText: chrome.i18n.getMessage("unskip"),
+            unskipCallback: this.unskip.bind(this)
+        }
+
+        if (!this.autoSkip) {
+            Object.assign(this.state, this.getUnskippedModeInfo(chrome.i18n.getMessage("skip")));
+        }
+    }
+
+    componentDidMount() {
+        if (Config.config.audioNotificationOnSkip && this.audio) {
+            this.audio.volume = this.contentContainer().v.volume * 0.1;
+            this.audio.play();
+        }
+    }
+
+    render() {
+        let noticeStyle: React.CSSProperties = {
+            zIndex: 50 + this.amountOfPreviousNotices
+        }
+        if (this.contentContainer().onMobileYouTube) {
+            noticeStyle.bottom = "4em";
+            noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
+        }
+
+        return (
+            <NoticeComponent noticeTitle={this.state.noticeTitle}
+                amountOfPreviousNotices={this.amountOfPreviousNotices}
+                idSuffix={this.idSuffix}
+                fadeIn={true}
+                timed={true}
+                maxCountdownTime={this.state.maxCountdownTime}
+                ref={this.noticeRef}
+                closeListener={this.props.closeListener}>
+                    
+                {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
+                    <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
+                </audio>}
+
+                {/* Text Boxes */}
+                {this.getMessageBoxes()}
+              
+                {/* Last Row */}
+                <tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
+
+                    {/* Vote Button Container */}
+                    <td id={"sponsorTimesVoteButtonsContainer" + this.idSuffix}
+                        className="sponsorTimesVoteButtonsContainer">
+
+                        {/* Report Text */}
+                        <span id={"sponsorTimesReportText" + this.idSuffix}
+                            className="sponsorTimesInfoMessage sponsorTimesVoteButtonMessage"
+                            title={chrome.i18n.getMessage("reportButtonInfo")}
+                            style={{marginRight: "5px"}}>
+
+                            {chrome.i18n.getMessage("reportButtonTitle")}
+                        </span>
+
+                        {/* Report Button */}
+                        <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
+                            className="sponsorSkipObject voteButton"
+                            src={chrome.extension.getURL("icons/report.png")}
+                            title={chrome.i18n.getMessage("reportButtonInfo")}
+                            onClick={() => this.contentContainer().vote(0, this.UUID, this)}>
+                        
+                        </img>
+
+                    </td>
+
+                    {/* Unskip Button */}
+                    <td className="sponsorSkipNoticeUnskipSection">
+                        <button id={"sponsorSkipUnskipButton" + this.idSuffix}
+                            className="sponsorSkipObject sponsorSkipNoticeButton"
+                            style={{marginLeft: "4px"}}
+                            onClick={this.state.unskipCallback}>
+
+                            {this.state.unskipText}
+                        </button>
+                    </td>
+
+                    {/* Never show button if autoSkip is enabled */}
+                    {!this.autoSkip ? "" : 
+                        <td className="sponsorSkipNoticeRightSection">
+                            <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                                onClick={this.contentContainer().dontShowNoticeAgain}>
+
+                                {chrome.i18n.getMessage("Hide")}
+                            </button>
+                        </td>
+                    }
+                </tr>
+
+            </NoticeComponent>
+        );
+    }
+
+    getMessageBoxes(): JSX.Element[] | JSX.Element {
+        if (this.state.messages.length === 0) {
+            // Add a spacer if there is no text
+            return (
+                <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
+                    className="sponsorBlockSpacer">
+                </tr>
+            );
+        }
+
+        let elements: JSX.Element[] = [];
+
+        for (let i = 0; i < this.state.messages.length; i++) {
+            elements.push(
+                <NoticeTextSelectionComponent idSuffix={this.idSuffix}
+                    text={this.state.messages[i]}
+                    key={i}>
+                </NoticeTextSelectionComponent>
+            )
+        }
+
+        return elements;
+    }
+
+    unskip() {
+        this.contentContainer().unskipSponsorTime(this.UUID);
+
+        this.unskippedMode(chrome.i18n.getMessage("reskip"));
+    }
+
+    /** Sets up notice to be not skipped yet */
+    unskippedMode(buttonText: string) {
+        //setup new callback and reset countdown
+        this.setState(this.getUnskippedModeInfo(buttonText), () => {
+            this.noticeRef.current.resetCountdown();
+        });
+    }
+
+    getUnskippedModeInfo(buttonText: string) {
+        let maxCountdownTime = function() {
+            let sponsorTime = utils.getSponsorTimeFromUUID(this.contentContainer().sponsorTimes, this.UUID);
+            let duration = Math.round((sponsorTime.segment[1] - this.contentContainer().v.currentTime) * (1 / this.contentContainer().v.playbackRate));
+
+            return Math.max(duration, 4);
+        }.bind(this);
+
+        return {
+            unskipText: buttonText,
+
+            unskipCallback: this.reskip.bind(this),
+
+            //change max duration to however much of the sponsor is left
+            maxCountdownTime: maxCountdownTime,
+
+            countdownTime: maxCountdownTime()
+        }
+    }
+
+    reskip() {
+        this.contentContainer().reskipSponsorTime(this.UUID);
+
+        //reset countdown
+        this.setState({
+            unskipText: chrome.i18n.getMessage("unskip"),
+            unskipCallback: this.unskip.bind(this),
+
+            maxCountdownTime: () => 4,
+            countdownTime: 4
+        });
+
+        // See if the title should be changed
+        if (!this.autoSkip) {
+            this.setState({
+                noticeTitle: chrome.i18n.getMessage("noticeTitle")
+            });
+
+            if(Config.config.autoUpvote) this.contentContainer().vote(1, this.UUID);
+        }
+    }
+
+    afterDownvote() {
+        this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
+        this.setNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
+        
+        //remove this sponsor from the sponsors looked up
+        //find which one it is
+        for (let i = 0; i < this.contentContainer().sponsorTimes.length; i++) {
+            if (this.contentContainer().sponsorTimes[i].UUID == this.UUID) {
+                //this one is the one to hide
+                
+                //add this as a hidden sponsorTime
+                this.contentContainer().hiddenSponsorTimes.push(i);
+            
+                this.contentContainer().updatePreviewBar();
+                break;
+            }
+        }
+    }
+
+    setNoticeInfoMessage(...messages: string[]) {
+        this.setState({
+            messages
+        })
+    }
+    
+    addVoteButtonInfo(message) {
+        this.resetVoteButtonInfo();
+        
+        //hide report button and text for it
+        let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix);
+        if (downvoteButton != null) {
+            downvoteButton.style.display = "none";
+        }
+        let downvoteButtonText = document.getElementById("sponsorTimesReportText" + this.idSuffix);
+        if (downvoteButtonText != null) {
+            downvoteButtonText.style.display = "none";
+        }
+        
+        //add info
+        let thanksForVotingText = document.createElement("td");
+        thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + this.idSuffix;
+        thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+        thanksForVotingText.innerText = message;
+
+        //add element to div
+        document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).prepend(thanksForVotingText);
+    }
+
+    resetVoteButtonInfo() {
+        let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+
+        //show button again
+        document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix).style.removeProperty("display");
+    }
+}
+
+export default SkipNoticeComponent;

src/components/SponsorTimeEditComponent.tsx

@@ -0,0 +1,324 @@
+import * as React from "react";
+
+import Config from "../config";
+import * as CompileConfig from "../../config.json";
+
+import Utils from "../utils";
+import { ContentContainer, SponsorTime } from "../types";
+import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
+var utils = new Utils();
+
+export interface SponsorTimeEditProps {
+    index: number,
+
+    idSuffix: string,
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer,
+
+    submissionNotice: SubmissionNoticeComponent;
+}
+
+export interface SponsorTimeEditState {
+    editing: boolean;
+    sponsorTimeEdits: string[][];
+}
+
+class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
+
+    idSuffix: string;
+
+    categoryOptionRef: React.RefObject<HTMLSelectElement>;
+
+    constructor(props: SponsorTimeEditProps) {
+        super(props);
+
+        this.categoryOptionRef = React.createRef();
+
+        this.idSuffix = this.props.idSuffix;
+
+        this.state = {
+            editing: false,
+            sponsorTimeEdits: [[null, null], [null, null]]
+        };
+    }
+
+    componentDidMount() {
+        // Prevent inputs from triggering key events
+        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('keydown', function (event) {
+            event.stopPropagation();
+        });
+    }
+
+    render() {
+        let style: React.CSSProperties = {
+            textAlign: "center"
+        };
+
+        if (this.props.index != 0) {
+            style.marginTop = "15px";
+        }
+
+        // Create time display
+        let timeDisplay: JSX.Element;
+        let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+        let segment = sponsorTime.segment;
+        if (this.state.editing) {
+            timeDisplay = (
+                <div id={"sponsorTimesContainer" + this.idSuffix}
+                    className="sponsorTimeDisplay">
+
+                        <span id={"nowButton0" + this.idSuffix}
+                            className="sponsorNowButton"
+                            onClick={() => this.setTimeToNow(0)}>
+                                {chrome.i18n.getMessage("bracketNow")}
+                        </span>
+
+                        <input id={"submittingTimeMinutes0" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditMinutes"
+                            type="number"
+                            value={this.state.sponsorTimeEdits[0][0]}
+                            onChange={(e) => {
+                                let sponsorTimeEdits = this.state.sponsorTimeEdits;
+                                sponsorTimeEdits[0][0] = e.target.value;
+
+                                this.setState({sponsorTimeEdits});
+                            }}>
+                        </input>
+
+                        <input id={"submittingTimeSeconds0" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditSeconds"
+                            type="number"
+                            value={this.state.sponsorTimeEdits[0][1]}
+                            onChange={(e) => {
+                                let sponsorTimeEdits = this.state.sponsorTimeEdits;
+                                sponsorTimeEdits[0][1] = e.target.value;
+
+                                this.setState({sponsorTimeEdits});
+                            }}>
+                        </input>
+
+                        <span>
+                            {" " + chrome.i18n.getMessage("to") + " "}
+                        </span>
+
+                        <input id={"submittingTimeMinutes1" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditMinutes"
+                            type="text"
+                            value={this.state.sponsorTimeEdits[1][0]}
+                            onChange={(e) => {
+                                let sponsorTimeEdits = this.state.sponsorTimeEdits;
+                                sponsorTimeEdits[1][0] = e.target.value;
+
+                                this.setState({sponsorTimeEdits});
+                            }}>
+                        </input>
+
+                        <input id={"submittingTimeSeconds1" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditSeconds"
+                            type="text"
+                            value={this.state.sponsorTimeEdits[1][1]}
+                            onChange={(e) => {
+                                let sponsorTimeEdits = this.state.sponsorTimeEdits;
+                                sponsorTimeEdits[1][1] = e.target.value;
+
+                                this.setState({sponsorTimeEdits});
+                            }}>
+                        </input>
+
+                        <span id={"nowButton1" + this.idSuffix}
+                            className="sponsorNowButton"
+                            onClick={() => this.setTimeToNow(1)}>
+                                {chrome.i18n.getMessage("bracketNow")}
+                        </span>
+                </div>
+            );
+        } else {
+            timeDisplay = (
+                <div id={"sponsorTimesContainer" + this.idSuffix}
+                    className="sponsorTimeDisplay"
+                    onClick={this.toggleEditTime.bind(this)}>
+                        {utils.getFormattedTime(segment[0], true) +
+                            ((!isNaN(segment[1])) ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segment[1], true) : "")}
+                </div>
+            );
+        }
+
+        return (
+            <div style={style}>
+                
+                {timeDisplay}
+
+                {/* Category */}
+
+                <select id={"sponsorTimeCategories" + this.idSuffix}
+                    className="sponsorTimeCategories"
+                    defaultValue={sponsorTime.category}
+                    ref={this.categoryOptionRef}
+                    onChange={this.categorySelectionChange.bind(this)}>
+                    {this.getCategoryOptions()}
+                </select>
+
+                <br/>
+
+                {/* Editing Tools */}
+
+                <span id={"sponsorTimeDeleteButton" + this.idSuffix}
+                    className="sponsorTimeEditButton"
+                    onClick={this.deleteTime.bind(this)}>
+                    {chrome.i18n.getMessage("delete")}
+                </span>
+
+                {(!isNaN(segment[1])) ? (
+                    <span id={"sponsorTimePreviewButton" + this.idSuffix}
+                        className="sponsorTimeEditButton"
+                        onClick={this.previewTime.bind(this)}>
+                        {chrome.i18n.getMessage("preview")}
+                    </span>
+                ): ""}
+
+                {(!isNaN(segment[1])) ? (
+                    <span id={"sponsorTimeEditButton" + this.idSuffix}
+                        className="sponsorTimeEditButton"
+                        onClick={this.toggleEditTime.bind(this)}>
+                        {this.state.editing ? chrome.i18n.getMessage("save") : chrome.i18n.getMessage("edit")}
+                    </span>
+                ): ""}
+            </div>
+        );
+    }
+
+    getCategoryOptions() {
+        let elements = [];
+
+        for (const category of Config.config.categorySelections) {
+            elements.push(
+                <option value={category.name}
+                        key={category.name}>
+                    {chrome.i18n.getMessage("category_" + category.name)}
+                </option>
+            );
+        }
+
+        if (elements.length < CompileConfig.categoryList.length) {
+            // Add show more button
+            elements.push(
+                <option value={"moreCategories"}
+                        key={"moreCategories"}>
+                    {chrome.i18n.getMessage("moreCategories")}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+
+    categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>) {
+        // See if show more categories was pressed
+        if (event.target.value === "moreCategories") {
+            // Open options page
+            chrome.runtime.sendMessage({"message": "openConfig"});
+
+            // Reset option to previous
+            event.target.value = this.props.contentContainer().sponsorTimesSubmitting[this.props.index].category;
+            return;
+        }
+
+        this.saveEditTimes();
+    }
+
+    setTimeToNow(index: number) {
+        let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+
+        sponsorTime.segment[index] = 
+            this.props.contentContainer().v.currentTime;
+
+        this.setState({
+            sponsorTimeEdits: this.getFormattedSponsorTimesEdits(sponsorTime)
+        }, this.saveEditTimes);
+    }
+
+    toggleEditTime(): void {
+        if (this.state.editing) {
+            
+            this.setState({
+                editing: false
+            });
+
+            this.saveEditTimes();            
+        } else {
+            let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+
+            this.setState({
+                editing: true,
+                sponsorTimeEdits: this.getFormattedSponsorTimesEdits(sponsorTime)
+            });
+        }
+    }
+
+    /** Returns an array in the sponsorTimeEdits form (minutes and seconds) from a normal seconds sponsor time */
+    getFormattedSponsorTimesEdits(sponsorTime: SponsorTime): string[][] {
+        return [[String(utils.getFormattedMinutes(sponsorTime.segment[0])), String(utils.getFormattedSeconds(sponsorTime.segment[0]))], 
+            [String(utils.getFormattedMinutes(sponsorTime.segment[1])), String(utils.getFormattedSeconds(sponsorTime.segment[1]))]];
+    }
+
+    saveEditTimes() {
+        let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
+
+        if (this.state.editing) {
+            sponsorTimesSubmitting[this.props.index].segment = 
+                [utils.getRawSeconds(parseFloat(this.state.sponsorTimeEdits[0][0]), parseFloat(this.state.sponsorTimeEdits[0][1])),
+                utils.getRawSeconds(parseFloat(this.state.sponsorTimeEdits[1][0]), parseFloat(this.state.sponsorTimeEdits[1][1]))];
+        }
+
+        sponsorTimesSubmitting[this.props.index].category = this.categoryOptionRef.current.value;
+
+        Config.config.sponsorTimes.set(this.props.contentContainer().sponsorVideoID, utils.getSegmentsFromSponsorTimes(sponsorTimesSubmitting));
+
+        this.props.contentContainer().updatePreviewBar();
+    }
+
+    previewTime(): void {
+        let sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
+        let index = this.props.index;
+
+        let skipTime = sponsorTimes[index].segment[0];
+
+        if (this.state.editing) {
+            // Save edits before previewing
+            this.saveEditTimes();
+        }
+
+        this.props.contentContainer().previewTime(skipTime - 2);
+    }
+
+    deleteTime(): void {
+        let sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
+        let index = this.props.index;
+
+        //if it is not a complete sponsor time
+        if (sponsorTimes[index].segment.length < 2) {
+            //update video player
+            this.props.contentContainer().changeStartSponsorButton(true, false);
+        }
+  
+        sponsorTimes.splice(index, 1);
+  
+        //save this
+        Config.config.sponsorTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimes);
+
+        this.props.contentContainer().updatePreviewBar();
+        
+        //if they are all removed
+        if (sponsorTimes.length == 0) {
+            this.props.submissionNotice.cancel();
+            
+            //update video player
+            this.props.contentContainer().changeStartSponsorButton(true, false);
+        } else {
+            //update display
+            this.props.submissionNotice.forceUpdate();
+        }
+    }
+}
+
+export default SponsorTimeEditComponent;

src/components/SubmissionNoticeComponent.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import Config from "../config"
+import { ContentContainer } from "../types";
+
+import NoticeComponent from "./NoticeComponent";
+import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
+import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
+
+export interface SubmissionNoticeProps { 
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    callback: () => any;
+
+    closeListener: () => void
+}
+
+export interface SubmissionNoticeeState {
+    noticeTitle: string,
+    messages: string[],
+    idSuffix: string;
+}
+
+class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, SubmissionNoticeeState> {
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    callback: () => any;
+
+    noticeRef: React.MutableRefObject<NoticeComponent>;
+    timeEditRefs: React.RefObject<SponsorTimeEditComponent>[];
+
+    videoObserver: MutationObserver;
+
+    constructor(props: SubmissionNoticeProps) {
+        super(props);
+        this.noticeRef = React.createRef();
+
+        this.contentContainer = props.contentContainer;
+        this.callback = props.callback;
+    
+        let noticeTitle = chrome.i18n.getMessage("confirmNoticeTitle");
+
+        // Setup state
+        this.state = {
+            noticeTitle,
+            messages: [],
+            idSuffix: "SubmissionNotice"
+        }
+    }
+
+    componentDidMount() {
+        // Catch and rerender when the video size changes
+        //TODO: Use ResizeObserver when it is supported in TypeScript
+        this.videoObserver = new MutationObserver(() => {
+            this.forceUpdate();
+        });
+
+        this.videoObserver.observe(this.contentContainer().v, {
+            attributes: true
+        });
+    }
+
+    componentWillUnmount() {
+        if (this.videoObserver) {
+            this.videoObserver.disconnect();
+        }
+    }
+
+    render() {
+        return (
+            <NoticeComponent noticeTitle={this.state.noticeTitle}
+                idSuffix={this.state.idSuffix}
+                ref={this.noticeRef}
+                closeListener={this.cancel.bind(this)}
+                zIndex={50000}>
+
+                {/* Text Boxes */}
+                {this.getMessageBoxes()}
+
+                {/* Sponsor Time List */}
+                <tr id={"sponsorSkipNoticeMiddleRow" + this.state.idSuffix}
+                    className="sponsorTimeMessagesRow"
+                    style={{maxHeight: (this.contentContainer().v.offsetHeight - 200) + "px"}}>
+                    <td style={{width: "100%"}}>
+                        {this.getSponsorTimeMessages()}
+                    </td>
+                </tr>
+              
+                {/* Last Row */}
+                <tr id={"sponsorSkipNoticeSecondRow" + this.state.idSuffix}>
+
+                    <td className="sponsorSkipNoticeRightSection"
+                        style={{position: "relative"}}>
+
+                        {/* Cancel Button */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            onClick={this.cancel.bind(this)}>
+
+                            {chrome.i18n.getMessage("cancel")}
+                        </button>
+
+                        {/* Submit Button */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            onClick={this.submit.bind(this)}>
+
+                            {chrome.i18n.getMessage("submit")}
+                        </button>
+                    </td>
+                </tr>
+
+            </NoticeComponent>
+        );
+    }
+
+    getSponsorTimeMessages(): JSX.Element[] | JSX.Element {
+        let elements: JSX.Element[] = [];
+        this.timeEditRefs = [];
+
+        let sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
+
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            let timeRef = React.createRef<SponsorTimeEditComponent>();
+
+            elements.push(
+                <SponsorTimeEditComponent key={i}
+                    idSuffix={this.state.idSuffix + i}
+                    index={i}
+                    contentContainer={this.props.contentContainer}
+                    submissionNotice={this}
+                    ref={timeRef}>
+                </SponsorTimeEditComponent>
+            );
+
+            this.timeEditRefs.push(timeRef);
+        }
+
+        return elements;
+    }
+
+    getMessageBoxes(): JSX.Element[] | JSX.Element {
+        let elements: JSX.Element[] = [];
+
+        for (let i = 0; i < this.state.messages.length; i++) {
+            elements.push(
+                <NoticeTextSelectionComponent idSuffix={this.state.idSuffix + i}
+                    text={this.state.messages[i]}
+                    key={i}>
+                </NoticeTextSelectionComponent>
+            );
+        }
+
+        return elements;
+    }
+
+    cancel() {
+        this.noticeRef.current.close(true);
+
+        this.contentContainer().resetSponsorSubmissionNotice();
+
+        this.props.closeListener();
+    }
+
+    submit() {
+        // save all items
+        for (const ref of this.timeEditRefs) {
+            ref.current.saveEditTimes();
+        }
+
+        this.props.callback();
+
+        this.cancel();
+    }
+}
+
+export default SubmissionNoticeComponent;

src/config.ts

@@ -1,4 +1,5 @@
 import * as CompileConfig from "../config.json";
+import { CategorySelection, CategorySkipOption } from "./types";
 
 interface SBConfig {
     userID: string,
@@ -10,7 +11,6 @@ interface SBConfig {
     skipCount: number,
     sponsorTimesContributed: number,
     disableSkipping: boolean,
-    disableAutoSkip: boolean,
     trackViewCount: boolean,
     dontShowNotice: boolean,
     hideVideoPlayerControls: boolean,
@@ -20,12 +20,17 @@ interface SBConfig {
     hideDiscordLaunches: number,
     hideDiscordLink: boolean,
     invidiousInstances: string[],
-    invidiousUpdateInfoShowCount: number,
     autoUpvote: boolean,
     supportInvidious: boolean,
     serverAddress: string,
     minDuration: number,
-    checkForUnlistedVideos: boolean
+    audioNotificationOnSkip,
+    checkForUnlistedVideos: boolean,
+    mobileUpdateShowCount: number,
+    testingServer: boolean,
+
+    // What categories should be skipped
+    categorySelections: CategorySelection[]
 }
 
 interface SBObject {
@@ -33,6 +38,10 @@ interface SBObject {
     defaults: SBConfig;
     localConfig: SBConfig;
     config: SBConfig;
+
+    // Functions
+    encodeStoredItem<T>(data: T): T | Array<any>;
+    convertJSON(): void;
 }
 
 // Allows a SBMap to be conveted into json form
@@ -84,13 +93,8 @@ class SBMap<T, U> extends Map {
 
         return result;
     }
-
-    toJSON() {
-        return Array.from(this.entries());
-    }
 }
 
-
 var Config: SBObject = {
     /**
      * Callback function when an option is updated
@@ -106,7 +110,6 @@ var Config: SBObject = {
         skipCount: 0,
         sponsorTimesContributed: 0,
         disableSkipping: false,
-        disableAutoSkip: false,
         trackViewCount: true,
         dontShowNotice: false,
         hideVideoPlayerControls: false,
@@ -116,29 +119,40 @@ var Config: SBObject = {
         hideDiscordLaunches: 0,
         hideDiscordLink: false,
         invidiousInstances: ["invidio.us", "invidiou.sh", "invidious.snopyta.org"],
-        invidiousUpdateInfoShowCount: 0,
         autoUpvote: true,
         supportInvidious: false,
         serverAddress: CompileConfig.serverAddress,
         minDuration: 0,
-        checkForUnlistedVideos: false
+        audioNotificationOnSkip: false,
+        checkForUnlistedVideos: false,
+        mobileUpdateShowCount: 0,
+        testingServer: false,
+
+        categorySelections: [{
+            name: "sponsor",
+            option: CategorySkipOption.AutoSkip
+        }]
     },
     localConfig: null,
-    config: null
+    config: null,
+    
+    // Functions
+    encodeStoredItem,
+    convertJSON
 };
 
 // Function setup
 
 /**
  * A SBMap cannot be stored in the chrome storage. 
- * This data will be encoded into an array instead as specified by the toJSON function.
+ * This data will be encoded into an array instead
  * 
  * @param data 
  */
-function encodeStoredItem(data) {
+function encodeStoredItem<T>(data: T): T | Array<any>  {
     // if data is SBMap convert to json for storing
     if(!(data instanceof SBMap)) return data;
-    return JSON.stringify(data);
+    return Array.from(data.entries());
 }
 
 /**
@@ -147,19 +161,31 @@ function encodeStoredItem(data) {
  * 
  * @param {*} data 
  */
-function decodeStoredItem(id: string, data) {
-    if(typeof data !== "string") return data;
-    
-    try {
-        let str = JSON.parse(data);
-        
-        if(!Array.isArray(str)) return data;
-        return new SBMap(id, str);
-    } catch(e) {
+function decodeStoredItem<T>(id: string, data: T): T | SBMap<string, any> {
+    if (!Config.defaults[id]) return data;
 
-        // If all else fails, return the data
-        return data;
+    if (Config.defaults[id] instanceof SBMap) {
+        try {
+            let jsonData: any = data;
+
+            // Check if data is stored in the old format for SBMap (a JSON string)
+            if (typeof data === "string") {
+                try {	
+                    jsonData = JSON.parse(data);	   
+                } catch(e) {
+                    // Continue normally (out of this if statement)
+                }
+            }
+
+            if (!Array.isArray(jsonData)) return data;
+            return new SBMap(id, jsonData);
+        } catch(e) {
+            console.error("Failed to parse SBMap: " + id);
+        }
     }
+
+    // If all else fails, return the data
+    return data;
 }
 
 function configProxy(): any {
@@ -210,11 +236,14 @@ function fetchConfig() {
     });
 }
 
-function migrateOldFormats() { // Convert sponsorTimes format
-    for (const key in Config.localConfig) {
-        if (key.startsWith("sponsorTimes") && key !== "sponsorTimes" && key !== "sponsorTimesContributed") {
-            Config.config.sponsorTimes.set(key.substr(12), Config.config[key]);
-            delete Config.config[key];
+function migrateOldFormats() {
+    if (Config.config["disableAutoSkip"]) {
+        for (const selection of Config.config.categorySelections) {
+            if (selection.name === "sponsor") {
+                selection.option = CategorySkipOption.ManualSkip;
+
+                chrome.storage.sync.remove("disableAutoSkip");
+            }
         }
     }
 }
@@ -232,7 +261,7 @@ function resetConfig() {
     Config.config = Config.defaults;
 };
 
-function convertJSON() {
+function convertJSON(): void {
     Object.keys(Config.localConfig).forEach(key => {
         Config.localConfig[key] = decodeStoredItem(key, Config.localConfig[key]);
     });

src/js-components/previewBar.ts

@@ -8,33 +8,85 @@
 let barTypes = {
 	"undefined": {
 		color: "#00d400",
-		opacity: "0.5"
+		opacity: "0.7"
 	},
 	"sponsor": {
 		color: "#00d400",
-		opacity: "0.5"
+		opacity: "0.7"
 	},
-	"previewSponsor": {
-		color: "#0000d4",
-		opacity: "0.5"
+	"preview-sponsor": {
+		color: "#007800",
+		opacity: "0.7"
+	},
+	"intro": {
+		color: "#00ffff",
+		opacity: "0.7"
+	},
+	"preview-intro": {
+		color: "#008080",
+		opacity: "0.7"
+	},
+	"outro": {
+		color: "#0202ed",
+		opacity: "0.7"
+	},
+	"preview-outro": {
+		color: "#000070",
+		opacity: "0.7"
+	},
+	"interaction": {
+		color: "#cc00ff",
+		opacity: "0.7"
+	},
+	"preview-interaction": {
+		color: "#6c0087",
+		opacity: "0.7"
+	},
+	"selfpromo": {
+		color: "#ffff00",
+		opacity: "0.7"
+	},
+	"preview-selfpromo": {
+		color: "#bfbf35",
+		opacity: "0.7"
+	},
+	"offtopic": {
+		color: "#ff9900",
+		opacity: "0.7"
+	},
+	"preview-offtopic": {
+		color: "#a6634a",
+		opacity: "0.7"
 	}
 };
 
 class PreviewBar {
 	container: HTMLUListElement;
 	parent: any;
+	onMobileYouTube: boolean;
 
-	constructor(parent) {
+	constructor(parent, onMobileYouTube) {
 		this.container = document.createElement('ul');
 		this.container.id = 'previewbar';
 		this.parent = parent;
 
-		this.updatePosition();
+		this.onMobileYouTube = onMobileYouTube;
+
+		this.updatePosition(parent);
 	}
 
-	updatePosition() {
+	updatePosition(parent) {
 		//below the seek bar
 		// this.parent.insertAdjacentElement("afterEnd", this.container);
+
+		this.parent = parent;
+
+		if (this.onMobileYouTube) {
+			parent.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+			parent.style.opacity = "1";
+			
+			this.container.style.transform = "none";
+		}
 		
 		//on the seek bar
 		this.parent.insertAdjacentElement("afterBegin", this.container);
@@ -70,7 +122,7 @@ class PreviewBar {
 			bar.setAttribute('data-vs-segment-type', types[i]);
 
 			bar.style.backgroundColor = barTypes[types[i]].color;
-			bar.style.opacity = barTypes[types[i]].opacity;
+			if (!this.onMobileYouTube) bar.style.opacity = barTypes[types[i]].opacity;
 			bar.style.width = width + '%';
 			bar.style.left = (timestamps[i][0] / duration * 100) + "%";
 			bar.style.position = "absolute"

src/js-components/skipNotice.ts

@@ -1,437 +0,0 @@
-'use strict';
-
-/**
- * The notice that tells the user that a sponsor was just skipped
- */
-class SkipNotice {
-    parent: HTMLElement;
-    UUID: string;
-    manualSkip: boolean;
-    // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
-    
-    maxCountdownTime: () => number;
-    countdownTime: any;
-    countdownInterval: NodeJS.Timeout;
-    unskipCallback: any;
-    idSuffix: any;
-
-	constructor(parent: HTMLElement, UUID: string, manualSkip: boolean = false, contentContainer) {
-        this.parent = parent;
-        this.UUID = UUID;
-        this.manualSkip = manualSkip;
-        this.contentContainer = contentContainer;
-
-        let noticeTitle = chrome.i18n.getMessage("noticeTitle");
-
-        if (manualSkip) {
-            noticeTitle = chrome.i18n.getMessage("noticeTitleNotSkipped");
-        }
-
-        this.maxCountdownTime = () => 4;
-        //the countdown until this notice closes
-        this.countdownTime = this.maxCountdownTime();
-        //the id for the setInterval running the countdown
-        this.countdownInterval = null;
-
-        //the unskip button's callback
-        this.unskipCallback = this.unskip.bind(this);
-
-        //add notice
-        let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
-
-        //this is the suffix added at the end of every id
-        this.idSuffix = this.UUID + amountOfPreviousNotices;
-
-        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" + this.idSuffix;
-        noticeElement.classList.add("sponsorSkipObject");
-        noticeElement.classList.add("sponsorSkipNotice");
-        noticeElement.style.zIndex = String(50 + amountOfPreviousNotices);
-
-        //add mouse enter and leave listeners
-        noticeElement.addEventListener("mouseenter", this.pauseCountdown.bind(this));
-        noticeElement.addEventListener("mouseleave", this.startCountdown.bind(this));
-
-        //the row that will contain the info
-        let firstRow = document.createElement("tr");
-        firstRow.id = "sponsorSkipNoticeFirstRow" + this.idSuffix;
-
-        let logoColumn = document.createElement("td");
-
-        let logoElement = document.createElement("img");
-        logoElement.id = "sponsorSkipLogo" + this.idSuffix;
-        logoElement.className = "sponsorSkipLogo sponsorSkipObject";
-        logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
-
-        let noticeMessage = document.createElement("span");
-        noticeMessage.id = "sponsorSkipMessage" + this.idSuffix;
-        noticeMessage.classList.add("sponsorSkipMessage");
-        noticeMessage.classList.add("sponsorSkipObject");
-        noticeMessage.innerText = noticeTitle;
-
-        //create the first column
-        logoColumn.appendChild(logoElement);
-        logoColumn.appendChild(noticeMessage);
-
-        //add the x button
-        let closeButtonContainer = document.createElement("td");
-        closeButtonContainer.className = "sponsorSkipNoticeRightSection";
-        closeButtonContainer.style.top = "11px";
-
-        let timeLeft = document.createElement("span");
-        timeLeft.id = "sponsorSkipNoticeTimeLeft" + this.idSuffix;
-        timeLeft.innerText = this.countdownTime + "s";
-        timeLeft.className = "sponsorSkipObject sponsorSkipNoticeTimeLeft";
-
-        let hideButton = document.createElement("img");
-        hideButton.src = chrome.extension.getURL("icons/close.png");
-        hideButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton";
-        hideButton.addEventListener("click", this.close.bind(this));
-
-        closeButtonContainer.appendChild(timeLeft);
-        closeButtonContainer.appendChild(hideButton);
-
-        //add all objects to first row
-        firstRow.appendChild(logoColumn);
-        firstRow.appendChild(closeButtonContainer);
-
-        let spacer = document.createElement("hr");
-        spacer.id = "sponsorSkipNoticeSpacer" + this.idSuffix;
-        spacer.className = "sponsorBlockSpacer";
-
-        //the row that will contain the buttons
-        let secondRow = document.createElement("tr");
-        secondRow.id = "sponsorSkipNoticeSecondRow" + this.idSuffix;
-        
-        //thumbs up and down buttons
-        let voteButtonsContainer = document.createElement("td");
-        voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + this.idSuffix;
-        voteButtonsContainer.className = "sponsorTimesVoteButtonsContainer"
-
-        let reportText = document.createElement("span");
-        reportText.id = "sponsorTimesReportText" + this.idSuffix;
-        reportText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
-        reportText.innerText = chrome.i18n.getMessage("reportButtonTitle");
-        reportText.style.marginRight = "5px";
-        reportText.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
-
-        let downvoteButton = document.createElement("img");
-        downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + this.idSuffix;
-        downvoteButton.className = "sponsorSkipObject voteButton";
-        downvoteButton.src = chrome.extension.getURL("icons/report.png");
-        downvoteButton.addEventListener("click", () => this.contentContainer().vote(0, this.UUID, this));
-        downvoteButton.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
-
-        //add downvote and report text to container
-        voteButtonsContainer.appendChild(reportText);
-        voteButtonsContainer.appendChild(downvoteButton);
-
-        //add unskip button
-        let unskipContainer = document.createElement("td");
-        unskipContainer.className = "sponsorSkipNoticeUnskipSection";
-
-        let unskipButton = document.createElement("button");
-        unskipButton.id = "sponsorSkipUnskipButton" + this.idSuffix;
-        unskipButton.innerText = chrome.i18n.getMessage("unskip");
-        unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
-        unskipButton.addEventListener("click", this.unskipCallback);
-
-        unskipButton.style.marginLeft = "4px";
-
-        unskipContainer.appendChild(unskipButton);
-
-        //add don't show again button
-        let dontshowContainer = document.createElement("td");
-        dontshowContainer.className = "sponsorSkipNoticeRightSection";
-
-        let dontShowAgainButton = document.createElement("button");
-        dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
-        dontShowAgainButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
-        dontShowAgainButton.addEventListener("click", this.contentContainer().dontShowNoticeAgain);
-
-        // Don't let them hide it if manually skipping
-        if (!this.manualSkip) {
-            dontshowContainer.appendChild(dontShowAgainButton);
-        }
-
-        //add to row
-        secondRow.appendChild(voteButtonsContainer);
-        secondRow.appendChild(unskipContainer);
-        secondRow.appendChild(dontshowContainer);
-
-        noticeElement.appendChild(firstRow);
-        noticeElement.appendChild(spacer);
-        noticeElement.appendChild(secondRow);
-
-        //get reference node
-        let referenceNode = document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
-        if (referenceNode == null) {
-            //for embeds
-            let player = document.getElementById("player");
-            referenceNode = <HTMLElement> player.firstChild;
-            let index = 1;
-
-            //find the child that is the video player (sometimes it is not the first)
-            while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
-                referenceNode = <HTMLElement> player.children[index];
-
-                index++;
-            }
-        }
-
-        referenceNode.prepend(noticeElement);
-
-        if (manualSkip) {
-            this.unskippedMode(chrome.i18n.getMessage("skip"));
-        }
-
-        this.startCountdown();
-    }
-
-    //called every second to lower the countdown before hiding the notice
-    countdown() {
-        this.countdownTime--;
-
-        if (this.countdownTime <= 0) {
-            //remove this from setInterval
-            clearInterval(this.countdownInterval);
-
-            //time to close this notice
-            this.close();
-
-            return;
-        }
-
-        if (this.countdownTime == 3) {
-            //start fade out animation
-            let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
-            notice.style.removeProperty("animation");
-            notice.classList.add("sponsorSkipNoticeFadeOut");
-        }
-
-        this.updateTimerDisplay();
-    }
-
-    pauseCountdown() {
-        //remove setInterval
-        clearInterval(this.countdownInterval);
-        this.countdownInterval = null;
-
-        //reset countdown
-        this.countdownTime = this.maxCountdownTime();
-        
-        //inform the user
-        let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix);
-        timeLeft.innerText = chrome.i18n.getMessage("paused");
-
-        //remove the fade out class if it exists
-        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
-        notice.classList.remove("sponsorSkipNoticeFadeOut");
-        notice.style.animation = "none";
-    }
-
-    startCountdown() {
-        //if it has already started, don't start it again
-        if (this.countdownInterval !== null) return;
-
-        this.countdownInterval = setInterval(this.countdown.bind(this), 1000);
-
-        this.updateTimerDisplay();
-    }
-
-    updateTimerDisplay() {
-        //update the timer display
-        let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix);
-        timeLeft.innerText = this.countdownTime + "s";
-    }
-
-    unskip() {
-        this.contentContainer().unskipSponsorTime(this.UUID);
-
-        this.unskippedMode(chrome.i18n.getMessage("reskip"));
-    }
-
-    /** Sets up notice to be not skipped yet */
-    unskippedMode(buttonText) {
-        //change unskip button to a reskip button
-        let unskipButton = this.changeUnskipButton(buttonText);
-
-        //setup new callback
-        this.unskipCallback = this.reskip.bind(this);
-        unskipButton.addEventListener("click", this.unskipCallback);
-
-        //change max duration to however much of the sponsor is left
-        this.maxCountdownTime = function() {
-            let sponsorTime = this.contentContainer().sponsorTimes[this.contentContainer().UUIDs.indexOf(this.UUID)];
-            let duration = Math.round(sponsorTime[1] - this.contentContainer().v.currentTime);
-
-            return Math.max(duration, 4);
-        };
-
-        this.countdownTime = this.maxCountdownTime();
-        this.updateTimerDisplay();
-    }
-
-    reskip() {
-        this.contentContainer().reskipSponsorTime(this.UUID);
-
-        //change reskip button to a unskip button
-        let unskipButton = this.changeUnskipButton(chrome.i18n.getMessage("unskip"));
-
-        //setup new callback
-        this.unskipCallback = this.unskip.bind(this);
-        unskipButton.addEventListener("click", this.unskipCallback);
-
-        //reset duration
-        this.maxCountdownTime = () => 4;
-        this.countdownTime = this.maxCountdownTime();
-        this.updateTimerDisplay();
-
-        // See if the title should be changed
-        if (this.manualSkip) {
-            this.changeNoticeTitle(chrome.i18n.getMessage("noticeTitle"));
-
-            this.contentContainer().vote(1, this.UUID, this);
-        }
-    }
-
-    /**
-     * Changes the text on the reskip button
-     * 
-     * @param {string} text 
-     * @returns {HTMLElement} unskipButton
-     */
-    changeUnskipButton(text) {
-        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
-        unskipButton.innerText = text;
-        unskipButton.removeEventListener("click", this.unskipCallback);
-
-        return unskipButton;
-    }
-
-    afterDownvote() {
-        this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
-        this.addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
-        
-        //remove this sponsor from the sponsors looked up
-        //find which one it is
-        for (let i = 0; i < this.contentContainer().sponsorTimes.length; i++) {
-            if (this.contentContainer().UUIDs[i] == this.UUID) {
-                //this one is the one to hide
-                
-                //add this as a hidden sponsorTime
-                this.contentContainer().hiddenSponsorTimes.push(i);
-            
-                this.contentContainer().updatePreviewBar();
-                break;
-            }
-        }
-    }
-
-    changeNoticeTitle(title) {
-        let noticeElement = document.getElementById("sponsorSkipMessage" + this.idSuffix);
-
-        noticeElement.innerText = title;
-    }
-    
-    addNoticeInfoMessage(message: string, message2: string = "") {
-        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
-        if (previousInfoMessage != null) {
-            //remove it
-            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
-        }
-
-        let previousInfoMessage2 = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix + "2");
-        if (previousInfoMessage2 != null) {
-            //remove it
-            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage2);
-        }
-        
-        //add info
-        let thanksForVotingText = document.createElement("p");
-        thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
-        thanksForVotingText.className = "sponsorTimesInfoMessage";
-        thanksForVotingText.innerText = message;
-
-        //add element to div
-        document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
-    
-        if (message2 !== undefined) {
-            let thanksForVotingText2 = document.createElement("p");
-            thanksForVotingText2.id = "sponsorTimesInfoMessage" + this.idSuffix + "2";
-            thanksForVotingText2.className = "sponsorTimesInfoMessage";
-            thanksForVotingText2.innerText = message2;
-
-            //add element to div
-            document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
-        }
-    }
-    
-    resetNoticeInfoMessage() {
-        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
-        if (previousInfoMessage != null) {
-            //remove it
-            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
-        }
-    }
-    
-    addVoteButtonInfo(message) {
-        this.resetVoteButtonInfo();
-        
-        //hide report button and text for it
-        let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix);
-        if (downvoteButton != null) {
-            downvoteButton.style.display = "none";
-        }
-        let downvoteButtonText = document.getElementById("sponsorTimesReportText" + this.idSuffix);
-        if (downvoteButtonText != null) {
-            downvoteButtonText.style.display = "none";
-        }
-        
-        //add info
-        let thanksForVotingText = document.createElement("td");
-        thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + this.idSuffix;
-        thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
-        thanksForVotingText.innerText = message;
-
-        //add element to div
-        document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).prepend(thanksForVotingText);
-    }
-    
-    resetVoteButtonInfo() {
-        let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + this.idSuffix);
-        if (previousInfoMessage != null) {
-            //remove it
-            document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).removeChild(previousInfoMessage);
-        }
-
-        //show button again
-        document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix).style.removeProperty("display");
-    }
-    
-    //close this notice
-    close() {
-        //reset message
-        this.resetNoticeInfoMessage();
-
-        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
-        if (notice != null) {
-            notice.remove();
-        }
-
-        //remove setInterval
-        if (this.countdownInterval !== null) clearInterval(this.countdownInterval);
-    }
-
-}
-
-export default SkipNotice;

src/options.ts

@@ -1,6 +1,11 @@
 import Config from "./config";
+import * as CompileConfig from "../config.json";
+
+// Make the config public for debugging purposes
+(<any> window).SB = Config;
 
 import Utils from "./utils";
+import CategoryChooser from "./render/CategoryChooser";
 var utils = new Utils();
 
 window.addEventListener('DOMContentLoaded', init);
@@ -27,6 +32,8 @@ async function init() {
                 let checkbox = optionsElements[i].querySelector("input");
                 let reverse = optionsElements[i].getAttribute("toggle-type") === "reverse";
 
+                let confirmMessage = optionsElements[i].getAttribute("confirm-message");
+
                 if (optionResult != undefined) {
                     checkbox.checked = optionResult;
 
@@ -44,6 +51,12 @@ async function init() {
 
                 // Add click listener
                 checkbox.addEventListener("click", () => {
+                    // Confirm if required
+                    if (checkbox.checked && confirmMessage && !confirm(chrome.i18n.getMessage(confirmMessage))){
+                        checkbox.checked = false;
+                        return;
+                    }
+
                     Config.config[option] = reverse ? !checkbox.checked : checkbox.checked;
 
                     // See if anything extra must be run
@@ -72,7 +85,7 @@ async function init() {
 
                 textChangeInput.value = Config.config[textChangeOption];
 
-                textChangeSetButton.addEventListener("click", () => {
+                textChangeSetButton.addEventListener("click", async () => {
                     // See if anything extra must be done
                     switch (textChangeOption) {
                         case "serverAddress":
@@ -84,6 +97,18 @@ async function init() {
                                 return;
                             }
 
+                            // Permission needed on Firefox
+                            if (utils.isFirefox()) {
+                                let permissionSuccess = await new Promise((resolve, reject) => {
+                                    chrome.permissions.request({
+                                        origins: [textChangeInput.value + "/"],
+                                        permissions: []
+                                    }, resolve);
+                                });
+
+                                if (!permissionSuccess) return;
+                            }
+
                             break;
                     }
 
@@ -112,6 +137,16 @@ async function init() {
                         invidiousInstanceAddInit(<HTMLElement> optionsElements[i], privateTextChangeOption);
                 }
 
+                break;
+            case "button-press":
+                let actionButton = optionsElements[i].querySelector(".trigger-button");
+
+                switch(optionsElements[i].getAttribute("sync-option")) {
+                    case "copyDebugInformation":
+                        actionButton.addEventListener("click", copyDebugOutputToClipboard);
+                        break;
+                }
+
                 break;
             case "keybind-change":
                 let keybindButton = optionsElements[i].querySelector(".trigger-button");
@@ -138,6 +173,9 @@ async function init() {
                 });
 
                 break;
+            case "react-CategoryChooserComponent":
+                new CategoryChooser(optionsElements[i]);
+            break;
         }
     }
 
@@ -259,6 +297,8 @@ function invidiousOnClick(checkbox: HTMLInputElement, option: string) {
             if (!granted) {
                 Config.config[option] = false;
                 checkbox.checked = false;
+            } else {
+                checkbox.checked = true;
             }
         });
     } else {
@@ -291,7 +331,7 @@ function activateKeybindChange(element: HTMLElement) {
 
     element.querySelector(".option-hidden-section").classList.remove("hidden");
     
-    document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
+    document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true}); 
 }
 
 /**
@@ -303,25 +343,60 @@ function activateKeybindChange(element: HTMLElement) {
 function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
     var key = e.key;
 
-    let button = element.querySelector(".trigger-button");
+    if (["Shift", "Control", "Meta", "Alt", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab"].indexOf(key) !== -1) {
+
+        // Wait for more
+        document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
+    } else {
+        let button: HTMLElement = element.querySelector(".trigger-button");
+        let option = element.getAttribute("sync-option");
+
+        // Don't allow keys which are already listened for by youtube 
+        let restrictedKeys = "1234567890,.jklftcibmJKLFTCIBMNP/<> -+";
+        if (restrictedKeys.indexOf(key) !== -1 ) {
+            closeKeybindOption(element, button);
+
+            alert(chrome.i18n.getMessage("theKey") + " " + key + " " + chrome.i18n.getMessage("keyAlreadyUsedByYouTube"));
+            return;
+        }
+
+        // Make sure keybind isn't used by the other listener
+        // TODO: If other keybindings are going to be added, we need a better way to find the other keys used.
+        let otherKeybind = (option === "startSponsorKeybind") ? Config.config['submitKeybind'] : Config.config['startSponsorKeybind'];
+        if (key === otherKeybind) {
+            closeKeybindOption(element, button);
+
+            alert(chrome.i18n.getMessage("theKey") + " " + key + " " + chrome.i18n.getMessage("keyAlreadyUsed"));
+            return;
+        }
+
+        // cancel setting a keybind
+        if (key === "Escape") {
+            closeKeybindOption(element, button);
+
+            return;
+        }
+        
+        Config.config[option] = key;
+
+        let status = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status");
+        status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
+
+        let statusKey = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status-key");
+        statusKey.innerText = key;
 
-    // cancel setting a keybind
-    if (key === "Escape") {
-        element.querySelector(".option-hidden-section").classList.add("hidden");
         button.classList.remove("disabled");
-        return;
     }
+}
 
-    let option = element.getAttribute("sync-option");
-
-    Config.config[option] = key;
-
-    let status = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status");
-    status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
-
-    let statusKey = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status-key");
-    statusKey.innerText = key;
-
+/**
+ * Closes the menu for editing the keybind
+ * 
+ * @param element 
+ * @param button 
+ */
+function closeKeybindOption(element: HTMLElement, button: HTMLElement) {
+    element.querySelector(".option-hidden-section").classList.add("hidden");
     button.classList.remove("disabled");
 }
 
@@ -345,15 +420,57 @@ function activatePrivateTextChange(element: HTMLElement) {
             element.querySelector(".option-hidden-section").classList.remove("hidden");
             return;
     }
-	
-    textBox.value = Config.config[option];
+    
+    let result = Config.config[option];
+
+    // See if anything extra must be done
+    switch (option) {
+        case "*":
+            let jsonData = JSON.parse(JSON.stringify(Config.localConfig));
+
+            // Fix sponsorTimes data as it is destroyed from the JSON stringify
+            jsonData.sponsorTimes = Config.encodeStoredItem(Config.localConfig.sponsorTimes);
+
+            result = JSON.stringify(jsonData);
+            break;
+    }
+
+    textBox.value = result;
     
     let setButton = element.querySelector(".text-change-set");
     setButton.addEventListener("click", () => {
         let confirmMessage = element.getAttribute("confirm-message");
 
         if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
-            Config.config[option] = textBox.value;
+            
+            // See if anything extra must be done
+            switch (option) {
+                case "*":
+                    try {
+                        let newConfig = JSON.parse(textBox.value);
+                        for (const key in newConfig) {
+                            Config.config[key] = newConfig[key];
+                        }
+                        Config.convertJSON();
+
+                        // Reload options on page
+                        init();
+
+                        if (newConfig.supportInvidious) {
+                            let checkbox = <HTMLInputElement> document.querySelector("#support-invidious > label > label > input");
+                            
+                            checkbox.checked = true;
+                            invidiousOnClick(checkbox, "supportInvidious");
+                        }
+                        
+                    } catch (e) {
+                        alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
+                    }
+
+                    break;
+                default:
+                    Config.config[option] = textBox.value;
+            }
         }
     });
 
@@ -381,4 +498,36 @@ function validateServerAddress(input: string): string {
     }
 
     return input;
+}
+
+function copyDebugOutputToClipboard() {
+    // Build output debug information object
+    let output = {
+        debug: {
+            userAgent: navigator.userAgent,
+            platform: navigator.platform,
+            language: navigator.language,
+            extensionVersion: chrome.runtime.getManifest().version
+        },
+        config: JSON.parse(JSON.stringify(Config.localConfig)) // Deep clone config object
+    };
+
+    // Fix sponsorTimes data as it is destroyed from the JSON stringify
+    output.config.sponsorTimes = Config.encodeStoredItem(Config.localConfig.sponsorTimes);
+    
+    // Sanitise sensitive user config values
+    delete output.config.userID;
+    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress) 
+        ? "Default server address" : "Custom server address";
+    output.config.invidiousInstances = output.config.invidiousInstances.length;
+    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
+
+    // Copy object to clipboard
+    navigator.clipboard.writeText(JSON.stringify(output, null, 4))
+      .then(() => {
+        alert(chrome.i18n.getMessage("copyDebugInformationComplete"));
+      })
+      .catch(err => {
+        alert(chrome.i18n.getMessage("copyDebugInformationFailed"));
+      });;
 }

src/popup.ts

@@ -1,6 +1,7 @@
 import Config from "./config";
 
 import Utils from "./utils";
+import { SponsorTime } from "./types";
 var utils = new Utils();
 
 interface MessageListener {
@@ -56,7 +57,6 @@ async function runThePopup(messageListener?: MessageListener) {
     "showNoticeAgain",
     "optionsButton",
     // More controls
-    "clearTimes",
     "submitTimes",
     "reportAnIssue",
     // sponsorTimesContributions
@@ -82,9 +82,6 @@ async function runThePopup(messageListener?: MessageListener) {
     // discordButtons
     "discordButtonContainer",
     "hideDiscordButton",
-    // submitTimesInfoMessage
-    "submitTimesInfoMessageContainer",
-    "submitTimesInfoMessage",
     // Username
     "setUsernameContainer",
     "setUsernameButton",
@@ -108,7 +105,6 @@ async function runThePopup(messageListener?: MessageListener) {
     PageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
     PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
     PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
-    PageElements.clearTimes.addEventListener("click", clearTimes);
     PageElements.submitTimes.addEventListener("click", submitTimes);
     PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
     PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
@@ -157,7 +153,7 @@ async function runThePopup(messageListener?: MessageListener) {
 
     //get the amount of times this user has contributed and display it to thank them
     if (Config.config.sponsorTimesContributed != undefined) {
-        if (Config.config.sponsorTimesContributed > 1) {
+        if (Config.config.sponsorTimesContributed !== 1) {
             PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
         } else {
             PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
@@ -263,8 +259,6 @@ async function runThePopup(messageListener?: MessageListener) {
 
             sponsorTimes = sponsorTimesStorage;
 
-            displaySponsorTimes();
-
             //show submission section
             PageElements.submissionSection.style.display = "unset";
 
@@ -279,7 +273,7 @@ async function runThePopup(messageListener?: MessageListener) {
         );
     }
   
-    function infoFound(request) {
+    function infoFound(request: {found: boolean, sponsorTimes: SponsorTime[], hiddenSponsorTimes: number[]}) {
         if(chrome.runtime.lastError) {
             //This page doesn't have the injected content script, or at least not yet
             displayNoVideo();
@@ -363,28 +357,14 @@ async function runThePopup(messageListener?: MessageListener) {
   
         updateStartTimeChosen();
   
-        //display video times on screen
-        displaySponsorTimes();
-  
         //show submission section
         PageElements.submissionSection.style.display = "unset";
   
         showSubmitTimesIfNecessary();
     }
   
-    //display the video times from the array
-    function displaySponsorTimes() {
-        //remove all children
-        while (PageElements.sponsorMessageTimes.firstChild) {
-            PageElements.sponsorMessageTimes.removeChild(PageElements.sponsorMessageTimes.firstChild);
-        }
-
-        //add sponsor times
-        PageElements.sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
-    }
-  
     //display the video times from the array at the top, in a different section
-    function displayDownloadedSponsorTimes(request) {
+    function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[], hiddenSponsorTimes: number[]}) {
         if (request.sponsorTimes != undefined) {
             //set it to the message
             if (PageElements.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
@@ -403,11 +383,11 @@ async function runThePopup(messageListener?: MessageListener) {
                     extraInfo = " (hidden)";
                 }
 
-                sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]) + extraInfo;
+                sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i].segment[0]) + " to " + getFormattedTime(request.sponsorTimes[i].segment[1]) + extraInfo;
         
                 let votingButtons = document.createElement("div");
   
-                let UUID = request.UUIDs[i];
+                let UUID = request.sponsorTimes[i].UUID;
   
                 //thumbs up and down buttons
                 let voteButtonsContainer = document.createElement("div");
@@ -451,12 +431,12 @@ async function runThePopup(messageListener?: MessageListener) {
     }
   
     //get the message that visually displays the video times
-    function getSponsorTimesMessage(sponsorTimes) {
+    function getSponsorTimesMessage(sponsorTimes: SponsorTime[]) {
         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]);
+            for (let s = 0; s < sponsorTimes[i].segment.length; s++) {
+                let timeMessage = getFormattedTime(sponsorTimes[i].segment[s]);
                 //if this is an end time
                 if (s == 1) {
                     timeMessage = " to " + timeMessage;
@@ -671,7 +651,7 @@ async function runThePopup(messageListener?: MessageListener) {
         let minutes = <HTMLInputElement> <unknown> document.getElementById(idStartName + "Minutes" + index);
         let seconds = <HTMLInputElement> <unknown> document.getElementById(idStartName + "Seconds" + index);
 
-        return parseInt(minutes.value) * 60 + parseInt(seconds.value);
+        return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
     }
   
     function saveSponsorTimeEdit(index, closeEditMode = true) {
@@ -692,8 +672,6 @@ async function runThePopup(messageListener?: MessageListener) {
         });
   
         if (closeEditMode) {
-            displaySponsorTimes();
-
             showSubmitTimesIfNecessary();
         }
     }
@@ -719,20 +697,8 @@ async function runThePopup(messageListener?: MessageListener) {
         sponsorTimes.splice(index, 1);
   
         //save this
-		Config.config.sponsorTimes.set(currentVideoID, sponsorTimes);
-            messageHandler.query({
-                active: true,
-                currentWindow: true
-            }, tabs => {
-                messageHandler.sendMessage(
-                    tabs[0].id,
-                    {message: "sponsorDataChanged"}
-                );
-            });
-  
-        //update display
-        displaySponsorTimes();
-  
+        Config.config.sponsorTimes.set(currentVideoID, sponsorTimes);
+        
         //if they are all removed
         if (sponsorTimes.length == 0) {
             //update chrome tab
@@ -750,69 +716,29 @@ async function runThePopup(messageListener?: MessageListener) {
             //hide submission section
             document.getElementById("submissionSection").style.display = "none";
         }
+
+        messageHandler.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            messageHandler.sendMessage(
+                tabs[0].id,
+                {message: "sponsorDataChanged"}
+            );
+        });
     }
   
-    function clearTimes() {
-        //send new sponsor time state to tab
+    function submitTimes() {
         if (sponsorTimes.length > 0) {
-            messageHandler.query({
-                active: true,
-                currentWindow: true
-            }, function(tabs) {
-                messageHandler.sendMessage(tabs[0].id, {
-                    message: "changeStartSponsorButton",
-                    showStartSponsor: true,
-                    uploadButtonVisible: false
-                });
-            });
-        }
-  
-        //reset sponsorTimes
-        sponsorTimes = [];
-
-		Config.config.sponsorTimes.set(currentVideoID, sponsorTimes);
             messageHandler.query({
                 active: true,
                 currentWindow: true
             }, tabs => {
                 messageHandler.sendMessage(
                     tabs[0].id,
-                    {message: "sponsorDataChanged"}
+                    {message: 'submitTimes'},
                 );
             });
-  
-        displaySponsorTimes();
-  
-        //hide submission section
-        document.getElementById("submissionSection").style.display = "none";
-  
-        resetStartTimeChosen();
-    }
-  
-    function submitTimes() {
-        //make info message say loading
-        PageElements.submitTimesInfoMessage.innerText = chrome.i18n.getMessage("Loading");
-        PageElements.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
-                        PageElements.submitTimesInfoMessageContainer.style.display = "none";
-
-                        clearTimes();
-                    } else {
-                        document.getElementById("submitTimesInfoMessage").innerText = utils.getErrorMessage(response.statusCode);
-                        document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-
-                        PageElements.submitTimesInfoMessageContainer.style.display = "unset";
-                    }
-                }
-            });
         }
     }
   
@@ -1128,4 +1054,4 @@ if (chrome.tabs != undefined) {
     runThePopup();
 }
 
-export default runThePopup;
+export default runThePopup;

src/render/CategoryChooser.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import CategoryChooserComponent from "../components/CategoryChooserComponent";
+
+class CategoryChooser {
+
+    constructor(element: Element) {
+        ReactDOM.render(
+            <CategoryChooserComponent/>,
+            element
+        );
+    }
+}
+
+export default CategoryChooser;

src/render/SkipNotice.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import SkipNoticeComponent from "../components/SkipNoticeComponent";
+
+class SkipNotice {
+    UUID: string;
+    autoSkip: boolean;
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: () => any;
+
+    noticeElement: HTMLDivElement;
+
+    constructor(UUID: string, autoSkip: boolean = false, contentContainer) {
+        this.UUID = UUID;
+        this.autoSkip = autoSkip;
+        this.contentContainer = contentContainer;
+
+        //get reference node
+        let referenceNode = document.getElementById("player-container-id") 
+                                || document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
+        if (referenceNode == null) {
+            //for embeds
+            let player = document.getElementById("player");
+            referenceNode = player.firstChild as HTMLElement;
+            let index = 1;
+
+            //find the child that is the video player (sometimes it is not the first)
+            while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
+                referenceNode = player.children[index] as HTMLElement;
+
+                index++;
+            }
+        }
+    
+        let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+        //this is the suffix added at the end of every id
+        let idSuffix = this.UUID + amountOfPreviousNotices;
+
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
+
+        referenceNode.prepend(this.noticeElement);
+
+        ReactDOM.render(
+            <SkipNoticeComponent UUID={UUID} 
+                autoSkip={autoSkip} 
+                contentContainer={contentContainer}
+                closeListener={() => this.close()} />,
+            this.noticeElement
+        );
+    }
+
+    close() {
+        ReactDOM.unmountComponentAtNode(this.noticeElement);
+
+        this.noticeElement.remove();
+    }
+}
+
+export default SkipNotice;

src/render/SubmissionNotice.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import SubmissionNoticeComponent from "../components/SubmissionNoticeComponent";
+
+class SubmissionNotice {
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: () => any;
+
+    callback: () => any;
+
+    noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
+
+    noticeElement: HTMLDivElement;
+
+    constructor(contentContainer: () => any, callback: () => any) {
+        this.noticeRef = React.createRef();
+
+        this.contentContainer = contentContainer;
+        this.callback = callback;
+
+        //get reference node
+        let referenceNode = document.getElementById("player-container-id") 
+                                || document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
+        if (referenceNode == null) {
+            //for embeds
+            let player = document.getElementById("player");
+            referenceNode = player.firstChild as HTMLElement;
+            let index = 1;
+
+            //find the child that is the video player (sometimes it is not the first)
+            while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
+                referenceNode = player.children[index] as HTMLElement;
+
+                index++;
+            }
+        }
+    
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "submissionNoticeContainer";
+
+        referenceNode.prepend(this.noticeElement);
+
+        ReactDOM.render(
+            <SubmissionNoticeComponent
+                contentContainer={contentContainer}
+                callback={callback} 
+                ref={this.noticeRef}
+                closeListener={() => this.close()} />,
+            this.noticeElement
+        );
+    }
+
+    update() {
+        this.noticeRef.current.forceUpdate();
+    }
+
+    close() {
+        ReactDOM.unmountComponentAtNode(this.noticeElement);
+
+        this.noticeElement.remove();
+    }
+}
+
+export default SubmissionNotice;

src/types.ts

@@ -1,7 +1,55 @@
-interface videoDurationResponse {
+import SubmissionNotice from "./render/SubmissionNotice";
+import SkipNoticeComponent from "./components/SkipNoticeComponent";
+
+interface ContentContainer {
+    (): {
+        vote: (type: any, UUID: any, skipNotice?: SkipNoticeComponent) => void,
+        dontShowNoticeAgain: () => void,
+        unskipSponsorTime: (UUID: any) => void,
+        sponsorTimes: SponsorTime[],
+        sponsorTimesSubmitting: SponsorTime[],
+        hiddenSponsorTimes: number[],
+        v: HTMLVideoElement,
+        sponsorVideoID,
+        reskipSponsorTime: (UUID: any) => void,
+        updatePreviewBar: () => void,
+        onMobileYouTube: boolean,
+        sponsorSubmissionNotice: SubmissionNotice,
+        resetSponsorSubmissionNotice: () => void,
+        changeStartSponsorButton: (showStartSponsor: any, uploadButtonVisible: any) => Promise<boolean>,
+        previewTime: (time: number) => void
+    }
+}
+
+interface VideoDurationResponse {
     duration: number;
 }
 
+enum CategorySkipOption {
+    ShowOverlay,
+    ManualSkip,
+    AutoSkip
+}
+
+interface CategorySelection {
+    name: string;
+    option: CategorySkipOption
+}
+
+interface SponsorTime {
+    segment: number[];
+    UUID: string;
+
+    category: string;
+}
+
+type VideoID = string;
+
 export {
-    videoDurationResponse
+    VideoDurationResponse,
+    ContentContainer,
+    CategorySelection,
+    CategorySkipOption,
+    SponsorTime,
+    VideoID
 };

src/utils.ts

@@ -1,4 +1,7 @@
 import Config from "./config";
+import { CategorySelection, SponsorTime } from "./types";
+
+import * as CompileConfig from "../config.json";
 
 class Utils {
     
@@ -154,6 +157,42 @@ class Utils {
         });
     }
 
+    /**
+     * Gets just the timestamps from a sponsorTimes array
+     * 
+     * @param sponsorTimes 
+     */
+    getSegmentsFromSponsorTimes(sponsorTimes: SponsorTime[]): number[][] {
+        let segments: number[][] = [];
+        for (const sponsorTime of sponsorTimes) {
+            segments.push(sponsorTime.segment);
+        }
+
+        return segments;
+    }
+
+    getSponsorIndexFromUUID(sponsorTimes: SponsorTime[], UUID: string): number {
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            if (sponsorTimes[i].UUID === UUID) {
+                return i;
+            }
+        }
+
+        return -1;
+    }
+
+    getSponsorTimeFromUUID(sponsorTimes: SponsorTime[], UUID: string): SponsorTime {
+        return sponsorTimes[this.getSponsorIndexFromUUID(sponsorTimes, UUID)];
+    }
+
+    getCategorySelection(category: string): CategorySelection {
+        for (const selection of Config.config.categorySelections) {
+            if (selection.name === category) {
+                return selection;
+            }
+        }
+    }
+
     localizeHtmlPage() {
         //Localize by replacing __MSG_***__ meta tags
         var objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
@@ -230,6 +269,39 @@ class Utils {
         return errorMessage;
     }
 
+    /**
+     * Sends a request to the SponsorBlock server with address added as a query
+     * 
+     * @param type The request type. "GET", "POST", etc.
+     * @param address The address to add to the SponsorBlock server address
+     * @param callback 
+     */    
+    async asyncRequestToServer(type: string, address: string, data = {}) {
+        let serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
+
+        // If GET, convert JSON to parameters
+        if (type.toLowerCase() === "get") {
+            for (const key in data) {
+                let seperator = address.includes("?") ? "&" : "?";
+                let value = (typeof(data[key]) === "string") ? data[key]: JSON.stringify(data[key]);
+                address += seperator + key + "=" + value;
+            }
+
+            data = null;
+        }
+
+        const response = await fetch(serverAddress + address, {
+            method: type,
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: 'follow',
+            body: data ? JSON.stringify(data) : null
+        });
+
+        return response;
+    }
+
     /**
      * Sends a request to the SponsorBlock server with address added as a query
      * 
@@ -239,8 +311,10 @@ class Utils {
      */
     sendRequestToServer(type: string, address: string, callback?: (xmlhttp: XMLHttpRequest, err: boolean) => any) {
         let xmlhttp = new XMLHttpRequest();
-  
-        xmlhttp.open(type, Config.config.serverAddress + address, true);
+
+        let serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
+        
+        xmlhttp.open(type, serverAddress + address, true);
   
         if (callback != undefined) {
             xmlhttp.onreadystatechange = function () {
@@ -256,6 +330,37 @@ class Utils {
         xmlhttp.send();
     }
 
+    getFormattedMinutes(seconds: number) {
+        return Math.floor(seconds / 60);
+    }
+
+    getFormattedSeconds(seconds: number) {
+        return seconds % 60;
+    }
+
+    getFormattedTime(seconds: number, precise?: boolean) {
+        let minutes = Math.floor(seconds / 60);
+        let secondsNum: number = seconds - minutes * 60;
+        if (!precise) {
+            secondsNum = Math.floor(secondsNum);
+        }
+
+        let secondsDisplay: string = String(secondsNum.toFixed(3));
+        
+        if (secondsNum < 10) {
+            //add a zero
+            secondsDisplay = "0" + secondsDisplay;
+        }
+
+        let formatted = minutes + ":" + secondsDisplay;
+
+        return formatted;
+    }
+
+    getRawSeconds(minutes: number, seconds: number): number {
+        return minutes * 60 + seconds;
+    }
+
     /**
      * Is this Firefox (web-extensions)
      */

tsconfig.json

@@ -7,6 +7,7 @@
         "outDir": "dist/js",
         "noEmitOnError": true,
         "typeRoots": [ "node_modules/@types" ],
-        "resolveJsonModule": true
+        "resolveJsonModule": true,
+        "jsx": "react"
     }
 }

webpack/webpack.common.js

@@ -42,7 +42,8 @@ module.exports = env => ({
         ),
         new BuildManifest({
             browser: env.browser,
-            pretty: env.mode === "production"
+            pretty: env.mode === "production",
+            stream: env.stream
         })
     ]
 });

webpack/webpack.manifest.js

@@ -8,6 +8,8 @@ const fs = require('fs');
 const manifest = require("../manifest/manifest.json");
 const firefoxManifestExtra = require("../manifest/firefox-manifest-extra.json");
 const chromeManifestExtra = require("../manifest/chrome-manifest-extra.json");
+const betaManifestExtra = require("../manifest/beta-manifest-extra.json");
+const firefoxBetaManifestExtra = require("../manifest/firefox-beta-manifest-extra.json");
 
 // schema for options object
 const schema = {
@@ -18,6 +20,9 @@ const schema = {
         },
         pretty: {
             type: 'boolean'
+        },
+        steam: {
+            type: 'string'
         }
     }  
 };
@@ -40,6 +45,14 @@ class BuildManifest {
             mergeObjects(manifest, chromeManifestExtra);
         }
 
+        if (this.options.stream === "beta") {
+            mergeObjects(manifest, betaManifestExtra);
+
+            if (this.options.browser.toLowerCase() === "firefox") {
+                mergeObjects(manifest, firefoxBetaManifestExtra);
+            }
+        }
+
         let result = JSON.stringify(manifest);
         if (this.options.pretty) result = JSON.stringify(manifest, null, 2);