Render giphy tokens, and give a video its shape before it plays #11

2026-08-31T02:40:20Z

thatguygriff commented

2026-08-31 02:40:20 +00:00

Two bugs, both visible on https://www.reddit.com/r/LoveTrash/comments/1vxkehp/growing_your_account.

A giphy token with no metadata to look it up in

![gif](giphy|zUW23b6FmzB5e) is a token, not an address, and the only thing that turned it into one was a lookup in the comment's own media_metadata. Reddit ships plenty of comments carrying such a token and no media_metadata at all, and with nothing to look it up in, the token itself was what the comment showed.

Giphy is the one of the three token kinds whose id means something off Reddit, so that one now falls back to i.giphy.com/media/<id>/giphy.gif. A variant name after the id is dropped — Giphy does not serve every variant of every gif, but the full one is always there. Emote and upload ids still resolve only through the metadata, since they name nothing outside Reddit.

A video with no shape until you pressed play

Two causes that looked like one.

The renderer put only aspect-ratio on the <video>. A video with no data has a natural size of 300x150, and WebKit sizes a replaced element from that in preference to the ratio, so a portrait video got a squat landscape box and kept it until playback supplied real dimensions. Chromium stretch-fits instead and gets it right, which is why this only showed on Safari. A video's size before its data arrives is its poster's, so one with no poster of its own now gets an empty SVG of the right shape as a stand-in — a data URI, so it costs no request.

And Reddit's videos with sound had no poster to be sized by, because fromRedditVideo attached the still from preview.images to the MP4 branch alone. The still belongs to the video, not to the format it is served in, so every post with sound showed an empty box where a silent one showed a frame. It goes on both forms now.

Checking

Reproduced first, as the notes ask. npm run resolve on the post above showed 23 unresolved giphy tokens and an HLS video with no poster.

The sizing was measured in Playwright against the real page, in both engines: before the fix WebKit laid the unplayed 720x1280 video out at 300x220 while Chromium got 309x550; after it, both agree, across portrait, landscape, square and small. WebKit is not one of the browsers this repo installs — npx playwright install webkit if you want to re-run that.

End to end on the committed tree: 31 comment gifs, none broken, and the video's own still in place and correctly sized.

New tests: five for the giphy fallback (including one on the captured reddit/video.json fixture, which already held a metadata-less giphy comment), one for the still on the HLS branch, and two for the stand-in poster. 140 pass, typecheck clean.

Closes #10

Two bugs, both visible on https://www.reddit.com/r/LoveTrash/comments/1vxkehp/growing_your_account. ### A giphy token with no metadata to look it up in `![gif](giphy|zUW23b6FmzB5e)` is a token, not an address, and the only thing that turned it into one was a lookup in the comment's own `media_metadata`. Reddit ships plenty of comments carrying such a token and no `media_metadata` at all, and with nothing to look it up in, the token itself was what the comment showed. Giphy is the one of the three token kinds whose id means something off Reddit, so that one now falls back to `i.giphy.com/media/<id>/giphy.gif`. A variant name after the id is dropped — Giphy does not serve every variant of every gif, but the full one is always there. Emote and upload ids still resolve only through the metadata, since they name nothing outside Reddit. ### A video with no shape until you pressed play Two causes that looked like one. The renderer put only `aspect-ratio` on the `<video>`. A video with no data has a natural size of 300x150, and WebKit sizes a replaced element from that in preference to the ratio, so a portrait video got a squat landscape box and kept it until playback supplied real dimensions. Chromium stretch-fits instead and gets it right, which is why this only showed on Safari. A video's size before its data arrives is its poster's, so one with no poster of its own now gets an empty SVG of the right shape as a stand-in — a data URI, so it costs no request. And Reddit's videos with sound had no poster to be sized by, because `fromRedditVideo` attached the still from `preview.images` to the MP4 branch alone. The still belongs to the video, not to the format it is served in, so every post with sound showed an empty box where a silent one showed a frame. It goes on both forms now. ### Checking Reproduced first, as the notes ask. `npm run resolve` on the post above showed 23 unresolved giphy tokens and an HLS video with no poster. The sizing was measured in Playwright against the real page, in both engines: before the fix WebKit laid the unplayed 720x1280 video out at 300x220 while Chromium got 309x550; after it, both agree, across portrait, landscape, square and small. WebKit is not one of the browsers this repo installs — `npx playwright install webkit` if you want to re-run that. End to end on the committed tree: 31 comment gifs, none broken, and the video's own still in place and correctly sized. New tests: five for the giphy fallback (including one on the captured `reddit/video.json` fixture, which already held a metadata-less giphy comment), one for the still on the HLS branch, and two for the stand-in poster. 140 pass, typecheck clean. Closes #10

thatguygriff added 2 commits 2026-08-31 02:40:21 +00:00

Resolve a giphy token with no metadata to look it up in 4669fe0b6a

`![gif](giphy|zUW23b6FmzB5e)` is a token, not an address, and the only thing
that turned it into one was a lookup in the comment's own `media_metadata`.
Reddit ships plenty of comments carrying such a token and no `media_metadata`
at all, and with nothing to look it up in the token itself was what the
comment showed.

Giphy is the one of the three token kinds whose id means something off
Reddit, so that one can be resolved without the lookup. A variant name after
the id is dropped: Giphy does not serve every variant of every gif, but the
full one is always there.

The other two still resolve only through the metadata. An emote id and an
upload id name nothing outside Reddit, so with no entry for them there is
still nothing to point them at.

Closes #10

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01PLkmgp1fWbA4XbarxKdRKt

Give a video its shape before it has any data

CI / Typecheck, test, build (pull_request) Successful in 26s

Details

5b4378a838

A Reddit video sat in the wrong box until you pressed play, for two reasons
that looked like one.

The renderer put only `aspect-ratio` on the `<video>`. A video with no data
has a natural size of 300x150, and WebKit sizes a replaced element from that
rather than from the ratio, so a portrait video got a squat landscape box and
kept it until playback supplied real dimensions. Chromium stretch-fits
instead and gets it right, which is why this only showed on Safari. A
video's size before its data arrives is its poster's, so one with no poster
of its own now gets an empty SVG of the right shape as a stand-in: a data
URI, so it costs no request. Measured in both engines across portrait,
landscape, square and small.

And Reddit's videos with sound had no poster to be sized by, because
`fromRedditVideo` attached the still from `preview.images` to the MP4 branch
alone. The still belongs to the video, not to the format it is served in, so
every post with sound showed an empty box where a silent one showed a frame.
It now goes on both.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01PLkmgp1fWbA4XbarxKdRKt

thatguygriff merged commit 3afdf6ffe2 into main

2026-08-31 02:41:08 +00:00

thatguygriff deleted branch giphy-tokens-and-video-posters

2026-08-31 02:41:08 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Unsupervised/antisocial#11