diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7a3e9064..954b309c 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -42,6 +42,12 @@
"Segments": {
"message": "sponsor segments"
},
+ "noticeTitle": {
+ "message": "Sponsor Skipped"
+ },
+ "noticeClosingMessage": {
+ "message": "closes in 7s"
+ },
"Dismiss": {
"message": "Dismiss"
},
@@ -55,13 +61,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."
+ "message": "Hit unskip 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."
@@ -89,7 +95,7 @@
"message": "This probably isn't a YouTube tab, or you clicked too early. \n If you know this is a YouTube tab,\n close this popup and open it again."
},
"Voted": {
- "message": "Thanks for voting!"
+ "message": "Voted!"
},
"voteFail": {
"message": "You have already voted this way before."
diff --git a/content.css b/content.css
index c05f2f16..074bca68 100644
--- a/content.css
+++ b/content.css
@@ -41,16 +41,16 @@
}
.sponsorSkipObject {
- font-family: 'Source Sans Pro', sans-serif;
+ font-family: Roboto, Arial, Helvetica, 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,33 +58,89 @@
to { opacity: 1; }
}
+.sponsorBlockSpacer {
+ background-color: rgb(100, 100, 100);
+ border-color: rgb(100, 100, 100);
+
+ margin-left: 5px;
+}
+
.sponsorSkipNotice {
- min-height: 165px;
- min-width: 400px;
- background-color: rgba(255, 217, 217, 0.8);
+ min-width: 280px;
+ background-color: rgba(28, 28, 28, 0.9);
position: absolute;
- border: 3px solid rgba(0, 0, 0, 0.8);
- right: 0;
- bottom: 90px;
- zoom: 85%;
+ right: 5px;
+ bottom: 100px;
+ right: 10px;
+
+ border-radius: 5px;
animation: fadeIn 0.5s;
+
+ border-spacing: 5px 10px;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+
+.sponsorSkipNoticeTimeLeft {
+ color: #eeeeee;
+
+ border-radius: 4px;
+ padding: 2px 5px;
+ font-size: 12px;
+
+ border: 1px solid #eeeeee;
}
/* if two are very close to eachother */
.secondSkipNotice {
- bottom: 280px;
+ bottom: 250px;
transition: bottom 0.2s;
}
+.sponsorSkipNoticeUnskipSection {
+ float: left;
+
+ border-left: 1px solid rgb(150, 150, 150);
+}
+
+.sponsorSkipNoticeCloseButton {
+ height: 10px;
+ width: 10px;
+}
+
+.sponsorSkipNoticeButton {
+ background: none;
+ color: rgb(235, 235, 235);
+ border: none;
+ display: inline-block;
+
+ cursor: pointer;
+
+ margin-right: 10px;
+}
+
+.sponsorSkipNoticeRightSection {
+ right: 0;
+ position: absolute;
+
+ float: right;
+
+ margin-right: 5px;
+}
+
+.sponsorSkipNoticeRightButton {
+ margin-left: 7px;
+ padding: 0px;
+}
+
.sponsorSkipMessage {
- font-size: 18px;
- color: #000000;
- text-align: center;
- margin-top: 10px;
+ font-size: 14px;
font-weight: bold;
- margin-top: 4px;
+ color: rgb(235, 235, 235);
+
+ display: inline-block;
}
.sponsorSkipInfo {
@@ -111,16 +167,18 @@
margin-top: 0px;
}
+.sponsorTimesVoteButtonMessage {
+ float: left;
+}
+
.sponsorTimesInfoMessage {
- font-size: 15px;
- font-weight: bold;
- color: #000000;
+ font-size: 13.3333px;
+ color: rgb(235, 235, 235);
text-align: center;
}
.voteButton {
- height: 32px;
- margin-right: 15px;
+ height: 18px;
cursor: pointer;
}
.voteButton:hover {
diff --git a/content.js b/content.js
index a95b473e..c05cd9ad 100644
--- a/content.js
+++ b/content.js
@@ -516,6 +516,9 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
//send telemetry that a this sponsor was skipped happened
if (trackViewCount) {
sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+
+ //upvote this
+ vote(1, currentUUID, true);
}
}
}
@@ -870,73 +873,99 @@ function openSkipNotice(UUID){
noticeElement.classList.add("sponsorSkipNotice");
noticeElement.style.zIndex = 50 + amountOfPreviousNotices;
+ //the row that will contain the info
+ let firstRow = document.createElement("tr");
+ firstRow.id = "sponsorSkipNoticeFirstRow" + UUID;
+
+ 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 = chrome.i18n.getMessage("noticeTitle");
+
+ //create the first column
+ logoColumn.appendChild(logoElement);
+ logoColumn.appendChild(noticeMessage);
+
+ //add the x button
+ let closeButtonContainer = document.createElement("td");
+ closeButtonContainer.className = "sponsorSkipNoticeRightSection";
+ closeButtonContainer.style.top = "11px";
+
+ let timeLeft = document.createElement("span");
+ timeLeft.innerText = chrome.i18n.getMessage("noticeClosingMessage");
+ timeLeft.className = "sponsorSkipObject sponsorSkipNoticeTimeLeft";
+
+ let hideButton = document.createElement("img");
+ hideButton.src = chrome.extension.getURL("icons/close.png");
+ hideButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton";
+ hideButton.addEventListener("click", () => closeSkipNotice(UUID));
+
+ closeButtonContainer.appendChild(timeLeft);
+ closeButtonContainer.appendChild(hideButton);
+
+ //add all objects to first row
+ firstRow.appendChild(logoColumn);
+ firstRow.appendChild(closeButtonContainer);
+
+ let spacer = document.createElement("hr");
+ spacer.id = "sponsorSkipNoticeSpacer" + UUID;
+ spacer.className = "sponsorBlockSpacer";
+
+ //the row that will contain the buttons
+ let secondRow = document.createElement("tr");
+ secondRow.id = "sponsorSkipNoticeSecondRow" + UUID;
//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;
- upvoteButton.className = "sponsorSkipObject voteButton";
- upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
- upvoteButton.addEventListener("click", () => vote(1, UUID));
let downvoteButton = document.createElement("img");
downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
downvoteButton.className = "sponsorSkipObject voteButton";
- downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+ downvoteButton.src = chrome.extension.getURL("icons/report.png");
downvoteButton.addEventListener("click", () => vote(0, UUID));
//add thumbs up and down buttons to the container
- 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 = "sponsorSkipObject 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 = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
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);
+
+ noticeElement.appendChild(firstRow);
+ noticeElement.appendChild(spacer);
+ noticeElement.appendChild(secondRow);
let referenceNode = document.getElementById("movie_player");
if (referenceNode == null) {
@@ -957,36 +986,8 @@ function openSkipNotice(UUID){
}
function afterDownvote(UUID) {
- //change text to say thanks for voting
- //remove buttons
- let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
- let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
- if (upvoteButton != null) {
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
- }
- if (downvoteButton != null) {
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
- }
-
- let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
- if (previousInfoMessage != null) {
- //remove it
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
- }
-
- //add thanks for voting text
- let thanksForVotingText = document.createElement("p");
- thanksForVotingText.id = "sponsorTimesThanksForVotingText";
- thanksForVotingText.innerText = chrome.i18n.getMessage("Voted");
-
- //add extra info for voting
- let thanksForVotingInfoText = document.createElement("p");
- thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
- thanksForVotingInfoText.innerText = chrome.i18n.getMessage("hitGoBack");
-
- //add element to div
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText);
+ addVoteButtonInfo(chrome.i18n.getMessage("Voted"), UUID);
+ addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"), UUID);
//remove this sponsor from the sponsors looked up
//find which one it is
@@ -1005,41 +1006,74 @@ function afterDownvote(UUID) {
//update the preview
previewBar.set(sponsorTimesLeft, [], v.duration);
+
+ break;
}
}
}
-function addLoadingInfo(message, UUID) {
- //change text to say thanks for message
- //remove buttons
- let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
- let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
- if (upvoteButton != null) {
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
- }
- if (downvoteButton != null) {
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
- }
-
+function addNoticeInfoMessage(message, UUID) {
let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
if (previousInfoMessage != null) {
//remove it
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
+ document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
}
- //add thanks for voting text
+ //add info
let thanksForVotingText = document.createElement("p");
thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
thanksForVotingText.className = "sponsorTimesInfoMessage";
thanksForVotingText.innerText = message;
//add element to div
- document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
+ document.getElementById("sponsorSkipNotice" + UUID).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + UUID));
}
-function vote(type, UUID) {
- //add loading info
- addLoadingInfo("Loading...", UUID)
+function resetNoticeInfoMessage(UUID) {
+ let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
+ if (previousInfoMessage != null) {
+ //remove it
+ document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
+ }
+}
+
+function addVoteButtonInfo(message, UUID) {
+ resetVoteButtonInfo(UUID);
+
+ //hide vote button
+ let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
+ if (downvoteButton != null) {
+ document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.display = "none";
+ }
+
+ //add info
+ let thanksForVotingText = document.createElement("td");
+ thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + UUID;
+ thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+ thanksForVotingText.innerText = message;
+
+ //add element to div
+ document.getElementById("sponsorSkipNoticeSecondRow" + UUID).prepend(thanksForVotingText);
+}
+
+function resetVoteButtonInfo(UUID) {
+ let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + UUID);
+ if (previousInfoMessage != null) {
+ //remove it
+ document.getElementById("sponsorSkipNoticeSecondRow" + UUID).removeChild(previousInfoMessage);
+ }
+
+ //show button again
+ document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.removeProperty("display");
+}
+
+//if inTheBackground is true, then no UI methods will be called
+function vote(type, UUID, inTheBackground = false) {
+ if (!inTheBackground) {
+ //add loading info
+ addVoteButtonInfo("Loading...", UUID)
+ resetNoticeInfoMessage(UUID);
+ }
chrome.runtime.sendMessage({
message: "submitVote",
@@ -1048,22 +1082,25 @@ function vote(type, UUID) {
}, function(response) {
if (response != undefined) {
//see if it was a success or failure
- if (response.successType == 1) {
- //success
- if (type == 0) {
- afterDownvote(UUID);
- } else if (type == 1) {
- closeSkipNotice(UUID);
- }
- } else if (response.successType == 0) {
- //failure: duplicate vote
- addLoadingInfo(chrome.i18n.getMessage("voteFAIL"), UUID)
- } else if (response.successType == -1) {
- if (response.statusCode == 502) {
- addLoadingInfo(chrome.i18n.getMessage("serverDown"), UUID)
- } else {
- //failure: unknown error
- addLoadingInfo(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+ if (!inTheBackground) {
+ if (response.successType == 1) {
+ //success
+ if (type == 0) {
+ afterDownvote(UUID);
+ }
+ } else if (response.successType == 0) {
+ //failure: duplicate vote
+ addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
+ resetVoteButtonInfo(UUID);
+ } else if (response.successType == -1) {
+ if (response.statusCode == 502) {
+ addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
+ resetVoteButtonInfo(UUID);
+ } else {
+ //failure: unknown error
+ addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+ resetVoteButtonInfo(UUID);
+ }
}
}
}
diff --git a/icons/close.png b/icons/close.png
new file mode 100644
index 00000000..1b28870f
Binary files /dev/null and b/icons/close.png differ
diff --git a/icons/report.png b/icons/report.png
new file mode 100644
index 00000000..2376d3e9
Binary files /dev/null and b/icons/report.png differ
diff --git a/manifest.json b/manifest.json
index 90cdaad3..cc8f81fb 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"name": "__MSG_fullName__",
"short_name": "__MSG_Name__",
- "version": "1.0.36",
+ "version": "1.0.37",
"default_locale": "en",
"description": "__MSG_Description__",
"content_scripts": [
@@ -33,6 +33,8 @@
"icons/PlayerUploadFailedIconSponsorBlocker256px.png",
"icons/upvote.png",
"icons/downvote.png",
+ "icons/report.png",
+ "icons/close.png",
"icons/PlayerInfoIconSponsorBlocker256px.png",
"icons/PlayerDeleteIconSponsorBlocker256px.png",
"popup.html"
diff --git a/popup.html b/popup.html
index bb5e16cc..b9affd64 100644
--- a/popup.html
+++ b/popup.html
@@ -123,6 +123,10 @@
+
+