Merge branch 'master' into unlisted-hotfix

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "2.1.0.3",
+    "version": "2.1.1",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "content_scripts": [{
@@ -68,7 +68,9 @@
         "32": "icons/IconSponsorBlocker32px.png",
         "64": "icons/LogoSponsorBlocker64px.png",
         "128": "icons/LogoSponsorBlocker128px.png",
-        "256": "icons/LogoSponsorBlocker256px.png"
+        "256": "icons/LogoSponsorBlocker256px.png",
+        "512": "icons/LogoSponsorBlocker512px.png",
+        "1024": "icons/LogoSponsorBlocker1024px.png"
     },
     "options_ui": {
         "page": "options/options.html",

public/content.css

@@ -75,6 +75,22 @@
 	vertical-align: top;
 }
 
+#infoButton.playerButton:not(.hidden) {
+	transform: translateX(0%) scale(1);
+	/* opacity is from YouTube page */
+	transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
+}
+
+#infoButton.playerButton.hidden {
+	transform: translateX(100%) scale(0);
+	/* opacity is from YouTube page */
+	transition: transform 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
+}
+
+.playerButton.hidden {
+	display: none;
+}
+
 .sponsorSkipObject {
 	font-family: Roboto, Arial, Helvetica, sans-serif;
 		

public/icons/PlayerInfoIconSponsorBlocker.svg

@@ -1,120 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="svg16" version="1.1" viewBox="0 0 565.15 568">
-<svg
+  <defs/>
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
+  <defs id="defs4"/>
-   xmlns:cc="http://creativecommons.org/ns#"
+  <path id="path8" fill="#fff" d="M282.58 568a65 65 0 01-34.14-9.66C95.41 463.94 2.54 300.46 0 121a64.91 64.91 0 0134-58.09 522.56 522.56 0 01497.16 0 64.91 64.91 0 0134 58.12c-2.53 179.43-95.4 342.91-248.42 437.3a65 65 0 01-34.16 9.67zm0-548.31A502.24 502.24 0 0043.4 80.22a45.27 45.27 0 00-23.7 40.53c2.44 172.67 91.81 330 239.07 420.83a46.19 46.19 0 0047.61 0C453.64 450.73 543 293.42 545.45 120.75a45.26 45.26 0 00-23.7-40.54 502.26 502.26 0 00-239.17-60.52z"/>
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  <path id="path10" fill="#fff" d="M284.705 42.693A479.9 479.9 0 0054.37 100.42a22.53 22.53 0 00-11.7 20c2.4 169.84 93.001 318.22 228.161 401.59a22.48 22.48 0 0023.49 0c135.16-83.37 225.76-231.75 228.16-401.59a22.53 22.53 0 00-11.7-20 479.9 479.9 0 00-226.075-57.727zm-2.13 59.344c89.347 0 162.081 72.712 162.081 162.08 0 89.368-72.734 162.082-162.082 162.082-89.368 0-162.08-72.714-162.08-162.082s72.712-162.08 162.08-162.08zm0 30.389c-72.613 0-131.692 59.079-131.692 131.691 0 72.613 59.079 131.692 131.691 131.692 72.613 0 131.692-59.08 131.692-131.692 0-72.612-59.08-131.691-131.692-131.691zm-2.563 16.695c14.121 0 24.363 10.606 24.363 24.049 0 13.483-10.272 23.432-24.697 23.432-14.73 0-24.354-9.949-24.354-23.432 0-13.443 9.624-24.049 24.688-24.049zm-34.938 68.691h57.397l-.02 134.692 18.295.973v25.638h-76.32v-24.373l10.586-.953c5.754-.638 9.279-2.573 9.279-10.271v-89.155c0-7.08-1.905-9.32-8.014-9.32l-11.203-.629v-26.601z"/>
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 565.15 568"
-   version="1.1"
-   id="svg16"
-   sodipodi:docname="PlayerInfoIconSponsorBlocker.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
-   inkscape:export-filename="D:\Dell Data\_Projects\_____SponsorSkip\ignored\svg\SponsorBlocker4.png"
-   inkscape:export-xdpi="43.436523"
-   inkscape:export-ydpi="43.436523">
-  <metadata
-     id="metadata20">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>LogoSponsorBlocker2</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1001"
-     id="namedview18"
-     showgrid="false"
-     inkscape:zoom="0.83098592"
-     inkscape:cx="203.60203"
-     inkscape:cy="226.95062"
-     inkscape:window-x="477"
-     inkscape:window-y="961"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg16" />
-  <defs
-     id="defs4">
-    <style
-       id="style2">.cls-1{fill:red;}.cls-2{fill:#fff;}</style>
-  </defs>
-  <title
-     id="title6">LogoSponsorBlocker2</title>
-  <path
-     class="cls-1"
-     d="m 282.58,568 a 65,65 0 0 1 -34.14,-9.66 C 95.41,463.94 2.54,300.46 0,121 a 64.91,64.91 0 0 1 34,-58.09 522.56,522.56 0 0 1 497.16,0 64.91,64.91 0 0 1 34,58.12 c -2.53,179.43 -95.4,342.91 -248.42,437.3 A 65,65 0 0 1 282.58,568 Z m 0,-548.31 A 502.24,502.24 0 0 0 43.4,80.22 45.27,45.27 0 0 0 19.7,120.75 c 2.44,172.67 91.81,330 239.07,420.83 a 46.19,46.19 0 0 0 47.61,0 C 453.64,450.73 543,293.42 545.45,120.75 A 45.26,45.26 0 0 0 521.75,80.21 502.26,502.26 0 0 0 282.58,19.69 Z"
-     id="path8"
-     inkscape:connector-curvature="0"
-     style="fill:#ffffff" />
-  <path
-     style="fill:#ffffff"
-     d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 282.57422 102.03711 C 371.92182 102.03711 444.65625 174.74933 444.65625 264.11719 C 444.65625 353.48504 371.92182 426.19922 282.57422 426.19922 C 193.20636 426.19922 120.49414 353.48504 120.49414 264.11719 C 120.49414 174.74933 193.20636 102.03711 282.57422 102.03711 z M 282.57422 132.42578 C 209.96157 132.42578 150.88281 191.50454 150.88281 264.11719 C 150.88281 336.72984 209.96157 395.80859 282.57422 395.80859 C 355.18687 395.80859 414.26562 336.72984 414.26562 264.11719 C 414.26562 191.50454 355.18687 132.42578 282.57422 132.42578 z M 280.01172 149.12109 C 294.1331 149.12109 304.375 159.72726 304.375 173.16992 C 304.375 186.6531 294.10302 196.60156 279.67773 196.60156 C 264.94855 196.60156 255.32422 186.6531 255.32422 173.16992 C 255.32422 159.72726 264.94824 149.12109 280.01172 149.12109 z M 245.07422 217.8125 L 302.4707 217.8125 L 302.45117 352.50391 L 320.74609 353.47656 L 320.74609 379.11523 L 244.42578 379.11523 L 244.42578 354.74219 L 255.01172 353.78906 C 260.76562 353.15087 264.29102 351.21646 264.29102 343.51758 L 264.29102 254.36328 C 264.29102 247.28233 262.3858 245.04297 256.27734 245.04297 L 245.07422 244.41406 L 245.07422 217.8125 z "
-     id="path10" />
-  <g
-     id="g883"
-     transform="matrix(10.130113,0,0,10.130113,45.728213,14.587871)"
-     style="fill:#ffffff">
-    <g
-       id="g827"
-       style="fill:#ffffff" />
-    <g
-       id="g829"
-       style="fill:#ffffff" />
-    <g
-       id="g831"
-       style="fill:#ffffff" />
-    <g
-       id="g833"
-       style="fill:#ffffff" />
-    <g
-       id="g835"
-       style="fill:#ffffff" />
-    <g
-       id="g837"
-       style="fill:#ffffff" />
-    <g
-       id="g839"
-       style="fill:#ffffff" />
-    <g
-       id="g841"
-       style="fill:#ffffff" />
-    <g
-       id="g843"
-       style="fill:#ffffff" />
-    <g
-       id="g845"
-       style="fill:#ffffff" />
-    <g
-       id="g847"
-       style="fill:#ffffff" />
-    <g
-       id="g849"
-       style="fill:#ffffff" />
-    <g
-       id="g851"
-       style="fill:#ffffff" />
-    <g
-       id="g853"
-       style="fill:#ffffff" />
-    <g
-       id="g855"
-       style="fill:#ffffff" />
-    <g
-       id="g857"
-       style="fill:#ffffff" />
-  </g>
 </svg>

public/options/options.html

@@ -32,7 +32,7 @@
 			<br/>
 			<br/>
 
-			<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
+			<div id="support-invidious" option-type="toggle" sync-option="supportInvidious" no-safari="true">
 				<label class="switch-container">
 					<label class="switch">
 						<input type="checkbox">
@@ -50,12 +50,13 @@
 				<div class="small-description">(__MSG_supportedSites__ Invidious, CloudTube)</div>
 				<br/>
 				<span class="small-description">__MSG_supportOtherSitesDescription__ </span>
+
+				<br/>
+				<br/>
+				<br/>
 			</div>
 	
-			<br/>
+			<div option-type="private-text-change" sync-option="invidiousInstances" no-safari="true">
-			<br/>
-	
-			<div option-type="private-text-change" sync-option="invidiousInstances">
 				<div class="option-button trigger-button">
 					__MSG_addInvidiousInstance__
 				</div>
@@ -86,10 +87,10 @@
 					<span class="small-description">__MSG_currentInstances__</span>
 					<span class="small-description" option-type="display" sync-option="invidiousInstances"></span>
 				</div>
-			</div>
 
 				<br/>
 				<br/>
+			</div>
 
 			<div option-type="keybind-change" sync-option="skipKeybind">
 				<div class="option-button trigger-button">

public/popup.css

@@ -6,7 +6,7 @@
   --sb-green-bg: #077B27;
 }
 
-.hidden {
+#sponsorBlockPopupBody .hidden {
   display: none !important;
 }
 

public/popup.html

@@ -138,7 +138,7 @@
       <a href="https://discord.gg/QnmVMpU" target="_blank" rel="noopener">Discord</a> |
       <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a> |
       <a id="helpButton" style="cursor: pointer;">__MSG_help__</a> |
-      <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">$</a>
+      <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
     </footer>
 
     <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>

src/content.ts

@@ -45,6 +45,7 @@ let video: HTMLVideoElement;
 let videoMutationObserver: MutationObserver = null;
 // List of videos that have had event listeners added to them
 const videosWithEventListeners: HTMLVideoElement[] = [];
+const controlsWithEventListeners: HTMLElement[] = []
 
 let onInvidious;
 let onMobileYouTube;
@@ -73,7 +74,7 @@ let previewBar: PreviewBar = null;
 let controls: HTMLElement | null = null;
 
 /** Contains buttons created by `createButton()`. */
-const playerButtons: Record<string, {button: HTMLButtonElement, image: HTMLImageElement}> = {};
+const playerButtons: Record<string, {button: HTMLButtonElement, image: HTMLImageElement, setupListener: boolean}> = {};
 
 // Direct Links after the config is loaded
 utils.wait(() => Config.config !== null, 1000, 1).then(() => videoIDChange(getYouTubeVideoID(document.URL)));
@@ -1144,6 +1145,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
     playerButtons[baseID] = {
         button: newButton,
         image: newButtonImage,
+        setupListener: false
     };
 
     return newButton;
@@ -1179,9 +1181,23 @@ async function createButtons(): Promise<void> {
     // Add button if does not already exist in html
     createButton("startSegment", "sponsorStart", () => closeInfoMenuAnd(() => startOrEndTimingNewSegment()), "PlayerStartIconSponsorBlocker.svg");
     createButton("cancelSegment", "sponsorCancel", () => closeInfoMenuAnd(() => cancelCreatingSegment()), "PlayerCancelSegmentIconSponsorBlocker.svg");
-    createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
     createButton("delete", "clearTimes", () => closeInfoMenuAnd(() => clearSponsorTimes()), "PlayerDeleteIconSponsorBlocker.svg");
     createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker.svg");
+    createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
+
+    const controlsContainer = getControls();
+    if (!onInvidious && controlsContainer && playerButtons["info"]?.button && !controlsWithEventListeners.includes(controlsContainer)) {
+        controlsWithEventListeners.push(controlsContainer);
+        playerButtons["info"].button.classList.add("hidden");
+
+        controlsContainer.addEventListener("mouseenter", () => {
+            playerButtons["info"].button.classList.remove("hidden");
+        });
+
+        controlsContainer.addEventListener("mouseleave", () => {
+            playerButtons["info"].button.classList.add("hidden");
+        });
+    }
 }
 
 /** Creates any missing buttons on the player and updates their visiblity. */

src/options.ts

@@ -31,7 +31,8 @@ async function init() {
     const optionsElements = optionsContainer.querySelectorAll("*");
 
     for (let i = 0; i < optionsElements.length; i++) {
-        if (optionsElements[i].getAttribute("private-mode-only") === "true" && !(await isIncognitoAllowed())) {
+        if ((optionsElements[i].getAttribute("private-mode-only") === "true" && !(await isIncognitoAllowed()))
+            || (optionsElements[i].getAttribute("no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")) {
             optionsElements[i].classList.add("hidden");
             continue;
         }

src/popup.ts

@@ -103,8 +103,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "sponsorMessageTimes",
         //"downloadedSponsorMessageTimes",
         "whitelistButton",
+        "sbDonate"
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
+    // Hide donate button on safari
+    if (navigator.vendor === "Apple Computer, Inc.") {
+        PageElements.sbDonate.style.display = "none";
+    }
+
     //setup click listeners
     PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
     PageElements.whitelistToggle.addEventListener("change", function() {