feat: Enhance YouTube component with additional configuration options

fixes #488
- Add new props for YouTube embed: mute, controls, loop, modestBranding, and rel
- Update documentation with detailed prop explanations and usage examples
- Modify component to support new configuration options in iframe URL
- Update tests to cover new prop configurations

Author: spences10

apps/web/src/routes/+page.md

@@ -729,30 +729,76 @@ Output:
 Props:
 
 ```ts
-youTubeId: string = ''
-listId: string = ''
-autoPlay: boolean = false
-aspectRatio: string = '16:9'
-skipTo: { h: 0, m: 0, s: 0 }
-disable_observer: boolean = false
-export let iframe_styles: string = `
-  border-radius: 0.6rem;
-`
+youTubeId?: string;
+listId?: string;
+index?: number = 0;
+autoPlay?: boolean = false;
+aspectRatio?: string = '16:9';
+skipTo?: { h: number; m: number; s: number } = { h: 0, m: 0, s: 0 };
+disable_observer?: boolean = false;
+iframe_styles?: string = '';
+mute?: boolean = false;
+controls?: boolean = true;
+loop?: boolean = false;
+modestBranding?: boolean = false;
+rel?: boolean = false;
 ```
 
-Usage:
+Usage with video ID:
+
+```html
+<YouTube youTubeId="dQw4w9WgXcQ" />
+```
+
+Usage with playlist:
+
+```html
+<YouTube
+	listId="PLlrxD0HtieHhS8VzuMCfQD4uJ9yne1mE6"
+	index="{2}"
+	autoPlay="{true}"
+	mute="{true}"
+	controls="{true}"
+	modestBranding="{true}"
+/>
+```
+
+Usage with timestamp:
 
 ```html
-<YouTube youTubeId="L7_z8rcbFPg" />
+<YouTube
+  youTubeId="dQw4w9WgXcQ"
+  skipTo={{ h: 0, m: 1, s: 30 }}
+  loop={true}
+  rel={false}
+/>
 ```
 
 Output:
 
 <YouTube
   disable_observer={$disable_observer_store}
-  youTubeId="L7_z8rcbFPg"
+  youTubeId="dQw4w9WgXcQ"
+  aspectRatio="16:9"
 />
 
+### YouTube Props Explained
+
+- `youTubeId`: The ID of the YouTube video
+- `listId`: The ID of a YouTube playlist
+- `index`: Starting index for playlist playback (default: 0)
+- `autoPlay`: Automatically start playing (default: false)
+- `mute`: Start video muted (default: false)
+- `controls`: Show player controls (default: true)
+- `loop`: Loop the video/playlist (default: false)
+- `modestBranding`: Use minimal YouTube branding (default: false)
+- `rel`: Show related videos at the end (default: false)
+- `aspectRatio`: Set the aspect ratio (default: '16:9')
+- `skipTo`: Start at specific timestamp (default: { h: 0, m: 0, s: 0
+  })
+- `disable_observer`: Disable lazy loading (default: false)
+- `iframe_styles`: Custom CSS styles for the iframe
+
 ## Zencastr
 
 Props:

packages/sveltekit-embed/src/lib/components/you-tube.svelte

@@ -11,6 +11,11 @@
 		skipTo?: any;
 		disable_observer?: boolean;
 		iframe_styles?: string;
+		mute?: boolean;
+		controls?: boolean;
+		loop?: boolean;
+		modestBranding?: boolean;
+		rel?: boolean;
 	}
 
 	let {
@@ -24,6 +29,11 @@
 		iframe_styles = `
 			border-radius: 0.6rem;
 		`,
+		mute = false,
+		controls = true,
+		loop = false,
+		modestBranding = false,
+		rel = false,
 	}: Props = $props();
 
 	const { h, m, s } = skipTo;
@@ -38,8 +48,8 @@
 	const baseUrl = `https://www.youtube-nocookie.com/embed/`;
 	const src = `${baseUrl}${
 		youTubeId.length > 0
-			? `${youTubeId}?autoplay=${autoPlay}&start=${startTime}`
-			: `?videoseries&list=${listId}&index=${index}&autoplay=${autoPlay}&start=${startTime}`
+			? `${youTubeId}?autoplay=${Number(autoPlay)}&start=${startTime}&mute=${Number(mute)}&controls=${Number(controls)}&loop=${Number(loop)}&modestbranding=${Number(modestBranding)}&rel=${Number(rel)}`
+			: `?videoseries&list=${listId}&index=${index}&autoplay=${Number(autoPlay)}&start=${startTime}&mute=${Number(mute)}&controls=${Number(controls)}&loop=${Number(loop)}&modestbranding=${Number(modestBranding)}&rel=${Number(rel)}`
 	}`;
 </script>
 

packages/sveltekit-embed/src/lib/components/you-tube.test.ts

@@ -18,7 +18,7 @@ describe('YouTube', () => {
 		expect(container).toBeTruthy();
 	});
 
-	it('renders iframe with correct src for video', async () => {
+	it('renders iframe with correct src for video with default options', async () => {
 		const { getByTitle } = render(YouTube, {
 			youTubeId: 'abc123',
 			listId: '',
@@ -29,11 +29,31 @@ describe('YouTube', () => {
 			disable_observer: true,
 		});
 		const iframe = getByTitle('youTube-abc123');
-		const expectedSrc = `https://www.youtube-nocookie.com/embed/abc123?autoplay=false&start=0`;
+		const expectedSrc = `https://www.youtube-nocookie.com/embed/abc123?autoplay=0&start=0&mute=0&controls=1&loop=0&modestbranding=0&rel=0`;
 		expect(iframe.getAttribute('src')).toBe(expectedSrc);
 	});
 
-	it('renders iframe with correct src for playlist', async () => {
+	it('renders iframe with correct src for video with custom options', async () => {
+		const { getByTitle } = render(YouTube, {
+			youTubeId: 'abc123',
+			listId: '',
+			autoPlay: true,
+			mute: true,
+			controls: false,
+			loop: true,
+			modestBranding: true,
+			rel: true,
+			skipTo: { h: 0, m: 0, s: 0 },
+			aspectRatio: '16:9',
+			iframe_styles: '',
+			disable_observer: true,
+		});
+		const iframe = getByTitle('youTube-abc123');
+		const expectedSrc = `https://www.youtube-nocookie.com/embed/abc123?autoplay=1&start=0&mute=1&controls=0&loop=1&modestbranding=1&rel=1`;
+		expect(iframe.getAttribute('src')).toBe(expectedSrc);
+	});
+
+	it('renders iframe with correct src for playlist with default options', async () => {
 		const listId = '123abc';
 		const { getByTitle } = render(YouTube, {
 			youTubeId: '',
@@ -45,7 +65,7 @@ describe('YouTube', () => {
 			disable_observer: true,
 		});
 		const iframe = getByTitle(`youTube-${listId}`);
-		const expectedSrc = `https://www.youtube-nocookie.com/embed/?videoseries&list=${listId}&index=0&autoplay=false&start=0`;
+		const expectedSrc = `https://www.youtube-nocookie.com/embed/?videoseries&list=${listId}&index=0&autoplay=0&start=0&mute=0&controls=1&loop=0&modestbranding=0&rel=0`;
 		expect(iframe.getAttribute('src')).toBe(expectedSrc);
 	});