Add better UI for warnings allowing you to accept without chatting

src/background.ts

@@ -8,6 +8,7 @@ import { Registration } from "./types";
 window.SB = Config;
 
 import Utils from "./utils";
+import { GenericUtils } from "./utils/genericUtils";
 const utils = new Utils({
     registerFirefoxContentScript,
     unregisterFirefoxContentScript
@@ -205,7 +206,7 @@ async function asyncRequestToServer(type: string, address: string, data = {}) {
 async function sendRequestToCustomServer(type: string, url: string, data = {}) {
     // If GET, convert JSON to parameters
     if (type.toLowerCase() === "get") {
-        url = utils.objectToURI(url, data, true);
+        url = GenericUtils.objectToURI(url, data, true);
 
         data = null;
     }

src/components/NoticeTextSectionComponent.tsx

@@ -36,12 +36,31 @@ class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionPr
                     : null}
 
                     <span>
-                        {this.props.text}
+                        {this.getTextElements(this.props.text)}
                     </span>
                 </td>
             </tr>
         );
     }
+
+    private getTextElements(text: string): Array<string | React.ReactElement> {
+        const elements: Array<string | React.ReactElement> = [];
+        const textParts = text.split(/(?=\s+)/);
+        for (const textPart of textParts) {
+            if (textPart.match(/^\s*http/)) {
+                elements.push(
+                    <a href={textPart} target="_blank" rel="noreferrer">
+                        {textPart}
+                    </a>
+                );
+            } else {
+                elements.push(textPart);
+            }
+
+        }
+
+        return elements;
+    }
 }
 
 export default NoticeTextSelectionComponent;

src/content.ts

@@ -10,7 +10,6 @@ import SkipNotice from "./render/SkipNotice";
 import SkipNoticeComponent from "./components/SkipNoticeComponent";
 import SubmissionNotice from "./render/SubmissionNotice";
 import { Message, MessageResponse, VoteResponse } from "./messageTypes";
-import * as Chat from "./js-components/chat";
 import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
 import { getStartTimeFromUrl } from "./utils/urlParser";
 import { findValidElement, getControls, getHashParams, isVisible } from "./utils/pageUtils";
@@ -19,6 +18,7 @@ import { CategoryPill } from "./render/CategoryPill";
 import { AnimationUtils } from "./utils/animationUtils";
 import { GenericUtils } from "./utils/genericUtils";
 import { logDebug } from "./utils/logger";
+import { openWarningDialog } from "./utils/warnings";
 
 // Hack to get the CSS loaded on permission-based sites (Invidious)
 utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@@ -1837,10 +1837,7 @@ async function vote(type: number, UUID: SegmentUUID, category?: Category, skipNo
                 skipNotice.afterVote.bind(skipNotice)(utils.getSponsorTimeFromUUID(sponsorTimes, UUID), type, category);
             } else if (response.successType == -1) {
                 if (response.statusCode === 403 && response.responseText.startsWith("Vote rejected due to a warning from a moderator.")) {
-                    skipNotice.setNoticeInfoMessageWithOnClick.bind(skipNotice)(() => {
-                        Chat.openWarningChat(response.responseText);
-                        skipNotice.closeListener.call(skipNotice);
-                    }, chrome.i18n.getMessage("voteRejectedWarning"));
+                    openWarningDialog(response.responseText);
                 } else {
                     skipNotice.setNoticeInfoMessage.bind(skipNotice)(GenericUtils.getErrorMessage(response.statusCode, response.responseText))
                 }
@@ -2028,7 +2025,7 @@ async function sendSubmitMessage() {
         playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
 
         if (response.status === 403 && response.responseText.startsWith("Submission rejected due to a warning from a moderator.")) {
-            Chat.openWarningChat(response.responseText);
+            openWarningDialog(skipNoticeContentContainer);
         } else {
             alert(GenericUtils.getErrorMessage(response.status, response.responseText));
         }

src/js-components/chat.ts

@@ -1,47 +0,0 @@
-import Config from "../config";
-import Utils from "../utils";
-const utils = new Utils();
-
-export interface ChatConfig {
-    displayName: string,
-    composerInitialValue?: string,
-    customDescription?: string
-}
-
-export function openChat(config: ChatConfig): void {
-    const chat = document.createElement("div");
-    chat.classList.add("sbChatNotice");
-    chat.style.zIndex = "2000";
-
-    const iframe= document.createElement("iframe");
-    iframe.src = "https://chat.sponsor.ajay.app/#" + utils.objectToURI("", config, false);
-    chat.appendChild(iframe);
-
-    const closeButton  = document.createElement("img");
-    closeButton.classList.add("sbChatClose");
-    closeButton.src = chrome.extension.getURL("icons/close.png");
-    closeButton.addEventListener("click", () => {
-        chat.remove();
-        closeButton.remove();
-    });
-    chat.appendChild(closeButton);
-
-    const referenceNode = utils.findReferenceNode();
-    referenceNode.prepend(chat);
-}
-
-export async function openWarningChat(warningMessage: string): Promise<void> {
-    const warningReasonMatch = warningMessage.match(/Warning reason: '(.+)'/);
-    alert(chrome.i18n.getMessage("warningChatInfo") + `\n\n${warningReasonMatch ? ` Warning reason: ${warningReasonMatch[1]}` : ``}`);
-
-    const userNameData = await utils.asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
-    const userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
-    const publicUserID = await utils.getHash(Config.config.userID);
-
-    openChat({
-        displayName: `${userName ? userName : ``}${userName !== publicUserID ? ` | ${publicUserID}` : ``}`,
-        composerInitialValue: `I got a warning and confirm I [REMOVE THIS CAPITAL TEXT TO CONFIRM] reread the guidelines.` +
-                                warningReasonMatch ? ` Warning reason: ${warningReasonMatch[1]}` : ``,
-        customDescription: chrome.i18n.getMessage("warningChatInfo")
-    });
-}

src/render/GenericNotice.tsx

@@ -64,7 +64,13 @@ export default class GenericNotice {
                 extraClass={options.extraClass}
                 closeListener={() => this.close()} >
                     
-                    {this.getMessageBox(this.idSuffix, options.textBoxes)}
+                    <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
+                        className="sponsorTimeMessagesRow"
+                        style={{maxHeight: (this.contentContainer().v.offsetHeight - 200) + "px"}}>
+                        <td style={{width: "100%"}}>
+                            {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
+                        </td>
+                    </tr>
 
                     <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
                         className="sponsorBlockSpacer">
@@ -81,7 +87,7 @@ export default class GenericNotice {
         );
     }
 
-    getMessageBox(idSuffix: string, textBoxes: TextBox[]): JSX.Element[] { 
+    getMessageBoxes(idSuffix: string, textBoxes: TextBox[]): JSX.Element[] { 
         if (textBoxes) {
             const result = [];
             for (let i = 0; i < textBoxes.length; i++) {

src/utils.ts

@@ -376,19 +376,6 @@ export default class Utils {
         return referenceNode;
     }
 
-    objectToURI<T>(url: string, data: T, includeQuestionMark: boolean): string {
-        let counter = 0;
-        for (const key in data) {
-            const seperator = (url.includes("?") || counter > 0) ? "&" : (includeQuestionMark ? "?" : "");
-            const value = (typeof(data[key]) === "string") ? data[key] as unknown as string : JSON.stringify(data[key]);
-            url += seperator + encodeURIComponent(key) + "=" + encodeURIComponent(value);
-
-            counter++;
-        }
-
-        return url;
-    }
-
     getFormattedTime(seconds: number, precise?: boolean): string {
         seconds = Math.max(seconds, 0);
         

src/utils/genericUtils.ts

@@ -72,9 +72,23 @@ function indexesOf<T>(array: T[], value: T): number[] {
     return array.map((v, i) => v === value ? i : -1).filter(i => i !== -1);
 }
 
+function objectToURI<T>(url: string, data: T, includeQuestionMark: boolean): string {
+    let counter = 0;
+    for (const key in data) {
+        const seperator = (url.includes("?") || counter > 0) ? "&" : (includeQuestionMark ? "?" : "");
+        const value = (typeof(data[key]) === "string") ? data[key] as unknown as string : JSON.stringify(data[key]);
+        url += seperator + encodeURIComponent(key) + "=" + encodeURIComponent(value);
+
+        counter++;
+    }
+
+    return url;
+}
+
 export const GenericUtils = {
     wait,
     getErrorMessage,
     getLuminance,
-    indexesOf
+    indexesOf,
+    objectToURI
 }

src/utils/warnings.ts

@@ -0,0 +1,66 @@
+import Config from "../config";
+import GenericNotice, { NoticeOptions } from "../render/GenericNotice";
+import { ContentContainer } from "../types";
+import Utils from "../utils";
+import { GenericUtils } from "./genericUtils";
+const utils = new Utils();
+
+export interface ChatConfig {
+    displayName: string,
+    composerInitialValue?: string,
+    customDescription?: string
+}
+
+export async function openWarningDialog(contentContainer: ContentContainer): Promise<void> {
+    const userInfo = await utils.asyncRequestToServer("GET", "/api/userInfo", {
+        userID: Config.config.userID,
+        values: ["warningReason"]
+    });
+
+    if (userInfo.ok) {
+        const warningReason = JSON.parse(userInfo.responseText)?.warningReason;
+        const userNameData = await utils.asyncRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID);
+        const userName = userNameData.ok ? JSON.parse(userNameData.responseText).userName : "";
+        const publicUserID = await utils.getHash(Config.config.userID);
+
+        let notice: GenericNotice = null;
+        const options: NoticeOptions = {
+            title: chrome.i18n.getMessage("warningTitle"),
+            textBoxes: [{
+                text: chrome.i18n.getMessage("warningChatInfo"),
+                icon: null
+            }, ...warningReason.split("\n").map((reason) => ({
+                text: reason,
+                icon: null
+            }))],
+            buttons: [{
+                    name: chrome.i18n.getMessage("questionButton"),
+                    listener: () => openChat({
+                        displayName: `${userName ? userName : ``}${userName !== publicUserID ? ` | ${publicUserID}` : ``}`
+                    })
+                },
+                {
+                    name: chrome.i18n.getMessage("warningConfirmButton"),
+                    listener: async () => {
+                        const result = await utils.asyncRequestToServer("POST", "/api/warnUser", {
+                            userID: Config.config.userID,
+                            enabled: false
+                        });
+
+                        if (result.ok) {
+                            notice?.close();
+                        } else {
+                            alert(`${chrome.i18n.getMessage("warningError")} ${result.status}`);
+                        }
+                    }
+            }],
+            timed: false
+        };
+
+        notice = new GenericNotice(contentContainer, "warningNotice", options);
+    }
+}
+
+export function openChat(config: ChatConfig): void {
+    window.open("https://chat.sponsor.ajay.app/#" + GenericUtils.objectToURI("", config, false));
+}