player: use vidstsack instead of default html player

2026-04-18 21:49:14 -07:00
19 changed files with 49 additions and 111 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -4,9 +4,6 @@
  "workspaces": {
    "": {
      "name": "space-stream",
-      "dependencies": {
-        "jassub": "^2.4.2",
-      },
      "devDependencies": {
        "@sveltejs/adapter-auto": "^7.0.0",
        "@sveltejs/adapter-cloudflare": "^7.2.8",
@@ -22,6 +19,7 @@
        "svelte-check": "^4.4.2",
        "tailwindcss": "^4.1.18",
        "typescript": "^5.9.3",
+        "vidstack": "^1.12.13",
        "vite": "^7.3.1",
        "vite-plugin-devtools-json": "^1.0.0",
        "wrangler": "^4.81.1",
@@ -101,6 +99,12 @@

    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.7", "", { "os": "win32", "cpu": "x64" }, "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg=="],

+    "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
+
    "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],

    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
@@ -275,8 +279,6 @@

    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],

-    "abslink": ["abslink@1.1.6", "", {}, "sha512-8fQgnUoVSgc1IhOrYzdDY+wTDPktbuYjds2LKf9kWYWKwDnHgXU168gdV3sPei7vevFf5m2fPZ6IQSKZkSjHVg=="],
-
    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],

    "aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
@@ -319,14 +321,10 @@

    "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],

-    "jassub": ["jassub@2.4.2", "", { "dependencies": { "abslink": "^1.1.6", "lfa-ponyfill": "^1.1.0", "rvfc-polyfill": "^1.0.8", "throughput": "^1.0.2" } }, "sha512-qWECKZWADUYAlXrzTEKPw+zY06XNy4tuZhTTWyk/ML+axRSMuOcbI0tAxL6tdXg+wdROd+EZU83SQFh/frugCg=="],
-
    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

    "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],

-    "lfa-ponyfill": ["lfa-ponyfill@1.1.0", "", {}, "sha512-YS3/DmyDdywWwoEu1ZacAudqkJ4q7WtKE9+bWlaSuEoVrXva7ChIJHMJYs19zyVc1H198pzqAreQU0r/+YNeew=="],
-
    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],

    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
@@ -351,10 +349,14 @@

    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],

+    "lit-html": ["lit-html@2.8.0", "", { "dependencies": { "@types/trusted-types": "^2.0.2" } }, "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q=="],
+
    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],

    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],

+    "media-captions": ["media-captions@1.0.4", "", {}, "sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w=="],
+
    "miniflare": ["miniflare@4.20260409.0", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "^0.34.5", "undici": "7.24.4", "workerd": "1.20260409.1", "ws": "8.18.0", "youch": "4.1.0-beta.10" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-ayl6To4av0YuXsSivGgWLj+Ug8xZ0Qz3sGV8+Ok2LhNVl6m8m5ktEBM3LX9iT9MtLZRJwBlJrKcraNs/DlZQfA=="],

    "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
@@ -391,8 +393,6 @@

    "rollup": ["rollup@4.60.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.1", "@rollup/rollup-android-arm64": "4.60.1", "@rollup/rollup-darwin-arm64": "4.60.1", "@rollup/rollup-darwin-x64": "4.60.1", "@rollup/rollup-freebsd-arm64": "4.60.1", "@rollup/rollup-freebsd-x64": "4.60.1", "@rollup/rollup-linux-arm-gnueabihf": "4.60.1", "@rollup/rollup-linux-arm-musleabihf": "4.60.1", "@rollup/rollup-linux-arm64-gnu": "4.60.1", "@rollup/rollup-linux-arm64-musl": "4.60.1", "@rollup/rollup-linux-loong64-gnu": "4.60.1", "@rollup/rollup-linux-loong64-musl": "4.60.1", "@rollup/rollup-linux-ppc64-gnu": "4.60.1", "@rollup/rollup-linux-ppc64-musl": "4.60.1", "@rollup/rollup-linux-riscv64-gnu": "4.60.1", "@rollup/rollup-linux-riscv64-musl": "4.60.1", "@rollup/rollup-linux-s390x-gnu": "4.60.1", "@rollup/rollup-linux-x64-gnu": "4.60.1", "@rollup/rollup-linux-x64-musl": "4.60.1", "@rollup/rollup-openbsd-x64": "4.60.1", "@rollup/rollup-openharmony-arm64": "4.60.1", "@rollup/rollup-win32-arm64-msvc": "4.60.1", "@rollup/rollup-win32-ia32-msvc": "4.60.1", "@rollup/rollup-win32-x64-gnu": "4.60.1", "@rollup/rollup-win32-x64-msvc": "4.60.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w=="],

-    "rvfc-polyfill": ["rvfc-polyfill@1.0.8", "", {}, "sha512-uA+0wwTkZ4OT8v45pfDfH+7Yq8mY6MvNngiF5Sq6VBgjJsvsfgt7Q18cyZqZjfAhW9rhkgXPX0cW0R9uw7yElA=="],
-
    "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],

    "safe-stable-stringify": ["safe-stable-stringify@2.5.0", "", {}, "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA=="],
@@ -421,8 +421,6 @@

    "tapable": ["tapable@2.3.2", "", {}, "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA=="],

-    "throughput": ["throughput@1.0.2", "", {}, "sha512-jvK1ZXuhsggjb3qYQjMiU/AVYYiTeqT5thWvYR2yuy2LGM84P5MSSyAinwHahGsdBYKR9m9HncVR/3f3nFKkxg=="],
-
    "tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],

    "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
@@ -437,16 +435,22 @@

    "unenv": ["unenv@2.0.0-rc.24", "", { "dependencies": { "pathe": "^2.0.3" } }, "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw=="],

+    "unplugin": ["unplugin@1.16.1", "", { "dependencies": { "acorn": "^8.14.0", "webpack-virtual-modules": "^0.6.2" } }, "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w=="],
+
    "url-polyfill": ["url-polyfill@1.1.14", "", {}, "sha512-p4f3TTAG6ADVF3mwbXw7hGw+QJyw5CnNGvYh5fCuQQZIiuKUswqcznyV3pGDP9j0TSmC4UvRKm8kl1QsX1diiQ=="],

    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],

+    "vidstack": ["vidstack@1.12.13", "", { "dependencies": { "@floating-ui/dom": "^1.6.10", "lit-html": "^2.8.0", "media-captions": "^1.0.4", "unplugin": "^1.12.0" } }, "sha512-vuNeyRmWoH/7EoFVDYjp9nkgcqtCMmal518LDeb78dYKgWb+p6+vtY0AzDhrkBv5q1UiCn+xwmjMmwvSlPLuhQ=="],
+
    "vite": ["vite@7.3.2", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg=="],

    "vite-plugin-devtools-json": ["vite-plugin-devtools-json@1.0.0", "", { "dependencies": { "uuid": "^11.1.0" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-MobvwqX76Vqt/O4AbnNMNWoXWGrKUqZbphCUle/J2KXH82yKQiunOeKnz/nqEPosPsoWWPP9FtNuPBSYpiiwkw=="],

    "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],

+    "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
+
    "workerd": ["workerd@1.20260409.1", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260409.1", "@cloudflare/workerd-darwin-arm64": "1.20260409.1", "@cloudflare/workerd-linux-64": "1.20260409.1", "@cloudflare/workerd-linux-arm64": "1.20260409.1", "@cloudflare/workerd-windows-64": "1.20260409.1" }, "bin": { "workerd": "bin/workerd" } }, "sha512-kuWP20fAaqaLBqLbvUfY9nCF6c3C78L60G9lS6eVwBf+v8trVFIsAdLB/FtrnKm7vgVvpDzvFAfB80VIiVj95w=="],

    "worktop": ["worktop@0.8.0-next.18", "", { "dependencies": { "mrmime": "^2.0.0", "regexparam": "^3.0.0" } }, "sha512-+TvsA6VAVoMC3XDKR5MoC/qlLqDixEfOBysDEKnPIPou/NvoPWCAuXHXMsswwlvmEuvX56lQjvELLyLuzTKvRw=="],
--- a/package.json
+++ b/package.json
@@ -33,11 +33,9 @@
 		"svelte-check": "^4.4.2",
 		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3",
+		"vidstack": "^1.12.13",
 		"vite": "^7.3.1",
 		"vite-plugin-devtools-json": "^1.0.0",
 		"wrangler": "^4.81.1"
-	},
-	"dependencies": {
-		"jassub": "^2.4.2"
 	}
 }
--- a/src/lib/assets/fonts/AdobeArabic-Bold.otf
+++ b/src/lib/assets/fonts/AdobeArabic-Bold.otf
--- a/src/lib/assets/fonts/AdobeArabic-BoldItalic.otf
+++ b/src/lib/assets/fonts/AdobeArabic-BoldItalic.otf
--- a/src/lib/assets/fonts/Tahoma_0.ttf
+++ b/src/lib/assets/fonts/Tahoma_0.ttf
--- a/src/lib/assets/fonts/arialbd_3.ttf
+++ b/src/lib/assets/fonts/arialbd_3.ttf
--- a/src/lib/assets/fonts/arialbi_2.ttf
+++ b/src/lib/assets/fonts/arialbi_2.ttf
--- a/src/lib/assets/fonts/ariblk_1.TTF
+++ b/src/lib/assets/fonts/ariblk_1.TTF
--- a/src/lib/assets/fonts/georgia_0.ttf
+++ b/src/lib/assets/fonts/georgia_0.ttf
--- a/src/lib/assets/fonts/georgiab_0.ttf
+++ b/src/lib/assets/fonts/georgiab_0.ttf
--- a/src/lib/assets/fonts/timesbd_3.ttf
+++ b/src/lib/assets/fonts/timesbd_3.ttf
--- a/src/lib/assets/fonts/trebuc_0.ttf
+++ b/src/lib/assets/fonts/trebuc_0.ttf
--- a/src/lib/assets/fonts/trebucbd_0.ttf
+++ b/src/lib/assets/fonts/trebucbd_0.ttf
--- a/src/lib/assets/fonts/trebucbi_0.ttf
+++ b/src/lib/assets/fonts/trebucbi_0.ttf
--- a/src/lib/assets/fonts/trebucit_0.ttf
+++ b/src/lib/assets/fonts/trebucit_0.ttf
--- a/src/lib/assets/fonts/verdanab_0.ttf
+++ b/src/lib/assets/fonts/verdanab_0.ttf
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { useSpacetimeDB, useTable, useReducer } from "spacetimedb/svelte";
 	import { tables, reducers } from "$lib/st-bindings";
-	import JASSUB from "jassub";
-	import font1 from "$lib/assets/fonts/trebuc_0.ttf";
+	import "vidstack/bundle";
+	import type { MediaPlayerElement } from "vidstack/elements";

 	const conn = useSpacetimeDB();

@@ -15,31 +15,12 @@
 	const pauseReducer = useReducer(reducers.pause);
 	const seekReducer = useReducer(reducers.seek);

-	let videoElement: HTMLVideoElement | undefined = $state();
-	let containerElement: HTMLDivElement | undefined = $state();
+	let videoElement: MediaPlayerElement | undefined = $state();
 	let newUrl = $state("");
 	let newSubtitleUrl = $state("");

 	let isSyncing = false;
 	let syncTimeout: ReturnType<typeof setTimeout> | undefined;
-	let jassubInstance: any | undefined;
-	let currentSubtitleUrl = $derived(videoState?.subtitleUrl);
-
-	$effect(() => {
-		console.log("effect-1");
-		if (videoElement && currentSubtitleUrl && currentSubtitleUrl.endsWith(".ass")) {
-			jassubInstance = new JASSUB({
-				video: videoElement,
-				subUrl: currentSubtitleUrl,
-				fonts: [font1],
-			});
-
-			return () => {
-				jassubInstance?.destroy();
-				jassubInstance = undefined;
-			};
-		}
-	});

 	function syncAction(fn: () => void) {
 		isSyncing = true;
@@ -51,15 +32,10 @@
 	}

 	$effect(() => {
-		console.log("effect-2");
 		if (!videoElement || !videoState) return;
 		const el = videoElement;
 		const state = videoState;

-		if (el.src !== state.url) {
-			el.src = state.url;
-		}
-
 		// Account for server to client clock drift slightly, but MVP assumes relatively synced clocks.
 		const timeElapsedMicros = BigInt(Date.now()) * 1000n - state.lastUpdatedAt.microsSinceUnixEpoch;
 		const expectedTime = state.isPlaying
@@ -142,14 +118,6 @@
 		setSubtitleUrlReducer({ url: newSubtitleUrl });
 		newSubtitleUrl = "";
 	}
-
-	function toggleFullscreen() {
-		if (!document.fullscreenElement) {
-			containerElement?.requestFullscreen().catch(console.error);
-		} else {
-			document.exitFullscreen();
-		}
-	}
 </script>

 <div class="p-4">
@@ -176,7 +144,7 @@
 	<form onsubmit={handleSetSubtitle} class="mb-2">
 		<input
 			type="url"
-			placeholder="Enter subtitle track URL (.vtt/.ass)"
+			placeholder="Enter subtitle track URL (.vtt)"
 			bind:value={newSubtitleUrl}
 			class="mr-2 w-96 p-2"
 		/>
@@ -184,60 +152,31 @@
 	</form>

 	<div>
-		<div
-			bind:this={containerElement}
-			class="fullscreen-container relative w-full max-w-2xl bg-black"
-		>
-			<!-- svelte-ignore a11y_media_has_caption -->
-			<video
+		{#if videoState?.url}
+			<media-player
 				bind:this={videoElement}
+				src={videoState.url}
 				muted
-				controls
-				controlslist="nofullscreen"
-				crossorigin="anonymous"
+				crossOrigin
 				onplay={handlePlay}
 				onpause={handlePause}
 				onseeked={handleSeeked}
 				ontimeupdate={handleTimeUpdate}
-				ondblclick={toggleFullscreen}
-				class="h-full w-full"
+				class="w-full max-w-2xl bg-black"
 			>
-				{#if videoState?.subtitleUrl && !videoState.subtitleUrl.endsWith(".ass")}
-					<track
-						src={videoState.subtitleUrl}
-						kind="subtitles"
-						srclang="en"
-						label="English"
-						default
-					/>
-				{/if}
-				Your browser does not support the video tag.
-			</video>
-			<button
-				onclick={toggleFullscreen}
-				class="absolute top-2 right-2 z-50 rounded bg-black/70 px-2 py-1 text-xs text-white opacity-50 transition-opacity hover:opacity-100"
-			>
-				Fullscreen
-			</button>
-		</div>
+				<media-provider>
+					{#if videoState?.subtitleUrl}
+						<track
+							src={videoState.subtitleUrl}
+							kind="subtitles"
+							srclang="en"
+							label="English"
+							default
+						/>
+					{/if}
+				</media-provider>
+				<media-video-layout> </media-video-layout>
+			</media-player>
+		{/if}
 	</div>
 </div>
-
-<style>
-	:global(.JASSUB) {
-		width: 100% !important;
-		height: 100% !important;
-	}
-	:global(.fullscreen-container:fullscreen) {
-		max-width: none !important;
-		width: 100vw !important;
-		height: 100vh !important;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	:global(.fullscreen-container:fullscreen video) {
-		width: 100% !important;
-		height: 100% !important;
-	}
-</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,11 +11,15 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-		"types": ["./src/worker-configuration.d.ts", "node"]
+		"types": [
+			"./src/worker-configuration.d.ts",
+			"node",
+			"vidstack/svelte",
+		]
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
 	//
 	// To make changes to top-level options such as include and exclude, we recommend extending
 	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
-}
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,13 +2,6 @@ import devtoolsJson from "vite-plugin-devtools-json";
 import tailwindcss from "@tailwindcss/vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
+import { vite as vidstack } from "vidstack/plugins";

-export default defineConfig({
-    plugins: [tailwindcss(), sveltekit(), devtoolsJson()],
-    optimizeDeps: {
-        // for some reason this specific combination of
-        // includes/excludes is required for jassub to work
-        exclude: ["jassub"],
-        include: ["throughput"],
-    }
-});
+export default defineConfig({ plugins: [tailwindcss(), vidstack(), sveltekit(), devtoolsJson()] });