Add svgjs and testing with fake dom

Update workflow

.github/workflows/ci.yml

@@ -10,8 +10,8 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
       - run: npm install
       - name: Copy configuration
         run: cp config.json.example config.json
@@ -23,44 +23,44 @@ jobs:
       # Create Chrome artifacts
       - name: Create Chrome artifacts
         run: npm run build:chrome
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: ChromeExtension
           path: dist
       - run: mkdir ./builds
-      - uses: montudor/action-zip@v0.1.0
+      - uses: montudor/action-zip@v1
         with:
           args: zip -qq -r ./builds/ChromeExtension.zip ./dist
 
       # Create Firefox artifacts
       - name: Create Firefox artifacts
         run: npm run build:firefox
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtension
           path: dist
-      - uses: montudor/action-zip@v0.1.0
+      - uses: montudor/action-zip@v1
         with:
           args: zip -qq -r ./builds/FirefoxExtension.zip ./dist
 
       # Create Beta artifacts (Builds with the name changed to beta)
       - name: Create Chrome Beta artifacts
         run: npm run build:chrome -- --env.stream=beta
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: ChromeExtensionBeta
           path: dist
-      - uses: montudor/action-zip@v0.1.0
+      - uses: montudor/action-zip@v1
         with:
           args: zip -qq -r ./builds/ChromeExtensionBeta.zip ./dist
 
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env.stream=beta
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtensionBeta
           path: dist
-      - uses: montudor/action-zip@v0.1.0
+      - uses: montudor/action-zip@v1
         with:
           args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
 

.github/workflows/release.yml

@@ -12,8 +12,8 @@ jobs:
 
     steps:
       # Initialization
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
       - run: npm install
       - name: Copy configuration
         run: cp config.json.example config.json
@@ -21,7 +21,7 @@ jobs:
       # Create Chrome artifacts
       - name: Create Chrome artifacts
         run: npm run build:chrome
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: ChromeExtension
           path: dist
@@ -32,7 +32,7 @@ jobs:
       # Create Firefox artifacts
       - name: Create Firefox artifacts
         run: npm run build:firefox
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtension
           path: dist
@@ -42,7 +42,7 @@ jobs:
       # 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
+      - uses: actions/upload-artifact@v2
         with:
           name: ChromeExtensionBeta
           path: dist
@@ -75,7 +75,7 @@ jobs:
       # Firefox Beta
       - name: Create Firefox Beta artifacts
         run: npm run build:firefox -- --env.stream=beta
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtensionBeta
           path: dist
@@ -92,7 +92,7 @@ jobs:
         run: sudo apt-get install rename
       - name: Rename signed file
         run: cd ./web-ext-artifacts ; rename 's/.*/FirefoxSignedInstaller.xpi/' *
-      - uses: actions/upload-artifact@v1
+      - uses: actions/upload-artifact@v2
         with:
           name: FirefoxExtensionSigned.xpi
           path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi

README.md

@@ -50,13 +50,13 @@ See the [Wiki](https://github.com/ajayyy/SponsorBlock/wiki) for important links.
 
 The backend server code is available here: https://github.com/ajayyy/SponsorBlockServer
 
-To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database ([License](https://github.com/ajayyy/SponsorBlock/wiki/Database-and-API-License)). If you are planning on using the database in another project, please read the [API Docs](https://github.com/ajayyy/SponsorBlock/wiki/API-Docs) page for more information.
+To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database ([License](https://github.com/ajayyy/SponsorBlock/wiki/Database-and-API-License)). If you are planning on using the database in another project, please read the [API Docs](https://wiki.sponsor.ajay.app/index.php/API_Docs) page for more information.
 
 The dataset and API are now being used in some [ports](https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports) as well as a [neural network](https://github.com/andrewzlee/NeuralBlock).
 
 # API
 
-You can read the API docs [here](https://github.com/ajayyy/SponsorBlockServer#api-docs).
+You can read the API docs [here](https://wiki.sponsor.ajay.app/index.php/API_Docs).
 
 # Building
 
@@ -90,7 +90,7 @@ mv ./oss-attribution/attribution.txt ./public/oss-attribution/attribution.txt
 
 # Credit
 
-The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) was previously used, and the server is now using [NewLeaf](https://git.sr.ht/~cadence/NewLeaf) as a to get video info from YouTube.
+The awesome [Invidious API](https://docs.invidious.io/API.md) was previously used, and the server is now using [NewLeaf](https://git.sr.ht/~cadence/NewLeaf) as a to get video info from YouTube.
 
 Originally forked from [YTSponsorSkip](https://github.com/NDevTK/YTSponsorSkip), but very little code remains.
 

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "3.1.2",
+    "version": "3.2",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
+    "@svgdotjs/svg.js": "^3.1.1",
     "@types/react": "^16.9.22",
     "@types/react-dom": "^16.9.5",
     "@types/selenium-webdriver": "^4.0.15",
@@ -13,7 +14,8 @@
     "babel-preset-env": "^1.7.0",
     "concurrently": "^5.1.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "svgdom": "^0.1.8"
   },
   "devDependencies": {
     "@types/chrome": "0.0.91",

public/_locales/bg/messages.json

@@ -656,6 +656,9 @@
         "message": "За да изпратите сегменти с категория „{0}“, трябва да я активирате от опциите. Ще бъдете пренасочени към опциите сега.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Внимание: Само един сегмент от този тип може да е активен. Изпращането на няколко ще доведе до показване на случаен."
+    },
     "youMustSelectACategory": {
         "message": "Трябва да изберете категория за всички сегменти, които изпращате!"
     },

public/_locales/cs/messages.json

@@ -656,6 +656,9 @@
         "message": "Pro odeslání segmentů v kategorii \"{0}\" to nejprve musíte povolit v nastavení. Nyní budete přesměrováni do nastavení.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Varování: tento typ segmentu může být aktivní najednou pouze jeden. Odeslání více segmentů způsobí zobrazení náhodného segmentu."
+    },
     "youMustSelectACategory": {
         "message": "Musíte vybrat kategorii pro všechny odeslané segmenty!"
     },

public/_locales/de/messages.json

@@ -656,6 +656,9 @@
         "message": "Um Segmente aus der Kategorie \"{0}\" zu senden, musst du diese in den Optionen aktivieren. Du wirst jetzt zu den Optionen weitergeleitet.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Achtung: Diese Art von Segment kann nur einmal pro Video aktiv sein. Sollten mehrere eingereicht werden, wird ein zufälliges angezeigt werden."
+    },
     "youMustSelectACategory": {
         "message": "Du musst eine Kategorie für jedes zu übermittelnde Segment auswählen!"
     },
@@ -806,7 +809,7 @@
         "message": "Wo kann ich den Quellcode kriegen?"
     },
     "Credits": {
-        "message": "Credits"
+        "message": "Mitwirkende"
     },
     "highlightNewFeature": {
         "message": "Neu! Gehe mit einem Klick zum Punkt des Videos mit der neuen \"Hervorheben\" Kategorie"

public/_locales/en/messages.json

@@ -305,6 +305,10 @@
     "mute": {
         "message": "Mute"
     },
+    "visual": {
+        "message": "Visual",
+        "description": "This is the name of the option to create visual obstructions on top of the video to hide logos when a skip doesn't work."
+    },
     "skip_category": {
         "message": "Skip {0}?"
     },
@@ -656,6 +660,9 @@
         "message": "To submit segments with the category of \"{0}\", you must enable it in the options. You will be redirected to the options now.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Warning: This type of segment can have a maximum of one active at a time. Submitting multiple will cause a random one to be shown."
+    },
     "youMustSelectACategory": {
         "message": "You must select a category for all segments you are submitting!"
     },

public/_locales/es/messages.json

@@ -656,6 +656,9 @@
         "message": "Para enviar segmentos con la categoría de \"{0}\", debes activarlo en las opciones. Serás redirigido a las opciones ahora.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Advertencia: Solo puede haber uno de este tipo de segmento activo a la vez. Enviar múltiples causará que se muestre uno al azar."
+    },
     "youMustSelectACategory": {
         "message": "¡Debes seleccionar una categoría para todos los segmentos que estés presentando!"
     },

public/_locales/fi/messages.json

@@ -649,6 +649,9 @@
         "message": "Lähettääksesi segmenttejä \"{0}\" kategorialla, sinun täytyy aktivoida se asetuksista. Sinut uudelleenohjataan asetuksiin nyt.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Varoitus: Tämäntyyppisiä segmenttejä voi olla aktiivisena enintään yksi. Usean lähettäminen aiheuttaa sen, että satunnainen segmentti näytetään."
+    },
     "youMustSelectACategory": {
         "message": "Sinun täytyy valita kategoria kaikille segmenteille, joita olet lähettämässä!"
     },

public/_locales/fr/messages.json

@@ -308,6 +308,9 @@
     "skip_category": {
         "message": "Passer {0} ?"
     },
+    "mute_category": {
+        "message": "Mute {0}?"
+    },
     "skip_to_category": {
         "message": "Passer à {0}?",
         "description": "Used for skipping to things (Skip to Highlight)"
@@ -316,6 +319,10 @@
         "message": "{0} ignoré",
         "description": "Example: Sponsor Skipped"
     },
+    "muted": {
+        "message": "{0} mis en sourdine",
+        "description": "Example: Sponsor Muted"
+    },
     "skipped_to_category": {
         "message": "Sauté à {0}",
         "description": "Used for skipping to things (Skipped to Highlight)"

public/_locales/it/messages.json

@@ -4,20 +4,20 @@
         "description": "Name of the extension."
     },
     "Description": {
-        "message": "Salta sponsorizzazioni, implorazioni di iscrizione ai canali e molto altro sui video di YouTube. Segnala gli sponsor sui video che guardi per salvare il tempo ad altri.",
+        "message": "Salta sponsorizzazioni, richieste d'iscrizione ai canali e molto altro sui video di YouTube. Segnala gli sponsor sui video che guardi per salvare il tempo agli altri.",
         "description": "Description of the extension."
     },
     "400": {
         "message": "Richiesta non valida"
     },
     "429": {
-        "message": "Stai inviando troppi spezzoni per questo video, sei sicuro che ce ne siano così tanti?"
+        "message": "Stai inviando troppi segmenti per questo video, sei sicuro che ce ne siano così tanti?"
     },
     "409": {
-        "message": "Questo spezzone è già stato inviato"
+        "message": "Questo è già stato inviato"
     },
     "channelWhitelisted": {
-        "message": "Canale aggiunto alla whitelist!"
+        "message": "Canale aggiunto alla lista delle esclusioni!"
     },
     "Segment": {
         "message": "segmento"
@@ -53,13 +53,13 @@
         "message": "Salta ancora"
     },
     "unmute": {
-        "message": "Riattiva microfono"
+        "message": "Riattiva il microfono"
     },
     "paused": {
         "message": "In pausa"
     },
     "manualPaused": {
-        "message": "Timer Fermato"
+        "message": "Timer fermato"
     },
     "confirmMSG": {
         "message": "\n\nPer modificare o eliminare valori specifici, premi il pulsante delle informazioni o apri il popup cliccando l'icona dell'estensione nell'angolo in alto a destra."
@@ -68,7 +68,7 @@
         "message": "Sei sicuro di volerlo cancellare?\n\n"
     },
     "Unknown": {
-        "message": "Si è verificato un errore durante l'invio dello spezzone sponsorizzato, per favore riprova più tardi."
+        "message": "Si è verificato un errore durante l'invio del segmento, per favore riprova più tardi."
     },
     "sponsorFound": {
         "message": "Questo video ha dei segmenti nel database!"
@@ -77,10 +77,10 @@
         "message": "Nessun segmento trovato"
     },
     "sponsorStart": {
-        "message": "Il Segmento Inizia Ora"
+        "message": "Il segmento inizia qui"
     },
     "sponsorEnd": {
-        "message": "Il Segmento Termina Ora"
+        "message": "Il segmento finisce ora"
     },
     "sponsorCancel": {
         "message": "Annulla Creazione del Segmento"
@@ -92,7 +92,7 @@
         "message": "Ricarica i segmenti"
     },
     "success": {
-        "message": "Successo!"
+        "message": "Ha funzionato!"
     },
     "voted": {
         "message": "Votato!"
@@ -104,16 +104,16 @@
         "message": "Si è verificato un errore durante la connessione. Codice errore: "
     },
     "clearTimes": {
-        "message": "Pulisci Segmenti"
+        "message": "Rimuovi i segmenti"
     },
     "openPopup": {
-        "message": "Apri il Popup di SponsorBlock"
+        "message": "Apri il popup di SponsorBlock"
     },
     "closePopup": {
         "message": "Chiudi il popup"
     },
     "SubmitTimes": {
-        "message": "Invia Segmenti"
+        "message": "Invia i segmenti"
     },
     "submitCheck": {
         "message": "Sei sicuro di volerlo inviare?"
@@ -125,7 +125,7 @@
         "message": "Rimuovi il canale dalle eccezioni"
     },
     "voteOnTime": {
-        "message": "Vota un Segmento"
+        "message": "Vota un segmento"
     },
     "Submissions": {
         "message": "Contributi"
@@ -147,19 +147,19 @@
         "message": "Suggerimento: puoi configurare dei comandi rapidi nelle opzioni"
     },
     "clearTimesButton": {
-        "message": "Cancella Minutaggi"
+        "message": "Cancella minutaggio"
     },
     "submitTimesButton": {
-        "message": "Invia Minutaggi"
+        "message": "Invia minutaggio"
     },
     "publicStats": {
-        "message": "Viene utilizzato nelle pagine delle statistiche pubbliche che mostrano quanto hai contribuito. Vedi"
+        "message": "Questo è usato nelle pagine pubbliche delle statistiche per mostrare quanto hai contribuito. Vedilo"
     },
     "Username": {
         "message": "Nome utente"
     },
     "setUsername": {
-        "message": "Imposta Username"
+        "message": "Imposta nome utente"
     },
     "copyPublicID": {
         "message": "Copia UserID Pubblico"
@@ -174,19 +174,19 @@
         "message": "Opzioni"
     },
     "showButtons": {
-        "message": "Mostra i Pulsanti nel Lettore di YouTube"
+        "message": "Mostra i pulsanti sul video"
     },
     "hideButtons": {
-        "message": "Nascondi i Pulsanti nel Lettore di YouTube"
+        "message": "Nascondi i pulsanti sul video"
     },
     "hideButtonsDescription": {
-        "message": "Nasconde i pulsanti che appaiono nel lettore di YouTube per inviare spezzoni sponsorizzati. Capisco che può essere fastidioso per alcune\n persone. Invece di utilizzare quei pulsanti, è possibile utilizzare questo popup per inviare gli spezzoni sponsorizzati. Per nascondere l'avviso che appare, \nusa il bottone \"Non mostrare più\" nell'avviso. Potrai sempre abilitare nuovamente queste impostazioni in futuro."
+        "message": "Nasconde i pulsanti che appaiono sul video per inviare i segmenti da nascondere."
     },
     "showInfoButton": {
-        "message": "Mostra il Pulsante Informazioni nel Lettore di YouTube"
+        "message": "Mostra il pulsante delle informazioni sopra al video"
     },
     "hideInfoButton": {
-        "message": "Nascondi il Pulsante Informazioni nel Lettore di YouTube"
+        "message": "Nascondi il pulsante d'informazioni sopra al video"
     },
     "whatInfoButton": {
         "message": "Questo è il pulsante che apre un popup nella pagina YouTube."
@@ -195,19 +195,19 @@
         "message": "Nascondi in automatico il Pulsante di Informazioni"
     },
     "hideDeleteButton": {
-        "message": "Nascondi il Pulsante Elimina nel Lettore di YouTube"
+        "message": "Nascondi il pulsante elimina"
     },
     "showDeleteButton": {
-        "message": "Mostra il Pulsante Elimina nel Lettore di YouTube"
+        "message": "Mostra il pulsante elimina"
     },
     "whatDeleteButton": {
-        "message": "Questo è il pulsante che ti permette di cancellare tutti gli spezzoni sponsorizzati nel lettore di YouTube."
+        "message": "Questo è il pulsante che ti permette di cancellare tutti i segmenti non inviati del video attuale."
     },
     "enableViewTracking": {
-        "message": "Attiva Monitoraggio Salti"
+        "message": "Attiva il conteggio dei salti"
     },
     "whatViewTracking": {
-        "message": "Questa funzionalità tiene traccia dei segmenti che hai saltato, per far sapere agli utenti quanto il loro contributo abbia aiutato gli altri e sia stato utilizzato come metrica insieme ai voti positivi, per garantire che lo spam non entri nel database. L'estensione invierà un messaggio al server ogni volta che salterai un segmento. Si spera che la maggior parte delle persone non modifichino questa impostazione, in modo da non intaccare l'accuratezza dei numeri di visualizzazione. :)"
+        "message": "Questa funzionalità tiene traccia dei segmenti che hai saltato per far sapere agli utenti quanto il loro contributo abbia aiutato gli altri e anche come statistica, insieme ai voti positivi, per garantire che lo spam non entri nel database. L'estensione invierà un messaggio al server ogni volta che salterai un segmento. Si spera che la maggior parte delle persone non modifichino questa impostazione, in modo da non intaccare l'accuratezza dei numeri di visualizzazione. :)"
     },
     "enableViewTrackingInPrivate": {
         "message": "Abilita il conteggio dei salti nelle schede private/anonime"
@@ -219,13 +219,13 @@
         "message": "Invece di richiedere i segmenti dal server utilizzando l'ID del video, viene inviato un hash dei primi 4 caratteri dell'ID. Questo server invierà i dati per tutti i video con hash simili."
     },
     "enableRefetchWhenNotFound": {
-        "message": "Ricarica I Segmenti Su Nuovi Video"
+        "message": "Ricarica i segmenti su nuovi video"
     },
     "whatRefetchWhenNotFound": {
         "message": "Se il video è nuovo, e non risultano esserci segmenti, continueremo a cercarne di nuovi ogni pochi minuti."
     },
     "showNotice": {
-        "message": "Mostra di Nuovo l'Avviso"
+        "message": "Mostra di nuovo l'avviso"
     },
     "showSkipNotice": {
         "message": "Mostra Avviso Dopo Aver Saltato un Segmento"
@@ -246,15 +246,15 @@
         "message": "Tutti i Salta Avvisi Offuscati"
     },
     "longDescription": {
-        "message": "SponsorBlock ti consente di saltare sponsorizzazioni, introduzioni, conclusioni, promemoria di iscrizione e altre componenti fastidiose dei video su YouTube. SponsorBlock è un'estensione per browser in crowdsourcing, che consente a chiunque di inviare l'ora di inizio e di fine dei segmenti sponsorizzati e altri segmenti video su YouTube. Quando una persona invia queste informazioni, chiunque altro in possesso di questa estensione sarà in grado di saltare direttamente il segmento sponsorizzato. È possibile saltare anche le sezioni non musicali dei video musicali.",
+        "message": "SponsorBlock ti consente di saltare sponsorizzazioni, introduzioni, conclusioni, promemoria di iscrizione e altri elementi fastidiosi dai video YouTube. SponsorBlock è un'estensione per browser di crowdsourcing, cioè che consente a chiunque di inviare l'ora di inizio e di fine dei segmenti sponsorizzati e di altro tipo. Quando una persona invia queste informazioni, chiunque altro in possesso di questa estensione sarà in grado di saltare automaticamente il segmento sponsorizzato. È possibile saltare anche le sezioni non musicali dei video musicali.",
         "description": "Full description of the extension on the store pages."
     },
     "website": {
-        "message": "Sito Web",
+        "message": "Sito web",
         "description": "Used on Firefox Store Page"
     },
     "sourceCode": {
-        "message": "Codice Sorgente",
+        "message": "Codice sorgente",
         "description": "Used on Firefox Store Page"
     },
     "noticeUpdate": {
@@ -278,7 +278,7 @@
         "message": "Seleziona un tasto premendolo sulla tastiera"
     },
     "keybindDescriptionComplete": {
-        "message": "L'associazione di tasti è stata impostata a: "
+        "message": "Il comando rapido è stato impostato come: "
     },
     "0": {
         "message": "Timeout della connessione. Controlla la tua connessione a Internet. Se internet sta funzionando, il server è probabilmente sovraccarico oppure giù."
@@ -320,7 +320,7 @@
         "description": "Example: Sponsor Skipped"
     },
     "muted": {
-        "message": "{0} Silenziato",
+        "message": "{0} silenziato",
         "description": "Example: Sponsor Muted"
     },
     "skipped_to_category": {
@@ -615,7 +615,7 @@
         "message": "Salta automaticamente tutti i segmenti quando c'è un segmento non musicale"
     },
     "muteSegments": {
-        "message": "Consenti i segmenti che silenziano l'audio invece di saltare"
+        "message": "Silenzia i segmenti invece di saltarli, quando possibile"
     },
     "colorFormatIncorrect": {
         "message": "Il tuo colore è formattato in modo errato. Dovrebbe essere un codice esadecimale a 3 o 6 cifre con un segno numerico iniziale."
@@ -656,6 +656,9 @@
         "message": "Per inviare segmenti della categoria \"{0}\", è necessario abilitarlo nelle opzioni. Sarai reindirizzato alle opzioni.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Attenzione: questo tipo di segmento può essere presente una sola volta. Inviarne più di uno causerà la visualizzazione casuale di uno solo."
+    },
     "youMustSelectACategory": {
         "message": "Devi selezionare una categoria per tutti i segmenti che stai inviando!"
     },
@@ -739,7 +742,7 @@
         "message": "Nascondi per sempre"
     },
     "warningChatInfo": {
-        "message": "Hai ricevuto un ammonimento and non puoi inviare segmenti temporaneamente. Ciò significa che abbiamo notato che stavi commettendo alcuni errori comuni senza scopo malevolo, e vogliamo che tu ricontrollassi le regole. Puoi anche partecipare a questa chat su discord.gg/SponsorBlock o matrix.to/#/#sponsor:ajay.app"
+        "message": "Hai ricevuto un avvertimento e non puoi temporaneamente inviare i segmenti. Questo significa che abbiamo notato che stavi commettendo alcuni errori comuni non malevoli, e vogliamo solo chiarire le regole. Puoi anche unirti a questa chat usando discord.gg/SponsorBlock o matrix.to/#/#sponsor:ajay.app"
     },
     "voteRejectedWarning": {
         "message": "Voto rifiutato a causa di un ammonimento. Clicca per aprire una chat per risolverlo, oppure torna dopo quando hai tempo.",

public/_locales/ko/messages.json

@@ -615,7 +615,7 @@
         "message": "음악이 아닌 구간이 있을 때는 모든 구간 자동 건너뛰기"
     },
     "muteSegments": {
-        "message": "구간을 건너뛰지 않고 음소거 처리하도록 합니다"
+        "message": "구간을 건너뛰지 않고 음소거 처리"
     },
     "colorFormatIncorrect": {
         "message": "올바르지 않은 색상 코드입니다. 색상 코드는 샵 (#) 기호로 시작하여 3자리 또는 6자리의 16진수로 구성되어야 합니다."
@@ -656,6 +656,9 @@
         "message": "\"{0}\" 카테고리의 세그먼트를 제출하려면 설정에서 활성화 해주셔야 합니다. 지금 설정으로 이동합니다.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "경고: 이 유형의 세그먼트는 한 번에 최대 하나씩 활성화될 수 있습니다. 여러 개를 제출하면 무작위로 표시됩니다."
+    },
     "youMustSelectACategory": {
         "message": "제출 해야하는 모든 구간의 카테고리를 설정해야합니다!"
     },

public/_locales/nl/messages.json

@@ -656,6 +656,9 @@
         "message": "Om segmenten met de categorie \"{0}\" in te dienen, moet u deze in de opties inschakelen. U wordt nu doorgestuurd naar de opties.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Waarschuwing: dit type segment kan maximaal één keer tegelijk actief zijn. Meerdere segmenten indienen zal weergave van een willekeurig segment veroorzaken."
+    },
     "youMustSelectACategory": {
         "message": "U moet een categorie selecteren voor alle segmenten die u indient!"
     },

public/_locales/pl/messages.json

@@ -230,9 +230,21 @@
     "showSkipNotice": {
         "message": "Pokaż informację po pominięciu segmentu"
     },
+    "noticeVisibilityMode0": {
+        "message": "Duże powiadomienia o przewinięciu"
+    },
     "noticeVisibilityMode1": {
         "message": "Małe powiadomienia o automatycznym przewijaniu"
     },
+    "noticeVisibilityMode2": {
+        "message": "Małe powiadomienia o przewinięciu"
+    },
+    "noticeVisibilityMode3": {
+        "message": "Znikające powiadomienia o automatycznym przewijaniu"
+    },
+    "noticeVisibilityMode4": {
+        "message": "Znikające powiadomienia o przewijaniu"
+    },
     "longDescription": {
         "message": "SponsorBlock pozwala pomijać sponsorów, intra, outra, przypomnienia o subskrypcjach i inne irytujące fragmenty filmów na YouTube. SponsorBlock jest opartym na crowdsourcingu rozszerzeniem do przeglądarki, które pozwala każdemu zgłosić początek i koniec segmentów sponsorowanych oraz innych segmentów w filmach na YouTube. Kiedy ktoś już zamieści te informacje, wszyscy pozostali z tym rozszerzeniem będą pomijać segment sponsorowany. Możesz również pomijać fragmenty teledysków bez muzyki.",
         "description": "Full description of the extension on the store pages."
@@ -296,6 +308,9 @@
     "skip_category": {
         "message": "Pominąć {0}?"
     },
+    "mute_category": {
+        "message": "Wyciszyć {0}?"
+    },
     "skip_to_category": {
         "message": "Przejść do {0}?",
         "description": "Used for skipping to things (Skip to Highlight)"
@@ -304,6 +319,10 @@
         "message": "Pominięto {0}",
         "description": "Example: Sponsor Skipped"
     },
+    "muted": {
+        "message": "Wyciszono {0}",
+        "description": "Example: Sponsor Muted"
+    },
     "skipped_to_category": {
         "message": "Przewinięto do {0}",
         "description": "Used for skipping to things (Skipped to Highlight)"
@@ -356,6 +375,9 @@
     "changeUserID": {
         "message": "Importuj/Eksportuj swój identyfikator użytkownika"
     },
+    "whatChangeUserID": {
+        "message": "Powinno pozostać prywatne. Jest to niczym hasło i nie powinno być nikomu udostępniane. Przy jego użyciu może się pod ciebie podszywać. Jeśli szukasz publicznego ID użytkownika, kliknij ikonę schowka w wyskakującym oknie."
+    },
     "setUserID": {
         "message": "Ustaw identyfikator użytkownika"
     },
@@ -557,7 +579,10 @@
         "message": "Bez muzyki"
     },
     "category_poi_highlight": {
-        "message": "Podświetlone"
+        "message": "Wyróżnione"
+    },
+    "category_poi_highlight_description": {
+        "message": "Część filmu, która interesuje większość osób. Podobne do komentarzy typu „Filmik zaczyna się od x”."
     },
     "category_livestream_messages": {
         "message": "Transmisja live: Dotacja/Czytanie wiadomości"
@@ -583,9 +608,15 @@
     "manualSkip_POI": {
         "message": "Zapytaj, gdy wideo się załaduje"
     },
+    "showOverlay_POI": {
+        "message": "Pokaż na pasku"
+    },
     "autoSkipOnMusicVideos": {
         "message": "Automatycznie pomiń wszystkie segmenty, gdy istnieje segment niemuzyczny"
     },
+    "muteSegments": {
+        "message": "Zezwalaj na segmenty, które wyciszą dźwięk zamiast pomijać"
+    },
     "colorFormatIncorrect": {
         "message": "Nieprawidłowy format koloru. Powinien to być zapis szesnastkowy (heksadecymalny) składający się z 3 lub 6 znaków poprzedzonych kratką (#)."
     },
@@ -625,6 +656,9 @@
         "message": "Aby przesyłać segmenty o kategorii „{0}”, musisz ją włączyć w opcjach. Za chwilę nastąpi przekierowanie do ustawień.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Ostrzeżenie: Ten typ segmentu, może być maksymalnie jeden. Przesyłanie kilku na raz spowoduje, że pojawi się losowy."
+    },
     "youMustSelectACategory": {
         "message": "Musisz wybrać kategorię dla każdego segmentu, który zamieszczasz!"
     },
@@ -714,33 +748,72 @@
         "message": "Głosowanie odrzucone z powodu ostrzeżenia. Kliknij, aby otworzyć czat w celu rozwiązania problemu lub wróć później, gdy będziesz miał czas.",
         "description": "This is an integrated chat panel that will appearing allowing them to talk to the Discord/Matrix chat without leaving their browser."
     },
+    "Donate": {
+        "message": "Dotacje"
+    },
+    "hideDonationLink": {
+        "message": "Ukryj opcję dotacji"
+    },
     "helpPageThanksForInstalling": {
         "message": "Dziękujemy za zainstalowanie SponsorBlock."
     },
+    "helpPageReviewOptions": {
+        "message": "Przejrzyj poniższe opcje"
+    },
     "helpPageFeatureDisclaimer": {
         "message": "Wiele funkcji jest domyślnie wyłączonych. Jeśli chcesz pomijać intra, outra, używać Invidious, itp., włącz je poniżej. Możesz również ukryć/pokazać elementy interfejsu użytkownika."
     },
     "helpPageHowSkippingWorks": {
         "message": "Jak działa pomijanie"
     },
+    "helpPageHowSkippingWorks1": {
+        "message": "Segmenty filmu zostaną automatycznie pominięte, jeśli znajdują się w bazie danych. Możesz kliknąć na ikonę rozszerzenia, aby podejrzeć, czym one są."
+    },
+    "helpPageHowSkippingWorks2": {
+        "message": "Za każdym razem, gdy pominiesz segment, otrzymasz powiadomienie. Jeśli moment nie wydaje się być poprawny, kliknij łapkę w dół! Możesz również głosować w okienku pop-up."
+    },
     "Submitting": {
         "message": "Wysyłanie"
     },
     "helpPageSubmitting1": {
         "message": "Wysyłanie może być wykonane w wyskakującym okienku, poprzez kliknięcie przycisku \"Początek segmentu\" lub za pomocą przycisków na odtwarzaczu wideo."
     },
+    "helpPageSubmitting2": {
+        "message": "Kliknięcie przycisku odtwarzania wskazuje początek segmentu a kliknięcie ikony stop wskazuje koniec segmentu. Możesz przygotować wielu segmentów przed wysłaniem. Aby wysłać kliknij przycisk potwierdzający, a aby usunąć - na śmietnik."
+    },
     "Editing": {
         "message": "Edytowanie"
     },
+    "helpPageEditing1": {
+        "message": "Jeśli się pomyliłeś, możesz edytować i usuwać swoje segmenty poprzez kliknięcie przycisku ze strzałką w górę."
+    },
+    "helpPageTooSlow": {
+        "message": "Zbyt wolno"
+    },
+    "helpPageTooSlow1": {
+        "message": "Istnieją skróty klawiszowe, jeśli chcesz ich używać. Naciśnij klawisz średnika, aby wskazać początek/koniec segmentu sponsora i kliknij w apostrof, aby przesłać. Można je zmienić w opcjach. Jeśli nie używasz QWERTY, prawdopodobnie powinieneś zmienić skrót klawiszowy."
+    },
+    "helpPageCopyOfDatabase": {
+        "message": "Czy mogę otrzymać kopię bazy danych? Co się stanie, jeśli przestaniecie istnieć?"
+    },
     "helpPageCopyOfDatabase1": {
         "message": "Baza danych jest publiczna i dostępna na stronie"
     },
+    "helpPageCopyOfDatabase2": {
+        "message": "Kod źródłowy jest dostępny. Tak więc, nawet jeśli coś się ze mną stanie, wasze zgłoszenia nie zostaną utracone."
+    },
+    "helpPageNews": {
+        "message": "Wiadomości i jak to jest zrobione"
+    },
     "helpPageSourceCode": {
         "message": "Gdzie mogę otrzymać kod źródłowy?"
     },
     "Credits": {
         "message": "Autorzy"
     },
+    "highlightNewFeature": {
+        "message": "Nowość! Przejdź do interesującej części filmu jednym kliknięciem z nową kategorią wyróżnione"
+    },
     "LearnMore": {
         "message": "Dowiedz się więcej"
     }

public/_locales/pt_BR/messages.json

@@ -53,7 +53,7 @@
         "message": "Pular novamente"
     },
     "unmute": {
-        "message": "Desmutar"
+        "message": "Ativar som"
     },
     "paused": {
         "message": "Pausado"
@@ -303,13 +303,13 @@
         "message": "Pular"
     },
     "mute": {
-        "message": "Mutar"
+        "message": "Silenciar"
     },
     "skip_category": {
         "message": "Pular {0}?"
     },
     "mute_category": {
-        "message": "Mutar {0}?"
+        "message": "Silenciar {0}?"
     },
     "skip_to_category": {
         "message": "Pular para {0}?",
@@ -320,7 +320,7 @@
         "description": "Example: Sponsor Skipped"
     },
     "muted": {
-        "message": "{0} Mutado",
+        "message": "{0} Silenciado",
         "description": "Example: Sponsor Muted"
     },
     "skipped_to_category": {
@@ -615,7 +615,7 @@
         "message": "Pular automaticamente todos os segmentos quando há um segmento que não é música"
     },
     "muteSegments": {
-        "message": "Permitir segmentos que mutam áudio ao invés de pular"
+        "message": "Permitir segmentos que silenciem o áudio ao invés de pular"
     },
     "colorFormatIncorrect": {
         "message": "Sua cor está formatada incorretamente. Deve ser um código hexadecimal de 3 ou 6 dígitos com uma cerquilha (hashtag) no início."

public/_locales/ru/messages.json

@@ -656,6 +656,9 @@
         "message": "Чтобы отправить сегменты категории \"{0}\", вы должны включить её в настройках. Сейчас вы будете туда перенаправлены.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Предупреждение: Только один сегмент данного типа может быть активным. Отправка нескольких приведёт к отображению только одного случайно выбранного."
+    },
     "youMustSelectACategory": {
         "message": "Вы должны выбрать категорию для всех сегментов, которые вы отправляете!"
     },

public/_locales/sk/messages.json

@@ -641,6 +641,9 @@
         "message": "Pre odoslanie segmentov z kategórie \"{0}\" ju musíte zapnúť v nastaveniach. Teraz tam budete presmerovaní.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Varovanie: Tento typ segmentu môže byť aktívny len jeden. Odoslanie viacerých spôsobí zobrazenie náhodného z nich."
+    },
     "youMustSelectACategory": {
         "message": "Musíte zvoliť kategóriu pre každý segment!"
     },

public/_locales/sr/messages.json

@@ -1 +1,30 @@
-{}
+{
+    "Options": {
+        "message": "Подешавања"
+    },
+    "sourceCode": {
+        "message": "Изворни код",
+        "description": "Used on Firefox Store Page"
+    },
+    "errorCode": {
+        "message": "Код грешке: "
+    },
+    "skip": {
+        "message": "Прескочи"
+    },
+    "add": {
+        "message": "Додај"
+    },
+    "save": {
+        "message": "Сачувај"
+    },
+    "cancel": {
+        "message": "Откажи"
+    },
+    "edit": {
+        "message": "Измени"
+    },
+    "help": {
+        "message": "Помоћ"
+    }
+}

public/_locales/sv/messages.json

@@ -656,6 +656,9 @@
         "message": "För att skicka segment med kategorin \"{0}\" måste du först aktivera det i alternativen. Du kommer nu att bli omdirigerad till alternativen.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Varning: Denna typ av segment kan endast ha ett segment aktivt åt gången. Skickas flera segment kommer en av dem att visas slumpmässigt."
+    },
     "youMustSelectACategory": {
         "message": "Du måste välja en kategori för alla segment du skickar in!"
     },

public/_locales/uk/messages.json

@@ -309,7 +309,7 @@
         "message": "Пропустити {0}?"
     },
     "mute_category": {
-        "message": "Заглушити {0}?"
+        "message": "Вимкнути звук {0}?"
     },
     "skip_to_category": {
         "message": "Пропустить до {0}?",
@@ -320,7 +320,7 @@
         "description": "Example: Sponsor Skipped"
     },
     "muted": {
-        "message": "{0} Заглушений",
+        "message": "{0} Вимкнений звук",
         "description": "Example: Sponsor Muted"
     },
     "skipped_to_category": {
@@ -579,7 +579,7 @@
         "message": "Без музики"
     },
     "category_poi_highlight": {
-        "message": "Основные"
+        "message": "Основне"
     },
     "category_poi_highlight_description": {
         "message": "Часть видео, которую ищут большинство людей. Аналогично комментарию «Видео начинается с X:XX»."
@@ -656,6 +656,9 @@
         "message": "Щоб надіслати сегменти категорії \"{0}\", ви повинні включити її в налаштуваннях. Зараз ви будете туди перенаправлені.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Увага: Сегменти даного типу можуть бути активними лише по одному. Надсилання декількох призведе до відображення випадкового сегмента."
+    },
     "youMustSelectACategory": {
         "message": "Ви повинні обрати категорію для всіх сегментів, які ви відправляєте!"
     },

public/_locales/vi/messages.json

@@ -52,6 +52,9 @@
     "reskip": {
         "message": "Bỏ qua lại"
     },
+    "unmute": {
+        "message": "Bật tiếng"
+    },
     "paused": {
         "message": "Tạm dừng"
     },
@@ -299,6 +302,9 @@
     "skip": {
         "message": "Bỏ qua"
     },
+    "mute": {
+        "message": "Ngắt tiếng"
+    },
     "skip_category": {
         "message": "Bỏ qua {0}?"
     },
@@ -350,6 +356,9 @@
     "changeUserID": {
         "message": "Nhập/Xuất mã người dùng của bạn"
     },
+    "whatChangeUserID": {
+        "message": "Đây là mã cần được giữ bí mật. Nó giống như mật khẩu và không nên được chia sẻ cho bất kì ai khác. Nếu có ai đó lấy được mã này, họ có thể mạo danh bạn. Còn nếu như bạn đang tìm khoá ID công khai, hãy nhấn vào nút \"Sao chép Public ID\" trong popup của SponsorBlock."
+    },
     "setUserID": {
         "message": "Đặt mã người dùng"
     },
@@ -550,6 +559,12 @@
     "category_music_offtopic_short": {
         "message": "Không có nhạc"
     },
+    "category_poi_highlight": {
+        "message": "Điểm/Khoảnh khắc quan trọng"
+    },
+    "category_poi_highlight_description": {
+        "message": "Phần của video mà hầu hết mọi người đang tìm kiếm. Tương tự với câu nói \"Video bắt đầu từ x\"."
+    },
     "category_livestream_messages": {
         "message": "Luồng phát trực tiếp: Đọc Quyên góp/Tin nhắn"
     },
@@ -568,9 +583,21 @@
     "disable": {
         "message": "Tắt"
     },
+    "autoSkip_POI": {
+        "message": "Tự động bỏ qua"
+    },
+    "manualSkip_POI": {
+        "message": "Hỏi khi video bắt đầu"
+    },
+    "showOverlay_POI": {
+        "message": "Hiện ở thanh xem trước"
+    },
     "autoSkipOnMusicVideos": {
         "message": "Tự động bỏ qua tất cả các phân đoạn nếu trong video có phân đoạn không phải nhạc"
     },
+    "muteSegments": {
+        "message": "Cho phép các phân đoạn bị tắt tiếng hay vì bỏ qua"
+    },
     "colorFormatIncorrect": {
         "message": "Mã màu sai định dạng. Mã màu phải có 3 hoặc 6 ký tự hệ hex và có dấu thăng ở đầu."
     },
@@ -610,6 +637,9 @@
         "message": "Để gửi một phân đoạn với chủ đề \"{0}\", bạn cần phải kích hoạt nó trong phần tuỳ chọn. Bạn sẽ được đưa đến phần tuỳ chỉnh bây giờ.",
         "description": "Used when submitting segments to only let them select a certain category if they have it enabled in the options."
     },
+    "poiOnlyOneSegment": {
+        "message": "Cảnh báo: Loại phân đoạn này nếu hiển thị CHỈ CÓ 1 PHÂN ĐOẠN được xuất hiện trong video. Nếu bạn gửi lên, khi đó, phân đoạn xuất hiện duy nhất sẽ được lựa chọn ngẫu nhiên."
+    },
     "youMustSelectACategory": {
         "message": "Bạn phải lựa chọn một danh mục cho tất cả phân đoạn bạn đang muốn đăng tải!"
     },
@@ -681,6 +711,10 @@
     "help": {
         "message": "Trợ giúp"
     },
+    "GotIt": {
+        "message": "Đã hiểu",
+        "description": "Used as the button to dismiss a tooltip"
+    },
     "experiementOptOut": {
         "message": "Từ chối tham gia thử nghiệm trong tương lai",
         "description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."
@@ -707,6 +741,18 @@
     "helpPageReviewOptions": {
         "message": "Xin hãy xem xét các tuỳ chọn bên dưới"
     },
+    "helpPageFeatureDisclaimer": {
+        "message": "Nhiều tính năng sẽ bị tắt theo mặc định. Nếu bạn muốn bỏ qua phần intro, sử dụng trên các trang web bên thứ 3 như Invidious, v. v...., bạn có thể bật nó ở bên dưới. Bạn cũng có thể cho hiện/ẩn UI người dùng."
+    },
+    "helpPageHowSkippingWorks": {
+        "message": "Việc bỏ qua 1 đoạn trong video được thực hiện thế nào?"
+    },
+    "helpPageHowSkippingWorks1": {
+        "message": "Các phân đoạn trong video sẽ tự động bị bỏ qua nếu chúng được tìm thấy trong cơ sở dữ liệu của chúng tôi. Bạn có thể mở cửa sổ xem trước các phân đoạn ấy bằng cách nhấp vào biểu tượng tiện ích mở rộng."
+    },
+    "helpPageHowSkippingWorks2": {
+        "message": "Bất cứ khi nào bỏ qua một phân đoạn, bạn sẽ nhận được 1 cửa sổ thông báo bât. Nếu phân đoạn có vẻ sai, hãy bỏ phiếu bằng cách nhấp vào nút downvote! Bạn cũng có thể bỏ phiếu trong cửa sổ bật lên khi nhấn vào biểu tượng tiện ích mở rộng. Và bạn có thể tắt việc hiển thị bảng thông báo này trong phần cài đặt tiện ích."
+    },
     "helpPageTooSlow": {
         "message": "Quá chậm"
     }

public/_locales/zh_TW/messages.json

@@ -52,6 +52,9 @@
     "reskip": {
         "message": "繼續跳過"
     },
+    "unmute": {
+        "message": "解除靜音"
+    },
     "paused": {
         "message": "已暫停"
     },
@@ -529,6 +532,9 @@
     "category_music_offtopic_short": {
         "message": "非音樂"
     },
+    "category_poi_highlight": {
+        "message": "重點"
+    },
     "category_livestream_messages": {
         "message": "直播：捐贈/訊息閱讀"
     },
@@ -660,11 +666,18 @@
     "help": {
         "message": "說明"
     },
+    "GotIt": {
+        "message": "知道了",
+        "description": "Used as the button to dismiss a tooltip"
+    },
     "experiementOptOut": {
         "message": "關閉所有未來的實驗性功能",
         "description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."
     },
     "hideForever": {
         "message": "永久隱藏"
+    },
+    "Credits": {
+        "message": "致謝"
     }
 }

public/popup.css

@@ -275,6 +275,10 @@ background-color:#ec1c1c;
   cursor: pointer;
 }
 
+button#setUsernameButton {
+	flex: 0 1;
+}
+
 #submitUsername {
   padding-left: 5pt;
 }
@@ -285,6 +289,7 @@ background-color:#ec1c1c;
 
 #usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
   font-size: 16px;
+  flex: 1 0;
 }
 
 .SBWhitelistIcon {
@@ -343,6 +348,7 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
 
 #copyUserID {
   width: 100%;
+  flex: 0 1;
 }
 
 #setUsernameContainer {

src/components/SponsorTimeEditComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, ActionTypes, Category, CategoryActionType, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, CategoryActionType, ContentContainer, SponsorTime } from "../types";
 import Utils from "../utils";
 import { getCategoryActionType } from "../utils/categoryUtils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
@@ -279,6 +279,11 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         if (getCategoryActionType(event.target.value as Category) === CategoryActionType.POI) {
             this.setTimeTo(1, null);
             this.props.contentContainer().updateEditButtonsOnPlayer();
+
+            if (this.props.contentContainer().sponsorTimesSubmitting
+                    .some((segment, i) => segment.category === event.target.value && i !== this.props.index)) {
+                alert(chrome.i18n.getMessage("poiOnlyOneSegment"));
+            }
         }
         
         this.saveEditTimes();
@@ -375,7 +380,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         const skipTime = sponsorTimes[index].segment[0];
 
-        this.props.contentContainer().previewTime(skipTime - 2);
+        this.props.contentContainer().previewTime(skipTime - (2 * this.props.contentContainer().v.playbackRate));
     }
 
     inspectTime(): void {

src/components/VisualSegmentEditComponent.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import Config from "../config";
+import { ContentContainer, VisualSegmentInfo } from "../types";
+import Utils from "../utils";
+
+
+const utils = new Utils();
+
+export interface VisualSegmentEditProps {
+    index: number,
+
+    visual: VisualSegmentInfo,
+
+    idSuffix: string,
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer,
+}
+
+export interface VisualSegmentEditState {
+
+}
+
+class VisualSegmentEditComponent extends React.Component<VisualSegmentEditProps, VisualSegmentEditState> {
+
+    idSuffix: string;
+
+    configUpdateListener: () => void;
+
+    constructor(props: VisualSegmentEditProps) {
+        super(props);
+
+        this.idSuffix = this.props.idSuffix;
+
+        this.state = {
+        };
+    }
+
+    componentDidMount(): void {
+        // Add as a config listener
+        if (!this.configUpdateListener) {
+            this.configUpdateListener = () => this.configUpdate();
+            Config.configListeners.push(this.configUpdate.bind(this));
+        }
+    }
+
+    componentWillUnmount(): void {
+        if (this.configUpdateListener) {
+            Config.configListeners.splice(Config.configListeners.indexOf(this.configUpdate.bind(this)), 1);
+        }
+    }
+
+    render(): React.ReactElement {
+        return <>
+            <span id={`time${this.props.idSuffix}`}>
+                {utils.getFormattedTime(this.props.visual.time, true)}
+            </span>
+
+            <span>
+                -
+            </span>
+
+            {this.getBoundsElement()}
+
+            <span>
+                -
+            </span>
+
+            <input
+                type="checkBox"
+                onChange={(event) => this.colorUpdated(event)}
+                value={this.props.visual.color} 
+            />
+
+            <span>
+                Smooth
+            </span>
+
+            <span>
+                -
+            </span>
+
+            <input
+                className="categoryColorTextBox"
+                type="color"
+                onChange={(event) => this.colorUpdated(event)}
+                value={this.props.visual.color} 
+            />
+
+
+        </>
+    }
+
+    getBoundsElement(): React.ReactElement[] {
+        const elements: React.ReactElement[] = [];
+
+        for (const bound of this.props.visual.bounds) {
+            elements.push(
+                <span>
+                    {`${bound[0] * 100}% x ${bound[0] * 100}%, `}
+                </span>
+            );
+        }
+
+        return elements;
+    }
+
+    colorUpdated(event: React.ChangeEvent<HTMLInputElement>): void {
+        this.props.visual.color = event.target.value;
+    }
+
+    configUpdate(): void {
+        this.forceUpdate();
+    }
+}
+
+export default VisualSegmentEditComponent;

src/content.ts

@@ -965,16 +965,16 @@ async function whitelistCheck() {
 function getNextSkipIndex(currentTime: number, includeIntersectingSegments: boolean, includeNonIntersectingSegments: boolean): 
         {array: ScheduledTime[], index: number, endIndex: number, openNotice: boolean} {
 
-    const { includedTimes: submittedArray, startTimeIndexes: sponsorStartTimes } = 
+    const { includedTimes: submittedArray, scheduledTimes: sponsorStartTimes } = 
         getStartTimes(sponsorTimes, includeIntersectingSegments, includeNonIntersectingSegments);
-    const { startTimeIndexes: sponsorStartTimesAfterCurrentTime } = getStartTimes(sponsorTimes, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, true, true);
+    const { scheduledTimes: sponsorStartTimesAfterCurrentTime } = getStartTimes(sponsorTimes, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, true, true);
 
     const minSponsorTimeIndex = sponsorStartTimes.indexOf(Math.min(...sponsorStartTimesAfterCurrentTime));
     const endTimeIndex = getLatestEndTimeIndex(submittedArray, minSponsorTimeIndex);
 
-    const { includedTimes: unsubmittedArray, startTimeIndexes: unsubmittedSponsorStartTimes } = 
+    const { includedTimes: unsubmittedArray, scheduledTimes: unsubmittedSponsorStartTimes } = 
         getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments);
-    const { startTimeIndexes: unsubmittedSponsorStartTimesAfterCurrentTime } = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
+    const { scheduledTimes: unsubmittedSponsorStartTimesAfterCurrentTime } = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
 
     const minUnsubmittedSponsorTimeIndex = unsubmittedSponsorStartTimes.indexOf(Math.min(...unsubmittedSponsorStartTimesAfterCurrentTime));
     const previewEndTimeIndex = getLatestEndTimeIndex(unsubmittedArray, minUnsubmittedSponsorTimeIndex);
@@ -1053,28 +1053,27 @@ function getLatestEndTimeIndex(sponsorTimes: SponsorTime[], index: number, hideH
  *  the current time, but end after
  */
 function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments: boolean, includeNonIntersectingSegments: boolean,
-    minimum?: number, onlySkippableSponsors = false, hideHiddenSponsors = false): {includedTimes: ScheduledTime[], startTimeIndexes: number[]} {
-    if (!sponsorTimes) return {includedTimes: [], startTimeIndexes: []};
+    minimum?: number, onlySkippableSponsors = false, hideHiddenSponsors = false): {includedTimes: ScheduledTime[], scheduledTimes: number[]} {
+    if (!sponsorTimes) return {includedTimes: [], scheduledTimes: []};
 
     const includedTimes: ScheduledTime[] = [];
-    const startTimeIndexes: number[] = [];
+    const scheduledTimes: number[] = [];
 
-    const possibleTimes = sponsorTimes.map((sponsorTime) => {
-        const results = [{
-            ...sponsorTime,
-            scheduledTime: sponsorTime.segment[0]
-        }]
+    const possibleTimes = sponsorTimes.map((sponsorTime) => ({
+        ...sponsorTime,
+        scheduledTime: sponsorTime.segment[0]
+    }));
 
-        if (sponsorTime.actionType === ActionType.Mute) {
-            // Schedule at the end time to know when to unmute
-            results.push({
+    // Schedule at the end time to know when to unmute
+    sponsorTimes.filter(sponsorTime => sponsorTime.actionType === ActionType.Mute)
+                .forEach(sponsorTime => {
+        if (!possibleTimes.some((time) => sponsorTime.segment[1] === time.scheduledTime)) {
+            possibleTimes.push({
                 ...sponsorTime,
                 scheduledTime: sponsorTime.segment[1]
-            })
+            });
         }
-
-        return results;
-    }).reduce((a, b) => a.concat(b), []);
+    });
 
     for (let i = 0; i < possibleTimes.length; i++) {
         if ((minimum === undefined
@@ -1084,12 +1083,12 @@ function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments:
                 && (!hideHiddenSponsors || possibleTimes[i].hidden === SponsorHideType.Visible)
                 && getCategoryActionType(possibleTimes[i].category) === CategoryActionType.Skippable) {
 
-            startTimeIndexes.push(possibleTimes[i].scheduledTime);
+            scheduledTimes.push(possibleTimes[i].scheduledTime);
             includedTimes.push(possibleTimes[i]);
         } 
     }
 
-    return { includedTimes, startTimeIndexes };
+    return { includedTimes, scheduledTimes };
 }
 
 /**
@@ -1112,7 +1111,7 @@ function sendTelemetryAndCount(skippingSegments: SponsorTime[], secondsSkipped:
 
     let counted = false;
     for (const segment of skippingSegments) {
-        const index = sponsorTimes.findIndex((s) => s.segment === segment.segment);
+        const index = sponsorTimes?.findIndex((s) => s.segment === segment.segment);
         if (index !== -1 && !sponsorSkipped[index]) {
             sponsorSkipped[index] = true;
             if (!counted) {

src/js-components/skipButtonControlBar.ts

@@ -40,7 +40,9 @@ export class SkipButtonControlBar {
         this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
         this.container.addEventListener("mouseenter", () => this.stopTimer());
+        this.container.addEventListener("mouseenter", () => console.log("mouseenter"));
         this.container.addEventListener("mouseleave", () => this.startTimer());
+        this.container.addEventListener("mouseleave", () => console.log("mouseleave"));
     }
 
     getElement(): HTMLElement {

src/types.ts

@@ -58,11 +58,10 @@ export enum CategoryActionType {
 
 export enum ActionType {
     Skip = "skip",
-    Mute = "mute"
+    Mute = "mute",
+    Visual = "visual",
 }
 
-export const ActionTypes = [ActionType.Skip, ActionType.Mute];
-
 export type SegmentUUID = string  & { __segmentUUIDBrand: unknown };
 export type Category = string & { __categoryBrand: unknown };
 
@@ -80,6 +79,16 @@ export interface SponsorTime {
 
     hidden?: SponsorHideType;
     source?: SponsorSourceType;
+
+    visual: string;
+}
+
+export interface VisualSegmentInfo {
+    time: number;
+    bounds: [number, number][];
+    smooth: boolean;
+    curve: string;
+    color: string;
 }
 
 export interface ScheduledTime extends SponsorTime {

src/utils/visualUtils.ts

@@ -0,0 +1,29 @@
+import { VisualSegmentInfo } from "../types";
+import { Svg, SVG } from "@svgdotjs/svg.js";
+
+export function toSVG(visuals: VisualSegmentInfo[]): Svg {
+    const svg = SVG().size(100, 100);
+
+    for (const visual of visuals) {
+        const path = svg.polygon();
+        path.fill(visual.color);
+        // path.stroke({
+        //     width: 1,
+        //     color: visual.color
+        // });
+        path.plot(visual.bounds);
+    }
+
+    console.log(svg.svg());
+
+    return svg;
+}
+
+export function toVisualSegmentInfo(svgInput: string | Svg): VisualSegmentInfo {
+    let svg = svgInput as Svg;
+    if (typeof svgInput === "string") {
+        svg = SVG().svg(svgInput);
+    }
+
+    throw new Error("Method not implemented.");
+}

test/visualSegments.test.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import { createSVGWindow } from "svgdom";
+import { registerWindow } from "@svgdotjs/svg.js";
+
+import { toSVG } from "../src/utils/visualUtils";
+
+beforeAll(() => {
+    const window = createSVGWindow();
+    registerWindow(window, window.document)
+})
+
+test("Visual Segment SVG converter", async () => {
+    toSVG([{
+        time: 0,
+        bounds: [[0, 0], [25, 0], [25, 40], [0, 30]],
+        smooth: false,
+        curve: "linear",
+        color: "#000000",
+    }]);
+});