Merge pull request #288 from ajayyy/react

Moving elements to React
Increased version number.
2025-12-17 13:08:54 +03:00 · 2020-04-10 00:10:07 -04:00 · 2020-04-10 00:08:49 -04:00 · 2020-04-09 16:40:42 -04:00 · 2020-04-09 15:34:11 -04:00 · 2020-04-09 14:08:26 -04:00
38 changed files with 4336 additions and 1144 deletions
--- a/.github/workflows/ci.yml
+++ b/.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

--- a/.github/workflows/release.yml
+++ b/.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 }}
+
--- a/README.md
+++ b/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>

--- a/config.json.example
+++ b/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"]
+}
--- a/manifest/beta-manifest-extra.json
+++ b/manifest/beta-manifest-extra.json
@@ -0,0 +1,4 @@
+{
+    "name": "BETA - SponsorBlock"
+}
+  
--- a/manifest/firefox-beta-manifest-extra.json
+++ b/manifest/firefox-beta-manifest-extra.json
@@ -0,0 +1,8 @@
+{
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "sponsorBlockerBETA@ajay.app"
+        }
+    }
+}
+  
--- a/manifest/manifest.json
+++ b/manifest/manifest.json
@@ -1,7 +1,7 @@
 {
    "name": "__MSG_fullName__",
    "short_name": "__MSG_Name__",
-    "version": "1.2.13",
+    "version": "1.2.25",
    "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",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
  },
--- a/public/_locales/en/messages.json
+++ b/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,105 @@
    },
    "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 Overlay On Player"
+    },
+    "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)"
    }
 }
--- a/public/_locales/ru/messages.json
+++ b/public/_locales/ru/messages.json
@@ -28,10 +28,10 @@
        "message": "Канал добавлен в белый список!"
    },
    "Sponsor": {
-        "message": "Спонсор"
+        "message": "спонсора"
    },
    "Sponsors": {
-        "message": "Спонсоры"
+        "message": "спонсоров"
    },
   "Segment": {
        "message": "спонсорская вставка"
@@ -123,5 +123,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": "Полное описание расширения на страницах магазинов."
+    },
+    "website": {
+        "message": "Сайт",
+        "description": "Используется на странице магазина Firefox"
+    },
+    "sourceCode": {
+        "message": "Исходный код",
+        "description": "Используется на странице магазина Firefox"
+    },
+    "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 теперь поддерживается"
    }
 }
--- a/public/content.css
+++ b/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,59 @@
 .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;
+}
+
+.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;
 }
--- a/public/icons/beep.ogg
+++ b/public/icons/beep.ogg
--- a/public/options/options.css
+++ b/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;
 }
--- a/public/options/options.html
+++ b/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/>

--- a/public/popup.html
+++ b/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>
--- a/src/background.ts
+++ b/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
+                    });
+                }
            });
        }
    }
--- a/src/components/CategoryChooserComponent.tsx
+++ b/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;
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/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;
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -0,0 +1,252 @@
+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) {
+        //TODO: Change to a listener in the renderer (not component)
+        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        if (notice != null) {
+            notice.remove();
+        }
+
+        //remove setInterval
+        if (this.countdownInterval !== null) clearInterval(this.countdownInterval);
+
+        if (this.props.closeListener && !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;
--- a/src/components/NoticeTextSectionComponent.tsx
+++ b/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;
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -0,0 +1,318 @@
+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;
+}
+
+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}>
+                    
+                {(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;
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -0,0 +1,302 @@
+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.saveEditTimes.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 = [];
+
+        //TODO: Remove this when testing server is not needed
+        let categoryList = Config.config.testingServer ? CompileConfig.categoryList : ["sponsor"];
+        for (const category of categoryList) {
+            elements.push(
+                <option value={category}
+                        key={category}>
+                    {chrome.i18n.getMessage("category_" + category)}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+
+    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][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;
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -0,0 +1,150 @@
+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;
+}
+
+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>[];
+
+    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"
+        }
+    }
+
+    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}>
+                    <td>
+                        {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();
+    }
+
+    submit() {
+        // save all items
+        for (const ref of this.timeEditRefs) {
+            ref.current.saveEditTimes();
+        }
+
+        this.props.callback();
+
+        this.cancel();
+    }
+}
+
+export default SubmissionNoticeComponent;
--- a/src/config.ts
+++ b/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]);
    });
--- a/src/content.ts
+++ b/src/content.ts
--- a/src/js-components/previewBar.ts
+++ b/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"
--- a/src/js-components/skipNotice.ts
+++ b/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;
--- a/src/options.ts
+++ b/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"));
+      });;
 }
--- a/src/popup.ts
+++ b/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;
@@ -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";
-                    }
-                }
-            });
        }
    }
  
--- a/src/render/CategoryChooser.tsx
+++ b/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;
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -0,0 +1,50 @@
+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;
+
+    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;
+
+        let noticeElement = document.createElement("div");
+        noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
+
+        referenceNode.prepend(noticeElement);
+
+        ReactDOM.render(
+            <SkipNoticeComponent UUID={UUID} autoSkip={autoSkip} contentContainer={contentContainer} />,
+            noticeElement
+        );
+    }
+}
+
+export default SkipNotice;
--- a/src/render/SubmissionNotice.tsx
+++ b/src/render/SubmissionNotice.tsx
@@ -0,0 +1,56 @@
+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>;
+
+    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++;
+            }
+        }
+    
+        let noticeElement = document.createElement("div");
+        noticeElement.id = "submissionNoticeContainer";
+
+        referenceNode.prepend(noticeElement);
+
+        ReactDOM.render(
+            <SubmissionNoticeComponent
+                contentContainer={contentContainer}
+                callback={callback} 
+                ref={this.noticeRef} />,
+            noticeElement
+        );
+    }
+
+    update() {
+        this.noticeRef.current.forceUpdate();
+    }
+}
+
+export default SubmissionNotice;
--- a/src/types.ts
+++ b/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
 };
--- a/src/utils.ts
+++ b/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)
     */
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
        "outDir": "dist/js",
        "noEmitOnError": true,
        "typeRoots": [ "node_modules/@types" ],
-        "resolveJsonModule": true
+        "resolveJsonModule": true,
+        "jsx": "react"
    }
 }
--- a/webpack/webpack.common.js
+++ b/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
        })
    ]
 });
--- a/webpack/webpack.manifest.js
+++ b/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);
Author	SHA1	Message	Date
Ajay Ramachandran	07f1106579	Merge pull request #288 from ajayyy/react Moving elements to React	2020-04-10 00:10:07 -04:00
Ajay Ramachandran	2f78f31874	Increased version number.	2020-04-10 00:08:49 -04:00
Ajay Ramachandran	74a4ef0692	Changed name of merch category	2020-04-09 16:40:42 -04:00
Ajay Ramachandran	2d55ea0fc5	Removed logging	2020-04-09 15:34:11 -04:00
Ajay Ramachandran	a50f030a3b	Properly handle server error	2020-04-09 14:08:26 -04:00
Ajay Ramachandran	ae690f0c65	Renamed new request function	2020-04-09 14:03:13 -04:00
Ajay Ramachandran	e2128f7ae3	Fixed editing non first index submissions. The idSuffix was not being set properly and was set to undefined.	2020-04-09 12:54:04 -04:00
Ajay Ramachandran	80fe28a952	Fixed now button locale missing	2020-04-09 12:48:41 -04:00
Ajay Ramachandran	be74ebe7bc	Added category colours	2020-04-09 12:44:10 -04:00
Ajay Ramachandran	e085163dfd	Only shows sponsor category if test server is disabled	2020-04-09 12:13:56 -04:00
Ajay Ramachandran	adef65b878	Made submission notice above other notices	2020-04-09 01:42:16 -04:00
Ajay Ramachandran	b7870cbd74	Added submissions with the new API	2020-04-09 01:35:23 -04:00
Ajay Ramachandran	cd03218940	Now uses new GET api when testing server is enabled	2020-04-09 01:19:00 -04:00
Ajay Ramachandran	6abf6a0044	Added testing server option.	2020-04-09 00:40:11 -04:00
Ajay Ramachandran	6ef5dd4522	Update README.md	2020-04-07 18:28:53 -04:00
Ajay Ramachandran	9f87c839b5	Fixed preview bar sometimes not appearing	2020-04-06 21:58:42 -04:00
Ajay Ramachandran	85c1a45c8b	Improved skipping over multiple segments	2020-04-06 01:19:17 -04:00
Ajay Ramachandran	963fb58321	Fixed endIndex not being used while skipping and made end index finding function recursive	2020-04-06 00:45:28 -04:00
Ajay Ramachandran	d1d4dcdc9c	Added migration for auto skip option	2020-04-06 00:40:30 -04:00
Ajay Ramachandran	24dd98a98f	Update README.md	2020-04-05 18:34:10 -04:00
Ajay Ramachandran	5abc0bedd4	Fixed some non converted sponsorTimes code	2020-04-05 14:28:26 -04:00
Ajay Ramachandran	e1e570fb18	Made show only overlay work	2020-04-05 00:08:44 -04:00
Ajay Ramachandran	93c0a0c003	Give the user error messages from the server. Helps with https://github.com/ajayyy/SponsorBlockServer/pull/70	2020-04-04 23:47:01 -04:00
Ajay Ramachandran	93f82de7fd	Moves submission error check into the proper place	2020-04-04 23:45:10 -04:00
Ajay Ramachandran	f6945b56d8	Fixed submitted sponsors and prevented preview sponsors from being voted on	2020-04-04 23:35:44 -04:00
Ajay Ramachandran	55e17ceb60	Fixed issues with manual skipping	2020-04-04 23:26:34 -04:00
Ajay Ramachandran	2a432490bc	Moved audio setting	2020-04-04 23:26:09 -04:00
Ajay Ramachandran	0115a6df13	Merge pull request #315 from Joe-Dowd/react Audio notification on skip	2020-04-04 22:26:51 -04:00
Ajay Ramachandran	a5e9ceda60	Removed custom options code for audio	2020-04-04 22:25:10 -04:00
Ajay Ramachandran	09f53c80f0	Sync volume with video volume	2020-04-04 22:22:37 -04:00
Ajay Ramachandran	8134b5a67e	Added missing category to example config	2020-04-04 22:17:11 -04:00
Ajay Ramachandran	ebd6c9c952	Fixed error when preview bar updates	2020-04-04 22:12:54 -04:00
Ajay Ramachandran	37e2fb0972	Fixed react whitespace error	2020-04-04 22:11:39 -04:00
Ajay Ramachandran	7af44eae66	Category submission notice now works. It still submits to the server without a category since the server-side is not done.	2020-04-04 22:06:59 -04:00
Ajay Ramachandran	62c50d77c6	Added offtopic category	2020-04-04 21:08:18 -04:00
Ajay Ramachandran	bac9029a28	Switched skipping to use category settings. Submission editing is now broken as well as clicking submit. Skipping through multiple submissions just treats it as skipping from one (no multiple vote options).	2020-04-04 21:04:17 -04:00
Joe Dowd	48a614943d	Merge branch 'react' into react	2020-04-04 18:44:05 +01:00
Ajay Ramachandran	ec9f1efd55	Added category skip option to just show an overlay without skipping	2020-04-04 12:58:02 -04:00
Joe-Dowd	59c6455298	removed duplicate locale message	2020-04-04 14:13:27 +01:00
Joe-Dowd	d7a7476cd1	fixed tabbing	2020-04-04 14:01:31 +01:00
Joe-Dowd	36981af95a	Added audio notification on skip to options menu	2020-04-04 13:59:04 +01:00
Ajay Ramachandran	d4d5e4743e	Added key to sponsorTimeEditComponent	2020-04-02 22:14:52 -04:00
Ajay Ramachandran	3afde08a6e	Category selections now save	2020-04-02 22:13:36 -04:00
Ajay Ramachandran	6ea87d7cd0	Added basic category chooser UI	2020-04-02 21:26:13 -04:00
Ajay Ramachandran	b6c243236b	Submission notice now saves on submission	2020-04-02 14:38:33 -04:00
Ajay Ramachandran	6fa67088bc	Removed old edit pane from popup and made it call the new one	2020-04-02 13:22:08 -04:00
Ajay Ramachandran	d37abcfa9f	Added category list to example config	2020-04-02 01:33:28 -04:00
Ajay Ramachandran	5575eda7b1	Changed UI data to be store in strings for better UX	2020-04-02 01:29:12 -04:00
Ajay Ramachandran	e17eb60b4d	Added basic category selector to the UI	2020-04-02 01:25:06 -04:00
Ajay Ramachandran	e055a66342	Submission notice now updates when sponsors are added	2020-04-02 00:59:11 -04:00
Ajay Ramachandran	72c98923f6	Fixed close button on submission confirmation notice	2020-04-02 00:44:38 -04:00
Ajay Ramachandran	8ecea87c52	Added now button to editor	2020-04-01 20:38:10 -04:00
Ajay Ramachandran	7727cd56db	Save edits before previewing	2020-04-01 20:24:50 -04:00
Ajay Ramachandran	242fbf8009	Save edits correctly	2020-04-01 20:22:51 -04:00
Ajay Ramachandran	24f2ce4a32	Fixed event propagation issues	2020-04-01 20:19:31 -04:00
Ajay Ramachandran	0d08e11b1d	Added basic time editing. The button presses don't work yet as YouTube steals the events.	2020-04-01 20:06:46 -04:00
Ajay Ramachandran	513a140754	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into react # Conflicts: # public/_locales/en/messages.json # src/content.ts	2020-03-31 00:29:27 -04:00
Ajay Ramachandran	88350e3421	Merge pull request #308 from ajayyy/experimental Skipping Fixes	2020-03-30 20:11:33 -04:00
Ajay Ramachandran	36d79313de	Increase version number	2020-03-30 20:10:32 -04:00
Ajay Ramachandran	a9993d5d80	Added check for videoID change not being called	2020-03-30 20:08:00 -04:00
Ajay Ramachandran	4a6ddf6774	Remove mobile support announcement	2020-03-30 19:15:25 -04:00
Ajay Ramachandran	b6172c6d9b	Fixed sponsor skipping after quickly playing and pausing.	2020-03-30 19:07:59 -04:00
Ajay Ramachandran	b21a59f4e5	Fixed looping sometimes not skipping beginning sponsors. Resolves https://github.com/ajayyy/SponsorBlock/issues/306	2020-03-30 15:33:03 -04:00
Ajay Ramachandran	78dd44c502	Fixed missing name in release workflow	2020-03-30 14:44:26 -04:00
Ajay Ramachandran	f4a129b346	Merge pull request #307 from ajayyy/experimental Skipping fixes	2020-03-30 14:34:31 -04:00
Ajay Ramachandran	6d60a90533	Increased version number.	2020-03-30 14:18:11 -04:00
Ajay Ramachandran	0d33794636	Fixed almost zero second sponsors skipping a little too late.	2020-03-30 14:11:46 -04:00
Ajay Ramachandran	e62d46f2dd	Improved zero second skipping for directly loaded videos	2020-03-30 14:07:35 -04:00
Ajay Ramachandran	7f36c7eec3	Merge pull request #302 from Joe-Dowd/restrict-keybindings Restrict keybindings	2020-03-26 12:35:28 -04:00
Ajay Ramachandran	08d28798c6	Localised key errors	2020-03-26 12:30:06 -04:00
Ajay Ramachandran	fe33277d8f	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into restrict-keybindings	2020-03-26 12:27:06 -04:00
Ajay Ramachandran	feec5b4e22	Added spacing and separated code into a function	2020-03-26 12:26:47 -04:00
Ajay Ramachandran	62b5e90d87	Merge pull request #300 from Joe-Dowd/debug-output Added copy debug information to clipboard options element.	2020-03-26 12:19:07 -04:00
Ajay Ramachandran	2c980a269d	Fixed sponsorTimes data on export and import	2020-03-26 12:18:52 -04:00
Ajay Ramachandran	1da60e38a1	Merge pull request #304 from ajayyy/experimental Scheduling fixes	2020-03-25 19:01:43 -04:00
Ajay Ramachandran	ed67cc52fe	Fixed mobile YouTube starting sponsor detection that are not exactly 0 seconds.	2020-03-21 20:59:08 -04:00
Joe-Dowd	b614dce91a	Added more restricted characters	2020-03-20 19:55:29 +00:00
Joe-Dowd	c013c7ef0f	added N and i to the list of restricted characters	2020-03-20 19:50:38 +00:00
Joe-Dowd	c78e2cd214	Fixed mod keys when setting keybinding	2020-03-20 19:39:37 +00:00
Joe-Dowd	da5a3841bd	Added restrictions to keybindings.	2020-03-20 15:35:23 +00:00
Joe Dowd	e73d79071c	Added copy debug information to clipboard options element.	2020-03-18 00:15:04 +00:00
Ajay Ramachandran	f100ee4738	Made preview button functional	2020-03-11 19:56:16 -04:00
Ajay Ramachandran	37662138df	Increase precision in submission preview	2020-03-11 19:48:51 -04:00
Ajay Ramachandran	037d1089a3	Merge branch 'experimental' of https://github.com/ajayyy/SponsorBlock into react	2020-03-11 19:40:42 -04:00
Ajay Ramachandran	0467dd5d21	Made sure no skips are scheduled while paused	2020-03-11 19:39:08 -04:00
Ajay Ramachandran	1df123de6d	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into react # Conflicts: # public/_locales/en/messages.json # src/js-components/skipNotice.ts	2020-03-11 19:36:41 -04:00
Ajay Ramachandran	3063591a4c	Added delete function to new dialog	2020-03-11 19:35:20 -04:00
Ajay Ramachandran	a182354254	Added basic react submission confirmation notice	2020-03-11 17:50:50 -04:00
Ajay Ramachandran	5f879bceab	Fixed where repo-token was inputted in release workflow	2020-03-10 23:30:53 -04:00
Ajay Ramachandran	457bd15e17	Merge pull request #298 from ajayyy/experimental Options Improvements	2020-03-10 23:24:36 -04:00
Ajay Ramachandran	cc1b8ee499	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into experimental	2020-03-10 23:23:30 -04:00
Ajay Ramachandran	4a9ed1348e	Increase version number	2020-03-10 23:23:10 -04:00
Ajay Ramachandran	5595420be6	Removed redundant if statement	2020-03-10 23:22:57 -04:00
Ajay Ramachandran	191e9ceb6f	Makes sure the playing and play listener both don't get called at the same time. This led to double notices.	2020-03-10 23:22:17 -04:00
Ajay Ramachandran	a02aef591e	Split notice text into a separate component	2020-03-10 12:57:26 -04:00
Ajay Ramachandran	1e26faa57c	Update README.md	2020-03-10 12:11:08 -04:00
Ajay Ramachandran	1a92265e65	Made non timed notice the default	2020-03-10 12:08:54 -04:00
Ajay Ramachandran	92a6065c98	Added support for untimed notice	2020-03-10 03:08:15 -04:00
Ajay Ramachandran	d7ca56941a	Moved timing mechanism to separate component	2020-03-10 03:01:20 -04:00
Ajay Ramachandran	030256c9e1	Enable checkbox when the permission prompt is successful	2020-03-10 02:14:00 -04:00
Ajay Ramachandran	77eff12d9b	Merge pull request #261 from OfficialNoob/patch-1 Made decodeStoredItem detect item type	2020-03-10 01:21:10 -04:00
Ajay Ramachandran	2967fce013	Update README.md	2020-03-10 00:57:44 -04:00
Ajay Ramachandran	db1def623a	Update README.md	2020-03-10 00:56:58 -04:00
Ajay Ramachandran	140e324bf1	Update README.md	2020-03-10 00:55:18 -04:00
Ajay Ramachandran	f0bf051259	Properly ask for permissions when changing the server address	2020-03-10 00:48:53 -04:00
Ajay Ramachandran	2ec47d52cd	Added basic options import/export	2020-03-10 00:33:50 -04:00
Ajay Ramachandran	50002cfbbd	Fix github token using the wrong key in release workflow	2020-03-09 23:10:59 -04:00
Ajay Ramachandran	6ccd4b8b37	Merge pull request #297 from ajayyy/experimental Fix non zero second skips	2020-03-09 23:05:45 -04:00
Ajay Ramachandran	da6ccb561d	Fixed manual skip vote check using wrong variable	2020-03-09 23:04:01 -04:00
Ajay Ramachandran	c0894afff9	Prevent manual skipping votes from affecting to UI and happening when auto vote is off	2020-03-09 23:03:24 -04:00
Ajay Ramachandran	09f244150c	Fixed skipping for non zero second sponsors. Also now using the playing event to fix issues with mobile YouTube skipping.	2020-03-09 23:00:39 -04:00
Ajay Ramachandran	c526a812e0	Made manual skip vote follow config	2020-03-09 22:50:07 -04:00
Ajay Ramachandran	ccbc0456f9	Made skip notice use react states	2020-03-09 21:51:44 -04:00
Ajay Ramachandran	efec8b320c	Increase version num	2020-03-09 18:38:02 -04:00
Ajay Ramachandran	e6ea9f77e9	Fixed skip scheduling for auto skip	2020-03-09 18:34:33 -04:00
Ajay Ramachandran	0813aa4ba3	Prevent release workflow from running multiple times	2020-03-09 18:30:57 -04:00
Ajay Ramachandran	ba575f6b8d	Merge pull request #296 from ajayyy/experimental Prevent manual skips from triggering a view and improved skip schedule for manual skip	2020-03-09 18:20:11 -04:00
Ajay Ramachandran	ff9b2338e0	Fixed scheduling being wrong when manual skip is enabled	2020-03-09 18:12:05 -04:00
Ajay Ramachandran	d2bb4b38e3	Increased version number	2020-03-09 18:07:29 -04:00
Ajay Ramachandran	760c08dd0c	Prevent manual skips from triggering a view	2020-03-09 18:07:06 -04:00
Ajay Ramachandran	50517eb462	Switched upload to release action	2020-03-09 11:15:29 -04:00
Ajay Ramachandran	e77425c21e	Merge pull request #294 from ajayyy/experimental Another potential fix for zero second sponsor freezing	2020-03-09 11:04:26 -04:00
Ajay Ramachandran	f63abb053d	Revert to only using workflows	2020-03-09 11:02:14 -04:00
Ajay Ramachandran	7b5703aa04	Fixed action format	2020-03-09 10:56:06 -04:00
Ajay Ramachandran	d641066312	Checkout in CI	2020-03-09 10:52:43 -04:00
Ajay Ramachandran	44ca8d47d8	Moved CI into the right place	2020-03-09 10:51:26 -04:00
Ajay Ramachandran	d5f41bf4ad	Fixed CI	2020-03-09 10:49:50 -04:00
Ajay Ramachandran	73e8926444	Start skip schedule from skip time to prevent slow video updates from breaking it.	2020-03-09 10:43:13 -04:00
Ajay Ramachandran	5ad694af65	Increase version number	2020-03-08 23:26:46 -04:00
Ajay Ramachandran	d7f7acb219	Fixed release action	2020-03-08 23:20:41 -04:00
Ajay Ramachandran	b4be51333a	Merge pull request #293 from ajayyy/experimental Fixed double sponsor skip for zero second sponsors	2020-03-08 23:17:48 -04:00
Ajay Ramachandran	ae94811a00	Increase version number	2020-03-08 23:16:50 -04:00
Ajay Ramachandran	a484f2f2cc	Fixed double sponsor skip for zero second sponsors	2020-03-08 23:16:09 -04:00
Ajay Ramachandran	9cce4e734d	Merge pull request #292 from grishka/russian Fix Russian translation and add missing strings	2020-03-07 12:34:48 -05:00
Grishka	3c63644213	fix	2020-03-07 13:45:56 +03:00
Grishka	ad25bc34de	Add missing Russian strings	2020-03-07 13:37:58 +03:00
Ajay Ramachandran	0241e15691	Only seek if the video is not paused	2020-02-28 15:06:08 -05:00
Ajay Ramachandran	af9a6b8a84	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into experimental	2020-02-28 14:09:21 -05:00
Ajay Ramachandran	329b188435	Checkout before using other CI	2020-02-27 22:23:33 -05:00
Ajay Ramachandran	2e49bb73c5	Merge pull request #290 from ajayyy/experimental Potentially fixed zero second skip spam	2020-02-27 22:21:33 -05:00
Ajay Ramachandran	5158020293	Potentially fixed zero second skip spam	2020-02-27 22:20:30 -05:00
Ajay Ramachandran	feaf80ad1e	Merge pull request #289 from Joe-Dowd/messages-typo Typo in en messages locale "skipeed -> skipped"	2020-02-25 15:14:01 -05:00
Joe Dowd	7fbd89159e	Typo in en messages locale skipped	2020-02-25 18:25:28 +00:00
Ajay Ramachandran	0d9b624fd5	Delete old skip notice	2020-02-25 00:43:20 -05:00
Ajay Ramachandran	008c9380b1	Switched notice to react	2020-02-25 00:38:03 -05:00
Ajay Ramachandran	716861da18	Fixed beta builds	2020-02-23 20:49:17 -05:00
Ajay Ramachandran	d0a34d423c	Fix release CI	2020-02-23 20:42:12 -05:00
Ajay Ramachandran	adfba72f19	Merge pull request #286 from ajayyy/experimental Mobile fix + mobile update notice	2020-02-23 20:40:48 -05:00
Ajay Ramachandran	f00337c376	Increase version number.	2020-02-23 20:39:29 -05:00
Ajay Ramachandran	737a023b65	Added mobile support message.	2020-02-23 20:39:13 -05:00
Ajay Ramachandran	5551344355	Fixed mobile notice zoom on Firefox	2020-02-23 16:14:18 -05:00
Ajay Ramachandran	07f64382fb	Merge pull request #285 from cherryblossom000/patch-1 Fix "0 sponsor" in popup	2020-02-23 11:21:21 -05:00
Ajay Ramachandran	1c7cde2a19	Changed to !==	2020-02-23 11:20:21 -05:00
cherryblossom	8510a7f3d8	Fix popup saying "0 sponsor"	2020-02-23 17:03:18 +11:00
Ajay Ramachandran	db60b11a17	Merge pull request #284 from ajayyy/experimental CI Improvements	2020-02-20 15:38:35 -05:00
Ajay Ramachandran	6a212b762a	Fixed invalid release workflow	2020-02-20 12:21:30 -05:00
Ajay Ramachandran	c8ec2922cf	Added makedir to CI	2020-02-20 12:17:51 -05:00
Ajay Ramachandran	b629b7d333	Added basic release workflow	2020-02-20 12:14:01 -05:00
Ajay Ramachandran	514a8b62d6	Added beta build to CI	2020-02-20 11:39:06 -05:00
Ajay Ramachandran	cd11618a5d	Merge pull request #283 from ajayyy/experimental New skipping mechanism fixes	2020-02-20 11:25:32 -05:00
Ajay Ramachandran	8be3cb157a	Increased version number	2020-02-20 11:23:44 -05:00
Ajay Ramachandran	4ca57cc025	Fixed preview sponsors not skipping when only they are there.	2020-02-19 13:45:00 -05:00
Ajay Ramachandran	397bcc94c5	Remove redundant code	2020-02-19 13:35:05 -05:00
Ajay Ramachandran	8b28bccfd7	Run dev now uses dev build.	2020-02-19 12:57:22 -05:00
Ajay Ramachandran	c6107057d9	Firefox dev environment now loads Firefox uBlock Origin	2020-02-19 12:54:58 -05:00
Ajay Ramachandran	ab2a9530e9	Sped up zero second sponsors a tiny bit	2020-02-19 12:41:22 -05:00
Ajay Ramachandran	bfc771bd99	Removed unused variables	2020-02-19 12:37:39 -05:00
Ajay Ramachandran	e75e588755	Sped up direct links a tiny bit.	2020-02-19 12:37:17 -05:00
Ajay Ramachandran	0266bb49ca	Fixed typo	2020-02-19 12:35:10 -05:00
Ajay Ramachandran	9e693fd555	Update README.md	2020-02-19 12:33:48 -05:00
Ajay Ramachandran	1f30b9ec84	Merge pull request #280 from ajayyy/mobile-youtube Mobile YouTube support + Precise skipping	2020-02-19 11:40:07 -05:00
Ajay Ramachandran	50862e3c03	Increased version number	2020-02-19 11:25:14 -05:00
Ajay Ramachandran	20e90bbc34	Fixed schedule not updating when new sponsors arrive	2020-02-19 00:54:30 -05:00
Ajay Ramachandran	2e212e6d10	Improved mobile preview bar	2020-02-19 00:14:08 -05:00
Ajay Ramachandran	2039bfa081	Made buttons on mobile not close the menu.	2020-02-19 00:10:05 -05:00
Ajay Ramachandran	7dc8a99247	Added button support to mobile.	2020-02-19 00:00:22 -05:00
Ajay Ramachandran	1b25ea7f95	Shrunk notice on mobile	2020-02-18 19:29:20 -05:00
Ajay Ramachandran	1869382166	Fixed popup issues.	2020-02-18 19:03:34 -05:00
Ajay Ramachandran	d58cd639c7	Added zero second preview sponsors.	2020-02-18 18:45:33 -05:00
Ajay Ramachandran	6cd2d4cf83	Added back whitelist support	2020-02-18 18:44:06 -05:00
Ajay Ramachandran	b681f5abd9	Added support for preview sponsors in new skipping method.	2020-02-18 18:43:45 -05:00
Ajay Ramachandran	5b2a0feccf	Switched to new skipping mechanic	2020-02-18 18:29:02 -05:00
Ajay Ramachandran	cd58f6bc73	Skip notice improvement.	2020-02-18 15:57:40 -05:00
Ajay Ramachandran	aeabf806ac	Added duration change listener check to prevent mid-video zero second skips. Sometimes the video gets reset to zero seconds for a few milliseconds, this should not trigger a skip. Resolves https://github.com/ajayyy/SponsorBlock/issues/183	2020-02-18 15:03:55 -05:00
Ajay Ramachandran	af7ba31c2f	Remove logging.	2020-02-18 14:40:40 -05:00
Ajay Ramachandran	5b962b1b9d	Merge pull request #281 from ajayyy/experimental Rename CI artifacts	2020-02-17 15:24:49 -05:00
Ajay Ramachandran	219a7ba8c3	Added preview bar to mobile	2020-02-17 15:10:50 -05:00
Ajay Ramachandran	933babb4e6	Added mobile YouTube site to the whitelist.	2020-02-17 11:32:00 -05:00
Ajay Ramachandran	023ba2e051	Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into experimental	2020-02-17 11:24:36 -05:00
Ajay Ramachandran	8d82a6a3e6	Fixed data old format migration.	2020-02-14 23:20:11 -05:00
Ajay Ramachandran	88a8fda566	Moved window.SB creation for security reasons.	2020-02-14 23:16:01 -05:00
Ajay Ramachandran	1c833a8b1d	Rename CI artifacts.	2020-02-11 21:04:41 -05:00
Official Noob	995fe072bd	Merge pull request #1 from ajayyy/master Update	2020-02-09 22:15:27 +00:00
Ajay Ramachandran	8cdbebd6de	Added the config as a global variable.	2020-02-08 20:16:26 -05:00
Ajay Ramachandran	94af8ab301	Prevent all strings from being parsed as JSON.	2020-02-08 20:15:49 -05:00
Ajay Ramachandran	be3a4a4e91	Added support for old format.	2020-02-08 20:08:34 -05:00
Official Noob	1c17464c94	config => defaults	2020-02-04 23:29:11 +00:00
Official Noob	8896c5707a	Made decodeStoredItem detect item type Not tested because SB.config cant be used anymore :(	2020-02-04 22:16:40 +00:00