Remade the popup menu to support Firefox and not use IFrames.

This commit is contained in:
Ajay Ramachandran
2019-07-30 13:27:20 -04:00
parent 6ff461fa86
commit b0929e2431
6 changed files with 1174 additions and 1089 deletions

View File

@@ -59,8 +59,10 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
} }
}); });
chrome.runtime.onMessage.addListener( // Detect URL Changes //get messages from the background script and the popup
function(request, sender, sendResponse) { chrome.runtime.onMessage.addListener(messageListener);
function messageListener(request, sender, sendResponse) {
//message from background script //message from background script
if (request.message == "ytvideoid") { if (request.message == "ytvideoid") {
videoIDChange(request.id); videoIDChange(request.id);
@@ -118,7 +120,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
if (request.message == "trackViewCount") { if (request.message == "trackViewCount") {
trackViewCount = request.value; trackViewCount = request.value;
} }
}); }
//check for hotkey pressed //check for hotkey pressed
document.onkeydown = function(e){ document.onkeydown = function(e){
@@ -474,13 +476,11 @@ function openInfoMenu() {
//hide info button //hide info button
document.getElementById("infoButton").style.display = "none"; document.getElementById("infoButton").style.display = "none";
let popup = document.createElement("div"); 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.id = "sponsorBlockPopupContainer";
popup.innerHTML = xmlhttp.responseText
let popupFrame = document.createElement("iframe");
popupFrame.id = "sponsorBlockPopupFrame"
popupFrame.src = chrome.extension.getURL("popup.html");
popupFrame.className = "popup";
//close button //close button
let closeButton = document.createElement("div"); let closeButton = document.createElement("div");
@@ -489,8 +489,8 @@ function openInfoMenu() {
closeButton.setAttribute("align", "center"); closeButton.setAttribute("align", "center");
closeButton.addEventListener("click", closeInfoMenu); closeButton.addEventListener("click", closeInfoMenu);
popup.appendChild(closeButton); //add the close button
popup.appendChild(popupFrame); popup.prepend(closeButton);
let parentNode = document.getElementById("secondary"); let parentNode = document.getElementById("secondary");
if (parentNode == null) { if (parentNode == null) {
@@ -498,7 +498,21 @@ function openInfoMenu() {
parentNode = document.getElementById("watch7-sidebar-contents"); parentNode = document.getElementById("watch7-sidebar-contents");
} }
parentNode.prepend(popup); //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");
//remove the style sheet and font that are not necessary
popup.querySelector("#sponorBlockPopupFont").remove();
popup.querySelector("#sponorBlockStyleSheet").remove();
parentNode.insertBefore(popup, parentNode.firstChild);
//run the popup init script
runThePopup();
}
});
} }
function closeInfoMenu() { function closeInfoMenu() {

View File

@@ -10,11 +10,13 @@
], ],
"js": [ "js": [
"config.js", "config.js",
"content.js" "content.js",
"popup.js"
], ],
"css": [ "css": [
"content.css", "content.css",
"./libs/Source+Sans+Pro.css" "./libs/Source+Sans+Pro.css",
"popup.css"
] ]
} }
], ],

View File

@@ -1,7 +1,7 @@
{ {
"name": "SponsorBlock for YouTube - Skip Sponsorships", "name": "SponsorBlock for YouTube - Skip Sponsorships",
"short_name": "SponsorBlock", "short_name": "SponsorBlock",
"version": "1.0.16", "version": "1.0.18",
"description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.", "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
"content_scripts": [ "content_scripts": [
{ {
@@ -10,11 +10,13 @@
], ],
"js": [ "js": [
"config.js", "config.js",
"content.js" "content.js",
"popup.js"
], ],
"css": [ "css": [
"content.css", "content.css",
"./libs/Source+Sans+Pro.css" "./libs/Source+Sans+Pro.css",
"popup.css"
] ]
} }
], ],

View File

@@ -1,45 +1,75 @@
* { /* 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;
}
h2.popupElement {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h3.popupElement {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/* end reset */
.popupElement {
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
} }
h1 { h1.popupElement {
margin-top: 0px; margin-top: 0px;
} }
body { .popupBody {
font-size: 14px; font-size: 14px;
min-width: 300px;
background-color: #ffd9d9; background-color: #ffd9d9;
padding: 5px;
} }
.recordingSubtitle { .recordingSubtitle.popupElement {
margin-bottom: 10px; margin-bottom: 10px;
} }
.voteButton { .voteButton.popupElement {
height: 32px; height: 32px;
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
} }
.voteButton:hover { .voteButton:hover.popupElement {
filter: brightness(80%); filter: brightness(80%);
} }
#discordButtonContainer { #discordButtonContainer.popupElement {
font-size: 12px; font-size: 12px;
} }
.sponsorTime { .sponsorTime.popupElement {
font-size: 20px; font-size: 20px;
} }
.smallLink { .smallLink.popupElement {
font-size: 10px; font-size: 10px;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.mediumLink { .mediumLink.popupElement {
font-size: 15px; font-size: 15px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
@@ -47,7 +77,7 @@ body {
cursor: pointer; cursor: pointer;
} }
.greenButton { .greenButton.popupElement {
background-color:#ec1c1c; background-color:#ec1c1c;
-moz-border-radius:28px; -moz-border-radius:28px;
-webkit-border-radius:28px; -webkit-border-radius:28px;
@@ -61,19 +91,19 @@ body {
text-decoration:none; text-decoration:none;
text-shadow:0px 0px 0px #662727; text-shadow:0px 0px 0px #662727;
} }
.greenButton:hover { .greenButton:hover.popupElement {
background-color:#bf2a2a; background-color:#bf2a2a;
} }
.greenButton:focus { .greenButton:focus.popupElement {
outline: none; outline: none;
background-color:#bf2a2a; background-color:#bf2a2a;
} }
.greenButton:active { .greenButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }
.dangerButton { .dangerButton.popupElement {
-moz-box-shadow:inset 0px 1px 0px 0px #cf866c; -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-webkit-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; box-shadow:inset 0px 1px 0px 0px #cf866c;
@@ -90,19 +120,19 @@ body {
text-decoration:none; text-decoration:none;
text-shadow:0px 1px 0px #854629; text-shadow:0px 1px 0px #854629;
} }
.dangerButton:hover { .dangerButton:hover.popupElement {
background-color:#bc3315; background-color:#bc3315;
} }
.dangerButton:focus { .dangerButton:focus.popupElement {
outline: none; outline: none;
background-color:#bc3315; background-color:#bc3315;
} }
.dangerButton:active { .dangerButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }
.warningButton { .warningButton.popupElement {
-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c; -moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
-webkit-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; box-shadow:inset 0px 1px 0px 0px #cfbd6c;
@@ -119,19 +149,19 @@ body {
text-decoration:none; text-decoration:none;
text-shadow:0px 1px 0px #856829; text-shadow:0px 1px 0px #856829;
} }
.warningButton:hover { .warningButton:hover.popupElement {
background-color:#bc8215; background-color:#bc8215;
} }
.warningButton:focus { .warningButton:focus.popupElement {
outline: none; outline: none;
background-color:#bc8215; background-color:#bc8215;
} }
.warningButton:active { .warningButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }
.smallButton { .smallButton.popupElement {
background-color:#f9902d; background-color:#f9902d;
-moz-border-radius:3px; -moz-border-radius:3px;
-webkit-border-radius:3px; -webkit-border-radius:3px;
@@ -144,14 +174,14 @@ body {
padding:6px 10px; padding:6px 10px;
text-decoration:none; text-decoration:none;
} }
.smallButton:hover { .smallButton:hover.popupElement {
background-color:#fa9806; background-color:#fa9806;
} }
.smallButton:focus { .smallButton:focus.popupElement {
outline: none; outline: none;
background-color:#fa9806; background-color:#fa9806;
} }
.smallButton:active { .smallButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }

View File

@@ -1,97 +1,98 @@
<html> <html>
<head> <head>
<title>Set Page Color Popup</title> <title>Set Page Color Popup</title>
<link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/> <link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
<link rel="stylesheet" type="text/css" href="popup.css"/> <link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
</head> </head>
<body class="popupBody">
<center> <center>
<div id="app"> <div id="app" class="popupBody">
<img src="icons/LogoSponsorBlocker256px.png" height="64px"/> <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
<h1>SponsorBlock</h1> <h1 class="popupElement">SponsorBlock</h1>
<!-- Loading text --> <!-- Loading text -->
<p id="loadingIndicator">Loading...</p> <p id="loadingIndicator" class="popupElement">Loading...</p>
<!-- Hidden until loading complete --> <!-- Hidden until loading complete -->
<div id="mainControls" class="main" style="display: none"> <div id="mainControls" class="main popupElement" style="display: none">
<!-- If the video was found in the database --> <!-- If the video was found in the database -->
<div id="videoFound"> <div id="videoFound">
</div> </div>
<div id="downloadedSponsorMessageTimes"> <div id="downloadedSponsorMessageTimes" class="popupElement">
</div> </div>
<br/> <br/>
<button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button> <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
<div id="issueReporterContainer" style="display: none"> <div id="issueReporterContainer" class="popupElement" style="display: none">
<h3 style="margin-top: 0px">Vote On A Sponsor Time</h3> <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
<div id="issueReporterTimeButtons"> <div id="issueReporterTimeButtons" class="popupElement">
</div> </div>
</div> </div>
<h2 class="recordingSubtitle">Record the times of a sponsorship</h2> <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
<p> <p class="popupElement">
<span id=sponsorTimesContributionsContainer style="display: none"> <span id=sponsorTimesContributionsContainer class="popupElement" style="display: none">
So far, you've submitted So far, you've submitted
<span id="sponsorTimesContributionsDisplay"> <span id="sponsorTimesContributionsDisplay" class="popupElement">
0 0
</span> </span>
<span id="sponsorTimesContributionsDisplayEndWord"> <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
sponsors. sponsors.
</span> </span>
</span> </span>
<span id=sponsorTimesViewsContainer style="display: none"> <span id=sponsorTimesViewsContainer class="popupElement" style="display: none">
You have saved people from You have saved people from
<span id="sponsorTimesViewsDisplay"> <span id="sponsorTimesViewsDisplay" class="popupElement">
0 0
</span> </span>
<span id="sponsorTimesViewsDisplayEndWord"> <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
sponsor segments. sponsor segments.
</span> </span>
</span> </span>
</p> </p>
<p> <p class="popupElement">
Click the button below when the sponsorship starts and ends to record and Click the button below when the sponsorship starts and ends to record and
submit it to the database. submit it to the database.
</p> </p>
<div> <div>
<button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button> <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
</div> </div>
<sub>Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub> <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" style="display: none"> <div id="submissionSection" class="popupElement" style="display: none">
<h3>Latest Sponsor Message Times Chosen</h3> <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
<b> <b>
<div id="sponsorMessageTimes"> <div id="sponsorMessageTimes" class="popupElement">
</div> </div>
</b> </b>
<button id="clearTimes" class="smallButton">Clear Times</button> <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
<br/> <br/>
<br/> <br/>
<div id="submitTimesContainer" style="display: none"> <div id="submitTimesContainer" class="popupElement" style="display: none">
<button id="submitTimes" class="smallButton">Submit Times</button> <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
<div id="submitTimesInfoMessageContainer" style="display: none"> <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
<h3 id="submitTimesInfoMessage"> <h3 id="submitTimesInfoMessage" class="popupElement">
</h3> </h3>
</div> </div>
@@ -100,10 +101,10 @@
</div> </div>
<div id="discordButtonContainer" style="display: none"> <div id="discordButtonContainer" class="popupElement" style="display: none">
<br/> <br/>
<a href="https://discord.gg/QnmVMpU" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a> <a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
<br/> <br/>
@@ -111,23 +112,23 @@
<br/> <br/>
<span id="hideDiscordButton" class="smallLink">Hide this</span> <span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
</div> </div>
<div id="optionsButtonContainer"> <div id="optionsButtonContainer" class="popupElement">
<br/> <br/>
<br/> <br/>
<button id="optionsButton" class="dangerButton">Options</button> <button id="optionsButton" class="dangerButton popupElement">Options</button>
</div> </div>
<div id="options" style="display: none"> <div id="options" class="popupElement" style="display: none">
<br/> <br/>
<h3>Options</h3> <h3>Options</h3>
<button id="hideVideoPlayerControls" class="warningButton">Hide Buttons On YouTube Player</button> <button id="hideVideoPlayerControls" class="warningButton popupElement">Hide Buttons On YouTube Player</button>
<button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Buttons On YouTube Player</button> <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
<br/> <br/>
<sub> <sub>
This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some
@@ -139,8 +140,8 @@
<br/> <br/>
<br/> <br/>
<button id="hideInfoButtonPlayerControls" class="warningButton">Hide Info Button On YouTube Player</button> <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">Hide Info Button On YouTube Player</button>
<button id="showInfoButtonPlayerControls" style="display: none" class="warningButton">Show Info Button On YouTube Player</button> <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Info Button On YouTube Player</button>
<br/> <br/>
<sub> <sub>
This is the button that opens up a popup in the YouTube page. This is the button that opens up a popup in the YouTube page.
@@ -149,8 +150,8 @@
<br/> <br/>
<br/> <br/>
<button id="hideDeleteButtonPlayerControls" class="warningButton">Hide Delete Button On YouTube Player</button> <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">Hide Delete Button On YouTube Player</button>
<button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton">Show Delete Button On YouTube Player</button> <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Delete Button On YouTube Player</button>
<br/> <br/>
<sub> <sub>
This is the button that allows you to clear all sponsors on the YouTube player. This is the button that allows you to clear all sponsors on the YouTube player.
@@ -159,8 +160,8 @@
<br/> <br/>
<br/> <br/>
<button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button> <button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
<button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button> <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
<br/> <br/>
<sub> <sub>
This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
@@ -172,11 +173,12 @@
<br/> <br/>
<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>
</div> </div>
</center> </center>
</body>
<!-- Scripts that need to load after the html --> <!-- Scripts that need to load after the html -->
<script src="config.js"></script> <script src="config.js"></script>

393
popup.js
View File

@@ -1,65 +1,88 @@
// References //make this a function to allow this to run on the content page
var SB = {}; function runThePopup() {
SB.sponsorStart = document.getElementById("sponsorStart"); //is it in the popup or content script
SB.clearTimes = document.getElementById("clearTimes"); var inPopup = true;
SB.submitTimes = document.getElementById("submitTimes"); if (chrome.tabs == undefined) {
SB.showNoticeAgain = document.getElementById("showNoticeAgain"); //this is on the content script, use direct communication
SB.hideVideoPlayerControls = document.getElementById("hideVideoPlayerControls"); chrome.tabs = {};
SB.showVideoPlayerControls = document.getElementById("showVideoPlayerControls"); chrome.tabs.sendMessage = function(id, request, callback) {
SB.hideInfoButtonPlayerControls = document.getElementById("hideInfoButtonPlayerControls"); messageListener(request, null, callback);
SB.showInfoButtonPlayerControls = document.getElementById("showInfoButtonPlayerControls"); }
SB.hideDeleteButtonPlayerControls = document.getElementById("hideDeleteButtonPlayerControls");
SB.showDeleteButtonPlayerControls = document.getElementById("showDeleteButtonPlayerControls");
SB.disableSponsorViewTracking = document.getElementById("disableSponsorViewTracking");
SB.enableSponsorViewTracking = document.getElementById("enableSponsorViewTracking");
SB.optionsButton = document.getElementById("optionsButton");
SB.reportAnIssue = document.getElementById("reportAnIssue");
// sponsorTimesContributions
SB.sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
SB.sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
// sponsorTimesViewsDisplay
SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
// discordButtons
SB.discordButtonContainer = document.getElementById("discordButtonContainer");
SB.hideDiscordButton = document.getElementById("hideDiscordButton");
//setup click listeners //add a dummy query method
SB.sponsorStart.addEventListener("click", sendSponsorStartMessage); chrome.tabs.query = function(config, callback) {
SB.clearTimes.addEventListener("click", clearTimes); callback([{
SB.submitTimes.addEventListener("click", submitTimes); url: document.URL,
SB.showNoticeAgain.addEventListener("click", showNoticeAgain); id: -1
SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls); }]);
SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls); }
SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls); inPopup = false;
SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls); }
SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking); // References
SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking); let SB = {};
SB.optionsButton.addEventListener("click", openOptions);
SB.reportAnIssue.addEventListener("click", reportAnIssue); SB.sponsorStart = document.getElementById("sponsorStart");
SB.hideDiscordButton.addEventListener("click", hideDiscordButton); SB.clearTimes = document.getElementById("clearTimes");
SB.submitTimes = document.getElementById("submitTimes");
SB.showNoticeAgain = document.getElementById("showNoticeAgain");
SB.hideVideoPlayerControls = document.getElementById("hideVideoPlayerControls");
SB.showVideoPlayerControls = document.getElementById("showVideoPlayerControls");
SB.hideInfoButtonPlayerControls = document.getElementById("hideInfoButtonPlayerControls");
SB.showInfoButtonPlayerControls = document.getElementById("showInfoButtonPlayerControls");
SB.hideDeleteButtonPlayerControls = document.getElementById("hideDeleteButtonPlayerControls");
SB.showDeleteButtonPlayerControls = document.getElementById("showDeleteButtonPlayerControls");
SB.disableSponsorViewTracking = document.getElementById("disableSponsorViewTracking");
SB.enableSponsorViewTracking = document.getElementById("enableSponsorViewTracking");
SB.optionsButton = document.getElementById("optionsButton");
SB.reportAnIssue = document.getElementById("reportAnIssue");
// sponsorTimesContributions
SB.sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
SB.sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
// sponsorTimesViewsDisplay
SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
// discordButtons
SB.discordButtonContainer = document.getElementById("discordButtonContainer");
SB.hideDiscordButton = document.getElementById("hideDiscordButton");
//setup click listeners
SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
SB.clearTimes.addEventListener("click", clearTimes);
SB.submitTimes.addEventListener("click", submitTimes);
SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls);
SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls);
SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
SB.optionsButton.addEventListener("click", openOptions);
SB.reportAnIssue.addEventListener("click", reportAnIssue);
SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
//if true, the button now selects the end time //if true, the button now selects the end time
var startTimeChosen = false; let startTimeChosen = false;
//the start and end time pairs (2d) //the start and end time pairs (2d)
var sponsorTimes = []; let sponsorTimes = [];
//current video ID of this tab //current video ID of this tab
var currentVideoID = null; let currentVideoID = null;
//is this a YouTube tab? //is this a YouTube tab?
var isYouTubeTab = false; let isYouTubeTab = false;
//see if discord link can be shown //see if discord link can be shown
chrome.storage.sync.get(["hideDiscordLink"], function(result) { chrome.storage.sync.get(["hideDiscordLink"], function(result) {
let hideDiscordLink = result.hideDiscordLink; let hideDiscordLink = result.hideDiscordLink;
if (hideDiscordLink == undefined || !hideDiscordLink) { if (hideDiscordLink == undefined || !hideDiscordLink) {
chrome.storage.sync.get(["hideDiscordLaunches"], function(result) { chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
@@ -76,51 +99,51 @@ chrome.storage.sync.get(["hideDiscordLink"], function(result) {
} }
}); });
} }
}); });
//if the don't show notice again variable is true, an option to //if the don't show notice again letiable is true, an option to
// disable should be available // disable should be available
chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) { chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
let dontShowNoticeAgain = result.dontShowNoticeAgain; let dontShowNoticeAgain = result.dontShowNoticeAgain;
if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) { if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) {
SB.showNoticeAgain.style.display = "unset"; SB.showNoticeAgain.style.display = "unset";
} }
}); });
//show proper video player controls options //show proper video player controls options
chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) { chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
let hideVideoPlayerControls = result.hideVideoPlayerControls; let hideVideoPlayerControls = result.hideVideoPlayerControls;
if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) { if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
SB.hideVideoPlayerControls.style.display = "none"; SB.hideVideoPlayerControls.style.display = "none";
SB.showVideoPlayerControls.style.display = "unset"; SB.showVideoPlayerControls.style.display = "unset";
} }
}); });
chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) { chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls; let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) { if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) {
SB.hideInfoButtonPlayerControls.style.display = "none"; SB.hideInfoButtonPlayerControls.style.display = "none";
SB.showInfoButtonPlayerControls.style.display = "unset"; SB.showInfoButtonPlayerControls.style.display = "unset";
} }
}); });
chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) { chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls; let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) { if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) {
SB.hideDeleteButtonPlayerControls.style.display = "none"; SB.hideDeleteButtonPlayerControls.style.display = "none";
SB.showDeleteButtonPlayerControls.style.display = "unset"; SB.showDeleteButtonPlayerControls.style.display = "unset";
} }
}); });
//show proper tracking option //show proper tracking option
chrome.storage.sync.get(["trackViewCount"], function(result) { chrome.storage.sync.get(["trackViewCount"], function(result) {
let trackViewCount = result.trackViewCount; let trackViewCount = result.trackViewCount;
if (trackViewCount != undefined && !trackViewCount) { if (trackViewCount != undefined && !trackViewCount) {
SB.disableSponsorViewTracking.style.display = "none"; SB.disableSponsorViewTracking.style.display = "none";
SB.enableSponsorViewTracking.style.display = "unset"; SB.enableSponsorViewTracking.style.display = "unset";
} }
}); });
//get the amount of times this user has contributed and display it to thank them //get the amount of times this user has contributed and display it to thank them
chrome.storage.sync.get(["sponsorTimesContributed"], function(result) { chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
if (result.sponsorTimesContributed != undefined) { if (result.sponsorTimesContributed != undefined) {
if (result.sponsorTimesContributed > 1) { if (result.sponsorTimesContributed > 1) {
SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors." SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
@@ -153,15 +176,16 @@ chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
} }
}); });
} }
}); });
chrome.tabs.query({ chrome.tabs.query({
active: true, active: true,
currentWindow: true currentWindow: true
}, loadTabData); }, loadTabData);
function loadTabData(tabs) {
function loadTabData(tabs) {
//set current videoID //set current videoID
currentVideoID = getYouTubeVideoID(tabs[0].url); currentVideoID = getYouTubeVideoID(tabs[0].url);
@@ -198,9 +222,9 @@ function loadTabData(tabs) {
{message: 'isInfoFound'}, {message: 'isInfoFound'},
infoFound infoFound
); );
} }
function infoFound(request) { function infoFound(request) {
if(chrome.runtime.lastError) { if(chrome.runtime.lastError) {
//This page doesn't have the injected content script, or at least not yet //This page doesn't have the injected content script, or at least not yet
displayNoVideo(); displayNoVideo();
@@ -210,7 +234,7 @@ function infoFound(request) {
//if request is undefined, then the page currently being browsed is not YouTube //if request is undefined, then the page currently being browsed is not YouTube
if (request != undefined) { if (request != undefined) {
//this must be a YouTube video //this must be a YouTube video
//set variable //set letiable
isYouTubeTab = true; isYouTubeTab = true;
//remove loading text //remove loading text
@@ -225,16 +249,16 @@ function infoFound(request) {
document.getElementById("videoFound").innerHTML = "No sponsors found" document.getElementById("videoFound").innerHTML = "No sponsors found"
} }
} }
} }
function setVideoID(request) { function setVideoID(request) {
//if request is undefined, then the page currently being browsed is not YouTube //if request is undefined, then the page currently being browsed is not YouTube
if (request != undefined) { if (request != undefined) {
videoID = request.videoID; videoID = request.videoID;
} }
} }
function sendSponsorStartMessage() { function sendSponsorStartMessage() {
//the content script will get the message if a YouTube page is open //the content script will get the message if a YouTube page is open
chrome.tabs.query({ chrome.tabs.query({
active: true, active: true,
@@ -246,9 +270,9 @@ function sendSponsorStartMessage() {
startSponsorCallback startSponsorCallback
); );
}); });
} }
function startSponsorCallback(response) { function startSponsorCallback(response) {
let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0); let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
if (sponsorTimes[sponsorTimesIndex] == undefined) { if (sponsorTimes[sponsorTimesIndex] == undefined) {
@@ -269,10 +293,10 @@ function startSponsorCallback(response) {
document.getElementById("submissionSection").style.display = "unset"; document.getElementById("submissionSection").style.display = "unset";
showSubmitTimesIfNecessary(); showSubmitTimesIfNecessary();
} }
//display the video times from the array //display the video times from the array
function displaySponsorTimes() { function displaySponsorTimes() {
//set it to the message //set it to the message
let sponsorMessageTimes = document.getElementById("sponsorMessageTimes"); let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
@@ -283,10 +307,10 @@ function displaySponsorTimes() {
//add sponsor times //add sponsor times
sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes)); sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
} }
//display the video times from the array at the top, in a different section //display the video times from the array at the top, in a different section
function displayDownloadedSponsorTimes(request) { function displayDownloadedSponsorTimes(request) {
if (request.sponsorTimes != undefined) { if (request.sponsorTimes != undefined) {
//set it to the message //set it to the message
document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes); document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes);
@@ -295,7 +319,7 @@ function displayDownloadedSponsorTimes(request) {
let container = document.getElementById("issueReporterTimeButtons"); let container = document.getElementById("issueReporterTimeButtons");
for (let i = 0; i < request.sponsorTimes.length; i++) { for (let i = 0; i < request.sponsorTimes.length; i++) {
let sponsorTimeButton = document.createElement("button"); let sponsorTimeButton = document.createElement("button");
sponsorTimeButton.className = "warningButton"; sponsorTimeButton.className = "warningButton popupElement";
sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]); sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
let votingButtons = document.createElement("div"); let votingButtons = document.createElement("div");
@@ -310,13 +334,13 @@ function displayDownloadedSponsorTimes(request) {
let upvoteButton = document.createElement("img"); let upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
upvoteButton.className = "voteButton"; upvoteButton.className = "voteButton popupElement";
upvoteButton.src = chrome.extension.getURL("icons/upvote.png"); upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
upvoteButton.addEventListener("click", () => vote(1, UUID)); upvoteButton.addEventListener("click", () => vote(1, UUID));
let downvoteButton = document.createElement("img"); let downvoteButton = document.createElement("img");
downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID; downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
downvoteButton.className = "voteButton"; downvoteButton.className = "voteButton popupElement";
downvoteButton.src = chrome.extension.getURL("icons/downvote.png"); downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
downvoteButton.addEventListener("click", () => vote(0, UUID)); downvoteButton.addEventListener("click", () => vote(0, UUID));
@@ -341,10 +365,10 @@ function displayDownloadedSponsorTimes(request) {
} }
} }
} }
} }
//get the message that visually displays the video times //get the message that visually displays the video times
function getSponsorTimesMessage(sponsorTimes) { function getSponsorTimesMessage(sponsorTimes) {
let sponsorTimesMessage = ""; let sponsorTimesMessage = "";
for (let i = 0; i < sponsorTimes.length; i++) { for (let i = 0; i < sponsorTimes.length; i++) {
@@ -363,11 +387,11 @@ function getSponsorTimesMessage(sponsorTimes) {
} }
return sponsorTimesMessage; return sponsorTimesMessage;
} }
//get the message that visually displays the video times //get the message that visually displays the video times
//this version is a div that contains each with delete buttons //this version is a div that contains each with delete buttons
function getSponsorTimesMessageDiv(sponsorTimes) { function getSponsorTimesMessageDiv(sponsorTimes) {
// let sponsorTimesMessage = ""; // let sponsorTimesMessage = "";
let sponsorTimesContainer = document.createElement("div"); let sponsorTimesContainer = document.createElement("div");
sponsorTimesContainer.id = "sponsorTimesContainer"; sponsorTimesContainer.id = "sponsorTimesContainer";
@@ -375,13 +399,13 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
for (let i = 0; i < sponsorTimes.length; i++) { for (let i = 0; i < sponsorTimes.length; i++) {
let currentSponsorTimeContainer = document.createElement("div"); let currentSponsorTimeContainer = document.createElement("div");
currentSponsorTimeContainer.id = "sponsorTimeContainer" + i; currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
currentSponsorTimeContainer.className = "sponsorTime"; currentSponsorTimeContainer.className = "sponsorTime popupElement";
let currentSponsorTimeMessage = ""; let currentSponsorTimeMessage = "";
let deleteButton = document.createElement("span"); let deleteButton = document.createElement("span");
deleteButton.id = "sponsorTimeDeleteButton" + i; deleteButton.id = "sponsorTimeDeleteButton" + i;
deleteButton.innerText = "Delete"; deleteButton.innerText = "Delete";
deleteButton.className = "mediumLink"; deleteButton.className = "mediumLink popupElement";
let index = i; let index = i;
deleteButton.addEventListener("click", () => deleteSponsorTime(index)); deleteButton.addEventListener("click", () => deleteSponsorTime(index));
@@ -391,7 +415,7 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
let editButton = document.createElement("span"); let editButton = document.createElement("span");
editButton.id = "sponsorTimeEditButton" + i; editButton.id = "sponsorTimeEditButton" + i;
editButton.innerText = "Edit"; editButton.innerText = "Edit";
editButton.className = "mediumLink"; editButton.className = "mediumLink popupElement";
editButton.addEventListener("click", () => editSponsorTime(index)); editButton.addEventListener("click", () => editSponsorTime(index));
for (let s = 0; s < sponsorTimes[i].length; s++) { for (let s = 0; s < sponsorTimes[i].length; s++) {
@@ -420,9 +444,9 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
} }
return sponsorTimesContainer; return sponsorTimesContainer;
} }
function editSponsorTime(index) { function editSponsorTime(index) {
if (document.getElementById("startTimeMinutes" + index) != null) { if (document.getElementById("startTimeMinutes" + index) != null) {
//already open //already open
return; return;
@@ -433,31 +457,31 @@ function editSponsorTime(index) {
//get sponsor time minutes and seconds boxes //get sponsor time minutes and seconds boxes
let startTimeMinutes = document.createElement("input"); let startTimeMinutes = document.createElement("input");
startTimeMinutes.id = "startTimeMinutes" + index; startTimeMinutes.id = "startTimeMinutes" + index;
startTimeMinutes.className = "sponsorTime"; startTimeMinutes.className = "sponsorTime popupElement";
startTimeMinutes.type = "text"; startTimeMinutes.type = "text";
startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]); startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
startTimeMinutes.style.width = "45"; startTimeMinutes.style.width = "45px";
let startTimeSeconds = document.createElement("input"); let startTimeSeconds = document.createElement("input");
startTimeSeconds.id = "startTimeSeconds" + index; startTimeSeconds.id = "startTimeSeconds" + index;
startTimeSeconds.className = "sponsorTime"; startTimeSeconds.className = "sponsorTime popupElement";
startTimeSeconds.type = "text"; startTimeSeconds.type = "text";
startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]); startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
startTimeSeconds.style.width = "60"; startTimeSeconds.style.width = "60px";
let endTimeMinutes = document.createElement("input"); let endTimeMinutes = document.createElement("input");
endTimeMinutes.id = "endTimeMinutes" + index; endTimeMinutes.id = "endTimeMinutes" + index;
endTimeMinutes.className = "sponsorTime"; endTimeMinutes.className = "sponsorTime popupElement";
endTimeMinutes.type = "text"; endTimeMinutes.type = "text";
endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]); endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
endTimeMinutes.style.width = "45"; endTimeMinutes.style.width = "45px";
let endTimeSeconds = document.createElement("input"); let endTimeSeconds = document.createElement("input");
endTimeSeconds.id = "endTimeSeconds" + index; endTimeSeconds.id = "endTimeSeconds" + index;
endTimeSeconds.className = "sponsorTime"; endTimeSeconds.className = "sponsorTime popupElement";
endTimeSeconds.type = "text"; endTimeSeconds.type = "text";
endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]); endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
endTimeSeconds.style.width = "60"; endTimeSeconds.style.width = "60px";
let colonText = document.createElement("span"); let colonText = document.createElement("span");
colonText.innerText = ":"; colonText.innerText = ":";
@@ -482,17 +506,17 @@ function editSponsorTime(index) {
let saveButton = document.createElement("span"); let saveButton = document.createElement("span");
saveButton.id = "sponsorTimeSaveButton" + index; saveButton.id = "sponsorTimeSaveButton" + index;
saveButton.innerText = "Save"; saveButton.innerText = "Save";
saveButton.className = "mediumLink"; saveButton.className = "mediumLink popupElement";
saveButton.addEventListener("click", () => saveSponsorTimeEdit(index)); saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
let editButton = document.getElementById("sponsorTimeEditButton" + index); let editButton = document.getElementById("sponsorTimeEditButton" + index);
let sponsorTimesContainer = document.getElementById("sponsorTimesContainer"); let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
sponsorTimesContainer.removeChild(editButton); editButton.remove();
sponsorTimesContainer.appendChild(saveButton); sponsorTimesContainer.appendChild(saveButton);
} }
function saveSponsorTimeEdit(index) { function saveSponsorTimeEdit(index) {
let startTimeMinutes = document.getElementById("startTimeMinutes" + index); let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
let startTimeSeconds = document.getElementById("startTimeSeconds" + index); let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
@@ -507,10 +531,10 @@ function saveSponsorTimeEdit(index) {
chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}); chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
displaySponsorTimes(); displaySponsorTimes();
} }
//deletes the sponsor time submitted at an index //deletes the sponsor time submitted at an index
function deleteSponsorTime(index) { function deleteSponsorTime(index) {
//if it is not a complete sponsor time //if it is not a complete sponsor time
if (sponsorTimes[index].length < 2) { if (sponsorTimes[index].length < 2) {
chrome.tabs.query({ chrome.tabs.query({
@@ -553,9 +577,9 @@ function deleteSponsorTime(index) {
//hide submission section //hide submission section
document.getElementById("submissionSection").style.display = "none"; document.getElementById("submissionSection").style.display = "none";
} }
} }
function clearTimes() { function clearTimes() {
//send new sponsor time state to tab //send new sponsor time state to tab
if (sponsorTimes.length > 0) { if (sponsorTimes.length > 0) {
chrome.tabs.query({ chrome.tabs.query({
@@ -582,9 +606,9 @@ function clearTimes() {
document.getElementById("submissionSection").style.display = "none"; document.getElementById("submissionSection").style.display = "none";
resetStartTimeChosen(); resetStartTimeChosen();
} }
function submitTimes() { function submitTimes() {
//make info message say loading //make info message say loading
document.getElementById("submitTimesInfoMessage").innerText = "Loading..."; document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
document.getElementById("submitTimesInfoMessageContainer").style.display = "unset"; document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -619,9 +643,9 @@ function submitTimes() {
} }
}); });
} }
} }
function showNoticeAgain() { function showNoticeAgain() {
chrome.storage.sync.set({"dontShowNoticeAgain": false}); chrome.storage.sync.set({"dontShowNoticeAgain": false});
chrome.tabs.query({ chrome.tabs.query({
@@ -634,9 +658,9 @@ function showNoticeAgain() {
}); });
SB.showNoticeAgain.style.display = "none"; SB.showNoticeAgain.style.display = "none";
} }
function hideVideoPlayerControls() { function hideVideoPlayerControls() {
chrome.storage.sync.set({"hideVideoPlayerControls": true}); chrome.storage.sync.set({"hideVideoPlayerControls": true});
chrome.tabs.query({ chrome.tabs.query({
@@ -651,9 +675,9 @@ function hideVideoPlayerControls() {
SB.hideVideoPlayerControls.style.display = "none"; SB.hideVideoPlayerControls.style.display = "none";
SB.showVideoPlayerControls.style.display = "unset"; SB.showVideoPlayerControls.style.display = "unset";
} }
function showVideoPlayerControls() { function showVideoPlayerControls() {
chrome.storage.sync.set({"hideVideoPlayerControls": false}); chrome.storage.sync.set({"hideVideoPlayerControls": false});
chrome.tabs.query({ chrome.tabs.query({
@@ -668,9 +692,9 @@ function showVideoPlayerControls() {
SB.hideVideoPlayerControls.style.display = "unset"; SB.hideVideoPlayerControls.style.display = "unset";
SB.showVideoPlayerControls.style.display = "none"; SB.showVideoPlayerControls.style.display = "none";
} }
function hideInfoButtonPlayerControls() { function hideInfoButtonPlayerControls() {
chrome.storage.sync.set({"hideInfoButtonPlayerControls": true}); chrome.storage.sync.set({"hideInfoButtonPlayerControls": true});
chrome.tabs.query({ chrome.tabs.query({
@@ -685,9 +709,9 @@ function hideInfoButtonPlayerControls() {
SB.hideInfoButtonPlayerControls.style.display = "none"; SB.hideInfoButtonPlayerControls.style.display = "none";
SB.showInfoButtonPlayerControls.style.display = "unset"; SB.showInfoButtonPlayerControls.style.display = "unset";
} }
function showInfoButtonPlayerControls() { function showInfoButtonPlayerControls() {
chrome.storage.sync.set({"hideInfoButtonPlayerControls": false}); chrome.storage.sync.set({"hideInfoButtonPlayerControls": false});
chrome.tabs.query({ chrome.tabs.query({
@@ -702,9 +726,9 @@ function showInfoButtonPlayerControls() {
SB.hideInfoButtonPlayerControls.style.display = "unset"; SB.hideInfoButtonPlayerControls.style.display = "unset";
SB.showInfoButtonPlayerControls.style.display = "none"; SB.showInfoButtonPlayerControls.style.display = "none";
} }
function hideDeleteButtonPlayerControls() { function hideDeleteButtonPlayerControls() {
chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true}); chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true});
chrome.tabs.query({ chrome.tabs.query({
@@ -719,9 +743,9 @@ function hideDeleteButtonPlayerControls() {
SB.hideDeleteButtonPlayerControls.style.display = "none"; SB.hideDeleteButtonPlayerControls.style.display = "none";
SB.showDeleteButtonPlayerControls.style.display = "unset"; SB.showDeleteButtonPlayerControls.style.display = "unset";
} }
function showDeleteButtonPlayerControls() { function showDeleteButtonPlayerControls() {
chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false}); chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false});
chrome.tabs.query({ chrome.tabs.query({
@@ -736,9 +760,9 @@ function showDeleteButtonPlayerControls() {
SB.hideDeleteButtonPlayerControls.style.display = "unset"; SB.hideDeleteButtonPlayerControls.style.display = "unset";
SB.showDeleteButtonPlayerControls.style.display = "none"; SB.showDeleteButtonPlayerControls.style.display = "none";
} }
function disableSponsorViewTracking() { function disableSponsorViewTracking() {
chrome.storage.sync.set({"trackViewCount": false}); chrome.storage.sync.set({"trackViewCount": false});
chrome.tabs.query({ chrome.tabs.query({
@@ -753,9 +777,9 @@ function disableSponsorViewTracking() {
SB.disableSponsorViewTracking.style.display = "none"; SB.disableSponsorViewTracking.style.display = "none";
SB.enableSponsorViewTracking.style.display = "unset"; SB.enableSponsorViewTracking.style.display = "unset";
} }
function enableSponsorViewTracking() { function enableSponsorViewTracking() {
chrome.storage.sync.set({"trackViewCount": true}); chrome.storage.sync.set({"trackViewCount": true});
chrome.tabs.query({ chrome.tabs.query({
@@ -770,26 +794,26 @@ function enableSponsorViewTracking() {
SB.enableSponsorViewTracking.style.display = "none"; SB.enableSponsorViewTracking.style.display = "none";
SB.disableSponsorViewTracking.style.display = "unset"; SB.disableSponsorViewTracking.style.display = "unset";
} }
function updateStartTimeChosen() { function updateStartTimeChosen() {
//update startTimeChosen variable //update startTimeChosen letiable
if (!startTimeChosen) { if (!startTimeChosen) {
startTimeChosen = true; startTimeChosen = true;
SB.sponsorStart.innerHTML = "Sponsorship Ends Now"; SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
} else { } else {
resetStartTimeChosen(); resetStartTimeChosen();
} }
} }
//set it to false //set it to false
function resetStartTimeChosen() { function resetStartTimeChosen() {
startTimeChosen = false; startTimeChosen = false;
SB.sponsorStart.innerHTML = "Sponsorship Starts Now"; SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
} }
//hides and shows the submit times button when needed //hides and shows the submit times button when needed
function showSubmitTimesIfNecessary() { function showSubmitTimesIfNecessary() {
//check if an end time has been specified for the latest sponsor time //check if an end time has been specified for the latest sponsor time
if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length > 1) { if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length > 1) {
//show submit times button //show submit times button
@@ -798,26 +822,26 @@ function showSubmitTimesIfNecessary() {
//hide submit times button //hide submit times button
document.getElementById("submitTimesContainer").style.display = "none"; document.getElementById("submitTimesContainer").style.display = "none";
} }
} }
//make the options div visisble //make the options div visisble
function openOptions() { function openOptions() {
document.getElementById("optionsButtonContainer").style.display = "none"; document.getElementById("optionsButtonContainer").style.display = "none";
document.getElementById("options").style.display = "unset"; document.getElementById("options").style.display = "unset";
} }
//this is not a YouTube video page //this is not a YouTube video page
function displayNoVideo() { function displayNoVideo() {
document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " + document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " +
"If you know this is a YouTube tab, close this popup and open it again."; "If you know this is a YouTube tab, close this popup and open it again.";
} }
function reportAnIssue() { function reportAnIssue() {
document.getElementById("issueReporterContainer").style.display = "unset"; document.getElementById("issueReporterContainer").style.display = "unset";
SB.reportAnIssue.style.display = "none"; SB.reportAnIssue.style.display = "none";
} }
function addVoteMessage(message, UUID) { function addVoteMessage(message, UUID) {
let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID); let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
//remove all children //remove all children
while (container.firstChild) { while (container.firstChild) {
@@ -830,9 +854,9 @@ function addVoteMessage(message, UUID) {
thanksForVotingText.style.marginBottom = "0px"; thanksForVotingText.style.marginBottom = "0px";
container.appendChild(thanksForVotingText); container.appendChild(thanksForVotingText);
} }
function vote(type, UUID) { function vote(type, UUID) {
//add loading info //add loading info
addVoteMessage("Loading...", UUID) addVoteMessage("Loading...", UUID)
@@ -860,16 +884,16 @@ function vote(type, UUID) {
} }
} }
}); });
} }
function hideDiscordButton() { function hideDiscordButton() {
chrome.storage.sync.set({"hideDiscordLink": false}); chrome.storage.sync.set({"hideDiscordLink": false});
SB.discordButtonContainer.style.display = "none"; SB.discordButtonContainer.style.display = "none";
} }
//converts time in seconds to minutes:seconds //converts time in seconds to minutes:seconds
function getFormattedTime(seconds) { function getFormattedTime(seconds) {
let minutes = Math.floor(seconds / 60); let minutes = Math.floor(seconds / 60);
let secondsDisplay = Math.round(seconds - minutes * 60); let secondsDisplay = Math.round(seconds - minutes * 60);
if (secondsDisplay < 10) { if (secondsDisplay < 10) {
@@ -880,17 +904,17 @@ function getFormattedTime(seconds) {
let formatted = minutes+ ":" + secondsDisplay; let formatted = minutes+ ":" + secondsDisplay;
return formatted; return formatted;
} }
//converts time in seconds to minutes //converts time in seconds to minutes
function getTimeInMinutes(seconds) { function getTimeInMinutes(seconds) {
let minutes = Math.floor(seconds / 60); let minutes = Math.floor(seconds / 60);
return minutes; return minutes;
} }
//converts time in seconds to seconds past the last minute //converts time in seconds to seconds past the last minute
function getTimeInFormattedSeconds(seconds) { function getTimeInFormattedSeconds(seconds) {
let secondsFormatted = (seconds % 60).toFixed(3); let secondsFormatted = (seconds % 60).toFixed(3);
if (secondsFormatted < 10) { if (secondsFormatted < 10) {
@@ -898,9 +922,9 @@ function getTimeInFormattedSeconds(seconds) {
} }
return secondsFormatted; return secondsFormatted;
} }
function sendRequestToServer(type, address, callback) { function sendRequestToServer(type, address, callback) {
let xmlhttp = new XMLHttpRequest(); let xmlhttp = new XMLHttpRequest();
xmlhttp.open(type, serverAddress + address, true); xmlhttp.open(type, serverAddress + address, true);
@@ -917,10 +941,21 @@ function sendRequestToServer(type, address, callback) {
//submit this request //submit this request
xmlhttp.send(); xmlhttp.send();
}
function getYouTubeVideoID(url) { // Return video id or false
let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
let match = url.match(regExp);
return (match && match[7].length == 11) ? match[7] : false;
}
//end of function
} }
function getYouTubeVideoID(url) { // Return video id or false if (chrome.tabs != undefined) {
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/; //add the width restriction (because Firefox)
var match = url.match(regExp); document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 300 }', 0);
return (match && match[7].length == 11) ? match[7] : false;
//this means it is actually opened in the popup
runThePopup();
} }