bump version

update dependencies & bump minimum node version

.eslintrc.js

@@ -1,34 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-        node: true,
-        jest: true,
-        jasmine: true,
-    },
-    extends: [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true,
-        },
-        ecmaVersion: 12,
-        sourceType: "module",
-    },
-    plugins: ["react", "@typescript-eslint"],
-    rules: {
-        // TODO: Remove warn rules when not needed anymore
-        "no-self-assign": "off",
-        "@typescript-eslint/no-empty-interface": "off",
-        "react/prop-types": [2, { ignore: ['children'] }]
-    },
-    settings: {
-        react: {
-            version: "detect",
-        },
-    },
-};

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true,
+        "jest": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint"],
+    "rules": {
+        "@typescript-eslint/no-unused-vars": "error",
+        "no-self-assign": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "react/prop-types": [2, { "ignore": ["children"] }]
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

jest.config.cjs

@@ -5,4 +5,5 @@ module.exports = {
     "transform": {
         "^.+\\.ts$": "ts-jest"
     },
+    "reporters": ["github-actions"]
 }; 

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "4.4.3",
+    "version": "4.4.5",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",

package.json

@@ -3,39 +3,40 @@
   "version": "1.0.0",
   "description": "",
   "main": "background.js",
+  "type": "module",
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.180",
+    "@types/chrome": "^0.0.188",
     "@types/firefox-webext-browser": "^94.0.1",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^27.5.1",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@types/selenium-webdriver": "^4.0.18",
+    "@types/selenium-webdriver": "^4.1.0",
     "@types/wicg-mediasession": "^1.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/parser": "^5.26.0",
-    "chromedriver": "^100.0.0",
+    "chromedriver": "^101.0.0",
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.2.1",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
-    "eslint": "^8.12.0",
+    "eslint": "^8.16.0",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.30.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.1",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
-    "jest": "^27.5.1",
+    "jest": "^28.1.0",
     "rimraf": "^3.0.2",
     "schema-utils": "^4.0.0",
-    "selenium-webdriver": "^4.1.1",
+    "selenium-webdriver": "^4.1.2",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "^28.0.3",
-    "ts-loader": "^9.2.8",
+    "ts-loader": "^9.3.0",
-    "ts-node": "^10.7.0",
+    "ts-node": "^10.8.0",
-    "typescript": "4.6",
+    "typescript": "4.7",
     "web-ext": "^6.8.0",
-    "webpack": "^5.64.4",
+    "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^5.8.0"
   },
   "scripts": {
     "web-run": "npm run web-run:chrome",
@@ -65,7 +66,7 @@
     "lint:fix": "eslint src --fix"
   },
   "engines": {
-    "node": ">=12.20.0"
+    "node": ">=16"
   },
   "funding": [
     {

src/components/SkipNoticeComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorHideType, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";

src/components/TooltipComponent.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import Config from "../config";
-import { Category, SegmentUUID, SponsorTime } from "../types";
 
 export interface TooltipProps {
     text: string;

src/config.ts

@@ -1,6 +1,6 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
 import { keybindEquals } from "./utils/configUtils";
 
 interface SBConfig {

src/content.ts

@@ -321,9 +321,6 @@ async function videoIDChange(id) {
         }
     }
 
-    // Get new video info
-    // getVideoInfo(); // Seems to have been replaced
-
     // Update whitelist data when the video data is loaded
     whitelistCheck();
 
@@ -483,14 +480,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
 
     if (!video || video.paused) return;
     if (currentTime === undefined || currentTime === null) {
-        const virtualTime = lastTimeFromWaitingEvent ?? (lastKnownVideoTime.videoTime ?
+        currentTime = getVirtualTime();
-            (performance.now() - lastKnownVideoTime.preciseTime) / 1000 + lastKnownVideoTime.videoTime : null);
-        if ((lastTimeFromWaitingEvent || !utils.isFirefox()) 
-                && !isSafari() && virtualTime && Math.abs(virtualTime - video.currentTime) < 0.6){
-            currentTime = virtualTime;
-        } else {
-            currentTime = video.currentTime;
-        }
     }
     lastTimeFromWaitingEvent = null;
 
@@ -544,7 +534,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
         let forcedIncludeNonIntersectingSegments = true;
 
         if (incorrectVideoCheck(videoID, currentSkip)) return;
-        forceVideoTime ||= video.currentTime;
+        forceVideoTime ||= Math.max(video.currentTime, getVirtualTime());
 
         if (forceVideoTime >= skipTime[0] && forceVideoTime < skipTime[1]) {
             skipToTime({
@@ -594,11 +584,23 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
             logDebug(`Starting timeout to skip ${video.currentTime} to skip at ${skipTime[0]}`);
             
             // Schedule for right before to be more precise than normal timeout
-            currentSkipSchedule = setTimeout(skippingFunction, Math.max(0, delayTime - 100));
+            currentSkipSchedule = setTimeout(skippingFunction, Math.max(0, delayTime - 150));
         }
     }
 }
 
+function getVirtualTime(): number {
+    const virtualTime = lastTimeFromWaitingEvent ?? (lastKnownVideoTime.videoTime ?
+        (performance.now() - lastKnownVideoTime.preciseTime) / 1000 + lastKnownVideoTime.videoTime : null);
+
+    if ((lastTimeFromWaitingEvent || !utils.isFirefox())
+        && !isSafari() && virtualTime && Math.abs(virtualTime - video.currentTime) < 0.6) {
+        return virtualTime;
+    } else {
+        return video.currentTime;
+    }
+}
+
 function inMuteSegment(currentTime: number): boolean {
     const checkFunction = (segment) => segment.actionType === ActionType.Mute && segment.segment[0] <= currentTime && segment.segment[1] > currentTime;
     return sponsorTimes?.some(checkFunction) || sponsorTimesSubmitting.some(checkFunction);
@@ -942,12 +944,10 @@ function startSkipScheduleCheckingForStartSponsors() {
         // See if there are any starting sponsors
         let startingSegmentTime = getStartTimeFromUrl(document.URL) || -1;
         let found = false;
-        let startingSegment: SponsorTime = null;
         for (const time of sponsorTimes) {
             if (time.segment[0] <= video.currentTime && time.segment[0] > startingSegmentTime && time.segment[1] > video.currentTime
                     && time.actionType !== ActionType.Poi) {
                         startingSegmentTime = time.segment[0];
-                        startingSegment = time;
                         found = true;
                 break;
             }
@@ -957,7 +957,6 @@ function startSkipScheduleCheckingForStartSponsors() {
                 if (time.segment[0] <= video.currentTime && time.segment[0] > startingSegmentTime && time.segment[1] > video.currentTime
                         && time.actionType !== ActionType.Poi) {
                             startingSegmentTime = time.segment[0];
-                            startingSegment = time;
                             found = true;
                     break;
                 }
@@ -995,26 +994,6 @@ function startSkipScheduleCheckingForStartSponsors() {
     }
 }
 
-/**
- * Get the video info for the current tab from YouTube
- *
- * TODO: Replace
- */
-async function getVideoInfo(): Promise<void> {
-    const result = await utils.asyncRequestToCustomServer("GET", "https://www.youtube.com/get_video_info?video_id=" + sponsorVideoID + "&html5=1&c=TVHTML5&cver=7.20190319");
-
-    if (result.ok) {
-        const decodedData = decodeURIComponent(result.responseText).match(/player_response=([^&]*)/)[1];
-        if (!decodedData) {
-            console.error("[SB] Failed at getting video info from YouTube.");
-            console.error("[SB] Data returned from YouTube: " + result.responseText);
-            return;
-        }
-
-        videoInfo = JSON.parse(decodedData);
-    }
-}
-
 function getYouTubeVideoID(document: Document): string | boolean {
     const url = document.URL;
     // clips should never skip, going from clip to full video has no indications.
@@ -1149,7 +1128,7 @@ async function whitelistCheck() {
         ?? document.querySelector("a.ytp-title-channel-logo") // YouTube Embed
         ?? document.querySelector(".channel-profile #channel-name")?.parentElement.parentElement // Invidious
         ?? document.querySelector("a.slim-owner-icon-and-title")) // Mobile YouTube
-            ?.getAttribute("href")?.match(/\/channel\/(UC[a-zA-Z0-9_-]{22})|\/c\/([a-zA-Z0-9_-]+)/)?.[1];
+            ?.getAttribute("href")?.match(/(?:\/c\/|\/channel\/)(UC[a-zA-Z0-9_-]{22}|[a-zA-Z0-9_-]+)/)?.[1];
 
     try {
         await utils.wait(() => !!getChannelID(), 6000, 20);

src/js-components/skipButtonControlBar.ts

@@ -2,10 +2,7 @@ import Config from "../config";
 import { SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
 import { keybindToString } from "../utils/configUtils";
-
-import Utils from "../utils";
 import { AnimationUtils } from "../utils/animationUtils";
-const utils = new Utils();
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
@@ -220,4 +217,3 @@ export class SkipButtonControlBar {
         this.container.style.left = this.left + "px";
     }
 }
-

src/utils/logger.ts

@@ -4,9 +4,9 @@ window["SBLogs"] = {
 };
 
 export function logDebug(message: string) {
-    window["SBLogs"].debug.push(message);
+    window["SBLogs"].debug.push(`[${new Date().toISOString()}] ${message}`);
 }
 
 export function logWarn(message: string) {
-    window["SBLogs"].warn.push(message);
+    window["SBLogs"].warn.push(`[${new Date().toISOString()}] ${message}`);
 }

webpack/webpack.common.js

@@ -1,12 +1,15 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const webpack = require("webpack");
+import webpack from "webpack"
-const path = require('path');
+import path from "path"
-const CopyPlugin = require('copy-webpack-plugin');
+import { fileURLToPath } from "url"
-const BuildManifest = require('./webpack.manifest');
+import CopyPlugin from "copy-webpack-plugin"
-const srcDir = '../src/';
+import BuildManifest from "./webpack.manifest.cjs";
-const fs = require("fs");
+const srcDir = "../src/";
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+import fs from "fs";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const edgeLanguages = [
     "de",
@@ -24,7 +27,7 @@ const edgeLanguages = [
     "zh_CN"
 ]
 
-module.exports = env => ({
+export default env => ({
     entry: {
         popup: path.join(__dirname, srcDir + 'popup.ts'),
         background: path.join(__dirname, srcDir + 'background.ts'),

webpack/webpack.dev.js

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+import { merge } from "webpack-merge";
-const merge = require('webpack-merge');
+import common from './webpack.common.js';
-const common = require('./webpack.common.js');
 
-module.exports = env => merge(common(env), {
+export default env => merge(common(env), {
     devtool: 'inline-source-map',
     mode: 'development'
 });

webpack/webpack.prod.js

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+import { merge } from "webpack-merge";
-const merge = require('webpack-merge');
+import common from './webpack.common.js';
-const common = require('./webpack.common.js');
 
-module.exports = env => {
+export default env => {
     let mode = "production";
     env.mode = mode;