Create script.js

script.js

@@ -0,0 +1,159 @@
+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();
+});