Make scroll on inputs on time edit step whole frames

src/components/SponsorTimeEditComponent.tsx

@@ -3,16 +3,16 @@ import { CheckboxChangeEvent } from "antd/es/checkbox";
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
+import { showMessage } from "../render/MessageNotice";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import { asyncRequestToServer } from "../requests/requests";
 import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
 import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
 import { defaultPreviewTime } from "../utils/constants";
 import { getFormattedTime, getFormattedTimeToSeconds } from "../utils/formating";
-import { getVideo } from "../utils/video";
+import { getFrameRate, getVideo } from "../utils/video";
 import { SelectorOption } from "./SelectorComponent";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
-import { showMessage } from "../render/MessageNotice";
 export interface SponsorTimeEditProps {
     index: number;
 
@@ -355,15 +355,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
         e.stopPropagation();
         if (!Config.config.allowScrollingToEdit) return;
-        let step = 0;
-        // shift + ctrl = 1
-        // ctrl = 0.1
-        // default = 0.01
-        // shift = 0.001
+
+        // shift = 1s
+        // ctrl = ~0.2s (round up whole frame)
+        // default = 1 frame ()
+        const frameRate = getFrameRate();
+        let step: number;
         if (e.shiftKey) {
-            step = e.ctrlKey ? 1 : 0.001;
+            step = 1;
+        } else if (e.ctrlKey) {
+            step = Math.ceil(frameRate * 0.2) / frameRate;
         } else {
-            step = e.ctrlKey ? 0.1 : 0.01;
+            step = 1 / frameRate;
         }
 
         const sponsorTimeEdits = this.state.sponsorTimeEdits;

src/content.ts

@@ -53,7 +53,7 @@ import {
     checkVideoIDChange,
     detectPageType,
     getChannelIDInfo,
-    getFrameRate,
+    updateFrameRate,
     getIsLivePremiere,
     getPageType,
     getVideo,
@@ -2528,7 +2528,7 @@ function hotkeyListener(e: KeyboardEvent): void {
  */
 export async function seekFrameByKeyPressListener(key) {
     const vid = getVideo();
-    const frameRate = await getFrameRate();
+    const frameRate = await updateFrameRate();
     if (!vid.paused) return;
 
     if (keybindEquals(key, Config.config.nextFrameKeybind)) {

src/utils/video.ts

@@ -38,6 +38,7 @@ let videoID: VideoID | null = null;
 let pageType: PageType = PageType.Unknown;
 let channelIDInfo: ChannelIDInfo;
 let waitingForChannelID = false;
+let frameRate: number = 30;
 
 let contentMethod = {
     videoIDChange: () => {},
@@ -285,6 +286,8 @@ let waitingForEmbed = false;
 async function refreshVideoAttachments(): Promise<void> {
     if (waitingForNewVideo) return;
 
+    void updateFrameRate();
+
     waitingForNewVideo = true;
     // Compatibility for Vinegar extension
     const newVideo =
@@ -376,14 +379,15 @@ function addPageListeners(): void {
     });
 }
 
-export async function getFrameRate() {
-    return await getPropertyFromWindow<number>({
+export async function updateFrameRate(): Promise<number> {
+    frameRate = await getPropertyFromWindow<number>({
         sendType: "getFrameRate",
         responseType: "returnFrameRate",
     }).catch(() => {
         // fall back to 30 fps
         return 30;
     });
+    return frameRate;
 }
 
 let lastRefresh = 0;
@@ -402,6 +406,10 @@ export function getVideoID(): VideoID | null {
     return videoID;
 }
 
+export function getFrameRate(): number {
+    return frameRate;
+}
+
 export function getWaitingForChannelID(): boolean {
     return waitingForChannelID;
 }