coursewatcher 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +68 -0
- package/bin/coursewatcher.js +43 -0
- package/package.json +57 -0
- package/public/css/styles.css +935 -0
- package/public/js/player.js +316 -0
- package/src/controllers/video-controller.js +173 -0
- package/src/models/database.js +169 -0
- package/src/server.js +152 -0
- package/src/services/notes-service.js +97 -0
- package/src/services/progress-service.js +148 -0
- package/src/services/video-service.js +322 -0
- package/src/utils/config.js +56 -0
- package/src/utils/errors.js +57 -0
- package/src/utils/logger.js +48 -0
- package/views/layouts/main.ejs +13 -0
- package/views/pages/error.ejs +25 -0
- package/views/pages/index.ejs +101 -0
- package/views/pages/player.ejs +118 -0
- package/views/pages/search.ejs +63 -0
- package/views/partials/footer.ejs +3 -0
- package/views/partials/head.ejs +8 -0
- package/views/partials/header.ejs +14 -0
- package/views/partials/video-card.ejs +36 -0
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<%- include('../partials/head', { title }) %>
|
|
4
|
+
|
|
5
|
+
<body>
|
|
6
|
+
<%- include('../partials/header') %>
|
|
7
|
+
|
|
8
|
+
<main class="container player-container">
|
|
9
|
+
<!-- Video Player Section -->
|
|
10
|
+
<section class="player-section">
|
|
11
|
+
<div class="video-wrapper">
|
|
12
|
+
<video id="videoPlayer" class="video-player" controls preload="metadata"
|
|
13
|
+
data-video-id="<%= video.id %>" data-saved-position="<%= video.position %>">
|
|
14
|
+
<source src="/api/videos/<%= video.id %>/stream" type="video/mp4">
|
|
15
|
+
Your browser does not support the video tag.
|
|
16
|
+
</video>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<!-- Navigation -->
|
|
20
|
+
<div class="player-nav">
|
|
21
|
+
<% if (adjacent.prev) { %>
|
|
22
|
+
<a href="/video/<%= adjacent.prev %>" class="nav-button prev">
|
|
23
|
+
β Previous
|
|
24
|
+
</a>
|
|
25
|
+
<% } else { %>
|
|
26
|
+
<span class="nav-button disabled">β Previous</span>
|
|
27
|
+
<% } %>
|
|
28
|
+
|
|
29
|
+
<a href="/" class="nav-button home">π Back to Course</a>
|
|
30
|
+
|
|
31
|
+
<% if (adjacent.next) { %>
|
|
32
|
+
<a href="/video/<%= adjacent.next %>" class="nav-button next">
|
|
33
|
+
Next β
|
|
34
|
+
</a>
|
|
35
|
+
<% } else { %>
|
|
36
|
+
<span class="nav-button disabled">Next β</span>
|
|
37
|
+
<% } %>
|
|
38
|
+
</div>
|
|
39
|
+
</section>
|
|
40
|
+
|
|
41
|
+
<!-- Video Info Section -->
|
|
42
|
+
<section class="video-info-section">
|
|
43
|
+
<h1 class="video-title">
|
|
44
|
+
<%= video.title %>
|
|
45
|
+
</h1>
|
|
46
|
+
|
|
47
|
+
<!-- Status Controls -->
|
|
48
|
+
<div class="status-controls">
|
|
49
|
+
<span class="status-label">Status:</span>
|
|
50
|
+
<div class="status-buttons">
|
|
51
|
+
<button class="status-btn <%= video.status === 'unwatched' ? 'active' : '' %>"
|
|
52
|
+
data-status="unwatched">
|
|
53
|
+
β Unwatched
|
|
54
|
+
</button>
|
|
55
|
+
<button class="status-btn <%= video.status === 'in-progress' ? 'active' : '' %>"
|
|
56
|
+
data-status="in-progress">
|
|
57
|
+
βΆ In Progress
|
|
58
|
+
</button>
|
|
59
|
+
<button class="status-btn <%= video.status === 'completed' ? 'active' : '' %>"
|
|
60
|
+
data-status="completed">
|
|
61
|
+
β Completed
|
|
62
|
+
</button>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<!-- Playback Controls -->
|
|
67
|
+
<div class="playback-controls">
|
|
68
|
+
<div class="control-group">
|
|
69
|
+
<span class="control-label">Speed</span>
|
|
70
|
+
<button class="control-btn" id="speedDown" title="Decrease speed (W)">W β</button>
|
|
71
|
+
<span class="control-value" id="speedDisplay">1.0x</span>
|
|
72
|
+
<button class="control-btn" id="speedUp" title="Increase speed (E)">βΆ E</button>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="control-group">
|
|
76
|
+
<span class="control-label">Seek</span>
|
|
77
|
+
<button class="control-btn" id="seekBack5" title="Back 5s (J)">ββ 5s</button>
|
|
78
|
+
<button class="control-btn" id="seekForward5" title="Forward 5s (K)">5s βΆβΆ</button>
|
|
79
|
+
<button class="control-btn" id="seekForward10" title="Forward 10s (L)">10s βΆβΆ</button>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<!-- Keyboard Shortcuts Help -->
|
|
84
|
+
<details class="shortcuts-help">
|
|
85
|
+
<summary>β¨οΈ Keyboard Shortcuts</summary>
|
|
86
|
+
<div class="shortcuts-grid">
|
|
87
|
+
<div class="shortcut"><kbd>Space</kbd> Play/Pause</div>
|
|
88
|
+
<div class="shortcut"><kbd>W</kbd> Slower</div>
|
|
89
|
+
<div class="shortcut"><kbd>E</kbd> Faster</div>
|
|
90
|
+
<div class="shortcut"><kbd>J</kbd> Back 5s</div>
|
|
91
|
+
<div class="shortcut"><kbd>K</kbd> Forward 5s</div>
|
|
92
|
+
<div class="shortcut"><kbd>L</kbd> Forward 10s</div>
|
|
93
|
+
<div class="shortcut"><kbd>Shift+J</kbd> Back 30s</div>
|
|
94
|
+
<div class="shortcut"><kbd>Shift+L</kbd> Forward 30s</div>
|
|
95
|
+
<div class="shortcut"><kbd>β</kbd> Back 5s</div>
|
|
96
|
+
<div class="shortcut"><kbd>β</kbd> Forward 5s</div>
|
|
97
|
+
</div>
|
|
98
|
+
</details>
|
|
99
|
+
</section>
|
|
100
|
+
|
|
101
|
+
<!-- Notes Section -->
|
|
102
|
+
<section class="notes-section">
|
|
103
|
+
<h2 class="section-title">π Notes</h2>
|
|
104
|
+
<textarea id="notesEditor" class="notes-editor"
|
|
105
|
+
placeholder="Take notes for this video... (Markdown supported)"><%= notes.content || '' %></textarea>
|
|
106
|
+
<div class="notes-actions">
|
|
107
|
+
<button id="saveNotes" class="btn btn-primary">Save Notes</button>
|
|
108
|
+
<span id="notesSaveStatus" class="save-status"></span>
|
|
109
|
+
</div>
|
|
110
|
+
</section>
|
|
111
|
+
</main>
|
|
112
|
+
|
|
113
|
+
<%- include('../partials/footer') %>
|
|
114
|
+
|
|
115
|
+
<script src="/static/js/player.js"></script>
|
|
116
|
+
</body>
|
|
117
|
+
|
|
118
|
+
</html>
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<%- include('../partials/head', { title }) %>
|
|
4
|
+
|
|
5
|
+
<body>
|
|
6
|
+
<%- include('../partials/header') %>
|
|
7
|
+
|
|
8
|
+
<main class="container">
|
|
9
|
+
<section class="search-section">
|
|
10
|
+
<h1 class="page-title">π Search Results</h1>
|
|
11
|
+
|
|
12
|
+
<form action="/search" method="GET" class="search-form-large">
|
|
13
|
+
<input type="text" name="q" value="<%= query %>" placeholder="Search videos..."
|
|
14
|
+
class="search-input-large" autofocus>
|
|
15
|
+
<button type="submit" class="btn btn-primary">Search</button>
|
|
16
|
+
</form>
|
|
17
|
+
|
|
18
|
+
<% if (query) { %>
|
|
19
|
+
<p class="search-meta">
|
|
20
|
+
Found <strong>
|
|
21
|
+
<%= results.length %>
|
|
22
|
+
</strong> result<%= results.length !==1 ? 's' : '' %>
|
|
23
|
+
for "<%= query %>"
|
|
24
|
+
</p>
|
|
25
|
+
<% } %>
|
|
26
|
+
|
|
27
|
+
<% if (results.length> 0) { %>
|
|
28
|
+
<div class="search-results">
|
|
29
|
+
<% results.forEach(video=> { %>
|
|
30
|
+
<a href="/video/<%= video.id %>" class="search-result-card">
|
|
31
|
+
<div class="result-status">
|
|
32
|
+
<% if (video.status==='completed' ) { %>
|
|
33
|
+
<span class="status-icon completed">β</span>
|
|
34
|
+
<% } else if (video.status==='in-progress' ) { %>
|
|
35
|
+
<span class="status-icon in-progress">βΆ</span>
|
|
36
|
+
<% } else { %>
|
|
37
|
+
<span class="status-icon unwatched">β</span>
|
|
38
|
+
<% } %>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="result-content">
|
|
41
|
+
<h3 class="result-title">
|
|
42
|
+
<%= video.title %>
|
|
43
|
+
</h3>
|
|
44
|
+
<% if (video.module_name) { %>
|
|
45
|
+
<span class="result-module">π <%= video.module_name %></span>
|
|
46
|
+
<% } %>
|
|
47
|
+
</div>
|
|
48
|
+
</a>
|
|
49
|
+
<% }) %>
|
|
50
|
+
</div>
|
|
51
|
+
<% } else if (query) { %>
|
|
52
|
+
<div class="empty-state">
|
|
53
|
+
<p>No videos found matching "<%= query %>"</p>
|
|
54
|
+
<p class="empty-hint">Try a different search term</p>
|
|
55
|
+
</div>
|
|
56
|
+
<% } %>
|
|
57
|
+
</section>
|
|
58
|
+
</main>
|
|
59
|
+
|
|
60
|
+
<%- include('../partials/footer') %>
|
|
61
|
+
</body>
|
|
62
|
+
|
|
63
|
+
</html>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<header class="header">
|
|
2
|
+
<div class="header-content">
|
|
3
|
+
<a href="/" class="logo">
|
|
4
|
+
<span class="logo-icon">π</span>
|
|
5
|
+
<span class="logo-text">CourseWatcher</span>
|
|
6
|
+
</a>
|
|
7
|
+
<nav class="nav">
|
|
8
|
+
<form action="/search" method="GET" class="search-form">
|
|
9
|
+
<input type="text" name="q" placeholder="Search videos..." class="search-input" autocomplete="off">
|
|
10
|
+
<button type="submit" class="search-button">π</button>
|
|
11
|
+
</form>
|
|
12
|
+
</nav>
|
|
13
|
+
</div>
|
|
14
|
+
</header>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<a href="/video/<%= video.id %>" class="video-card">
|
|
2
|
+
<div class="video-card-icon">
|
|
3
|
+
<% if (video.status==='completed' ) { %>
|
|
4
|
+
<span class="status-icon completed">β</span>
|
|
5
|
+
<% } else if (video.status==='in-progress' ) { %>
|
|
6
|
+
<span class="status-icon in-progress">βΆ</span>
|
|
7
|
+
<% } else { %>
|
|
8
|
+
<span class="status-icon unwatched">β</span>
|
|
9
|
+
<% } %>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="video-card-content">
|
|
12
|
+
<h3 class="video-card-title">
|
|
13
|
+
<%= video.title %>
|
|
14
|
+
</h3>
|
|
15
|
+
<% if (video.duration> 0) { %>
|
|
16
|
+
<div class="video-card-progress">
|
|
17
|
+
<div class="progress-bar">
|
|
18
|
+
<div class="progress-fill"
|
|
19
|
+
style="width: <%= Math.round((video.position / video.duration) * 100) %>%"></div>
|
|
20
|
+
</div>
|
|
21
|
+
<span class="progress-text">
|
|
22
|
+
<%= Math.round((video.position / video.duration) * 100) %>%
|
|
23
|
+
</span>
|
|
24
|
+
</div>
|
|
25
|
+
<% } %>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="video-card-badge">
|
|
28
|
+
<% if (video.status==='completed' ) { %>
|
|
29
|
+
<span class="badge badge-success">Completed</span>
|
|
30
|
+
<% } else if (video.status==='in-progress' ) { %>
|
|
31
|
+
<span class="badge badge-warning">In Progress</span>
|
|
32
|
+
<% } else { %>
|
|
33
|
+
<span class="badge badge-default">Not Started</span>
|
|
34
|
+
<% } %>
|
|
35
|
+
</div>
|
|
36
|
+
</a>
|