SponsorBlock/popup.js

//make this a function to allow this to run on the content page
function runThePopup() {
    localizeHtmlPage();

    //is it in the popup or content script
    var inPopup = true;
    if (chrome.tabs == undefined) {
            //this is on the content script, use direct communication
            chrome.tabs = {};
            chrome.tabs.sendMessage = function(id, request, callback) {
                    messageListener(request, null, callback);
            }
  
            //add a dummy query method
            chrome.tabs.query = function(config, callback) {
                    callback([{
                            url: document.URL,
                            id: -1
                    }]);
            }
  
            inPopup = false;
    }
  
    var SB = {};

    ["sponsorStart",
    "whitelistChannel",
    "unwhitelistChannel",
    "clearTimes",
    "submitTimes",
    "showNoticeAgain",
    "hideVideoPlayerControls",
    "showVideoPlayerControls",
    "hideInfoButtonPlayerControls",
    "showInfoButtonPlayerControls",
    "hideDeleteButtonPlayerControls",
    "showDeleteButtonPlayerControls",
    "disableSponsorViewTracking",
    "enableSponsorViewTracking",
    "optionsButton",
    "reportAnIssue",
    // sponsorTimesContributions
    "sponsorTimesContributionsContainer",
    "sponsorTimesContributionsDisplay",
    "sponsorTimesContributionsDisplayEndWord",
    // sponsorTimesViewsDisplay
    "sponsorTimesViewsContainer",
    "sponsorTimesViewsDisplay",
    "sponsorTimesViewsDisplayEndWord",
    // discordButtons
    "discordButtonContainer",
    "hideDiscordButton",
    // submitTimesInfoMessage
    "submitTimesInfoMessageContainer",
    "submitTimesInfoMessage",
    // Username
    "setUsernameContainer",
    "setUsernameButton",
    "setUsernameStatusContainer",
    "setUsernameStatus",
    "setUsername",
    "usernameInput",
    "submitUsername",
    // More
    "submissionSection",
    "mainControls",
    "loadingIndicator",
    "videoFound",
    "sponsorMessageTimes",
    "downloadedSponsorMessageTimes",
    // Keybinds
    "setStartSponsorKeybind",
    "setSubmitKeybind",
    "keybindDescription"
    ].forEach(id => SB[id] = document.getElementById(id));

    //setup click listeners
    SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
    SB.whitelistChannel.addEventListener("click", whitelistChannel);
    SB.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
    SB.clearTimes.addEventListener("click", clearTimes);
    SB.submitTimes.addEventListener("click", submitTimes);
    SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
    SB.setStartSponsorKeybind.addEventListener("click", () => setKeybind(true));
    SB.setSubmitKeybind.addEventListener("click", () => setKeybind(false));
    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.setUsernameButton.addEventListener("click", setUsernameButton);
    SB.submitUsername.addEventListener("click", submitUsername);
    SB.optionsButton.addEventListener("click", openOptions);
    SB.reportAnIssue.addEventListener("click", reportAnIssue);
    SB.hideDiscordButton.addEventListener("click", hideDiscordButton);

    //if true, the button now selects the end time
    let startTimeChosen = false;
  
    //the start and end time pairs (2d)
    let sponsorTimes = [];
  
    //current video ID of this tab
    let currentVideoID = null;
  
    //is this a YouTube tab?
    let isYouTubeTab = false;

    // Is the start sponsor keybind currently being set
    let setStartSponsorKeybind = false;
  
    //see if discord link can be shown
    chrome.storage.sync.get(["hideDiscordLink"], function(result) {
        let hideDiscordLink = result.hideDiscordLink;
        if (hideDiscordLink == undefined || !hideDiscordLink) {
            chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
                let hideDiscordLaunches = result.hideDiscordLaunches;
                //only if less than 5 launches
                if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
                    SB.discordButtonContainer.style.display = null;
          
                    if (hideDiscordLaunches == undefined) {
                        hideDiscordButton = 1;
                    }
  
                    chrome.storage.sync.set({"hideDiscordLaunches": hideDiscordButton + 1});
                }
            });
        }
    });

    //if the don't show notice again letiable is true, an option to 
    //  disable should be available
    chrome.storage.sync.get(["dontShowNotice"], function(result) {
        let dontShowNotice = result.dontShowNotice;
        if (dontShowNotice != undefined && dontShowNotice) {
            SB.showNoticeAgain.style.display = "unset";
        }
    });
  
    //show proper video player controls options
    chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
        let hideVideoPlayerControls = result.hideVideoPlayerControls;
        if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
            SB.hideVideoPlayerControls.style.display = "none";
            SB.showVideoPlayerControls.style.display = "unset";
        }
    });
    chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
        let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
        if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) {
            SB.hideInfoButtonPlayerControls.style.display = "none";
            SB.showInfoButtonPlayerControls.style.display = "unset";
        }
    });
    chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
        let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
        if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) {
            SB.hideDeleteButtonPlayerControls.style.display = "none";
            SB.showDeleteButtonPlayerControls.style.display = "unset";
        }
    });
  
    //show proper tracking option
    chrome.storage.sync.get(["trackViewCount"], function(result) {
        let trackViewCount = result.trackViewCount;
        if (trackViewCount != undefined && !trackViewCount) {
            SB.disableSponsorViewTracking.style.display = "none";
            SB.enableSponsorViewTracking.style.display = "unset";
        }
    });
  
    //get the amount of times this user has contributed and display it to thank them
    chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
        if (result.sponsorTimesContributed != undefined) {
            if (result.sponsorTimesContributed > 1) {
                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
            } else {
                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
            }
            SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
            SB.sponsorTimesContributionsContainer.style.display = "unset";
  
            //get the userID
            chrome.storage.sync.get(["userID"], function(result) {
                let userID = result.userID;
                if (userID != undefined) {
                    //there are probably some views on these submissions then
                    //get the amount of views from the sponsors submitted
                    sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
                            if (viewCount != 0) {
                                if (viewCount > 1) {
                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
                                } else {
                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
                                }

                                SB.sponsorTimesViewsDisplay.innerText = viewCount;
                                SB.sponsorTimesViewsContainer.style.display = "unset";
                            }
                        }
                    });
                }
            });
        }
    });
  
    chrome.tabs.query({
            active: true,
            currentWindow: true
    }, 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) {
        if (!currentVideoID) {
            //this isn't a YouTube video then
            displayNoVideo();
            return;
        }
  
        //load video times for this video 
        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
        chrome.storage.sync.get([sponsorTimeKey], function(result) {
            let sponsorTimesStorage = result[sponsorTimeKey];
            if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
                if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
                    startTimeChosen = true;
                    SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
                }
  
                sponsorTimes = sponsorTimesStorage;
  
                displaySponsorTimes();
  
                //show submission section
                SB.submissionSection.style.display = "unset";
  
                showSubmitTimesIfNecessary();
            }
        });
  
        //check if this video's sponsors are known
        chrome.tabs.sendMessage(
            tabs[0].id,
            {message: 'isInfoFound'},
            infoFound
        );
    }
  
    function infoFound(request) {
        if(chrome.runtime.lastError) {
            //This page doesn't have the injected content script, or at least not yet
            displayNoVideo();
            return;
        }
  
        //if request is undefined, then the page currently being browsed is not YouTube
        if (request != undefined) {
            //this must be a YouTube video
            //set letiable
            isYouTubeTab = true;
  
            //remove loading text
            SB.mainControls.style.display = "unset"
            SB.loadingIndicator.innerHTML = "";

            if (request.found) {
                SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");

                displayDownloadedSponsorTimes(request);
            } else {
                SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
            }
        }

        //see if whitelist button should be swapped
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, tabs => {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {message: 'isChannelWhitelisted'},
                function(response) {
                    if (response.value) {
                        SB.whitelistChannel.style.display = "none";
                        SB.unwhitelistChannel.style.display = "unset";

                        SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
                        SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";
                    }
                });
            }
        );
    }
  
    function setVideoID(request) {
        //if request is undefined, then the page currently being browsed is not YouTube
        if (request != undefined) {
            videoID = request.videoID;
        }
    }
  
    function sendSponsorStartMessage() {
            //the content script will get the message if a YouTube page is open
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, tabs => {
                chrome.tabs.sendMessage(
                    tabs[0].id,
                    {from: 'popup', message: 'sponsorStart'},
                    startSponsorCallback
                );
            });
    }
  
    function startSponsorCallback(response) {
        let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
  
        if (sponsorTimes[sponsorTimesIndex] == undefined) {
            sponsorTimes[sponsorTimesIndex] = [];
        }
  
        sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
  
        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
        let localStartTimeChosen = startTimeChosen;
        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
            //send a message to the client script
            if (localStartTimeChosen) {
                chrome.tabs.query({
                    active: true,
                    currentWindow: true
                }, tabs => {
                    chrome.tabs.sendMessage(
                        tabs[0].id,
                        {message: "sponsorDataChanged"}
                    );
                });
            }
        });
  
        updateStartTimeChosen();
  
        //display video times on screen
        displaySponsorTimes();
  
        //show submission section
        SB.submissionSection.style.display = "unset";
  
        showSubmitTimesIfNecessary();
    }
  
    //display the video times from the array
    function displaySponsorTimes() {
        //remove all children
        while (SB.sponsorMessageTimes.firstChild) {
            SB.sponsorMessageTimes.removeChild(SB.sponsorMessageTimes.firstChild);
        }

        //add sponsor times
        SB.sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
    }
  
    //display the video times from the array at the top, in a different section
    function displayDownloadedSponsorTimes(request) {
        if (request.sponsorTimes != undefined) {
            //set it to the message
            if (SB.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
                SB.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
            }

            //add them as buttons to the issue reporting container
            let container = document.getElementById("issueReporterTimeButtons");
            for (let i = 0; i < request.sponsorTimes.length; i++) {
                let sponsorTimeButton = document.createElement("button");
                sponsorTimeButton.className = "warningButton popupElement";

                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");
  
                let UUID = request.UUIDs[i];
  
                //thumbs up and down buttons
                let voteButtonsContainer = document.createElement("div");
                voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
                voteButtonsContainer.setAttribute("align", "center");
                voteButtonsContainer.style.display = "none"
  
                let upvoteButton = document.createElement("img");
                upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
                upvoteButton.className = "voteButton popupElement";
                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 = "voteButton popupElement";
                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(document.createElement("br"));
                voteButtonsContainer.appendChild(document.createElement("br"));
                voteButtonsContainer.appendChild(upvoteButton);
                voteButtonsContainer.appendChild(downvoteButton);
  
                //add click listener to open up vote panel
                sponsorTimeButton.addEventListener("click", function() {
                    voteButtonsContainer.style.display = "unset";
                });
  
                container.appendChild(sponsorTimeButton);
                container.appendChild(voteButtonsContainer);
  
                //if it is not the last iteration
                if (i != request.sponsorTimes.length - 1) {
                    container.appendChild(document.createElement("br"));
                    container.appendChild(document.createElement("br"));
                }
            }
        }
    }
  
    //get the message that visually displays the video times
    function getSponsorTimesMessage(sponsorTimes) {
        let sponsorTimesMessage = "";
  
        for (let i = 0; i < sponsorTimes.length; i++) {
            for (let s = 0; s < sponsorTimes[i].length; s++) {
                let timeMessage = getFormattedTime(sponsorTimes[i][s]);
                //if this is an end time
                if (s == 1) {
                    timeMessage = " to " + timeMessage;
                } else if (i > 0) {
                    //add commas if necessary
                    timeMessage = ", " + timeMessage;
                }
  
                sponsorTimesMessage += timeMessage;
            }
        }
  
        return sponsorTimesMessage;
    }
  
    //get the message that visually displays the video times
    //this version is a div that contains each with delete buttons
    function getSponsorTimesMessageDiv(sponsorTimes) {
        // let sponsorTimesMessage = "";
        let sponsorTimesContainer = document.createElement("div");
        sponsorTimesContainer.id = "sponsorTimesContainer";
  
        for (let i = 0; i < sponsorTimes.length; i++) {
            let currentSponsorTimeContainer = document.createElement("div");
            currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
            currentSponsorTimeContainer.className = "sponsorTime popupElement";
            let currentSponsorTimeMessage = "";
  
            let deleteButton = document.createElement("span");
            deleteButton.id = "sponsorTimeDeleteButton" + i;
            deleteButton.innerText = "Delete";
            deleteButton.className = "mediumLink popupElement";
            let index = i;
            deleteButton.addEventListener("click", () => deleteSponsorTime(index));
  
            let previewButton = document.createElement("span");
            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;
            editButton.innerText = "Edit";
            editButton.className = "mediumLink popupElement";
            editButton.addEventListener("click", () => editSponsorTime(index));
  
            for (let s = 0; s < sponsorTimes[i].length; s++) {
                let timeMessage = getFormattedTime(sponsorTimes[i][s]);
                //if this is an end time
                if (s == 1) {
                    timeMessage = " to " + timeMessage;
                } else if (i > 0) {
                    //add commas if necessary
                    timeMessage = timeMessage;
                }
  
                currentSponsorTimeMessage += timeMessage;
            }
  
            currentSponsorTimeContainer.innerText = currentSponsorTimeMessage;
  
            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
            return;
        }

        //hide submit button
        document.getElementById("submitTimesContainer").style.display = "none";
  
        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;
        startTimeMinutes.className = "sponsorTime popupElement";
        startTimeMinutes.type = "text";
        startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
        startTimeMinutes.style.width = "45px";
    
        let startTimeSeconds = document.createElement("input");
        startTimeSeconds.id = "startTimeSeconds" + index;
        startTimeSeconds.className = "sponsorTime popupElement";
        startTimeSeconds.type = "text";
        startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
        startTimeSeconds.style.width = "60px";

        let endTimeMinutes = document.createElement("input");
        endTimeMinutes.id = "endTimeMinutes" + index;
        endTimeMinutes.className = "sponsorTime popupElement";
        endTimeMinutes.type = "text";
        endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
        endTimeMinutes.style.width = "45px";
    
        let endTimeSeconds = document.createElement("input");
        endTimeSeconds.id = "endTimeSeconds" + index;
        endTimeSeconds.className = "sponsorTime popupElement";
        endTimeSeconds.type = "text";
        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 = ":";
  
        let toText = document.createElement("span");
        toText.innerText = " to ";
  
        //remove all children to replace
        while (sponsorTimeContainer.firstChild) {
            sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
        }
  
        sponsorTimeContainer.appendChild(startTimeNowButton);
        sponsorTimeContainer.appendChild(startTimeMinutes);
        sponsorTimeContainer.appendChild(colonText);
        sponsorTimeContainer.appendChild(startTimeSeconds);
        sponsorTimeContainer.appendChild(toText);
        sponsorTimeContainer.appendChild(endTimeMinutes);
        sponsorTimeContainer.appendChild(colonText);
        sponsorTimeContainer.appendChild(endTimeSeconds);
        sponsorTimeContainer.appendChild(endTimeNowButton);
  
        //add save button and remove edit button
        let saveButton = document.createElement("span");
        saveButton.id = "sponsorTimeSaveButton" + index;
        saveButton.innerText = "Save";
        saveButton.className = "mediumLink popupElement";
        saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
  
        let editButton = document.getElementById("sponsorTimeEditButton" + index);
        let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
  
        sponsorTimesContainer.replaceChild(saveButton, editButton);
    }

    function setEditTimeToCurrentTime(idStartName, index) {
        chrome.tabs.query({
            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);
    
                    minutes.value = getTimeInMinutes(response.currentTime);
                    seconds.value = getTimeInFormattedSeconds(response.currentTime);
                });
        });
    }

    //id start name is whether it is the startTime or endTime
    //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;
        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, tabs => {
                chrome.tabs.sendMessage(
                    tabs[0].id,
                    {message: "sponsorDataChanged"}
                );
            });
        });
  
        if (closeEditMode) {
            displaySponsorTimes();

            showSubmitTimesIfNecessary();
        }
    }
  
    //deletes the sponsor time submitted at an index
    function deleteSponsorTime(index) {
        //if it is not a complete sponsor time
        if (sponsorTimes[index].length < 2) {
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {
                    message: "changeStartSponsorButton",
                    showStartSponsor: true,
                    uploadButtonVisible: false
                });
            });
  
            resetStartTimeChosen();
        }
  
        sponsorTimes.splice(index, 1);
  
        //save this
        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, tabs => {
                chrome.tabs.sendMessage(
                    tabs[0].id,
                    {message: "sponsorDataChanged"}
                );
            });
        });
  
        //update display
        displaySponsorTimes();
  
        //if they are all removed
        if (sponsorTimes.length == 0) {
            //update chrome tab
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {
                    message: "changeStartSponsorButton",
                    showStartSponsor: true,
                    uploadButtonVisible: false
                });
            });
  
            //hide submission section
            document.getElementById("submissionSection").style.display = "none";
        }
    }
  
    function clearTimes() {
        //send new sponsor time state to tab
        if (sponsorTimes.length > 0) {
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {
                    message: "changeStartSponsorButton",
                    showStartSponsor: true,
                    uploadButtonVisible: false
                });
            });
        }
  
        //reset sponsorTimes
        sponsorTimes = [];
  
        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
            chrome.tabs.query({
                active: true,
                currentWindow: true
            }, tabs => {
                chrome.tabs.sendMessage(
                    tabs[0].id,
                    {message: "sponsorDataChanged"}
                );
            });
        });
  
        displaySponsorTimes();
  
        //hide submission section
        document.getElementById("submissionSection").style.display = "none";
  
        resetStartTimeChosen();
    }
  
    function submitTimes() {
        //make info message say loading
        SB.submitTimesInfoMessage.innerText = chrome.i18n.getMessage("Loading");
        SB.submitTimesInfoMessageContainer.style.display = "unset";
  
        if (sponsorTimes.length > 0) {
            chrome.runtime.sendMessage({
                message: "submitTimes",
                videoID: currentVideoID
            }, function(response) {
                if (response != undefined) {
                    if (response.statusCode == 200) {
                        //hide loading message
                        SB.submitTimesInfoMessageContainer.style.display = "none";

                        clearTimes();
                    } else {
                        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";

                        SB.submitTimesInfoMessageContainer.style.display = "unset";
                    }
                }
            });
        }
    }
  
    function showNoticeAgain() {
        chrome.storage.sync.set({"dontShowNotice": false});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "showNoticeAgain"
            });
        });
  
        SB.showNoticeAgain.style.display = "none";
    }
  
    function hideVideoPlayerControls() {
        chrome.storage.sync.set({"hideVideoPlayerControls": true});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "changeVideoPlayerControlsVisibility",
                value: true
            });
        });
  
        SB.hideVideoPlayerControls.style.display = "none";
        SB.showVideoPlayerControls.style.display = "unset";
    }
  
    function showVideoPlayerControls() {
        chrome.storage.sync.set({"hideVideoPlayerControls": false});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "changeVideoPlayerControlsVisibility",
                value: false
            });
        });
  
        SB.hideVideoPlayerControls.style.display = "unset";
        SB.showVideoPlayerControls.style.display = "none";
    }
  
    function hideInfoButtonPlayerControls() {
        chrome.storage.sync.set({"hideInfoButtonPlayerControls": true});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "changeInfoButtonPlayerControlsVisibility",
                value: true
            });
        });
  
        SB.hideInfoButtonPlayerControls.style.display = "none";
        SB.showInfoButtonPlayerControls.style.display = "unset";
    }
  
    function showInfoButtonPlayerControls() {
        chrome.storage.sync.set({"hideInfoButtonPlayerControls": false});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "changeVideoPlayerCochangeInfoButtonPlayerControlsVisibilityntrolsVisibility",
                value: false
            });
        });
  
        SB.hideInfoButtonPlayerControls.style.display = "unset";
        SB.showInfoButtonPlayerControls.style.display = "none";
    }
  
    function hideDeleteButtonPlayerControls() {
        chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "changeDeleteButtonPlayerControlsVisibility",
                value: true
            });
        });
  
        SB.hideDeleteButtonPlayerControls.style.display = "none";
        SB.showDeleteButtonPlayerControls.style.display = "unset";
    }
  
    function showDeleteButtonPlayerControls() {
        chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "changeVideoPlayerCochangeDeleteButtonPlayerControlsVisibilityntrolsVisibility",
                value: false
            });
        });
  
        SB.hideDeleteButtonPlayerControls.style.display = "unset";
        SB.showDeleteButtonPlayerControls.style.display = "none";
    }
  
    function disableSponsorViewTracking() {
        chrome.storage.sync.set({"trackViewCount": false});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "trackViewCount",
                value: false
            });
        });
  
        SB.disableSponsorViewTracking.style.display = "none";
        SB.enableSponsorViewTracking.style.display = "unset";
    }
  
    function enableSponsorViewTracking() {
        chrome.storage.sync.set({"trackViewCount": true});
  
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                message: "trackViewCount",
                value: true
            });
        });
  
        SB.enableSponsorViewTracking.style.display = "none";
        SB.disableSponsorViewTracking.style.display = "unset";
    }
  
    function updateStartTimeChosen() {
        //update startTimeChosen letiable
        if (!startTimeChosen) {
            startTimeChosen = true;
        SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
        } else {
            resetStartTimeChosen();
        }
    }
  
    //set it to false
    function resetStartTimeChosen() {
        startTimeChosen = false;
        SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorStart");
    }
  
    //hides and shows the submit times button when needed
    function showSubmitTimesIfNecessary() {
        //check if an end time has been specified for the latest sponsor time
        if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length > 1) {
            //show submit times button
            document.getElementById("submitTimesContainer").style.display = "unset";
        } else {
            //hide submit times button
            document.getElementById("submitTimesContainer").style.display = "none";
        }
    }
  
    //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").innerText = chrome.i18n.getMessage("noVideoID");
    }
  
    function reportAnIssue() {
        document.getElementById("issueReporterContainer").style.display = "unset";
        SB.reportAnIssue.style.display = "none";
    }
  
    function addVoteMessage(message, UUID) {
        let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
        //remove all children
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
  
        let thanksForVotingText = document.createElement("h2");
        thanksForVotingText.innerText = message;
        //there are already breaks there
        thanksForVotingText.style.marginBottom = "0px";
  
        container.appendChild(thanksForVotingText);
    }
  
    function vote(type, UUID) {
        //add loading info
        addVoteMessage("Loading...", UUID)
  
        //send the vote message to the tab
        chrome.runtime.sendMessage({
            message: "submitVote",
            type: type,
            UUID: UUID
        }, function(response) {
            if (response != undefined) {
                //see if it was a success or failure
                if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
                    //success (treat rate limits as a success)
                    addVoteMessage(chrome.i18n.getMessage("voted"), UUID)
                } else if (response.successType == 0) {
                    //failure: duplicate vote
                    addVoteMessage(chrome.i18n.getMessage("voteFail"), UUID)
                } else if (response.successType == -1) {
                    if (response.statusCode == 502) {
                        addVoteMessage(chrome.i18n.getMessage("serverDown"), UUID)
                    } else {
                        //failure: unknown error
                        addVoteMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID)
                    }
                }
            }
        });
    }
  
    function hideDiscordButton() {
        chrome.storage.sync.set({"hideDiscordLink": false});
  
        SB.discordButtonContainer.style.display = "none";
    }
  
    //converts time in seconds to minutes:seconds
    function getFormattedTime(seconds) {
        let minutes = Math.floor(seconds / 60);
        let secondsDisplay = Math.round(seconds - minutes * 60);
        if (secondsDisplay < 10) {
            //add a zero
            secondsDisplay = "0" + secondsDisplay;
        }
  
        let formatted = minutes+ ":" + secondsDisplay;
  
        return formatted;
    }

    function whitelistChannel() {
        //get the channel url
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, tabs => {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {message: 'getChannelURL'},
                function(response) {
                    //get whitelisted channels
                    chrome.storage.sync.get(["whitelistedChannels"], function(result) {
                        let whitelistedChannels = result.whitelistedChannels;
                        if (whitelistedChannels == undefined) {
                            whitelistedChannels = [];
                        }

                        //add on this channel
                        whitelistedChannels.push(response.channelURL);

                        //change button
                        SB.whitelistChannel.style.display = "none";
                        SB.unwhitelistChannel.style.display = "unset";

                        SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
                        SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";

                        //save this
                        chrome.storage.sync.set({whitelistedChannels: whitelistedChannels});

                        //send a message to the client
                        chrome.tabs.query({
                            active: true,
                            currentWindow: true
                        }, tabs => {
                            chrome.tabs.sendMessage(
                                tabs[0].id, {
                                    message: 'whitelistChange',
                                    value: true
                                });
                            }
                        );
                    });
                }
            );
        });
    }

    function unwhitelistChannel() {
        //get the channel url
        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, tabs => {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {message: 'getChannelURL'},
                function(response) {
                    //get whitelisted channels
                    chrome.storage.sync.get(["whitelistedChannels"], function(result) {
                        let whitelistedChannels = result.whitelistedChannels;
                        if (whitelistedChannels == undefined) {
                            whitelistedChannels = [];
                        }

                        //remove this channel
                        let index = whitelistedChannels.indexOf(response.channelURL);
                        whitelistedChannels.splice(index, 1);

                        //change button
                        SB.whitelistChannel.style.display = "unset";
                        SB.unwhitelistChannel.style.display = "none";

                        SB.downloadedSponsorMessageTimes.innerText = "";
                        SB.downloadedSponsorMessageTimes.style.fontWeight = "unset";

                        //save this
                        chrome.storage.sync.set({whitelistedChannels: whitelistedChannels});

                        //send a message to the client
                        chrome.tabs.query({
                            active: true,
                            currentWindow: true
                        }, tabs => {
                            chrome.tabs.sendMessage(
                                tabs[0].id, {
                                    message: 'whitelistChange',
                                    value: false
                                });
                            }
                        );
                    });
                }
            );
        });
    }

    function setKeybind(startSponsorKeybind) {
        document.getElementById("keybindButtons").style.display = "none";

        document.getElementById("keybindDescription").style.display = "initial";
        document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescription");

        setStartSponsorKeybind = startSponsorKeybind;

        document.addEventListener("keydown", onKeybindSet)
    }

    function onKeybindSet(e) {
        e = e || window.event;
        var key = e.key;

        if (setStartSponsorKeybind) {
            chrome.storage.sync.set({"startSponsorKeybind": key});
        } else {
            chrome.storage.sync.set({"submitKeybind": key});
        }

        document.removeEventListener("keydown", onKeybindSet);

        document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescriptionComplete") + " " + key;

        document.getElementById("keybindButtons").style.display = "unset";
    }

    //converts time in seconds to minutes
    function getTimeInMinutes(seconds) {
        let minutes = Math.floor(seconds / 60);
  
        return minutes;
    }
  
    //converts time in seconds to seconds past the last minute
    function getTimeInFormattedSeconds(seconds) {
        let secondsFormatted = (seconds % 60).toFixed(3);
  
        if (secondsFormatted < 10) {
            secondsFormatted = "0" + secondsFormatted;
        }
  
        return secondsFormatted;
    }
  
    function sendRequestToServer(type, address, callback) {
        let xmlhttp = new XMLHttpRequest();
  
        xmlhttp.open(type, serverAddress + address, true);
  
        if (callback != undefined) {
            xmlhttp.onreadystatechange = function () {
                callback(xmlhttp, false);
            };
    
            xmlhttp.onerror = function(ev) {
                callback(xmlhttp, true);
            };
        }
  
        //submit this request
        xmlhttp.send();
    }
  
//end of function
}

if (chrome.tabs != undefined) {
    //add the width restriction (because Firefox)
    document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 325 }', 0);

    //this means it is actually opened in the popup
    runThePopup();
}