diff options
| -rw-r--r-- | public/content.css | 2 | ||||
| -rw-r--r-- | src/components/CategoryPillComponent.tsx | 29 | ||||
| -rw-r--r-- | src/components/TooltipComponent.tsx | 37 | ||||
| -rw-r--r-- | src/render/Tooltip.tsx | 30 |
4 files changed, 85 insertions, 13 deletions
diff --git a/public/content.css b/public/content.css index 6f121e84..065cb759 100644 --- a/public/content.css +++ b/public/content.css @@ -594,7 +594,7 @@ input::-webkit-inner-spin-button { color: white; } -.sponsorBlockTooltip::after { +.sponsorBlockTooltip.sbTriangle::after { content: " "; position: absolute; top: 100%; diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx index b753bc5b..7d46d0aa 100644 --- a/src/components/CategoryPillComponent.tsx +++ b/src/components/CategoryPillComponent.tsx @@ -8,6 +8,7 @@ import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils"; import { VoteResponse } from "../messageTypes"; import { AnimationUtils } from "../utils/animationUtils"; import { GenericUtils } from "../utils/genericUtils"; +import { Tooltip } from "../render/Tooltip"; export interface CategoryPillProps { vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>; @@ -21,6 +22,8 @@ export interface CategoryPillState { class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> { + tooltip?: Tooltip; + constructor(props: CategoryPillProps) { super(props); @@ -41,8 +44,10 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP return ( <span style={style} className={"sponsorBlockCategoryPill"} - title={this.getTitleText()} - onClick={(e) => this.toggleOpen(e)}> + aria-label={this.getTitleText()} + onClick={(e) => this.toggleOpen(e)} + onMouseEnter={() => this.openTooltip()} + onMouseLeave={() => this.closeTooltip()}> <span className="sponsorBlockCategoryPillTitleSection"> <img className="sponsorSkipLogo sponsorSkipObject" src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}> @@ -134,6 +139,26 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP } } + private openTooltip(): void { + const tooltipMount = document.querySelector("ytd-video-primary-info-renderer > #container") as HTMLElement; + if (tooltipMount) { + this.tooltip = new Tooltip({ + text: this.getTitleText(), + referenceNode: tooltipMount, + bottomOffset: "70px", + opacity: 0.95, + displayTriangle: false, + showLogo: false, + showGotIt: false + }); + } + } + + private closeTooltip(): void { + this.tooltip?.close(); + this.tooltip = null; + } + getTitleText(): string { const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`); return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText"); diff --git a/src/components/TooltipComponent.tsx b/src/components/TooltipComponent.tsx new file mode 100644 index 00000000..5e2cacb2 --- /dev/null +++ b/src/components/TooltipComponent.tsx @@ -0,0 +1,37 @@ +import * as React from "react"; +import Config from "../config"; +import { Category, SegmentUUID, SponsorTime } from "../types"; + +export interface TooltipProps { + text: string; + show: boolean; +} + +export interface TooltipState { + +} + +class TooltipComponent extends React.Component<TooltipProps, TooltipState> { + + constructor(props: TooltipProps) { + super(props); + } + + render(): React.ReactElement { + const style: React.CSSProperties = { + display: this.props.show ? "flex" : "none", + position: "absolute", + } + + return ( + <span style={style} + className={"sponsorBlockTooltip"} > + <span className="sponsorBlockTooltipText"> + {this.props.text} + </span> + </span> + ); + } +} + +export default TooltipComponent; diff --git a/src/render/Tooltip.tsx b/src/render/Tooltip.tsx index 3fe14410..fa32d915 100644 --- a/src/render/Tooltip.tsx +++ b/src/render/Tooltip.tsx @@ -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 ) |