docs: document inline media embeds feature
- README: new bullet for inline media embeds (video/audio/post players + facade). - LOTUS_FEATURES: 'Inline Media Embeds' section (kinds table, facade, provider notes, sandbox, setting, CSP, the fixed YouTube-thumbnail web bug). - LOTUS_TODO: awaiting-verification row (16 providers) + deferred providers (Bandcamp / on.soundcloud / Vimeo event) under the feature backlog + the iframe onError gap. - LOTUS_TESTING: section Q (facade, TikTok, post self-resize + close, new Bluesky/Loom/Kick + toggle + cap). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -662,6 +662,43 @@ Run the axe DevTools extension (or Lighthouse → Accessibility) on a room view,
|
||||
|
||||
---
|
||||
|
||||
## Q. Inline Media Embeds — video / audio / post players (needs the web deploy live)
|
||||
|
||||
The whole feature is behind **Settings → General → "Inline Media Players"** (default **on**). Everything loads from the homeserver's cached thumbnail first; the third-party player only mounts on **Play**. Test on the **web** build first, then re-check the video ones on **desktop (Tauri)** since the CSP differs. On any failure, grab the **browser console** (F12) — a blocked embed shows as a CSP `frame-src` violation naming the host.
|
||||
|
||||
### Q1. Facade + one of each kind plays in place
|
||||
|
||||
Paste each of these into a room and confirm a media tile (not a plain link) with a thumbnail + play button, and that clicking Play mounts the player **inline**:
|
||||
|
||||
- **16:9 video:** a YouTube `watch` link, a Vimeo link, a Dailymotion link, a Streamable link, a Twitch VOD/clip, a Loom `share` link.
|
||||
- **9:16 portrait:** a YouTube **Shorts** link (renders tall, not letterboxed).
|
||||
- **Audio player:** a Spotify track, a SoundCloud track, an Apple Music album, a Tidal album/track.
|
||||
- **Post embed:** an X/Twitter post, an Instagram post, a Reddit post.
|
||||
|
||||
**Expected:** ✅ tile shows the thumbnail; **no** request to the third party until you press Play (check DevTools → Network); the player then plays inline. ❌ tell me any that stay a plain link, show a blank frame, or hit the network before you click.
|
||||
|
||||
### Q2. TikTok (the tricky one) + portrait fill
|
||||
|
||||
1. Paste a **full** TikTok URL and a **short** copy-link (`vm.tiktok.com/…` or `tiktok.com/t/…`).
|
||||
2. Press Play on each.
|
||||
|
||||
**Expected:** both resolve to a clean **9:16** player that **fills the box** (no big empty band on the right). The short link shows a brief spinner while it resolves via oEmbed, then plays. ❌ tell me if a short link shows only the TikTok logo/♫ and never a play button, or if the player has dead space beside it.
|
||||
|
||||
### Q3. Post self-resize + Close / Fullscreen controls
|
||||
|
||||
1. Play a **Reddit**, **Instagram**, and **X/Twitter** post embed.
|
||||
2. Watch the card height as the embed loads.
|
||||
|
||||
**Expected:** the card **grows to fit** the post (no clipped/scrollbarless content, no giant empty box). A **Close** button (✕) collapses the player back to the thumbnail; video players also show a **⛶ Fullscreen** control that works. Keyboard: Tab to the play button → it shows a visible **focus ring**.
|
||||
|
||||
### Q4. New providers (unverified) + the toggle + the cap
|
||||
|
||||
- **Bluesky / Loom / Kick** — these are freshly added and unverified live. Paste a `bsky.app/profile/…/post/…`, a `loom.com/share/…`, and a live `kick.com/{channel}` link. ✅ good if each plays/renders inline; ❌ if any is a broken frame (for **Bluesky** especially, note whether a **handle** URL resolves or only a DID one does — grab the console).
|
||||
- **Toggle off:** Settings → General → **Inline Media Players** off → every media link reverts to a plain link tile (no player).
|
||||
- **Cap:** paste a message with **8+** media links → at most **6** preview cards render (the rest are suppressed), and the page stays responsive.
|
||||
|
||||
---
|
||||
|
||||
## Priority if you're short on time
|
||||
|
||||
1. **O1 + O2** (threads + per-thread notifications) — the largest new surface; the main-timeline change is user-visible.
|
||||
|
||||
Reference in New Issue
Block a user