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:
Claude Opus 4.8
@@ -5,65 +5,115 @@ import {
|
||||
getYoutubeShortsId,
|
||||
isYouTubeShorts,
|
||||
getVimeoVideoId,
|
||||
parseVideoEmbed,
|
||||
getTikTokVideoId,
|
||||
getDailymotionId,
|
||||
getStreamableId,
|
||||
getTwitchTarget,
|
||||
getSpotifyEmbedTarget,
|
||||
isSoundCloudTrack,
|
||||
buildVideoEmbedUrl,
|
||||
spotifyEmbedHeight,
|
||||
parseMediaEmbed,
|
||||
} from './videoEmbed';
|
||||
|
||||
test('getYouTubeVideoId: watch / youtu.be / embed / shorts', () => {
|
||||
const HOST = 'chat.lotusguild.org';
|
||||
|
||||
test('YouTube: watch / youtu.be / embed / shorts', () => {
|
||||
assert.equal(getYouTubeVideoId('https://www.youtube.com/watch?v=dQw4w9WgXcQ'), 'dQw4w9WgXcQ');
|
||||
assert.equal(getYouTubeVideoId('https://youtu.be/dQw4w9WgXcQ'), 'dQw4w9WgXcQ');
|
||||
assert.equal(getYouTubeVideoId('https://youtu.be/dQw4w9WgXcQ?t=42'), 'dQw4w9WgXcQ');
|
||||
assert.equal(getYouTubeVideoId('https://www.youtube.com/embed/dQw4w9WgXcQ'), 'dQw4w9WgXcQ');
|
||||
assert.equal(getYouTubeVideoId('https://youtube.com/shorts/abc123DEF_-'), 'abc123DEF_-');
|
||||
});
|
||||
|
||||
test('getYouTubeVideoId: non-YouTube / malformed → null', () => {
|
||||
assert.equal(getYouTubeVideoId('https://vimeo.com/123'), null);
|
||||
assert.equal(getYouTubeVideoId('not a url'), null);
|
||||
assert.equal(getYouTubeVideoId('https://www.youtube.com/'), null);
|
||||
});
|
||||
|
||||
test('Shorts detection', () => {
|
||||
assert.equal(isYouTubeShorts('https://www.youtube.com/shorts/abc123'), true);
|
||||
assert.equal(isYouTubeShorts('https://www.youtube.com/watch?v=abc123'), false);
|
||||
assert.equal(getYoutubeShortsId('https://youtube.com/shorts/abc123'), 'abc123');
|
||||
});
|
||||
|
||||
test('getVimeoVideoId', () => {
|
||||
test('Vimeo', () => {
|
||||
assert.equal(getVimeoVideoId('https://vimeo.com/123456789'), '123456789');
|
||||
assert.equal(getVimeoVideoId('https://vimeo.com/123456789/abcdef'), '123456789');
|
||||
assert.equal(getVimeoVideoId('https://vimeo.com/channels/staffpicks'), null);
|
||||
assert.equal(getVimeoVideoId('https://youtube.com/watch?v=x'), null);
|
||||
});
|
||||
|
||||
test('parseVideoEmbed: routes provider + portrait for shorts', () => {
|
||||
assert.deepEqual(parseVideoEmbed('https://youtube.com/shorts/abc'), {
|
||||
provider: 'youtube',
|
||||
id: 'abc',
|
||||
portrait: true,
|
||||
test('TikTok: canonical /video/<id> only', () => {
|
||||
assert.equal(getTikTokVideoId('https://www.tiktok.com/@user/video/7234567890123456789'), '7234567890123456789');
|
||||
assert.equal(getTikTokVideoId('https://vm.tiktok.com/ZMabc/'), null); // short link redirects
|
||||
assert.equal(getTikTokVideoId('https://www.tiktok.com/@user'), null);
|
||||
});
|
||||
|
||||
test('Dailymotion + Streamable', () => {
|
||||
assert.equal(getDailymotionId('https://www.dailymotion.com/video/x8abcde'), 'x8abcde');
|
||||
assert.equal(getDailymotionId('https://dai.ly/x8abcde'), 'x8abcde');
|
||||
assert.equal(getStreamableId('https://streamable.com/abc12'), 'abc12');
|
||||
assert.equal(getStreamableId('https://streamable.com/e/abc12'), null); // already an embed path
|
||||
});
|
||||
|
||||
test('Twitch: channel / video / clip', () => {
|
||||
assert.deepEqual(getTwitchTarget('https://www.twitch.tv/somestreamer'), {
|
||||
type: 'channel',
|
||||
value: 'somestreamer',
|
||||
});
|
||||
assert.deepEqual(parseVideoEmbed('https://www.youtube.com/watch?v=xyz'), {
|
||||
provider: 'youtube',
|
||||
assert.deepEqual(getTwitchTarget('https://www.twitch.tv/videos/123456789'), {
|
||||
type: 'video',
|
||||
value: '123456789',
|
||||
});
|
||||
assert.deepEqual(getTwitchTarget('https://clips.twitch.tv/FunnyClipSlug'), {
|
||||
type: 'clip',
|
||||
value: 'FunnyClipSlug',
|
||||
});
|
||||
assert.deepEqual(getTwitchTarget('https://www.twitch.tv/streamer/clip/CoolSlug'), {
|
||||
type: 'clip',
|
||||
value: 'CoolSlug',
|
||||
});
|
||||
});
|
||||
|
||||
test('Spotify target + height', () => {
|
||||
assert.deepEqual(getSpotifyEmbedTarget('https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT'), {
|
||||
type: 'track',
|
||||
id: '4cOdK2wGLETKBW3PvgPWqT',
|
||||
});
|
||||
assert.deepEqual(getSpotifyEmbedTarget('https://open.spotify.com/intl-de/album/xyz'), {
|
||||
type: 'album',
|
||||
id: 'xyz',
|
||||
portrait: false,
|
||||
});
|
||||
assert.deepEqual(parseVideoEmbed('https://vimeo.com/42'), {
|
||||
provider: 'vimeo',
|
||||
id: '42',
|
||||
portrait: false,
|
||||
});
|
||||
assert.equal(parseVideoEmbed('https://example.com/video'), null);
|
||||
assert.equal(getSpotifyEmbedTarget('https://open.spotify.com/'), null);
|
||||
assert.equal(spotifyEmbedHeight('track'), 152);
|
||||
assert.equal(spotifyEmbedHeight('album'), 352);
|
||||
});
|
||||
|
||||
test('buildVideoEmbedUrl: cookie-less YouTube + Vimeo, id encoded', () => {
|
||||
test('SoundCloud track detection', () => {
|
||||
assert.equal(isSoundCloudTrack('https://soundcloud.com/artist/some-track'), true);
|
||||
assert.equal(isSoundCloudTrack('https://soundcloud.com/artist'), false); // bare profile
|
||||
});
|
||||
|
||||
test('buildVideoEmbedUrl: cookie-less YouTube + Vimeo', () => {
|
||||
assert.equal(
|
||||
buildVideoEmbedUrl('youtube', 'dQw4w9WgXcQ'),
|
||||
'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0',
|
||||
);
|
||||
assert.equal(
|
||||
buildVideoEmbedUrl('vimeo', '123456789'),
|
||||
'https://player.vimeo.com/video/123456789?autoplay=1',
|
||||
);
|
||||
// id is URL-encoded (defense-in-depth; ids are normally already safe)
|
||||
assert.ok(buildVideoEmbedUrl('youtube', 'a/b').includes('a%2Fb'));
|
||||
assert.equal(buildVideoEmbedUrl('vimeo', '42'), 'https://player.vimeo.com/video/42?autoplay=1');
|
||||
});
|
||||
|
||||
test('parseMediaEmbed: routes provider + kind, builds embed URLs', () => {
|
||||
assert.deepEqual(parseMediaEmbed('https://youtube.com/shorts/abc', HOST), {
|
||||
provider: 'youtube',
|
||||
kind: 'portrait',
|
||||
embedUrl: 'https://www.youtube-nocookie.com/embed/abc?autoplay=1&rel=0',
|
||||
});
|
||||
assert.equal(parseMediaEmbed('https://www.youtube.com/watch?v=xyz', HOST)?.kind, 'landscape');
|
||||
assert.equal(parseMediaEmbed('https://www.tiktok.com/@u/video/123', HOST)?.provider, 'tiktok');
|
||||
assert.equal(parseMediaEmbed('https://www.tiktok.com/@u/video/123', HOST)?.kind, 'portrait');
|
||||
assert.equal(parseMediaEmbed('https://streamable.com/abc', HOST)?.provider, 'streamable');
|
||||
const spotify = parseMediaEmbed('https://open.spotify.com/track/abc', HOST);
|
||||
assert.equal(spotify?.kind, 'audio');
|
||||
assert.equal(spotify?.height, 152);
|
||||
assert.equal(parseMediaEmbed('https://soundcloud.com/a/b', HOST)?.provider, 'soundcloud');
|
||||
assert.equal(parseMediaEmbed('https://example.com/x', HOST), null);
|
||||
});
|
||||
|
||||
test('parseMediaEmbed: Twitch embed carries the parent host', () => {
|
||||
const chan = parseMediaEmbed('https://twitch.tv/streamer', HOST);
|
||||
assert.equal(chan?.provider, 'twitch');
|
||||
assert.ok(chan?.embedUrl.includes('channel=streamer'));
|
||||
assert.ok(chan?.embedUrl.includes(`parent=${HOST}`));
|
||||
const clip = parseMediaEmbed('https://clips.twitch.tv/Slug', HOST);
|
||||
assert.ok(clip?.embedUrl.startsWith('https://clips.twitch.tv/embed?clip=Slug'));
|
||||
});
|
||||
|
||||
+202
-34
@@ -1,35 +1,35 @@
|
||||
// Pure helpers for detecting embeddable video URLs (YouTube, Shorts, Vimeo) and
|
||||
// building their privacy-friendly embed URLs. No React/DOM/CSS imports so this
|
||||
// stays unit-testable in isolation.
|
||||
// Pure helpers for detecting embeddable media URLs and building their embed
|
||||
// URLs. No React/DOM/CSS imports so this stays unit-testable in isolation.
|
||||
//
|
||||
// "kind" drives how the card lays the embed out:
|
||||
// landscape → 16:9 video portrait → 9:16 video
|
||||
// audio → short fixed-height player (Spotify/SoundCloud)
|
||||
|
||||
export type VideoEmbedProvider = 'youtube' | 'vimeo';
|
||||
export type EmbedKind = 'landscape' | 'portrait' | 'audio';
|
||||
|
||||
export type VideoEmbed = {
|
||||
provider: VideoEmbedProvider;
|
||||
id: string;
|
||||
portrait: boolean; // YouTube Shorts render 9:16
|
||||
export type MediaEmbed = {
|
||||
provider: string;
|
||||
kind: EmbedKind;
|
||||
embedUrl: string;
|
||||
/** Fixed pixel height for audio/rich embeds (aspect-ratio is used for video). */
|
||||
height?: number;
|
||||
};
|
||||
|
||||
// --- YouTube --------------------------------------------------------------
|
||||
|
||||
export function getYouTubeVideoId(url: string): string | null {
|
||||
try {
|
||||
const { hostname, pathname, searchParams } = new URL(url);
|
||||
// youtu.be/<id>
|
||||
if (hostname === 'youtu.be') {
|
||||
const id = pathname.slice(1).split('/')[0];
|
||||
return id || null;
|
||||
}
|
||||
if (hostname === 'youtu.be') return pathname.slice(1).split('/')[0] || null;
|
||||
if (hostname === 'www.youtube.com' || hostname === 'youtube.com') {
|
||||
// youtube.com/watch?v=<id>
|
||||
if (pathname === '/watch') return searchParams.get('v');
|
||||
// youtube.com/embed/<id>
|
||||
const embedMatch = pathname.match(/^\/embed\/([A-Za-z0-9_-]+)/);
|
||||
if (embedMatch) return embedMatch[1];
|
||||
// youtube.com/shorts/<id> (also matched by getYoutubeShortsId)
|
||||
const shortsMatch = pathname.match(/^\/shorts\/([A-Za-z0-9_-]+)/);
|
||||
if (shortsMatch) return shortsMatch[1];
|
||||
}
|
||||
} catch {
|
||||
// ignore malformed URLs
|
||||
/* ignore */
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -55,6 +55,8 @@ export function getYoutubeShortsId(url: string): string | null {
|
||||
}
|
||||
}
|
||||
|
||||
// --- Vimeo ----------------------------------------------------------------
|
||||
|
||||
export function getVimeoVideoId(url: string): string | null {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
@@ -66,25 +68,191 @@ export function getVimeoVideoId(url: string): string | null {
|
||||
}
|
||||
}
|
||||
|
||||
/** Detect an embeddable video from any URL, or null if it isn't one. */
|
||||
export function parseVideoEmbed(url: string): VideoEmbed | null {
|
||||
const shortsId = getYoutubeShortsId(url);
|
||||
if (shortsId) return { provider: 'youtube', id: shortsId, portrait: true };
|
||||
const ytId = getYouTubeVideoId(url);
|
||||
if (ytId) return { provider: 'youtube', id: ytId, portrait: false };
|
||||
const vimeoId = getVimeoVideoId(url);
|
||||
if (vimeoId) return { provider: 'vimeo', id: vimeoId, portrait: false };
|
||||
// --- TikTok ---------------------------------------------------------------
|
||||
|
||||
/** Only resolvable for canonical /video/<id> links (short vm.tiktok.com links redirect). */
|
||||
export function getTikTokVideoId(url: string): string | null {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
const h = hostname.replace(/^www\./, '');
|
||||
if (h !== 'tiktok.com') return null;
|
||||
const m = pathname.match(/\/video\/(\d+)/);
|
||||
return m ? m[1] : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Dailymotion ----------------------------------------------------------
|
||||
|
||||
export function getDailymotionId(url: string): string | null {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
const h = hostname.replace(/^www\./, '');
|
||||
if (h === 'dai.ly') return pathname.slice(1).split('/')[0] || null;
|
||||
if (h === 'dailymotion.com') {
|
||||
const m = pathname.match(/^\/video\/([A-Za-z0-9]+)/);
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the click-to-play embed URL. YouTube uses the cookie-less
|
||||
* youtube-nocookie host so nothing is set until the user presses play.
|
||||
*/
|
||||
export function buildVideoEmbedUrl(provider: VideoEmbedProvider, id: string): string {
|
||||
const safeId = encodeURIComponent(id);
|
||||
if (provider === 'vimeo') {
|
||||
return `https://player.vimeo.com/video/${safeId}?autoplay=1`;
|
||||
// --- Streamable -----------------------------------------------------------
|
||||
|
||||
export function getStreamableId(url: string): string | null {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
if (hostname.replace(/^www\./, '') !== 'streamable.com') return null;
|
||||
const m = pathname.match(/^\/([A-Za-z0-9]+)/);
|
||||
return m && m[1] !== 'e' ? m[1] : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
return `https://www.youtube-nocookie.com/embed/${safeId}?autoplay=1&rel=0`;
|
||||
}
|
||||
|
||||
// --- Twitch ---------------------------------------------------------------
|
||||
|
||||
export type TwitchTarget =
|
||||
| { type: 'channel'; value: string }
|
||||
| { type: 'video'; value: string }
|
||||
| { type: 'clip'; value: string };
|
||||
|
||||
export function getTwitchTarget(url: string): TwitchTarget | null {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
const h = hostname.replace(/^www\./, '');
|
||||
const parts = pathname.replace(/^\/+|\/+$/g, '').split('/');
|
||||
if (h === 'clips.twitch.tv' && parts[0]) return { type: 'clip', value: parts[0] };
|
||||
if (h === 'twitch.tv' || h === 'm.twitch.tv') {
|
||||
if (parts[0] === 'videos' && parts[1]) return { type: 'video', value: parts[1] };
|
||||
if (parts[1] === 'clip' && parts[2]) return { type: 'clip', value: parts[2] };
|
||||
if (parts.length === 1 && parts[0]) return { type: 'channel', value: parts[0] };
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// --- Spotify --------------------------------------------------------------
|
||||
|
||||
const SPOTIFY_TYPES = ['track', 'album', 'playlist', 'episode', 'show', 'artist'] as const;
|
||||
export type SpotifyType = (typeof SPOTIFY_TYPES)[number];
|
||||
|
||||
export function getSpotifyEmbedTarget(url: string): { type: SpotifyType; id: string } | null {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
if (hostname !== 'open.spotify.com') return null;
|
||||
// /intl-xx/track/<id> or /track/<id>
|
||||
const parts = pathname.replace(/^\/+/, '').split('/');
|
||||
const idx = parts.findIndex((p) => (SPOTIFY_TYPES as readonly string[]).includes(p));
|
||||
if (idx === -1 || !parts[idx + 1]) return null;
|
||||
return { type: parts[idx] as SpotifyType, id: parts[idx + 1].split('?')[0] };
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// --- SoundCloud -----------------------------------------------------------
|
||||
|
||||
export function isSoundCloudTrack(url: string): boolean {
|
||||
try {
|
||||
const { hostname, pathname } = new URL(url);
|
||||
if (hostname.replace(/^www\./, '') !== 'soundcloud.com') return false;
|
||||
// /<artist>/<track|sets/set> — at least two segments, not a bare profile
|
||||
const parts = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
|
||||
return parts.length >= 2;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Embed-URL builders ---------------------------------------------------
|
||||
|
||||
const enc = encodeURIComponent;
|
||||
|
||||
export function buildVideoEmbedUrl(provider: 'youtube' | 'vimeo', id: string): string {
|
||||
if (provider === 'vimeo') return `https://player.vimeo.com/video/${enc(id)}?autoplay=1`;
|
||||
return `https://www.youtube-nocookie.com/embed/${enc(id)}?autoplay=1&rel=0`;
|
||||
}
|
||||
|
||||
/** Spotify compact players (track/episode) are short; collections are taller. */
|
||||
export function spotifyEmbedHeight(type: SpotifyType): number {
|
||||
return type === 'track' || type === 'episode' ? 152 : 352;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve any supported media URL to an embed spec, or null if none applies.
|
||||
* `host` is the current page hostname — required by Twitch's `parent` param.
|
||||
*/
|
||||
export function parseMediaEmbed(url: string, host: string): MediaEmbed | null {
|
||||
const shortsId = getYoutubeShortsId(url);
|
||||
if (shortsId)
|
||||
return { provider: 'youtube', kind: 'portrait', embedUrl: buildVideoEmbedUrl('youtube', shortsId) };
|
||||
|
||||
const ytId = getYouTubeVideoId(url);
|
||||
if (ytId)
|
||||
return { provider: 'youtube', kind: 'landscape', embedUrl: buildVideoEmbedUrl('youtube', ytId) };
|
||||
|
||||
const vimeoId = getVimeoVideoId(url);
|
||||
if (vimeoId)
|
||||
return { provider: 'vimeo', kind: 'landscape', embedUrl: buildVideoEmbedUrl('vimeo', vimeoId) };
|
||||
|
||||
const tiktokId = getTikTokVideoId(url);
|
||||
if (tiktokId)
|
||||
return {
|
||||
provider: 'tiktok',
|
||||
kind: 'portrait',
|
||||
embedUrl: `https://www.tiktok.com/player/v1/${enc(tiktokId)}?music_info=1&description=1&rel=0`,
|
||||
};
|
||||
|
||||
const dmId = getDailymotionId(url);
|
||||
if (dmId)
|
||||
return {
|
||||
provider: 'dailymotion',
|
||||
kind: 'landscape',
|
||||
embedUrl: `https://www.dailymotion.com/embed/video/${enc(dmId)}?autoplay=1`,
|
||||
};
|
||||
|
||||
const streamableId = getStreamableId(url);
|
||||
if (streamableId)
|
||||
return {
|
||||
provider: 'streamable',
|
||||
kind: 'landscape',
|
||||
embedUrl: `https://streamable.com/e/${enc(streamableId)}?autoplay=1`,
|
||||
};
|
||||
|
||||
const twitch = getTwitchTarget(url);
|
||||
if (twitch) {
|
||||
const parent = enc(host);
|
||||
const embedUrl =
|
||||
twitch.type === 'clip'
|
||||
? `https://clips.twitch.tv/embed?clip=${enc(twitch.value)}&parent=${parent}&autoplay=true`
|
||||
: `https://player.twitch.tv/?${twitch.type}=${enc(twitch.value)}&parent=${parent}&autoplay=true`;
|
||||
return { provider: 'twitch', kind: 'landscape', embedUrl };
|
||||
}
|
||||
|
||||
const spotify = getSpotifyEmbedTarget(url);
|
||||
if (spotify)
|
||||
return {
|
||||
provider: 'spotify',
|
||||
kind: 'audio',
|
||||
embedUrl: `https://open.spotify.com/embed/${spotify.type}/${enc(spotify.id)}`,
|
||||
height: spotifyEmbedHeight(spotify.type),
|
||||
};
|
||||
|
||||
if (isSoundCloudTrack(url))
|
||||
return {
|
||||
provider: 'soundcloud',
|
||||
kind: 'audio',
|
||||
embedUrl: `https://w.soundcloud.com/player/?url=${enc(
|
||||
url,
|
||||
)}&color=%23ff5500&auto_play=true&show_comments=false&hide_related=true`,
|
||||
height: 166,
|
||||
};
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user