external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-12 18:04:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

Popup - Vote buttons, Creating sponsor segments

Browse source
This commit is contained in:
mmble 2020-09-22 19:24:34 +02:00
parent 508553b2e1
commit 8f7ed9ce13
5 changed files with 124 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/_locales/en/messages.json
View file

@ -146,7 +146,7 @@
"message": "Submit" "message": "Submit"
}, },
"popupHint": { "popupHint": {
"message": "Hint: Press the semicolon key while focused on a video to report the start/end of a segment and quote to submit. (This can be changed in the options)" "message": "Hint: Press the semicolon key while focused on a video to report the start/end of a segment and quote to submit."
}, },
"clearTimesButton": { "clearTimesButton": {
"message": "Clear Times" "message": "Clear Times"

1
public/icons/thumb.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M21.4 9.6c-1.2 0-2.9-.3-4-.8.8-3.3 1.3-8.8-2.2-8.8-1.8 0-2.3 1.7-2.8 3.3-1.6 5.4-4 6.9-6.4 7.5V10H0v12h6v-.9a19.2 19.2 0 016.2 1.8c1.2.5 3 1.1 5.3 1.1 2.5 0 4.3-1 5-3.7.5-1.9 1.5-7.2 1.5-8.2 0-1.7-1.2-2.5-2.6-2.5zM4 20H2v-8h2v8zm15.9-5.6h1c1.2 0 1.1 1.5 0 1.6h-1.7c-.7.2-.7 1.3.1 1.2h1.2c1 0 1 1.4 0 1.5l-1.7.1c-.8.1-.7 1.3 0 1.2h.8c.9-.1 1 .8-.3 1.6-1.5.9-4.6.1-6.4-.6-2.2-1-4.4-2-7-2v-6c3.3-.8 6.4-2.3 8.4-9.1.9-3.1 1.7-2 1.7.6 0 2-.5 3.8-1 5.5 1.1.5 3.4 1.4 6.2 1.6 1 0 1 1.4 0 1.5l-1.5.2s-.6 1.1.2 1.1z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 599 B

55
public/popup.css
View file

@ -20,8 +20,29 @@
text-align: center; text-align: center;
} }
#downloadedSponsorMessageTimes{ #issueReporterTimeButtons {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#issueReporterTimeButtons > button {
font-weight: bold; font-weight: bold;
color: var(--sb-main-fg-color);
background: none;
border: none;
height: 20px;
padding: 0 8px;
border-radius: 10px;
}
#issueReporterTimeButtons > div > img:nth-child(2) {
margin-left: 6px;
transform: scaleY(-1);
}
#issueReporterTimeButtons > div > h2 {
margin: 0;
} }
#videoInfo>p, #videoInfo>div>p { #videoInfo>p, #videoInfo>div>p {
@ -47,14 +68,32 @@ div.logoText>p, .sbHeader {
padding: 6px 24px; padding: 6px 24px;
font-size: 20px; font-size: 20px;
border-radius: 25px; border-radius: 25px;
border: none;
text-decoration: none; text-decoration: none;
color: black; color: black;
min-height: 26px; min-height: 26px;
height: 26px; min-width: 152px;
width: 152px;
display: block; display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: 'Source Sans Pro', sans-serif;
}
.mediumButton {
background: red;
/* font-weight: bold; */
padding: 6px 24px;
font-size: 16px;
border-radius: 25px;
border: none;
text-decoration: none;
color: white;
min-height: 26px;
min-width: 152px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Source Sans Pro', sans-serif;
} }
/* disable extension */ /* disable extension */
@ -146,9 +185,17 @@ div.logoText>p, .sbHeader {
margin-bottom: 6px !important; margin-bottom: 6px !important;
} }
#videoInfo, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton { #videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton, #submissionSection>b {
margin-bottom: 12px !important; margin-bottom: 12px !important;
} }
#mainControls{
flex-flow: column;
align-items: center;
}
#submitTimesContainer{
flex-flow: column;
align-items: center;
}
/* additional buttons */ /* additional buttons */
#additionalButtons { #additionalButtons {

81
public/popup.html
View file

@ -19,7 +19,10 @@
<!-- If the video was found in the database --> <!-- If the video was found in the database -->
<p id="videoFound"></p> <p id="videoFound"></p>
</div> </div>
<p id="downloadedSponsorMessageTimes"></p> <div id="issueReporterContainer">
<div id="issueReporterTimeButtons"></div>
</div>
</div>
<div class="sidebyside"> <div class="sidebyside">
<div id="disableExtension"> <div id="disableExtension">
<!--github: mbledkowski/toggle-switch--> <!--github: mbledkowski/toggle-switch-->
@ -43,6 +46,9 @@
</svg> </svg>
<p id="whitelistChannel">__MSG_whitelistChannel__</p> <p id="whitelistChannel">__MSG_whitelistChannel__</p>
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p> <p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
<div id="whitelistForceCheck" style="text-decoration: underline; cursor: pointer;display: none">
__MSG_forceChannelCheckPopup__
</div>
</label> </label>
</div> </div>
<button id="optionsButton" title="__MSG_optionsInfo__"> <button id="optionsButton" title="__MSG_optionsInfo__">
@ -52,69 +58,68 @@
</div> </div>
</div> </div>
<div id="mainControls" style="display: none"> <div id="mainControls" style="display: none">
<p class="popupElement" class="sbHeader"> <p class="sbHeader">
__MSG_recordTimesDescription__ __MSG_recordTimesDescription__
</p> </p>
<sub class="popupElement">__MSG_popupHint__</sub> <sub>__MSG_popupHint__</sub>
<div> <div>
<button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button> <button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
</div> </div>
<div id="submissionSection" class="popupElement" style="display: none"> <div id="submissionSection" style="display: none">
<b>Sponsor Editing has been moved and will appear after you click submit</b> <b>Section editing will appear after you click submit</b>
<div id="submitTimesContainer" class="popupElement" style="display: none"> <div id="submitTimesContainer" style="display: none">
<button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button> <button id="submitTimes" class="largeButton">__MSG_submitTimesButton__</button>
</div> </div>
</div> </div>
</div> </div>
</div>
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1> <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
<div class="sidebyside"> <div class="sidebyside">
<div id="usernameElement"> <div id="usernameElement">
<div> <div>
<p>__MSG_Username__</p> <p>__MSG_Username__</p>
<div id="setUsernameContainer"> <div id="setUsernameContainer">
<p id="usernameValue"></p> <p id="usernameValue"></p>
<button id="setUsernameButton" title="__MSG_setUsername__"> <button id="setUsernameButton" title="__MSG_setUsername__">
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit"> <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
</button> </button>
</div> </div>
<div id="setUsername" style="display: none"> <div id="setUsername" style="display: none">
<div id="setUsernameStatusContainer" style="display: none"> <div id="setUsernameStatusContainer" style="display: none">
<p id="setUsernameStatus"></p> <p id="setUsernameStatus"></p>
</div>
<input id="usernameInput" hint="Username"></input>
<button id="submitUsername">
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
</button>
</div> </div>
<input id="usernameInput" hint="Username"></input>
<button id="submitUsername">
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
</button>
</div>
</div> </div>
</div> </div>
<div id="sponsorTimesContributionsContainer" style="display: none"> <div id="sponsorTimesContributionsContainer" style="display: none">
<div> <div>
<p>__MSG_soFarUHSubmited__</p> <p>__MSG_soFarUHSubmited__</p>
<span id="sponsorTimesContributionsDisplay"> <span id="sponsorTimesContributionsDisplay">
0 0
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<span id="sponsorTimesViewsContainer" style="display: none"> <span id="sponsorTimesViewsContainer" style="display: none">
__MSG_savedPeopleFrom__ __MSG_savedPeopleFrom__
<b><span id="sponsorTimesViewsDisplay"> <b><span id="sponsorTimesViewsDisplay">
0 0
</span></b> </span></b>
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span> <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
<br> <br>
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span> (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b> <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
<span>__MSG_youHaveSavedTimeEnd__</span>). <span>__MSG_youHaveSavedTimeEnd__</span>).
</span> </span>
<div id="sponsorTimesSkipsDoneContainer" style="display: none"> <div id="sponsorTimesSkipsDoneContainer" style="display: none">
__MSG_youHaveSkipped__ __MSG_youHaveSkipped__
<b><span id="sponsorTimesSkipsDoneDisplay"> <b><span id="sponsorTimesSkipsDoneDisplay">
0 0
</span></b> </span></b>
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span> <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
(<b><span id="sponsorTimeSavedDisplay"> (<b><span id="sponsorTimeSavedDisplay">
0 0

56
src/popup.ts
View file

@ -52,7 +52,7 @@ async function runThePopup(messageListener?: MessageListener) {
"whitelistChannel", "whitelistChannel",
"unwhitelistChannel", "unwhitelistChannel",
"whitelistToggle", "whitelistToggle",
//"whitelistForceCheck", "whitelistForceCheck",
"disableSkipping", "disableSkipping",
"enableSkipping", "enableSkipping",
"toggleSwitch", "toggleSwitch",
@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener) {
"loadingIndicator", "loadingIndicator",
"videoFound", "videoFound",
"sponsorMessageTimes", "sponsorMessageTimes",
"downloadedSponsorMessageTimes", //"downloadedSponsorMessageTimes",
"whitelistButton", "whitelistButton",
].forEach(id => PageElements[id] = document.getElementById(id)); ].forEach(id => PageElements[id] = document.getElementById(id));
@ -287,7 +287,7 @@ async function runThePopup(messageListener?: MessageListener) {
sponsorTimes = sponsorTimesStorage; sponsorTimes = sponsorTimesStorage;
//show submission section //show submission section
PageElements.submissionSection.style.display = "unset"; PageElements.submissionSection.style.display = "flex";
showSubmitTimesIfNecessary(); showSubmitTimesIfNecessary();
} }
@ -310,7 +310,7 @@ async function runThePopup(messageListener?: MessageListener) {
//if request is undefined, then the page currently being browsed is not YouTube //if request is undefined, then the page currently being browsed is not YouTube
if (request != undefined) { if (request != undefined) {
//remove loading text //remove loading text
PageElements.mainControls.style.display = "unset"; PageElements.mainControls.style.display = "flex";
PageElements.whitelistButton.classList.remove("grayedOut"); PageElements.whitelistButton.classList.remove("grayedOut");
PageElements.loadingIndicator.style.display = "none"; PageElements.loadingIndicator.style.display = "none";
@ -338,8 +338,8 @@ async function runThePopup(messageListener?: MessageListener) {
PageElements.whitelistToggle.checked = true; PageElements.whitelistToggle.checked = true;
document.querySelectorAll('label > svg')[0].classList.add("rotated"); document.querySelectorAll('label > svg')[0].classList.add("rotated");
PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted"); //PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold"; //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
} }
}); });
} }
@ -401,12 +401,12 @@ async function runThePopup(messageListener?: MessageListener) {
function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[]}) { function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[]}) {
if (request.sponsorTimes != undefined) { if (request.sponsorTimes != undefined) {
//set it to the message //set it to the message
if (PageElements.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) { /*if (PageElements.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
PageElements.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes); PageElements.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
} }*/
//add them as buttons to the issue reporting container //add them as buttons to the issue reporting container
//let container = document.getElementById("issueReporterTimeButtons"); let container = document.getElementById("issueReporterTimeButtons");
for (let i = 0; i < request.sponsorTimes.length; i++) { for (let i = 0; i < request.sponsorTimes.length; i++) {
let sponsorTimeButton = document.createElement("button"); let sponsorTimeButton = document.createElement("button");
sponsorTimeButton.className = "warningButton popupElement"; sponsorTimeButton.className = "warningButton popupElement";
@ -421,7 +421,7 @@ async function runThePopup(messageListener?: MessageListener) {
} }
sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(request.sponsorTimes[i].segment[1]) + extraInfo; sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(request.sponsorTimes[i].segment[1]) + extraInfo;
let votingButtons = document.createElement("div"); let votingButtons = document.createElement("div");
let UUID = request.sponsorTimes[i].UUID; let UUID = request.sponsorTimes[i].UUID;
@ -434,19 +434,19 @@ async function runThePopup(messageListener?: MessageListener) {
let upvoteButton = document.createElement("img"); let upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
upvoteButton.className = "voteButton popupElement"; upvoteButton.className = "voteButton";
upvoteButton.src = chrome.extension.getURL("icons/upvote.png"); upvoteButton.src = chrome.extension.getURL("icons/thumb.svg");
upvoteButton.addEventListener("click", () => vote(1, UUID)); upvoteButton.addEventListener("click", () => vote(1, UUID));
let downvoteButton = document.createElement("img"); let downvoteButton = document.createElement("img");
downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID; downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
downvoteButton.className = "voteButton popupElement"; downvoteButton.className = "voteButton";
downvoteButton.src = chrome.extension.getURL("icons/downvote.png"); downvoteButton.src = chrome.extension.getURL("icons/thumb.svg");
downvoteButton.addEventListener("click", () => vote(0, UUID)); downvoteButton.addEventListener("click", () => vote(0, UUID));
//add thumbs up and down buttons to the container //add thumbs up and down buttons to the container
voteButtonsContainer.appendChild(document.createElement("br")); //voteButtonsContainer.appendChild(document.createElement("br"));
voteButtonsContainer.appendChild(document.createElement("br")); //voteButtonsContainer.appendChild(document.createElement("br"));
voteButtonsContainer.appendChild(upvoteButton); voteButtonsContainer.appendChild(upvoteButton);
voteButtonsContainer.appendChild(downvoteButton); voteButtonsContainer.appendChild(downvoteButton);
@ -455,8 +455,8 @@ async function runThePopup(messageListener?: MessageListener) {
voteButtonsContainer.style.display = "unset"; voteButtonsContainer.style.display = "unset";
}); });
//container.appendChild(sponsorTimeButton); container.appendChild(sponsorTimeButton);
//container.appendChild(voteButtonsContainer); container.appendChild(voteButtonsContainer);
//if it is not the last iteration //if it is not the last iteration
if (i != request.sponsorTimes.length - 1) { if (i != request.sponsorTimes.length - 1) {
@ -591,7 +591,7 @@ async function runThePopup(messageListener?: MessageListener) {
} }
//hide submit button //hide submit button
//document.getElementById("submitTimesContainer").style.display = "none"; document.getElementById("submitTimesContainer").style.display = "none";
let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index); let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
@ -814,10 +814,10 @@ async function runThePopup(messageListener?: MessageListener) {
//check if an end time has been specified for the latest sponsor time //check if an end time has been specified for the latest sponsor time
if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].segment.length > 1) { if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].segment.length > 1) {
//show submit times button //show submit times button
//document.getElementById("submitTimesContainer").style.display = "unset"; document.getElementById("submitTimesContainer").style.display = "flex";
} else { } else {
//hide submit times button //hide submit times button
//document.getElementById("submitTimesContainer").style.display = "none"; document.getElementById("submitTimesContainer").style.display = "none";
} }
} }
@ -880,10 +880,10 @@ async function runThePopup(messageListener?: MessageListener) {
document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID"); document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
} }
function reportAnIssue() { /*function reportAnIssue() {
document.getElementById("issueReporterContainer").style.display = "unset"; document.getElementById("issueReporterContainer").style.display = "unset";
//PageElements.reportAnIssue.style.display = "none"; //PageElements.reportAnIssue.style.display = "none";
} }*/
function addVoteMessage(message, UUID) { function addVoteMessage(message, UUID) {
let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID); let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
@ -972,10 +972,10 @@ async function runThePopup(messageListener?: MessageListener) {
PageElements.unwhitelistChannel.style.display = "unset"; PageElements.unwhitelistChannel.style.display = "unset";
document.querySelectorAll('label > svg')[0].classList.add("rotated"); document.querySelectorAll('label > svg')[0].classList.add("rotated");
//TODO if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset"; if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset";
PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted"); //PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold"; //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
//save this //save this
Config.config.whitelistedChannels = whitelistedChannels; Config.config.whitelistedChannels = whitelistedChannels;
@ -1022,8 +1022,8 @@ async function runThePopup(messageListener?: MessageListener) {
PageElements.unwhitelistChannel.style.display = "none"; PageElements.unwhitelistChannel.style.display = "none";
document.querySelectorAll('label > svg')[0].classList.remove("rotated"); document.querySelectorAll('label > svg')[0].classList.remove("rotated");
PageElements.downloadedSponsorMessageTimes.innerText = ""; //PageElements.downloadedSponsorMessageTimes.innerText = "";
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset"; //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
//save this //save this
Config.config.whitelistedChannels = whitelistedChannels; Config.config.whitelistedChannels = whitelistedChannels;