Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-10 13:37:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Pop-up design update (WIP)

Browse Source
This commit is contained in:
mmble
2020-08-08 01:43:04 +02:00
parent df58e3670e
commit 447445fcb0
8 changed files with 5311 additions and 3752 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8248
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -15,17 +15,17 @@
"react-dom": "^16.12.0" "react-dom": "^16.12.0"
}, },
"devDependencies": { "devDependencies": {
"web-ext": "^4.2.0",
"@types/chrome": "0.0.91", "@types/chrome": "0.0.91",
"@types/firefox-webext-browser": "70.0.1", "@types/firefox-webext-browser": "70.0.1",
"@types/jest": "^24.0.23", "@types/jest": "^24.0.23",
"@types/jquery": "^3.3.31", "@types/jquery": "^3.3.31",
"copy-webpack-plugin": "^5.0.5", "copy-webpack-plugin": "^5.0.5",
"jest": "^24.9.0", "jest": "^26.2.2",
"ts-jest": "^24.2.0",
"rimraf": "^3.0.0", "rimraf": "^3.0.0",
"ts-jest": "^26.1.4",
"ts-loader": "^6.2.1", "ts-loader": "^6.2.1",
"typescript": "~3.7.3", "typescript": "~3.7.3",
"web-ext": "^5.0.0",
"webpack": "~4.41.2", "webpack": "~4.41.2",
"webpack-cli": "~3.3.10", "webpack-cli": "~3.3.10",
"webpack-merge": "~4.2.2" "webpack-merge": "~4.2.2"

12
public/_locales/en/messages.json
View File

@@ -92,7 +92,7 @@
"message": "Segment Ends Now" "message": "Segment Ends Now"
}, },
"noVideoID": { "noVideoID": {
"message": "No YouTube video found at this tab. If you know this is a YouTube tab, close this popup and open it again. If that does not work, try reloading the tab." "message": "No YouTube video found.\nIf this is incorrect, refresh the tab."
}, },
"success": { "success": {
"message": "Success!" "message": "Success!"
@@ -125,10 +125,10 @@
"message": "Are you sure you want to submit this?" "message": "Are you sure you want to submit this?"
}, },
"whitelistChannel": { "whitelistChannel": {
"message": "Whitelist Channel" "message": "Add to whitelist"
}, },
"removeFromWhitelist": { "removeFromWhitelist": {
"message": "Remove Channel From Whitelist" "message": "Remove from whitelist"
}, },
"voteOnTime": { "voteOnTime": {
"message": "Vote On A Segment" "message": "Vote On A Segment"
@@ -244,13 +244,13 @@
"message": "Connection Timeout. Check your internet connection. If your internet is working, the server is probably overloaded or down." "message": "Connection Timeout. Check your internet connection. If your internet is working, the server is probably overloaded or down."
}, },
"disableSkipping": { "disableSkipping": {
"message": "Disable SponsorBlock" "message": "Extension is enabled."
}, },
"enableSkipping": { "enableSkipping": {
"message": "Enable SponsorBlock" "message": "Extension is disabled."
}, },
"yourWork": { "yourWork": {
"message": "Your Work", "message": "Your stats",
"description": "Used to describe the section that will show you the statistics from your submissions." "description": "Used to describe the section that will show you the statistics from your submissions."
}, },
"502": { "502": {

1
public/icons/pencil.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

1
public/icons/settings.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

367
public/popup.css
View File

@@ -1,38 +1,155 @@
/* reset some properties to default (youtube messes with them */ :root {
p.popupElement { --sb-main-bg-color: #222626;
margin-block-start: 1em; --sb-main-fg-color: white;
margin-block-end: 1em; --sb-gray-fg-color: #444848;
margin-inline-start: 0px; --sb-on-white-bg: black;
margin-inline-end: 0px; --sb-green-bg: #077B27;
} }
h1.popupElement { #sponsorblockPopup {
margin-block-start: 0.67em; background-color: var(--sb-main-bg-color);
margin-block-end: 0.67em; color: var(--sb-main-fg-color);
margin-inline-start: 0px; font-family: 'Source Sans Pro', sans-serif;
margin-inline-end: 0px; font-size: 14px;
font-weight: bold; overflow-y: scroll;
display: flex;
flex-flow: column nowrap;
align-items: center;
margin: 0;
min-width: 320px;
} }
h2.popupElement { div.logoText {
margin-block-start: 0.83em; display: flex;
margin-block-end: 0.83em; align-items: center;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
} }
h3.popupElement { div.logoText > p {
margin-block-start: 1em; font-size: 32px;
margin-block-end: 1em; margin: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
} }
sub.popupElement { /* disable extension */
font-size: smaller; #disableExtension {
display: flex;
flex-flow: column nowrap;
align-items: center;
} }
/* switch button */
.toggleSwitchContainer {
display: flex;
cursor: pointer;
}
.switchBg {
display: block;
height: 37px;
width: 78px;
border-radius: 18.5px;
}
.switchBg.shadow {
background: none;
box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
opacity: 1;
}
.switchBg.white {
position: absolute;
background: white;
opacity: 1;
}
.switchBg.green {
position: absolute;
background: #00a205;
opacity: 0;
transition: opacity .2s ease-out;
}
.switchDot {
width: 25px;
height: 25px;
margin: 6px;
background: white;
position: absolute;
border-radius: 12.5px;
transition: transform .2s ease-out;
box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
}
#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;
}
.sidebyside {
display: flex;
flex-flow: row nowrap;
width: 88%;
margin: 0 6% 0 6%;
}
.sidebyside > div {
width: 50%;
justify-content: center;
}
/* additional buttons */
#additionalButtons {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
#additionalButtons > button {
background: none;
border: none;
color: white;
width: fit-content;
padding: 0;
}
#additionalButtons, #additionalButtons > button {
font-size: 16px;
}
label > svg > path {
fill: var(--sb-main-fg-color);
}
label > p, #disableExtension > p {
margin: 0;
}
.grayedOut > label > svg > path {
fill: var(--sb-gray-fg-color);
}
.grayedOut > label {
color: var(--sb-gray-fg-color);
}
label > svg.rotated {
transform: rotate(45deg);
}
label > svg, button > img {
margin: 0 8px 0 0;
}
#mainControls > label, #additionalButtons > button {
display: flex;
flex-flow: row nowrap;
}
/* end reset */ /* end reset */
#sponsorBlockPopupLogo { #sponsorBlockPopupLogo {
@@ -42,201 +159,3 @@ sub.popupElement {
.logoText { .logoText {
color: white; color: white;
} }
h1.popupElement {
margin-top: 0px;
margin-bottom: 10px;
}
.popupBody {
font-size: 14px;
background-color: #333;
padding: 0px 5px;
font-family: 'Source Sans Pro', sans-serif;
color: #dddddd;
}
.outerPopupBody {
background-color: #222626;
overflow-y: scroll;
}
.discreteLink.popupElement {
color: #dddddd;
}
.recordingSubtitle.popupElement {
margin-bottom: 10px;
}
.voteButton.popupElement {
height: 32px;
margin-right: 15px;
cursor: pointer;
}
.voteButton:hover.popupElement {
filter: brightness(80%);
}
#discordButtonContainer.popupElement {
font-size: 12px;
}
.sponsorTime.popupElement {
font-size: 20px;
}
.smallLink.popupElement {
font-size: 10px;
text-decoration: underline;
cursor: pointer;
}
.mediumLink.popupElement {
font-size: 15px;
margin-left: 25px;
margin-right: 25px;
text-decoration: underline;
cursor: pointer;
}
.tinyLink.popupElement {
font-size: 10px;
text-decoration: underline;
cursor: pointer;
}
.whitelistButton.popupElement {
background-color:#27a52d;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:16px;
padding:8px 37px;
text-decoration:none;
text-shadow:0px 0px 0px #27663c;
transition: 0.01s background-color;
}
.whitelistButton:hover.popupElement {
background-color:#3acc3a;
}
.whitelistButton:focus.popupElement {
outline: none;
background-color:#3acc3a;
}
.whitelistButton:active.popupElement {
position:relative;
top:1px;
}
.greenButton.popupElement {
background-color:#cc1717;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:16px;
padding:8px 37px;
text-decoration:none;
text-shadow:0px 0px 0px #662727;
transition: 0.01s background-color;
}
.greenButton:hover.popupElement {
background-color:#ec1c1c;
}
.greenButton:focus.popupElement {
outline: none;
background-color:#ec1c1c;
}
.greenButton:active.popupElement {
position:relative;
top:1px;
}
.dangerButton.popupElement {
background-color:#bc3315;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}
.dangerButton:hover.popupElement {
background-color:#d0451b;
}
.dangerButton:focus.popupElement {
outline: none;
background-color:#d0451b;
}
.dangerButton:active.popupElement {
position:relative;
top:1px;
}
.warningButton.popupElement {
background-color:#bc8215;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border: none;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #856829;
}
.warningButton:hover.popupElement {
background-color:#d0821b;
}
.warningButton:focus.popupElement {
outline: none;
background-color:#d0821b;
}
.warningButton:active.popupElement {
position:relative;
top:1px;
}
.smallButton.popupElement {
background-color:#f9902d;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #f9a72d;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:14px;
padding:6px 10px;
text-decoration:none;
}
.smallButton:hover.popupElement {
background-color:#fa9806;
}
.smallButton:focus.popupElement {
outline: none;
background-color:#fa9806;
}
.smallButton:active.popupElement {
position:relative;
top:1px;
}

171
public/popup.html
View File

@@ -1,104 +1,52 @@
<html> <html>
<head> <head>
<title>__MSG_openPopup__</title> <title>__MSG_openPopup__</title>
<link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/> <link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css">
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/> <link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
</head> </head>
<body class="outerPopupBody"> <body id="sponsorblockPopup" class="sponsorBlockPageBody">
<center> <div class="logoText">
<div id="app" class="popupBody sponsorBlockPageBody"> <img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
<h1 class="popupElement logoText"> <p>SponsorBlock</p>
<img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/> </div>
SponsorBlock
</h1>
<!-- Loading text --> <!-- Loading text -->
<p id="loadingIndicator" class="popupElement">__MSG_noVideoID__</p> <p id="loadingIndicator" class="">__MSG_noVideoID__</p>
<!-- Hidden until loading complete -->
<div id="mainControls" class="main popupElement" style="display: none">
<!-- If the video was found in the database --> <!-- If the video was found in the database -->
<div id="videoFound"> <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>
</div> </div>
<div id="additionalButtons">
<div id="downloadedSponsorMessageTimes" class="popupElement"> <!-- 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> </div>
<button id="optionsButton">
<p class="popupElement"> <img src="/icons/settings.svg" alt="Settings icon" width="18" height="18">
__MSG_recordTimesDescription__ __MSG_Options__
</p> </button>
<div>
<button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
</div>
<sub class="popupElement">__MSG_popupHint__</sub>
<div id="submissionSection" class="popupElement" style="display: none">
<b>Sponsor Editing has been moved and will appear after you click submit</b>
<br/>
<div id="submitTimesContainer" class="popupElement" style="display: none">
<button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
</div>
</div>
<div id="discordButtonContainer" class="popupElement" style="display: none">
<br/>
<a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
<br/>
__MSG_discordAdvert__
<br/>
<span id="hideDiscordButton" class="smallLink popupElement">__MSG_hideThis__</span>
</div>
<div>
<br/>
<button id="whitelistChannel" class="whitelistButton popupElement">__MSG_whitelistChannel__</button>
<button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">__MSG_removeFromWhitelist__</button>
<div id="whitelistForceCheck" style="text-decoration: underline; cursor: pointer;display: none">
__MSG_forceChannelCheckPopup__
</div> </div>
</div> </div>
<br/>
<button id="reportAnIssue" class="dangerButton popupElement">__MSG_voteOnTime__</button>
<div id="issueReporterContainer" class="popupElement" style="display: none">
<h3 style="margin-top: 0px" class="popupElement">__MSG_voteOnTime__</h3>
<div id="issueReporterTimeButtons" class="popupElement">
</div>
</div>
<br/>
<br/>
</div>
<div>
<button id="disableSkipping" class="greenButton popupElement">__MSG_disableSkipping__</button>
<button id="enableSkipping" class="whitelistButton popupElement" style="display: none">__MSG_enableSkipping__</button>
</div>
<h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2> <h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2>
<p class="popupElement"> <p class="popupElement">
@@ -109,7 +57,6 @@
</span> </span>
<span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>. <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>.
</span> </span>
<span id="sponsorTimesViewsContainer" class="popupElement" style="display: none"> <span id="sponsorTimesViewsContainer" class="popupElement" style="display: none">
__MSG_savedPeopleFrom__ __MSG_savedPeopleFrom__
<span id="sponsorTimesViewsDisplay" class="popupElement"> <span id="sponsorTimesViewsDisplay" class="popupElement">
@@ -117,17 +64,14 @@
</span> </span>
<span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>. <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>.
</span> </span>
<span id="sponsorTimesOthersTimeSavedContainer" class="popupElement" style="display: none"> <span id="sponsorTimesOthersTimeSavedContainer" class="popupElement" style="display: none">
__MSG_youHaveSavedTime__ __MSG_youHaveSavedTime__
<span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement"> <span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement">
0 0
</span> </span>
<span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span> <span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>
<span class="popupElement">__MSG_youHaveSavedTimeEnd__</span> <span class="popupElement">__MSG_youHaveSavedTimeEnd__</span>
</span> </span>
<div id="sponsorTimesSkipsDoneContainer" class="popupElement" style="display: none"> <div id="sponsorTimesSkipsDoneContainer" class="popupElement" style="display: none">
__MSG_youHaveSkipped__ __MSG_youHaveSkipped__
<span id="sponsorTimesSkipsDoneDisplay" class="popupElement"> <span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
@@ -135,68 +79,43 @@
</span> </span>
<span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span> <span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span>
</div> </div>
<div id="sponsorTimeSavedContainer" class="popupElement" style="display: none"> <div id="sponsorTimeSavedContainer" class="popupElement" style="display: none">
__MSG_youHaveSaved__ __MSG_youHaveSaved__
<span id="sponsorTimeSavedDisplay" class="popupElement"> <span id="sponsorTimeSavedDisplay" class="popupElement">
0 0
</span> </span>
<span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>. <span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>.
</br/>
</br/>
</div> </div>
<div class="popupElement"> <div class="popupElement">
__MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>. __MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats"
target="_blank">__MSG_here__</a>.
</div> </div>
</p> </p>
<div id="setUsernameContainer" class="popupElement"> <div id="setUsernameContainer" class="popupElement">
<button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button> <button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
<br/>
<sub class="popupElement"> <sub class="popupElement">
__MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>. __MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats"
target="_blank">__MSG_here__</a>.
</sub> </sub>
</div> </div>
<div id="setUsername" class="popupElement" style="display: none"> <div id="setUsername" class="popupElement" style="display: none">
<h3>__MSG_setUsername__</h3> <h3>__MSG_setUsername__</h3>
<div id="setUsernameStatusContainer" style="display: none"> <div id="setUsernameStatusContainer" style="display: none">
<h2 id="setUsernameStatus"></h2> <h2 id="setUsernameStatus"></h2>
</div> </div>
<input id="usernameInput" hint="Username"></input> <input id="usernameInput" hint="Username"></input>
<br/>
<br/>
<button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button> <button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
</div> </div>
<div id="optionsButtonContainer" class="popupElement"> <div id="optionsButtonContainer" class="popupElement">
<br/>
<br/>
<button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button> <button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
<br/>
<sub class="popupElement"> <sub class="popupElement">
__MSG_optionsInfo__ __MSG_optionsInfo__
</sub> </sub>
<br/>
</div> </div>
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button> <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
</div> <!-- Scripts that need to load after the html -->
</center> <script src="./js/vendor.js" async></script>
<script src="./js/popup.js" async></script>
</body> </body>
<!-- Scripts that need to load after the html -->
<script src="./js/vendor.js"></script>
<script src="./js/popup.js"></script>
</html> </html>

77
src/popup.ts
View File

@@ -47,19 +47,21 @@ async function runThePopup(messageListener?: MessageListener) {
var PageElements: any = {}; var PageElements: any = {};
["sponsorStart", [//"sponsorStart",
// Top toggles // Top toggles
"whitelistChannel", "whitelistChannel",
"unwhitelistChannel", "unwhitelistChannel",
"whitelistForceCheck", "whitelistToggle",
//"whitelistForceCheck",
"disableSkipping", "disableSkipping",
"enableSkipping", "enableSkipping",
"toggleSwitch",
// Options // Options
"showNoticeAgain", "showNoticeAgain",
"optionsButton", "optionsButton",
// More controls // More controls
"submitTimes", //"submitTimes",
"reportAnIssue", //"reportAnIssue",
// sponsorTimesContributions // sponsorTimesContributions
"sponsorTimesContributionsContainer", "sponsorTimesContributionsContainer",
"sponsorTimesContributionsDisplay", "sponsorTimesContributionsDisplay",
@@ -81,8 +83,8 @@ async function runThePopup(messageListener?: MessageListener) {
"sponsorTimeSavedDisplay", "sponsorTimeSavedDisplay",
"sponsorTimeSavedEndWord", "sponsorTimeSavedEndWord",
// discordButtons // discordButtons
"discordButtonContainer", //"discordButtonContainer",
"hideDiscordButton", //"hideDiscordButton",
// Username // Username
"setUsernameContainer", "setUsernameContainer",
"setUsernameButton", "setUsernameButton",
@@ -101,19 +103,33 @@ async function runThePopup(messageListener?: MessageListener) {
].forEach(id => PageElements[id] = document.getElementById(id)); ].forEach(id => PageElements[id] = document.getElementById(id));
//setup click listeners //setup click listeners
PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage); //PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
PageElements.whitelistChannel.addEventListener("click", whitelistChannel); PageElements.whitelistToggle.addEventListener("change", function() {
PageElements.whitelistForceCheck.addEventListener("click", openOptions); if (this.checked) {
PageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel); whitelistChannel();
PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true)); } else {
PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false)); unwhitelistChannel();
PageElements.submitTimes.addEventListener("click", submitTimes); }
});
//PageElements.whitelistChannel.addEventListener("click", whitelistChannel);
//PageElements.whitelistForceCheck.addEventListener("click", openOptions);
//ageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
PageElements.toggleSwitch.addEventListener("change", function() {
if (this.checked) {
toggleSkipping(false);
} else {
toggleSkipping(true);
}
});
//PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
//PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
//PageElements.submitTimes.addEventListener("click", submitTimes);
PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain); PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
PageElements.setUsernameButton.addEventListener("click", setUsernameButton); PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
PageElements.submitUsername.addEventListener("click", submitUsername); PageElements.submitUsername.addEventListener("click", submitUsername);
PageElements.optionsButton.addEventListener("click", openOptions); PageElements.optionsButton.addEventListener("click", openOptions);
PageElements.reportAnIssue.addEventListener("click", reportAnIssue); //PageElements.reportAnIssue.addEventListener("click", reportAnIssue);
PageElements.hideDiscordButton.addEventListener("click", hideDiscordButton); //PageElements.hideDiscordButton.addEventListener("click", hideDiscordButton);
//if true, the button now selects the end time //if true, the button now selects the end time
let startTimeChosen = false; let startTimeChosen = false;
@@ -130,7 +146,7 @@ async function runThePopup(messageListener?: MessageListener) {
let hideDiscordLaunches = Config.config.hideDiscordLaunches; let hideDiscordLaunches = Config.config.hideDiscordLaunches;
//only if less than 10 launches //only if less than 10 launches
if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) { if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
PageElements.discordButtonContainer.style.display = null; //PageElements.discordButtonContainer.style.display = null;
if (hideDiscordLaunches == undefined) { if (hideDiscordLaunches == undefined) {
hideDiscordLaunches = 1; hideDiscordLaunches = 1;
@@ -144,6 +160,7 @@ async function runThePopup(messageListener?: MessageListener) {
if (disableSkipping != undefined && disableSkipping) { if (disableSkipping != undefined && disableSkipping) {
PageElements.disableSkipping.style.display = "none"; PageElements.disableSkipping.style.display = "none";
PageElements.enableSkipping.style.display = "unset"; PageElements.enableSkipping.style.display = "unset";
PageElements.toggleSwitch.checked = false;
} }
//if the don't show notice again variable is true, an option to //if the don't show notice again variable is true, an option to
@@ -285,7 +302,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.classList.remove("grayedOut");
PageElements.loadingIndicator.style.display = "none"; PageElements.loadingIndicator.style.display = "none";
if (request.found) { if (request.found) {
@@ -309,6 +326,7 @@ async function runThePopup(messageListener?: MessageListener) {
if (response.value) { if (response.value) {
PageElements.whitelistChannel.style.display = "none"; PageElements.whitelistChannel.style.display = "none";
PageElements.unwhitelistChannel.style.display = "unset"; PageElements.unwhitelistChannel.style.display = "unset";
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";
@@ -378,7 +396,7 @@ async function runThePopup(messageListener?: MessageListener) {
} }
//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";
@@ -427,13 +445,13 @@ 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) {
container.appendChild(document.createElement("br")); //container.appendChild(document.createElement("br"));
container.appendChild(document.createElement("br")); //container.appendChild(document.createElement("br"));
} }
} }
} }
@@ -563,7 +581,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);
@@ -786,10 +804,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 = "unset";
} else { } else {
//hide submit times button //hide submit times button
document.getElementById("submitTimesContainer").style.display = "none"; //document.getElementById("submitTimesContainer").style.display = "none";
} }
} }
@@ -854,7 +872,7 @@ async function runThePopup(messageListener?: MessageListener) {
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) {
@@ -896,7 +914,7 @@ async function runThePopup(messageListener?: MessageListener) {
function hideDiscordButton() { function hideDiscordButton() {
Config.config.hideDiscordLink = true; Config.config.hideDiscordLink = true;
PageElements.discordButtonContainer.style.display = "none"; //PageElements.discordButtonContainer.style.display = "none";
} }
//converts time in seconds to minutes:seconds //converts time in seconds to minutes:seconds
@@ -942,7 +960,9 @@ async function runThePopup(messageListener?: MessageListener) {
//change button //change button
PageElements.whitelistChannel.style.display = "none"; PageElements.whitelistChannel.style.display = "none";
PageElements.unwhitelistChannel.style.display = "unset"; PageElements.unwhitelistChannel.style.display = "unset";
if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset"; document.querySelectorAll('label > svg')[0].classList.add("rotated");
//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";
@@ -990,6 +1010,7 @@ async function runThePopup(messageListener?: MessageListener) {
//change button //change button
PageElements.whitelistChannel.style.display = "unset"; PageElements.whitelistChannel.style.display = "unset";
PageElements.unwhitelistChannel.style.display = "none"; PageElements.unwhitelistChannel.style.display = "none";
document.querySelectorAll('label > svg')[0].classList.remove("rotated");
PageElements.downloadedSponsorMessageTimes.innerText = ""; PageElements.downloadedSponsorMessageTimes.innerText = "";
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset"; PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";