Get framerate from window

src/content.ts

@@ -48,6 +48,7 @@ import {
     checkIfNewVideoID,
     checkVideoIDChange,
     getChannelIDInfo,
+    getFrameRate,
     getIsLivePremiere,
     getVideo,
     getVideoID,
@@ -2694,17 +2695,17 @@ function hotkeyListener(e: KeyboardEvent): void {
  * Uses 1/30s as the frame rate, as it's the most common frame rate for videos
  * @param key keydown event
  */
-export function seekFrameByKeyPressListener(key) {
+export async function seekFrameByKeyPressListener(key) {
     const vid = getVideo();
+    const frameRate = await getFrameRate();
     if (!vid.paused) return;
 
-    // TODO: better way to check framerate or next frame
     if (keybindEquals(key, Config.config.nextFrameKeybind)) {
         // next frame
-        vid.currentTime += 1 / 30;
+        vid.currentTime += 1 / frameRate;
     } else if (keybindEquals(key, Config.config.previousFrameKeybind)) {
         // previous frame
-        vid.currentTime -= 1 / 30;
+        vid.currentTime -= 1 / frameRate;
     }
 }
 

src/document.ts

@@ -20,6 +20,10 @@ function windowMessageListener(message: MessageEvent) {
         const data: InjectedScriptMessageSend = message.data;
         if (data.type === "getBvID") {
             sendMessageToContent(data, window?.__INITIAL_STATE__?.bvid);
+        } else if (data.type === "getFrameRate") {
+            const currentQuality = window.__playinfo__.data.quality;
+            const frameRate = window.__playinfo__.data.dash.video.filter((v) => v.id === currentQuality)[0].frameRate;
+            sendMessageToContent(data, frameRate);
         }
     }
 }

src/globals.d.ts

@@ -2,7 +2,7 @@ import SBObject from "./config";
 declare global {
     interface Window {
         SB: typeof SBObject;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        __INITIAL_STATE__?: any;
+        __INITIAL_STATE__?: { bvid: string };
+        __playinfo__?: { data: { quality: number; dash: { video: { id: number; frameRate: number }[] } } };
     }
 }

src/utils/injectedScriptMessageUtils.ts

@@ -3,25 +3,20 @@ export const sourceId = "biliSponsorBlock";
 export interface InjectedScriptMessageBase {
     source: string;
     id: string;
-    type: InjectedScriptMessageTypeEnum;
+    type: string;
 }
 
 export interface InjectedScriptMessageSend extends InjectedScriptMessageBase {
-    responseType: InjectedScriptMessageTypeEnum;
+    responseType: string;
 }
 
 export interface InjectedScriptMessageRecieve extends InjectedScriptMessageBase {
     data: unknown;
 }
 
 export interface InjectedScriptMessageType {
-    sendType: InjectedScriptMessageTypeEnum;
-    responseType: InjectedScriptMessageTypeEnum;
-}
-
-export enum InjectedScriptMessageTypeEnum {
-    getBvID = "getBvID",
-    returnBvID = "returnBvID",
+    sendType: string;
+    responseType: string;
 }
 
 export async function getPropertyFromWindow<T>(

src/utils/parseVideoID.ts

@@ -1,6 +1,6 @@
 import { getBvIDfromAvIDBiliApi } from "../requests/bilibiliApi";
 import { BILI_DOMAINS } from "./constants";
-import { getPropertyFromWindow, InjectedScriptMessageTypeEnum } from "./injectedScriptMessageUtils";
+import { getPropertyFromWindow } from "./injectedScriptMessageUtils";
 import { VideoID } from "./video";
 
 export async function getBilibiliVideoID(url?: string): Promise<VideoID | null> {
@@ -20,8 +20,8 @@ export async function getBilibiliVideoID(url?: string): Promise<VideoID | null>
 export function getBvIDFromWindow(timeout = 200): Promise<VideoID | null> {
     return getPropertyFromWindow<VideoID>(
         {
-            sendType: InjectedScriptMessageTypeEnum.getBvID,
-            responseType: InjectedScriptMessageTypeEnum.returnBvID,
+            sendType: "getBvID",
+            responseType: "returnBvID",
         },
         timeout
     );

src/utils/video.ts

@@ -5,12 +5,13 @@ import {
     channelIDChange,
     videoIDChange as contentVideoIDChange,
     resetValues as resetContentValues,
-    videoElementChange
+    videoElementChange,
 } from "../content";
 import { newThumbnails } from "../thumbnail-utils/thumbnailManagement";
 import { waitFor } from "./";
 import { addCleanupListener, setupCleanupListener } from "./cleanup";
 import { getElement, isVisible, waitForElement } from "./dom";
+import { getPropertyFromWindow } from "./injectedScriptMessageUtils";
 import { getBilibiliVideoID } from "./parseVideoID";
 import { injectScript } from "./scriptInjector";
 
@@ -342,6 +343,17 @@ function addPageListeners(): void {
     });
 }
 
+export async function getFrameRate() {
+    return await getPropertyFromWindow<number>({
+        sendType: "getFrameRate",
+        responseType: "returnFrameRate",
+    }).catch((e) => {
+        // fall back to 30 fps
+        console.log(e);
+        return 30;
+    });
+}
+
 let lastRefresh = 0;
 export function getVideo(): HTMLVideoElement | null {
     setupVideoMutationListener();