HLS for long videos: vmedia serves a long clip as a 360p/720p stream made as it's watched (/vmedia/hls.m3u8), the feed and pager play long clips and posted .m3u8 streams through the browser's own HLS, and a long video posted from the app goes up as an HLS stream made on the device (master playlist on Blossom).

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

1 files changed, 89 insertions, 15 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index ada978a..693c12f 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -88,7 +88,7 @@ export function messagesFeature(ctx) {
   const gifs = createGifPicker({ h, t, ui, render });
   // NIP-92: an attachment described, so clients needn't sniff the URL
   const mediaImeta = (m) => ['imeta', 'url ' + m.url, ...(m.m ? ['m ' + m.m] : []), ...(m.dim ? ['dim ' + m.dim] : []),
-    ...(m.size ? ['size ' + m.size] : []), ...(m.alt ? ['alt ' + m.alt] : [])];
+    ...(m.size ? ['size ' + m.size] : []), ...(m.duration ? ['duration ' + m.duration] : []), ...(m.alt ? ['alt ' + m.alt] : [])];
 
   // ---- persisted state ----------------------------------------------------
 
@@ -6471,21 +6471,23 @@ export function messagesFeature(ctx) {
   // publish it); otherwise the metadata alone is fetched — a few KB for a
   // moov-first file — with a short cap, since it gates the row. Remembered
   // on disk so a clip seen once is never probed again.
-  const VIDEO_RE = /\.(mp4|webm|mov|m4v)(\?[^\s]*)?$/i;
+  const VIDEO_RE = /\.(mp4|webm|mov|m4v|m3u8)(\?[^\s]*)?$/i; // (an .m3u8 is an HLS stream: a long clip, posted the way jb55 does)
   // files known to be clips without saying so in their name (divine.video's
   // have no extension): an imeta tag's video/* type, or a video event's file
   const videoUrls = new Set();
   const isVideoUrl = (url) => VIDEO_RE.test(url) || videoUrls.has(url);
   const imetaFields = (tag) => { const f = {}; for (const p of tag.slice(1)) { const i = typeof p === 'string' ? p.indexOf(' ') : -1; if (i > 0) f[p.slice(0, i)] = p.slice(i + 1); } return f; };
-  // A video event's file: of the versions its imeta tags offer, the one
-  // nearest 1080 on its short side (a phone's screen; not the 4K original),
-  // never an HLS playlist; else its url tag.
+  // A video event's file: its HLS stream where the browser plays one (the
+  // player picks the rendition); else of the versions its imeta tags
+  // offer, the one nearest 1080 on its short side (a phone's screen; not the
+  // 4K original); else its url tag.
   function videoEventFile(ev) {
-    let best = null;
+    let best = null, stream = null;
     for (const tag of ev.tags || []) {
       if (tag[0] !== 'imeta') continue;
       const f = imetaFields(tag);
-      if (!/^https?:\/\//.test(f.url || '') || /mpegurl/i.test(f.m || '') || /\.m3u8(\?|$)/i.test(f.url)) continue;
+      if (/^https?:\/\//.test(f.url || '') && (/mpegurl/i.test(f.m || '') || /\.m3u8(\?|$)/i.test(f.url))) { stream = stream || { url: f.url, image: f.image }; continue; }
+      if (!/^https?:\/\//.test(f.url || '')) continue;
       if (f.m && !/^video\//.test(f.m)) continue;
       const dm = /^(\d+)(?:\.0+)?x(\d+)/.exec(f.dim || '');
       const edge = dm ? Math.min(+dm[1], +dm[2]) : 0;
@@ -6493,6 +6495,7 @@ export function messagesFeature(ctx) {
       if (!best || score > best.score) best = { url: f.url, image: f.image, score };
     }
     if (!best) { const u = (ev.tags.find((x) => x[0] === 'url') || [])[1]; if (/^https?:\/\//.test(u || '')) best = { url: u }; }
+    if (stream && canHls()) best = { ...stream, image: stream.image || (best && best.image) };
     if (best) videoUrls.add(best.url);
     return best;
   }
@@ -6610,7 +6613,15 @@ export function messagesFeature(ctx) {
     // an iPhone's HEVC (hvc1/hev1 in the sample description)
     let hevc = false;
     for (let j = 0; j + 4 <= b.length && !hevc; j++) if (b[j] === 0x68 && (type(j) === 'hvc1' || type(j) === 'hev1')) hevc = true;
-    return { faststart, ...(moovEnd ? { moovEnd } : {}), ...(w ? { w, h } : {}), ...(hevc ? { hevc } : {}) };
+    // its length, from the movie header (a long clip plays as HLS: playSrc)
+    let dur = 0;
+    for (let j = 4; j + 32 <= b.length && !dur; j++) {
+      if (b[j] !== 0x6d || type(j) !== 'mvhd') continue; // 'm'
+      const v1 = b[j + 4] === 1, scale = u32(j + (v1 ? 24 : 16));
+      const units = v1 ? u32(j + 28) * 2 ** 32 + u32(j + 32) : u32(j + 20);
+      if (scale && units && units !== 0xffffffff) dur = units / scale;
+    }
+    return { faststart, ...(moovEnd ? { moovEnd } : {}), ...(w ? { w, h } : {}), ...(hevc ? { hevc } : {}), ...(dur ? { dur } : {}) };
   }
   const videoProbes = new Map();
   let videoProbing = 0;
@@ -6638,6 +6649,7 @@ export function messagesFeature(ctx) {
     }
   }
   async function runVideoProbe(url) {
+    if (isHls(url)) return probeStream(url);
     const ctrl = new AbortController();
     const timer = setTimeout(() => ctrl.abort(), 10_000);
     try {
@@ -6664,7 +6676,7 @@ export function messagesFeature(ctx) {
       let o = 0;
       for (const p of parts) { if (o >= buf.length) break; buf.set(p.subarray(0, buf.length - o), o); o += p.length; }
       const head = readMp4Head(buf);
-      const d = { probed: true, ranges, faststart: head.faststart === true, failedAt: undefined, ...(head.moovEnd ? { moovEnd: head.moovEnd } : {}), ...(head.hevc ? { hevc: true } : {}) };
+      const d = { probed: true, ranges, faststart: head.faststart === true, failedAt: undefined, ...(head.moovEnd ? { moovEnd: head.moovEnd } : {}), ...(head.hevc ? { hevc: true } : {}), ...(head.dur && !(videoInfo.get(url) || {}).dur ? { dur: head.dur } : {}) };
       if (total > 0) d.size = total;
       else {
         // a server that hides Content-Range from scripts (Primal's) still
@@ -6683,6 +6695,25 @@ export function messagesFeature(ctx) {
     } finally { clearTimeout(timer); }
     return videoInfo.get(url);
   }
+  // A stream is measured by a player: its playlist says nothing of the
+  // picture's size. Where HLS doesn't play, it can't be measured either.
+  async function probeStream(url) {
+    if (!canHls()) { noteVideoInfo(url, { failedAt: Date.now() }); return videoInfo.get(url); }
+    const v = document.createElement('video');
+    v.muted = true; v.preload = 'metadata';
+    const ok = await new Promise((resolve) => {
+      const timer = setTimeout(() => resolve(false), 15_000);
+      v.onloadedmetadata = () => { clearTimeout(timer); resolve(!!v.videoWidth); };
+      v.onerror = () => { clearTimeout(timer); resolve(false); };
+      v.src = url;
+    });
+    if (ok) {
+      noteVideoInfo(url, { probed: true, stream: true, failedAt: undefined, ...(Number.isFinite(v.duration) ? { dur: v.duration } : {}) });
+      rememberVideo(url, v.videoWidth, v.videoHeight);
+    } else noteVideoInfo(url, { failedAt: Date.now() });
+    v.removeAttribute('src'); v.load();
+    return videoInfo.get(url);
+  }
   // How much a clip may cost before it waits for a tap: less on a slow or
   // metered connection.
   const largeVideosOk = () => { try { return localStorage.getItem(VIDEO_LARGE_KEY) === '1'; } catch { return false; } };
@@ -6700,6 +6731,7 @@ export function messagesFeature(ctx) {
   function videoHeavy(url) {
     if (tappedClips.has(url) || largeVideosOk()) return false;
     const d = videoInfo.get(url) || {};
+    if (d.stream) return false; // a stream takes the rendition the connection carries
     if (d.w && d.h && Math.min(d.w, d.h) > 1080) return true;
     if (!d.size) return true; // nothing known: don't spend data blind
     if (d.size > videoBudget()) return true;
@@ -7838,10 +7870,27 @@ export function messagesFeature(ctx) {
   const canHevc = () => hevcPlays ??= (() => {
     try { return !!document.createElement('video').canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"'); } catch { return true; }
   })();
-  // what a player for this clip loads: the copy, once the original is known
-  // not to show here
-  const playSrc = (url) => vmediaOk(url) && !h264Failed.has(url)
-    && (noPicture.has(url) || ((videoInfo.get(url) || {}).hevc && !canHevc())) ? h264Of(url) : url;
+  // A long clip (or a big one whose length isn't known) plays as HLS from
+  // vmedia: a 360p and a 720p rendition, the player taking the one the
+  // connection carries, in 4-second pieces made as they're watched — not a
+  // whole file streamed at its own bitrate (Adam, 2026-10-18; jb55: "you
+  // should use hls (m3u8 ext) for long videos"). Where the browser plays HLS
+  // itself (Chrome since 2025, Safari, Android); elsewhere (Firefox) the
+  // original as before.
+  const HLS_MIN_S = 90, HLS_MIN_BYTES = 60e6;
+  const hlsOf = (url) => VMEDIA + 'hls.m3u8?u=' + encodeURIComponent(url);
+  const isHls = (src) => (src || '').startsWith(VMEDIA + 'hls') || /\.m3u8(\?|#|$)/i.test(src || '');
+  const hlsFailed = new Set();
+  let hlsPlays;
+  const canHls = () => hlsPlays ??= (() => {
+    try { return !!document.createElement('video').canPlayType('application/vnd.apple.mpegurl'); } catch { return false; }
+  })();
+  const longClip = (url) => { const d = videoInfo.get(url) || {}; return d.dur ? d.dur >= HLS_MIN_S : (d.size || 0) >= HLS_MIN_BYTES; };
+  // what a player for this clip loads: the stream for a long one; the copy,
+  // once the original is known not to show here
+  const playSrc = (url) => !vmediaOk(url) || isHls(url) ? url
+    : longClip(url) && canHls() && !hlsFailed.has(url) ? hlsOf(url)
+    : !h264Failed.has(url) && (noPicture.has(url) || ((videoInfo.get(url) || {}).hevc && !canHevc())) ? h264Of(url) : url;
   // A player whose clip turns out to have no picture it can show (its
   // metadata says zero width) switches to the copy; if the copy fails too,
   // the original's sound plays under a line saying why, with the file.
@@ -7857,6 +7906,14 @@ export function messagesFeature(ctx) {
     });
     v.addEventListener('error', () => {
       if (!onCopy()) return;
+      // the stream failed: the copy or the original, as it would have been
+      if (isHls(v.getAttribute('src'))) {
+        hlsFailed.add(url);
+        const want = !v.paused;
+        v.setAttribute('src', playSrc(url));
+        if (want) v.play().catch(() => {});
+        return;
+      }
       h264Failed.add(url);
       const want = !v.paused;
       v.setAttribute('src', url);
@@ -11394,11 +11451,13 @@ export function messagesFeature(ctx) {
     if (!file || !upload) return;
     ui.postUploading = true; render();
     try {
-      const url = await upload(file);
+      // (a URL, or what a stream's upload says of it: its type, size, length)
+      const got = await upload(file);
+      const url = typeof got === 'string' ? got : got.url;
       // A post canceled while its upload was in flight must stay canceled.
       // `false` lets that composer reject the late result without affecting
       // the reply composer, which shares this helper.
-      if (place(url) !== false) (ui.postMedia ||= []).push({ url, m: file.type || '' });
+      if (place(url) !== false) (ui.postMedia ||= []).push(typeof got === 'string' ? { url, m: file.type || '' } : { m: file.type || '', ...got });
     } catch (e) { toast(e.message || String(e)); }
     ui.postUploading = false; render();
   }
@@ -12980,6 +13039,11 @@ export function messagesFeature(ctx) {
   function headStart(url, share = 1) {
     if (!url || url.startsWith('blob:') || frugalData()) return Promise.resolve();
     if (headStarted.has(url)) return headStarted.get(url);
+    if (isHls(url)) { // a stream's head start: its playlists and its first piece, the smaller rendition's
+      const task = hlsHead(url).catch(() => {}).finally(() => { headDone.add(url); pagerReveal(); });
+      headStarted.set(url, task);
+      return task;
+    }
     const want = Math.max(HEAD_MIN, Math.round(headStartBytes(url) * share));
     const t0 = performance.now();
     const task = fetch(url, { headers: { Range: 'bytes=0-' + (want - 1) } }).then(async (r) => {
@@ -12999,6 +13063,16 @@ export function messagesFeature(ctx) {
     if (headStarted.size > 300) { const k = headStarted.keys().next().value; headStarted.delete(k); headDone.delete(k); }
     return task;
   }
+  async function hlsHead(url) {
+    const get = async (u) => { const r = await fetch(u, { signal: AbortSignal.timeout(20_000) }); if (!r.ok) throw new Error('HTTP ' + r.status); return r; };
+    const uri = (text, base) => { const l = text.split('\n').map((x) => x.trim()).find((x) => x && !x.startsWith('#')); return l && new URL(l, base).href; };
+    const master = await get(url), text = await master.text();
+    // a master playlist's first rendition (vmedia lists the smaller first), or a media playlist itself
+    let list = text, at = master.url || url;
+    if (/#EXT-X-STREAM-INF/.test(text)) { at = uri(text, at); list = await (await get(at)).text(); }
+    const seg = uri(list, at);
+    if (seg) await (await get(seg)).arrayBuffer();
+  }
   function playSlide(slide) {
     const v = slide.querySelector('video.mp-media');
     if (!v) return;