aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2019-07-31 23:22:43 -0400
committerAjay Ramachandran <[email protected]>2019-07-31 23:22:43 -0400
commit2667838937c512ad508d807bd5b4de5722345257 (patch)
tree0b7cb7a50b3f8b83b34af7bc3873216a42bbc722
parenta5ec7b246653716fc9d482bbd0d8e5f84e110243 (diff)
parentcbdb715fac5efe063fcd6c2ca613386001d8c0d7 (diff)
downloadSponsorBlock-2667838937c512ad508d807bd5b4de5722345257.tar.gz
SponsorBlock-2667838937c512ad508d807bd5b4de5722345257.zip
Merge branch 'experimental' of https://github.com/ajayyy/SponsorBlock into patch-7
# Conflicts: # popup.js
-rw-r--r--background.js22
-rw-r--r--content.js62
-rw-r--r--firefox_manifest.json10
-rw-r--r--help/index.html122
-rw-r--r--help/styles.css176
-rw-r--r--manifest.json12
-rw-r--r--popup.css101
-rw-r--r--popup.html278
8 files changed, 583 insertions, 200 deletions
diff --git a/background.js b/background.js
index adb86553..96e5a309 100644
--- a/background.js
+++ b/background.js
@@ -3,6 +3,9 @@ var previousVideoID = null
//the id of this user, randomly generated once per install
var userID = null;
+//the last video id loaded, to make sure it is a video id change
+var sponsorVideoID = null;
+
//when a new tab is highlighted
chrome.tabs.onActivated.addListener(
function(activeInfo) {
@@ -54,6 +57,19 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
}
});
+//add help page on install
+chrome.runtime.onInstalled.addListener(function (object) {
+ chrome.storage.sync.get(["shownInstallPage"], function(result) {
+ let shownInstallPage = result.shownInstallPage;
+ if (shownInstallPage == undefined || !shownInstallPage) {
+ //open up the install page
+ chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+
+ //save that this happened
+ chrome.storage.sync.set({shownInstallPage: true});
+ }
+ });
+});
//gets the sponsor times from memory
function getSponsorTimes(videoID, callback) {
@@ -162,6 +178,12 @@ function videoIDChange(currentVideoID, tabId) {
id: currentVideoID
});
+ //not a url change
+ if (sponsorVideoID == currentVideoID){
+ return;
+ }
+ sponsorVideoID = currentVideoID;
+
//warn them if they had unsubmitted times
if (previousVideoID != null) {
//get the sponsor times from storage
diff --git a/content.js b/content.js
index 53347e07..c66e6937 100644
--- a/content.js
+++ b/content.js
@@ -59,8 +59,10 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
}
});
-chrome.runtime.onMessage.addListener( // Detect URL Changes
- function(request, sender, sendResponse) {
+//get messages from the background script and the popup
+chrome.runtime.onMessage.addListener(messageListener);
+
+function messageListener(request, sender, sendResponse) {
//message from background script
if (request.message == "ytvideoid") {
videoIDChange(request.id);
@@ -118,7 +120,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
if (request.message == "trackViewCount") {
trackViewCount = request.value;
}
-});
+}
//check for hotkey pressed
document.onkeydown = function(e){
@@ -474,31 +476,43 @@ function openInfoMenu() {
//hide info button
document.getElementById("infoButton").style.display = "none";
- let popup = document.createElement("div");
- popup.id = "sponsorBlockPopupContainer";
-
- let popupFrame = document.createElement("iframe");
- popupFrame.id = "sponsorBlockPopupFrame"
- popupFrame.src = chrome.extension.getURL("popup.html");
- popupFrame.className = "popup";
+ sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) {
+ if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+ var popup = document.createElement("div");
+ popup.id = "sponsorBlockPopupContainer";
+ popup.innerHTML = xmlhttp.responseText
+
+ //close button
+ let closeButton = document.createElement("div");
+ closeButton.innerText = "Close Popup";
+ closeButton.classList = "smallLink";
+ closeButton.setAttribute("align", "center");
+ closeButton.addEventListener("click", closeInfoMenu);
+
+ //add the close button
+ popup.prepend(closeButton);
+
+ let parentNode = document.getElementById("secondary");
+ if (parentNode == null) {
+ //old youtube theme
+ parentNode = document.getElementById("watch7-sidebar-contents");
+ }
- //close button
- let closeButton = document.createElement("div");
- closeButton.innerText = "Close Popup";
- closeButton.classList = "smallLink";
- closeButton.setAttribute("align", "center");
- closeButton.addEventListener("click", closeInfoMenu);
+ //make the logo source not 404
+ //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
+ let logo = popup.querySelector("#sponsorBlockPopupLogo");
+ logo.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
- popup.appendChild(closeButton);
- popup.appendChild(popupFrame);
+ //remove the style sheet and font that are not necessary
+ popup.querySelector("#sponorBlockPopupFont").remove();
+ popup.querySelector("#sponorBlockStyleSheet").remove();
- let parentNode = document.getElementById("secondary");
- if (parentNode == null) {
- //old youtube theme
- parentNode = document.getElementById("watch7-sidebar-contents");
- }
+ parentNode.insertBefore(popup, parentNode.firstChild);
- parentNode.prepend(popup);
+ //run the popup init script
+ runThePopup();
+ }
+ });
}
function closeInfoMenu() {
diff --git a/firefox_manifest.json b/firefox_manifest.json
index d8e2296b..e503a8e8 100644
--- a/firefox_manifest.json
+++ b/firefox_manifest.json
@@ -10,11 +10,13 @@
],
"js": [
"config.js",
- "content.js"
+ "content.js",
+ "popup.js"
],
"css": [
"content.css",
- "./libs/Source+Sans+Pro.css"
+ "./libs/Source+Sans+Pro.css",
+ "popup.css"
]
}
],
@@ -29,7 +31,9 @@
"icons/downvote.png",
"icons/PlayerInfoIconSponsorBlocker256px.png",
"icons/PlayerDeleteIconSponsorBlocker256px.png",
- "popup.html"
+ "popup.html",
+ "help/index.html",
+ "help/style.css"
],
"permissions": [
"tabs",
diff --git a/help/index.html b/help/index.html
new file mode 100644
index 00000000..61e4e6ad
--- /dev/null
+++ b/help/index.html
@@ -0,0 +1,122 @@
+<head>
+ <title> SponsorBlock </title>
+
+ <link href="styles.css" rel="stylesheet"/>
+</head>
+
+<body>
+
+ <div id="title">
+ <img src="https://github.com/ajayyy/SponsorBlock/raw/master/icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+ SponsorBlock
+ </div>
+
+ <center>
+
+ <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
+
+ <p>
+ Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
+ </p>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImage">
+ <a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
+ </span>
+
+ Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
+ </p>
+
+ <h1>How skipping works</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLarge">
+ <img src="https://i.imgur.com/caf5Bju.png">
+ </span>
+
+ Videos will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are.
+
+ <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.
+ </p>
+
+ <center><img height="120px" src="https://i.imgur.com/1M0WZ99.gif"></center>
+
+ <h1>Submitting</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLargeRight">
+ <img src="https://i.imgur.com/A1ilk6x.gif">
+ </span>
+
+ Submitting can either be done in the popup by hitting the "Sponsorship Starts Now" button or in the video player with the buttons on the player.
+
+ <br/>
+ <br/>
+
+ Clicking the play button indicated the start of a sponsorship section and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete.
+ </p>
+
+ <h1>Editing</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLarge">
+ <img src="https://i.imgur.com/DZHqbsx.gif">
+ </span>
+
+ If you messed up, you can edit or delete your sponsor times in the popup or in the info menu (by hitting the info icon).
+
+ </p>
+
+ <h1>This is too slow</h1>
+
+ <p>
+ There are hotkeys if you want to use them. You must be focused on the YouTube player to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the appostrophe to submit.
+ </p>
+
+ <h1>I hate these buttons, they are so ugly</h1>
+
+ <p>
+ All player buttons can be hidden in the options.
+ </p>
+
+ <h1>Can I get a copy of the Database? What happens if you disappear?</h1>
+
+ <p>
+ The database is public and available at <a href="https://sponsor.ajay.app/database.db">https://sponsor.ajay.app/database.db</a>. The source code is freely available. So, even if something happens to me, your submissions are not lost.
+ </p>
+
+ <h1>News and how it is made</h1>
+
+ <p>
+ See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
+ </p>
+
+ <h1>I want more features!</h1>
+
+ <p>
+ Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.
+ </p>
+
+ <h1>Where can I get the source code</h1>
+
+ <h4 style="display: inline">Client:</h4>
+ <!-- Github logo -->
+ <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+ <h4 style="display: inline; padding-left: 20px">Server:</h4>
+ <!-- Github logo -->
+ <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+ <h1>Credit</h1>
+
+ <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
+
+ <p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+
+ <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+
+ </center>
+
+</body> \ No newline at end of file
diff --git a/help/styles.css b/help/styles.css
new file mode 100644
index 00000000..338f1810
--- /dev/null
+++ b/help/styles.css
@@ -0,0 +1,176 @@
+:not(.hljs-keyword):not(.hljs-comment):not(.hljs-number):not(.hljs-string):not(pre):not(code) {
+ background-color: #333333;
+}
+
+.projectPreview {
+ position: relative;
+}
+
+.projectPreviewImage {
+ position: absolute;
+ left: -90;
+ width: 80;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+ position: absolute;
+ left: -210;
+ width: 200;
+ top: 50%;
+ transform: translateY(-20%);
+}
+
+.projectPreviewImageLargeRight {
+ position: absolute;
+ right: -210;
+ width: 200;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.createdBy {
+ font-size: 14px;
+ text-align: center;
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+
+#title {
+ background-color: #636363;
+
+ text-align: center;
+ vertical-align: middle;
+
+ font-family: sans-serif;
+ font-size: 50;
+ color: #212121;
+
+ /* height: 100; */
+
+ padding: 20;
+
+ text-decoration: none;
+
+ transition: font-size 1s;
+}
+
+#title:hover {
+ font-size: 60;
+
+ transition: font-size 1s;
+}
+
+.subtitle {
+ font-family: sans-serif;
+ font-size: 40;
+ color: #dad8d8;
+
+ padding-top: 10;
+
+ transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+ font-size: 45;
+
+ transition: font-size 0.4s;
+}
+
+.profilepic {
+ background-color: #636363 !important;
+ vertical-align: middle;
+}
+
+a {
+ text-decoration: underline;
+ color: inherit;
+}
+
+.link {
+ padding: 20;
+
+ height: 80px;
+
+ transition: height 0.2s;
+}
+
+.link:hover {
+ height: 95px;
+
+ transition: height 0.2s;
+}
+
+#contact,.smalllink {
+ font-family: sans-serif;
+ font-size: 25;
+ color: #e8e8e8;
+
+ text-align: center;
+
+ padding: 10;
+}
+
+#contact {
+ text-decoration: none;
+}
+
+p,li {
+ font-family: sans-serif;
+ font-size: 20;
+ color: #c4c4c4;
+
+ padding: 10;
+}
+
+p,li,code,a {
+ max-width: 60%;
+ text-align: left;
+ overflow-wrap: break-word;
+}
+
+@media screen and (orientation:portrait) {
+ p,li,code,a {
+ max-width: 100%;
+ }
+
+ .projectPreviewImage {
+ position: unset;
+ width: 130;
+ display: block;
+ margin: auto;
+ transform: none;
+ }
+}
+
+.previewImage {
+ max-height: 200px;
+}
+
+img {
+ max-width: 100%;
+
+ text-align: center;
+}
+
+#recentPostTitle {
+ font-family: sans-serif;
+ font-size: 30;
+ color: #dad8d8;
+}
+
+#recentPostDate {
+ font-family: sans-serif;
+ font-size: 15;
+ color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+ font-family: sans-serif;
+ color: #dad8d8;
+}
+
+svg {
+ text-decoration: none;
+} \ No newline at end of file
diff --git a/manifest.json b/manifest.json
index b683f4d7..60a434a7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"name": "SponsorBlock for YouTube - Skip Sponsorships",
"short_name": "SponsorBlock",
- "version": "1.0.16",
+ "version": "1.0.23",
"description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
"content_scripts": [
{
@@ -10,11 +10,13 @@
],
"js": [
"config.js",
- "content.js"
+ "content.js",
+ "popup.js"
],
"css": [
"content.css",
- "./libs/Source+Sans+Pro.css"
+ "./libs/Source+Sans+Pro.css",
+ "popup.css"
]
}
],
@@ -29,7 +31,9 @@
"icons/downvote.png",
"icons/PlayerInfoIconSponsorBlocker256px.png",
"icons/PlayerDeleteIconSponsorBlocker256px.png",
- "popup.html"
+ "popup.html",
+ "help/index.html",
+ "help/style.css"
],
"permissions": [
"tabs",
diff --git a/popup.css b/popup.css
index a33f408a..d1efc61f 100644
--- a/popup.css
+++ b/popup.css
@@ -1,45 +1,84 @@
-* {
+/* reset some properties to default (youtube messes with them */
+p.popupElement {
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+}
+
+h1.popupElement {
+ margin-block-start: 0.67em;
+ margin-block-end: 0.67em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ font-weight: bold;
+}
+
+h2.popupElement {
+ margin-block-start: 0.83em;
+ margin-block-end: 0.83em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ font-weight: bold;
+}
+
+h3.popupElement {
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ font-weight: bold;
+}
+
+sub.popupElement {
+ font-size: smaller;
+}
+/* end reset */
+
+.popupElement {
font-family: 'Source Sans Pro', sans-serif;
+
+ color: black;
}
-h1 {
+h1.popupElement {
margin-top: 0px;
}
-body {
- font-size: 14px;
- min-width: 300px;
- background-color: #ffd9d9;
+.popupBody {
+ font-size: 14px;
+ background-color: #ffd9d9;
+ padding: 5px;
}
-.recordingSubtitle {
+.recordingSubtitle.popupElement {
margin-bottom: 10px;
}
-.voteButton {
+.voteButton.popupElement {
height: 32px;
margin-right: 15px;
cursor: pointer;
}
-.voteButton:hover {
+.voteButton:hover.popupElement {
filter: brightness(80%);
}
-#discordButtonContainer {
+#discordButtonContainer.popupElement {
font-size: 12px;
}
-.sponsorTime {
+.sponsorTime.popupElement {
font-size: 20px;
}
-.smallLink {
+.smallLink.popupElement {
font-size: 10px;
text-decoration: underline;
cursor: pointer;
}
-.mediumLink {
+.mediumLink.popupElement {
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
@@ -47,8 +86,8 @@ body {
cursor: pointer;
}
-.greenButton {
- background-color:#ec1c1c;
+.greenButton.popupElement {
+ background-color:#ec1c1c;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
@@ -61,19 +100,19 @@ body {
text-decoration:none;
text-shadow:0px 0px 0px #662727;
}
-.greenButton:hover {
+.greenButton:hover.popupElement {
background-color:#bf2a2a;
}
-.greenButton:focus {
+.greenButton:focus.popupElement {
outline: none;
background-color:#bf2a2a;
}
-.greenButton:active {
+.greenButton:active.popupElement {
position:relative;
top:1px;
}
-.dangerButton {
+.dangerButton.popupElement {
-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
box-shadow:inset 0px 1px 0px 0px #cf866c;
@@ -90,19 +129,19 @@ body {
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}
-.dangerButton:hover {
+.dangerButton:hover.popupElement {
background-color:#bc3315;
}
-.dangerButton:focus {
+.dangerButton:focus.popupElement {
outline: none;
background-color:#bc3315;
}
-.dangerButton:active {
+.dangerButton:active.popupElement {
position:relative;
top:1px;
}
-.warningButton {
+.warningButton.popupElement {
-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
-webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
box-shadow:inset 0px 1px 0px 0px #cfbd6c;
@@ -119,19 +158,19 @@ body {
text-decoration:none;
text-shadow:0px 1px 0px #856829;
}
-.warningButton:hover {
+.warningButton:hover.popupElement {
background-color:#bc8215;
}
-.warningButton:focus {
+.warningButton:focus.popupElement {
outline: none;
background-color:#bc8215;
}
-.warningButton:active {
+.warningButton:active.popupElement {
position:relative;
top:1px;
}
-.smallButton {
+.smallButton.popupElement {
background-color:#f9902d;
-moz-border-radius:3px;
-webkit-border-radius:3px;
@@ -144,14 +183,14 @@ body {
padding:6px 10px;
text-decoration:none;
}
-.smallButton:hover {
+.smallButton:hover.popupElement {
background-color:#fa9806;
}
-.smallButton:focus {
+.smallButton:focus.popupElement {
outline: none;
background-color:#fa9806;
}
-.smallButton:active {
+.smallButton:active.popupElement {
position:relative;
top:1px;
-}
+} \ No newline at end of file
diff --git a/popup.html b/popup.html
index db0a1cdb..acdd455c 100644
--- a/popup.html
+++ b/popup.html
@@ -1,182 +1,184 @@
<html>
<head>
<title>Set Page Color Popup</title>
- <link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
- <link rel="stylesheet" type="text/css" href="popup.css"/>
+ <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>
- <center>
- <div id="app">
- <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
+ <body class="popupBody">
+ <center>
+ <div id="app" class="popupBody">
+ <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
- <h1>SponsorBlock</h1>
+ <h1 class="popupElement">SponsorBlock</h1>
- <!-- Loading text -->
- <p id="loadingIndicator">Loading...</p>
+ <!-- Loading text -->
+ <p id="loadingIndicator" class="popupElement">Loading...</p>
- <!-- Hidden until loading complete -->
- <div id="mainControls" class="main" style="display: none">
- <!-- If the video was found in the database -->
- <div id="videoFound">
-
- </div>
-
- <div id="downloadedSponsorMessageTimes">
-
- </div>
-
- <br/>
-
- <button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button>
-
- <div id="issueReporterContainer" style="display: none">
-
- <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
+ <!-- Hidden until loading complete -->
+ <div id="mainControls" class="main popupElement" style="display: none">
+ <!-- If the video was found in the database -->
+ <div id="videoFound">
+
+ </div>
- <div id="issueReporterTimeButtons">
+ <div id="downloadedSponsorMessageTimes" class="popupElement">
</div>
- </div>
+ <br/>
- <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
-
- <p>
- <span id=sponsorTimesContributionsContainer style="display: none">
- So far, you've submitted
- <span id="sponsorTimesContributionsDisplay">
- 0
- </span>
- <span id="sponsorTimesContributionsDisplayEndWord">
- sponsors.
- </span>
- </span>
-
- <span id=sponsorTimesViewsContainer style="display: none">
- You have saved people from
- <span id="sponsorTimesViewsDisplay">
- 0
- </span>
- <span id="sponsorTimesViewsDisplayEndWord">
- sponsor segments.
- </span>
- </span>
- </p>
-
- <p>
- Click the button below when the sponsorship starts and ends to record and
- submit it to the database.
- </p>
-
- <div>
- <button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
- </div>
+ <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
- <sub>Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
-
- <div id="submissionSection" style="display: none">
- <h3>Latest Sponsor Message Times Chosen</h3>
- <b>
- <div id="sponsorMessageTimes">
-
- </div>
- </b>
-
- <button id="clearTimes" class="smallButton">Clear Times</button>
-
- <br/>
- <br/>
+ <div id="issueReporterContainer" class="popupElement" style="display: none">
- <div id="submitTimesContainer" style="display: none">
- <button id="submitTimes" class="smallButton">Submit Times</button>
+ <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
- <div id="submitTimesInfoMessageContainer" style="display: none">
- <h3 id="submitTimesInfoMessage">
+ <div id="issueReporterTimeButtons" class="popupElement">
- </h3>
</div>
</div>
-
- </div>
- <div id="discordButtonContainer" style="display: none">
- <br/>
+ <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
+
+ <p class="popupElement">
+ <span id=sponsorTimesContributionsContainer class="popupElement" style="display: none">
+ So far, you've submitted
+ <span id="sponsorTimesContributionsDisplay" class="popupElement">
+ 0
+ </span>
+ <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
+ sponsors.
+ </span>
+ </span>
+
+ <span id=sponsorTimesViewsContainer class="popupElement" style="display: none">
+ You have saved people from
+ <span id="sponsorTimesViewsDisplay" class="popupElement">
+ 0
+ </span>
+ <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
+ sponsor segments.
+ </span>
+ </span>
+ </p>
+
+ <p class="popupElement">
+ Click the button below when the sponsorship starts and ends to record and
+ submit it to the database.
+ </p>
+
+ <div>
+ <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
+ </div>
- <a href="https://discord.gg/QnmVMpU" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
+ <sub class="popupElement">Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
+
+ <div id="submissionSection" class="popupElement" style="display: none">
+ <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
+ <b>
+ <div id="sponsorMessageTimes" class="popupElement">
+
+ </div>
+ </b>
+
+ <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
+
+ <br/>
+ <br/>
- <br/>
+ <div id="submitTimesContainer" class="popupElement" style="display: none">
+ <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
- Come join the official discord server to give suggestions and feedback!
+ <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
+ <h3 id="submitTimesInfoMessage" class="popupElement">
- <br/>
+ </h3>
+ </div>
- <span id="hideDiscordButton" class="smallLink">Hide this</span>
- </div>
+ </div>
+
+ </div>
- <div id="optionsButtonContainer">
- <br/>
+ <div id="discordButtonContainer" class="popupElement" style="display: none">
<br/>
-
- <button id="optionsButton" class="dangerButton">Options</button>
- </div>
- <div id="options" style="display: none">
- <br/>
+ <a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
- <h3>Options</h3>
-
- <button id="hideVideoPlayerControls" class="warningButton">Hide Buttons On YouTube Player</button>
- <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Buttons On YouTube Player</button>
<br/>
- <sub>
- This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some
- people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears,
- use the button that appears on the notice saying "Don't show this again". You can always enable these settings again
- later.
- </sub>
- <br/>
- <br/>
+ Come join the official discord server to give suggestions and feedback!
- <button id="hideInfoButtonPlayerControls" class="warningButton">Hide Info Button On YouTube Player</button>
- <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton">Show Info Button On YouTube Player</button>
<br/>
- <sub>
- This is the button that opens up a popup in the YouTube page.
- </sub>
- <br/>
- <br/>
+ <span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
+ </div>
- <button id="hideDeleteButtonPlayerControls" class="warningButton">Hide Delete Button On YouTube Player</button>
- <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton">Show Delete Button On YouTube Player</button>
- <br/>
- <sub>
- This is the button that allows you to clear all sponsors on the YouTube player.
- </sub>
+ <div id="optionsButtonContainer" class="popupElement">
+ <br/>
+ <br/>
+
+ <button id="optionsButton" class="dangerButton popupElement">Options</button>
+ </div>
- <br/>
- <br/>
+ <div id="options" class="popupElement" style="display: none">
+ <br/>
- <button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button>
- <button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button>
- <br/>
- <sub>
- This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
- used as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message
- to the server each time you skip a sponsor. Hopefully most people don't change this setting so that the view numbers
- are accurate. :)
- </sub>
-
- <br/>
- <br/>
+ <h3>Options</h3>
+
+ <button id="hideVideoPlayerControls" class="warningButton popupElement">Hide Buttons On YouTube Player</button>
+ <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
+ <br/>
+ <sub class="popupElement">
+ This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some
+ people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears,
+ use the button that appears on the notice saying "Don't show this again". You can always enable these settings again
+ later.
+ </sub>
+
+ <br/>
+ <br/>
+
+ <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">Hide Info Button On YouTube Player</button>
+ <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Info Button On YouTube Player</button>
+ <br/>
+ <sub class="popupElement">
+ This is the button that opens up a popup in the YouTube page.
+ </sub>
+
+ <br/>
+ <br/>
+
+ <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">Hide Delete Button On YouTube Player</button>
+ <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Delete Button On YouTube Player</button>
+ <br/>
+ <sub class="popupElement">
+ This is the button that allows you to clear all sponsors on the YouTube player.
+ </sub>
+
+ <br/>
+ <br/>
+
+ <button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
+ <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
+ <br/>
+ <sub class="popupElement">
+ This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
+ used as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message
+ to the server each time you skip a sponsor. Hopefully most people don't change this setting so that the view numbers
+ are accurate. :)
+ </sub>
+
+ <br/>
+ <br/>
- <button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button>
+ <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">Show Notice Again</button>
+ </div>
</div>
</div>
- </div>
- </center>
+ </center>
+ </body>
<!-- Scripts that need to load after the html -->
<script src="config.js"></script>