bump version

Also refactor requests out to seperate file

ci/invidiouslist.json

@@ -1 +1 @@
-["www.youtubekids.com","anontube.lvkaszus.pl","inv.bp.projectsegfau.lt","inv.makerlab.tech","inv.pistasjis.net","inv.tux.pizza","inv.zzls.xyz","invidious.asir.dev","invidious.flokinet.to","invidious.io.lol","invidious.lunar.icu","invidious.no-logs.com","invidious.privacydev.net","invidious.private.coffee","invidious.protokolla.fi","invidious.slipfox.xyz","invidious.tiekoetter.com","iv.ggtyler.dev","iv.melmac.space","iv.nboeck.de","onion.tube","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu","yt.drgnz.club","yt.oelrichsgarcia.de"]
+["www.youtubekids.com","anontube.lvkaszus.pl","inv.citw.lgbt","inv.in.projectsegfau.lt","inv.tux.pizza","inv.zzls.xyz","invidious.asir.dev","invidious.drgns.space","invidious.fdn.fr","invidious.flokinet.to","invidious.io.lol","invidious.lunar.icu","invidious.nerdvpn.de","invidious.no-logs.com","invidious.perennialte.ch","invidious.privacydev.net","invidious.private.coffee","invidious.projectsegfau.lt","invidious.protokolla.fi","invidious.slipfox.xyz","iv.datura.network","iv.ggtyler.dev","iv.melmac.space","iv.nboeck.de","onion.tube","vid.priv.au","vid.puffyan.us","yewtu.be","yt.artemislena.eu","yt.cdaut.de","yt.drgnz.club","yt.oelrichsgarcia.de"]

manifest/firefox-manifest-extra.json

@@ -1,7 +1,11 @@
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "sponsorBlocker@ajay.app"
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "48.0"
+    },
+    "gecko_android": {
+      "strict_min_version": "79.0"
     }
   },
   "background": {

manifest/manifest.json

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

public/content.css

@@ -742,6 +742,7 @@ input::-webkit-inner-spin-button {
 	color: white;
 	font-size: 12px;
 	z-index: 10000;
+	font-weight: normal;
 }
 
 .sponsorBlockTooltip a {
@@ -764,6 +765,12 @@ input::-webkit-inner-spin-button {
 	right: 50%;
 }
 
+.sponsorBlockTooltip.sbTriangle.sbTopTriangle::after {
+	bottom: 100%;
+	top: unset;
+	border-color: transparent transparent rgba(28, 28, 28, 0.7) transparent;
+}
+
 .sponsorBlockLockedColor {
 	color: #ffc83d !important;
 }

public/help/index.html

@@ -34,6 +34,20 @@
 	      Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
     </p>
 
+    <a href="https://dearrow.ajay.app"
+        target="_blank"
+        id="dearrow-link"
+        class="dearrow-link hidden"
+        rel="noreferrer">
+        <img src="/icons/dearrow.svg"/>
+
+        <span id="dearrow-link-text">
+          
+        </span>
+
+        <img src="/icons/close.png" class="close-button"/>
+    </a>
+
     <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
 
     <p class="smallText">

public/help/styles.css

@@ -322,4 +322,33 @@ svg {
   cursor: default;
   background-color: var(--disabled);
   color: grey;
+}
+
+.dearrow-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+
+  font-size: 16px;
+}
+
+.dearrow-link img {
+  width: 35px;
+  padding: 10px
+}
+
+.dearrow-link .close-button {
+  opacity: 0;
+  width: 15px;
+  filter: invert(0.3);
+  transition: opacity 0.2s;
+}
+
+.dearrow-link:hover .close-button {
+  opacity: 1;
+}
+
+.hidden {
+  display: none;
 }

public/options/options.css

@@ -717,4 +717,16 @@ svg {
 .dearrow-link > img {
     width: 40px;
     margin-right: 4px;
+}
+
+.dearrow-link .close-button {
+    opacity: 0;
+    width: 15px;
+    filter: invert(0.3);
+    transition: opacity 0.2s;
+    margin-left: 10px;
+}
+  
+.dearrow-link:hover .close-button {
+    opacity: 1;
 }

public/options/options.html

@@ -75,6 +75,8 @@
                         <span class="promotion-description">
                             __MSG_DeArrowPromotionMessage__
                         </span>
+
+						<img src="/icons/close.png" class="close-button"/>
                     </a>
 				</div>
 
@@ -357,6 +359,18 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
+				<div data-type="toggle" data-sync="cleanPopup" data-no-safari="true">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="cleanPopup" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="cleanPopup">
+							__MSG_cleanPopup__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-sync="darkMode">
 					<div class="switch-container">
 						<label class="switch">

public/popup.css

@@ -130,6 +130,7 @@
   top: 5px;
   right: 5px;
   opacity: 0.5;
+  z-index: 1;
 }
 
 .sbCloseButton:hover {
@@ -260,19 +261,6 @@
   text-align: right;
 }
 
-/*
- * Buttons that appear under a segment on click
- */
-.voteButton {
-  height: 20px;
-  padding: 0 5px;
-  cursor: pointer;
-}
-
-.voteButton:hover {
-  opacity: 0.8;
-}
-
 /*
  * "Voted!" text that appears after voting on a segment
  */

public/popup.html

@@ -20,7 +20,7 @@
         __MSG_betaServerWarning__
       </div>
 
-      <header class="sbPopupLogo">
+      <header id="sbPopupLogo" class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
         <p class="u-mZ">SponsorBlock</p>
       </header>
@@ -111,7 +111,7 @@
       </div>
 
       <!-- Your Work box -->
-      <div class="sbYourWorkBox">
+      <div id="sbYourWorkBox" class="sbYourWorkBox">
         <h1 class="sbHeader" style="padding: 8px 15px;">
           __MSG_yourWork__
         </h1>

public/shared.css

@@ -14,7 +14,7 @@
 }
 
 .sponsorSkipNoticeParent {
-	min-width: 375px;
+	min-width: 390px;
 	max-width: 50%;
 }
 
@@ -216,4 +216,17 @@
 
 	display: flex;
 	align-items: center;
+}
+
+/*
+ * Buttons that appear under a segment on click
+ */
+.voteButton {
+	height: 20px;
+	padding: 0 5px;
+	cursor: pointer;
+}
+
+.voteButton:hover {
+	opacity: 0.8;
 }

src/components/SponsorTimeEditComponent.tsx

@@ -2,14 +2,12 @@ import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
 import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
-import Utils from "../utils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import SelectorComponent, { SelectorOption } from "./SelectorComponent";
 import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
 import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
-
-const utils = new Utils();
+import { asyncRequestToServer } from "../utils/requests";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -297,7 +295,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 ): ""}
 
                 {(!isNaN(segment[1]) && ![ActionType.Poi, ActionType.Full].includes(sponsorTime.actionType)) ? (
-                    <span id={"sponsorTimePreviewButton" + this.idSuffix}
+                    <span id={"sponsorTimePreviewEndButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
                         onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey, true)}>
                         {chrome.i18n.getMessage("End")}
@@ -590,7 +588,24 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             getFormattedTime(sponsorTime.segment[1], true)];
     }
 
+    lastEditTime = 0;
+    editTimeTimeout: NodeJS.Timeout | null = null;
     saveEditTimes(): void {
+        // Rate limit edits
+        const timeSinceLastEdit = Date.now() - this.lastEditTime;
+        if (timeSinceLastEdit < 200) {
+            if (!this.editTimeTimeout) {
+                this.editTimeTimeout = setTimeout(() => {
+                    this.saveEditTimes();
+                }, timeSinceLastEdit)
+            }
+
+            return;
+        }
+
+        this.lastEditTime = Date.now();
+        this.editTimeTimeout = null;
+
         const sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
         const category = this.categoryOptionRef.current.value as Category
 
@@ -710,7 +725,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         if (this.props.contentContainer().channelIDInfo.status !== ChannelIDStatus.Found) return;
 
         this.fetchingSuggestions = true;
-        const result = await utils.asyncRequestToServer("GET", "/api/chapterNames", {
+        const result = await asyncRequestToServer("GET", "/api/chapterNames", {
             description,
             channelID: this.props.contentContainer().channelIDInfo.id
         });

src/components/SubmissionNoticeComponent.tsx

@@ -38,6 +38,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
     guidelinesReminder: GenericNotice;
 
+    lastSegmentCount: number;
+
     constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
@@ -47,12 +49,14 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     
         const noticeTitle = chrome.i18n.getMessage("confirmNoticeTitle");
 
+        this.lastSegmentCount = this.props.contentContainer().sponsorTimesSubmitting.length;
+
         // Setup state
         this.state = {
             noticeTitle,
             messages: [],
             idSuffix: "SubmissionNotice"
-        }
+        };
     }
 
     componentDidMount(): void {
@@ -73,6 +77,18 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         }
     }
 
+    componentDidUpdate() {
+        const currentSegmentCount = this.props.contentContainer().sponsorTimesSubmitting.length;
+        if (currentSegmentCount > this.lastSegmentCount) {
+            this.lastSegmentCount = currentSegmentCount;
+
+            const scrollElement = this.noticeRef.current.getElement().current.querySelector("#sponsorSkipNoticeMiddleRowSubmissionNotice");
+            scrollElement.scrollTo({
+                top: scrollElement.scrollHeight + 1000
+            });
+        }
+    }
+
     render(): React.ReactElement {
         const sortButton = 
             <img id={"sponsorSkipSortButton" + this.state.idSuffix} 

src/config.ts

@@ -75,7 +75,10 @@ interface SBConfig {
     allowScrollingToEdit: boolean;
     deArrowInstalled: boolean;
     showDeArrowPromotion: boolean;
+    showDeArrowInSettings: boolean;
+    shownDeArrowPromotion: boolean;
     showZoomToFillError2: boolean;
+    cleanPopup: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -317,7 +320,10 @@ const syncDefaults = {
     allowScrollingToEdit: true,
     deArrowInstalled: false,
     showDeArrowPromotion: true,
+    showDeArrowInSettings: true,
+    shownDeArrowPromotion: false,
     showZoomToFillError2: true,
+    cleanPopup: false,
 
     categoryPillColors: {},
 

src/content.ts

@@ -28,7 +28,7 @@ import { getControls, getExistingChapters, getHashParams, isPlayingPlaylist, isV
 import { CategoryPill } from "./render/CategoryPill";
 import { AnimationUtils } from "./utils/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
-import { logDebug } from "./utils/logger";
+import { logDebug, logWarn } from "./utils/logger";
 import { importTimes } from "./utils/exporter";
 import { ChapterVote } from "./render/ChapterVote";
 import { openWarningDialog } from "./utils/warnings";
@@ -36,17 +36,17 @@ import { 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 } from "../maze-utils/src/video";
 import { Keybind, StorageChangesObject, isSafari, keybindEquals } from "../maze-utils/src/config";
-import { findValidElement, waitForElement } from "../maze-utils/src/dom"
+import { findValidElement } from "../maze-utils/src/dom"
 import { getHash, HashedValue } from "../maze-utils/src/hash";
 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 { Tooltip } from "./render/Tooltip";
-import { isDeArrowInstalled } from "./utils/crossExtension";
 import { runCompatibilityChecks } from "./utils/compatibility";
 import { cleanPage } from "./utils/pageCleaner";
 import { addCleanupListener } from "../maze-utils/src/cleanup";
+import { hideDeArrowPromotion, tryShowingDeArrowPromotion } from "./dearrowPromotion";
+import { asyncRequestToServer } from "./utils/requests";
 
 cleanPage();
 
@@ -57,47 +57,12 @@ utils.wait(() => Config.isReady(), 5000, 10).then(() => {
     addCSS();
     setCategoryColorCSSVariables();
 
-    // DeArrow promotion
-    setTimeout(async () => {
-        if (document.URL === "https://www.youtube.com/"
-            && Config.config.showDeArrowPromotion
-            && Config.config.showUpsells 
-            && Config.config.showNewFeaturePopups
-            && (Config.config.skipCount > 30 || !Config.config.trackViewCount)
-            && Math.random() < 0.05) {
-
-            if (!await isDeArrowInstalled()) {
-                const element = await waitForElement("#contents") as HTMLElement;
-                if (element) {
-                    Config.config.showDeArrowPromotion = false;
-
-                    new Tooltip({
-                        text: chrome.i18n.getMessage("DeArrowPromotionMessage2"),
-                        linkOnClick: () => window.open("https://dearrow.ajay.app"),
-                        referenceNode: element,
-                        prependElement: element.firstElementChild as HTMLElement,
-                        timeout: 15000,
-                        positionRealtive: false,
-                        containerAbsolute: true,
-                        bottomOffset: "inherit",
-                        topOffset: "-82px",
-                        leftOffset: "0",
-                        rightOffset: "0",
-                        displayTriangle: false,
-                        center: true,
-                        opacity: 1
-                    });
-                }
-            } else {
-                Config.config.showDeArrowPromotion = false;
-            }
-        }
-    }, 5000);
-
     runCompatibilityChecks();
 });
 
 const skipBuffer = 0.003;
+// If this close to the end, skip to the end
+const endTimeSkipBuffer = 0.5;
 
 //was sponsor data found when doing SponsorsLookup
 let sponsorDataFound = false;
@@ -302,8 +267,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID), true);
             break;
         case "selectSegment":
-            selectedSegment = request.UUID;
-            updatePreviewBar();
+            selectSegment(request.UUID);
             break;
         case "submitVote":
             vote(request.type, request.UUID).then((response) => sendResponse(response));
@@ -439,6 +403,8 @@ function resetValues() {
     for (let i = 0; i < skipNotices.length; i++) {
         skipNotices.pop()?.close();
     }
+
+    hideDeArrowPromotion();
 }
 
 function videoIDChange(): void {
@@ -479,6 +445,8 @@ function videoIDChange(): void {
     // Clear unsubmitted segments from the previous video
     sponsorTimesSubmitting = [];
     updateSponsorTimesSubmitting();
+
+    tryShowingDeArrowPromotion().catch(logWarn);
 }
 
 function handleMobileControlsMutations(): void {
@@ -623,7 +591,8 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
 
     updateActiveSegment(currentTime);
 
-    if (getVideo().paused) return;
+    if (getVideo().paused 
+        || (getVideo().currentTime >= getVideo().duration - 0.01 && getVideo().duration > 1)) return;
     const skipInfo = getNextSkipIndex(currentTime, includeIntersectingSegments, includeNonIntersectingSegments);
 
     const currentSkip = skipInfo.array[skipInfo.index];
@@ -702,8 +671,12 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
                     forcedSkipTime = skipTime[0] + 0.001;
                 } else {
                     forcedSkipTime = skipTime[1];
-                    forcedIncludeIntersectingSegments = true;
                     forcedIncludeNonIntersectingSegments = false;
+
+                    // Only if not at the end of the video
+                    if (Math.abs(skipTime[1] - getVideo().duration) > endTimeSkipBuffer) {
+                        forcedIncludeIntersectingSegments = true;
+                    }
                 }
             } else {
                 forcedSkipTime = forceVideoTime + 0.001;
@@ -1071,6 +1044,7 @@ function setupSkipButtonControlBar() {
                 openNotice: true,
                 forceAutoSkip: true
             }),
+            selectSegment,
             onMobileYouTube: isOnMobileYouTube()
         });
     }
@@ -1105,7 +1079,7 @@ async function sponsorsLookup(keepOldSubmissions = true) {
     if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
 
     const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4) as VideoID & HashedValue;
-    const response = await utils.asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
+    const response = await asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
         categories,
         actionTypes: getEnabledActionTypes(),
         userAgent: `${chrome.runtime.id}`,
@@ -1245,7 +1219,7 @@ function getEnabledActionTypes(forceFullVideo = false): ActionType[] {
 
 async function lockedCategoriesLookup(): Promise<void> {
     const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
-    const response = await utils.asyncRequestToServer("GET", "/api/lockCategories/" + hashPrefix);
+    const response = await asyncRequestToServer("GET", "/api/lockCategories/" + hashPrefix);
 
     if (response.ok) {
         try {
@@ -1349,6 +1323,11 @@ function updatePreviewBarPositionMobile(parent: HTMLElement) {
     }
 }
 
+function selectSegment(UUID: SegmentUUID): void {
+    selectedSegment = UUID;
+    updatePreviewBar();
+}
+
 function updatePreviewBar(): void {
     if (previewBar === null) return;
 
@@ -1374,7 +1353,7 @@ 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)),
                 selectedSegment: selectedSegment && segment.UUID === selectedSegment
             });
         });
@@ -1634,7 +1613,7 @@ function sendTelemetryAndCount(skippingSegments: SponsorTime[], secondsSkipped:
                 counted = true;
             }
 
-            if (fullSkip) utils.asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID);
+            if (fullSkip) asyncRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID);
         }
     }
 }
@@ -1660,6 +1639,9 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
                     // MacOS will loop otherwise #1027
                     // Sometimes playlists loop too #1804
                     v.currentTime = v.duration - 0.001;
+                } else if (v.duration > 1 && Math.abs(skipTime[1] - v.duration) < endTimeSkipBuffer
+                    && isFirefoxOrSafari() && !isSafari()) {
+                    v.currentTime = v.duration;
                 } else {
                     if (inMuteSegment(skipTime[1], true)) {
                         // Make sure not to mute if skipping into a mute segment
@@ -2267,7 +2249,7 @@ async function sendSubmitMessage() {
         }
     }
 
-    const response = await utils.asyncRequestToServer("POST", "/api/skipSegments", {
+    const response = await asyncRequestToServer("POST", "/api/skipSegments", {
         videoID: getVideoID(),
         userID: Config.config.userID,
         segments: sponsorTimesSubmitting,

src/dearrowPromotion.ts

@@ -0,0 +1,71 @@
+import { waitFor } from "../maze-utils/src";
+import { getYouTubeTitleNode } from "../maze-utils/src/elements";
+import { getHash } from "../maze-utils/src/hash";
+import { getVideoID, isOnInvidious, isOnMobileYouTube } from "../maze-utils/src/video";
+import Config from "./config";
+import { Tooltip } from "./render/Tooltip";
+import { isDeArrowInstalled } from "./utils/crossExtension";
+import { isVisible } from "./utils/pageUtils";
+import { asyncRequestToServer } from "./utils/requests";
+
+let tooltip: Tooltip = null;
+export async function tryShowingDeArrowPromotion() {
+    if (Config.config.showDeArrowPromotion
+            && !isOnMobileYouTube()
+            && !isOnInvidious()
+            && document.URL.includes("watch")
+            && Config.config.showUpsells 
+            && Config.config.showNewFeaturePopups
+            && (Config.config.skipCount > 30 || !Config.config.trackViewCount)) {
+
+            if (!await isDeArrowInstalled()) {
+                try {
+                    const element = await waitFor(() => getYouTubeTitleNode(), 5000, 500, (e) => isVisible(e)) as HTMLElement;
+                    if (element && element.innerText && badTitle(element.innerText)) {
+                        const hashPrefix = (await getHash(getVideoID(), 1)).slice(0, 4);
+                        const deArrowData = await asyncRequestToServer("GET", "/api/branding/" + hashPrefix);
+                        if (!deArrowData.ok) return;
+
+                        const deArrowDataJson = JSON.parse(deArrowData.responseText);
+                        const title = deArrowDataJson?.[getVideoID()]?.titles?.[0];
+                        if (title && title.title && (title.locked || title.votes > 0)) {
+                            Config.config.showDeArrowPromotion = false;
+        
+                            tooltip = new Tooltip({
+                                text: chrome.i18n.getMessage("DeArrowTitleReplacementSuggestion") + "\n\n" + title.title,
+                                linkOnClick: () => {
+                                    window.open("https://dearrow.ajay.app");
+                                    Config.config.shownDeArrowPromotion = true;
+                                },
+                                referenceNode: element,
+                                prependElement: element.firstElementChild as HTMLElement,
+                                timeout: 15000,
+                                positionRealtive: false,
+                                containerAbsolute: true,
+                                bottomOffset: "inherit",
+                                topOffset: "55px",
+                                leftOffset: "0",
+                                rightOffset: "0",
+                                topTriangle: true,
+                                center: true,
+                                opacity: 1
+                            });
+                        }
+                    }
+                } catch { } // eslint-disable-line no-empty
+            } else {
+                Config.config.showDeArrowPromotion = false;
+            }
+        }
+}
+
+/**
+ * Two upper case words (at least 2 letters long)
+ */
+function badTitle(title: string): boolean {
+    return !!title.match(/\p{Lu}{2,} \p{Lu}{2,}[.!? ]/u);
+}
+
+export function hideDeArrowPromotion(): void {
+    if (tooltip) tooltip.close();
+}

src/help.ts

@@ -3,6 +3,7 @@ import Config from "./config";
 import { showDonationLink } from "./utils/configUtils";
 
 import { waitFor } from "../maze-utils/src";
+import { isDeArrowInstalled } from "./utils/crossExtension";
 
 if (document.readyState === "complete") {
     init();
@@ -10,6 +11,32 @@ if (document.readyState === "complete") {
     document.addEventListener("DOMContentLoaded", init);
 }
 
+// DeArrow promotion
+waitFor(() => Config.isReady()).then(() => {
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
+        isDeArrowInstalled().then((installed) => {
+            if (!installed) {
+                const deArrowPromotion = document.getElementById("dearrow-link");
+                deArrowPromotion.classList.remove("hidden");
+
+                deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+
+                const text = deArrowPromotion.querySelector("#dearrow-link-text");
+                text.textContent = `${chrome.i18n.getMessage("DeArrowPromotionMessage2").split("?")[0]}? ${chrome.i18n.getMessage("DeArrowPromotionMessage3")}`;
+
+                const closeButton = deArrowPromotion.querySelector(".close-button");
+                closeButton.addEventListener("click", (e) => {
+                    e.preventDefault();
+
+                    deArrowPromotion.classList.add("hidden");
+                    Config.config.showDeArrowPromotion = false;
+                    Config.config.showDeArrowInSettings = false;
+                });
+            }
+        });
+    }
+});
+
 async function init() {
     localizeHtmlPage();
 

src/js-components/skipButtonControlBar.ts

@@ -1,11 +1,12 @@
 import Config from "../config";
-import { SponsorTime } from "../types";
+import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
 import { AnimationUtils } from "../utils/animationUtils";
 import { keybindToString } from "../../maze-utils/src/config";
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
+    selectSegment: (UUID: SegmentUUID) => void;
     onMobileYouTube: boolean;
 }
 
@@ -54,8 +55,18 @@ export class SkipButtonControlBar {
         this.container.appendChild(this.skipIcon);
         this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
-        this.container.addEventListener("mouseenter", () => this.stopTimer());
-        this.container.addEventListener("mouseleave", () => this.startTimer());
+        this.container.addEventListener("mouseenter", () => {
+            this.stopTimer();
+
+            if (this.segment) {
+                props.selectSegment(this.segment.UUID);
+            }
+        });
+        this.container.addEventListener("mouseleave", () => {
+            this.startTimer();
+
+            props.selectSegment(null);
+        });
         if (this.onMobileYouTube) {
             this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e));
             this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e));

src/options.ts

@@ -18,6 +18,7 @@ import { StorageChangesObject } from "../maze-utils/src/config";
 import { getHash } from "../maze-utils/src/hash";
 import { isFirefoxOrSafari } from "../maze-utils/src";
 import { isDeArrowInstalled } from "./utils/crossExtension";
+import { asyncRequestToServer } from "./utils/requests";
 const utils = new Utils();
 let embed = false;
 
@@ -74,13 +75,22 @@ async function init() {
     }
 
     // DeArrow promotion
-    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells && Config.config.showDeArrowInSettings) {
         isDeArrowInstalled().then((installed) => {
             if (!installed) {
                 const deArrowPromotion = document.getElementById("deArrowPromotion");
                 deArrowPromotion.classList.remove("hidden");
 
                 deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+
+                const closeButton = deArrowPromotion.querySelector(".close-button");
+                closeButton.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    
+                    deArrowPromotion.classList.add("hidden");
+                    Config.config.showDeArrowPromotion = false;
+                    Config.config.showDeArrowInSettings = false;
+                });
             }
         });
     }
@@ -558,7 +568,7 @@ function activatePrivateTextChange(element: HTMLElement) {
     switch (option) {
         case "userID":
             if (Config.config[option]) {
-                utils.asyncRequestToServer("GET", "/api/userInfo", {
+                asyncRequestToServer("GET", "/api/userInfo", {
                     publicUserID: getHash(Config.config[option]),
                     values: ["warnings", "banned"]
                 }).then((result) => {

src/popup.ts

@@ -27,6 +27,7 @@ import GenericNotice from "./render/GenericNotice";
 import { getErrorMessage, getFormattedTime } from "../maze-utils/src/formating";
 import { StorageChangesObject } from "../maze-utils/src/config";
 import { getHash } from "../maze-utils/src/hash";
+import { asyncRequestToServer, sendRequestToServer } from "./utils/requests";
 
 const utils = new Utils();
 
@@ -108,6 +109,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     const PageElements: PageElements = {};
 
     [
+        "sbPopupLogo",
+        "sbYourWorkBox",
+        "videoInfo",
+        "sbFooter",
         "sponsorBlockPopupBody",
         "sponsorblockPopup",
         "sponsorStart",
@@ -198,6 +203,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     }
     PageElements.sbDonate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
 
+    if (Config.config.cleanPopup) {
+        PageElements.sbPopupLogo.classList.add("hidden");
+        PageElements.sbYourWorkBox.classList.add("hidden");
+        PageElements.sbFooter.classList.add("hidden");
+        PageElements.sponsorTimesDonateContainer.classList.add("hidden");
+        PageElements.mainControls.classList.add("hidden");
+
+        PageElements.videoInfo.style.marginTop = "10px";
+    }
+
     if (Config.config.testingServer) {
         PageElements.sbBetaServerWarning.classList.remove("hidden");
         PageElements.sbBetaServerWarning.addEventListener("click", function () {
@@ -281,7 +296,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
     const values = ["userName", "viewCount", "minutesSaved", "vip", "permissions"];
 
-    utils.asyncRequestToServer("GET", "/api/userInfo", {
+    asyncRequestToServer("GET", "/api/userInfo", {
         publicUserID: await getHash(Config.config.userID),
         values
     }).then((res) => {
@@ -804,7 +819,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         PageElements.setUsernameStatus.style.display = "unset";
         PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
 
-        utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
+        sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
             if (response.status == 200) {
                 //submitted
                 PageElements.submitUsername.style.display = "none";
@@ -1052,9 +1067,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
      */
     function getFormattedHours(minutes) {
         minutes = Math.round(minutes * 10) / 10;
-        const days = Math.floor(minutes / 1440);
+        const years = Math.floor(minutes / 525600); // Assumes 365.0 days in a year
+        const days = Math.floor(minutes / 1440) % 365;
         const hours = Math.floor(minutes / 60) % 24;
-        return (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
+        return (years > 0 ? years + chrome.i18n.getMessage("yearAbbreviation") + " " : "") + (days > 0 ? days + chrome.i18n.getMessage("dayAbbreviation") + " " : "") + (hours > 0 ? hours + chrome.i18n.getMessage("hourAbbreviation") + " " : "") + (minutes % 60).toFixed(1);
     }
 
     function contentConfigUpdateListener(changes: StorageChangesObject) {

src/utils.ts

@@ -2,10 +2,8 @@ import Config, { VideoDownvotes } from "./config";
 import { CategorySelection, SponsorTime, BackgroundScriptContainer, Registration, VideoID, SponsorHideType, CategorySkipOption } from "./types";
 
 import { getHash, HashedValue } from "../maze-utils/src/hash";
-import * as CompileConfig from "../config.json";
 import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
 import { findValidElementFromSelector } from "../maze-utils/src/dom";
-import { FetchResponse, sendRequestToCustomServer } from "../maze-utils/src/background-request-proxy"
 import { isSafari } from "../maze-utils/src/config";
 
 export default class Utils {
@@ -240,50 +238,6 @@ export default class Utils {
         return permissionRegex;
     }
 
-    /**
-     * Sends a request to a custom server
-     * 
-     * @param type The request type. "GET", "POST", etc.
-     * @param address The address to add to the SponsorBlock server address
-     * @param callback 
-     */    
-    asyncRequestToCustomServer(type: string, url: string, data = {}): Promise<FetchResponse> {
-        return sendRequestToCustomServer(type, url, data);
-    }
-
-    /**
-     * Sends a request to the SponsorBlock server with address added as a query
-     * 
-     * @param type The request type. "GET", "POST", etc.
-     * @param address The address to add to the SponsorBlock server address
-     * @param callback 
-     */    
-    async asyncRequestToServer(type: string, address: string, data = {}): Promise<FetchResponse> {
-        const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
-
-        return await (this.asyncRequestToCustomServer(type, serverAddress + address, data));
-    }
-
-    /**
-     * Sends a request to the SponsorBlock server with address added as a query
-     * 
-     * @param type The request type. "GET", "POST", etc.
-     * @param address The address to add to the SponsorBlock server address
-     * @param callback 
-     */
-    sendRequestToServer(type: string, address: string, callback?: (response: FetchResponse) => void): void {
-        const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
-
-        // Ask the background script to do the work
-        chrome.runtime.sendMessage({
-            message: "sendRequest",
-            type,
-            url: serverAddress + address
-        }, (response) => {
-            callback(response);
-        });
-    }
-
     findReferenceNode(): HTMLElement {
         const selectors = [
             "#player-container-id", // Mobile YouTube

src/utils/exporter.ts

@@ -106,5 +106,5 @@ export function exportTimesAsHashParam(segments: SponsorTime[]): string {
 
 
 export function normalizeChapterName(description: string): string {
-    return description.toLowerCase().replace(/\.|:|-/g, "").replace(/\s+/g, " ");
+    return description.toLowerCase().replace(/[.:'’`‛‘"‟”-]/ug, "").replace(/\s+/g, " ");
 }

src/utils/requests.ts

@@ -0,0 +1,47 @@
+import Config from "../config";
+import * as CompileConfig from "../../config.json";
+import { FetchResponse, sendRequestToCustomServer } from "../../maze-utils/src/background-request-proxy";
+
+/**
+ * Sends a request to a custom server
+ * 
+ * @param type The request type. "GET", "POST", etc.
+ * @param address The address to add to the SponsorBlock server address
+ * @param callback 
+ */    
+export function asyncRequestToCustomServer(type: string, url: string, data = {}): Promise<FetchResponse> {
+    return sendRequestToCustomServer(type, url, data);
+}
+
+/**
+ * Sends a request to the SponsorBlock server with address added as a query
+ * 
+ * @param type The request type. "GET", "POST", etc.
+ * @param address The address to add to the SponsorBlock server address
+ * @param callback 
+ */    
+export async function asyncRequestToServer(type: string, address: string, data = {}): Promise<FetchResponse> {
+    const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
+
+    return await (asyncRequestToCustomServer(type, serverAddress + address, data));
+}
+
+/**
+ * Sends a request to the SponsorBlock server with address added as a query
+ * 
+ * @param type The request type. "GET", "POST", etc.
+ * @param address The address to add to the SponsorBlock server address
+ * @param callback 
+ */
+export function sendRequestToServer(type: string, address: string, callback?: (response: FetchResponse) => void): void {
+    const serverAddress = Config.config.testingServer ? CompileConfig.testingServerAddress : Config.config.serverAddress;
+
+    // Ask the background script to do the work
+    chrome.runtime.sendMessage({
+        message: "sendRequest",
+        type,
+        url: serverAddress + address
+    }, (response) => {
+        callback(response);
+    });
+}

src/utils/videoLabels.ts

@@ -2,6 +2,7 @@ import { Category, CategorySkipOption, VideoID } from "../types";
 import { getHash } from "../../maze-utils/src/hash";
 import Utils from "../utils";
 import { logWarn } from "./logger";
+import { asyncRequestToServer } from "./requests";
 
 const utils = new Utils();
 
@@ -20,7 +21,7 @@ async function getLabelHashBlock(hashPrefix: string): Promise<LabelCacheEntry |
         return cachedEntry;
     }
 
-    const response = await utils.asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
+    const response = await asyncRequestToServer("GET", `/api/videoLabels/${hashPrefix}`);
     if (response.status !== 200) {
         // No video labels or server down
         labelCache[hashPrefix] = {

src/utils/warnings.ts

@@ -3,8 +3,7 @@ import { getHash } from "../../maze-utils/src/hash";
 import Config from "../config";
 import GenericNotice, { NoticeOptions } from "../render/GenericNotice";
 import { ContentContainer } from "../types";
-import Utils from "../utils";
-const utils = new Utils();
+import { asyncRequestToServer } from "./requests";
 
 export interface ChatConfig {
     displayName: string;
@@ -13,14 +12,14 @@ export interface ChatConfig {
 }
 
 export async function openWarningDialog(contentContainer: ContentContainer): Promise<void> {
-    const userInfo = await utils.asyncRequestToServer("GET", "/api/userInfo", {
+    const userInfo = await asyncRequestToServer("GET", "/api/userInfo", {
         publicUserID: await getHash(Config.config.userID),
         values: ["warningReason"]
     });
 
     if (userInfo.ok) {
         const warningReason = JSON.parse(userInfo.responseText)?.warningReason;
-        const userNameData = await utils.asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
+        const userNameData = await asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
         const userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
         const publicUserID = await getHash(Config.config.userID);
 
@@ -43,7 +42,7 @@ export async function openWarningDialog(contentContainer: ContentContainer): Pro
                 {
                     name: chrome.i18n.getMessage("warningConfirmButton"),
                     listener: async () => {
-                        const result = await utils.asyncRequestToServer("POST", "/api/warnUser", {
+                        const result = await asyncRequestToServer("POST", "/api/warnUser", {
                             userID: Config.config.userID,
                             enabled: false
                         });