Media

Opens images, video and audio files in a tab of their own, as custom editors.

media opens images, video and audio files in a tab of their own, using <img>, <video> and <audio> to show them instead of the text editor.

import { media } from "codelet/extensions/media";
import { FileSystem, Workbench } from "codelet/workbench";

const workbench = new Workbench({
  parent: document.getElementById("app")!,
  fs: new FileSystem({ "/logo.svg": "<svg>...</svg>" }),
  extensions: [media],
});

media takes no options.

#Try it

Click notes.txt for an ordinary text tab, then logo.svg — it opens in a media tab instead, rendered with <img>.

#File types

media registers a custom editor for each extension below, grouped into three kinds. Opening a file with one of these extensions opens it in the matching tab instead of the text editor.

Kind	Extensions
Image	`.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.avif`, `.bmp`, `.ico`, `.svg`
Video	`.mp4`, `.webm`, `.ogv`, `.mov`
Audio	`.mp3`, `.wav`, `.ogg`, `.oga`, `.flac`, `.m4a`, `.aac`

#How a file gets there

A FileSystem holds every file as text, so the bytes of a .png are never in the tree as such. Dropping an image, video or audio file from the desktop onto the explorer writes it in as a data: URI instead — codelet does that conversion for you, and media is what reads the result back and shows it. The remote extension does the same for a binary file mirrored from a real filesystem, as a URL pointing back at the server rather than a data: URI.

Note

A drop that isn't valid UTF-8 text is capped at 16 MiB — base64 runs about a third longer than the bytes it encodes, and stays in memory for the life of the page. See Binary files for the full rule, including what happens to a file no extension claims.

#What a file's contents must be

media reads a file's text and treats it as one of:

A data: or blob: URI, or an http(s):// URL, used as-is.
A page-relative path (starting with /, ./ or ../), resolved against the page's own URL.
Base64 with no data: header, wrapped into a data: URI using the MIME type for the file's extension.
For .svg files specifically, the raw SVG markup itself — a workbench does hold an SVG's actual contents as text.

If none of these match, the tab shows a message instead of a broken preview.

#Getting back to the text

A media tab replaces the text editor for these files, not the file itself — the text is still there underneath. View: Reopen Editor With…, from the command palette, opens the same file as plain text.