bump translations

Fixes #2274

.github/workflows/tests.yml

@@ -17,9 +17,21 @@ jobs:
           node-version: '18'
       - run: npm ci
       - run: sudo apt-get install chromium-chromedriver
+
+      - uses: browser-actions/setup-chrome@c785b87e244131f27c9f19c1a33e2ead956ab7ce
+        with:
+          chrome-version: 135
+          install-dependencies: true
+          install-chromedriver: true
       
       - 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
 

config.json.example

@@ -24,7 +24,7 @@
         "intro": "https://wiki.sponsor.ajay.app/w/Intermission/Intro_Animation",
         "outro": "https://wiki.sponsor.ajay.app/w/Endcards/Credits",
         "preview": "https://wiki.sponsor.ajay.app/w/Preview/Recap",
-        "filler": "https://wiki.sponsor.ajay.app/w/Filler_Tangent",
+        "filler": "https://wiki.sponsor.ajay.app/w/Tangents/Jokes",
         "music_offtopic": "https://wiki.sponsor.ajay.app/w/Music:_Non-Music_Section",
         "poi_highlight": "https://wiki.sponsor.ajay.app/w/Highlight",
         "guidelines": "https://wiki.sponsor.ajay.app/w/Guidelines",

manifest/manifest.json

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

manifest/safari-manifest-extra.json

@@ -4,5 +4,13 @@
   },
   "optional_permissions": [
     "webNavigation"
-  ]
+  ],
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/SafariIconSponsorBlocker16px.png",
+      "32": "icons/SafariIconSponsorBlocker32px.png",
+      "64": "icons/SafariIconSponsorBlocker64px.png",
+      "128": "icons/SafariIconSponsorBlocker128px.png"
+    }
+  }
 }

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": "^135.0.0",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.35.0",

public/content.css

@@ -11,6 +11,11 @@
 	display: none;
 }
 
+/* Vorapi compatibility */
+#player-api_VORAPI_ELEMENT_ID #previewbar {
+	z-index: 999;
+}
+
 #previewbar {
     overflow: visible;
     padding: 0;
@@ -26,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;
@@ -44,7 +58,16 @@
 }
 
 div:hover > #previewbar.sbNotInvidious {
-	transform: scaleY(1)
+	transform: scaleY(1);
+}
+
+/* Vorapis */
+.v3 #previewbar.sbNotInvidious {
+	transform: scaleY(1);
+}
+.sponsorCategoryTooltipVisible.ytp-progress-tooltip {
+	width: 216px !important;
+  	/* left: 264.308px !important; */
 }
 
 .previewbar {
@@ -53,6 +76,11 @@ div:hover > #previewbar.sbNotInvidious {
 	min-width: 1px;
 }
 
+.previewbar-yttv {
+	height: 10px;
+	top: 14px;
+}
+
 .previewbar.requiredSegment {
 	transform: scaleY(3);
 }
@@ -74,7 +102,7 @@ div:hover > #previewbar.sbNotInvidious {
 	display: none !important;
 }
 
-.ytp-tooltip.sponsorCategoryTooltipVisible {
+.ytp-tooltip.sponsorCategoryTooltipVisible:not(.sponsorTooltipHasYTChapters) {
 	transform: translateY(-1em) !important;
 }
 
@@ -170,6 +198,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;
 }
@@ -835,6 +873,15 @@ input::-webkit-inner-spin-button {
 	white-space: nowrap;
 }
 
+/* Vorapis V3 support */
+#watch7-content .sponsorBlockCategoryPill {
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+#watch7-content .sponsorBlockCategoryPillTitle {
+	font-size: 15px;
+}
+
 .categoryPillClose {
 	display: none;
 	height: 10px;

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

@@ -373,6 +373,7 @@ input[type='number'] {
     display: inline-block;
     width: 40px;
     height: 24px;
+    min-width: 40px;
 }
 
 .switch input { 

public/options/options.html

@@ -154,20 +154,6 @@
 					<div class="small-description">__MSG_whatForceChannelCheck__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="refetchWhenNotFound">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="refetchWhenNotFound" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="refetchWhenNotFound">
-							__MSG_enableRefetchWhenNotFound__
-						</label>
-					</div>
-	
-					<div class="small-description">__MSG_whatRefetchWhenNotFound__</div>
-				</div>
-
 				<div data-type="toggle" data-sync="showCategoryWithoutPermission">
 					<div class="switch-container">
 						<label class="switch">
@@ -486,6 +472,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">
@@ -570,7 +566,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">
@@ -585,7 +581,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 {

public/popup.html

@@ -47,7 +47,7 @@
           <div id="issueReporterImportExport" class="hidden">
             <div id="importExportButtons">
               <button id="importSegmentsButton" title="__MSG_importSegments__">
-                <img src="/icons/import.svg" alt="Refresh icon" id="importSegments" />
+                <img src="/icons/import.svg" alt="Import icon" id="importSegments" />
               </button>
               <button id="exportSegmentsButton" class="hidden" title="__MSG_exportSegments__">
                 <img src="/icons/export.svg" alt="Export icon" id="exportSegments" />
@@ -67,7 +67,7 @@
 
       <!-- Toggle Box -->
       <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
+        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" role="button" tabIndex="0">
           <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" />
@@ -76,7 +76,7 @@
           <span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
         </label>
         <!--github: mbledkowski/toggle-switch-->
-        <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
+        <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item" role="button" tabIndex="0">
           <span class="toggleSwitchContainer-switch">
             <input type="checkbox" style="display: none" id="toggleSwitch" checked>
             <span class="switchBg shadow"></span>

src/background.ts

@@ -43,7 +43,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
             chrome.tabs.create({url: chrome.runtime.getURL(request.url)});
             return false;
         case "submitVote":
-            submitVote(request.type, request.UUID, request.category).then(callback);
+            submitVote(request.type, request.UUID, request.category, request.videoID).then(callback);
 
             //this allows the callback to be called later
             return true;
@@ -214,7 +214,7 @@ async function  unregisterFirefoxContentScript(id: string) {
     }
 }
 
-async function submitVote(type: number, UUID: string, category: string) {
+async function submitVote(type: number, UUID: string, category: string, videoID: string) {
     let userID = Config.config.userID;
 
     if (userID == undefined || userID === "undefined") {
@@ -226,7 +226,7 @@ async function submitVote(type: number, UUID: string, category: string) {
     const typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
 
     try {
-        const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
+        const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&videoID=" + videoID + "&userID=" + userID + typeSection);
     
         if (response.ok) {
             return {

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/NoticeComponent.tsx

@@ -245,7 +245,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                         id={"skipNoticeTimerText" + this.idSuffix}
                         key="skipNoticeTimerText"
                         className={this.state.countdownMode !== CountdownMode.Timer ? "sbhidden" : ""} >
-                            {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())}
+                            {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", Math.ceil(this.state.countdownTime).toString())}
                     </span>
                 ),(
                     <img 

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;
 
@@ -36,6 +37,7 @@ export interface SkipNoticeProps {
     showKeybindHint?: boolean;
     smaller: boolean;
     fadeIn: boolean;
+    maxCountdownTime?: number;
 
     componentDidMount?: () => void;
 
@@ -101,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;
@@ -124,7 +126,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.lockedColor = Config.config.colorPalette.locked;
 
         const isMuteSegment = this.segments[0].actionType === ActionType.Mute;
-        const maxCountdownTime = isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration;
+        const maxCountdownTime = props.maxCountdownTime ? () => props.maxCountdownTime : (isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration);
 
         const defaultSkipButtonState = this.props.startReskip ? SkipButtonState.Redo : SkipButtonState.Undo;
         const skipButtonStates = [defaultSkipButtonState, isMuteSegment ? SkipButtonState.Start : defaultSkipButtonState];
@@ -185,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
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAll
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.FadedForAutoSkip && this.autoSkip)}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 style={noticeStyle}
@@ -241,15 +243,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         </div>
 
                         {/* Copy and Downvote Button */}
-                        <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
-                                className="voteButton"
-                                style={{marginLeft: "5px"}}
-                                onClick={() => this.openEditingOptions()}>
-                            <PencilSvg fill={this.state.editing === true
-                                            || this.state.actionState === SkipNoticeAction.CopyDownvote
-                                            || this.state.choosingCategory === true
-                                            ? this.selectedColor : this.unselectedColor} />
-                        </div>
+                        {
+                            !this.props.voteNotice &&
+                            <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
+                                    className="voteButton"
+                                    style={{marginLeft: "5px"}}
+                                    onClick={() => this.openEditingOptions()}>
+                                <PencilSvg fill={this.state.editing === true
+                                                || this.state.actionState === SkipNoticeAction.CopyDownvote
+                                                || this.state.choosingCategory === true
+                                                ? this.selectedColor : this.unselectedColor} />
+                            </div>
+                        }
                     </td>
 
                     :
@@ -277,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"
@@ -373,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 }}>
@@ -623,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;
 
@@ -660,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;
@@ -668,7 +676,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         const skipButtonStates = this.state.skipButtonStates;
         const skipButtonCallbacks = this.state.skipButtonCallbacks;
         if (buttonIndex === null) {
-            for (let i = 0; i < this.segments.length; i++) {
+            for (let i = 0; i < skipButtonStates.length; i++) {
                 skipButtonStates[i] = skipButtonState;
                 skipButtonCallbacks[i] = this.reskip.bind(this);
             }
@@ -696,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/options/CategorySkipOptionsComponent.tsx

@@ -234,11 +234,18 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                     configKey: "showSegmentNameInChapterBar",
                     label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
                     dontDisable: true
+                }, {
+                    configKey: "showAutogeneratedChapters",
+                    label: chrome.i18n.getMessage("showAutogeneratedChapters"),
+                    dontDisable: true
                 }];
             case "music_offtopic":
                 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,6 +1,6 @@
 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";
 
@@ -32,7 +32,7 @@ interface SBConfig {
     trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
     showUpcomingNotice: boolean;
-    noticeVisibilityMode: NoticeVisbilityMode;
+    noticeVisibilityMode: NoticeVisibilityMode;
     hideVideoPlayerControls: boolean;
     hideInfoButtonPlayerControls: boolean;
     hideDeleteButtonPlayerControls: boolean;
@@ -48,7 +48,6 @@ interface SBConfig {
     audioNotificationOnSkip: boolean;
     checkForUnlistedVideos: boolean;
     testingServer: boolean;
-    refetchWhenNotFound: boolean;
     ytInfoPermissionGranted: boolean;
     allowExpirements: boolean;
     showDonationLink: boolean;
@@ -58,6 +57,7 @@ interface SBConfig {
     donateClicked: number;
     autoHideInfoButton: boolean;
     autoSkipOnMusicVideos: boolean;
+    skipNonMusicOnlyOnYoutubeMusic: boolean;
     colorPalette: {
         red: string;
         white: string;
@@ -70,6 +70,7 @@ interface SBConfig {
     showCategoryGuidelines: boolean;
     showCategoryWithoutPermission: boolean;
     showSegmentNameInChapterBar: boolean;
+    showAutogeneratedChapters: boolean;
     useVirtualTime: boolean;
     showSegmentFailedToFetchWarning: boolean;
     allowScrollingToEdit: boolean;
@@ -97,6 +98,8 @@ interface SBConfig {
     nextChapterKeybind: Keybind;
     previousChapterKeybind: Keybind;
     closeSkipNoticeKeybind: Keybind;
+    upvoteKeybind: Keybind;
+    downvoteKeybind: Keybind;
 
     // What categories should be skipped
     categorySelections: CategorySelection[];
@@ -295,7 +298,7 @@ const syncDefaults = {
     trackDownvotesInPrivate: false,
     dontShowNotice: false,
     showUpcomingNotice: false,
-    noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
+    noticeVisibilityMode: NoticeVisibilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
     hideInfoButtonPlayerControls: false,
     hideDeleteButtonPlayerControls: false,
@@ -311,7 +314,6 @@ const syncDefaults = {
     audioNotificationOnSkip: false,
     checkForUnlistedVideos: false,
     testingServer: false,
-    refetchWhenNotFound: true,
     ytInfoPermissionGranted: false,
     allowExpirements: true,
     showDonationLink: true,
@@ -321,6 +323,7 @@ const syncDefaults = {
     donateClicked: 0,
     autoHideInfoButton: true,
     autoSkipOnMusicVideos: false,
+    skipNonMusicOnlyOnYoutubeMusic: false,
     scrollToEditTimeUpdate: false, // false means the tooltip will be shown
     categoryPillUpdate: false,
     showChapterInfoMessage: true,
@@ -328,6 +331,7 @@ const syncDefaults = {
     showCategoryGuidelines: true,
     showCategoryWithoutPermission: false,
     showSegmentNameInChapterBar: true,
+    showAutogeneratedChapters: true,
     useVirtualTime: true,
     showSegmentFailedToFetchWarning: true,
     allowScrollingToEdit: true,
@@ -356,6 +360,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 +472,11 @@ const syncDefaults = {
         "preview-filler": {
             color: "#2E0066",
             opacity: "0.7"
-        }
+        },
+        "chapter": {
+            color: "#fff",
+            opacity: "0"
+        },
     }
 };
 

src/content.ts

@@ -25,7 +25,7 @@ import SubmissionNotice from "./render/SubmissionNotice";
 import { Message, MessageResponse, VoteResponse } from "./messageTypes";
 import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
 import { getStartTimeFromUrl } from "./utils/urlParser";
-import { getControls, getExistingChapters, getHashParams, isPlayingPlaylist, isVisible } from "./utils/pageUtils";
+import { getControls, getExistingChapters, getHashParams, hasAutogeneratedChapters, isPlayingPlaylist, isVisible } from "./utils/pageUtils";
 import { CategoryPill } from "./render/CategoryPill";
 import { AnimationUtils } from "../maze-utils/src/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
@@ -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 } 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";
@@ -43,7 +43,7 @@ import { generateUserID } from "../maze-utils/src/setup";
 import { updateAll } from "../maze-utils/src/thumbnailManagement";
 import { setupThumbnailListener } from "./utils/thumbnails";
 import * as documentScript from "../dist/js/document.js";
-import { runCompatibilityChecks } from "./utils/compatibility";
+import { isVorapisInstalled, runCompatibilityChecks } from "./utils/compatibility";
 import { cleanPage } from "./utils/pageCleaner";
 import { addCleanupListener } from "../maze-utils/src/cleanup";
 import { hideDeArrowPromotion, tryShowingDeArrowPromotion } from "./dearrowPromotion";
@@ -76,11 +76,11 @@ 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;
 let activeSkipKeybindElement: ToggleSkippable = null;
-let retryFetchTimeout: NodeJS.Timeout = null;
 let shownSegmentFailedToFetchWarning = false;
 let selectedSegment: SegmentUUID | null = null;
 let previewedSegment = false;
@@ -173,7 +173,6 @@ let popupInitialised = false;
 let submissionNotice: SubmissionNotice = null;
 
 let lastResponseStatus: number;
-let retryCount = 0;
 
 // Contains all of the functions and variables needed by the skip notice
 const skipNoticeContentContainer: ContentContainer = () => ({
@@ -242,7 +241,8 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             break;
         case "getChannelID":
             sendResponse({
-                channelID: getChannelIDInfo().id
+                channelID: getChannelIDInfo().id,
+                isYTTV: (document.location.host === "tv.youtube.com")
             });
 
             break;
@@ -302,13 +302,28 @@ 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.actionType = ActionType.Skip;
+            loopedChapter.segment = [loopedChapter.segment[1], loopedChapter.segment[0]];
+            break;
+        case "getLoopedChapter":
+            sendResponse({
+                UUID: loopedChapter?.UUID,
+            });
+            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)) {
@@ -391,13 +406,13 @@ if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
 function resetValues() {
     lastCheckTime = 0;
     lastCheckVideoTime = -1;
-    retryCount = 0;
     previewedSegment = false;
     firstPlay = true;
 
     sponsorTimes = [];
     existingChaptersImported = false;
     sponsorSkipped = [];
+    loopedChapter = null;
     lastResponseStatus = 0;
     shownSegmentFailedToFetchWarning = false;
 
@@ -519,7 +534,7 @@ function handleMobileControlsMutations(): void {
 function getPreviewBarAttachElement(): HTMLElement | null {
     const progressElementOptions = [{
             // For newer mobile YouTube (Sept 2024)
-            selector: ".YtProgressBarLineHost, .YtChapteredProgressBarHost",
+            selector: ".ytChapteredProgressBarHost, .ytProgressBarLineHost, .YtProgressBarLineHost, .YtChapteredProgressBarHost",
             isVisibleCheck: true
         }, {
             // For newer mobile YouTube (May 2024)
@@ -552,6 +567,13 @@ function getPreviewBarAttachElement(): HTMLElement | null {
             // For piped
             selector: ".shaka-ad-markers",
             isVisibleCheck: false
+        }, {
+            // 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 +599,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 +710,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);
             }
         }
@@ -705,7 +727,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         forceVideoTime ||= Math.max(getCurrentTime(), getVirtualTime());
 
         if ((shouldSkip(currentSkip) || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment))) {
-            if (forceVideoTime >= skipTime[0] - skipBuffer && forceVideoTime < skipTime[1]) {
+            if (forceVideoTime >= skipTime[0] - skipBuffer && (forceVideoTime < skipTime[1] || skipTime[1] < skipTime[0])) {
                 skipToTime({
                     v: getVideo(),
                     skipTime,
@@ -713,7 +735,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)) {
@@ -746,7 +768,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;
         }
 
@@ -757,7 +779,8 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         skippingFunction(currentTime);
     } else {
         let delayTime = timeUntilSponsor * 1000 * (1 / getVideo().playbackRate);
-        if (delayTime < (isFirefoxOrSafari() && !isSafari() ? 750 : 300)) {
+        if (delayTime < (isFirefoxOrSafari() && !isSafari() ? 750 : 300)
+                && shouldAutoSkip(skippingSegments[0])) {
             let forceStartIntervalTime: number | null = null;
             if (isFirefoxOrSafari() && !isSafari() && delayTime > 300) {
                 forceStartIntervalTime = await waitForNextTimeChange();
@@ -765,7 +788,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;
@@ -784,7 +807,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
@@ -792,7 +815,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 {
@@ -804,16 +827,17 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
             currentSkipSchedule = setTimeout(skippingFunction, offsetDelayTime);
 
             // Show the notice only if the segment hasn't already started
-            if (Config.config.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0]) {
+            if (Config.config.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0] 
+                    && !sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment)
+                    && [ActionType.Skip, ActionType.Mute].includes(skippingSegments[0].actionType)
+                    && !getVideo()?.paused) {
                 const maxPopupTime = 3000;
                 const timeUntilPopup = Math.max(0, offsetDelayTime - maxPopupTime);
-                const popupTime = Math.min(maxPopupTime, timeUntilPopup);
+                const popupTime = offsetDelayTime - timeUntilPopup;
                 const autoSkip = shouldAutoSkip(skippingSegments[0]);
 
-                if (timeUntilPopup > 0) {
-                    if (currentUpcomingSchedule) clearTimeout(currentUpcomingSchedule);
-                    currentUpcomingSchedule = setTimeout(createUpcomingNotice, timeUntilPopup, skippingSegments, popupTime, autoSkip);
-                }
+                if (currentUpcomingSchedule) clearTimeout(currentUpcomingSchedule);
+                currentUpcomingSchedule = setTimeout(createUpcomingNotice, timeUntilPopup, [skippingSegments[0]], popupTime, autoSkip);
             }
         }
     }
@@ -831,10 +855,10 @@ function waitForNextTimeChange(): Promise<DOMHighResTimeStamp | null> {
 
 function getVirtualTime(): number {
     const virtualTime = lastTimeFromWaitingEvent ?? (lastKnownVideoTime.videoTime !== null ?
-        (performance.now() - lastKnownVideoTime.preciseTime) * getVideo().playbackRate / 1000 + lastKnownVideoTime.videoTime : null);
+        (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();
@@ -859,7 +883,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);
@@ -1144,7 +1169,8 @@ function setupSkipButtonControlBar() {
                 forceAutoSkip: true
             }),
             selectSegment,
-            onMobileYouTube: isOnMobileYouTube()
+            onMobileYouTube: isOnMobileYouTube(),
+            onYTTV: isOnYTTV(),
         });
     }
 
@@ -1229,7 +1255,7 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
 
             if (!getVideo()) {
                 //there is still no video here
-                await waitFor(() => getVideo(), 5000, 10);
+                await waitForVideo();
             }
 
             startSkipScheduleCheckingForStartSponsors();
@@ -1237,11 +1263,7 @@ async function sponsorsLookup(keepOldSubmissions = true, ignoreCache = false) {
             if (!isNaN(getVideoDuration())) {
                 updatePreviewBar();
             }
-        } else {
-            retryFetch(404);
         }
-    } else {
-        retryFetch(lastResponseStatus);
     }
 
     importExistingChapters(true);
@@ -1283,7 +1305,13 @@ function importExistingChapters(wait: boolean) {
                         existingChaptersImported = true;
                         updatePreviewBar();
                     }
-                }).catch(() => { importingChaptersWaiting = false; }); // eslint-disable-line @typescript-eslint/no-empty-function
+                }).catch(() => { importingChaptersWaiting = false; });
+
+            if (!Config.config.showAutogeneratedChapters) {
+                waitFor(() => hasAutogeneratedChapters(), wait ? 15000 : 0, 400).then(() => {
+                    updateActiveSegment(getCurrentTime());
+                }).catch(() => { }); // eslint-disable-line @typescript-eslint/no-empty-function
+            }
         }
     }
 }
@@ -1302,27 +1330,6 @@ async function lockedCategoriesLookup(): Promise<void> {
     }
 }
 
-function retryFetch(errorCode: number): void {
-    sponsorDataFound = false;
-    if (!Config.config.refetchWhenNotFound) return;
-
-    if (retryFetchTimeout) clearTimeout(retryFetchTimeout);
-    if ((errorCode !== 404 && retryCount > 1) || (errorCode !== 404 && retryCount > 10)) {
-        // Too many errors (50x), give up
-        return;
-    }
-
-    retryCount++;
-
-    const delay = errorCode === 404 ? (30000 + Math.random() * 30000) : (2000 + Math.random() * 10000);
-    retryFetchTimeout = setTimeout(() => {
-        if (getVideoID() && sponsorTimes?.length === 0
-                || sponsorTimes.every((segment) => segment.source !== SponsorSourceType.Server)) {
-            // sponsorsLookup();
-        }
-    }, delay);
-}
-
 /**
  * Only should be used when it is okay to skip a sponsor when in the middle of it
  *
@@ -1374,7 +1381,9 @@ function startSkipScheduleCheckingForStartSponsors() {
 
         const fullVideoSegment = sponsorTimes.filter((time) => time.actionType === ActionType.Full)[0];
         if (fullVideoSegment) {
-            categoryPill?.setSegment(fullVideoSegment);
+            waitFor(() => categoryPill).then(() => {
+                categoryPill?.setSegment(fullVideoSegment);
+            });
         }
 
         if (startingSegmentTime !== -1) {
@@ -1415,22 +1424,24 @@ function updatePreviewBar(): void {
                 showLarger: segment.actionType === ActionType.Poi,
                 description: segment.description,
                 source: segment.source,
-                requiredSegment: requiredSegment && (segment.UUID === requiredSegment || segment.UUID?.startsWith(requiredSegment)),
+                requiredSegment: requiredSegment && (segment.UUID === requiredSegment || segment.UUID?.startsWith(requiredSegment) || requiredSegment.startsWith(segment.UUID)),
                 selectedSegment: selectedSegment && segment.UUID === selectedSegment
             });
         });
     }
 
     sponsorTimesSubmitting.forEach((segment) => {
-        previewBarSegments.push({
-            segment: segment.segment as [number, number],
-            category: segment.category,
-            actionType: segment.actionType,
-            unsubmitted: true,
-            showLarger: segment.actionType === ActionType.Poi,
-            description: segment.description,
-            source: segment.source
-        });
+        if (segment.actionType !== ActionType.Chapter || segment.segment.length > 1) {
+            previewBarSegments.push({
+                segment: segment.segment as [number, number],
+                category: segment.category,
+                actionType: segment.actionType,
+                unsubmitted: true,
+                showLarger: segment.actionType === ActionType.Poi,
+                description: segment.description,
+                source: segment.source
+            });
+        }
     });
 
     previewBar.set(previewBarSegments.filter((segment) => segment.actionType !== ActionType.Full), getVideoDuration())
@@ -1505,7 +1516,10 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
 
     const autoSkipSorter = (segment: ScheduledTime) => {
         const skipOption = utils.getCategorySelection(segment.category)?.option;
-        if ((skipOption === CategorySkipOption.AutoSkip || shouldAutoSkip(segment))
+        if (segment.hidden !== SponsorHideType.Visible) {
+            // 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) {
             return 0;
         } else if (skipOption !== CategorySkipOption.ShowOverlay) {
@@ -1543,7 +1557,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 {
@@ -1578,8 +1592,16 @@ function getLatestEndTimeIndex(sponsorTimes: SponsorTime[], index: number, hideH
         return index;
     }
 
-    // Default to the normal endTime
-    let latestEndTimeIndex = index;
+    let latestEndTimeIndex = -1;
+    // 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;
@@ -1622,7 +1644,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
@@ -1644,6 +1667,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);
@@ -1693,7 +1722,7 @@ function sendTelemetryAndCount(skippingSegments: SponsorTime[], secondsSkipped:
                 counted = true;
             }
 
-            if (fullSkip) asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID);
+            if (fullSkip) asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID + "&videoID=" + getVideoID());
         }
     }
 }
@@ -1763,11 +1792,13 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
     if (!autoSkip
             && skippingSegments.length === 1
             && skippingSegments[0].actionType === ActionType.Poi) {
-        skipButtonControlBar.enable(skippingSegments[0]);
-        if (isOnMobileYouTube() || Config.config.skipKeybind == null) skipButtonControlBar.setShowKeybindHint(false);
-
-        activeSkipKeybindElement?.setShowKeybindHint(false);
-        activeSkipKeybindElement = skipButtonControlBar;
+        waitFor(() => skipButtonControlBar).then(() => {
+            skipButtonControlBar.enable(skippingSegments[0]);
+            if (isOnMobileYouTube() || Config.config.skipKeybind == null) skipButtonControlBar.setShowKeybindHint(false);
+    
+            activeSkipKeybindElement?.setShowKeybindHint(false);
+            activeSkipKeybindElement = skipButtonControlBar;
+        })
     } else {
         if (openNotice) {
             //send out the message saying that a sponsor message was skipped
@@ -1791,7 +1822,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))) {
@@ -1805,7 +1836,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);
 
@@ -1821,16 +1852,16 @@ function createUpcomingNotice(skippingSegments: SponsorTime[], timeLeft: number,
     }
 
     upcomingNotice?.close();
-    upcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft, autoSkip);
+    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 || voteNotice) {
         //add a tiny bit of time to make sure it is not skipped again
         setCurrentTime(unskipTime ?? segment.segment[0] + 0.001);
     }
@@ -1862,6 +1893,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();
@@ -1891,11 +1926,17 @@ 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 ||
-            (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 {
@@ -1903,7 +1944,13 @@ function shouldSkip(segment: SponsorTime): boolean {
             && segment.source !== SponsorSourceType.YouTube
             && 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.actionType === ActionType.Skip && 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. */
@@ -1936,7 +1983,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 {
@@ -2003,7 +2050,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({
@@ -2281,7 +2333,8 @@ async function voteAsync(type: number, UUID: SegmentUUID, category?: Category):
             message: "submitVote",
             type: type,
             UUID: UUID,
-            category: category
+            category: category,
+            videoID: getVideoID()
         }, (response) => {
             if (response.successType === 1) {
                 // Change the sponsor locally
@@ -2417,7 +2470,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) {
@@ -2497,6 +2550,8 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
 }
 
 function updateActiveSegment(currentTime: number): void {
+    if (!chrome.runtime?.id) return;
+
     previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
 
     chrome.runtime.sendMessage({
@@ -2544,6 +2599,23 @@ function previousChapter(): void {
     }
 }
 
+async function handleKeybindVote(type: number): Promise<void>{
+    let lastSkipNotice = skipNotices[0]?.skipNoticeRef.current;
+    lastSkipNotice?.onMouseEnter();
+
+    if (!lastSkipNotice) {
+        const lastSegment = [...sponsorTimes].reverse()?.find((s) => s.source == SponsorSourceType.Server && (s.segment[0] <= getCurrentTime() && getCurrentTime() - (s.segment[1] || s.segment[0]) <= Config.config.skipNoticeDuration));
+        if (!lastSegment) return;
+
+        createSkipNotice([lastSegment], shouldAutoSkip(lastSegment), lastSegment?.segment[0] + 0.001,false, true);
+        lastSkipNotice = await skipNotices[0].waitForSkipNoticeRef();
+        lastSkipNotice?.reskippedMode(0);
+    }
+
+    vote(type,lastSkipNotice?.segments[0]?.UUID, undefined, lastSkipNotice);
+    return;
+}
+
 function addHotkeyListener(): void {
     document.addEventListener("keydown", hotkeyListener);
 
@@ -2551,9 +2623,11 @@ function addHotkeyListener(): void {
         // Allow us to stop propagation to YouTube by being deeper
         document.removeEventListener("keydown", hotkeyListener);
         document.body.addEventListener("keydown", hotkeyListener);
+        document.body.addEventListener("keyup", hotkeyPropagationListener);
 
         addCleanupListener(() => {
             document.body.removeEventListener("keydown", hotkeyListener);
+            document.body.removeEventListener("keyup", hotkeyPropagationListener);
         });
     };
 
@@ -2587,9 +2661,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);
         }
 
@@ -2630,6 +2706,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;
     }
 }
 
@@ -2680,8 +2788,9 @@ function showTimeWithoutSkips(skippedDuration: number): void {
     // YouTube player time display
     const selector =
         isOnInvidious()     ? ".vjs-duration" :
-        isOnMobileYouTube() ? ".YtwPlayerTimeDisplayContent" :
-                              ".ytp-time-display.notranslate .ytp-time-wrapper";
+        isOnYTTV()          ? ".ypl-full-controls .ypmcs-control .time-info-bar" :
+        isOnMobileYouTube() ? ".ytwPlayerTimeDisplayContent" :
+                              ".ytp-time-display.notranslate .ytp-time-wrapper .ytp-time-contents";
     const display = document.querySelector(selector);
     if (!display) return;
 
@@ -2745,6 +2854,10 @@ function setCategoryColorCSSVariables() {
     if (!styleContainer) {
         styleContainer = document.createElement("style");
         styleContainer.id = "sbCategoryColorStyle";
+        if (isVorapisInstalled()) {
+            // Vorapi deletes styles
+            styleContainer.className = 'stylus';
+        }
 
         const head = (document.head || document.documentElement);
         head.appendChild(styleContainer)

src/js-components/previewBar.ts

@@ -13,7 +13,9 @@ import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
 import { findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
-import { isVisible } from "../utils/pageUtils";
+import { hasAutogeneratedChapters, isVisible } from "../utils/pageUtils";
+import { isVorapisInstalled } from "../utils/compatibility";
+import { isOnYTTV } from "../../maze-utils/src/video";
 
 const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
 const MIN_CHAPTER_SIZE = 0.003;
@@ -40,6 +42,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;
@@ -48,9 +56,11 @@ class PreviewBar {
     parent: HTMLElement;
     onMobileYouTube: boolean;
     onInvidious: boolean;
+    onYTTV: boolean;
     progressBar: HTMLElement;
 
     segments: PreviewBarSegment[] = [];
+    hasYouTubeChapters = false;
     existingChapters: PreviewBarSegment[] = [];
     videoDuration = 0;
     updateExistingChapters: () => void;
@@ -68,14 +78,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;
 
@@ -95,24 +110,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
-        const tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper") ?? document.querySelector("#progress-bar-container.ytk-player > #hover-time-info");
-        const originalTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title:not(.sponsorCategoryTooltip)") as HTMLElement;
+        if (isOnYTTV()) {
+            this.categoryScrubTooltip = document.createElement("div");
+            this.categoryScrubTooltip.className = "sponsorCategoryTooltip";
+            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;
-        const titleTooltip = tooltipTextWrapper.querySelector(".ytp-tooltip-title") as HTMLElement;
+        // YT, Vorapis, YTTV
+        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;
@@ -128,12 +168,12 @@ class PreviewBar {
         seekBar.addEventListener("mousemove", (e: MouseEvent) => {
             if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
 
-            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
+            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title, .ytp-progress-tooltip-timestamp");
             const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
 
             // Find the segment at that location, using the shortest if multiple found
             const [normalSegments, chapterSegments] =
-                partition(this.segments.filter((s) => s.source !== SponsorSourceType.YouTube),
+                partition(this.segments,
                     (segment) => segment.actionType !== ActionType.Chapter);
             let mainSegment = this.getSmallestSegment(timeInSeconds, normalSegments, "normal");
             let secondarySegment = this.getSmallestSegment(timeInSeconds, chapterSegments, "chapter");
@@ -142,19 +182,49 @@ class PreviewBar {
                 secondarySegment = this.getSmallestSegment(timeInSeconds, chapterSegments.filter((s) => s !== secondarySegment));
             }
 
+            const hasAYouTubeChapterRemoved = this.hasYouTubeChapters
+                || (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters());
+            if (hasAYouTubeChapterRemoved) {
+                // 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) {
-                this.categoryTooltipContainer.classList.remove(TOOLTIP_VISIBLE_CLASS);
-                originalTooltip.style.removeProperty("display");
+                if (!hasAYouTubeChapterRemoved) {
+                    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);
+                }
             } else {
                 this.categoryTooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);
                 if (mainSegment !== null && secondarySegment !== null) {
                     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!;
+                    tooltipParent.classList.add("with-text");
+                }
 
                 if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent)
                         || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)) {
@@ -164,16 +234,16 @@ class PreviewBar {
                     originalTooltip.style.removeProperty("display");
                 }
 
-                // Used to prevent overlapping
-                this.categoryTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
-                this.chapterTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
-
                 // To prevent offset issue
                 this.categoryTooltip.style.right = titleTooltip.style.right;
                 this.chapterTooltip.style.right = titleTooltip.style.right;
                 this.categoryTooltip.style.textAlign = titleTooltip.style.textAlign;
                 this.chapterTooltip.style.textAlign = titleTooltip.style.textAlign;
             }
+
+            // Used to prevent overlapping
+            this.categoryTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
+            this.chapterTooltip.classList.toggle("ytp-tooltip-text-no-title", noYoutubeChapters);
         });
     }
 
@@ -202,7 +272,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 {
@@ -224,7 +299,22 @@ class PreviewBar {
     set(segments: PreviewBarSegment[], videoDuration: number): void {
         this.segments = segments ?? [];
         this.videoDuration = videoDuration ?? 0;
+        this.hasYouTubeChapters = segments.some((segment) => segment.source === SponsorSourceType.YouTube);
 
+        // 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
+                && 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));
+            
+            if (duplicate) {
+                const index = this.segments.indexOf(duplicate);
+                this.segments.splice(index, 1);
+            }
+        }
 
         this.updatePageElements();
         // Sometimes video duration is inaccurate, pull from accessibility info
@@ -238,7 +328,8 @@ class PreviewBar {
     }
 
     private updatePageElements(): void {
-        const allProgressBars = document.querySelectorAll(".ytp-progress-bar") as NodeListOf<HTMLElement>;
+        // YT, Vorapis v3
+        const allProgressBars = document.querySelectorAll(".ytp-progress-bar, .ytp-progress-bar-container > .html5-progress-bar > .ytp-progress-list") as NodeListOf<HTMLElement>;
         this.progressBar = findValidElement(allProgressBars) ?? allProgressBars?.[0];
 
         if (this.progressBar) {
@@ -322,6 +413,10 @@ class PreviewBar {
             bar.style.marginRight = `${this.chapterMargin}px`;
         }
 
+        if (this.onYTTV) {
+            bar.classList.add("previewbar-yttv");
+        }
+
         return bar;
     }
 
@@ -342,11 +437,13 @@ class PreviewBar {
             // Merge overlapping chapters
             this.unfilteredChapterGroups = this.createChapterRenderGroups(segments);
         }
-
-        if (segments.every((segments) => segments.source === SponsorSourceType.YouTube)
+        
+        if ((segments.every((segments) => segments.source === SponsorSourceType.YouTube)
             || (!Config.config.renderSegmentsAsChapters
                 && segments.every((segment) => segment.actionType !== ActionType.Chapter
-                    || segment.source === SponsorSourceType.YouTube))) {
+                    || segment.source === SponsorSourceType.YouTube)))
+            && !(hasAutogeneratedChapters() && !Config.config.showAutogeneratedChapters)) {
+
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
             this.originalChapterBar.style.removeProperty("display");
             return;
@@ -372,6 +469,15 @@ class PreviewBar {
             this.chapterGroups = this.unfilteredChapterGroups;
         }
 
+        if (this.chapterGroups.length === 0 && !Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+            // Add placeholder chapter group for whole video
+            this.chapterGroups = [{
+                segment: [0, this.videoDuration],
+                originalDuration: 0,
+                actionType: null
+            }];
+        }
+
         if (!this.chapterGroups || this.chapterGroups.length <= 0) {
             if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
             this.originalChapterBar.style.removeProperty("display");
@@ -764,7 +870,8 @@ class PreviewBar {
     updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): SponsorTime[] {
         if (!Config.config.showSegmentNameInChapterBar
                 || Config.config.disableSkipping
-                || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) {
+                || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0 
+                    && (Config.config.showAutogeneratedChapters || !hasAutogeneratedChapters()))) {
             const chaptersContainer = this.getChaptersContainer();
             if (chaptersContainer) {
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
@@ -804,14 +911,22 @@ class PreviewBar {
                         return -1;
                     } else if (a.actionType !== ActionType.Chapter && b.actionType === ActionType.Chapter) {
                         return 1;
+                    } else if (a.actionType === ActionType.Chapter && b.actionType === ActionType.Chapter
+                                && a.source === SponsorSourceType.Server && b.source !== SponsorSourceType.Server) {
+                        return -0.5;
+                    } else if (a.actionType === ActionType.Chapter && b.actionType === ActionType.Chapter
+                                && a.source !== SponsorSourceType.Server && b.source === SponsorSourceType.Server) {
+                        return 0.5;
                     } else {
-                        return (b.segment[0] - a.segment[0]);
+                        return (b.segment[0] - a.segment[0]) * 4;
                     }
                 })[0];
 
                 const chapterButton = this.getChapterButton(chaptersContainer);
-                chapterButton.classList.remove("ytp-chapter-container-disabled");
-                chapterButton.disabled = false;
+                if (chapterButton) {
+                    chapterButton.classList.remove("ytp-chapter-container-disabled");
+                    chapterButton.disabled = false;
+                }
 
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
                 chapterTitle.style.display = "none";
@@ -820,6 +935,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);
@@ -832,7 +950,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());
@@ -846,6 +972,18 @@ class PreviewBar {
                 } else {
                     this.chapterVote.setVisibility(false);
                 }
+            } else if (!Config.config.showAutogeneratedChapters && hasAutogeneratedChapters()) {
+                // Keep original hidden
+                chaptersContainer.querySelector(".sponsorChapterText")?.remove();
+                const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
+
+                chapterTitle.style.display = "none";
+                chaptersContainer.classList.remove("sponsorblock-chapter-visible");
+
+                const titlePrefixDot = chaptersContainer.querySelector(".ytp-chapter-title-prefix") as HTMLElement;
+                if (titlePrefixDot) titlePrefixDot.style.display = "none";
+                
+                this.chapterVote.setVisibility(false);
             } else {
                 chaptersContainer.querySelector(".sponsorChapterText")?.remove();
                 const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement;
@@ -859,6 +997,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

@@ -18,7 +18,8 @@ interface DefaultMessage {
         | "submitTimes"
         | "refreshSegments"
         | "closePopup"
-        | "getLogs";
+        | "getLogs"
+        | "getLoopedChapter";
 }
 
 interface BoolValueMessage {
@@ -58,6 +59,11 @@ interface ImportSegmentsMessage {
     data: string;
 }
 
+interface LoopChapterMessage {
+    message: "loopChapter";
+    UUID: SegmentUUID;
+}
+
 interface KeyDownMessage {
     message: "keydown";
     key: string;
@@ -70,7 +76,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;
@@ -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

@@ -114,8 +114,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");

src/popup.ts

@@ -13,6 +13,7 @@ import {
     IsChannelWhitelistedResponse,
     IsInfoFoundMessageResponse,
     LogResponse,
+    LoopedChapterResponse,
     Message,
     MessageResponse,
     PopupMessage,
@@ -539,7 +540,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
 
     //display the video times from the array at the top, in a different section
-    function displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], time: number) {
+    async function displayDownloadedSponsorTimes(sponsorTimes: SponsorTime[], time: number) {
         let currentSegmentTab = segmentTab;
         if (!sponsorTimes.some((segment) => segment.actionType === ActionType.Chapter && segment.source !== SponsorSourceType.YouTube)) {
             PageElements.issueReporterTabs.classList.add("hidden");
@@ -554,6 +555,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             }
         }
 
+        const response = await sendTabMessageAsync({message : "getLoopedChapter"}) as LoopedChapterResponse
+        const loopedChapter = response.UUID;
+
         // Sort list by start time
         const downloadedTimes = sponsorTimes
             .filter((segment) => {
@@ -681,9 +685,22 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             uuidButton.className = "voteButton";
             uuidButton.src = chrome.runtime.getURL("icons/clipboard.svg");
             uuidButton.title = chrome.i18n.getMessage("copySegmentID");
-            uuidButton.addEventListener("click", () => {
-                copyToClipboard(UUID);
+            uuidButton.addEventListener("click", async () => {
                 const stopAnimation = AnimationUtils.applyLoadingAnimation(uuidButton, 0.3);
+
+                if (UUID.length > 60) {
+                    copyToClipboard(UUID);
+                } else {
+                    const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                        UUID: UUID,
+                        videoID: currentVideoID
+                    });
+        
+                    if (segmentIDData.ok && segmentIDData.responseText) {
+                        copyToClipboard(segmentIDData.responseText);
+                    }
+                }
+
                 stopAnimation();
             });
 
@@ -715,6 +732,37 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 })
             });
 
+            const loopButton = document.createElement("input");
+            const loopButtonIcon = document.createElement("img");
+            loopButtonIcon.src = loopedChapter === UUID ? chrome.runtime.getURL("icons/looped.svg") : chrome.runtime.getURL("icons/loop.svg");
+            loopButtonIcon.className = "loopButtonIcon";
+            loopButton.type = "checkbox";
+            loopButton.checked = loopedChapter === UUID;
+            loopButton.id = "loopChapterButtonContainer" + UUID;
+            loopButton.className = "loopButton hidden";
+
+            loopButton.addEventListener("click", () => {
+                const stopAnimation = AnimationUtils.applyLoadingAnimation(loopButtonIcon, 0.4);
+                stopAnimation();
+                if (loopButton.checked) {
+                    document.querySelectorAll(".loopButton").forEach((e :HTMLInputElement) => e.checked = false);
+                    document.querySelectorAll(".loopButtonIcon").forEach((e :HTMLImageElement) => e.src = chrome.runtime.getURL("icons/loop.svg"));
+                    sendTabMessage({message: "loopChapter", UUID : UUID})
+                    loopButton.checked = true;
+                } else {
+                    sendTabMessage({message: "loopChapter", UUID : null})
+                    loopButton.checked = false;
+                }
+                loopButtonIcon.src = loopButton.checked ? chrome.runtime.getURL("icons/looped.svg") : chrome.runtime.getURL("icons/loop.svg");
+                loopButtonLabel.title = loopButton.checked ? chrome.i18n.getMessage("unloopChapter") : chrome.i18n.getMessage("loopChapter");
+            });
+            const loopButtonLabel = document.createElement("label");
+            loopButtonLabel.setAttribute("for", loopButton.id);
+            loopButtonLabel.className = "voteButton";
+            loopButtonLabel.title = loopedChapter === UUID ? chrome.i18n.getMessage("unloopChapter") : chrome.i18n.getMessage("loopChapter");
+            loopButtonLabel.appendChild(loopButtonIcon);
+            loopButtonLabel.appendChild(loopButton);
+
             const skipButton = document.createElement("img");
             skipButton.id = "sponsorTimesSkipButtonContainer" + UUID;
             skipButton.className = "voteButton";
@@ -730,6 +778,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             voteButtonsContainer.appendChild(upvoteButton);
             voteButtonsContainer.appendChild(downvoteButton);
             voteButtonsContainer.appendChild(uuidButton);
+            if (downloadedTimes[i].actionType === ActionType.Chapter) {
+                voteButtonsContainer.appendChild(loopButtonLabel);
+            }
             if (downloadedTimes[i].actionType === ActionType.Skip || downloadedTimes[i].actionType === ActionType.Mute
                     || downloadedTimes[i].actionType === ActionType.Poi
                     && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(downloadedTimes[i].hidden)) {
@@ -917,7 +968,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         //get the channel url
         const response = await sendTabMessageAsync({ message: 'getChannelID' }) as GetChannelIDResponse;
         if (!response.channelID) {
-            alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
+            if (response.isYTTV) {
+                alert(chrome.i18n.getMessage("yttvNoChannelWhitelist"));
+            } else {
+                alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
+            }
             return;
         }
 

src/render/CategoryPill.tsx

@@ -43,7 +43,7 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        let referenceNode = 
+        let referenceNode =
             await waitFor(() => getYouTubeTitleNode());
 
         // Experimental YouTube layout with description on right
@@ -119,6 +119,8 @@ export class CategoryPill {
     }
 
     async setSegment(segment: SponsorTime): Promise<void> {
+        await waitFor(() => this.ref.current);
+
         if (this.ref.current?.state?.segment !== segment) {
             const newState = {
                 segment,

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 
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                fadeIn={!upcomingNoticeShown}
+                smaller={!voteNotice && (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAll 
+                    || (Config.config.noticeVisibilityMode >= NoticeVisibilityMode.MiniForAutoSkip && autoSkip))}
+                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/render/UpcomingNotice.tsx

@@ -41,7 +41,7 @@ class UpcomingNotice {
                 closeListener={() => this.close()}
                 smaller={true}
                 fadeIn={true}
-                unskipTime={timeLeft} />
+                maxCountdownTime={timeLeft} />
         );
     }
 

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[];
@@ -219,7 +219,7 @@ export interface ToggleSkippable {
     setShowKeybindHint: (show: boolean) => void;
 }
 
-export enum NoticeVisbilityMode {
+export enum NoticeVisibilityMode {
     FullSize = 0,
     MiniForAutoSkip = 1,
     MiniForAll = 2,

src/utils.ts

@@ -5,6 +5,7 @@ import { getHash, HashedValue } from "../maze-utils/src/hash";
 import { waitFor } from "../maze-utils/src";
 import { findValidElementFromSelector } from "../maze-utils/src/dom";
 import { isSafari } from "../maze-utils/src/config";
+import { asyncRequestToServer } from "./utils/requests";
 
 export default class Utils {
     
@@ -198,7 +199,7 @@ export default class Utils {
 
     getSponsorIndexFromUUID(sponsorTimes: SponsorTime[], UUID: string): number {
         for (let i = 0; i < sponsorTimes.length; i++) {
-            if (sponsorTimes[i].UUID === UUID) {
+            if (sponsorTimes[i].UUID && (sponsorTimes[i].UUID.startsWith(UUID) || UUID.startsWith(sponsorTimes[i].UUID))) {
                 return i;
             }
         }
@@ -248,6 +249,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)
@@ -282,6 +284,17 @@ export default class Utils {
         if ((chrome.extension.inIncognitoContext && !Config.config.trackDownvotesInPrivate)
                 || !Config.config.trackDownvotes) return;
 
+        if (segmentUUID.length < 60) {
+            const segmentIDData = await asyncRequestToServer("GET", "/api/segmentID", {
+                UUID: segmentUUID,
+                videoID
+            });
+
+            if (segmentIDData.ok && segmentIDData.responseText) {
+                segmentUUID = segmentIDData.responseText;
+            }
+        }
+
         const hashedVideoID = (await getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
         const UUIDHash = await getHash(segmentUUID, 1);
 
@@ -308,6 +321,7 @@ export default class Utils {
 
             allDownvotes[hashedVideoID] = currentVideoData;
         }
+        console.log(allDownvotes)
 
         const entries = Object.entries(allDownvotes);
         if (entries.length > 10000) {

src/utils/categoryUtils.ts

@@ -44,6 +44,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/compatibility.ts

@@ -12,4 +12,8 @@ export function runCompatibilityChecks() {
             Config.config.showZoomToFillError2 = false;
         }, 10000);
     }
+}
+
+export function isVorapisInstalled() {
+    return document.querySelector(`.v3`);
 }

src/utils/exporter.ts

@@ -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

@@ -1,8 +1,11 @@
 import { ActionType, Category, SponsorSourceType, SponsorTime, VideoID } from "../types";
 import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
+import Config from "../config";
 
 export function getControls(): HTMLElement {
     const controlsSelectors = [
+        // New YouTube (2025 April)
+        ".ytp-right-controls-right",
         // YouTube
         ".ytp-right-controls",
         // Mobile YouTube
@@ -10,7 +13,11 @@ export function getControls(): HTMLElement {
         // Invidious/videojs video element's controls element
         ".vjs-control-bar",
         // Piped shaka player
-        ".shaka-bottom-controls"
+        ".shaka-bottom-controls",
+        // Vorapis v3
+        ".html5-player-chrome",
+        // tv.youtube.com
+        ".ypcs-control-buttons-right"
     ];
 
     for (const controlsSelector of controlsSelectors) {
@@ -53,10 +60,15 @@ export function getHashParams(): Record<string, unknown> {
     return {};
 }
 
+export function hasAutogeneratedChapters(): boolean {
+    return !!document.querySelector("ytd-engagement-panel-section-list-renderer ytd-macro-markers-list-renderer #menu");
+}
+
 export function getExistingChapters(currentVideoID: VideoID, duration: number): SponsorTime[] {
     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 chapters: SponsorTime[] = [];
     // .ytp-timed-markers-container indicates that key-moments are present, which should not be divided

src/utils/segmentData.ts

@@ -5,6 +5,7 @@ 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 {
@@ -48,14 +49,16 @@ async function fetchSegmentsForVideo(videoID: VideoID): Promise<SegmentResponse>
     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.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) {
@@ -101,4 +104,4 @@ function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
     }
 
     return actionTypes;
-}
+}

src/utils/thumbnails.ts

@@ -1,6 +1,6 @@
 import { isOnInvidious, parseYouTubeVideoIDFromURL } from "../../maze-utils/src/video";
 import Config from "../config";
-import { getVideoLabel } from "./videoLabels";
+import { getHasStartSegment, getVideoLabel } from "./videoLabels";
 import { getThumbnailSelector, setThumbnailListener } from "../../maze-utils/src/thumbnailManagement";
 import { VideoID } from "../types";
 import { getSegmentsForVideo } from "./segmentData";
@@ -58,10 +58,27 @@ function thumbnailHoverListener(e: MouseEvent) {
     if (!thumbnail) return;
 
     // Pre-fetch data for this video
-    const videoID = extractVideoID(thumbnail);
-    if (videoID) {
-        void getSegmentsForVideo(videoID, false);
-    }
+    let fetched = false;
+    const preFetch = async () => {
+        fetched = true;
+        const videoID = extractVideoID(thumbnail);
+        if (videoID && await getHasStartSegment(videoID)) {
+            void getSegmentsForVideo(videoID, false);
+        }
+    };
+    const timeout = setTimeout(preFetch, 100);
+    const onMouseDown = () => {
+        clearTimeout(timeout);
+        if (!fetched) {
+            preFetch();
+        }
+    };
+
+    e.target.addEventListener("mousedown", onMouseDown, { once: true });
+    e.target.addEventListener("mouseleave", () => {
+        clearTimeout(timeout);
+        e.target.removeEventListener("mousedown", onMouseDown);
+    }, { once: true });
 }
 
 function getLink(thumbnail: HTMLImageElement): HTMLAnchorElement | null {

src/utils/videoLabels.ts

@@ -6,9 +6,14 @@ import { asyncRequestToServer } from "./requests";
 
 const utils = new Utils();
 
+interface VideoLabelsCacheData {
+    category: Category;
+    hasStartSegment: boolean;
+}
+
 export interface LabelCacheEntry {
     timestamp: number;
-    videos: Record<VideoID, Category>;
+    videos: Record<VideoID, VideoLabelsCacheData>;
 }
 
 const labelCache: Record<string, LabelCacheEntry> = {};
@@ -21,7 +26,7 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
         return cachedEntry;
     }
 
-    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
+    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}?hasStartSegment=true`);
     if (response.status !== 200) {
         // No video labels or server down
         labelCache[hashPrefix] = {
@@ -36,7 +41,10 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
 
         const newEntry: LabelCacheEntry = {
             timestamp: Date.now(),
-            videos: Object.fromEntries(data.map(video => [video.videoID, video.segments[0].category])),
+            videos: Object.fromEntries(data.map(video => [video.videoID, {
+                category: video.segments[0]?.category,
+                hasStartSegment: video.hasStartSegment
+            }])),
         };
         labelCache[hashPrefix] = newEntry;
 
@@ -55,11 +63,11 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
 }
 
 export async function getVideoLabel(videoID: VideoID): Promise<Category | null> {
-    const prefix = (await getHash(videoID, 1)).slice(0, 3);
+    const prefix = (await getHash(videoID, 1)).slice(0, 4);
     const result = await getLabelHashBlock(prefix);
 
     if (result) {
-        const category = result.videos[videoID];
+        const category = result.videos[videoID]?.category;
         if (category && utils.getCategorySelection(category).option !== CategorySkipOption.Disabled) {
             return category;
         } else {
@@ -67,5 +75,16 @@ export async function getVideoLabel(videoID: VideoID): Promise<Category | null>
         }
     }
 
+    return null;
+}
+
+export async function getHasStartSegment(videoID: VideoID): Promise<boolean | null> {
+    const prefix = (await getHash(videoID, 1)).slice(0, 4);
+    const result = await getLabelHashBlock(prefix);
+
+    if (result) {
+        return result?.videos[videoID]?.hasStartSegment ?? false;
+    }
+
     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

@@ -127,6 +127,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();
 

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") {