2026-07-06 20:01:05 -04:00
|
|
|
// 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)
|
2026-07-06 19:48:12 -04:00
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
export type EmbedKind = 'landscape' | 'portrait' | 'audio';
|
2026-07-06 19:48:12 -04:00
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
export type MediaEmbed = {
|
|
|
|
|
provider: string;
|
|
|
|
|
kind: EmbedKind;
|
|
|
|
|
embedUrl: string;
|
|
|
|
|
/** Fixed pixel height for audio/rich embeds (aspect-ratio is used for video). */
|
|
|
|
|
height?: number;
|
2026-07-06 19:48:12 -04:00
|
|
|
};
|
|
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
// --- YouTube --------------------------------------------------------------
|
|
|
|
|
|
2026-07-06 19:48:12 -04:00
|
|
|
export function getYouTubeVideoId(url: string): string | null {
|
|
|
|
|
try {
|
|
|
|
|
const { hostname, pathname, searchParams } = new URL(url);
|
2026-07-06 20:01:05 -04:00
|
|
|
if (hostname === 'youtu.be') return pathname.slice(1).split('/')[0] || null;
|
2026-07-06 19:48:12 -04:00
|
|
|
if (hostname === 'www.youtube.com' || hostname === 'youtube.com') {
|
|
|
|
|
if (pathname === '/watch') return searchParams.get('v');
|
|
|
|
|
const embedMatch = pathname.match(/^\/embed\/([A-Za-z0-9_-]+)/);
|
|
|
|
|
if (embedMatch) return embedMatch[1];
|
|
|
|
|
const shortsMatch = pathname.match(/^\/shorts\/([A-Za-z0-9_-]+)/);
|
|
|
|
|
if (shortsMatch) return shortsMatch[1];
|
|
|
|
|
}
|
|
|
|
|
} catch {
|
2026-07-06 20:01:05 -04:00
|
|
|
/* ignore */
|
2026-07-06 19:48:12 -04:00
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function isYouTubeShorts(url: string): boolean {
|
|
|
|
|
try {
|
|
|
|
|
const { hostname, pathname } = new URL(url);
|
|
|
|
|
if (hostname !== 'www.youtube.com' && hostname !== 'youtube.com') return false;
|
|
|
|
|
return /^\/shorts\/[A-Za-z0-9_-]+/.test(pathname);
|
|
|
|
|
} catch {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function getYoutubeShortsId(url: string): string | null {
|
|
|
|
|
try {
|
|
|
|
|
const { hostname, pathname } = new URL(url);
|
|
|
|
|
if (hostname !== 'www.youtube.com' && hostname !== 'youtube.com') return null;
|
|
|
|
|
const m = pathname.match(/^\/shorts\/([A-Za-z0-9_-]+)/);
|
|
|
|
|
return m ? m[1] : null;
|
|
|
|
|
} catch {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
// --- Vimeo ----------------------------------------------------------------
|
|
|
|
|
|
2026-07-06 19:48:12 -04:00
|
|
|
export function getVimeoVideoId(url: string): string | null {
|
|
|
|
|
try {
|
|
|
|
|
const { hostname, pathname } = new URL(url);
|
|
|
|
|
if (hostname !== 'vimeo.com' && hostname !== 'www.vimeo.com') return null;
|
|
|
|
|
const m = pathname.match(/^\/(\d+)/);
|
|
|
|
|
return m ? m[1] : null;
|
|
|
|
|
} catch {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
// --- 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 */
|
|
|
|
|
}
|
2026-07-06 19:48:12 -04:00
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
// --- 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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// --- 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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 20:14:53 -04:00
|
|
|
// --- Apple Music ----------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
/** music.apple.com/<cc>/album|playlist|song/<slug>/<id>[?i=<songId>] → embed player. */
|
|
|
|
|
export function getAppleMusicEmbed(url: string): { embedUrl: string; height: number } | null {
|
|
|
|
|
try {
|
|
|
|
|
const u = new URL(url);
|
|
|
|
|
if (u.hostname !== 'music.apple.com' && u.hostname !== 'embed.music.apple.com') return null;
|
|
|
|
|
if (!/\/(album|playlist|song|music-video)\//.test(u.pathname)) return null;
|
|
|
|
|
const embedUrl = `https://embed.music.apple.com${u.pathname}${u.search}`;
|
|
|
|
|
// A single song (?i=… on an album, or a /song/ link) is compact; collections are tall.
|
|
|
|
|
const isSong = u.searchParams.has('i') || /\/song\//.test(u.pathname);
|
|
|
|
|
return { embedUrl, height: isSong ? 175 : 450 };
|
|
|
|
|
} catch {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// --- X / Twitter ----------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
export function getTweetId(url: string): string | null {
|
|
|
|
|
try {
|
|
|
|
|
const { hostname, pathname } = new URL(url);
|
|
|
|
|
const h = hostname.replace(/^www\./, '');
|
|
|
|
|
if (h !== 'twitter.com' && h !== 'x.com' && h !== 'mobile.twitter.com') return null;
|
|
|
|
|
const m = pathname.match(/\/status(?:es)?\/(\d+)/);
|
|
|
|
|
return m ? m[1] : null;
|
|
|
|
|
} catch {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
// --- 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;
|
|
|
|
|
}
|
|
|
|
|
|
2026-07-06 19:48:12 -04:00
|
|
|
/**
|
2026-07-06 20:01:05 -04:00
|
|
|
* 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.
|
2026-07-06 19:48:12 -04:00
|
|
|
*/
|
2026-07-06 20:01:05 -04:00
|
|
|
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 };
|
2026-07-06 19:48:12 -04:00
|
|
|
}
|
2026-07-06 20:01:05 -04:00
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
};
|
|
|
|
|
|
2026-07-06 20:14:53 -04:00
|
|
|
const apple = getAppleMusicEmbed(url);
|
|
|
|
|
if (apple)
|
|
|
|
|
return {
|
|
|
|
|
provider: 'applemusic',
|
|
|
|
|
kind: 'audio',
|
|
|
|
|
embedUrl: apple.embedUrl,
|
|
|
|
|
height: apple.height,
|
|
|
|
|
};
|
|
|
|
|
|
2026-07-06 20:01:05 -04:00
|
|
|
return null;
|
2026-07-06 19:48:12 -04:00
|
|
|
}
|