update translations

Fixes #2296

.github/workflows/tests.yml

@@ -16,10 +16,15 @@ jobs:
         with:
           node-version: '18'
       - run: npm ci
-      - run: sudo apt-get install chromium-chromedriver
       
       - name: Copy configuration
         run: cp config.json.example config.json
+
+      - name: Set up WireGuard Connection
+        uses: niklaskeerl/easy-wireguard-action@50341d5f4b8245ff3a90e278aca67b2d283c78d0
+        with:
+          WG_CONFIG_FILE: ${{ secrets.WG_CONFIG_FILE }}
+
       - name: Run tests
         run: npm run test
 

CONTRIBUTING.md

@@ -5,7 +5,7 @@ https://crowdin.com/project/sponsorblock
 
 # Building
 ## Building locally
-0. You must have [Node.js 16 or later](https://nodejs.org/) and npm installed. Works best on Linux
+0. You must have [Node.js 22 or later](https://nodejs.org/) and npm installed. Works best on Linux
 1. Clone with submodules
   ```bash
   git clone --recursive https://github.com/ajayyy/SponsorBlock

manifest/manifest.json

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

package.json

@@ -23,7 +23,7 @@
     "@types/wicg-mediasession": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "chromedriver": "^110.0.0",
+    "chromedriver": "^137.0.0",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.35.0",

public/content.css

@@ -31,6 +31,15 @@
 	transition: transform .1s cubic-bezier(0,0,0.2,1);
 }
 
+/* Prevent bar from covering highlights on YTTV */
+#previewbar.sponsorblock-yttv-container  {
+	z-index: unset;
+}
+
+ytu-time-bar.ytu-storyboard {
+	text-align: center;
+}
+
 /* May 2024 hover preview */
 .YtPlayerProgressBarProgressBar #previewbar {
 	transform: none;
@@ -67,6 +76,11 @@ div:hover > #previewbar.sbNotInvidious {
 	min-width: 1px;
 }
 
+.previewbar-yttv {
+	height: 10px;
+	top: 14px;
+}
+
 .previewbar.requiredSegment {
 	transform: scaleY(3);
 }
@@ -88,10 +102,6 @@ div:hover > #previewbar.sbNotInvidious {
 	display: none !important;
 }
 
-.ytp-tooltip.sponsorCategoryTooltipVisible:not(.sponsorTooltipHasYTChapters) {
-	transform: translateY(-1em) !important;
-}
-
 /* Pull up for precise seeking */
 .ytp-tooltip.sponsorCategoryTooltipVisible .ytp-tooltip-edu {
 	transform: translateY(-1em) !important;
@@ -101,6 +111,14 @@ div:hover > #previewbar.sbNotInvidious {
 	transform: translateY(-2em) !important;
 }
 
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorHasOriginalTooltip {
+	transform: translateY(-2em) !important;
+}
+
+.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips.sponsorHasOriginalTooltip {
+	transform: translateY(-3em) !important;
+}
+
 .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible {
 	transform: translateY(-2em) !important;
 }
@@ -184,6 +202,16 @@ div:hover > .sponsorBlockChapterBar {
 	padding-right: 3.6px;
 }
 
+.sbButtonYTTV {
+	padding-left: 5px !important;
+}
+
+/* YTTV only */
+.ytu-player-controls > .skipButtonControlBarContainer > div {
+	padding-left: 5px;
+	align-content: center;
+}
+
 .autoHiding {
 	overflow: visible !important;
 }
@@ -655,6 +683,14 @@ input::-webkit-inner-spin-button {
 	color: white;
 }
 
+.hideSegmentSubmitButton {
+	cursor: pointer;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	position: absolute;
+}
+
 /* Start SelectorComponent */
 
 .sbSelector {

public/help/index.html

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

public/help/styles.css

@@ -29,7 +29,11 @@ html {
 }
 
 .bigText {
-  font-size: 50px;
+  font-size: 30px;
+}
+
+.smallText {
+  font-size: 14px;
 }
 
 body {
@@ -46,7 +50,6 @@ body {
 }
 
 .container {
-  max-width: 60%;
   margin: auto;
 }
 
@@ -168,7 +171,7 @@ p,li,code,a {
 
 .optionsFrame {
   width: 100%;
-  height: 500px;
+  height: 100%;
 }
 
 .previewImage {
@@ -194,14 +197,59 @@ img {
 h1,h2,h3,h4,h5,h6 {
   color: var(--title);
   text-align: center;
+
+  font-size: 25px;
+  margin: 5px 0px;
 }
 
 svg {
  text-decoration: none; 
 }
 
-#sbDonate {
+.donate-ask {
-  font-size: 10px;
+  background-color: rgb(26, 26, 26, 0.95);
+  border-radius: 15px;
+
+  text-align: center;
+  padding: 10px;
+
+  margin: 0.7em 0px;
+}
+
+.donate-ask .donate-text {
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.donate-ask .donate-text img {
+  height: 2rem;
+  border-radius: 100%;
+
+  margin-right: 15px;
+}
+
+.donate-ask a {
+  text-decoration: none;
+  color: #eee;
+  border-radius: 15px;
+  background-color: rgb(58, 58, 58, 0.9);
+  padding: 10px;
+
+  transition: background-color 0.3s ease;
+
+  display: block;
+  width: fit-content;
+  margin: auto;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.donate-ask a:hover {
+  background-color: rgba(70, 70, 70, 0.9);
 }
 
 @media screen and (orientation:portrait) {
@@ -351,4 +399,50 @@ svg {
 
 .hidden {
   display: none;
+}
+
+.help-page-flex-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.left-sidebar {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 1 50%;
+}
+
+.box2 {
+  flex: 1 1 50%;
+}
+
+/* Mobile */
+@media only screen and (max-width: 600px) {
+  .box1 {
+    order: 1;
+  }
+
+  .box2 {
+    order: 2;
+  }
+
+  .box3 {
+    order: 3;
+  }
+
+  .left-sidebar {
+    display: contents;
+  }
+
+  .help-page-flex-container {
+    flex-direction: column;
+  }
+
+  .optionsFrame {
+    height: 500px;
+  }
 }

public/icons/loop.svg

@@ -0,0 +1,4 @@
+<svg width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 4-8 7h2s1-5 6-5c1.66 0 3.14.69 4.22 1.78L14 10h6V4l-2.35 2.35z"/>
+  <path d="M5.85 17.65C7.3 19.1 9.29 20 11.5 20c4.42 0 8-4 8-7h-2s-1 5-6 5c-1.66 0-3.14-.69-4.22-1.78L9.5 14h-6v6z"/>
+</svg>

public/icons/looped.svg

@@ -0,0 +1,4 @@
+<svg width="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#80fff6">
+  <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-8 4-8 7h2s1-5 6-5c1.66 0 3.14.69 4.22 1.78L14 10h6V4l-2.35 2.35z"/>
+  <path d="M5.85 17.65C7.3 19.1 9.29 20 11.5 20c4.42 0 8-4 8-7h-2s-1 5-6 5c-1.66 0-3.14-.69-4.22-1.78L9.5 14h-6v6z"/>
+</svg>

public/options/options.css

@@ -731,4 +731,17 @@ svg {
   
 .dearrow-link:hover .close-button {
     opacity: 1;
+}
+
+.invalid-advanced-config {
+    color: red;
+}
+
+.advanced-skip-options-menu {
+    margin-top: 10px;
+}
+
+.advanced-config-help-message {
+    margin-bottom: 10px;
+    transition: none;
 }

public/options/options.html

@@ -140,6 +140,8 @@
 					<div class="small-description">__MSG_whatManualSkipOnFullVideo__</div>
 				</div>
 
+				<div data-type="react-AdvancedSkipOptionsComponent"></div>
+
 				<div data-type="toggle" data-sync="forceChannelCheck">
 					<div class="switch-container">
 						<label class="switch">
@@ -472,6 +474,16 @@
 					<div class="inline"></div>
 				</div>
 
+				<div data-type="keybind-change" data-sync="upvoteKeybind">	
+					<label class="optionLabel">__MSG_setUpvoteKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
+				<div data-type="keybind-change" data-sync="downvoteKeybind">	
+					<label class="optionLabel">__MSG_setDownvoteKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+				
 			</div>
 
 			<div id="import" class="option-group hidden">
@@ -556,7 +568,7 @@
 
 			<div id="advanced" class="option-group hidden">
 
-				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious">
+				<div id="support-invidious" data-type="toggle" data-sync="supportInvidious" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
 							<input id="supportInvidious" type="checkbox">
@@ -571,7 +583,7 @@
 					<div class="small-description">__MSG_supportOtherSitesDescription__ </div>
 				</div>
 	
-				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious">
+				<div data-type="private-text-change" data-sync="invidiousInstances" data-dependent-on="supportInvidious" data-no-safari="true">
 					<div class="option-button trigger-button">
 						__MSG_addInvidiousInstance__
 					</div>

public/popup.css

@@ -293,7 +293,7 @@
   padding: 10px 15px;
   transition: background-color 0.2s ease-in-out;
 }
-.sbControlsMenu-item:hover {
+.sbControlsMenu-item:hover, .sbControlsMenu-item:focus {
   background-color: #444;
 }
 .sbControlsMenu-itemIcon {
@@ -582,6 +582,10 @@
   margin: 0 !important;
 }
 
+#sponsorBlockPopupBody .u-mZ.cleanPopupMargin {
+  margin-top: 10px !important;
+}
+
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
@@ -618,4 +622,9 @@
 
 #issueReporterTabs > span.sbSelected > span::after {
   transform: scaleX(0.8);
+}
+
+.sbPopupButton {
+  width: 16px;
+  fill: var(--sb-main-fg-color);
 }

public/popup.html

@@ -1,209 +1,13 @@
-<!DOCTYPE html>
 <html id="sponsorBlockPopupHTML">
-  <head>
+    <head>
-    <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
-    <title>__MSG_openPopup__</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link id="sponsorBlockPopupFont" href="/libs/Source+Sans+Pro.css" rel="stylesheet">
-    <link id="sponsorBlockStyleSheet" href="popup.css" rel="stylesheet">
-    <link id="sponsorBlockStyleSheet" href="shared.css" rel="stylesheet">
-  </head>
 
-  <body id="sponsorBlockPopupBody" style="visibility: hidden">
+        <link href="popup.css" rel="stylesheet">
-    <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
+        <link href="shared.css" rel="stylesheet">
+        <script src="./js/popup.js"></script>
+    </head>
 
-      <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
+    <body id="sponsorBlockPopupBody">
-        <img src="icons/close.png" width="15" height="15" alt="Close icon">
-      </button>
 
-      <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
+    </body>
-        __MSG_betaServerWarning__
+</html>
-      </div>
-
-      <header id="sbPopupLogo" class="sbPopupLogo">
-        <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
-        <p class="u-mZ">SponsorBlock</p>
-      </header>
-
-      <div id="videoInfo">
-        <!-- Loading text -->
-        <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
-        <!-- If the video was found in the database -->
-        <p id="videoFound" class="u-mZ grey-text"></p>
-        <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
-          <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
-        </button>
-        <!-- Video Segments -->
-        <div id="issueReporterContainer">
-          <div id="issueReporterTabs" class="hidden">
-            <span id="issueReporterTabSegments" class="sbSelected">
-              <span>__MSG_SegmentsCap__</span>
-            </span>
-            <span id="issueReporterTabChapters">
-              <span>__MSG_Chapters__</span>
-            </span>
-          </div>
-          <div id="issueReporterTimeButtons"></div>
-          <div id="issueReporterImportExport" class="hidden">
-            <div id="importExportButtons">
-              <button id="importSegmentsButton" title="__MSG_importSegments__">
-                <img src="/icons/import.svg" alt="Refresh icon" id="importSegments" />
-              </button>
-              <button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
-                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
-              </button>
-            </div>
-
-            <span id="importSegmentsMenu" class="hidden">
-              <textarea id="importSegmentsText" rows="5" style="width:80%"></textarea>
-
-              <button id="importSegmentsSubmit" title="__MSG_importSegments__">
-                __MSG_Import__
-              </button>
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Toggle Box -->
-      <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
-          <input type="checkbox" style="display: none" id="whitelistToggle">
-          <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
-            <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
-          </svg>
-          <span id="whitelistChannel">__MSG_whitelistChannel__</span>
-          <span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
-        </label>
-        <!--github: mbledkowski/toggle-switch-->
-        <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
-          <span class="toggleSwitchContainer-switch">
-            <input type="checkbox" style="display: none" id="toggleSwitch" checked>
-            <span class="switchBg shadow"></span>
-            <span class="switchBg white"></span>
-            <span class="switchBg green"></span>
-            <span class="switchDot"></span>
-          </span>
-          <span id="disableSkipping">__MSG_disableSkipping__</span>
-          <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
-        </label>
-        <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__">
-          <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
-          __MSG_Options__
-        </button>
-      </div>
-
-      <a id="whitelistForceCheck" class="hidden">
-        __MSG_forceChannelCheckPopup__
-      </a>
-
-      <!-- Submit box -->
-      <div id="mainControls" style="display: none">
-        <h1 class="sbHeader">
-          __MSG_recordTimesDescription__
-        </h1>
-        <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
-        <div style="text-align: center; margin: 8px 0;">
-          <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
-          <button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_OpenSubmissionMenu__</button>
-        </div>
-        <span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
-      </div>
-
-      <!-- Your Work box -->
-      <div id="sbYourWorkBox" class="sbYourWorkBox">
-        <h1 class="sbHeader" style="padding: 8px 15px;">
-          __MSG_yourWork__
-        </h1>
-        <div class="sbYourWorkCols">
-          <!-- Username -->
-          <div id="usernameElement">
-            <p class="u-mZ grey-text">__MSG_Username__:
-              <!-- loading/errors -->
-              <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
-            </p>
-            <div id="setUsernameContainer">
-              <p id="usernameValue"></p>
-              <button id="setUsernameButton" title="__MSG_setUsername__">
-                <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
-              </button>
-              <button id="copyUserID" title="__MSG_copyPublicID__">
-                <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
-              </button>
-            </div>
-            <div id="setUsername" style="display: none">
-              <input id="usernameInput" placeholder="Username">
-              <button id="submitUsername">
-                <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
-              </button>
-            </div>
-          </div>
-          <!-- Submissions -->
-          <div id="sponsorTimesContributionsContainer" class="hidden">
-            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
-            <p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
-          </div>
-        </div>
-
-        <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_savedPeopleFrom__
-          <b>
-            <span id="sponsorTimesViewsDisplay">0</span>
-          </b>
-          <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-          <br />
-          <span class="sbExtraInfo">
-            (
-            <b>
-              <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-              <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
-            </b>
-            <span>__MSG_youHaveSavedTimeEnd__</span>
-            )
-          </span>
-        </p>
-        <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
-          __MSG_youHaveSkipped__
-          <b>
-            <span id="sponsorTimesSkipsDoneDisplay">0</span>
-          </b>
-          <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-          <span class="sbExtraInfo">
-            (
-              <b>
-                <span id="sponsorTimeSavedDisplay">0</span>
-                <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
-              </b>
-            )
-          </span>
-        </p>
-      </div>
-
-      <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
-        <img class="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
-        <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
-          __MSG_considerDonating__
-        </a>
-        <img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
-      </div>
-
-      <footer id="sbFooter">
-        <a id="helpButton">__MSG_help__</a>
-        <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
-        <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
-        <br />
-        <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
-        <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
-        <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
-        <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">__MSG_Donate__</a>
-        <br />
-        <a id="debugLogs">__MSG_copyDebugLogs__</a>
-      </footer>
-
-      <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
-
-    </div>
-    <!-- Scripts that need to load after the html -->
-    <script src="./js/popup.js" async></script>
-  </body>
-</html>

src/components/ChapterVoteComponent.tsx

@@ -44,7 +44,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
             <>
                 {/* Upvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"}
-                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
+                        className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden " : " ") + (document.location.host === "tv.youtube.com" ? "sbButtonYTTV" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("upvoteButtonInfo")}
                         onClick={(e) => this.vote(e, 1)}>
@@ -55,7 +55,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
 
                 {/* Downvote Button */}
                 <button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"}
-                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
+                        className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden " : " ") + (document.location.host === "tv.youtube.com" ? "sbButtonYTTV" : "")}
                         draggable="false"
                         title={chrome.i18n.getMessage("reportButtonInfo")}
                         onClick={(e) => {

src/components/SkipNoticeComponent.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorTime, NoticeVisibilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";
 const utils = new Utils();
-import { getSkippingText, getUpcomingText } from "../utils/categoryUtils";
+import { getSkippingText, getUpcomingText, getVoteText } from "../utils/categoryUtils";
 
 import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
@@ -29,6 +29,7 @@ export interface SkipNoticeProps {
     autoSkip: boolean;
     startReskip?: boolean;
     upcomingNotice?: boolean;
+    voteNotice?: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
@@ -102,7 +103,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.autoSkip = props.autoSkip;
         this.contentContainer = props.contentContainer;
 
-        const noticeTitle = !this.props.upcomingNotice ? getSkippingText(this.segments, this.props.autoSkip) : getUpcomingText(this.segments);
+        const noticeTitle = this.props.voteNotice ? getVoteText(this.segments) : !this.props.upcomingNotice ? getSkippingText(this.segments, this.props.autoSkip) : getUpcomingText(this.segments);
 
         const previousSkipNotices = document.querySelectorAll(".sponsorSkipNoticeParent:not(.sponsorSkipUpcomingNotice)");
         this.amountOfPreviousNotices = previousSkipNotices.length;
@@ -186,8 +187,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 idSuffix={this.idSuffix}
                 fadeIn={this.props.fadeIn}
                 fadeOut={!this.props.upcomingNotice}
-                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAll
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAutoSkip && this.autoSkip)}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 style={noticeStyle}
@@ -242,15 +243,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         </div>
 
                         {/* Copy and Downvote Button */}
-                        <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
+                        {
-                                className="voteButton"
+                            !this.props.voteNotice &&
-                                style={{marginLeft: "5px"}}
+                            <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
-                                onClick={() => this.openEditingOptions()}>
+                                    className="voteButton"
-                            <PencilSvg fill={this.state.editing === true
+                                    style={{marginLeft: "5px"}}
-                                            || this.state.actionState === SkipNoticeAction.CopyDownvote
+                                    onClick={() => this.openEditingOptions()}>
-                                            || this.state.choosingCategory === true
+                                <PencilSvg fill={this.state.editing === true
-                                            ? this.selectedColor : this.unselectedColor} />
+                                                || this.state.actionState === SkipNoticeAction.CopyDownvote
-                        </div>
+                                                || this.state.choosingCategory === true
+                                                ? this.selectedColor : this.unselectedColor} />
+                            </div>
+                        }
                     </td>
 
                     :
@@ -278,11 +282,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 }
 
                 {/* Unskip/Skip Button */}
-                {!this.props.smaller || this.segments[0].actionType === ActionType.Mute
+                {!this.props.voteNotice && (!this.props.smaller || this.segments[0].actionType === ActionType.Mute)
                     ? this.getSkipButton(1) : null}
 
                 {/* Never show button */}
-                {!this.autoSkip || this.props.startReskip ? "" :
+                {!this.autoSkip || this.props.startReskip || this.props.voteNotice ? "" :
                     <td className="sponsorSkipNoticeRightSection"
                         key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
@@ -374,7 +378,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 style.minWidth = "100px";
             }
 
-            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || this.segments[0].actionType === ActionType.Mute) && !this.props.upcomingNotice;
+            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || !this.props.voteNotice || this.segments[0].actionType === ActionType.Mute) && !this.props.upcomingNotice;
 
             return (
                 <span className="sponsorSkipNoticeUnskipSection" style={{ visibility: !showSkipButton ? "hidden" : null }}>
@@ -624,14 +628,17 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
+        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek, this.props.voteNotice);
 
-        this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
+        this.unskippedMode(buttonIndex, index, this.segments[0].actionType === ActionType.Poi ? SkipButtonState.Undo : SkipButtonState.Redo);
     }
 
     reskip(buttonIndex: number, index: number, forceSeek: boolean): void {
         this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
+        this.reskippedMode(buttonIndex);
+    }
 
+    reskippedMode(buttonIndex: number): void {
         const skipButtonStates = this.state.skipButtonStates;
         skipButtonStates[buttonIndex] = SkipButtonState.Undo;
 
@@ -661,7 +668,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     getUnskippedModeInfo(buttonIndex: number, index: number, skipButtonState: SkipButtonState): SkipNoticeState {
-        const changeCountdown = this.segments[index].actionType !== ActionType.Poi;
+        const changeCountdown = !this.props.voteNotice && this.segments[index].actionType !== ActionType.Poi;
 
         const maxCountdownTime = changeCountdown ?
             this.getFullDurationCountdown(index) : this.state.maxCountdownTime;
@@ -697,7 +704,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     getFullDurationCountdown(index: number): () => number {
         return () => {
             const sponsorTime = this.segments[index];
-            const duration = Math.round((sponsorTime.segment[1] - getCurrentTime()) * (1 / getVideo().playbackRate));
+            const duration = Math.round((sponsorTime.segment[1] - (getCurrentTime() ?? 0)) * (1 / (getVideo()?.playbackRate ?? 1)));
 
             return Math.max(duration, Config.config.skipNoticeDuration);
         };

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, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorHideType, SponsorTime } from "../types";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import SelectorComponent, { SelectorOption } from "./SelectorComponent";
@@ -10,6 +10,7 @@ import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/sr
 import { asyncRequestToServer } from "../utils/requests";
 import { defaultPreviewTime } from "../utils/constants";
 import { getVideo, getVideoDuration } from "../../maze-utils/src/video";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -242,6 +243,22 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
                             {this.getActionTypeOptions(sponsorTime)}
                         </select>
+                        <img
+                            className="voteButton hideSegmentSubmitButton"
+                            title={chrome.i18n.getMessage("hideSegment")}
+                            src={sponsorTime.hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
+                            onClick={(e) => {
+                                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
+                                stopAnimation();
+    
+                                if (sponsorTime.hidden === SponsorHideType.Hidden) {
+                                    sponsorTime.hidden = SponsorHideType.Visible;
+                                } else {
+                                    sponsorTime.hidden = SponsorHideType.Hidden;
+                                }
+
+                                this.saveEditTimes();
+                        }}/>
                     </div>
                 ): ""}
 

src/components/options/AdvancedSkipOptionsComponent.tsx

@@ -0,0 +1,273 @@
+import * as React from "react";
+import * as CompileConfig from "../../../config.json";
+
+import Config from "../../config";
+import { AdvancedSkipRuleSet, SkipRuleAttribute, SkipRuleOperator } from "../../utils/skipRule";
+import { ActionType, ActionTypes, CategorySkipOption } from "../../types";
+
+let configSaveTimeout: NodeJS.Timeout | null = null;
+
+export function AdvancedSkipOptionsComponent() {
+    const [optionsOpen, setOptionsOpen] = React.useState(false);
+    const [config, setConfig] = React.useState(configToText(Config.local.skipRules));
+    const [configValid, setConfigValid] = React.useState(true);
+
+    return (
+        <div>
+            <div className="option-button" onClick={() => {
+                setOptionsOpen(!optionsOpen);
+            }}>
+                {chrome.i18n.getMessage("openAdvancedSkipOptions")}
+            </div>
+
+            {
+                optionsOpen &&
+                <div className="advanced-skip-options-menu">
+                    <div className={"advanced-config-help-message"}>
+                        <a target="_blank"
+                                rel="noopener noreferrer"
+                                href="https://wiki.sponsor.ajay.app/w/Advanced_Skip_Options">
+                            {chrome.i18n.getMessage("advancedSkipSettingsHelp")}
+                        </a>
+
+                        <span className={configValid ? "hidden" : "invalid-advanced-config"}>
+                            {" - "}
+                            {chrome.i18n.getMessage("advancedSkipNotSaved")}
+                        </span>
+                    </div>
+
+                    <textarea className={"option-text-box " + (configValid ? "" : "invalid-advanced-config")}
+                        rows={10}
+                        style={{ width: "80%" }}
+                        value={config}
+                        spellCheck={false}
+                        onChange={(e) => {
+                            setConfig(e.target.value);
+
+                            const compiled = compileConfig(e.target.value);
+                            setConfigValid(!!compiled && !(e.target.value.length > 0 && compiled.length === 0));
+
+                            if (compiled) {
+                                if (configSaveTimeout) {
+                                    clearTimeout(configSaveTimeout);
+                                }
+
+                                configSaveTimeout = setTimeout(() => {
+                                    Config.local.skipRules = compiled;
+                                }, 200);
+                            }
+                        }}
+                    />
+                </div>
+            }
+        </div>
+    );
+}
+
+function compileConfig(config: string): AdvancedSkipRuleSet[] | null {
+    const ruleSets: AdvancedSkipRuleSet[] = [];
+
+    let ruleSet: AdvancedSkipRuleSet = {
+        rules: [],
+        skipOption: null,
+        comment: ""
+    };
+
+    for (const line of config.split("\n")) {
+        if (line.trim().length === 0) {
+            // Skip empty lines
+            continue;
+        }
+
+        const comment = line.match(/^\s*\/\/(.+)$/);
+        if (comment) {
+            if (ruleSet.rules.length > 0) {
+                // Rule has already been created, add it to list if valid
+                if (ruleSet.skipOption !== null && ruleSet.rules.length > 0) {
+                    ruleSets.push(ruleSet);
+
+                    ruleSet = {
+                        rules: [],
+                        skipOption: null,
+                        comment: ""
+                    };
+                } else {
+                    return null;
+                }
+            }
+
+            if (ruleSet.comment.length > 0) {
+                ruleSet.comment += "; ";
+            }
+
+            ruleSet.comment += comment[1].trim();
+
+            // Skip comment lines
+            continue;
+        } else if (line.startsWith("if ")) {
+            if (ruleSet.rules.length > 0) {
+                // Rule has already been created, add it to list if valid
+                if (ruleSet.skipOption !== null && ruleSet.rules.length > 0) {
+                    ruleSets.push(ruleSet);
+
+                    ruleSet = {
+                        rules: [],
+                        skipOption: null,
+                        comment: ""
+                    };
+                } else {
+                    return null;
+                }
+            }
+
+            const ruleTexts = [...line.matchAll(/\S+ \S+ (?:"[^"\\]*(?:\\.[^"\\]*)*"|\d+)(?= and |$)/g)];
+            for (const ruleText of ruleTexts) {
+                if (!ruleText[0]) return null;
+
+                const ruleParts = ruleText[0].match(/(\S+) (\S+) ("[^"\\]*(?:\\.[^"\\]*)*"|\d+)/);
+                if (ruleParts.length !== 4) {
+                    return null; // Invalid rule format
+                }
+
+                const attribute = getSkipRuleAttribute(ruleParts[1]);
+                const operator = getSkipRuleOperator(ruleParts[2]);
+                const value = getSkipRuleValue(ruleParts[3]);
+                if (attribute === null || operator === null || value === null) {
+                    return null; // Invalid attribute or operator
+                }
+
+                if ([SkipRuleOperator.Equal, SkipRuleOperator.NotEqual].includes(operator)) {
+                    if (attribute === SkipRuleAttribute.Category
+                            && !CompileConfig.categoryList.includes(value as string)) {
+                        return null; // Invalid category value
+                    } else if (attribute === SkipRuleAttribute.ActionType
+                            && !ActionTypes.includes(value as ActionType)) {
+                        return null; // Invalid category value
+                    } else if (attribute === SkipRuleAttribute.Source
+                            && !["local", "youtube", "autogenerated", "server"].includes(value as string)) {
+                        return null; // Invalid category value
+                    }
+                }
+
+                ruleSet.rules.push({
+                    attribute,
+                    operator,
+                    value
+                });
+            }
+
+            // Make sure all rules were parsed
+            if (ruleTexts.length === 0 || !line.endsWith(ruleTexts[ruleTexts.length - 1][0])) {
+                return null;
+            }
+        } else {
+            // Only continue if a rule has been defined
+            if (ruleSet.rules.length === 0) {
+                return null; // No rules defined yet
+            }
+
+            switch (line.trim().toLowerCase()) {
+                case "disabled":
+                    ruleSet.skipOption = CategorySkipOption.Disabled;
+                    break;
+                case "show overlay":
+                    ruleSet.skipOption = CategorySkipOption.ShowOverlay;
+                    break;
+                case "manual skip":
+                    ruleSet.skipOption = CategorySkipOption.ManualSkip;
+                    break;
+                case "auto skip":
+                    ruleSet.skipOption = CategorySkipOption.AutoSkip;
+                    break;
+                default:
+                    return null; // Invalid skip option
+            }
+        }
+    }
+
+    if (ruleSet.rules.length > 0 && ruleSet.skipOption !== null) {
+        ruleSets.push(ruleSet);
+    } else if (ruleSet.rules.length > 0 || ruleSet.skipOption !== null) {
+        // Incomplete rule set
+        return null;
+    }
+
+    return ruleSets;
+}
+
+function getSkipRuleAttribute(attribute: string): SkipRuleAttribute | null {
+    if (attribute && Object.values(SkipRuleAttribute).includes(attribute as SkipRuleAttribute)) {
+        return attribute as SkipRuleAttribute;
+    }
+
+    return null;
+}
+
+function getSkipRuleOperator(operator: string): SkipRuleOperator | null {
+    if (operator && Object.values(SkipRuleOperator).includes(operator as SkipRuleOperator)) {
+        return operator as SkipRuleOperator;
+    }
+
+    return null;
+}
+
+function getSkipRuleValue(value: string): string | number | null {
+    if (!value) return null;
+
+    if (value.startsWith('"')) {
+        try {
+            return JSON.parse(value);
+        } catch (e) {
+            return null; // Invalid JSON string
+        }
+    } else {
+        const numValue = Number(value);
+        if (!isNaN(numValue)) {
+            return numValue;
+        }
+
+        return null;
+    }
+}
+
+function configToText(config: AdvancedSkipRuleSet[]): string {
+    let result = "";
+
+    for (const ruleSet of config) {
+        if (ruleSet.comment) {
+            result += "// " + ruleSet.comment + "\n";
+        }
+
+        result += "if ";
+        let firstRule = true;
+        for (const rule of ruleSet.rules) {
+            if (!firstRule) {
+                result += " and ";
+            }
+
+            result += `${rule.attribute} ${rule.operator} ${JSON.stringify(rule.value)}`;
+            firstRule = false;
+        }
+
+        switch (ruleSet.skipOption) {
+            case CategorySkipOption.Disabled:
+                result += "\nDisabled";
+                break;
+            case CategorySkipOption.ShowOverlay:
+                result += "\nShow Overlay";
+                break;
+            case CategorySkipOption.ManualSkip:
+                result += "\nManual Skip";
+                break;
+            case CategorySkipOption.AutoSkip:
+                result += "\nAuto Skip";
+                break;
+            default:
+                return null; // Invalid skip option
+        }
+
+        result += "\n\n";
+    }
+
+    return result.trim();
+}

src/components/options/CategorySkipOptionsComponent.tsx

@@ -243,6 +243,9 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                 return [{
                     configKey: "autoSkipOnMusicVideos",
                     label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
+                }, {
+                    configKey: "skipNonMusicOnlyOnYoutubeMusic",
+                    label: chrome.i18n.getMessage("skipNonMusicOnlyOnYoutubeMusic"),
                 }];
             default:
                 return [];

src/components/options/KeybindDialogComponent.tsx

@@ -146,7 +146,9 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
                 this.props.option !== "actuallySubmitKeybind" && this.equals(Config.config['actuallySubmitKeybind']) ||
                 this.props.option !== "previewKeybind" && this.equals(Config.config['previewKeybind']) ||
                 this.props.option !== "closeSkipNoticeKeybind" && this.equals(Config.config['closeSkipNoticeKeybind']) ||
-                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
+                this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']) ||
+                this.props.option !== "downvoteKeybind" && this.equals(Config.config['downvoteKeybind']) ||
+                this.props.option !== "upvoteKeybind" && this.equals(Config.config['upvoteKeybind']))
             return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};
 
         return null;

src/config.ts

@@ -1,12 +1,9 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
 import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
 import { HashedValue } from "../maze-utils/src/hash";
-
+import { Permission, AdvancedSkipRuleSet } from "./utils/skipRule";
-export interface Permission {
-    canSubmit: boolean;
-}
 
 interface SBConfig {
     userID: string;
@@ -32,7 +29,7 @@ interface SBConfig {
     trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
     showUpcomingNotice: boolean;
-    noticeVisibilityMode: NoticeVisbilityMode;
+    noticeVisibilityMode: NoticeVisibilityMode;
     hideVideoPlayerControls: boolean;
     hideInfoButtonPlayerControls: boolean;
     hideDeleteButtonPlayerControls: boolean;
@@ -57,6 +54,7 @@ interface SBConfig {
     donateClicked: number;
     autoHideInfoButton: boolean;
     autoSkipOnMusicVideos: boolean;
+    skipNonMusicOnlyOnYoutubeMusic: boolean;
     colorPalette: {
         red: string;
         white: string;
@@ -97,6 +95,8 @@ interface SBConfig {
     nextChapterKeybind: Keybind;
     previousChapterKeybind: Keybind;
     closeSkipNoticeKeybind: Keybind;
+    upvoteKeybind: Keybind;
+    downvoteKeybind: Keybind;
 
     // What categories should be skipped
     categorySelections: CategorySelection[];
@@ -146,6 +146,8 @@ interface SBStorage {
 
     /* Contains unsubmitted segments that the user has created. */
     unsubmittedSegments: Record<string, SponsorTime[]>;
+
+    skipRules: AdvancedSkipRuleSet[];
 }
 
 class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
@@ -165,6 +167,15 @@ class ConfigClass extends ProtoConfig<SBConfig, SBStorage> {
 }
 
 function migrateOldSyncFormats(config: SBConfig) {
+    if (!config["changeChapterColor"]) {
+        config.barTypes["chapter"].color = "#ffd983";
+        config["changeChapterColor"] = true;
+        chrome.storage.sync.set({
+            "changeChapterColor": true,
+            "barTypes": config.barTypes
+        });
+    }
+
     if (config["showZoomToFillError"]) {
         chrome.storage.sync.remove("showZoomToFillError");
     }
@@ -295,7 +306,7 @@ const syncDefaults = {
     trackDownvotesInPrivate: false,
     dontShowNotice: false,
     showUpcomingNotice: false,
-    noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
+    noticeVisibilityMode: NoticeVisibilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
     hideInfoButtonPlayerControls: false,
     hideDeleteButtonPlayerControls: false,
@@ -320,6 +331,7 @@ const syncDefaults = {
     donateClicked: 0,
     autoHideInfoButton: true,
     autoSkipOnMusicVideos: false,
+    skipNonMusicOnlyOnYoutubeMusic: false,
     scrollToEditTimeUpdate: false, // false means the tooltip will be shown
     categoryPillUpdate: false,
     showChapterInfoMessage: true,
@@ -356,6 +368,8 @@ const syncDefaults = {
     nextChapterKeybind: { key: "ArrowRight", ctrl: true },
     previousChapterKeybind: { key: "ArrowLeft", ctrl: true },
     closeSkipNoticeKeybind: { key: "Backspace" },
+    downvoteKeybind: { key: "h", shift: true },
+    upvoteKeybind: { key: "g", shift: true },
 
     categorySelections: [{
         name: "sponsor" as Category,
@@ -466,7 +480,11 @@ const syncDefaults = {
         "preview-filler": {
             color: "#2E0066",
             opacity: "0.7"
-        }
+        },
+        "chapter": {
+            color: "#ffd983",
+            opacity: "0"
+        },
     }
 };
 
@@ -475,7 +493,8 @@ const localDefaults = {
     navigationApiAvailable: null,
     alreadyInstalled: false,
 
-    unsubmittedSegments: {}
+    unsubmittedSegments: {},
+    skipRules: []
 };
 
 const Config = new ConfigClass(syncDefaults, localDefaults, migrateOldSyncFormats);

src/content.ts

@@ -33,9 +33,9 @@ import { logDebug, logWarn } from "./utils/logger";
 import { importTimes } from "./utils/exporter";
 import { ChapterVote } from "./render/ChapterVote";
 import { openWarningDialog } from "./utils/warnings";
-import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
+import { extensionUserAgent, isFirefoxOrSafari, waitFor } from "../maze-utils/src";
 import { getErrorMessage, getFormattedTime } from "../maze-utils/src/formating";
-import { getChannelIDInfo, getVideo, getIsAdPlaying, getIsLivePremiere, setIsAdPlaying, checkVideoIDChange, getVideoID, getYouTubeVideoID, setupVideoModule, checkIfNewVideoID, isOnInvidious, isOnMobileYouTube, getLastNonInlineVideoID, triggerVideoIDChange, triggerVideoElementChange, getIsInline, getCurrentTime, setCurrentTime, getVideoDuration, verifyCurrentTime, waitForVideo } from "../maze-utils/src/video";
+import { getChannelIDInfo, getVideo, getIsAdPlaying, getIsLivePremiere, setIsAdPlaying, checkVideoIDChange, getVideoID, getYouTubeVideoID, setupVideoModule, checkIfNewVideoID, isOnInvidious, isOnMobileYouTube, isOnYouTubeMusic, isOnYTTV, getLastNonInlineVideoID, triggerVideoIDChange, triggerVideoElementChange, getIsInline, getCurrentTime, setCurrentTime, getVideoDuration, verifyCurrentTime, waitForVideo } from "../maze-utils/src/video";
 import { Keybind, StorageChangesObject, isSafari, keybindEquals, keybindToString } from "../maze-utils/src/config";
 import { findValidElement } from "../maze-utils/src/dom"
 import { getHash, HashedValue } from "../maze-utils/src/hash";
@@ -52,6 +52,7 @@ import { isMobileControlsOpen } from "./utils/mobileUtils";
 import { defaultPreviewTime } from "./utils/constants";
 import { onVideoPage } from "../maze-utils/src/pageInfo";
 import { getSegmentsForVideo } from "./utils/segmentData";
+import { getCategoryDefaultSelection, getCategorySelection } from "./utils/skipRule";
 
 cleanPage();
 
@@ -76,6 +77,7 @@ let sponsorTimes: SponsorTime[] = [];
 let existingChaptersImported = false;
 let importingChaptersWaitingForFocus = false;
 let importingChaptersWaiting = false;
+let loopedChapter :SponsorTime = null;
 // List of open skip notices
 const skipNotices: SkipNotice[] = [];
 let upcomingNotice: UpcomingNotice | null = null;
@@ -220,9 +222,12 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             sendResponse({
                 found: sponsorDataFound,
                 status: lastResponseStatus,
-                sponsorTimes: sponsorTimes,
+                sponsorTimes: sponsorTimes.filter((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled),
                 time: getCurrentTime() ?? 0,
-                onMobileYouTube: isOnMobileYouTube()
+                onMobileYouTube: isOnMobileYouTube(),
+                videoID: getVideoID(),
+                loopedChapter: loopedChapter?.UUID,
+                channelWhitelisted
             });
 
             if (!request.updating && popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
@@ -231,22 +236,11 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             }
 
             popupInitialised = true;
-            break;
-        case "getVideoID":
-            sendResponse({
-                videoID: getVideoID(),
-            });
-
             break;
         case "getChannelID":
             sendResponse({
-                channelID: getChannelIDInfo().id
+                channelID: getChannelIDInfo().id,
-            });
+                isYTTV: (document.location.host === "tv.youtube.com")
-
-            break;
-        case "isChannelWhitelisted":
-            sendResponse({
-                value: channelWhitelisted
             });
 
             break;
@@ -300,16 +294,25 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
         case "copyToClipboard":
             navigator.clipboard.writeText(request.text);
             break;
+        case "loopChapter":
+            if (!request.UUID){
+                loopedChapter = null;
+                break;
+            }
+            loopedChapter = {...utils.getSponsorTimeFromUUID(sponsorTimes, request.UUID)};
+            loopedChapter.segment = [loopedChapter.segment[1], loopedChapter.segment[0]];
+            break;
         case "importSegments": {
             const importedSegments = importTimes(request.data, getVideoDuration());
             let addedSegments = false;
             for (const segment of importedSegments) {
                 if (!sponsorTimesSubmitting.some(
                         (s) => Math.abs(s.segment[0] - segment.segment[0]) < 1
-                            && Math.abs(s.segment[1] - segment.segment[1]) < 1)) {
+                            && Math.abs(s.segment[1] - segment.segment[1]) < 1
+                            && s.description === segment.description)) {
                     const hasChaptersPermission = (Config.config.showCategoryWithoutPermission
                         || Config.config.permissions["chapter"]);
-                    if (segment.category === "chapter" && (!utils.getCategorySelection("chapter") || !hasChaptersPermission)) {
+                    if (segment.category === "chapter" && (!getCategoryDefaultSelection("chapter") || !hasChaptersPermission)) {
                         segment.category = "chooseACategory" as Category;
                         segment.actionType = ActionType.Skip;
                         segment.description = "";
@@ -395,6 +398,7 @@ function resetValues() {
     sponsorTimes = [];
     existingChaptersImported = false;
     sponsorSkipped = [];
+    loopedChapter = null;
     lastResponseStatus = 0;
     shownSegmentFailedToFetchWarning = false;
 
@@ -552,6 +556,10 @@ function getPreviewBarAttachElement(): HTMLElement | null {
         }, {
             // For Vorapis v3
             selector: ".ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list"
+        }, {
+            // For YTTV
+            selector: ".yssi-slider > div.ytu-ss-timeline-container",
+            isVisibleCheck: false
         }
     ];
 
@@ -577,7 +585,7 @@ function createPreviewBar(): void {
 
     if (el) {
         const chapterVote = new ChapterVote(voteAsync);
-        previewBar = new PreviewBar(el, isOnMobileYouTube(), isOnInvidious(), chapterVote, () => importExistingChapters(true));
+        previewBar = new PreviewBar(el, isOnMobileYouTube(), isOnInvidious(), isOnYTTV(), chapterVote, () => importExistingChapters(true));
 
         updatePreviewBar();
     }
@@ -688,7 +696,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         for (const segment of skipInfo.array) {
             if (shouldAutoSkip(segment) &&
                     segment.segment[0] >= skipTime[0] && segment.segment[1] <= skipTime[1]
-                    && segment.segment[0] === segment.scheduledTime) { // Don't include artifical scheduled segments (end times for mutes)
+                    && segment.segment[0] === segment.scheduledTime) { // Don't include artificial scheduled segments (end times for mutes)
                 skippingSegments.push(segment);
             }
         }
@@ -704,8 +712,11 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         if (incorrectVideoCheck(videoID, currentSkip)) return;
         forceVideoTime ||= Math.max(getCurrentTime(), getVirtualTime());
 
-        if ((shouldSkip(currentSkip) || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment))) {
+        if ((shouldSkip(currentSkip)
-            if (forceVideoTime >= skipTime[0] - skipBuffer && forceVideoTime < skipTime[1]) {
+                || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment
+                    && segment.actionType !== ActionType.Chapter
+                    && segment.hidden === SponsorHideType.Visible))) {
+            if (forceVideoTime >= skipTime[0] - skipBuffer && (forceVideoTime < skipTime[1] || skipTime[1] < skipTime[0])) {
                 skipToTime({
                     v: getVideo(),
                     skipTime,
@@ -713,7 +724,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                     openNotice: skipInfo.openNotice
                 });
 
-                // These are segments that start at the exact same time but need seperate notices
+                // These are segments that start at the exact same time but need separate notices
                 for (const extra of skipInfo.extraIndexes) {
                     const extraSkip = skipInfo.array[extra];
                     if (shouldSkip(extraSkip)) {
@@ -726,7 +737,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                     }
                 }
 
-                if (utils.getCategorySelection(currentSkip.category)?.option === CategorySkipOption.ManualSkip
+                if (getCategorySelection(currentSkip)?.option === CategorySkipOption.ManualSkip
                         || currentSkip.actionType === ActionType.Mute) {
                     forcedSkipTime = skipTime[0] + 0.001;
                 } else {
@@ -746,7 +757,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         }
 
         // Don't pretend to be earlier than we are, could result in loops
-        if (forcedSkipTime !== null && forceVideoTime > forcedSkipTime) {
+        if (forcedSkipTime !== null && forceVideoTime > forcedSkipTime && skipTime[1] > skipTime[0]) {
             forcedSkipTime = forceVideoTime;
         }
 
@@ -766,7 +777,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
 
             // Use interval instead of timeout near the end to combat imprecise video time
             const startIntervalTime = forceStartIntervalTime || performance.now();
-            const startVideoTime = Math.max(currentTime, getCurrentTime());
+            const startVideoTime = Math.max(currentTime, getVirtualTime());
             delayTime = (skipTime?.[0] - startVideoTime) * 1000 * (1 / getVideo().playbackRate);
 
             let startWaitingForReportedTimeToChange = true;
@@ -785,7 +796,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                 }
 
                 const intervalDuration = performance.now() - startIntervalTime;
-                if (intervalDuration + skipBuffer * 1000 >= delayTime || getCurrentTime() >= skipTime[0]) {
+                if (intervalDuration + skipBuffer * 1000 >= delayTime || getVirtualTime() + skipBuffer >= skipTime[0]) {
                     clearInterval(currentSkipInterval);
                     if (!isFirefoxOrSafari() && !getVideo().muted && !inMuteSegment(getCurrentTime(), true)) {
                         // Workaround for more accurate skipping on Chromium
@@ -793,7 +804,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                         getVideo().muted = false;
                     }
 
-                    skippingFunction(Math.max(getCurrentTime(), startVideoTime + getVideo().playbackRate * Math.max(delayTime, intervalDuration) / 1000));
+                    skippingFunction(Math.max(getVirtualTime(), startVideoTime + getVideo().playbackRate * Math.max(delayTime, intervalDuration) / 1000));
                 }
             }, 0);
         } else {
@@ -808,6 +819,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
             if (Config.config.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0] 
                     && !sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment)
                     && [ActionType.Skip, ActionType.Mute].includes(skippingSegments[0].actionType)
+                    && getCategorySelection(skippingSegments[0])?.option > CategorySkipOption.ShowOverlay
                     && !getVideo()?.paused) {
                 const maxPopupTime = 3000;
                 const timeUntilPopup = Math.max(0, offsetDelayTime - maxPopupTime);
@@ -836,7 +848,7 @@ function getVirtualTime(): number {
         (performance.now() - lastKnownVideoTime.preciseTime) * (getVideo()?.playbackRate || 1) / 1000 + lastKnownVideoTime.videoTime : null);
 
     if (Config.config.useVirtualTime && !isSafari() && virtualTime
-            && Math.abs(virtualTime - getCurrentTime()) < 0.2 && getCurrentTime() !== 0) {
+            && virtualTime > getCurrentTime() && virtualTime - getCurrentTime() < 0.8 && getCurrentTime() !== 0) {
         return Math.max(virtualTime, getCurrentTime());
     } else {
         return getCurrentTime();
@@ -861,7 +873,8 @@ function incorrectVideoCheck(videoID?: string, sponsorTime?: SponsorTime): boole
     const recordedVideoID = videoID || getVideoID();
     if (currentVideoID !== recordedVideoID || (sponsorTime
             && (!sponsorTimes || !sponsorTimes?.some((time) => time.segment[0] === sponsorTime.segment[0] && time.segment[1] === sponsorTime.segment[1]))
-            && !sponsorTimesSubmitting.some((time) => time.segment[0] === sponsorTime.segment[0] && time.segment[1] === sponsorTime.segment[1]))) {
+            && !sponsorTimesSubmitting.some((time) => time.segment[0] === sponsorTime.segment[0] && time.segment[1] === sponsorTime.segment[1])
+            && (!isLoopedChapter(sponsorTime)))) {
         // Something has really gone wrong
         console.error("[SponsorBlock] The videoID recorded when trying to skip is different than what it should be.");
         console.error("[SponsorBlock] VideoID recorded: " + recordedVideoID + ". Actual VideoID: " + currentVideoID);
@@ -1146,7 +1159,8 @@ function setupSkipButtonControlBar() {
                 forceAutoSkip: true
             }),
             selectSegment,
-            onMobileYouTube: isOnMobileYouTube()
+            onMobileYouTube: isOnMobileYouTube(),
+            onYTTV: isOnYTTV(),
         });
     }
 
@@ -1242,21 +1256,27 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
         }
     }
 
+    notifyPopupOfSegments();
     importExistingChapters(true);
 
+    if (Config.config.isVip) {
+        lockedCategoriesLookup();
+    }
+}
+
+function notifyPopupOfSegments(): void {
     // notify popup of segment changes
     chrome.runtime.sendMessage({
         message: "infoUpdated",
         found: sponsorDataFound,
         status: lastResponseStatus,
-        sponsorTimes: sponsorTimes,
+        sponsorTimes: sponsorTimes.filter((segment) => getCategorySelection(segment).option !== CategorySkipOption.Disabled),
         time: getCurrentTime() ?? 0,
-        onMobileYouTube: isOnMobileYouTube()
+        onMobileYouTube: isOnMobileYouTube(),
+        videoID: getVideoID(),
+        loopedChapter: loopedChapter?.UUID,
+        channelWhitelisted
     });
-
-    if (Config.config.isVip) {
-        lockedCategoriesLookup();
-    }
 }
 
 function importExistingChapters(wait: boolean) {
@@ -1339,10 +1359,12 @@ function startSkipScheduleCheckingForStartSponsors() {
         // For highlight category
         const poiSegments = sponsorTimes
             .filter((time) => time.segment[1] > getCurrentTime()
-                && time.actionType === ActionType.Poi && time.hidden === SponsorHideType.Visible)
+                && time.actionType === ActionType.Poi
+                && time.hidden === SponsorHideType.Visible
+                && getCategorySelection(time).option !== CategorySkipOption.Disabled)
             .sort((a, b) => b.segment[0] - a.segment[0]);
         for (const time of poiSegments) {
-            const skipOption = utils.getCategorySelection(time.category)?.option;
+            const skipOption = getCategorySelection(time)?.option;
             if (skipOption !== CategorySkipOption.ShowOverlay) {
                 skipToTime({
                     v: getVideo(),
@@ -1390,7 +1412,7 @@ function updatePreviewBar(): void {
     const previewBarSegments: PreviewBarSegment[] = [];
     if (sponsorTimes) {
         sponsorTimes.forEach((segment) => {
-            if (segment.hidden !== SponsorHideType.Visible) return;
+            if (segment.hidden !== SponsorHideType.Visible || getCategorySelection(segment).option === CategorySkipOption.Disabled) return;
 
             previewBarSegments.push({
                 segment: segment.segment as [number, number],
@@ -1407,15 +1429,18 @@ function updatePreviewBar(): void {
     }
 
     sponsorTimesSubmitting.forEach((segment) => {
-        previewBarSegments.push({
+        if (segment.hidden === SponsorHideType.Visible
-            segment: segment.segment as [number, number],
+                && (segment.actionType !== ActionType.Chapter || segment.segment.length > 1)) {
-            category: segment.category,
+            previewBarSegments.push({
-            actionType: segment.actionType,
+                segment: segment.segment as [number, number],
-            unsubmitted: true,
+                category: segment.category,
-            showLarger: segment.actionType === ActionType.Poi,
+                actionType: segment.actionType,
-            description: segment.description,
+                unsubmitted: true,
-            source: segment.source
+                showLarger: segment.actionType === ActionType.Poi,
-        });
+                description: segment.description,
+                source: segment.source
+            });
+        }
     });
 
     previewBar.set(previewBarSegments.filter((segment) => segment.actionType !== ActionType.Full), getVideoDuration())
@@ -1442,6 +1467,9 @@ async function channelIDChange(channelIDInfo: ChannelIDInfo) {
 
     // check if the start of segments were missed
     if (Config.config.forceChannelCheck && sponsorTimes?.length > 0) startSkipScheduleCheckingForStartSponsors();
+
+    updatePreviewBar();
+    notifyPopupOfSegments();
 }
 
 function videoElementChange(newVideo: boolean, video: HTMLVideoElement): void {
@@ -1489,9 +1517,12 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
         {array: ScheduledTime[]; index: number; endIndex: number; extraIndexes: number[]; openNotice: boolean} {
 
     const autoSkipSorter = (segment: ScheduledTime) => {
-        const skipOption = utils.getCategorySelection(segment.category)?.option;
+        const skipOption = getCategorySelection(segment)?.option;
-        if ((skipOption === CategorySkipOption.AutoSkip || shouldAutoSkip(segment))
+        if (segment.hidden !== SponsorHideType.Visible) {
-                && segment.actionType === ActionType.Skip) {
+            // Hidden segments sometimes end up here if another segment is at the same time, use them last
+            return 3;
+        } else if ((skipOption === CategorySkipOption.AutoSkip || shouldAutoSkip(segment))
+                && (segment.actionType === ActionType.Skip || segment.actionType === ActionType.Chapter)) {
             return 0;
         } else if (skipOption !== CategorySkipOption.ShowOverlay) {
             return 1;
@@ -1528,7 +1559,7 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
             array: submittedArray,
             index: minSponsorTimeIndex,
             endIndex: endTimeIndex,
-            extraIndexes, // Segments at same time that need seperate notices
+            extraIndexes, // Segments at same time that need separate notices
             openNotice: true
         };
     } else {
@@ -1563,8 +1594,16 @@ function getLatestEndTimeIndex(sponsorTimes: SponsorTime[], index: number, hideH
         return index;
     }
 
-    // Default to the normal endTime
+    let latestEndTimeIndex = -1;
-    let latestEndTimeIndex = index;
+    // Default to looped chapter if its end would have been skipped
+    if (loopedChapter
+        && (loopedChapter.segment[0] > sponsorTimes[index].segment[0]
+                && loopedChapter.segment[0] <= sponsorTimes[index]?.segment[1])){
+        latestEndTimeIndex = sponsorTimes.length - 1;
+    } else {
+        // or the normal end time otherwise 
+        latestEndTimeIndex = index;
+    }
 
     for (let i = 0; i < sponsorTimes?.length; i++) {
         const currentSegment = sponsorTimes[i].segment;
@@ -1607,7 +1646,8 @@ function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments:
     const shouldIncludeTime = (segment: ScheduledTime ) => (minimum === undefined
         || ((includeNonIntersectingSegments && segment.scheduledTime >= minimum)
             || (includeIntersectingSegments && segment.scheduledTime < minimum
-                    && segment.segment[1] > minimum && shouldSkip(segment)))) // Only include intersecting skippable segments
+                    && ((segment.segment[1] > minimum && shouldSkip(segment)) // Only include intersecting skippable segments
+                        || isLoopedChapter(segment)))))
         && (!hideHiddenSponsors || segment.hidden === SponsorHideType.Visible)
         && segment.segment.length === 2
         && segment.actionType !== ActionType.Poi
@@ -1629,6 +1669,12 @@ function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments:
         }
     });
 
+    if (loopedChapter){
+        possibleTimes.push({
+            ...loopedChapter,
+            scheduledTime: loopedChapter.segment[0]})
+    }
+
     for (let i = 0; i < possibleTimes.length; i++) {
         if (shouldIncludeTime(possibleTimes[i])) {
             scheduledTimes.push(possibleTimes[i].scheduledTime);
@@ -1695,6 +1741,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
             && getCurrentTime() !== skipTime[1]) {
         switch(skippingSegments[0].actionType) {
             case ActionType.Poi:
+            case ActionType.Chapter:
             case ActionType.Skip: {
                 // Fix for looped videos not working when skipping to the end #426
                 // for some reason you also can't skip to 1 second before the end
@@ -1778,7 +1825,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
     if (autoSkip || isSubmittingSegment) sendTelemetryAndCount(skippingSegments, skipTime[1] - skipTime[0], true);
 }
 
-function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, unskipTime: number, startReskip: boolean) {
+function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, unskipTime: number, startReskip: boolean, voteNotice = false) {
     for (const skipNotice of skipNotices) {
         if (skippingSegments.length === skipNotice.segments.length
                 && skippingSegments.every((segment) => skipNotice.segments.some((s) => s.UUID === segment.UUID))) {
@@ -1792,7 +1839,7 @@ function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, un
     const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, () => {
         upcomingNotice?.close();
         upcomingNotice = null;
-    }, unskipTime, startReskip, upcomingNoticeShown);
+    }, unskipTime, startReskip, upcomingNoticeShown, voteNotice);
     if (isOnMobileYouTube() || Config.config.skipKeybind == null) newSkipNotice.setShowKeybindHint(false);
     skipNotices.push(newSkipNotice);
 
@@ -1811,13 +1858,13 @@ function createUpcomingNotice(skippingSegments: SponsorTime[], timeLeft: number,
     upcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft / 1000, autoSkip);
 }
 
-function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false) {
+function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false, voteNotice = false) {
     if (segment.actionType === ActionType.Mute) {
         getVideo().muted = false;
         videoMuted = false;
     }
 
-    if (forceSeek || segment.actionType === ActionType.Skip) {
+    if (forceSeek || segment.actionType === ActionType.Skip || segment.actionType === ActionType.Chapter || voteNotice) {
         //add a tiny bit of time to make sure it is not skipped again
         setCurrentTime(unskipTime ?? segment.segment[0] + 0.001);
     }
@@ -1849,6 +1896,10 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.id = baseID + "Button";
     newButton.classList.add("playerButton");
     newButton.classList.add("ytp-button");
+    if (isOnYTTV()) {
+        // Some style needs to be set here, but the numbers don't matter 
+        newButton.setAttribute("style", "width: 40px; height: 40px");
+    }
     newButton.setAttribute("title", chrome.i18n.getMessage(title));
     newButton.addEventListener("click", () => {
         callback();
@@ -1878,19 +1929,30 @@ function createButton(baseID: string, title: string, callback: () => void, image
 }
 
 function shouldAutoSkip(segment: SponsorTime): boolean {
+    const canSkipNonMusic = !Config.config.skipNonMusicOnlyOnYoutubeMusic || isOnYouTubeMusic();
+    if (segment.category === "music_offtopic" && !canSkipNonMusic) {
+        return false;
+    }
+
     return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
-        && (utils.getCategorySelection(segment.category)?.option === CategorySkipOption.AutoSkip ||
+        && (getCategorySelection(segment)?.option === CategorySkipOption.AutoSkip ||
-            (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
+            (Config.config.autoSkipOnMusicVideos && canSkipNonMusic && sponsorTimes?.some((s) => s.category === "music_offtopic")
                 && segment.actionType === ActionType.Skip)
-            || sponsorTimesSubmitting.some((s) => s.segment === segment.segment));
+            || sponsorTimesSubmitting.some((s) => s.segment === segment.segment))
+        || isLoopedChapter(segment);
 }
 
 function shouldSkip(segment: SponsorTime): boolean {
-    return (segment.actionType !== ActionType.Full
+    return segment.hidden === SponsorHideType.Visible && (segment.actionType !== ActionType.Full
-            && segment.source !== SponsorSourceType.YouTube
+            && getCategorySelection(segment)?.option > CategorySkipOption.ShowOverlay)
-            && utils.getCategorySelection(segment.category)?.option !== CategorySkipOption.ShowOverlay)
             || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
-                && segment.actionType === ActionType.Skip);
+                && segment.actionType === ActionType.Skip)
+            || isLoopedChapter(segment);
+}
+
+function isLoopedChapter(segment: SponsorTime): boolean{
+    return !!segment && !!loopedChapter && segment.segment[1] != undefined
+        && segment.segment[0] === loopedChapter.segment[0] && segment.segment[1] === loopedChapter.segment[1];
 }
 
 /** Creates any missing buttons on the YouTube player if possible. */
@@ -1923,7 +1985,7 @@ async function updateVisibilityOfPlayerControlsButton(): Promise<void> {
     updateEditButtonsOnPlayer();
 
     // Don't show the info button on embeds
-    if (Config.config.hideInfoButtonPlayerControls || document.URL.includes("/embed/") || isOnInvidious()
+    if (Config.config.hideInfoButtonPlayerControls || document.URL.includes("/embed/") || isOnInvidious() || isOnYTTV()
         || document.getElementById("sponsorBlockPopupContainer") != null) {
         playerButtons.info.button.style.display = "none";
     } else {
@@ -1990,7 +2052,12 @@ function getRealCurrentTime(): number {
 }
 
 function startOrEndTimingNewSegment() {
-    verifyCurrentTime();
+    if (isOnYTTV() && getIsLivePremiere()) {
+        alert(chrome.i18n.getMessage("yttvLiveContentWarning"));
+        return;
+    }
+
+    verifyCurrentTime(getRealCurrentTime());
     const roundedTime = Math.round((getRealCurrentTime() + Number.EPSILON) * 1000) / 1000;
     if (!isSegmentCreationInProgress()) {
         sponsorTimesSubmitting.push({
@@ -2071,6 +2138,7 @@ function updateSponsorTimesSubmitting(getFromConfig = true) {
                 category: segmentTime.category,
                 actionType: segmentTime.actionType,
                 description: segmentTime.description,
+                hidden: segmentTime.hidden,
                 source: segmentTime.source
             });
         }
@@ -2405,7 +2473,7 @@ async function sendSubmitMessage(): Promise<boolean> {
         userID: Config.config.userID,
         segments: sponsorTimesSubmitting,
         videoDuration: getVideoDuration(),
-        userAgent: `${chrome.runtime.id}/v${chrome.runtime.getManifest().version}`
+        userAgent: extensionUserAgent(),
     });
 
     if (response.status === 200) {
@@ -2485,6 +2553,8 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
 }
 
 function updateActiveSegment(currentTime: number): void {
+    if (!chrome.runtime?.id) return;
+
     previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
 
     chrome.runtime.sendMessage({
@@ -2532,24 +2602,31 @@ function previousChapter(): void {
     }
 }
 
-function addHotkeyListener(): void {
+async function handleKeybindVote(type: number): Promise<void>{
-    document.addEventListener("keydown", hotkeyListener);
+    let lastSkipNotice = skipNotices[0]?.skipNoticeRef.current;
+    lastSkipNotice?.onMouseEnter();
 
-    const onLoad = () => {
+    if (!lastSkipNotice) {
-        // Allow us to stop propagation to YouTube by being deeper
+        const lastSegment = [...sponsorTimes].reverse()?.find((s) => s.source == SponsorSourceType.Server && (s.segment[0] <= getCurrentTime() && getCurrentTime() - (s.segment[1] || s.segment[0]) <= Config.config.skipNoticeDuration));
-        document.removeEventListener("keydown", hotkeyListener);
+        if (!lastSegment) return;
-        document.body.addEventListener("keydown", hotkeyListener);
 
-        addCleanupListener(() => {
+        createSkipNotice([lastSegment], shouldAutoSkip(lastSegment), lastSegment?.segment[0] + 0.001,false, true);
-            document.body.removeEventListener("keydown", hotkeyListener);
+        lastSkipNotice = await skipNotices[0].waitForSkipNoticeRef();
-        });
+        lastSkipNotice?.reskippedMode(0);
-    };
-
-    if (document.readyState === "complete") {
-        onLoad();
-    } else {
-        document.addEventListener("DOMContentLoaded", onLoad);
     }
+
+    vote(type,lastSkipNotice?.segments[0]?.UUID, undefined, lastSkipNotice);
+    return;
+}
+
+function addHotkeyListener(): void {
+    document.addEventListener("keydown", hotkeyListener, true);
+    document.addEventListener("keyup", hotkeyPropagationListener, true);
+
+    addCleanupListener(() => {
+        document.body.removeEventListener("keydown", hotkeyListener, true);
+        document.body.removeEventListener("keyup", hotkeyPropagationListener, true);
+    });
 }
 
 function hotkeyListener(e: KeyboardEvent): void {
@@ -2575,9 +2652,11 @@ function hotkeyListener(e: KeyboardEvent): void {
     const openSubmissionMenuKey = Config.config.submitKeybind;
     const nextChapterKey = Config.config.nextChapterKeybind;
     const previousChapterKey = Config.config.previousChapterKeybind;
+    const upvoteKey = Config.config.upvoteKeybind;
+    const downvoteKey = Config.config.downvoteKeybind;
 
     if (keybindEquals(key, skipKey)) {
-        if (activeSkipKeybindElement) {
+        if (activeSkipKeybindElement && !(activeSkipKeybindElement instanceof SkipButtonControlBar)) {
             activeSkipKeybindElement.toggleSkip.call(activeSkipKeybindElement);
         }
 
@@ -2618,6 +2697,38 @@ function hotkeyListener(e: KeyboardEvent): void {
         if (sponsorTimes.length > 0) e.stopPropagation();
         previousChapter();
         return;
+    } else if (keybindEquals(key, upvoteKey)) {
+        handleKeybindVote(1);
+        return;
+    } else if (keybindEquals(key, downvoteKey)) {
+        handleKeybindVote(0);
+        return;
+    }
+}
+
+function hotkeyPropagationListener(e: KeyboardEvent): void {
+    if ((["textarea", "input"].includes(document.activeElement?.tagName?.toLowerCase())
+        || (document.activeElement as HTMLElement)?.isContentEditable
+        || document.activeElement?.id?.toLowerCase()?.match(/editable|input/))
+            && document.hasFocus()) return;
+
+    const key: Keybind = {
+        key: e.key,
+        code: e.code,
+        alt: e.altKey,
+        ctrl: e.ctrlKey,
+        shift: e.shiftKey
+    };
+
+    const nextChapterKey = Config.config.nextChapterKeybind;
+    const previousChapterKey = Config.config.previousChapterKeybind;
+
+    if (keybindEquals(key, nextChapterKey)) {
+        if (sponsorTimes.length > 0) e.stopPropagation();
+        return;
+    } else if (keybindEquals(key, previousChapterKey)) {
+        if (sponsorTimes.length > 0) e.stopPropagation();
+        return;
     }
 }
 
@@ -2668,8 +2779,9 @@ function showTimeWithoutSkips(skippedDuration: number): void {
     // YouTube player time display
     const selector =
         isOnInvidious()     ? ".vjs-duration" :
+        isOnYTTV()          ? ".ypl-full-controls .ypmcs-control .time-info-bar" :
         isOnMobileYouTube() ? ".ytwPlayerTimeDisplayContent" :
-                              ".ytp-time-display.notranslate .ytp-time-wrapper";
+                              ".ytp-time-display.notranslate .ytp-time-wrapper .ytp-time-contents";
     const display = document.querySelector(selector);
     if (!display) return;
 

src/help.ts

@@ -47,6 +47,6 @@ async function init() {
     }
 
     if (!showDonationLink()) {
-        document.getElementById("sbDonate").style.display = "none";
+        document.getElementById("donate-component").style.display = "none";
     }
 }

src/js-components/previewBar.ts

@@ -3,11 +3,9 @@ Based on code from
 https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
 */
 
-'use strict';
-
 import Config from "../config";
 import { ChapterVote } from "../render/ChapterVote";
-import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types";
+import { ActionType, Category, CategorySkipOption, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types";
 import { partition } from "../utils/arrayUtils";
 import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
@@ -15,6 +13,8 @@ import { findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
 import { hasAutogeneratedChapters, isVisible } from "../utils/pageUtils";
 import { isVorapisInstalled } from "../utils/compatibility";
+import { isOnYTTV } from "../../maze-utils/src/video";
+import { getCategorySelection } from "../utils/skipRule";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -41,6 +41,12 @@ class PreviewBar {
     categoryTooltip?: HTMLDivElement;
     categoryTooltipContainer?: HTMLElement;
     chapterTooltip?: HTMLDivElement;
+
+    // ScrubTooltips for YTTV only
+    categoryScrubTooltip?: HTMLDivElement;
+    categoryScrubTooltipContainer?: HTMLElement;
+    chapterScrubTooltip?: HTMLDivElement;
+
     lastSmallestSegment: Record<string, {
         index: number;
         segment: PreviewBarSegment;
@@ -49,6 +55,7 @@ class PreviewBar {
     parent: HTMLElement;
     onMobileYouTube: boolean;
     onInvidious: boolean;
+    onYTTV: boolean;
     progressBar: HTMLElement;
 
     segments: PreviewBarSegment[] = [];
@@ -70,14 +77,19 @@ class PreviewBar {
     unfilteredChapterGroups: ChapterGroup[];
     chapterGroups: ChapterGroup[];
 
-    constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, updateExistingChapters: () => void, test=false) {
+    constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, onYTTV: boolean, chapterVote: ChapterVote, updateExistingChapters: () => void, test=false) {
         if (test) return;
         this.container = document.createElement('ul');
         this.container.id = 'previewbar';
 
+        if (onYTTV) {
+            this.container.classList.add("sponsorblock-yttv-container");
+        }
+
         this.parent = parent;
         this.onMobileYouTube = onMobileYouTube;
         this.onInvidious = onInvidious;
+        this.onYTTV = onYTTV;
         this.chapterVote = chapterVote;
         this.updateExistingChapters = updateExistingChapters;
 
@@ -97,26 +109,49 @@ class PreviewBar {
 
         // Create label placeholder
         this.categoryTooltip = document.createElement("div");
-        this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        if (isOnYTTV()) {
+            this.categoryTooltip.className = "sponsorCategoryTooltip";
+        } else {
+            this.categoryTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        }
         this.chapterTooltip = document.createElement("div");
-        this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        if (isOnYTTV()) {
+            this.chapterTooltip.className = "sponsorCategoryTooltip";
+        } else {
+            this.chapterTooltip.className = "ytp-tooltip-title sponsorCategoryTooltip";
+        }
 
-        // global chaper tooltip or duration tooltip
+        if (isOnYTTV()) {
-        // YT, Vorapis, unknown
+            this.categoryScrubTooltip = document.createElement("div");
-        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+            this.categoryScrubTooltip.className = "sponsorCategoryTooltip";
-        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip)") as HTMLElement;
+            this.chapterScrubTooltip = document.createElement("div");
+            this.chapterScrubTooltip.className = "sponsorCategoryTooltip";
+        }
+
+        // global chapter tooltip or duration tooltip
+        // YT, Vorapis, unknown, YTTV
+        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper, .ytp-progress-tooltip-text-container, .yssi-slider .ys-seek-details .time-info-bar") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
+        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip), .ytp-progress-tooltip-text:not(.sponsorCategoryTooltip), .current-time:not(.sponsorCategoryTooltip)") as HTMLElement;
         if (!tooltipTextWrapper || !tooltipTextWrapper.parentElement) return;
 
         // Grab the tooltip from the text wrapper as the tooltip doesn't have its classes on init
         this.categoryTooltipContainer = tooltipTextWrapper.parentElement;
-        // YT, Vorapis
+        // YT, Vorapis, YTTV
-        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title, .ytp-progress-tooltip-text") as HTMLElement;
+        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title, .ytp-progress-tooltip-text, .current-time") as HTMLElement;
         if (!this.categoryTooltipContainer || !titleTooltip) return;
 
         tooltipTextWrapper.insertBefore(this.categoryTooltip, titleTooltip.nextSibling);
         tooltipTextWrapper.insertBefore(this.chapterTooltip, titleTooltip.nextSibling);
 
-        const seekBar = document.querySelector(".ytp-progress-bar-container");
+        if (isOnYTTV()) {
+            const scrubTooltipTextWrapper = document.querySelector(".yssi-slider .ysl-filmstrip-lens .time-info-bar")
+            if (!this.categoryTooltipContainer) return;
+    
+            scrubTooltipTextWrapper.appendChild(this.categoryScrubTooltip);
+            scrubTooltipTextWrapper.appendChild(this.chapterScrubTooltip);
+        }
+
+        const seekBar = (document.querySelector(".ytp-progress-bar-container, .ypcs-scrub-slider-slot.ytu-player-controls"));
         if (!seekBar) return;
 
         let mouseOnSeekBar = false;
@@ -152,10 +187,6 @@ class PreviewBar {
                 // Hide original tooltip if some chapter has been filtered out
                 originalTooltip.style.display = "none";
                 noYoutubeChapters = true;
-
-                originalTooltip.classList.add("sponsorTooltipHasYTChapters");
-            } else {
-                originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
             }
 
             if (mainSegment === null && secondarySegment === null) {
@@ -163,17 +194,29 @@ class PreviewBar {
                     this.categoryTooltipContainer.classList.remove(TOOLTIP_VISIBLE_CLASS);
                     originalTooltip.style.removeProperty("display");
                 }
+                if (this.onYTTV) {
+                    this.setTooltipTitle(mainSegment, this.categoryTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterTooltip);
+                    this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
+                }
+
+                this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
             } else {
                 this.categoryTooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);
-                if (mainSegment !== null && secondarySegment !== null) {
+                const hasTwoTooltips = mainSegment !== null && secondarySegment !== null;
+                if (hasTwoTooltips) {
                     this.categoryTooltipContainer.classList.add("sponsorTwoTooltips");
-                    originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
                 } else {
                     this.categoryTooltipContainer.classList.remove("sponsorTwoTooltips");
                 }
 
                 this.setTooltipTitle(mainSegment, this.categoryTooltip);
                 this.setTooltipTitle(secondarySegment, this.chapterTooltip);
+                if (this.onYTTV) {
+                    this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
+                    this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
+                }
 
                 if (isVorapisInstalled()) {
                     const tooltipParent = tooltipTextWrapper.parentElement!;
@@ -181,11 +224,15 @@ class PreviewBar {
                 }
 
                 if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent)
-                        || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)) {
+                        || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)
+                        || !originalTooltip.textContent) {
                     if (originalTooltip.style.display !== "none") originalTooltip.style.display = "none";
+                    this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
                     noYoutubeChapters = true;
                 } else if (originalTooltip.style.display === "none") {
                     originalTooltip.style.removeProperty("display");
+                    this.categoryTooltipContainer.classList.add("sponsorHasOriginalTooltip");
+                    noYoutubeChapters = false;
                 }
 
                 // To prevent offset issue
@@ -226,7 +273,12 @@ class PreviewBar {
         }
 
         // On the seek bar
-        this.parent.prepend(this.container);
+        if (this.onYTTV) {
+            // order of sibling elements matters on YTTV
+            this.parent.insertBefore(this.container, this.parent.firstChild.nextSibling.nextSibling);
+        } else {
+            this.parent.prepend(this.container);
+        }
     }
 
     clear(): void {
@@ -248,14 +300,14 @@ class PreviewBar {
     set(segments: PreviewBarSegment[], videoDuration: number): void {
         this.segments = segments ?? [];
         this.videoDuration = videoDuration ?? 0;
-        this.hasYouTubeChapters = segments.some((segment) => segment.source === SponsorSourceType.YouTube);
+        this.hasYouTubeChapters = segments.some((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source));
 
         // Remove unnecessary original chapters if submitted replacements exist
         for (const chapter of this.segments.filter((s) => s.actionType === ActionType.Chapter && s.source === SponsorSourceType.Server)) {
             const segmentDuration = chapter.segment[1] - chapter.segment[0];
             
             const duplicate = this.segments.find((s) => s.actionType === ActionType.Chapter 
-                && s.source === SponsorSourceType.YouTube
+                && [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(s.source) 
                 && Math.abs(s.segment[0] - chapter.segment[0]) < Math.min(3, segmentDuration / 3)
                 && Math.abs(s.segment[1] - chapter.segment[1]) < Math.min(3, segmentDuration / 3));
             
@@ -303,7 +355,7 @@ class PreviewBar {
         this.chapterMargin = 2;
         if (this.originalChapterBar) {
             this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement>
-            this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]);
+            this.existingChapters = this.segments.filter((s) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(s.source)).sort((a, b) => a.segment[0] - b.segment[0]);
 
             if (this.existingChapters?.length > 0) {
                 const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
@@ -325,7 +377,7 @@ class PreviewBar {
         this.createChaptersBar(this.segments.sort((a, b) => a.segment[0] - b.segment[0]));
 
         if (chapterChevron) {
-            if (this.segments.some((segment) => segment.source === SponsorSourceType.YouTube)) {
+            if (this.segments.some((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))) {
                 chapterChevron.style.removeProperty("display");
             } else if (this.segments) {
                 chapterChevron.style.display = "none";
@@ -362,6 +414,10 @@ class PreviewBar {
             bar.style.marginRight = `${this.chapterMargin}px`;
         }
 
+        if (this.onYTTV) {
+            bar.classList.add("previewbar-yttv");
+        }
+
         return bar;
     }
 
@@ -383,10 +439,10 @@ class PreviewBar {
             this.unfilteredChapterGroups = this.createChapterRenderGroups(segments);
         }
         
-        if ((segments.every((segments) => segments.source === SponsorSourceType.YouTube)
+        if ((segments.every((segment) => [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))
             || (!Config.config.renderSegmentsAsChapters
                 && segments.every((segment) => segment.actionType !== ActionType.Chapter
-                    || segment.source === SponsorSourceType.YouTube)))
+                    || [SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source))))
             && !(hasAutogeneratedChapters() && !Config.config.showAutogeneratedChapters)) {
 
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
@@ -834,7 +890,8 @@ class PreviewBar {
         const activeSegments = segments.filter((segment) => {
             return segment.hidden === SponsorHideType.Visible
                 && segment.segment[0] <= currentTime && segment.segment[1] > currentTime
-                && segment.category !== DEFAULT_CATEGORY;
+                && segment.category !== DEFAULT_CATEGORY
+                && getCategorySelection(segment).option !== CategorySkipOption.Disabled
         });
 
         this.setActiveSegments(activeSegments);
@@ -868,8 +925,10 @@ class PreviewBar {
                 })[0];
 
                 const chapterButton = this.getChapterButton(chaptersContainer);
-                chapterButton.classList.remove("ytp-chapter-container-disabled");
+                if (chapterButton) {
-                chapterButton.disabled = false;
+                    chapterButton.classList.remove("ytp-chapter-container-disabled");
+                    chapterButton.disabled = false;
+                }
 
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
                 chapterTitle.style.display = "none";
@@ -878,6 +937,9 @@ class PreviewBar {
                     const elem = document.createElement("div");
                     chapterTitle.parentElement.insertBefore(elem, chapterTitle);
                     elem.classList.add("sponsorChapterText");
+                    if (document.location.host === "tv.youtube.com") {
+                        elem.style.lineHeight = "initial";
+                    }
                     return elem;
                 })()) as HTMLDivElement;
                 chapterCustomText.innerText = chosenSegment.description || shortCategoryName(chosenSegment.category);
@@ -890,7 +952,15 @@ class PreviewBar {
 
                 if (chosenSegment.source === SponsorSourceType.Server) {
                     const chapterVoteContainer = this.chapterVote.getContainer();
-                    if (!chapterButton.contains(chapterVoteContainer)) {
+                    if (document.location.host === "tv.youtube.com") {
+                        if (!chaptersContainer.contains(chapterVoteContainer)) {
+                            const oldVoteContainers = document.querySelectorAll("#chapterVote");
+                            if (oldVoteContainers.length > 0) {
+                                oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
+                            }
+                            chaptersContainer.appendChild(chapterVoteContainer);
+                        }
+                    } else if (!chapterButton.contains(chapterVoteContainer)) {
                         const oldVoteContainers = document.querySelectorAll("#chapterVote");
                         if (oldVoteContainers.length > 0) {
                             oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
@@ -929,6 +999,18 @@ class PreviewBar {
     }
 
     private getChaptersContainer(): HTMLElement {
+        if (document.location.host === "tv.youtube.com") {
+            if (!document.querySelector(".ytp-chapter-container")) {
+                const dest = document.querySelector(".ypcs-control-buttons-left");
+                if (!dest) return null;
+                const sbChapterContainer = document.createElement("div");
+                sbChapterContainer.className = "ytp-chapter-container";
+                const sbChapterTitleContent = document.createElement("div");
+                sbChapterTitleContent.className = "ytp-chapter-title-content";
+                sbChapterContainer.appendChild(sbChapterTitleContent);
+                dest.appendChild(sbChapterContainer);
+            }
+        }
         return document.querySelector(".ytp-chapter-container") as HTMLElement;
     }
 

src/js-components/skipButtonControlBar.ts

@@ -9,6 +9,7 @@ export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
     selectSegment: (UUID: SegmentUUID) => void;
     onMobileYouTube: boolean;
+    onYTTV: boolean;
 }
 
 export class SkipButtonControlBar {
@@ -21,6 +22,7 @@ export class SkipButtonControlBar {
 
     showKeybindHint = true;
     onMobileYouTube: boolean;
+    onYTTV: boolean;
 
     enabled = false;
 
@@ -40,6 +42,7 @@ export class SkipButtonControlBar {
     constructor(props: SkipButtonControlBarProps) {
         this.skip = props.skip;
         this.onMobileYouTube = props.onMobileYouTube;
+        this.onYTTV = props.onYTTV;
 
         this.container = document.createElement("div");
         this.container.classList.add("skipButtonControlBarContainer");
@@ -50,6 +53,10 @@ export class SkipButtonControlBar {
         this.skipIcon.src = chrome.runtime.getURL("icons/skipIcon.svg");
         this.skipIcon.classList.add("ytp-button");
         this.skipIcon.id = "sbSkipIconControlBarImage";
+        if (this.onYTTV) {
+            this.skipIcon.style.width = "24px";
+            this.skipIcon.style.height = "24px";
+        }
 
         this.textContainer = document.createElement("div");
 
@@ -84,7 +91,7 @@ export class SkipButtonControlBar {
         this.chapterText = document.querySelector(".ytp-chapter-container");
 
         if (mountingContainer && !mountingContainer.contains(this.container)) {
-            if (this.onMobileYouTube) {
+            if (this.onMobileYouTube || this.onYTTV) {
                 mountingContainer.appendChild(this.container);
             } else {
                 mountingContainer.insertBefore(this.container, this.chapterText);
@@ -101,8 +108,10 @@ export class SkipButtonControlBar {
     }
 
     private getMountingContainer(): HTMLElement {
-        if (!this.onMobileYouTube) {
+        if (!this.onMobileYouTube && !this.onYTTV) {
             return document.querySelector(".ytp-left-controls");
+        } else if (this.onYTTV) {
+            return document.querySelector(".ypcs-control-buttons-left");
         } else {
             return document.getElementById("player-container-id");
         }

src/messageTypes.ts

@@ -2,7 +2,7 @@
 // Message and Response Types
 //
 
-import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
+import { SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "./types";
 
 interface BaseMessage {
     from?: string;
@@ -12,9 +12,7 @@ interface DefaultMessage {
     message:
         "update"
         | "sponsorStart"
-        | "getVideoID"
         | "getChannelID"
-        | "isChannelWhitelisted"
         | "submitTimes"
         | "refreshSegments"
         | "closePopup"
@@ -58,6 +56,11 @@ interface ImportSegmentsMessage {
     data: string;
 }
 
+interface LoopChapterMessage {
+    message: "loopChapter";
+    UUID: SegmentUUID;
+}
+
 interface KeyDownMessage {
     message: "keydown";
     key: string;
@@ -70,7 +73,7 @@ interface KeyDownMessage {
     metaKey: boolean;
 }
 
-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage);
+export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage | CopyToClipboardMessage | ImportSegmentsMessage | KeyDownMessage | LoopChapterMessage);
 
 export interface IsInfoFoundMessageResponse {
     found: boolean;
@@ -78,6 +81,9 @@ export interface IsInfoFoundMessageResponse {
     sponsorTimes: SponsorTime[];
     time: number;
     onMobileYouTube: boolean;
+    videoID: VideoID;
+    loopedChapter: SegmentUUID | null;
+    channelWhitelisted: boolean;
 }
 
 interface GetVideoIdResponse {
@@ -86,6 +92,7 @@ interface GetVideoIdResponse {
 
 export interface GetChannelIDResponse {
     channelID: string;
+    isYTTV: boolean;
 }
 
 export interface SponsorStartResponse {
@@ -96,6 +103,10 @@ export interface IsChannelWhitelistedResponse {
     value: boolean;
 }
 
+export interface LoopedChapterResponse {
+    UUID: SegmentUUID;
+}
+
 export type MessageResponse =
     IsInfoFoundMessageResponse
     | GetVideoIdResponse
@@ -106,7 +117,8 @@ export type MessageResponse =
     | VoteResponse
     | ImportSegmentsResponse
     | RefreshSegmentsResponse
-    | LogResponse;
+    | LogResponse
+    | LoopedChapterResponse;
 
 export interface VoteResponse {
     successType: number;

src/options.ts

@@ -18,6 +18,7 @@ import { getHash } from "../maze-utils/src/hash";
 import { isFirefoxOrSafari } from "../maze-utils/src";
 import { isDeArrowInstalled } from "./utils/crossExtension";
 import { asyncRequestToServer } from "./utils/requests";
+import AdvancedSkipOptions from "./render/AdvancedSkipOptions";
 const utils = new Utils();
 let embed = false;
 
@@ -114,8 +115,25 @@ async function init() {
 
         if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
             optionsElements[i].classList.add("hidden", "hiding");
-            if (!dependentOn)
+            if (!dependentOn) {
+                if (optionsElements[i].getAttribute("data-no-safari") === "true" && optionsElements[i].id === "support-invidious") {
+                    // Put message about being disabled on safari
+                    const infoBox = document.createElement("div");
+                    infoBox.innerText = chrome.i18n.getMessage("invidiousDisabledSafari");
+                    
+                    const link = document.createElement("a");
+                    link.style.display = "block";
+                    const url = "https://bugs.webkit.org/show_bug.cgi?id=290508";
+                    link.href = url;
+                    link.innerText = url;
+
+                    infoBox.appendChild(link);
+
+                    optionsElements[i].parentElement.insertBefore(infoBox, optionsElements[i].nextSibling);
+                }
+
                 continue;
+            }
         }
 
         const option = optionsElements[i].getAttribute("data-sync");
@@ -333,6 +351,9 @@ async function init() {
             case "react-CategoryChooserComponent":
                 categoryChoosers.push(new CategoryChooser(optionsElements[i]));
                 break;
+            case "react-AdvancedSkipOptionsComponent":
+                new AdvancedSkipOptions(optionsElements[i]);
+                break;
             case "react-UnsubmittedVideosComponent":
                 unsubmittedVideos.push(new UnsubmittedVideos(optionsElements[i]));
                 break;

src/popup/PopupComponent.tsx

@@ -0,0 +1,460 @@
+import * as React from "react";
+import { YourWorkComponent } from "./YourWorkComponent";
+// import { ToggleOptionComponent } from "./ToggleOptionComponent";
+// import { FormattingOptionsComponent } from "./FormattingOptionsComponent";
+import { isSafari } from "../../maze-utils/src/config";
+import { showDonationLink } from "../utils/configUtils";
+import Config, { generateDebugDetails } from "../config";
+import { GetChannelIDResponse, IsInfoFoundMessageResponse, LogResponse, Message, MessageResponse, PopupMessage } from "../messageTypes";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { SegmentListComponent } from "./SegmentListComponent";
+import { ActionType, SegmentUUID, SponsorSourceType, SponsorTime } from "../types";
+import { SegmentSubmissionComponent } from "./SegmentSubmissionComponent";
+import { copyToClipboardPopup } from "./popupUtils";
+
+export enum LoadingStatus {
+    Loading,
+    SegmentsFound,
+    NoSegmentsFound,
+    ConnectionError,
+    StillLoading,
+    NoVideo
+}
+
+export interface LoadingData {
+    status: LoadingStatus;
+    code?: number;
+}
+
+let loadRetryCount = 0;
+
+export const PopupComponent = () => {
+    const [status, setStatus] = React.useState<LoadingData>({
+        status: LoadingStatus.Loading
+    });
+    const [extensionEnabled, setExtensionEnabled] = React.useState(!Config.config!.disableSkipping);
+    const [channelWhitelisted, setChannelWhitelisted] = React.useState<boolean | null>(null);
+    const [showForceChannelCheckWarning, setShowForceChannelCheckWarning] = React.useState(false);
+    const [showNoticeButton, setShowNoticeButton] = React.useState(Config.config!.dontShowNotice);
+
+    const [currentTime, setCurrentTime] = React.useState<number>(0);
+    const [segments, setSegments] = React.useState<SponsorTime[]>([]);
+    const [loopedChapter, setLoopedChapter] = React.useState<SegmentUUID | null>(null);
+
+    const [videoID, setVideoID] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        loadSegments({
+            updating: false,
+            setStatus,
+            setChannelWhitelisted,
+            setVideoID,
+            setCurrentTime,
+            setSegments,
+            setLoopedChapter
+        });
+
+        setupComPort({
+            setStatus,
+            setChannelWhitelisted,
+            setVideoID,
+            setCurrentTime,
+            setSegments,
+            setLoopedChapter
+        });
+
+        forwardClickEvents(sendMessage);
+    }, []);
+
+    return (
+        <div id="sponsorblockPopup">
+            {
+                window !== window.top &&
+                <button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
+                    sendMessage({ message: "closePopup" });
+                }}>
+                    <img src="icons/close.png" width="15" height="15" alt="Close icon"/>
+                </button>
+            }
+
+            {
+                Config.config!.testingServer &&
+                <div id="sbBetaServerWarning"
+                        title={chrome.i18n.getMessage("openOptionsPage")}
+                        onClick={() => {
+                            chrome.runtime.sendMessage({ "message": "openConfig", "hash": "advanced" });
+                        }}>
+                    {chrome.i18n.getMessage("betaServerWarning")}
+                </div>
+            }
+
+            <header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
+                <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock Logo" width="40" height="40" id="sponsorBlockPopupLogo"/>
+                <p className="u-mZ">
+                    SponsorBlock
+                </p>
+            </header>
+
+            <p id="videoFound" 
+                    className={"u-mZ grey-text " + (Config.config.cleanPopup ? "cleanPopupMargin" : "")}>
+                {getVideoStatusText(status)}
+            </p>
+
+            <button id="refreshSegmentsButton" title={chrome.i18n.getMessage("refreshSegments")} onClick={(e) => {
+                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+
+                sendMessage({ message: "refreshSegments" }).then(() => {
+                    loadSegments({
+                        updating: true,
+                        setStatus,
+                        setChannelWhitelisted,
+                        setVideoID,
+                        setCurrentTime,
+                        setSegments,
+                        setLoopedChapter
+                    }).then(() => stopAnimation());
+                });
+
+            }}>
+                <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
+            </button>
+
+            <SegmentListComponent
+                videoID={videoID}
+                currentTime={currentTime}
+                status={status.status}
+                segments={segments}
+                loopedChapter={loopedChapter}
+                sendMessage={sendMessage} />
+
+            {/* Toggle Box */}
+            <div className="sbControlsMenu">
+                {/* github: mbledkowski/toggle-switch */}
+                {channelWhitelisted !== null && (
+                    <label id="whitelistButton" htmlFor="whitelistToggle" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
+                        <input type="checkbox" 
+                            style={{ "display": "none" }} 
+                            id="whitelistToggle" 
+                            checked={channelWhitelisted}
+                            onChange={async (e) => {
+                                const response = await sendMessage({ message: 'getChannelID' }) as GetChannelIDResponse;
+                                if (!response.channelID) {
+                                    if (response.isYTTV) {
+                                        alert(chrome.i18n.getMessage("yttvNoChannelWhitelist"));
+                                    } else {
+                                        alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
+                                    }
+
+                                    return;
+                                }
+
+                                const whitelistedChannels = Config.config.whitelistedChannels ?? [];
+                                if (e.target.checked) {
+                                    whitelistedChannels.splice(whitelistedChannels.indexOf(response.channelID), 1);
+                                } else {
+                                    whitelistedChannels.push(response.channelID);
+                                }
+                                Config.config.whitelistedChannels = whitelistedChannels;
+
+                                setChannelWhitelisted(!e.target.checked);
+                                if (!Config.config.forceChannelCheck) setShowForceChannelCheckWarning(true);
+
+                                // Send a message to the client
+                                sendMessage({
+                                    message: 'whitelistChange',
+                                    value: !e.target.checked
+                                });
+
+                            }}/>
+                        <svg viewBox="0 0 24 24" width="23" height="23" className={"SBWhitelistIcon sbControlsMenu-itemIcon " + (channelWhitelisted ? " rotated" : "")}>
+                            <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
+                        </svg>
+                        <span id="whitelistChannel" className={channelWhitelisted ? " hidden" : ""}>
+                            {chrome.i18n.getMessage("whitelistChannel")}
+                        </span>
+                        <span id="unwhitelistChannel" className={!channelWhitelisted ? " hidden" : ""}>
+                            {chrome.i18n.getMessage("removeFromWhitelist")}
+                        </span>
+                    </label>
+                )}
+                <label id="disableExtension" htmlFor="toggleSwitch" className="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex={0}>
+                    <span className="toggleSwitchContainer-switch">
+                        <input type="checkbox" 
+                            style={{ "display": "none" }} 
+                            id="toggleSwitch" 
+                            checked={extensionEnabled}
+                            onChange={(e) => {
+                                Config.config!.disableSkipping = !e.target.checked;
+                                setExtensionEnabled(e.target.checked)
+                            }}/>
+                        <span className="switchBg shadow"></span>
+                        <span className="switchBg white"></span>
+                        <span className="switchBg green"></span>
+                        <span className="switchDot"></span>
+                    </span>
+                    <span id="disableSkipping" className={extensionEnabled ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("enableSkipping")}
+                    </span>
+                    <span id="enableSkipping" className={!extensionEnabled ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("disableSkipping")}
+                    </span>
+                </label>
+                <button id="optionsButton" 
+                    className="sbControlsMenu-item" 
+                    title={chrome.i18n.getMessage("Options")}
+                    onClick={() => {
+                        chrome.runtime.sendMessage({ "message": "openConfig" });
+                    }}>
+                <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" className="sbControlsMenu-itemIcon" id="sbPopupIconSettings" />
+                    {chrome.i18n.getMessage("Options")}
+                </button>
+            </div>
+
+            {
+                showForceChannelCheckWarning &&
+                <a id="whitelistForceCheck" onClick={() => {
+                    chrome.runtime.sendMessage({ "message": "openConfig", "hash": "behavior" });
+                }}>
+                    {chrome.i18n.getMessage("forceChannelCheckPopup")}
+                </a>
+            }
+
+            {
+                !Config.config.cleanPopup &&
+                <SegmentSubmissionComponent
+                    videoID={videoID || ""}
+                    status={status.status}
+                    sendMessage={sendMessage} />
+            }
+            
+
+            {/* Your Work box */}
+            {
+                !Config.config.cleanPopup &&
+                <YourWorkComponent/>
+            }
+
+            {/* Footer */}
+            {
+                !Config.config.cleanPopup &&
+                <footer id="sbFooter">
+                    <a id="helpButton"
+                        onClick={() => {
+                            chrome.runtime.sendMessage({ "message": "openHelp" });
+                        }}>
+                            {chrome.i18n.getMessage("help")}
+                    </a>
+                    <a href="https://sponsor.ajay.app" target="_blank" rel="noreferrer">
+                        {chrome.i18n.getMessage("website")}
+                    </a>
+                    <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noreferrer" className={isSafari() ? " hidden" : ""}>
+                        {chrome.i18n.getMessage("viewLeaderboard")}
+                    </a>
+                    <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" className={!showDonationLink() ? " hidden" : ""} onClick={() => {
+                        Config.config!.donateClicked = Config.config!.donateClicked + 1;
+                    }}>
+                        {chrome.i18n.getMessage("Donate")}
+                    </a>
+                    <br />
+                    <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noreferrer">
+                        GitHub
+                    </a>
+                    <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noreferrer">
+                        Discord
+                    </a>
+                    <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noreferrer">
+                        Matrix
+                    </a>
+                    <a href="https://wiki.sponsor.ajay.app/w/Guidelines" target="_blank" rel="noreferrer">
+                        {chrome.i18n.getMessage("guidelines")}
+                    </a>
+                    <br />
+                    <a id="debugLogs"
+                            onClick={async () => {
+                                const logs = await sendMessage({ message: "getLogs" }) as LogResponse;
+
+                                copyToClipboardPopup(`${generateDebugDetails()}\n\nWarn:\n${logs.warn.join("\n")}\n\nDebug:\n${logs.debug.join("\n")}`, sendMessage);
+                            }}>
+                        {chrome.i18n.getMessage("copyDebugLogs")}
+                    </a>
+                </footer>
+            }
+
+            {
+                showNoticeButton &&
+                <button id="showNoticeAgain" onClick={() => {
+                    Config.config!.dontShowNotice = false;
+                    setShowNoticeButton(false);
+                }}>
+                    { chrome.i18n.getMessage("showNotice") }
+                </button>
+            }
+        </div>
+    );
+};
+
+function getVideoStatusText(status: LoadingData): string {
+    switch (status.status) {
+        case LoadingStatus.Loading:
+            return chrome.i18n.getMessage("Loading");
+        case LoadingStatus.SegmentsFound:
+            return chrome.i18n.getMessage("sponsorFound");
+        case LoadingStatus.NoSegmentsFound:
+            return chrome.i18n.getMessage("sponsor404");
+        case LoadingStatus.ConnectionError:
+            return chrome.i18n.getMessage("connectionError") + status.code;
+        case LoadingStatus.StillLoading:
+            return chrome.i18n.getMessage("segmentsStillLoading");
+        case LoadingStatus.NoVideo:
+            return chrome.i18n.getMessage("noVideoID");
+    }
+}
+
+interface SegmentsLoadedProps {
+    setStatus: (status: LoadingData) => void;
+    setChannelWhitelisted: (whitelisted: boolean | null) => void;
+    setVideoID: (videoID: string | null) => void;
+    setCurrentTime: (time: number) => void;
+    setSegments: (segments: SponsorTime[]) => void;
+    setLoopedChapter: (loopedChapter: SegmentUUID | null) => void;
+}
+
+interface LoadSegmentsProps extends SegmentsLoadedProps {
+    updating: boolean;
+}
+
+async function loadSegments(props: LoadSegmentsProps): Promise<void> {
+    const response = await sendMessage({ message: "isInfoFound", updating: props.updating }) as IsInfoFoundMessageResponse;
+
+    if (response && response.videoID) {
+        segmentsLoaded(response, props);
+    } else {
+        // Handle error if it exists
+        chrome.runtime.lastError;
+
+        props.setStatus({
+            status: LoadingStatus.NoVideo,
+        });
+
+        if (!props.updating) {
+            loadRetryCount++;
+            if (loadRetryCount < 6) {
+                setTimeout(() => loadSegments(props), 100 * loadRetryCount);
+            }
+        }
+    }
+}
+
+function segmentsLoaded(response: IsInfoFoundMessageResponse, props: SegmentsLoadedProps): void {
+    if (response.found) {
+        props.setStatus({
+            status: LoadingStatus.SegmentsFound
+        });
+    } else if (response.status === 404 || response.status === 200) {
+        props.setStatus({
+            status: LoadingStatus.NoSegmentsFound
+        });
+    } else if (response.status) {
+        props.setStatus({
+            status: LoadingStatus.ConnectionError,
+            code: response.status
+        });
+    } else {
+        props.setStatus({
+            status: LoadingStatus.StillLoading
+        });
+    }
+
+    
+    props.setVideoID(response.videoID);
+    props.setCurrentTime(response.time);
+    props.setChannelWhitelisted(response.channelWhitelisted);
+    props.setSegments((response.sponsorTimes || [])
+        .filter((segment) => segment.source === SponsorSourceType.Server)
+        .sort((a, b) => b.segment[1] - a.segment[1])
+        .sort((a, b) => a.segment[0] - b.segment[0])
+        .sort((a, b) => a.actionType === ActionType.Full ? -1 : b.actionType === ActionType.Full ? 1 : 0));
+    props.setLoopedChapter(response.loopedChapter);
+}
+
+function sendMessage(request: Message): Promise<MessageResponse> {
+    return new Promise((resolve) => {
+        if (chrome.tabs) {
+            chrome.tabs.query({
+                active: true,
+                currentWindow: true
+            }, (tabs) => chrome.tabs.sendMessage(tabs[0].id, request, resolve));
+        } else {
+            chrome.runtime.sendMessage({ message: "tabs", data: request }, resolve);
+        }
+    });
+}
+
+interface ComPortProps extends SegmentsLoadedProps {
+}
+
+function setupComPort(props: ComPortProps): void {
+    const port = chrome.runtime.connect({ name: "popup" });
+    port.onDisconnect.addListener(() => setupComPort(props));
+    port.onMessage.addListener((msg) => onMessage(props, msg));
+}
+
+function onMessage(props: ComPortProps, msg: PopupMessage) {
+    switch (msg.message) {
+        case "time":
+            props.setCurrentTime(msg.time);
+            break;
+        case "infoUpdated":
+            segmentsLoaded(msg, props);
+            break;
+        case "videoChanged":
+            props.setStatus({
+                status: LoadingStatus.StillLoading
+            });
+            props.setVideoID(msg.videoID);
+            props.setChannelWhitelisted(msg.whitelisted);
+            props.setSegments([]);
+            break;
+    }
+}
+
+function forwardClickEvents(sendMessage: (request: Message) => Promise<MessageResponse>): void {
+    if (window !== window.top) {
+        document.addEventListener("keydown", (e) => {
+            const target = e.target as HTMLElement;
+            if (target.tagName === "INPUT"
+                || target.tagName === "TEXTAREA"
+                || e.key === "ArrowUp"
+                || e.key === "ArrowDown") {
+                return;
+            }
+
+            if (e.key === " ") {
+                // No scrolling
+                e.preventDefault();
+            }
+
+            sendMessage({
+                message: "keydown",
+                key: e.key,
+                keyCode: e.keyCode,
+                code: e.code,
+                which: e.which,
+                shiftKey: e.shiftKey,
+                ctrlKey: e.ctrlKey,
+                altKey: e.altKey,
+                metaKey: e.metaKey
+            });
+        });
+    }
+}
+
+// Copy over styles from parent window
+window.addEventListener("message", async (e): Promise<void> => {
+    if (e.source !== window.parent) return;
+    if (e.origin.endsWith(".youtube.com") && e.data && e.data?.type === "style") {
+        const style = document.createElement("style");
+        style.textContent = e.data.css;
+        document.head.appendChild(style);
+    }
+});

src/popup/SegmentListComponent.tsx

@@ -0,0 +1,436 @@
+import * as React from "react";
+import { ActionType, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
+import Config from "../config";
+import { waitFor } from "../../maze-utils/src";
+import { shortCategoryName } from "../utils/categoryUtils";
+import { getErrorMessage, getFormattedTime } from "../../maze-utils/src/formating";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { asyncRequestToServer } from "../utils/requests";
+import { Message, MessageResponse, VoteResponse } from "../messageTypes";
+import { LoadingStatus } from "./PopupComponent";
+import GenericNotice from "../render/GenericNotice";
+import { exportTimes } from "../utils/exporter";
+import { copyToClipboardPopup } from "./popupUtils";
+
+interface SegmentListComponentProps {
+    videoID: VideoID;
+    currentTime: number;
+    status: LoadingStatus;
+    segments: SponsorTime[];
+    loopedChapter: SegmentUUID | null;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+enum SegmentListTab {
+    Segments,
+    Chapter
+}
+
+export const SegmentListComponent = (props: SegmentListComponentProps) => {
+    const [tab, setTab] = React.useState(SegmentListTab.Segments);
+    const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
+
+    React.useEffect(() => {
+        if (!Config.isReady()) {
+            waitFor(() => Config.isReady()).then(() => {
+                setIsVip(Config.config.isVip);
+            });
+        } else {
+            setIsVip(Config.config.isVip);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        setTab(SegmentListTab.Segments);
+    }, [props.videoID]);
+
+    const tabFilter = (segment: SponsorTime) => {
+        if (tab === SegmentListTab.Chapter) {
+            return segment.actionType === ActionType.Chapter;
+        } else {
+            return segment.actionType !== ActionType.Chapter;
+        }
+    };
+
+    return (
+        <div id="issueReporterContainer">
+            <div id="issueReporterTabs" className={props.segments && props.segments.find(s => s.actionType === ActionType.Chapter) ? "" : "hidden"}>
+                <span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => {
+                    setTab(SegmentListTab.Segments);
+                }}>
+                    <span>{chrome.i18n.getMessage("SegmentsCap")}</span>
+                </span>
+                <span id="issueReporterTabChapters" className={tab === SegmentListTab.Chapter ? "sbSelected" : ""} onClick={() => {
+                    setTab(SegmentListTab.Chapter);
+                }}>
+                    <span>{chrome.i18n.getMessage("Chapters")}</span>
+                </span>
+            </div>
+            <div id="issueReporterTimeButtons"
+                    onMouseLeave={() => selectSegment({
+                        segment: null,
+                        sendMessage: props.sendMessage
+                    })}>
+                {
+                    props.segments.map((segment) => (
+                        <SegmentListItem
+                            key={segment.UUID}
+                            videoID={props.videoID}
+                            segment={segment}
+                            currentTime={props.currentTime}
+                            isVip={isVip}
+                            startingLooped={props.loopedChapter === segment.UUID}
+
+                            tabFilter={tabFilter}
+                            sendMessage={props.sendMessage}
+                        />
+                    ))
+                }
+            </div>
+            
+            <ImportSegments
+                status={props.status}
+                segments={props.segments}
+                sendMessage={props.sendMessage}
+            />
+        </div>
+    );
+};
+
+function SegmentListItem({ segment, videoID, currentTime, isVip, startingLooped, tabFilter, sendMessage }: {
+    segment: SponsorTime;
+    videoID: VideoID;
+    currentTime: number;
+    isVip: boolean;
+    startingLooped: boolean;
+    
+    tabFilter: (segment: SponsorTime) => boolean;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}) {
+    const [voteMessage, setVoteMessage] = React.useState<string | null>(null);
+    const [hidden, setHidden] = React.useState(segment.hidden || SponsorHideType.Visible);
+    const [isLooped, setIsLooped] = React.useState(startingLooped);
+
+    let extraInfo = "";
+    if (segment.hidden === SponsorHideType.Downvoted) {
+        // This one is downvoted
+        extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
+    } else if (segment.hidden === SponsorHideType.MinimumDuration) {
+        // This one is too short
+        extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
+    } else if (segment.hidden === SponsorHideType.Hidden) {
+        extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
+    }
+
+    return (
+        <details data-uuid={segment.UUID}
+                onDoubleClick={() => skipSegment({
+                    segment,
+                    sendMessage
+                })}
+                onMouseEnter={() => {
+                    selectSegment({
+                        segment,
+                        sendMessage
+                    });
+                }}
+                className={"votingButtons " + (!tabFilter(segment) ? "hidden" : "")}>
+            <summary className={"segmentSummary " + (
+                currentTime >= segment.segment[0] ? (
+                    currentTime < segment.segment[1] ? "segmentActive" : "segmentPassed"
+                ) : ""
+            )}>
+                <div>
+                    {
+                        segment.actionType !== ActionType.Chapter &&
+                        <span className="sponsorTimesCategoryColorCircle dot" style={{ backgroundColor: Config.config.barTypes[segment.category]?.color }}></span>
+                    }
+                    <span className="summaryLabel">{(segment.description || shortCategoryName(segment.category)) + extraInfo}</span>
+                </div>
+
+                <div style={{ margin: "5px" }}>
+                    {
+                        segment.actionType === ActionType.Full ? chrome.i18n.getMessage("full") :
+                        (getFormattedTime(segment.segment[0], true) +
+                            (segment.actionType !== ActionType.Poi
+                                ? " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segment.segment[1], true)
+                                : ""))
+                    }
+                </div>
+            </summary>
+
+            <div className={"sbVoteButtonsContainer " + (voteMessage ? "hidden" : "")}>
+                <img
+                    className="voteButton"
+                    title="Upvote"
+                    src={chrome.runtime.getURL("icons/thumbs_up.svg")}
+                    onClick={() => {
+                        vote({
+                            type: 1,
+                            UUID: segment.UUID,
+                            setVoteMessage: setVoteMessage,
+                            sendMessage
+                        });
+                    }}/>
+                <img
+                    className="voteButton"
+                    title="Downvote"
+                    src={segment.locked && isVip ? chrome.runtime.getURL("icons/thumbs_down_locked.svg") : chrome.runtime.getURL("icons/thumbs_down.svg")}
+                    onClick={() => {
+                        vote({
+                            type: 0,
+                            UUID: segment.UUID,
+                            setVoteMessage: setVoteMessage,
+                            sendMessage
+                        });
+                    }}/>
+                <img
+                    className="voteButton"
+                    title="Copy Segment ID"
+                    src={chrome.runtime.getURL("icons/clipboard.svg")}
+                    onClick={async (e) => {
+                        const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+
+                        if (segment.UUID.length > 60) {
+                            copyToClipboardPopup(segment.UUID, sendMessage);
+                        } else {
+                            const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                                UUID: segment.UUID,
+                                videoID: videoID
+                            });
+                
+                            if (segmentIDData.ok && segmentIDData.responseText) {
+                                copyToClipboardPopup(segmentIDData.responseText, sendMessage);
+                            }
+                        }
+
+                        stopAnimation();
+                    }}/>
+                {
+                    segment.actionType === ActionType.Chapter &&
+                    <img
+                        className="voteButton"
+                        title={isLooped ? chrome.i18n.getMessage("unloopChapter") : chrome.i18n.getMessage("loopChapter")}
+                        src={isLooped ? chrome.runtime.getURL("icons/looped.svg") : chrome.runtime.getURL("icons/loop.svg")}
+                        onClick={(e) => {
+                            if (isLooped) {
+                                loopChapter({
+                                    segment: null,
+                                    element: e.currentTarget,
+                                    sendMessage
+                                });
+                            } else {
+                                loopChapter({
+                                    segment,
+                                    element: e.currentTarget,
+                                    sendMessage
+                                });
+                            }
+
+                            setIsLooped(!isLooped);
+                        }}/>
+                }
+                {
+                    (segment.actionType === ActionType.Skip || segment.actionType === ActionType.Mute
+                        || segment.actionType === ActionType.Poi
+                        && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segment.hidden)) &&
+                    <img
+                        className="voteButton"
+                        title={chrome.i18n.getMessage("hideSegment")}
+                        src={hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
+                        onClick={(e) => {
+                            const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
+                            stopAnimation();
+
+                            if (segment.hidden === SponsorHideType.Hidden) {
+                                segment.hidden = SponsorHideType.Visible;
+                                setHidden(SponsorHideType.Visible);
+                            } else {
+                                segment.hidden = SponsorHideType.Hidden;
+                                setHidden(SponsorHideType.Hidden);
+                            }
+
+                            sendMessage({
+                                message: "hideSegment",
+                                type: segment.hidden,
+                                UUID: segment.UUID
+                            });
+                        }}/>
+                }
+                {
+                    segment.actionType !== ActionType.Full &&
+                    <img
+                        className="voteButton"
+                        title={segment.actionType === ActionType.Chapter ? chrome.i18n.getMessage("playChapter") : chrome.i18n.getMessage("skipSegment")}
+                        src={chrome.runtime.getURL("icons/skip.svg")}
+                        onClick={(e) => {
+                            skipSegment({
+                                segment,
+                                element: e.currentTarget,
+                                sendMessage
+                            });
+                        }}/>
+                }
+            </div>
+
+            <div className={"sponsorTimesVoteStatusContainer " + (voteMessage ? "" : "hidden")}>
+                <div className="sponsorTimesThanksForVotingText">
+                    {voteMessage}
+                </div>
+            </div>
+        </details>
+    );
+}
+
+async function vote(props: {
+    type: number;
+    UUID: SegmentUUID;
+    setVoteMessage: (message: string | null) => void;
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): Promise<void> {
+    props.setVoteMessage(chrome.i18n.getMessage("Loading"));
+
+    const response = await props.sendMessage({
+        message: "submitVote",
+        type: props.type,
+        UUID: props.UUID
+    }) as VoteResponse;
+
+    if (response != undefined) {
+        // See if it was a success or failure
+        if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+            // Success (treat rate limits as a success)
+            props.setVoteMessage(chrome.i18n.getMessage("voted"));
+        } else if (response.successType == -1) {
+            props.setVoteMessage(getErrorMessage(response.statusCode, response.responseText));
+        }
+        setTimeout(() => props.setVoteMessage(null), 1500);
+    }
+}
+
+function skipSegment({ segment, element, sendMessage }: {
+    segment: SponsorTime;
+    element?: HTMLElement;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    if (segment.actionType === ActionType.Chapter) {
+        sendMessage({
+            message: "unskip",
+            UUID: segment.UUID
+        });
+    } else {
+        sendMessage({
+            message: "reskip",
+            UUID: segment.UUID
+        });
+    }
+
+    if (element) {
+        const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
+        stopAnimation();
+    }
+}
+
+function selectSegment({ segment, sendMessage }: {
+    segment: SponsorTime | null;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    sendMessage({
+        message: "selectSegment",
+        UUID: segment?.UUID
+    });
+}
+
+function loopChapter({ segment, element, sendMessage }: {
+    segment: SponsorTime;
+    element: HTMLElement;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}): void {
+    sendMessage({
+        message: "loopChapter",
+        UUID: segment?.UUID
+    });
+
+    if (element) {
+        const stopAnimation = AnimationUtils.applyLoadingAnimation(element, 0.3);
+        stopAnimation();
+    }
+}
+
+interface ImportSegmentsProps {
+    status: LoadingStatus;
+    segments: SponsorTime[];
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+function ImportSegments(props: ImportSegmentsProps) {
+    const [importMenuVisible, setImportMenuVisible] = React.useState(false);
+    const textArea = React.useRef<HTMLTextAreaElement>(null);
+
+    return (
+        <div id="issueReporterImportExport" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
+            <div id="importExportButtons">
+            <button id="importSegmentsButton"
+                    className={props.status === LoadingStatus.SegmentsFound || props.status === LoadingStatus.NoSegmentsFound ? "" : "hidden"}
+                    title={chrome.i18n.getMessage("importSegments")}
+                    onClick={() => {
+                        setImportMenuVisible(!importMenuVisible);
+                    }}>
+                <img src="/icons/import.svg" alt="Import icon" id="importSegments" />
+            </button>
+            <button id="exportSegmentsButton"
+                    className={props.segments.length === 0 ? "hidden" : ""}
+                    title={chrome.i18n.getMessage("exportSegments")}
+                    onClick={(e) => {
+                        copyToClipboardPopup(exportTimes(props.segments), props.sendMessage);
+
+                        const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.3);
+                        stopAnimation();
+                        new GenericNotice(null, "exportCopied", {
+                            title:  chrome.i18n.getMessage(`CopiedExclamation`),
+                            timed: true,
+                            maxCountdownTime: () => 0.6,
+                            referenceNode: e.currentTarget.parentElement,
+                            dontPauseCountdown: true,
+                            style: {
+                                top: 0,
+                                bottom: 0,
+                                minWidth: 0,
+                                right: "30px",
+                                margin: "auto",
+                                height: "max-content"
+                            },
+                            hideLogo: true,
+                            hideRightInfo: true
+                        });
+                    }}>
+                <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
+            </button>
+            </div>
+
+            <span id="importSegmentsMenu" className={importMenuVisible ? "" : "hidden"}>
+                <textarea id="importSegmentsText" rows={5} style={{ width: "80%" }} ref={textArea}></textarea>
+
+                <button id="importSegmentsSubmit"
+                        title={chrome.i18n.getMessage("importSegments")}
+                        onClick={() => {
+                            const text = textArea.current.value;
+
+                            props.sendMessage({
+                                message: "importSegments",
+                                data: text
+                            });
+
+                            setImportMenuVisible(false);
+                        }}>
+                    {chrome.i18n.getMessage("Import")}
+                </button>
+            </span>
+        </div>
+    )
+}

src/popup/SegmentSubmissionComponent.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { VideoID } from "../types";
+import Config from "../config";
+import { Message, MessageResponse } from "../messageTypes";
+import { LoadingStatus } from "./PopupComponent";
+
+interface SegmentSubmissionComponentProps {
+    videoID: VideoID;
+    status: LoadingStatus;
+
+    sendMessage: (request: Message) => Promise<MessageResponse>;
+}
+
+export const SegmentSubmissionComponent = (props: SegmentSubmissionComponentProps) => {
+    const segments = Config.local.unsubmittedSegments[props.videoID];
+
+    const [showSubmitButton, setShowSubmitButton] = React.useState(segments && segments.length > 0);
+    const [showStartSegment, setShowStartSegment] = React.useState(!segments || segments[segments.length - 1].segment.length === 2);
+
+    return (
+        <div id="mainControls" className={props.status === LoadingStatus.Loading ? "hidden" : ""}>
+            <h1 className="sbHeader">
+                {chrome.i18n.getMessage("recordTimesDescription")}
+            </h1>
+            <sub className="sponsorStartHint grey-text">
+                {chrome.i18n.getMessage("popupHint")}
+            </sub>
+            <div style={{ textAlign: "center", margin: "8px 0" }}>
+                <button id="sponsorStart" 
+                        className="sbMediumButton"
+                        style={{ marginRight: "8px" }}
+                        onClick={() => {
+                            props.sendMessage({
+                                from: "popup",
+                                message: "sponsorStart"
+                            });
+
+                            setShowStartSegment(!showStartSegment);
+                            setShowSubmitButton(true);
+
+                            // Once data is saved, make sure it is correct
+                            setTimeout(() => {
+                                const segments = Config.local.unsubmittedSegments[props.videoID];
+                                setShowStartSegment(!segments || segments[segments.length - 1].segment.length === 2);
+
+                                setShowSubmitButton(segments && segments.length > 0);
+                            }, 200);
+                        }}>
+                    {showStartSegment ? chrome.i18n.getMessage("sponsorStart") : chrome.i18n.getMessage("sponsorEnd")}
+                </button>
+                <button id="submitTimes" 
+                        className={"sbMediumButton " + (showSubmitButton ? "" : "hidden")}
+                        onClick={() => {
+                            props.sendMessage({
+                                message: "submitTimes"
+                            });
+                        }}>
+                    {chrome.i18n.getMessage("OpenSubmissionMenu")}
+                </button>
+            </div>
+            <span id="submissionHint" className={showSubmitButton ? "" : "hidden"}>
+                {chrome.i18n.getMessage("submissionEditHint")}
+            </span>
+        </div>
+    );
+};

src/popup/YourWorkComponent.tsx

@@ -0,0 +1,208 @@
+import * as React from "react";
+import { getHash } from "../../maze-utils/src/hash";
+import { getErrorMessage } from "../../maze-utils/src/formating";
+import Config from "../config";
+import { asyncRequestToServer } from "../utils/requests";
+import PencilIcon from "../svg-icons/pencilIcon";
+import ClipboardIcon from "../svg-icons/clipboardIcon";
+import CheckIcon from "../svg-icons/checkIcon";
+import { showDonationLink } from "../utils/configUtils";
+
+export const YourWorkComponent = () => {
+    const [isSettingUsername, setIsSettingUsername] = React.useState(false);
+    const [username, setUsername] = React.useState("");
+    const [newUsername, setNewUsername] = React.useState("");
+    const [usernameSubmissionStatus, setUsernameSubmissionStatus] = React.useState("");
+    const [submissionCount, setSubmissionCount] = React.useState("");
+    const [viewCount, setViewCount] = React.useState(0);
+    const [minutesSaved, setMinutesSaved] = React.useState(0);
+    const [showDonateMessage, setShowDonateMessage] = React.useState(false);
+
+    React.useEffect(() => {
+        (async () => {
+            const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions", "segmentCount"];
+            const result = await asyncRequestToServer("GET", "/api/userInfo", {
+                publicUserID: await getHash(Config.config!.userID!),
+                values
+            });
+
+            if (result.ok) {
+                const userInfo = JSON.parse(result.responseText);
+                setUsername(userInfo.userName);
+                setSubmissionCount(Math.max(Config.config.sponsorTimesContributed ?? 0, userInfo.segmentCount).toLocaleString());
+                setViewCount(userInfo.viewCount);
+                setMinutesSaved(userInfo.minutesSaved);
+
+                Config.config!.isVip = userInfo.vip;
+                Config.config!.permissions = userInfo.permissions;
+
+                setShowDonateMessage(Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
+                    && viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10 && showDonationLink());
+            }
+        })();
+    }, []);
+
+    return (
+        <div className="sbYourWorkBox">
+            <h2 className="sbHeader" style={{ "padding": "8px 15px" }}>
+                {chrome.i18n.getMessage("yourWork")}
+            </h2>
+            <div className="sbYourWorkCols">
+                {/* Username */}
+                <div id="usernameElement">
+                    <p className="u-mZ grey-text">
+                        {chrome.i18n.getMessage("Username")}:
+                        {/* loading/errors */}
+                        <span id="setUsernameStatus" 
+                            className={`u-mZ white-text${!usernameSubmissionStatus ? " hidden" : ""}`}>
+                            {usernameSubmissionStatus}
+                        </span>
+                    </p>
+                    <div id="setUsernameContainer" className={isSettingUsername ? " hidden" : ""}>
+                        <p id="usernameValue">{username}</p>
+                        <button id="setUsernameButton" 
+                            title={chrome.i18n.getMessage("setUsername")}
+                            onClick={() => {
+                                setNewUsername(username);
+                                setIsSettingUsername(!isSettingUsername);
+                            }}>
+                            <PencilIcon id="sbPopupIconEdit" className="sbPopupButton" />
+                        </button>
+                        <button id="copyUserID" 
+                            title={chrome.i18n.getMessage("copyPublicID")}
+                            onClick={async () => {
+                                window.navigator.clipboard.writeText(await getHash(Config.config!.userID!));
+                            }}>
+                            <ClipboardIcon id="sbPopupIconCopyUserID" className="sbPopupButton" />
+                        </button>
+                    </div>
+                    <div id="setUsername" className={!isSettingUsername ? " hidden" : " SBExpanded"}>
+                        <input id="usernameInput" 
+                            placeholder={chrome.i18n.getMessage("Username")}
+                            value={newUsername}
+                            onChange={(e) => {
+                                setNewUsername(e.target.value);
+                            }}/>
+                        <button id="submitUsername"
+                            onClick={() => {
+                                if (newUsername.length > 0) {
+                                    setUsernameSubmissionStatus(chrome.i18n.getMessage("Loading"));
+                                    asyncRequestToServer("POST", `/api/setUsername?userID=${Config.config!.userID}&username=${newUsername}`)
+                                    .then((result) => {
+                                        if (result.ok) {
+                                            setUsernameSubmissionStatus("");
+                                            setUsername(newUsername);
+                                            setIsSettingUsername(!isSettingUsername);
+                                        } else {
+                                            setUsernameSubmissionStatus(getErrorMessage(result.status, result.responseText));
+                                        }
+                                    }).catch((e) => {
+                                        setUsernameSubmissionStatus(`${chrome.i18n.getMessage("Error")}: ${e}`);
+                                    });
+                                }
+                            }}>
+                            <CheckIcon id="sbPopupIconCheck" className="sbPopupButton" />
+                        </button>
+                    </div>
+                </div>
+                <SubmissionCounts
+                    isSettingUsername={isSettingUsername}
+                    submissionCount={submissionCount}
+                />
+            </div>
+
+            <TimeSavedMessage
+                viewCount={viewCount}
+                minutesSaved={minutesSaved}
+            />
+
+            {showDonateMessage && <DonateMessage onClose={() => {
+                setShowDonateMessage(false);
+                Config.config.showPopupDonationCount = 100;
+            }} />}
+
+        </div>
+    );
+};
+
+function SubmissionCounts(props: { isSettingUsername: boolean; submissionCount: string }): JSX.Element {
+    return <>
+        <div id="sponsorTimesContributionsContainer" className={props.isSettingUsername ? " hidden" : ""}>
+            <p className="u-mZ grey-text">
+                {chrome.i18n.getMessage("Submissions")}:
+            </p>
+            <p id="sponsorTimesContributionsDisplay" className="u-mZ">{props.submissionCount}</p>
+        </div>
+    </>
+}
+
+function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minutesSaved: number }): JSX.Element {
+    return (
+        <>
+            {
+                viewCount > 0 &&
+                <p id="sponsorTimesViewsContainer" className="u-mZ sbStatsSentence">
+                    {chrome.i18n.getMessage("savedPeopleFrom")}
+                    <b>
+                        <span id="sponsorTimesViewsDisplay">{viewCount.toLocaleString()}</span>{" "}
+                    </b>
+                    <span id="sponsorTimesViewsDisplayEndWord">{viewCount !== 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>
+                    <br />
+                    <span className="sbExtraInfo">
+                        {"("}{" "}
+                        <b>
+                            <span id="sponsorTimesOthersTimeSavedDisplay">{getFormattedHours(minutesSaved)}</span>{" "}
+                            <span id="sponsorTimesOthersTimeSavedEndWord">{minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
+                        </b>
+                        <span>{chrome.i18n.getMessage("youHaveSavedTimeEnd")}</span>{" "}
+                        {" )"}
+                    </span>
+                </p>
+            }
+            <p id="sponsorTimesSkipsDoneContainer" className="u-mZ sbStatsSentence">
+                {chrome.i18n.getMessage("youHaveSkipped")}
+                <b>
+                    <span id="sponsorTimesSkipsDoneDisplay">{Config.config.skipCount}</span>{" "}
+                </b>
+                <span id="sponsorTimesSkipsDoneEndWord">{Config.config.skipCount > 1 ? chrome.i18n.getMessage("Segments") : chrome.i18n.getMessage("Segment")}</span>{" "}
+                <span className="sbExtraInfo">
+                    {"("}{" "}
+                    <b>
+                        <span id="sponsorTimeSavedDisplay">{getFormattedHours(Config.config.minutesSaved)}</span>{" "}
+                        <span id="sponsorTimeSavedEndWord">{Config.config.minutesSaved !== 1 ? chrome.i18n.getMessage("minsLower") : chrome.i18n.getMessage("minLower")}</span>{" "}
+                    </b>
+                    {")"}
+                </span>
+            </p>
+        </>
+    );
+}
+
+function DonateMessage(props: { onClose: () => void }): JSX.Element {
+    return (
+        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center" }}>
+            <img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
+            <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
+                Config.config.donateClicked = Config.config.donateClicked + 1;
+            }}>
+                {chrome.i18n.getMessage("considerDonating")}
+            </a>
+            <img id="sbCloseDonate" src="/icons/close.png" alt={chrome.i18n.getMessage("closeIcon")} height="8" style={{ paddingLeft: "5px", cursor: "pointer" }} onClick={props.onClose} />
+        </div>
+    );
+}
+
+/**
+ * Converts time in minutes to 2d 5h 25.1
+ * If less than 1 hour, just returns minutes
+ *
+ * @param {float} minutes
+ * @returns {string}
+ */
+function getFormattedHours(minutes) {
+    minutes = Math.round(minutes * 10) / 10;
+    const years = Math.floor(minutes / 525600); // Assumes 365.0 days in a year
+    const days = Math.floor(minutes / 1440) % 365;
+    const hours = Math.floor(minutes / 60) % 24;
+    return (years > 0 ? years + chrome.i18n.getMessage("yearAbbreviation") + " " : "") + (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
+}

src/popup/popup.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { PopupComponent } from "./PopupComponent";
+import { waitFor } from "../../maze-utils/src";
+import Config from "../config";
+
+
+document.addEventListener("DOMContentLoaded", async () => {
+    await waitFor(() => Config.isReady());
+
+    const root = createRoot(document.body);
+    root.render(<PopupComponent/>);
+})

src/popup/popupUtils.ts

@@ -0,0 +1,12 @@
+import { Message, MessageResponse } from "../messageTypes";
+
+export function copyToClipboardPopup(text: string, sendMessage: (request: Message) => Promise<MessageResponse>): void {
+    if (window === window.top) {
+        window.navigator.clipboard.writeText(text);
+    } else {
+        sendMessage({
+            message: "copyToClipboard",
+            text
+        });
+    }
+}

src/render/AdvancedSkipOptions.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { createRoot } from 'react-dom/client';
+
+import { AdvancedSkipOptionsComponent } from "../components/options/AdvancedSkipOptionsComponent";
+
+class AdvancedSkipOptions {
+    constructor(element: Element) {
+        const root = createRoot(element);
+        root.render(
+            <AdvancedSkipOptionsComponent />
+        );
+    }
+}
+
+export default AdvancedSkipOptions;

src/render/ChapterVote.tsx

@@ -20,6 +20,10 @@ export class ChapterVote {
         this.container.id = "chapterVote";
         this.container.style.height = "100%";
 
+        if (document.location.host === "tv.youtube.com") {
+            this.container.style.lineHeight = "initial";
+        }
+
         this.root = createRoot(this.container);
         this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
     }

src/render/SkipNotice.tsx

@@ -5,7 +5,7 @@ import Utils from "../utils";
 const utils = new Utils();
 
 import SkipNoticeComponent from "../components/SkipNoticeComponent";
-import { SponsorTime, ContentContainer, NoticeVisbilityMode } from "../types";
+import { SponsorTime, ContentContainer, NoticeVisibilityMode } from "../types";
 import Config from "../config";
 import { SkipNoticeAction } from "../utils/noticeUtils";
 
@@ -20,7 +20,7 @@ class SkipNotice {
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
     root: Root;
 
-    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, componentDidMount: () => void, unskipTime: number = null, startReskip = false, upcomingNoticeShown: boolean) {
+    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, componentDidMount: () => void, unskipTime: number = null, startReskip = false, upcomingNoticeShown: boolean, voteNotice = false) {
         this.skipNoticeRef = React.createRef();
 
         this.segments = segments;
@@ -42,18 +42,18 @@ class SkipNotice {
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);
-
         this.root = createRoot(this.noticeElement);
         this.root.render(
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 startReskip={startReskip}
+                voteNotice={voteNotice}
                 contentContainer={contentContainer}
                 ref={this.skipNoticeRef}
                 closeListener={() => this.close()}
-                smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
+                smaller={!voteNotice && (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAll 
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAutoSkip && autoSkip))}
-                fadeIn={!upcomingNoticeShown}
+                fadeIn={!upcomingNoticeShown && !voteNotice}
                 unskipTime={unskipTime}
                 componentDidMount={componentDidMount} />
         );
@@ -81,6 +81,26 @@ class SkipNotice {
     unmutedListener(time: number): void {
         this.skipNoticeRef?.current?.unmutedListener(time);
     }
+
+    async waitForSkipNoticeRef(): Promise<SkipNoticeComponent> {
+        const waitForRef = () => new Promise<SkipNoticeComponent>((resolve) => {
+            const observer = new MutationObserver(() => {
+            if (this.skipNoticeRef.current) {
+                observer.disconnect();
+                resolve(this.skipNoticeRef.current);
+            }
+            });
+
+            observer.observe(document.getElementsByClassName("sponsorSkipNoticeContainer")[0], { childList: true, subtree: true});
+
+            if (this.skipNoticeRef.current) {
+            observer.disconnect();
+            resolve(this.skipNoticeRef.current);
+            }
+        });
+
+        return this.skipNoticeRef?.current || await waitForRef();
+    }
 }
 
 export default SkipNotice;

src/svg-icons/checkIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface CheckIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const CheckIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: CheckIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/>
+  </svg>
+);
+
+export default CheckIcon;

src/svg-icons/clipboardIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export interface ClipboardIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const ClipboardIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: ClipboardIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z" />
+  </svg>
+);
+
+export default ClipboardIcon;

src/svg-icons/pencilIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface PencilIconProps {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+const PencilIcon = ({
+  id = "",
+  className = "",
+  style = {},
+  onClick
+}: PencilIconProps): JSX.Element => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className={className}
+    style={style}
+    id={id}
+    onClick={onClick} >
+    <path d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/>
+  </svg>
+);
+
+export default PencilIcon;

src/types.ts

@@ -6,7 +6,7 @@ export interface ContentContainer {
     (): {
         vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void;
         dontShowNoticeAgain: () => void;
-        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void;
+        unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean, voteNotice?: boolean) => void;
         sponsorTimes: SponsorTime[];
         sponsorTimesSubmitting: SponsorTime[];
         skipNotices: SkipNotice[];
@@ -70,7 +70,8 @@ export type Category = string & { __categoryBrand: unknown };
 export enum SponsorSourceType {
     Server = undefined,
     Local = 1,
-    YouTube = 2
+    YouTube = 2,
+    Autogenerated = 3
 }
 
 export interface SegmentContainer {
@@ -219,7 +220,7 @@ export interface ToggleSkippable {
     setShowKeybindHint: (show: boolean) => void;
 }
 
-export enum NoticeVisbilityMode {
+export enum NoticeVisibilityMode {
     FullSize = 0,
     MiniForAutoSkip = 1,
     MiniForAll = 2,

src/utils.ts

@@ -1,5 +1,5 @@
 import Config, { VideoDownvotes } from "./config";
-import { CategorySelection, SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType, CategorySkipOption } from "./types";
+import { SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType } from "./types";
 
 import { getHash, HashedValue } from "../maze-utils/src/hash";
 import { waitFor } from "../maze-utils/src";
@@ -211,15 +211,6 @@ export default class Utils {
         return sponsorTimes[this.getSponsorIndexFromUUID(sponsorTimes, UUID)];
     }
 
-    getCategorySelection(category: string): CategorySelection {
-        for (const selection of Config.config.categorySelections) {
-            if (selection.name === category) {
-                return selection;
-            }
-        }
-        return { name: category, option: CategorySkipOption.Disabled} as CategorySelection;
-    }
-
     /**
      * @returns {String[]} Domains in regex form
      */
@@ -249,6 +240,7 @@ export default class Utils {
             ".main-video-section > .video-container", // Cloudtube
             ".shaka-video-container", // Piped
             "#player-container.ytk-player", // YT Kids
+            "#id-tv-container" // YTTV
         ];
 
         let referenceNode = findValidElementFromSelector(selectors)
@@ -320,7 +312,6 @@ export default class Utils {
 
             allDownvotes[hashedVideoID] = currentVideoData;
         }
-        console.log(allDownvotes)
 
         const entries = Object.entries(allDownvotes);
         if (entries.length > 10000) {

src/utils/categoryUtils.ts

@@ -6,6 +6,7 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     if (autoSkip) {
         let messageId = "";
         switch (segments[0].actionType) {
+            case ActionType.Chapter:
             case ActionType.Skip:
                 messageId = "skipped";
                 break;
@@ -21,6 +22,7 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     } else {
         let messageId = "";
         switch (segments[0].actionType) {
+            case ActionType.Chapter:
             case ActionType.Skip:
                 messageId = "skip_category";
                 break;
@@ -44,6 +46,14 @@ export function getUpcomingText(segments: SponsorTime[]): string {
     return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
 }
 
+export function getVoteText(segments: SponsorTime[]): string {
+    const categoryName = chrome.i18n.getMessage(segments.length > 1 ? "multipleSegments" 
+        : "category_" + segments[0].category + "_short") || chrome.i18n.getMessage("category_" + segments[0].category);
+        
+    const messageId = "voted_on";
+    return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
+}
+
 
 export function getCategorySuffix(category: Category): string {
     if (category.startsWith("poi_")) {

src/utils/exporter.ts

@@ -16,7 +16,7 @@ export function exportTimes(segments: SponsorTime[]): string {
     let result = "";
     for (const segment of segments) {
         if (![ActionType.Full, ActionType.Mute].includes(segment.actionType)
-                && segment.source !== SponsorSourceType.YouTube) {
+                && ![SponsorSourceType.YouTube, SponsorSourceType.Autogenerated].includes(segment.source)) {
             result += exportTime(segment) + "\n";
         }
     }
@@ -34,9 +34,12 @@ function exportTime(segment: SponsorTime): string {
 
 export function importTimes(data: string, videoDuration: number): SponsorTime[] {
     const lines = data.split("\n");
+    const timeRegex = /(?:((?:\d+:)?\d+:\d+)+(?:\.\d+)?)|(?:\d+(?=s| second))/g;
+    const anyLineHasTime = lines.some((line) => timeRegex.test(line));
+
     const result: SponsorTime[] = [];
     for (const line of lines) {
-        const match = line.match(/(?:((?:\d+:)?\d+:\d+)+(?:\.\d+)?)|(?:\d+(?=s| second))/g);
+        const match = line.match(timeRegex);
         if (match) {
             const startTime = getFormattedTimeToSeconds(match[0]);
             if (startTime !== null) {
@@ -71,6 +74,18 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
 
                 result.push(segment);
             }
+        } else if (!anyLineHasTime) {
+            // Adding chapters with placeholder times
+            const segment: SponsorTime = {
+                segment: [0, 0],
+                category: "chapter" as Category,
+                actionType: ActionType.Chapter,
+                description: line,
+                source: SponsorSourceType.Local,
+                UUID: generateUserID() as SegmentUUID
+            };
+
+            result.push(segment);
         }
     }
 

src/utils/pageUtils.ts

@@ -4,6 +4,8 @@ import Config from "../config";
 
 export function getControls(): HTMLElement {
     const controlsSelectors = [
+        // New YouTube (2025 April)
+        ".ytp-right-controls-right",
         // YouTube
         ".ytp-right-controls",
         // Mobile YouTube
@@ -13,7 +15,9 @@ export function getControls(): HTMLElement {
         // Piped shaka player
         ".shaka-bottom-controls",
         // Vorapis v3
-        ".html5-player-chrome"
+        ".html5-player-chrome",
+        // tv.youtube.com
+        ".ypcs-control-buttons-right"
     ];
 
     for (const controlsSelector of controlsSelectors) {
@@ -64,7 +68,9 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
     const chaptersBox = document.querySelector("ytd-macro-markers-list-renderer");
     const title = chaptersBox?.closest("ytd-engagement-panel-section-list-renderer")?.querySelector("#title-text.ytd-engagement-panel-title-header-renderer");
     if (title?.textContent?.includes("Key moment")) return [];
-    if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) return [];
+
+    const autogenerated = hasAutogeneratedChapters();
+    if (!Config.config.showAutogeneratedChapters && autogenerated) return [];
 
     const chapters: SponsorTime[] = [];
     // .ytp-timed-markers-container indicates that key-moments are present, which should not be divided
@@ -88,7 +94,7 @@ export function getExistingChapters(currentVideoID: VideoID, duration: number):
                     category: "chapter" as Category,
                     actionType: ActionType.Chapter,
                     description: description.innerText,
-                    source: SponsorSourceType.YouTube,
+                    source: autogenerated ? SponsorSourceType.Autogenerated : SponsorSourceType.YouTube,
                     UUID: null
                 };
             }

src/utils/segmentData.ts

@@ -1,10 +1,11 @@
 import { DataCache } from "../../maze-utils/src/cache";
 import { getHash, HashedValue } from "../../maze-utils/src/hash";
-import Config from "../config";
+import Config, {  } from "../config";
 import * as CompileConfig from "../../config.json";
 import { ActionType, ActionTypes, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getHashParams } from "./pageUtils";
 import { asyncRequestToServer } from "./requests";
+import { extensionUserAgent } from "../../maze-utils/src";
 
 const segmentDataCache = new DataCache<VideoID, SegmentResponse>(() => {
     return {
@@ -43,21 +44,19 @@ export async function getSegmentsForVideo(videoID: VideoID, ignoreCache: boolean
 }
 
 async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse> {
-    const categories: string[] = Config.config.categorySelections.map((category) => category.name);
-
     const extraRequestData: Record<string, unknown> = {};
     const hashParams = getHashParams();
     if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
 
-    const hashPrefix = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
+    const hashPrefix = (await getHash(videoID, 1)).slice(0, 5) as VideoID & HashedValue;
-    const hasDownvotedSegments = !!Config.local.downvotedSegments[hashPrefix];
+    const hasDownvotedSegments = !!Config.local.downvotedSegments[hashPrefix.slice(0, 4)];
     const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
         categories: CompileConfig.categoryList,
         actionTypes: ActionTypes,
         trimUUIDs: hasDownvotedSegments ? null : 5,
         ...extraRequestData
     }, {
-        "X-CLIENT-NAME": `${chrome.runtime.id}/v${chrome.runtime.getManifest().version}`
+        "X-CLIENT-NAME": extensionUserAgent(),
     });
 
     if (response.ok) {
@@ -66,7 +65,7 @@ async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse>
         const receivedSegments: SponsorTime[] = JSON.parse(response.responseText)
                     ?.filter((video) => video.videoID === videoID)
                     ?.map((video) => video.segments)?.[0]
-                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType) && categories.includes(segment.category))
+                    ?.filter((segment) => enabledActionTypes.includes(segment.actionType))
                     ?.map((segment) => ({
                         ...segment,
                         source: SponsorSourceType.Server

src/utils/skipRule.ts

@@ -0,0 +1,164 @@
+import { getChannelIDInfo, getVideoDuration } from "../../maze-utils/src/video";
+import Config from "../config";
+import { CategorySelection, CategorySkipOption, SponsorSourceType, SponsorTime } from "../types";
+import { VideoLabelsCacheData } from "./videoLabels";
+
+export interface Permission {
+    canSubmit: boolean;
+}
+
+export enum SkipRuleAttribute {
+    StartTime = "time.start",
+    EndTime = "time.end",
+    Duration = "time.duration",
+    StartTimePercent = "time.startPercent",
+    EndTimePercent = "time.endPercent",
+    DurationPercent = "time.durationPercent",
+    Category = "category",
+    ActionType = "actionType",
+    Description = "chapter.name",
+    Source = "chapter.source",
+    ChannelID = "channel.id",
+    ChannelName = "channel.name"
+}
+
+export enum SkipRuleOperator {
+    Less = "<",
+    LessOrEqual = "<=",
+    Greater = ">",
+    GreaterOrEqual = ">=",
+    Equal = "==",
+    NotEqual = "!=",
+    Contains = "*=",
+    NotContains = "!*=",
+    Regex = "~=",
+    RegexIgnoreCase = "~i=",
+    NotRegex = "!~=",
+    NotRegexIgnoreCase = "!~i="
+}
+
+export interface AdvancedSkipRule {
+    attribute: SkipRuleAttribute;
+    operator: SkipRuleOperator;
+    value: string | number;
+}
+
+export interface AdvancedSkipRuleSet {
+    rules: AdvancedSkipRule[];
+    skipOption: CategorySkipOption;
+    comment: string;
+}
+
+export function getCategorySelection(segment: SponsorTime | VideoLabelsCacheData): CategorySelection {
+    for (const ruleSet of Config.local.skipRules) {
+        if (ruleSet.rules.every((rule) => isSkipRulePassing(segment, rule))) {
+            return { name: segment.category, option: ruleSet.skipOption } as CategorySelection;
+        }
+    }
+
+    for (const selection of Config.config.categorySelections) {
+        if (selection.name === segment.category) {
+            return selection;
+        }
+    }
+    return { name: segment.category, option: CategorySkipOption.Disabled} as CategorySelection;
+}
+
+function getSkipRuleValue(segment: SponsorTime | VideoLabelsCacheData, rule: AdvancedSkipRule): string | number | undefined {
+    switch (rule.attribute) {
+        case SkipRuleAttribute.StartTime:
+            return (segment as SponsorTime).segment?.[0];
+        case SkipRuleAttribute.EndTime:
+            return (segment as SponsorTime).segment?.[1];
+        case SkipRuleAttribute.Duration:
+            return (segment as SponsorTime).segment?.[1] - (segment as SponsorTime).segment?.[0];
+        case SkipRuleAttribute.StartTimePercent: {
+            const startTime = (segment as SponsorTime).segment?.[0];
+            if (startTime === undefined) return undefined;
+
+            return startTime / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.EndTimePercent: {
+            const endTime = (segment as SponsorTime).segment?.[1];
+            if (endTime === undefined) return undefined;
+
+            return endTime / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.DurationPercent: {
+            const startTime = (segment as SponsorTime).segment?.[0];
+            const endTime = (segment as SponsorTime).segment?.[1];
+            if (startTime === undefined || endTime === undefined) return undefined;
+
+            return (endTime - startTime) / getVideoDuration() * 100;
+        }
+        case SkipRuleAttribute.Category:
+            return segment.category;
+        case SkipRuleAttribute.ActionType:
+            return (segment as SponsorTime).actionType;
+        case SkipRuleAttribute.Description:
+            return (segment as SponsorTime).description || "";
+        case SkipRuleAttribute.Source:
+            switch ((segment as SponsorTime).source) {
+                case SponsorSourceType.Local:
+                    return "local";
+                case SponsorSourceType.YouTube:
+                    return "youtube";
+                case SponsorSourceType.Autogenerated:
+                    return "autogenerated";
+                case SponsorSourceType.Server:
+                    return "server";
+                default:
+                    return undefined;
+            }
+        case SkipRuleAttribute.ChannelID:
+            getChannelIDInfo()
+            return getChannelIDInfo().id;
+        case SkipRuleAttribute.ChannelName:
+            getChannelIDInfo()
+            return getChannelIDInfo().author;
+        default:
+            return undefined;
+    }
+}
+
+function isSkipRulePassing(segment: SponsorTime | VideoLabelsCacheData, rule: AdvancedSkipRule): boolean {
+    const value = getSkipRuleValue(segment, rule);
+    
+    switch (rule.operator) {
+        case SkipRuleOperator.Less:
+            return typeof value === "number" && value < (rule.value as number);
+        case SkipRuleOperator.LessOrEqual:
+            return typeof value === "number" && value <= (rule.value as number);
+        case SkipRuleOperator.Greater:
+            return typeof value === "number" && value > (rule.value as number);
+        case SkipRuleOperator.GreaterOrEqual:
+            return typeof value === "number" && value >= (rule.value as number);
+        case SkipRuleOperator.Equal:
+            return value === rule.value;
+        case SkipRuleOperator.NotEqual:
+            return value !== rule.value;
+        case SkipRuleOperator.Contains:
+            return String(value).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
+        case SkipRuleOperator.NotContains:
+            return !String(value).toLocaleLowerCase().includes(String(rule.value).toLocaleLowerCase());
+        case SkipRuleOperator.Regex:
+            return new RegExp(rule.value as string).test(String(value));
+        case SkipRuleOperator.RegexIgnoreCase:
+            return new RegExp(rule.value as string, "i").test(String(value));
+        case SkipRuleOperator.NotRegex:
+            return !new RegExp(rule.value as string).test(String(value));
+        case SkipRuleOperator.NotRegexIgnoreCase:
+            return !new RegExp(rule.value as string, "i").test(String(value));
+        default:
+            return false;
+    }
+}
+
+export function getCategoryDefaultSelection(category: string): CategorySelection {
+    for (const selection of Config.config.categorySelections) {
+        if (selection.name === category) {
+            return selection;
+        }
+    }
+    return { name: category, option: CategorySkipOption.Disabled} as CategorySelection;
+}

src/utils/videoLabels.ts

@@ -1,12 +1,10 @@
 import { Category, CategorySkipOption, VideoID } from "../types";
 import { getHash } from "../../maze-utils/src/hash";
-import Utils from "../utils";
 import { logWarn } from "./logger";
 import { asyncRequestToServer } from "./requests";
+import { getCategorySelection } from "./skipRule";
 
-const utils = new Utils();
+export interface VideoLabelsCacheData {
-
-interface VideoLabelsCacheData {
     category: Category;
     hasStartSegment: boolean;
 }
@@ -68,7 +66,7 @@ export async function getVideoLabel(videoID: VideoID): Promise<Category | null>
 
     if (result) {
         const category = result.videos[videoID]?.category;
-        if (category && utils.getCategorySelection(category).option !== CategorySkipOption.Disabled) {
+        if (category && getCategorySelection(result.videos[videoID]).option !== CategorySkipOption.Disabled) {
             return category;
         } else {
             return null;

test/previewBar.test.ts

@@ -1,9 +1,13 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import PreviewBar, { PreviewBarSegment } from "../src/js-components/previewBar";
 
 describe("createChapterRenderGroups", () => {
     let previewBar: PreviewBar;
     beforeEach(() => {
-        previewBar = new PreviewBar(null, null, null, null, null, true);
+        previewBar = new PreviewBar(null, null, null, null, null, null, true);
     })
 
     it("Two unrelated times", () => {

test/selenium.test.ts

@@ -4,7 +4,7 @@ import * as Path from "path";
 
 import * as fs from "fs";
 
-test("Selenium Chrome test", async () => {
+xtest("Selenium Chrome test", async () => {
     let driver: WebDriver;
     try {
         driver = await setup();   
@@ -12,6 +12,11 @@ test("Selenium Chrome test", async () => {
         console.warn("A browser is probably not installed, skipping selenium tests");
         console.warn(e);
 
+        if (String(e).includes("This version of ChromeDriver only supports")) {
+            // Count as failure
+            throw e;
+        }
+
         return;
     }
 
@@ -127,6 +132,8 @@ async function editSegments(driver: WebDriver, index: number, expectedStartTimeB
     await endTimeBox.clear();
     await endTimeBox.sendKeys(endTime);
 
+    await driver.sleep(1000);
+
     editButton = await driver.findElement(By.id("sponsorTimeEditButtonSubmissionNotice" + index));
     await editButton.click();
 

tsconfig.json

@@ -12,7 +12,7 @@
         "resolveJsonModule": true,
         "jsx": "react",
         "lib": [
-            "es2019",
+            "es2020",
             "dom",
             "dom.iterable"
         ]

webpack/webpack.common.js

@@ -93,7 +93,7 @@ module.exports = env => {
 
     return {
         entry: {
-            popup: path.join(__dirname, srcDir + 'popup.ts'),
+            popup: path.join(__dirname, srcDir + 'popup/popup.tsx'),
             background: path.join(__dirname, srcDir + 'background.ts'),
             content: path.join(__dirname, srcDir + 'content.ts'),
             options: path.join(__dirname, srcDir + 'options.ts'),

webpack/webpack.manifest.js

@@ -51,6 +51,7 @@ class BuildManifest {
         }  else if (this.options.browser.toLowerCase() === "safari") {
             mergeObjects(manifest, manifestV2ManifestExtra);
             mergeObjects(manifest, safariManifestExtra);
+            manifest.optional_permissions = manifest.optional_permissions.filter((a) => a !== "*://*/*");
         }
 
         if (this.options.stream === "beta") {