Add basic chat box when getting a warning

public/_locales/en/messages.json

@@ -675,5 +675,8 @@
     },
     "hideForever": {
         "message": "Hide forever"
+    },
+    "warningChatInfo": {
+        "message": "You got a warning and cannot submit segments temporarily. This means that we noticed you were making some common mistakes that are not malicious, and we just want to clarify the rules. You can also join this chat using discord.gg/SponsorBlock or matrix.to/#/+sponsor:ajay.app"
     }
 }

public/content.css

@@ -121,6 +121,16 @@
 	margin-left: 5px;
 }
 
+.chatNotice {
+	min-width: 350px;
+	height: 70%;
+
+	position: absolute;
+	right: 5px;
+	bottom: 100px;
+	right: 10px;
+}
+
 .sponsorSkipNotice {
     min-width: 350px;
     background-color: rgba(28, 28, 28, 0.9);

src/background.ts

@@ -164,11 +164,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") {
-        for (const key in data) {
+        url = utils.objectToURI(url, data, true);
-            const seperator = url.includes("?") ? "&" : "?";
-            const value = (typeof(data[key]) === "string") ? data[key]: JSON.stringify(data[key]);
-            url += seperator + key + "=" + value;
-        }
 
         data = null;
     }

src/content.ts

@@ -13,7 +13,7 @@ import SkipNotice from "./render/SkipNotice";
 import SkipNoticeComponent from "./components/SkipNoticeComponent";
 import SubmissionNotice from "./render/SubmissionNotice";
 import { Message, MessageResponse } from "./messageTypes";
-import GenericNotice from "./render/GenericNotice";
+import * as Chat from "./js-components/chat";
 
 // Hack to get the CSS loaded on permission-based sites (Invidious)
 utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@@ -1567,7 +1567,11 @@ async function sendSubmitMessage() {
         playerButtons.submit.button.style.animation = "unset";
         playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
 
-        alert(utils.getErrorMessage(response.status, response.responseText));
+        if (response.status === 403 && response.responseText.startsWith("Submission rejected due to a warning from a moderator.")) {
+            Chat.openWarningChat(response.responseText);
+        } else {
+            alert(utils.getErrorMessage(response.status, response.responseText));
+        }
     }
 }
 

src/js-components/chat.ts

@@ -0,0 +1,30 @@
+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("iframe");
+    chat.src = "https://chat.sponsor.ajay.app/#" + utils.objectToURI("", config, false);
+    chat.classList.add("chatNotice");
+    chat.style.zIndex = "2000";
+
+    console.log(utils.objectToURI("", config, false))
+
+    const referenceNode = utils.findReferenceNode();
+    referenceNode.prepend(chat);
+}
+
+export async function openWarningChat(warningMessage: string): Promise<void> {
+    openChat({
+        displayName: await utils.getHash(Config.config.userID),
+        composerInitialValue: `I got a warning and want to know what I need to do to improve. ` +
+                              `Warning reason: ${warningMessage.match(/Warning reason: '(.+)'/)[1]}`,
+        customDescription: chrome.i18n.getMessage("warningChatInfo")
+    });
+}

src/utils.ts

@@ -415,6 +415,19 @@ 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 {
         const hours = Math.floor(seconds / 60 / 60);
         const minutes = Math.floor(seconds / 60) % 60;