Move maze utils to a submodule, move tooltip out

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "public/_locales"]
 	path = public/_locales
 	url = https://github.com/ajayyy/ExtensionTranslations
+[submodule "maze-utils"]
+	path = maze-utils
+	url = https://github.com/ajayyy/maze-utils

maze-utils

@@ -0,0 +1 @@
+Subproject commit 6c30e0993198ec6918d620b34ab03bb0c7fc116f

src/components/TooltipComponent.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-
-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;

src/maze-utils

@@ -0,0 +1 @@
+../maze-utils/src/

src/render/GenericNotice.tsx

@@ -5,8 +5,9 @@ import NoticeComponent from "../components/NoticeComponent";
 import Utils from "../utils";
 const utils = new Utils();
 
-import { ButtonListener, ContentContainer } from "../types";
+import { ContentContainer } from "../types";
 import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
+import { ButtonListener } from "../../maze-utils/src/components/component-types";
 
 export interface TextBox {
     icon: string;

src/render/Tooltip.tsx

@@ -1,154 +1,7 @@
-import * as React from "react";
+import { GenericTooltip, TooltipProps } from "../../maze-utils/src/components/Tooltip";
-import { createRoot, Root } from 'react-dom/client';
-import { ButtonListener } from "../types";
-import { isFirefoxOrSafari } from "@ajayyy/maze-utils";
-import { isSafari } from "@ajayyy/maze-utils/lib/config";
 
-export interface TooltipProps {
+export class Tooltip extends GenericTooltip {
-    text?: string; 
-    link?: string;
-    linkOnClick?: () => void;
-    referenceNode: HTMLElement;
-    prependElement?: HTMLElement; // Element to append before
-    bottomOffset?: string;
-    topOffset?: string;
-    leftOffset?: string;
-    rightOffset?: string;
-    timeout?: number;
-    opacity?: number;
-    displayTriangle?: boolean;
-    extraClass?: string;
-    showLogo?: boolean;
-    showGotIt?: boolean;
-    center?: boolean;
-    positionRealtive?: boolean;
-    containerAbsolute?: boolean;
-    buttons?: ButtonListener[];
-}
-
-export class Tooltip {
-    text?: string;   
-    container: HTMLDivElement;
-
-    timer: NodeJS.Timeout;
-    root: Root;
-    
     constructor(props: TooltipProps) {
-        props.bottomOffset ??= "70px";
+        super(props, "icons/IconSponsorBlocker256px.png")
-        props.topOffset ??= "inherit";
-        props.leftOffset ??= "inherit";
-        props.rightOffset ??= "inherit";
-        props.opacity ??= 0.7;
-        props.displayTriangle ??= true;
-        props.extraClass ??= "";
-        props.showLogo ??= true;
-        props.showGotIt ??= true;
-        props.positionRealtive ??= true;
-        props.containerAbsolute ??= false;
-        props.center ??= false;
-        this.text = props.text;
-
-        this.container = document.createElement('div');
-        this.container.id = "sponsorTooltip" + props.text;
-        if (props.positionRealtive) this.container.style.position = "relative";
-        if (props.containerAbsolute) this.container.style.position = "absolute";
-        if (props.center) {
-            if (isFirefoxOrSafari() && !isSafari()) {
-                this.container.style.width = "-moz-available";
-            } else {
-                this.container.style.width = "-webkit-fill-available";
-            }
-        }
-
-        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);
-        }
-
-        const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
-
-        this.root = createRoot(this.container);
-        this.root.render(
-            <div style={{
-                    bottom: props.bottomOffset,
-                    top: props.topOffset,
-                    left: props.leftOffset,
-                    right: props.rightOffset,
-                    backgroundColor,
-                    margin: props.center ? "auto" : null
-                }} 
-                className={"sponsorBlockTooltip" +
-                    (props.displayTriangle ? " sbTriangle" : "") +
-                    ` ${props.extraClass}`}>
-                <div>
-                    {props.showLogo ? 
-                        <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
-                        </img>
-                    : null}
-                    {this.text ? 
-                        <span className={`sponsorSkipObject${!props.showLogo ? ` sponsorSkipObjectFirst` : ``}`}>
-                            {this.text + (props.link ? ". " : "")}
-                            {props.link ? 
-                                <a style={{textDecoration: "underline"}} 
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        href={props.link}>
-                                    {chrome.i18n.getMessage("LearnMore")}
-                                </a> 
-                            : (props.linkOnClick ? 
-                                <a style={{textDecoration: "underline", marginLeft: "5px", cursor: "pointer"}} 
-                                        onClick={props.linkOnClick}>
-                                    {chrome.i18n.getMessage("LearnMore")}
-                                </a> 
-                            : null)}
-                        </span>
-                    : null}
-
-                    {this.getButtons(props.buttons)}
-                </div>
-                {props.showGotIt ?
-                    <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                        style ={{float: "right" }}
-                        onClick={() => this.close()}>
-
-                        {chrome.i18n.getMessage("GotIt")}
-                    </button>
-                : null}
-            </div>
-        )
-    }
-
-    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 {
-        this.root.unmount();
-        this.container.remove();
-
-        if (this.timer) clearTimeout(this.timer);
     }
 }

src/types.ts

@@ -220,9 +220,4 @@ export enum NoticeVisbilityMode {
     MiniForAll = 2,
     FadedForAutoSkip = 3,
     FadedForAll = 4
-}
-
-export interface ButtonListener {
-    name: string;
-    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }

webpack/webpack.common.js

@@ -123,7 +123,8 @@ module.exports = env => {
             ]
         },
         resolve: {
-            extensions: ['.ts', '.tsx', '.js']
+            extensions: ['.ts', '.tsx', '.js'],
+            symlinks: false
         },
         plugins: [
             // Prehook to start building document script before normal build