Update dependencies and version

.eslintignore

@@ -1,9 +0,0 @@
-.DS_Store
-node_modules
-/dist
-/release
-.env
-.env.*
-!.env.example
-
-package-lock.json

.eslintrc.cjs

@@ -1,34 +0,0 @@
-module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	],
-	rules: {
-		'@typescript-eslint/no-explicit-any': 'off',
-		'no-undef': 'off'
-	}
-};

eslint.config.mjs

@@ -0,0 +1,40 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		rules: {
+			'@typescript-eslint/no-explicit-any': 'off',
+			'no-undef': 'off'
+		}
+	},
+	{
+		ignores: [
+			'.DS_Store',
+			'node_modules',
+			'dist',
+			'release',
+			'.idea',
+			'.env',
+			'.env.*',
+			'!.env.example',
+			'package-lock.json'
+		]
+	}
+);

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stream-bypass",
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"displayName": "Stream Bypass",
 	"author": "bytedream",
 	"description": "Multi-browser addon for multiple streaming providers which redirects directly to the source video",
@@ -25,27 +25,26 @@
 		"url": "https://github.com/bytedream/stream-bypass/issues"
 	},
 	"devDependencies": {
-		"@samrum/vite-plugin-web-extension": "^5.1.0",
+		"@samrum/vite-plugin-web-extension": "^5.1.1",
-		"@sveltejs/vite-plugin-svelte": "^2.5.3",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@tsconfig/svelte": "^5.0.4",
-		"@types/chrome": "^0.0.269",
+		"@types/chrome": "^0.0.287",
 		"@types/firefox-webext-browser": "^120.0.4",
-		"@typescript-eslint/eslint-plugin": "^7.17.0",
+		"eslint": "^9.17.0",
-		"@typescript-eslint/parser": "^7.17.0",
-		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.43.0",
+		"eslint-plugin-svelte": "^2.46.1",
-		"hls.js": "^1.5.13",
+		"hls.js": "^1.5.17",
-		"prettier": "^3.3.3",
+		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-svelte": "^3.3.2",
-		"sass": "^1.77.8",
+		"sass": "^1.83.0",
-		"svelte": "^4.2.18",
+		"svelte": "^5.14.0",
-		"svelte-check": "^3.8.4",
+		"svelte-check": "^4.1.1",
-		"svelte-preprocess": "^6.0.2",
+		"svelte-preprocess": "^6.0.3",
-		"tslib": "^2.6.3",
+		"tslib": "^2.8.1",
-		"typescript": "^5.5.4",
+		"typescript": "^5.7.2",
-		"vite": "^4.5.3",
+		"typescript-eslint": "^8.18.0",
-		"web-ext": "^8.2.0"
+		"vite": "^6.0.3",
+		"web-ext": "^8.3.0"
 	},
 	"type": "module"
 }

src/entries/contentScript/main.ts

@@ -37,7 +37,7 @@ async function main() {
 	let url: string | null;
 	try {
 		url = await match.match(re);
-	} catch (e) {
+	} catch {
 		return;
 	}
 
@@ -64,6 +64,8 @@ async function main() {
 		// clear completed document
 		document.documentElement.innerHTML = '';
 
+		document.body.style.backgroundColor = '#131313';
+
 		// video player
 		const player = document.createElement('video');
 		player.style.width = '100%';

src/entries/player/Player.svelte

@@ -2,7 +2,8 @@
 	import { play } from '~/entries/player/player';
 	import { onMount } from 'svelte';
 
-	let errorMessage: string | null = null;
+	let errorMessage: string | null = $state(null);
+
 	let videoElem: HTMLVideoElement;
 
 	onMount(async () => {
@@ -10,13 +11,13 @@
 			await play(videoElem);
 			videoElem.controls = true;
 		} catch (e) {
-			errorMessage = e;
+			errorMessage = e as string;
 		}
 	});
 </script>
 
-<!-- svelte-ignore a11y-media-has-caption -->
+<!-- svelte-ignore a11y_media_has_caption -->
-<video id="video" bind:this={videoElem} />
+<video id="video" bind:this={videoElem}></video>
 {#if errorMessage}
 	<div id="message-container">
 		<p>

src/entries/player/player.html

@@ -7,8 +7,9 @@
 	<body>
 		<script type="module">
 			import Player from '~/entries/player/Player.svelte';
+			import { mount } from 'svelte';
 
-			new Player({
+			mount(Player, {
 				target: document.body
 			});
 		</script>

src/entries/popup/Popup.svelte

@@ -39,7 +39,7 @@
 				<Toggle
 					bind:checked={hostersEnabled}
 					id="hosters-enabled"
-					on:change={() => Hosters.setAll(hostersEnabled)}
+					onChange={() => Hosters.setAll(hostersEnabled)}
 				/>
 			</div>
 			<hr />
@@ -52,7 +52,7 @@
 						bind:checked={hoster.active}
 						disabled={!hostersEnabled}
 						id="hoster-{i}"
-						on:change={async () => {
+						onChange={async () => {
 							if (hoster.active) {
 								await Hosters.enable(hoster);
 							} else {
@@ -73,7 +73,7 @@
 					<Toggle
 						bind:checked={ff2mpvEnabled}
 						id="ff2mpv"
-						on:change={async () => {
+						onChange={async () => {
 							ff2mpvEnabled = !ff2mpvEnabled;
 							if (await browser.permissions.request({ permissions: ['nativeMessaging'] })) {
 								await Other.setFf2mpv(ff2mpvEnabled);

src/entries/popup/index.html

@@ -8,8 +8,9 @@
 	<body style="overflow-y: scroll">
 		<script type="module">
 			import Popup from '~/entries/popup/Popup.svelte';
+			import { mount } from 'svelte';
 
-			new Popup({
+			mount(Popup, {
 				target: document.body
 			});
 		</script>

src/entries/popup/main.ts

@@ -1,5 +0,0 @@
-import App from './Popup.svelte';
-
-new App({
-	target: document.getElementById('app') as Element
-});

src/entries/popup/toggle.svelte

@@ -1,18 +1,21 @@
 <!-- https://flowbite.com/docs/forms/toggle/ -->
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import type { Snippet } from 'svelte';
 
-	export let checked = false;
+	type Props = {
-	export let disabled = false;
+		checked?: boolean;
-	export let id: string | null = null;
+		disabled?: boolean;
-
+		id?: string | null;
-	const dispatch = createEventDispatcher();
+		onChange?: () => void;
+		children?: Snippet;
+	};
+	let { checked = $bindable(), disabled, id = null, onChange, children }: Props = $props();
 </script>
 
 <label class="toggle">
-	<slot />
+	{@render children?.()}
-	<input type="checkbox" {id} bind:checked {disabled} on:change={(e) => dispatch('change', e)} />
+	<input type="checkbox" {id} bind:checked {disabled} onchange={onChange} />
-	<span />
+	<span></span>
 </label>
 
 <style lang="scss" global>

src/lib/utils.ts

@@ -32,8 +32,9 @@ export async function unpack(packed: string): Promise<string> {
 async function runInPageContext<T>(toExecute: string): Promise<T | null> {
 	// test that we are running with the allow-scripts permission
 	try {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 		window.sessionStorage;
-	} catch (ignore) {
+	} catch {
 		return null;
 	}