mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 09:07:45 +01:00
Make bigger buttons on mobile skip button
This commit is contained in:
parent
0647576d6f
commit
8e254c5807
3 changed files with 20 additions and 4 deletions
|
@ -294,6 +294,10 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
.sponsorSkipNoticeCloseButton.biggerCloseButton {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sponsorSkipMessage {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
@ -302,6 +306,7 @@
|
|||
margin-top: auto;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.sponsorSkipInfo {
|
||||
|
|
|
@ -33,6 +33,7 @@ export interface NoticeProps {
|
|||
|
||||
zIndex?: number,
|
||||
style?: React.CSSProperties
|
||||
biggerCloseButton?: boolean;
|
||||
}
|
||||
|
||||
export interface NoticeState {
|
||||
|
@ -151,7 +152,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
|
|||
|
||||
{/* Close button */}
|
||||
<img src={chrome.extension.getURL("icons/close.png")}
|
||||
className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
|
||||
className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
|
||||
+ (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
|
||||
onClick={() => this.close()}>
|
||||
</img>
|
||||
</td>
|
||||
|
|
|
@ -188,6 +188,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
|
|||
maxCountdownTime={this.state.maxCountdownTime}
|
||||
videoSpeed={() => this.contentContainer().v?.playbackRate}
|
||||
style={noticeStyle}
|
||||
biggerCloseButton={this.contentContainer().onMobileYouTube}
|
||||
ref={this.noticeRef}
|
||||
closeListener={() => this.closeListener()}
|
||||
smaller={this.state.smaller}
|
||||
|
@ -350,13 +351,21 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
|
|||
if (this.state.showSkipButton && (this.segments.length > 1
|
||||
|| getCategoryActionType(this.segments[0].category) !== CategoryActionType.POI
|
||||
|| this.props.unskipTime)) {
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
marginLeft: "4px",
|
||||
color: (this.state.actionState === SkipNoticeAction.Unskip) ? this.selectedColor : this.unselectedColor
|
||||
};
|
||||
if (this.contentContainer().onMobileYouTube) {
|
||||
style.padding = "20px";
|
||||
style.minWidth = "100px";
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="sponsorSkipNoticeUnskipSection">
|
||||
<button id={"sponsorSkipUnskipButton" + this.idSuffix}
|
||||
className="sponsorSkipObject sponsorSkipNoticeButton"
|
||||
style={{marginLeft: "4px",
|
||||
color: (this.state.actionState === SkipNoticeAction.Unskip) ? this.selectedColor : this.unselectedColor
|
||||
}}
|
||||
style={style}
|
||||
onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
|
||||
{this.state.skipButtonText + (this.state.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "")}
|
||||
</button>
|
||||
|
|
Loading…
Reference in a new issue