diff --git a/content.css b/content.css index c4e8e7bf..933eb40f 100644 --- a/content.css +++ b/content.css @@ -1,3 +1,15 @@ +.popup { + z-index: 10; + width: 100%; + height: 500px; +} + +.smallLink { + font-size: 10px; + text-decoration: underline; + cursor: pointer; +} + .playerButtonImage { height: 60%; top: 0; diff --git a/content.js b/content.js index dd75b772..e41cefc8 100644 --- a/content.js +++ b/content.js @@ -32,6 +32,10 @@ var showingStartSponsor = true; //should the video controls buttons be added var hideVideoPlayerControls = false; +//becomes true when isInfoFound is called +//this is used to close the popup on YouTube when the other popup opens +var popupInitialised = false; + //should view counts be tracked var trackViewCount = false; chrome.storage.sync.get(["trackViewCount"], function(result) { @@ -55,7 +59,6 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) { chrome.runtime.onMessage.addListener( // Detect URL Changes function(request, sender, sendResponse) { - console.log(request.message) //message from background script if (request.message == "ytvideoid") { videoIDChange(request.id); @@ -63,7 +66,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes //messages from popup script if (request.message == "sponsorStart") { - sponsorMessageStarted(); + sponsorMessageStarted(sendResponse); } if (request.message == "isInfoFound") { @@ -72,7 +75,14 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes found: sponsorDataFound, sponsorTimes: sponsorTimes, UUIDs: UUIDs - }) + }); + + if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) { + //the popup should be closed now that another is opening + closeInfoMenu(); + } + + popupInitialised = true; } if (request.message == "getVideoID") { @@ -286,6 +296,7 @@ function removePlayerControlsButton() { //adds or removes the player controls button to what it should be function updateVisibilityOfPlayerControlsButton() { addPlayerControlsButton(); + addInfoButton(); addSubmitButton(); if (hideVideoPlayerControls) { removePlayerControlsButton(); @@ -293,6 +304,9 @@ function updateVisibilityOfPlayerControlsButton() { } function startSponsorClicked() { + //it can't update to this info yet + closeInfoMenu(); + toggleStartSponsorButton(); //send back current time with message @@ -329,6 +343,32 @@ function toggleStartSponsorButton() { changeStartSponsorButton(!showingStartSponsor, true); } +//shows the info button on the video player +function addInfoButton() { + if (document.getElementById("infoButton") != null) { + //it's already added + return; + } + + //make a submit button + let infoButton = document.createElement("button"); + infoButton.id = "infoButton"; + infoButton.className = "ytp-button playerButton"; + infoButton.setAttribute("title", "Open SponsorBlock Popup"); + infoButton.addEventListener("click", openInfoMenu); + + let infoImage = document.createElement("img"); + infoImage.id = "infoButtonImage"; + infoImage.className = "playerButtonImage"; + infoImage.src = chrome.extension.getURL("icons/PlayerInfoIconSponsorBlocker256px.png"); + + //add the image to the button + infoButton.appendChild(infoImage); + + let referenceNode = document.getElementsByClassName("ytp-right-controls")[0]; + referenceNode.prepend(infoButton); +} + //shows the submit button on the video player function addSubmitButton() { if (document.getElementById("submitButton") != null) { @@ -357,6 +397,50 @@ function addSubmitButton() { referenceNode.prepend(submitButton); } +function openInfoMenu() { + if (document.getElementById("sponsorBlockPopupContainer") != null) { + //it's already added + return; + } + + popupInitialised = false; + + //hide info button + document.getElementById("infoButton").style.display = "none"; + + let popup = document.createElement("div"); + popup.id = "sponsorBlockPopupContainer"; + + let popupFrame = document.createElement("iframe"); + popupFrame.id = "sponsorBlockPopupFrame" + popupFrame.src = chrome.extension.getURL("popup.html"); + popupFrame.className = "popup"; + + //close button + let closeButton = document.createElement("div"); + closeButton.innerText = "Close Popup"; + closeButton.classList = "smallLink"; + closeButton.setAttribute("align", "center"); + closeButton.addEventListener("click", closeInfoMenu); + + popup.appendChild(closeButton); + popup.appendChild(popupFrame); + + let parentNode = document.getElementById("secondary"); + + parentNode.prepend(popup); +} + +function closeInfoMenu() { + let popup = document.getElementById("sponsorBlockPopupContainer"); + if (popup != null) { + popup.remove(); + + //show info button + document.getElementById("infoButton").style.display = "unset"; + } +} + //Opens the notice that tells the user that a sponsor was just skipped function openSkipNotice(UUID){ if (dontShowNotice) { @@ -593,14 +677,13 @@ function dontShowNoticeAgain() { closeAllSkipNotices(); } -function sponsorMessageStarted() { +function sponsorMessageStarted(callback) { let v = document.querySelector('video'); //send back current time - chrome.runtime.sendMessage({ - message: "time", + callback({ time: v.currentTime - }); + }) //update button toggleStartSponsorButton(); @@ -612,6 +695,9 @@ function submitSponsorTimes() { return; } + //it can't update to this info yet + closeInfoMenu(); + let currentVideoID = getYouTubeVideoID(document.URL); let sponsorTimeKey = 'sponsorTimes' + currentVideoID; diff --git a/firefox_manifest.json b/firefox_manifest.json index 4c2a0bad..0fb7e834 100644 --- a/firefox_manifest.json +++ b/firefox_manifest.json @@ -26,7 +26,8 @@ "icons/PlayerUploadIconSponsorBlocker256px.png", "icons/PlayerUploadFailedIconSponsorBlocker256px.png", "icons/upvote.png", - "icons/downvote.png" + "icons/downvote.png", + "icons/PlayerInfoIconSponsorBlocker256px.png" ], "permissions": [ "tabs", diff --git a/icons/PlayerInfoIconSponsorBlocker256px.png b/icons/PlayerInfoIconSponsorBlocker256px.png new file mode 100644 index 00000000..8a0e44a7 Binary files /dev/null and b/icons/PlayerInfoIconSponsorBlocker256px.png differ diff --git a/manifest.json b/manifest.json index 9e4720b3..42a9bc0e 100644 --- a/manifest.json +++ b/manifest.json @@ -26,7 +26,9 @@ "icons/PlayerUploadIconSponsorBlocker256px.png", "icons/PlayerUploadFailedIconSponsorBlocker256px.png", "icons/upvote.png", - "icons/downvote.png" + "icons/downvote.png", + "icons/PlayerInfoIconSponsorBlocker256px.png", + "popup.html" ], "permissions": [ "tabs", diff --git a/popup.css b/popup.css index fd3d33d3..d8053170 100644 --- a/popup.css +++ b/popup.css @@ -8,7 +8,7 @@ h1 { body { font-size: 14px; - width: 300px; + min-width: 300px; background-color: #ffd9d9; } diff --git a/popup.js b/popup.js index f0618f52..98fb095d 100644 --- a/popup.js +++ b/popup.js @@ -220,35 +220,34 @@ function sendSponsorStartMessage() { }, tabs => { chrome.tabs.sendMessage( tabs[0].id, - {from: 'popup', message: 'sponsorStart'} + {from: 'popup', message: 'sponsorStart'}, + startSponsorCallback ); }); } -chrome.runtime.onMessage.addListener(function (request, sender, callback) { - if (request.message == "time") { - let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0); +function startSponsorCallback(response) { + let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0); - if (sponsorTimes[sponsorTimesIndex] == undefined) { - sponsorTimes[sponsorTimesIndex] = []; - } - - sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.time; - - let sponsorTimeKey = "sponsorTimes" + currentVideoID; - chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}); - - updateStartTimeChosen(); - - //display video times on screen - displaySponsorTimes(); - - //show submission section - document.getElementById("submissionSection").style.display = "unset"; - - showSubmitTimesIfNecessary(); + if (sponsorTimes[sponsorTimesIndex] == undefined) { + sponsorTimes[sponsorTimesIndex] = []; } -}); + + sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time; + + let sponsorTimeKey = "sponsorTimes" + currentVideoID; + chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}); + + updateStartTimeChosen(); + + //display video times on screen + displaySponsorTimes(); + + //show submission section + document.getElementById("submissionSection").style.display = "unset"; + + showSubmitTimesIfNecessary(); +} //display the video times from the array function displaySponsorTimes() {