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