feat(embeds): add TikTok, Twitch, Dailymotion, Streamable, Spotify, SoundCloud players
Generalize the inline-embed system: parseMediaEmbed() resolves any supported URL to an embed spec (provider + kind + embed URL), and a single MediaEmbedCard renders the media-forward click-to-play facade for all of them — landscape 16:9 (YouTube, Vimeo, Dailymotion, Streamable, Twitch), portrait 9:16 (Shorts, TikTok), and short fixed-height audio players (Spotify, SoundCloud). Same privacy facade as before: nothing loads from the third party until the user presses play, gated by the 'Inline Media Players' setting. Twitch embeds pass the current page hostname as the required parent param. Non-embeddable fallbacks (e.g. vm.tiktok.com short links, non-media tweets) keep their existing rich OG cards; X/Twitter intentionally keeps its rich tweet card. All parsers/builders are pure + unit-tested (videoEmbed.test.ts, 10 cases). Desktop Tauri CSP frame-src updated for the new hosts (separate commit). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -271,6 +271,17 @@ export const EmbedPlaceholder = style([
|
||||
},
|
||||
]);
|
||||
|
||||
// Audio embeds (Spotify / SoundCloud) — full-width, short fixed height (set inline).
|
||||
export const EmbedMediaAudio = style([
|
||||
DefaultReset,
|
||||
{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: color.Surface.Container,
|
||||
},
|
||||
]);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Shared square artwork thumbnail (Spotify, IMDb poster, Discord icon)
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -389,6 +400,21 @@ export const BadgeTikTok = style({
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
export const BadgeSoundCloud = style({
|
||||
backgroundColor: '#ff5500',
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
export const BadgeDailymotion = style({
|
||||
backgroundColor: '#0066dc',
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
export const BadgeStreamable = style({
|
||||
backgroundColor: '#0f90fa',
|
||||
color: '#ffffff',
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Twitch LIVE badge
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user