bump version

Add border radius like other YouTube elements

ci/invidiouslist.json

@@ -1 +1 @@
-["inv.bp.projectsegfau.lt","inv.odyssey346.dev","inv.riverside.rocks","inv.vern.cc","invidious.baczek.me","invidious.epicsite.xyz","invidious.esmailelbob.xyz","invidious.flokinet.to","invidious.lidarshield.cloud","invidious.nerdvpn.de","invidious.privacydev.net","invidious.snopyta.org","invidious.tiekoetter.com","invidious.weblibre.org","iv.melmac.space","vid.puffyan.us","watch.thekitty.zone","y.com.sb","yewtu.be","yt.artemislena.eu","yt.funami.tech","yt.oelrichsgarcia.de"]
+["inv.bp.projectsegfau.lt","inv.zzls.xyz","invidious.0011.lt","invidious.baczek.me","invidious.lunar.icu","invidious.privacydev.net","invidious.tiekoetter.com","iv.ggtyler.dev","iv.melmac.space","vid.puffyan.us","y.com.sb","yewtu.be","yt.artemislena.eu"]

config.json.example

@@ -31,10 +31,16 @@
         "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment",
         "chapter": "https://wiki.sponsor.ajay.app/w/Chapter"
     },
-    "extensionCommunicationAllowList": [
+    "extensionImportList": {
-        "enamippconapkdmgfgjchkhakpfinmaj",
+        "chromium": [
+            "enamippconapkdmgfgjchkhakpfinmaj"
+        ],
+        "firefox": [
             "deArrow@ajay.app",
-        "deArrowBETA@ajay.app",
+            "deArrowBETA@ajay.app"
+        ],
+        "safari": [
             "app.ajay.dearrow.extension"
         ]
+    }
 }

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "5.4.8",
+    "version": "5.4.9",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",
@@ -67,6 +67,7 @@
         "icons/export.svg",
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
+        "icons/dearrow.svg",
         "popup.html",
         "popup.css",
         "content.css",

package-lock.json

@@ -27,7 +27,7 @@
       ],
       "license": "LGPL-3.0-or-later",
       "dependencies": {
-        "@ajayyy/maze-utils": "1.1.29",
+        "@ajayyy/maze-utils": "1.1.37",
         "content-scripts-register-polyfill": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -67,9 +67,9 @@
       }
     },
     "node_modules/@ajayyy/maze-utils": {
-      "version": "1.1.29",
+      "version": "1.1.37",
-      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.29.tgz",
+      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.37.tgz",
-      "integrity": "sha512-P8htPiJjGmkkkELYducx0eiUo3/W0MEG6G/S3oJ/buFNxXRFXWb9ZTzu7/RSmEgmRFBRiKtXyGbjDhsYQDf1BA==",
+      "integrity": "sha512-EOec/tfgTDdG2RFzfGdRpyBE3ACE7sAmzfKGzLZqhNznQGcCt/gELw49dHf7NeFzU+EU5vJ2jzTDizfB96gBMg==",
       "funding": [
         {
           "type": "individual",
@@ -13602,9 +13602,9 @@
   },
   "dependencies": {
     "@ajayyy/maze-utils": {
-      "version": "1.1.29",
+      "version": "1.1.37",
-      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.29.tgz",
+      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.37.tgz",
-      "integrity": "sha512-P8htPiJjGmkkkELYducx0eiUo3/W0MEG6G/S3oJ/buFNxXRFXWb9ZTzu7/RSmEgmRFBRiKtXyGbjDhsYQDf1BA=="
+      "integrity": "sha512-EOec/tfgTDdG2RFzfGdRpyBE3ACE7sAmzfKGzLZqhNznQGcCt/gELw49dHf7NeFzU+EU5vJ2jzTDizfB96gBMg=="
     },
     "@ampproject/remapping": {
       "version": "2.2.0",

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "@ajayyy/maze-utils": "1.1.29",
+    "@ajayyy/maze-utils": "1.1.37",
     "content-scripts-register-polyfill": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

public/content.css

@@ -730,11 +730,12 @@ input::-webkit-inner-spin-button {
     border-radius: 5px;
     padding: 10px;
     max-width: 300px;
+	width: max-content;
     white-space: normal;
     line-height: 1.5em;
 	color: white;
 	font-size: 12px;
-	z-index: 1000;
+	z-index: 10000;
 }
 
 .sponsorBlockTooltip a {

public/icons/dearrow.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 36 36"
+   aria-hidden="true"
+   role="img"
+   class="iconify iconify--twemoji"
+   preserveAspectRatio="xMidYMid meet"
+   version="1.1"
+   id="svg10"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.65479573"
+     inkscape:cx="493.2836"
+     inkscape:cy="514.66432"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="435"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     fill="#1213BD"
+     d="M36 18.302c0 4.981-2.46 9.198-5.655 12.462s-7.323 5.152-12.199 5.152s-9.764-1.112-12.959-4.376S0 23.283 0 18.302s2.574-9.38 5.769-12.644S13.271 0 18.146 0s9.394 2.178 12.589 5.442C33.931 8.706 36 13.322 36 18.302z"
+     id="path2" />
+  <path
+     fill="#ffffff"
+     d="m 30.394282,18.410186 c 0,3.468849 -1.143025,6.865475 -3.416513,9.137917 -2.273489,2.272442 -5.670115,2.92874 -9.137918,2.92874 -3.467803,0 -6.373515,-1.147212 -8.6470033,-3.419654 -2.2734888,-2.272442 -3.5871299,-5.178154 -3.5871299,-8.647003 0,-3.46885 0.9420533,-6.746149 3.2144954,-9.0196379 2.2724418,-2.2734888 5.5507878,-3.9513905 9.0196378,-3.9513905 3.46885,0 6.492841,1.9322561 8.76633,4.204698 2.273489,2.2724424 3.788101,5.2974804 3.788101,8.7663304 z"
+     id="path4"
+     style="fill:#88c9f9;fill-opacity:1;stroke-width:1.04673" />
+  <path
+     fill="#292f33"
+     d="m 23.95823,17.818306 c 0,3.153748 -2.644888,5.808102 -5.798635,5.808102 -3.153748,0 -5.599825,-2.654354 -5.599825,-5.808102 0,-3.153747 2.446077,-5.721714 5.599825,-5.721714 3.153747,0 5.798635,2.567967 5.798635,5.721714 z"
+     id="path8"
+     style="stroke-width:1.18339;fill:#0a62a5;fill-opacity:1" />
+</svg>

public/options/options.css

@@ -38,7 +38,7 @@
     --white: black;
 }
 
-.medium-description, .switch-container, .optionLabel, .categoryTableElement {
+.medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
     color: var(--white);
 }
 
@@ -702,3 +702,19 @@ svg {
     border: none !important;
     padding: 20px 0px 0px 0px !important;
 }
+
+#deArrowPromotion {
+    width: fit-content;
+}
+
+.dearrow-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+.dearrow-link > img {
+    width: 40px;
+    margin-right: 4px;
+}

public/options/options.html

@@ -65,6 +65,19 @@
 
 				</div>
 
+				<div id="deArrowPromotion" class="hidden">
+					<a class="dearrow-link"
+                        href="https://dearrow.ajay.app"
+                        target="_blank"
+                        rel="noreferrer">
+                        <img src="/icons/dearrow.svg"/>
+
+                        <span class="promotion-description">
+                            __MSG_DeArrowPromotionMessage__
+                        </span>
+                    </a>
+				</div>
+
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">
@@ -342,6 +355,18 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="showNewFeaturePopups" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="showNewFeaturePopups">
+							__MSG_hideNewFeatureUpdates__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">

src/background.ts

@@ -12,6 +12,7 @@ import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
 window.SB = Config;
 
 import Utils from "./utils";
+import { getExtensionIdsToImportFrom } from "./utils/crossExtension";
 const utils = new Utils({
     registerFirefoxContentScript,
     unregisterFirefoxContentScript
@@ -80,7 +81,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 });
 
 chrome.runtime.onMessageExternal.addListener((request, sender, callback) => {
-    if (CompileConfig.extensionCommunicationAllowList.includes(sender.id)) {
+    if (getExtensionIdsToImportFrom().includes(sender.id)) {
         if (request.message === "requestConfig") {
             callback({
                 userID: Config.config.userID,

src/components/options/CategorySkipOptionsComponent.tsx

@@ -139,6 +139,12 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             case "autoSkip":
                 option = CategorySkipOption.AutoSkip;
 
+                if (this.props.category === "filler" && !Config.config.isVip) {
+                    if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
+                        event.target.value = "disable";
+                    }
+                }
+
                 break;
         }
 

src/config.ts

@@ -54,6 +54,7 @@ interface SBConfig {
     showDonationLink: boolean;
     showPopupDonationCount: number;
     showUpsells: boolean;
+    showNewFeaturePopups: boolean;
     donateClicked: number;
     autoHideInfoButton: boolean;
     autoSkipOnMusicVideos: boolean;
@@ -72,6 +73,8 @@ interface SBConfig {
     useVirtualTime: boolean;
     showSegmentFailedToFetchWarning: boolean;
     allowScrollingToEdit: boolean;
+    deArrowInstalled: boolean;
+    showDeArrowPromotion: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -292,6 +295,7 @@ const syncDefaults = {
     showDonationLink: true,
     showPopupDonationCount: 0,
     showUpsells: true,
+    showNewFeaturePopups: true,
     donateClicked: 0,
     autoHideInfoButton: true,
     autoSkipOnMusicVideos: false,
@@ -305,6 +309,8 @@ const syncDefaults = {
     useVirtualTime: true,
     showSegmentFailedToFetchWarning: true,
     allowScrollingToEdit: true,
+    deArrowInstalled: false,
+    showDeArrowPromotion: true,
 
     categoryPillColors: {},
 

src/content.ts

@@ -36,12 +36,14 @@ import { isFirefoxOrSafari, waitFor } from "@ajayyy/maze-utils";
 import { getErrorMessage, getFormattedTime } from "@ajayyy/maze-utils/lib/formating";
 import { getChannelIDInfo, getVideo, getIsAdPlaying, getIsLivePremiere, setIsAdPlaying, checkVideoIDChange, getVideoID, getYouTubeVideoID, setupVideoModule, checkIfNewVideoID, isOnInvidious, isOnMobileYouTube } from "@ajayyy/maze-utils/lib/video";
 import { Keybind, StorageChangesObject, isSafari, keybindEquals } from "@ajayyy/maze-utils/lib/config";
-import { findValidElement } from "@ajayyy/maze-utils/lib/dom"
+import { findValidElement, waitForElement } from "@ajayyy/maze-utils/lib/dom"
 import { getHash, HashedValue } from "@ajayyy/maze-utils/lib/hash";
 import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
 import { updateAll } from "@ajayyy/maze-utils/lib/thumbnailManagement";
 import { setupThumbnailListener } from "./utils/thumbnails";
 import * as documentScript from "../dist/js/document.js";
+import { Tooltip } from "./render/Tooltip";
+import { isDeArrowInstalled } from "./utils/crossExtension";
 
 const utils = new Utils();
 
@@ -49,6 +51,42 @@ utils.wait(() => Config.isReady(), 5000, 10).then(() => {
     // Hack to get the CSS loaded on permission-based sites (Invidious)
     addCSS();
     setCategoryColorCSSVariables();
+
+    // DeArrow promotion
+    setTimeout(async () => {
+        if (document.URL === "https://www.youtube.com/"
+            && Config.config.showDeArrowPromotion
+            && Config.config.showUpsells 
+            && Config.config.showNewFeaturePopups
+            && 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)
 });
 
 const skipBuffer = 0.003;
@@ -1928,6 +1966,7 @@ function openInfoMenu() {
     const frame = document.createElement("iframe");
     frame.width = "374";
     frame.height = "500";
+    frame.style.borderRadius = "12px";
     frame.addEventListener("load", () => frame.contentWindow.postMessage("", "*"));
     frame.src = chrome.extension.getURL("popup.html");
     popup.appendChild(frame);

src/options.ts

@@ -17,6 +17,7 @@ import { localizeHtmlPage } from "@ajayyy/maze-utils/lib/setup";
 import { StorageChangesObject } from "@ajayyy/maze-utils/lib/config";
 import { getHash } from "@ajayyy/maze-utils/lib/hash";
 import { isFirefoxOrSafari } from "@ajayyy/maze-utils";
+import { isDeArrowInstalled } from "./utils/crossExtension";
 const utils = new Utils();
 let embed = false;
 
@@ -68,6 +69,18 @@ async function init() {
         donate.classList.add("hidden");
     }
 
+    // DeArrow promotion
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
+        isDeArrowInstalled().then((installed) => {
+            if (!installed) {
+                const deArrowPromotion = document.getElementById("deArrowPromotion");
+                deArrowPromotion.classList.remove("hidden");
+
+                deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+            }
+        });
+    }
+
     // Set all of the toggle options to the correct option
     const optionsContainer = document.getElementById("options");
     const optionsElements = optionsContainer.querySelectorAll("*");

src/render/Tooltip.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { createRoot, Root } from 'react-dom/client';
 import { ButtonListener } from "../types";
+import { isFirefoxOrSafari } from "@ajayyy/maze-utils";
+import { isSafari } from "@ajayyy/maze-utils/lib/config";
 
 export interface TooltipProps {
     text?: string; 
@@ -9,6 +11,7 @@ export interface TooltipProps {
     referenceNode: HTMLElement;
     prependElement?: HTMLElement; // Element to append before
     bottomOffset?: string;
+    topOffset?: string;
     leftOffset?: string;
     rightOffset?: string;
     timeout?: number;
@@ -17,7 +20,9 @@ export interface TooltipProps {
     extraClass?: string;
     showLogo?: boolean;
     showGotIt?: boolean;
+    center?: boolean;
     positionRealtive?: boolean;
+    containerAbsolute?: boolean;
     buttons?: ButtonListener[];
 }
 
@@ -30,6 +35,7 @@ export class Tooltip {
     
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
+        props.topOffset ??= "inherit";
         props.leftOffset ??= "inherit";
         props.rightOffset ??= "inherit";
         props.opacity ??= 0.7;
@@ -38,11 +44,21 @@ export class Tooltip {
         props.showLogo ??= true;
         props.showGotIt ??= true;
         props.positionRealtive ??= true;
+        props.containerAbsolute ??= false;
+        props.center ??= false;
         this.text = props.text;
 
         this.container = document.createElement('div');
         this.container.id = "sponsorTooltip" + props.text;
         if (props.positionRealtive) this.container.style.position = "relative";
+        if (props.containerAbsolute) this.container.style.position = "absolute";
+        if (props.center) {
+            if (isFirefoxOrSafari() && !isSafari()) {
+                this.container.style.width = "-moz-available";
+            } else {
+                this.container.style.width = "-webkit-fill-available";
+            }
+        }
 
         if (props.prependElement) {
             props.referenceNode.insertBefore(this.container, props.prependElement);
@@ -58,8 +74,17 @@ export class Tooltip {
 
         this.root = createRoot(this.container);
         this.root.render(
-            <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} 
+            <div style={{
-                className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
+                    bottom: props.bottomOffset,
+                    top: props.topOffset,
+                    left: props.leftOffset,
+                    right: props.rightOffset,
+                    backgroundColor,
+                    margin: props.center ? "auto" : null
+                }} 
+                className={"sponsorBlockTooltip" +
+                    (props.displayTriangle ? " sbTriangle" : "") +
+                    ` ${props.extraClass}`}>
                 <div>
                     {props.showLogo ? 
                         <img className="sponsorSkipLogo sponsorSkipObject"

src/utils/crossExtension.ts

@@ -0,0 +1,44 @@
+import * as CompileConfig from "../../config.json";
+
+import Config from "../config";
+import { isSafari } from "@ajayyy/maze-utils/lib/config";
+import { isFirefoxOrSafari } from "@ajayyy/maze-utils";
+
+export function isDeArrowInstalled(): Promise<boolean> {
+    if (Config.config.deArrowInstalled) {
+        return Promise.resolve(true);
+    } else {
+        return new Promise((resolve) => {
+            const extensionIds = getExtensionIdsToImportFrom();
+
+            let count = 0;
+            for (const id of extensionIds) {
+                chrome.runtime.sendMessage(id, { message: "isInstalled" }, (response) => {
+                    if (chrome.runtime.lastError) {
+                        count++;
+
+                        if (count === extensionIds.length) {
+                            resolve(false);
+                        }
+                        return;
+                    }
+
+                    resolve(response);
+                    if (response) {
+                        Config.config.deArrowInstalled = true;
+                    }
+                });
+            }
+        });
+    }
+}
+
+export function getExtensionIdsToImportFrom(): string[] {
+    if (isSafari()) {
+        return CompileConfig.extensionImportList.safari;
+    } else if (isFirefoxOrSafari()) {
+        return CompileConfig.extensionImportList.firefox;
+    } else {
+        return CompileConfig.extensionImportList.chromium;
+    }
+}