From 05153a152d35def07cee9f616afff22d9b2c11cd Mon Sep 17 00:00:00 2001 From: Ajay Date: Fri, 24 Dec 2021 20:35:36 -0500 Subject: [PATCH] Add skip button to popup for segments and chapters --- manifest/manifest.json | 1 + public/icons/skip.svg | 1 + src/content.ts | 8 +++++-- src/messageTypes.ts | 9 ++++++-- src/popup.ts | 51 +++++++++++++++++++++++++++++++++++++----- 5 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 public/icons/skip.svg diff --git a/manifest/manifest.json b/manifest/manifest.json index 74f5e48d..2f6a536c 100644 --- a/manifest/manifest.json +++ b/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", diff --git a/public/icons/skip.svg b/public/icons/skip.svg new file mode 100644 index 00000000..774e741c --- /dev/null +++ b/public/icons/skip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/content.ts b/src/content.ts index 2104ea40..81bad72b 100644 --- a/src/content.ts +++ b/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) { diff --git a/src/messageTypes.ts b/src/messageTypes.ts index 4989c741..5f6f25c2 100644 --- a/src/messageTypes.ts +++ b/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; diff --git a/src/popup.ts b/src/popup.ts index ad018620..26c6c287 100644 --- a/src/popup.ts +++ b/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 { 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 { 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 { 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 { ); } + 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) */