Add segment hiding in popup

8 files changed, 99 insertions, 6 deletions

diff --git a/manifest/manifest.json b/manifest/manifest.json
index 1e55202b..f3a44ac8 100644
--- a/manifest/manifest.json
+++ b/manifest/manifest.json
@@ -48,6 +48,8 @@
         "icons/pause.svg",
         "icons/stop.svg",
         "icons/heart.svg",
+        "icons/visible.svg",
+        "icons/not_visible.svg",
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
         "popup.html",
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 147069f9..1f1c7a72 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -701,6 +701,9 @@
     "hiddenDueToDuration": {
         "message": "hidden: too short"
     },
+    "manuallyHidden": {
+        "message": "manually hidden"
+    },
     "channelDataNotFound": {
         "description": "This error appears in an alert when they try to whitelist a channel and the extension is unable to determine what channel they are looking at.",
         "message": "Channel ID is not loaded yet. If you are using an embedded video, try using the YouTube homepage instead. This could also be caused by changes in the YouTube layout, if you think so, make a comment here:"
diff --git a/public/icons/not_visible.svg b/public/icons/not_visible.svg
new file mode 100644
index 00000000..7101dad1
--- /dev/null
+++ b/public/icons/not_visible.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="not_visible.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="16.458334"
+     inkscape:cx="3.8582278"
+     inkscape:cy="9.1443037"
+     inkscape:window-width="1920"
+     inkscape:window-height="983"
+     inkscape:window-x="426"
+     inkscape:window-y="768"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>
diff --git a/public/icons/visible.svg b/public/icons/visible.svg
new file mode 100644
index 00000000..1f1beccc
--- /dev/null
+++ b/public/icons/visible.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="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
\ No newline at end of file
diff --git a/src/content.ts b/src/content.ts
index 17e56dc5..40c2a74c 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -207,6 +207,11 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
         case "submitVote":
             vote(request.type, request.UUID).then((response) => sendResponse(response));
             return true;
+        case "hideSegment":
+            utils.getSponsorTimeFromUUID(sponsorTimes, request.UUID).hidden = request.type;
+            updatePreviewBar();
+            break;
+
     }
 }
 
diff --git a/src/messageTypes.ts b/src/messageTypes.ts
index 8bee75f8..adabbee5 100644
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -2,7 +2,7 @@
 // Message and Response Types
 //
 
-import { SegmentUUID, SponsorTime } from "./types";
+import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
 
 interface BaseMessage {
     from?: string;
@@ -29,13 +29,19 @@ interface IsInfoFoundMessage {
     updating: boolean;
 }
 
-interface submitVoteMessage {
+interface SubmitVoteMessage {
     message: "submitVote";
     type: number;
     UUID: SegmentUUID;
 }
 
-export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | submitVoteMessage);
+interface HideSegmentMessage {
+    message: "hideSegment";
+    type: SponsorHideType;
+    UUID: SegmentUUID;
+}
+
+export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SubmitVoteMessage | HideSegmentMessage);
 
 export interface IsInfoFoundMessageResponse {
     found: boolean;
diff --git a/src/popup.ts b/src/popup.ts
index 3ee10c0b..c44281e0 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -425,6 +425,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 } else if (segmentTimes[i].hidden === SponsorHideType.MinimumDuration) {
                     //this one is too short
                     extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
+                } else if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
+                    extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
                 }
 
                 const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo);
@@ -465,8 +467,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 downvoteButton.src = locked && isVip ? chrome.runtime.getURL("icons/thumbs_down_locked.svg") : chrome.runtime.getURL("icons/thumbs_down.svg");
                 downvoteButton.addEventListener("click", () => vote(0, UUID));
 
-                //uuid button
-
                 const uuidButton = document.createElement("img");
                 uuidButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID;
                 uuidButton.className = "voteButton";
@@ -477,10 +477,46 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     stopAnimation();
                 });
 
+                const hideButton = document.createElement("img");
+                hideButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID;
+                hideButton.className = "voteButton";
+                if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
+                    hideButton.src = chrome.runtime.getURL("icons/not_visible.svg");
+                } else {
+                    hideButton.src = chrome.runtime.getURL("icons/visible.svg");
+                }
+                hideButton.addEventListener("click", () => {
+                    if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
+                        hideButton.src = chrome.runtime.getURL("icons/visible.svg");
+                        segmentTimes[i].hidden = SponsorHideType.Visible;
+                    } else {
+                        hideButton.src = chrome.runtime.getURL("icons/not_visible.svg");
+                        segmentTimes[i].hidden = SponsorHideType.Hidden;
+                    }
+
+                    messageHandler.query({
+                        active: true,
+                        currentWindow: true
+                    }, tabs => {
+                        messageHandler.sendMessage(
+                            tabs[0].id,
+                            {
+                                message: "hideSegment",
+                                type: segmentTimes[i].hidden,
+                                UUID: UUID
+                            }
+                        );
+                    });
+                });
+
                 //add thumbs up, thumbs down and uuid copy buttons to the container
                 voteButtonsContainer.appendChild(upvoteButton);
                 voteButtonsContainer.appendChild(downvoteButton);
                 voteButtonsContainer.appendChild(uuidButton);
+                if (segmentTimes[i].actionType === ActionType.Skip 
+                        && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segmentTimes[i].hidden)) {
+                    voteButtonsContainer.appendChild(hideButton);
+                }
 
                 //add click listener to open up vote panel
                 sponsorTimeButton.addEventListener("click", function () {
diff --git a/src/types.ts b/src/types.ts
index bcace06d..e2541c8e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -51,7 +51,8 @@ export interface CategorySelection {
 export enum SponsorHideType {
     Visible = undefined,
     Downvoted = 1,
-    MinimumDuration
+    MinimumDuration,
+    Hidden,
 }
 
 export enum ActionType {