feat(embeds): inline YouTube/Vimeo players + media-forward video tiles
Video link tiles (YouTube, Shorts, Vimeo) now play in place instead of only opening a browser tab. Adds a media-forward 16:9 (9:16 for Shorts) tile with a privacy-friendly click-to-play facade: the homeserver's cached og:image thumbnail + a play button, and only on click does it swap in the cookie-less youtube-nocookie / player.vimeo iframe — so nothing loads from Google/Vimeo until the user presses play. Gated by a new 'Inline Media Players' setting (default on); when off it falls back to a link that opens the video in a new tab. Also sources YouTube thumbnails from the homeserver og:image instead of img.youtube.com, which fixes the existing broken YouTube thumbnails on the web build (nginx img-src has no YouTube host) and removes the pre-click Google request. Pure URL parsing + embed-URL building moved to utils/videoEmbed.ts (unit-tested). Note: the desktop app's Tauri CSP frame-src must allow the video hosts (separate commit in cinny-desktop). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
// 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.
|
||||
|
||||
export type VideoEmbedProvider = 'youtube' | 'vimeo';
|
||||
|
||||
export type VideoEmbed = {
|
||||
provider: VideoEmbedProvider;
|
||||
id: string;
|
||||
portrait: boolean; // YouTube Shorts render 9:16
|
||||
};
|
||||
|
||||
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 === '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
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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 };
|
||||
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`;
|
||||
}
|
||||
return `https://www.youtube-nocookie.com/embed/${safeId}?autoplay=1&rel=0`;
|
||||
}
|
||||
Reference in New Issue
Block a user