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

Move code for smaller notice into general notice component

Browse Source 
Fixes other notices
This commit is contained in:
Ajay Ramachandran
2021-07-01 00:54:52 -04:00
parent 6d07abf6c8
commit d27ddc85ae
3 changed files with 99 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/content.css
View File

@@ -120,17 +120,17 @@
}
.sponsorSkipNoticeParent {
min-width: 350px;
position: absolute;
right: 5px;
bottom: 100px;
right: 10px;
}
z-index: 1000;
.sponsorSkipNoticeParent, .sponsorSkipNotice {
min-width: 350px;
border-radius: 5px;
border-spacing: 5px 10px;
padding-left: 5px;
padding-right: 5px;
@@ -142,21 +142,9 @@
min-width: 350px;
background-color: rgba(28, 28, 28, 0.9);
border-radius: 5px;
border-spacing: 5px 10px;
padding-left: 5px;
padding-right: 5px;
border-collapse: unset;
transition: all 0.1s ease-out;
}
/* .sponsorSkipNotice .miniNotice {
bottom: 146px;
} */
.sponsorSkipNotice .hidden {
display: none;
}

32
src/components/NoticeComponent.tsx
View File

@@ -21,12 +21,13 @@ export interface NoticeProps {
startFaded?: boolean,
firstColumn?: React.ReactElement,
firstRow?: React.ReactElement,
bottomRow?: React.ReactElement[],
smaller?: boolean,
// Callback for when this is closed
closeListener: () => void,
onMouseEnter?: (e: React.MouseEvent<HTMLTableElement, MouseEvent>) => void,
onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void,
zIndex?: number,
style?: React.CSSProperties
@@ -94,14 +95,15 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
}
return (
<table id={"sponsorSkipNotice" + this.idSuffix}
className={"sponsorSkipObject sponsorSkipNotice"
+ (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "")
<div id={"sponsorSkipNotice" + this.idSuffix}
className={"sponsorSkipObject sponsorSkipNoticeParent"
+ (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
style={noticeStyle}
onMouseEnter={(e) => this.onMouseEnter(e) }
onMouseLeave={() => this.timerMouseLeave()}>
onMouseLeave={() => this.timerMouseLeave()}
style={noticeStyle} >
<table className={"sponsorSkipObject sponsorSkipNotice"
+ (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") } >
<tbody>
{/* First row */}
@@ -128,7 +130,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
{/* Right column */}
<td className="sponsorSkipNoticeRightSection"
style={{top: this.props.smaller ? "9.32px" : "8px"}}>
style={{top: "9.32px"}}>
{/* Time left */}
{this.props.timed ? (
@@ -152,8 +154,20 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
{this.props.children}
{!this.props.smaller ?
this.props.bottomRow
: null}
</tbody>
</table>
{/* Add as a hidden table to keep the height constant */}
{this.props.smaller ?
<table style={{visibility: "hidden", paddingTop: "14px"}}>
{this.props.bottomRow}
</table>
: null}
</div>
);
}
@@ -182,7 +196,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
)];
}
onMouseEnter(event: React.MouseEvent<HTMLTableElement, MouseEvent>): void {
onMouseEnter(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
if (this.props.onMouseEnter) this.props.onMouseEnter(event);
this.fadedMouseEnter();

38
src/components/SkipNoticeComponent.tsx
View File

@@ -145,11 +145,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
}
if (this.state.smaller) {
// noticeStyle.transform = "translate(0, -45%)";
// noticeStyle.bottom = "148px";
}
// If it started out as smaller, always keep the
// skip button there
const firstColumn = this.props.smaller ? (
@@ -157,7 +152,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
) : null;
return (
<div className="sponsorSkipNoticeParent">
<NoticeComponent noticeTitle={this.state.noticeTitle}
amountOfPreviousNotices={this.amountOfPreviousNotices}
idSuffix={this.idSuffix}
@@ -169,34 +163,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
style={noticeStyle}
ref={this.noticeRef}
closeListener={() => this.closeListener()}
smaller={this.props.smaller}
smaller={this.state.smaller}
firstColumn={firstColumn}
bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
onMouseEnter={() => this.onMouseEnter() } >
{(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
<source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
</audio>}
{/* Text Boxes */}
{!this.state.smaller ?
this.getMessageBoxes()
: null}
{!this.state.smaller ?
this.getBottomRow()
: null}
</NoticeComponent>
{/* Text Boxes */}
{this.state.smaller ? (
<table style={{visibility: "hidden", paddingTop: "14px"}}>
{this.getMessageBoxes()}
{this.getBottomRow()}
</table>
) : null}
</div>
);
}
@@ -367,14 +342,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}
}
getMessageBoxes(): JSX.Element[] | JSX.Element {
getMessageBoxes(): JSX.Element[] {
if (this.state.messages.length === 0) {
// Add a spacer if there is no text
return (
return [
<tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
className="sponsorBlockSpacer">
className="sponsorBlockSpacer"
key={0}>
</tr>
);
];
}
const elements: JSX.Element[] = [];