HTML Lesson Viewer with Multimedia Support

// Initialize PDF.js
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

document.addEventListener('DOMContentLoaded', function() {
    // Mobile sidebar toggle
    const sidebarToggle = document.getElementById('sidebar-toggle');
    const sidebar = document.querySelector('.sidebar');
    const overlay = document.querySelector('.overlay');
    
    sidebarToggle.addEventListener('click', function() {
        sidebar.classList.toggle('open');
        overlay.classList.toggle('open');
    });
    
    overlay.addEventListener('click', function() {
        sidebar.classList.remove('open');
        overlay.classList.remove('open');
    });
    
    // Lesson item click handler
    const lessonItems = document.querySelectorAll('.lesson-item');
    lessonItems.forEach(item => {
        item.addEventListener('click', function() {
            // Remove active class from all items
            lessonItems.forEach(i => i.classList.remove('active'));
            // Add active class to clicked item
            this.classList.add('active');
            
            // Update header title
            const title = this.querySelector('span').textContent;
            document.querySelector('header h1').textContent = title;
            
            // Determine content type and show appropriate content
            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-file-alt')) {
                showTextContent();
            } else if (icon.classList.contains('fa-play-circle')) {
                showVideoContent();
            } else if (icon.classList.contains('fa-file-pdf')) {
                showPdfContent();
            }
        });
    });
    
    // PDF navigation
    const prevPageBtn = document.getElementById('prev-page');
    const nextPageBtn = document.getElementById('next-page');
    const pageInfo = document.getElementById('page-info');
    
    let pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null;
    
    function showTextContent() {
        document.getElementById('text-content').classList.remove('hidden');
        document.getElementById('video-content').classList.add('hidden');
        document.getElementById('pdf-content').classList.add('hidden');
    }
    
    function showVideoContent() {
        document.getElementById('text-content').classList.add('hidden');
        document.getElementById('video-content').classList.remove('hidden');
        document.getElementById('pdf-content').classList.add('hidden');
    }
    
    function showPdfContent() {
        document.getElementById('text-content').classList.add('hidden');
        document.getElementById('video-content').classList.add('hidden');
        document.getElementById('pdf-content').classList.remove('hidden');
        
        // Load a sample PDF (replace with your PDF URL)
        const url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
        
        pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            pageInfo.textContent = `Page 1 of ${pdfDoc.numPages}`;
            
            // Render the first page
            renderPage(1);
        });
    }
    
    function renderPage(num) {
        pageRendering = true;
        
        pdfDoc.getPage(num).then(function(page) {
            const viewport = page.getViewport({ scale: 1.5 });
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            
            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            
            const renderTask = page.render(renderContext);
            
            renderTask.promise.then(function() {
                pageRendering = false;
                
                const pdfViewer = document.getElementById('pdf-viewer');
                pdfViewer.innerHTML = '';
                pdfViewer.appendChild(canvas);
                
                if (pageNumPending !== null) {
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });
        
        pageInfo.textContent = `Page ${num} of ${pdfDoc.numPages}`;
    }
    
    function onPrevPage() {
        if (pageNum <= 1) return;
        pageNum--;
        queueRenderPage(pageNum);
    }
    
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) return;
        pageNum++;
        queueRenderPage(pageNum);
    }
    
    prevPageBtn.addEventListener('click', onPrevPage);
    nextPageBtn.addEventListener('click', onNextPage);
    
    // Initially show text content
    showTextContent();
});

6. Testing and Final Touches

• Test on different devices (mobile, tablet, desktop).

• Ensure PDF rendering works (adjust scale if needed).

• Add real course content (replace sample data).