diff --git a/manifest/manifest.json b/manifest/manifest.json index 11b561be..7b920dd3 100644 --- a/manifest/manifest.json +++ b/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", diff --git a/public/content.css b/public/content.css index bdafdc32..70b74766 100644 --- a/public/content.css +++ b/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; diff --git a/public/icons/LogoSponsorBlocker1024px.png b/public/icons/LogoSponsorBlocker1024px.png new file mode 100644 index 00000000..2b15e3f8 Binary files /dev/null and b/public/icons/LogoSponsorBlocker1024px.png differ diff --git a/public/icons/LogoSponsorBlocker128px.png b/public/icons/LogoSponsorBlocker128px.png index d299a294..1126f907 100644 Binary files a/public/icons/LogoSponsorBlocker128px.png and b/public/icons/LogoSponsorBlocker128px.png differ diff --git a/public/icons/LogoSponsorBlocker256px.png b/public/icons/LogoSponsorBlocker256px.png index 06ec5127..71602e23 100644 Binary files a/public/icons/LogoSponsorBlocker256px.png and b/public/icons/LogoSponsorBlocker256px.png differ diff --git a/public/icons/LogoSponsorBlocker512px.png b/public/icons/LogoSponsorBlocker512px.png new file mode 100644 index 00000000..5445bd6a Binary files /dev/null and b/public/icons/LogoSponsorBlocker512px.png differ diff --git a/public/icons/LogoSponsorBlocker64px.png b/public/icons/LogoSponsorBlocker64px.png index 87e24791..31094742 100644 Binary files a/public/icons/LogoSponsorBlocker64px.png and b/public/icons/LogoSponsorBlocker64px.png differ diff --git a/public/icons/PlayerInfoIconSponsorBlocker.svg b/public/icons/PlayerInfoIconSponsorBlocker.svg index 297e82b1..1001c2b7 100644 --- a/public/icons/PlayerInfoIconSponsorBlocker.svg +++ b/public/icons/PlayerInfoIconSponsorBlocker.svg @@ -1,120 +1,6 @@ - - - - - - image/svg+xml - - LogoSponsorBlocker2 - - - - - - - - LogoSponsorBlocker2 - - - - - - - - - - - - - - - - - - - - + + + + + diff --git a/public/options/options.html b/public/options/options.html index c7a3578b..92ae3152 100644 --- a/public/options/options.html +++ b/public/options/options.html @@ -32,7 +32,7 @@

-
+
-
-
+
+
+
+
-
+
__MSG_addInvidiousInstance__
@@ -86,10 +87,10 @@ __MSG_currentInstances__
-
-
-
+
+
+
diff --git a/public/popup.css b/public/popup.css index 0fd1f839..891e4b84 100644 --- a/public/popup.css +++ b/public/popup.css @@ -6,7 +6,7 @@ --sb-green-bg: #077B27; } -.hidden { +#sponsorBlockPopupBody .hidden { display: none !important; } diff --git a/public/popup.html b/public/popup.html index c224f573..40d87b0e 100644 --- a/public/popup.html +++ b/public/popup.html @@ -138,7 +138,7 @@ Discord | Matrix | __MSG_help__ | - $ + $ diff --git a/src/content.ts b/src/content.ts index 9e495485..362eaec5 100644 --- a/src/content.ts +++ b/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 = {}; +const playerButtons: Record = {}; // 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 { // 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. */ diff --git a/src/options.ts b/src/options.ts index 20a5d244..d1f5b37e 100644 --- a/src/options.ts +++ b/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; } diff --git a/src/popup.ts b/src/popup.ts index 5a9cc8be..ea752620 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -103,8 +103,14 @@ async function runThePopup(messageListener?: MessageListener): Promise { "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() {