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

Add category color to skip notice

Browse Source
This commit is contained in:
Ajay
2023-07-28 18:42:27 -04:00
parent fc3710b37b
commit 882d462849
3 changed files with 64 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/NoticeComponent.tsx
View File

@@ -1,5 +1,6 @@
import * as React from "react";
import Config from "../config";
import SbSvg from "../svg-icons/sb_svg";
enum CountdownMode {
Timer,
@@ -28,6 +29,7 @@ export interface NoticeProps {
extraClass?: string;
hideLogo?: boolean;
hideRightInfo?: boolean;
logoFill?: string;
// Callback for when this is closed
closeListener: () => void;
@@ -122,10 +124,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
<td className="noticeLeftIcon">
{/* Logo */}
{!this.props.hideLogo &&
<img id={"sponsorSkipLogo" + this.idSuffix}
className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
<SbSvg
id={"sponsorSkipLogo" + this.idSuffix}
fill={this.props.logoFill}
className="sponsorSkipLogo sponsorSkipObject"/>
}
<span id={"sponsorSkipMessage" + this.idSuffix}

4
src/components/SkipNoticeComponent.tsx
View File

@@ -177,7 +177,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
) : null;
return (
<NoticeComponent noticeTitle={this.state.noticeTitle}
<NoticeComponent
noticeTitle={this.state.noticeTitle}
amountOfPreviousNotices={this.amountOfPreviousNotices}
showInSecondSlot={this.showInSecondSlot}
idSuffix={this.idSuffix}
@@ -191,6 +192,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
ref={this.noticeRef}
closeListener={() => this.closeListener()}
smaller={this.state.smaller}
logoFill={Config.config.barTypes[this.segments[0].category].color}
limitWidth={true}
firstColumn={firstColumn}
bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}

55
src/svg-icons/sb_svg.tsx Normal file
View File

@@ -0,0 +1,55 @@
import * as React from "react";
export interface SbIconProps {
id?: string;
fill?: string;
className?: string;
width?: string;
height?: string;
onClick?: () => void;
}
export default function SbSvg({
id = "",
fill = "#ff0000",
className = "",
onClick
}: SbIconProps): JSX.Element {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 565.15 568"
id={id}
className={className}
onClick={() => onClick?.() } >
<g
id="Layer_2"
data-name="Layer 2">
<g
id="Layer_1-2"
data-name="Layer 1"
style={{
fill
}}>
<path
d="M282.58,568a65,65,0,0,1-34.14-9.66C95.41,463.94,2.54,300.46,0,121A64.91,64.91,0,0,1,34,62.91a522.56,522.56,0,0,1,497.16,0,64.91,64.91,0,0,1,34,58.12c-2.53,179.43-95.4,342.91-248.42,437.3A65,65,0,0,1,282.58,568Zm0-548.31A502.24,502.24,0,0,0,43.4,80.22a45.27,45.27,0,0,0-23.7,40.53c2.44,172.67,91.81,330,239.07,420.83a46.19,46.19,0,0,0,47.61,0C453.64,450.73,543,293.42,545.45,120.75a45.26,45.26,0,0,0-23.7-40.54A502.26,502.26,0,0,0,282.58,19.69Z"
id="path8"
style={{
fill
}} />
<path
style={{
fill
}}
d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 220.41016 145.74023 L 411.2793 255.93945 L 220.41016 366.14062 L 220.41016 145.74023 z "
id="path10" />
</g>
</g>
<polygon style={{
fill: "#fff"
}}
points="411.28 255.94 220.41 145.74 220.41 366.14 411.28 255.94"
/>
</svg>
);
}