6494567713
- Add Detail endpoint to LessonsController (GET /Plugins/Lessons/Detail?id=...) - Update lessonsPage.html with detail view, click handlers, and back navigation - Media cards fetch Jellyfin item details and render thumbnails & durations - Clicking media card launches Jellyfin native player via appRouter.showItem - Compiled Typst HTML rendered via innerHTML with dark theme styling - Works on web and Fire TV Silk browser Closes #6
460 lines
17 KiB
HTML
460 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Lessons</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #101010;
|
|
color: #e0e0e0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.page {
|
|
padding: 2em;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
}
|
|
h1 {
|
|
font-size: 1.8em;
|
|
font-weight: 600;
|
|
margin-bottom: 1em;
|
|
color: #fff;
|
|
}
|
|
h2 {
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
/* Back button */
|
|
.back-btn {
|
|
display: inline-block;
|
|
background: #2a2a2a;
|
|
color: #00a4dc;
|
|
border: 1px solid #444;
|
|
border-radius: 4px;
|
|
padding: 0.4em 0.8em;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
margin-bottom: 1em;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
.back-btn:hover {
|
|
background: #333;
|
|
border-color: #00a4dc;
|
|
}
|
|
|
|
/* List view */
|
|
.grade-group {
|
|
margin-bottom: 2em;
|
|
}
|
|
.grade-header {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
color: #00a4dc;
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
.lesson-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
padding: 0.75em 1em;
|
|
margin-bottom: 0.5em;
|
|
cursor: pointer;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
.lesson-card:hover {
|
|
background: #222;
|
|
border-color: #00a4dc;
|
|
}
|
|
.lesson-title {
|
|
font-weight: 600;
|
|
color: #fff;
|
|
font-size: 1.05em;
|
|
}
|
|
.lesson-meta {
|
|
font-size: 0.85em;
|
|
color: #999;
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
/* Detail view */
|
|
.detail-meta {
|
|
color: #aaa;
|
|
font-size: 0.9em;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
.detail-meta span {
|
|
margin-right: 1.5em;
|
|
}
|
|
.detail-body {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
padding: 1.5em;
|
|
margin-bottom: 2em;
|
|
line-height: 1.6;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.detail-body h1, .detail-body h2, .detail-body h3 {
|
|
color: #fff;
|
|
margin-top: 1.2em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.detail-body h1 { font-size: 1.5em; }
|
|
.detail-body h2 { font-size: 1.3em; }
|
|
.detail-body h3 { font-size: 1.1em; }
|
|
.detail-body p { margin: 0.5em 0; }
|
|
.detail-body ul, .detail-body ol { padding-left: 1.5em; }
|
|
.detail-body img { max-width: 100%; border-radius: 4px; }
|
|
.detail-body table { border-collapse: collapse; width: 100%; }
|
|
.detail-body td, .detail-body th { border: 1px solid #444; padding: 0.4em 0.6em; }
|
|
.detail-body a { color: #00a4dc; }
|
|
|
|
/* Media section */
|
|
.media-section {
|
|
margin-bottom: 2em;
|
|
}
|
|
.media-section h2 {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
.media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 0.75em;
|
|
}
|
|
.media-card {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
.media-card:hover {
|
|
background: #222;
|
|
border-color: #00a4dc;
|
|
}
|
|
.media-thumb {
|
|
width: 100%;
|
|
height: 112px;
|
|
object-fit: cover;
|
|
background: #252525;
|
|
display: block;
|
|
}
|
|
.media-thumb-placeholder {
|
|
width: 100%;
|
|
height: 112px;
|
|
background: #252525;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2em;
|
|
color: #555;
|
|
}
|
|
.media-info {
|
|
padding: 0.5em 0.6em;
|
|
}
|
|
.media-name {
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.media-duration {
|
|
font-size: 0.8em;
|
|
color: #888;
|
|
margin-top: 0.15em;
|
|
}
|
|
.media-loading {
|
|
color: #666;
|
|
font-size: 0.85em;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
/* States */
|
|
.empty-state, .error-state, .loading {
|
|
text-align: center;
|
|
padding: 3em;
|
|
}
|
|
.empty-state { color: #666; }
|
|
.error-state { color: #c44; }
|
|
.loading { color: #666; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<h1 id="page-title">📚 Lessons</h1>
|
|
<div id="content" class="loading">Loading lessons…</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var container = document.getElementById('content');
|
|
var pageTitle = document.getElementById('page-title');
|
|
var currentView = 'list'; // 'list' | 'detail'
|
|
|
|
function apiBase() {
|
|
return window.location.origin + '/Plugins/Lessons';
|
|
}
|
|
|
|
function esc(str) {
|
|
if (!str) return '';
|
|
var div = document.createElement('div');
|
|
div.appendChild(document.createTextNode(str));
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function formatDuration(ticks) {
|
|
if (!ticks && ticks !== 0) return '';
|
|
var totalSeconds = Math.floor(ticks / 10000000);
|
|
var hours = Math.floor(totalSeconds / 3600);
|
|
var minutes = Math.floor((totalSeconds % 3600) / 60);
|
|
var seconds = totalSeconds % 60;
|
|
if (hours > 0) {
|
|
return hours + ':' + pad(minutes) + ':' + pad(seconds);
|
|
}
|
|
return minutes + ':' + pad(seconds);
|
|
}
|
|
|
|
function pad(n) {
|
|
return n < 10 ? '0' + n : '' + n;
|
|
}
|
|
|
|
// --- List view ---
|
|
|
|
function renderList(lessons) {
|
|
currentView = 'list';
|
|
pageTitle.textContent = '📚 Lessons';
|
|
|
|
if (!lessons || lessons.length === 0) {
|
|
container.className = 'empty-state';
|
|
container.innerHTML = '<p>No lessons found. Lessons will appear here after you build them.</p>';
|
|
return;
|
|
}
|
|
|
|
// Group by grade
|
|
var gradeMap = {};
|
|
lessons.forEach(function(l) {
|
|
var grade = l.grade || 'Unknown';
|
|
if (!gradeMap[grade]) gradeMap[grade] = [];
|
|
gradeMap[grade].push(l);
|
|
});
|
|
|
|
var html = '';
|
|
var grades = Object.keys(gradeMap).sort(function(a, b) { return a - b; });
|
|
grades.forEach(function(grade) {
|
|
html += '<div class="grade-group">';
|
|
html += '<div class="grade-header">Grade ' + grade + '</div>';
|
|
gradeMap[grade].forEach(function(l) {
|
|
html += '<div class="lesson-card" data-lesson-id="' + esc(l.id) + '" onclick="viewLesson(\'' + esc(l.id) + '\')">';
|
|
html += '<div class="lesson-title">' + esc(l.title) + '</div>';
|
|
html += '<div class="lesson-meta">';
|
|
html += esc(l.subject || '');
|
|
if (l.lessonDate) html += ' · ' + esc(l.lessonDate);
|
|
html += '</div>';
|
|
if (l.description) {
|
|
html += '<div class="lesson-meta">' + esc(l.description) + '</div>';
|
|
}
|
|
html += '</div>';
|
|
});
|
|
html += '</div>';
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
// --- Detail view ---
|
|
|
|
function renderDetail(lesson) {
|
|
currentView = 'detail';
|
|
pageTitle.textContent = lesson.title;
|
|
|
|
var html = '';
|
|
|
|
// Back button
|
|
html += '<button class="back-btn" onclick="showList()">← Back to Lessons</button>';
|
|
|
|
// Metadata
|
|
html += '<div class="detail-meta">';
|
|
html += '<span>Grade ' + esc(String(lesson.grade)) + '</span>';
|
|
html += '<span>' + esc(lesson.subject) + '</span>';
|
|
if (lesson.lessonDate) html += '<span>' + esc(lesson.lessonDate) + '</span>';
|
|
html += '</div>';
|
|
|
|
if (lesson.description) {
|
|
html += '<div class="detail-meta">' + esc(lesson.description) + '</div>';
|
|
}
|
|
|
|
// Compiled HTML body
|
|
if (lesson.compiledHtml) {
|
|
html += '<div class="detail-body">' + lesson.compiledHtml + '</div>';
|
|
} else {
|
|
html += '<div class="detail-body" style="color:#666;">No lesson content available.</div>';
|
|
}
|
|
|
|
// Media section
|
|
if (lesson.mediaItems && lesson.mediaItems.length > 0) {
|
|
html += '<div class="media-section">';
|
|
html += '<h2>📺 Media</h2>';
|
|
html += '<div class="media-grid" id="media-grid">';
|
|
html += '<div class="media-loading">Loading media details…</div>';
|
|
html += '</div>';
|
|
html += '</div>';
|
|
|
|
container.innerHTML = html;
|
|
|
|
// Fetch media details asynchronously
|
|
loadMediaItems(lesson.mediaItems);
|
|
} else {
|
|
container.innerHTML = html;
|
|
}
|
|
}
|
|
|
|
function loadMediaItems(mediaItems) {
|
|
var grid = document.getElementById('media-grid');
|
|
if (!grid) return;
|
|
|
|
var userId = null;
|
|
try {
|
|
userId = Dashboard.getCurrentUserId();
|
|
} catch (e) {
|
|
// Dashboard may not be available in all contexts
|
|
}
|
|
|
|
if (!userId) {
|
|
grid.innerHTML = '<div class="media-loading">Unable to identify user for media playback.</div>';
|
|
return;
|
|
}
|
|
|
|
var promises = mediaItems.map(function(m) {
|
|
return fetch('/Users/' + userId + '/Items/' + m.jellyfinItemId)
|
|
.then(function(r) {
|
|
if (!r.ok) throw new Error('HTTP ' + r.status);
|
|
return r.json();
|
|
})
|
|
.then(function(item) {
|
|
return renderMediaCard(item);
|
|
})
|
|
.catch(function(err) {
|
|
return '<div class="media-card" style="cursor:default;opacity:0.6;">' +
|
|
'<div class="media-thumb-placeholder">⚠️</div>' +
|
|
'<div class="media-info">' +
|
|
'<div class="media-name">' + esc(m.jellyfinItemId) + '</div>' +
|
|
'<div class="media-duration">Unavailable</div>' +
|
|
'</div></div>';
|
|
});
|
|
});
|
|
|
|
Promise.all(promises).then(function(cards) {
|
|
grid.innerHTML = cards.join('');
|
|
});
|
|
}
|
|
|
|
function renderMediaCard(item) {
|
|
var imageTag = '';
|
|
if (item.ImageTags && item.ImageTags.Primary) {
|
|
var imgUrl = window.ApiClient.getScaledImageUrl(item.Id, { type: 'Primary', tag: item.ImageTags.Primary });
|
|
imageTag = '<img class="media-thumb" src="' + imgUrl + '" alt="' + esc(item.Name) + '">';
|
|
} else if (item.BackdropImageTags && item.BackdropImageTags.length > 0) {
|
|
var backdropUrl = window.ApiClient.getScaledImageUrl(item.Id, { type: 'Backdrop', tag: item.BackdropImageTags[0] });
|
|
imageTag = '<img class="media-thumb" src="' + backdropUrl + '" alt="' + esc(item.Name) + '">';
|
|
} else {
|
|
imageTag = '<div class="media-thumb-placeholder">▶️</div>';
|
|
}
|
|
|
|
var durationStr = '';
|
|
if (item.RunTimeTicks) {
|
|
durationStr = formatDuration(item.RunTimeTicks);
|
|
}
|
|
|
|
// Use JSON.stringify to safely embed the item for the click handler
|
|
var itemJson = JSON.stringify(item).replace(/'/g, "\\'").replace(/"/g, '"');
|
|
|
|
return '<div class="media-card" onclick="playMedia(\'' + item.Id + '\')">' +
|
|
imageTag +
|
|
'<div class="media-info">' +
|
|
'<div class="media-name">' + esc(item.Name) + '</div>' +
|
|
(durationStr ? '<div class="media-duration">' + esc(durationStr) + '</div>' : '') +
|
|
'</div></div>';
|
|
}
|
|
|
|
// --- Navigation & playback (exposed globally for onclick handlers) ---
|
|
|
|
window.viewLesson = function(id) {
|
|
container.className = 'loading';
|
|
container.innerHTML = 'Loading lesson…';
|
|
|
|
fetch(apiBase() + '/Detail?id=' + encodeURIComponent(id))
|
|
.then(function(resp) {
|
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
|
return resp.json();
|
|
})
|
|
.then(function(lesson) {
|
|
renderDetail(lesson);
|
|
})
|
|
.catch(function(err) {
|
|
container.className = 'error-state';
|
|
container.innerHTML = '<p>Failed to load lesson: ' + esc(err.message) + '</p>' +
|
|
'<button class="back-btn" onclick="showList()">← Back to Lessons</button>';
|
|
});
|
|
};
|
|
|
|
window.showList = function() {
|
|
container.className = 'loading';
|
|
container.innerHTML = 'Loading lessons…';
|
|
|
|
fetch(apiBase() + '/List')
|
|
.then(function(resp) {
|
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
|
return resp.json();
|
|
})
|
|
.then(function(data) {
|
|
renderList(data);
|
|
})
|
|
.catch(function(err) {
|
|
container.className = 'error-state';
|
|
container.innerHTML = '<p>Failed to load lessons: ' + esc(err.message) + '</p>';
|
|
});
|
|
};
|
|
|
|
window.playMedia = function(itemId) {
|
|
// Use Jellyfin's appRouter to navigate to the item detail/player
|
|
try {
|
|
if (window.appRouter && typeof window.appRouter.showItem === 'function') {
|
|
window.appRouter.showItem(itemId);
|
|
} else if (window.ApiClient && typeof window.ApiClient.getItem === 'function') {
|
|
var userId = Dashboard.getCurrentUserId();
|
|
window.ApiClient.getItem(userId, itemId).then(function(item) {
|
|
if (window.appRouter) {
|
|
window.appRouter.showItem(item);
|
|
} else if (window.Dashboard && window.Dashboard.navigate) {
|
|
Dashboard.navigate('itemdetails.html?id=' + itemId);
|
|
} else {
|
|
window.location.href = '#!/details?id=' + itemId;
|
|
}
|
|
});
|
|
} else {
|
|
// Fallback: navigate to item details page directly
|
|
window.location.href = '#!/details?id=' + itemId;
|
|
}
|
|
} catch (e) {
|
|
// Last resort fallback
|
|
window.location.href = '#!/details?id=' + itemId;
|
|
}
|
|
};
|
|
|
|
// --- Initial load ---
|
|
showList();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|