youtube shorts embed

src/chat/components/RichText.svelte

@@ -4,7 +4,7 @@
   const urlRegex = /(https?:\/\/[^\s]+)/g;
   const parts = $derived(text.split(urlRegex));
 
-  type EmbedType = "youtube" | "twitch" | "kick" | "image" | "link";
+  type EmbedType = "youtube" | "youtube-shorts" | "twitch" | "kick" | "image" | "link";
   interface EmbedData {
     type: EmbedType;
     url: string;
@@ -23,6 +23,12 @@
         continue;
       }
 
+      const ytShortsMatch = url.match(/(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
+      if (ytShortsMatch) {
+        results.push({ type: "youtube-shorts", url, videoId: ytShortsMatch[1] });
+        continue;
+      }
+
       const ytMatch = url.match(
         /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/,
       );
@@ -65,6 +71,7 @@
   const DEFAULT_COLLAPSED_STATES: Record<EmbedType, boolean> = {
     image: false,
     youtube: true,
+    "youtube-shorts": false,
     twitch: true,
     kick: true,
     link: false,
@@ -124,6 +131,8 @@
             <div class="embed-type-label">
               {#if embed.type === 'youtube'}
                 <i class="fab fa-youtube" style="color: #ff0000;"></i> YouTube
+              {:else if embed.type === 'youtube-shorts'}
+                <i class="fab fa-youtube" style="color: #ff0000;"></i> YouTube Shorts
               {:else if embed.type === 'twitch'}
                 <i class="fab fa-twitch" style="color: #9146FF;"></i> Twitch
               {:else if embed.type === 'kick'}
@@ -164,6 +173,19 @@
                     class="media-iframe"
                   ></iframe>
                 </div>
+              {:else if embed.type === "youtube-shorts"}
+                <div class="media-embed-container">
+                  <iframe
+                    width="315"
+                    height="560"
+                    src="https://www.youtube.com/embed/{embed.videoId}"
+                    title="YouTube Shorts player"
+                    frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowfullscreen
+                    class="media-iframe"
+                  ></iframe>
+                </div>
               {:else if embed.type === "twitch"}
                 <div class="media-embed-container">
                   <iframe