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:
@@ -20,11 +20,17 @@ import {
|
||||
LEARN_CODE_TRACK,
|
||||
LEARN_FRAME_SRC_HOSTS,
|
||||
formatLearnDuration,
|
||||
learnEmbed,
|
||||
learnEmbedUrl,
|
||||
learnVisibilityPermitted,
|
||||
resolveLearnEmbed,
|
||||
} from '@pig/core';
|
||||
import type { Database } from '@pig/db';
|
||||
import { learnResources, platformSettings } from '@pig/db';
|
||||
import { createMediaRoutes, LEARN_MEDIA_DIR_ENV, parseByteRange } from '../src/lib/media';
|
||||
import { mkdtempSync, writeFileSync } from 'node:fs';
|
||||
import { tmpdir } from 'node:os';
|
||||
import { join } from 'node:path';
|
||||
import { createApp } from '../src/app';
|
||||
import { loadConfig } from '../src/lib/config';
|
||||
import {
|
||||
@@ -95,10 +101,89 @@ describe('embed allowlist', () => {
|
||||
});
|
||||
|
||||
it('names every enabled host, so the CSP handoff cannot drift', () => {
|
||||
// The self-hosted provider is enabled and contributes NOTHING here. A
|
||||
// native <video> on this origin is covered by `default-src 'self'`, and
|
||||
// widening frame-src for it would hand out framing rights nothing needs.
|
||||
assert.deepEqual(LEARN_FRAME_SRC_HOSTS, ['https://video.karti.ai']);
|
||||
});
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------- self-hosted
|
||||
|
||||
describe('self-hosted media', () => {
|
||||
it('resolves a /media/learn path to a native video, not an iframe', () => {
|
||||
const resolved = resolveLearnEmbed('/media/learn/pig-tour.7f3a91c2.mp4');
|
||||
assert.equal(resolved.ok, true);
|
||||
assert.equal(resolved.ok && resolved.provider, 'pig');
|
||||
assert.equal(resolved.ok && resolved.externalId, 'pig-tour.7f3a91c2.mp4');
|
||||
assert.deepEqual(resolved.ok && resolved.embed, {
|
||||
kind: 'video',
|
||||
src: '/media/learn/pig-tour.7f3a91c2.mp4',
|
||||
});
|
||||
// The flat field stays in step for callers written before the union.
|
||||
assert.equal(resolved.ok && resolved.embedUrl, '/media/learn/pig-tour.7f3a91c2.mp4');
|
||||
});
|
||||
|
||||
it('still resolves a remote provider to an iframe', () => {
|
||||
const resolved = resolveLearnEmbed('https://video.karti.ai/s/0n6n9p83efnxbs2');
|
||||
assert.deepEqual(resolved.ok && resolved.embed, {
|
||||
kind: 'iframe',
|
||||
src: 'https://video.karti.ai/embed/0n6n9p83efnxbs2',
|
||||
});
|
||||
});
|
||||
|
||||
it('refuses every path that would read a file we did not mean to serve', () => {
|
||||
// Traversal in each encoding that has ever worked somewhere, a scheme, a
|
||||
// host, a protocol-relative URL that a naive `startsWith('/')` would treat
|
||||
// as a path, an extension we do not serve, and a bare dotfile.
|
||||
const hostile = [
|
||||
'/media/learn/../../etc/passwd',
|
||||
'/media/learn/..%2f..%2fetc%2fpasswd',
|
||||
'/media/learn/../secrets.mp4',
|
||||
'/media/learn/..',
|
||||
'/media/learn/sub/dir/video.mp4',
|
||||
'/media/learn/',
|
||||
'/etc/passwd',
|
||||
'/media/other/video.mp4',
|
||||
'//evil.example/media/learn/video.mp4',
|
||||
'file:///media/learn/video.mp4',
|
||||
'https://primeintellectgrowth.com/media/learn/pig-tour.7f3a91c2.mp4',
|
||||
'/media/learn/.env',
|
||||
'/media/learn/video.mp4.sh',
|
||||
'/media/learn/video mp4.mp4',
|
||||
'/media/learn/video.mp4?v=2',
|
||||
'/media/learn/video.mp4#t=10',
|
||||
'/media/learn/-leading-dash.mp4',
|
||||
`/media/learn/${'a'.repeat(130)}.mp4`,
|
||||
];
|
||||
for (const candidate of hostile) {
|
||||
assert.equal(resolveLearnEmbed(candidate).ok, false, `should reject: ${candidate}`);
|
||||
}
|
||||
});
|
||||
|
||||
it('re-validates a stored filename rather than trusting the database', () => {
|
||||
// Same argument as the Cap case: persistence is not validation. A row
|
||||
// written by a future path that skipped the resolver must not become a
|
||||
// file read.
|
||||
assert.equal(learnEmbed('pig', '../../etc/passwd'), null);
|
||||
assert.equal(learnEmbed('pig', 'pig-tour.mp4.sh'), null);
|
||||
assert.deepEqual(learnEmbed('pig', 'pig-tour.7f3a91c2.mp4'), {
|
||||
kind: 'video',
|
||||
src: '/media/learn/pig-tour.7f3a91c2.mp4',
|
||||
});
|
||||
});
|
||||
|
||||
it('accepts a self-hosted path at the create schema, on the platform track', () => {
|
||||
const parsed = learnResourceCreateSchema.safeParse({
|
||||
track: LEARN_CODE_TRACK,
|
||||
title: 'A tour of PIG in five minutes',
|
||||
url: '/media/learn/pig-tour.7f3a91c2.mp4',
|
||||
visibility: 'code',
|
||||
});
|
||||
assert.equal(parsed.success, true);
|
||||
});
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------- the two rules
|
||||
|
||||
describe('code visibility', () => {
|
||||
@@ -269,6 +354,232 @@ describe('attempt limiter', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ------------------------------------------------- the public round trip
|
||||
|
||||
/**
|
||||
* A self-hosted row must survive the whole read path as a `video`.
|
||||
*
|
||||
* Asserted through `app.request` on the real public route rather than on the
|
||||
* serialiser, because the failure this guards against is composition: the
|
||||
* route enumerates its columns, drops rows it cannot rebuild an embed for, and
|
||||
* is the one read a code-holder performs. A row that resolves fine in
|
||||
* isolation and is silently dropped by `renderable()` would leave the Learn
|
||||
* page empty with nothing in the log.
|
||||
*/
|
||||
describe('a self-hosted row through /api/learn/public', () => {
|
||||
const config = loadConfig({
|
||||
NODE_ENV: 'production',
|
||||
DATABASE_URL: 'postgres://unused:unused@127.0.0.1:1/unused',
|
||||
PIG_PUBLIC_URL: 'https://pig-learn-test.invalid',
|
||||
SUPABASE_URL: 'https://identity-learn-test.invalid',
|
||||
SUPABASE_ANON_KEY: 'learn-test-anon-key',
|
||||
SUPABASE_SERVICE_KEY: '',
|
||||
PIG_ADMIN_EMAILS: '',
|
||||
PIGGY_ENABLED: 'false',
|
||||
});
|
||||
|
||||
const rows = [
|
||||
{
|
||||
id: '00000000-0000-4000-8000-000000000001',
|
||||
track: 'platform' as const,
|
||||
title: 'A tour of PIG in five minutes',
|
||||
summary: 'What the product is for.',
|
||||
provider: 'pig' as const,
|
||||
externalId: 'pig-tour.7f3a91c2.mp4',
|
||||
visibility: 'code' as const,
|
||||
durationSeconds: 300,
|
||||
sortOrder: 1,
|
||||
publishedAt: new Date('2026-08-01T00:00:00.000Z'),
|
||||
},
|
||||
{
|
||||
id: '00000000-0000-4000-8000-000000000002',
|
||||
track: 'platform' as const,
|
||||
title: 'The Cap-hosted one, still an iframe',
|
||||
summary: null,
|
||||
provider: 'cap' as const,
|
||||
externalId: '0n6n9p83efnxbs2',
|
||||
visibility: 'code' as const,
|
||||
durationSeconds: 520,
|
||||
sortOrder: 2,
|
||||
publishedAt: new Date('2026-08-02T00:00:00.000Z'),
|
||||
},
|
||||
];
|
||||
|
||||
/** Answers the settings lookup and the resource read, and nothing else. */
|
||||
const db = {
|
||||
select: () => ({
|
||||
from: (table: unknown) => ({
|
||||
where: () => ({
|
||||
limit: async () =>
|
||||
table === platformSettings ? [{ code: ACCESS_CODE }] : [],
|
||||
orderBy: async () => (table === learnResources ? rows : []),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
} as unknown as Database;
|
||||
|
||||
const authProvider = {
|
||||
name: 'learn-test-stub',
|
||||
async verifyAccessToken(): Promise<{ subject: string; email: string }> {
|
||||
throw new Error('Not a valid identity token.');
|
||||
},
|
||||
};
|
||||
|
||||
it('returns kind:"video" for the self-hosted row and kind:"iframe" for the remote one', async () => {
|
||||
const app = createApp(config, db, authProvider);
|
||||
const token = mintLearnToken(ACCESS_CODE, Date.now() + LEARN_TOKEN_TTL_MS);
|
||||
const response = await app.request('https://pig-learn-test.invalid/api/learn/public', {
|
||||
headers: { authorization: `Bearer ${token}` },
|
||||
});
|
||||
assert.equal(response.status, 200);
|
||||
|
||||
const body = (await response.json()) as {
|
||||
resources: { title: string; embed: { kind: string; src: string }; embedUrl: string }[];
|
||||
};
|
||||
assert.equal(body.resources.length, 2, 'neither row may be dropped');
|
||||
|
||||
const [hosted, remote] = body.resources;
|
||||
assert.deepEqual(hosted?.embed, {
|
||||
kind: 'video',
|
||||
src: '/media/learn/pig-tour.7f3a91c2.mp4',
|
||||
});
|
||||
// Same-origin and relative, so the page needs no CSP host for it at all.
|
||||
assert.equal(hosted?.embedUrl, '/media/learn/pig-tour.7f3a91c2.mp4');
|
||||
assert.equal(remote?.embed.kind, 'iframe');
|
||||
assert.equal(remote?.embed.src, 'https://video.karti.ai/embed/0n6n9p83efnxbs2');
|
||||
});
|
||||
|
||||
it('serves that src from the ASSEMBLED app, not just from the route factory', async () => {
|
||||
/*
|
||||
* The assertion that would have caught the media route shipping unmounted.
|
||||
*
|
||||
* `describe('the media route')` below exercises createMediaRoutes() as a
|
||||
* standalone Hono app, which verifies the handler and proves nothing about
|
||||
* whether createApp wires it in. It did not: every layer landed — the
|
||||
* migration, the seed, both feeds, the bind mount, the docs — except the
|
||||
* one that serves the bytes, and the whole suite stayed green. Requests to
|
||||
* /media/learn/* fell through to server.ts's SPA fallback and returned
|
||||
* HTTP 200 text/html, so the player showed a black box with working
|
||||
* controls and no error.
|
||||
*
|
||||
* Assert against the composed application, and specifically on the
|
||||
* content-type: the failure mode is a 200, not a 404.
|
||||
*/
|
||||
// The route reads its root from the environment at request time, so point
|
||||
// it at a directory that really holds the file the feed advertises.
|
||||
const root = mkdtempSync(join(tmpdir(), 'pig-media-mounted-'));
|
||||
writeFileSync(join(root, 'pig-tour.7f3a91c2.mp4'), Buffer.alloc(2048, 7));
|
||||
const previous = process.env[LEARN_MEDIA_DIR_ENV];
|
||||
process.env[LEARN_MEDIA_DIR_ENV] = root;
|
||||
|
||||
let response: Response;
|
||||
try {
|
||||
const app = createApp(config, db, authProvider);
|
||||
response = await app.request(
|
||||
'https://pig-learn-test.invalid/media/learn/pig-tour.7f3a91c2.mp4',
|
||||
);
|
||||
} finally {
|
||||
if (previous === undefined) delete process.env[LEARN_MEDIA_DIR_ENV];
|
||||
else process.env[LEARN_MEDIA_DIR_ENV] = previous;
|
||||
}
|
||||
|
||||
assert.notEqual(response.status, 404, 'the media route is not mounted in createApp');
|
||||
assert.equal(
|
||||
response.headers.get('content-type'),
|
||||
'video/mp4',
|
||||
'the SPA fallback answered instead of the media route',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// --------------------------------------------------------- serving the file
|
||||
|
||||
describe('the media route', () => {
|
||||
const root = mkdtempSync(join(tmpdir(), 'pig-media-'));
|
||||
// 1 KiB of distinguishable bytes: an assertion on a range is only meaningful
|
||||
// if the wrong offset produces different content.
|
||||
const body = Buffer.from(Array.from({ length: 1024 }, (_, i) => i % 251));
|
||||
writeFileSync(join(root, 'pig-tour.7f3a91c2.mp4'), body);
|
||||
const app = createMediaRoutes({ root });
|
||||
const url = (path: string) => `https://pig.invalid${path}`;
|
||||
|
||||
it('serves the whole file with a seekable header set', async () => {
|
||||
const response = await app.request(url('/media/learn/pig-tour.7f3a91c2.mp4'));
|
||||
assert.equal(response.status, 200);
|
||||
assert.equal(response.headers.get('content-type'), 'video/mp4');
|
||||
// Without this a browser will not attempt a range request at all, and the
|
||||
// scrubber becomes decorative.
|
||||
assert.equal(response.headers.get('accept-ranges'), 'bytes');
|
||||
assert.equal(response.headers.get('content-length'), '1024');
|
||||
assert.deepEqual(Buffer.from(await response.arrayBuffer()), body);
|
||||
});
|
||||
|
||||
it('answers a range with 206 and exactly those bytes', async () => {
|
||||
const response = await app.request(url('/media/learn/pig-tour.7f3a91c2.mp4'), {
|
||||
headers: { range: 'bytes=100-199' },
|
||||
});
|
||||
assert.equal(response.status, 206);
|
||||
assert.equal(response.headers.get('content-range'), 'bytes 100-199/1024');
|
||||
assert.equal(response.headers.get('content-length'), '100');
|
||||
assert.deepEqual(Buffer.from(await response.arrayBuffer()), body.subarray(100, 200));
|
||||
});
|
||||
|
||||
it('answers an open-ended and a suffix range', async () => {
|
||||
const open = await app.request(url('/media/learn/pig-tour.7f3a91c2.mp4'), {
|
||||
headers: { range: 'bytes=1000-' },
|
||||
});
|
||||
assert.equal(open.headers.get('content-range'), 'bytes 1000-1023/1024');
|
||||
|
||||
// How a player finds an MP4 moov atom at the end of the file. Getting this
|
||||
// branch wrong is why some videos never start rather than never seek.
|
||||
const suffix = await app.request(url('/media/learn/pig-tour.7f3a91c2.mp4'), {
|
||||
headers: { range: 'bytes=-24' },
|
||||
});
|
||||
assert.equal(suffix.headers.get('content-range'), 'bytes 1000-1023/1024');
|
||||
assert.deepEqual(Buffer.from(await suffix.arrayBuffer()), body.subarray(1000));
|
||||
});
|
||||
|
||||
it('refuses a range past the end rather than restarting the file', () => {
|
||||
// 200-with-the-whole-file here splices byte 0 into the middle of the
|
||||
// player's buffer, which corrupts playback instead of failing it.
|
||||
assert.equal(parseByteRange('bytes=2000-', 1024), 'unsatisfiable');
|
||||
assert.equal(parseByteRange('bytes=500-400', 1024), 'unsatisfiable');
|
||||
// A multi-range request is ignored, which the spec permits.
|
||||
assert.equal(parseByteRange('bytes=0-10,20-30', 1024), null);
|
||||
assert.equal(parseByteRange(undefined, 1024), null);
|
||||
});
|
||||
|
||||
it('answers 416 with the real size so a client can recover', async () => {
|
||||
const response = await app.request(url('/media/learn/pig-tour.7f3a91c2.mp4'), {
|
||||
headers: { range: 'bytes=5000-' },
|
||||
});
|
||||
assert.equal(response.status, 416);
|
||||
assert.equal(response.headers.get('content-range'), 'bytes */1024');
|
||||
});
|
||||
|
||||
it('answers HEAD without a body, so a player can probe cheaply', async () => {
|
||||
const response = await app.request(url('/media/learn/pig-tour.7f3a91c2.mp4'), {
|
||||
method: 'HEAD',
|
||||
});
|
||||
assert.equal(response.status, 200);
|
||||
assert.equal(response.headers.get('content-length'), '1024');
|
||||
assert.equal((await response.text()).length, 0);
|
||||
});
|
||||
|
||||
it('reads nothing outside the media directory', async () => {
|
||||
// The route sees these as filenames; each must 404 rather than resolve.
|
||||
for (const path of [
|
||||
'/media/learn/..%2f..%2fpackage.json',
|
||||
'/media/learn/%2e%2e%2fpackage.json',
|
||||
'/media/learn/pig-tour.7f3a91c2.mp4.sh',
|
||||
'/media/learn/absent.7f3a91c2.mp4',
|
||||
]) {
|
||||
const response = await app.request(url(path));
|
||||
assert.equal(response.status, 404, `should not serve: ${path}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('duration formatting', () => {
|
||||
it('crosses the hour without renaming the minutes', () => {
|
||||
assert.equal(formatLearnDuration(272), '4:32');
|
||||
|
||||
Reference in New Issue
Block a user