Add tooltip about highlight feature

public/_locales/en/messages.json

@@ -711,6 +711,10 @@
     "help": {
         "message": "Help"
     },
+    "GotIt": {
+        "message": "Got it",
+        "description": "Used as the button to dismiss a tooltip"
+    },
     "experiementOptOut": {
         "message": "Opt-out of all future experiments",
         "description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."
@@ -787,5 +791,11 @@
     },
     "Credits": {
         "message": "Credits"
+    },
+    "highlightNewFeature": {
+        "message": "New! Get to the point of the video with one click with the new highlight category"
+    },
+    "LearnMore": {
+        "message": "Learn More"
     }
 }

public/content.css

@@ -519,3 +519,24 @@ input::-webkit-inner-spin-button {
     display: block;
     margin: auto;
 }
+
+.sponsorBlockTooltip {
+    position: absolute;
+    background-color: rgba(28, 28, 28, 0.7);
+    border-radius: 5px;
+    padding: 10px;
+    max-width: 300px;
+    white-space: normal;
+    line-height: 1.5em;
+}
+
+.sponsorBlockTooltip::after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    left: 15%;
+    margin-left: -15px;
+    border-width: 15px;
+    border-style: solid;
+    border-color: rgba(28, 28, 28, 0.7) transparent transparent transparent;
+}

src/background.ts

@@ -80,6 +80,8 @@ chrome.runtime.onInstalled.addListener(function () {
             const newUserID = utils.generateUserID();
             //save this UUID
             Config.config.userID = newUserID;
+
+            Config.config.highlightCategoryUpdate = false;
         }
     }, 1500);
 });

src/config.ts

@@ -41,6 +41,7 @@ interface SBConfig {
     showDonationLink: boolean,
     autoHideInfoButton: boolean,
     autoSkipOnMusicVideos: boolean,
+    highlightCategoryUpdate: boolean
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
@@ -185,6 +186,7 @@ const Config: SBObject = {
         showDonationLink: true,
         autoHideInfoButton: true,
         autoSkipOnMusicVideos: false,
+        highlightCategoryUpdate: false, // TODO: Remove this once update is done
 
         categorySelections: [{
             name: "sponsor" as Category,

src/content.ts

@@ -15,6 +15,7 @@ import { Message, MessageResponse } from "./messageTypes";
 import * as Chat from "./js-components/chat";
 import { getCategoryActionType } from "./utils/categoryUtils";
 import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
+import { Tooltip } from "./render/Tooltip";
 
 // Hack to get the CSS loaded on permission-based sites (Invidious)
 utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@@ -1104,7 +1105,19 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
     if (!autoSkip 
             && skippingSegments.length === 1 
             && getCategoryActionType(skippingSegments[0].category) === CategoryActionType.POI) {
-        skipButtonControlBar.enable(skippingSegments[0]);
+        skipButtonControlBar.enable(skippingSegments[0], !Config.config.highlightCategoryUpdate ? 15 : 0);
+
+        if (!Config.config.highlightCategoryUpdate) {
+            new Tooltip({
+                text: chrome.i18n.getMessage("highlightNewFeature"),
+                link: "https://blog.ajay.app/highlight-sponsorblock",
+                referenceNode: skipButtonControlBar.getElement().parentElement,
+                prependElement: skipButtonControlBar.getElement(),
+                timeout: 15
+            });
+
+            Config.config.highlightCategoryUpdate = true;
+        }
 
         activeSkipKeybindElement?.setShowKeybindHint(false);
         activeSkipKeybindElement = skipButtonControlBar;

src/js-components/skipButtonControlBar.ts

@@ -18,6 +18,7 @@ export class SkipButtonControlBar {
     showKeybindHint = true;
 
     timeout: NodeJS.Timeout;
+    duration = 0;
 
     skip: (segment: SponsorTime) => void;
 
@@ -42,6 +43,10 @@ export class SkipButtonControlBar {
         this.container.addEventListener("mouseleave", () => this.startTimer());
     }
 
+    getElement(): HTMLElement {
+        return this.container;
+    }
+
     attachToPage(): void {
         const leftControlsContainer = document.querySelector(".ytp-left-controls");
         this.chapterText = document.querySelector(".ytp-chapter-container");
@@ -51,7 +56,8 @@ export class SkipButtonControlBar {
         }
     }
 
-    enable(segment: SponsorTime): void {
+    enable(segment: SponsorTime, duration?: number): void {
+        if (duration) this.duration = duration;
         this.segment = segment;
         this.refreshText();
 
@@ -78,7 +84,7 @@ export class SkipButtonControlBar {
 
     startTimer(): void {
         this.stopTimer();
-        this.timeout = setTimeout(() => this.disable(), Config.config.skipNoticeDuration * 1000);
+        this.timeout = setTimeout(() => this.disable(), Math.max(Config.config.skipNoticeDuration, this.duration) * 1000);
     }
 
     disable(): void {

src/render/Tooltip.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export interface TooltipProps {
+    text: string, 
+    link?: string,
+    referenceNode: HTMLElement,
+    prependElement?: HTMLElement, // Element to append before
+    bottomOffset?: string
+    timeout?: number;
+}
+
+export class Tooltip {
+    text: string;   
+    container: HTMLDivElement;
+
+    timer: NodeJS.Timeout;
+    
+    constructor(props: TooltipProps) {
+        props.bottomOffset ??= "70px";
+        this.text = props.text;
+
+        this.container = document.createElement('div');
+        this.container.id = "sponsorTooltip" + props.text;
+        this.container.style.display = "relative";
+
+        if (props.prependElement) {
+            props.referenceNode.insertBefore(this.container, props.prependElement);
+        } else {
+            props.referenceNode.appendChild(this.container);
+        }
+
+        if (props.timeout) {
+            this.timer = setTimeout(() => this.close(), props.timeout * 1000);
+        }
+
+        ReactDOM.render(
+            <div style={{bottom: props.bottomOffset}} 
+                className="sponsorBlockTooltip" >
+                <div>
+                    <img className="sponsorSkipLogo sponsorSkipObject"
+                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                    </img>
+                    <span className="sponsorSkipObject">
+                        {this.text + (props.link ? ". " : "")}
+                        {props.link ? 
+                            <a style={{textDecoration: "underline"}} 
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href={props.link}>
+                                {chrome.i18n.getMessage("LearnMore")}
+                                </a> 
+                        : null}
+                    </span>
+                </div>
+                <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                    style ={{float: "right" }}
+                    onClick={() => this.close()}>
+
+                    {chrome.i18n.getMessage("GotIt")}
+                </button>
+            </div>,
+            this.container
+        )
+    }
+
+    close(): void {
+        ReactDOM.unmountComponentAtNode(this.container);
+        this.container.remove();
+
+        if (this.timer) clearTimeout(this.timer);
+    }
+}