coursewatcher 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "coursewatcher",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "A CLI tool and web interface for tracking progress in downloaded video courses",
     "main": "src/server.js",
     "bin": {
@@ -54,4 +54,4 @@
     "engines": {
         "node": ">=18.0.0"
     }
-}
+}

package/public/css/styles.css

@@ -504,7 +504,7 @@ a:hover {
    ========================================== */
 
 .player-container {
-  max-width: 1400px;
+  max-width: 1600px;
 }
 
 .player-section {
@@ -1037,4 +1037,339 @@ a:hover {
 }
 
 /* Hide default controls on fullscreen if needed (we rely on custom ones now) */
-/* .video-player::-webkit-media-controls { display:none !important; } */
+/* .video-player::-webkit-media-controls { display:none !important; } */
+
+/* ==========================================
+   Player Layout with Queue
+   ========================================== */
+
+.player-layout {
+  display: flex;
+  gap: var(--space-md);
+  /* Reduced gap */
+  align-items: flex-start;
+}
+
+.player-main {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ==========================================
+   Queue Panel
+   ========================================== */
+
+.queue-panel {
+  width: 30%;
+  /* Slightly narrower width */
+  min-width: 300px;
+  max-width: 450px;
+  flex-shrink: 0;
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  overflow: hidden;
+  position: sticky;
+  top: 100px;
+  max-height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.queue-header {
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--color-border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.queue-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 2px;
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.queue-module-name {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.queue-list {
+  overflow-y: auto;
+  flex: 1;
+  padding: var(--space-sm);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.queue-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.queue-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.queue-list::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  border-radius: 3px;
+}
+
+.queue-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  /* More comfortable padding */
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  transition: all var(--transition-fast);
+  margin-bottom: 2px;
+  text-decoration: none;
+  border: 1px solid transparent;
+}
+
+.queue-item:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text);
+  transform: translateX(2px);
+}
+
+.queue-item.active {
+  background: var(--color-surface);
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.queue-item.active:hover {
+  background: var(--color-surface);
+  transform: none;
+}
+
+.queue-item-number {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 50%;
+  /* Circle instead of square */
+  color: var(--color-text-muted);
+  transition: all var(--transition-fast);
+}
+
+.queue-item.active .queue-item-number {
+  background: var(--color-primary);
+  color: white;
+}
+
+.queue-item-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.queue-item-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  display: block;
+  /* Multi-line clamp instead of single line ellipsis for better readability */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  color: inherit;
+}
+
+.queue-item.active .queue-item-title {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.queue-item-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: 2px;
+}
+
+.queue-item-status {
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+}
+
+.queue-item-status.status-completed {
+  color: var(--color-success);
+}
+
+.queue-item-status.status-in-progress {
+  color: var(--color-warning);
+}
+
+.queue-item-status.status-unwatched {
+  color: var(--color-text-muted);
+}
+
+.queue-item.active .queue-item-status {
+  /* color: var(--color-primary); */
+}
+
+.queue-item-playing {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-primary);
+  background: rgba(124, 58, 237, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* ==========================================
+   Autoplay Countdown Overlay
+   ========================================== */
+
+.autoplay-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  backdrop-filter: blur(8px);
+}
+
+.autoplay-overlay.hidden {
+  display: none;
+}
+
+.autoplay-content {
+  text-align: center;
+  color: white;
+}
+
+.autoplay-countdown-ring {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  margin: 0 auto var(--space-lg);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: transform var(--transition-fast);
+}
+
+.autoplay-countdown-ring:hover {
+  transform: scale(1.05);
+}
+
+.autoplay-countdown-ring:hover .countdown-progress {
+  stroke: var(--color-primary-hover);
+}
+
+.autoplay-countdown-ring svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.countdown-bg {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 6;
+}
+
+.countdown-progress {
+  fill: none;
+  stroke: var(--color-primary);
+  stroke-width: 6;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset 1s linear;
+}
+
+.countdown-number {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+  text-shadow: 0 0 20px rgba(124, 58, 237, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.autoplay-text {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-xs);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.autoplay-next-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: var(--space-lg);
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.autoplay-cancel {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: var(--space-sm) var(--space-xl);
+  font-size: 0.9rem;
+}
+
+.autoplay-cancel:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: none;
+  box-shadow: none;
+}
+
+/* Responsive: Queue below player on smaller screens */
+@media (max-width: 1024px) {
+  .player-layout {
+    flex-direction: column;
+  }
+
+  .queue-panel {
+    width: 100%;
+    position: static;
+    max-height: 400px;
+  }
+}
+
+/* Fullscreen autoplay overlay */
+:fullscreen .autoplay-overlay,
+:-webkit-full-screen .autoplay-overlay,
+:-moz-full-screen .autoplay-overlay {
+  position: fixed;
+}

package/public/js/player.js

@@ -1,7 +1,8 @@
 /**
  * Video Player Controls
  * 
- * Handles Plyr initialization, keyboard shortcuts, and progress auto-save.
+ * Handles Plyr initialization, keyboard shortcuts, progress auto-save,
+ * and autoplay countdown functionality.
  */
 
 (function () {
@@ -9,6 +10,7 @@
 
     // Constants
     const SAVE_INTERVAL = 5000; // Save progress every 5 seconds
+    const AUTOPLAY_COUNTDOWN = 5; // Seconds before auto-navigating to next video
 
     // Elements
     const videoElement = document.getElementById('videoPlayer');
@@ -19,13 +21,23 @@
     const notesSaveStatus = document.getElementById('notesSaveStatus');
     const statusButtons = document.querySelectorAll('.status-btn');
 
+    // Autoplay elements
+    const autoplayOverlay = document.getElementById('autoplayOverlay');
+    const countdownNumber = document.getElementById('countdownNumber');
+    const countdownProgress = document.getElementById('countdownProgress');
+    const nextVideoTitle = document.getElementById('nextVideoTitle');
+    const cancelAutoplayBtn = document.getElementById('cancelAutoplay');
+
     if (!videoElement) return;
 
     const videoId = videoElement.dataset.videoId;
     const savedPosition = parseFloat(videoElement.dataset.savedPosition) || 0;
+    const nextVideoUrl = videoElement.dataset.nextVideoUrl;
 
     let saveTimeout = null;
     let lastSavedPosition = savedPosition;
+    let autoplayInterval = null;
+    let autoplayCountdown = AUTOPLAY_COUNTDOWN;
 
     // ==========================================
     // Initialization
@@ -55,17 +67,24 @@
             ]
         });
 
-        // Restore saved position
+        // Restore saved position and autoplay
         player.on('ready', () => {
             if (savedPosition > 0) {
                 player.currentTime = savedPosition;
             }
+
+            // Always try to autoplay
+            player.play().catch(() => {
+                // Autoplay might be blocked by browser on first visit, ignore
+                console.log('Autoplay was prevented by browser');
+            });
         });
 
         // Setup Logic
         setupStatusControls();
         setupNotesControls();
         setupProgressAutoSave(player);
+        setupAutoplay(player);
 
         // Custom shortcuts not covered by Plyr (if any)
         // Plyr covers Space, K, F, M, Arrow keys.
@@ -112,7 +131,7 @@
         // Save on pause
         player.on('pause', () => saveProgress(player));
 
-        // Save on video end
+        // Save on video end (but don't update status here, autoplay handles it)
         player.on('ended', () => {
             saveProgress(player);
             updateStatus('completed');
@@ -174,6 +193,111 @@
         );
     }
 
+    // ==========================================
+    // Autoplay Countdown
+    // ==========================================
+
+    function setupAutoplay(player) {
+        if (!nextVideoUrl || !autoplayOverlay) return;
+
+        // Get skip button
+        const skipToNextBtn = document.getElementById('skipToNext');
+
+        // Get next video title from queue
+        const nextVideoId = nextVideoUrl.split('/').pop();
+        const nextQueueItem = document.querySelector(`.queue-item[data-video-id="${nextVideoId}"]`);
+        const nextTitle = nextQueueItem ? nextQueueItem.dataset.videoTitle : 'Next Video';
+
+        // Set the title in the overlay
+        if (nextVideoTitle) {
+            nextVideoTitle.textContent = nextTitle;
+        }
+
+        // When video ends, start countdown
+        player.on('ended', () => {
+            startAutoplayCountdown();
+        });
+
+        // Skip button - navigate immediately
+        if (skipToNextBtn) {
+            skipToNextBtn.addEventListener('click', () => {
+                if (autoplayInterval) {
+                    clearInterval(autoplayInterval);
+                }
+                window.location.href = nextVideoUrl;
+            });
+        }
+
+        // Cancel button
+        if (cancelAutoplayBtn) {
+            cancelAutoplayBtn.addEventListener('click', () => {
+                cancelAutoplayCountdown();
+            });
+        }
+
+        // ESC key to cancel
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !autoplayOverlay.classList.contains('hidden')) {
+                cancelAutoplayCountdown();
+            }
+        });
+    }
+
+    function startAutoplayCountdown() {
+        if (!nextVideoUrl) return;
+
+        autoplayCountdown = AUTOPLAY_COUNTDOWN;
+
+        // Show overlay
+        autoplayOverlay.classList.remove('hidden');
+
+        // Update countdown display
+        updateCountdownDisplay();
+
+        // Start countdown interval
+        autoplayInterval = setInterval(() => {
+            autoplayCountdown--;
+            updateCountdownDisplay();
+
+            if (autoplayCountdown <= 0) {
+                clearInterval(autoplayInterval);
+                // Navigate to next video with autoplay
+                window.location.href = nextVideoUrl;
+            }
+        }, 1000);
+    }
+
+    function updateCountdownDisplay() {
+        if (countdownNumber) {
+            countdownNumber.textContent = autoplayCountdown;
+        }
+
+        if (countdownProgress) {
+            // Calculate progress (circle circumference is 2 * PI * r = 2 * PI * 45 ≈ 283)
+            const circumference = 283;
+            const progress = (AUTOPLAY_COUNTDOWN - autoplayCountdown) / AUTOPLAY_COUNTDOWN;
+            const offset = circumference * progress;
+            countdownProgress.style.strokeDashoffset = offset;
+        }
+    }
+
+    function cancelAutoplayCountdown() {
+        if (autoplayInterval) {
+            clearInterval(autoplayInterval);
+            autoplayInterval = null;
+        }
+
+        // Hide overlay
+        if (autoplayOverlay) {
+            autoplayOverlay.classList.add('hidden');
+        }
+
+        // Reset progress ring
+        if (countdownProgress) {
+            countdownProgress.style.strokeDashoffset = 0;
+        }
+    }
+
     // ==========================================
     // Notes Controls
     // ==========================================
@@ -232,3 +356,4 @@
         init();
     }
 })();
+

package/src/cli.js

@@ -20,18 +20,20 @@ program
     .description(description)
     .version(version)
     .argument('[path]', 'path to course directory', '.')
-    .option('-p, --port <number>', 'server port', '3000')
+    .option('-p, --port <number>', 'server port')
     .option('--no-browser', 'do not open browser automatically')
     .action(async (coursePath, options) => {
         try {
             const absolutePath = path.resolve(coursePath);
-            const port = parseInt(options.port, 10);
+            const isPortSpecified = !!options.port;
+            const port = isPortSpecified ? parseInt(options.port, 10) : 3000;
 
             log(`Starting CourseWatcher in: ${absolutePath}`);
 
             await startServer({
                 coursePath: absolutePath,
                 port,
+                allowFallback: !isPortSpecified,
                 openBrowser: options.browser,
             });
         } catch (err) {

package/src/controllers/video-controller.js

@@ -48,12 +48,14 @@ function createVideoRoutes(services) {
             const video = videoService.getVideoById(videoId);
             const adjacent = videoService.getAdjacentVideos(videoId);
             const notes = notesService.getNotes(videoId);
+            const queue = videoService.getQueueVideos(videoId);
 
             res.render('pages/player', {
                 title: video.title,
                 video,
                 adjacent,
                 notes,
+                queue,
             });
         } catch (err) {
             next(err);

package/src/server.js

@@ -27,7 +27,7 @@ const chalk = require('chalk');
  * @returns {Promise<Object>} Server instance and services
  */
 async function startServer(options) {
-    const { coursePath, port, openBrowser } = options;
+    const { coursePath, port, openBrowser, allowFallback } = options;
 
     // Initialize database
     log('Initializing database...');
@@ -93,73 +93,86 @@ async function startServer(options) {
 
     // Start server
     return new Promise((resolve, reject) => {
-        const server = app.listen(port, () => {
-            const url = `http://localhost:${port}`;
-            success(`Server running at ${chalk.cyan(url)}`);
-
-            // Open browser if requested
-            if (openBrowser) {
-                log('Opening browser...');
-                open(url).catch(() => {
-                    // Ignore browser open errors
+        let currentPort = port;
+
+        const start = (retryPort) => {
+            const server = app.listen(retryPort, () => {
+                const url = `http://localhost:${retryPort}`;
+                success(`Server running at ${chalk.cyan(url)}`);
+
+                // Open browser if requested
+                if (openBrowser) {
+                    log('Opening browser...');
+                    open(url).catch(() => {
+                        // Ignore browser open errors
+                    });
+                }
+
+                // Track active connections
+                const sockets = new Set();
+                server.on('connection', (socket) => {
+                    sockets.add(socket);
+                    server.once('close', () => sockets.delete(socket));
                 });
-            }
 
-            // Track active connections
-            const sockets = new Set();
-            server.on('connection', (socket) => {
-                sockets.add(socket);
-                server.once('close', () => sockets.delete(socket));
+                // Handle graceful shutdown
+                let isShuttingDown = false;
+                const shutdown = async (signal) => {
+                    if (isShuttingDown) return;
+                    isShuttingDown = true;
+
+                    log(`\nShutting down... (${signal})`);
+
+                    // Force exit after timeout if graceful shutdown fails
+                    const forceExitTimeout = setTimeout(() => {
+                        error('Forced shutdown after timeout');
+                        process.exit(1);
+                    }, 5000);
+
+                    // Destroy all active connections
+                    for (const socket of sockets) {
+                        socket.destroy();
+                        sockets.delete(socket);
+                    }
+
+                    database.close();
+                    server.close(() => {
+                        clearTimeout(forceExitTimeout);
+                        success('Server closed');
+                        process.exit(0);
+                    });
+                };
+
+                process.on('SIGINT', () => shutdown('SIGINT'));
+                process.on('SIGTERM', () => shutdown('SIGTERM'));
+
+                resolve({
+                    server,
+                    database,
+                    services: {
+                        videoService,
+                        progressService,
+                        notesService,
+                    },
+                });
             });
 
-            // Handle graceful shutdown
-            let isShuttingDown = false;
-            const shutdown = async (signal) => {
-                if (isShuttingDown) return;
-                isShuttingDown = true;
-
-                log(`\nShutting down... (${signal})`);
-
-                // Force exit after timeout if graceful shutdown fails
-                const forceExitTimeout = setTimeout(() => {
-                    error('Forced shutdown after timeout');
-                    process.exit(1);
-                }, 5000);
-
-                // Destroy all active connections
-                for (const socket of sockets) {
-                    socket.destroy();
-                    sockets.delete(socket);
+            server.on('error', (err) => {
+                if (err.code === 'EADDRINUSE') {
+                    if (allowFallback) {
+                        log(`Port ${retryPort} is busy, trying ${retryPort + 1}...`);
+                        start(retryPort + 1);
+                    } else {
+                        error(`Port ${retryPort} is already in use`);
+                        reject(err);
+                    }
+                } else {
+                    reject(err);
                 }
-
-                database.close();
-                server.close(() => {
-                    clearTimeout(forceExitTimeout);
-                    success('Server closed');
-                    process.exit(0);
-                });
-            };
-
-            process.on('SIGINT', () => shutdown('SIGINT'));
-            process.on('SIGTERM', () => shutdown('SIGTERM'));
-
-            resolve({
-                server,
-                database,
-                services: {
-                    videoService,
-                    progressService,
-                    notesService,
-                },
             });
-        });
+        };
 
-        server.on('error', (err) => {
-            if (err.code === 'EADDRINUSE') {
-                error(`Port ${port} is already in use`);
-            }
-            reject(err);
-        });
+        start(currentPort);
     });
 }
 

package/src/services/video-service.js

@@ -277,6 +277,38 @@ class VideoService {
         };
     }
 
+    /**
+     * Get all videos in the same module for queue display
+     * @param {number} id - Current video ID
+     * @returns {Object} Object with moduleName and videos array
+     */
+    getQueueVideos(id) {
+        const video = this.getVideoById(id);
+
+        // Get module name
+        let moduleName = 'Videos';
+        if (video.module_id) {
+            const module = this._db.get('SELECT name FROM modules WHERE id = ?', [video.module_id]);
+            if (module) {
+                moduleName = module.name;
+            }
+        }
+
+        // Get all videos in same module, ordered
+        const videos = this._db.all(
+            `SELECT id, title, status, position, duration FROM videos 
+       WHERE module_id ${video.module_id ? '= ?' : 'IS NULL'}
+       ORDER BY sort_order, filename`,
+            video.module_id ? [video.module_id] : []
+        );
+
+        return {
+            moduleName,
+            videos,
+            currentId: id,
+        };
+    }
+
     /**
      * Search videos by title
      * @param {string} query - Search query

package/views/pages/player.ejs

@@ -6,90 +6,149 @@
         <%- include('../partials/header') %>
 
             <main class="container player-container">
-                <!-- Video Player Section -->
-                <!-- Video Player Section -->
-                <section class="player-section">
-                    <h1 class="video-title">
-                        <%= video.title %>
-                    </h1>
-                    <div class="video-wrapper">
-                        <video id="videoPlayer" class="plyr" playsinline controls data-video-id="<%= video.id %>"
-                            data-saved-position="<%= video.position %>">
-                            <source src="/api/videos/<%= video.id %>/stream" type="video/mp4">
-                            Your browser does not support the video tag.
-                        </video>
-                    </div>
+                <div class="player-layout">
+                    <!-- Main Player Section -->
+                    <div class="player-main">
+                        <!-- Video Player Section -->
+                        <section class="player-section">
+                            <h1 class="video-title">
+                                <%= video.title %>
+                            </h1>
+                            <div class="video-wrapper">
+                                <video id="videoPlayer" class="plyr" playsinline controls
+                                    data-video-id="<%= video.id %>" data-saved-position="<%= video.position %>"
+                                    data-next-video-url="<%= adjacent.next ? '/video/' + adjacent.next : '' %>">
+                                    <source src="/api/videos/<%= video.id %>/stream" type="video/mp4">
+                                    Your browser does not support the video tag.
+                                </video>
 
-                    <!-- Navigation -->
-                    <div class="player-nav">
-                        <% if (adjacent.prev) { %>
-                            <a href="/video/<%= adjacent.prev %>" class="nav-button prev">
-                                ← Previous
-                            </a>
-                            <% } else { %>
-                                <span class="nav-button disabled">← Previous</span>
-                                <% } %>
+                                <!-- Auto-play Countdown Overlay -->
+                                <div id="autoplayOverlay" class="autoplay-overlay hidden">
+                                    <div class="autoplay-content">
+                                        <button id="skipToNext" class="autoplay-countdown-ring"
+                                            title="Click to play now">
+                                            <svg viewBox="0 0 100 100">
+                                                <circle cx="50" cy="50" r="45" class="countdown-bg" />
+                                                <circle cx="50" cy="50" r="45" class="countdown-progress"
+                                                    id="countdownProgress" />
+                                            </svg>
+                                            <span id="countdownNumber" class="countdown-number">5</span>
+                                        </button>
+                                        <p class="autoplay-text">Up Next</p>
+                                        <p id="nextVideoTitle" class="autoplay-next-title"></p>
+                                        <button id="cancelAutoplay" class="btn autoplay-cancel">Cancel</button>
+                                    </div>
+                                </div>
+                            </div>
 
-                                    <a href="/" class="nav-button home">📚 Back to Course</a>
+                            <!-- Navigation -->
+                            <div class="player-nav">
+                                <% if (adjacent.prev) { %>
+                                    <a href="/video/<%= adjacent.prev %>" class="nav-button prev">
+                                        ← Previous
+                                    </a>
+                                    <% } else { %>
+                                        <span class="nav-button disabled">← Previous</span>
+                                        <% } %>
 
-                                    <% if (adjacent.next) { %>
-                                        <a href="/video/<%= adjacent.next %>" class="nav-button next">
-                                            Next →
-                                        </a>
-                                        <% } else { %>
-                                            <span class="nav-button disabled">Next →</span>
-                                            <% } %>
-                    </div>
-                </section>
+                                            <a href="/" class="nav-button home">📚 Back to Course</a>
 
-                <!-- Video Info Section -->
-                <section class="video-info-section">
+                                            <% if (adjacent.next) { %>
+                                                <a href="/video/<%= adjacent.next %>" class="nav-button next">
+                                                    Next →
+                                                </a>
+                                                <% } else { %>
+                                                    <span class="nav-button disabled">Next →</span>
+                                                    <% } %>
+                            </div>
+                        </section>
 
-                    <!-- Status Controls -->
-                    <div class="status-controls">
-                        <span class="status-label">Status:</span>
-                        <div class="status-buttons">
-                            <button class="status-btn <%= video.status === 'unwatched' ? 'active' : '' %>"
-                                data-status="unwatched">
-                                ○ Unwatched
-                            </button>
-                            <button class="status-btn <%= video.status === 'in-progress' ? 'active' : '' %>"
-                                data-status="in-progress">
-                                ▶ In Progress
-                            </button>
-                            <button class="status-btn <%= video.status === 'completed' ? 'active' : '' %>"
-                                data-status="completed">
-                                ✓ Completed
-                            </button>
-                        </div>
-                    </div>
+                        <!-- Video Info Section -->
+                        <section class="video-info-section">
 
-                    <!-- Keyboard Shortcuts Help -->
-                    <details class="shortcuts-help">
-                        <summary>⌨️ Keyboard Shortcuts</summary>
-                        <div class="shortcuts-grid">
-                            <div class="shortcut"><kbd>Space</kbd> / <kbd>K</kbd> Play/Pause</div>
-                            <div class="shortcut"><kbd>M</kbd> Mute/Unmute</div>
-                            <div class="shortcut"><kbd>F</kbd> Fullscreen</div>
-                            <div class="shortcut"><kbd>←</kbd> Back 10s</div>
-                            <div class="shortcut"><kbd>→</kbd> Forward 10s</div>
-                            <div class="shortcut"><kbd>↑</kbd> Volume Up</div>
-                            <div class="shortcut"><kbd>↓</kbd> Volume Down</div>
-                            <div class="shortcut"><kbd>C</kbd> Captions</div>
-                        </div>
-                    </details>
-                </section>
+                            <!-- Status Controls -->
+                            <div class="status-controls">
+                                <span class="status-label">Status:</span>
+                                <div class="status-buttons">
+                                    <button class="status-btn <%= video.status === 'unwatched' ? 'active' : '' %>"
+                                        data-status="unwatched">
+                                        ○ Unwatched
+                                    </button>
+                                    <button class="status-btn <%= video.status === 'in-progress' ? 'active' : '' %>"
+                                        data-status="in-progress">
+                                        ▶ In Progress
+                                    </button>
+                                    <button class="status-btn <%= video.status === 'completed' ? 'active' : '' %>"
+                                        data-status="completed">
+                                        ✓ Completed
+                                    </button>
+                                </div>
+                            </div>
 
-                <!-- Notes Section -->
-                <section class="notes-section">
-                    <h2 class="section-title">📝 Notes</h2>
-                    <textarea id="notesEditor" class="notes-editor"
-                        placeholder="Take notes for this video... (Markdown supported)"><%= notes.content || '' %></textarea>
-                    <div class="notes-actions">
-                        <button id="saveNotes" class="btn btn-primary">Save Notes</button>
-                        <span id="notesSaveStatus" class="save-status"></span>
+                            <!-- Keyboard Shortcuts Help -->
+                            <details class="shortcuts-help">
+                                <summary>⌨️ Keyboard Shortcuts</summary>
+                                <div class="shortcuts-grid">
+                                    <div class="shortcut"><kbd>Space</kbd> / <kbd>K</kbd> Play/Pause</div>
+                                    <div class="shortcut"><kbd>M</kbd> Mute/Unmute</div>
+                                    <div class="shortcut"><kbd>F</kbd> Fullscreen</div>
+                                    <div class="shortcut"><kbd>←</kbd> Back 10s</div>
+                                    <div class="shortcut"><kbd>→</kbd> Forward 10s</div>
+                                    <div class="shortcut"><kbd>↑</kbd> Volume Up</div>
+                                    <div class="shortcut"><kbd>↓</kbd> Volume Down</div>
+                                    <div class="shortcut"><kbd>C</kbd> Captions</div>
+                                </div>
+                            </details>
+                        </section>
+
+                        <!-- Notes Section -->
+                        <section class="notes-section">
+                            <h2 class="section-title">📝 Notes</h2>
+                            <textarea id="notesEditor" class="notes-editor"
+                                placeholder="Take notes for this video... (Markdown supported)"><%= notes.content || '' %></textarea>
+                            <div class="notes-actions">
+                                <button id="saveNotes" class="btn btn-primary">Save Notes</button>
+                                <span id="notesSaveStatus" class="save-status"></span>
+                            </div>
+                        </section>
                     </div>
-                </section>
+
+                    <!-- Queue Panel -->
+                    <aside class="queue-panel">
+                        <div class="queue-header">
+                            <h2 class="queue-title">📋 Queue</h2>
+                            <span class="queue-module-name">
+                                <%= queue.moduleName %>
+                            </span>
+                        </div>
+                        <div class="queue-list">
+                            <% queue.videos.forEach((qVideo, index)=> { %>
+                                <a href="/video/<%= qVideo.id %>"
+                                    class="queue-item <%= qVideo.id === queue.currentId ? 'active' : '' %>"
+                                    data-video-id="<%= qVideo.id %>" data-video-title="<%= qVideo.title %>">
+                                    <span class="queue-item-number">
+                                        <%= index + 1 %>
+                                    </span>
+                                    <div class="queue-item-content">
+                                        <span class="queue-item-title">
+                                            <%= qVideo.title %>
+                                        </span>
+                                        <div class="queue-item-meta">
+                                            <span class="queue-item-status status-<%= qVideo.status %>">
+                                                <% if (qVideo.status==='completed' ) { %>✓
+                                                    <% } else if (qVideo.status==='in-progress' ) { %>▶
+                                                        <% } else { %>○<% } %>
+                                            </span>
+                                            <% if (qVideo.id===queue.currentId) { %>
+                                                <span class="queue-item-playing">Now Playing</span>
+                                                <% } %>
+                                        </div>
+                                    </div>
+                                </a>
+                                <% }); %>
+                        </div>
+                    </aside>
+                </div>
             </main>
 
             <%- include('../partials/footer') %>