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

Rename hidden css class to sbhidden to fix compatibility with Piped

Browse Source 
Fixes #1865
This commit is contained in:
Ajay
2023-10-08 16:38:40 -04:00
parent 39cfdc7b6c
commit 04a9f82bdc
9 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/content.css
View File

@@ -7,7 +7,7 @@
--sb-dark-red-outline: rgb(130,0,0,0.9); --sb-dark-red-outline: rgb(130,0,0,0.9);
} }
.hidden { .sbhidden {
display: none; display: none;
} }
@@ -151,7 +151,7 @@ div:hover > .sponsorBlockChapterBar {
vertical-align: top; vertical-align: top;
} }
.playerButton.hidden:not(.autoHiding) { .playerButton.sbhidden:not(.autoHiding) {
display: none !important; display: none !important;
} }
@@ -169,13 +169,13 @@ div:hover > .sponsorBlockChapterBar {
overflow: visible !important; overflow: visible !important;
} }
.autoHiding:not(.hidden) { .autoHiding:not(.sbhidden) {
transform: translateX(0%) scale(1); transform: translateX(0%) scale(1);
/* opacity is from YouTube page */ /* opacity is from YouTube page */
transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important; transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
} }
.autoHiding.hidden { .autoHiding.sbhidden {
transform: translateX(100%) scale(0); transform: translateX(100%) scale(0);
/* opacity is from YouTube page */ /* opacity is from YouTube page */
transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important; transition: transform 0.2s, width 0.2s, opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
@@ -183,7 +183,7 @@ div:hover > .sponsorBlockChapterBar {
width: 0px !important; width: 0px !important;
} }
.autoHiding.hidden.autoHideLeft { .autoHiding.sbhidden.autoHideLeft {
transform: translateX(-100%) scale(0); transform: translateX(-100%) scale(0);
} }
@@ -272,7 +272,7 @@ div:hover > .sponsorBlockChapterBar {
max-width: calc(100% - 50px); max-width: calc(100% - 50px);
} }
.sponsorSkipNotice .hidden { .sponsorSkipNotice .sbhidden {
display: none; display: none;
} }
@@ -691,7 +691,7 @@ input::-webkit-inner-spin-button {
color: white; color: white;
} }
.skipButtonControlBarContainer.hidden { .skipButtonControlBarContainer.sbhidden {
display: none !important; display: none !important;
} }

2
public/options/options.css
View File

@@ -257,7 +257,7 @@ input[type='number'] {
opacity: 0; opacity: 0;
} }
.hidden { .hidden, .sbhidden {
display: none !important; display: none !important;
} }

2
public/permissions/styles.css
View File

@@ -19,7 +19,7 @@ body {
font-weight: bold; font-weight: bold;
} }
.hidden { .hidden, .sbhidden {
display: none !important; display: none !important;
} }

2
public/popup.css
View File

@@ -27,7 +27,7 @@
position: relative; position: relative;
} }
#sponsorBlockPopupBody .hidden { #sponsorBlockPopupBody .hidden, #sponsorBlockPopupBody .sbhidden {
display: none !important; display: none !important;
} }

2
public/shared.css
View File

@@ -36,7 +36,7 @@
max-width: calc(100% - 50px); max-width: calc(100% - 50px);
} }
.sponsorSkipNotice .hidden { .sponsorSkipNotice .sbhidden {
display: none; display: none;
} }

4
src/components/ChapterVoteComponent.tsx
View File

@@ -44,7 +44,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
<> <>
{/* Upvote Button */} {/* Upvote Button */}
<button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"} <button id={"sponsorTimesDownvoteButtonsContainerUpvoteChapter"}
className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "hidden" : "")} className={"playerButton sbPlayerUpvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
draggable="false" draggable="false"
title={chrome.i18n.getMessage("upvoteButtonInfo")} title={chrome.i18n.getMessage("upvoteButtonInfo")}
onClick={(e) => this.vote(e, 1)}> onClick={(e) => this.vote(e, 1)}>
@@ -55,7 +55,7 @@ class ChapterVoteComponent extends React.Component<ChapterVoteProps, ChapterVote
{/* Downvote Button */} {/* Downvote Button */}
<button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"} <button id={"sponsorTimesDownvoteButtonsContainerDownvoteChapter"}
className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "hidden" : "")} className={"playerButton sbPlayerDownvote ytp-button " + (!this.state.show ? "sbhidden" : "")}
draggable="false" draggable="false"
title={chrome.i18n.getMessage("reportButtonInfo")} title={chrome.i18n.getMessage("reportButtonInfo")}
onClick={(e) => { onClick={(e) => {

6
src/components/NoticeComponent.tsx
View File

@@ -196,21 +196,21 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
<span <span
id={"skipNoticeTimerText" + this.idSuffix} id={"skipNoticeTimerText" + this.idSuffix}
key="skipNoticeTimerText" key="skipNoticeTimerText"
className={this.state.countdownMode !== CountdownMode.Timer ? "hidden" : ""} > className={this.state.countdownMode !== CountdownMode.Timer ? "sbhidden" : ""} >
{chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())} {chrome.i18n.getMessage("NoticeTimeAfterSkip").replace("{seconds}", this.state.countdownTime.toString())}
</span> </span>
),( ),(
<img <img
id={"skipNoticeTimerPaused" + this.idSuffix} id={"skipNoticeTimerPaused" + this.idSuffix}
key="skipNoticeTimerPaused" key="skipNoticeTimerPaused"
className={this.state.countdownMode !== CountdownMode.Paused ? "hidden" : ""} className={this.state.countdownMode !== CountdownMode.Paused ? "sbhidden" : ""}
src={chrome.runtime.getURL("icons/pause.svg")} src={chrome.runtime.getURL("icons/pause.svg")}
alt={chrome.i18n.getMessage("paused")} /> alt={chrome.i18n.getMessage("paused")} />
),( ),(
<img <img
id={"skipNoticeTimerStopped" + this.idSuffix} id={"skipNoticeTimerStopped" + this.idSuffix}
key="skipNoticeTimerStopped" key="skipNoticeTimerStopped"
className={this.state.countdownMode !== CountdownMode.Stopped ? "hidden" : ""} className={this.state.countdownMode !== CountdownMode.Stopped ? "sbhidden" : ""}
src={chrome.runtime.getURL("icons/stop.svg")} src={chrome.runtime.getURL("icons/stop.svg")}
alt={chrome.i18n.getMessage("manualPaused")} /> alt={chrome.i18n.getMessage("manualPaused")} />
)]; )];

20
src/js-components/skipButtonControlBar.ts
View File

@@ -41,7 +41,7 @@ export class SkipButtonControlBar {
this.container = document.createElement("div"); this.container = document.createElement("div");
this.container.classList.add("skipButtonControlBarContainer"); this.container.classList.add("skipButtonControlBarContainer");
this.container.classList.add("hidden"); this.container.classList.add("sbhidden");
if (this.onMobileYouTube) this.container.classList.add("mobile"); if (this.onMobileYouTube) this.container.classList.add("mobile");
this.skipIcon = document.createElement("img"); this.skipIcon = document.createElement("img");
@@ -103,7 +103,7 @@ export class SkipButtonControlBar {
this.refreshText(); this.refreshText();
this.container?.classList?.remove("textDisabled"); this.container?.classList?.remove("textDisabled");
this.textContainer?.classList?.remove("hidden"); this.textContainer?.classList?.remove("sbhidden");
AnimationUtils.disableAutoHideAnimation(this.skipIcon); AnimationUtils.disableAutoHideAnimation(this.skipIcon);
this.startTimer(); this.startTimer();
@@ -111,8 +111,8 @@ export class SkipButtonControlBar {
refreshText(): void { refreshText(): void {
if (this.segment) { if (this.segment) {
this.chapterText?.classList?.add("hidden"); this.chapterText?.classList?.add("sbhidden");
this.container.classList.remove("hidden"); this.container.classList.remove("sbhidden");
this.textContainer.innerText = this.getTitle(); this.textContainer.innerText = this.getTitle();
this.skipIcon.setAttribute("title", this.getTitle()); this.skipIcon.setAttribute("title", this.getTitle());
} }
@@ -134,10 +134,10 @@ export class SkipButtonControlBar {
} }
disable(): void { disable(): void {
this.container.classList.add("hidden"); this.container.classList.add("sbhidden");
this.chapterText?.classList?.remove("hidden"); this.chapterText?.classList?.remove("sbhidden");
this.getChapterPrefix()?.classList?.remove("hidden"); this.getChapterPrefix()?.classList?.remove("sbhidden");
this.enabled = false; this.enabled = false;
} }
@@ -160,10 +160,10 @@ export class SkipButtonControlBar {
} }
this.container.classList.add("textDisabled"); this.container.classList.add("textDisabled");
this.textContainer?.classList?.add("hidden"); this.textContainer?.classList?.add("sbhidden");
this.chapterText?.classList?.remove("hidden"); this.chapterText?.classList?.remove("sbhidden");
this.getChapterPrefix()?.classList?.add("hidden"); this.getChapterPrefix()?.classList?.add("sbhidden");
AnimationUtils.enableAutoHideAnimation(this.skipIcon); AnimationUtils.enableAutoHideAnimation(this.skipIcon);
if (this.onMobileYouTube) { if (this.onMobileYouTube) {

10
src/utils/animationUtils.ts
View File

@@ -27,7 +27,7 @@ function applyLoadingAnimation(element: HTMLElement, time: number, callback?: ()
function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } { function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } {
if (enabled) element.classList.add("autoHiding"); if (enabled) element.classList.add("autoHiding");
element.classList.add("hidden"); element.classList.add("sbhidden");
element.classList.add("animationDone"); element.classList.add("animationDone");
if (!rightSlide) element.classList.add("autoHideLeft"); if (!rightSlide) element.classList.add("autoHideLeft");
@@ -37,7 +37,7 @@ function setupCustomHideAnimation(element: Element, container: Element, enabled
hide: () => { hide: () => {
mouseEntered = false; mouseEntered = false;
if (element.classList.contains("autoHiding")) { if (element.classList.contains("autoHiding")) {
element.classList.add("hidden"); element.classList.add("sbhidden");
} }
}, },
show: () => { show: () => {
@@ -46,7 +46,7 @@ function setupCustomHideAnimation(element: Element, container: Element, enabled
// Wait for next event loop // Wait for next event loop
setTimeout(() => { setTimeout(() => {
if (mouseEntered) element.classList.remove("hidden") if (mouseEntered) element.classList.remove("sbhidden")
}, 10); }, 10);
} }
}; };
@@ -61,12 +61,12 @@ function setupAutoHideAnimation(element: Element, container: Element, enabled =
function enableAutoHideAnimation(element: Element): void { function enableAutoHideAnimation(element: Element): void {
element.classList.add("autoHiding"); element.classList.add("autoHiding");
element.classList.add("hidden"); element.classList.add("sbhidden");
} }
function disableAutoHideAnimation(element: Element): void { function disableAutoHideAnimation(element: Element): void {
element.classList.remove("autoHiding"); element.classList.remove("autoHiding");
element.classList.remove("hidden"); element.classList.remove("sbhidden");
} }
export const AnimationUtils = { export const AnimationUtils = {