mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 01:01:55 +01:00
Popup - Vote buttons, Creating sponsor segments
This commit is contained in:
mmble
parent
508553b2e1
commit
8f7ed9ce13
5 changed files with 124 additions and 71 deletions
|
|
@ -146,7 +146,7 @@
|
|||
"message": "Submit"
|
||||
},
|
||||
"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": {
|
||||
"message": "Clear Times"
|
||||
|
|
|
|||
1
public/icons/thumb.svg
Normal file
1
public/icons/thumb.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 599 B |
|
|
@ -20,8 +20,29 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#downloadedSponsorMessageTimes{
|
||||
#issueReporterTimeButtons {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#issueReporterTimeButtons > button {
|
||||
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 {
|
||||
|
|
@ -47,14 +68,32 @@ div.logoText>p, .sbHeader {
|
|||
padding: 6px 24px;
|
||||
font-size: 20px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
min-height: 26px;
|
||||
height: 26px;
|
||||
width: 152px;
|
||||
min-width: 152px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
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 */
|
||||
|
|
@ -146,9 +185,17 @@ div.logoText>p, .sbHeader {
|
|||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
#videoInfo, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
|
||||
#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton, #submissionSection>b {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
#mainControls{
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
#submitTimesContainer{
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
/* additional buttons */
|
||||
|
||||
#additionalButtons {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@
|
|||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
</div>
|
||||
<p id="downloadedSponsorMessageTimes"></p>
|
||||
<div id="issueReporterContainer">
|
||||
<div id="issueReporterTimeButtons"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
|
|
@ -43,6 +46,9 @@
|
|||
</svg>
|
||||
<p id="whitelistChannel">__MSG_whitelistChannel__</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>
|
||||
</div>
|
||||
<button id="optionsButton" title="__MSG_optionsInfo__">
|
||||
|
|
@ -52,69 +58,68 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="mainControls" style="display: none">
|
||||
<p class="popupElement" class="sbHeader">
|
||||
<p class="sbHeader">
|
||||
__MSG_recordTimesDescription__
|
||||
</p>
|
||||
<sub class="popupElement">__MSG_popupHint__</sub>
|
||||
<sub>__MSG_popupHint__</sub>
|
||||
<div>
|
||||
<button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
|
||||
<button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
|
||||
</div>
|
||||
<div id="submissionSection" class="popupElement" style="display: none">
|
||||
<b>Sponsor Editing has been moved and will appear after you click submit</b>
|
||||
<div id="submitTimesContainer" class="popupElement" style="display: none">
|
||||
<button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
|
||||
<div id="submissionSection" style="display: none">
|
||||
<b>Section editing will appear after you click submit</b>
|
||||
<div id="submitTimesContainer" style="display: none">
|
||||
<button id="submitTimes" class="largeButton">__MSG_submitTimesButton__</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
|
||||
<div class="sidebyside">
|
||||
<div id="usernameElement">
|
||||
<div>
|
||||
<p>__MSG_Username__</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<p id="setUsernameStatus"></p>
|
||||
<p>__MSG_Username__</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<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>
|
||||
<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 id="sponsorTimesContributionsContainer" style="display: none">
|
||||
<div>
|
||||
<p>__MSG_soFarUHSubmited__</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
<p>__MSG_soFarUHSubmited__</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span id="sponsorTimesViewsContainer" style="display: none">
|
||||
__MSG_savedPeopleFrom__
|
||||
<b><span id="sponsorTimesViewsDisplay">
|
||||
<span id="sponsorTimesViewsContainer" style="display: none">
|
||||
__MSG_savedPeopleFrom__
|
||||
<b><span id="sponsorTimesViewsDisplay">
|
||||
0
|
||||
</span></b>
|
||||
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
|
||||
<br>
|
||||
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
|
||||
<br>
|
||||
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
|
||||
<span>__MSG_youHaveSavedTimeEnd__</span>).
|
||||
</span>
|
||||
<span>__MSG_youHaveSavedTimeEnd__</span>).
|
||||
</span>
|
||||
<div id="sponsorTimesSkipsDoneContainer" style="display: none">
|
||||
__MSG_youHaveSkipped__
|
||||
<b><span id="sponsorTimesSkipsDoneDisplay">
|
||||
0
|
||||
</span></b>
|
||||
0
|
||||
</span></b>
|
||||
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
|
||||
(<b><span id="sponsorTimeSavedDisplay">
|
||||
0
|
||||
|
|
|
|||
56
src/popup.ts
56
src/popup.ts
|
|
@ -52,7 +52,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
"whitelistChannel",
|
||||
"unwhitelistChannel",
|
||||
"whitelistToggle",
|
||||
//"whitelistForceCheck",
|
||||
"whitelistForceCheck",
|
||||
"disableSkipping",
|
||||
"enableSkipping",
|
||||
"toggleSwitch",
|
||||
|
|
@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
"loadingIndicator",
|
||||
"videoFound",
|
||||
"sponsorMessageTimes",
|
||||
"downloadedSponsorMessageTimes",
|
||||
//"downloadedSponsorMessageTimes",
|
||||
"whitelistButton",
|
||||
].forEach(id => PageElements[id] = document.getElementById(id));
|
||||
|
||||
|
|
@ -287,7 +287,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
sponsorTimes = sponsorTimesStorage;
|
||||
|
||||
//show submission section
|
||||
PageElements.submissionSection.style.display = "unset";
|
||||
PageElements.submissionSection.style.display = "flex";
|
||||
|
||||
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 != undefined) {
|
||||
//remove loading text
|
||||
PageElements.mainControls.style.display = "unset";
|
||||
PageElements.mainControls.style.display = "flex";
|
||||
PageElements.whitelistButton.classList.remove("grayedOut");
|
||||
PageElements.loadingIndicator.style.display = "none";
|
||||
|
||||
|
|
@ -338,8 +338,8 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
PageElements.whitelistToggle.checked = true;
|
||||
document.querySelectorAll('label > svg')[0].classList.add("rotated");
|
||||
|
||||
PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
|
||||
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
|
||||
//PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
|
||||
//PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -401,12 +401,12 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[]}) {
|
||||
if (request.sponsorTimes != undefined) {
|
||||
//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);
|
||||
}
|
||||
}*/
|
||||
|
||||
//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++) {
|
||||
let sponsorTimeButton = document.createElement("button");
|
||||
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;
|
||||
|
||||
|
||||
let votingButtons = document.createElement("div");
|
||||
|
||||
let UUID = request.sponsorTimes[i].UUID;
|
||||
|
|
@ -434,19 +434,19 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
|
||||
let upvoteButton = document.createElement("img");
|
||||
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
|
||||
upvoteButton.className = "voteButton popupElement";
|
||||
upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
|
||||
upvoteButton.className = "voteButton";
|
||||
upvoteButton.src = chrome.extension.getURL("icons/thumb.svg");
|
||||
upvoteButton.addEventListener("click", () => vote(1, UUID));
|
||||
|
||||
let downvoteButton = document.createElement("img");
|
||||
downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
|
||||
downvoteButton.className = "voteButton popupElement";
|
||||
downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
|
||||
downvoteButton.className = "voteButton";
|
||||
downvoteButton.src = chrome.extension.getURL("icons/thumb.svg");
|
||||
downvoteButton.addEventListener("click", () => vote(0, UUID));
|
||||
|
||||
//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(downvoteButton);
|
||||
|
||||
|
|
@ -455,8 +455,8 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
voteButtonsContainer.style.display = "unset";
|
||||
});
|
||||
|
||||
//container.appendChild(sponsorTimeButton);
|
||||
//container.appendChild(voteButtonsContainer);
|
||||
container.appendChild(sponsorTimeButton);
|
||||
container.appendChild(voteButtonsContainer);
|
||||
|
||||
//if it is not the last iteration
|
||||
if (i != request.sponsorTimes.length - 1) {
|
||||
|
|
@ -591,7 +591,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
}
|
||||
|
||||
//hide submit button
|
||||
//document.getElementById("submitTimesContainer").style.display = "none";
|
||||
document.getElementById("submitTimesContainer").style.display = "none";
|
||||
|
||||
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
|
||||
if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].segment.length > 1) {
|
||||
//show submit times button
|
||||
//document.getElementById("submitTimesContainer").style.display = "unset";
|
||||
document.getElementById("submitTimesContainer").style.display = "flex";
|
||||
} else {
|
||||
//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");
|
||||
}
|
||||
|
||||
function reportAnIssue() {
|
||||
/*function reportAnIssue() {
|
||||
document.getElementById("issueReporterContainer").style.display = "unset";
|
||||
//PageElements.reportAnIssue.style.display = "none";
|
||||
}
|
||||
}*/
|
||||
|
||||
function addVoteMessage(message, UUID) {
|
||||
let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
|
||||
|
|
@ -972,10 +972,10 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
PageElements.unwhitelistChannel.style.display = "unset";
|
||||
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.style.fontWeight = "bold";
|
||||
//PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
|
||||
//PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
|
||||
|
||||
//save this
|
||||
Config.config.whitelistedChannels = whitelistedChannels;
|
||||
|
|
@ -1022,8 +1022,8 @@ async function runThePopup(messageListener?: MessageListener) {
|
|||
PageElements.unwhitelistChannel.style.display = "none";
|
||||
document.querySelectorAll('label > svg')[0].classList.remove("rotated");
|
||||
|
||||
PageElements.downloadedSponsorMessageTimes.innerText = "";
|
||||
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
|
||||
//PageElements.downloadedSponsorMessageTimes.innerText = "";
|
||||
//PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
|
||||
|
||||
//save this
|
||||
Config.config.whitelistedChannels = whitelistedChannels;
|
||||
|
|
|
|||
Loading…
Reference in a new issue