mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-10 21:47:06 +03:00
Added thumbs up and down buttons.
This commit is contained in:
Ajay Ramachandran
@@ -26,3 +26,7 @@ It will be on the chrome webstore soon once I get some more UI features in, such
|
||||
# Firefox extension
|
||||
|
||||
None at the moment
|
||||
|
||||
# Credit
|
||||
|
||||
Some i made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
|
||||
26
content.css
26
content.css
@@ -12,12 +12,13 @@
|
||||
}
|
||||
|
||||
#sponsorSkipNotice {
|
||||
min-height: 125px;
|
||||
min-height: 165px;
|
||||
min-width: 400px;
|
||||
background-color: rgba(255, 217, 217, 0.8);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border: 3px solid rgba(0, 0, 0, 0.8);
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
#sponsorSkipMessage {
|
||||
@@ -26,12 +27,23 @@
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#sponsorSkipInfo {
|
||||
font-size: 10px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.voteButton {
|
||||
height: 32px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.voteButton:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
|
||||
.sponsorSkipButton {
|
||||
@@ -54,6 +66,12 @@
|
||||
.sponsorSkipButton:hover {
|
||||
background-color:#bf2a2a;
|
||||
}
|
||||
|
||||
.sponsorSkipButton:focus {
|
||||
outline: none;
|
||||
background-color:#bf2a2a;
|
||||
}
|
||||
|
||||
.sponsorSkipButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
@@ -79,6 +97,12 @@
|
||||
.sponsorSkipDontShowButton:hover {
|
||||
background-color:#bc3315;
|
||||
}
|
||||
|
||||
.sponsorSkipDontShowButton:focus {
|
||||
outline: none;
|
||||
background-color:#bc3315;
|
||||
}
|
||||
|
||||
.sponsorSkipDontShowButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
|
||||
20
content.js
20
content.js
@@ -252,24 +252,37 @@ function openSkipNotice(){
|
||||
noticeInfo.className = "sponsorSkipObject";
|
||||
noticeInfo.innerText = "This message will disapear in 7 seconds";
|
||||
|
||||
//thumbs up and down buttons
|
||||
let voteButtonsContainer = document.createElement("div");
|
||||
voteButtonsContainer.setAttribute("align", "center");
|
||||
|
||||
let upvoteButton = document.createElement("img");
|
||||
upvoteButton.className = "sponsorSkipObject voteButton";
|
||||
upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
|
||||
|
||||
let downvoteButton = document.createElement("img");
|
||||
downvoteButton.className = "sponsorSkipObject voteButton";
|
||||
downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
|
||||
|
||||
//add thumbs up and down buttons to the container
|
||||
voteButtonsContainer.appendChild(upvoteButton);
|
||||
voteButtonsContainer.appendChild(downvoteButton);
|
||||
|
||||
let buttonContainer = document.createElement("div");
|
||||
buttonContainer.setAttribute("align", "center");
|
||||
|
||||
let goBackButton = document.createElement("button");
|
||||
goBackButton.innerText = "Go back";
|
||||
goBackButton.className = "sponsorSkipObject";
|
||||
goBackButton.className = "sponsorSkipButton";
|
||||
goBackButton.addEventListener("click", goBackToPreviousTime);
|
||||
|
||||
let hideButton = document.createElement("button");
|
||||
hideButton.innerText = "Dismiss";
|
||||
hideButton.className = "sponsorSkipObject";
|
||||
hideButton.className = "sponsorSkipButton";
|
||||
hideButton.addEventListener("click", closeSkipNotice);
|
||||
|
||||
let dontShowAgainButton = document.createElement("button");
|
||||
dontShowAgainButton.innerText = "Don't Show This Again";
|
||||
dontShowAgainButton.className = "sponsorSkipObject";
|
||||
dontShowAgainButton.className = "sponsorSkipDontShowButton";
|
||||
dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
|
||||
|
||||
@@ -282,6 +295,7 @@ function openSkipNotice(){
|
||||
noticeElement.appendChild(logoElement);
|
||||
noticeElement.appendChild(noticeMessage);
|
||||
noticeElement.appendChild(noticeInfo);
|
||||
noticeElement.appendChild(voteButtonsContainer);
|
||||
noticeElement.appendChild(buttonContainer);
|
||||
|
||||
let referenceNode = document.getElementById("info");
|
||||
|
||||
BIN
icons/downvote.png
Normal file
BIN
icons/downvote.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
icons/upvote.png
Normal file
BIN
icons/upvote.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
98
icons/upvote.svg
Normal file
98
icons/upvote.svg
Normal file
@@ -0,0 +1,98 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Capa_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 478.2 478.2"
|
||||
style="enable-background:new 0 0 478.2 478.2;"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="upvote.svg"
|
||||
inkscape:export-filename="C:\_Projects\_____SponsorSkip\icons\upvote.png"
|
||||
inkscape:export-xdpi="52.797993"
|
||||
inkscape:export-ydpi="52.797993"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
|
||||
id="metadata41"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs39" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1001"
|
||||
id="namedview37"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.98703469"
|
||||
inkscape:cx="264.34466"
|
||||
inkscape:cy="180.78075"
|
||||
inkscape:window-x="-9"
|
||||
inkscape:window-y="-9"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Capa_1" />
|
||||
<g
|
||||
id="g4">
|
||||
<path
|
||||
d="M457.575,325.1c9.8-12.5,14.5-25.9,13.9-39.7c-0.6-15.2-7.4-27.1-13-34.4c6.5-16.2,9-41.7-12.7-61.5 c-15.9-14.5-42.9-21-80.3-19.2c-26.3,1.2-48.3,6.1-49.2,6.3h-0.1c-5,0.9-10.3,2-15.7,3.2c-0.4-6.4,0.7-22.3,12.5-58.1 c14-42.6,13.2-75.2-2.6-97c-16.6-22.9-43.1-24.7-50.9-24.7c-7.5,0-14.4,3.1-19.3,8.8c-11.1,12.9-9.8,36.7-8.4,47.7 c-13.2,35.4-50.2,122.2-81.5,146.3c-0.6,0.4-1.1,0.9-1.6,1.4c-9.2,9.7-15.4,20.2-19.6,29.4c-5.9-3.2-12.6-5-19.8-5h-61 c-23,0-41.6,18.7-41.6,41.6v162.5c0,23,18.7,41.6,41.6,41.6h61c8.9,0,17.2-2.8,24-7.6l23.5,2.8c3.6,0.5,67.6,8.6,133.3,7.3 c11.9,0.9,23.1,1.4,33.5,1.4c17.9,0,33.5-1.4,46.5-4.2c30.6-6.5,51.5-19.5,62.1-38.6c8.1-14.6,8.1-29.1,6.8-38.3 c19.9-18,23.4-37.9,22.7-51.9C461.275,337.1,459.475,330.2,457.575,325.1z M48.275,447.3c-8.1,0-14.6-6.6-14.6-14.6V270.1 c0-8.1,6.6-14.6,14.6-14.6h61c8.1,0,14.6,6.6,14.6,14.6v162.5c0,8.1-6.6,14.6-14.6,14.6h-61V447.3z M431.975,313.4 c-4.2,4.4-5,11.1-1.8,16.3c0,0.1,4.1,7.1,4.6,16.7c0.7,13.1-5.6,24.7-18.8,34.6c-4.7,3.6-6.6,9.8-4.6,15.4c0,0.1,4.3,13.3-2.7,25.8 c-6.7,12-21.6,20.6-44.2,25.4c-18.1,3.9-42.7,4.6-72.9,2.2c-0.4,0-0.9,0-1.4,0c-64.3,1.4-129.3-7-130-7.1h-0.1l-10.1-1.2 c0.6-2.8,0.9-5.8,0.9-8.8V270.1c0-4.3-0.7-8.5-1.9-12.4c1.8-6.7,6.8-21.6,18.6-34.3c44.9-35.6,88.8-155.7,90.7-160.9 c0.8-2.1,1-4.4,0.6-6.7c-1.7-11.2-1.1-24.9,1.3-29c5.3,0.1,19.6,1.6,28.2,13.5c10.2,14.1,9.8,39.3-1.2,72.7 c-16.8,50.9-18.2,77.7-4.9,89.5c6.6,5.9,15.4,6.2,21.8,3.9c6.1-1.4,11.9-2.6,17.4-3.5c0.4-0.1,0.9-0.2,1.3-0.3 c30.7-6.7,85.7-10.8,104.8,6.6c16.2,14.8,4.7,34.4,3.4,36.5c-3.7,5.6-2.6,12.9,2.4,17.4c0.1,0.1,10.6,10,11.1,23.3 C444.875,295.3,440.675,304.4,431.975,313.4z"
|
||||
id="path2" />
|
||||
</g>
|
||||
<g
|
||||
id="g6">
|
||||
</g>
|
||||
<g
|
||||
id="g8">
|
||||
</g>
|
||||
<g
|
||||
id="g10">
|
||||
</g>
|
||||
<g
|
||||
id="g12">
|
||||
</g>
|
||||
<g
|
||||
id="g14">
|
||||
</g>
|
||||
<g
|
||||
id="g16">
|
||||
</g>
|
||||
<g
|
||||
id="g18">
|
||||
</g>
|
||||
<g
|
||||
id="g20">
|
||||
</g>
|
||||
<g
|
||||
id="g22">
|
||||
</g>
|
||||
<g
|
||||
id="g24">
|
||||
</g>
|
||||
<g
|
||||
id="g26">
|
||||
</g>
|
||||
<g
|
||||
id="g28">
|
||||
</g>
|
||||
<g
|
||||
id="g30">
|
||||
</g>
|
||||
<g
|
||||
id="g32">
|
||||
</g>
|
||||
<g
|
||||
id="g34">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -21,7 +21,9 @@
|
||||
"icons/LogoSponsorBlocker256px.png",
|
||||
"icons/IconSponsorBlocker256px.png",
|
||||
"icons/PlayerStartIconSponsorBlocker256px.png",
|
||||
"icons/PlayerStopIconSponsorBlocker256px.png"
|
||||
"icons/PlayerStopIconSponsorBlocker256px.png",
|
||||
"icons/upvote.png",
|
||||
"icons/downvote.png"
|
||||
],
|
||||
"permissions": [
|
||||
"tabs",
|
||||
|
||||
16
popup.css
16
popup.css
@@ -29,6 +29,10 @@ body {
|
||||
.greenButton:hover {
|
||||
background-color:#bf2a2a;
|
||||
}
|
||||
.greenButton:focus {
|
||||
outline: none;
|
||||
background-color:#bf2a2a;
|
||||
}
|
||||
.greenButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
@@ -54,6 +58,10 @@ body {
|
||||
.dangerButton:hover {
|
||||
background-color:#bc3315;
|
||||
}
|
||||
.dangerButton:focus {
|
||||
outline: none;
|
||||
background-color:#bc3315;
|
||||
}
|
||||
.dangerButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
@@ -79,6 +87,10 @@ body {
|
||||
.warningButton:hover {
|
||||
background-color:#bc8215;
|
||||
}
|
||||
.warningButton:focus {
|
||||
outline: none;
|
||||
background-color:#bc8215;
|
||||
}
|
||||
.warningButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
@@ -100,6 +112,10 @@ body {
|
||||
.smallButton:hover {
|
||||
background-color:#fa9806;
|
||||
}
|
||||
.smallButton:focus {
|
||||
outline: none;
|
||||
background-color:#fa9806;
|
||||
}
|
||||
.smallButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
|
||||
Reference in New Issue
Block a user