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/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/popup.css b/public/popup.css index 0fd1f839..1271e24b 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/src/content.ts b/src/content.ts index 8ecddad1..d4dd3845 100644 --- a/src/content.ts +++ b/src/content.ts @@ -44,6 +44,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; @@ -72,7 +73,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))); @@ -1080,6 +1081,7 @@ function createButton(baseID: string, title: string, callback: () => void, image playerButtons[baseID] = { button: newButton, image: newButtonImage, + setupListener: false }; return newButton; @@ -1115,9 +1117,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. */