diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 76 |
1 files changed, 74 insertions, 2 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 856a4bd..a378f1d 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -4696,6 +4696,61 @@ export function messagesFeature(ctx) { mediaWarming.set(url, task); return task; }; + // A video's shape, so the feed paints its box at the clip's own aspect + // instead of a 16:9 frame with black bands either side of a portrait clip. + // The post's imeta `dim` says it for free (Amethyst, Primal and others + // 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_PROBE_MS = 3000, VIDEO_DIMS_KEEP = 400, VIDEO_DIMS_KEY = 'coinos-video-dims'; + const videoDims = new Map(); // url -> { width, height } + const videoUnknown = new Set(); // probed this session and no answer: paint 16:9, don't ask again + try { for (const [u, d] of JSON.parse(localStorage.getItem(VIDEO_DIMS_KEY) || '[]')) videoDims.set(u, d); } catch {} + let videoDimsFlush = null; + const rememberVideo = (url, width, height) => { + if (!(width > 0 && height > 0)) return; + const d = { width, height }; + mediaReady.set(url, d); + if (videoDims.get(url)?.width === width && videoDims.get(url)?.height === height) return; + videoDims.delete(url); videoDims.set(url, d); + if (videoDimsFlush) return; + videoDimsFlush = setTimeout(() => { + videoDimsFlush = null; + try { localStorage.setItem(VIDEO_DIMS_KEY, JSON.stringify([...videoDims].slice(-VIDEO_DIMS_KEEP))); } catch {} + }, 1000); + }; + const imetaDim = (ev, url) => { + for (const tag of ev?.tags || []) { + if (tag[0] !== 'imeta' || !tag.includes('url ' + url)) continue; + const m = /^dim (\d+)x(\d+)$/.exec(tag.find((x) => /^dim /.test(x)) || ''); + if (m) return { width: +m[1], height: +m[2] }; + } + return null; + }; + const warmVideo = (url, dim) => { + if (!url || mediaReady.has(url)) return Promise.resolve(); + const known = videoDims.get(url) || dim; + if (known) { rememberVideo(url, known.width, known.height); return Promise.resolve(); } + if (typeof document === 'undefined' || videoUnknown.has(url)) return Promise.resolve(); + if (mediaWarming.has(url)) return mediaWarming.get(url); + const task = new Promise((resolve) => { + const v = document.createElement('video'); + const done = () => { + clearTimeout(timer); + v.onloadedmetadata = v.onerror = null; + if (v.videoWidth && v.videoHeight) rememberVideo(url, v.videoWidth, v.videoHeight); + else videoUnknown.add(url); + v.removeAttribute('src'); try { v.load(); } catch {} // let go of the connection + resolve(); + }; + const timer = setTimeout(done, VIDEO_PROBE_MS); + v.onloadedmetadata = done; v.onerror = done; + v.muted = true; v.preload = 'metadata'; v.src = url; + }).finally(() => mediaWarming.delete(url)); + mediaWarming.set(url, task); + return task; + }; // ---- link previews -------------------------------------------------- // A plain link in a post becomes the card its page describes (Open Graph: // title, a line, a picture), fetched through the registrar because a @@ -4778,6 +4833,15 @@ export function messagesFeature(ctx) { } return urls; } + function noteVideoUrls(content) { + const urls = []; + for (const part of String(content || '').split(NOTE_SPLIT)) { + const md = part && MD_PARTS.exec(part); + const url = md ? md[3] : (/^https?:\/\//i.test(part || '') ? part : null); + if (url && !(md && md[1]) && VIDEO_RE.test(url)) urls.push(url); + } + return urls; + } const avatarUrl = (p, pk) => p?.picture ? localPunk(p.picture) || (p.thumbFor === p.picture && p.thumb) || p.picture : punkSmallUrl(pk); @@ -4792,6 +4856,7 @@ export function messagesFeature(ctx) { } async function noteReady(ev, deadline = Date.now() + READY_MS, depth = 0) { const tasks = [warmAvatar(ev.pubkey, deadline), ...noteMediaUrls(ev.content).map(warmMedia), + ...noteVideoUrls(ev.content).map((u) => warmVideo(u, imetaDim(ev, u))), ...notePreviewUrls(ev.content).map(warmPreview), ...[...emojiTagMap(ev.tags).values()].map(warmMedia)]; for (const part of String(ev.content || '').split(NOTE_SPLIT)) { @@ -5323,11 +5388,18 @@ export function messagesFeature(ctx) { // window unmounting the row and mounting it again, a quoted note loading. // Pinning the box alone left every one of those a muted restart. const unmutedClips = new Set(); + // A feed box takes the clip's own shape when it's known, as wide as the + // column allows but never taller than three quarters of the screen. + const videoBoxStyle = (d) => d && d.width && d.height + ? `width:min(100%, calc(75vh * ${d.width} / ${d.height}));aspect-ratio:${d.width}/${d.height};max-height:none;object-fit:contain` + : 'width:100%;aspect-ratio:16/9;object-fit:contain'; function videoNode(url, { stable = false } = {}) { const loud = unmutedClips.has(url); const v = h('video', { src: url, class: 'note-video', controls: true, preload: 'metadata', playsinline: true, muted: loud ? undefined : true, // play() in view fetches; a window of videos must not all stream - style: stable ? 'width:100%;aspect-ratio:16/9;object-fit:contain' : undefined, + style: stable ? videoBoxStyle(feedMedia(url)) : undefined, + // learned now, used by the next paint of any row with this clip + onLoadedmetadata: (e) => rememberVideo(url, e.target.videoWidth, e.target.videoHeight), onError: (e) => { if (!stable) { const b = e.target.parentElement; if (b) b.style.display = 'none'; } } }); v.muted = !loud; // the property, not just the attribute: a script-made element autoplays only muted const box = h('div', { class: 'note-video-box' }, v); @@ -5572,7 +5644,7 @@ export function messagesFeature(ctx) { return x >= 0 && x <= w && y >= 0 && y <= hh; } function urlNode(url, { label = null, isImage = false } = {}) { - if (/\.(mp4|webm|mov|m4v)(\?[^\s]*)?$/i.test(url)) { + if (VIDEO_RE.test(url)) { return videoNode(url, { stable: !!feedPaint }); } if (isImage || /\.(png|jpe?g|gif|webp|avif)(\?[^\s]*)?$/i.test(url)) { |