coursewatcher 1.0.1 → 1.3.0

package/public/js/player.js

@@ -1,94 +1,94 @@
 /**
  * Video Player Controls
  * 
- * Handles keyboard shortcuts, playback controls, and progress auto-save.
+ * Handles Plyr initialization, keyboard shortcuts, progress auto-save,
+ * and autoplay countdown functionality.
  */
 
 (function () {
     'use strict';
 
     // Constants
-    const SPEED_STEP = 0.25;
-    const MIN_SPEED = 0.25;
-    const MAX_SPEED = 4.0;
-    const SEEK_SHORT = 5;
-    const SEEK_MEDIUM = 10;
-    const SEEK_LONG = 30;
     const SAVE_INTERVAL = 5000; // Save progress every 5 seconds
+    const AUTOPLAY_COUNTDOWN = 5; // Seconds before auto-navigating to next video
 
     // Elements
-    const video = document.getElementById('videoPlayer');
-    const speedDisplay = document.getElementById('speedDisplay');
-    const speedDown = document.getElementById('speedDown');
-    const speedUp = document.getElementById('speedUp');
-    const seekBack5 = document.getElementById('seekBack5');
-    const seekForward5 = document.getElementById('seekForward5');
-    const seekForward10 = document.getElementById('seekForward10');
-    const statusButtons = document.querySelectorAll('.status-btn');
+    const videoElement = document.getElementById('videoPlayer');
+
+    // Notes & Status
     const notesEditor = document.getElementById('notesEditor');
     const saveNotesBtn = document.getElementById('saveNotes');
     const notesSaveStatus = document.getElementById('notesSaveStatus');
+    const statusButtons = document.querySelectorAll('.status-btn');
 
-    if (!video) return;
+    // 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');
 
-    const videoId = video.dataset.videoId;
-    const savedPosition = parseFloat(video.dataset.savedPosition) || 0;
+    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
     // ==========================================
 
-    /**
-     * Initialize player
-     */
     function init() {
-        // Restore saved position
-        video.addEventListener('loadedmetadata', () => {
-            if (savedPosition > 0 && savedPosition < video.duration) {
-                video.currentTime = savedPosition;
+        // Initialize Plyr
+        const player = new Plyr('#videoPlayer', {
+            keyboard: { focused: true, global: true },
+            seekTime: 5,
+            controls: [
+                'play-large', // The large play button in the center
+                'restart', // Restart playback
+                'rewind', // Rewind by the seek time (default 10 seconds)
+                'play', // Play/pause playback
+                'fast-forward', // Fast forward by the seek time (default 10 seconds)
+                'progress', // The progress bar and scrubber for playback and buffering
+                'current-time', // The current time of playback
+                'duration', // The full duration of the media
+                'mute', // Toggle mute
+                'volume', // Volume control
+                'captions', // Toggle captions
+                'settings', // Settings menu
+                'pip', // Picture-in-picture (currently Safari only)
+                'airplay', // Airplay (currently Safari only)
+                'fullscreen', // Toggle fullscreen
+            ]
+        });
+
+        // Restore saved position and autoplay
+        player.on('ready', () => {
+            if (savedPosition > 0) {
+                player.currentTime = savedPosition;
             }
-            updateSpeedDisplay();
+
+            // Always try to autoplay
+            player.play().catch(() => {
+                // Autoplay might be blocked by browser on first visit, ignore
+                console.log('Autoplay was prevented by browser');
+            });
         });
 
-        // Set up event listeners
-        setupPlaybackControls();
+        // Setup Logic
         setupStatusControls();
-        setupKeyboardShortcuts();
         setupNotesControls();
-        setupProgressAutoSave();
-    }
-
-    // ==========================================
-    // Playback Controls
-    // ==========================================
-
-    function setupPlaybackControls() {
-        speedDown?.addEventListener('click', () => changeSpeed(-SPEED_STEP));
-        speedUp?.addEventListener('click', () => changeSpeed(SPEED_STEP));
-        seekBack5?.addEventListener('click', () => seek(-SEEK_SHORT));
-        seekForward5?.addEventListener('click', () => seek(SEEK_SHORT));
-        seekForward10?.addEventListener('click', () => seek(SEEK_MEDIUM));
-    }
-
-    function changeSpeed(delta) {
-        let newSpeed = video.playbackRate + delta;
-        newSpeed = Math.max(MIN_SPEED, Math.min(MAX_SPEED, newSpeed));
-        newSpeed = Math.round(newSpeed * 100) / 100; // Fix floating point
-        video.playbackRate = newSpeed;
-        updateSpeedDisplay();
-    }
-
-    function updateSpeedDisplay() {
-        if (speedDisplay) {
-            speedDisplay.textContent = video.playbackRate.toFixed(2) + 'x';
-        }
-    }
+        setupProgressAutoSave(player);
+        setupAutoplay(player);
 
-    function seek(seconds) {
-        video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
+        // Custom shortcuts not covered by Plyr (if any)
+        // Plyr covers Space, K, F, M, Arrow keys.
+        // We can add custom ones if needed, but standard ones are usually enough.
     }
 
     // ==========================================
@@ -123,111 +123,48 @@
         }
     }
 
-    // ==========================================
-    // Keyboard Shortcuts
-    // ==========================================
-
-    function setupKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-            // Ignore if typing in notes
-            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }
-
-            switch (e.key.toLowerCase()) {
-                case ' ':
-                    e.preventDefault();
-                    video.paused ? video.play() : video.pause();
-                    break;
-                case 'w':
-                    changeSpeed(-SPEED_STEP);
-                    break;
-                case 'e':
-                    changeSpeed(SPEED_STEP);
-                    break;
-                case 'j':
-                    seek(e.shiftKey ? -SEEK_LONG : -SEEK_SHORT);
-                    break;
-                case 'k':
-                    seek(SEEK_SHORT);
-                    break;
-                case 'l':
-                    seek(e.shiftKey ? SEEK_LONG : SEEK_MEDIUM);
-                    break;
-                case 'arrowleft':
-                    seek(-SEEK_SHORT);
-                    break;
-                case 'arrowright':
-                    seek(SEEK_SHORT);
-                    break;
-                case 'arrowup':
-                    e.preventDefault();
-                    video.volume = Math.min(1, video.volume + 0.1);
-                    break;
-                case 'arrowdown':
-                    e.preventDefault();
-                    video.volume = Math.max(0, video.volume - 0.1);
-                    break;
-                case 'm':
-                    video.muted = !video.muted;
-                    break;
-                case 'f':
-                    toggleFullscreen();
-                    break;
-            }
-        });
-    }
-
-    function toggleFullscreen() {
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
-        } else {
-            video.requestFullscreen?.() || video.webkitRequestFullscreen?.();
-        }
-    }
-
     // ==========================================
     // Progress Auto-Save
     // ==========================================
 
-    function setupProgressAutoSave() {
+    function setupProgressAutoSave(player) {
         // Save on pause
-        video.addEventListener('pause', saveProgress);
+        player.on('pause', () => saveProgress(player));
 
-        // Save on video end
-        video.addEventListener('ended', () => {
-            saveProgress();
+        // Save on video end (but don't update status here, autoplay handles it)
+        player.on('ended', () => {
+            saveProgress(player);
             updateStatus('completed');
         });
 
         // Periodic save during playback
-        video.addEventListener('timeupdate', () => {
-            const currentPos = Math.floor(video.currentTime);
+        player.on('timeupdate', () => {
+            const currentPos = Math.floor(player.currentTime);
 
             // Only save every 5 seconds of playback
             if (Math.abs(currentPos - lastSavedPosition) >= 5) {
-                scheduleProgressSave();
+                scheduleProgressSave(player);
             }
         });
 
         // Save before page unload
         window.addEventListener('beforeunload', () => {
-            saveProgressSync();
+            saveProgressSync(player);
         });
     }
 
-    function scheduleProgressSave() {
+    function scheduleProgressSave(player) {
         if (saveTimeout) return;
 
         saveTimeout = setTimeout(() => {
-            saveProgress();
+            saveProgress(player);
             saveTimeout = null;
         }, 1000);
     }
 
-    async function saveProgress() {
-        const position = video.currentTime;
-        const duration = video.duration;
+    async function saveProgress(player) {
+        const position = player.currentTime;
+        const duration = player.duration;
 
         if (isNaN(position) || isNaN(duration)) return;
 
@@ -243,9 +180,9 @@
         }
     }
 
-    function saveProgressSync() {
-        const position = video.currentTime;
-        const duration = video.duration;
+    function saveProgressSync(player) {
+        const position = player.currentTime;
+        const duration = player.duration;
 
         if (isNaN(position) || isNaN(duration)) return;
 
@@ -256,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
     // ==========================================
@@ -314,3 +356,4 @@
         init();
     }
 })();
+

package/{bin/coursewatcher.js → src/cli.js}

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 /**
  * CourseWatcher CLI Entry Point
@@ -6,32 +6,34 @@
  * Main executable for the coursewatcher command.
  * Parses arguments and starts the web server.
  * 
- * @module bin/coursewatcher
+ * @module cli
  */
 
 const { program } = require('commander');
 const path = require('path');
 const { version, description } = require('../package.json');
-const { startServer } = require('../src/server');
-const { log, success, error } = require('../src/utils/logger');
+const { startServer } = require('./server');
+const { log, success, error } = require('./utils/logger');
 
 program
     .name('coursewatcher')
     .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...');
@@ -53,6 +53,7 @@ async function startServer(options) {
 
     // Static files
     app.use('/static', express.static(path.join(__dirname, '..', 'public')));
+    app.use('/lib/plyr', express.static(path.join(__dirname, '..', 'node_modules', 'plyr', 'dist')));
 
     // Routes
     app.use('/', createVideoRoutes({
@@ -92,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