Spaces:
Running
Running
File size: 5,399 Bytes
a68b118 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 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();
}); |