Add keybind for previewing a segment

public/options/options.html

@@ -448,6 +448,11 @@
 					<div class="inline"></div>
 				</div>
 
+				<div data-type="keybind-change" data-sync="previewKeybind">	
+					<label class="optionLabel">__MSG_setPreviewKeybind__:</label>
+					<div class="inline"></div>
+				</div>
+
 				<div data-type="keybind-change" data-sync="actuallySubmitKeybind">	
 					<label class="optionLabel">__MSG_setSubmitKeybind__:</label>
 					<div class="inline"></div>

src/components/SponsorTimeEditComponent.tsx

@@ -8,6 +8,7 @@ import SelectorComponent, { SelectorOption } from "./SelectorComponent";
 import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
 import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/src/formating";
 import { asyncRequestToServer } from "../utils/requests";
+import { defaultPreviewTime } from "../utils/constants";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -671,7 +672,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     previewTime(ctrlPressed = false, shiftPressed = false, skipToEndTime = false): void {
         const sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
         const index = this.props.index;
-        let seekTime = 2;
+        let seekTime = defaultPreviewTime;
         if (ctrlPressed) seekTime = 0.5;
         if (shiftPressed) seekTime = 0.25;
 

src/components/SubmissionNoticeComponent.tsx

@@ -82,12 +82,16 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         if (currentSegmentCount > this.lastSegmentCount) {
             this.lastSegmentCount = currentSegmentCount;
 
+            this.scrollToBottom();
+        }
+    }
+
+    scrollToBottom() {
         const scrollElement = this.noticeRef.current.getElement().current.querySelector("#sponsorSkipNoticeMiddleRowSubmissionNotice");
         scrollElement.scrollTo({
             top: scrollElement.scrollHeight + 1000
         });
     }
-    }
 
     render(): React.ReactElement {
         const sortButton = 

src/components/options/KeybindDialogComponent.tsx

@@ -144,6 +144,7 @@ class KeybindDialogComponent extends React.Component<KeybindDialogProps, Keybind
         if (this.props.option !== "skipKeybind" && this.equals(Config.config['skipKeybind']) ||
                 this.props.option !== "submitKeybind" && this.equals(Config.config['submitKeybind']) ||
                 this.props.option !== "actuallySubmitKeybind" && this.equals(Config.config['actuallySubmitKeybind']) ||
+                this.props.option !== "previewKeybind" && this.equals(Config.config['previewKeybind']) ||
                 this.props.option !== "closeSkipNoticeKeybind" && this.equals(Config.config['closeSkipNoticeKeybind']) ||
                 this.props.option !== "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
             return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};

src/config.ts

@@ -91,6 +91,7 @@ interface SBConfig {
     startSponsorKeybind: Keybind;
     submitKeybind: Keybind;
     actuallySubmitKeybind: Keybind;
+    previewKeybind: Keybind;
     nextChapterKeybind: Keybind;
     previousChapterKeybind: Keybind;
     closeSkipNoticeKeybind: Keybind;
@@ -347,6 +348,7 @@ const syncDefaults = {
     startSponsorKeybind: { key: ";" },
     submitKeybind: { key: "'" },
     actuallySubmitKeybind: { key: "'", ctrl: true },
+    previewKeybind: { key: ";", ctrl: true },
     nextChapterKeybind: { key: "ArrowRight", ctrl: true },
     previousChapterKeybind: { key: "ArrowLeft", ctrl: true },
     closeSkipNoticeKeybind: { key: "Backspace" },

src/content.ts

@@ -48,6 +48,7 @@ import { addCleanupListener } from "../maze-utils/src/cleanup";
 import { hideDeArrowPromotion, tryShowingDeArrowPromotion } from "./dearrowPromotion";
 import { asyncRequestToServer } from "./utils/requests";
 import { isMobileControlsOpen } from "./utils/mobileUtils";
+import { defaultPreviewTime } from "./utils/constants";
 
 cleanPage();
 
@@ -2230,7 +2231,16 @@ function openSubmissionMenu() {
     if (sponsorTimesSubmitting !== undefined && sponsorTimesSubmitting.length > 0) {
         submissionNotice = new SubmissionNotice(skipNoticeContentContainer, sendSubmitMessage);
     }
+}
 
+function previewRecentSegment() {
+    if (sponsorTimesSubmitting !== undefined && sponsorTimesSubmitting.length > 0) {
+        previewTime(sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].segment[0] - defaultPreviewTime);
+        
+        if (submissionNotice) {
+            submissionNotice.scrollToBottom();
+        }
+    }
 }
 
 function submitSegments() {
@@ -2444,6 +2454,7 @@ function hotkeyListener(e: KeyboardEvent): void {
     const closeSkipNoticeKey = Config.config.closeSkipNoticeKeybind;
     const startSponsorKey = Config.config.startSponsorKeybind;
     const submitKey = Config.config.actuallySubmitKeybind;
+    const previewKey = Config.config.previewKeybind;
     const openSubmissionMenuKey = Config.config.submitKeybind;
     const nextChapterKey = Config.config.nextChapterKeybind;
     const previousChapterKey = Config.config.previousChapterKeybind;
@@ -2475,6 +2486,9 @@ function hotkeyListener(e: KeyboardEvent): void {
     } else if (keybindEquals(key, openSubmissionMenuKey)) {
         openSubmissionMenu();
         return;
+    } else if (keybindEquals(key, previewKey)) {
+        previewRecentSegment();
+        return;
     } else if (keybindEquals(key, nextChapterKey)) {
         if (sponsorTimes.length > 0) e.stopPropagation();
         nextChapter();

src/render/SubmissionNotice.tsx

@@ -56,6 +56,10 @@ class SubmissionNotice {
     submit(): void {
         this.noticeRef.current?.submit?.();
     }
+
+    scrollToBottom(): void {
+        this.noticeRef.current?.scrollToBottom?.();
+    }
 }
 
 export default SubmissionNotice;

src/utils/constants.ts

@@ -158,3 +158,5 @@ export function getGuidelineInfo(category: Category): TextBox[] {
             }];
     }
 }
+
+export const defaultPreviewTime = 2;