Add skip button to popup for segments and chapters

manifest/manifest.json

@@ -47,6 +47,7 @@
         "icons/beep.ogg",
         "icons/pause.svg",
         "icons/stop.svg",
+        "icons/skip.svg",
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
         "popup.html",

public/icons/skip.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 0h24v24H0z" fill="none"/><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>

src/content.ts

@@ -198,13 +198,17 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             }));
 
             return true;
+        case "unskip":
+            unskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID));
+            break;
+        case "reskip":
+            reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID));
+            break;
     }
 }
 
 /**
  * Called when the config is updated
- * 
- * @param {String} changes 
  */
 function contentConfigUpdateListener(changes: StorageChangesObject) {
     for (const key in changes) {

src/messageTypes.ts

@@ -2,7 +2,7 @@
 // Message and Response Types
 //
 
-import { SponsorTime } from "./types";
+import { SegmentUUID, SponsorTime } from "./types";
 
 interface BaseMessage {
     from?: string;
@@ -29,7 +29,12 @@ interface IsInfoFoundMessage {
     updating: boolean;
 }
 
-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage);
+interface SkipMessage {
+    message: "unskip" | "reskip";
+    UUID: SegmentUUID;
+}
+
+export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage);
 
 export interface IsInfoFoundMessageResponse {
     found: boolean;

src/popup.ts

@@ -1,7 +1,7 @@
 import Config from "./config";
 
 import Utils from "./utils";
-import { SponsorTime, SponsorHideType, CategoryActionType, ActionType } from "./types";
+import { SponsorTime, SponsorHideType, CategoryActionType, ActionType, SegmentUUID } from "./types";
 import { Message, MessageResponse, IsInfoFoundMessageResponse } from "./messageTypes";
 import { showDonationLink } from "./utils/configUtils";
 import { getCategoryActionType } from "./utils/categoryUtils";
@@ -426,13 +426,15 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             for (let i = 0; i < segmentTimes.length; i++) {
                 const UUID = segmentTimes[i].UUID;
                 const locked = segmentTimes[i].locked;
+                const category = segmentTimes[i].category;
+                const actionType = segmentTimes[i].actionType;
 
                 const sponsorTimeButton = document.createElement("button");
                 sponsorTimeButton.className = "segmentTimeButton popupElement";
 
                 const categoryColorCircle = document.createElement("span");
                 categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
-                categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color;
+                categoryColorCircle.style.backgroundColor = Config.config.barTypes[category]?.color;
                 categoryColorCircle.classList.add("dot");
                 categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
 
@@ -445,16 +447,16 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
                 }
 
-                const name = segmentTimes[i].description || utils.shortCategoryName(segmentTimes[i].category);
+                const name = segmentTimes[i].description || utils.shortCategoryName(category);
                 const textNode = document.createTextNode(name + extraInfo);
                 const segmentTimeFromToNode = document.createElement("div");
                 segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + 
-                            (getCategoryActionType(segmentTimes[i].category) !== CategoryActionType.POI 
+                            (getCategoryActionType(category) !== CategoryActionType.POI 
                                 ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) 
                                 : "");
                 segmentTimeFromToNode.style.margin = "5px";
 
-                if (segmentTimes[i].actionType !== ActionType.Chapter) sponsorTimeButton.appendChild(categoryColorCircle);
+                if (actionType !== ActionType.Chapter) sponsorTimeButton.appendChild(categoryColorCircle);
                 sponsorTimeButton.appendChild(textNode);
                 sponsorTimeButton.appendChild(segmentTimeFromToNode);
 
@@ -490,10 +492,18 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     stopAnimation();
                 });
 
+                const skipButton = document.createElement("img");
+                skipButton.id = "sponsorTimesSkipButtonContainer" + UUID;
+                skipButton.className = "voteButton";
+                skipButton.src = chrome.runtime.getURL("icons/skip.svg");
+                skipButton.addEventListener("click", () => skipSegment(actionType, UUID, skipButton));
+                container.addEventListener("dblclick", () => skipSegment(actionType, UUID));
+
                 //add thumbs up, thumbs down and uuid copy buttons to the container
                 voteButtonsContainer.appendChild(upvoteButton);
                 voteButtonsContainer.appendChild(downvoteButton);
                 voteButtonsContainer.appendChild(uuidButton);
+                voteButtonsContainer.appendChild(skipButton);
 
                 //add click listener to open up vote panel
                 sponsorTimeButton.addEventListener("click", function () {
@@ -756,6 +766,37 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         );
     }
 
+    function skipSegment(actionType: ActionType, UUID: SegmentUUID, element?: HTMLElement): void {
+        if (actionType === ActionType.Chapter) {
+            sendMessage({
+                message: "unskip",
+                UUID: UUID
+            });
+        } else {
+            sendMessage({
+                message: "reskip",
+                UUID: UUID
+            });
+        }
+        
+        if (element) {
+            const stopAnimation = utils.applyLoadingAnimation(element, 0.3);
+            stopAnimation();
+        }
+    }
+
+    function sendMessage(request: Message): void {
+        messageHandler.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            messageHandler.sendMessage(
+                tabs[0].id,
+                request
+            );
+        });
+    }
+
     /**
      * Should skipping be disabled (visuals stay)
      */