Compare commits

..

11 Commits
6.0.1 ... 6.0.2

Author SHA1 Message Date
Ajay
685bda29a6 bump version 2025-10-09 03:20:41 -04:00
Ajay
da1d1ffa7f Merge branch 'master' of https://github.com/ajayyy/SponsorBlock 2025-10-09 03:10:39 -04:00
Ajay
fae3a355f5 Add pride theme 2025-10-09 03:10:24 -04:00
Ajay Ramachandran
1609995aa5 Merge pull request #2355 from FelixFourcolor/segment-list-default-tab
Add option to configure segment list default tab
2025-10-06 13:15:49 -04:00
Ajay
d0978bff79 update translations 2025-10-06 13:15:37 -04:00
felistachio
0257791264 Add segment list default tab config 2025-10-05 21:02:02 -07:00
Ajay
e1b18944bb Colour time inputs as well 2025-10-03 02:29:11 -04:00
Ajay
068307f98a Colour segment selector based on category colour 2025-10-03 02:27:21 -04:00
Ajay
9deb69b71b Fix layout on donation button 2025-10-03 00:55:11 -04:00
Ajay
26f9a85b5b Hide settings not affected by skip profile when non-default profile is selected 2025-10-02 03:41:42 -04:00
Ajay
bc516c21fb Delete temp config if config deleted 2025-10-02 03:34:34 -04:00
23 changed files with 427 additions and 49 deletions

View File

@@ -53,6 +53,8 @@
"icons/PlayerInfoIconSponsorBlocker.svg",
"icons/PlayerDeleteIconSponsorBlocker.svg",
"icons/dearrow.svg",
"icons/sb-pride.png",
"icons/pride.svg",
"popup.html",
"popup.css",
"content.css",

View File

@@ -45,6 +45,8 @@
"icons/PlayerInfoIconSponsorBlocker.svg",
"icons/PlayerDeleteIconSponsorBlocker.svg",
"icons/dearrow.svg",
"icons/sb-pride.png",
"icons/pride.svg",
"popup.html",
"popup.css",
"content.css",

View File

@@ -1,7 +1,7 @@
{
"name": "__MSG_fullName__",
"short_name": "SponsorBlock",
"version": "6.0.1",
"version": "6.0.2",
"default_locale": "en",
"description": "__MSG_Description__",
"homepage_url": "https://sponsor.ajay.app",

View File

@@ -973,4 +973,26 @@ input::-webkit-inner-spin-button {
.sponsorblock-chapter-visible {
display: block !important;
}
/* Pride theme */
.playerButton.prideTheme:nth-of-type(1) {
filter: brightness(50%) sepia(100) saturate(100);
}
.playerButton.prideTheme:nth-of-type(2) {
filter: sepia(100) saturate(100) hue-rotate(0deg);
}
.playerButton.prideTheme:nth-of-type(3) {
filter: sepia(100) saturate(100) hue-rotate(45deg);
}
.playerButton.prideTheme:nth-of-type(4) {
filter: sepia(100) saturate(100) invert() hue-rotate(5deg);
}
.playerButton.prideTheme:nth-of-type(5) {
filter: sepia(100) saturate(100) invert() hue-rotate(35deg);
}

90
public/icons/pride.svg Normal file
View File

@@ -0,0 +1,90 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 11718.75 3810"
width="1000"
height="325"
version="1.1"
id="svg11"
sodipodi:docname="pride.svg"
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs11" />
<sodipodi:namedview
id="namedview11"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="0.42575964"
inkscape:cx="863.16308"
inkscape:cy="32.882403"
inkscape:window-width="1536"
inkscape:window-height="799"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<path
fill="#750787"
d="M 0,0 H 15033.943 V 3810 H 0 Z"
id="path1"
style="stroke-width:1.58293" />
<path
fill="#004dff"
d="M 0,0 H 15033.943 V 3175 H 0 Z"
id="path2"
style="stroke-width:1.58293" />
<path
fill="#008026"
d="M 0,0 H 15033.943 V 2540 H 0 Z"
id="path3"
style="stroke-width:1.58293" />
<path
fill="#ffed00"
d="M 0,0 H 15033.943 V 1905 H 0 Z"
id="path4"
style="stroke-width:1.58293" />
<path
fill="#ff8c00"
d="M 0,0 H 15033.943 V 1270 H 0 Z"
id="path5"
style="stroke-width:1.58293" />
<path
fill="#e40303"
d="M 0,0 H 15033.943 V 635 H 0 Z"
id="path6"
style="stroke-width:1.58293" />
<path
d="M 0,-960.5 2864,1905 0,4770.5 Z"
id="path7" />
<path
fill="#613915"
d="M 0,-480 2384,1905 0,4290 Z"
id="path8" />
<path
fill="#74d7ee"
d="M 0,3810 V 0 l 1912,1905 z"
id="path9" />
<path
fill="#ffafc8"
d="M 0,3330 V 480 l 1420,1425 z"
id="path10" />
<path
fill="#ffffff"
d="M 0,960 951,1905 0,2850 Z"
id="path11" />
<rect
style="fill:#000000;fill-opacity:0.621027;stroke:#550000;stroke-width:42.5545"
id="rect11"
width="12283.648"
height="4656.5938"
x="-243.66638"
y="-421.53296" />
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
public/icons/sb-pride.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -17,6 +17,10 @@
--border-color: #484848;
--black: black;
--white: white;
--selector-red: #c00000;
--selector-red-hover: #fc0303;
--tab-selected: #950000;
}
[data-theme="light"] {
@@ -38,6 +42,10 @@
--white: black;
}
[data-theme="pride"] {
--menu-background: #181818d0;
}
.medium-description, .switch-container, .optionLabel, .categoryTableElement, .promotion-description {
color: var(--white);
}
@@ -58,6 +66,12 @@ html, body {
background-color: var(--background);
}
[data-theme="pride"] body {
background: url("../icons/pride.svg");
background-size: contain;
}
* {
box-sizing: border-box;
}
@@ -107,15 +121,99 @@ html, body {
}
.tab-heading.selected {
background-color: #c00000;
background-color: var(--selector-red);
color: white;
}
.tab-heading:active {
background-color: #950000;
background-color: var(--tab-selected);
color: white;
}
[data-theme="pride"] .tab-heading:nth-of-type(1) {
background-color: #2f0000;
}
[data-theme="pride"] .tab-heading:nth-of-type(2) {
background-color: #3a2000;
}
[data-theme="pride"] .tab-heading:nth-of-type(3) {
background-color: #3e3a00;
}
[data-theme="pride"] .tab-heading:nth-of-type(4) {
background-color: #003e13;
}
[data-theme="pride"] .tab-heading:nth-of-type(5) {
background-color: #00164a;
}
[data-theme="pride"] .tab-heading:hover:nth-of-type(1) {
background-color: #550000;
}
[data-theme="pride"] .tab-heading:hover:nth-of-type(2),
[data-theme="pride"] #category-type tr:nth-of-type(5n) .slider,
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n) .slider {
background-color: #824700;
}
[data-theme="pride"] .tab-heading:hover:nth-of-type(3),
[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) .slider,
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 1) .slider {
background-color: #867d00;
}
[data-theme="pride"] .tab-heading:hover:nth-of-type(4),
[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) .slider,
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 2) .slider {
background-color: #00691f;
}
[data-theme="pride"] .tab-heading:hover:nth-of-type(5),
[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) .slider,
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 3) .slider {
background-color: #002374;
}
[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) .slider,
[data-theme="pride"] [data-type="toggle"]:nth-of-type(5n + 4) .slider {
background-color: #400449;
}
[data-theme="pride"] #category-type tr .optionsSelector {
color: var(--white);
}
[data-theme="pride"] .tab-heading:nth-of-type(1).selected {
background-color: #E40303;
}
[data-theme="pride"] .tab-heading:nth-of-type(2).selected,
[data-theme="pride"] #category-type tr:nth-of-type(10n + 2) .optionsSelector,
[data-theme="pride"] #category-type tr:nth-of-type(5n) input:checked + .slider,
[data-theme="pride"] [data-type]:nth-of-type(5n) :is(input:checked + .slider, .option-button, .optionsSelector) {
background-color: #dd7a00;
}
[data-theme="pride"] .tab-heading:nth-of-type(3).selected,
[data-theme="pride"] #category-type tr:nth-of-type(10n + 4) .optionsSelector,
[data-theme="pride"] #category-type tr:nth-of-type(2n + 1) .optionsSelector,
[data-theme="pride"] #category-type tr:nth-of-type(5n + 1) input:checked + .slider,
[data-theme="pride"] [data-type]:nth-of-type(5n + 1) :is(input:checked + .slider, .option-button, .optionsSelector) {
background-color: #FFED00;
color: rgb(23, 23, 23);
}
[data-theme="pride"] .tab-heading:nth-of-type(4).selected,
[data-theme="pride"] #category-type tr:nth-of-type(10n + 6) .optionsSelector,
[data-theme="pride"] #category-type tr:nth-of-type(5n + 2) input:checked + .slider,
[data-theme="pride"] [data-type]:nth-of-type(5n + 2) :is(input:checked + .slider, .option-button, .optionsSelector) {
background-color: #008026;
}
[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
[data-theme="pride"] #category-type tr:nth-of-type(10n + 8) .optionsSelector,
[data-theme="pride"] #category-type tr:nth-of-type(5n + 3) input:checked + .slider,
[data-theme="pride"] [data-type]:nth-of-type(5n + 3) :is(input:checked + .slider, .option-button, .optionsSelector) {
background-color: #004DFF;
}
[data-theme="pride"] .tab-heading:nth-of-type(5).selected,
[data-theme="pride"] #category-type tr:nth-of-type(10n + 10) .optionsSelector,
[data-theme="pride"] #category-type tr:nth-of-type(5n + 4) input:checked + .slider,
[data-theme="pride"] [data-type]:nth-of-type(5n + 4) :is(input:checked + .slider, .option-button, .optionsSelector) {
background-color: #750787;
}
.option-group > div, .extraOptionGroup {
min-height: 50px;
padding: 15px 0;
@@ -135,7 +233,7 @@ html, body {
padding: 0;
}
.categoryChooserTable .categoryExtraOptions {
#category-type .categoryExtraOptions {
padding-bottom: 15px;
}
@@ -310,7 +408,7 @@ input[type='number'] {
.option-button {
cursor: pointer;
background-color: #c00000;
background-color: var(--selector-red);
padding: 10px;
color: white;
border-radius: 5px;
@@ -320,7 +418,7 @@ input[type='number'] {
}
.option-button:hover:not(.disabled) {
background-color: #fc0303;
background-color: var(--selector-red-hover);
}
.option-button.disabled {
@@ -430,7 +528,7 @@ input[type='number'] {
}
input:checked + .slider {
background-color: #fc0303;
background-color: var(--selector-red-hover);
}
input:checked + .slider:before {
@@ -611,7 +709,7 @@ svg {
}
.optionsSelector {
background-color: #c00000;
background-color: var(--selector-red);
color: white;
border: none;

View File

@@ -19,7 +19,7 @@
<div id="menubar" class="center">
<div id="title" class="titleBar">
<img src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
<img id="title-bar-logo" src="../icons/LogoSponsorBlocker256px.png" class="profilepic" alt="SponsorBlock logo"/>
SponsorBlock
<div id="version"></div>
</div>
@@ -80,9 +80,9 @@
</a>
</div>
<div data-type="react-AdvancedSkipOptionsComponent"></div>
<div data-type="react-AdvancedSkipOptionsComponent" class="hide-when-skip-profile"></div>
<div data-type="toggle" data-sync="forceChannelCheck">
<div data-type="toggle" data-sync="forceChannelCheck" class="hide-when-skip-profile">
<div class="switch-container">
<label class="switch">
<input id="forceChannelCheck" type="checkbox" checked>
@@ -96,7 +96,7 @@
<div class="small-description">__MSG_whatForceChannelCheck__</div>
</div>
<div data-type="toggle" data-sync="showCategoryWithoutPermission">
<div data-type="toggle" data-sync="showCategoryWithoutPermission" class="hide-when-skip-profile">
<div class="switch-container">
<label class="switch">
<input id="showCategoryWithoutPermission" type="checkbox" checked>
@@ -305,15 +305,17 @@
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
</div>
<div data-type="toggle" data-sync="cleanPopup">
<div class="switch-container">
<label class="switch">
<input id="cleanPopup" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="cleanPopup">
__MSG_cleanPopup__
</label>
<div>
<div data-type="toggle" data-sync="cleanPopup">
<div class="switch-container">
<label class="switch">
<input id="cleanPopup" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="cleanPopup">
__MSG_cleanPopup__
</label>
</div>
</div>
<br/>
@@ -329,6 +331,17 @@
</label>
</div>
</div>
<br />
<div data-type="selector" data-sync="segmentListDefaultTab">
<label class="optionLabel" for="segmentListDefaultTab">__MSG_segmentListDefaultTab__:</label>
<select id="segmentListDefaultTab" class="selector-element optionsSelector">
<option value="0">__MSG_SegmentsCap__</option>
<option value="1">__MSG_Chapters__</option>
</select>
</div>
</div>
<div data-type="toggle" data-sync="darkMode">
@@ -343,6 +356,18 @@
</div>
</div>
<div data-type="toggle" data-sync="prideTheme">
<div class="switch-container">
<label class="switch">
<input id="prideTheme" type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch-label" for="prideTheme">
__MSG_prideTheme__
</label>
</div>
</div>
<div data-type="toggle" data-toggle-type="reverse" data-sync="showNewFeaturePopups">
<div class="switch-container">
<label class="switch">

View File

@@ -3,8 +3,29 @@
--sb-main-bg-color: #222;
--sb-main-fg-color: #fff;
--sb-grey-bg-color: #333;
--sb-grey-bg-active-color: #444;
--sb-grey-fg-color: #999;
--sb-red-bg-color: #cc1717;
--sb-red-bg-active-color: #ec1c1c;
--sb-skip-profile-bg: #292828;
--sb-skip-profile-disabled: #808080;
--sb-skip-profile-option-bg: #222;
--sb-skip-profile-highlighted: rgb(127, 0, 0);
}
.prideTheme {
--sb-main-fg-color: #fff;
--sb-grey-bg-color: #008026;
--sb-grey-bg-active-color: #FF8C00;
--sb-grey-fg-color: #FFED00;
--sb-red-bg-color: #732982;
--sb-red-bg-active-color: #004CFF;
--sb-skip-profile-bg: #FFAFC8;
--sb-skip-profile-disabled: #74D7EE;
--sb-skip-profile-option-bg: #f687aa;
--sb-skip-profile-highlighted: #38153f;
background: url("icons/pride.svg");
}
/*
@@ -321,12 +342,22 @@
border-radius: 0px 8px 8px 0px;
}
.sbControlsMenu-item:hover, .sbControlsMenu-item:focus {
background-color: #444;
background-color: var(--sb-grey-bg-active-color) !important;
}
.sbControlsMenu-itemIcon {
margin-bottom: 6px;
}
.prideTheme .sbControlsMenu-item:nth-child(1) {
background-color: #750787;
}
.prideTheme .sbControlsMenu-item:nth-child(3) {
background-color: #0035b1;
}
.prideTheme .sbControlsMenu-item:nth-child(4) {
background-color: #008026;
}
/*
* Whitelist add/remove icon
*/
@@ -447,7 +478,7 @@
}
.sbMediumButton:hover,
.sbMediumButton:focus {
background-color: #ec1c1c;
background-color: var(--sb-red-bg-active-color);
outline: none;
}
.sbMediumButton:active {
@@ -585,12 +616,42 @@
margin: 2px 1px;
}
#sbFooter a:hover {
background-color: #444;
background-color: var(--sb-grey-bg-active-color) !important;
}
.prideTheme #sbFooter a:nth-of-type(1) {
background-color: #E40303;
}
.prideTheme #sbFooter a:nth-of-type(2) {
background-color: #FF8C00;
}
.prideTheme #sbFooter a:nth-of-type(3) {
background-color: #b9ad00;
}
.prideTheme #sbFooter a:nth-of-type(4) {
background-color: #008026;
}
.prideTheme #sbFooter a:nth-of-type(5) {
background-color: #004DFF;
}
.prideTheme #sbFooter a:nth-of-type(6) {
background-color: #750787;
}
.prideTheme #sbFooter a:nth-of-type(7) {
background-color: #c7899d;
}
.prideTheme #sbFooter a:nth-of-type(8) {
background-color: #65b8cb;
}
.prideTheme #sbFooter a:nth-of-type(9) {
background-color: #613915;
}
#sponsorTimesDonateContainer a {
color: var(--sb-main-fg-color);
text-decoration: none;
padding-left: 5px;
}
/*
@@ -661,7 +722,7 @@
top: 80px;
left: 50%;
background-color: #292828;
background-color: var(--sb-skip-profile-bg);
border-radius: 10px;
padding: 10px;
@@ -678,7 +739,7 @@
padding: 5px;
margin: 5px;
background-color: #222;
background-color: var(--sb-skip-profile-option-bg);
border-radius: 5px;
cursor: help;
@@ -695,13 +756,13 @@
border-color: var(--sb-red-bg-color);
}
.skipOptionAction.highlighted {
border-color: rgb(127, 0, 0);
border-color: var(--sb-skip-profile-highlighted);
}
.skipOptionAction:not(.highlighted, .disabled) {
cursor: pointer;
}
.skipOptionAction.disabled {
color: #808080
color: var(--sb-skip-profile-disabled);
}
.optionsSelector {

View File

@@ -28,6 +28,11 @@
min-width: 100%;
}
.sponsorSkipNoticeTableContainer.prideTheme {
background: url("icons/pride.svg");
background-size: cover;
}
.sponsorSkipNotice {
transition: all 0.1s ease-out;
}

View File

@@ -13,6 +13,7 @@ import { isFirefoxOrSafari, waitFor } from "../maze-utils/src";
import { injectUpdatedScripts } from "../maze-utils/src/cleanup";
import { logWarn } from "./utils/logger";
import { chromeP } from "../maze-utils/src/browserApi";
import { getHash } from "../maze-utils/src/hash";
const utils = new Utils({
registerFirefoxContentScript,
unregisterFirefoxContentScript
@@ -136,6 +137,12 @@ chrome.runtime.onInstalled.addListener(function () {
chrome.tabs.create({url: chrome.runtime.getURL("/permissions/index.html")});
}
}
getHash(Config.config!.userID!).then((userID) => {
if (userID == "60eed03c8644b7efa32df06977b3a4c11b62f63518e74a0e29baa1fd449cb54f") {
Config.config.prideTheme = true;
}
});
}, 1500);
if (!isFirefoxOrSafari()) {

View File

@@ -60,7 +60,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
<span className="sponsorBlockCategoryPillTitleSection">
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
src={chrome.runtime.getURL(Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png")}>
</img>
{

View File

@@ -160,7 +160,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
style={noticeStyle} >
<div className={"sponsorSkipNoticeTableContainer"
+ (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "")
+ (Config.config.prideTheme ? " prideTheme" : "")}>
<table className={"sponsorSkipObject sponsorSkipNotice"
+ (this.props.limitWidth ? " sponsorSkipNoticeLimitWidth" : "")}>
<tbody>
@@ -172,10 +173,18 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
<td className="noticeLeftIcon">
{/* Logo */}
{!this.props.hideLogo &&
<SbSvg
id={"sponsorSkipLogo" + this.idSuffix}
fill={this.props.logoFill}
className="sponsorSkipLogo sponsorSkipObject"/>
(
!Config.config.prideTheme ?
<SbSvg
id={"sponsorSkipLogo" + this.idSuffix}
fill={this.props.logoFill}
className="sponsorSkipLogo sponsorSkipObject"/>
:
<img
id={"sponsorSkipLogo" + this.idSuffix}
src={chrome.runtime.getURL("icons/sb-pride.png")}
className="sponsorSkipLogo sponsorSkipObject"/>
)
}
<span id={"sponsorSkipMessage" + this.idSuffix}

View File

@@ -123,6 +123,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
style.marginTop = "15px";
}
const borderColor = this.state.selectedCategory ? Config.config.barTypes[this.state.selectedCategory]?.color : null;
// Create time display
let timeDisplay: JSX.Element;
const timeDisplayStyle: React.CSSProperties = {};
@@ -151,7 +153,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<input id={"submittingTime0" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditInput"
type="text"
style={{color: "inherit", backgroundColor: "inherit"}}
style={{color: "inherit", backgroundColor: "inherit", borderColor}}
value={this.state.sponsorTimeEdits[0] ?? ""}
onKeyDown={(e) => e.stopPropagation()}
onKeyUp={(e) => e.stopPropagation()}
@@ -168,7 +170,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<input id={"submittingTime1" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditInput"
type="text"
style={{color: "inherit", backgroundColor: "inherit"}}
style={{color: "inherit", backgroundColor: "inherit", borderColor}}
value={this.state.sponsorTimeEdits[1] ?? ""}
onKeyDown={(e) => e.stopPropagation()}
onKeyUp={(e) => e.stopPropagation()}
@@ -215,7 +217,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<select id={"sponsorTimeCategories" + this.idSuffix}
className="sponsorTimeEditSelector sponsorTimeCategories"
ref={this.categoryOptionRef}
style={{color: "inherit", backgroundColor: "inherit"}}
style={{color: "inherit", backgroundColor: "inherit", borderColor}}
value={this.state.selectedCategory}
onChange={(event) => this.categorySelectionChange(event)}>
{this.getCategoryOptions()}
@@ -240,7 +242,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<select id={"sponsorTimeActionTypes" + this.idSuffix}
className="sponsorTimeEditSelector sponsorTimeActionTypes"
value={this.state.selectedActionType}
style={{color: "inherit", backgroundColor: "inherit"}}
style={{color: "inherit", backgroundColor: "inherit", borderColor}}
ref={this.actionTypeOptionRef}
onChange={(e) => this.actionTypeSelectionChange(e)}>
{this.getActionTypeOptions(sponsorTime)}
@@ -269,7 +271,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
<input id={"chapterName" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
style={{color: "inherit", backgroundColor: "inherit"}}
style={{color: "inherit", backgroundColor: "inherit", borderColor}}
ref={this.descriptionOptionRef}
type="text"
value={this.state.description}

View File

@@ -23,6 +23,12 @@ export function CategoryChooserComponent() {
updateChannelList(setChannelListText, selectedConfigurationID!);
setSelections(getConfigurationValue<CategorySelection[]>(selectedConfigurationID, "categorySelections"));
if (selectedConfigurationID === null) {
document.querySelectorAll(".hide-when-skip-profile").forEach((e) => e.classList.remove("hidden"));
} else {
document.querySelectorAll(".hide-when-skip-profile").forEach((e) => e.classList.add("hidden"));
}
}, [selectedConfigurationID]);
const createNewConfig = () => {
@@ -145,6 +151,10 @@ export function CategoryChooserComponent() {
}
forceUpdateConfigurationIDs();
if (Config.local.skipProfileTemp && Config.local.skipProfileTemp.configID === selectedConfigurationID) {
Config.local.skipProfileTemp = null;
}
setConfigurations(Config.local!.skipProfiles);
const newID = Object.keys(Config.local!.skipProfiles)[0] as ConfigurationID;
setSelectedConfigurationID(newID);

View File

@@ -1,6 +1,6 @@
import * as CompileConfig from "../config.json";
import * as invidiousList from "../ci/invidiouslist.json";
import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType } from "./types";
import { Category, CategorySelection, CategorySkipOption, NoticeVisibilityMode, PreviewBarOption, SponsorTime, VideoID, SponsorHideType, SegmentListDefaultTab } from "./types";
import { Keybind, ProtoConfig, keybindEquals } from "../maze-utils/src/config";
import { HashedValue } from "../maze-utils/src/hash";
import { Permission, AdvancedSkipRuleSet } from "./utils/skipRule";
@@ -10,6 +10,7 @@ interface SBConfig {
isVip: boolean;
permissions: Record<Category, Permission>;
defaultCategory: Category;
segmentListDefaultTab: SegmentListDefaultTab;
renderSegmentsAsChapters: boolean;
forceChannelCheck: boolean;
minutesSaved: number;
@@ -78,6 +79,7 @@ interface SBConfig {
showZoomToFillError2: boolean;
cleanPopup: boolean;
hideSegmentCreationInPopup: boolean;
prideTheme: boolean;
// Used to cache calculated text color info
categoryPillColors: {
@@ -337,6 +339,7 @@ const syncDefaults = {
isVip: false,
permissions: {},
defaultCategory: "chooseACategory" as Category,
segmentListDefaultTab: SegmentListDefaultTab.Segments,
renderSegmentsAsChapters: false,
forceChannelCheck: false,
minutesSaved: 0,
@@ -400,6 +403,7 @@ const syncDefaults = {
showZoomToFillError2: true,
cleanPopup: false,
hideSegmentCreationInPopup: false,
prideTheme: false,
categoryPillColors: {},

View File

@@ -1917,6 +1917,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
newButton.id = baseID + "Button";
newButton.classList.add("playerButton");
newButton.classList.add("ytp-button");
if (Config.config.prideTheme) newButton.classList.add("prideTheme");
if (isOnYTTV()) {
// Some style needs to be set here, but the numbers don't matter
newButton.setAttribute("style", "width: 40px; height: 40px");

View File

@@ -72,6 +72,12 @@ async function init() {
document.documentElement.setAttribute("data-theme", "light");
}
if (Config.config.prideTheme) {
document.documentElement.setAttribute("data-theme", "pride");
(document.getElementById("title-bar-logo") as HTMLImageElement).src = "../icons/sb-pride.png";
}
const donate = document.getElementById("sbDonate");
donate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
if (!showDonationLink()) {
@@ -196,6 +202,17 @@ async function init() {
document.documentElement.setAttribute("data-theme", "light");
}
break;
case "prideTheme":
if (checkbox.checked) {
document.documentElement.setAttribute("data-theme", "pride");
} else {
if (Config.config.darkMode) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
}
break;
case "trackDownvotes":
if (!checkbox.checked) {
Config.local.downvotedSegments = {};

View File

@@ -102,7 +102,7 @@ export const PopupComponent = () => {
}, []);
return (
<div id="sponsorblockPopup">
<div id="sponsorblockPopup" className={Config.config.prideTheme ? "prideTheme" : ""}>
{
window !== window.top &&
<button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
@@ -124,7 +124,12 @@ export const PopupComponent = () => {
}
<header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
<img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock Logo" width="40" height="40" id="sponsorBlockPopupLogo"/>
<img src={Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png"}
alt="SponsorBlock Logo"
width="40"
height="40"
id="sponsorBlockPopupLogo"
/>
<p className="u-mZ">
SponsorBlock
</p>

View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { ActionType, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
import { ActionType, SegmentListDefaultTab, SegmentUUID, SponsorHideType, SponsorTime, VideoID } from "../types";
import Config from "../config";
import { waitFor } from "../../maze-utils/src";
import { shortCategoryName } from "../utils/categoryUtils";
@@ -61,12 +61,21 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
}, [props.segments]);
React.useEffect(() => {
if (hasSegments){
setTab(SegmentListTab.Segments);
const setTabBasedOnConfig = () => {
const preferChapters = Config.config.segmentListDefaultTab === SegmentListDefaultTab.Chapters;
if (preferChapters) {
setTab(hasChapters ? SegmentListTab.Chapter : SegmentListTab.Segments);
} else {
setTab(hasSegments ? SegmentListTab.Segments : SegmentListTab.Chapter);
}
};
if (Config.isReady()) {
setTabBasedOnConfig();
} else {
setTab(SegmentListTab.Chapter);
waitFor(() => Config.isReady()).then(setTabBasedOnConfig);
}
}, [props.videoID, hasSegments]);
}, [props.videoID, hasSegments, hasChapters]);
const segmentsWithNesting = React.useMemo(() => {
const result: SegmentWithNesting[] = [];

View File

@@ -40,6 +40,10 @@ export const YourWorkComponent = () => {
setViewCount(userInfo.viewCount);
setMinutesSaved(userInfo.minutesSaved);
if (username === "sponege") {
Config.config.prideTheme = true;
}
Config.config!.isVip = userInfo.vip;
Config.config!.permissions = userInfo.permissions;
@@ -191,7 +195,7 @@ function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minu
function DonateMessage(props: { onClose: () => void }): JSX.Element {
return (
<div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center" }}>
<div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center", display: "flex" }}>
<img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
<a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
Config.config.donateClicked = Config.config.donateClicked + 1;

View File

@@ -227,4 +227,9 @@ export enum NoticeVisibilityMode {
MiniForAll = 2,
FadedForAutoSkip = 3,
FadedForAll = 4
}
export enum SegmentListDefaultTab {
Segments,
Chapters,
}