feat(embeds): add Bluesky, Loom, Kick
From the coverage-review agent's ranked recommendations (clean iframes, ids in
the URL, one CSP host each):
- Bluesky: bsky.app/profile/{authority}/post/{rkey} → embed.bsky.app (rich, self-
resizing like the other post embeds).
- Loom: loom.com/share|embed/{id} → www.loom.com/embed/{id} (16:9).
- Kick: kick.com/{channel} → player.kick.com/{channel} (live channels only; VODs/
clips have no clean embed and fall back to a link).
Parsers unit-tested. CSP frame-src gains embed.bsky.app / www.loom.com /
player.kick.com (desktop + live web, both updated). Needs live verification once
deployed since the embeds themselves can't be exercised from here.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -457,6 +457,21 @@ export const BadgeInstagram = style({
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
export const BadgeBluesky = style({
|
||||
backgroundColor: '#0085ff',
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
export const BadgeLoom = style({
|
||||
backgroundColor: '#625df5',
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
export const BadgeKick = style({
|
||||
backgroundColor: '#53fc18',
|
||||
color: '#000000',
|
||||
});
|
||||
|
||||
export const BadgeTidal = style({
|
||||
backgroundColor: '#000000',
|
||||
color: '#ffffff',
|
||||
|
||||
@@ -558,6 +558,7 @@ function TikTokCard({
|
||||
const TWITTER_ORIGINS = ['https://platform.twitter.com', 'https://platform.x.com'];
|
||||
const INSTAGRAM_ORIGINS = ['https://www.instagram.com'];
|
||||
const REDDIT_ORIGINS = ['https://embed.reddit.com'];
|
||||
const BLUESKY_ORIGINS = ['https://embed.bsky.app'];
|
||||
const NO_RESIZE_ORIGINS: string[] = [];
|
||||
const EMBED_MAX_HEIGHT = 1400;
|
||||
|
||||
@@ -1038,6 +1039,9 @@ const EMBED_BADGE: Record<string, { label: string; class: string }> = {
|
||||
tidal: { label: 'TIDAL', class: previewCss.BadgeTidal },
|
||||
instagram: { label: 'Instagram', class: previewCss.BadgeInstagram },
|
||||
reddit: { label: 'Reddit', class: previewCss.BadgeReddit },
|
||||
bluesky: { label: 'Bluesky', class: previewCss.BadgeBluesky },
|
||||
loom: { label: 'Loom', class: previewCss.BadgeLoom },
|
||||
kick: { label: 'Kick', class: previewCss.BadgeKick },
|
||||
};
|
||||
|
||||
// The homeserver preview for some sites (notably Reddit) comes back as a bot-check
|
||||
@@ -1078,7 +1082,9 @@ function MediaEmbedCard({
|
||||
? NO_RESIZE_ORIGINS
|
||||
: embed.provider === 'instagram'
|
||||
? INSTAGRAM_ORIGINS
|
||||
: REDDIT_ORIGINS;
|
||||
: embed.provider === 'bluesky'
|
||||
? BLUESKY_ORIGINS
|
||||
: REDDIT_ORIGINS;
|
||||
// Only subscribe to resize messages while the iframe is actually mounted.
|
||||
const { ref: resizeRef, height: resizeHeight } = useIframeAutoHeight(
|
||||
playing ? resizeOrigins : NO_RESIZE_ORIGINS,
|
||||
|
||||
Reference in New Issue
Block a user