Redesign Learn, and give it five real videos in Karti's voice
THE PAGE. The anonymous route rendered outside Shell, so it sat flush against
the viewport edge and read as a form rather than a product — which is the first
thing anyone at Prime Intellect sees when the link is shared. It now brings its
own chrome and leads with a hero; the platform track is a numbered course, the
concept tracks are a poster grid, and admin add/archive moved behind one Manage
toggle so they stop competing with the content. Verified in Chrome at 1440 and
393, light and dark: horizontal overflow is 0 in all three access states.
THE VIDEOS. Five ~30s walkthroughs, narrated in Karti's cloned voice through
Chatterbox and cut against real screen capture of the seeded demo book. The
audio is rendered FIRST and its measured duration drives the capture, because a
shot list that runs short leaves the narrator talking over a frozen frame and
one that runs long gets cut mid-sentence. Levels are loudness-normalised so
clips do not jump between videos.
Cap cannot take a programmatic upload — video.karti.ai needs an interactive
login — so PIG serves these itself. A native <video> on this origin needs no
iframe and therefore no CSP frame-src at all; Karti's own Cap recordings still
render through the existing iframe path, which is why the resolver is now a
discriminated union.
THREE THINGS THE VERIFIERS CAUGHT, all of which shipped green:
- createMediaRoutes was never mounted. Every layer landed — migration, seed,
both feeds, the bind mount, the docs — except the one that serves the bytes,
so /media/learn/* fell through to the SPA fallback and answered HTTP 200
text/html. The player showed a black box with working controls and no error.
The tests certified the route factory in isolation, which proves the handler
and says nothing about whether it is wired in. There is now an assertion
against the ASSEMBLED app, and it fails loudly on content-type — the failure
mode is a 200, not a 404.
- A symlink in the media directory escaped the root. resolve() is lexical and
stat() follows links, so the containment check this file's own header
promised did not hold. realpath before the check closes it.
- Vite proxied only /api, so self-hosted playback broke for anyone running the
app the documented way — in the same invisible 200-text/html manner.
Also: a duplicate media slug used to throw from the middle of seedDemo() and
take out every later section; it now reports and skips that one entry. And the
player has an onError state, because content-addressed filenames mean a
re-render deliberately leaves the old row pointing at a file that is gone.
The three DEMO platform rows are dropped — five real recordings supersede them,
and placeholders sitting under real ones made the page read as half-finished to
the audience it is meant to convince. The supply and demand concept rows stay:
there are no real recordings for those tracks yet, and an empty track hides the
shape of the page.
Tests 275, typecheck clean.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -111,6 +111,105 @@ satisfies every check that only asks whether something responded.
|
||||
`scripts/deploy.sh` now asserts the body is non-empty and contains the
|
||||
application's mount point for this reason.
|
||||
|
||||
## Learn videos
|
||||
|
||||
PIG hosts its own Learn videos. There is no video service to configure, no
|
||||
embed host and — because a native `<video>` is not an iframe — nothing to add
|
||||
to the proxy's `frame-src`. The files are covered by `default-src 'self'`.
|
||||
|
||||
### Where they live
|
||||
|
||||
| | |
|
||||
|---|---|
|
||||
| Host directory | `PIG_MEDIA_HOST_DIR`, normally `/opt/pig/media` |
|
||||
| Inside the container | `/app/media`, bind-mounted **read-only** |
|
||||
| Read by the app from | `PIG_MEDIA_DIR` (compose sets it to `/app/media`) |
|
||||
| Served at | `/media/learn/<filename>` |
|
||||
| From source, no container | `PIG_MEDIA_DIR=./media`, relative to the repository root |
|
||||
|
||||
```bash
|
||||
sudo mkdir -p /opt/pig/media
|
||||
sudo chown "$USER" /opt/pig/media
|
||||
# then in /opt/pig/.env
|
||||
# PIG_MEDIA_HOST_DIR=/opt/pig/media
|
||||
```
|
||||
|
||||
**Create the directory before `compose up`.** Docker creates a missing bind
|
||||
source itself, as an empty directory owned by root — every video then 404s and
|
||||
you cannot copy a file in without `sudo`.
|
||||
|
||||
The mount is read-only. PIG never writes a video: a file arrives by being
|
||||
copied onto the host, so the write path is not reachable over HTTP at all.
|
||||
Deploys do not touch the directory, and neither does a rollback — the videos
|
||||
outlive any particular release.
|
||||
|
||||
### Naming: content-addressed, and why
|
||||
|
||||
A filename is `<slug>.<hash>.<ext>`, for example
|
||||
`pig-tour.7f3a91c2.mp4`. Only `[A-Za-z0-9._-]` is accepted, with `mp4`, `webm`
|
||||
or `m4v` as the extension; anything else is refused both as a stored source and
|
||||
as a file read.
|
||||
|
||||
```bash
|
||||
slug=pig-tour
|
||||
hash=$(sha256sum "$slug.mp4" | cut -c1-8)
|
||||
mv "$slug.mp4" "$slug.$hash.mp4"
|
||||
```
|
||||
|
||||
The hash is load-bearing, not decoration:
|
||||
|
||||
**The media FILES are served unauthenticated. The LISTING is not.** Who learns
|
||||
that a video exists — its title, its track, whether it is code-visible at all —
|
||||
is decided by `/api/learn` and `/api/learn/public`. The bytes are handed to
|
||||
anyone who can name the file. This is how every video platform works: a gated
|
||||
manifest in front of segments on an open CDN. It is also what a `<video>`
|
||||
element requires, since a media element re-requests byte ranges on every seek
|
||||
and carries no bearer token while doing it.
|
||||
|
||||
*What it costs.* A URL, once shared, is a permanent public link to that video.
|
||||
Someone given the share code can copy the `src` out of the page and post it,
|
||||
and **rotating the Learn access code does not close it**. The remedies are to
|
||||
rename the file (a new hash, therefore a new URL) or delete it. We accept that:
|
||||
these are product demos meant to be shareable with the code. The material that
|
||||
must never leak is the supply and demand concept tracks, and those are gated by
|
||||
the listing — which is where the boundary genuinely is.
|
||||
|
||||
*What the hash buys.* There is no directory index and a wrong guess is a flat
|
||||
404, so an unguessable name makes the exposure "whoever has the link" rather
|
||||
than "the internet". That is precisely an unlisted video.
|
||||
|
||||
### Publishing one
|
||||
|
||||
```bash
|
||||
cp pig-tour.7f3a91c2.mp4 /opt/pig/media/
|
||||
pnpm db:demo -- --hosted # inserts rows for the files that are present
|
||||
```
|
||||
|
||||
The seed discovers files by slug, so the hash never has to be written into the
|
||||
manifest. It is idempotent — the unique key on `(track, provider, external_id)`
|
||||
does that work — and it inserts a row **only when the file is on disk**, because
|
||||
a Learn card whose video 404s reads as a broken product rather than a missing
|
||||
one. Rows for files that have since disappeared are reported, never deleted:
|
||||
deleting them would empty the curriculum the first time someone ran the seed
|
||||
with the media directory unmounted.
|
||||
|
||||
`pnpm db:demo -- --clear` removes the `DEMO — ` rows and leaves these alone.
|
||||
`pnpm db:demo -- --clear-hosted` removes these and leaves the files on disk.
|
||||
|
||||
### Checking it
|
||||
|
||||
```bash
|
||||
curl -sI https://primeintellectgrowth.com/media/learn/pig-tour.7f3a91c2.mp4
|
||||
# accept-ranges: bytes <- without this, the scrubber does nothing
|
||||
curl -s -r 0-99 -o /dev/null -D - \
|
||||
https://primeintellectgrowth.com/media/learn/pig-tour.7f3a91c2.mp4
|
||||
# HTTP/2 206 ... content-range: bytes 0-99/<size>
|
||||
```
|
||||
|
||||
A 200 where a 206 is expected means something in front of PIG is buffering the
|
||||
response and dropping the range — the video will play from the start and refuse
|
||||
to seek.
|
||||
|
||||
## Upgrading
|
||||
|
||||
### By hand
|
||||
|
||||
Reference in New Issue
Block a user