mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-11 22:17:21 +03:00
Popup.html redesign - almost done
This commit is contained in:
mmble
@@ -82,6 +82,7 @@ The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) was
|
||||
|
||||
Originally forked from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but zero code remains.
|
||||
|
||||
Some icons 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>
|
||||
|
||||
Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> 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>
|
||||
Icons 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>
|
||||
* <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</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>
|
||||
* <a href="https://iconmonstr.com/about/#creator">Alexander Kahlkopf</a> from <a href="https://iconmonstr.com/">iconmonstr.com</a> and are licensed by <a href="https://iconmonstr.com/license/">iconmonstr License</a>
|
||||
@@ -134,13 +134,13 @@
|
||||
"message": "Vote On A Segment"
|
||||
},
|
||||
"soFarUHSubmited": {
|
||||
"message": "So far, you've submitted"
|
||||
"message": "Submissions:"
|
||||
},
|
||||
"savedPeopleFrom": {
|
||||
"message": "You have saved people from "
|
||||
"message": "You've saved people from "
|
||||
},
|
||||
"viewLeaderboard": {
|
||||
"message": "View the leaderboard"
|
||||
"message": "Leaderboard"
|
||||
},
|
||||
"here": {
|
||||
"message": "here"
|
||||
@@ -160,6 +160,9 @@
|
||||
"publicStats": {
|
||||
"message": "This is used on the public stats page to show off how much you've contributed. See it"
|
||||
},
|
||||
"Username": {
|
||||
"message": "Username:"
|
||||
},
|
||||
"setUsername": {
|
||||
"message": "Set Username"
|
||||
},
|
||||
@@ -284,7 +287,7 @@
|
||||
"message": "This time appears in brackets next to the current time on below the seekbar. This shows the total video duration minus any segments. This includes segments marked as only \"Show In Seekbar\"."
|
||||
},
|
||||
"youHaveSkipped": {
|
||||
"message": "You have skipped "
|
||||
"message": "You've skipped "
|
||||
},
|
||||
"youHaveSaved": {
|
||||
"message": "You have saved yourself "
|
||||
@@ -302,10 +305,10 @@
|
||||
"message": "hours"
|
||||
},
|
||||
"youHaveSavedTime": {
|
||||
"message": "You have saved people"
|
||||
"message": "You've saved people"
|
||||
},
|
||||
"youHaveSavedTimeEnd": {
|
||||
"message": " of their lives."
|
||||
"message": " of their lives"
|
||||
},
|
||||
"statusReminder": {
|
||||
"message": "Check status.sponsor.ajay.app for server status."
|
||||
|
||||
1
public/icons/check.svg
Normal file
1
public/icons/check.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/></svg>
|
||||
|
After Width: | Height: | Size: 134 B |
@@ -3,7 +3,7 @@
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@@ -11,7 +11,7 @@
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@@ -19,7 +19,7 @@
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@@ -27,7 +27,7 @@
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@@ -35,15 +35,15 @@
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@@ -51,6 +51,62 @@
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
152
public/popup.css
152
public/popup.css
@@ -1,39 +1,65 @@
|
||||
:root {
|
||||
--sb-main-bg-color: #222626;
|
||||
--sb-main-fg-color: white;
|
||||
--sb-gray-fg-color: #444848;
|
||||
--sb-on-white-bg: black;
|
||||
--sb-green-bg: #077B27;
|
||||
--sb-main-fg-color: white;
|
||||
--sb-gray-fg-color: #444848;
|
||||
--sb-on-white-bg: black;
|
||||
--sb-green-bg: #077B27;
|
||||
}
|
||||
|
||||
#sponsorblockPopup {
|
||||
background-color: var(--sb-main-bg-color);
|
||||
color: var(--sb-main-fg-color);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 14px;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
background-color: var(--sb-main-bg-color);
|
||||
color: var(--sb-main-fg-color);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 13px;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
width: calc(100% - 6px);
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: unset;
|
||||
padding: 18px 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#videoInfo>p, #videoInfo>div>p {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
div.logoText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
color: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
div.logoText > p {
|
||||
font-size: 32px;
|
||||
margin: 0;
|
||||
div.logoText>p, .recordingSubtitle {
|
||||
font-size: 32px;
|
||||
margin: -4px 0 -2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.largeButton{
|
||||
background: white;
|
||||
/*font-weight: bold;*/
|
||||
padding: 6px 24px;
|
||||
font-size: 20px;
|
||||
border-radius: 25px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
height: 24px;
|
||||
width: 152px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* disable extension */
|
||||
|
||||
#disableExtension {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* switch button */
|
||||
@@ -42,6 +68,7 @@ div.logoText > p {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switchBg {
|
||||
display: block;
|
||||
height: 37px;
|
||||
@@ -79,13 +106,15 @@ div.logoText > p {
|
||||
box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
|
||||
}
|
||||
|
||||
#toggleSwitch:checked ~ .switchDot {
|
||||
#toggleSwitch:checked~.switchDot {
|
||||
transform: translateX(40px);
|
||||
}
|
||||
#toggleSwitch:checked ~ .switchBg.green {
|
||||
|
||||
#toggleSwitch:checked~.switchBg.green {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#toggleSwitch:checked ~ .switchBg.white {
|
||||
|
||||
#toggleSwitch:checked~.switchBg.white {
|
||||
opacity: 0 !important;
|
||||
transition: opacity .2s step-end;
|
||||
}
|
||||
@@ -97,11 +126,15 @@ div.logoText > p {
|
||||
margin: 0 6% 0 6%;
|
||||
}
|
||||
|
||||
.sidebyside > div {
|
||||
.sidebyside>div {
|
||||
width: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#videoInfo {
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* additional buttons */
|
||||
|
||||
#additionalButtons {
|
||||
@@ -110,52 +143,79 @@ div.logoText > p {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#additionalButtons > button {
|
||||
background: none;
|
||||
#additionalButtons>button, button#setUsernameButton, #submitUsername {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#additionalButtons, #additionalButtons > button {
|
||||
font-size: 16px;
|
||||
#additionalButtons, #additionalButtons>button {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
label > svg > path {
|
||||
fill: var(--sb-main-fg-color);
|
||||
#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
label > p, #disableExtension > p {
|
||||
label>svg>path {
|
||||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
label>p, #disableExtension>p, #usernameValue, #usernameElement > p,#sponsorTimesContributionsContainer > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grayedOut > label > svg > path {
|
||||
fill: var(--sb-gray-fg-color);
|
||||
}
|
||||
.grayedOut > label {
|
||||
color: var(--sb-gray-fg-color);
|
||||
#usernameElement > p, #sponsorTimesContributionsContainer {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
label > svg.rotated {
|
||||
transform: rotate(45deg);
|
||||
.grayedOut>label>svg>path {
|
||||
fill: var(--sb-gray-fg-color);
|
||||
}
|
||||
|
||||
label > svg, button > img {
|
||||
margin: 0 8px 0 0;
|
||||
.grayedOut>label {
|
||||
color: var(--sb-gray-fg-color);
|
||||
}
|
||||
|
||||
#mainControls > label, #additionalButtons > button {
|
||||
label>svg.rotated {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#mainControls>label, #additionalButtons>button, div#setUsernameContainer {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
#usernameElement {
|
||||
width: 137px;
|
||||
}
|
||||
|
||||
#usernameValue{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#usernameInput {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
/* footer */
|
||||
|
||||
#sbFooter > a {
|
||||
color: var(--sb-main-fg-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* end reset */
|
||||
|
||||
#sponsorBlockPopupLogo {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
color: white;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
@@ -6,113 +6,112 @@
|
||||
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
|
||||
</head>
|
||||
|
||||
<body id="sponsorblockPopup" class="sponsorBlockPageBody">
|
||||
<div class="logoText">
|
||||
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
|
||||
<p>SponsorBlock</p>
|
||||
</div>
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator" class="">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
<p id="downloadedSponsorMessageTimes" class=""></p>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer">
|
||||
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
<span class="switchBg green"></span>
|
||||
<span class="switchDot"></span>
|
||||
</label>
|
||||
<p id="disableSkipping">__MSG_disableSkipping__</p>
|
||||
<p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
|
||||
<body style="margin: 0; min-width: 320px;">
|
||||
<div id="sponsorblockPopup" class="sponsorBlockPageBody">
|
||||
<div class="logoText bottomSpace">
|
||||
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
|
||||
<p>SponsorBlock</p>
|
||||
</div>
|
||||
<div id="additionalButtons">
|
||||
<!-- grayedOut until loading complete -->
|
||||
<div id="mainControls" class="grayedOut">
|
||||
<input type="checkbox" style="display:none;" id="whitelistToggle">
|
||||
<label for="whitelistToggle" class="whitelistToggleText">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<p id="whitelistChannel">__MSG_whitelistChannel__</p>
|
||||
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
|
||||
</label>
|
||||
<div id="videoInfo" class="bottomSpace">
|
||||
<div class="bottomSpace">
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
</div>
|
||||
<p id="downloadedSponsorMessageTimes"></p>
|
||||
</div>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer bottomSpace">
|
||||
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
<span class="switchBg green"></span>
|
||||
<span class="switchDot"></span>
|
||||
</label>
|
||||
<p id="disableSkipping">__MSG_disableSkipping__</p>
|
||||
<p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
|
||||
</div>
|
||||
<div id="additionalButtons">
|
||||
<!-- grayedOut until loading complete -->
|
||||
<div id="mainControls" class="grayedOut bottomSpace" title="__MSG_forceChannelCheckPopup__">
|
||||
<input type="checkbox" style="display:none;" id="whitelistToggle">
|
||||
<label for="whitelistToggle" class="whitelistToggleText">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<p id="whitelistChannel">__MSG_whitelistChannel__</p>
|
||||
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
|
||||
</label>
|
||||
</div>
|
||||
<button id="optionsButton" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="16" height="16">
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="recordingSubtitle">__MSG_yourWork__</h1>
|
||||
<div class="sidebyside">
|
||||
<div id="usernameElement">
|
||||
<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">
|
||||
</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">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sponsorTimesContributionsContainer" style="display: none">
|
||||
<p>__MSG_soFarUHSubmited__</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
<button id="optionsButton">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="18" height="18">
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2>
|
||||
|
||||
<p class="popupElement">
|
||||
<span id="sponsorTimesContributionsContainer" class="popupElement" style="display: none">
|
||||
__MSG_soFarUHSubmited__
|
||||
<span id="sponsorTimesContributionsDisplay" class="popupElement">
|
||||
<span id="sponsorTimesViewsContainer" style="display: none">
|
||||
__MSG_savedPeopleFrom__
|
||||
<span id="sponsorTimesViewsDisplay">
|
||||
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>
|
||||
<div id="sponsorTimesSkipsDoneContainer" style="display: none">
|
||||
__MSG_youHaveSkipped__
|
||||
<span id="sponsorTimesSkipsDoneDisplay">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>.
|
||||
</span>
|
||||
<span id="sponsorTimesViewsContainer" class="popupElement" style="display: none">
|
||||
__MSG_savedPeopleFrom__
|
||||
<span id="sponsorTimesViewsDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>.
|
||||
</span>
|
||||
<span id="sponsorTimesOthersTimeSavedContainer" class="popupElement" style="display: none">
|
||||
__MSG_youHaveSavedTime__
|
||||
<span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>
|
||||
<span class="popupElement">__MSG_youHaveSavedTimeEnd__</span>
|
||||
</span>
|
||||
<div id="sponsorTimesSkipsDoneContainer" class="popupElement" style="display: none">
|
||||
__MSG_youHaveSkipped__
|
||||
<span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span>
|
||||
</div>
|
||||
<div id="sponsorTimeSavedContainer" class="popupElement" style="display: none">
|
||||
__MSG_youHaveSaved__
|
||||
<span id="sponsorTimeSavedDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>.
|
||||
</div>
|
||||
<div class="popupElement">
|
||||
__MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_here__</a>.
|
||||
</div>
|
||||
</p>
|
||||
<div id="setUsernameContainer" class="popupElement">
|
||||
<button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
<sub class="popupElement">
|
||||
__MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_here__</a>.
|
||||
</sub>
|
||||
</div>
|
||||
<div id="setUsername" class="popupElement" style="display: none">
|
||||
<h3>__MSG_setUsername__</h3>
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<h2 id="setUsernameStatus"></h2>
|
||||
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
|
||||
(<b><span id="sponsorTimeSavedDisplay">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
|
||||
</div>
|
||||
<input id="usernameInput" hint="Username"></input>
|
||||
<button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
<a class="discreteLink largeButton" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_viewLeaderboard__</a>
|
||||
<button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
|
||||
<footer id="sbFooter">
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">Website</a> |
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a> |
|
||||
<a href="https://discord.gg/QnmVMpU" target="_blank" rel="noopener">Discord</a> |
|
||||
<a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors" target="_blank" rel="noopener">Credits</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="optionsButtonContainer" class="popupElement">
|
||||
<button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
|
||||
<sub class="popupElement">
|
||||
__MSG_optionsInfo__
|
||||
</sub>
|
||||
</div>
|
||||
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/vendor.js" async></script>
|
||||
<script src="./js/popup.js" async></script>
|
||||
|
||||
19
src/popup.ts
19
src/popup.ts
@@ -65,7 +65,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
// sponsorTimesContributions
|
||||
"sponsorTimesContributionsContainer",
|
||||
"sponsorTimesContributionsDisplay",
|
||||
"sponsorTimesContributionsDisplayEndWord",
|
||||
//"sponsorTimesContributionsDisplayEndWord",
|
||||
// sponsorTimesViewsDisplay
|
||||
"sponsorTimesViewsContainer",
|
||||
"sponsorTimesViewsDisplay",
|
||||
@@ -79,7 +79,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
"sponsorTimesSkipsDoneDisplay",
|
||||
"sponsorTimesSkipsDoneEndWord",
|
||||
// sponsorTimeSaved
|
||||
"sponsorTimeSavedContainer",
|
||||
//"sponsorTimeSavedContainer",
|
||||
"sponsorTimeSavedDisplay",
|
||||
"sponsorTimeSavedEndWord",
|
||||
// discordButtons
|
||||
@@ -92,6 +92,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
"setUsernameStatus",
|
||||
"setUsername",
|
||||
"usernameInput",
|
||||
"usernameValue",
|
||||
"submitUsername",
|
||||
// More
|
||||
"submissionSection",
|
||||
@@ -170,12 +171,18 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
PageElements.showNoticeAgain.style.display = "unset";
|
||||
}
|
||||
|
||||
utils.sendRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID, (res) => {
|
||||
if (res.status === 200) {
|
||||
PageElements.usernameValue.innerText = JSON.parse(res.responseText).userName
|
||||
}
|
||||
})
|
||||
|
||||
//get the amount of times this user has contributed and display it to thank them
|
||||
if (Config.config.sponsorTimesContributed != undefined) {
|
||||
if (Config.config.sponsorTimesContributed !== 1) {
|
||||
PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
|
||||
//PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
|
||||
} else {
|
||||
PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
|
||||
//PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
|
||||
}
|
||||
PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed;
|
||||
PageElements.sponsorTimesContributionsContainer.style.display = "unset";
|
||||
@@ -241,7 +248,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
}
|
||||
|
||||
PageElements.sponsorTimeSavedDisplay.innerText = getFormattedHours(Config.config.minutesSaved);
|
||||
PageElements.sponsorTimeSavedContainer.style.display = "unset";
|
||||
//PageElements.sponsorTimeSavedContainer.style.display = "unset";
|
||||
}
|
||||
|
||||
messageHandler.query({
|
||||
@@ -855,7 +862,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
PageElements.usernameInput.style.display = "none";
|
||||
|
||||
PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("success");
|
||||
} else {
|
||||
} else {
|
||||
PageElements.setUsernameStatus.innerText = utils.getErrorMessage(response.status);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user