Better title text for full video labels

This commit is contained in:
Ajay
2022-02-06 18:48:03 -05:00
parent cf792e849f
commit 8b6f0d8a2e
4 changed files with 85 additions and 13 deletions

View File

@@ -9,6 +9,9 @@ export interface TooltipProps {
bottomOffset?: string
timeout?: number;
opacity?: number;
displayTriangle?: boolean;
showLogo: boolean;
showGotIt: boolean;
}
export class Tooltip {
@@ -20,6 +23,9 @@ export class Tooltip {
constructor(props: TooltipProps) {
props.bottomOffset ??= "70px";
props.opacity ??= 0.7;
props.displayTriangle ??= true;
props.showLogo ??= true;
props.showGotIt ??= true;
this.text = props.text;
this.container = document.createElement('div');
@@ -40,11 +46,13 @@ export class Tooltip {
ReactDOM.render(
<div style={{bottom: props.bottomOffset, backgroundColor}}
className="sponsorBlockTooltip" >
className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "")} >
<div>
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
{props.showLogo ?
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
: null}
<span className="sponsorSkipObject">
{this.text + (props.link ? ". " : "")}
{props.link ?
@@ -53,16 +61,18 @@ export class Tooltip {
rel="noopener noreferrer"
href={props.link}>
{chrome.i18n.getMessage("LearnMore")}
</a>
</a>
: null}
</span>
</div>
<button className="sponsorSkipObject sponsorSkipNoticeButton"
style ={{float: "right" }}
onClick={() => this.close()}>
{props.showGotIt ?
<button className="sponsorSkipObject sponsorSkipNoticeButton"
style ={{float: "right" }}
onClick={() => this.close()}>
{chrome.i18n.getMessage("GotIt")}
</button>
{chrome.i18n.getMessage("GotIt")}
</button>
: null}
</div>,
this.container
)