Add voting for chapters

src/render/ChapterVote.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
+import { VoteResponse } from "../messageTypes";
+import { Category, SegmentUUID, SponsorTime } from "../types";
+
+export class ChapterVote {
+    container: HTMLElement;
+    ref: React.RefObject<ChapterVoteComponent>;
+
+    unsavedState: ChapterVoteState;
+
+    mutationObserver?: MutationObserver;
+    
+    constructor(vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>) {
+        this.ref = React.createRef();
+
+        this.container = document.createElement('span');
+        this.container.id = "chapterVote";
+        this.container.style.height = "100%";
+
+        ReactDOM.render(
+            <ChapterVoteComponent ref={this.ref} vote={vote} />,
+            this.container
+        );
+    }
+
+    getContainer(): HTMLElement {
+        return this.container;
+    }
+
+    close(): void {
+        ReactDOM.unmountComponentAtNode(this.container);
+        this.container.remove();
+    }
+
+    setVisibility(show: boolean): void {
+        const newState = {
+            show,
+        };
+
+        if (this.ref.current) {
+            this.ref.current?.setState(newState);
+        } else {
+            this.unsavedState = newState;
+        }
+    }
+
+    async setSegment(segment: SponsorTime): Promise<void> {
+        if (this.ref.current?.state?.segment !== segment) {
+            const newState = {
+                segment,
+                show: true
+            };
+
+            if (this.ref.current) {
+                this.ref.current?.setState(newState);
+            } else {
+                this.unsavedState = newState;
+            }
+        }
+    }
+}

src/render/GenericNotice.tsx

@@ -5,14 +5,9 @@ import NoticeComponent from "../components/NoticeComponent";
 import Utils from "../utils";
 const utils = new Utils();
 
-import { ContentContainer } from "../types";
+import { ButtonListener, ContentContainer } from "../types";
 import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
 
-export interface ButtonListener {
-    name: string,
-    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
-}
-
 export interface TextBox {
     icon: string,
     text: string

src/render/Tooltip.tsx

@@ -1,29 +1,37 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { ButtonListener } from "../types";
 
 export interface TooltipProps {
-    text: string, 
-    link?: string,
-    referenceNode: HTMLElement,
-    prependElement?: HTMLElement, // Element to append before
-    bottomOffset?: string
+    text?: string; 
+    link?: string;
+    referenceNode: HTMLElement;
+    prependElement?: HTMLElement; // Element to append before
+    bottomOffset?: string;
+    leftOffset?: string;
+    rightOffset?: string;
     timeout?: number;
     opacity?: number;
     displayTriangle?: boolean;
+    extraClass?: string;
     showLogo?: boolean;
     showGotIt?: boolean;
+    buttons?: ButtonListener[];
 }
 
 export class Tooltip {
-    text: string;   
+    text?: string;   
     container: HTMLDivElement;
 
     timer: NodeJS.Timeout;
     
     constructor(props: TooltipProps) {
         props.bottomOffset ??= "70px";
+        props.leftOffset ??= "inherit";
+        props.rightOffset ??= "inherit";
         props.opacity ??= 0.7;
         props.displayTriangle ??= true;
+        props.extraClass ??= "";
         props.showLogo ??= true;
         props.showGotIt ??= true;
         this.text = props.text;
@@ -45,25 +53,29 @@ export class Tooltip {
         const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
         
         ReactDOM.render(
-            <div style={{bottom: props.bottomOffset, backgroundColor}} 
-                className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "")} >
+            <div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}} 
+                className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
                 <div>
                     {props.showLogo ? 
                         <img className="sponsorSkipLogo sponsorSkipObject"
                             src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
                         </img>
                     : null}
-                    <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>
+                    {this.text ? 
+                        <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>
+                    : null}
+
+                    {this.getButtons(props.buttons)}
                 </div>
                 {props.showGotIt ?
                     <button className="sponsorSkipObject sponsorSkipNoticeButton"
@@ -78,6 +90,27 @@ export class Tooltip {
         )
     }
 
+    getButtons(buttons?: ButtonListener[]): JSX.Element[] {
+        if (buttons) {
+            const result: JSX.Element[] = [];
+
+            for (const button of buttons) {
+                result.push(
+                    <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            key={button.name}
+                            onClick={(e) => button.listener(e)}>
+
+                            {button.name}
+                    </button>
+                )
+            }
+
+            return result;
+        } else {
+            return null;
+        }
+    }
+
     close(): void {
         ReactDOM.unmountComponentAtNode(this.container);
         this.container.remove();