bump version

Fixes #1959

manifest/manifest.json

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

src/background.ts

@@ -123,7 +123,7 @@ chrome.runtime.onInstalled.addListener(function () {
         // If there is no userID, then it is the first install.
         if (!userID && !Config.local.alreadyInstalled){
             //open up the install page
-            chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+            chrome.tabs.create({url: chrome.runtime.getURL("/help/index.html")});
 
             //generate a userID
             const newUserID = generateUserID();
@@ -137,7 +137,7 @@ chrome.runtime.onInstalled.addListener(function () {
 
         if (Config.config.supportInvidious) {
             if (!(await utils.containsInvidiousPermission())) {
-                chrome.tabs.create({url: chrome.extension.getURL("/permissions/index.html")});
+                chrome.tabs.create({url: chrome.runtime.getURL("/permissions/index.html")});
             }
         }
     }, 1500);

src/components/CategoryPillComponent.tsx

@@ -53,7 +53,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
 
                     {
@@ -86,7 +86,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.extension.getURL("icons/close.png")}
+                <img src={chrome.runtime.getURL("icons/close.png")}
                     className="categoryPillClose"
                     onClick={() => {
                         this.setState({ show: false });

src/components/NoticeComponent.tsx

@@ -207,7 +207,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                     
 
                                         {/* Close button */}
-                                        <img src={chrome.extension.getURL("icons/close.png")}
+                                        <img src={chrome.runtime.getURL("icons/close.png")}
                                             className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
                                                             + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
                                             onClick={() => this.close()}>

src/components/SponsorTimeEditComponent.tsx

@@ -34,7 +34,7 @@ export interface SponsorTimeEditState {
     chapterNameSelectorHovering: boolean;
 }
 
-const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
+const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => !["chapter", "intro"].includes(name))
     .map((name) => chrome.i18n.getMessage("category_" + name).split(/\/|\s|-/)));
 
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
@@ -81,13 +81,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     componentDidMount(): void {
         // Prevent inputs from triggering key events
-        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', function (event) {
+        document.getElementById("sponsorTimeEditContainer" + this.idSuffix).addEventListener('keydown', (e) => {
-            event.stopPropagation();
+            e.stopPropagation();
         });
 
         // Prevent scrolling while changing times
-        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', function (event) {
+        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', (e) => {
-            event.preventDefault();
+            if (this.state.editing) {
+                e.preventDefault();
+            }
         }, {passive: false});
 
         // Add as a config listener
@@ -221,7 +223,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
-                            src={chrome.extension.getURL("icons/help.svg")}
+                            src={chrome.runtime.getURL("icons/help.svg")}
                             title={chrome.i18n.getMessage("categoryGuidelines")} />
                     </a>
                 </div>

src/components/SubmissionNoticeComponent.tsx

@@ -69,6 +69,13 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         this.videoObserver.observe(this.contentContainer().v, {
             attributes: true
         });
+
+        // Prevent zooming while changing times
+        document.getElementById("sponsorSkipNoticeMiddleRow" + this.state.idSuffix).addEventListener('wheel', function (event) {
+            if (event.ctrlKey) {
+                event.preventDefault();
+            }
+        }, {passive: false});
     }
 
     componentWillUnmount(): void {
@@ -100,7 +107,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.sortSegments()}
                 title={chrome.i18n.getMessage("sortSegments")}
                 key="sortButton"
-                src={chrome.extension.getURL("icons/sort.svg")}>
+                src={chrome.runtime.getURL("icons/sort.svg")}>
             </img>;
         const exportButton = 
             <img id={"sponsorSkipExportButton" + this.state.idSuffix} 
@@ -108,7 +115,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.exportSegments()}
                 title={chrome.i18n.getMessage("exportSegments")}
                 key="exportButton"
-                src={chrome.extension.getURL("icons/export.svg")}>
+                src={chrome.runtime.getURL("icons/export.svg")}>
             </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}

src/components/options/CategorySkipOptionsComponent.tsx

@@ -158,7 +158,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             });
         }
 
-        Config.forceLocalUpdate("categorySelections");
+        Config.forceSyncUpdate("categorySelections");
     }
 
     getCategorySkipOptions(): JSX.Element[] {

src/content.ts

@@ -1608,6 +1608,9 @@ function sendTelemetryAndCount(skippingSegments: SponsorTime[], secondsSkipped:
             }
 
             if (fullSkip) asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID);
+        } else if (!previewedSegment && sponsorTimesSubmitting.some((s) => s.segment === segment.segment)) {
+            // Count that as a previewed segment
+            previewedSegment = true;
         }
     }
 }
@@ -1768,7 +1771,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.draggable = isDraggable;
     newButtonImage.id = baseID + "Image";
     newButtonImage.className = "playerButtonImage";
-    newButtonImage.src = chrome.extension.getURL("icons/" + imageName);
+    newButtonImage.src = chrome.runtime.getURL("icons/" + imageName);
 
     // Append image to button
     newButton.appendChild(newButtonImage);
@@ -1867,10 +1870,10 @@ function updateEditButtonsOnPlayer(): void {
 
     if (buttonsEnabled) {
         if (creatingSegment) {
-            playerButtons.startSegment.image.src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker.svg");
+            playerButtons.startSegment.image.src = chrome.runtime.getURL("icons/PlayerStopIconSponsorBlocker.svg");
             playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorEnd"));
         } else {
-            playerButtons.startSegment.image.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker.svg");
+            playerButtons.startSegment.image.src = chrome.runtime.getURL("icons/PlayerStartIconSponsorBlocker.svg");
             playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
         }
     }
@@ -1983,6 +1986,9 @@ function updateSponsorTimesSubmitting(getFromConfig = true) {
         }
 
         if (sponsorTimesSubmitting.length > 0) {
+            // Assume they already previewed a segment
+            previewedSegment = true;
+
             importExistingChapters(true);
         }
     }
@@ -2048,7 +2054,7 @@ function openInfoMenu() {
             }
         }
     });
-    frame.src = chrome.extension.getURL("popup.html");
+    frame.src = chrome.runtime.getURL("popup.html");
     popup.appendChild(frame);
 
     const elemHasChild = (elements: NodeListOf<HTMLElement>): Element => {
@@ -2266,13 +2272,16 @@ async function sendSubmitMessage() {
         return;
     }
 
-    if (!previewedSegment) {
+    if (!previewedSegment 
+            && !sponsorTimesSubmitting.every((segment) => 
+                [ActionType.Full, ActionType.Chapter, ActionType.Poi].includes(segment.actionType) 
+                    || segment.segment[1] >= getVideo()?.duration)) {
         alert(`${chrome.i18n.getMessage("previewSegmentRequired")} ${keybindToString(Config.config.previewKeybind)}`);
         return;
     }
 
     // Add loading animation
-    playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
+    playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
     const stopAnimation = AnimationUtils.applyLoadingAnimation(playerButtons.submit.button, 1, () => updateEditButtonsOnPlayer());
 
     //check if a sponsor exceeds the duration of the video
@@ -2347,7 +2356,7 @@ async function sendSubmitMessage() {
     } else {
         // Show that the upload failed
         playerButtons.submit.button.style.animation = "unset";
-        playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
+        playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
 
         if (response.status === 403 && response.responseText.startsWith("Submission rejected due to a tip from a moderator.")) {
             openWarningDialog(skipNoticeContentContainer);
@@ -2531,7 +2540,7 @@ function addCSS() {
 
                 fileref.rel = "stylesheet";
                 fileref.type = "text/css";
-                fileref.href = chrome.extension.getURL(file);
+                fileref.href = chrome.runtime.getURL(file);
 
                 head.appendChild(fileref);
             }

src/js-components/previewBar.ts

@@ -11,7 +11,6 @@ import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceT
 import { partition } from "../utils/arrayUtils";
 import { DEFAULT_CATEGORY, shortCategoryName } from "../utils/categoryUtils";
 import { normalizeChapterName } from "../utils/exporter";
-import { getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
 import { findValidElement } from "../../maze-utils/src/dom";
 import { addCleanupListener } from "../../maze-utils/src/cleanup";
 
@@ -125,34 +124,11 @@ class PreviewBar {
             mouseOnSeekBar = false;
         });
 
-        const observer = new MutationObserver((mutations) => {
+        seekBar.addEventListener("mousemove", (e: MouseEvent) => {
-            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer) return;
+            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
 
-            // Only care about mutations to time tooltip
+            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
-            if (!mutations.some((mutation) => (mutation.target as HTMLElement).classList.contains("ytp-tooltip-text"))) {
+            const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
-                return;
-            }
-
-            const tooltipTextElements = tooltipTextWrapper.querySelectorAll(".ytp-tooltip-text");
-            let timeInSeconds: number | null = null;
-            let noYoutubeChapters = false;
-
-            for (const tooltipTextElement of tooltipTextElements) {
-                if (tooltipTextElement.classList.contains('ytp-tooltip-text-no-title')) noYoutubeChapters = true;
-
-                const tooltipText = tooltipTextElement.textContent;
-                if (tooltipText === null || tooltipText.length === 0) continue;
-
-                timeInSeconds = getFormattedTimeToSeconds(tooltipText);
-
-                if (timeInSeconds !== null) break;
-            }
-
-            if (timeInSeconds === null) {
-                originalTooltip.style.removeProperty("display");
-
-                return;
-            }
 
             // Find the segment at that location, using the shortest if multiple found
             const [normalSegments, chapterSegments] =
@@ -198,15 +174,6 @@ class PreviewBar {
                 this.chapterTooltip.style.textAlign = titleTooltip.style.textAlign;
             }
         });
-
-        observer.observe(tooltipTextWrapper, {
-            childList: true,
-            subtree: true,
-        });
-
-        addCleanupListener(() => {
-            observer.disconnect();
-        });
     }
 
     private setTooltipTitle(segment: PreviewBarSegment, tooltip: HTMLElement): void {
@@ -920,6 +887,17 @@ class PreviewBar {
     }
 
     timeToDecimal(time: number): number {
+        return this.decimalTimeConverter(time, true);
+    }
+
+    decimalToTime(decimal: number): number {
+        return this.decimalTimeConverter(decimal, false);
+    }
+
+    /**
+     * Decimal to time or time to decimal
+     */
+    decimalTimeConverter(value: number, isTime: boolean): number {
         if (this.originalChapterBarBlocks?.length > 1 && this.existingChapters.length === this.originalChapterBarBlocks?.length) {
             // Parent element to still work when display: none
             const totalPixels = this.originalChapterBar.parentElement.clientWidth;
@@ -929,8 +907,9 @@ class PreviewBar {
                 const chapterElement = this.originalChapterBarBlocks[i];
                 const widthPixels = parseFloat(chapterElement.style.width.replace("px", ""));
 
-                if (time >= this.existingChapters[i].segment[1]) {
+                const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
-                    const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
+                if ((isTime && value >= this.existingChapters[i].segment[1])
+                        || (!isTime && value >= (pixelOffset + widthPixels + marginPixels) / totalPixels)) {
                     pixelOffset += widthPixels + marginPixels;
                     lastCheckedChapter = i;
                 } else {
@@ -944,13 +923,22 @@ class PreviewBar {
                 const latestWidth = parseFloat(this.originalChapterBarBlocks[lastCheckedChapter + 1].style.width.replace("px", ""));
                 const latestChapterDuration = latestChapter.segment[1] - latestChapter.segment[0];
 
-                const percentageInCurrentChapter = (time - latestChapter.segment[0]) / latestChapterDuration;
+                if (isTime) {
-                const sizeOfCurrentChapter = latestWidth / totalPixels;
+                    const percentageInCurrentChapter = (value - latestChapter.segment[0]) / latestChapterDuration;
-                return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
+                    const sizeOfCurrentChapter = latestWidth / totalPixels;
+                    return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
+                } else {
+                    const percentageInCurrentChapter = (value * totalPixels - pixelOffset) / latestWidth;
+                    return Math.max(0, latestChapter.segment[0] + (percentageInCurrentChapter * latestChapterDuration));
+                }
             }
         }
 
-        return Math.min(1, time / this.videoDuration);
+        if (isTime) {
+            return Math.min(1, value / this.videoDuration);
+        } else {
+            return Math.max(0, value * this.videoDuration);
+        }
     }
 
     /*

src/render/RectangleTooltip.tsx

@@ -59,7 +59,7 @@ export class RectangleTooltip {
                     className="sponsorBlockRectangleTooltip" >
                     <div>
                         <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                            src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                         </img>
                         <span className="sponsorSkipObject">
                             {this.text + (props.link ? ". " : "")}