mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-12 06:27:14 +03:00
Add skip button to popup for segments and chapters
This commit is contained in:
@@ -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
1
public/icons/skip.svg
Normal 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 |
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
51
src/popup.ts
51
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)
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user