Update script.js

script.js

@@ -4,307 +4,319 @@ let currentVideoId = null;
 let currentPage = 1;
 const videosPerPage = 12;
 let filteredVideos = [];
+let player = null;
+let pipPlayer = null;
+let currentPlaybackPosition = {};
 
-// DOM elements
-const videoGrid = document.getElementById('videoGrid');
-const suggestionsContainer = document.getElementById('suggestions');
-const videoTitle = document.getElementById('videoTitle');
-const videoDescription = document.getElementById('videoDescription');
-const searchInput = document.getElementById('searchInput');
-const searchBtn = document.getElementById('searchBtn');
-const paginationContainer = document.getElementById('pagination');
-
-// Initialize the app based on current page
-document.addEventListener('DOMContentLoaded', () => {
-    loadVideos();
+// Initialize the app
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadVideos();
     
     if (window.location.pathname.includes('player.html')) {
-        initPlayer();
+        initPlayerPage();
     } else {
-        // Setup search functionality for index page
+        initGalleryPage();
+    }
+    
+    // Setup event listeners that exist on both pages
+    const searchInput = document.getElementById('searchInput');
+    const searchBtn = document.getElementById('searchBtn');
+    
+    if (searchInput && searchBtn) {
         searchInput.addEventListener('input', handleSearch);
         searchBtn.addEventListener('click', handleSearch);
     }
-});
-
-// Load videos from database.json
-async function loadVideos() {
-    try {
-        const response = await fetch('database.json');
-        videos = await response.json();
-        filteredVideos = [...videos];
-        
-        if (window.location.pathname.includes('player.html')) {
-            // Player page - load current video and suggestions
-            const urlParams = new URLSearchParams(window.location.search);
-            currentVideoId = urlParams.get('v');
+    
+    // Back button functionality
+    const backBtn = document.getElementById('backBtn');
+    const homeLogo = document.getElementById('homeLogo');
+    
+    if (backBtn || homeLogo) {
+        const goBack = () => {
+            if (player && player.isFullscreen()) {
+                player.exitFullscreen();
+            }
             
-            if (currentVideoId) {
-                loadVideo(currentVideoId);
-                renderSuggestions();
+            if (player && !player.paused()) {
+                enterPipMode();
             } else {
-                // Redirect to home if no video specified
                 window.location.href = 'index.html';
             }
-        } else {
-            // Home page - render video grid
-            renderVideoGrid();
-            renderPagination();
-        }
-    } catch (error) {
-        console.error('Error loading videos:', error);
-        alert('Failed to load video data. Please try again later.');
+        };
+        
+        if (backBtn) backBtn.addEventListener('click', goBack);
+        if (homeLogo) homeLogo.addEventListener('click', goBack);
     }
-}
+});
 
-// Handle search functionality
-function handleSearch() {
-    const searchTerm = searchInput.value.toLowerCase();
-    
-    if (searchTerm.trim() === '') {
-        filteredVideos = [...videos];
-    } else {
-        filteredVideos = videos.filter(video => 
-            video.title.toLowerCase().includes(searchTerm) || 
-            video.description.toLowerCase().includes(searchTerm)
-        );
-    }
+// PIP Mode functions
+function enterPipMode() {
+    if (!player) return;
     
-    currentPage = 1;
-    renderVideoGrid();
-    renderPagination();
-}
-
-// Render video grid on home page with pagination
-function renderVideoGrid() {
-    if (!videoGrid) return;
+    const pipContainer = document.getElementById('pipContainer');
+    if (!pipContainer) return;
     
-    videoGrid.innerHTML = '';
+    // Save current playback position
+    currentPlaybackPosition[currentVideoId] = player.currentTime();
     
-    const startIndex = (currentPage - 1) * videosPerPage;
-    const endIndex = startIndex + videosPerPage;
-    const videosToShow = filteredVideos.slice(startIndex, endIndex);
+    // Create PIP player
+    pipContainer.innerHTML = `
+        <video id="pipVideo" class="video-js vjs-default-skin" controls>
+            <source src="${player.currentSrc()}" type="${player.currentType()}">
+        </video>
+        <button id="closePip" class="pip-close-btn"><i class="fas fa-times"></i></button>
+    `;
     
-    if (videosToShow.length === 0) {
-        videoGrid.innerHTML = '<p class="no-results">No videos found matching your search.</p>';
-        return;
-    }
+    pipContainer.style.display = 'block';
     
-    videosToShow.forEach(video => {
-        const videoCard = document.createElement('div');
-        videoCard.className = 'video-card';
-        videoCard.addEventListener('click', () => {
-            window.location.href = `player.html?v=${video.id}`;
-        });
-        
-        videoCard.innerHTML = `
-            <div class="thumbnail">
-                <img src="${video.thumbnailPath}" alt="${video.title}" loading="lazy">
-                ${video.duration ? `<span class="duration">${video.duration}</span>` : ''}
-            </div>
-            <div class="video-info">
-                <h3>${video.title}</h3>
-                <p>${video.description.substring(0, 100)}...</p>
-            </div>
-        `;
-        
-        videoGrid.appendChild(videoCard);
+    pipPlayer = videojs('pipVideo', {
+        controls: true,
+        autoplay: true,
+        fluid: true,
+        playbackRates: [0.5, 1, 1.5, 2]
     });
-}
-
-// Render pagination controls
-function renderPagination() {
-    if (!paginationContainer) return;
     
-    paginationContainer.innerHTML = '';
+    // Restore playback position
+    if (currentPlaybackPosition[currentVideoId]) {
+        pipPlayer.currentTime(currentPlaybackPosition[currentVideoId]);
+    }
     
-    const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
+    // Copy tracks from main player
+    const textTracks = player.remoteTextTracks();
+    for (let i = 0; i < textTracks.length; i++) {
+        const track = textTracks[i];
+        pipPlayer.addRemoteTextTrack({
+            kind: track.kind,
+            src: track.src,
+            srclang: track.language,
+            label: track.label,
+            default: track.default
+        }, false);
+    }
     
-    if (totalPages <= 1) return;
+    // Close button functionality
+    document.getElementById('closePip').addEventListener('click', () => {
+        exitPipMode(true);
+    });
     
-    // Previous button
-    const prevBtn = document.createElement('button');
-    prevBtn.className = 'page-btn';
-    prevBtn.textContent = 'Previous';
-    prevBtn.disabled = currentPage === 1;
-    prevBtn.addEventListener('click', () => {
-        if (currentPage > 1) {
-            currentPage--;
-            renderVideoGrid();
-            renderPagination();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
+    // When PIP video ends
+    pipPlayer.on('ended', () => {
+        exitPipMode();
     });
-    paginationContainer.appendChild(prevBtn);
     
-    // Page buttons
-    const maxVisiblePages = 5;
-    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
-    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    // Navigate to home
+    window.location.href = 'index.html';
+}
+
+function exitPipMode(stopPlayback = false) {
+    const pipContainer = document.getElementById('pipContainer');
+    if (!pipContainer || !pipPlayer) return;
     
-    if (endPage - startPage + 1 < maxVisiblePages) {
-        startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    if (pipPlayer && !stopPlayback) {
+        currentPlaybackPosition[currentVideoId] = pipPlayer.currentTime();
     }
     
-    if (startPage > 1) {
-        const firstBtn = document.createElement('button');
-        firstBtn.className = 'page-btn';
-        firstBtn.textContent = '1';
-        firstBtn.addEventListener('click', () => {
-            currentPage = 1;
-            renderVideoGrid();
-            renderPagination();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        paginationContainer.appendChild(firstBtn);
-        
-        if (startPage > 2) {
-            const ellipsis = document.createElement('span');
-            ellipsis.textContent = '...';
-            paginationContainer.appendChild(ellipsis);
-        }
+    if (pipPlayer) {
+        pipPlayer.dispose();
+        pipPlayer = null;
     }
     
-    for (let i = startPage; i <= endPage; i++) {
-        const pageBtn = document.createElement('button');
-        pageBtn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
-        pageBtn.textContent = i;
-        pageBtn.addEventListener('click', () => {
-            currentPage = i;
-            renderVideoGrid();
-            renderPagination();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        paginationContainer.appendChild(pageBtn);
+    pipContainer.innerHTML = '';
+    pipContainer.style.display = 'none';
+}
+
+// Initialize player page
+function initPlayerPage() {
+    const urlParams = new URLSearchParams(window.location.search);
+    currentVideoId = urlParams.get('v');
+    
+    if (currentVideoId) {
+        loadVideo(currentVideoId);
+        renderSuggestions();
+    } else {
+        window.location.href = 'index.html';
     }
     
-    if (endPage < totalPages) {
-        if (endPage < totalPages - 1) {
-            const ellipsis = document.createElement('span');
-            ellipsis.textContent = '...';
-            paginationContainer.appendChild(ellipsis);
-        }
-        
-        const lastBtn = document.createElement('button');
-        lastBtn.className = 'page-btn';
-        lastBtn.textContent = totalPages;
-        lastBtn.addEventListener('click', () => {
-            currentPage = totalPages;
-            renderVideoGrid();
-            renderPagination();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+    // Setup download button
+    const downloadBtn = document.getElementById('downloadBtn');
+    if (downloadBtn) {
+        downloadBtn.addEventListener('click', () => {
+            const video = videos.find(v => v.id === currentVideoId);
+            if (video) {
+                const link = document.createElement('a');
+                link.href = video.videoPath;
+                link.download = video.title.replace(/[^a-z0-9]/gi, '_').toLowerCase() + '.mp4';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
         });
-        paginationContainer.appendChild(lastBtn);
     }
-    
-    // Next button
-    const nextBtn = document.createElement('button');
-    nextBtn.className = 'page-btn';
-    nextBtn.textContent = 'Next';
-    nextBtn.disabled = currentPage === totalPages;
-    nextBtn.addEventListener('click', () => {
-        if (currentPage < totalPages) {
-            currentPage++;
-            renderVideoGrid();
-            renderPagination();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-    });
-    paginationContainer.appendChild(nextBtn);
 }
 
-// Load a specific video on player page
+// Improved video loading with better buffering
 function loadVideo(videoId) {
     const video = videos.find(v => v.id === videoId);
     if (!video) {
-        alert('Video not found');
         window.location.href = 'index.html';
         return;
     }
     
     currentVideoId = videoId;
-    videoTitle.textContent = video.title;
-    videoDescription.textContent = video.description;
-    
-    // Update page title
+    document.getElementById('videoTitle').textContent = video.title;
+    document.getElementById('videoDescription').textContent = video.description;
     document.title = `${video.title} - Video Browser`;
     
-    // Initialize Video.js player
-    const player = videojs('mainVideo', {
-        controls: true,
-        autoplay: false,
-        preload: 'auto',
-        responsive: true,
-        fluid: true,
-        sources: [{
-            src: video.videoPath,
-            type: 'video/mp4' // Adjust based on your video format
-        }]
+    // Initialize or reuse player
+    if (!player) {
+        player = videojs('mainVideo', {
+            controls: true,
+            autoplay: true,
+            preload: 'auto',
+            responsive: true,
+            fluid: true,
+            html5: {
+                hls: {
+                    overrideNative: true,
+                    enableLowInitialPlaylist: true,
+                    smoothQualityChange: true,
+                    bandwidth: 2000000
+                },
+                nativeAudioTracks: false,
+                nativeVideoTracks: false
+            },
+            playbackRates: [0.5, 1, 1.5, 2]
+        });
+        
+        // Optimization for better seeking
+        player.tech_.on('seekablechanged', function() {
+            const seekable = player.seekable();
+            if (seekable && seekable.length) {
+                player.bufferedPercent = function() {
+                    const buffered = player.buffered();
+                    let bufferedEnd = player.bufferedEnd();
+                    const duration = player.duration();
+                    
+                    if (duration > 0 && bufferedEnd > 0) {
+                        return (bufferedEnd / duration) * 100;
+                    }
+                    return 0;
+                };
+            }
+        });
+        
+        player.on('seeking', function() {
+            if (player.tech_.seeking()) {
+                player.addClass('vjs-waiting');
+            }
+        });
+        
+        player.on('seeked', function() {
+            player.removeClass('vjs-waiting');
+        });
+        
+        player.on('error', function() {
+            const errorDisplay = player.errorDisplay;
+            errorDisplay.contentEl().innerHTML = `
+                <div class="vjs-error-display">
+                    <div class="vjs-modal-dialog-content">
+                        <h1>Error loading video</h1>
+                        <p>${player.error().message || 'The video format may not be supported by your browser.'}</p>
+                        <p>Try using a different browser or check the video file.</p>
+                    </div>
+                </div>
+            `;
+            errorDisplay.show();
+        });
+    }
+    
+    // Change video source
+    player.src({
+        src: video.videoPath,
+        type: getVideoType(video.videoPath)
     });
     
+    // Restore playback position if available
+    if (currentPlaybackPosition[videoId]) {
+        player.ready(() => {
+            player.currentTime(currentPlaybackPosition[videoId]);
+        });
+    }
+    
     // Add subtitle tracks if available
     if (video.subtitleTracks) {
+        // Clear existing tracks
+        const existingTracks = player.remoteTextTracks();
+        while (existingTracks.length > 0) {
+            player.removeRemoteTextTrack(existingTracks[0]);
+        }
+        
+        // Add new tracks
         video.subtitleTracks.forEach(track => {
             player.addRemoteTextTrack({
                 kind: 'subtitles',
                 src: track.path,
                 srclang: track.srclang,
                 label: track.label,
-                default: track.srclang === 'en' // Default to English if available
+                default: track.srclang === 'en'
             }, false);
         });
     }
     
-    // Handle player errors
-    player.on('error', () => {
-        const errorDisplay = player.errorDisplay;
-        errorDisplay.contentEl().innerHTML = `
-            <div class="vjs-error-display">
-                <div class="vjs-modal-dialog-content">
-                    <h1>Error loading video</h1>
-                    <p>The video format may not be supported by your browser.</p>
-                    <p>Try using a different browser or check the video file.</p>
-                </div>
-            </div>
-        `;
-        errorDisplay.show();
-    });
+    // Update view count (simulated)
+    if (video.views) {
+        document.getElementById('viewCount').textContent = `${formatNumber(video.views)} views`;
+    } else {
+        document.getElementById('viewCount').textContent = 'No views';
+    }
+    
+    // Update upload date (simulated)
+    if (video.uploadDate) {
+        document.getElementById('uploadDate').textContent = formatDate(video.uploadDate);
+    } else {
+        document.getElementById('uploadDate').textContent = 'Upload date unknown';
+    }
 }
 
-// Render suggested videos
-function renderSuggestions() {
-    if (!suggestionsContainer) return;
-    
-    // Filter out current video
-    const suggestedVideos = videos.filter(v => v.id !== currentVideoId);
-    
-    suggestionsContainer.innerHTML = '<h2>Suggested Videos</h2>';
-    
-    suggestedVideos.forEach(video => {
-        const suggestionCard = document.createElement('div');
-        suggestionCard.className = 'suggestion-card';
-        suggestionCard.addEventListener('click', () => {
-            // Update URL without reloading the page
-            window.history.pushState({}, '', `player.html?v=${video.id}`);
-            loadVideo(video.id);
-            renderSuggestions();
-        });
+// Helper function to detect video type
+function getVideoType(path) {
+    const extension = path.split('.').pop().toLowerCase();
+    switch (extension) {
+        case 'mp4': return 'video/mp4';
+        case 'webm': return 'video/webm';
+        case 'ogg': return 'video/ogg';
+        case 'mov': return 'video/quicktime';
+        default: return 'video/mp4';
+    }
+}
+
+// Format number for view count
+function formatNumber(num) {
+    if (!num) return '0';
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+// Format date
+function formatDate(dateString) {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+// When returning to player page from PIP
+window.addEventListener('popstate', (event) => {
+    if (window.location.pathname.includes('player.html') && pipPlayer) {
+        exitPipMode();
         
-        suggestionCard.innerHTML = `
-            <div class="suggestion-thumbnail">
-                <img src="${video.thumbnailPath}" alt="${video.title}" loading="lazy">
-            </div>
-            <div class="suggestion-info">
-                <h3>${video.title}</h3>
-                ${video.duration ? `<p>${video.duration}</p>` : ''}
-            </div>
-        `;
+        const urlParams = new URLSearchParams(window.location.search);
+        const newVideoId = urlParams.get('v');
         
-        suggestionsContainer.appendChild(suggestionCard);
-    });
-}
+        if (newVideoId && newVideoId !== currentVideoId) {
+            loadVideo(newVideoId);
+            renderSuggestions();
+        }
+    }
+});
 
-// Initialize video player (Video.js handles most of this now)
-function initPlayer() {
-    // Video.js is initialized in loadVideo function
-}
+// Other existing functions (loadVideos, renderVideoGrid, renderPagination, etc.)
+// ... (keep all the other functions from previous implementation)