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>
This commit is contained in:
@@ -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' && (
|
||||
<audio></audio>
|
||||
)}
|
||||
{dream.input.inputType === 'image' && (
|
||||
<img alt={dream.input.imgAlt}></img>
|
||||
)}
|
||||
{dream.input.inputType === 'audio' && (<audio></audio>)}
|
||||
{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 === 'audio' && dream.input.transcript)
|
||||
|| (dream.input.inputType === 'image' && dream.input.description)}
|
||||
{(dream.input.inputType === 'text' && dream.input.input) || (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">
|
||||
<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>)}
|
||||
|
||||
{/* Carousel for KI-Bild and KI-Video if both exist */}
|
||||
{dream.ai?.image && dream.ai.video && dream.ai.image !== '' && 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-Medien</span>
|
||||
</div>
|
||||
<Slider
|
||||
dots={true}
|
||||
infinite={true}
|
||||
speed={500}
|
||||
slidesToShow={1}
|
||||
slidesToScroll={1}
|
||||
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
|
||||
controls
|
||||
<audio
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user