Add tooltip about full video update

public/_locales/en/messages.json

@@ -849,8 +849,8 @@
     "SponsorTimeEditScrollNewFeature": {
         "message": "Use your mousewheel while hovering over the edit box to quickly adjust the time. Combinations of the ctrl or shift key can be used to fine tune the changes."
     },
-    "fillerNewFeature": {
+    "categoryPillNewFeature": {
-        "message": "New! Skip tangents and jokes with the filler category. Enable in options"
+        "message": "New! See when a video is entirely sponsored or self-promotion"
     },
     "dayAbbreviation": {
         "message": "d",

public/content.css

@@ -586,6 +586,12 @@ input::-webkit-inner-spin-button {
     max-width: 300px;
     white-space: normal;
     line-height: 1.5em;
+	color: white;
+	font-size: 12px;
+}
+
+.sponsorBlockTooltip a {
+	color: white;
 }
 
 .sponsorBlockTooltip::after {

src/background.ts

@@ -80,6 +80,9 @@ chrome.runtime.onInstalled.addListener(function () {
             const newUserID = utils.generateUserID();
             //save this UUID
             Config.config.userID = newUserID;
+
+            // Don't show update notification
+            Config.config.categoryPillUpdate = true;
         }
     }, 1500);
 });

src/config.ts

@@ -53,6 +53,7 @@ interface SBConfig {
         locked: string
     },
     scrollToEditTimeUpdate: boolean,
+    categoryPillUpdate: boolean,
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
@@ -205,6 +206,7 @@ const Config: SBObject = {
         autoHideInfoButton: true,
         autoSkipOnMusicVideos: false,
         scrollToEditTimeUpdate: false, // false means the tooltip will be shown
+        categoryPillUpdate: false,
 
         categorySelections: [{
             name: "sponsor" as Category,

src/render/CategoryPill.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import CategoryPillComponent, { CategoryPillState } from "../components/CategoryPillComponent";
+import Config from "../config";
 import { VoteResponse } from "../messageTypes";
 import { Category, SegmentUUID, SponsorTime } from "../types";
 import { GenericUtils } from "../utils/genericUtils";
+import { Tooltip } from "./Tooltip";
 
 export class CategoryPill {
     container: HTMLElement;
@@ -79,7 +81,7 @@ export class CategoryPill {
         }
     }
 
-    setSegment(segment: SponsorTime): void {
+    async setSegment(segment: SponsorTime): Promise<void> {
         if (this.ref.current?.state?.segment !== segment) {
             const newState = {
                 segment,
@@ -92,7 +94,23 @@ export class CategoryPill {
             } else {
                 this.unsavedState = newState;
             }
-        }
 
+            if (!Config.config.categoryPillUpdate) {
+                Config.config.categoryPillUpdate = true;
+
+                const watchDiv = await GenericUtils.wait(() => document.querySelector("#info.ytd-watch-flexy") as HTMLElement);
+                if (watchDiv) {
+                    new Tooltip({
+                        text: chrome.i18n.getMessage("categoryPillNewFeature"),
+                        link: "https://blog.ajay.app/full-video-sponsorblock",
+                        referenceNode: watchDiv,
+                        prependElement: watchDiv.firstChild as HTMLElement,
+                        bottomOffset: "-10px",
+                        opacity: 0.95,
+                        timeout: 50000
+                    });
+                }
+            }
+        }
     }
 }

src/render/Tooltip.tsx

@@ -8,6 +8,7 @@ export interface TooltipProps {
     prependElement?: HTMLElement, // Element to append before
     bottomOffset?: string
     timeout?: number;
+    opacity?: number;
 }
 
 export class Tooltip {
@@ -18,11 +19,12 @@ export class Tooltip {
     
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
+        props.opacity ??= 0.7;
         this.text = props.text;
 
         this.container = document.createElement('div');
         this.container.id = "sponsorTooltip" + props.text;
-        this.container.style.display = "relative";
+        this.container.style.position = "relative";
 
         if (props.prependElement) {
             props.referenceNode.insertBefore(this.container, props.prependElement);
@@ -34,8 +36,10 @@ export class Tooltip {
             this.timer = setTimeout(() => this.close(), props.timeout * 1000);
         }
 
+        const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
+        
         ReactDOM.render(
-            <div style={{bottom: props.bottomOffset}} 
+            <div style={{bottom: props.bottomOffset, backgroundColor}} 
                 className="sponsorBlockTooltip" >
                 <div>
                     <img className="sponsorSkipLogo sponsorSkipObject"