coursewatcher 1.0.1 → 1.2.0

package/README.md

@@ -20,6 +20,15 @@ npx coursewatcher
 npx coursewatcher --port 8080 --no-browser
 ```
 
+## CLI Options
+
+| Argument | Description | Default |
+|----------|-------------|---------|
+| `[path]` | Path to course directory | `.` (Current directory) |
+| `-p, --port` | Port to run the server on | `3000` |
+| `--no-browser` | Prevent browser from opening automatically | `false` |
+
+
 ## Installation
 
 ```bash

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "coursewatcher",
-    "version": "1.0.1",
+    "version": "1.2.0",
     "description": "A CLI tool and web interface for tracking progress in downloaded video courses",
     "main": "src/server.js",
     "bin": {
-        "coursewatcher": "./bin/coursewatcher.js"
+        "coursewatcher": "./src/cli.js"
     },
     "scripts": {
-        "start": "node bin/coursewatcher.js",
-        "dev": "node bin/coursewatcher.js",
+        "start": "node src/cli.js",
+        "dev": "node src/cli.js",
         "test": "jest",
         "test:coverage": "jest --coverage",
         "test:watch": "jest --watch"
@@ -34,7 +34,6 @@
         "url": "https://github.com/serhiishtokal/CourseWatcher/issues"
     },
     "files": [
-        "bin/",
         "src/",
         "views/",
         "public/"
@@ -45,7 +44,8 @@
         "commander": "^12.1.0",
         "ejs": "^3.1.10",
         "express": "^4.21.1",
-        "open": "^8.4.2"
+        "open": "^8.4.2",
+        "plyr": "^3.8.4"
     },
     "devDependencies": {
         "jest": "^29.7.0",

package/public/css/styles.css

@@ -614,91 +614,23 @@ a:hover {
   color: white;
 }
 
-.playback-controls {
-  display: flex;
-  gap: var(--space-xl);
-  flex-wrap: wrap;
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.control-label {
-  color: var(--color-text-muted);
-  font-size: 0.85rem;
-  margin-right: var(--space-sm);
-}
-
-.control-btn {
-  padding: var(--space-xs) var(--space-md);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text);
-  cursor: pointer;
-  font-size: 0.8rem;
-  transition: all var(--transition-fast);
-}
-
-.control-btn:hover {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-.control-value {
-  min-width: 50px;
-  text-align: center;
-  font-weight: 600;
-  color: var(--color-primary);
-}
-
 /* ==========================================
-   Keyboard Shortcuts
+   Plyr Customization
    ========================================== */
 
-.shortcuts-help {
-  margin-top: var(--space-lg);
-  padding-top: var(--space-lg);
-  border-top: 1px solid var(--color-border);
-}
-
-.shortcuts-help summary {
-  cursor: pointer;
-  color: var(--color-text-secondary);
-  font-size: 0.9rem;
-  user-select: none;
-}
-
-.shortcuts-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: var(--space-sm);
-  margin-top: var(--space-md);
-}
-
-.shortcut {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-size: 0.85rem;
-  color: var(--color-text-secondary);
+:root {
+  --plyr-color-main: var(--color-primary);
+  --plyr-video-background: #000;
+  --plyr-menu-background: var(--color-surface);
+  --plyr-menu-color: var(--color-text);
+  --plyr-menu-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+  --plyr-font-family: var(--font-sans);
 }
 
-kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  padding: var(--space-xs) var(--space-sm);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-text);
+.plyr--video {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
 }
 
 /* ==========================================
@@ -932,4 +864,177 @@ kbd {
     justify-content: center;
     min-width: 120px;
   }
-}
+}
+
+/* ==========================================
+   Video Player Overlay Controls
+   ========================================== */
+
+.video-wrapper {
+  position: relative;
+  overflow: hidden;
+  /* Ensure controls don't spill out */
+  group: video-group;
+  /* For potential future container queries */
+  background: black;
+  /* Prevent white flashes */
+}
+
+.video-wrapper:hover .overlay-controls,
+.video-wrapper:focus-within .overlay-controls,
+.video-player.paused+.overlay-controls,
+.overlay-controls:hover {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.overlay-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
+  padding: var(--space-md);
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+  pointer-events: none;
+  /* Let clicks pass through when hidden */
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  z-index: 10;
+}
+
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.control-group.right {
+  justify-content: flex-end;
+}
+
+/* Icon Buttons */
+.control-btn-icon {
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: var(--space-xs);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.control-btn-icon:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.1);
+}
+
+/* Text Buttons (Speed) */
+.control-btn-text {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0 var(--space-sm);
+  border-radius: var(--radius-sm);
+  height: 24px;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.control-btn-text:hover {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* Speed Control */
+.speed-control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  background: rgba(0, 0, 0, 0.5);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-md);
+}
+
+.speed-value {
+  color: white;
+  font-weight: 600;
+  font-size: 0.9rem;
+  min-width: 40px;
+  text-align: center;
+}
+
+/* Time Display */
+.time-display {
+  color: white;
+  font-size: 0.9rem;
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+  margin-left: var(--space-sm);
+}
+
+/* Seek Bar */
+.seek-bar-container {
+  position: relative;
+  height: 6px;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-xs);
+}
+
+.seek-bar-container:hover .seek-bar-bg {
+  height: 8px;
+}
+
+.seek-bar-bg {
+  background: rgba(255, 255, 255, 0.3);
+  height: 4px;
+  width: 100%;
+  border-radius: 2px;
+  transition: height var(--transition-fast);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.seek-bar-fill {
+  background: var(--color-primary);
+  height: 100%;
+  width: 0%;
+  border-radius: 2px;
+}
+
+.seek-slider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  margin: 0;
+  z-index: 2;
+}
+
+/* Hide default controls on fullscreen if needed (we rely on custom ones now) */
+/* .video-player::-webkit-media-controls { display:none !important; } */

package/public/js/player.js

@@ -1,38 +1,28 @@
 /**
  * Video Player Controls
  * 
- * Handles keyboard shortcuts, playback controls, and progress auto-save.
+ * Handles Plyr initialization, keyboard shortcuts, and progress auto-save.
  */
 
 (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
 
     // 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;
+    if (!videoElement) return;
 
-    const videoId = video.dataset.videoId;
-    const savedPosition = parseFloat(video.dataset.savedPosition) || 0;
+    const videoId = videoElement.dataset.videoId;
+    const savedPosition = parseFloat(videoElement.dataset.savedPosition) || 0;
 
     let saveTimeout = null;
     let lastSavedPosition = savedPosition;
@@ -41,54 +31,45 @@
     // Initialization
     // ==========================================
 
-    /**
-     * Initialize player
-     */
     function init() {
+        // 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
-        video.addEventListener('loadedmetadata', () => {
-            if (savedPosition > 0 && savedPosition < video.duration) {
-                video.currentTime = savedPosition;
+        player.on('ready', () => {
+            if (savedPosition > 0) {
+                player.currentTime = savedPosition;
             }
-            updateSpeedDisplay();
         });
 
-        // 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);
 
-    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 +104,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();
+        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 +161,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;
 

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

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 /**
  * CourseWatcher CLI Entry Point
@@ -6,14 +6,14 @@
  * 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')

package/src/server.js

@@ -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({

package/views/pages/player.ejs

@@ -6,11 +6,15 @@
         <%- 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="video-player" controls preload="metadata"
-                            data-video-id="<%= video.id %>" data-saved-position="<%= video.position %>">
+                        <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>
@@ -40,9 +44,6 @@
 
                 <!-- Video Info Section -->
                 <section class="video-info-section">
-                    <h1 class="video-title">
-                        <%= video.title %>
-                    </h1>
 
                     <!-- Status Controls -->
                     <div class="status-controls">
@@ -63,37 +64,18 @@
                         </div>
                     </div>
 
-                    <!-- Playback Controls -->
-                    <div class="playback-controls">
-                        <div class="control-group">
-                            <span class="control-label">Speed</span>
-                            <button class="control-btn" id="speedDown" title="Decrease speed (W)">W ◀</button>
-                            <span class="control-value" id="speedDisplay">1.0x</span>
-                            <button class="control-btn" id="speedUp" title="Increase speed (E)">▶ E</button>
-                        </div>
-
-                        <div class="control-group">
-                            <span class="control-label">Seek</span>
-                            <button class="control-btn" id="seekBack5" title="Back 5s (J)">◀◀ 5s</button>
-                            <button class="control-btn" id="seekForward5" title="Forward 5s (K)">5s ▶▶</button>
-                            <button class="control-btn" id="seekForward10" title="Forward 10s (L)">10s ▶▶</button>
-                        </div>
-                    </div>
-
                     <!-- Keyboard Shortcuts Help -->
                     <details class="shortcuts-help">
                         <summary>⌨️ Keyboard Shortcuts</summary>
                         <div class="shortcuts-grid">
-                            <div class="shortcut"><kbd>Space</kbd> Play/Pause</div>
-                            <div class="shortcut"><kbd>W</kbd> Slower</div>
-                            <div class="shortcut"><kbd>E</kbd> Faster</div>
-                            <div class="shortcut"><kbd>J</kbd> Back 5s</div>
-                            <div class="shortcut"><kbd>K</kbd> Forward 5s</div>
-                            <div class="shortcut"><kbd>L</kbd> Forward 10s</div>
-                            <div class="shortcut"><kbd>Shift+J</kbd> Back 30s</div>
-                            <div class="shortcut"><kbd>Shift+L</kbd> Forward 30s</div>
-                            <div class="shortcut"><kbd>←</kbd> Back 5s</div>
-                            <div class="shortcut"><kbd>→</kbd> Forward 5s</div>
+                            <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>
@@ -112,6 +94,8 @@
 
             <%- include('../partials/footer') %>
 
+                <link rel="stylesheet" href="/lib/plyr/plyr.css" />
+                <script src="/lib/plyr/plyr.js"></script>
                 <script src="/static/js/player.js"></script>
     </body>