Feat: Several minor improvements

src/components/SponsorTimeEditComponent.tsx

@@ -3,6 +3,7 @@ import { CheckboxChangeEvent } from "antd/es/checkbox";
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
+import { keybindToString } from "../config/config";
 import { showMessage } from "../render/MessageNotice";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import { asyncRequestToServer } from "../requests/requests";
@@ -286,6 +287,11 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <span
                             id={"sponsorTimePreviewButton" + this.idSuffix}
                             className="sponsorTimeEditButton"
+                            {...(Config.config.previewKeybind && {
+                                title: `${chrome.i18n.getMessage("preview")} (${keybindToString(
+                                    Config.config.previewKeybind
+                                )})`,
+                            })}
                             onClick={(e) => this.previewTime(e.ctrlKey, e.shiftKey)}
                         >
                             {chrome.i18n.getMessage("preview")}

src/components/SubmissionNoticeComponent.tsx

@@ -5,13 +5,14 @@ import GenericNotice from "../render/GenericNotice";
 import { Category, ContentContainer } from "../types";
 
 import { ConfigProvider, Popover, theme } from "antd";
+import { keybindToString } from "../config/config";
+import { showMessage } from "../render/MessageNotice";
 import { getGuidelineInfo } from "../utils/constants";
 import { exportTimes } from "../utils/exporter";
 import { getVideo } from "../utils/video";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
-import { showMessage } from "../render/MessageNotice";
 
 export interface SubmissionNoticeProps {
     // Contains functions and variables from the content script needed by the skip notice
@@ -180,6 +181,11 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                                 {/* Submit Button */}
                                 <button
                                     className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                                    {...(Config.config.actuallySubmitKeybind && {
+                                        title: `${chrome.i18n.getMessage("submit")} (${keybindToString(
+                                            Config.config.actuallySubmitKeybind
+                                        )})`,
+                                    })}
                                     onClick={this.submit.bind(this)}
                                 >
                                     {chrome.i18n.getMessage("submit")}

src/components/playerButtons/PlayerButtonComponent.tsx

@@ -1,18 +1,20 @@
 import * as React from "react";
 import { forwardRef } from "react";
+import { Keybind, keybindToString } from "../../config/config";
 import { getIconLink } from "../../config/configUtils";
 
 interface PlayerButtonProps {
     baseID: string;
     title: string;
     imageName: string;
+    keybind?: Keybind;
     isDraggable?: boolean;
     show?: boolean;
     onClick?: () => void;
 }
 
 const PlayerButtonComponent = forwardRef<HTMLButtonElement, PlayerButtonProps>(function (
-    { baseID, title, imageName, isDraggable = false, show = true, onClick },
+    { baseID, title, imageName, keybind, isDraggable = false, show = true, onClick },
     ref
 ) {
     return (
@@ -30,7 +32,10 @@ const PlayerButtonComponent = forwardRef<HTMLButtonElement, PlayerButtonProps>(f
                 src={chrome.runtime.getURL("icons/" + getIconLink(imageName))}
                 draggable={isDraggable}
             ></img>
-            <div className="playerButtonTooltip">{chrome.i18n.getMessage(title)}</div>
+            <div className="playerButtonTooltip">
+                {chrome.i18n.getMessage(title)}
+                {keybind ? ` (${keybindToString(keybind)})` : ""}
+            </div>
         </button>
     );
 });

src/components/playerButtons/PlayerButtonGroupComponent.tsx

@@ -71,6 +71,7 @@ const PlayerButtonGroupComponent = React.forwardRef(function (
                     baseID="submit"
                     title="OpenSubmissionMenu"
                     imageName="PlayerUploadIconSponsorBlocker.svg"
+                    keybind={Config.config.submitKeybind}
                     isDraggable={false}
                     show={showSubmitButton()}
                     onClick={submitCallback}
@@ -107,6 +108,7 @@ const PlayerButtonGroupComponent = React.forwardRef(function (
                     imageName={
                         isCreatingSegment() ? "PlayerStopIconSponsorBlocker.svg" : "PlayerStartIconSponsorBlocker.svg"
                     }
+                    keybind={Config.config.startSponsorKeybind}
                     onClick={startSegmentCallback}
                     isDraggable={false}
                 ></PlayerButtonComponent>

src/document/document.ts

@@ -25,22 +25,26 @@ function overwriteFetch() {
             .clone()
             .text()
             .then((res) => processURLRequest(new URL(urlStr, window.location.href), res))
-            .catch(() => {});
+            .catch((e) => {
+                console.error("[BSB] Error processing URL Request: ", e);
+            });
         return response;
     };
 }
 
 function overwriteXHR() {
     const originalSend = XMLHttpRequest.prototype.send;
 
-    XMLHttpRequest.prototype.send = function (body?: Document | BodyInit | null) {
+    XMLHttpRequest.prototype.send = function (this: XMLHttpRequest, body?: Document | BodyInit | null) {
         this.addEventListener("loadend", function () {
-            if (this.readyState === 4 && this.status >= 200 && this.status < 300) {
+            if (this.readyState === this.DONE && this.status >= 200 && this.status < 300) {
                 try {
-                    const url = new URL(this.responseURL);
-                    processURLRequest(url, this.responseText);
+                    if (this.responseType === "" || this.responseType === "text") {
+                        const url = new URL(this.responseURL);
+                        processURLRequest(url, this.responseText);
+                    }
                 } catch (e) {
-                    console.debug("Failed to process request");
+                    console.error("[BSB] Error processing URL Request: ", e);
                 }
             }
         });
@@ -49,13 +53,13 @@ function overwriteXHR() {
 }
 
 function processURLRequest(url: URL, responseText: string): void {
-    if (url.pathname.includes("/player/wbi/playurl")) {
+    if (url.pathname.startsWith("/player/wbi/playurl")) {
         const response = JSON.parse(responseText) as BilibiliResponse<BiliPlayInfo>;
         const cid = url.searchParams.get("cid");
         if (cid && response?.data?.dash?.video) {
             savePlayInfo(cid, playUrlResponseToPlayInfo(response.data));
         }
-    } else if (url.pathname.includes("/x/player/wbi/v2")) {
+    } else if (url.pathname.startsWith("/x/player/wbi/v2")) {
         const response = JSON.parse(responseText) as BilibiliResponse<BiliVideoDetail>;
         saveAidFromDetail(response.data);
     }