add Analyse

frontend/src/pages/RecipeDetail.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { fetchRecipe, updateRecipe, deleteRecipe } from '../api';
+import { useAuth } from '../context/AuthContext';
 import CategoryBadge from '../components/CategoryBadge';
 import IngredientList from '../components/IngredientList';
 import StepList from '../components/StepList';
@@ -10,6 +11,7 @@ const CATEGORIES = ['Frühstück', 'Hauptgericht', 'Dessert', 'Snack', 'Getränk
 export default function RecipeDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
+  const { user } = useAuth();
   const [recipe, setRecipe] = useState(null);
   const [loading, setLoading] = useState(true);
   const [editing, setEditing] = useState(false);
@@ -29,7 +31,7 @@ export default function RecipeDetail() {
   };
 
   const handleSave = async () => {
-    await updateRecipe(id, form);
+    await updateRecipe(id, { ...form, user_id: user?.id || null });
     setRecipe(form);
     setEditing(false);
   };
@@ -45,7 +47,28 @@ export default function RecipeDetail() {
   if (loading) return <div className="text-center py-12 text-gray-400">Laden...</div>;
   if (!recipe) return null;
 
-  const videoId = recipe.tiktok_url?.match(/video\/(\d+)/)?.[1];
+  const sourceUrl = recipe.source_url || recipe.tiktok_url;
+  const sourceType = recipe.source || 'tiktok';
+
+  let videoId = null;
+  let embedUrl = null;
+  if (sourceUrl) {
+    if (sourceType === 'instagram') {
+      const igMatch = sourceUrl.match(/instagram\.com\/(?:p|reel)\/([A-Za-z0-9_-]+)/);
+      if (igMatch) {
+        videoId = igMatch[1];
+        embedUrl = `https://www.instagram.com/reel/${videoId}/embed/`;
+      }
+    } else {
+      const ttMatch = sourceUrl.match(/video\/(\d+)/);
+      if (ttMatch) {
+        videoId = ttMatch[1];
+        embedUrl = `https://www.tiktok.com/embed/v2/${videoId}`;
+      }
+    }
+  }
+
+  const author = recipe.source_author || recipe.tiktok_author;
 
   return (
     <div className="max-w-2xl mx-auto">
@@ -54,10 +77,10 @@ export default function RecipeDetail() {
       </Link>
 
       <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-        {videoId && (
-          <div className="w-full" style={{ paddingBottom: '177.78%', position: 'relative' }}>
+        {embedUrl && (
+          <div className="w-full" style={{ paddingBottom: sourceType === 'instagram' ? '100%' : '177.78%', position: 'relative' }}>
             <iframe
-              src={`https://www.tiktok.com/embed/v2/${videoId}`}
+              src={embedUrl}
               className="absolute inset-0 w-full h-full"
               allowFullScreen
             />
@@ -128,9 +151,9 @@ export default function RecipeDetail() {
             <StepList steps={recipe.steps} />
           )}
 
-          {recipe.tiktok_author && (
+          {author && (
             <p className="text-xs text-gray-400">
-              Von: @{recipe.tiktok_author}
+              Quelle: @{author} ({sourceType === 'instagram' ? 'Instagram' : 'TikTok'})
             </p>
           )}