Increase version number

https://github.com/ajayyy/SponsorBlock/issues/667

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+patreon: ajayyy
+custom: [sponsor.ajay.app/donate]

.github/pull_request_template.md

@@ -1 +1,5 @@
 - [ ] I agree to license my contribution under LGPL-3.0 **or** my contribution is from another project with a license compatible with LGPL-3.0
+
+To test this pull request, follow the [instructions in the wiki](https://github.com/ajayyy/SponsorBlock/wiki/Testing-a-Pull-Request).
+
+***

README.md

@@ -52,7 +52,7 @@ The backend server code is available here: https://github.com/ajayyy/SponsorBloc
 
 To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database ([License](https://github.com/ajayyy/SponsorBlock/wiki/Database-and-API-License)). If you are planning on using the database in another project, please read the [API Docs](https://github.com/ajayyy/SponsorBlock/wiki/API-Docs) page for more information.
 
-The dataset and API are now being used in some [ports](https://github.com/ajayyy/SponsorBlock/wiki/Unofficial-Ports) as well as a [neural network](https://github.com/andrewzlee/NeuralBlock).
+The dataset and API are now being used in some [ports](https://github.com/ajayyy/SponsorBlock/wiki/3rd-Party-Ports) as well as a [neural network](https://github.com/andrewzlee/NeuralBlock).
 
 # API
 

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "2.0.16.1",
+    "version": "2.0.17",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "content_scripts": [{

public/_locales/en/messages.json

@@ -239,7 +239,7 @@
         "message": "Set key for skipping a segment"
     },
     "setStartSponsorShortcut": {
-        "message": "Set key for start segment keybind"
+        "message": "Set key for start/stop segment keybind"
     },
     "setSubmitKeybind": {
         "message": "Set key for submission keybind"

public/popup.css

@@ -10,6 +10,14 @@
   display: none !important;
 }
 
+.sponsorTimesCategoryColorCircle {
+  margin: 0 8px;
+}
+
+.voteButtonsContainer--hide {
+  display: none;
+}
+
 @media only screen and (max-width: 600px) {
   #sponsorBlockPopupBody {
     width: 100%; 
@@ -43,6 +51,7 @@
   outline: none;
 
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .dot {
@@ -277,8 +286,6 @@ background-color:#ec1c1c;
   min-height: 16px;
   margin-top: auto;
   margin-bottom: auto;
-
-  height: 100%;
 }
 
 .SBWhitelistIcon>path {

public/popup.html

@@ -136,7 +136,7 @@
       <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
       <br/>
       <a href="https://discord.gg/QnmVMpU" target="_blank" rel="noopener">Discord</a> |
-      <a href="https://matrix.to/#/+sponsorblock:ajay.app" target="_blank" rel="noopener">Matrix</a> |
+      <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a> |
       <a id="helpButton" style="cursor: pointer;">__MSG_help__</a> |
       <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">$</a>
     </footer>

src/components/CategorySkipOptionsComponent.tsx

@@ -21,8 +21,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
 
         // Setup state
         this.state = {
-            color: props.defaultColor || Config.config.barTypes[this.props.category].color,
-            previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category].color,
+            color: props.defaultColor || Config.config.barTypes[this.props.category]?.color,
+            previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category]?.color,
         }
     }
 

src/content.ts

@@ -568,22 +568,12 @@ async function sponsorsLookup(id: string) {
         categories
     }).then(async (response: FetchResponse) => {
         if (response?.ok) {
-            let result = JSON.parse(response.responseText);
-            result = result.filter((video) => video.videoID === id);
-            if (result.length > 0) {
-                result = result[0].segments;
-                if (result.length === 0) { // return if no segments found
-                    retryFetch(id);
-                    return;
-                }
-            } else { // return if no video found
-                retryFetch(id);
-                return;
-            }
-
-            const recievedSegments: SponsorTime[] = result;
-            if (!recievedSegments.length) {
-                console.error("[SponsorBlock] Server returned malformed response: " + JSON.stringify(recievedSegments));
+            const recievedSegments: SponsorTime[] = JSON.parse(response.responseText)
+                        ?.filter((video) => video.videoID === id)
+                        ?.map((video) => video.segments)[0];
+            if (!recievedSegments || !recievedSegments.length) { 
+                // return if no video found
+                retryFetch();
                 return;
             }
 
@@ -599,6 +589,7 @@ async function sponsorsLookup(id: string) {
                 }
             }
 
+            const oldSegments = sponsorTimes;
             sponsorTimes = recievedSegments;
 
             // Hide all submissions smaller than the minimum duration
@@ -610,6 +601,15 @@ async function sponsorsLookup(id: string) {
                 }
             }
 
+            for (const segment of oldSegments) {
+                const otherSegment = sponsorTimes.find((other) => segment.UUID === other.UUID);
+                if (otherSegment) {
+                    // If they downvoted it, or changed the category, keep it
+                    otherSegment.hidden = segment.hidden;
+                    otherSegment.category = segment.category;
+                }
+            }
+
             startSkipScheduleCheckingForStartSponsors();
 
             // Reset skip save
@@ -625,20 +625,24 @@ async function sponsorsLookup(id: string) {
 
             sponsorLookupRetries = 0;
         } else if (response?.status === 404) {
-            retryFetch(id);
+            retryFetch();
         } else if (sponsorLookupRetries < 15 && !recheckStarted) {
             recheckStarted = true;
 
             //TODO lower when server becomes better (back to 1 second)
             //some error occurred, try again in a second
-            setTimeout(() => sponsorsLookup(id), 5000 + Math.random() * 15000 + 5000 * sponsorLookupRetries);
+            setTimeout(() => {
+                if (sponsorVideoID && sponsorTimes?.length === 0) {
+                    sponsorsLookup(sponsorVideoID);
+                }
+            }, 5000 + Math.random() * 15000 + 5000 * sponsorLookupRetries);
 
             sponsorLookupRetries++;
         }
     });
 }
 
-function retryFetch(id: string): void {
+function retryFetch(): void {
     if (!Config.config.refetchWhenNotFound) return;
 
     sponsorDataFound = false;
@@ -649,7 +653,11 @@ function retryFetch(id: string): void {
 
         //if less than 3 days old
         if (Date.now() - new Date(dateUploaded).getTime() < 259200000) {
-            setTimeout(() => sponsorsLookup(id), 30000 + Math.random() * 90000);
+            setTimeout(() => {
+                if (sponsorVideoID && sponsorTimes?.length === 0) {
+                    sponsorsLookup(sponsorVideoID);
+                }
+            }, 10000 + Math.random() * 30000);
         }
     });
 
@@ -1081,8 +1089,8 @@ async function createButtons(): Promise<void> {
     controls = await utils.wait(getControls).catch();
 
     // Add button if does not already exist in html
-    createButton("startSponsor", "sponsorStart", () => closeInfoMenuAnd(() => startOrEndTimingNewSegment()), "PlayerStartIconSponsorBlocker.svg");
-    createButton("cancelSponsor", "sponsorCancel", () => closeInfoMenuAnd(() => cancelCreatingSegment()), "PlayerCancelSegmentIconSponsorBlocker.svg");
+    createButton("startSegment", "sponsorStart", () => closeInfoMenuAnd(() => startOrEndTimingNewSegment()), "PlayerStartIconSponsorBlocker.svg");
+    createButton("cancelSegment", "sponsorCancel", () => closeInfoMenuAnd(() => cancelCreatingSegment()), "PlayerCancelSegmentIconSponsorBlocker.svg");
     createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
     createButton("delete", "clearTimes", () => closeInfoMenuAnd(() => clearSponsorTimes()), "PlayerDeleteIconSponsorBlocker.svg");
     createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker.svg");
@@ -1128,16 +1136,16 @@ function updateEditButtonsOnPlayer(): void {
     }
 
     // Update the elements
-    playerButtons.startSponsor.button.style.display = buttonsEnabled ? "unset" : "none";
-    playerButtons.cancelSponsor.button.style.display = buttonsEnabled && creatingSegment ? "unset" : "none";
+    playerButtons.startSegment.button.style.display = buttonsEnabled ? "unset" : "none";
+    playerButtons.cancelSegment.button.style.display = buttonsEnabled && creatingSegment ? "unset" : "none";
 
     if (buttonsEnabled) {
         if (creatingSegment) {
-            playerButtons.startSponsor.image.src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker.svg");
-            playerButtons.startSponsor.button.setAttribute("title", chrome.i18n.getMessage("sponsorEnd"));
+            playerButtons.startSegment.image.src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker.svg");
+            playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorEnd"));
         } else {
-            playerButtons.startSponsor.image.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker.svg");
-            playerButtons.startSponsor.button.setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
+            playerButtons.startSegment.image.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker.svg");
+            playerButtons.startSegment.button.setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
         }
     }
 
@@ -1183,6 +1191,9 @@ function startOrEndTimingNewSegment() {
     // Save the newly created segment
     Config.config.segmentTimes.set(sponsorVideoID, sponsorTimesSubmitting);
 
+    // Make sure they know if someone has already submitted something it while they were watching
+    sponsorsLookup(sponsorVideoID);
+
     updateEditButtonsOnPlayer();
     updateSponsorTimesSubmitting(false);
 }
@@ -1201,6 +1212,8 @@ function cancelCreatingSegment() {
     if (isSegmentCreationInProgress()) {
         sponsorTimesSubmitting.splice(sponsorTimesSubmitting.length - 1, 1);
         Config.config.segmentTimes.set(sponsorVideoID, sponsorTimesSubmitting);
+
+        if (sponsorTimesSubmitting.length <= 0) resetSponsorSubmissionNotice();
     }
 
     updateEditButtonsOnPlayer();
@@ -1335,6 +1348,8 @@ function clearSponsorTimes() {
                                 + "\n" + chrome.i18n.getMessage("confirmMSG")
         if(!confirm(confirmMessage)) return;
 
+        resetSponsorSubmissionNotice();
+
         //clear the sponsor times
         Config.config.segmentTimes.delete(currentVideoID);
 
@@ -1342,7 +1357,6 @@ function clearSponsorTimes() {
         sponsorTimesSubmitting = [];
 
         updatePreviewBar();
-
         updateEditButtonsOnPlayer();
     }
 }
@@ -1413,6 +1427,7 @@ function dontShowNoticeAgain() {
  * Helper method for the submission notice to clear itself when it closes
  */
 function resetSponsorSubmissionNotice() {
+    submissionNotice?.close();
     submissionNotice = null;
 }
 

src/js-components/previewBar.ts

@@ -194,7 +194,7 @@ class PreviewBar {
 
         bar.setAttribute('data-vs-segment-type', barSegmentType);
 
-        bar.style.backgroundColor = Config.config.barTypes[barSegmentType].color;
+        bar.style.backgroundColor = Config.config.barTypes[barSegmentType]?.color;
         if (!this.onMobileYouTube) bar.style.opacity = Config.config.barTypes[barSegmentType].opacity;
 
         bar.style.position = "absolute";

src/popup.ts

@@ -372,7 +372,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 const sponsorTimeButton = document.createElement("button");
                 sponsorTimeButton.className = "segmentTimeButton popupElement";
 
-                const prefix = utils.shortCategoryName(segmentTimes[i].category) + ": ";
+                const categoryColorCircle = document.createElement("span");
+                categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
+                categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color;
+                categoryColorCircle.classList.add("dot");
+                categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
                 
                 let extraInfo = "";
                 if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
@@ -383,13 +387,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
                 }
                 
-                sponsorTimeButton.innerText = prefix + utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) + extraInfo;
+                const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo);
+                const segmentTimeFromToNode = document.createElement("div");
+                segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true);
+                segmentTimeFromToNode.style.margin = "5px";
 
-                const categoryColorCircle = document.createElement("span");
-                categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
-                categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category].color;
-                categoryColorCircle.classList.add("dot");
-                categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
+                sponsorTimeButton.appendChild(categoryColorCircle);
+                sponsorTimeButton.appendChild(textNode);
+                sponsorTimeButton.appendChild(segmentTimeFromToNode);
 
                 const votingButtons = document.createElement("div");
                 votingButtons.classList.add("votingButtons");
@@ -398,7 +403,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 const voteButtonsContainer = document.createElement("div");
                 voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
                 voteButtonsContainer.setAttribute("align", "center");
-                voteButtonsContainer.style.display = "none"
+                voteButtonsContainer.classList.add('voteButtonsContainer--hide');
 
                 const upvoteButton = document.createElement("img");
                 upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -427,7 +432,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
                 //add click listener to open up vote panel
                 sponsorTimeButton.addEventListener("click", function() {
-                    voteButtonsContainer.style.removeProperty("display");
+                    voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
                 });
 
                 // Will contain request status
@@ -441,7 +446,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
                 voteStatusContainer.appendChild(thanksForVotingText);
 
-                votingButtons.append(categoryColorCircle);
                 votingButtons.append(sponsorTimeButton);
                 votingButtons.append(voteButtonsContainer);
                 votingButtons.append(voteStatusContainer);