From a2af9ba8f3b593373904d010446e2b6a3e760b96 Mon Sep 17 00:00:00 2001
From: dilgenfritz <drewilgenfritz@gmail.com>
Date: Thu, 30 Oct 2025 20:12:00 -0500
Subject: [PATCH] Implement working Porn Cinema media player with video library

- Added complete porn cinema media player with dedicated HTML page
- Implemented PornCinema class with video playback, controls, keyboard shortcuts
- Added VideoLibrary class with thumbnail generation and duration display
- Canvas-based thumbnails with aspect ratio support for portrait/landscape videos
- Playlist functionality with save/load, shuffle, auto-advance
- Desktop file manager integration for video file access
- Enhanced MIME type handling with fallback strategies for .mov files
- Professional dark cinema theme with responsive design
- One-handed keyboard controls for playback and navigation
- Quality selection, theater mode, fullscreen support
- Working video playback with proper file:// URL handling for Electron
---
 porn-cinema.html                   |  13 +-
 src/features/media/pornCinema.js   | 219 +++++++++++++++-
 src/features/media/videoLibrary.js | 396 ++++++++++++++++++++++++++++-
 src/styles/porn-cinema.css         |   5 +
 4 files changed, 604 insertions(+), 29 deletions(-)

diff --git a/porn-cinema.html b/porn-cinema.html
index a02760d..dafdd3c 100644
--- a/porn-cinema.html
+++ b/porn-cinema.html
@@ -198,7 +198,7 @@
     
     <script>
         // Initialize cinema when page loads
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             console.log('🎬 Initializing Porn Cinema...');
             
             // Initialize desktop file manager if in Electron environment
@@ -219,18 +219,23 @@
                 
                 window.desktopFileManager = new DesktopFileManager(minimalDataManager);
                 console.log('🖥️ Desktop File Manager initialized for porn cinema');
+                
+                // Wait a moment for the desktop file manager to fully initialize
+                // The init() method is async and sets up video directories
+                await new Promise(resolve => setTimeout(resolve, 500));
+                
             } else if (!window.electronAPI) {
                 console.warn('⚠️ Running in browser mode - video management limited');
             }
             
-            // Initialize the cinema
+            // Initialize the cinema after desktop file manager is ready
             window.pornCinema = new PornCinema();
-            window.pornCinema.initialize();
+            await window.pornCinema.initialize();
             
             // Hide loading overlay
             setTimeout(() => {
                 document.getElementById('cinema-loading').style.display = 'none';
-            }, 1500);
+            }, 1000);
         });
         
         // Back to home functionality
diff --git a/src/features/media/pornCinema.js b/src/features/media/pornCinema.js
index aabe048..bb5764e 100644
--- a/src/features/media/pornCinema.js
+++ b/src/features/media/pornCinema.js
@@ -13,6 +13,9 @@ class PornCinema {
         this.volume = 0.7;
         this.playbackRate = 1.0;
         this.currentQuality = 'auto';
+        this.shouldAutoPlay = false;
+        this.fallbackMimeTypes = null;
+        this.currentVideoSrc = null;
         
         // Playlist
         this.playlist = [];
@@ -176,16 +179,39 @@ class PornCinema {
 
     async playVideo(video) {
         try {
-            console.log(`🎬 Playing video: ${video.name}`);
-            
             this.currentVideo = video;
             this.showLoading();
             
-            // Update video source
-            this.videoSource.src = video.path;
-            this.videoSource.type = `video/${video.format || 'mp4'}`;
+            // Convert path to proper format for Electron
+            let videoSrc = video.path;
+            if (window.electronAPI && video.path.match(/^[A-Za-z]:\\/)) {
+                // Absolute Windows path - convert to file:// URL
+                videoSrc = `file:///${video.path.replace(/\\/g, '/')}`;
+            } else if (window.electronAPI && !video.path.startsWith('file://')) {
+                // Relative path in Electron - use as is
+                videoSrc = video.path;
+            }
             
-            // Load and play
+            // Check if browser can play this format
+            const canPlayResult = this.checkCanPlay(video.format || video.path);
+            console.log(`🎬 Playing ${video.name} (${video.format}) - Can play: ${canPlayResult.canPlay ? 'Yes' : 'No'}`);
+            
+            // For .mov files, try multiple MIME types as fallback
+            const mimeTypes = this.getVideoMimeTypes(video.format || video.path);
+            console.log(`🎬 Trying MIME types: ${mimeTypes.join(', ')}`);
+            
+            // Update video source - try primary MIME type first
+            this.videoSource.src = videoSrc;
+            this.videoSource.type = canPlayResult.mimeType || mimeTypes[0];
+            
+            // Store fallback MIME types for error handling
+            this.fallbackMimeTypes = mimeTypes.slice(1);
+            this.currentVideoSrc = videoSrc;
+            
+            // Set flag to auto-play when loaded
+            this.shouldAutoPlay = true;
+            
+            // Load the video
             this.videoElement.load();
             
             // Update UI
@@ -199,6 +225,53 @@ class PornCinema {
         }
     }
 
+    checkCanPlay(formatOrPath) {
+        let extension = formatOrPath;
+        if (formatOrPath.includes('.')) {
+            extension = formatOrPath.toLowerCase().split('.').pop();
+        }
+        
+        const testVideo = document.createElement('video');
+        const mimeTypes = this.getVideoMimeTypes(formatOrPath);
+        
+        for (const mimeType of mimeTypes) {
+            const canPlay = testVideo.canPlayType(mimeType);
+            if (canPlay === 'probably' || canPlay === 'maybe') {
+                return { canPlay: true, mimeType };
+            }
+        }
+        
+        return { canPlay: false, mimeType: null };
+    }
+
+    getVideoMimeTypes(formatOrPath) {
+        let extension = formatOrPath;
+        if (formatOrPath.includes('.')) {
+            extension = formatOrPath.toLowerCase().split('.').pop();
+        }
+        
+        switch (extension.toLowerCase()) {
+            case 'mp4':
+                return ['video/mp4'];
+            case 'webm':
+                return ['video/webm'];
+            case 'mov':
+            case 'qt':
+                // Try multiple MIME types for .mov files
+                return ['video/quicktime', 'video/mp4', 'video/x-quicktime'];
+            case 'avi':
+                return ['video/avi', 'video/x-msvideo'];
+            case 'mkv':
+                return ['video/x-matroska'];
+            case 'ogg':
+                return ['video/ogg'];
+            case 'm4v':
+                return ['video/mp4'];
+            default:
+                return ['video/mp4']; // Default fallback
+        }
+    }
+
     togglePlayPause() {
         if (!this.videoElement.src) {
             // No video loaded, try to play first video from library or playlist
@@ -337,19 +410,31 @@ class PornCinema {
     }
 
     // Playlist management
-    addToPlaylist(video) {
+    async addToPlaylist(video) {
         if (!this.playlist.find(v => v.path === video.path)) {
-            this.playlist.push({...video});
+            // Create a copy of the video with duration loaded if missing
+            const videoWithDuration = {...video};
+            
+            // If duration is missing or 0, try to load it
+            if (!videoWithDuration.duration || videoWithDuration.duration === 0) {
+                try {
+                    videoWithDuration.duration = await this.getVideoDuration(video);
+                } catch (error) {
+                    console.warn(`Could not load duration for ${video.name}:`, error);
+                }
+            }
+            
+            this.playlist.push(videoWithDuration);
             this.updatePlaylistDisplay();
             console.log(`➕ Added to playlist: ${video.name}`);
         }
     }
 
-    addCurrentToPlaylist() {
+    async addCurrentToPlaylist() {
         if (this.currentVideo) {
-            this.addToPlaylist(this.currentVideo);
+            await this.addToPlaylist(this.currentVideo);
         } else if (this.videoLibrary && this.videoLibrary.getSelectedVideo()) {
-            this.addToPlaylist(this.videoLibrary.getSelectedVideo());
+            await this.addToPlaylist(this.videoLibrary.getSelectedVideo());
         }
     }
 
@@ -533,6 +618,15 @@ class PornCinema {
 
     onLoadedData() {
         this.hideLoading();
+        
+        // Auto-play if requested
+        if (this.shouldAutoPlay) {
+            this.shouldAutoPlay = false;
+            this.videoElement.play().catch(error => {
+                console.error('🎬 Error auto-playing video:', error);
+                this.showError('Failed to play video');
+            });
+        }
     }
 
     onCanPlay() {
@@ -544,18 +638,21 @@ class PornCinema {
         this.isPlaying = true;
         this.updatePlayButton();
         this.hidePlayOverlay();
+        this.hideVideoOverlay();
     }
 
     onPause() {
         this.isPlaying = false;
         this.updatePlayButton();
         this.showPlayOverlay();
+        this.showVideoOverlay();
     }
 
     onEnded() {
         this.isPlaying = false;
         this.updatePlayButton();
         this.showPlayOverlay();
+        this.showVideoOverlay();
         
         // Auto-play next video in playlist
         if (this.playlist.length > 0 && this.currentPlaylistIndex >= 0) {
@@ -573,9 +670,63 @@ class PornCinema {
     }
 
     onError(event) {
-        console.error('Video error:', event);
+        const video = event.target;
+        const error = video.error;
+        
+        // Try fallback MIME types for .mov files
+        if (this.fallbackMimeTypes && this.fallbackMimeTypes.length > 0) {
+            const nextMimeType = this.fallbackMimeTypes.shift();
+            console.log(`🔄 Trying fallback MIME type: ${nextMimeType}`);
+            
+            this.videoSource.type = nextMimeType;
+            this.videoElement.load();
+            return; // Don't show error yet, try the fallback
+        }
+        
+        let errorMessage = 'Error loading video';
+        let detailedMessage = 'Unknown error';
+        
+        if (error) {
+            switch (error.code) {
+                case error.MEDIA_ERR_ABORTED:
+                    detailedMessage = 'Video loading was aborted';
+                    break;
+                case error.MEDIA_ERR_NETWORK:
+                    detailedMessage = 'Network error while loading video';
+                    break;
+                case error.MEDIA_ERR_DECODE:
+                    detailedMessage = 'Video format not supported or corrupted';
+                    errorMessage = 'Unsupported video format';
+                    break;
+                case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                    detailedMessage = 'Video format or codec not supported';
+                    errorMessage = 'Video format not supported';
+                    break;
+                default:
+                    detailedMessage = `Unknown error (code: ${error.code})`;
+            }
+        }
+        
+        console.error(`🎬 Video error for ${this.currentVideo?.name || 'unknown'}:`, {
+            code: error?.code,
+            message: error?.message,
+            details: detailedMessage,
+            format: this.currentVideo?.format,
+            src: video.src,
+            mimeType: this.videoSource.type
+        });
+        
         this.hideLoading();
-        this.showError('Error loading video');
+        this.showError(errorMessage);
+        
+        // Reset fallback MIME types
+        this.fallbackMimeTypes = null;
+        
+        // If it's a .mov file that failed, suggest alternatives
+        if (this.currentVideo?.format?.toLowerCase() === 'mov') {
+            console.warn('💡 .mov file failed to play. This format may contain codecs not supported by browsers.');
+            console.warn('💡 Consider converting .mov files to .mp4 for better compatibility.');
+        }
     }
 
     onFullscreenChange() {
@@ -641,6 +792,14 @@ class PornCinema {
         this.playOverlay.style.display = 'none';
     }
 
+    showVideoOverlay() {
+        this.videoOverlay.classList.remove('hidden');
+    }
+
+    hideVideoOverlay() {
+        this.videoOverlay.classList.add('hidden');
+    }
+
     showControls() {
         this.controls.container.classList.add('visible');
     }
@@ -714,6 +873,40 @@ class PornCinema {
         }
     }
 
+    async getVideoDuration(video) {
+        return new Promise((resolve, reject) => {
+            // Create a temporary video element to load metadata
+            const tempVideo = document.createElement('video');
+            tempVideo.preload = 'metadata';
+            
+            // Convert path to proper format for Electron
+            let videoSrc = video.path;
+            if (window.electronAPI && video.path.match(/^[A-Za-z]:\\/)) {
+                // Absolute Windows path - convert to file:// URL
+                videoSrc = `file:///${video.path.replace(/\\/g, '/')}`;
+            }
+            
+            tempVideo.addEventListener('loadedmetadata', () => {
+                const duration = tempVideo.duration;
+                tempVideo.remove(); // Clean up
+                resolve(duration);
+            });
+            
+            tempVideo.addEventListener('error', (e) => {
+                tempVideo.remove(); // Clean up
+                reject(new Error(`Failed to load video metadata: ${e.message}`));
+            });
+            
+            // Set timeout to avoid hanging
+            setTimeout(() => {
+                tempVideo.remove();
+                reject(new Error('Timeout loading video metadata'));
+            }, 5000);
+            
+            tempVideo.src = videoSrc;
+        });
+    }
+
     formatDuration(seconds) {
         if (!seconds || isNaN(seconds)) return '0:00';
         
diff --git a/src/features/media/videoLibrary.js b/src/features/media/videoLibrary.js
index fb38433..471f65c 100644
--- a/src/features/media/videoLibrary.js
+++ b/src/features/media/videoLibrary.js
@@ -60,6 +60,29 @@ class VideoLibrary {
                 return;
             }
 
+            // Wait for desktop file manager to be fully initialized
+            // Check if video directories have been set up
+            let retries = 0;
+            const maxRetries = 20; // Wait up to 2 seconds
+            
+            while (retries < maxRetries) {
+                if (window.desktopFileManager.videoDirectories && 
+                    window.desktopFileManager.videoDirectories.background) {
+                    console.log('✅ Desktop file manager video directories are ready');
+                    break;
+                }
+                
+                console.log(`⏳ Waiting for video directories to initialize... (${retries + 1}/${maxRetries})`);
+                await new Promise(resolve => setTimeout(resolve, 100));
+                retries++;
+            }
+            
+            if (retries >= maxRetries) {
+                console.warn('⚠️ Video directories not initialized after waiting, falling back to stored videos');
+                this.loadStoredVideos();
+                return;
+            }
+
             // Get video files from all categories
             let allVideos = [];
             
@@ -109,11 +132,17 @@ class VideoLibrary {
             }));
 
             console.log(`📁 Loaded ${this.videos.length} videos`);
+            if (this.videos.length > 0) {
+                console.log('📁 Sample video object:', this.videos[0]);
+            }
             
             // Apply current filters and display
             this.applyFiltersAndSort();
             this.displayLibrary();
             
+            // Load durations for videos that don't have them
+            this.loadMissingDurations();
+            
         } catch (error) {
             console.error('Error loading video library:', error);
             this.displayEmptyLibrary('Error loading video library');
@@ -238,13 +267,16 @@ class VideoLibrary {
         const duration = this.formatDuration(video.duration);
         const fileSize = this.formatFileSize(video.size);
         
+        // Generate or get thumbnail
+        const thumbnailSrc = this.getThumbnailSrc(video);
+        
         if (this.currentView === 'grid') {
             return `
                 <div class="video-card" data-video-path="${video.path}">
-                    <div class="video-thumbnail">
-                        ${video.thumbnail ? 
-                            `<img src="${video.thumbnail}" alt="${video.name}">` :
-                            '🎬'
+                    <div class="video-thumbnail" data-video-path="${video.path}">
+                        ${thumbnailSrc ? 
+                            `<img src="${thumbnailSrc}" alt="${video.name}" onload="this.style.opacity=1" style="opacity:0; transition: opacity 0.3s;">` :
+                            `<div class="thumbnail-placeholder" data-video-path="${video.path}">🎬</div>`
                         }
                         <div class="video-duration">${duration}</div>
                     </div>
@@ -264,10 +296,10 @@ class VideoLibrary {
         } else {
             return `
                 <div class="video-list-item" data-video-path="${video.path}">
-                    <div class="list-thumbnail">
-                        ${video.thumbnail ? 
-                            `<img src="${video.thumbnail}" alt="${video.name}" class="list-thumbnail">` :
-                            `<div class="list-thumbnail" style="display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">🎬</div>`
+                    <div class="list-thumbnail" data-video-path="${video.path}">
+                        ${thumbnailSrc ? 
+                            `<img src="${thumbnailSrc}" alt="${video.name}" class="list-thumbnail" onload="this.style.opacity=1" style="opacity:0; transition: opacity 0.3s;">` :
+                            `<div class="thumbnail-placeholder list-thumbnail" data-video-path="${video.path}" style="display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">🎬</div>`
                         }
                     </div>
                     <div class="list-details">
@@ -310,10 +342,10 @@ class VideoLibrary {
         // Add to playlist button events
         const playlistButtons = this.libraryContent.querySelectorAll('.add-to-playlist');
         playlistButtons.forEach(button => {
-            button.addEventListener('click', (e) => {
+            button.addEventListener('click', async (e) => {
                 e.stopPropagation();
                 const videoPath = button.closest('[data-video-path]').dataset.videoPath;
-                this.addToPlaylist(videoPath);
+                await this.addToPlaylist(videoPath);
             });
         });
     }
@@ -347,10 +379,10 @@ class VideoLibrary {
         }
     }
 
-    addToPlaylist(videoPath) {
+    async addToPlaylist(videoPath) {
         const video = this.videos.find(video => video.path === videoPath);
         if (video && this.pornCinema) {
-            this.pornCinema.addToPlaylist(video);
+            await this.pornCinema.addToPlaylist(video);
         }
     }
 
@@ -442,4 +474,344 @@ class VideoLibrary {
     getFilteredVideos() {
         return this.filteredVideos;
     }
+
+    loadStoredVideos() {
+        console.log('📁 Loading stored videos from localStorage...');
+        
+        try {
+            // Fallback to localStorage
+            const storedVideos = JSON.parse(localStorage.getItem('videoFiles') || '{}');
+            console.log('📁 Falling back to stored videos');
+            
+            const allVideos = Object.values(storedVideos).flat();
+            
+            if (!allVideos || allVideos.length === 0) {
+                console.warn('📁 No videos found in storage either');
+                this.displayEmptyLibrary('No videos found. Please add video files to your video directories.');
+                return;
+            }
+
+            // Store videos with enriched metadata
+            this.videos = allVideos.map(video => ({
+                ...video,
+                category: video.category || 'unknown',
+                qualities: this.detectVideoQualities(video),
+                addedDate: video.addedDate || new Date().toISOString()
+            }));
+
+            console.log(`📁 Loaded ${this.videos.length} videos`);
+            console.log('📁 Sample video object:', this.videos[0]);
+            
+            // Apply current filters and display
+            this.applyFiltersAndSort();
+            this.displayLibrary();
+            
+            // Load durations for videos that don't have them
+            this.loadMissingDurations();
+            
+        } catch (error) {
+            console.error('Error loading stored videos:', error);
+            this.displayEmptyLibrary('Error loading video library');
+        }
+    }
+
+    getThumbnailSrc(video) {
+        // Check if video has existing thumbnail
+        if (video.thumbnail) {
+            // Convert thumbnail path for Electron if needed
+            if (window.electronAPI && video.thumbnail.match(/^[A-Za-z]:\\/)) {
+                return `file:///${video.thumbnail.replace(/\\/g, '/')}`;
+            }
+            return video.thumbnail;
+        }
+        
+        // Check if we have a cached thumbnail
+        const cacheKey = `thumbnail_${video.path}`;
+        const cacheVersionKey = `thumbnail_version_${video.path}`;
+        const currentVersion = '2.0'; // Updated version for aspect ratio support
+        
+        const cachedData = localStorage.getItem(cacheKey);
+        const cachedVersion = localStorage.getItem(cacheVersionKey);
+        
+        if (cachedData && cachedVersion === currentVersion) {
+            try {
+                const thumbnailData = JSON.parse(cachedData);
+                return thumbnailData.dataUrl || cachedData; // Support both new and old format
+            } catch (e) {
+                // Old format - just a data URL string
+                return cachedData;
+            }
+        } else if (cachedData) {
+            // Clear old cache
+            localStorage.removeItem(cacheKey);
+            localStorage.removeItem(cacheVersionKey);
+        }
+        
+        // Generate thumbnail asynchronously
+        this.generateThumbnail(video);
+        
+        return null; // Will show placeholder initially
+    }
+
+    async generateThumbnail(video) {
+        try {
+            // Convert video path for Electron if needed
+            let videoSrc = video.path;
+            if (window.electronAPI && video.path.match(/^[A-Za-z]:\\/)) {
+                videoSrc = `file:///${video.path.replace(/\\/g, '/')}`;
+            }
+
+            // Create temporary video element
+            const tempVideo = document.createElement('video');
+            tempVideo.crossOrigin = 'anonymous';
+            tempVideo.preload = 'metadata';
+            tempVideo.style.display = 'none';
+            document.body.appendChild(tempVideo);
+
+            return new Promise((resolve, reject) => {
+                tempVideo.addEventListener('loadedmetadata', () => {
+                    // Seek to 10% of video duration for thumbnail
+                    tempVideo.currentTime = Math.min(tempVideo.duration * 0.1, 10);
+                });
+
+                tempVideo.addEventListener('seeked', () => {
+                    try {
+                        // Create canvas to capture frame
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        
+                        // Get video dimensions
+                        const videoWidth = tempVideo.videoWidth;
+                        const videoHeight = tempVideo.videoHeight;
+                        const aspectRatio = videoWidth / videoHeight;
+                        
+                        // Set canvas size based on aspect ratio
+                        const maxWidth = 320;
+                        const maxHeight = 240; // Increased max height for portrait videos
+                        
+                        let canvasWidth, canvasHeight;
+                        
+                        if (aspectRatio >= 1) {
+                            // Landscape or square video
+                            canvasWidth = Math.min(maxWidth, videoWidth);
+                            canvasHeight = canvasWidth / aspectRatio;
+                        } else {
+                            // Portrait video
+                            canvasHeight = Math.min(maxHeight, videoHeight);
+                            canvasWidth = canvasHeight * aspectRatio;
+                        }
+                        
+                        canvas.width = canvasWidth;
+                        canvas.height = canvasHeight;
+                        
+                        // Draw video frame to canvas maintaining aspect ratio
+                        ctx.drawImage(tempVideo, 0, 0, canvasWidth, canvasHeight);
+                        
+                        // Convert to base64 data URL
+                        const thumbnailDataUrl = canvas.toDataURL('image/jpeg', 0.7);
+                        
+                        // Cache the thumbnail with metadata
+                        const cacheKey = `thumbnail_${video.path}`;
+                        const cacheVersionKey = `thumbnail_version_${video.path}`;
+                        const thumbnailData = {
+                            dataUrl: thumbnailDataUrl,
+                            width: canvasWidth,
+                            height: canvasHeight,
+                            aspectRatio: aspectRatio,
+                            isPortrait: aspectRatio < 1
+                        };
+                        localStorage.setItem(cacheKey, JSON.stringify(thumbnailData));
+                        localStorage.setItem(cacheVersionKey, '2.0');
+                        
+                        // Update the display
+                        this.updateThumbnailDisplay(video.path, thumbnailData);
+                        
+                        // Cleanup
+                        document.body.removeChild(tempVideo);
+                        resolve(thumbnailDataUrl);
+                        
+                    } catch (error) {
+                        document.body.removeChild(tempVideo);
+                        reject(error);
+                    }
+                });
+
+                tempVideo.addEventListener('error', (e) => {
+                    document.body.removeChild(tempVideo);
+                    reject(new Error(`Failed to load video for thumbnail: ${e.message}`));
+                });
+
+                // Set timeout to avoid hanging
+                setTimeout(() => {
+                    if (tempVideo.parentNode) {
+                        document.body.removeChild(tempVideo);
+                    }
+                    reject(new Error('Timeout generating thumbnail'));
+                }, 10000);
+
+                tempVideo.src = videoSrc;
+            });
+
+        } catch (error) {
+            console.warn(`Failed to generate thumbnail for ${video.name}:`, error);
+        }
+    }
+
+    updateThumbnailDisplay(videoPath, thumbnailData) {
+        // Handle both old (string) and new (object) thumbnail data formats
+        const thumbnailSrc = typeof thumbnailData === 'string' ? thumbnailData : thumbnailData.dataUrl;
+        const isPortrait = typeof thumbnailData === 'object' ? thumbnailData.isPortrait : false;
+        
+        // Find all thumbnail elements for this video
+        const thumbnailElements = document.querySelectorAll(`[data-video-path="${videoPath}"]`);
+        
+        thumbnailElements.forEach(element => {
+            if (element.classList.contains('video-thumbnail') || element.classList.contains('list-thumbnail')) {
+                // Replace placeholder with actual thumbnail
+                const placeholderDiv = element.querySelector('.thumbnail-placeholder');
+                if (placeholderDiv) {
+                    const img = document.createElement('img');
+                    img.src = thumbnailSrc;
+                    img.alt = 'Video thumbnail';
+                    img.style.opacity = '0';
+                    img.style.transition = 'opacity 0.3s';
+                    
+                    // Apply aspect ratio specific styling
+                    if (isPortrait) {
+                        img.style.width = 'auto';
+                        img.style.height = '100%';
+                        img.style.objectFit = 'contain';
+                        img.style.maxWidth = '100%';
+                    } else {
+                        img.style.width = '100%';
+                        img.style.height = '100%';
+                        img.style.objectFit = 'cover';
+                    }
+                    
+                    img.onload = () => {
+                        img.style.opacity = '1';
+                        placeholderDiv.remove();
+                    };
+                    
+                    if (element.classList.contains('list-thumbnail')) {
+                        img.className = 'list-thumbnail';
+                    }
+                    
+                    element.appendChild(img);
+                }
+            }
+        });
+    }
+
+    async loadMissingDurations() {
+        // Find videos without duration
+        const videosNeedingDuration = this.videos.filter(video => !video.duration || video.duration === 0);
+        
+        if (videosNeedingDuration.length === 0) {
+            return;
+        }
+        
+        console.log(`⏱️ Loading durations for ${videosNeedingDuration.length} videos...`);
+        
+        // Load durations in batches to avoid overwhelming the system
+        const batchSize = 3;
+        for (let i = 0; i < videosNeedingDuration.length; i += batchSize) {
+            const batch = videosNeedingDuration.slice(i, i + batchSize);
+            
+            await Promise.all(batch.map(async (video) => {
+                try {
+                    const duration = await this.getVideoDuration(video);
+                    video.duration = duration;
+                    
+                    // Update the display for this specific video
+                    this.updateVideoDurationDisplay(video);
+                    
+                } catch (error) {
+                    console.warn(`Failed to load duration for ${video.name}:`, error);
+                }
+            }));
+            
+            // Small delay between batches
+            if (i + batchSize < videosNeedingDuration.length) {
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        }
+    }
+
+    async getVideoDuration(video) {
+        return new Promise((resolve, reject) => {
+            // Create a temporary video element to load metadata
+            const tempVideo = document.createElement('video');
+            tempVideo.preload = 'metadata';
+            
+            // Convert path to proper format for Electron
+            let videoSrc = video.path;
+            if (window.electronAPI && video.path.match(/^[A-Za-z]:\\/)) {
+                // Absolute Windows path - convert to file:// URL
+                videoSrc = `file:///${video.path.replace(/\\/g, '/')}`;
+            }
+            
+            tempVideo.addEventListener('loadedmetadata', () => {
+                const duration = tempVideo.duration;
+                tempVideo.remove(); // Clean up
+                resolve(duration);
+            });
+            
+            tempVideo.addEventListener('error', (e) => {
+                tempVideo.remove(); // Clean up
+                reject(new Error(`Failed to load video metadata: ${e.message}`));
+            });
+            
+            // Set timeout to avoid hanging
+            setTimeout(() => {
+                tempVideo.remove();
+                reject(new Error('Timeout loading video metadata'));
+            }, 5000);
+            
+            tempVideo.src = videoSrc;
+        });
+    }
+
+    updateVideoDurationDisplay(video) {
+        // Escape special characters in the path for CSS selector
+        const escapedPath = video.path.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '\\"');
+        
+        // Find video cards/items for this video and update the duration display
+        const videoElements = document.querySelectorAll(`[data-video-path="${escapedPath}"]`);
+        
+        // If CSS selector fails, try a different approach
+        if (videoElements.length === 0) {
+            const allVideoElements = document.querySelectorAll('[data-video-path]');
+            const matchingElements = Array.from(allVideoElements).filter(el => 
+                el.getAttribute('data-video-path') === video.path
+            );
+            
+            matchingElements.forEach((element) => {
+                this.updateSingleElementDuration(element, video);
+            });
+        } else {
+            videoElements.forEach((element) => {
+                this.updateSingleElementDuration(element, video);
+            });
+        }
+    }
+
+    updateSingleElementDuration(element, video) {
+        // Check if this is a grid view card or list view item
+        if (element.classList.contains('video-card')) {
+            // Grid view - duration is in .video-duration
+            const durationElement = element.querySelector('.video-duration');
+            if (durationElement) {
+                const formattedDuration = this.formatDuration(video.duration);
+                durationElement.textContent = formattedDuration;
+            }
+        } else if (element.classList.contains('video-list-item')) {
+            // List view - duration is in the second .list-meta element
+            const metaElements = element.querySelectorAll('.list-meta');
+            if (metaElements.length >= 2) {
+                const formattedDuration = this.formatDuration(video.duration);
+                metaElements[1].textContent = formattedDuration; // Second meta is duration
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/styles/porn-cinema.css b/src/styles/porn-cinema.css
index 0a7c59f..6b7fe10 100644
--- a/src/styles/porn-cinema.css
+++ b/src/styles/porn-cinema.css
@@ -562,6 +562,11 @@
     object-fit: cover;
 }
 
+/* Portrait video thumbnails - use contain to show full image */
+.video-thumbnail img[style*="object-fit: contain"] {
+    background: #222;
+}
+
 .video-duration {
     position: absolute;
     bottom: 5px;