Sign the automated version bump commit

main requires signed commits, so the pull request the bump job opens after a
release cannot be merged while the commit in it is unsigned. The key the server
signs merge commits with is not reachable from a runner, so the job signs with a
dedicated release-bot SSH key that the instance trusts through
TRUSTED_SSH_KEYS — no bot account, because an account key is only consulted
after the web Verify flow and that flow has no API.

Inert until the key is trusted and RELEASE_BOT_SIGNING_KEY is set, and loudly so:
the step checks the secret and ssh-keygen before it starts, runs the key through
ssh-keygen -y so a truncated or re-wrapped one is caught as itself rather than as
"gpg failed to sign the data", and the commit is re-read for a gpgsig header
before it is pushed.

Co-Authored-By: Claude Opus 5 <[email protected]>

.gitea/workflows/publish.yml

@@ -13,6 +13,7 @@ name: Publish
 #   vars.IMAGE_NAME      optional, defaults to this repository's owner/name
 #   vars.REGISTRY_USER   optional, defaults to the actor running the workflow
 #   secrets.REGISTRY_TOKEN  required to push
+#   secrets.RELEASE_BOT_SIGNING_KEY  required to sign the version bump commit
 #
 # Point REGISTRY at a host the runner reaches directly, without an intermediate
 # proxy that caps request bodies: a browser image has layers well over 100MB,
@@ -218,6 +219,56 @@ jobs:
           echo "changed=true" >> "$GITHUB_OUTPUT"
           echo "package.json ${current} -> ${NEXT}"
 
+      # main requires signed commits, and a pull request carrying an unsigned
+      # one cannot be merged. The key the server signs merge commits with lives
+      # on the server and no runner can reach it, so the bump commit is signed
+      # here with a dedicated key the instance trusts through
+      # `[repository.signing] TRUSTED_SSH_KEYS`. Setting that up is in
+      # CLAUDE.md; nothing about it is committed here.
+      - name: Configure signing as the release bot
+        if: steps.bump.outputs.changed == 'true'
+        env:
+          SIGNING_KEY: ${{ secrets.RELEASE_BOT_SIGNING_KEY }}
+        run: |
+          set -euo pipefail
+
+          if [ -z "${SIGNING_KEY}" ]; then
+            echo "RELEASE_BOT_SIGNING_KEY is not set; the bump commit would be unsigned and unmergeable." >&2
+            exit 1
+          fi
+          if ! command -v ssh-keygen >/dev/null; then
+            echo "ssh-keygen is missing from this image; git cannot make SSH signatures without it." >&2
+            exit 1
+          fi
+
+          # The secret holds an OpenSSH private key. git signs by shelling out
+          # to ssh-keygen, which wants the key on disk beside the `.pub` it is
+          # pointed at, readable only by us, and rejects it unless the trailing
+          # newline survived the round trip through the secret store.
+          keydir="${RUNNER_TEMP:-${TMPDIR:-/tmp}}/release-bot-signing"
+          install -m 700 -d "${keydir}"
+          printf '%s\n' "${SIGNING_KEY}" | tr -d '\r' > "${keydir}/key"
+          chmod 600 "${keydir}/key"
+
+          # Doubles as a format check: a truncated, re-wrapped or
+          # passphrase-protected key fails here rather than as "gpg failed to
+          # sign the data" three steps later.
+          if ! ssh-keygen -y -f "${keydir}/key" </dev/null > "${keydir}/key.pub"; then
+            echo "RELEASE_BOT_SIGNING_KEY is not a usable OpenSSH private key (passphrase-protected, truncated, or re-wrapped on paste)." >&2
+            exit 1
+          fi
+
+          # A name that is not a person, and an address no account backs: the
+          # signature verifies against the trusted key rather than against a
+          # user, so this is a label on the commit and not an identity.
+          git config user.name 'Release Bot'
+          git config user.email '[email protected]'
+          # `gpg.format` is the historical name; `ssh` is what switches git to
+          # signing with the key above rather than with a GPG key.
+          git config gpg.format ssh
+          git config user.signingkey "${keydir}/key.pub"
+          git config commit.gpgsign true
+
       # 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
@@ -236,14 +287,18 @@ jobs:
 
           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
           git commit -m "Set the working version to ${NEXT}"
+
+          # An unsigned commit would go unnoticed until someone tried to merge
+          # the pull request, so it fails here instead, where the cause is in
+          # front of you.
+          if ! grep -q "^gpgsig" <<<"$(git cat-file commit HEAD)"; then
+            echo "The bump commit came out unsigned; refusing to push it." >&2
+            exit 1
+          fi
+
           git push origin "${branch}"
 
           # node rather than jq to build the request body: jq is not in this

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,16 +153,22 @@ 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
-  `media_metadata`, keyed and unordered; their order is only in `gallery_data`. Comment
+  timeline thumbnails, and the still is in `preview.images` — which belongs to both
+  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`. 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 in every case the token is
-  a key in that same comment's own `media_metadata`, so `resolveInlineImages` is one
-  lookup rather than three special cases. 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
+  `![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.
@@ -231,6 +246,42 @@ image just published. The job is the only one that runs in a container (`node:22
 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.
 
+### Signing the bump commit
+
+main requires signed commits, and a pull request carrying an unsigned one cannot be
+merged — so the bump job signs the commit it makes. Not with the key the server signs
+merge commits with: that one lives on the server and no runner can reach it. It uses a
+dedicated release-bot SSH key instead, which also means it can be rotated on its own if
+the secret ever leaks.
+
+There is deliberately no release-bot account. A key attached to an account is only
+consulted for signature checking once it has been through the web *Verify* flow, and
+that flow has no API, so a bot account would need an interactive login to be worth
+anything. Listing the key under `[repository.signing] TRUSTED_SSH_KEYS` instead makes
+the signature verify with no account lookup at all, which is all the protected branch
+asks for. `[email protected]` is therefore a label and not an identity, and
+the signature is attributed to the instance's `SIGNING_NAME`/`SIGNING_EMAIL` rather
+than to it. The other side of trusting a key instance-wide: a commit signed with it
+verifies in *every* repository on that instance, because the trust is in the key and not
+in a user whose permissions you could scope.
+
+Set up once per instance, and again only on rotation:
+
+1. Generate a passphrase-less key — it has to be usable unattended:
+   `ssh-keygen -t ed25519 -C release-bot -f release-bot -N ''`.
+2. Add the public half to `TRUSTED_SSH_KEYS` in the server config and restart.
+3. Store the private half as the `RELEASE_BOT_SIGNING_KEY` Actions secret — the whole
+   file verbatim, `-----BEGIN OPENSSH PRIVATE KEY-----` and footer included, not the
+   `.pub` and not a GPG export. An organisation secret covers every repository at once.
+   Delete both local files afterwards.
+
+Until both are in place the bump job fails, loudly and on purpose: it checks the secret
+is set and that `ssh-keygen` exists before it starts, feeds the key through
+`ssh-keygen -y` so a truncated or re-wrapped one is caught as itself rather than as
+"gpg failed to sign the data", and re-reads the commit for a `gpgsig` header before
+pushing. Nothing else in the pipeline signs anything — release tags are made by hand,
+and the merge commit is signed by the server.
+
 Two things any deployment has to get right, both learned the hard way:
 
 - **Chromium needs more than the default 64Mi `/dev/shm`** or it crashes. Mount a

README.md

@@ -171,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.2",
+  "version": "1.2.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "antisocial",
-      "version": "1.2.2",
+      "version": "1.2.5",
       "license": "UNLICENSED",
       "dependencies": {
         "@fastify/static": "10.1.3",

package.json

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

public/app.js

@@ -155,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.
@@ -189,6 +202,7 @@ setupCopy();
 applyBrowser(storedBrowser());
 setupBrowserPicker();
 for (const media of document.querySelectorAll('.media')) setupMedia(media);
+setupAudioSession();
 setupComments();
 
 // --- Verification puzzles -------------------------------------------------

src/platforms/reddit.ts

@@ -104,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) {
@@ -114,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 [{
-    kind: 'video',
-    url,
-    ...(poster ? { poster: { url: poster } } : {}),
-    ...common,
-  }];
+  return [{ kind: 'video', url, ...common }];
 }
 
 /** One entry of a gallery post. Reddit keeps the pictures somewhere other
@@ -192,14 +191,30 @@ function bodyOf(link: Link): string | 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. In every case
- * 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.
+ * 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.
@@ -208,15 +223,17 @@ export function resolveInlineImages(
   body: string,
   meta: Record<string, MediaMeta> | undefined,
 ): string {
-  if (!meta) return body;
-
   return body.replace(INLINE_IMAGE, (whole, alt: string, token: string) => {
-    const entry = meta[token];
-    if (!entry || entry.status !== 'valid') return whole;
-    // 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;
-    return url ? `![${alt}](${url})` : whole;
+    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;
   });
 }
 

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

test/reddit.test.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' },
     },
   ]);
 });
@@ -224,13 +228,63 @@ test('a target that is already an address is left alone', () => {
 });
 
 test('a token with no entry, or a broken one, is not invented', () => {
-  assert.equal(resolveInlineImages('![gif](giphy|missing)', GIPHY), '![gif](giphy|missing)');
+  // 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: {

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/"'));