Add skip button to popup for segments and chapters

This commit is contained in:
Ajay
2021-12-24 20:35:36 -05:00
parent 798fd8b3f3
commit 05153a152d
5 changed files with 61 additions and 9 deletions

View File

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

1
public/icons/skip.svg Normal file
View File

@@ -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>

After

Width:  |  Height:  |  Size: 196 B

View File

@@ -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) {

View File

@@ -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;

View File

@@ -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)
*/