Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Jun 5, 2025

Commit

bc9545e

verified ·

1 Parent(s): 77bca8d

Update index.html

Browse files

Files changed (1) hide show

index.html +712 -156

index.html CHANGED Viewed

@@ -3,183 +3,739 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Basic M3U8 Player</title>
     <style>
         body {
-            font-family: sans-serif;
-            padding: 20px;
-            background-color: #f4f4f4;
-        }
-        #player-container {
-            margin-top: 20px;
-            background-color: #fff;
-            padding: 15px;
-            border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        #videoPlayer {
             width: 100%;
-            max-width: 800px; /* Adjust as needed */
-            background-color: #000; /* Black background for letterboxing */
-            display: block; /* Prevents extra space below video */
-            margin-top: 10px;
-        }
-        #urlInput {
-            width: calc(100% - 100px); /* Adjust width */
-            padding: 10px;
-            margin-right: 5px;
-            border: 1px solid #ccc;
-            border-radius: 3px;
-        }
-        #loadButton {
-            padding: 10px 15px;
             cursor: pointer;
-            background-color: #007bff;
-            color: white;
             border: none;
-            border-radius: 3px;
         }
-        #loadButton:hover {
-            background-color: #0056b3;
         }
-        #status {
-            margin-top: 10px;
-            font-style: italic;
-            color: #555;
         }
-        .error {
-            color: red;
-            font-weight: bold;
         }
     </style>
-    <!-- 1. Include hls.js library -->
-    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </head>
 <body>
-    <h1>Basic M3U8 Web Player</h1>
-    <div id="player-container">
-        <label for="urlInput">M3U8 URL:</label>
-        <input type="text" id="urlInput" placeholder="https://example.com/stream.m3u8">
-        <button id="loadButton">Load Stream</button>
-        <div id="status">Enter an M3U8 URL and click Load.</div>
-        <!-- 2. The Video Element -->
-        <video id="videoPlayer" controls></video>
-    </div>
     <script>
-        const videoElement = document.getElementById('videoPlayer');
-        const urlInput = document.getElementById('urlInput');
-        const loadButton = document.getElementById('loadButton');
-        const statusDiv = document.getElementById('status');
-        let hls = null; // Variable to hold the Hls instance
-        loadButton.addEventListener('click', loadStream);
-        function loadStream() {
-            const m3u8Url = urlInput.value.trim();
-            statusDiv.textContent = ''; // Clear previous status
-            statusDiv.classList.remove('error');
-            if (!m3u8Url) {
-                statusDiv.textContent = 'Please enter an M3U8 URL.';
-                statusDiv.classList.add('error');
                 return;
             }
-            // Destroy previous instance if it exists
-            if (hls) {
-                hls.destroy();
-                hls = null;
-            }
-            // Check if HLS is supported by the browser (using hls.js)
-            if (Hls.isSupported()) {
-                console.log("HLS.js is supported. Initializing...");
-                statusDiv.textContent = 'Loading stream with HLS.js...';
-                hls = new Hls(); // Create a new Hls instance
-                // Bind error handling
-                hls.on(Hls.Events.ERROR, function (event, data) {
-                    if (data.fatal) {
-                        switch(data.type) {
-                            case Hls.ErrorTypes.NETWORK_ERROR:
-                                console.error('Fatal network error encountered:', data);
-                                statusDiv.textContent = `Error: Network error - ${data.details}. Check URL and CORS policy.`;
-                                statusDiv.classList.add('error');
-                                hls.destroy(); // Clean up on fatal error
-                                hls = null;
-                                break;
-                            case Hls.ErrorTypes.MEDIA_ERROR:
-                                console.error('Fatal media error encountered:', data);
-                                statusDiv.textContent = `Error: Media error - ${data.details}. Trying to recover...`;
-                                statusDiv.classList.add('error');
-                                hls.recoverMediaError();
-                                break;
-                            default:
-                                // Cannot recover
-                                console.error('Unrecoverable fatal error:', data);
-                                statusDiv.textContent = `Error: Unrecoverable error - ${data.details}.`;
-                                statusDiv.classList.add('error');
-                                hls.destroy();
-                                hls = null;
-                                break;
-                        }
-                    } else {
-                         console.warn('Non-fatal HLS error:', data);
-                         statusDiv.textContent = `Warning: ${data.details}`;
-                         statusDiv.classList.remove('error'); // Maybe not a fatal error shown to user
-                    }
-                });
-                hls.loadSource(m3u8Url);
-                hls.attachMedia(videoElement);
-                hls.on(Hls.Events.MANIFEST_PARSED, function() {
-                    console.log('Manifest parsed. Ready to play.');
-                    statusDiv.textContent = 'Stream loaded. Press play!';
-                    // You could uncomment the next line to autoplay, but user interaction is often required by browsers
-                    // videoElement.play();
-                });
-            }
-            // Check for native browser HLS support (e.g., Safari on iOS/macOS)
-            else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
-                console.log("Native HLS support detected (e.g., Safari).");
-                statusDiv.textContent = 'Loading stream using native browser support...';
-                videoElement.src = m3u8Url;
-                videoElement.addEventListener('loadedmetadata', function() {
-                     console.log('Metadata loaded. Ready to play.');
-                     statusDiv.textContent = 'Stream loaded. Press play!';
-                    // videoElement.play(); // Autoplay if desired and allowed
-                });
-                 videoElement.addEventListener('error', function(e) {
-                    console.error('Native HLS playback error:', e);
-                    statusDiv.textContent = 'Error loading stream with native player. Check URL/CORS.';
-                    statusDiv.classList.add('error');
-                });
-            }
-            // HLS is not supported on this browser
-            else {
-                statusDiv.textContent = 'Error: HLS is not supported in this browser.';
-                statusDiv.classList.add('error');
-                console.error("HLS is not supported by hls.js or natively.");
-            }
-        }
-        // Optional: Add listener to Enter key in input field
-        urlInput.addEventListener('keypress', function(event) {
-            if (event.key === 'Enter') {
-                event.preventDefault(); // Prevent potential form submission
-                loadButton.click(); // Trigger the button click
-            }
-        });
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Streaming Platform</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #0f0f0f;
+            color: #fff;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Header */
+        header {
+            background: #212121;
+            padding: 1rem 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid #333;
+        }
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #ff6b6b;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        .logo:hover {
+            color: #ff5252;
+        }
+        .search-container {
+            flex: 1;
+            max-width: 500px;
+            position: relative;
+        }
+        #searchInput {
             width: 100%;
+            padding: 12px 20px;
+            background: #333;
+            border: 2px solid #444;
+            border-radius: 25px;
+            color: #fff;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+        #searchInput:focus {
+            outline: none;
+            border-color: #ff6b6b;
+            background: #404040;
+        }
+        #searchInput::placeholder {
+            color: #aaa;
+        }
+        /* Main Content */
+        main {
+            min-height: calc(100vh - 200px);
+            padding: 2rem 0;
+        }
+        /* Video Grid */
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .video-card {
+            background: #1e1e1e;
+            border-radius: 12px;
+            overflow: hidden;
+            transition: all 0.3s ease;
             cursor: pointer;
+            border: 2px solid transparent;
+        }
+        .video-card:hover {
+            transform: translateY(-8px);
+            border-color: #ff6b6b;
+            box-shadow: 0 12px 30px rgba(255, 107, 107, 0.3);
+        }
+        .video-thumbnail {
+            width: 100%;
+            height: 180px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .play-icon {
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            color: #333;
+            transition: all 0.3s ease;
+        }
+        .video-card:hover .play-icon {
+            transform: scale(1.1);
+            background: #ff6b6b;
+            color: #fff;
+        }
+        .video-info {
+            padding: 1rem;
+        }
+        .video-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #fff;
+            margin-bottom: 0.5rem;
+        }
+        .video-meta {
+            color: #aaa;
+            font-size: 0.9rem;
+        }
+        /* Video Player Page */
+        .player-container {
+            display: none;
+        }
+        .player-container.active {
+            display: block;
+        }
+        .video-player-section {
+            background: #1e1e1e;
+            border-radius: 12px;
+            padding: 1rem;
+            margin-bottom: 2rem;
+        }
+        .video-player {
+            width: 100%;
+            max-width: 900px;
+            height: auto;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+        .video-details h2 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            color: #fff;
+        }
+        .back-button {
+            background: #ff6b6b;
+            color: #fff;
             border: none;
+            padding: 12px 24px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            margin-bottom: 1rem;
         }
+        .back-button:hover {
+            background: #ff5252;
+            transform: translateY(-2px);
         }
+        .recommendations {
+            margin-top: 2rem;
         }
+        .recommendations h3 {
+            margin-bottom: 1rem;
+            color: #fff;
+            font-size: 1.3rem;
+        }
+        .recommendations-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+        .recommendation-card {
+            background: #2a2a2a;
+            border-radius: 8px;
+            padding: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 1px solid #444;
+        }
+        .recommendation-card:hover {
+            background: #333;
+            border-color: #ff6b6b;
+        }
+        .recommendation-title {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        /* Pagination */
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.5rem;
+            margin: 2rem 0;
+            flex-wrap: wrap;
+        }
+        .pagination button {
+            background: #333;
+            color: #fff;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 14px;
+        }
+        .pagination button:hover:not(:disabled) {
+            background: #ff6b6b;
+            transform: translateY(-2px);
+        }
+        .pagination button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .pagination button.active {
+            background: #ff6b6b;
+        }
+        .pagination-info {
+            color: #aaa;
+            margin: 0 1rem;
+            font-size: 14px;
+        }
+        /* No Results */
+        .no-results {
+            text-align: center;
+            padding: 3rem;
+            color: #aaa;
+        }
+        .no-results h3 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .no-results p {
+            font-size: 1.1rem;
+        }
+        /* Loading */
+        .loading {
+            text-align: center;
+            padding: 3rem;
+            color: #aaa;
+        }
+        .loading-spinner {
+            width: 50px;
+            height: 50px;
+            border: 3px solid #333;
+            border-top: 3px solid #ff6b6b;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .header-content {
+                flex-direction: column;
+                text-align: center;
+            }
+            .search-container {
+                max-width: 100%;
+            }
+            .video-grid {
+                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+                gap: 1rem;
+            }
+            .recommendations-grid {
+                grid-template-columns: 1fr;
+            }
+            .pagination {
+                gap: 0.25rem;
+            }
+            .pagination button {
+                padding: 8px 12px;
+                font-size: 12px;
+            }
+        }
+        @media (max-width: 480px) {
+            .video-grid {
+                grid-template-columns: 1fr;
+            }
+            .video-thumbnail {
+                height: 200px;
+            }
         }
     </style>
 </head>
 <body>
+    <header>
+        <div class="container">
+            <div class="header-content">
+                <div class="logo" onclick="showVideoList()">📺 VideoHub</div>
+                <div class="search-container">
+                    <input type="text" id="searchInput" placeholder="Search videos..." oninput="handleSearch()">
+                </div>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div class="container">
+            <!-- Video List View -->
+            <div id="videoListContainer">
+                <div id="loadingIndicator" class="loading">
+                    <div class="loading-spinner"></div>
+                    <p>Loading videos...</p>
+                </div>
+                <div id="videoGrid" class="video-grid"></div>
+                <div id="noResults" class="no-results" style="display: none;">
+                    <h3>No videos found</h3>
+                    <p>Try adjusting your search terms</p>
+                </div>
+                <div id="paginationContainer" class="pagination"></div>
+            </div>
+            <!-- Video Player View -->
+            <div id="videoPlayerContainer" class="player-container">
+                <button class="back-button" onclick="showVideoList()">← Back to Videos</button>
+                <div class="video-player-section">
+                    <video id="videoPlayer" class="video-player" controls>
+                        Your browser does not support the video tag.
+                    </video>
+                    <div class="video-details">
+                        <h2 id="currentVideoTitle">Video Title</h2>
+                    </div>
+                </div>
+                <div class="recommendations">
+                    <h3>Up Next</h3>
+                    <div id="recommendationsGrid" class="recommendations-grid"></div>
+                </div>
+            </div>
+        </div>
+    </main>
     <script>
+        // Global state
+        let allVideos = [];
+        let filteredVideos = [];
+        let currentPage = 1;
+        const videosPerPage = 12;
+        let currentVideoIndex = -1;
+        let searchQuery = '';
+        // Sample data (replace with actual database.json loading)
+        const sampleData = [
+            { "title": "E01 - Introduction", "url": "https://example.com/video1.mkv" },
+            { "title": "E02 - Getting Started", "url": "https://example.com/video2.mkv" },
+            { "title": "E03 - Advanced Concepts", "url": "https://example.com/video3.mkv" },
+            { "title": "E04 - Best Practices", "url": "https://example.com/video4.mkv" },
+            { "title": "E05 - Case Studies", "url": "https://example.com/video5.mkv" },
+            { "title": "E06 - Implementation", "url": "https://example.com/video6.mkv" },
+            { "title": "E07 - Testing", "url": "https://example.com/video7.mkv" },
+            { "title": "E08 - Deployment", "url": "https://example.com/video8.mkv" },
+            { "title": "E09 - Monitoring", "url": "https://example.com/video9.mkv" },
+            { "title": "E10 - Optimization", "url": "https://example.com/video10.mkv" },
+            { "title": "E11 - Security", "url": "https://example.com/video11.mkv" },
+            { "title": "E12 - Maintenance", "url": "https://example.com/video12.mkv" },
+            { "title": "E13 - Troubleshooting", "url": "https://example.com/video13.mkv" },
+            { "title": "E14 - Future Trends", "url": "https://example.com/video14.mkv" },
+            { "title": "E15 - Conclusion", "url": "https://example.com/video15.mkv" }
+        ];
+        // Initialize the application
+        async function initApp() {
+            try {
+                // Try to load from database.json, fallback to sample data
+                await loadVideos();
+                setupEventListeners();
+                handleURLHash();
+            } catch (error) {
+                console.error('Error initializing app:', error);
+                // Use sample data as fallback
+                allVideos = [...sampleData];
+                filteredVideos = [...allVideos];
+                hideLoading();
+                renderVideoGrid();
+                renderPagination();
+            }
+        }
+        // Load videos from database.json
+        async function loadVideos() {
+            try {
+                const response = await fetch('database.json');
+                if (response.ok) {
+                    const data = await response.json();
+                    allVideos = data.sort((a, b) => a.title.localeCompare(b.title));
+                } else {
+                    throw new Error('Failed to load database.json');
+                }
+            } catch (error) {
+                console.warn('Could not load database.json, using sample data:', error);
+                allVideos = [...sampleData];
+            }
+            filteredVideos = [...allVideos];
+            hideLoading();
+            renderVideoGrid();
+            renderPagination();
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Handle browser back/forward
+            window.addEventListener('popstate', handleURLHash);
+            // Handle video player events
+            const videoPlayer = document.getElementById('videoPlayer');
+            videoPlayer.addEventListener('error', handleVideoError);
+            videoPlayer.addEventListener('loadedmetadata', handleVideoLoaded);
+        }
+        // Handle URL hash changes
+        function handleURLHash() {
+            const hash = window.location.hash;
+            if (hash.startsWith('#play=')) {
+                const videoTitle = decodeURIComponent(hash.substring(6));
+                const videoIndex = allVideos.findIndex(v => v.title === videoTitle);
+                if (videoIndex !== -1) {
+                    playVideo(videoIndex);
+                } else {
+                    showVideoList();
+                }
+            } else {
+                showVideoList();
+            }
+        }
+        // Hide loading indicator
+        function hideLoading() {
+            document.getElementById('loadingIndicator').style.display = 'none';
+        }
+        // Handle search input
+        function handleSearch() {
+            const query = document.getElementById('searchInput').value.toLowerCase().trim();
+            searchQuery = query;
+            if (query === '') {
+                filteredVideos = [...allVideos];
+            } else {
+                filteredVideos = allVideos.filter(video =>
+                    video.title.toLowerCase().includes(query)
+                );
+            }
+            currentPage = 1;
+            renderVideoGrid();
+            renderPagination();
+        }
+        // Render video grid
+        function renderVideoGrid() {
+            const grid = document.getElementById('videoGrid');
+            const noResults = document.getElementById('noResults');
+            if (filteredVideos.length === 0) {
+                grid.innerHTML = '';
+                noResults.style.display = 'block';
+                return;
+            }
+            noResults.style.display = 'none';
+            const startIndex = (currentPage - 1) * videosPerPage;
+            const endIndex = startIndex + videosPerPage;
+            const videosToShow = filteredVideos.slice(startIndex, endIndex);
+            grid.innerHTML = videosToShow.map((video, index) => {
+                const actualIndex = allVideos.findIndex(v => v.title === video.title);
+                return `
+                    <div class="video-card" onclick="playVideo(${actualIndex})">
+                        <div class="video-thumbnail">
+                            <div class="play-icon">▶</div>
+                        </div>
+                        <div class="video-info">
+                            <div class="video-title">${escapeHtml(video.title)}</div>
+                            <div class="video-meta">Click to play</div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+        // Render pagination
+        function renderPagination() {
+            const container = document.getElementById('paginationContainer');
+            const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
+            if (totalPages <= 1) {
+                container.innerHTML = '';
                 return;
             }
+            let paginationHTML = '';
+            // Previous button
+            paginationHTML += `
+                <button onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>
+                    ← Previous
+                </button>
+            `;
+            // Page numbers
+            const maxVisiblePages = 5;
+            let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+            if (endPage - startPage + 1 < maxVisiblePages) {
+                startPage = Math.max(1, endPage - maxVisiblePages + 1);
+            }
+            if (startPage > 1) {
+                paginationHTML += `<button onclick="changePage(1)">1</button>`;
+                if (startPage > 2) {
+                    paginationHTML += `<span class="pagination-info">...</span>`;
+                }
+            }
+            for (let i = startPage; i <= endPage; i++) {
+                paginationHTML += `
+                    <button onclick="changePage(${i})" ${i === currentPage ? 'class="active"' : ''}>
+                        ${i}
+                    </button>
+                `;
+            }
+            if (endPage < totalPages) {
+                if (endPage < totalPages - 1) {
+                    paginationHTML += `<span class="pagination-info">...</span>`;
+                }
+                paginationHTML += `<button onclick="changePage(${totalPages})">${totalPages}</button>`;
+            }
+            // Next button
+            paginationHTML += `
+                <button onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>
+                    Next →
+                </button>
+            `;
+            // Page info
+            const startItem = (currentPage - 1) * videosPerPage + 1;
+            const endItem = Math.min(currentPage * videosPerPage, filteredVideos.length);
+            paginationHTML += `
+                <span class="pagination-info">
+                    ${startItem}-${endItem} of ${filteredVideos.length} videos
+                </span>
+            `;
+            container.innerHTML = paginationHTML;
+        }
+        // Change page
+        function changePage(page) {
+            const totalPages = Math.ceil(filteredVideos.length / videosPerPage);
+            if (page >= 1 && page <= totalPages) {
+                currentPage = page;
+                renderVideoGrid();
+                renderPagination();
+                // Scroll to top
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        }
+        // Play video
+        function playVideo(videoIndex) {
+            if (videoIndex < 0 || videoIndex >= allVideos.length) return;
+            currentVideoIndex = videoIndex;
+            const video = allVideos[videoIndex];
+            // Update URL hash
+            window.history.pushState(null, null, `#play=${encodeURIComponent(video.title)}`);
+            // Hide video list, show player
+            document.getElementById('videoListContainer').style.display = 'none';
+            document.getElementById('videoPlayerContainer').classList.add('active');
+            // Set up video player
+            const videoPlayer = document.getElementById('videoPlayer');
+            videoPlayer.src = video.url;
+            // Update video title
+            document.getElementById('currentVideoTitle').textContent = video.title;
+            // Generate recommendations
+            generateRecommendations();
+            // Scroll to top
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        // Generate recommendations
+        function generateRecommendations() {
+            const grid = document.getElementById('recommendationsGrid');
+            const recommendations = [];
+            // Get next 5 videos in sequence
+            for (let i = 1; i <= 5; i++) {
+                const nextIndex = currentVideoIndex + i;
+                if (nextIndex < allVideos.length) {
+                    recommendations.push({ video: allVideos[nextIndex], index: nextIndex });
+                }
+            }
+            // If we don't have enough recommendations, add some from the beginning
+            let startIndex = 0;
+            while (recommendations.length < 5 && startIndex < allVideos.length) {
+                if (startIndex !== currentVideoIndex &&
+                    !recommendations.some(r => r.index === startIndex)) {
+                    recommendations.push({ video: allVideos[startIndex], index: startIndex });
+                }
+                startIndex++;
+            }
+            grid.innerHTML = recommendations.map(({ video, index }) => `
+                <div class="recommendation-card" onclick="playVideo(${index})">
+                    <div class="recommendation-title">${escapeHtml(video.title)}</div>
+                    <div class="video-meta">Click to play</div>
+                </div>
+            `).join('');
+        }
+        // Show video list
+        function showVideoList() {
+            // Update URL
+            window.history.pushState(null, null, window.location.pathname);
+            // Hide player, show list
+            document.getElementById('videoPlayerContainer').classList.remove('active');
+            document.getElementById('videoListContainer').style.display = 'block';
+            // Pause current video
+            const videoPlayer = document.getElementById('videoPlayer');
+            videoPlayer.pause();
+        }
+        // Handle video errors
+        function handleVideoError(event) {
+            console.error('Video error:', event);
+            alert('Error loading video. Please check the video URL or try again later.');
+        }
+        // Handle video loaded
+        function handleVideoLoaded(event) {
+            console.log('Video loaded successfully');
+        }
+        // Utility function to escape HTML
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initApp);
+    </script>
 </body>
 </html>