external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 09:07:45 +01:00
Code Issues Projects Releases Packages Wiki Activity

Better title text for full video labels

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/content.css
View file

@ -594,7 +594,7 @@ input::-webkit-inner-spin-button {
color: white;
}
.sponsorBlockTooltip::after {
.sponsorBlockTooltip.sbTriangle::after {
content: " ";
position: absolute;
top: 100%;

29
src/components/CategoryPillComponent.tsx
View file

@ -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");

37
src/components/TooltipComponent.tsx Normal file
View file

@ -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;

30
src/render/Tooltip.tsx
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
)