Merge pull request #133 from ajayyy/experimental

Update master

README.md

@@ -1,16 +1,22 @@
-![Logo](icons/LogoSponsorBlocker256px.png)
+<p align="center">
-<br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
+  <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/ajjollijmimolcncegpgkbilohbhjnhi
-
-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

@@ -0,0 +1,139 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Name of the extension."
+    },
+    "fullName": {
+        "message": "SponsorBlock for YouTube - Skip Sponsorships",
+        "description": "Name of the extension."
+    },
+
+    "Description": {
+        "message": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
+        "description": "Description of the extension."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "Server said this request was invalid"
+    },
+    "429": {
+        "message": "You have submitted too many sponsor times for this one video, are you sure there are this many?"
+    },
+    "409": {
+        "message": "This has already been submitted before"
+    },
+    "502": {
+        "message": "It seems the server is down. Contact the dev to inform them."
+    },
+    "channelWhitelisted": {
+        "message": "Channel Whitelisted!"
+    },
+    "Sponsor": {
+        "message": "Sponsor"
+    },
+    "Sponsors": {
+        "message": "Sponsors"
+    },
+   "Segment": {
+        "message": "sponsor segment"
+    },
+    "Segments": {
+        "message": "sponsor segments"
+    },
+    "noticeTitle": {
+        "message": "Sponsor Skipped"
+    },
+    "reportButtonTitle": {
+        "message": "Report"
+    },
+    "reportButtonInfo": {
+        "message": "Report this sponsor submission as incorrect."
+    },
+    "Dismiss": {
+        "message": "Dismiss"
+    },
+    "Loading": {
+        "message": "Loading..."
+    },
+    "Mins": {
+        "message": "Minutes"
+    },
+    "Secs": {
+        "message": "Seconds"
+    },
+    "Hide": {
+        "message": "Never Show"
+    },
+    "hitGoBack": {
+        "message": "Hit unskip to get to where you came from."
+    },
+    "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."
+    },
+    "clearThis": {
+        "message": "Are you sure you want to clear this?\n\n"
+    },
+    "Unknown": {
+        "message": "There was an error submitting your sponsor times, please try again later."
+    },
+  
+    "sponsorFound": {
+        "message": "This video's sponsors are in the database!"
+    },
+    "sponsor404": {
+        "message": "No sponsors found"
+    },
+    "sponsorStart": {
+        "message": "Sponsorship Starts Now"
+    },
+    "sponsorEnd": {
+        "message": "Sponsorship Ends Now"
+    },
+    "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."
+    },
+    "success": {
+        "message": "Success!"
+    },
+    "voted": {
+        "message": "Voted!"
+    },
+    "voteFail": {
+        "message": "You have already voted this way before."
+    },
+    "serverDown": {
+        "message": "It seems the sever is down. Contact the dev immediately."
+    },
+    "connectionError": {
+        "message": "A connection error has occured. Error code: "
+    },
+    "wantToSubmit": {
+        "message": "Do you want to submit the sponsor times for video id"
+    },
+    "leftTimes": {
+        "message": "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted)."
+    },
+    "clearTimes": {
+        "message": "Clear Sponsor Times"
+    },
+    "openPopup": {
+        "message": "Open SponsorBlock Popup"
+    },
+    "SubmitTimes": {
+        "message": "Submit Sponsor Times"
+    },
+    "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 messages commerciaux et publicités intégrées",
+        "description": "Name of the extension."
+    },
+
+    "Description": {
+        "message": "Passe automatiquement les messages commerciaux intégrés dans les vidéos YouTube. Soumettez les segments commerciaux 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 cherchez à envoyer beaucoup de segments, il y en a vraiment autant ?"
+    },
+    "409": {
+        "message": "Déja soumis"
+    },
+    "502": {
+        "message": "Le serveur ne fonctionne pas. Contactez le développeur."
+    },
+    "channelWhitelisted": {
+        "message": "Cette chaine est sur la liste blanche !"
+    },
+    "Sponsor": {
+        "message": "message commercial"
+    },
+    "Sponsors": {
+        "message": "messages commerciaux"
+    },
+    "Segment": {
+        "message": "segment de message commercial"
+    },
+    "Segments": {
+        "message": "segments de message commercial"
+    },
+    "noticeTitle": {
+        "message": "Message passé"
+    },
+    "reportButtonTitle": {
+        "message": "Incorrect"
+    },
+    "reportButtonInfo": {
+        "message": "Signaler que ce segment est incorrect ou n'existe pas."
+    },
+    "Dismiss": {
+        "message": "Fermer"
+    },
+    "Loading": {
+        "message": "Chargement en cours..."
+    },
+    "Mins": {
+        "message": "Minutes"
+    },
+    "Secs": {
+        "message": "Secondes"
+    },
+    "Hide": {
+        "message": "Ne plus montrer"
+    },
+    "hitGoBack": {
+        "message": "Cliquez sur revenir en arrière pour revenir avant le saut du segment"
+    },
+    "unskip": {
+        "message": "Revenir en arrière"
+    },
+    "reskip": {
+        "message": "Sauter"
+    },
+    "paused": {
+        "message": "En pause"
+    },
+    "confirmMSG": {
+        "message": "\n\nPour modifier ou enlever des soumissions, cliquez sur le bouton d'info."
+    },
+    "clearThis": {
+        "message": "Êtes-vous certain(e) que vous voulez enlever vos soumissions ?\n\n"
+    },
+    "Unknown": {
+        "message": "Erreur, essayer plus tard."
+    },
+    "sponsorFound": {
+        "message": "Les messages commerciaux sont déjà dans notre base de donnée pour cette vidéo !"
+    },
+    "sponsor404": {
+        "message": "Pas de messages trouvés"
+    },
+    "sponsorStart": {
+        "message": "Début du message"
+    },
+    "sponsorEnd": {
+        "message": "Fin du message"
+    },
+    "noVideoID": {
+        "message": "Ceci n'est pas un onglet YouTube, ou vous avez cliqué trop tôt. \n Si vous êtes sur(e) que c'est un onglet YouTube, fermez ce menu et réessayer."
+    },
+    "success": {
+        "message": "Succès !"
+    },
+    "voted": {
+        "message": "A voté !"
+    },
+    "voteFail": {
+        "message": "Vous avez déjà voté pour ce choix auparavant."
+    },
+    "serverDown": {
+        "message": "Le serveur ne fonctionne pas. Contactez le développeur."
+    },
+    "connectionError": {
+        "message": "Erreur de connexion, Code : "
+    },
+    "wantToSubmit": {
+        "message": "Voulez-vous soumettre les messages pour cette vidéo"
+    },
+    "leftTimes": {
+        "message": "Vous avez laissé des messages non soumis. Retournez sur la vidéo pour les soumettre (ils ont été conservés)."
+    },
+    "submitCheck": {
+        "message": "Soumettre ce(s) message(s) ?"
+    }
+}

_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

@@ -1,41 +1,22 @@
-//when a new tab is highlighted
-chrome.tabs.onActivated.addListener(
-  function(activeInfo) {
-    chrome.tabs.get(activeInfo.tabId, function(tab) {
-      let id = getYouTubeVideoID(tab.url);
-
-      //if this even is a YouTube tab
-      if (id) {
-        videoIDChange(id, activeInfo.tabId);
-      }
-    })
-  }
-);
-
-//when a tab changes URLs
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-    if (changeInfo != undefined && changeInfo.url != undefined) {
+	chrome.tabs.sendMessage(tabId, {
-      let id = getYouTubeVideoID(changeInfo.url);
+        message: 'update',
-
+	});
-      //if URL changed and is youtube video message contentScript the video id
-      if (changeInfo.url && id) { 
-        videoIDChange(id, tabId);
-      }
-    }
 });
 
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "submitTimes") {
+	switch(request.message) {
+    case "submitTimes":
 			submitTimes(request.videoID, callback);
         
 			//this allows the callback to be called later by the submitTimes function
 			return true; 
-  } else if (request.message == "addSponsorTime") {
+    case "addSponsorTime":
 			addSponsorTime(request.time, request.videoID, callback);
         
 			//this allows the callback to be called later
 			return true; 
-  } else if (request.message == "getSponsorTimes") {
+    case "getSponsorTimes":
 			getSponsorTimes(request.videoID, function(sponsorTimes) {
         callback({
 					sponsorTimes: sponsorTimes
@@ -44,11 +25,18 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
         
 			//this allows the callback to be called later
 			return true;
-  } else if (request.message == "submitVote") {
+    case "submitVote":
 			submitVote(request.type, request.UUID, callback);
         
 			//this allows the callback to be called later
 			return true;
+    case "alertPrevious":
+			chrome.notifications.create("stillThere" + Math.random(), {
+        type: "basic",
+        title: chrome.i18n.getMessage("wantToSubmit") + request.previousVideoID + "?",
+        message: chrome.i18n.getMessage("leftTimes"),
+        iconUrl: "./icons/LogoSponsorBlocker256px.png"
+			});
 	}
 });
 
@@ -68,7 +56,7 @@ chrome.runtime.onInstalled.addListener(function (object) {
             // TODO (shownInstallPage): remove this if statement, but leave contents
             if (!shownInstallPage){
                 //open up the install page
-        chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+                chrome.tabs.create({url: chrome.extension.getURL("/help/"+chrome.i18n.getMessage("helpPage"))});
             }
 
             // TODO (shownInstallPage): delete if statement and contents
@@ -78,13 +66,10 @@ chrome.runtime.onInstalled.addListener(function (object) {
             }
 
             //generate a userID
-      const newUserID = generateUUID();
+            const newUserID = generateUserID();
             //save this UUID
             chrome.storage.sync.set({
-        "userID": newUserID,
+                "userID": newUserID
-        //the last video id loaded, to make sure it is a video id change
-        "sponsorVideoID": null,
-        "previousVideoID": null
             });
         }
     });
@@ -128,6 +113,14 @@ function submitVote(type, UUID, callback) {
     chrome.storage.sync.get(["userID"], function(result) {
         let userID = result.userID;
 
+        if (userID == undefined || userID === "undefined") {
+            //generate one
+            userID = generateUserID();
+            chrome.storage.sync.set({
+                "userID": userID
+            });
+        }
+
         //publish this vote
         sendRequestToServer("GET", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
@@ -154,11 +147,29 @@ function submitVote(type, UUID, callback) {
 function submitTimes(videoID, callback) {
     //get the video times from storage
     let sponsorTimeKey = 'sponsorTimes' + videoID;
-  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    chrome.storage.sync.get([sponsorTimeKey, "userID"], async function(result) {
         let sponsorTimes = result[sponsorTimeKey];
         let userID = result.userID;
 
         if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+            let durationResult = await new Promise((resolve, reject) => {
+                chrome.tabs.query({
+                    active: true,
+                    currentWindow: true
+                }, function(tabs) {
+                    chrome.tabs.sendMessage(tabs[0].id, {
+                        message: "getVideoDuration"
+                    }, (response) => resolve(response));
+                });
+            });
+
+            //check if a sponsor exceeds the duration of the video
+            for (let i = 0; i < sponsorTimes.length; i++) {
+                if (sponsorTimes[i][1] > durationResult.duration) {
+                    sponsorTimes[i][1] = durationResult.duration;
+                }
+            }
+
             //submit these times
             for (let i = 0; i < sponsorTimes.length; i++) {
                     //submit the sponsorTime
@@ -193,56 +204,6 @@ function submitTimes(videoID, callback) {
     });
 }
 
-function videoIDChange(currentVideoID, tabId) {
-  //send a message to the content script
-  chrome.tabs.sendMessage(tabId, {
-    message: 'ytvideoid',
-    id: currentVideoID
-  });
-
-  chrome.storage.sync.get(["sponsorVideoID", "previousVideoID"], function(result) {
-    const sponsorVideoID = result.sponsorVideoID;
-    const previousVideoID = result.previousVideoID;
-
-    //not a url change
-    if (sponsorVideoID == currentVideoID){
-      return;
-    }
-
-    chrome.storage.sync.set({
-      "sponsorVideoID": currentVideoID
-    });
-
-    //warn them if they had unsubmitted times
-    if (previousVideoID != null) {
-      //get the sponsor times from storage
-      let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
-      chrome.storage.sync.get([sponsorTimeKey], function(result) {
-        let sponsorTimes = result[sponsorTimeKey];
-
-        if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-          //warn them that they have unsubmitted sponsor times
-          chrome.notifications.create("stillThere" + Math.random(), {
-            type: "basic",
-            title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
-            message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
-            iconUrl: "./icons/LogoSponsorBlocker256px.png"
-          });
-        }
-
-        //set the previous video id to the currentID
-        chrome.storage.sync.set({
-          "previousVideoID": currentVideoID
-        });
-      });
-    } else {
-      chrome.storage.sync.set({
-        "previousVideoID": currentVideoID
-      });
-    }
-  });
-}
-
 function sendRequestToServer(type, address, callback) {
     let xmlhttp = new XMLHttpRequest();
 
@@ -262,10 +223,9 @@ function sendRequestToServer(type, address, callback) {
     xmlhttp.send();
 }
 
-function generateUUID(length = 36) {
+function generateUserID(length = 36) {
         let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
         let result = "";
-    let isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
         if (window.crypto && window.crypto.getRandomValues) {
                 values = new Uint32Array(length);
                 window.crypto.getRandomValues(values);

content.css

@@ -1,3 +1,21 @@
+#previewbar {
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    width: 100%;
+	pointer-events: none;
+	
+	height: 100%;
+	transform: scaleY(0.6) translateY(-30%) translateY(1.5px);
+	z-index: 40;
+}
+
+.previewbar {
+	display: inline-block;
+	height: 100%;
+}
+
 .popup {
     z-index: 10;
     width: 100%;
@@ -23,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 {
@@ -40,33 +58,119 @@
 	  to { opacity: 1; }
 }
 
+@keyframes fadeOut {
+	from { opacity: 1; }
+	  to { opacity: 0; }
+}
+
+.sponsorBlockSpacer {
+	background-color: rgb(100, 100, 100);
+	border-color: rgb(100, 100, 100);
+
+	margin-left: 5px;
+}
+
 .sponsorSkipNotice {
-    min-height: 165px;
+    min-width: 300px;
-    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;
+}
+
+.sponsorSkipNoticeFadeOut {
+	animation: fadeOut 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.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);
+}
+
+.sponsorSkipNoticeButton {
+	background: none;
+	color: rgb(235, 235, 235);
+	border: none;
+	display: inline-block;
+
+	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 {
+    right: 0;
+	position: absolute;
+
+	float: right;
+
+	margin-right: 5px;
+}
+
+.sponsorSkipNoticeRightButton {
+	margin-right: 0;
+}
+
+.sponsorSkipNoticeCloseButton {
+	height: 10px;
+	width: 10px;
+	
+	padding: 2px 5px;
+
+	margin-left: 2px;
+    float: right;
+}
+
 .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 {
@@ -93,16 +197,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: 17px;
-	margin-right: 15px;
 	cursor: pointer;
 }
 .voteButton:hover {

content.js

@@ -1,34 +1,44 @@
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
-
+var previousVideoID = null;
 //the actual sponsorTimes if loaded and UUIDs associated with them
 var sponsorTimes = null;
 var UUIDs = null;
 //what video id are these sponsors for
 var sponsorVideoID = null;
 
-//the time this video is starting at when first played, if not zero
+//these are sponsors that have been downvoted
-var youtubeVideoStartTime = null;
+var hiddenSponsorTimes = [];
 
 //the video
 var v;
 
+var listenerAdded;
+
+//the video id of the last preview bar update
+var lastPreviewBarUpdate;
+
+//whether the duration listener listening for the duration changes of the video has been setup yet
+var durationListenerSetUp = false;
+
 //the channel this video is about
 var channelURL;
 
 //is this channel whitelised from getting sponsors skipped
 var channelWhitelisted = false;
 
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+// create preview bar
-  videoIDChange(id);
+var previewBar = null;
-}
+
+//the player controls on the YouTube player
+var controls = null;
+
+// Direct Links
+videoIDChange(getYouTubeVideoID(document.URL));
 
 //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;
@@ -47,10 +57,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 = [];
 
@@ -83,12 +89,12 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
 chrome.runtime.onMessage.addListener(messageListener);
   
 function messageListener(request, sender, sendResponse) {
-    //message from background script
+        //messages from popup script
-    if (request.message == "ytvideoid") { 
+  
-      videoIDChange(request.id);
+        if (request.message == "update") {
+			videoIDChange(getYouTubeVideoID(document.URL));
         }
   
-    //messages from popup script
         if (request.message == "sponsorStart") {
             sponsorMessageStarted(sendResponse);
         }
@@ -102,6 +108,7 @@ function messageListener(request, sender, sendResponse) {
             sendResponse({
                 found: sponsorDataFound,
                 sponsorTimes: sponsorTimes,
+                hiddenSponsorTimes: hiddenSponsorTimes,
                 UUIDs: UUIDs
             });
 
@@ -115,10 +122,26 @@ function messageListener(request, sender, sendResponse) {
 
         if (request.message == "getVideoID") {
             sendResponse({
-        videoID: getYouTubeVideoID(document.URL)
+                videoID: sponsorVideoID
             })
         }
 
+        if (request.message == "getVideoDuration") {
+            sendResponse({
+                duration: v.duration
+            });
+        }
+
+        if (request.message == "skipToTime") {
+            v.currentTime = request.time;
+        }
+
+        if (request.message == "getCurrentTime") {
+            sendResponse({
+                currentTime: v.currentTime
+            });
+        }
+
         if (request.message == "getChannelURL") {
             sendResponse({
                 channelURL: channelURL
@@ -133,7 +156,7 @@ function messageListener(request, sender, sendResponse) {
 
         if (request.message == "whitelistChange") {
             channelWhitelisted = request.value;
-      sponsorsLookup(getYouTubeVideoID(document.URL));
+            sponsorsLookup(sponsorVideoID);
         }
 
         if (request.message == "showNoticeAgain") {
@@ -182,30 +205,69 @@ document.onkeydown = function(e){
     }
 }
 
+function resetValues() {
+    //reset last sponsor times
+    lastTime = -1;
+
+    //reset sponsor times
+    sponsorTimes = null;
+    UUIDs = null;
+    sponsorLookupRetries = 0;
+
+    //empty the preview bar
+    if (previewBar !== null) {
+        previewBar.set([], [], 0);
+    }
+
+    //reset sponsor data found check
+    sponsorDataFound = false;
+}
+
 function videoIDChange(id) {
-  //not a url change
+    //if the id has not changed return
-  if (sponsorVideoID == id){
+    if (sponsorVideoID === id) return;
-    return;
+
+    //set the global videoID
+    sponsorVideoID = id;
+
+	resetValues();
+	
+	//id is not valid
+    if (!id) return;
+
+    //setup the preview bar
+    if (previewBar == null) {
+        //create it
+        let progressBar = document.getElementsByClassName("ytp-progress-bar-container")[0] || document.getElementsByClassName("no-model cue-range-markers")[0];
+        previewBar = new PreviewBar(progressBar);
+    }
+
+    //warn them if they had unsubmitted times
+    if (previousVideoID != null) {
+        //get the sponsor times from storage
+        let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
+        chrome.storage.sync.get([sponsorTimeKey], function(result) {
+            let sponsorTimes = result[sponsorTimeKey];
+
+            if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+                //warn them that they have unsubmitted sponsor times
+                    chrome.runtime.sendMessage({
+                        message: "alertPrevious",
+                        previousVideoID: previousVideoID
+                    })
+            }
+
+            //set the previous video id to the currentID
+            previousVideoID = id;
+        });
+    } else {
+        //set the previous id now, don't wait for chrome.storage.get
+        previousVideoID = id;
     }
   
     //close popup
     closeInfoMenu();
 	
-  //reset last sponsor times
-  lastTime = -1;
-  lastUnixTimeSkipped = -1;
-
-  //reset sponsor times
-  sponsorTimes = null;
-  UUIDs = null;
-  sponsorVideoID = id;
-  sponsorLookupRetries = 0;
-
-  //see if there is a video start time
-  youtubeVideoStartTime = getYouTubeVideoStartTime(document.URL);
-
-  //reset sponsor data found check
-  sponsorDataFound = false;
     sponsorsLookup(id);
 
     //make sure everything is properly added
@@ -215,6 +277,7 @@ function videoIDChange(id) {
     sponsorTimesSubmitting = [];
 
     //see if the onvideo control image needs to be changed
+	wait(getControls).then(result => {
 		chrome.runtime.sendMessage({
 			message: "getSponsorTimes",
 			videoID: id
@@ -232,9 +295,12 @@ function videoIDChange(id) {
 				//see if this data should be saved in the sponsorTimesSubmitting variable
 				if (sponsorTimes != undefined && sponsorTimes.length > 0) {
 					sponsorTimesSubmitting = sponsorTimes;
+          
+                    updatePreviewBar();
 				}
 			}
 		});
+	});
 
     //see if video controls buttons should be added
     chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
@@ -263,14 +329,23 @@ function videoIDChange(id) {
 
 function sponsorsLookup(id) {
     v = document.querySelector('video') // Youtube video player
-
     //there is no video here
     if (v == null) {
         setTimeout(() => sponsorsLookup(id), 100);
         return;
     }
 
+    if (!durationListenerSetUp) {
+        durationListenerSetUp = true;
+
+        //wait until it is loaded
+        v.addEventListener('durationchange', updatePreviewBar);
+    }
+  
     //check database for sponsor times
+
+    //made true once a setTimeout has been created to try again after a server error
+    let recheckStarted = false;
     sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             sponsorDataFound = true;
@@ -278,6 +353,14 @@ function sponsorsLookup(id) {
             sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
             UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
 
+            //update the preview bar
+            //leave the type blank for now until categories are added
+            if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(v.duration))) {
+                //set it now
+                //otherwise the listener can handle it
+                updatePreviewBar();
+            }
+
             getChannelID();
 
             sponsorLookupRetries = 0;
@@ -298,7 +381,9 @@ function sponsorsLookup(id) {
             });
 
             sponsorLookupRetries = 0;
-    } else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 15) {
+        } else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 90 && !recheckStarted) {
+            recheckStarted = true;
+
             //some error occurred, try again in a second
             setTimeout(() => sponsorsLookup(id), 1000);
 
@@ -312,6 +397,27 @@ function sponsorsLookup(id) {
     };
 }
 
+function updatePreviewBar() {
+    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 = sponsorVideoID;
+}
+
 function getChannelID() {
     //get channel id
     let channelContainers = document.querySelectorAll("#owner-name");
@@ -391,7 +497,7 @@ function checkSponsorTime(sponsorTimes, index, openNotice) {
         lastTime = v.currentTime - 0.0001;
     }
 
-  if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0])) {
+    if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0], sponsorTimes[index][1]) && !hiddenSponsorTimes.includes(index)) {
         //skip it
         skipToTime(v, index, sponsorTimes, openNotice);
 
@@ -402,15 +508,13 @@ function checkSponsorTime(sponsorTimes, index, openNotice) {
     return false;
 }
 
-function checkIfTimeToSkip(currentVideoTime, startTime) {
+function checkIfTimeToSkip(currentVideoTime, startTime, endTime) {
-  let currentTime = Date.now();
-
     //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 && 
+    return (Math.abs(currentVideoTime - startTime) < 3 && startTime >= lastTime && startTime <= currentVideoTime) || 
-      (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && startTime == 0 && youtubeVideoStartTime == null)
+                (lastTime == -1 && startTime == 0 && currentVideoTime < endTime)
 }
 
 //skip fromt he start time to the end time for a certain index sponsor time
@@ -424,73 +528,93 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
 
     if (openNotice) {
         //send out the message saying that a sponsor message was skipped
-    openSkipNotice(currentUUID);
+        if (!dontShowNotice) {
+            new SkipNotice(this, currentUUID);
 
-    setTimeout(() => closeSkipNotice(currentUUID), 7000);
+            //auto-upvote this sponsor
+            if (trackViewCount) {
+                vote(1, currentUUID, null);
+            }
+        }
+    }
 
     //send telemetry that a this sponsor was skipped happened
     if (trackViewCount) {
         sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
     }
 }
-}
 
-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);
     }
 }
 
-//Adds a sponsorship starts button to the player controls
+function reskipSponsorTime(UUID) {
-function addPlayerControlsButton() {
+    if (sponsorTimes != null) {
-  if (document.getElementById("startSponsorButton") != null) {
+        //add a tiny bit of time to make sure it is not skipped again
-    //it's already added
+        v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][1];
-    return;
     }
-
-  let startSponsorButton = document.createElement("button");
-  startSponsorButton.id = "startSponsorButton";
-  startSponsorButton.className = "ytp-button playerButton";
-  startSponsorButton.setAttribute("title", "Sponsor Starts Now");
-  startSponsorButton.addEventListener("click", startSponsorClicked);
-
-  let startSponsorImage = document.createElement("img");
-  startSponsorImage.id = "startSponsorImage";
-  startSponsorImage.className = "playerButtonImage";
-  startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
-
-  //add the image to the button
-  startSponsorButton.appendChild(startSponsorImage);
-
-  let controls = document.getElementsByClassName("ytp-right-controls");
-  let referenceNode = controls[controls.length - 1];
-
-  if (referenceNode == undefined) {
-    //page not loaded yet
-    setTimeout(addPlayerControlsButton, 100);
-    return;
-  }
-
-  referenceNode.prepend(startSponsorButton);
 }
 
 function removePlayerControlsButton() {
+    if (!sponsorVideoID) return;
+
     document.getElementById("startSponsorButton").style.display = "none";
     document.getElementById("submitButton").style.display = "none";
 }
 
+function createButton(baseID, title, callback, imageName, isDraggable=false) {
+    if (document.getElementById(baseID + "Button") != null) return;
+
+    // Button HTML
+    let newButton = document.createElement("button");
+    newButton.draggable = isDraggable;
+    newButton.id = baseID + "Button";
+    newButton.className = "ytp-button playerButton";
+    newButton.setAttribute("title", chrome.i18n.getMessage(title));
+    newButton.addEventListener("click", callback);
+
+    // Image HTML
+    let newButtonImage = document.createElement("img");
+    newButton.draggable = isDraggable;
+    newButtonImage.id = baseID + "Image";
+    newButtonImage.className = "playerButtonImage";
+    newButtonImage.src = chrome.extension.getURL("icons/" + imageName);
+
+    // Append image to button
+    newButton.appendChild(newButtonImage);
+
+    // Add the button to player
+    controls.prepend(newButton);
+}
+
+function getControls() {
+    let controls = document.getElementsByClassName("ytp-right-controls");
+    return (!controls || controls.length === 0) ? false : controls[controls.length - 1]
+};
+
+//adds all the player controls buttons
+function createButtons() {
+    wait(getControls).then(result => {
+        //set global controls variable
+        controls = result;
+
+        // Add button if does not already exist in html
+        createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png");	  
+        createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker256px.png")
+        createButton("delete", "clearTimes", clearSponsorTimes, "PlayerDeleteIconSponsorBlocker256px.png");
+        createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker256px.png");
+    });
+}
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
     //not on a proper video yet
-  if (!getYouTubeVideoID(document.URL)) return;
+    if (!sponsorVideoID) return;
+
+    createButtons();
 	
-  addPlayerControlsButton();
-  addInfoButton();
-  addDeleteButton();
-  addSubmitButton();
     if (hideVideoPlayerControls) {
         removePlayerControlsButton();
     }
@@ -512,7 +636,7 @@ function startSponsorClicked() {
     chrome.runtime.sendMessage({
         message: "addSponsorTime",
         time: v.currentTime,
-    videoID: getYouTubeVideoID(document.URL)
+        videoID: sponsorVideoID
     }, function(response) {
         //see if the sponsorTimesSubmitting needs to be updated
         updateSponsorTimesSubmitting();
@@ -522,7 +646,7 @@ function startSponsorClicked() {
 function updateSponsorTimesSubmitting() {
     chrome.runtime.sendMessage({
         message: "getSponsorTimes",
-    videoID: getYouTubeVideoID(document.URL)
+        videoID: sponsorVideoID
     }, function(response) {
         if (response != undefined) {
             let sponsorTimes = response.sponsorTimes;
@@ -530,23 +654,29 @@ function updateSponsorTimesSubmitting() {
             //see if this data should be saved in the sponsorTimesSubmitting variable
             if (sponsorTimes != undefined) {
                 sponsorTimesSubmitting = sponsorTimes;
+
+                updatePreviewBar();
             }
         }
     });
 }
 
-function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
+//is the submit button on the player loaded yet
-  //if it isn't visible, there is no data
+function isSubmitButtonLoaded() {
-  if (uploadButtonVisible && !hideDeleteButtonPlayerControls) {
+    return document.getElementById("submitButton") !== null;
-    document.getElementById("deleteButton").style.display = "unset";
-  } else {
-    document.getElementById("deleteButton").style.display = "none";
 }
 
+function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
+	if(!sponsorVideoID) return false;
+	wait(isSubmitButtonLoaded).then(result => {
+    //if it isn't visible, there is no data
+	let shouldHide = (uploadButtonVisible && !hideDeleteButtonPlayerControls) ? "unset":"none"
+	document.getElementById("deleteButton").style.display = shouldHide;
+
     if (showStartSponsor) {
         showingStartSponsor = true;
         document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
-    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Starts Now");
+        document.getElementById("startSponsorButton").setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
 
         if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !hideInfoButtonPlayerControls) {
             document.getElementById("submitButton").style.display = "unset";
@@ -557,123 +687,18 @@ function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
     } else {
         showingStartSponsor = false;
         document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
-    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Ends Now");
+        document.getElementById("startSponsorButton").setAttribute("title", chrome.i18n.getMessage("sponsorEND"));
 
         //disable submit button
         document.getElementById("submitButton").style.display = "none";
     }
+	});
 }
 
 function toggleStartSponsorButton() {
     changeStartSponsorButton(!showingStartSponsor, true);
 }
 
-//shows the info button on the video player
-function addInfoButton() {
-  if (document.getElementById("infoButton") != null) {
-    //it's already added
-    return;
-  }
-  
-  //make a submit button
-  let infoButton = document.createElement("button");
-  infoButton.id = "infoButton";
-  infoButton.className = "ytp-button playerButton";
-  infoButton.setAttribute("title", "Open SponsorBlock Popup");
-  infoButton.addEventListener("click", openInfoMenu);
-
-  let infoImage = document.createElement("img");
-  infoImage.id = "infoButtonImage";
-  infoImage.className = "playerButtonImage";
-  infoImage.src = chrome.extension.getURL("icons/PlayerInfoIconSponsorBlocker256px.png");
-
-  //add the image to the button
-  infoButton.appendChild(infoImage);
-
-  let controls = document.getElementsByClassName("ytp-right-controls");
-  let referenceNode = controls[controls.length - 1];
-
-  if (referenceNode == undefined) {
-    //page not loaded yet
-    setTimeout(addInfoButton, 100);
-    return;
-  }
-
-  referenceNode.prepend(infoButton);
-}
-
-//shows the delete button on the video player
-function addDeleteButton() {
-  if (document.getElementById("deleteButton") != null) {
-    //it's already added
-    return;
-  }
-  
-  //make a submit button
-  let deleteButton = document.createElement("button");
-  deleteButton.id = "deleteButton";
-  deleteButton.className = "ytp-button playerButton";
-  deleteButton.setAttribute("title", "Clear Sponsor Times");
-  deleteButton.addEventListener("click", clearSponsorTimes);
-  //hide it at the start
-  deleteButton.style.display = "none";
-
-  let deleteImage = document.createElement("img");
-  deleteImage.id = "deleteButtonImage";
-  deleteImage.className = "playerButtonImage";
-  deleteImage.src = chrome.extension.getURL("icons/PlayerDeleteIconSponsorBlocker256px.png");
-
-  //add the image to the button
-  deleteButton.appendChild(deleteImage);
-
-  let controls = document.getElementsByClassName("ytp-right-controls");
-  let referenceNode = controls[controls.length - 1];
-  
-  if (referenceNode == undefined) {
-    //page not loaded yet
-    setTimeout(addDeleteButton, 100);
-    return;
-  }
-
-  referenceNode.prepend(deleteButton);
-}
-
-//shows the submit button on the video player
-function addSubmitButton() {
-  if (document.getElementById("submitButton") != null) {
-    //it's already added
-    return;
-  }
-  
-  //make a submit button
-  let submitButton = document.createElement("button");
-  submitButton.id = "submitButton";
-  submitButton.className = "ytp-button playerButton";
-  submitButton.setAttribute("title", "Submit Sponsor Times");
-  submitButton.addEventListener("click", submitSponsorTimes);
-  //hide it at the start
-  submitButton.style.display = "none";
-
-  let submitImage = document.createElement("img");
-  submitImage.id = "submitButtonImage";
-  submitImage.className = "playerButtonImage";
-  submitImage.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
-
-  //add the image to the button
-  submitButton.appendChild(submitImage);
-
-  let controls = document.getElementsByClassName("ytp-right-controls");
-  let referenceNode = controls[controls.length - 1];
-
-  if (referenceNode == undefined) {
-    //page not loaded yet
-    setTimeout(addSubmitButton, 100);
-    return;
-  }
-  
-  referenceNode.prepend(submitButton);
-}
-
 function openInfoMenu() {
     if (document.getElementById("sponsorBlockPopupContainer") != null) {
         //it's already added
@@ -738,15 +763,15 @@ function clearSponsorTimes() {
     //it can't update to this info yet
     closeInfoMenu();
 
-  let currentVideoID = getYouTubeVideoID(document.URL);
+    let currentVideoID = sponsorVideoID;
 
     let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
     chrome.storage.sync.get([sponsorTimeKey], function(result) {
         let sponsorTimes = result[sponsorTimeKey];
 
         if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-      let confirmMessage = "Are you sure you want to clear this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+            let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes);
-      confirmMessage += "\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."
+            confirmMessage += chrome.i18n.getMessage("confirmMSG")
             if(!confirm(confirmMessage)) return;
 
             //clear the sponsor times
@@ -756,185 +781,21 @@ 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
+//if skipNotice is null, it will not affect the UI
-function openSkipNotice(UUID){
+function vote(type, UUID, skipNotice) {
-  if (dontShowNotice) {
+    if (skipNotice != null) {
-    //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;
-
-  let logoElement = document.createElement("img");
-  logoElement.id = "sponsorSkipLogo" + UUID;
-  logoElement.className = "sponsorSkipLogo";
-  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
-
-  let noticeMessage = document.createElement("div");
-  noticeMessage.id = "sponsorSkipMessage" + UUID;
-  noticeMessage.classList.add("sponsorSkipMessage");
-  noticeMessage.classList.add("sponsorSkipObject");
-  noticeMessage.innerText = "Hey, you just skipped a sponsor!";
-  
-  let noticeInfo = document.createElement("p");
-  noticeInfo.id = "sponsorSkipInfo" + UUID;
-  noticeInfo.classList.add("sponsorSkipInfo");
-  noticeInfo.classList.add("sponsorSkipObject");
-  noticeInfo.innerText = "This message will disapear in 7 seconds";
-  
-  //thumbs up and down buttons
-  let voteButtonsContainer = document.createElement("div");
-  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.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");
-
-  let goBackButton = document.createElement("button");
-  goBackButton.innerText = "Go back";
-  goBackButton.className = "sponsorSkipButton";
-  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
-
-  let hideButton = document.createElement("button");
-  hideButton.innerText = "Dismiss";
-  hideButton.className = "sponsorSkipButton";
-  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
-
-  let dontShowAgainButton = document.createElement("button");
-  dontShowAgainButton.innerText = "Don't Show This Again";
-  dontShowAgainButton.className = "sponsorSkipDontShowButton";
-  dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
-
-  buttonContainer.appendChild(goBackButton);
-  buttonContainer.appendChild(hideButton);
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(dontShowAgainButton);
-
-  noticeElement.appendChild(logoElement);
-  noticeElement.appendChild(noticeMessage);
-  noticeElement.appendChild(noticeInfo);
-  noticeElement.appendChild(voteButtonsContainer);
-  noticeElement.appendChild(buttonContainer);
-
-  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) {
-  //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 = "Thanks for voting!"
-
-  //add extra info for voting
-  let thanksForVotingInfoText = document.createElement("p");
-  thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
-  thanksForVotingInfoText.innerText = "Hit go back to get to where you came from."
-
-  //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText);
-}
-
-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);
-  }
-
-  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 = "sponsorTimesInfoMessage" + UUID;
-  thanksForVotingText.className = "sponsorTimesInfoMessage";
-  thanksForVotingText.innerText = message;
-
-  //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
-}
-
-function vote(type, UUID) {
         //add loading info
-  addLoadingInfo("Loading...", UUID)
+        skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
+        skipNotice.resetNoticeInfoMessage.bind(skipNotice)();
+    }
 
     chrome.runtime.sendMessage({
         message: "submitVote",
@@ -943,37 +804,31 @@ function vote(type, UUID) {
     }, function(response) {
         if (response != undefined) {
             //see if it was a success or failure
+            if (skipNotice != null) {
                 if (response.successType == 1) {
                     //success
                     if (type == 0) {
-          afterDownvote(UUID);
+                        skipNotice.afterDownvote.bind(skipNotice)();
-        } else if (type == 1) {
-          closeSkipNotice(UUID);
                     }
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
-        addLoadingInfo("It seems you've already voted before", UUID)
+                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
+                    skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 } else if (response.successType == -1) {
                     if (response.statusCode == 502) {
-          addLoadingInfo("It seems the sever is down. Contact the dev immediately.", UUID)
+                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("serverDown"))
+                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                     } else {
                         //failure: unknown error
-          addLoadingInfo("A connection error has occured. Error code: " + response.statusCode, UUID)
+                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("connectionError") + response.statusCode);
+                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
+                    }
                 }
-        
             }
         }
     });
 }
 
-//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");
@@ -1011,15 +866,24 @@ function submitSponsorTimes() {
     //it can't update to this info yet
     closeInfoMenu();
 
-  let currentVideoID = getYouTubeVideoID(document.URL);
+    let currentVideoID = sponsorVideoID;
 
     let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
     chrome.storage.sync.get([sponsorTimeKey], function(result) {
         let sponsorTimes = result[sponsorTimeKey];
 
         if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-      let confirmMessage = "Are you sure you want to submit this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+            //check if a sponsor exceeds the duration of the video
-      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."
+            for (let i = 0; i < sponsorTimes.length; i++) {
+                if (sponsorTimes[i][1] > v.duration) {
+                    sponsorTimes[i][1] = v.duration;
+                }
+            }
+            //update sponsorTimes
+            chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+
+            let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes);
+            confirmMessage += "\n\n" + chrome.i18n.getMessage("confirmMSG");
             if(!confirm(confirmMessage)) return;
 
             sendSubmitMessage();
@@ -1035,7 +899,7 @@ function sendSubmitMessage(){
     document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
     document.getElementById("submitButton").style.animation = "rotate 1s 0s infinite";
 
-  let currentVideoID = getYouTubeVideoID(document.URL);
+    let currentVideoID = sponsorVideoID;
 
     chrome.runtime.sendMessage({
         message: "submitTimes",
@@ -1065,21 +929,14 @@ 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");
 
-        if(response.statusCode == 400) {
+                if([400,429,409,502].includes(response.statusCode)) {
-          alert("Server said this request was invalid");
+                    alert(chrome.i18n.getMessage(response.statusCode));
-        } else if(response.statusCode == 429) {
-          alert("You have submitted too many sponsor times for this one video, are you sure there are this many?");
-        } else if(response.statusCode == 409) {
-          alert("This has already been submitted before");
-        } else if(response.statusCode == 502) {
-          alert("It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode);
                 } else {
-          alert("There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode);
+                    alert(chrome.i18n.getMessage("connectionError") + response.statusCode);
                 }
             }
         }

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
-}

help/index_en.html

@@ -38,10 +38,11 @@
       
       <br/>
       <br/>
-      Whenever you skip a video, you will get a notice allowing you to vote on that submission. If it worked, upvote it! You can also vote in the popup.
+
+      Whenever you skip a video, you will get a notice report that submission. If the timing seems wrong, report it! You can also vote in the popup. The extension auto upvotes it if you don't report it, so make sure to report when necessary.
     </p>
 
-    <center><img height="120px" src="https://i.imgur.com/1M0WZ99.gif"></center>
+    <center><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></center>
 
     <h1>Submitting</h1>
 

manifest.json

@@ -1,16 +1,20 @@
 {
-  "name": "SponsorBlock for YouTube - Skip Sponsorships",
+  "name": "__MSG_fullName__",
-  "short_name": "SponsorBlock",
+  "short_name": "__MSG_Name__",
-  "version": "1.0.31",
+  "version": "1.1.4",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
+  "default_locale": "en",
+  "description": "__MSG_Description__",
   "content_scripts": [
     {
       "matches": [
-        "https://*.youtube.com/*"
+        "https://*.youtube.com/*",
+        "https://www.youtube-nocookie.com/embed/*"
       ],
       "all_frames": true,
       "js": [
         "config.js",
+        "utils/previewBar.js",
+        "utils/skipNotice.js",
         "utils.js",
         "content.js",
         "popup.js"
@@ -31,18 +35,19 @@
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
     "icons/downvote.png",
+    "icons/report.png",
+    "icons/close.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",
     "popup.html"
   ],
   "permissions": [
-    "tabs",
     "storage",
     "notifications",
     "https://sponsor.ajay.app/*"
   ],
   "browser_action": {
-    "default_title": "SponsorBlock",
+    "default_title": "__MSG_Name__",
     "default_popup": "popup.html"
   }, 
   "background": {

popup.css

@@ -51,6 +51,10 @@ h1.popupElement {
 	padding: 5px;
 }
 
+.discreteLink.popupElement {
+	color: black;
+}
+
 .recordingSubtitle.popupElement {
 	margin-bottom: 10px;
 }
@@ -80,8 +84,14 @@ h1.popupElement {
 
 .mediumLink.popupElement {
 	font-size: 15px;
-	padding-left: 15px;
+	margin-left: 25px;
-	padding-right: 15px;
+	margin-right: 25px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.tinyLink.popupElement {
+	font-size: 10px;
 	text-decoration: underline;
 	cursor: pointer;
 }

popup.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Set Page Color Popup</title>
+    <title>SponsorBlock Popup</title>
     <link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
     <link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
   </head>
@@ -73,6 +73,10 @@
                     sponsor segments.
                   </span>
               </span>
+
+              <div class="popupElement">
+                View the leaderboard <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">here</a>.
+              </div>
             </p>
 
             <p class="popupElement"> 
@@ -94,6 +98,8 @@
                 </div>
               </b>
 
+              <br/>
+      
               <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       
               <br/>
@@ -112,6 +118,35 @@
       
             </div>
 
+            <div id="setUsernameContainer" class="popupElement">
+              <br/>
+              <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">
+                <br/>
+
+                <h3>Set Username</h3>
+
+                <div id="setUsernameStatusContainer" style="display: none">
+                    <h2 id="setUsernameStatus"></h2>
+                </div>
+
+
+                <input id="usernameInput" hint="Username"></input>
+
+                <br/>
+                <br/>
+
+                <button id="submitUsername" class="warningButton popupElement">Submit Username</button>
+            </div>
+
             <div id="discordButtonContainer" class="popupElement" style="display: none">
               <br/>
 

popup.js

@@ -54,6 +54,14 @@ function runThePopup() {
     // submitTimesInfoMessage
     "submitTimesInfoMessageContainer",
     "submitTimesInfoMessage",
+    // Username
+    "setUsernameContainer",
+    "setUsernameButton",
+    "setUsernameStatusContainer",
+    "setUsernameStatus",
+    "setUsername",
+    "usernameInput",
+    "submitUsername",
     // More
     "submissionSection",
     "mainControls",
@@ -78,19 +86,12 @@ function runThePopup() {
     SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
     SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
     SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
+    SB.setUsernameButton.addEventListener("click", setUsernameButton);
+    SB.submitUsername.addEventListener("click", submitUsername);
     SB.optionsButton.addEventListener("click", openOptions);
     SB.reportAnIssue.addEventListener("click", reportAnIssue);
     SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
 
-  //setup error message languages
-  var EN_US = new Map();
-
-  EN_US.set(400, 'Server said this request was invalid"')
-     .set(429, 'You have submitted too many sponsor times for this one video, are you sure there are this many?')
-     .set(409, 'This has already been submitted before')
-     .set(502, 'It seems the server is down. Contact the dev to inform them.')
-     .set('Unknown', 'There was an error submitting your sponsor times, please try again later.');
-
     //if true, the button now selects the end time
     let startTimeChosen = false;
   
@@ -168,9 +169,9 @@ function runThePopup() {
     chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
         if (result.sponsorTimesContributed != undefined) {
             if (result.sponsorTimesContributed > 1) {
-        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
+                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
             } else {
-        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
+                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
             }
             SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
             SB.sponsorTimesContributionsContainer.style.display = "unset";
@@ -186,9 +187,9 @@ function runThePopup() {
                             let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
                             if (viewCount != 0) {
                                 if (viewCount > 1) {
-                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
+                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
                                 } else {
-                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
+                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
                                 }
 
                                 SB.sponsorTimesViewsDisplay.innerText = viewCount;
@@ -201,17 +202,24 @@ function runThePopup() {
         }
     });
   
-  
     chrome.tabs.query({
             active: true,
             currentWindow: true
-  }, loadTabData);
+    }, onTabs);
   
+    function onTabs(tabs) {
+	  chrome.tabs.sendMessage(tabs[0].id, {message: 'getVideoID'}, function(result) {
+        if (result != undefined && result.videoID) {
+			  currentVideoID = result.videoID;
+			  loadTabData(tabs);
+        } else if (result == undefined && chrome.runtime.lastError) {
+			  //this isn't a YouTube video then, or at least the content script is not loaded
+			  displayNoVideo();
+        }
+	  });
+    }
   
     function loadTabData(tabs) {
-    //set current videoID
-    currentVideoID = getYouTubeVideoID(tabs[0].url);
-  
         if (!currentVideoID) {
             //this isn't a YouTube video then
             displayNoVideo();
@@ -225,7 +233,7 @@ function runThePopup() {
             if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
                 if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
                     startTimeChosen = true;
-          SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
+                    SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
                 }
   
                 sponsorTimes = sponsorTimesStorage;
@@ -265,11 +273,11 @@ function runThePopup() {
             SB.loadingIndicator.innerHTML = "";
 
             if (request.found) {
-        SB.videoFound.innerHTML = "This video's sponsors are in the database!"
+                SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
 
                 displayDownloadedSponsorTimes(request);
             } else {
-        SB.videoFound.innerHTML = "No sponsors found"
+                SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
             }
         }
 
@@ -367,7 +375,7 @@ function runThePopup() {
     function displayDownloadedSponsorTimes(request) {
         if (request.sponsorTimes != undefined) {
             //set it to the message
-      if (SB.downloadedSponsorMessageTimes.innerText != "Channel Whitelisted!") {
+            if (SB.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
                 SB.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
             }
 
@@ -376,7 +384,14 @@ function runThePopup() {
             for (let i = 0; i < request.sponsorTimes.length; i++) {
                 let sponsorTimeButton = document.createElement("button");
                 sponsorTimeButton.className = "warningButton popupElement";
-        sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
+
+                let extraInfo = "";
+                if (request.hiddenSponsorTimes.includes(i)) {
+                    //this one is hidden
+                    extraInfo = " (hidden)";
+                }
+
+                sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]) + extraInfo;
         
                 let votingButtons = document.createElement("div");
   
@@ -465,8 +480,11 @@ function runThePopup() {
             let index = i;
             deleteButton.addEventListener("click", () => deleteSponsorTime(index));
   
-      let spacer = document.createElement("span");
+            let previewButton = document.createElement("span");
-      spacer.innerText = " ";
+            previewButton.id = "sponsorTimePreviewButton" + i;
+            previewButton.innerText = "Preview";
+            previewButton.className = "mediumLink popupElement";
+            previewButton.addEventListener("click", () => previewSponsorTime(index));
   
             let editButton = document.createElement("span");
             editButton.id = "sponsorTimeEditButton" + i;
@@ -488,20 +506,47 @@ function runThePopup() {
             }
   
             currentSponsorTimeContainer.innerText = currentSponsorTimeMessage;
-      currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
   
             sponsorTimesContainer.appendChild(currentSponsorTimeContainer);
             sponsorTimesContainer.appendChild(deleteButton);
   
             //only if it is a complete sponsor time
             if (sponsorTimes[i].length > 1) {
+                sponsorTimesContainer.appendChild(previewButton);
                 sponsorTimesContainer.appendChild(editButton);
+
+                currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
             }
         }
   
         return sponsorTimesContainer;
     }
 
+    function previewSponsorTime(index) {
+        let skipTime = sponsorTimes[index][0];
+
+        if (document.getElementById("startTimeMinutes" + index) != null) {
+            //edit is currently open, use that time
+
+            skipTime = getSponsorTimeEditTimes("startTime", index);
+
+            //save the edit
+            saveSponsorTimeEdit(index, false);
+        }
+
+        chrome.tabs.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            chrome.tabs.sendMessage(
+                tabs[0].id, {
+                    message: "skipToTime",
+                    time: skipTime - 2
+                }
+            );
+        });
+    }
+  
     function editSponsorTime(index) {
         if (document.getElementById("startTimeMinutes" + index) != null) {
             //already open
@@ -513,6 +558,13 @@ function runThePopup() {
   
         let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
   
+        //the button to set the current time
+        let startTimeNowButton = document.createElement("span");
+        startTimeNowButton.id = "startTimeNowButton" + index;
+        startTimeNowButton.innerText = "(Now)";
+        startTimeNowButton.className = "tinyLink popupElement";
+        startTimeNowButton.addEventListener("click", () => setEditTimeToCurrentTime("startTime", index));
+
         //get sponsor time minutes and seconds boxes
         let startTimeMinutes = document.createElement("input");
         startTimeMinutes.id = "startTimeMinutes" + index;
@@ -542,6 +594,13 @@ function runThePopup() {
         endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
         endTimeSeconds.style.width = "60px";
 
+        //the button to set the current time
+        let endTimeNowButton = document.createElement("span");
+        endTimeNowButton.id = "endTimeNowButton" + index;
+        endTimeNowButton.innerText = "(Now)";
+        endTimeNowButton.className = "tinyLink popupElement";
+        endTimeNowButton.addEventListener("click", () => setEditTimeToCurrentTime("endTime", index));
+  
         let colonText = document.createElement("span");
         colonText.innerText = ":";
   
@@ -553,6 +612,7 @@ function runThePopup() {
             sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
         }
   
+        sponsorTimeContainer.appendChild(startTimeNowButton);
         sponsorTimeContainer.appendChild(startTimeMinutes);
         sponsorTimeContainer.appendChild(colonText);
         sponsorTimeContainer.appendChild(startTimeSeconds);
@@ -560,6 +620,7 @@ function runThePopup() {
         sponsorTimeContainer.appendChild(endTimeMinutes);
         sponsorTimeContainer.appendChild(colonText);
         sponsorTimeContainer.appendChild(endTimeSeconds);
+        sponsorTimeContainer.appendChild(endTimeNowButton);
   
         //add save button and remove edit button
         let saveButton = document.createElement("span");
@@ -574,15 +635,36 @@ function runThePopup() {
         sponsorTimesContainer.replaceChild(saveButton, editButton);
     }
 
-  function saveSponsorTimeEdit(index) {
+    function setEditTimeToCurrentTime(idStartName, index) {
-    let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
+        chrome.tabs.query({
-    let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            chrome.tabs.sendMessage(
+                tabs[0].id,
+                {message: "getCurrentTime"},
+                function (response) {
+                    let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
+                    let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
     
-    let endTimeMinutes = document.getElementById("endTimeMinutes" + index);
+                    minutes.value = getTimeInMinutes(response.currentTime);
-    let endTimeSeconds = document.getElementById("endTimeSeconds" + index);
+                    seconds.value = getTimeInFormattedSeconds(response.currentTime);
+                });
+        });
+    }
 
-    sponsorTimes[index][0] = parseInt(startTimeMinutes.value) * 60 + parseFloat(startTimeSeconds.value);
+    //id start name is whether it is the startTime or endTime
-    sponsorTimes[index][1] = parseInt(endTimeMinutes.value) * 60 + parseFloat(endTimeSeconds.value);
+    //gives back the time in seconds
+    function getSponsorTimeEditTimes(idStartName, index) {
+        let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
+        let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
+
+        return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
+    }
+  
+    function saveSponsorTimeEdit(index, closeEditMode = true) {
+        sponsorTimes[index][0] = getSponsorTimeEditTimes("startTime", index);
+        sponsorTimes[index][1] = getSponsorTimeEditTimes("endTime", index);
   
         //save this
         let sponsorTimeKey = "sponsorTimes" + currentVideoID;
@@ -598,10 +680,12 @@ function runThePopup() {
             });
         });
   
+        if (closeEditMode) {
             displaySponsorTimes();
 
             showSubmitTimesIfNecessary();
         }
+    }
   
     //deletes the sponsor time submitted at an index
     function deleteSponsorTime(index) {
@@ -698,14 +782,9 @@ function runThePopup() {
         resetStartTimeChosen();
     }
   
-  function getErrorMessage(lang, statusCode) {
-    if(lang.has(statusCode)) return lang.get(statusCode);
-    return lang.get('Unknown').concat(" Error code: ") + statusCode;
-  } 
-
     function submitTimes() {
         //make info message say loading
-    SB.submitTimesInfoMessage.innerText = "Loading...";
+        SB.submitTimesInfoMessage.innerText = chrome.i18n.getMessage("Loading");
         SB.submitTimesInfoMessageContainer.style.display = "unset";
   
         if (sponsorTimes.length > 0) {
@@ -720,7 +799,13 @@ function runThePopup() {
 
                         clearTimes();
                     } else {
-            let errorMessage = getErrorMessage(EN_US, 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";
@@ -887,7 +972,7 @@ function runThePopup() {
         //update startTimeChosen letiable
         if (!startTimeChosen) {
             startTimeChosen = true;
-    SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
+        SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
         } else {
             resetStartTimeChosen();
         }
@@ -896,7 +981,7 @@ function runThePopup() {
     //set it to false
     function resetStartTimeChosen() {
         startTimeChosen = false;
-    SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
+        SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorStart");
     }
   
     //hides and shows the submit times button when needed
@@ -911,16 +996,77 @@ function runThePopup() {
         }
     }
   
-  //make the options div visisble
+    //make the options div visible
     function openOptions() {
         document.getElementById("optionsButtonContainer").style.display = "none";
         document.getElementById("options").style.display = "unset";
     }
 
+    //make the options username setting option visible
+    function setUsernameButton() {
+        //get the userID
+        chrome.storage.sync.get(["userID"], function(result) {
+            //get username from the server
+            sendRequestToServer("GET", "/api/getUsername?userID=" + result.userID, function (xmlhttp, error) {
+                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+                    SB.usernameInput.value = JSON.parse(xmlhttp.responseText).userName;
+
+                    SB.submitUsername.style.display = "unset";
+                    SB.usernameInput.style.display = "unset";
+
+                    SB.setUsernameContainer.style.display = "none";
+                    SB.setUsername.style.display = "unset";
+                    
+                    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;
+                }
+            });
+        });
+    }
+
+    //submit the new username
+    function submitUsername() {
+        //add loading indicator
+        SB.setUsernameStatusContainer.style.display = "unset";
+        SB.setUsernameStatus.innerText = "Loading...";
+
+        //get the userID
+        chrome.storage.sync.get(["userID"], function(result) {
+            sendRequestToServer("POST", "/api/setUsername?userID=" + result.userID + "&username=" + SB.usernameInput.value, function (xmlhttp, error) {
+                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+                    //submitted
+                    SB.submitUsername.style.display = "none";
+                    SB.usernameInput.style.display = "none";
+
+                    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 {
+                        errorMessage = chrome.i18n.getMessage("connectionError") + xmlhttp.status;
+                    }
+
+                    SB.setUsernameStatus.innerText = errorMessage;
+                }
+            });
+        });
+
+
+        SB.setUsernameContainer.style.display = "none";
+        SB.setUsername.style.display = "unset";
+    }
+  
     //this is not a YouTube video page
     function displayNoVideo() {
-    document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " +
+        document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
-        "If you know this is a YouTube tab, close this popup and open it again.";
     }
   
     function reportAnIssue() {
@@ -957,16 +1103,16 @@ function runThePopup() {
                 //see if it was a success or failure
                 if (response.successType == 1) {
                     //success
-          addVoteMessage("Thanks for voting!", UUID)
+                    addVoteMessage(chrome.i18n.getMessage("voted"), UUID)
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
-          addVoteMessage("You have already voted this way before.", UUID)
+                    addVoteMessage(chrome.i18n.getMessage("voteFail"), UUID)
                 } else if (response.successType == -1) {
                     if (response.statusCode == 502) {
-            addVoteMessage("It seems the sever is down. Contact the dev immediately.", UUID)
+                        addVoteMessage(chrome.i18n.getMessage("serverDown"), UUID)
                     } else {
                         //failure: unknown error
-            addVoteMessage("A connection error has occured. Error code: " + response.statusCode, UUID)
+                        addVoteMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID)
                     }
                 }
             }
@@ -1132,7 +1278,7 @@ function runThePopup() {
 
 if (chrome.tabs != undefined) {
     //add the width restriction (because Firefox)
-  document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 300 }', 0);
+    document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 325 }', 0);
 
     //this means it is actually opened in the popup
     runThePopup();

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
@@ -23,15 +37,5 @@ function getYouTubeVideoID(url) {
         return false;
       }
     }
-}
+	return false;
-
-//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

@@ -0,0 +1,90 @@
+/*
+	This is based on code from VideoSegments.
+	https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
+*/
+
+'use strict';
+
+let barTypes = {
+	"undefined": {
+		color: "#00d400",
+		opacity: "0.5"
+	},
+	"sponsor": {
+		color: "#00d400",
+		opacity: "0.5"
+	},
+	"previewSponsor": {
+		color: "#0000d4",
+		opacity: "0.5"
+	}
+};
+
+class PreviewBar {
+	constructor(parent) {
+		this.container = document.createElement('ul');
+		this.container.id = 'previewbar';
+		this.parent = parent;
+		this.bars = []
+
+		this.updatePosition();
+	}
+
+	updatePosition() {
+		//below the seek bar
+		// this.parent.insertAdjacentElement("afterEnd", this.container);
+		
+		//on the seek bar
+		this.parent.insertAdjacentElement("afterBegin", this.container);
+	}
+
+	updateColor(segment, color, opacity) {
+		let bars = document.querySelectorAll('[data-vs-segment-type=' + segment + ']');
+		for (let bar of bars) {
+			bar.style.backgroundColor = color;
+			bar.style.opacity = opacity;
+		}
+	}
+
+	set(timestamps, types, duration) {
+		while (this.container.firstChild) {
+			this.container.removeChild(this.container.firstChild);
+		}
+
+		if (!timestamps || !types) {
+			return;
+		}
+
+		// to avoid rounding error resulting in width more than 100% 
+		duration = Math.floor(duration * 100) / 100;
+		let width;
+		for (let i = 0; i < timestamps.length; i++) {
+			width = (timestamps[i][1] - timestamps[i][0]) / duration * 100;
+			width = Math.floor(width * 100) / 100;
+
+			let bar = this.createBar();
+			bar.setAttribute('data-vs-segment-type', types[i]);
+
+			bar.style.backgroundColor = barTypes[types[i]].color;
+			bar.style.opacity = barTypes[types[i]].opacity;
+			bar.style.width = width + '%';
+			bar.style.left = (timestamps[i][0] / duration * 100) + "%";
+			bar.style.position = "absolute"
+
+			this.container.insertAdjacentElement('beforeEnd', bar);
+			this.bars[i] = bar;
+		}
+	}
+
+	createBar() {
+		let bar = document.createElement('li');
+		bar.classList.add('previewbar');
+		bar.innerHTML = '&nbsp;';
+		return bar;
+	}
+
+	remove() {
+		this.container.remove();
+		this.container = undefined;
+	}
+}

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);
+    }
+
+}