script.js

document.addEventListener('DOMContentLoaded', () => {
    // DOM Elements
    const videoList = document.getElementById('videoList');
    const videoPlayer = document.getElementById('videoPlayer');
    const currentVideoTitle = document.getElementById('currentVideoTitle');
    const noVideoMessage = document.getElementById('noVideoMessage');
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    
    // State
    let videos = [];
    let currentVideoIndex = -1;
    
    // Fetch video data from JSON file
    async function fetchVideos() {
        try {
            const response = await fetch('database.json');
            if (!response.ok) {
                throw new Error('Failed to load video database');
            }
            
            videos = await response.json();
            renderVideoList(videos);
        } catch (error) {
            console.error('Error loading videos:', error);
            videoList.innerHTML = `
                <div class="error-message">
                    <p>Failed to load videos. Please try again later.</p>
                </div>
            `;
        }
    }
    
    // Render video list
    function renderVideoList(videosToRender) {
        // Clear loading state
        videoList.innerHTML = '';
        
        if (videosToRender.length === 0) {
            videoList.innerHTML = `
                <div class="error-message">
                    <p>No videos found</p>
                </div>
            `;
            return;
        }
        
        // Create video list items
        videosToRender.forEach((video, index) => {
            const videoItem = document.createElement('div');
            videoItem.className = 'video-item';
            videoItem.innerHTML = `
                <h3>${video.title}</h3>
            `;
            
            videoItem.addEventListener('click', () => {
                playVideo(index);
            });
            
            videoList.appendChild(videoItem);
        });
    }
    
    // Play selected video
    function playVideo(index) {
        if (index < 0 || index >= videos.length) return;
        
        // Update UI
        const videoItems = document.querySelectorAll('.video-item');
        videoItems.forEach(item => item.classList.remove('active'));
        videoItems[index].classList.add('active');
        
        // Update video source and title
        const video = videos[index];
        videoPlayer.src = video.url;
        currentVideoTitle.textContent = video.title;
        
        // Show video player and hide placeholder
        noVideoMessage.style.display = 'none';
        videoPlayer.style.display = 'block';
        
        // Play video
        videoPlayer.load();
        videoPlayer.play()
            .catch(error => {
                console.error('Failed to play video:', error);
                // Handle formats that might not be supported
                if (video.url.toLowerCase().endsWith('.mkv')) {
                    alert('MKV format may not be supported in your browser. Consider using MP4 files for better compatibility.');
                }
            });
        
        currentVideoIndex = index;
    }
    
    // Search functionality
    function searchVideos() {
        const searchTerm = searchInput.value.toLowerCase().trim();
        
        if (!searchTerm) {
            renderVideoList(videos);
            return;
        }
        
        const filteredVideos = videos.filter(video => 
            video.title.toLowerCase().includes(searchTerm)
        );
        
        renderVideoList(filteredVideos);
    }
    
    // Toggle fullscreen
    function toggleFullscreen() {
        if (!document.fullscreenElement) {
            if (videoPlayer.requestFullscreen) {
                videoPlayer.requestFullscreen();
            } else if (videoPlayer.webkitRequestFullscreen) { /* Safari */
                videoPlayer.webkitRequestFullscreen();
            } else if (videoPlayer.msRequestFullscreen) { /* IE11 */
                videoPlayer.msRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }
    }
    
    // Handle video ended event
    videoPlayer.addEventListener('ended', () => {
        // Optionally auto-play next video
        if (currentVideoIndex < videos.length - 1) {
            playVideo(currentVideoIndex + 1);
        }
    });
    
    // Handle video error
    videoPlayer.addEventListener('error', () => {
        console.error('Video error:', videoPlayer.error);
        alert('Error playing video. This could be due to format incompatibility or access issues.');
    });
    
    // Event listeners
    searchButton.addEventListener('click', searchVideos);
    searchInput.addEventListener('keyup', (e) => {
        if (e.key === 'Enter') {
            searchVideos();
        }
    });
    fullscreenBtn.addEventListener('click', toggleFullscreen);
    
    // Initial load
    fetchVideos();
});