Add TikTok player iframe

Use TikTok's supported player endpoint rather than injecting its oEmbed script.

src/app/components/url-preview/TikTokEmbed.css.tsx

@@ -112,5 +112,7 @@ export const TikTokEmbedContainer = style([
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#000',
+    border: 'none',
+    display: 'block',
   },
 ]);

src/app/components/url-preview/TikTokEmbed.tsx

@@ -42,6 +42,12 @@ export function isTikTokUrl(url: string): boolean {
   return TIKTOK_URL_PATTERNS.some((pattern) => pattern.test(url));
 }
 
+function extractTikTokVideoId(url: string, embedHtml = ''): string | null {
+  const urlMatch = url.match(/\/video\/(\d+)/i) ?? url.match(/\/v\/(\d+)/i);
+  const embedMatch = embedHtml.match(/data-video-id=["'](\d+)["']/i);
+  return urlMatch?.[1] ?? embedMatch?.[1] ?? null;
+}
+
 /**
  * Fetches TikTok video metadata using oEmbed API
  * @param url The TikTok video URL
@@ -53,29 +59,39 @@ async function fetchTikTokOEmbed(url: string): Promise<{
   authorUrl: string;
   thumbnailUrl: string;
   embedHtml: string;
+  videoId: string | null;
 } | null> {
   try {
     const oembedUrl = `${TIKTOK_OEMBED_API}?url=${encodeURIComponent(url)}`;
     const response = await fetch(oembedUrl);
     if (!response.ok) return null;
-    
+
     const data = await response.json();
-    
+
     return {
       title: data.title || 'TikTok Video',
       authorName: data.author_name || 'Unknown',
       authorUrl: data.author_url || url,
       thumbnailUrl: data.thumbnail_url || '',
       embedHtml: data.html || '',
+      videoId: extractTikTokVideoId(url, data.html || ''),
     };
   } catch {
     return null;
   }
 }
 
-type TikTokEmbedState = 
+type TikTokEmbedState =
   | { status: 'loading' }
-  | { status: 'loaded'; title: string; authorName: string; authorUrl: string; thumbnailUrl: string; embedHtml: string }
+  | {
+      status: 'loaded';
+      title: string;
+      authorName: string;
+      authorUrl: string;
+      thumbnailUrl: string;
+      embedHtml: string;
+      videoId: string | null;
+    }
   | { status: 'error' };
 
 type TikTokEmbedProps = {
@@ -88,7 +104,7 @@ type TikTokEmbedProps = {
  */
 export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref) => {
   const [state, setState] = useState<TikTokEmbedState>({ status: 'loading' });
-  const [showEmbed, setShowEmbed] = useState(false);
+  const [showPlayer, setShowPlayer] = useState(false);
 
   // Fetch video info on mount
   useEffect(() => {
@@ -96,7 +112,7 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
 
     fetchTikTokOEmbed(url).then((info) => {
       if (cancelled) return;
-      
+
       if (info) {
         setState({
           status: 'loaded',
@@ -105,6 +121,7 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
           authorUrl: info.authorUrl,
           thumbnailUrl: info.thumbnailUrl,
           embedHtml: info.embedHtml,
+          videoId: info.videoId,
         });
       } else {
         setState({ status: 'error' });
@@ -134,9 +151,9 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
             TikTok - Loading...
           </Text>
         </div>
-        <Box 
-          className={css.TikTokThumbnailContainer} 
-          alignItems="Center" 
+        <Box
+          className={css.TikTokThumbnailContainer}
+          alignItems="Center"
           justifyContent="Center"
           style={{ background: '#000', display: 'flex' }}
         >
@@ -169,7 +186,7 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
   }
 
   // Loaded state - show thumbnail or embed
-  if (!showEmbed) {
+  if (!showPlayer) {
     return (
       <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
         <div className={css.TikTokEmbedHeader}>
@@ -203,23 +220,27 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
         <button
           type="button"
           className={css.TikTokThumbnailButton}
-          onClick={() => setShowEmbed(true)}
-          aria-label="Load TikTok video"
+          onClick={() => setShowPlayer(true)}
+          aria-label="Play TikTok video"
         >
-          {state.thumbnailUrl && (
-            <img 
-              src={state.thumbnailUrl} 
+          {state.thumbnailUrl ? (
+            <img
+              src={state.thumbnailUrl}
               alt={state.title}
               className={css.TikTokThumbnail}
               crossOrigin="anonymous"
             />
-          )}
+          ) : null}
         </button>
       </Box>
     );
   }
 
-  // Show embed (using dangerouslySetInnerHTML for TikTok's oEmbed HTML)
+  const playerUrl = state.videoId
+    ? `https://www.tiktok.com/player/v1/${state.videoId}?autoplay=1`
+    : null;
+
+  // Use TikTok's documented player instead of injecting the oEmbed script.
   return (
     <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
       <div className={css.TikTokEmbedHeader}>
@@ -236,10 +257,20 @@ export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref)
           {state.title}
         </Text>
       </div>
-      <div 
-        className={css.TikTokEmbedContainer}
-        dangerouslySetInnerHTML={{ __html: state.embedHtml }}
-      />
+      {playerUrl ? (
+        <iframe
+          className={css.TikTokEmbedContainer}
+          src={playerUrl}
+          title="TikTok video player"
+          allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
+          allowFullScreen
+        />
+      ) : (
+        <div
+          className={css.TikTokEmbedContainer}
+          dangerouslySetInnerHTML={{ __html: state.embedHtml }}
+        />
+      )}
     </Box>
   );
 });