integrated carousel for displaying AI media (image/video), enhanced conditional rendering logic for better media support, and included react-slick for improved user experience.

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

src/pages/DreamPage.tsx

@@ -6,6 +6,9 @@ import MockUsers from '../data/MockUsers';
 import User from '../types/User';
 import type Dream from "../types/Dream.ts";
 import {formatDateNumeric, formatDateWithTime} from '../utils/DateUtils';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
 export default function DreamPage() {
     const {id} = useParams<{ id: string }>();
@@ -19,17 +22,17 @@ export default function DreamPage() {
             <button
                 onClick={() => navigate(-1)}
                 className="mb-4 hover:underline"
-                style={{ color: 'var(--accent)' }}
+                style={{color: 'var(--accent)'}}
             >
                 ← Zurück
             </button>
-            <p style={{ color: 'var(--text-muted)' }}>Traum nicht gefunden.</p>
+            <p style={{color: 'var(--text-muted)'}}>Traum nicht gefunden.</p>
         </div>);
     }
 
     return (<div className="page min-h-screen pb-20">
         {/* Header */}
-        <div className="relative" style={{ background: 'var(--accent-gradient)' }}>
+        <div className="relative" style={{background: 'var(--accent-gradient)'}}>
             <div className="p-4 sm:p-6 md:p-8 text-white">
                 <button
                     onClick={() => navigate(-1)}
@@ -63,17 +66,11 @@ export default function DreamPage() {
                 </div>
                 {(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
                     <div className="flex justify-center mb-1">
-                        {dream.input.inputType === 'audio' && (
+                        {dream.input.inputType === 'audio' && (<audio></audio>)}
-                            <audio></audio>
+                        {dream.input.inputType === 'image' && (<img alt={dream.input.imgAlt}></img>)}
-                        )}
-                        {dream.input.inputType === 'image' && (
-                            <img alt={dream.input.imgAlt}></img>
-                        )}
                     </div>)}
                 <p className="leading-relaxed text-base sm:text-lg">
-                    {(dream.input.inputType === 'text' && dream.input.input)
+                    {(dream.input.inputType === 'text' && dream.input.input) || (dream.input.inputType === 'audio' && dream.input.transcript) || (dream.input.inputType === 'image' && dream.input.description)}
-                        || (dream.input.inputType === 'audio' && dream.input.transcript)
-                        || (dream.input.inputType === 'image' && dream.input.description)}
                 </p>
             </div>
 
@@ -87,20 +84,75 @@ export default function DreamPage() {
                 </p>
             </div>)}
 
-            {dream.ai?.image && dream.ai.image !== '' && (<div
+
-                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
+            {/* Carousel for KI-Bild and KI-Video if both exist */}
-                <div className="flex items-center mb-4">
+            {dream.ai?.image && dream.ai.video && dream.ai.image !== '' && dream.ai.video !== '' && (
-                    <span className="font-medium dreamy-text">KI-Bild</span>
+                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
-                </div>
+                    <div className="flex items-center mb-4">
-                <div className="flex justify-center">
+                        <span className="font-medium dreamy-text">KI-Medien</span>
-                    <img 
+                    </div>
-                        src={`/assets/dreams/images/${dream.ai.image}`}
+                    <Slider
-                        alt="KI-generiertes Traumbild" 
+                        dots={true}
-                        className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                        infinite={true}
-                        style={{ maxHeight: '70vh' }}
+                        speed={500}
-                    />
+                        slidesToShow={1}
-                </div>
+                        slidesToScroll={1}
-            </div>)}
+                        className="max-w-full mx-auto"
+                    >
+                        <div className="flex justify-center px-2">
+                            <img
+                                src={`/assets/dreams/images/${dream.ai.image}`}
+                                alt="KI-generiertes Traumbild"
+                                className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                                style={{maxHeight: '70vh'}}
+                            />
+                        </div>
+                        <div className="flex justify-center px-2">
+                            <video
+                                controls
+                                src={`/assets/dreams/videos/${dream.ai.video}`}
+                                className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                                style={{maxHeight: '70vh'}}
+                            >
+                                Ihr Browser unterstützt das Video-Element nicht.
+                            </video>
+                        </div>
+                    </Slider>
+                </div>)}
+
+            {/* Show KI-Bild alone if video doesn't exist */}
+            {dream.ai?.image && dream.ai.image !== '' && (!dream.ai.video || dream.ai.video === '') && (
+                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                    <div className="flex items-center mb-4">
+                        <span className="font-medium dreamy-text">KI-Bild</span>
+                    </div>
+                    <div className="flex justify-center">
+                        <img
+                            src={`/assets/dreams/images/${dream.ai.image}`}
+                            alt="KI-generiertes Traumbild"
+                            className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                            style={{maxHeight: '70vh'}}
+                        />
+                    </div>
+                </div>)}
+
+            {/* Show KI-Video alone if image doesn't exist */}
+            {dream.ai?.video && dream.ai.video !== '' && (!dream.ai.image || dream.ai.image === '') && (
+                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                    <div className="flex items-center mb-4">
+                        <span className="font-medium dreamy-text">KI-Video</span>
+                    </div>
+                    <div className="flex justify-center">
+                        <video
+                            controls
+                            src={`/assets/dreams/videos/${dream.ai.video}`}
+                            className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                            style={{maxHeight: '70vh'}}
+                        >
+                            Ihr Browser unterstützt das Video-Element nicht.
+                        </video>
+                    </div>
+                </div>)}
 
             {dream.ai?.audio && dream.ai.audio !== '' && (<div
                 className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
@@ -108,8 +160,10 @@ export default function DreamPage() {
                     <span className="font-medium dreamy-text">KI-Audio</span>
                 </div>
                 <div className="flex justify-center">
-                    <audio 
+                    <audio
-                        controls 
+                        controls
+                        autoPlay
+                        loop
                         src={`/assets/dreams/audio/${dream.ai.audio}`}
                         className="w-full max-w-xs sm:max-w-md md:max-w-lg mx-auto"
                     >
@@ -118,26 +172,9 @@ export default function DreamPage() {
                 </div>
             </div>)}
 
-            {dream.ai?.video && dream.ai.video !== '' && (<div
-                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
-                <div className="flex items-center mb-4">
-                    <span className="font-medium dreamy-text">KI-Video</span>
-                </div>
-                <div className="flex justify-center">
-                    <video 
-                        controls 
-                        src={`/assets/dreams/videos/${dream.ai.video}`}
-                        className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
-                        style={{ maxHeight: '70vh' }}
-                    >
-                        Ihr Browser unterstützt das Video-Element nicht.
-                    </video>
-                </div>
-            </div>)}
-
             <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <h2 className="text-lg font-semibold mb-3 dreamy-text">Details</h2>
-                <div className="space-y-3" style={{ color: 'var(--text-muted)' }}>
+                <div className="space-y-3" style={{color: 'var(--text-muted)'}}>
                     <div className="flex flex-col sm:flex-row sm:justify-between">
                         <span className="font-medium mb-1 sm:mb-0">Eingabetyp</span>
                         <span className="capitalize">{dream.input.inputType}</span>