mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-10 05:27:03 +03:00
Pop-up design update (WIP)
This commit is contained in:
mmble
8248
package-lock.json
generated
8248
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -15,17 +15,17 @@
|
||||
"react-dom": "^16.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-ext": "^4.2.0",
|
||||
"@types/chrome": "0.0.91",
|
||||
"@types/firefox-webext-browser": "70.0.1",
|
||||
"@types/jest": "^24.0.23",
|
||||
"@types/jquery": "^3.3.31",
|
||||
"copy-webpack-plugin": "^5.0.5",
|
||||
"jest": "^24.9.0",
|
||||
"ts-jest": "^24.2.0",
|
||||
"jest": "^26.2.2",
|
||||
"rimraf": "^3.0.0",
|
||||
"ts-jest": "^26.1.4",
|
||||
"ts-loader": "^6.2.1",
|
||||
"typescript": "~3.7.3",
|
||||
"web-ext": "^5.0.0",
|
||||
"webpack": "~4.41.2",
|
||||
"webpack-cli": "~3.3.10",
|
||||
"webpack-merge": "~4.2.2"
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
"message": "Segment Ends Now"
|
||||
},
|
||||
"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": {
|
||||
"message": "Success!"
|
||||
@@ -125,10 +125,10 @@
|
||||
"message": "Are you sure you want to submit this?"
|
||||
},
|
||||
"whitelistChannel": {
|
||||
"message": "Whitelist Channel"
|
||||
"message": "Add to whitelist"
|
||||
},
|
||||
"removeFromWhitelist": {
|
||||
"message": "Remove Channel From Whitelist"
|
||||
"message": "Remove from whitelist"
|
||||
},
|
||||
"voteOnTime": {
|
||||
"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."
|
||||
},
|
||||
"disableSkipping": {
|
||||
"message": "Disable SponsorBlock"
|
||||
"message": "Extension is enabled."
|
||||
},
|
||||
"enableSkipping": {
|
||||
"message": "Enable SponsorBlock"
|
||||
"message": "Extension is disabled."
|
||||
},
|
||||
"yourWork": {
|
||||
"message": "Your Work",
|
||||
"message": "Your stats",
|
||||
"description": "Used to describe the section that will show you the statistics from your submissions."
|
||||
},
|
||||
"502": {
|
||||
|
||||
1
public/icons/pencil.svg
Normal file
1
public/icons/pencil.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 229 B |
1
public/icons/settings.svg
Normal file
1
public/icons/settings.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 516 B |
367
public/popup.css
367
public/popup.css
@@ -1,38 +1,155 @@
|
||||
/* reset some properties to default (youtube messes with them */
|
||||
p.popupElement {
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
: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;
|
||||
}
|
||||
|
||||
h1.popupElement {
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-end: 0.67em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
#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;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
h2.popupElement {
|
||||
margin-block-start: 0.83em;
|
||||
margin-block-end: 0.83em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
div.logoText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h3.popupElement {
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
div.logoText > p {
|
||||
font-size: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
sub.popupElement {
|
||||
font-size: smaller;
|
||||
/* disable extension */
|
||||
#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 */
|
||||
|
||||
#sponsorBlockPopupLogo {
|
||||
@@ -42,201 +159,3 @@ sub.popupElement {
|
||||
.logoText {
|
||||
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;
|
||||
}
|
||||
@@ -1,104 +1,52 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>__MSG_openPopup__</title>
|
||||
<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"/>
|
||||
</head>
|
||||
|
||||
<body class="outerPopupBody">
|
||||
<center>
|
||||
<div id="app" class="popupBody sponsorBlockPageBody">
|
||||
<h1 class="popupElement logoText">
|
||||
<img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
|
||||
SponsorBlock
|
||||
</h1>
|
||||
<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">
|
||||
</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="popupElement">__MSG_noVideoID__</p>
|
||||
|
||||
<!-- Hidden until loading complete -->
|
||||
<div id="mainControls" class="main popupElement" style="display: none">
|
||||
<p id="loadingIndicator" class="">__MSG_noVideoID__</p>
|
||||
<!-- 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 id="downloadedSponsorMessageTimes" class="popupElement">
|
||||
|
||||
<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>
|
||||
|
||||
<p class="popupElement">
|
||||
__MSG_recordTimesDescription__
|
||||
</p>
|
||||
|
||||
<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__
|
||||
<button id="optionsButton">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="18" height="18">
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<p class="popupElement">
|
||||
@@ -109,7 +57,6 @@
|
||||
</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">
|
||||
@@ -117,17 +64,14 @@
|
||||
</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">
|
||||
@@ -135,68 +79,43 @@
|
||||
</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>.
|
||||
|
||||
</br/>
|
||||
</br/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</p>
|
||||
|
||||
<div id="setUsernameContainer" class="popupElement">
|
||||
|
||||
<button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
<br/>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="setUsername" class="popupElement" style="display: none">
|
||||
<h3>__MSG_setUsername__</h3>
|
||||
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<h2 id="setUsernameStatus"></h2>
|
||||
</div>
|
||||
|
||||
<input id="usernameInput" hint="Username"></input>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
</div>
|
||||
|
||||
<div id="optionsButtonContainer" class="popupElement">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
|
||||
|
||||
<br/>
|
||||
|
||||
<sub class="popupElement">
|
||||
__MSG_optionsInfo__
|
||||
</sub>
|
||||
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/vendor.js"></script>
|
||||
<script src="./js/popup.js"></script>
|
||||
<script src="./js/vendor.js" async></script>
|
||||
<script src="./js/popup.js" async></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
77
src/popup.ts
77
src/popup.ts
@@ -47,19 +47,21 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
|
||||
var PageElements: any = {};
|
||||
|
||||
["sponsorStart",
|
||||
[//"sponsorStart",
|
||||
// Top toggles
|
||||
"whitelistChannel",
|
||||
"unwhitelistChannel",
|
||||
"whitelistForceCheck",
|
||||
"whitelistToggle",
|
||||
//"whitelistForceCheck",
|
||||
"disableSkipping",
|
||||
"enableSkipping",
|
||||
"toggleSwitch",
|
||||
// Options
|
||||
"showNoticeAgain",
|
||||
"optionsButton",
|
||||
// More controls
|
||||
"submitTimes",
|
||||
"reportAnIssue",
|
||||
//"submitTimes",
|
||||
//"reportAnIssue",
|
||||
// sponsorTimesContributions
|
||||
"sponsorTimesContributionsContainer",
|
||||
"sponsorTimesContributionsDisplay",
|
||||
@@ -81,8 +83,8 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
"sponsorTimeSavedDisplay",
|
||||
"sponsorTimeSavedEndWord",
|
||||
// discordButtons
|
||||
"discordButtonContainer",
|
||||
"hideDiscordButton",
|
||||
//"discordButtonContainer",
|
||||
//"hideDiscordButton",
|
||||
// Username
|
||||
"setUsernameContainer",
|
||||
"setUsernameButton",
|
||||
@@ -101,19 +103,33 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
].forEach(id => PageElements[id] = document.getElementById(id));
|
||||
|
||||
//setup click listeners
|
||||
PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
|
||||
PageElements.whitelistChannel.addEventListener("click", whitelistChannel);
|
||||
PageElements.whitelistForceCheck.addEventListener("click", openOptions);
|
||||
PageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
|
||||
PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
|
||||
PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
|
||||
PageElements.submitTimes.addEventListener("click", submitTimes);
|
||||
//PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
|
||||
PageElements.whitelistToggle.addEventListener("change", function() {
|
||||
if (this.checked) {
|
||||
whitelistChannel();
|
||||
} else {
|
||||
unwhitelistChannel();
|
||||
}
|
||||
});
|
||||
//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.setUsernameButton.addEventListener("click", setUsernameButton);
|
||||
PageElements.submitUsername.addEventListener("click", submitUsername);
|
||||
PageElements.optionsButton.addEventListener("click", openOptions);
|
||||
PageElements.reportAnIssue.addEventListener("click", reportAnIssue);
|
||||
PageElements.hideDiscordButton.addEventListener("click", hideDiscordButton);
|
||||
//PageElements.reportAnIssue.addEventListener("click", reportAnIssue);
|
||||
//PageElements.hideDiscordButton.addEventListener("click", hideDiscordButton);
|
||||
|
||||
//if true, the button now selects the end time
|
||||
let startTimeChosen = false;
|
||||
@@ -130,7 +146,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
let hideDiscordLaunches = Config.config.hideDiscordLaunches;
|
||||
//only if less than 10 launches
|
||||
if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
|
||||
PageElements.discordButtonContainer.style.display = null;
|
||||
//PageElements.discordButtonContainer.style.display = null;
|
||||
|
||||
if (hideDiscordLaunches == undefined) {
|
||||
hideDiscordLaunches = 1;
|
||||
@@ -144,6 +160,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
if (disableSkipping != undefined && disableSkipping) {
|
||||
PageElements.disableSkipping.style.display = "none";
|
||||
PageElements.enableSkipping.style.display = "unset";
|
||||
PageElements.toggleSwitch.checked = false;
|
||||
}
|
||||
|
||||
//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 != undefined) {
|
||||
//remove loading text
|
||||
PageElements.mainControls.style.display = "unset"
|
||||
PageElements.mainControls.classList.remove("grayedOut");
|
||||
PageElements.loadingIndicator.style.display = "none";
|
||||
|
||||
if (request.found) {
|
||||
@@ -309,6 +326,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
if (response.value) {
|
||||
PageElements.whitelistChannel.style.display = "none";
|
||||
PageElements.unwhitelistChannel.style.display = "unset";
|
||||
document.querySelectorAll('label > svg')[0].classList.add("rotated");
|
||||
|
||||
PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
|
||||
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
|
||||
@@ -378,7 +396,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
}
|
||||
|
||||
//add them as buttons to the issue reporting container
|
||||
let container = document.getElementById("issueReporterTimeButtons");
|
||||
//let container = document.getElementById("issueReporterTimeButtons");
|
||||
for (let i = 0; i < request.sponsorTimes.length; i++) {
|
||||
let sponsorTimeButton = document.createElement("button");
|
||||
sponsorTimeButton.className = "warningButton popupElement";
|
||||
@@ -427,13 +445,13 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
voteButtonsContainer.style.display = "unset";
|
||||
});
|
||||
|
||||
container.appendChild(sponsorTimeButton);
|
||||
container.appendChild(voteButtonsContainer);
|
||||
//container.appendChild(sponsorTimeButton);
|
||||
//container.appendChild(voteButtonsContainer);
|
||||
|
||||
//if it is not the last iteration
|
||||
if (i != request.sponsorTimes.length - 1) {
|
||||
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
|
||||
document.getElementById("submitTimesContainer").style.display = "none";
|
||||
//document.getElementById("submitTimesContainer").style.display = "none";
|
||||
|
||||
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
|
||||
if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].segment.length > 1) {
|
||||
//show submit times button
|
||||
document.getElementById("submitTimesContainer").style.display = "unset";
|
||||
//document.getElementById("submitTimesContainer").style.display = "unset";
|
||||
} else {
|
||||
//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() {
|
||||
document.getElementById("issueReporterContainer").style.display = "unset";
|
||||
PageElements.reportAnIssue.style.display = "none";
|
||||
//PageElements.reportAnIssue.style.display = "none";
|
||||
}
|
||||
|
||||
function addVoteMessage(message, UUID) {
|
||||
@@ -896,7 +914,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
|
||||
function hideDiscordButton() {
|
||||
Config.config.hideDiscordLink = true;
|
||||
PageElements.discordButtonContainer.style.display = "none";
|
||||
//PageElements.discordButtonContainer.style.display = "none";
|
||||
}
|
||||
|
||||
//converts time in seconds to minutes:seconds
|
||||
@@ -942,7 +960,9 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
//change button
|
||||
PageElements.whitelistChannel.style.display = "none";
|
||||
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.style.fontWeight = "bold";
|
||||
@@ -990,6 +1010,7 @@ async function runThePopup(messageListener?: MessageListener) {
|
||||
//change button
|
||||
PageElements.whitelistChannel.style.display = "unset";
|
||||
PageElements.unwhitelistChannel.style.display = "none";
|
||||
document.querySelectorAll('label > svg')[0].classList.remove("rotated");
|
||||
|
||||
PageElements.downloadedSponsorMessageTimes.innerText = "";
|
||||
PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
|
||||
|
||||
Reference in New Issue
Block a user