hermes-agent/apps/desktop/src/components/assistant-ui/embeds/youtube-embed.tsx
Brooklyn Nicholson 0c190083cd feat(desktop): lazy embed renderers + fenced diagrams/alerts
Per-kind renderers, each a lazy split chunk: plain-iframe video/maps (wheel
chains to the transcript; maps gate scroll behind ⌘), the in-document
blockquote-script path for X/Instagram, the dark Spotify player, and the
YouTube iframe. Adds Mermaid and DOMPurify-sanitised SVG fences and GFM alert
callouts, all sized to 33dvh and theme-matched to avoid white color-scheme
artifacts. Main-process stamps a Referer on YouTube embed requests.
2026-06-26 03:22:08 -05:00

47 lines
1.5 KiB
TypeScript

'use client'
import { useMemo } from 'react'
import type { FrameEmbed } from './providers/types'
import { useIsDark } from './use-is-dark'
const YOUTUBE_ALLOW =
'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen'
function youtubeSrc(embedUrl: string): string {
const url = new URL(embedUrl)
// Only pass origin when it is an HTTP(S) origin; custom schemes (app://,
// file://) can make the player reject otherwise embeddable videos.
if (
typeof window !== 'undefined' &&
(window.location.protocol === 'http:' || window.location.protocol === 'https:') &&
window.location.origin &&
window.location.origin !== 'null'
) {
url.searchParams.set('origin', window.location.origin)
}
return url.toString()
}
// Keep this as a plain iframe and let YouTube render its native player/error UI.
export default function YouTubeEmbedRenderer({ descriptor }: { descriptor: FrameEmbed }) {
const isDark = useIsDark()
const src = useMemo(() => youtubeSrc(descriptor.embedUrl), [descriptor.embedUrl])
// Width is capped to the ratio by UrlEmbed, so aspect-video sizes height ≤ cap.
return (
<iframe
allow={YOUTUBE_ALLOW}
allowFullScreen
className="block aspect-video w-full border-0 bg-transparent"
loading="lazy"
referrerPolicy="strict-origin-when-cross-origin"
scrolling="no"
src={src}
style={{ colorScheme: isDark ? 'dark' : 'light' }}
title="YouTube embed"
/>
)
}