Added a back to main clicking on the link, added help page, added a last 5 viewed
This commit is contained in:
+97
-2
@@ -439,6 +439,66 @@ def get_library_root() -> str:
|
||||
return LIBRARY_PATH
|
||||
|
||||
|
||||
RECENT_VIEWS_FILE = os.path.join(DATA_DIR, 'recent_views.json')
|
||||
MAX_RECENT_VIEWS = 5
|
||||
|
||||
|
||||
def record_recent_view(course_name: str, course_path: str, lesson_path: str, lesson_title: str) -> None:
|
||||
"""
|
||||
Record a lesson view for the cross-course 'Recently Viewed' list on the
|
||||
dashboard, so jumping back to where you left off doesn't require
|
||||
re-browsing the library - even for a different course than whichever
|
||||
one happens to be loaded right now.
|
||||
"""
|
||||
entries = get_recent_views()
|
||||
|
||||
# Drop any existing entry for this exact lesson so it moves to the
|
||||
# front instead of appearing twice.
|
||||
entries = [
|
||||
e for e in entries
|
||||
if not (e.get('course_path') == course_path and e.get('lesson_path') == lesson_path)
|
||||
]
|
||||
|
||||
entries.insert(0, {
|
||||
'course_name': course_name,
|
||||
'course_path': course_path,
|
||||
'lesson_path': lesson_path,
|
||||
'lesson_title': lesson_title,
|
||||
'viewed_at': datetime.now().isoformat()
|
||||
})
|
||||
entries = entries[:MAX_RECENT_VIEWS]
|
||||
|
||||
try:
|
||||
os.makedirs(DATA_DIR, exist_ok=True)
|
||||
with open(RECENT_VIEWS_FILE, 'w') as f:
|
||||
json.dump(entries, f, indent=2)
|
||||
except OSError as e:
|
||||
print(f"Could not save recent views: {e}")
|
||||
|
||||
|
||||
def get_recent_views() -> List[Dict[str, Any]]:
|
||||
"""Load the persisted 'Recently Viewed' list, newest first."""
|
||||
try:
|
||||
if os.path.exists(RECENT_VIEWS_FILE):
|
||||
with open(RECENT_VIEWS_FILE, 'r') as f:
|
||||
return json.load(f)
|
||||
except (json.JSONDecodeError, OSError) as e:
|
||||
print(f"Could not load recent views: {e}")
|
||||
return []
|
||||
|
||||
|
||||
def get_recent_views_for_display() -> List[Dict[str, Any]]:
|
||||
"""Recent views with a human-friendly timestamp added for the template."""
|
||||
entries = get_recent_views()
|
||||
for entry in entries:
|
||||
try:
|
||||
dt = datetime.fromisoformat(entry['viewed_at'])
|
||||
entry['viewed_display'] = dt.strftime('%b %d, %I:%M %p').replace(' 0', ' ')
|
||||
except (KeyError, ValueError):
|
||||
entry['viewed_display'] = ''
|
||||
return entries
|
||||
|
||||
|
||||
class ProgressTracker:
|
||||
"""Handles progress tracking and persistence"""
|
||||
|
||||
@@ -527,7 +587,8 @@ def index():
|
||||
# Show dashboard with course selection option
|
||||
return render_template('course_dashboard.html',
|
||||
course=None,
|
||||
stats={'total_lessons': 0, 'completed_lessons': 0, 'completion_percentage': 0})
|
||||
stats={'total_lessons': 0, 'completed_lessons': 0, 'completion_percentage': 0},
|
||||
recent_views=get_recent_views_for_display())
|
||||
|
||||
# Apply progress data to tree
|
||||
ProgressTracker.apply_progress_to_tree(current_course)
|
||||
@@ -535,7 +596,8 @@ def index():
|
||||
|
||||
return render_template('course_dashboard.html',
|
||||
course=current_course,
|
||||
stats=stats)
|
||||
stats=stats,
|
||||
recent_views=get_recent_views_for_display())
|
||||
|
||||
|
||||
@app.route('/browse')
|
||||
@@ -724,6 +786,36 @@ def load_course():
|
||||
return jsonify({'error': str(e)}), 500
|
||||
|
||||
|
||||
@app.route('/recent/open')
|
||||
def open_recent():
|
||||
"""
|
||||
Jump straight to a "Recently Viewed" entry from the dashboard: load its
|
||||
course if it isn't already the active one, then go to that lesson.
|
||||
"""
|
||||
global current_course
|
||||
|
||||
course_path = request.args.get('course_path', '')
|
||||
lesson_path = request.args.get('lesson_path', '')
|
||||
|
||||
if not course_path or not lesson_path or not os.path.exists(course_path):
|
||||
return redirect(url_for('index'))
|
||||
|
||||
try:
|
||||
if not current_course or current_course.path != course_path:
|
||||
current_course = DynamicCourseParser.scan_directory(course_path)
|
||||
except Exception as e:
|
||||
print(f"Could not load course for recent view: {e}")
|
||||
return redirect(url_for('index'))
|
||||
|
||||
return redirect(url_for('view_lesson', lesson_path=lesson_path))
|
||||
|
||||
|
||||
@app.route('/help')
|
||||
def help_page():
|
||||
"""Static help page: how to use the app, supported file types."""
|
||||
return render_template('help.html')
|
||||
|
||||
|
||||
@app.route('/lesson/<path:lesson_path>')
|
||||
def view_lesson(lesson_path: str):
|
||||
"""View specific lesson by path"""
|
||||
@@ -761,6 +853,9 @@ def view_lesson(lesson_path: str):
|
||||
# Update last accessed
|
||||
ProgressTracker.update_lesson_progress(current_course, lesson_path)
|
||||
|
||||
# Record for the cross-course "Recently Viewed" list on the dashboard
|
||||
record_recent_view(current_course.name, current_course.path, lesson_path, lesson.title)
|
||||
|
||||
return render_template('lesson_view.html',
|
||||
course=current_course,
|
||||
lesson=lesson,
|
||||
|
||||
@@ -97,6 +97,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
@@ -480,13 +483,13 @@
|
||||
<body>
|
||||
<div class="app-header">
|
||||
<div class="container">
|
||||
<div class="brand">
|
||||
<a href="/" class="brand">
|
||||
<span class="brand-icon">📚</span>
|
||||
<div>
|
||||
<h1>OfflineU</h1>
|
||||
<p class="tagline">Your self-hosted course library</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% if course %}
|
||||
<div class="header-course-badge">{{ course.name }}</div>
|
||||
{% endif %}
|
||||
@@ -494,6 +497,25 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
{% if recent_views %}
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<h2>🕐 Recently Viewed</h2>
|
||||
<div style="margin-top: 12px;">
|
||||
{% for view in recent_views %}
|
||||
<div class="lesson-item"
|
||||
onclick="window.location.href='/recent/open?course_path={{ view.course_path | urlencode }}&lesson_path={{ view.lesson_path | urlencode }}'">
|
||||
<div class="lesson-title">
|
||||
<span class="lesson-icon">▶️</span>
|
||||
<span>{{ view.lesson_title }}</span>
|
||||
</div>
|
||||
<span class="lesson-meta">{{ view.course_name }}{% if view.viewed_display %} · {{ view.viewed_display }}{% endif %}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course %}
|
||||
<div class="nav">
|
||||
<div class="container">
|
||||
@@ -608,29 +630,6 @@
|
||||
<div id="course-status" style="margin-top: 10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px;">
|
||||
<div class="card">
|
||||
<h3>How to Use OfflineU:</h3>
|
||||
<ul style="margin-top: 10px; list-style-type: none; padding-left: 20px;">
|
||||
<li><strong>Prepare your course files</strong> in a directory structure</li>
|
||||
<li><strong>Copy the full path</strong> to your course directory</li>
|
||||
<li><strong>Paste the path</strong> in the input field above</li>
|
||||
<li><strong>Click "Load Course"</strong> or press Enter</li>
|
||||
<li><strong>Start learning!</strong> Your progress will be saved automatically</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Supported File Types:</h3>
|
||||
<ul style="margin-top: 10px; list-style-type: none; padding-left: 20px;">
|
||||
<li><strong>Videos:</strong> .mp4, .mkv, .avi, .mov, .webm</li>
|
||||
<li><strong>Audio:</strong> .mp3, .wav, .m4a, .aac</li>
|
||||
<li><strong>Documents:</strong> .txt, .md, .html, .pdf</li>
|
||||
<li><strong>Subtitles:</strong> .srt, .vtt</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -641,6 +640,7 @@
|
||||
📚 <span>OfflineU</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="/help">❓ Help</a>
|
||||
<a href="/settings">⚙ Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Help - OfflineU</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #1a1a1a;
|
||||
--bg-secondary: #2d2d2d;
|
||||
--bg-tertiary: #3d3d3d;
|
||||
--bg-tertiary-hover: #404040;
|
||||
--text-primary: #e0e0e0;
|
||||
--text-muted: #999;
|
||||
--border-color: #555;
|
||||
--accent: #007acc;
|
||||
--accent-hover: #005a9e;
|
||||
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
--font-size-base: 16px;
|
||||
--container-max-width: 1600px;
|
||||
--radius: 8px;
|
||||
}
|
||||
[data-theme="light"] {
|
||||
--bg-primary: #f2f2f2;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #eeeeee;
|
||||
--bg-tertiary-hover: #e2e2e2;
|
||||
--text-primary: #222222;
|
||||
--text-muted: #666666;
|
||||
--border-color: #cccccc;
|
||||
}
|
||||
[data-card-style="elevated"] .card {
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
[data-card-style="bordered"] .card {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size-base);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.page-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
.app-header {
|
||||
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
|
||||
padding: 18px 0;
|
||||
border-bottom: 3px solid var(--accent);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.app-header .header-inner {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.app-header .brand-icon { font-size: 1.6em; }
|
||||
.app-header a.brand-link {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.app-footer {
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding: 18px 0;
|
||||
}
|
||||
.app-footer .footer-inner {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-brand {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.footer-links a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
color: var(--accent);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.card li {
|
||||
padding: 6px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-header">
|
||||
<div class="header-inner">
|
||||
<span class="brand-icon">📚</span>
|
||||
<a href="/" class="brand-link">OfflineU</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<h1>Help</h1>
|
||||
|
||||
<div class="card">
|
||||
<h3>How to Use OfflineU</h3>
|
||||
<ul>
|
||||
<li><strong>Prepare your course files</strong> in a directory structure</li>
|
||||
<li><strong>Browse your library</strong> from the main page, or enter a path manually</li>
|
||||
<li><strong>Click a course</strong> to load it</li>
|
||||
<li><strong>Start learning!</strong> Your progress will be saved automatically</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Supported File Types</h3>
|
||||
<ul>
|
||||
<li><strong>Videos:</strong> .mp4, .mkv, .avi, .mov, .webm</li>
|
||||
<li><strong>Audio:</strong> .mp3, .wav, .m4a, .aac</li>
|
||||
<li><strong>Documents:</strong> .txt, .md, .html, .pdf</li>
|
||||
<li><strong>Subtitles:</strong> .srt, .vtt</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
📚 <span>OfflineU</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="/">← Back to app</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/static/theme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -104,6 +104,10 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.footer-links a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
@@ -509,6 +513,7 @@
|
||||
📚 <span>OfflineU</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="/help">❓ Help</a>
|
||||
<a href="/settings">⚙ Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -95,6 +95,10 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.footer-links a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
@@ -340,6 +344,7 @@
|
||||
📚 <span>OfflineU</span>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="/help">❓ Help</a>
|
||||
<a href="/">← Back to app</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user