diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 7a3e9064..07a5d180 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -55,13 +55,13 @@ "message": "Seconds" }, "Hide": { - "message": "Don't Show This Again" + "message": "Never Show" }, "hitGoBack": { "message": "Hit go back to get to where you came from." }, "goBack": { - "message": "Go back" + "message": "Unskip" }, "confirmMSG": { "message": "\n\nTo edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner." diff --git a/content.css b/content.css index c05f2f16..b6d3ceb9 100644 --- a/content.css +++ b/content.css @@ -41,16 +41,16 @@ } .sponsorSkipObject { - font-family: 'Source Sans Pro', sans-serif; + font-family: 'Source Sans Pro', sans-serif; + + margin-left: 2px; + margin-right: 2px; } .sponsorSkipLogo { - height: 64px; - position: absolute; - top: 0; - bottom: 0; - margin: auto; - margin-left: 10px; + height: 18px; + + float: left; } @keyframes fadeIn { @@ -58,17 +58,24 @@ to { opacity: 1; } } +.sponsorBlockSpacer { + border-color: #999999; + background-color: #999999; +} + .sponsorSkipNotice { - min-height: 165px; - min-width: 400px; - background-color: rgba(255, 217, 217, 0.8); + min-width: 300px; + background-color: rgba(0, 0, 0, 0.8); position: absolute; - border: 3px solid rgba(0, 0, 0, 0.8); right: 0; - bottom: 90px; - zoom: 85%; + bottom: 100px; + right: 10px; + + border-radius: 10px; animation: fadeIn 0.5s; + + border-spacing: 7px 7px; } /* if two are very close to eachother */ @@ -78,13 +85,43 @@ transition: bottom 0.2s; } +.sponsorSkipNoticeUnskipSection { + float: left; + + border-left: 1px solid #eeeeee; +} + +.sponsorSkipNoticeRightSection { + right: 0; + position: absolute; + + float: right; +} + +.sponsorSkipNoticeCloseButton { + margin-left: 0px; + margin-right: 0px; + padding: 0px; +} + +.sponsorSkipNoticeButton { + background: none; + color: #ffffff; + border: none; + display: inline-block; + + cursor: pointer; + + margin-left: 10px; + margin-right: 10px; +} + .sponsorSkipMessage { - font-size: 18px; - color: #000000; - text-align: center; - margin-top: 10px; + font-size: 14px; font-weight: bold; - margin-top: 4px; + color: #ffffff; + + display: inline-block; } .sponsorSkipInfo { @@ -119,9 +156,11 @@ } .voteButton { - height: 32px; - margin-right: 15px; + height: 18px; cursor: pointer; + + margin-left: 10px; + margin-right: 10px; } .voteButton:hover { filter: brightness(80%); diff --git a/content.js b/content.js index a95b473e..eab8983c 100644 --- a/content.js +++ b/content.js @@ -870,27 +870,67 @@ function openSkipNotice(UUID){ noticeElement.classList.add("sponsorSkipNotice"); noticeElement.style.zIndex = 50 + amountOfPreviousNotices; + // let logoElement = document.createElement("img"); + // logoElement.id = "sponsorSkipLogo" + UUID; + // logoElement.className = "sponsorSkipLogo"; + // logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png"); + + // let noticeMessage = document.createElement("div"); + // noticeMessage.id = "sponsorSkipMessage" + UUID; + // noticeMessage.classList.add("sponsorSkipMessage"); + // noticeMessage.classList.add("sponsorSkipObject"); + // noticeMessage.innerText = "Hey, you just skipped a sponsor!"; + + // let noticeInfo = document.createElement("p"); + // noticeInfo.id = "sponsorSkipInfo" + UUID; + // noticeInfo.classList.add("sponsorSkipInfo"); + // noticeInfo.classList.add("sponsorSkipObject"); + // noticeInfo.innerText = "This message will disapear in 7 seconds"; + + //the row that will contain the info + let firstRow = document.createElement("tr"); + + let logoColumn = document.createElement("td"); + let logoElement = document.createElement("img"); logoElement.id = "sponsorSkipLogo" + UUID; - logoElement.className = "sponsorSkipLogo"; - logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png"); + logoElement.className = "sponsorSkipLogo sponsorSkipObject"; + logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png"); - let noticeMessage = document.createElement("div"); + let noticeMessage = document.createElement("span"); noticeMessage.id = "sponsorSkipMessage" + UUID; noticeMessage.classList.add("sponsorSkipMessage"); noticeMessage.classList.add("sponsorSkipObject"); - noticeMessage.innerText = "Hey, you just skipped a sponsor!"; - - let noticeInfo = document.createElement("p"); - noticeInfo.id = "sponsorSkipInfo" + UUID; - noticeInfo.classList.add("sponsorSkipInfo"); - noticeInfo.classList.add("sponsorSkipObject"); - noticeInfo.innerText = "This message will disapear in 7 seconds"; + noticeMessage.innerText = "SponsorBlock - Sponsor Skipped"; + + //create the first column + logoColumn.appendChild(logoElement); + logoColumn.appendChild(noticeMessage); + + //add the x button + let closeButtonContainer = document.createElement("td"); + closeButtonContainer.className = "sponsorSkipNoticeRightSection" + + let hideButton = document.createElement("button"); + hideButton.innerText = "X"; + hideButton.className = "sponsorSkipNoticeButton sponsorSkipNoticeCloseButton"; + hideButton.addEventListener("click", () => closeSkipNotice(UUID)); + + closeButtonContainer.appendChild(hideButton); + + //add all objects to first row + firstRow.appendChild(logoColumn); + firstRow.appendChild(closeButtonContainer); + + let spacer = document.createElement("hr"); + spacer.className = "sponsorBlockSpacer"; + + //the row that will contain the buttons + let secondRow = document.createElement("tr"); //thumbs up and down buttons - let voteButtonsContainer = document.createElement("div"); + let voteButtonsContainer = document.createElement("td"); voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID; - voteButtonsContainer.setAttribute("align", "center"); let upvoteButton = document.createElement("img"); upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; @@ -908,35 +948,64 @@ function openSkipNotice(UUID){ voteButtonsContainer.appendChild(upvoteButton); voteButtonsContainer.appendChild(downvoteButton); - let buttonContainer = document.createElement("div"); - buttonContainer.setAttribute("align", "center"); + //add unskip button + let unskipContainer = document.createElement("td"); + unskipContainer.className = "sponsorSkipNoticeUnskipSection"; - let goBackButton = document.createElement("button"); - goBackButton.innerText = chrome.i18n.getMessage("goBack"); - goBackButton.className = "sponsorSkipButton"; - goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID)); + let unskipButton = document.createElement("button"); + unskipButton.innerText = chrome.i18n.getMessage("goBack"); + unskipButton.className = "sponsorSkipNoticeButton"; + unskipButton.addEventListener("click", () => goBackToPreviousTime(UUID)); - let hideButton = document.createElement("button"); - hideButton.innerText = chrome.i18n.getMessage("Dismiss"); - hideButton.className = "sponsorSkipButton"; - hideButton.addEventListener("click", () => closeSkipNotice(UUID)); + unskipContainer.appendChild(unskipButton); + + //add don't show again button + let dontshowContainer = document.createElement("td"); + dontshowContainer.className = "sponsorSkipNoticeRightSection"; let dontShowAgainButton = document.createElement("button"); dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide"); - dontShowAgainButton.className = "sponsorSkipDontShowButton"; + dontShowAgainButton.className = "sponsorSkipNoticeButton sponsorSkipNoticeCloseButton"; dontShowAgainButton.addEventListener("click", dontShowNoticeAgain); - buttonContainer.appendChild(goBackButton); - buttonContainer.appendChild(hideButton); - buttonContainer.appendChild(document.createElement("br")); - buttonContainer.appendChild(document.createElement("br")); - buttonContainer.appendChild(dontShowAgainButton); + dontshowContainer.appendChild(dontShowAgainButton); - noticeElement.appendChild(logoElement); - noticeElement.appendChild(noticeMessage); - noticeElement.appendChild(noticeInfo); - noticeElement.appendChild(voteButtonsContainer); - noticeElement.appendChild(buttonContainer); + //add to row + secondRow.appendChild(voteButtonsContainer); + secondRow.appendChild(unskipContainer); + secondRow.appendChild(dontshowContainer); + + // let buttonContainer = document.createElement("div"); + // buttonContainer.setAttribute("align", "center"); + + // let goBackButton = document.createElement("button"); + // goBackButton.innerText = chrome.i18n.getMessage("goBack"); + // goBackButton.className = "sponsorSkipButton"; + // goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID)); + + // let hideButton = document.createElement("button"); + // hideButton.innerText = chrome.i18n.getMessage("Dismiss"); + // hideButton.className = "sponsorSkipButton"; + // hideButton.addEventListener("click", () => closeSkipNotice(UUID)); + + // let dontShowAgainButton = document.createElement("button"); + // dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide"); + // dontShowAgainButton.className = "sponsorSkipDontShowButton"; + // dontShowAgainButton.addEventListener("click", dontShowNoticeAgain); + + // buttonContainer.appendChild(goBackButton); + // buttonContainer.appendChild(hideButton); + // buttonContainer.appendChild(document.createElement("br")); + // buttonContainer.appendChild(document.createElement("br")); + // buttonContainer.appendChild(dontShowAgainButton); + + // noticeElement.appendChild(logoElement); + // noticeElement.appendChild(noticeMessage); + // noticeElement.appendChild(noticeInfo); + + noticeElement.appendChild(firstRow); + noticeElement.appendChild(spacer); + noticeElement.appendChild(secondRow); let referenceNode = document.getElementById("movie_player"); if (referenceNode == null) { diff --git a/icons/downvote.png b/icons/downvote.png index 1af50e78..7d6036e6 100644 Binary files a/icons/downvote.png and b/icons/downvote.png differ diff --git a/icons/upvote.png b/icons/upvote.png index 56eb5c5b..30023f95 100644 Binary files a/icons/upvote.png and b/icons/upvote.png differ