refactor: ♻️ add tiktok embed

Author: spences10

.vscode/settings.json

@@ -4,5 +4,6 @@
 		"source.organizeImports": "explicit"
 	},
 	"git.enableSmartCommit": true,
-	"git.postCommitCommand": "sync"
+	"git.postCommitCommand": "sync",
+	"cSpell.words": ["tiktok"]
 }

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

@@ -15,6 +15,7 @@
 		SoundCloud,
 		Spotify,
 		StackBlitz,
+		TikTok,
 		Toot,
 		Tweet,
 		Vimeo,
@@ -142,6 +143,7 @@ or open a [PR](https://github.com/spences10/sveltekit-embed/pulls).
 - [SoundCloud](#soundcloud)
 - [Spotify](#spotify)
 - [StackBlitz](#stackblitz)
+- [TikTok](#tiktok)
 - [Toot](#toot)
 - [Tweet](#tweet)
 - [Vimeo](#vimeo)
@@ -559,6 +561,57 @@ Output:
   hideNavigation
 />
 
+## TikTok
+
+Props:
+
+```ts
+tiktokId: string;
+width?: string = '100%';
+height?: string = '600px';
+controls?: boolean = true;
+progress_bar?: boolean = true;
+play_button?: boolean = true;
+volume_control?: boolean = true;
+fullscreen_button?: boolean = true;
+timestamp?: boolean = true;
+loop?: boolean = false;
+autoplay?: boolean = false;
+music_info?: boolean = false;
+description?: boolean = false;
+rel?: boolean = true;
+native_context_menu?: boolean = true;
+closed_caption?: boolean = true;
+disable_observer?: boolean = false;
+```
+
+Usage:
+
+```html
+<TikTok
+	tiktokId="6718335390845095173"
+	width="100%"
+	height="600px"
+	autoplay="{false}"
+	loop="{true}"
+	music_info="{true}"
+	description="{true}"
+/>
+```
+
+Output:
+
+<TikTok
+  disable_observer={$disable_observer_store}
+  tiktokId="6718335390845095173"
+  width="100%"
+  height="600px"
+  autoplay={false}
+  loop={true}
+  music_info={true}
+  description={true}
+/>
+
 ## Toot
 
 Props:

packages/sveltekit-embed/src/lib/components/tiktok.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+
+	interface Props {
+		tiktokId: string;
+		width?: string;
+		height?: string;
+		controls?: boolean;
+		progress_bar?: boolean;
+		play_button?: boolean;
+		volume_control?: boolean;
+		fullscreen_button?: boolean;
+		timestamp?: boolean;
+		loop?: boolean;
+		autoplay?: boolean;
+		music_info?: boolean;
+		description?: boolean;
+		rel?: boolean;
+		native_context_menu?: boolean;
+		closed_caption?: boolean;
+		disable_observer?: boolean;
+	}
+
+	let {
+		tiktokId,
+		width = '100%',
+		height = '600px',
+		controls = true,
+		progress_bar = true,
+		play_button = true,
+		volume_control = true,
+		fullscreen_button = true,
+		timestamp = true,
+		loop = false,
+		autoplay = false,
+		music_info = false,
+		description = false,
+		rel = true,
+		native_context_menu = true,
+		closed_caption = true,
+		disable_observer = false,
+	}: Props = $props();
+
+	const query_params = new URLSearchParams({
+		controls: controls ? '1' : '0',
+		progress_bar: progress_bar ? '1' : '0',
+		play_button: play_button ? '1' : '0',
+		volume_control: volume_control ? '1' : '0',
+		fullscreen_button: fullscreen_button ? '1' : '0',
+		timestamp: timestamp ? '1' : '0',
+		loop: loop ? '1' : '0',
+		autoplay: autoplay ? '1' : '0',
+		music_info: music_info ? '1' : '0',
+		description: description ? '1' : '0',
+		rel: rel ? '1' : '0',
+		native_context_menu: native_context_menu ? '1' : '0',
+		closed_caption: closed_caption ? '1' : '0',
+	});
+
+	const src = `https://www.tiktok.com/player/v1/${tiktokId}?${query_params.toString()}`;
+</script>
+
+<GeneralObserver {disable_observer}>
+	<div
+		class="tiktok-sveltekit-embed"
+		style={`
+      position: relative;
+      width: ${width};
+      height: ${height};
+    `}
+	>
+		<iframe
+			data-testid="tiktok-embed"
+			title={`tiktok-${tiktokId}`}
+			{src}
+			frameborder="0"
+			scrolling="no"
+			allow="encrypted-media; picture-in-picture; fullscreen"
+			style={`
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      `}
+		></iframe>
+	</div>
+</GeneralObserver>

packages/sveltekit-embed/src/lib/components/tiktok.test.ts

@@ -0,0 +1,68 @@
+import TikTok from '$lib/components/tiktok.svelte';
+import { cleanup, render } from '@testing-library/svelte/svelte5';
+import { afterEach, describe, expect, it } from 'vitest';
+
+describe('TikTok', () => {
+	afterEach(cleanup);
+
+	it('mounts with default props', async () => {
+		const { container } = render(TikTok, {
+			tiktokId: '6718335390845095173',
+		});
+		expect(container).toBeTruthy();
+	});
+
+	it('renders iframe with correct src', async () => {
+		const tiktokId = '6718335390845095173';
+		const { getByTestId } = render(TikTok, {
+			tiktokId,
+			disable_observer: true,
+		});
+		const iframe = getByTestId('tiktok-embed');
+		const expected_src = `https://www.tiktok.com/player/v1/${tiktokId}?controls=1&progress_bar=1&play_button=1&volume_control=1&fullscreen_button=1&timestamp=1&loop=0&autoplay=0&music_info=0&description=0&rel=1&native_context_menu=1&closed_caption=1`;
+		expect(iframe.getAttribute('src')).toBe(expected_src);
+	});
+
+	it('mounts with custom height and width', async () => {
+		const { container } = render(TikTok, {
+			tiktokId: '6718335390845095173',
+			height: '400px',
+			width: '50%',
+			disable_observer: true,
+		});
+		const div = container.querySelector('.tiktok-sveltekit-embed');
+
+		expect(div?.getAttribute('style')).toContain('height: 400px');
+		expect(div?.getAttribute('style')).toContain('width: 50%');
+	});
+
+	it('renders with custom options', async () => {
+		const tiktokId = '6718335390845095173';
+		const { getByTestId } = render(TikTok, {
+			tiktokId,
+			controls: false,
+			loop: true,
+			autoplay: true,
+			music_info: true,
+			description: true,
+			disable_observer: true,
+		});
+		const iframe = getByTestId('tiktok-embed');
+		const src = iframe.getAttribute('src');
+
+		expect(src).toContain('controls=0');
+		expect(src).toContain('loop=1');
+		expect(src).toContain('autoplay=1');
+		expect(src).toContain('music_info=1');
+		expect(src).toContain('description=1');
+	});
+
+	it('renders with a GeneralObserver', async () => {
+		const { getByTestId } = render(TikTok, {
+			tiktokId: '6718335390845095173',
+			disable_observer: false,
+		});
+		const general_observer = getByTestId('general-observer');
+		expect(general_observer).toBeTruthy();
+	});
+});

packages/sveltekit-embed/src/lib/index.ts

@@ -12,6 +12,7 @@ export { default as Slides } from './components/slides.svelte';
 export { default as SoundCloud } from './components/sound-cloud.svelte';
 export { default as Spotify } from './components/spotify.svelte';
 export { default as StackBlitz } from './components/stackblitz.svelte';
+export { default as TikTok } from './components/tiktok.svelte';
 export { default as Toot } from './components/toot.svelte';
 export { default as Tweet } from './components/tweet.svelte';
 export { default as Vimeo } from './components/vimeo.svelte';