Fix german title not being shortened

README.md

@@ -75,4 +75,4 @@ Icons made by:
 
 ### License
 
-This project is licensed under GNU GPL v3 or any later version
+This project is licensed under GNU LGPL v3 or any later version

manifest/manifest.json

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

package.json

@@ -38,7 +38,7 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "4.9",
-    "web-ext": "^7.10.0",
+    "web-ext": "^7.6.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"

public/content.css

@@ -780,18 +780,6 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
-/* Description on right layout */
-#title > #categoryPillParent {
-	font-size: 2rem;
-	font-weight: bold;
-	display: flex;
-	justify-content: center;
-	line-height: 2.8rem;
-}
-#title > #categoryPillParent > #categoryPill.cbPillOpen {
-	margin-bottom: 5px;
-}
-
 #categoryPillParent {
 	height: fit-content;
     margin-top: auto;

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.runtime.getURL("/help/index.html")});
+            chrome.tabs.create({url: chrome.extension.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.runtime.getURL("/permissions/index.html")});
+                chrome.tabs.create({url: chrome.extension.getURL("/permissions/index.html")});
             }
         }
     }, 1500);
@@ -160,8 +160,8 @@ async function registerFirefoxContentScript(options: Registration) {
             ids: [options.id]
         }).catch(() => []);
 
-        if (existingRegistrations && existingRegistrations.length > 0 
-            && options.matches.every((match) => existingRegistrations[0].matches.includes(match))) {
+        if (existingRegistrations.length > 0 
+            && existingRegistrations[0].matches.every((match) => options.matches.includes(match))) {
             // No need to register another script, already registered
             return;
         }
@@ -222,35 +222,27 @@ 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);
-    
-        if (response.ok) {
-            return {
-                successType: 1,
-                responseText: await response.text()
-            };
-        } else if (response.status == 405) {
-            //duplicate vote
-            return {
-                successType: 0,
-                statusCode: response.status,
-                responseText: await response.text()
-            };
-        } else {
-            //error while connect
-            return {
-                successType: -1,
-                statusCode: response.status,
-                responseText: await response.text()
-            };
-        }
-    } catch (e) {
-        console.error(e);
+    //publish this vote
+    const response = await asyncRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection);
+
+    if (response.ok) {
+        return {
+            successType: 1,
+            responseText: await response.text()
+        };
+    } else if (response.status == 405) {
+        //duplicate vote
+        return {
+            successType: 0,
+            statusCode: response.status,
+            responseText: await response.text()
+        };
+    } else {
+        //error while connect
         return {
             successType: -1,
-            statusCode: -1,
-            responseText: ""
+            statusCode: response.status,
+            responseText: await response.text()
         };
     }
 }

src/components/CategoryPillComponent.tsx

@@ -6,7 +6,7 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { AnimationUtils } from "../utils/animationUtils";
 import { Tooltip } from "../render/Tooltip";
 import { getErrorMessage } from "../../maze-utils/src/formating";
 
@@ -23,14 +23,12 @@ export interface CategoryPillState {
 }
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
-    mainRef: React.MutableRefObject<HTMLSpanElement>;
+
     tooltip?: Tooltip;
 
     constructor(props: CategoryPillProps) {
         super(props);
 
-        this.mainRef = React.createRef();
-
         this.state = {
             segment: null,
             show: false,
@@ -45,21 +43,17 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             color: this.getTextColor(),
         }
 
-        // To be able to remove the margin from the parent
-        this.mainRef?.current?.parentElement?.classList?.toggle("cbPillOpen", this.state.show);
-
         return (
             <span style={style}
                 className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
-                onMouseLeave={() => this.closeTooltip()}
-                ref={this.mainRef}>
+                onMouseLeave={() => this.closeTooltip()}>
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
 
                     {
@@ -92,7 +86,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.runtime.getURL("icons/close.png")}
+                <img src={chrome.extension.getURL("icons/close.png")}
                     className="categoryPillClose"
                     onClick={() => {
                         this.setState({ show: false });

src/components/ChapterVoteComponent.tsx

@@ -6,7 +6,7 @@ import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
 import { VoteResponse } from "../messageTypes";
-import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { AnimationUtils } from "../utils/animationUtils";
 import { Tooltip } from "../render/Tooltip";
 import { getErrorMessage } from "../../maze-utils/src/formating";
 

src/components/NoticeComponent.tsx

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

src/components/SubmissionNoticeComponent.tsx

@@ -14,7 +14,7 @@ export interface SubmissionNoticeProps {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
-    callback: () => Promise<boolean>;
+    callback: () => unknown;
 
     closeListener: () => void;
 }
@@ -69,13 +69,6 @@ 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 {
@@ -107,7 +100,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.sortSegments()}
                 title={chrome.i18n.getMessage("sortSegments")}
                 key="sortButton"
-                src={chrome.runtime.getURL("icons/sort.svg")}>
+                src={chrome.extension.getURL("icons/sort.svg")}>
             </img>;
         const exportButton = 
             <img id={"sponsorSkipExportButton" + this.state.idSuffix} 
@@ -115,7 +108,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 onClick={() => this.exportSegments()}
                 title={chrome.i18n.getMessage("exportSegments")}
                 key="exportButton"
-                src={chrome.runtime.getURL("icons/export.svg")}>
+                src={chrome.extension.getURL("icons/export.svg")}>
             </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
@@ -239,11 +232,9 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             }
         }
 
-        this.props.callback().then((success) => {
-            if (success) {
-                this.cancel();
-            }
-        });
+        this.props.callback();
+
+        this.cancel();
     }
 
     sortSegments(): void {

src/components/options/CategorySkipOptionsComponent.tsx

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

src/content.ts

@@ -26,7 +26,7 @@ import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
 import { getStartTimeFromUrl } from "./utils/urlParser";
 import { getControls, getExistingChapters, getHashParams, isPlayingPlaylist, isVisible } from "./utils/pageUtils";
 import { CategoryPill } from "./render/CategoryPill";
-import { AnimationUtils } from "../maze-utils/src/animationUtils";
+import { AnimationUtils } from "./utils/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
 import { logDebug, logWarn } from "./utils/logger";
 import { importTimes } from "./utils/exporter";
@@ -258,12 +258,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             break;
         case "refreshSegments":
             // update video on refresh if videoID invalid
-            if (!getVideoID()) {
-                checkVideoIDChange().then(() => {
-                    // if still no video ID found, return an empty info to the popup
-                    if (!getVideoID()) chrome.runtime.sendMessage({ message: "infoUpdated" });
-                });
-            }
+            if (!getVideoID()) checkVideoIDChange();
             // fetch segments
             sponsorsLookup(false);
 
@@ -459,9 +454,7 @@ function videoIDChange(): void {
 }
 
 function handleMobileControlsMutations(): void {
-    // Don't update while scrubbing
-    if (!chrome.runtime?.id 
-            || document.querySelector(".YtProgressBarProgressBarPlayheadDotInDragging")) return;
+    if (!chrome.runtime?.id) return;
 
     updateVisibilityOfPlayerControlsButton();
 
@@ -777,7 +770,6 @@ function getVirtualTime(): number {
 
 function inMuteSegment(currentTime: number, includeOverlap: boolean): boolean {
     const checkFunction = (segment) => segment.actionType === ActionType.Mute
-        && segment.hidden === SponsorHideType.Visible
         && segment.segment[0] <= currentTime
         && (segment.segment[1] > currentTime || (includeOverlap && segment.segment[1] + 0.02 > currentTime));
     return sponsorTimes?.some(checkFunction) || sponsorTimesSubmitting.some(checkFunction);
@@ -1616,9 +1608,6 @@ 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;
         }
     }
 }
@@ -1779,7 +1768,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.draggable = isDraggable;
     newButtonImage.id = baseID + "Image";
     newButtonImage.className = "playerButtonImage";
-    newButtonImage.src = chrome.runtime.getURL("icons/" + imageName);
+    newButtonImage.src = chrome.extension.getURL("icons/" + imageName);
 
     // Append image to button
     newButton.appendChild(newButtonImage);
@@ -1878,10 +1867,10 @@ function updateEditButtonsOnPlayer(): void {
 
     if (buttonsEnabled) {
         if (creatingSegment) {
-            playerButtons.startSegment.image.src = chrome.runtime.getURL("icons/PlayerStopIconSponsorBlocker.svg");
+            playerButtons.startSegment.image.src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker.svg");
             playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorEnd"));
         } else {
-            playerButtons.startSegment.image.src = chrome.runtime.getURL("icons/PlayerStartIconSponsorBlocker.svg");
+            playerButtons.startSegment.image.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker.svg");
             playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
         }
     }
@@ -1994,9 +1983,6 @@ function updateSponsorTimesSubmitting(getFromConfig = true) {
         }
 
         if (sponsorTimesSubmitting.length > 0) {
-            // Assume they already previewed a segment
-            previewedSegment = true;
-
             importExistingChapters(true);
         }
     }
@@ -2062,7 +2048,7 @@ function openInfoMenu() {
             }
         }
     });
-    frame.src = chrome.runtime.getURL("popup.html");
+    frame.src = chrome.extension.getURL("popup.html");
     popup.appendChild(frame);
 
     const elemHasChild = (elements: NodeListOf<HTMLElement>): Element => {
@@ -2271,26 +2257,22 @@ function submitSegments() {
 
 //send the message to the background js
 //called after all the checks have been made that it's okay to do so
-async function sendSubmitMessage(): Promise<boolean> {
+async function sendSubmitMessage() {
     // check if all segments are full video
     const onlyFullVideo = sponsorTimesSubmitting.every((segment) => segment.actionType === ActionType.Full);
     // Block if submitting on a running livestream or premiere
     if (!onlyFullVideo && (getIsLivePremiere() || isVisible(document.querySelector(".ytp-live-badge")))) {
         alert(chrome.i18n.getMessage("liveOrPremiere"));
-        return false;
+        return;
     }
 
-    if (!previewedSegment 
-            && !sponsorTimesSubmitting.every((segment) => 
-                [ActionType.Full, ActionType.Chapter, ActionType.Poi].includes(segment.actionType) 
-                    || segment.segment[1] >= getVideo()?.duration
-                    || segment.segment[0] === 0)) {
+    if (!previewedSegment) {
         alert(`${chrome.i18n.getMessage("previewSegmentRequired")} ${keybindToString(Config.config.previewKeybind)}`);
-        return false;
+        return;
     }
 
     // Add loading animation
-    playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
+    playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
     const stopAnimation = AnimationUtils.applyLoadingAnimation(playerButtons.submit.button, 1, () => updateEditButtonsOnPlayer());
 
     //check if a sponsor exceeds the duration of the video
@@ -2312,7 +2294,7 @@ async function sendSubmitMessage(): Promise<boolean> {
                 const confirmShort = chrome.i18n.getMessage("shortCheck") + "\n\n" +
                     getSegmentsMessage(sponsorTimesSubmitting);
 
-                if(!confirm(confirmShort)) return false;
+                if(!confirm(confirmShort)) return;
             }
         }
     }
@@ -2362,12 +2344,10 @@ async function sendSubmitMessage(): Promise<boolean> {
         if (fullVideoSegment) {
             categoryPill?.setSegment(fullVideoSegment);
         }
-
-        return true;
     } else {
         // Show that the upload failed
         playerButtons.submit.button.style.animation = "unset";
-        playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
+        playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
 
         if (response.status === 403 && response.responseText.startsWith("Submission rejected due to a tip from a moderator.")) {
             openWarningDialog(skipNoticeContentContainer);
@@ -2375,8 +2355,6 @@ async function sendSubmitMessage(): Promise<boolean> {
             alert(getErrorMessage(response.status, response.responseText));
         }
     }
-
-    return false;
 }
 
 //get the message that visually displays the video times
@@ -2402,8 +2380,6 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
 }
 
 function updateActiveSegment(currentTime: number): void {
-    previewBar?.updateChapterText(sponsorTimes, sponsorTimesSubmitting, currentTime);
-
     chrome.runtime.sendMessage({
         message: "time",
         time: currentTime
@@ -2555,7 +2531,7 @@ function addCSS() {
 
                 fileref.rel = "stylesheet";
                 fileref.type = "text/css";
-                fileref.href = chrome.runtime.getURL(file);
+                fileref.href = chrome.extension.getURL(file);
 
                 head.appendChild(fileref);
             }

src/js-components/previewBar.ts

@@ -11,6 +11,7 @@ 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";
 
@@ -124,11 +125,34 @@ class PreviewBar {
             mouseOnSeekBar = false;
         });
 
-        seekBar.addEventListener("mousemove", (e: MouseEvent) => {
-            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer || !chrome.runtime?.id) return;
+        const observer = new MutationObserver((mutations) => {
+            if (!mouseOnSeekBar || !this.categoryTooltip || !this.categoryTooltipContainer) return;
 
-            let noYoutubeChapters = !!tooltipTextWrapper.querySelector(".ytp-tooltip-text.ytp-tooltip-text-no-title");
-            const timeInSeconds = this.decimalToTime((e.clientX - seekBar.getBoundingClientRect().x) / seekBar.clientWidth);
+            // Only care about mutations to time tooltip
+            if (!mutations.some((mutation) => (mutation.target as HTMLElement).classList.contains("ytp-tooltip-text"))) {
+                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] =
@@ -174,6 +198,15 @@ 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 {
@@ -274,7 +307,6 @@ class PreviewBar {
             return (b[1] - b[0]) - (a[1] - a[0]);
         });
         for (const segment of sortedSegments) {
-            if (segment.actionType === ActionType.Chapter) continue;
             const bar = this.createBar(segment);
 
             this.container.appendChild(bar);
@@ -314,7 +346,7 @@ class PreviewBar {
         bar.style.left = this.timeToPercentage(startTime);
 
         if (duration > 0) {
-            bar.style.right = this.timeToRightPercentage(endTime);
+            bar.style.right = this.timeToPercentage(this.videoDuration - endTime);
         }
         if (this.chapterFilter(barSegment) && segment[1] < this.videoDuration) {
             bar.style.marginRight = `${this.chapterMargin}px`;
@@ -887,22 +919,7 @@ class PreviewBar {
         return `${this.timeToDecimal(time) * 100}%`
     }
 
-    timeToRightPercentage(time: number): string {
-        return `${(1 - this.timeToDecimal(time)) * 100}%`
-    }
-
     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;
@@ -912,9 +929,8 @@ class PreviewBar {
                 const chapterElement = this.originalChapterBarBlocks[i];
                 const widthPixels = parseFloat(chapterElement.style.width.replace("px", ""));
 
-                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)) {
+                if (time >= this.existingChapters[i].segment[1]) {
+                    const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
                     pixelOffset += widthPixels + marginPixels;
                     lastCheckedChapter = i;
                 } else {
@@ -928,22 +944,13 @@ class PreviewBar {
                 const latestWidth = parseFloat(this.originalChapterBarBlocks[lastCheckedChapter + 1].style.width.replace("px", ""));
                 const latestChapterDuration = latestChapter.segment[1] - latestChapter.segment[0];
 
-                if (isTime) {
-                    const percentageInCurrentChapter = (value - latestChapter.segment[0]) / latestChapterDuration;
-                    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));
-                }
+                const percentageInCurrentChapter = (time - latestChapter.segment[0]) / latestChapterDuration;
+                const sizeOfCurrentChapter = latestWidth / totalPixels;
+                return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
             }
         }
 
-        if (isTime) {
-            return Math.min(1, value / this.videoDuration);
-        } else {
-            return Math.max(0, value * this.videoDuration);
-        }
+        return Math.min(1, time / this.videoDuration);
     }
 
     /*

src/js-components/skipButtonControlBar.ts

@@ -1,7 +1,7 @@
 import Config from "../config";
 import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
-import { AnimationUtils } from "../../maze-utils/src/animationUtils";
+import { AnimationUtils } from "../utils/animationUtils";
 import { keybindToString } from "../../maze-utils/src/config";
 import { isMobileControlsOpen } from "../utils/mobileUtils";
 

src/options.ts

@@ -286,7 +286,7 @@ async function init() {
                             break;
                         case "resetToDefault":
                             Config.resetToDefault();
-                            setTimeout(() => window.location.reload(), 200);
+                            window.location.reload();
                             break;
                     }
                 });
@@ -632,7 +632,8 @@ async function setTextOption(option: string, element: HTMLElement, value: string
                         await invidiousOnClick(checkbox, "supportInvidious");
                     }
 
-                    setTimeout(() => window.location.reload(), 200);
+                    window.location.reload();
+
                 } catch (e) {
                     alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
                 }

src/popup.ts

@@ -19,7 +19,7 @@ import {
     VoteResponse,
 } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
-import { AnimationUtils } from "../maze-utils/src/animationUtils";
+import { AnimationUtils } from "./utils/animationUtils";
 import { shortCategoryName } from "./utils/categoryUtils";
 import { localizeHtmlPage } from "../maze-utils/src/setup";
 import { exportTimes } from "./utils/exporter";
@@ -465,8 +465,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             return;
         }
 
-        // if request has no field other than message, then the page currently being browsed is not YouTube
-        if (request.found != undefined) {
+        //if request is undefined, then the page currently being browsed is not YouTube
+        if (request != undefined) {
             //remove loading text
             PageElements.mainControls.style.display = "block";
             if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
@@ -490,8 +490,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
                 PageElements.issueReporterImportExport.classList.remove("hidden");
             }
-        } else {
-            displayNoVideo();
         }
 
         //see if whitelist button should be swapped

src/render/CategoryPill.tsx

@@ -43,15 +43,9 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        let referenceNode = 
+        const referenceNode = 
             await waitFor(() => getYouTubeTitleNode());
 
-        // Experimental YouTube layout with description on right
-        const isOnDescriptionOnRightLayout = document.querySelector("#title #description");
-        if (isOnDescriptionOnRightLayout) {
-            referenceNode = referenceNode.parentElement;
-        }
-
         if (referenceNode && !referenceNode.contains(this.container)) {
             if (!this.container) {
                 this.container = document.createElement('span');
@@ -97,9 +91,7 @@ export class CategoryPill {
             parent.appendChild(this.container);
 
             referenceNode.prepend(parent);
-            if (!isOnDescriptionOnRightLayout) {
-                referenceNode.style.display = "flex";
-            }
+            referenceNode.style.display = "flex";
         }
     }
 

src/render/RectangleTooltip.tsx

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

src/render/SubmissionNotice.tsx

@@ -11,7 +11,7 @@ class SubmissionNotice {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: () => unknown;
 
-    callback: () => Promise<boolean>;
+    callback: () => unknown;
 
     noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
 
@@ -19,7 +19,7 @@ class SubmissionNotice {
 
     root: Root;
 
-    constructor(contentContainer: ContentContainer, callback: () => Promise<boolean>) {
+    constructor(contentContainer: ContentContainer, callback: () => unknown) {
         this.noticeRef = React.createRef();
 
         this.contentContainer = contentContainer;

src/utils/animationUtils.ts

@@ -0,0 +1,78 @@
+ /**
+ * Starts a spinning animation and returns a function to be called when it should be stopped
+ * The callback will be called when the animation is finished 
+ * It waits until a full rotation is complete
+ */
+function applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => Promise<void> {
+    element.style.animation = `rotate ${time}s 0s infinite`;
+
+    return async () => new Promise((resolve) => {
+        // Make the animation finite
+        element.style.animation = `rotate ${time}s`;
+
+        // When the animation is over, hide the button
+        const animationEndListener = () => {
+            if (callback) callback();
+
+            element.style.animation = "none";
+
+            element.removeEventListener("animationend", animationEndListener);
+
+            resolve();
+        };
+
+        element.addEventListener("animationend", animationEndListener);
+    });
+}
+
+function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } {
+    if (enabled) element.classList.add("autoHiding");
+    element.classList.add("sbhidden");
+    element.classList.add("animationDone");
+    if (!rightSlide) element.classList.add("autoHideLeft");
+
+    let mouseEntered = false;
+
+    return {
+        hide: () => {
+            mouseEntered = false;
+            if (element.classList.contains("autoHiding")) {
+                element.classList.add("sbhidden");
+            }
+        },
+        show: () => {
+            mouseEntered = true;
+            element.classList.remove("animationDone");
+
+            // Wait for next event loop
+            setTimeout(() => {
+                if (mouseEntered) element.classList.remove("sbhidden")
+            }, 10);
+        }
+    };
+}
+
+function setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
+    const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide);
+
+    container.addEventListener("mouseleave", () => hide());
+    container.addEventListener("mouseenter", () => show());
+}
+
+function enableAutoHideAnimation(element: Element): void {
+    element.classList.add("autoHiding");
+    element.classList.add("sbhidden");
+}
+
+function disableAutoHideAnimation(element: Element): void {
+    element.classList.remove("autoHiding");
+    element.classList.remove("sbhidden");
+}
+
+export const AnimationUtils = {
+    applyLoadingAnimation,
+    setupAutoHideAnimation,
+    setupCustomHideAnimation,
+    enableAutoHideAnimation,
+    disableAutoHideAnimation
+};