sveltekit-embeds 0.1.0

package/dist/components/you-tube.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import GeneralObserver from './general-observer.svelte';
+	import { getPadding } from '../utils/index.js';
+	import { extractYouTubeVideoId, getYouTubeEmbedUrl } from '../utils/youtube.js';
+
+	interface Props {
+		url: string;
+		aspectRatio?: string;
+		autoPlay?: boolean;
+		mute?: boolean;
+		controls?: boolean;
+		loop?: boolean;
+		start?: number;
+		disable_observer?: boolean;
+		iframe_styles?: string;
+	}
+
+	let {
+		url,
+		aspectRatio = '16:9',
+		autoPlay = false,
+		mute = false,
+		controls = true,
+		loop = false,
+		start = 0,
+		disable_observer = false,
+		iframe_styles
+	}: Props = $props();
+
+	const videoId = $derived(extractYouTubeVideoId(url));
+	const baseEmbedUrl = $derived(getYouTubeEmbedUrl(url));
+	const paddingStyle = $derived(getPadding(aspectRatio));
+	const embedUrl = $derived.by(() => {
+		if (!baseEmbedUrl) {
+			return null;
+		}
+
+		const params = new URLSearchParams({
+			autoplay: autoPlay ? '1' : '0',
+			mute: mute ? '1' : '0',
+			controls: controls ? '1' : '0'
+		});
+
+		if (loop && videoId) {
+			params.set('loop', '1');
+			params.set('playlist', videoId);
+		}
+
+		if (start > 0) {
+			params.set('start', String(start));
+		}
+
+		return `${baseEmbedUrl}?${params.toString()}`;
+	});
+</script>
+
+<GeneralObserver {disable_observer}>
+	{#if embedUrl}
+		<div class="wrapper" style={paddingStyle}>
+			<iframe
+				src={embedUrl}
+				title={`youtube-${videoId}`}
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+				allowfullscreen
+				loading="lazy"
+				style={iframe_styles}
+			></iframe>
+		</div>
+	{/if}
+</GeneralObserver>
+
+<style>
+	.wrapper {
+		position: relative;
+		width: 100%;
+	}
+
+	iframe {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		border: 0;
+	}
+</style>

package/dist/components/you-tube.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    url: string;
+    aspectRatio?: string;
+    autoPlay?: boolean;
+    mute?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    start?: number;
+    disable_observer?: boolean;
+    iframe_styles?: string;
+}
+declare const YouTube: import("svelte").Component<Props, {}, "">;
+type YouTube = ReturnType<typeof YouTube>;
+export default YouTube;

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export { default as GeneralObserver } from './components/general-observer.svelte';
+export { default as YouTube } from './components/you-tube.svelte';
+export { default as TikTok } from './components/tik-tok.svelte';
+export { default as Twitch } from './components/twitch.svelte';
+export { default as Dailymotion } from './components/dailymotion.svelte';
+export { default as Spotify } from './components/spotify.svelte';
+export { default as AppleMusic } from './components/apple-music.svelte';
+export { default as ApplePodcasts } from './components/apple-podcasts.svelte';
+export { default as SoundCloud } from './components/sound-cloud.svelte';
+export { default as Deezer } from './components/deezer.svelte';
+export { default as Tidal } from './components/tidal.svelte';
+export { default as XEmbed } from './components/x-embed.svelte';
+export { default as Instagram } from './components/instagram.svelte';
+export { default as Threads } from './components/threads.svelte';
+export { default as Bluesky } from './components/bluesky.svelte';
+export { default as Mastodon } from './components/mastodon.svelte';
+export { default as LinkedIn } from './components/linked-in.svelte';
+export { default as Reddit } from './components/reddit.svelte';
+export { default as Pinterest } from './components/pinterest.svelte';
+export * from './utils/index.js';

package/dist/index.js

@@ -0,0 +1,20 @@
+export { default as GeneralObserver } from './components/general-observer.svelte';
+export { default as YouTube } from './components/you-tube.svelte';
+export { default as TikTok } from './components/tik-tok.svelte';
+export { default as Twitch } from './components/twitch.svelte';
+export { default as Dailymotion } from './components/dailymotion.svelte';
+export { default as Spotify } from './components/spotify.svelte';
+export { default as AppleMusic } from './components/apple-music.svelte';
+export { default as ApplePodcasts } from './components/apple-podcasts.svelte';
+export { default as SoundCloud } from './components/sound-cloud.svelte';
+export { default as Deezer } from './components/deezer.svelte';
+export { default as Tidal } from './components/tidal.svelte';
+export { default as XEmbed } from './components/x-embed.svelte';
+export { default as Instagram } from './components/instagram.svelte';
+export { default as Threads } from './components/threads.svelte';
+export { default as Bluesky } from './components/bluesky.svelte';
+export { default as Mastodon } from './components/mastodon.svelte';
+export { default as LinkedIn } from './components/linked-in.svelte';
+export { default as Reddit } from './components/reddit.svelte';
+export { default as Pinterest } from './components/pinterest.svelte';
+export * from './utils/index.js';

package/dist/utils/apple-music.d.ts

@@ -0,0 +1,11 @@
+export type AppleMusicItemType = 'song' | 'album' | 'playlist' | 'artist' | 'station' | 'music-video';
+export interface AppleMusicUrlInfo {
+    id: string;
+    type: AppleMusicItemType;
+    country: string;
+    isValid: boolean;
+    originalUrl: string;
+}
+export declare const isValidAppleMusicUrl: (url: string) => boolean;
+export declare const parseAppleMusicUrl: (url: string) => AppleMusicUrlInfo;
+export declare const getAppleMusicEmbedUrl: (url: string, theme?: "light" | "dark") => string | null;

package/dist/utils/apple-music.js

@@ -0,0 +1,59 @@
+export const isValidAppleMusicUrl = (url) => {
+    if (!url) {
+        return false;
+    }
+    try {
+        const urlObj = new URL(url);
+        return urlObj.hostname.includes('music.apple.com');
+    }
+    catch {
+        return false;
+    }
+};
+export const parseAppleMusicUrl = (url) => {
+    const fallback = {
+        id: '',
+        type: 'song',
+        country: '',
+        isValid: false,
+        originalUrl: url
+    };
+    if (!isValidAppleMusicUrl(url)) {
+        return fallback;
+    }
+    try {
+        const urlObj = new URL(url);
+        const pathParts = urlObj.pathname.split('/').filter(Boolean);
+        if (pathParts.length < 3) {
+            return fallback;
+        }
+        const country = pathParts[0] ?? '';
+        const type = (pathParts[1] ?? 'song');
+        const id = pathParts[pathParts.length - 1] ?? '';
+        const songId = urlObj.searchParams.get('i');
+        return {
+            id,
+            type: songId ? 'song' : type,
+            country,
+            isValid: Boolean(id),
+            originalUrl: url
+        };
+    }
+    catch {
+        return fallback;
+    }
+};
+export const getAppleMusicEmbedUrl = (url, theme = 'light') => {
+    if (!isValidAppleMusicUrl(url)) {
+        return null;
+    }
+    try {
+        const embedUrl = new URL(url);
+        embedUrl.hostname = 'embed.music.apple.com';
+        embedUrl.searchParams.set('theme', theme);
+        return embedUrl.toString();
+    }
+    catch {
+        return null;
+    }
+};

package/dist/utils/apple-podcasts.d.ts

@@ -0,0 +1,11 @@
+export type ApplePodcastsItemType = 'show' | 'episode';
+export interface ApplePodcastsUrlInfo {
+    id: string;
+    type: ApplePodcastsItemType;
+    country: string;
+    isValid: boolean;
+    originalUrl: string;
+}
+export declare const isValidApplePodcastsUrl: (url: string) => boolean;
+export declare const parseApplePodcastsUrl: (url: string) => ApplePodcastsUrlInfo;
+export declare const getApplePodcastsEmbedUrl: (url: string, theme?: "light" | "dark") => string | null;

package/dist/utils/apple-podcasts.js

@@ -0,0 +1,56 @@
+export const isValidApplePodcastsUrl = (url) => {
+    if (!url) {
+        return false;
+    }
+    try {
+        const urlObj = new URL(url);
+        return urlObj.hostname.includes('podcasts.apple.com');
+    }
+    catch {
+        return false;
+    }
+};
+export const parseApplePodcastsUrl = (url) => {
+    const fallback = {
+        id: '',
+        type: 'show',
+        country: '',
+        isValid: false,
+        originalUrl: url
+    };
+    if (!isValidApplePodcastsUrl(url)) {
+        return fallback;
+    }
+    try {
+        const urlObj = new URL(url);
+        const pathParts = urlObj.pathname.split('/').filter(Boolean);
+        const country = pathParts[0] ?? '';
+        const episodeId = urlObj.searchParams.get('i');
+        const showId = urlObj.pathname.match(/\/id(\d+)/)?.[1] ?? '';
+        const id = episodeId || showId;
+        return {
+            id,
+            type: episodeId ? 'episode' : 'show',
+            country,
+            isValid: Boolean(id),
+            originalUrl: url
+        };
+    }
+    catch {
+        return fallback;
+    }
+};
+export const getApplePodcastsEmbedUrl = (url, theme = 'light') => {
+    if (!isValidApplePodcastsUrl(url)) {
+        return null;
+    }
+    try {
+        const embedUrl = new URL(url);
+        embedUrl.hostname = 'embed.podcasts.apple.com';
+        embedUrl.searchParams.set('theme', theme);
+        return embedUrl.toString();
+    }
+    catch {
+        return null;
+    }
+};

package/dist/utils/bluesky.d.ts

@@ -0,0 +1,8 @@
+export interface BlueskyUrlInfo {
+    handle: string;
+    postId: string;
+    isValid: boolean;
+    originalUrl: string;
+}
+export declare const parseBlueskyUrl: (url: string) => BlueskyUrlInfo;
+export declare const getBlueskyEmbedUrl: (url: string) => string | null;

package/dist/utils/bluesky.js

@@ -0,0 +1,35 @@
+export const parseBlueskyUrl = (url) => {
+    const fallback = {
+        handle: '',
+        postId: '',
+        isValid: false,
+        originalUrl: url
+    };
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        if (!hostname.includes('bsky.app')) {
+            return fallback;
+        }
+        const match = urlObj.pathname.match(/\/profile\/([^/]+)\/post\/([^/?#]+)/);
+        if (!match?.[1] || !match?.[2]) {
+            return fallback;
+        }
+        return {
+            handle: match[1],
+            postId: match[2],
+            isValid: true,
+            originalUrl: url
+        };
+    }
+    catch {
+        return fallback;
+    }
+};
+export const getBlueskyEmbedUrl = (url) => {
+    const info = parseBlueskyUrl(url);
+    if (!info.isValid) {
+        return null;
+    }
+    return `https://embed.bsky.app/embed/${info.handle}/post/${info.postId}`;
+};

package/dist/utils/dailymotion.d.ts

@@ -0,0 +1,2 @@
+export declare const extractDailymotionId: (url: string) => string | null;
+export declare const getDailymotionEmbedUrl: (url: string) => string | null;

package/dist/utils/dailymotion.js

@@ -0,0 +1,21 @@
+export const extractDailymotionId = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        if (hostname.includes('dai.ly')) {
+            return urlObj.pathname.split('/').filter(Boolean)[0] ?? null;
+        }
+        const match = urlObj.pathname.match(/\/video\/([a-zA-Z0-9]+)/);
+        return match?.[1] ?? null;
+    }
+    catch {
+        return null;
+    }
+};
+export const getDailymotionEmbedUrl = (url) => {
+    const id = extractDailymotionId(url);
+    if (!id) {
+        return null;
+    }
+    return `https://www.dailymotion.com/embed/video/${id}`;
+};

package/dist/utils/deezer.d.ts

@@ -0,0 +1,10 @@
+export type DeezerItemType = 'track' | 'album' | 'playlist' | 'artist' | 'podcast' | 'episode';
+export interface DeezerUrlInfo {
+    id: string;
+    type: DeezerItemType;
+    isValid: boolean;
+    originalUrl: string;
+}
+export declare const isValidDeezerUrl: (url: string) => boolean;
+export declare const parseDeezerUrl: (url: string) => DeezerUrlInfo;
+export declare const getDeezerEmbedUrl: (url: string, theme?: "light" | "dark") => string | null;

package/dist/utils/deezer.js

@@ -0,0 +1,56 @@
+const DEEZER_TYPES = ['track', 'album', 'playlist', 'artist', 'podcast', 'episode'];
+export const isValidDeezerUrl = (url) => {
+    if (!url) {
+        return false;
+    }
+    try {
+        const urlObj = new URL(url);
+        return urlObj.hostname.includes('deezer.com');
+    }
+    catch {
+        return false;
+    }
+};
+export const parseDeezerUrl = (url) => {
+    const fallback = {
+        id: '',
+        type: 'track',
+        isValid: false,
+        originalUrl: url
+    };
+    if (!isValidDeezerUrl(url)) {
+        return fallback;
+    }
+    try {
+        const urlObj = new URL(url);
+        const pathParts = urlObj.pathname.split('/').filter(Boolean);
+        const firstPart = pathParts[0] ?? '';
+        const hasCountryPrefix = firstPart.length === 2 && !DEEZER_TYPES.includes(firstPart);
+        const normalizedParts = hasCountryPrefix ? pathParts.slice(1) : pathParts;
+        const type = (normalizedParts[0] ?? '');
+        const id = normalizedParts[1] ?? '';
+        if (!DEEZER_TYPES.includes(type) || !id) {
+            return fallback;
+        }
+        return {
+            id,
+            type,
+            isValid: true,
+            originalUrl: url
+        };
+    }
+    catch {
+        return fallback;
+    }
+};
+export const getDeezerEmbedUrl = (url, theme = 'light') => {
+    const info = parseDeezerUrl(url);
+    if (!info.isValid) {
+        return null;
+    }
+    const themeSegment = theme === 'dark' ? 'dark' : 'light';
+    if (info.type === 'artist') {
+        return `https://widget.deezer.com/widget/${themeSegment}/artist/${info.id}/top_tracks`;
+    }
+    return `https://widget.deezer.com/widget/${themeSegment}/${info.type}/${info.id}`;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,19 @@
+export declare const getPadding: (aspectRatio?: string) => string;
+export * from './youtube.js';
+export * from './spotify.js';
+export * from './tiktok.js';
+export * from './twitch.js';
+export * from './dailymotion.js';
+export * from './apple-music.js';
+export * from './apple-podcasts.js';
+export * from './soundcloud.js';
+export * from './deezer.js';
+export * from './tidal.js';
+export * from './twitter.js';
+export * from './instagram.js';
+export * from './threads.js';
+export * from './bluesky.js';
+export * from './mastodon.js';
+export * from './linkedin.js';
+export * from './reddit.js';
+export * from './pinterest.js';

package/dist/utils/index.js

@@ -0,0 +1,25 @@
+const PADDING_BY_ASPECT_RATIO = {
+    '1:1': 'padding-top: 100%;',
+    '16:9': 'padding-top: 56.25%;',
+    '4:3': 'padding-top: 75%;',
+    '3:2': 'padding-top: 66.66%;'
+};
+export const getPadding = (aspectRatio = '16:9') => PADDING_BY_ASPECT_RATIO[aspectRatio] ?? PADDING_BY_ASPECT_RATIO['16:9'];
+export * from './youtube.js';
+export * from './spotify.js';
+export * from './tiktok.js';
+export * from './twitch.js';
+export * from './dailymotion.js';
+export * from './apple-music.js';
+export * from './apple-podcasts.js';
+export * from './soundcloud.js';
+export * from './deezer.js';
+export * from './tidal.js';
+export * from './twitter.js';
+export * from './instagram.js';
+export * from './threads.js';
+export * from './bluesky.js';
+export * from './mastodon.js';
+export * from './linkedin.js';
+export * from './reddit.js';
+export * from './pinterest.js';

package/dist/utils/instagram.d.ts

@@ -0,0 +1,2 @@
+export declare const extractInstagramId: (url: string) => string | null;
+export declare const getInstagramEmbedUrl: (url: string) => string | null;

package/dist/utils/instagram.js

@@ -0,0 +1,21 @@
+export const extractInstagramId = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        if (!hostname.includes('instagram.com')) {
+            return null;
+        }
+        const match = urlObj.pathname.match(/\/(?:p|reel|tv)\/([^/?#]+)/);
+        return match?.[1] ?? null;
+    }
+    catch {
+        return null;
+    }
+};
+export const getInstagramEmbedUrl = (url) => {
+    const postId = extractInstagramId(url);
+    if (!postId) {
+        return null;
+    }
+    return `https://www.instagram.com/p/${postId}/embed`;
+};

package/dist/utils/linkedin.d.ts

@@ -0,0 +1,7 @@
+export interface LinkedInUrlInfo {
+    postId: string;
+    isValid: boolean;
+    originalUrl: string;
+}
+export declare const extractLinkedInPostId: (url: string) => string | null;
+export declare const getLinkedInEmbedUrl: (url: string) => string | null;

package/dist/utils/linkedin.js

@@ -0,0 +1,38 @@
+export const extractLinkedInPostId = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        if (!hostname.includes('linkedin.com')) {
+            return null;
+        }
+        const activityId = urlObj.pathname.match(/urn:li:activity:(\d+)/)?.[1];
+        if (activityId) {
+            return activityId;
+        }
+        const ugcPostId = urlObj.pathname.match(/urn:li:ugcPost:(\d+)/)?.[1];
+        if (ugcPostId) {
+            return ugcPostId;
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+};
+export const getLinkedInEmbedUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        if (!hostname.includes('linkedin.com')) {
+            return null;
+        }
+        const path = urlObj.pathname.replace(/\/$/, '');
+        if (!path.includes('/feed/update/')) {
+            return null;
+        }
+        return `https://www.linkedin.com/embed${path}`;
+    }
+    catch {
+        return null;
+    }
+};

package/dist/utils/mastodon.d.ts

@@ -0,0 +1,12 @@
+export interface MastodonUrlInfo {
+    instance: string;
+    path: string;
+    isValid: boolean;
+    originalUrl: string;
+}
+export declare const parseMastodonUrl: (url: string) => MastodonUrlInfo;
+export declare const getMastodonEmbedInfo: (url: string) => {
+    scriptUrl: string;
+    embedUrl: string;
+    instance: string;
+} | null;

package/dist/utils/mastodon.js

@@ -0,0 +1,36 @@
+export const parseMastodonUrl = (url) => {
+    const fallback = {
+        instance: '',
+        path: '',
+        isValid: false,
+        originalUrl: url
+    };
+    try {
+        const urlObj = new URL(url);
+        const path = urlObj.pathname.replace(/\/$/, '');
+        if (!path.includes('/@')) {
+            return fallback;
+        }
+        return {
+            instance: urlObj.origin,
+            path,
+            isValid: true,
+            originalUrl: url
+        };
+    }
+    catch {
+        return fallback;
+    }
+};
+export const getMastodonEmbedInfo = (url) => {
+    const info = parseMastodonUrl(url);
+    if (!info.isValid) {
+        return null;
+    }
+    const embedPath = info.path.endsWith('/embed') ? info.path : `${info.path}/embed`;
+    return {
+        scriptUrl: `${info.instance}/embed.js`,
+        embedUrl: `${info.instance}${embedPath}`,
+        instance: info.instance
+    };
+};

package/dist/utils/pinterest.d.ts

@@ -0,0 +1,2 @@
+export declare const extractPinterestId: (url: string) => string | null;
+export declare const getPinterestPostUrl: (url: string) => string | null;

package/dist/utils/pinterest.js

@@ -0,0 +1,21 @@
+export const extractPinterestId = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const hostname = urlObj.hostname.toLowerCase();
+        if (!hostname.includes('pinterest.') && hostname !== 'pin.it') {
+            return null;
+        }
+        const match = urlObj.pathname.match(/\/pin\/(\d+)/);
+        return match?.[1] ?? null;
+    }
+    catch {
+        return null;
+    }
+};
+export const getPinterestPostUrl = (url) => {
+    const pinId = extractPinterestId(url);
+    if (!pinId) {
+        return null;
+    }
+    return `https://www.pinterest.com/pin/${pinId}/`;
+};

package/dist/utils/reddit.d.ts

@@ -0,0 +1,2 @@
+export declare const extractRedditPostId: (rawUrl: string) => string | null;
+export declare const getRedditEmbedUrl: (rawUrl: string, theme?: "light" | "dark") => string | null;

package/dist/utils/reddit.js

@@ -0,0 +1,45 @@
+export const extractRedditPostId = (rawUrl) => {
+    const trimmed = rawUrl.trim();
+    if (!trimmed) {
+        return null;
+    }
+    try {
+        const url = new URL(trimmed);
+        const hostname = url.hostname.replace(/^www\./, '');
+        const pathParts = url.pathname.split('/').filter(Boolean);
+        if (hostname === 'redd.it') {
+            return pathParts[0] ?? null;
+        }
+        const commentsIndex = pathParts.indexOf('comments');
+        if (commentsIndex !== -1) {
+            return pathParts[commentsIndex + 1] ?? null;
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+};
+export const getRedditEmbedUrl = (rawUrl, theme = 'light') => {
+    try {
+        const url = new URL(rawUrl);
+        const hostname = url.hostname.replace(/^www\./, '');
+        if (hostname !== 'reddit.com' && hostname !== 'redd.it') {
+            return null;
+        }
+        const id = extractRedditPostId(rawUrl);
+        if (!id) {
+            return null;
+        }
+        const pathParts = url.pathname.split('/').filter(Boolean);
+        const commentsIndex = pathParts.indexOf('comments');
+        if (commentsIndex !== -1 && pathParts.length >= commentsIndex + 2) {
+            const embedPath = `/${pathParts.slice(0, commentsIndex + 2).join('/')}/embed`;
+            return `https://www.reddit.com${embedPath}?theme=${theme}`;
+        }
+        return `https://www.reddit.com/comments/${id}/embed?theme=${theme}`;
+    }
+    catch {
+        return null;
+    }
+};