Add refresh segments button

manifest/manifest.json

@@ -40,6 +40,7 @@
         "icons/help.svg",
         "icons/report.png",
         "icons/close.png",
+        "icons/refresh.svg",
         "icons/beep.ogg",
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",

public/_locales/en/messages.json

@@ -85,6 +85,9 @@
     "noVideoID": {
         "message": "No YouTube video found.\nIf this is incorrect, refresh the tab."
     },
+    "refreshSegments": {
+        "message": "Refresh segments"
+    },
     "success": {
         "message": "Success!"
     },

public/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>

public/popup.css

@@ -259,7 +259,7 @@ background-color:#ec1c1c;
   align-items: center;
 }
 
-#additionalButtons>button, button#setUsernameButton, #submitUsername {
+.sbSlimButton, #additionalButtons>button, button#setUsernameButton, #submitUsername {
   background: none;
   border: none;
   color: white;
@@ -321,12 +321,12 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
   margin-right: 8px;
 }
 
-#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer {
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
   display: flex;
   flex-flow: row nowrap;
 }
 
-#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
+.sbSlimButton, #whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
   cursor: pointer;
 }
 

public/popup.html

@@ -18,6 +18,9 @@
         <p id="loadingIndicator">__MSG_noVideoID__</p>
         <!-- If the video was found in the database -->
         <p id="videoFound"></p>
+        <button class="sbSlimButton" id="refreshSegmentsButton" title="__MSG_refreshSegments__">
+          <img id="refreshSegments" src="/icons/refresh.svg"/>
+        </button>
       </div>
       <div id="issueReporterContainer">
         <div id="issueReporterTimeButtons"></div>

src/content.ts

@@ -178,6 +178,9 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
         case "submitTimes":
             submitSponsorTimes();
             break;
+        case "refreshSegments":
+            sponsorsLookup(sponsorVideoID, false);
+            break;
     }
 }
 
@@ -209,6 +212,7 @@ function resetValues() {
     //reset sponsor times
     sponsorTimes = null;
     sponsorLookupRetries = 0;
+    sponsorSkipped = [];
 
     videoInfo = null;
     channelWhitelisted = false;
@@ -569,7 +573,7 @@ function setupVideoListeners() {
     }
 }
 
-async function sponsorsLookup(id: string) {
+async function sponsorsLookup(id: string, keepOldSubmissions = true) {
     if (!video) refreshVideoAttachments();
     //there is still no video here
     if (!video) {
@@ -606,7 +610,7 @@ async function sponsorsLookup(id: string) {
             sponsorDataFound = true;
 
             // Check if any old submissions should be kept
-            if (sponsorTimes !== null) {
+            if (sponsorTimes !== null && keepOldSubmissions) {
                 for (let i = 0; i < sponsorTimes.length; i++) {
                     if (sponsorTimes[i].source === SponsorSourceType.Local)  {
                         // This is a user submission, keep it
@@ -627,20 +631,19 @@ 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;
+            if (keepOldSubmissions) {
+                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
-            sponsorSkipped = [];
-
             //update the preview bar
             //leave the type blank for now until categories are added
             if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(video.duration))) {
@@ -1408,11 +1411,12 @@ function openInfoMenu() {
             const settings = <HTMLImageElement> popup.querySelector("#sbPopupIconSettings");
             const edit = <HTMLImageElement> popup.querySelector("#sbPopupIconEdit");
             const check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck");
+            const refreshSegments = <HTMLImageElement> popup.querySelector("#refreshSegments");
             logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
             settings.src = chrome.extension.getURL("icons/settings.svg");
             edit.src = chrome.extension.getURL("icons/pencil.svg");
             check.src = chrome.extension.getURL("icons/check.svg");
-            check.src = chrome.extension.getURL("icons/thumb.svg");
+            refreshSegments.src = chrome.extension.getURL("icons/refresh.svg");
 
             parentNode.insertBefore(popup, parentNode.firstChild);
 

src/messageTypes.ts

@@ -16,7 +16,8 @@ interface DefaultMessage {
         | "getVideoID"
         | "getChannelID"
         | "isChannelWhitelisted"
-        | "submitTimes";
+        | "submitTimes"
+        | "refreshSegments";
 }
 
 interface BoolValueMessage {

src/popup.ts

@@ -102,6 +102,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "videoFound",
         "sponsorMessageTimes",
         //"downloadedSponsorMessageTimes",
+        "refreshSegmentsButton",
         "whitelistButton",
         "sbDonate"
     ].forEach(id => PageElements[id] = document.getElementById(id));
@@ -131,6 +132,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     PageElements.submitUsername.addEventListener("click", submitUsername);
     PageElements.optionsButton.addEventListener("click", openOptions);
     PageElements.helpButton.addEventListener("click", openHelp);
+    PageElements.refreshSegmentsButton.addEventListener("click", refreshSegments);
 
     /** If true, the content script is in the process of creating a new segment. */
     let creatingSegment = false;
@@ -676,6 +678,18 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         });
     }
 
+    function refreshSegments() {
+        messageHandler.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            messageHandler.sendMessage(
+                tabs[0].id,
+                {message: 'refreshSegments'}
+            )}
+        );
+    }
+
     /**
      * Should skipping be disabled (visuals stay)
      */