Merge pull request #127 from ajayyy/experimental

Update master

README.md

@@ -1,16 +1,22 @@
-![Logo](icons/LogoSponsorBlocker256px.png)
-<br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
+<p align="center">
+  <img src="icons/LogoSponsorBlocker256px.png" alt="Logo"></img>
+  
+  <br/>
+  <sub>Logo by <a href="https://github.com/munadikieh">@munadikieh</a></sub>
+</p>
+
+<h1 align="center">SponsorBlock</h1>
+
+<p align="center">
+  <a href="https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone">Chrome/Chromium</a> |
+  <a href="https://addons.mozilla.org/addon/sponsorblock/?src=external-github">Firefox</a> |
+  <a href="https://sponsor.ajay.app">Website</a> |
+  <a href="https://sponsor.ajay.app/stats">Stats</a>
+</p>
 
-# SponsorBlock
 
 SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that lets anyone submit the start and end times of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
 
-# Available for Chrome and Firefox
-
-Chrome: https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone
-
-Firefox: https://addons.mozilla.org/addon/sponsorblock/
-
 # Server
 
 The backend server code is available here: https://github.com/ajayyy/SponsorBlockServer
@@ -25,10 +31,6 @@ Hopefully this project can be combined with projects like [this](https://github.
 
 You can read the API docs [here](https://github.com/ajayyy/SponsorBlockServer#api-docs).
 
-# Previous extension
-
-This project is partially based off of [this experimental extension](https://github.com/OfficialNoob/YTSponsorSkip), which has the basic video skipping functionality.
-
 # Build Yourself
 
 You can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.

_locales/en/messages.json

@@ -45,9 +45,6 @@
     "noticeTitle": {
         "message": "Sponsor Skipped"
     },
-  "noticeClosingMessage": {
-    "message": "closes in 7s"
-  },
     "reportButtonTitle": {
         "message": "Report"
     },
@@ -72,9 +69,15 @@
     "hitGoBack": {
         "message": "Hit unskip to get to where you came from."
     },
-  "goBack": {
+    "unskip": {
         "message": "Unskip"
     },
+    "reskip": {
+        "message": "Reskip"
+    },
+    "paused": {
+        "message": "Paused"
+    },
     "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."
     },
@@ -100,7 +103,10 @@
     "noVideoID": {
         "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": {
+    "success": {
+        "message": "Success!"
+    },
+    "voted": {
         "message": "Voted!"
     },
     "voteFail": {
@@ -117,5 +123,8 @@
     },
     "leftTimes": {
         "message": "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted)."
+    },
+    "submitCheck": {
+        "message": "Are you sure you want to submit this?"
     }
 }

_locales/fr/messages.json

@@ -0,0 +1,129 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Name of the extension."
+    },
+    "fullName": {
+        "message": "SponsorBlock pour YouTube - Enlève les endossements",
+        "description": "Name of the extension."
+    },
+
+    "Description": {
+        "message": "Enlève les endossements dans les vidéos YouTube. Soummettre les endossements dans les vidéos que vous regardez pour aidez les autres.",
+        "description": "Description of the extension."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "Soumission invalide"
+    },
+    "429": {
+        "message": "Vous avez soummetez trop de endossements, il y a vraiment cette montant?"
+    },
+    "409": {
+        "message": "Déjas soummis"
+    },
+    "502": {
+        "message": "Le serveur ne fonctionne pas. Message le développeur."
+    },
+    "channelWhitelisted": {
+        "message": "Cette channel est sur la liste blanche!"
+    },
+    "Sponsor": {
+        "message": "endossement"
+    },
+    "Sponsors": {
+        "message": "endossements"
+    },
+    "Segment": {
+        "message": "section d'endossement"
+    },
+    "Segments": {
+        "message": "section d'endossements"
+    },
+    "noticeTitle": {
+        "message": "Endossement Passer"
+    },
+    "reportButtonTitle": {
+        "message": "Incorrect"
+    },
+    "reportButtonInfo": {
+        "message": "Informe que cette endossement est incorrect ou n'existe pas."
+    },
+    "Dismiss": {
+        "message": "Ferme"
+    },
+    "Loading": {
+        "message": "Chargement en cours..."
+    },
+    "Mins": {
+        "message": "Minutes"
+    },
+    "Secs": {
+        "message": "Seconds"
+    },
+    "Hide": {
+        "message": "Ne Montre Jaimais"
+    },
+    "hitGoBack": {
+        "message": "Clique retourne pour si vous avez manqué parti."
+    },
+    "unskip": {
+        "message": "Retourne"
+    },
+    "reskip": {
+        "message": "Resaute"
+    },
+    "paused": {
+        "message": "Pause"
+    },
+    "confirmMSG": {
+        "message": "\n\nPour modifier ou enlever des soumissions, clique sur le bouton d'info."
+    },
+    "clearThis": {
+        "message": "Êtes-vous certaines vous voulez enlever vos soumissions?\n\n"
+    },
+    "Unknown": {
+        "message": "Erreur, essayer encore plus tard."
+    },
+    "sponsorFound": {
+        "message": "Cette vidéo est dans le database!"
+    },
+    "sponsor404": {
+        "message": "Rien d'endossements trouvé"
+    },
+    "sponsorStart": {
+        "message": "Endossement Commence Maintenant"
+    },
+    "sponsorEnd": {
+        "message": "Endossement Arête Maintenant"
+    },
+    "noVideoID": {
+        "message": "Ceci n'est pas une tab de YouTube, ou vous avez cliqué trop tôt. \n Si vous savez que ceci est une tab YouTube, ferme ce menu et essayé encore."
+    },
+    "success": {
+        "message": "Succès!"
+    },
+    "voted": {
+        "message": "Voté!"
+    },
+    "voteFail": {
+        "message": "Vous avez déjà voté la même façon."
+    },
+    "serverDown": {
+        "message": "Le serveur ne fonctionne pas. Message le développeur."
+    },
+    "connectionError": {
+        "message": "Erreur. Code: "
+    },
+    "wantToSubmit": {
+        "message": "Voulez-vous soumettre les endossements sur le vidéo"
+    },
+    "leftTimes": {
+        "message": "Vous avez laissé les endossements qui n'étaient pas soumis. Retournez à la page pour les soumettre (Ils ne sont pas enlevés)."
+    },
+    "submitCheck": {
+        "message": "Êtes-vous certaines vous voulez soumettre?"
+    }
+}

_locales/pt_BR/messages.json

@@ -0,0 +1,127 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Nome da extensão."
+    },
+    "fullName": {
+        "message": "SponsorBlock para YouTube - Pule patrocínios",
+        "description": "Nome da extensão."
+    },
+
+    "Description": {
+        "message": "Pule patrocinadores em vídeos do YouTube. Reporte patrocinadores em videos que você assiste para salvar o tempo dos outros.",
+        "description": "Descrição da extensão."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "O servidor disse que esse pedido foi inválido"
+    },
+    "429": {
+        "message": "Você enviou muitos segmentos para esse vídeo, tem certeza que tem tantos assim?"
+    },
+    "409": {
+        "message": "Isso já foi enviado antes"
+    },
+    "502": {
+        "message": "Parece que o servidor caiu. Contate o desenvolvedor para informá-los."
+    },
+    "channelWhitelisted": {
+        "message": "Canal adicionado a lista branca!"
+    },
+    "Sponsor": {
+        "message": "patrocinador"
+    },
+    "Sponsors": {
+        "message": "patrocinadores"
+    },
+   "Segment": {
+        "message": "segmento de patrocinador"
+    },
+    "Segments": {
+        "message": "segmento de patrocinadores"
+    },
+    "noticeTitle": {
+        "message": "Patrocinador pulado"
+    },
+    "reportButtonTitle": {
+        "message": "Reportar"
+    },
+    "reportButtonInfo": {
+        "message": "Reportar essa subimissão como inválida."
+    },
+    "Dismiss": {
+        "message": "Ignorar"
+    },
+    "Loading": {
+        "message": "Carregando..."
+    },
+    "Mins": {
+        "message": "Minutos"
+    },
+    "Secs": {
+        "message": "Segundos"
+    },
+    "Hide": {
+        "message": "Nunca mostrar"
+    },
+    "hitGoBack": {
+        "message": "Aperta reverter pulo para voltar onde estava"
+    },
+    "unskip": {
+        "message": "Reverter pulo"
+    },
+    "reskip": {
+        "message": "Pular novamente"
+    },
+    "paused": {
+        "message": "Pausado"
+    },
+    "confirmMSG": {
+        "message": "\n\nPara editar ou remover linhas individuais, clique com o botão direito ou abra o popup da extensão pelo icone no canto superior direito."
+    },
+    "clearThis": {
+        "message": "Tem certeza que quer limpar isso?\n\n"
+    },
+    "Unknown": {
+        "message": "Teve um erro ao enviar seus segmentos, tente novamente depois"
+    },
+  
+    "sponsorFound": {
+        "message": "Os patrocinadores desse vídeo estão no banco de dados!"
+    },
+    "sponsor404": {
+        "message": "Nenhum patrocinador encontrado"
+    },
+    "sponsorStart": {
+        "message": "Patrocínio começa agora"
+    },
+    "sponsorEnd": {
+        "message": "Patrocínio termina agora"
+    },
+    "noVideoID": {
+        "message": "Isso provavelmente não é uma tab do YouTube, ou você clicou muito cedo. \n Se sabe que é uma tab do YouTube,\n fecha esse popup e abre de novo."
+    },
+    "success": {
+        "message": "Sucesso!"
+    },
+    "voted": {
+        "message": "Votado!"
+    },
+    "voteFail": {
+        "message": "Você já votou antes."
+    },
+    "serverDown": {
+        "message": "Parece que o servidor caiu. Contate o desenvolvedor o quanto antes."
+    },
+    "connectionError": {
+        "message": "Um erro de conexão aconteceu: Código: "
+    },
+    "wantToSubmit": {
+        "message": "Quer enviar os segmentos para o vídeo de ID"
+    },
+    "leftTimes": {
+        "message": "Parece que você esqueceu de enviar alguns segmentos. Volta pra página para enviar eles (não foram deletados)."
+    }
+}

_locales/ru/messages.json

@@ -0,0 +1,130 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Название расширения, не переводится."
+    },
+    "fullName": {
+        "message": "SponsorBlock для YouTube - Пропускайте спонсорские вставки",
+        "description": "Название расширения."
+    },
+
+    "Description": {
+        "message": "Пропускайте спонсорские вставки в видео на YouTube. Сообщайте о спонсорских вставках в видео, которые Вы смотрите, чтобы сэкономить время других пользователей.",
+        "description": "Описание раширения."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "Сервер отклонил этот запрос."
+    },
+    "429": {
+        "message": "Вы отправили слишком много спонсоров для этого видео. Вы уверены, что их так много?"
+    },
+    "409": {
+        "message": "Этот запрос был отправлен ранее."
+    },
+    "502": {
+        "message": "Сервер недоступен. Свяжитесь с разработчиком и сообщите ему об этом."
+    },
+    "channelWhitelisted": {
+        "message": "Канал добавлен в белый список!"
+    },
+    "Sponsor": {
+        "message": "Спонсор"
+    },
+    "Sponsors": {
+        "message": "Спонсоры"
+    },
+   "Segment": {
+        "message": "спонсорская вставка"
+    },
+    "Segments": {
+        "message": "спонсорские вставки"
+    },
+    "noticeTitle": {
+        "message": "Спонсор пропущен"
+    },
+    "reportButtonTitle": {
+        "message": "Ошибка"
+    },
+    "reportButtonInfo": {
+        "message": "Сообщить, что информация об этом спонсорском сегменте ошибочна."
+    },
+    "Dismiss": {
+        "message": "Закрыть"
+    },
+    "Loading": {
+        "message": "Загрузка..."
+    },
+    "Mins": {
+        "message": "мин"
+    },
+    "Secs": {
+        "message": "сек"
+    },
+    "Hide": {
+        "message": "Не показывать"
+    },
+    "hitGoBack": {
+        "message": "Нажмите «Назад», чтобы вернуться обратно."
+    },
+    "unskip": {
+        "message": "Назад"
+    },
+    "reskip": {
+        "message": "Пропустить"
+    },
+    "paused": {
+        "message": "Пауза"
+    },
+    "confirmMSG": {
+        "message": "\n\nЧтобы изменить или удалить отдельные значения, нажмите кнопку «Информация» или откройте всплывающее окно расширения, щелкнув значок расширения в правом верхнем углу."
+    },
+    "clearThis": {
+        "message": "Вы уверены, что хотите удалить эту информацию?\n\n"
+    },
+    "Unknown": {
+        "message": "При отправке отчета о спонсорском сегменте произошла ошибка. Попытайтесь отправить его позже."
+    },
+  
+    "sponsorFound": {
+        "message": "Спонсоры этого видео уже находятся в базе данных!"
+    },
+    "sponsor404": {
+        "message": "Спонсорские вставки не найдены"
+    },
+    "sponsorStart": {
+        "message": "Спонсорская вставка начинается сейчас"
+    },
+    "sponsorEnd": {
+        "message": "Спонсорская вставка оканчивается сейчас"
+    },
+    "noVideoID": {
+        "message": "Возможно, это не вкладка YouTube, или Вы нажали слишком рано. \n Если это вкладка YouTube,\n закройте это всплывающее окно и откройте его снова."
+    },
+    "success": {
+        "message": "Успех!"
+    },
+    "voted": {
+        "message": "Голос засчитан!"
+    },
+    "voteFail": {
+        "message": "Вы уже проголосовали таким образом раньше."
+    },
+    "serverDown": {
+        "message": "Кажется, сервер не работает. Свяжитесь с разработчиком."
+    },
+    "connectionError": {
+        "message": "Ошибка соединения. Код ошибки: "
+    },
+    "wantToSubmit": {
+        "message": "Вы точно хотите отправить отчёт о спонсорских вставках в видео с идентификатором"
+    },
+    "leftTimes": {
+        "message": "Вы ещё не отправили отчёты о некоторых спонсорских вставках. Хотите вернуться на эту страницу, чтобы отправить их (они не удаляются)."
+    },
+    "submitCheck": {
+        "message": "Вы уверены, что хотите отправить эту информацию?"
+    }
+}

background.js

@@ -33,8 +33,8 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
     case "alertPrevious":
 			chrome.notifications.create("stillThere" + Math.random(), {
         type: "basic",
-				title: "Do you want to submit the sponsor times for video id " + request.previousVideoID + "?",
-				message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
+        title: chrome.i18n.getMessage("wantToSubmit") + request.previousVideoID + "?",
+        message: chrome.i18n.getMessage("leftTimes"),
         iconUrl: "./icons/LogoSponsorBlocker256px.png"
 			});
 	}

content.css

@@ -58,6 +58,11 @@
 	  to { opacity: 1; }
 }
 
+@keyframes fadeOut {
+	from { opacity: 1; }
+	  to { opacity: 0; }
+}
+
 .sponsorBlockSpacer {
 	background-color: rgb(100, 100, 100);
 	border-color: rgb(100, 100, 100);
@@ -66,7 +71,7 @@
 }
 
 .sponsorSkipNotice {
-    min-width: 280px;
+    min-width: 300px;
     background-color: rgba(28, 28, 28, 0.9);
     position: absolute;
 	right: 5px;
@@ -82,6 +87,10 @@
 	padding-right: 5px;
 }
 
+.sponsorSkipNoticeFadeOut {
+	animation: fadeOut 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
 .sponsorSkipNoticeTimeLeft {
 	color: #eeeeee;
 
@@ -105,11 +114,6 @@
 	border-left: 1px solid rgb(150, 150, 150);
 }
 
-.sponsorSkipNoticeCloseButton {
-	height: 10px;
-    width: 10px;
-}
-
 .sponsorSkipNoticeButton {
 	background: none;
 	color: rgb(235, 235, 235);
@@ -119,6 +123,23 @@
 	cursor: pointer;
 
 	margin-right: 10px;
+
+    padding: 2px 5px;
+}
+
+.sponsorSkipNoticeButton:hover {
+	background-color: rgba(235, 235, 235,0.2);
+	border-radius: 4px;
+	
+	transition: background-color 0.4s;
+}
+
+.sponsorTimesVoteButtonsContainer {
+	float: left;
+	
+	padding: 2px 5px;
+
+	margin-right: 4px;
 }
 
 .sponsorSkipNoticeRightSection {
@@ -131,8 +152,17 @@
 }
 
 .sponsorSkipNoticeRightButton {
-    margin-left: 7px;
-	padding: 0px;
+	margin-right: 0;
+}
+
+.sponsorSkipNoticeCloseButton {
+	height: 10px;
+	width: 10px;
+	
+	padding: 2px 5px;
+
+	margin-left: 2px;
+    float: right;
 }
 
 .sponsorSkipMessage {

content.js

@@ -10,9 +10,6 @@ var sponsorVideoID = null;
 //these are sponsors that have been downvoted
 var hiddenSponsorTimes = [];
 
-//the time this video is starting at when first played, if not zero
-var youtubeVideoStartTime = null;
-
 //the video
 var v;
 
@@ -40,9 +37,6 @@ if (id = getYouTubeVideoID(document.URL)) { // Direct Links
 //the last time looked at (used to see if this time is in the interval)
 var lastTime = -1;
 
-//the actual time (not video time) that the last skip happened
-var lastUnixTimeSkipped = -1;
-
 //the amount of times the sponsor lookup has retried
 //this only happens if there is an error
 var sponsorLookupRetries = 0;
@@ -61,10 +55,6 @@ var hideVideoPlayerControls = false;
 var hideInfoButtonPlayerControls = false;
 var hideDeleteButtonPlayerControls = false;
 
-//the downloaded sponsor times
-var sponsorTimes = [];
-var UUIDs = [];
-
 //the sponsor times being prepared to be submitted
 var sponsorTimesSubmitting = [];
 
@@ -214,7 +204,6 @@ document.onkeydown = function(e){
 function resetValues() {
     //reset last sponsor times
     lastTime = -1;
-  lastUnixTimeSkipped = -1;
 
     //reset sponsor times
     sponsorTimes = null;
@@ -267,9 +256,6 @@ function videoIDChange(id) {
 
     resetValues();
 
-  //see if there is a video start time
-  youtubeVideoStartTime = getYouTubeVideoStartTime(document.URL);
-
     sponsorsLookup(id);
 
     //make sure everything is properly added
@@ -296,6 +282,8 @@ function videoIDChange(id) {
             //see if this data should be saved in the sponsorTimesSubmitting variable
             if (sponsorTimes != undefined && sponsorTimes.length > 0) {
                 sponsorTimesSubmitting = sponsorTimes;
+
+                updatePreviewBar();
             }
         }
     });
@@ -391,7 +379,21 @@ function sponsorsLookup(id) {
 }
 
 function updatePreviewBar() {
-  previewBar.set(sponsorTimes, [], v.duration);
+    let localSponsorTimes = sponsorTimes;
+    if (localSponsorTimes == null) localSponsorTimes = [];
+
+    let allSponsorTimes = localSponsorTimes.concat(sponsorTimesSubmitting);
+
+    //create an array of the sponsor types
+    let types = [];
+    for (let i = 0; i < localSponsorTimes.length; i++) {
+        types.push("sponsor");
+    }
+    for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
+        types.push("previewSponsor");
+    }
+
+    previewBar.set(allSponsorTimes, types, v.duration);
 
     //update last video id
     lastPreviewBarUpdate = getYouTubeVideoID(document.URL);
@@ -476,7 +478,7 @@ function checkSponsorTime(sponsorTimes, index, openNotice) {
         lastTime = v.currentTime - 0.0001;
     }
 
-  if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0]) && !hiddenSponsorTimes.includes(index)) {
+    if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0], sponsorTimes[index][1]) && !hiddenSponsorTimes.includes(index)) {
         //skip it
         skipToTime(v, index, sponsorTimes, openNotice);
 
@@ -487,15 +489,13 @@ function checkSponsorTime(sponsorTimes, index, openNotice) {
     return false;
 }
 
-function checkIfTimeToSkip(currentVideoTime, startTime) {
-  let currentTime = Date.now();
-
+function checkIfTimeToSkip(currentVideoTime, startTime, endTime) {
     //If the sponsor time is in between these times, skip it
     //Checks if the last time skipped to is not too close to now, to make sure not to get too many
     //  sponsor times in a row (from one troll)
     //the last term makes 0 second start times possible only if the video is not setup to start at a different time from zero
-  return (Math.abs(currentVideoTime - startTime) < 0.3 && startTime >= lastTime && startTime <= currentVideoTime && 
-      (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && startTime == 0 && youtubeVideoStartTime == null)
+    return (Math.abs(currentVideoTime - startTime) < 3 && startTime >= lastTime && startTime <= currentVideoTime) || 
+                (lastTime == -1 && startTime == 0 && currentVideoTime < endTime)
 }
 
 //skip fromt he start time to the end time for a certain index sponsor time
@@ -509,13 +509,13 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
 
     if (openNotice) {
         //send out the message saying that a sponsor message was skipped
-    openSkipNotice(currentUUID);
-
-    setTimeout(() => closeSkipNotice(currentUUID), 7000);
+        if (!dontShowNotice) {
+            new SkipNotice(this, currentUUID);
 
             //auto-upvote this sponsor
             if (trackViewCount) {
-      vote(1, currentUUID, true);
+                vote(1, currentUUID, null);
+            }
         }
     }
 
@@ -525,12 +525,17 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
     }
 }
 
-function goBackToPreviousTime(UUID) {
+function unskipSponsorTime(UUID) {
     if (sponsorTimes != null) {
         //add a tiny bit of time to make sure it is not skipped again
         v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][0] + 0.001;
+    }
+}
 
-    closeSkipNotice(UUID);
+function reskipSponsorTime(UUID) {
+    if (sponsorTimes != null) {
+        //add a tiny bit of time to make sure it is not skipped again
+        v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][1];
     }
 }
 
@@ -620,6 +625,8 @@ function updateSponsorTimesSubmitting() {
             //see if this data should be saved in the sponsorTimesSubmitting variable
             if (sponsorTimes != undefined) {
                 sponsorTimesSubmitting = sponsorTimes;
+
+                updatePreviewBar();
             }
         }
     });
@@ -846,244 +853,20 @@ function clearSponsorTimes() {
             //clear sponsor times submitting
             sponsorTimesSubmitting = [];
 
+            updatePreviewBar();
+
             //set buttons to be correct
             changeStartSponsorButton(true, false);
         }
     });
 }
 
-//Opens the notice that tells the user that a sponsor was just skipped
-function openSkipNotice(UUID){
-  if (dontShowNotice) {
-    //don't show, return
-    return;
-  }
-
-  let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
-
-  if (amountOfPreviousNotices > 0) {
-    //already exists
-
-    let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
-    previousNotice.classList.add("secondSkipNotice")
-  }
-
-  let noticeElement = document.createElement("div");
-  //what sponsor time this is about
-  noticeElement.id = "sponsorSkipNotice" + UUID;
-  noticeElement.classList.add("sponsorSkipObject");
-  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 sponsorSkipObject";
-  logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
-
-  let noticeMessage = document.createElement("span");
-  noticeMessage.id = "sponsorSkipMessage" + UUID;
-  noticeMessage.classList.add("sponsorSkipMessage");
-  noticeMessage.classList.add("sponsorSkipObject");
-  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("td");
-  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-
-  let reportText = document.createElement("span");
-  reportText.id = "sponsorTimesReportText" + UUID;
-  reportText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
-  reportText.innerText = chrome.i18n.getMessage("reportButtonTitle");
-  reportText.style.marginRight = "5px";
-  reportText.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
-
-  let downvoteButton = document.createElement("img");
-  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-  downvoteButton.className = "sponsorSkipObject voteButton";
-  downvoteButton.src = chrome.extension.getURL("icons/report.png");
-  downvoteButton.addEventListener("click", () => vote(0, UUID));
-  downvoteButton.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
-
-  //add downvote and report text to container
-  voteButtonsContainer.appendChild(reportText);
-  voteButtonsContainer.appendChild(downvoteButton);
-
-  //add unskip button
-  let unskipContainer = document.createElement("td");
-  unskipContainer.className = "sponsorSkipNoticeUnskipSection";
-
-  let unskipButton = document.createElement("button");
-  unskipButton.innerText = chrome.i18n.getMessage("goBack");
-  unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
-  unskipButton.addEventListener("click", () => goBackToPreviousTime(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 = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
-  dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
-
-  dontshowContainer.appendChild(dontShowAgainButton);
-
-  //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) {
-    //for embeds
-    let player = document.getElementById("player");
-    referenceNode = player.firstChild;
-    let index = 1;
-
-    //find the child that is the video player (sometimes it is not the first)
-    while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
-      referenceNode = player.children[index];
-
-      index++;
-    }
-  }
-
-  referenceNode.prepend(noticeElement);
-}
-
-function afterDownvote(UUID) {
-  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
-  for (let i = 0; i < sponsorTimes.length; i++) {
-    if (UUIDs[i] == UUID) {
-      //this one is the one to hide
-      
-      //add this as a hidden sponsorTime
-      hiddenSponsorTimes.push(i);
-
-      let sponsorTimesLeft = sponsorTimes.slice();
-      for (let j = 0; j < hiddenSponsorTimes.length; j++) {
-        //remove this sponsor time
-        sponsorTimesLeft.splice(hiddenSponsorTimes[j], 1);
-      }
-
-      //update the preview
-      previewBar.set(sponsorTimesLeft, [], v.duration);
-
-      break;
-    }
-  }
-}
-
-function addNoticeInfoMessage(message, UUID) {
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //add info
-  let thanksForVotingText = document.createElement("p");
-  thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
-  thanksForVotingText.className = "sponsorTimesInfoMessage";
-  thanksForVotingText.innerText = message;
-
-  //add element to div
-  document.getElementById("sponsorSkipNotice" + UUID).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + 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) {
+//if skipNotice is null, it will not affect the UI
+function vote(type, UUID, skipNotice) {
+    if (skipNotice != null) {
         //add loading info
-    addVoteButtonInfo("Loading...", UUID)
-    resetNoticeInfoMessage(UUID);
+        skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
+        skipNotice.resetNoticeInfoMessage.bind(skipNotice)();
     }
 
     chrome.runtime.sendMessage({
@@ -1093,24 +876,24 @@ function vote(type, UUID, inTheBackground = false) {
     }, function(response) {
         if (response != undefined) {
             //see if it was a success or failure
-      if (!inTheBackground) {
+            if (skipNotice != null) {
                 if (response.successType == 1) {
                     //success
                     if (type == 0) {
-            afterDownvote(UUID);
+                        skipNotice.afterDownvote.bind(skipNotice)();
                     }
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
-          addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
-          resetVoteButtonInfo(UUID);
+                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
+                    skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 } else if (response.successType == -1) {
                     if (response.statusCode == 502) {
-            addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
-            resetVoteButtonInfo(UUID);
+                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("serverDown"))
+                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                     } else {
                         //failure: unknown error
-            addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
-            resetVoteButtonInfo(UUID);
+                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("connectionError") + response.statusCode);
+                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                     }
                 }
             }
@@ -1118,14 +901,6 @@ function vote(type, UUID, inTheBackground = false) {
     });
 }
 
-//Closes the notice that tells the user that a sponsor was just skipped for this UUID
-function closeSkipNotice(UUID){
-  let notice = document.getElementById("sponsorSkipNotice" + UUID);
-  if (notice != null) {
-    notice.remove();
-  }
-}
-
 //Closes all notices that tell the user that a sponsor was just skipped
 function closeAllSkipNotices(){
     let notices = document.getElementsByClassName("sponsorSkipNotice");
@@ -1170,8 +945,8 @@ function submitSponsorTimes() {
         let sponsorTimes = result[sponsorTimeKey];
 
         if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-      let confirmMessage = "Are you sure you want to submit this?\n\n" + getSponsorTimesMessage(sponsorTimes);
-      confirmMessage += "\n\nTo edit or delete values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
+            let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes);
+            confirmMessage += "\n\n" + chrome.i18n.getMessage("confirmMSG");
             if(!confirm(confirmMessage)) return;
 
             sendSubmitMessage();
@@ -1217,7 +992,6 @@ function sendSubmitMessage(){
                 //request the sponsors from the server again
                 sponsorsLookup(currentVideoID);
             } else {
-        //for a more detailed error message, they should check the popup
                 //show that the upload failed
                 document.getElementById("submitButton").style.animation = "unset";
                 document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");

firefox_manifest-extra.json

@@ -0,0 +1,8 @@
+{
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "57.0"
+    }
+  }
+}

firefox_manifest.json

@@ -1,68 +0,0 @@
-{
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
-  "short_name": "SponsorBlock",
-  "version": "1.0.12",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
-  "content_scripts": [
-    {
-      "matches": [
-        "https://*.youtube.com/*"
-      ],
-      "js": [
-        "config.js",
-        "content.js",
-        "popup.js"
-      ],
-      "css": [
-        "content.css",
-        "./libs/Source+Sans+Pro.css",
-        "popup.css"
-      ]
-    }
-  ],
-  "web_accessible_resources": [
-    "icons/LogoSponsorBlocker256px.png",
-    "icons/IconSponsorBlocker256px.png",
-    "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png",
-    "icons/PlayerUploadIconSponsorBlocker256px.png",
-    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
-    "icons/upvote.png",
-    "icons/downvote.png",
-    "icons/PlayerInfoIconSponsorBlocker256px.png",
-    "icons/PlayerDeleteIconSponsorBlocker256px.png",
-    "popup.html",
-    "help/index.html",
-    "help/style.css"
-  ],
-  "permissions": [
-    "tabs",
-    "storage",
-    "notifications",
-    "https://sponsor.ajay.app/*"
-  ],
-  "browser_action": {
-    "default_title": "SponsorBlock",
-    "default_popup": "popup.html"
-  }, 
-  "background": {
-    "scripts":[
-      "config.js",
-      "background.js"
-    ]
-  },
-  "icons": {
-    "16": "icons/IconSponsorBlocker16px.png",
-    "32": "icons/IconSponsorBlocker32px.png",
-    "64": "icons/LogoSponsorBlocker64px.png",
-    "128": "icons/LogoSponsorBlocker128px.png",
-    "256": "icons/LogoSponsorBlocker256px.png"
-  },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "sponsorBlocker@ajay.app",
-      "strict_min_version": "57.0"
-    }
-  },
-  "manifest_version": 2
-}

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_fullName__",
   "short_name": "__MSG_Name__",
-  "version": "1.0.38",
+  "version": "1.1.2",
   "default_locale": "en",
   "description": "__MSG_Description__",
   "content_scripts": [
@@ -13,6 +13,7 @@
       "js": [
         "config.js",
         "utils/previewBar.js",
+        "utils/skipNotice.js",
         "utils.js",
         "content.js",
         "popup.js"

popup.css

@@ -110,17 +110,17 @@ h1.popupElement {
 	text-decoration:none;
 	text-shadow:0px 0px 0px #27663c;
     }
-  .whitelistButton:hover.popupElement {
+.whitelistButton:hover.popupElement {
     background-color:#218b26;
-  }
-  .whitelistButton:focus.popupElement {
+}
+.whitelistButton:focus.popupElement {
     outline: none;
     background-color:#218b26;
-  }
-  .whitelistButton:active.popupElement {
+}
+.whitelistButton:active.popupElement {
     position:relative;
     top:1px;
-  }
+}
 
 .greenButton.popupElement {
     background-color:#ec1c1c;

popup.js

@@ -799,7 +799,13 @@ function runThePopup() {
 
                         clearTimes();
                     } else {
-            let errorMessage = getErrorMessage(response.statusCode);
+                        let errorMessage = "";
+                        
+                        if([400,429,409,502].includes(response.statusCode)) {
+                            errorMessage = chrome.i18n.getMessage(response.statusCode);
+                        } else {
+                            errorMessage = chrome.i18n.getMessage("connectionError") + response.statusCode;
+                        }
 
                         document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
                         document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -1010,11 +1016,14 @@ function runThePopup() {
 
                     SB.setUsernameContainer.style.display = "none";
                     SB.setUsername.style.display = "unset";
-        } else {
+                    
+                    SB.setUsernameStatusContainer.style.display = "none";
+                } else if (xmlhttp.readyState == 4) {
                     SB.setUsername.style.display = "unset";
                     SB.submitUsername.style.display = "none";
                     SB.usernameInput.style.display = "none";
 
+                    SB.setUsernameStatusContainer.style.display = "unset";
                     SB.setUsernameStatus.innerText = "Couldn't connect to server. Error code: " + xmlhttp.status;
                 }
             });
@@ -1035,11 +1044,17 @@ function runThePopup() {
                     SB.submitUsername.style.display = "none";
                     SB.usernameInput.style.display = "none";
 
-          SB.setUsernameStatus.innerText = "Success!";
-        } else if (xmlhttp.readyState == 4 && xmlhttp.status == 400) {
-          SB.setUsernameStatus.innerText = "Bad Request";
+                    SB.setUsernameStatus.innerText = chrome.i18n.getMessage("success");
+                } else if (xmlhttp.readyState == 4) {
+                    let errorMessage = "";
+                        
+                    if([400, 429, 409, 502].includes(xmlhttp.status)) {
+                        errorMessage = chrome.i18n.getMessage(xmlhttp.status);
                     } else {
-          SB.setUsernameStatus.innerText = getErrorMessage(EN_US, xmlhttp.status);
+                        errorMessage = chrome.i18n.getMessage("connectionError") + xmlhttp.status;
+                    }
+
+                    SB.setUsernameStatus.innerText = errorMessage;
                 }
             });
         });
@@ -1088,7 +1103,7 @@ function runThePopup() {
                 //see if it was a success or failure
                 if (response.successType == 1) {
                     //success
-          addVoteMessage(chrome.i18n.getMessage("Voted"), UUID)
+                    addVoteMessage(chrome.i18n.getMessage("voted"), UUID)
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
                     addVoteMessage(chrome.i18n.getMessage("voteFail"), UUID)

utils.js

@@ -1,3 +1,17 @@
+// Function that can be used to wait for a condition before returning
+async function wait(condition, timeout = 5000, check = 100) { 
+  return await new Promise((resolve, reject) => {
+    setTimeout(() => {reject("TIMEOUT")}, timeout);
+    const interval = setInterval(() => {
+      let result = condition();
+      if (result !== false) {
+        resolve(result);
+        clearInterval(interval);
+      };
+    }, check);
+  });
+}
+
 function getYouTubeVideoID(url) {
     //Attempt to parse url
     let urlObject = null;
@@ -5,7 +19,7 @@ function getYouTubeVideoID(url) {
         urlObject = new URL(url);
     } catch (e) {      
         console.error("[SB] Unable to parse URL: " + url);
-        return false
+        return false;
     }
   
     //Check if valid hostname
@@ -24,14 +38,3 @@ function getYouTubeVideoID(url) {
       }
     }
 }
-
-//returns the start time of the video if there was one specified (ex. ?t=5s)
-function getYouTubeVideoStartTime(url) {
-  let searchParams = new URL(url).searchParams;
-  let startTime = searchParams.get("t");
-  if (startTime == null) {
-    startTime = searchParams.get("time_continue");
-  }
-
-  return startTime;
-}

utils/previewBar.js

@@ -13,6 +13,10 @@ let barTypes = {
 	"sponsor": {
 		color: "#00d400",
 		opacity: "0.5"
+	},
+	"previewSponsor": {
+		color: "#0000d4",
+		opacity: "0.5"
 	}
 };
 

utils/skipNotice.js

@@ -0,0 +1,367 @@
+'use strict';
+
+//The notice that tells the user that a sponsor was just skipped
+class SkipNotice {
+	constructor(parent, UUID) {
+        this.parent = parent;
+        this.UUID = UUID;
+
+        this.maxCountdownTime = () => 4;
+        //the countdown until this notice closes
+        this.countdownTime = this.maxCountdownTime();
+        //the id for the setInterval running the countdown
+        this.countdownInterval = -1;
+
+        //the unskip button's callback
+        this.unskipCallback = this.unskip.bind(this);
+
+        //add notice
+        let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+
+        //this is the suffix added at the end of every id
+        this.idSuffix = this.UUID + amountOfPreviousNotices;
+
+        if (amountOfPreviousNotices > 0) {
+            //already exists
+
+            let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
+            previousNotice.classList.add("secondSkipNotice")
+        }
+
+        let noticeElement = document.createElement("div");
+        //what sponsor time this is about
+        noticeElement.id = "sponsorSkipNotice" + this.idSuffix;
+        noticeElement.classList.add("sponsorSkipObject");
+        noticeElement.classList.add("sponsorSkipNotice");
+        noticeElement.style.zIndex = 50 + amountOfPreviousNotices;
+
+        //add mouse enter and leave listeners
+        noticeElement.addEventListener("mouseenter", this.pauseCountdown.bind(this));
+        noticeElement.addEventListener("mouseleave", this.startCountdown.bind(this));
+
+        //the row that will contain the info
+        let firstRow = document.createElement("tr");
+        firstRow.id = "sponsorSkipNoticeFirstRow" + this.idSuffix;
+
+        let logoColumn = document.createElement("td");
+
+        let logoElement = document.createElement("img");
+        logoElement.id = "sponsorSkipLogo" + this.idSuffix;
+        logoElement.className = "sponsorSkipLogo sponsorSkipObject";
+        logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
+
+        let noticeMessage = document.createElement("span");
+        noticeMessage.id = "sponsorSkipMessage" + this.idSuffix;
+        noticeMessage.classList.add("sponsorSkipMessage");
+        noticeMessage.classList.add("sponsorSkipObject");
+        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.id = "sponsorSkipNoticeTimeLeft" + this.idSuffix;
+        timeLeft.innerText = this.countdownTime + "s";
+        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", this.close.bind(this));
+
+        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" + this.idSuffix;
+        spacer.className = "sponsorBlockSpacer";
+
+        //the row that will contain the buttons
+        let secondRow = document.createElement("tr");
+        secondRow.id = "sponsorSkipNoticeSecondRow" + this.idSuffix;
+        
+        //thumbs up and down buttons
+        let voteButtonsContainer = document.createElement("td");
+        voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + this.idSuffix;
+        voteButtonsContainer.className = "sponsorTimesVoteButtonsContainer"
+
+        let reportText = document.createElement("span");
+        reportText.id = "sponsorTimesReportText" + this.idSuffix;
+        reportText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+        reportText.innerText = chrome.i18n.getMessage("reportButtonTitle");
+        reportText.style.marginRight = "5px";
+        reportText.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
+
+        let downvoteButton = document.createElement("img");
+        downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + this.idSuffix;
+        downvoteButton.className = "sponsorSkipObject voteButton";
+        downvoteButton.src = chrome.extension.getURL("icons/report.png");
+        downvoteButton.addEventListener("click", () => vote(0, this.UUID, this));
+        downvoteButton.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
+
+        //add downvote and report text to container
+        voteButtonsContainer.appendChild(reportText);
+        voteButtonsContainer.appendChild(downvoteButton);
+
+        //add unskip button
+        let unskipContainer = document.createElement("td");
+        unskipContainer.className = "sponsorSkipNoticeUnskipSection";
+
+        let unskipButton = document.createElement("button");
+        unskipButton.id = "sponsorSkipUnskipButton" + this.idSuffix;
+        unskipButton.innerText = chrome.i18n.getMessage("unskip");
+        unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
+        unskipButton.addEventListener("click", this.unskipCallback);
+
+        unskipButton.style.marginLeft = "4px";
+
+        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 = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
+        dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
+
+        dontshowContainer.appendChild(dontShowAgainButton);
+
+        //add to row
+        secondRow.appendChild(voteButtonsContainer);
+        secondRow.appendChild(unskipContainer);
+        secondRow.appendChild(dontshowContainer);
+
+        noticeElement.appendChild(firstRow);
+        noticeElement.appendChild(spacer);
+        noticeElement.appendChild(secondRow);
+
+        //get reference node
+        let referenceNode = document.getElementById("movie_player");
+        if (referenceNode == null) {
+            //for embeds
+            let player = document.getElementById("player");
+            referenceNode = player.firstChild;
+            let index = 1;
+
+            //find the child that is the video player (sometimes it is not the first)
+            while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
+                referenceNode = player.children[index];
+
+                index++;
+            }
+        }
+
+        referenceNode.prepend(noticeElement);
+
+        this.startCountdown();
+    }
+
+    //called every second to lower the countdown before hiding the notice
+    countdown() {
+        this.countdownTime--;
+
+        if (this.countdownTime <= 0) {
+            //remove this from setInterval
+            clearInterval(this.countdownInterval);
+
+            //time to close this notice
+            this.close();
+
+            return;
+        }
+
+        if (this.countdownTime == 3) {
+            //start fade out animation
+            let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+            notice.style.removeProperty("animation");
+            notice.classList.add("sponsorSkipNoticeFadeOut");
+        }
+
+        this.updateTimerDisplay();
+    }
+
+    pauseCountdown() {
+        //remove setInterval
+        clearInterval(this.countdownInterval);
+        this.countdownInterval = -1;
+
+        //reset countdown
+        this.countdownTime = this.maxCountdownTime();
+        
+        //inform the user
+        let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix);
+        timeLeft.innerText = chrome.i18n.getMessage("paused");
+
+        //remove the fade out class if it exists
+        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        notice.classList.remove("sponsorSkipNoticeFadeOut");
+        notice.style.animation = "none";
+    }
+
+    startCountdown() {
+        //if it has already started, don't start it again
+        if (this.countdownInterval != -1) return;
+
+        this.countdownInterval = setInterval(this.countdown.bind(this), 1000);
+
+        this.updateTimerDisplay();
+    }
+
+    updateTimerDisplay() {
+        //update the timer display
+        let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix);
+        timeLeft.innerText = this.countdownTime + "s";
+    }
+
+    unskip() {
+        unskipSponsorTime(this.UUID);
+
+        //change unskip button to a reskip button
+        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
+        unskipButton.innerText = chrome.i18n.getMessage("reskip");
+        unskipButton.removeEventListener("click", this.unskipCallback);
+
+        //setup new callback
+        this.unskipCallback = this.reskip.bind(this);
+        unskipButton.addEventListener("click", this.unskipCallback);
+
+        //change max duration to however much of the sponsor is left
+        this.maxCountdownTime = function() {
+            let sponsorTime = sponsorTimes[UUIDs.indexOf(this.UUID)];
+            let duration = Math.round(sponsorTime[1] - v.currentTime);
+
+            return Math.max(duration, 4);
+        };
+
+        this.countdownTime = this.maxCountdownTime();
+        this.updateTimerDisplay();
+    }
+
+    reskip() {
+        reskipSponsorTime(this.UUID);
+
+        //change unskip button to a reskip button
+        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
+        unskipButton.innerText = chrome.i18n.getMessage("unskip");
+        unskipButton.removeEventListener("click", this.unskipCallback);
+
+        //setup new callback
+        this.unskipCallback = this.unskip.bind(this);
+        unskipButton.addEventListener("click", this.unskipCallback);
+
+        //reset duration
+        this.maxCountdownTime = () => 4;
+        this.countdownTime = this.maxCountdownTime();
+        this.updateTimerDisplay();
+    }
+
+    afterDownvote() {
+        this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
+        this.addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
+        
+        //remove this sponsor from the sponsors looked up
+        //find which one it is
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            if (UUIDs[i] == this.UUID) {
+                //this one is the one to hide
+                
+                //add this as a hidden sponsorTime
+                hiddenSponsorTimes.push(i);
+            
+                let sponsorTimesLeft = sponsorTimes.slice();
+                for (let j = 0; j < hiddenSponsorTimes.length; j++) {
+                    //remove this sponsor time
+                    sponsorTimesLeft.splice(hiddenSponsorTimes[j], 1);
+                }
+            
+                //update the preview
+                previewBar.set(sponsorTimesLeft, [], v.duration);
+            
+                break;
+            }
+        }
+    }
+    
+    addNoticeInfoMessage(message) {
+        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+        
+        //add info
+        let thanksForVotingText = document.createElement("p");
+        thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
+        thanksForVotingText.className = "sponsorTimesInfoMessage";
+        thanksForVotingText.innerText = message;
+        
+        //add element to div
+        document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
+    }
+    
+    resetNoticeInfoMessage() {
+        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+    }
+    
+    addVoteButtonInfo(message) {
+        this.resetVoteButtonInfo();
+        
+        //hide report button and text for it
+        let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix);
+        if (downvoteButton != null) {
+            downvoteButton.style.display = "none";
+        }
+        let downvoteButtonText = document.getElementById("sponsorTimesReportText" + this.idSuffix);
+        if (downvoteButtonText != null) {
+            downvoteButtonText.style.display = "none";
+        }
+        
+        //add info
+        let thanksForVotingText = document.createElement("td");
+        thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + this.idSuffix;
+        thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+        thanksForVotingText.innerText = message;
+        
+        //add element to div
+        document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).prepend(thanksForVotingText);
+    }
+    
+    resetVoteButtonInfo() {
+        let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+        
+        //show button again
+        document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix).style.removeProperty("display");
+    }
+    
+    //close this notice
+    close() {
+        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        if (notice != null) {
+            notice.remove();
+        }
+
+        //remove setInterval
+        if (this.countdownInterval != -1) clearInterval(this.countdownInterval);
+    }
+
+}