add video poster and audio sample, alter deploment

deploy.sh

@@ -1,11 +1,11 @@
 #!/bin/bash
-# filepath: /Users/tbehrend/Repositories/thatsme/deploy-shared-no-db.sh
+# filepath: /Users/tbehrend/Repositories/thatsme/deploy.sh
 
-echo "🚀 Creating deployment packages for 'That's Me' development structure..."
+echo "🚀 Creating deployment packages for 'That's Me' deployment structure..."
 
 # Clean up previous deployment
-rm -rf development
-mkdir -p development/{frontend,backend}
+rm -rf deployment
+mkdir -p deployment/{frontend,backend}
 
 echo "📦 Building frontend..."
 cd frontend
@@ -26,29 +26,29 @@ cd ..
 echo "📂 Creating FRONTEND deployment structure..."
 
 # Frontend deployment - complete Quasar SPA
-cp -r frontend/dist/spa/* development/frontend/
-cp -r frontend/public/images development/frontend/
-cp -r frontend/public/videos development/frontend/
+cp -r frontend/dist/spa/* deployment/frontend/
+cp -r frontend/public/images deployment/frontend/
+cp -r frontend/public/videos deployment/frontend/
 if [ -d "frontend/public/audio" ]; then
-    cp -r frontend/public/audio development/frontend/
+    cp -r frontend/public/audio deployment/frontend/
 fi
 
-# Create frontend config for development deployment
-cat > development/frontend/config.js << 'EOF'
-// Frontend configuration for development deployment
+# Create frontend config for deployment
+cat > deployment/frontend/config.js << 'EOF'
+// Frontend configuration for deployment
 window.APP_CONFIG = {
   API_BASE_URL: '/api',
   APP_URL: window.location.origin,
-  environment: 'development',
+  environment: 'production',
   database: false
 };
 EOF
 
 # Update frontend index.html to include config
-sed -i.bak 's|</head>|  <script src="/config.js"></script>\n  </head>|' development/frontend/index.html
+sed -i.bak 's|</head>|  <script src="/config.js"></script>\n  </head>|' deployment/frontend/index.html
 
 # Create frontend .htaccess for SPA routing
-cat > development/frontend/.htaccess << 'EOF'
+cat > deployment/frontend/.htaccess << 'EOF'
 <IfModule mod_rewrite.c>
     <IfModule mod_negotiation.c>
         Options -MultiViews -Indexes
@@ -86,41 +86,41 @@ EOF
 echo "📂 Creating BACKEND deployment structure..."
 
 # Backend deployment - Laravel application
-mkdir -p development/backend/{app,bootstrap,config,database,resources,routes,storage,vendor,public}
+mkdir -p deployment/backend/{app,bootstrap,config,database,resources,routes,storage,vendor,public}
 
 # Copy Laravel core files
-cp -r backend/app development/backend/
-cp -r backend/bootstrap development/backend/
-cp -r backend/config development/backend/
-cp -r backend/database development/backend/
-cp -r backend/resources development/backend/
-cp -r backend/routes development/backend/
-cp -r backend/storage development/backend/
-cp -r backend/vendor development/backend/
+cp -r backend/app deployment/backend/
+cp -r backend/bootstrap deployment/backend/
+cp -r backend/config deployment/backend/
+cp -r backend/database deployment/backend/
+cp -r backend/resources deployment/backend/
+cp -r backend/routes deployment/backend/
+cp -r backend/storage deployment/backend/
+cp -r backend/vendor deployment/backend/
 
 # Copy backend root files
-cp backend/artisan development/backend/
-cp backend/composer.json development/backend/
-cp backend/composer.lock development/backend/
+cp backend/artisan deployment/backend/
+cp backend/composer.json deployment/backend/
+cp backend/composer.lock deployment/backend/
 if [ -f "backend/vite.config.js" ]; then
-    cp backend/vite.config.js development/backend/
+    cp backend/vite.config.js deployment/backend/
 fi
 
 # Copy built assets to public
 if [ -d "backend/public/build" ]; then
-    cp -r backend/public/build development/backend/public/
+    cp -r backend/public/build deployment/backend/public/
 fi
 
 # Copy other public assets
 if [ -d "backend/public" ]; then
-    rsync -av --exclude='build' backend/public/ development/backend/public/
+    rsync -av --exclude='build' backend/public/ deployment/backend/public/
 fi
 
-# Create backend index.php for development structure
-cat > development/backend/public/index.php << 'EOF'
+# Create backend index.php for deployment structure
+cat > deployment/backend/public/index.php << 'EOF'
 <?php
 /**
- * Laravel Backend for That's Me Development
+ * Laravel Backend for That's Me Deployment
  */
 
 use Illuminate\Contracts\Http\Kernel;
@@ -144,7 +144,7 @@ $kernel->terminate($request, $response);
 EOF
 
 # Create backend .htaccess
-cat > development/backend/public/.htaccess << 'EOF'
+cat > deployment/backend/public/.htaccess << 'EOF'
 <IfModule mod_rewrite.c>
     <IfModule mod_negotiation.c>
         Options -MultiViews -Indexes
@@ -173,7 +173,7 @@ cat > development/backend/public/.htaccess << 'EOF'
     Header always set X-Frame-Options DENY
     Header always set X-XSS-Protection "1; mode=block"
     
-    # CORS for development
+    # CORS for deployment
     Header always set Access-Control-Allow-Origin "*"
     Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
     Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
@@ -181,7 +181,7 @@ cat > development/backend/public/.htaccess << 'EOF'
 EOF
 
 # Create API routes for backend (database-free)
-cat > development/backend/routes/web.php << 'EOF'
+cat > deployment/backend/routes/web.php << 'EOF'
 <?php
 
 use Illuminate\Support\Facades\Route;
@@ -195,7 +195,7 @@ Route::prefix('api')->group(function () {
                 'status' => 'ok', 
                 'app' => 'That\'s Me Backend API',
                 'version' => '1.0.0',
-                'mode' => 'development-no-database',
+                'mode' => 'deployment-no-database',
                 'timestamp' => now()->toISOString()
             ]);
         });
@@ -324,21 +324,21 @@ Route::prefix('api')->group(function () {
 // Simple API info page
 Route::get('/', function () {
     return response()->json([
-        'app' => 'That\'s Me Backend API (Development)',
+        'app' => 'That\'s Me Backend API (Deployment)',
         'frontend_path' => '../frontend/',
         'api_endpoints' => [
             'health' => '/api/health',
             'life_events' => '/api/life-events',
             'entry_detail' => '/api/entries/{id}'
         ],
-        'note' => 'Database-free development mode with mock LifeWave data'
+        'note' => 'Database-free deployment mode with mock LifeWave data'
     ]);
 });
 EOF
 
-# Create backend environment file for development
-cat > development/backend/.env.production << 'EOF'
-APP_NAME="That's Me Backend (Development)"
+# Create backend environment file for deployment
+cat > deployment/backend/.env.production << 'EOF'
+APP_NAME="That's Me Backend (Deployment)"
 APP_ENV=production
 APP_KEY=
 APP_DEBUG=false
@@ -349,7 +349,7 @@ LOG_DEPRECATIONS_CHANNEL=null
 LOG_LEVEL=error
 
 # NO DATABASE CONFIGURATION
-# Database is disabled for this development deployment
+# Database is disabled for this deployment
 
 # Cache Configuration (file-based, no database)
 BROADCAST_DRIVER=log
@@ -364,7 +364,7 @@ MAIL_MAILER=log
 EOF
 
 # Create root .htaccess for combined deployment
-cat > development/.htaccess << 'EOF'
+cat > deployment/.htaccess << 'EOF'
 <IfModule mod_rewrite.c>
     <IfModule mod_negotiation.c>
         Options -MultiViews -Indexes
@@ -409,12 +409,12 @@ cat > development/.htaccess << 'EOF'
 EOF
 
 # Create combined deployment instructions
-cat > development/README.md << 'EOF'
-# That's Me - Development Deployment
+cat > deployment/README.md << 'EOF'
+# That's Me - Production Deployment
 
 ## Structure
 ```
-development/
+deployment/
 ├── frontend/           # Quasar SPA build
 │   ├── index.html
 │   ├── js/
@@ -436,7 +436,7 @@ development/
 ## Deployment Instructions
 
 ### Option 1: Combined Deployment (Single Domain)
-1. Upload entire `development/` folder contents to web root
+1. Upload entire `deployment/` folder contents to web root
 2. Configure backend:
    - Rename `backend/.env.production` to `backend/.env`
    - Generate APP_KEY (see below)
@@ -463,7 +463,7 @@ echo 'APP_KEY=' . 'base64:' . base64_encode(random_bytes(32));
 
 ## Features
 - ✅ LifeWave visualization with anime.js
-- ✅ Mock life events data for development
+- ✅ Mock life events data for deployment
 - ✅ Database-free operation
 - ✅ CORS configured for cross-origin requests
 - ✅ File-based sessions and cache
@@ -474,11 +474,11 @@ echo 'APP_KEY=' . 'base64:' . base64_encode(random_bytes(32));
 - Life events: `/api/life-events` (returns events with animation config)
 - Entry detail: `/api/entries/1`
 
-Perfect for development and demo environments!
+Perfect for production and demo environments!
 EOF
 
 # Create individual deployment instructions
-cat > development/frontend/DEPLOYMENT_INSTRUCTIONS.md << 'EOF'
+cat > deployment/frontend/DEPLOYMENT_INSTRUCTIONS.md << 'EOF'
 # Frontend Deployment
 
 ## Standalone Frontend Deployment
@@ -488,14 +488,14 @@ Upload contents of this folder to web root for frontend-only deployment.
 - Complete Quasar SPA build with LifeWave visualization
 - Images, videos, and audio assets
 - SPA routing via .htaccess
-- Development configuration
+- Production configuration
 
 ## Dependencies
 - Backend API for data (configure API_BASE_URL in config.js)
 - anime.js for wave animations (included in build)
 EOF
 
-cat > development/backend/DEPLOYMENT_INSTRUCTIONS.md << 'EOF'
+cat > deployment/backend/DEPLOYMENT_INSTRUCTIONS.md << 'EOF'
 # Backend Deployment
 
 ## Laravel API Deployment
@@ -518,15 +518,15 @@ Upload contents of this folder to web root for backend-only deployment.
 - Optimized for anime.js LifeWave visualizations
 EOF
 
-echo "✅ Development deployment structure created successfully!"
+echo "✅ Deployment structure created successfully!"
 echo ""
-echo "📁 Created development structure:"
-echo "   - development/frontend/ (Quasar SPA)"
-echo "   - development/backend/ (Laravel API)"
-echo "   - development/.htaccess (Combined routing)"
+echo "📁 Created deployment structure:"
+echo "   - deployment/frontend/ (Quasar SPA)"
+echo "   - deployment/backend/ (Laravel API)"
+echo "   - deployment/.htaccess (Combined routing)"
 echo ""
 echo "🎯 Deployment Options:"
-echo "   1. Combined: Upload entire development/ folder"
+echo "   1. Combined: Upload entire deployment/ folder"
 echo "   2. Separate: Upload frontend/ and backend/ to different domains"
 echo ""
 echo "🌊 Features:"
@@ -535,4 +535,4 @@ echo "   - Mock data with animation config"
 echo "   - Database-free operation"
 echo "   - anime.js integration support"
 echo ""
-echo "📋 Next: Follow README.md in development/ folder"
+echo "📋 Next: Follow README.md in deployment/ folder"

frontend/src/pages/EntryDetailPage.vue

@@ -66,7 +66,6 @@
 
       <!-- Entry Description -->
       <div v-if="entry.description" class="entry-description">
-        <h3>Description</h3>
         <p class="description-text">{{ entry.description }}</p>
       </div>
 
@@ -94,7 +93,7 @@
                 <div class="video-thumbnail" @click="openVideoLightbox(video, index)">
                   <video
                     :src="video.url"
-                    :poster="video.poster"
+                    :poster="getVideoPoster(video)"
                     class="video-preview"
                     muted
                     preload="metadata"
@@ -145,7 +144,6 @@
 
       <!-- Audio Recordings -->
       <div v-if="entry.audioRecordings && entry.audioRecordings.length > 0" class="audio-section">
-        <h3>Audio Recordings</h3>
         <div class="audio-list">
           <div 
             v-for="(audio, index) in entry.audioRecordings" 
@@ -249,7 +247,7 @@
             v-if="currentVideo"
             ref="lightboxVideo"
             :src="currentVideo.url"
-            :poster="currentVideo.poster"
+            :poster="getVideoPoster(currentVideo)"
             controls
             class="lightbox-video"
             @loadedmetadata="onVideoLoaded"
@@ -379,7 +377,7 @@ export default {
     // Mark specific images as favorites (indices 2, 5, and 9)
     const favoriteImageIndices = [2, 5, 9]
     
-    // Sample entry data (for testing)
+    // Sample entry data (for testing) - Updated with poster paths
     const sampleEntry = {
       id: 1,
       title: "Beginn des neuen Abenteuers",
@@ -400,8 +398,16 @@ export default {
         { name: "Gespräch mit Familie", url: "/audio/sample2.mp3" }
       ],
       videoRecordings: [
-        { name: "UHD Nature Video", url: "/videos/3191901-uhd_3840_2160_25fps.mp4", poster: "/videos/3191901-uhd_3840_2160_25fps_thumb.png" },
-        { name: "HD Landscape Video", url: "/videos/3326928-hd_1920_1080_24fps.mp4", poster: "/videos/3326928-hd_1920_1080_24fps_thumb.png" }
+        { 
+          name: "UHD Nature Video", 
+          url: "/videos/3191901-uhd_3840_2160_25fps.mp4", 
+          poster: "/videos/thumbs/3191901-uhd_3840_2160_25fps_thumb.jpg"
+        },
+        { 
+          name: "HD Landscape Video", 
+          url: "/videos/3326928-hd_1920_1080_24fps.mp4", 
+          poster: "/videos/thumbs/3326928-hd_1920_1080_24fps_thumb.jpg"
+        }
       ],
       relatedPersons: [
         { id: 1, name: "Maria Schmidt", relation: "Freundin", avatar: null },
@@ -548,7 +554,24 @@ export default {
       console.log('Edit entry:', entry.value.id)
       // Example: router.push(`/edit/${entry.value.id}`)
     }
-    
+
+    // New method to get video poster/thumbnail
+    const getVideoPoster = (video) => {
+      // If video has a poster property, use it
+      if (video.poster) {
+        return video.poster
+      }
+      
+      // Otherwise, try to generate a thumbnail path based on video filename
+      if (video.url) {
+        const videoName = video.url.split('/').pop().split('.')[0]
+        return `/videos/thumbs/${videoName}_thumb.jpg`
+      }
+      
+      // Fallback to a default poster image
+      return '/images/video-placeholder.png'
+    }
+
     onMounted(() => {
       // If accessing via route, you might want to load data based on route params
       const entryId = route.params.id
@@ -562,7 +585,7 @@ export default {
       entry,
       allImages,
       additionalImagesGallery,
-      favoriteImageIndices, // Added this to fix the ESLint error
+      favoriteImageIndices,
       currentSlide,
       currentVideoSlide,
       showVideoLightbox,
@@ -576,6 +599,7 @@ export default {
       getEmotionalLevelClass,
       getEmotionalLevelText,
       getInitials,
+      getVideoPoster,
       openVideoLightbox,
       pauseCurrentVideo,
       previousVideo,

frontend/src/pages/WavePage.vue

@@ -58,7 +58,7 @@ export default defineComponent({
           { url: "/images/see.png", caption: "Der schöne Ort" }
         ],
         audioRecordings: [
-          { name: "Gedanken zum Tag", url: "/audio/sample.mp3" }
+          { name: "Gedanken zum Tag", url: "/audio/ferien_erlebnisbericht.mp3" }
         ],
         videoRecordings: [
           { name: "UHD Nature Video", url: "/videos/3191901-uhd_3840_2160_25fps.mp4" },