Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2026-01-29 05:40:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor segment expanding to use <details>

Browse Source
This commit is contained in:
Alec Rust
2022-03-12 11:57:15 +00:00
parent 6bb265939a
commit ced30c711e
2 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/popup.css
View File

@@ -79,18 +79,26 @@
} }
/* /*
* Individual segments (<button> elements) * <details> wrapper around each segment
*/ */
.segmentTimeButton { .votingButtons[open] {
background: transparent; padding-bottom: 5px;
border: 0; }
.votingButtons:hover {
background-color: var(--sb-grey-bg-color);
}
/*
* Individual segments summaries (clickable <summary>)
*/
.segmentSummary {
cursor: pointer; cursor: pointer;
color: var(--sb-main-fg-color);
font-weight: bold; font-weight: bold;
padding: 7px; padding: 7px;
outline: none; list-style: none;
width: 100%;
white-space: nowrap; white-space: nowrap;
} }
@@ -501,7 +509,3 @@
#sponsorBlockPopupBody .hidden { #sponsorBlockPopupBody .hidden {
display: none !important; display: none !important;
} }
.voteButtonsContainer--hide {
display: none;
}

34
src/popup.ts
View File

@@ -238,7 +238,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.sbConsiderDonateLink.addEventListener("click", () => { PageElements.sbConsiderDonateLink.addEventListener("click", () => {
Config.config.donateClicked = Config.config.donateClicked + 1; Config.config.donateClicked = Config.config.donateClicked + 1;
}); });
PageElements.sbCloseDonate.addEventListener("click", () => { PageElements.sbCloseDonate.addEventListener("click", () => {
PageElements.sponsorTimesDonateContainer.style.display = "none"; PageElements.sponsorTimesDonateContainer.style.display = "none";
Config.config.showPopupDonationCount = 100; Config.config.showPopupDonationCount = 100;
@@ -393,8 +393,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
const UUID = segmentTimes[i].UUID; const UUID = segmentTimes[i].UUID;
const locked = segmentTimes[i].locked; const locked = segmentTimes[i].locked;
const sponsorTimeButton = document.createElement("button"); const segmentSummary = document.createElement("summary");
sponsorTimeButton.className = "segmentTimeButton popupElement"; segmentSummary.className = "segmentSummary";
const categoryColorCircle = document.createElement("span"); const categoryColorCircle = document.createElement("span");
categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID; categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
@@ -418,26 +418,25 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
if (segmentTimes[i].actionType === ActionType.Full) { if (segmentTimes[i].actionType === ActionType.Full) {
segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full"); segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
} else { } else {
segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
(segmentTimes[i].actionType !== ActionType.Poi (segmentTimes[i].actionType !== ActionType.Poi
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
: ""); : "");
} }
segmentTimeFromToNode.style.margin = "5px"; segmentTimeFromToNode.style.margin = "5px";
sponsorTimeButton.appendChild(categoryColorCircle); segmentSummary.appendChild(categoryColorCircle);
sponsorTimeButton.appendChild(textNode); segmentSummary.appendChild(textNode);
sponsorTimeButton.appendChild(segmentTimeFromToNode); segmentSummary.appendChild(segmentTimeFromToNode);
const votingButtons = document.createElement("div"); const votingButtons = document.createElement("details");
votingButtons.classList.add("votingButtons"); votingButtons.classList.add("votingButtons");
//thumbs up and down buttons //thumbs up and down buttons
const voteButtonsContainer = document.createElement("div"); const voteButtonsContainer = document.createElement("div");
voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID; voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
voteButtonsContainer.setAttribute("align", "center"); voteButtonsContainer.setAttribute("align", "center");
voteButtonsContainer.classList.add('voteButtonsContainer--hide');
const upvoteButton = document.createElement("img"); const upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -500,16 +499,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
voteButtonsContainer.appendChild(upvoteButton); voteButtonsContainer.appendChild(upvoteButton);
voteButtonsContainer.appendChild(downvoteButton); voteButtonsContainer.appendChild(downvoteButton);
voteButtonsContainer.appendChild(uuidButton); voteButtonsContainer.appendChild(uuidButton);
if (segmentTimes[i].actionType === ActionType.Skip if (segmentTimes[i].actionType === ActionType.Skip
&& [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segmentTimes[i].hidden)) { && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segmentTimes[i].hidden)) {
voteButtonsContainer.appendChild(hideButton); voteButtonsContainer.appendChild(hideButton);
} }
//add click listener to open up vote panel
sponsorTimeButton.addEventListener("click", function () {
voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
});
// Will contain request status // Will contain request status
const voteStatusContainer = document.createElement("div"); const voteStatusContainer = document.createElement("div");
voteStatusContainer.id = "sponsorTimesVoteStatusContainer" + UUID; voteStatusContainer.id = "sponsorTimesVoteStatusContainer" + UUID;
@@ -521,7 +515,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
thanksForVotingText.classList.add("sponsorTimesThanksForVotingText"); thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
voteStatusContainer.appendChild(thanksForVotingText); voteStatusContainer.appendChild(thanksForVotingText);
votingButtons.append(sponsorTimeButton); votingButtons.append(segmentSummary);
votingButtons.append(voteButtonsContainer); votingButtons.append(voteButtonsContainer);
votingButtons.append(voteStatusContainer); votingButtons.append(voteStatusContainer);
@@ -796,8 +790,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
/** /**
* Converts time in minutes to 2d 5h 25.1 * Converts time in minutes to 2d 5h 25.1
* If less than 1 hour, just returns minutes * If less than 1 hour, just returns minutes
* *
* @param {float} minutes * @param {float} minutes
* @returns {string} * @returns {string}
*/ */
function getFormattedHours(minutes) { function getFormattedHours(minutes) {