mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-11 14:07:13 +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;
|
||||
}
|
||||
@@ -10,26 +10,52 @@
|
||||
background-color: var(--sb-main-bg-color);
|
||||
color: var(--sb-main-fg-color);
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 14px;
|
||||
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;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
color: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
div.logoText > p {
|
||||
div.logoText>p, .recordingSubtitle {
|
||||
font-size: 32px;
|
||||
margin: 0;
|
||||
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;
|
||||
@@ -42,6 +68,7 @@ div.logoText > p {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switchBg {
|
||||
display: block;
|
||||
height: 37px;
|
||||
@@ -82,9 +109,11 @@ div.logoText > p {
|
||||
#toggleSwitch:checked~.switchDot {
|
||||
transform: translateX(40px);
|
||||
}
|
||||
|
||||
#toggleSwitch:checked~.switchBg.green {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#toggleSwitch:checked~.switchBg.white {
|
||||
opacity: 0 !important;
|
||||
transition: opacity .2s step-end;
|
||||
@@ -102,6 +131,10 @@ div.logoText > p {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#videoInfo {
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* additional buttons */
|
||||
|
||||
#additionalButtons {
|
||||
@@ -110,7 +143,7 @@ div.logoText > p {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#additionalButtons > button {
|
||||
#additionalButtons>button, button#setUsernameButton, #submitUsername {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
@@ -119,20 +152,29 @@ div.logoText > p {
|
||||
}
|
||||
|
||||
#additionalButtons, #additionalButtons>button {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
label>svg>path {
|
||||
fill: var(--sb-main-fg-color);
|
||||
}
|
||||
|
||||
label > p, #disableExtension > p {
|
||||
label>p, #disableExtension>p, #usernameValue, #usernameElement > p,#sponsorTimesContributionsContainer > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#usernameElement > p, #sponsorTimesContributionsContainer {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.grayedOut>label>svg>path {
|
||||
fill: var(--sb-gray-fg-color);
|
||||
}
|
||||
|
||||
.grayedOut>label {
|
||||
color: var(--sb-gray-fg-color);
|
||||
}
|
||||
@@ -141,21 +183,39 @@ label > svg.rotated {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
label > svg, button > img {
|
||||
margin: 0 8px 0 0;
|
||||
label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#mainControls > label, #additionalButtons > button {
|
||||
#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;
|
||||
}
|
||||
|
||||
@@ -6,20 +6,25 @@
|
||||
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
|
||||
</head>
|
||||
|
||||
<body id="sponsorblockPopup" class="sponsorBlockPageBody">
|
||||
<div class="logoText">
|
||||
<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="videoInfo" class="bottomSpace">
|
||||
<div class="bottomSpace">
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator" class="">__MSG_noVideoID__</p>
|
||||
<p id="loadingIndicator">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
<p id="downloadedSponsorMessageTimes" class=""></p>
|
||||
</div>
|
||||
<p id="downloadedSponsorMessageTimes"></p>
|
||||
</div>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer">
|
||||
<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>
|
||||
@@ -31,88 +36,82 @@
|
||||
</div>
|
||||
<div id="additionalButtons">
|
||||
<!-- grayedOut until loading complete -->
|
||||
<div id="mainControls" class="grayedOut">
|
||||
<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="18" height="18">
|
||||
<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">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="18" height="18">
|
||||
<button id="optionsButton" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="16" height="16">
|
||||
__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">
|
||||
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>
|
||||
<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="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="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<h2 id="setUsernameStatus"></h2>
|
||||
<p id="setUsernameStatus"></p>
|
||||
</div>
|
||||
<input id="usernameInput" hint="Username"></input>
|
||||
<button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
<button id="submitUsername">
|
||||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16">
|
||||
</button>
|
||||
</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>
|
||||
<div id="sponsorTimesContributionsContainer" style="display: none">
|
||||
<p>__MSG_soFarUHSubmited__</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
|
||||
(<b><span id="sponsorTimeSavedDisplay">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
|
||||
</div>
|
||||
<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>
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/vendor.js" async></script>
|
||||
<script src="./js/popup.js" async></script>
|
||||
|
||||
17
src/popup.ts
17
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({
|
||||
|
||||
Reference in New Issue
Block a user