feat: gif to video conversion

package.json

···
 		"@mary/exif-rm": "npm:@jsr/mary__exif-rm@^0.2.1",
 		"@mary/solid-freeze": "npm:@externdefs/solid-freeze@^0.1.1",
 		"@mary/solid-query": "npm:@externdefs/solid-query@^0.1.5",
+		"comlink": "^4.4.1",
 		"hls.js": "^1.5.17",
 		"idb": "^8.0.0",
 		"nanoid": "^5.0.7",
 		"solid-floating-ui": "~0.2.1",
-		"solid-js": "^1.9.2"
+		"solid-js": "^1.9.2",
+		"webm-muxer": "^5.0.2"
 	},
 	"devDependencies": {
 		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
 		"@types/dom-close-watcher": "^1.0.0",
+		"@types/dom-webcodecs": "^0.1.13",
 		"autoprefixer": "^10.4.20",
 		"babel-plugin-transform-typescript-const-enums": "^0.1.0",
 		"prettier": "^3.3.3",

pnpm-lock.yaml

···
       '@mary/solid-query':
         specifier: npm:@externdefs/solid-query@^0.1.5
         version: '@externdefs/solid-query@0.1.5(solid-js@1.9.2(patch_hash=5rodyfcb76rtbo26dwlsojy7jy))'
+      comlink:
+        specifier: ^4.4.1
+        version: 4.4.1
       hls.js:
         specifier: ^1.5.17
         version: 1.5.17
···
       solid-js:
         specifier: ^1.9.2
         version: 1.9.2(patch_hash=5rodyfcb76rtbo26dwlsojy7jy)
+      webm-muxer:
+        specifier: ^5.0.2
+        version: 5.0.2
     devDependencies:
       '@trivago/prettier-plugin-sort-imports':
         specifier: ^4.3.0
···
       '@types/dom-close-watcher':
         specifier: ^1.0.0
         version: 1.0.0
+      '@types/dom-webcodecs':
+        specifier: ^0.1.13
+        version: 0.1.13
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
···
   '@types/dom-close-watcher@1.0.0':
     resolution: {integrity: sha512-7pL0By56sVVGMSJ3HdSY+u08Id0ljStCaf1VnGFxwfpuNdA0HMz0sl2J24eSi9M6ptl9ySkVK35jF75Fn8trUg==}
 
+  '@types/dom-webcodecs@0.1.13':
+    resolution: {integrity: sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==}
+
   '@types/estree@0.0.39':
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
 
···
 
   '@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.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
···
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  comlink@4.4.1:
+    resolution: {integrity: sha512-+1dlx0aY5Jo1vHy/tSsIGpSkN4tS9rZSW8FIhG0JH/crs9wwweswIo/POr451r7bZww3hFbPAKnTpimzL/mm4Q==}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
···
 
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+
+  webm-muxer@5.0.2:
+    resolution: {integrity: sha512-/1m0ZGOcx8TvEmqY+U7GromXTKtto4pi5ou+ZvaQXEjb+G/v1cln2ZbKK3T4fpWhLBYjKBeYWza/y1Nxccm5pg==}
 
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
···
 
   '@types/dom-close-watcher@1.0.0': {}
 
+  '@types/dom-webcodecs@0.1.13': {}
+
   '@types/estree@0.0.39': {}
 
   '@types/estree@1.0.6': {}
···
 
   '@types/trusted-types@2.0.7': {}
 
+  '@types/wicg-file-system-access@2020.9.8': {}
+
   acorn-walk@8.3.4:
     dependencies:
       acorn: 8.13.0
···
   color-name@1.1.3: {}
 
   color-name@1.1.4: {}
+
+  comlink@4.4.1: {}
 
   commander@2.20.3: {}
 
···
       vite: 6.0.0-beta.1(patch_hash=wl54gd7ndnry4uf2hjz6glag5u)(@types/node@22.7.6)(terser@5.36.0)
 
   webidl-conversions@4.0.2: {}
+
+  webm-muxer@5.0.2:
+    dependencies:
+      '@types/dom-webcodecs': 0.1.13
+      '@types/wicg-file-system-access': 2020.9.8
 
   whatwg-url@7.1.0:
     dependencies:

src/components/composer/composer-dialog.tsx

···
 import ComposerInput from './composer-input';
 import ComposerReplyContext from './composer-reply-context';
 import ContentWarningMenu from './dialogs/content-warning-menu';
+import GifConversionPromptLazy from './dialogs/gif-conversion-prompt-lazy';
 import LanguageSelectDialogLazy from './dialogs/language-select-dialog-lazy';
 import ThreadgateMenu from './dialogs/threadgate-menu';
 import DraftListDialogLazy from './drafts/draft-list-dialog-lazy';
···
 			}
 
 			post.embed.media = next;
+			return;
+		}
+
+		const gif = blobs.find((blob) => blob.type === 'image/gif');
+		if (gif) {
+			if (!post.embed.media) {
+				if (!VideoEncoder || !ImageDecoder) {
+					onError(`Your browser doesn't support converting GIF into video`);
+					return;
+				}
+
+				onError();
+				openModal(() => (
+					<GifConversionPromptLazy blob={gif} onSuccess={(video) => addImagesOrVideo([video])} />
+				));
+			}
+
 			return;
 		}
 

src/components/composer/dialogs/gif-conversion-prompt-lazy.tsx

···
+import { lazy } from 'solid-js';
+
+const GifConversionPromptLazy = lazy(() => import('./gif-conversion-prompt'));
+
+export default GifConversionPromptLazy;

src/components/composer/dialogs/gif-conversion-prompt.tsx

···
+import { wrap } from 'comlink';
+import { Match, Switch, createResource } from 'solid-js';
+
+import { useModalContext } from '~/globals/modals';
+
+import { makeAbortable } from '~/lib/hooks/abortable';
+
+import CircularProgressView from '~/components/circular-progress-view';
+import * as Prompt from '~/components/prompt';
+
+import type { GifWorkerApi } from '../workers/gif-conversion';
+
+export interface GifConversionPromptProps {
+	blob: Blob;
+	onSuccess: (video: Blob) => void;
+}
+
+const GifConversionPrompt = ({ blob, onSuccess }: GifConversionPromptProps) => {
+	const { close } = useModalContext();
+
+	const [getAbortSignal] = makeAbortable();
+	const [resource] = createResource(async () => {
+		const signal = getAbortSignal();
+
+		let video: Blob;
+		{
+			const workerUrl = new URL('../workers/gif-conversion', import.meta.url);
+			const worker = new Worker(workerUrl, { type: 'module' });
+
+			try {
+				const api = wrap<GifWorkerApi>(worker);
+				video = await api.transform(blob);
+			} finally {
+				worker.terminate();
+			}
+		}
+
+		signal.throwIfAborted();
+
+		close();
+		onSuccess(video);
+	});
+
+	return (
+		<Prompt.Container>
+			<Switch>
+				<Match when={resource.error}>
+					{(err) => (
+						<>
+							<Prompt.Title>Failed to convert GIF</Prompt.Title>
+							<p class="text-pretty text-de text-error">{'' + err()}</p>
+
+							<Prompt.Actions>
+								<Prompt.Action variant="primary">Close</Prompt.Action>
+							</Prompt.Actions>
+						</>
+					)}
+				</Match>
+
+				<Match when>
+					<Prompt.Title>Converting GIF</Prompt.Title>
+					<Prompt.Description>This might take a bit</Prompt.Description>
+
+					<div class="mt-6">
+						<CircularProgressView />
+					</div>
+
+					<Prompt.Actions>
+						<Prompt.Action>Cancel</Prompt.Action>
+					</Prompt.Actions>
+				</Match>
+			</Switch>
+		</Prompt.Container>
+	);
+};
+
+export default GifConversionPrompt;

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

···
+import { expose } from 'comlink';
+import { ArrayBufferTarget, Muxer } from 'webm-muxer';
+
+export type GifWorkerApi = typeof api;
+const api = {
+	async transform(blob: Blob) {
+		const decoder = new ImageDecoder({ type: 'image/gif', data: await blob.arrayBuffer() });
+		await decoder.tracks.ready;
+
+		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;
+
+				configured = true;
+
+				muxer = new Muxer({
+					target: new ArrayBufferTarget(),
+					video: { codec: 'V_VP9', width, height },
+				});
+
+				encoder = new VideoEncoder({
+					output: (chunk) => muxer.addVideoChunk(chunk),
+					error: (err) => console.error(err),
+				});
+
+				encoder.configure({ codec: 'vp09.00.10.08', width, height });
+			}
+
+			encoder!.encode(image);
+		}
+
+		await encoder!.flush();
+		muxer!.finalize();
+
+		const buffer = muxer!.target.buffer;
+		return new Blob([buffer], { type: 'video/webm' });
+	},
+};
+
+expose(api);

tsconfig.json

···
 	"compilerOptions": {
 		"target": "ESNext",
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
-		"types": ["dom-close-watcher"],
+		"types": ["dom-close-watcher", "dom-webcodecs"],
 		"skipLibCheck": true,
 
 		"module": "ESNext",