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

Merge pull request #1300 from PickleNik/master

Browse Source 
Popup Styling Upgrades
This commit is contained in:
Ajay Ramachandran
2022-06-03 01:59:56 -04:00
committed by GitHub
parent c7b07ba958 56f7b40585
commit a18f431e06
3 changed files with 341 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

540
public/popup.css
View File

@@ -1,40 +1,52 @@
:root { :root {
--sb-main-font-family: "Source Sans Pro", sans-serif; --sb-main-font-family: "Source Sans Pro", sans-serif;
--sb-main-bg-color: #222626; --sb-main-bg-color: #222;
--sb-main-fg-color: #fff; --sb-main-fg-color: #fff;
--sb-grey-bg-color: #333; --sb-grey-bg-color: #333;
--sb-grey-fg-color: #999;
--sb-red-bg-color: #cc1717; --sb-red-bg-color: #cc1717;
} }
/* /*
* Container when popup displayed in-page * Generic utilities
*/ */
.grey-text {
#sponsorBlockPopupContainer { color: var(--sb-grey-fg-color);
}
.white-text {
color: var(--sb-main-fg-color);
}
.sbHeader {
font-size: 20px;
font-weight: bold;
text-align: left;
margin: 0;
}
#sponsorBlockPopupBody .u-mZ {
margin: 0 !important;
position: relative; position: relative;
margin-bottom: 16px; }
#sponsorBlockPopupBody .hidden {
display: none !important;
} }
/* /*
* Disable popup max height when displayed in-page * <button> elements that have icons
*/ */
#setUsernameButton,
#sponsorBlockPopupContainer #sponsorBlockPopupHTML { #copyUserID,
max-height: none; #submitUsername {
} color: var(--sb-main-fg-color);
background: transparent;
/* width: fit-content;
* Disable fixed popup width when displayed in-page padding: none;
*/ border: none;
}
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
width: auto;
}
/* /*
* Main containers * Main containers
*/ */
#sponsorBlockPopupHTML { #sponsorBlockPopupHTML {
color-scheme: dark; color-scheme: dark;
max-height: 600px; max-height: 600px;
@@ -45,8 +57,8 @@
margin: 0; margin: 0;
width: 374px; width: 374px;
max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */ max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
font-family: var(--sb-main-font-family);
font-size: 14px; font-size: 14px;
font-family: var(--sb-main-font-family);
background-color: var(--sb-main-bg-color); background-color: var(--sb-main-bg-color);
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
color-scheme: dark; color-scheme: dark;
@@ -64,15 +76,47 @@
/* /*
* Disable transition on all elements until the extension has loaded * Disable transition on all elements until the extension has loaded
*/ */
.sb-preload * { .sb-preload * {
transition: none !important; transition: none !important;
} }
/* /*
* Close popup button when displayed in-page * Alert indicating that Beta server is enabled
*/ */
#sbBetaServerWarning {
padding: 8px;
font-size: 1em;
font-weight: 700;
color: var(--sb-main-fg-color);
background-color: var(--sb-red-bg-color);
cursor: pointer;
}
/*
* Container when popup displayed in-page (content.ts)
*/
#sponsorBlockPopupContainer {
position: relative;
margin-bottom: 16px;
}
/*
* Disable popup max height when displayed in-page (content.ts)
*/
#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
max-height: none;
}
/*
* Disable fixed popup width when displayed in-page (content.ts)
*/
#sponsorBlockPopupContainer #sponsorBlockPopupBody {
width: auto;
}
/*
* Close popup button when displayed in-page (top-right corner)
*/
.sbCloseButton { .sbCloseButton {
background: transparent; background: transparent;
border: 0; border: 0;
@@ -88,51 +132,34 @@
opacity: 1; opacity: 1;
} }
/*
* Alert indicating that Beta server is enabled
*/
#sbBetaServerWarning {
padding: 8px;
font-size: 1em;
font-weight: 700;
color: var(--sb-main-fg-color);
background-color: var(--sb-red-bg-color);
cursor: pointer;
}
/* /*
* Header logo * Header logo
*/ */
.sbPopupLogo { .sbPopupLogo {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 32px;
font-weight: bold;
justify-content: center; justify-content: center;
font-weight: bold;
user-select: none; user-select: none;
padding: 20px 0 10px; padding: 10px 0px 0px;
font-size: 32px;
} }
.sbPopupLogo img { .sbPopupLogo img {
margin-right: 8px; margin: 8px;
} }
/* /*
* Refresh segments button * Refresh segments button
*/ */
#refreshSegmentsButton { #refreshSegmentsButton {
background: transparent;
border: 0;
border-radius: 50%;
display: flex; display: flex;
padding: 5px;
margin: 5px auto;
align-items: center; align-items: center;
background: transparent;
border-radius: 50%;
margin: 5px auto;
border: none;
padding: 5px;
} }
#refreshSegmentsButton:hover { #refreshSegmentsButton:hover {
background-color: var(--sb-grey-bg-color); background-color: var(--sb-grey-bg-color);
} }
@@ -140,15 +167,14 @@
/* /*
* <details> wrapper around each segment * <details> wrapper around each segment
*/ */
.votingButtons { .votingButtons {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
border-radius: 8px;
margin: 4px 16px;
} }
.votingButtons[open] { .votingButtons[open] {
padding-bottom: 5px; padding-bottom: 5px;
} }
.votingButtons:hover { .votingButtons:hover {
background-color: var(--sb-grey-bg-color); background-color: var(--sb-grey-bg-color);
} }
@@ -156,34 +182,46 @@
/* /*
* Individual segments summaries (clickable <summary>) * Individual segments summaries (clickable <summary>)
*/ */
.segmentSummary { .segmentSummary {
cursor: pointer; display: flex;
font-weight: bold; align-items: center;
padding: 7px; justify-content: space-between;
list-style: none;
white-space: nowrap; white-space: nowrap;
font-weight: bold;
list-style: none;
cursor: pointer;
padding: 4px 8px;
}
.segmentSummary > div {
text-align: left;
} }
/* /*
* Category dot in segment * Category dot in segment
*/ */
.sponsorTimesCategoryColorCircle { .sponsorTimesCategoryColorCircle {
margin: 0 8px; margin-right: 8px;
} }
.dot { .dot {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
} }
/*
* Category name in segment
*/
.summaryLabel {
overflow-wrap: break-word;
white-space: normal;
}
.sbVoteButtonsContainer {
text-align: right;
}
/* /*
* Buttons that appear under a segment on click * Buttons that appear under a segment on click
*/ */
.voteButton { .voteButton {
height: 20px; height: 20px;
padding: 0 5px; padding: 0 5px;
@@ -197,7 +235,6 @@
/* /*
* "Voted!" text that appears after voting on a segment * "Voted!" text that appears after voting on a segment
*/ */
.sponsorTimesThanksForVotingText { .sponsorTimesThanksForVotingText {
font-size: large; font-size: large;
} }
@@ -205,111 +242,44 @@
/* /*
* Main controls menu * Main controls menu
*/ */
.sbControlsMenu { .sbControlsMenu {
margin: 16px;
margin-top: 6px;
border-radius: 8px;
background-color: var(--sb-grey-bg-color); background-color: var(--sb-grey-bg-color);
display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-top: 10px; overflow: hidden;
}
.sbControlsMenu-item {
background: transparent;
border: 0;
cursor: pointer;
user-select: none;
padding: 10px 15px;
flex: 1;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.sbControlsMenu-item {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
user-select: none;
cursor: pointer;
border: none;
flex: 1;
padding: 10px 15px;
trasition: background-color 0.2s ease-in-out;
}
.sbControlsMenu-item:hover { .sbControlsMenu-item:hover {
background-color: #444; background-color: #444;
} }
.sbControlsMenu-itemIcon { .sbControlsMenu-itemIcon {
margin-bottom: 6px; margin-bottom: 6px;
} }
/*
* "Skipping is enabled" toggle
*/
.toggleSwitchContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.toggleSwitchContainer-switch {
display: flex;
margin-bottom: 6px;
}
.switchBg {
display: block;
width: 50px;
height: 23px;
border-radius: 18.5px;
}
.switchBg.shadow {
box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
opacity: 1;
}
.switchBg.white {
position: absolute;
background-color: #ccc;
opacity: 1;
}
.switchBg.green {
position: absolute;
background-color: #00a205;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.switchDot {
background-color: var(--sb-main-fg-color);
border-radius: 50%;
width: 15px;
height: 15px;
margin: 4px;
position: absolute;
box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
transition: transform 0.2s ease-out;
}
#toggleSwitch:checked ~ .switchDot {
transform: translateX(27px);
}
#toggleSwitch:checked ~ .switchBg.green {
opacity: 1;
}
#toggleSwitch:checked ~ .switchBg.white {
opacity: 0;
transition: opacity 0.2s step-end;
}
/* /*
* Whitelist add/remove icon * Whitelist add/remove icon
*/ */
.SBWhitelistIcon > path { .SBWhitelistIcon > path {
fill: var(--sb-main-fg-color); fill: var(--sb-main-fg-color);
} }
.SBWhitelistIcon.rotated { .SBWhitelistIcon.rotated {
transform: rotate(45deg); transform: rotate(45deg);
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
@@ -319,239 +289,255 @@
} }
} }
/*
* "Skipping is enabled" toggle
*/
.toggleSwitchContainer {
display: flex;
align-items: center;
flex-direction: column;
}
.toggleSwitchContainer-switch {
display: flex;
margin-bottom: 6px;
}
.switchBg {
width: 50px;
height: 23px;
display: block;
border-radius: 18.5px;
}
.switchBg.shadow {
box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
opacity: 1;
}
.switchBg.white {
opacity: 1;
position: absolute;
background-color: #ccc;
}
.switchBg.green {
opacity: 0;
position: absolute;
background-color: #00a205;
transition: opacity 0.2s ease-out;
}
.switchDot {
width: 15px;
margin: 4px;
height: 15px;
border-radius: 50%;
position: absolute;
transition: transform 0.2s ease-out;
background-color: var(--sb-main-fg-color);
box-shadow: 0.75px 0.75px 3.8px 0px rgba(50, 50, 50, 0.45);
}
#toggleSwitch:checked ~ .switchDot {
transform: translateX(27px);
}
#toggleSwitch:checked ~ .switchBg.green {
opacity: 1;
}
#toggleSwitch:checked ~ .switchBg.white {
transition: opacity 0.2s step-end;
opacity: 0;
}
/* /*
* Notice that appears when whitelisting a channel, that recommends * Notice that appears when whitelisting a channel, that recommends
* enabling the "Force Channel Check Before Skipping" option * enabling the "Force Channel Check Before Skipping" option
*/ */
#whitelistForceCheck { #whitelistForceCheck {
background-color: #fff3cd; background-color: #fff3cd;
color: #664d03;
display: block;
padding: 10px 15px; padding: 10px 15px;
display: block;
color: #664d03;
} }
#whitelistForceCheck:hover { #whitelistForceCheck:hover {
background-color: #f2e4b7; background-color: #f2e4b7;
} }
/* /*
* Container around the "Segment Starts Now" and "Submit Times" buttons * Submit box
*/ */
#mainControls { #mainControls {
margin-bottom: 12px; margin: 16px;
padding: 8px 12px;
text-align: left;
border-radius: 8px;
border: 2px solid var(--sb-grey-bg-color);
} }
.sponsorStartHint { .sponsorStartHint {
display: block; display: block;
padding: 0 10px 12px; text-align: left;
} }
/* /*
* Generic buttons used for "Segment Starts Now" and "Submit Times" * Generic buttons used for "Segment Starts Now" and "Submit Times"
*/ */
.sbMediumButton { .sbMediumButton {
background-color: var(--sb-red-bg-color); border: none;
border: 0; font-size: 16px;
-moz-border-radius: 28px; padding: 8px 16px;
-webkit-border-radius: 28px;
border-radius: 28px; border-radius: 28px;
display: inline-block; display: inline-block;
-moz-border-radius: 28px;
-webkit-border-radius: 28px;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
font-size: 16px;
padding: 8px 37px;
font-family: var(--sb-main-font-family);
transition: 0.01s background-color; transition: 0.01s background-color;
font-family: var(--sb-main-font-family);
background-color: var(--sb-red-bg-color);
} }
.sbMediumButton:hover, .sbMediumButton:hover,
.sbMediumButton:focus { .sbMediumButton:focus {
outline: none;
background-color: #ec1c1c; background-color: #ec1c1c;
outline: none;
} }
.sbMediumButton:active { .sbMediumButton:active {
position: relative; position: relative;
top: 1px; top: 1px;
} }
/* /*
* "Submit Times" button * "Submit Times" button
*/ */
#submitTimes { #submitTimes {
margin-top: 12px; margin-top: 12px;
} }
/* /*
* Heading utility class * Your Work box
*/ */
.sbHeader {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px;
}
/*
* Side-by-side section of "Your Work"
*/
.sbYourWorkCols { .sbYourWorkCols {
display: flex; margin: 16px;
margin: 0 20px 12px; margin-bottom: 8px;
border-radius: 8px;
border: 2px solid var(--sb-grey-bg-color);
} }
.sbYourWorkCols > div { .sbYourWorkCols > div {
display: flex; display: flex;
align-items: center; border-top: 2px solid var(--sb-grey-bg-color);
flex-basis: 50%; border-bottom: 2px solid var(--sb-grey-bg-color);
justify-content: center;
} }
/* .sbStatsSentence {
* <button> elements that have icons padding-top: 5px;
*/ padding-bottom: 5px;
#setUsernameButton,
#copyUserID,
#submitUsername {
background: transparent;
border: 0;
padding: 0;
color: var(--sb-main-fg-color);
width: fit-content;
}
/*
* Prevent username from wrapping
*/
#setUsernameButton {
flex: 0 1;
margin-right: 5px;
}
/*
* Set username button
*/
#submitUsername {
padding-left: 7px;
} }
/* /*
* Increase font size of username input and display * Increase font size of username input and display
*/ */
#usernameValue, #usernameValue,
#usernameInput, #usernameInput,
#sponsorTimesContributionsDisplay { #sponsorTimesContributionsDisplay {
font-size: 16px; font-size: 16px;
flex: 1 0; flex: 1 0;
} }
/*
/* * Improve alignment of username and submissions
* Left align "Username" and "Submissions" labels
*/ */
#usernameElement,
#usernameElement > div > p, #sponsorTimesContributionsContainer {
display: flex;
flex-direction: column;
justify-content: start;
}
#usernameElement > span,
#sponsorTimesContributionsContainer { #sponsorTimesContributionsContainer {
text-align: start; text-align: start;
} }
/* #sponsorTimesContributionsContainer {
* Enable flexbox for buttons with SVG icon margin-left: 8px;
*/ padding-left: 8px;
border-left: 2px solid var(--sb-grey-bg-color);
#setUsernameContainer > button {
display: flex;
} }
/* /*
* Improve position of "Copy User ID" button * Username
*/ */
#usernameElement {
padding: 8px;
}
#setUsernameContainer {
display: flex;
}
#setUsernameContainer > button {
display: flex;
}
#setUsernameButton {
margin-right: 5px;
flex: 0 1;
}
#submitUsername {
padding-left: 16px;
}
#copyUserID { #copyUserID {
width: 100%; width: 100%;
flex: 0 1; flex: 0 1;
} }
/*
* Container around username display and edit
*/
#setUsernameContainer {
display: flex;
}
/*
* Improve alignment of username and submissions
*/
#usernameElement > div,
#sponsorTimesContributionsContainer > div {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
}
/* /*
* Truncate username display * Truncate username display
*/ */
#usernameValue { #usernameValue {
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 130px; white-space: nowrap;
overflow: hidden;
margin: 0 8px 0 0; margin: 0 8px 0 0;
max-width: 130px;
} }
/* /*
* Set username form container with "expanded" state * Set username form container with "expanded" state
*/ */
#setUsername {
display: flex;
}
#setUsername.SBExpanded { #setUsername.SBExpanded {
width: 200%; width: calc(200% - 130px);
text-align: left;
} }
/* /*
* Set username input * Set username input
*/ */
#usernameInput { #usernameInput {
background: transparent; border: none;
padding: 2px; padding: 4px 8px;
border: var(--sb-main-fg-color) 1px solid; border-radius: 4px;
color: var(--sb-main-fg-color); width: calc(100% - 68px);
width: calc(100% - 24px);
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--sb-main-fg-color);
background: var(--sb-grey-bg-color);
}
/*
* Submissions
*/
#sponsorTimesContributionsContainer {
padding: 8px;
} }
/* /*
* Footer * Footer
*/ */
#sbFooter { #sbFooter {
margin-top: 10px; padding: 8px 0;
padding-bottom: 20px;
} }
#sbFooter a { #sbFooter a {
transition: background 0.3s ease !important;
color: var(--sb-main-fg-color); color: var(--sb-main-fg-color);
display: inline-block;
text-decoration: none; text-decoration: none;
border-radius: 4px;
background: #333;
cursor: pointer;
padding: 4px 8px;
font-weight: 500;
margin: 2px 1px;
}
#sbFooter a:hover {
background: #444;
} }
/* /*
* "Show Notice Again" button * "Show Notice Again" button
*/ */
#showNoticeAgain { #showNoticeAgain {
background: transparent; background: transparent;
border: 1px solid #fff; border: 1px solid #fff;
@@ -560,15 +546,3 @@
margin-bottom: 20px; margin-bottom: 20px;
padding: 5px; padding: 5px;
} }
/*
* Generic utilities
*/
#sponsorBlockPopupBody .u-mZ {
margin: 0 !important;
}
#sponsorBlockPopupBody .hidden {
display: none !important;
}

116
public/popup.html
View File

@@ -23,20 +23,22 @@
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo"> <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
<p class="u-mZ">SponsorBlock</p> <p class="u-mZ">SponsorBlock</p>
</header> </header>
<div id="videoInfo"> <div id="videoInfo">
<!-- Loading text --> <!-- Loading text -->
<p id="loadingIndicator" class="u-mZ">__MSG_noVideoID__</p> <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
<!-- If the video was found in the database --> <!-- If the video was found in the database -->
<p id="videoFound" class="u-mZ"></p> <p id="videoFound" class="u-mZ grey-text"></p>
<button id="refreshSegmentsButton" title="__MSG_refreshSegments__"> <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
<img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" /> <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
</button> </button>
<!-- Video Segments -->
<div id="issueReporterContainer"> <div id="issueReporterContainer">
<div id="issueReporterTimeButtons"></div> <div id="issueReporterTimeButtons"></div>
</div> </div>
</div> </div>
<!-- Toggle Box -->
<div class="sbControlsMenu"> <div class="sbControlsMenu">
<label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item"> <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
<input type="checkbox" style="display:none;" id="whitelistToggle"> <input type="checkbox" style="display:none;" id="whitelistToggle">
@@ -68,25 +70,31 @@
__MSG_forceChannelCheckPopup__ __MSG_forceChannelCheckPopup__
</a> </a>
<!-- Submit box -->
<div id="mainControls" style="display: none"> <div id="mainControls" style="display: none">
<p class="sbHeader"> <p class="sbHeader">
__MSG_recordTimesDescription__ __MSG_recordTimesDescription__
</p> </p>
<sub class="sponsorStartHint">__MSG_popupHint__</sub> <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
<div> <div align="center" style="margin: 8px 0;">
<button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button> <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
</div> <button id="submitTimes" class="sbMediumButton" style="display: none; margin: 0 !important;">__MSG_submitTimesButton__</button>
<div id="submissionSection" style="display: none">
<b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
<button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
</div> </div>
<span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
</div> </div>
<h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1> <!-- Your Work box -->
<div class="sbYourWorkCols"> <div class="sbYourWorkCols">
<div id="usernameElement"> <p class="sbHeader" style="padding: 8px 16px; cursor: pointer;">
<div> __MSG_yourWork__
<p class="u-mZ">__MSG_Username__:</p> </p>
<div>
<!-- Username -->
<div id="usernameElement">
<span class="u-mZ grey-text">__MSG_Username__:
<!-- loading/errors -->
<span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
</span>
<div id="setUsernameContainer"> <div id="setUsernameContainer">
<p id="usernameValue"></p> <p id="usernameValue"></p>
<button id="setUsernameButton" title="__MSG_setUsername__"> <button id="setUsernameButton" title="__MSG_setUsername__">
@@ -97,48 +105,48 @@
</button> </button>
</div> </div>
<div id="setUsername" style="display: none"> <div id="setUsername" style="display: none">
<div id="setUsernameStatusContainer" style="display: none">
<p id="setUsernameStatus" class="u-mZ"></p>
</div>
<input id="usernameInput" placeholder="Username"> <input id="usernameInput" placeholder="Username">
<button id="submitUsername"> <button id="submitUsername">
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck"> <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
</button> </button>
</div> </div>
</div> </div>
</div> <!-- Submissions -->
<div id="sponsorTimesContributionsContainer" class="hidden"> <div id="sponsorTimesContributionsContainer" class="hidden">
<div> <p class="u-mZ grey-text">__MSG_Submissions__:</p>
<p class="u-mZ">__MSG_Submissions__:</p> <span id="sponsorTimesContributionsDisplay">0</span>
<span id="sponsorTimesContributionsDisplay">
0
</span>
</div> </div>
</div> </div>
</div>
<p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ"> <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ sbStatsSentence">
__MSG_savedPeopleFrom__ __MSG_savedPeopleFrom__
<b><span id="sponsorTimesViewsDisplay"> <b>
0 <span id="sponsorTimesViewsDisplay">0</span>
</span></b> </b>
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span> <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
<br> <br />
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span> (
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b> <b>
<span>__MSG_youHaveSavedTimeEnd__</span>). <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
</p> <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
<p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ"> </b>
__MSG_youHaveSkipped__ <span>__MSG_youHaveSavedTimeEnd__</span>
<b><span id="sponsorTimesSkipsDoneDisplay"> )
0 </p>
</span></b> <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ sbStatsSentence">
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span> __MSG_youHaveSkipped__
(<b><span id="sponsorTimeSavedDisplay"> <b>
0 <span id="sponsorTimesSkipsDoneDisplay">0</span>
</span> </b>
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>). <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
</p> (
<b>
<span id="sponsorTimeSavedDisplay">0</span>
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
</b>
)
</p>
</div>
<footer id="sbFooter"> <footer id="sbFooter">
<div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;"> <div id="sponsorTimesDonateContainer" style="display: none; align-items: center; justify-content: center;">
@@ -149,13 +157,13 @@
<img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" /> <img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
</div> </div>
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a> | <a id="helpButton">__MSG_help__</a>
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a> | <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
<a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
<br />
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a> <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
<br/> <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
<a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a> | <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
<a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a> |
<a id="helpButton">__MSG_help__</a> |
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a> <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
</footer> </footer>

34
src/popup.ts
View File

@@ -106,7 +106,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
// Username // Username
"setUsernameContainer", "setUsernameContainer",
"setUsernameButton", "setUsernameButton",
"setUsernameStatusContainer", "setUsernameStatus",
"setUsernameStatus", "setUsernameStatus",
"setUsername", "setUsername",
"usernameInput", "usernameInput",
@@ -114,7 +114,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
"submitUsername", "submitUsername",
"sbPopupIconCopyUserID", "sbPopupIconCopyUserID",
// More // More
"submissionSection", "submissionHint",
"mainControls", "mainControls",
"loadingIndicator", "loadingIndicator",
"videoFound", "videoFound",
@@ -448,15 +448,24 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full"); segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
} else { } else {
segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
(segmentTimes[i].actionType !== ActionType.Poi (segmentTimes[i].actionType !== ActionType.Poi
? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
: ""); : "");
} }
segmentTimeFromToNode.style.margin = "5px"; segmentTimeFromToNode.style.margin = "5px";
// for inline-styling purposes
const labelContainer = document.createElement("div");
labelContainer.appendChild(categoryColorCircle);
segmentSummary.appendChild(categoryColorCircle); const span = document.createElement('span');
segmentSummary.appendChild(textNode); span.className = "summaryLabel";
span.appendChild(textNode);
labelContainer.appendChild(span);
// for inline-styling purposes
segmentSummary.appendChild(labelContainer);
segmentSummary.appendChild(segmentTimeFromToNode); segmentSummary.appendChild(segmentTimeFromToNode);
const votingButtons = document.createElement("details"); const votingButtons = document.createElement("details");
@@ -465,7 +474,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//thumbs up and down buttons //thumbs up and down buttons
const voteButtonsContainer = document.createElement("div"); const voteButtonsContainer = document.createElement("div");
voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID; voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
voteButtonsContainer.setAttribute("align", "center"); voteButtonsContainer.classList.add("sbVoteButtonsContainer");
const upvoteButton = document.createElement("img"); const upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -581,7 +590,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
function updateSegmentEditingUI() { function updateSegmentEditingUI() {
PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart"); PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart");
PageElements.submissionSection.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none"; PageElements.submitTimes.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
PageElements.submissionHint.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
} }
//make the options div visible //make the options div visible
@@ -624,7 +634,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.setUsername.style.display = "flex"; PageElements.setUsername.style.display = "flex";
PageElements.setUsername.classList.add("SBExpanded"); PageElements.setUsername.classList.add("SBExpanded");
PageElements.setUsernameStatusContainer.style.display = "none"; PageElements.setUsernameStatus.style.display = "none";
PageElements.sponsorTimesContributionsContainer.classList.add("hidden"); PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
} }
@@ -632,7 +642,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//submit the new username //submit the new username
function submitUsername() { function submitUsername() {
//add loading indicator //add loading indicator
PageElements.setUsernameStatusContainer.style.display = "unset"; PageElements.setUsernameStatus.style.display = "unset";
PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading"); PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) { utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
@@ -645,7 +655,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.setUsername.classList.remove("SBExpanded"); PageElements.setUsername.classList.remove("SBExpanded");
PageElements.usernameValue.innerText = PageElements.usernameInput.value; PageElements.usernameValue.innerText = PageElements.usernameInput.value;
PageElements.setUsernameStatusContainer.style.display = "none"; PageElements.setUsernameStatus.style.display = "none";
PageElements.sponsorTimesContributionsContainer.classList.remove("hidden"); PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
} else { } else {