feat: youtube embeds

[renja-g]

Is discussed in #4834
This pull request introduces functionality to embed YouTube videos in the MemoView component by extracting video IDs from markdown nodes and rendering them using a new MemoYoutubeEmbedListView component. The changes involve adding utility functions for video ID extraction, updating the MemoView component to use these functions, and creating a dedicated component for rendering embedded YouTube videos.

[johnnyjoygh]

LGTM

[Copilot]

Pull Request Overview

This pull request introduces YouTube video embedding functionality to the MemoView component by automatically detecting YouTube URLs in markdown content and rendering them as embedded video players.

• Adds utility functions to extract YouTube video IDs from various URL formats and traverse markdown nodes
• Creates a new component for rendering YouTube embeds in a horizontal scrollable list
• Integrates the YouTube embed functionality into the existing MemoView component

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
web/src/utils/youtube.ts	New utility functions for YouTube URL parsing and video ID extraction from markdown nodes
web/src/components/MemoYoutubeEmbedListView.tsx	New component that renders YouTube videos as embedded iframes in a horizontal layout
web/src/components/MemoView.tsx	Updates to integrate YouTube embed functionality using the new utility and component

[Copilot]

Using the non-null assertion operator (!) on stack.pop() assumes the stack is never empty, but this could lead to runtime errors if the stack becomes empty unexpectedly. Consider using a safer approach like checking if the popped value exists before proceeding.

Suggested change

	const node = stack.pop()!;
	const node = stack.pop();
	if (!node) continue;

[Copilot]

The videoId is directly interpolated into the iframe src without validation or sanitization. Although the video IDs are extracted using regex patterns, consider adding additional validation to ensure the videoId contains only expected characters (alphanumeric, hyphens, underscores) to prevent potential XSS attacks.

[Copilot]

[nitpick] The iframe permissions are quite permissive, including clipboard-write and accelerometer access. Consider restricting permissions to only what's necessary for video playback (e.g., encrypted-media, picture-in-picture) to follow the principle of least privilege.

Suggested change

	allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allow="encrypted-media; picture-in-picture"

[Copilot]

The EmbedCard component is defined inside the render function, which means it will be recreated on every render. Consider moving this component outside of the main component or using useCallback to optimize performance.

Suggested change

	const EmbedCard = ({ videoId, className }: { videoId: string; className?: string }) => {
	return (
	<div className={cn("relative w-full", className)}>
	<div className="relative w-full pt-[56.25%] rounded-lg overflow-hidden border border-border/60 bg-popover">
	<iframe
	className="absolute top-0 left-0 w-full h-full"
	src={`https://www.youtube.com/embed/${videoId}`}
	title="YouTube video player"
	allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowFullScreen
	/>
	</div>
	</div>
	);
	};
	return (
	<div className="w-full flex flex-row justify-start overflow-auto gap-2">
	{videoIds.map((id) => (
	<div key={id} className="w-80 flex flex-col justify-start items-start shrink-0">
	<EmbedCard videoId={id} className="max-h-64 grow" />
	</div>
	))}
	</div>
	);
	};
	const EmbedCard = memo(({ videoId, className }: { videoId: string; className?: string }) => {
	return (
	<div className={cn("relative w-full", className)}>
	<div className="relative w-full pt-[56.25%] rounded-lg overflow-hidden border border-border/60 bg-popover">
	<iframe
	className="absolute top-0 left-0 w-full h-full"
	src={`https://www.youtube.com/embed/${videoId}`}
	title="YouTube video player"
	allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	allowFullScreen
	/>

[renja-g]

I already commented on Copilots "suggestions" once.

[renja-g]

If there is anything you want changed, let me know.