Merge pull request 'Ask iOS for the playback audio session on a page with a video' (#14) from video-audio-session-on-ios into main

Reviewed-on: #14

.gitea/workflows/publish.yml

@@ -157,19 +157,26 @@ jobs:
     # it is a candidate for, so there is nothing yet to move past.
     if: github.ref_type == 'tag' && !contains(github.ref_name, '-')
     runs-on: ubuntu-latest
+    # npm does the bump, so this one job wants node. A job in a container is
+    # given `sh -e {0}` as its shell rather than the bash the runner's own jobs
+    # get, and dash has neither `pipefail` nor the `10#` below — which failed
+    # the first line of the first step the one time this ran. node:22 is Debian
+    # and carries bash, so asking for it keeps these scripts the same as the
+    # ones in the job above.
     container:
       image: node:22
+    defaults:
+      run:
+        shell: bash
     steps:
       # The tag names a commit in main's history, but the bump belongs on the
-      # branch, so this checks out main rather than the tag.
+      # branch, so this checks out main rather than the tag. The full history
+      # because a shallow clone cannot reliably push a branch back.
       - uses: actions/checkout@v4
         with:
           ref: main
-          # The task token can push only if the instance allows Actions to
+          fetch-depth: 0
-          # write to the repository. Where it does not, set VERSION_BUMP_TOKEN
+          token: ${{ secrets.GITHUB_TOKEN }}
-          # to a personal access token with write access and it is used
-          # instead.
-          token: ${{ secrets.VERSION_BUMP_TOKEN || secrets.GITEA_TOKEN }}
 
       - name: Work out the next patch version
         id: next
@@ -211,30 +218,59 @@ jobs:
           echo "changed=true" >> "$GITHUB_OUTPUT"
           echo "package.json ${current} -> ${NEXT}"
 
-      - name: Commit it to main
+      # The bump arrives as a pull request rather than as a commit straight to
+      # main. Pushing a branch asks nothing of the task token beyond ordinary
+      # write access, so nothing here depends on being allowed past whatever
+      # protects main; and the pull request puts the changed package.json
+      # through the build before it lands. Since main is never pushed, the
+      # `[skip ci]` that would otherwise be needed to stop this rebuilding the
+      # image just published is not.
+      - name: Open a pull request for it
         if: steps.bump.outputs.changed == 'true'
         env:
           NEXT: ${{ steps.next.outputs.next }}
+          RELEASED: ${{ github.ref_name }}
+          TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           set -euo pipefail
 
+          branch="release/bump-${NEXT}"
+
           # A name that is not a person, and a reserved address that can never
           # resolve to one. Nothing here names the instance it runs on.
           git config user.name 'Release bot'
           git config user.email '[email protected]'
 
+          git checkout -b "${branch}"
           git add package.json package-lock.json
-          # `[skip ci]` because this commit is a number and nothing else:
+          git commit -m "Set the working version to ${NEXT}"
-          # without it the push to main starts another build of the very image
+          git push origin "${branch}"
-          # that was just published.
-          git commit -m "Set the working version to ${NEXT} [skip ci]"
 
-          if ! git push origin HEAD:main; then
+          # node rather than jq to build the request body: jq is not in this
-            echo >&2
+          # image, and node is the one thing that certainly is.
-            echo "Could not push the version bump to main. Either the Actions" >&2
+          payload="$(BRANCH="${branch}" node -e 'process.stdout.write(JSON.stringify({
-            echo "token has no write access to this repository, or main is" >&2
+            head: process.env.BRANCH,
-            echo "protected against direct pushes. Set VERSION_BUMP_TOKEN to a" >&2
+            base: "main",
-            echo "token that may push to main, or allow that token past the" >&2
+            title: `Set the working version to ${process.env.NEXT}`,
-            echo "branch protection." >&2
+            body: `${process.env.RELEASED} has shipped, so the tree was left on a version that is published and immutable. This moves it on to ${process.env.NEXT}, which is deliberately not a version that exists.`,
-            exit 1
+          }))')"
-          fi
+
+          api="${GITHUB_SERVER_URL}/api/v1/repos/${GITHUB_REPOSITORY}"
+          response="$(mktemp)"
+          code="$(curl -sS -o "${response}" -w '%{http_code}' \
+            -X POST "${api}/pulls" \
+            -H "Authorization: token ${TOKEN}" \
+            -H 'Content-Type: application/json' \
+            -d "${payload}")"
+
+          case "${code}" in
+            201) echo "Opened ${branch} against main." ;;
+            # A release re-run that got this far: the branch and its pull
+            # request are already there, which is the state we wanted anyway.
+            409) echo "A pull request for ${branch} is already open." ;;
+            *)
+              echo "Could not open the pull request (HTTP ${code}):" >&2
+              cat "${response}" >&2
+              exit 1
+              ;;
+          esac

CLAUDE.md

@@ -96,6 +96,15 @@ Things worth knowing before editing:
   `src/media/registry.ts` and served from `/m/<id>` with the `Referer`/`Cookie` the CDN
   demands. `Range` is forwarded — without it the native video scrubber cannot seek.
   The exception is HLS (`direct: true`), because proxying would mean rewriting playlists.
+- **A video is sized by its poster**, not by the ratio the renderer puts on it. A
+  `<video>` with no data has a natural size of 300x150, and WebKit sizes it from that —
+  so one with no poster of its own gets an empty SVG of the right shape as a stand-in,
+  without which a portrait video sits in a squat landscape box until you press play.
+- **A page with a video claims the `playback` audio session** (`public/app.js`). iOS
+  hands inline video the ambient session, which the Ring/Silent switch mutes, so
+  without this the video plays and says nothing until it goes fullscreen — and the
+  report that arrives is "this one platform has no sound". The session only activates
+  once something plays, so declaring it costs nothing on a page nobody presses play on.
 - **Never a bare error page.** A failed resolve renders a card carrying the platform, the
   original URL and the copy button. A broken adapter must still leave the link one tap
   away.
@@ -144,10 +153,25 @@ Things worth knowing before editing:
   Video: `fallback_url` is the *video track alone* whenever `has_audio` is true, so a
   post with sound has to use `hls_url`, direct and unproxied; a silent one gets the
   proxied MP4. `scrubber_media_url` is not a poster — it is a second MP4 for the
-  timeline thumbnails, and the still is in `preview.images`. A gallery's pictures are in
+  timeline thumbnails, and the still is in `preview.images` — which belongs to both
-  `media_metadata`, keyed and unordered; their order is only in `gallery_data`. Comment
+  forms: the HLS one used to go without, and showed an empty box where a silent post
+  showed a frame. A gallery's pictures are in `media_metadata`, keyed and unordered;
+  their order is only in `gallery_data`. Comment
   bodies are Markdown, rendered by `src/render/markdown.ts` — escape first, then put
-  back the constructs we chose to support, never `body_html`.
+  back the constructs we chose to support, never `body_html`. An image in a comment is
+  written as a token rather than an address — `![gif](giphy|Ve7wX45)`,
+  `![img](emote|t5_2th52|4358)`, `![img](jo8gf0ca92zd1)` — and the token is usually a key
+  in that same comment's own `media_metadata`, so `resolveInlineImages` is one lookup
+  rather than three special cases. Usually: plenty of comments carry a Giphy token and
+  no `media_metadata` at all, and Giphy is the one of the three whose id means something
+  off Reddit, so that token alone 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. A bare `preview.redd.it` address pasted into a comment is in there too, keyed by
+  the id inside the URL. Prefer `s.gif` over `s.mp4` for an animated one: a GIF moves in
+  an `<img>` and an MP4 needs a player. An address
+  typed without a scheme counts as well, but only when it ends in an image extension —
+  the rule wants a host, a path *and* that extension, because comments are full of
+  dotted, slashed prose that must not turn into links.
 - **Threads** — same media schema as Instagram (`src/platforms/meta-media.ts`). Its
   payloads are full of empty stub nodes, so the finder only accepts a node with actual
   candidates in it. The page ships the linked post, the author's follow-ups, other
@@ -174,6 +198,10 @@ Login walls are not passed through — those need an account and cannot be solve
 - **No ESLint** — `typescript-eslint` does not support TS 7 yet. `npm run typecheck` is
   the lint step.
 - Tests are `node:test` against captured fixtures. No network in the test suite.
+- `public/` is served as-is to the browser, so what is in there is plain JS, not TS.
+  `public/browsers.js` — the per-browser URL schemes behind the "open in" picker — is
+  a module rather than more of `app.js` so a test can import it; that is what `allowJs`
+  in `tsconfig.json` is for.
 - Comments explain *why*, especially where the code looks odd because a platform is odd.
   Match that; do not add narration of what the next line does.
 - Post text comes from strangers: everything goes through the `html` tagged template or
@@ -201,16 +229,22 @@ The registry comes from the `REGISTRY` repository variable, the image name from
 `IMAGE_NAME` or the repository name, and credentials from `REGISTRY_USER` and the
 `REGISTRY_TOKEN` secret. Nothing about any particular deployment is committed here.
 
-A release also moves `package.json` on to the next patch version, committed to main by
+A release also moves `package.json` on to the next patch version, opened as a pull
-the `bump` job — so the number in the tree is never one that has already shipped and
+request by the `bump` job — so the number in the tree is never one that has already
-been made immutable. It lives in `publish.yml` rather than a workflow of its own so it
+shipped and been made immutable. It lives in `publish.yml` rather than a workflow of its
-can say `needs: build`: a version that failed to publish has not been released, and
+own so it can say `needs: build`: a version that failed to publish has not been
-bumping past it would claim otherwise. Prereleases are skipped, being candidates for a
+released, and bumping past it would claim otherwise. Prereleases are skipped, being
-version that has not shipped. The bump goes through `npm version` rather than an edit in
+candidates for a version that has not shipped. The bump goes through `npm version`
-place, because the version is in the lockfile too, in more than one place, and the two
+rather than an edit in place, because the version is in the lockfile too, in more than
-have to agree. The commit carries `[skip ci]`, or pushing it would rebuild the image
+one place, and the two have to agree.
-that was just published. Pushing to main needs a token with write access —
+
-`VERSION_BUMP_TOKEN` overrides the task token where that one cannot.
+It arrives as a pull request rather than as a commit straight to main: pushing a branch
+asks nothing of the task token beyond ordinary write access, so it does not matter what
+protects main, and the changed `package.json` goes through a build before it lands.
+Nothing pushes to main, so no `[skip ci]` is needed to stop the bump rebuilding the
+image just published. The job is the only one that runs in a container (`node:22`, for
+npm), and a job in a container is handed `sh`, not bash — hence the explicit
+`shell: bash`, without which `set -o pipefail` fails the first line of the first step.
 
 Two things any deployment has to get right, both learned the hard way:
 

README.md

@@ -73,6 +73,35 @@ button hands back.
 `/` serves these rules with the live hostname already filled in, if you'd rather copy
 them from there.
 
+## Opening the original
+
+The rules are indiscriminate, which is the point — but that catches the way back out
+too. Tapping "Open on Instagram" in the browser the rules are installed in redirects
+straight back here, so the one button meant to get you to the app is the one button that
+cannot.
+
+The way past it is to hand the address to a *different* browser, by its own URL scheme.
+`/` has a picker for which one:
+
+| Browser | macOS | iOS |
+| --- | --- | --- |
+| Chrome | `googlechromes://…` | `googlechromes://…` |
+| Edge | `microsoft-edge:https://…` | `microsoft-edge-https://…` |
+| Orion | `orion://open-url?url=…` | `orion://open-url?url=…` |
+| Firefox | — | `firefox://open-url?url=…` |
+
+Firefox on macOS registers no scheme, so it is not offered there; nor is Safari itself,
+which is the browser being escaped. The choice is kept in that browser's own
+`localStorage` — not a cookie and not synced, because "which browser is installed" is a
+fact about the device, not about you, and the phone's answer is not the Mac's.
+
+Until a browser is chosen there is no "Open on …" button at all — the plain address is
+the one thing it must not offer, since following it only comes back here. The markup
+carries that address anyway, hidden, and the script swaps in the scheme and reveals the
+button once there is somewhere to send it. So with JavaScript off, or with the default
+left alone, the copy button and the selectable URL are the whole of it, which is all
+that was ever load-bearing.
+
 ## How it works
 
 Every request drives a real Chromium page load. One code path, and it survives markup
@@ -126,6 +155,13 @@ which is why it only appears once the script has run. What was behind a _load mo
 not fetched — that is a second page and often a third — but it is counted and said out
 loud rather than quietly dropped.
 
+Pictures inside comments are shown as pictures. Reddit writes them as a token rather
+than an address — a Giphy id, a subreddit emote, or an image uploaded to the comment —
+and all three are looked up in the comment's own metadata to find the real file. An
+image address someone simply pasted is shown too, which on Reddit is how most of them
+arrive. All of it goes through the same `/m/` proxy as everything else, so reading a
+comment thread never has your browser talking to Reddit.
+
 Media never gets linked straight at a CDN. Instagram and TikTok reject requests without
 a matching `Referer` (and sometimes cookies), and proxying keeps your browser from
 talking to the platform at all. Every asset is registered under an opaque `/m/<id>` and
@@ -135,6 +171,10 @@ The one exception is Bluesky video, which is an HLS playlist — proxying it wou
 rewriting the manifest and every segment, so it is linked directly. Safari plays HLS
 natively; other browsers show a note.
 
+A page carrying a video asks iOS for the playback audio session. Without it a video
+playing inline is treated as ambience and the Ring/Silent switch mutes it, so the post
+plays perfectly and says nothing unless you go fullscreen.
+
 Resolved posts are cached in memory for an hour, so a reload or a back button doesn't
 drive the browser again.
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "antisocial",
-  "version": "1.2.1",
+  "version": "1.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "antisocial",
-      "version": "1.2.1",
+      "version": "1.2.4",
       "license": "UNLICENSED",
       "dependencies": {
         "@fastify/static": "10.1.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antisocial",
-  "version": "1.2.1",
+  "version": "1.2.4",
   "private": true,
   "description": "Reads social posts back to you without the app.",
   "license": "UNLICENSED",

public/app.css

@@ -242,6 +242,30 @@ main { max-width: 680px; margin: 0 auto; }
 .index__table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: middle; }
 .index__table code { overflow-wrap: anywhere; }
 
+.picker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px solid var(--line);
+}
+/* The control ships hidden and is revealed by the script, and `display:
+   flex` above would otherwise beat the browser's own rule for [hidden]. */
+.picker[hidden] { display: none; }
+.picker__label { font-size: 13px; color: var(--ink-dim); }
+.picker__select {
+  font: inherit;
+  font-size: 14px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--card);
+  color: var(--ink);
+}
+.picker__note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-dim); }
+
 /* ---------- verification puzzle ---------- */
 
 .challenge__lede { margin: 14px; font-size: 14px; color: var(--ink-dim); }
@@ -556,3 +580,22 @@ main { max-width: 680px; margin: 0 auto; }
   max-height: 45dvh;
   min-height: 0;
 }
+
+/* A picture someone put in a comment. Capped hard: it is a remark inside a
+   conversation, not the thing the page is about. */
+.c__img {
+  display: block;
+  max-width: min(100%, 420px);
+  max-height: 40vh;
+  max-height: 40dvh;
+  width: auto;
+  height: auto;
+  margin: 8px 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+}
+
+/* A lone image is the whole comment more often than not, so it should not
+   carry a paragraph's worth of space above it as well as its own. */
+.c__body > p:first-child > .c__img:first-child { margin-top: 2px; }

public/app.js

@@ -1,7 +1,10 @@
 // Progressive enhancement only. Without this file the page still shows the
 // media in a swipeable rail and the original URL as selectable text.
 
+import { browsersFor, detectOs, openUrlFor } from './browsers.js';
+
 const VIEW_KEY = 'antisocial:view';
+const BROWSER_KEY = 'antisocial:browser';
 
 function setupCopy() {
   for (const button of document.querySelectorAll('.copy')) {
@@ -37,6 +40,62 @@ function setupCopy() {
   }
 }
 
+function storedBrowser() {
+  try {
+    return localStorage.getItem(BROWSER_KEY) ?? 'default';
+  } catch {
+    return 'default';
+  }
+}
+
+// The markup carries the plain address, which is the one thing the button
+// must not offer: followed in the browser the rewrite rules are installed
+// in, it redirects straight back to this page. So the link ships hidden and
+// is only revealed once a browser has been picked to hand it to. With no
+// choice made -- or none this system has a scheme for -- the copy button
+// and the URL below it are the whole of it.
+function applyBrowser(id) {
+  const os = detectOs();
+
+  for (const link of document.querySelectorAll('.original__open')) {
+    link.dataset.original ??= link.getAttribute('href');
+
+    const href = openUrlFor(link.dataset.original, id, os);
+    link.href = href;
+    link.hidden = href === link.dataset.original;
+  }
+}
+
+// Only on the index page, and only with this file running: the choice is
+// useless without the rewriting above, so the control ships hidden.
+function setupBrowserPicker() {
+  const select = document.querySelector('.picker__select');
+  if (!select) return;
+
+  for (const browser of browsersFor(detectOs())) {
+    const option = document.createElement('option');
+    option.value = browser.id;
+    option.textContent = browser.label;
+    select.append(option);
+  }
+
+  // A stored id with no scheme on this system would leave the control
+  // showing nothing at all, so fall back rather than render a blank.
+  const stored = storedBrowser();
+  select.value = [...select.options].some((option) => option.value === stored) ? stored : 'default';
+
+  select.addEventListener('change', () => {
+    try {
+      localStorage.setItem(BROWSER_KEY, select.value);
+    } catch {
+      // Private browsing. The choice just won't survive the page.
+    }
+    applyBrowser(select.value);
+  });
+
+  select.closest('.picker').hidden = false;
+}
+
 // One per rail: a post can carry several -- a thread of them, or a post and
 // the post it quotes -- and wiring only the first leaves the rest inert.
 function setupMedia(media) {
@@ -96,6 +155,19 @@ function setupMedia(media) {
   }
 }
 
+// On iOS a video playing inline gets the "ambient" audio session, which the
+// Ring/Silent switch mutes -- so the post plays perfectly and says nothing,
+// and the only way to hear it is to go fullscreen. Claiming "playback" says
+// what is true here: the sound is the point, not decoration. The session is
+// not activated until something actually plays, so declaring it up front
+// interrupts nothing; it is declared only on a page that has a video so an
+// ordinary text post never claims it at all.
+function setupAudioSession() {
+  if (!('audioSession' in navigator)) return;
+  if (!document.querySelector('video')) return;
+  navigator.audioSession.type = 'playback';
+}
+
 // Every comment is a <details open>, so folding one already works with this
 // file missing. All this adds is doing the whole page at once, which is why
 // the button ships hidden and is only revealed here.
@@ -127,7 +199,10 @@ function setupComments() {
 }
 
 setupCopy();
+applyBrowser(storedBrowser());
+setupBrowserPicker();
 for (const media of document.querySelectorAll('.media')) setupMedia(media);
+setupAudioSession();
 setupComments();
 
 // --- Verification puzzles -------------------------------------------------

public/browsers.js

@@ -0,0 +1,64 @@
+// The rewrite rules that send a shared link here catch the original link on
+// the way back out too, so in Safari "Open on <platform>" lands back on this
+// page. Handing the address to a different browser is the way out, and the
+// only way to do that from a web page is that browser's own URL scheme --
+// which every one of them spells differently. Some swap the scheme, some
+// prefix it, some take the whole address as a query parameter.
+
+/** http -> googlechrome://, https -> googlechromes:// */
+const chrome = (url) => url.replace(/^http(s?):/, 'googlechrome$1:');
+
+// Edge keeps the original scheme either way, but on macOS it stays in the
+// address and the scheme is prefixed, while on iOS it is folded into the
+// scheme itself.
+const edgeMacos = (url) => `microsoft-edge:${url}`;
+const edgeIos = (url) => url.replace(/^http(s?):/, 'microsoft-edge-http$1:');
+
+/** Firefox and Orion take the address as a parameter instead. */
+const openUrl = (scheme) => (url) => `${scheme}://open-url?url=${encodeURIComponent(url)}`;
+
+// `null` means the browser is there but ships no scheme to reach it on that
+// system, so there is nothing to offer beyond the plain link.
+export const BROWSERS = [
+  { id: 'default', label: 'Default browser', macos: null, ios: null },
+  { id: 'chrome', label: 'Chrome', macos: chrome, ios: chrome },
+  { id: 'edge', label: 'Edge', macos: edgeMacos, ios: edgeIos },
+  { id: 'firefox', label: 'Firefox', macos: null, ios: openUrl('firefox') },
+  { id: 'orion', label: 'Orion', macos: openUrl('orion'), ios: openUrl('orion') },
+];
+
+/**
+ * iPadOS calls itself MacIntel, so the platform string alone cannot tell the
+ * two apart; the touch points can. Everything else gets the desktop table --
+ * the only desktop this is ever opened on is a Mac.
+ *
+ * @param {{ platform?: string, maxTouchPoints?: number }} [nav]
+ */
+export function detectOs(nav = globalThis.navigator) {
+  const platform = nav?.platform ?? '';
+  if (/^iP(hone|ad|od)/.test(platform)) return 'ios';
+  if (platform === 'MacIntel' && (nav?.maxTouchPoints ?? 0) > 1) return 'ios';
+  return 'macos';
+}
+
+/** The browsers worth offering here: the default, plus the ones this system
+ *  actually has a scheme for. */
+export function browsersFor(os) {
+  return BROWSERS.filter((browser) => browser.id === 'default' || browser[os]);
+}
+
+function browserById(id) {
+  return BROWSERS.find((browser) => browser.id === id);
+}
+
+/**
+ * The address to open. A browser with no scheme on this system, an unknown
+ * id, or anything that is not an ordinary web link is handed back untouched:
+ * a dead custom scheme opens nothing at all, which is worse than the plain
+ * link opening in the wrong browser.
+ */
+export function openUrlFor(url, browserId, os) {
+  const rewrite = browserById(browserId)?.[os];
+  if (!rewrite || !/^https?:\/\//i.test(url)) return url;
+  return rewrite(url);
+}

src/platforms/reddit.ts

@@ -62,6 +62,7 @@ type Link = {
 type CommentData = {
   author?: string;
   body?: string;
+  media_metadata?: Record<string, MediaMeta>;
   created_utc?: number;
   score?: number;
   score_hidden?: boolean;
@@ -103,6 +104,10 @@ function fromRedditVideo(video: RedditVideo, poster: string | undefined): Media[
   const common = {
     ...sized(video.width, video.height),
     ...(video.duration ? { durationSec: video.duration } : {}),
+    // The still belongs to the video and not to the format it is served in.
+    // The HLS branch used to drop it, which is why a post with sound showed
+    // an empty box where every silent one showed a frame.
+    ...(poster ? { poster: { url: poster } } : {}),
   };
 
   if (video.has_audio !== false && video.hls_url) {
@@ -113,12 +118,7 @@ function fromRedditVideo(video: RedditVideo, poster: string | undefined): Media[
   if (url === video.hls_url) {
     return [{ kind: 'video', url, hls: true, direct: true, ...common }];
   }
-  return [{
+  return [{ kind: 'video', url, ...common }];
-    kind: 'video',
-    url,
-    ...(poster ? { poster: { url: poster } } : {}),
-    ...common,
-  }];
 }
 
 /** One entry of a gallery post. Reddit keeps the pictures somewhere other
@@ -188,6 +188,55 @@ function bodyOf(link: Link): string | undefined {
   return undefined;
 }
 
+/** The whole of `![...](...)`, with the target captured. */
+const INLINE_IMAGE = /!\[([^\]\n]*)\]\(([^)\s]+)\)/g;
+
+/**
+ * A Giphy token, which unlike the others says what it points at.
+ *
+ * Reddit writes a variant name after the id on some of them
+ * (`giphy|abc123|downsized`); only the id is kept, because Giphy does not
+ * serve every variant for every gif but always serves the full one.
+ */
+const GIPHY_TOKEN = /^giphy\|([A-Za-z0-9]+)(?:\|[a-z_]+)?$/;
+
+/**
+ * Point a comment's inline images at something fetchable.
+ *
+ * Reddit writes them as `![gif](giphy|Ve7wX45)`, `![img](emote|t5_2th52|4358)`
+ * or `![img](jo8gf0ca92zd1)` — a token rather than an address. Usually the
+ * token is a key in that same comment's `media_metadata`, which is where the
+ * real URL is, so one lookup covers all three and none of them needs naming
+ * here.
+ *
+ * Usually, not always: Reddit ships plenty of comments carrying a Giphy token
+ * and no `media_metadata` at all, and with nothing to look the token up in
+ * those showed the token itself where the gif should have been. Giphy is the
+ * one kind that can be resolved without the lookup, the id in it being Giphy's
+ * own, so it falls back to Giphy's address for that id. The other two cannot:
+ * their ids mean nothing off Reddit.
+ *
+ * A target that is already an address is not a key, so it falls through
+ * untouched.
+ */
+export function resolveInlineImages(
+  body: string,
+  meta: Record<string, MediaMeta> | undefined,
+): string {
+  return body.replace(INLINE_IMAGE, (whole, alt: string, token: string) => {
+    const entry = meta?.[token];
+    if (entry?.status === 'valid') {
+      // An animated one has both; the GIF plays in an `<img>` on its own,
+      // which an MP4 does not.
+      const url = entry.s?.gif ?? entry.s?.u;
+      if (url) return `![${alt}](${url})`;
+    }
+
+    const giphy = GIPHY_TOKEN.exec(token)?.[1];
+    return giphy ? `![${alt}](https://i.giphy.com/media/${giphy}/giphy.gif)` : whole;
+  });
+}
+
 export function commentsFrom(listing: Listing<CommentData> | undefined): {
   comments: Comment[];
   more: number;
@@ -209,7 +258,7 @@ export function commentsFrom(listing: Listing<CommentData> | undefined): {
 
     comments.push({
       author: authorName(data.author),
-      ...(data.body ? { text: data.body } : {}),
+      ...(data.body ? { text: resolveInlineImages(data.body, data.media_metadata) } : {}),
       ...(isoFrom(data.created_utc) ? { postedAt: isoFrom(data.created_utc) } : {}),
       // Reddit hides the score on a new comment so an early downvote cannot
       // steer the rest. Showing a placeholder 1 would be a lie.

src/render/challenge.ts

@@ -28,7 +28,7 @@ export function renderChallenge(challenge: Challenge, box: Box | undefined): str
     <footer class="post__foot">
       <div class="original">
         <button type="button" class="copy" id="give-up">Give up and show me the link</button>
-        <a class="original__open" href="${challenge.originalUrl}" rel="noopener noreferrer nofollow" target="_blank">
+        <a class="original__open" href="${challenge.originalUrl}" rel="noopener noreferrer nofollow" target="_blank" hidden>
           Open on ${challenge.platformLabel}
         </a>
         <p class="original__url"><code>${challenge.originalUrl}</code></p>

src/render/index-page.ts

@@ -30,6 +30,14 @@ export function renderIndex(platforms: readonly PlatformSpec[]): string {
         )}
       </tbody>
     </table>
+    <section class="picker" hidden>
+      <label class="picker__label" for="open-in">Open original links in</label>
+      <select class="picker__select" id="open-in"></select>
+      <p class="picker__note">
+        The rewrite rules catch the original link too, so in Safari “Open on …” comes
+        straight back here. Another browser is a way out of that. Kept on this device.
+      </p>
+    </section>
   </article>`;
 
   return layout('antisocial', body);

src/render/layout.ts

@@ -43,14 +43,19 @@ export function badge(platform: string, label: string): Raw {
 }
 
 /** The copy control, plus the URL itself so it is always selectable even if
- *  the clipboard API is unavailable. */
+ *  the clipboard API is unavailable.
+ *
+ *  The open link ships hidden: followed in the browser the rewrite rules are
+ *  installed in, it redirects straight back here, so it is only worth showing
+ *  once a browser has been picked to hand it to. The script reveals it, and
+ *  the href in the markup is the plain address it starts from. */
 export function originalUrlBlock(originalUrl: string, platformLabel: string): Raw {
   return html`<div class="original">
     <button type="button" class="copy" data-url="${originalUrl}">
       <span class="copy__idle">Copy original link</span>
       <span class="copy__done" hidden>Copied</span>
     </button>
-    <a class="original__open" href="${originalUrl}" rel="noopener noreferrer nofollow" target="_blank">Open on ${platformLabel}</a>
+    <a class="original__open" href="${originalUrl}" rel="noopener noreferrer nofollow" target="_blank" hidden>Open on ${platformLabel}</a>
     <p class="original__url"><code>${originalUrl}</code></p>
   </div>`;
 }

src/render/markdown.ts

@@ -13,6 +13,20 @@ import { escapeHtml, raw, type Raw } from './html.ts';
 
 const REDDIT = 'https://www.reddit.com';
 
+/**
+ * How an image in a comment becomes markup.
+ *
+ * Supplied by the caller rather than decided here, because the address has to
+ * go through the media proxy and this file knows nothing about that. Without
+ * one an image degrades to a link, which is what it was before.
+ */
+export type ImageRenderer = (url: string, alt: string) => string;
+
+/** Worth showing as a picture rather than as a link to one. */
+function looksLikeImage(url: string): boolean {
+  return /\.(jpe?g|png|gif|webp|avif)(\?|$)/i.test(url);
+}
+
 /** Absolute http(s) only. `javascript:` and friends never become links. */
 function safeHref(url: string): string | undefined {
   try {
@@ -46,44 +60,69 @@ function trimUrlTail(url: string): string {
 const INLINE = new RegExp(
   [
     '`([^`\\n]+)`', // 1 code
-    '\\[([^\\]\\n]+)\\]\\(([^)\\s]+)\\)', // 2 label, 3 href
+    // Before the link rule, or the `[` of an image matches as a link and
-    '\\*\\*([^*\\n]+)\\*\\*', // 4 strong
+    // leaves its `!` behind as text.
-    '~~([^~\\n]+)~~', // 5 strike
+    '!\\[([^\\]\\n]*)\\]\\(([^)\\s]+)\\)', // 2 alt, 3 src
-    '(?<![\\w*])\\*([^*\\n]+)\\*(?![\\w*])', // 6 em with asterisks
+    '\\[([^\\]\\n]+)\\]\\(([^)\\s]+)\\)', // 4 label, 5 href
-    '(?<![\\w_])_([^_\\n]+)_(?![\\w_])', // 7 em with underscores
+    '\\*\\*([^*\\n]+)\\*\\*', // 6 strong
-    '(https?://[^\\s<>]+)', // 8 bare url
+    '~~([^~\\n]+)~~', // 7 strike
-    '(?<![\\w/])(/?[ru]/[A-Za-z0-9_][A-Za-z0-9_-]{1,30})', // 9 r/sub and u/name
+    '(?<![\\w*])\\*([^*\\n]+)\\*(?![\\w*])', // 8 em with asterisks
+    '(?<![\\w_])_([^_\\n]+)_(?![\\w_])', // 9 em with underscores
+    '(https?://[^\\s<>]+)', // 10 bare url
+    // 11 the same thing with the scheme left off, which is how people type
+    // them. Narrow on purpose: a host, a path, and an image extension. Prose
+    // is full of dotted words, and `src/render/post.ts` must not become a
+    // link to a website in Tonga.
+    '(?<![\\w@/.])((?:[a-z0-9-]+\\.)+[a-z]{2,}/[^\\s<>]*\\.(?:jpe?g|png|gif|webp|avif)(?:\\?[^\\s<>]*)?)',
+    '(?<![\\w/])(/?[ru]/[A-Za-z0-9_][A-Za-z0-9_-]{1,30})', // 12 r/sub and u/name
   ].join('|'),
   'g',
 );
 
 /** One line of body text: escaped, with the inline constructs put back. */
-function inline(text: string): string {
+function inline(text: string, image?: ImageRenderer): string {
   let out = '';
   let cursor = 0;
 
   for (const match of text.matchAll(INLINE)) {
-    const [whole, code, label, href, strong, strike, emStar, emScore, url, subOrUser] = match;
+    const [whole, code, alt, src, label, href, strong, strike, emStar, emScore, url, schemeless,
+      subOrUser] = match;
     out += escapeHtml(text.slice(cursor, match.index));
     cursor = match.index + whole.length;
 
     if (code !== undefined) {
       out += `<code>${escapeHtml(code)}</code>`;
+    } else if (src !== undefined) {
+      const safe = safeHref(src);
+      // Without a renderer to place it, an image is still a link to one.
+      out += safe ? (image ? image(safe, alt ?? '') : anchor(safe, alt || safe)) : escapeHtml(whole);
     } else if (label !== undefined && href !== undefined) {
       const safe = safeHref(href);
       out += safe ? anchor(safe, label) : escapeHtml(whole);
     } else if (strong !== undefined) {
-      out += `<strong>${inline(strong)}</strong>`;
+      out += `<strong>${inline(strong, image)}</strong>`;
     } else if (strike !== undefined) {
-      out += `<del>${inline(strike)}</del>`;
+      out += `<del>${inline(strike, image)}</del>`;
     } else if (emStar !== undefined || emScore !== undefined) {
-      out += `<em>${inline(emStar ?? emScore ?? '')}</em>`;
+      out += `<em>${inline(emStar ?? emScore ?? '', image)}</em>`;
     } else if (url !== undefined) {
       const trimmed = trimUrlTail(url);
       const safe = safeHref(trimmed);
-      out += safe
+      const tail = escapeHtml(url.slice(trimmed.length));
-        ? anchor(safe, trimmed.replace(/^https?:\/\/(www\.)?/, '')) + escapeHtml(url.slice(trimmed.length))
+      if (!safe) {
-        : escapeHtml(whole);
+        out += escapeHtml(whole);
+      } else if (image && looksLikeImage(trimmed)) {
+        // People paste the address of a picture and mean the picture. On
+        // Reddit that is most of what an image in a comment even is.
+        out += image(safe, '') + tail;
+      } else {
+        out += anchor(safe, trimmed.replace(/^https?:\/\/(www\.)?/, '')) + tail;
+      }
+    } else if (schemeless !== undefined) {
+      // Assumed https: every host that serves these redirects to it anyway,
+      // and a picture is the one thing worth guessing a scheme for.
+      const safe = safeHref(`https://${schemeless}`);
+      out += safe ? (image ? image(safe, '') : anchor(safe, schemeless)) : escapeHtml(whole);
     } else if (subOrUser !== undefined) {
       const path = subOrUser.startsWith('/') ? subOrUser : `/${subOrUser}`;
       out += anchor(`${REDDIT}${path}`, subOrUser);
@@ -101,7 +140,7 @@ const NUMBERED = /^\s{0,3}\d+[.)]\s+/;
  * from the reply to it, and a comment that loses that separation reads as
  * though the commenter said both halves.
  */
-function blocks(lines: string[]): string {
+function blocks(lines: string[], image?: ImageRenderer): string {
   let out = '';
   let at = 0;
 
@@ -139,7 +178,7 @@ function blocks(lines: string[]): string {
     if (/^\s*>/.test(line)) {
       const body = takeWhile((l) => /^\s*>/.test(l));
       // Nested, so a quote of a quote keeps its shape.
-      out += `<blockquote>${blocks(body.map((l) => l.replace(/^\s*>\s?/, '')))}</blockquote>`;
+      out += `<blockquote>${blocks(body.map((l) => l.replace(/^\s*>\s?/, '')), image)}</blockquote>`;
       continue;
     }
 
@@ -148,20 +187,21 @@ function blocks(lines: string[]): string {
       const pattern = ordered ? NUMBERED : BULLET;
       const items = takeWhile((l) => pattern.test(l));
       const tag = ordered ? 'ol' : 'ul';
-      out += `<${tag}>${items.map((l) => `<li>${inline(l.replace(pattern, ''))}</li>`).join('')}</${tag}>`;
+      out += `<${tag}>${items.map((l) => `<li>${inline(l.replace(pattern, ''), image)}</li>`).join('')}</${tag}>`;
       continue;
     }
 
     const paragraph = takeWhile(
       (l) => l.trim() !== '' && !/^\s*>/.test(l) && !BULLET.test(l) && !NUMBERED.test(l) && !/^\s*```/.test(l),
     );
-    out += `<p>${paragraph.map((l) => inline(l)).join('<br>')}</p>`;
+    out += `<p>${paragraph.map((l) => inline(l, image)).join('<br>')}</p>`;
   }
 
   return out;
 }
 
-/** Comment text, as safe markup. */
+/** Comment text, as safe markup. `image` places the pictures; without it
-export function renderMarkdown(text: string): Raw {
+ *  they stay links, which is what they were before. */
-  return raw(blocks(text.replace(/\r\n?/g, '\n').split('\n')));
+export function renderMarkdown(text: string, image?: ImageRenderer): Raw {
+  return raw(blocks(text.replace(/\r\n?/g, '\n').split('\n'), image));
 }

src/render/post.ts

@@ -14,11 +14,29 @@ function aspect(item: Media): string {
   return item.width && item.height ? `aspect-ratio: ${item.width} / ${item.height};` : '';
 }
 
+/**
+ * A stand-in poster carrying nothing but the video's shape.
+ *
+ * The ratio above is not enough on its own before the video has any data: a
+ * `<video>` in that state has a natural size of 300x150, and WebKit sizes it
+ * from that rather than from the ratio, so a portrait video sat in a squat
+ * landscape box until you pressed play and it snapped to shape. A video's
+ * size before its data arrives is its poster's, which makes an empty SVG of
+ * the right shape enough to put the box right, and as a data URI it costs no
+ * request. Only for a video the platform gave no poster for, since a real one
+ * already says the same thing.
+ */
+function placeholderPoster(item: Media): string | undefined {
+  if (!item.width || !item.height) return undefined;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${item.width}" height="${item.height}"/>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
 function renderItem(item: Media, index: number): Raw {
   const src = proxyUrlFor(item);
 
   if (item.kind === 'video') {
-    const poster = item.poster ? proxyUrlFor(item.poster) : undefined;
+    const poster = item.poster ? proxyUrlFor(item.poster) : placeholderPoster(item);
     return html`<figure class="item item--video" data-index="${index}">
       <video
         controls
@@ -145,6 +163,22 @@ function shortWhen(postedAt: string | undefined): Raw {
   })}</time>`;
 }
 
+/**
+ * A picture inside a comment.
+ *
+ * Through the proxy like everything else — a comment full of `preview.redd.it`
+ * addresses would otherwise have the viewer's browser fetch every one of them
+ * straight from Reddit, which is the thing this whole app exists to avoid.
+ *
+ * No dimensions to reserve space with: the size is in the payload but not in
+ * the Markdown, so these are capped by the stylesheet and load at whatever
+ * shape they are.
+ */
+function renderCommentImage(url: string, alt: string): string {
+  return html`<img class="c__img" src="${proxyUrlFor({ url })}" alt="${alt}" loading="lazy" decoding="async">`
+    .value;
+}
+
 /** Everything hanging off a comment, however deep. Shown only while it is
  *  collapsed, so what a fold is hiding is never a mystery. */
 function descendantsOf(comment: Comment): number {
@@ -179,7 +213,9 @@ function renderComment(comment: Comment, depth: number): Raw {
           }</span>`
         : ''}
     </summary>
-    ${comment.text ? html`<div class="c__body">${renderMarkdown(comment.text)}</div>` : ''}
+    ${comment.text
+      ? html`<div class="c__body">${renderMarkdown(comment.text, renderCommentImage)}</div>`
+      : ''}
     ${comment.replies.length || comment.moreReplies
       ? html`<div class="c__replies">
           ${comment.replies.map((reply) => renderComment(reply, depth + 1))}

test/browsers.test.ts

@@ -0,0 +1,47 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { browsersFor, detectOs, openUrlFor } from '../public/browsers.js';
+
+const URL = 'https://www.instagram.com/p/ABC/?a=1&b=2';
+
+test('each browser gets the scheme it actually answers to', () => {
+  assert.equal(openUrlFor(URL, 'chrome', 'macos'), 'googlechromes://www.instagram.com/p/ABC/?a=1&b=2');
+  assert.equal(openUrlFor(URL, 'chrome', 'ios'), 'googlechromes://www.instagram.com/p/ABC/?a=1&b=2');
+  assert.equal(openUrlFor('http://example.com/a', 'chrome', 'ios'), 'googlechrome://example.com/a');
+
+  // Edge folds the scheme into its own on iOS and prefixes it on macOS.
+  assert.equal(openUrlFor(URL, 'edge', 'macos'), `microsoft-edge:${URL}`);
+  assert.equal(openUrlFor(URL, 'edge', 'ios'), 'microsoft-edge-https://www.instagram.com/p/ABC/?a=1&b=2');
+
+  // The parameter form has to be encoded, or the original query string ends
+  // up read as the opener's own.
+  assert.equal(openUrlFor(URL, 'orion', 'macos'),
+    `orion://open-url?url=${encodeURIComponent(URL)}`);
+  assert.equal(openUrlFor(URL, 'firefox', 'ios'),
+    `firefox://open-url?url=${encodeURIComponent(URL)}`);
+});
+
+test('a browser with no scheme on this system keeps the plain link', () => {
+  // Firefox on macOS has none, and a dead scheme opens nothing at all --
+  // worse than opening in the wrong browser.
+  assert.equal(openUrlFor(URL, 'firefox', 'macos'), URL);
+  assert.equal(openUrlFor(URL, 'default', 'ios'), URL);
+  assert.equal(openUrlFor(URL, 'nonesuch', 'ios'), URL);
+});
+
+test('only ordinary web links are rewritten', () => {
+  assert.equal(openUrlFor('mailto:[email protected]', 'chrome', 'ios'), 'mailto:[email protected]');
+  assert.equal(openUrlFor('/reddit/r/a/comments/b', 'chrome', 'ios'), '/reddit/r/a/comments/b');
+});
+
+test('only the browsers reachable on that system are offered', () => {
+  assert.deepEqual(browsersFor('macos').map((b) => b.id), ['default', 'chrome', 'edge', 'orion']);
+  assert.deepEqual(browsersFor('ios').map((b) => b.id), ['default', 'chrome', 'edge', 'firefox', 'orion']);
+});
+
+test('an iPad is told from a Mac by its touch points, not its platform string', () => {
+  assert.equal(detectOs({ platform: 'iPhone', maxTouchPoints: 5 }), 'ios');
+  assert.equal(detectOs({ platform: 'MacIntel', maxTouchPoints: 5 }), 'ios');
+  assert.equal(detectOs({ platform: 'MacIntel', maxTouchPoints: 0 }), 'macos');
+  assert.equal(detectOs({}), 'macos');
+});

test/markdown.test.ts

@@ -1,9 +1,16 @@
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
+import { escapeHtml } from '../src/render/html.ts';
 import { renderMarkdown } from '../src/render/markdown.ts';
 
 const md = (text: string): string => String(renderMarkdown(text));
 
+/** Stands in for the real one, which proxies. Escapes the way that one does:
+ *  placing the image is the renderer's job, and so is making it safe. */
+const img = (url: string, alt: string): string =>
+  `<img src="${escapeHtml(url)}" alt="${escapeHtml(alt)}">`;
+const mdi = (text: string): string => String(renderMarkdown(text, img));
+
 test('markup a commenter typed is text, not markup', () => {
   const out = md('<script>alert(1)</script> & "quoted"');
   assert.ok(!out.includes('<script>'));
@@ -64,3 +71,85 @@ test('a single newline inside a paragraph is a line break, a blank line is a new
   assert.equal(md('one\ntwo'), '<p>one<br>two</p>');
   assert.equal(md('one\n\ntwo'), '<p>one</p><p>two</p>');
 });
+
+test('an image is a picture when there is something to place it with', () => {
+  assert.equal(mdi('![a cat](https://i.redd.it/x.jpg)'),
+    '<p><img src="https://i.redd.it/x.jpg" alt="a cat"></p>');
+});
+
+test('an image degrades to a link when there is not', () => {
+  const out = md('![a cat](https://i.redd.it/x.jpg)');
+  assert.ok(out.includes('<a href="https://i.redd.it/x.jpg"'));
+  assert.ok(!out.includes('<img'));
+});
+
+test("an image's `!` is not left behind as text", () => {
+  // The link rule would otherwise match from the `[` and strand the bang.
+  assert.ok(!mdi('![](https://i.redd.it/x.png)').includes('!'));
+});
+
+test('a pasted image address becomes the picture, not a link to it', () => {
+  // Which is how most images in a Reddit comment arrive.
+  const out = mdi('look\n\nhttps://preview.redd.it/abc.jpeg?width=1274&s=deadbeef');
+  assert.ok(out.includes('<img src="https://preview.redd.it/abc.jpeg?width=1274&amp;s=deadbeef"'));
+  assert.ok(!out.includes('<a href'));
+});
+
+test('a link that is not an image is still a link', () => {
+  const out = mdi('see https://example.com/article');
+  assert.ok(out.includes('<a href="https://example.com/article"'));
+  assert.ok(!out.includes('<img'));
+});
+
+test('a sentence after a pasted image keeps its punctuation out of the address', () => {
+  const out = mdi('here https://i.redd.it/x.jpg.');
+  assert.ok(out.includes('src="https://i.redd.it/x.jpg"'), out);
+  assert.ok(out.endsWith('.</p>'), out);
+});
+
+test('only http and https become pictures', () => {
+  const out = mdi('![x](javascript:alert(1))');
+  assert.ok(!out.includes('<img'));
+  assert.ok(out.includes('![x]'));
+});
+
+test("an image's alt text is escaped like anything else a stranger wrote", () => {
+  const out = mdi('![" onerror=alert(1)](https://i.redd.it/x.jpg)');
+  assert.ok(!out.includes('onerror=alert(1)>'), out);
+  assert.ok(out.includes('&quot;'));
+});
+
+test('images inside a quote are still placed', () => {
+  assert.match(mdi('> ![](https://i.redd.it/x.gif)'), /<blockquote><p><img/);
+});
+
+test('an image address typed without a scheme is still the picture', () => {
+  // Which is how people type them: no https, straight from the address bar.
+  const out = mdi('preview.redd.it/lz4drsqh0clh1.jpeg?width=1290&s=b27e');
+  assert.ok(out.includes('<img src="https://preview.redd.it/lz4drsqh0clh1.jpeg?width=1290&amp;s=b27e"'), out);
+});
+
+test('a schemeless image address mid-sentence keeps the sentence', () => {
+  const out = mdi('look at i.redd.it/x.png nice one');
+  assert.ok(out.startsWith('<p>look at <img'), out);
+  assert.ok(out.endsWith(' nice one</p>'), out);
+});
+
+test('prose full of dots and slashes is not mistaken for an address', () => {
+  // The reason this rule insists on a host, a path and an image extension.
+  for (const text of [
+    'the file is at src/render/post.ts',
+    'see node_modules/foo/bar.js',
+    'a path like ./images/cat.jpg',
+    'C:/Users/x/cat.png',
+    'email [email protected]/nope.jpg',
+    'version 1.2.3/4.png',
+  ]) {
+    assert.ok(!mdi(text).includes('<img'), `treated as an image: ${text}`);
+  }
+});
+
+test('a schemeless address that is not an image is left alone', () => {
+  // Guessing a scheme is worth it for a picture and not for prose.
+  assert.equal(mdi('example.com/article'), '<p>example.com/article</p>');
+});

test/reddit.test.ts

@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
-import { commentsFrom, mediaFromLink, toPost, treeFromDepths } from '../src/platforms/reddit.ts';
+import { commentsFrom, mediaFromLink, resolveInlineImages, toPost, treeFromDepths } from '../src/platforms/reddit.ts';
 import { reddit } from '../src/platforms/reddit.ts';
 import { originalUrlFor } from '../src/platforms/index.ts';
 import { fixture } from './helpers.ts';
@@ -56,6 +56,7 @@ test('a video with sound is the HLS playlist, because the MP4 has no audio track
         duration: 42,
       },
     },
+    preview: { images: [{ source: { url: 'https://external-preview.redd.it/still.png', width: 1920, height: 1080 } }] },
   });
 
   assert.deepEqual(media, [
@@ -67,6 +68,9 @@ test('a video with sound is the HLS playlist, because the MP4 has no audio track
       width: 1920,
       height: 1080,
       durationSec: 42,
+      // The still is the video's, not the MP4's. Dropping it here left every
+      // post with sound showing an empty box where a silent one showed a frame.
+      poster: { url: 'https://external-preview.redd.it/still.png' },
     },
   ]);
 });
@@ -168,3 +172,132 @@ test('the page fallback rebuilds nesting from the depth on each comment', () =>
 test('a comment the page gave no text for is dropped rather than shown empty', () => {
   assert.deepEqual(treeFromDepths([{ depth: 0, author: 'a', score: 1, created: '', text: '' }]), []);
 });
+
+// Real shapes, captured from comments carrying each kind.
+const GIPHY = {
+  'giphy|Ve7wX45gaOFmw8eeEM': {
+    status: 'valid',
+    e: 'AnimatedImage',
+    m: 'image/gif',
+    s: {
+      y: 200,
+      x: 304,
+      gif: 'https://external-preview.redd.it/CTp8.gif?width=304&height=200&s=b0e9',
+      mp4: 'https://external-preview.redd.it/CTp8.gif?width=304&height=200&format=mp4&s=a389',
+    },
+  },
+};
+
+const UPLOAD = {
+  jo8gf0ca92zd1: {
+    status: 'valid',
+    e: 'Image',
+    m: 'image/jpeg',
+    s: { y: 1270, x: 1274, u: 'https://preview.redd.it/jo8gf0ca92zd1.jpeg?width=1274&s=c226' },
+  },
+};
+
+test('a giphy comment points at the gif rather than at a token', () => {
+  // `![gif](giphy|ID)` is not an address, and renders as nothing at all until
+  // it is looked up in the comment's own media_metadata.
+  assert.equal(
+    resolveInlineImages('![gif](giphy|Ve7wX45gaOFmw8eeEM)', GIPHY),
+    '![gif](https://external-preview.redd.it/CTp8.gif?width=304&height=200&s=b0e9)',
+  );
+});
+
+test('the animated form takes the gif, which plays on its own', () => {
+  const out = resolveInlineImages('![gif](giphy|Ve7wX45gaOFmw8eeEM)', GIPHY);
+  assert.ok(out.includes('.gif?'), out);
+  assert.ok(!out.includes('format=mp4'), 'an mp4 would need a player to move');
+});
+
+test('an uploaded image resolves through the same lookup', () => {
+  // Giphy, emotes and uploads are all a token that is a key in the same map,
+  // so none of them needs naming.
+  assert.equal(
+    resolveInlineImages('![img](jo8gf0ca92zd1)', UPLOAD),
+    '![img](https://preview.redd.it/jo8gf0ca92zd1.jpeg?width=1274&s=c226)',
+  );
+});
+
+test('a target that is already an address is left alone', () => {
+  const already = '![a](https://i.redd.it/x.jpg)';
+  assert.equal(resolveInlineImages(already, UPLOAD), already);
+  assert.equal(resolveInlineImages(already, undefined), already);
+});
+
+test('a token with no entry, or a broken one, is not invented', () => {
+  // An upload id and an emote id mean nothing off Reddit, so with no entry to
+  // look them up in there is nothing to point them at.
+  assert.equal(resolveInlineImages('![img](missing)', GIPHY), '![img](missing)');
+  assert.equal(
+    resolveInlineImages('![img](gone)', { gone: { status: 'failed', e: 'Image' } }),
+    '![img](gone)',
+  );
+});
+
+test('a giphy token resolves even when the comment carried no metadata', () => {
+  // Reddit ships plenty of these with no `media_metadata` at all. The id in
+  // the token is Giphy's own, so it does not need Reddit to be readable.
+  assert.equal(
+    resolveInlineImages('![gif](giphy|zUW23b6FmzB5e)', undefined),
+    '![gif](https://i.giphy.com/media/zUW23b6FmzB5e/giphy.gif)',
+  );
+  assert.equal(
+    resolveInlineImages('![gif](giphy|missing)', GIPHY),
+    '![gif](https://i.giphy.com/media/missing/giphy.gif)',
+  );
+});
+
+test('the metadata still wins where there is any, being what Reddit will serve', () => {
+  assert.match(resolveInlineImages('![gif](giphy|Ve7wX45gaOFmw8eeEM)', GIPHY), /redd\.it/);
+});
+
+test('a variant name after the id is dropped, not all of them being served', () => {
+  assert.equal(
+    resolveInlineImages('![gif](giphy|zUW23b6FmzB5e|downsized)', undefined),
+    '![gif](https://i.giphy.com/media/zUW23b6FmzB5e/giphy.gif)',
+  );
+});
+
+test('only a giphy token is guessed at, and only a well-formed one', () => {
+  for (const token of ['emote|t5_2th52|4358', 'giphy|', 'giphy|../evil', 'giphy|a|b|c']) {
+    assert.equal(resolveInlineImages(`![x](${token})`, undefined), `![x](${token})`);
+  }
+});
+
+test('a real comment carrying a giphy token gets the gif', () => {
+  // Captured from the post itself: the comment has the token and no
+  // `media_metadata`, which is the shape that used to show the token instead.
+  const post = toPost(fixture('reddit/video.json'), URL_);
+  const all: string[] = [];
+  const walk = (list: typeof post.comments) => {
+    for (const comment of list ?? []) {
+      if (comment.text) all.push(comment.text);
+      walk(comment.replies);
+    }
+  };
+  walk(post.comments);
+
+  const gif = all.find((text) => text.includes('giphy'));
+  assert.ok(gif, 'the fixture should still carry a giphy comment');
+  assert.match(gif, /!\[gif\]\(https:\/\/i\.giphy\.com\/media\/QfzMP70zmNQiDf5sGP\/giphy\.gif\)/);
+});
+
+test('inline images survive the walk into the comment tree', () => {
+  const { comments } = commentsFrom({
+    data: {
+      children: [{
+        kind: 't1',
+        data: {
+          author: 'a',
+          body: 'ha ![gif](giphy|Ve7wX45gaOFmw8eeEM)',
+          media_metadata: GIPHY,
+          replies: '',
+        },
+      }],
+    },
+  });
+  assert.match(comments[0]?.text ?? '', /external-preview\.redd\.it/);
+});

test/render.test.ts

@@ -90,6 +90,27 @@ test('a video gets native controls and a source, not an iframe', () => {
   assert.ok(!page.includes('<iframe'));
 });
 
+test('a video with no poster still carries its shape, so the box is right before play', () => {
+  // WebKit sizes a video from its natural size, which without data or a
+  // poster is 300x150 — a portrait video sat in a landscape box until you
+  // pressed play. The poster is where the shape comes from until then.
+  const page = renderPost(withMedia([
+    { kind: 'video', url: 'https://video.example/p.m3u8', hls: true, direct: true, width: 720, height: 1280 },
+  ]));
+  assert.ok(page.includes('aspect-ratio: 720 / 1280;'));
+  assert.match(page, /poster="data:image\/svg\+xml,[^"]*width%3D%22720%22[^"]*height%3D%221280%22/);
+});
+
+test('a real poster is left in place, and an unmeasured video gets none', () => {
+  const withPoster = renderPost(withMedia([
+    { kind: 'video', url: 'https://cdn/v.mp4', width: 720, height: 1280, poster: { url: 'https://cdn/p.jpg' } },
+  ]));
+  assert.match(withPoster, /poster="\/m\//);
+  assert.ok(!withPoster.includes('data:image/svg'));
+
+  assert.ok(!renderPost(withMedia([{ kind: 'video', url: 'https://cdn/v.mp4' }])).includes('poster='));
+});
+
 test('the copy button carries the clean original URL, and so does the page text', () => {
   const page = renderPost(post());
   assert.ok(page.includes('data-url="https://www.instagram.com/p/ABC/"'));
@@ -105,8 +126,12 @@ test('a failure still hands the link back', () => {
     detail: 'TikTok showed a verification puzzle instead of the post.',
   });
   assert.ok(page.includes('data-url="https://www.tiktok.com/@a/video/1"'));
-  assert.ok(page.includes('Open on TikTok'));
+  assert.ok(page.includes('<code>https://www.tiktok.com/@a/video/1</code>'));
   assert.ok(page.includes('verification puzzle'));
+  // Following the original link in the browser the rewrite rules are
+  // installed in only comes back here, so it stays hidden until the script
+  // has a browser to hand it to.
+  assert.ok(/<a class="original__open"[^>]* hidden>Open on TikTok<\/a>/.test(page));
 });
 
 function redditPost(overrides: Partial<Post> = {}): Post {
@@ -237,3 +262,21 @@ test('markup in a quoted post is escaped like any other stranger\'s text', () =>
   assert.ok(!html_.includes('<script>alert(1)</script>'));
   assert.ok(!html_.includes('<img src=x'));
 });
+
+test('a picture in a comment is proxied, and its alt text cannot break out', () => {
+  const page = renderPost(redditPost({
+    comments: [{
+      author: 'u/a',
+      text: '![" onerror=alert(1) x="](https://preview.redd.it/x.jpeg?s=abc)\n\nhttps://i.redd.it/y.png',
+      replies: [],
+    }],
+  }));
+
+  assert.ok(!page.includes('https://preview.redd.it/x.jpeg'), 'upstream URLs must not reach the page');
+  assert.ok(!page.includes('https://i.redd.it/y.png'), 'a pasted address is proxied too');
+  assert.equal((page.match(/<img class="c__img" src="\/m\//g) ?? []).length, 2);
+  // The payload survives as text inside the attribute, which is the point:
+  // its quotes are neutered, so it cannot close `alt="` and become markup.
+  assert.ok(page.includes('alt="&quot; onerror=alert(1) x=&quot;"'), 'alt text must be escaped');
+  assert.ok(!/alt="" onerror/.test(page), 'the attribute must not be closable');
+});

tsconfig.json

@@ -17,6 +17,10 @@
     // Source imports carry the real `.ts` specifier so `node --experimental-
     // strip-types` can run the tree directly for dev, tests and the resolve
     // CLI. tsc rewrites them to `.js` on the way into dist.
+    // The client-side scheme table is plain JS, because the browser loads it
+    // as-is out of `public`. Its types are inferred so the test can check it.
+    "allowJs": true,
+
     "allowImportingTsExtensions": true,
     "rewriteRelativeImportExtensions": true,