Merge pull request #115 from ajayyy/experimental-ajay

Added new notice and new only downvote behavior

_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."

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;
+	height: 18px;
-	position: absolute;
+
-	top: 0;
+	float: left;
-	bottom: 0;
-	margin: auto;
-	margin-left: 10px;
 }
 
 @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: 280px;
-    min-width: 400px;
+    background-color: rgba(28, 28, 28, 0.9);
-    background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
-	border: 3px solid rgba(0, 0, 0, 0.8);
+	right: 5px;
-	right: 0;
+	bottom: 100px;
-	bottom: 90px;
+	right: 10px;
-	zoom: 85%;
+
+	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;
+	font-size: 14px;
-    color: #000000;
-    text-align: center;
-    margin-top: 10px;
 	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-size: 13.3333px;
-	font-weight: bold;
+    color: rgb(235, 235, 235);
-    color: #000000;
 	text-align: center;
 }
 
 .voteButton {
-	height: 32px;
+	height: 18px;
-	margin-right: 15px;
 	cursor: pointer;
 }
 .voteButton:hover {

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.className = "sponsorSkipLogo sponsorSkipObject";
-  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+  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!";
+  noticeMessage.innerText = chrome.i18n.getMessage("noticeTitle");
 
-  let noticeInfo = document.createElement("p");
+  //create the first column
-  noticeInfo.id = "sponsorSkipInfo" + UUID;
+  logoColumn.appendChild(logoElement);
-  noticeInfo.classList.add("sponsorSkipInfo");
+  logoColumn.appendChild(noticeMessage);
-  noticeInfo.classList.add("sponsorSkipObject");
+
-  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  //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");
+  //add unskip button
-  buttonContainer.setAttribute("align", "center");
+  let unskipContainer = document.createElement("td");
+  unskipContainer.className = "sponsorSkipNoticeUnskipSection";
 
-  let goBackButton = document.createElement("button");
+  let unskipButton = document.createElement("button");
-  goBackButton.innerText = chrome.i18n.getMessage("goBack");
+  unskipButton.innerText = chrome.i18n.getMessage("goBack");
-  goBackButton.className = "sponsorSkipButton";
+  unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
-  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
+  unskipButton.addEventListener("click", () => goBackToPreviousTime(UUID));
 
-  let hideButton = document.createElement("button");
+  unskipContainer.appendChild(unskipButton);
-  hideButton.innerText = chrome.i18n.getMessage("Dismiss");
+
-  hideButton.className = "sponsorSkipButton";
+  //add don't show again button
-  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
+  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);
+  dontshowContainer.appendChild(dontShowAgainButton);
-  buttonContainer.appendChild(hideButton);
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(dontShowAgainButton);
 
-  noticeElement.appendChild(logoElement);
+  //add to row
-  noticeElement.appendChild(noticeMessage);
+  secondRow.appendChild(voteButtonsContainer);
-  noticeElement.appendChild(noticeInfo);
+  secondRow.appendChild(unskipContainer);
-  noticeElement.appendChild(voteButtonsContainer);
+  secondRow.appendChild(dontshowContainer);
-  noticeElement.appendChild(buttonContainer);
+
+  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
+  addVoteButtonInfo(chrome.i18n.getMessage("Voted"), UUID);
-  //remove buttons
+  addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"), UUID);
-  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);
 
   //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) {
+function addNoticeInfoMessage(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);
-  }
-
   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) {
+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
-  addLoadingInfo("Loading...", UUID)
+    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 (!inTheBackground) {
         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)
+          addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
+          resetVoteButtonInfo(UUID);
         } else if (response.successType == -1) {
           if (response.statusCode == 502) {
-          addLoadingInfo(chrome.i18n.getMessage("serverDown"), UUID)
+            addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
+            resetVoteButtonInfo(UUID);
           } else {
             //failure: unknown error
-          addLoadingInfo(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+            addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+            resetVoteButtonInfo(UUID);
+          }
         }
       }
     }

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"

popup.html

@@ -123,6 +123,10 @@
               <br/>
     
               <button id="setUsernameButton" class="warningButton popupElement">Set Username</button>
+              <br/>
+              <sub class="popupElement">
+                This is used on the public stats page to show off how much you've contributed. See it <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">here</a>.
+              </sub>
             </div>
 
             <div id="setUsername" class="popupElement" style="display: none">

popup.js

@@ -1051,7 +1051,7 @@ function runThePopup() {
   
   //this is not a YouTube video page
   function displayNoVideo() {
-    document.getElementById("loadingIndicator").innerHTML = chrome.i18n.getMessage("noVideoID");
+    document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
   }
   
   function reportAnIssue() {