Repository navigation
Added knowledge bases and explainers for containers and metadata tags - #12
Merged
Merged
Conversation
Inspect's "Format" is now "Container", with an ⓘ explainer covering the container-vs-codec distinction and, per container, which codecs it can carry. The bitrate fields explain themselves too, including why the Overview's is "overall" (whole file, every track plus container overhead). Metadata tags get a knowledge base of MP4/QuickTime atoms, ID3v2 frames, Vorbis comments and RIFF INFO chunks, so a tag shows a readable label with its raw name and meaning behind an ⓘ. That answers what ©too is (the encoding tool; the leading © is byte 0xA9, QuickTime's text-atom marker), and recognizable encoder signatures such as Lavf60.16.100 are decoded too. Also: every tab now has a URL (?tab=…), restored on load and navigable with back/forward, and a video loaded from a remote URL is recorded as ?src=… and re-opened automatically, so a link carries both the file and the tab. The CLI card opens with a plain-language description of re-encoding, transcoding and remuxing, the GOP explainer moved under its heading to match the Atom Map tab, "Encode Test" is now "Compare Quality", and links use the theme accent instead of the browser default blue, which was unreadable in dark mode. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN
|
Tip All tests passed and all changes approved!🟢 UI Tests: encoding-helper-storybook: 2 changes accepted as baselines |
|
Tip All tests passed and all changes approved!🟢 UI Tests: encoding-helper-playwright: 1 change accepted as baseline |
for more information, see https://pre-commit.ci
|
CodyCBakerPhD
marked this pull request as ready for review
August 10, 2026 05:20
Fixes the lint failure on the first commit (an unnecessary `??` on a regex capture; the version groups now always participate in the match). The Inspect tab's first card is "Video Container Overview", with the container explainer as a description under the heading instead of an ⓘ popover, and the field itself relabelled "Type". The GOP explainer breaks its I/P/B-frame definitions into bullets and links the sleap-io note to the sio reencode CLI reference. "CLI Command Builder" is now "FFmpeg Command Builder", links to ffmpeg's install page, and says why running ffmpeg natively beats the in-browser engines for real work. The in-browser engines move out of that tab into their own "Re-encode In-Browser" tab, to the right of Compare Quality. Both already encoded the whole video and saved it wherever you chose; the new tab states that up front. Their descriptions were also being inserted as text rather than markup, so "—" was showing literally. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN
Names it a "video container" on first mention, says "compression method" rather than "compression", and splits the codec clause into its own sentence. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN
Adds (.mov) and (.mkv) after the MOV and Matroska mentions, and drops the inline `ffmpeg -c copy` aside. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN
The Video Container Overview card now carries only the general container-vs-codec explanation. What this particular file's container is, which codecs it can carry, and where it plays moved into a card titled "This File's Container: <name>", so it reads as file-specific and its heading changes when another file is loaded. Also drops the "lossless" framing from the rewrap sentence, which invited confusion with lossless compression, drops the legality framing for which codecs a container takes, and switches the remaining "re-encode" spellings to "reencode" to match the rest of the copy. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN
The codec explainers were the worst of it ("H.264 / AVC (2003) — Advanced
Video Coding. The most widely supported video codec in existence — nearly
every browser..."), but they ran through the container, chroma, faststart
and report text too, plus a few control labels. Rewrote each into a colon,
comma, semicolon or parenthetical.
Empty table cells now use the same "–" the metadata grid already used for
a missing value, instead of an em-dash.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Added comprehensive knowledge bases that turn cryptic container and metadata tag names into readable, educational explainers shown in the Inspect tab.
Key changes:
metadataTagKb.tswith a knowledge base covering 70+ metadata tags across MP4/QuickTime, ID3v2, Vorbis/Matroska, and RIFF formats, plus mediabunny's normalized field names. Includes case-insensitive fallback matching for container formats that vary capitalization.containerKb.tsdocumenting 10 container formats (MP4, QuickTime, Matroska, WebM, Ogg, MP3, WAVE, FLAC, ADTS, MPEG-TS) with their extensions, supported codecs, and playback compatibility notes.infoIcon()DOM helper that renders an ⓘ button with a popover explainer. Popovers auto-position to stay on-screen, close on Escape or outside click, and support keyboard focus and touch interaction.gridItem()to optionally display an info button next to field labels, with support for raw (case-sensitive) tag name styling.appUrl.tsmodule for managing shareable state in the query string (tabandsrcparameters), with URL validation and history management.The knowledge bases are author-authored and trusted; they explain why
©toois the encoding tool (not a typo), what the container-vs-codec distinction means, and which codecs each format can carry.https://claude.ai/code/session_01VdEBU5WYKLXj9weEfFKQfN