refactor: migrate to mediabunny

package.json

···
 		"nanoid": "^5.1.6",
 		"solid-floating-ui": "~0.2.1",
 		"solid-js": "^1.9.10",
-		"webm-muxer": "^5.1.4"
+		"mediabunny": "^1.25.7"
 	},
 	"devDependencies": {
 		"@badrap/valita": "^0.4.6",

pnpm-lock.yaml

···
       idb:
         specifier: ^8.0.3
         version: 8.0.3
+      mediabunny:
+        specifier: ^1.25.7
+        version: 1.25.7
       nanoid:
         specifier: ^5.1.6
         version: 5.1.6
···
       solid-js:
         specifier: ^1.9.10
         version: 1.9.10(patch_hash=9cf3f9930aa2f8d4e60502a75153adf9468eb53b42f69e86cac05dfaea3f82e7)
-      webm-muxer:
-        specifier: ^5.1.4
-        version: 5.1.4
     devDependencies:
       '@badrap/valita':
         specifier: ^0.4.6
···
   '@types/dom-close-watcher@1.0.0':
     resolution: {integrity: sha512-7pL0By56sVVGMSJ3HdSY+u08Id0ljStCaf1VnGFxwfpuNdA0HMz0sl2J24eSi9M6ptl9ySkVK35jF75Fn8trUg==}
 
+  '@types/dom-mediacapture-transform@0.1.11':
+    resolution: {integrity: sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ==}
+
+  '@types/dom-webcodecs@0.1.13':
+    resolution: {integrity: sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==}
+
   '@types/dom-webcodecs@0.1.18':
     resolution: {integrity: sha512-vAvE8C9DGWR+tkb19xyjk1TSUlJ7RUzzp4a9Anu7mwBT+fpyePWK1UxmH14tMO5zHmrnrRIMg5NutnnDztLxgg==}
 
···
 
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
-
-  '@types/wicg-file-system-access@2020.9.8':
-    resolution: {integrity: sha512-ggMz8nOygG7d/stpH40WVaNvBwuyYLnrg5Mbyf6bmsj/8+gb6Ei4ZZ9/4PNpcPNTT8th9Q8sM8wYmWGjMWLX/A==}
 
   acorn-walk@8.3.2:
     resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
···
 
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
+  mediabunny@1.25.7:
+    resolution: {integrity: sha512-DL0E1h29HTDaD9bYRXLSSHiAoLbDBksrdYS+4OHWA+aNhQeN+CAGEG7EU6wlhPZ8MOpwXIeC7uv06lo4ziohQQ==}
 
   merge-anything@5.1.7:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
···
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
-  webm-muxer@5.1.4:
-    resolution: {integrity: sha512-ditzgFVFbfqPaugkIr4mGhAdob5K9HY6Rzlh7TRsA368yA1sp/m5O7nQCcMLdgFDeNGtFPg8B+MeXLtpzKWX6Q==}
-    deprecated: This library is superseded by Mediabunny. Please migrate to it.
-
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
···
 
   '@types/dom-close-watcher@1.0.0': {}
 
+  '@types/dom-mediacapture-transform@0.1.11':
+    dependencies:
+      '@types/dom-webcodecs': 0.1.18
+
+  '@types/dom-webcodecs@0.1.13': {}
+
   '@types/dom-webcodecs@0.1.18': {}
 
   '@types/estree@0.0.39': {}
···
   '@types/resolve@1.20.2': {}
 
   '@types/trusted-types@2.0.7': {}
-
-  '@types/wicg-file-system-access@2020.9.8': {}
 
   acorn-walk@8.3.2: {}
 
···
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8
+
+  mediabunny@1.25.7:
+    dependencies:
+      '@types/dom-mediacapture-transform': 0.1.11
+      '@types/dom-webcodecs': 0.1.13
 
   merge-anything@5.1.7:
     dependencies:
···
       vite: 7.2.6(@types/node@24.10.1)(jiti@1.21.7)(terser@5.44.1)
 
   webidl-conversions@4.0.2: {}
-
-  webm-muxer@5.1.4:
-    dependencies:
-      '@types/dom-webcodecs': 0.1.18
-      '@types/wicg-file-system-access': 2020.9.8
 
   whatwg-url@7.1.0:
     dependencies:

src/components/composer/workers/gif-conversion.ts

···
 import { expose } from 'comlink';
-import { ArrayBufferTarget, Muxer } from 'webm-muxer';
+import { BufferTarget, Output, VideoSample, VideoSampleSource, WebMOutputFormat } from 'mediabunny';
 
 export type GifWorkerApi = typeof api;
 const api = {
···
 
 		const frameCount = decoder.tracks.selectedTrack!.frameCount;
 
-		let muxer: Muxer<ArrayBufferTarget>;
-		let encoder: VideoEncoder | undefined;
-
 		if (frameCount === 0) {
 			throw new Error(`GIF has no frames`);
 		}
 
-		for (let idx = 0, configured = false; idx < frameCount; idx++) {
-			const { image } = await decoder.decode({ frameIndex: idx });
-
-			if (!configured) {
-				const width = image.displayWidth;
-				const height = image.displayHeight;
+		let output: Output<WebMOutputFormat, BufferTarget>;
+		let videoSource: VideoSampleSource;
 
-				configured = true;
+		{
+			const { image } = await decoder.decode({ frameIndex: 0 });
 
-				muxer = new Muxer({
-					target: new ArrayBufferTarget(),
-					video: { codec: 'V_VP9', width, height },
-				});
+			output = new Output({
+				format: new WebMOutputFormat(),
+				target: new BufferTarget(),
+			});
 
-				encoder = new VideoEncoder({
-					output: (chunk) => muxer.addVideoChunk(chunk),
-					error: (err) => console.error(err),
-				});
+			videoSource = new VideoSampleSource({ codec: 'vp9', bitrate: 1e6 });
+			output.addVideoTrack(videoSource);
 
-				encoder.configure({ codec: 'vp09.00.10.08', width, height });
-			}
+			await output.start();
+			await videoSource.add(new VideoSample(image));
+		}
 
-			encoder!.encode(image);
+		for (let idx = 1; idx < frameCount; idx++) {
+			const { image } = await decoder.decode({ frameIndex: idx });
+			await videoSource.add(new VideoSample(image));
 		}
 
-		await encoder!.flush();
-		muxer!.finalize();
+		await output.finalize();
 
-		const buffer = muxer!.target.buffer;
+		const buffer = output.target.buffer!;
 		return new Blob([buffer], { type: 'video/webm' });
 	},
 };