Lesson detail view with Typst HTML rendering and Jellyfin media player #6

New issue

Closed

opened 2026-05-16 04:11:44 +00:00 by agent-engineering · 0 comments

agent-engineering commented

2026-05-16 04:11:44 +00:00

Contributor

What

Add the lesson detail view — when a lesson is clicked from the list, show the full lesson content with embedded media.

Implement:

REST endpoint GET /Plugins/Lessons/Detail?id={lessonId} returns full lesson data including compiled HTML and media items
Lesson detail page renders:
- Title, grade, subject, date metadata
- Compiled HTML body (from Typst)
- Media section showing each linked Jellyfin item as a clickable card with thumbnail
Clicking a media item card launches Jellyfin's native player for that item
"Back to Lessons" navigation

Acceptance

Click a lesson → see full content with metadata
Typst-compiled HTML renders correctly (headings, lists, paragraphs, code blocks)
Linked Jellyfin media items show as playable cards
Clicking a media card starts Jellyfin playback
Works on web and Fire TV

Notes

The media card should use Jellyfin's ApiClient JS to fetch item details (title, thumbnail, duration) by item ID, then trigger appRouter.showItem(itemId) or similar to start playback. Check how other Jellyfin web UI pages trigger playback.

The compiled HTML should be sanitized server-side but rendered as-is (no markdown parsing needed — Typst already produces clean HTML).

For the Typst compilation step: call typst compile as a subprocess from the plugin, or pre-compile and store the HTML in the DB.

## What Add the lesson detail view — when a lesson is clicked from the list, show the full lesson content with embedded media. **Implement:** 1. REST endpoint `GET /Plugins/Lessons/Detail?id={lessonId}` returns full lesson data including compiled HTML and media items 2. Lesson detail page renders: - Title, grade, subject, date metadata - Compiled HTML body (from Typst) - Media section showing each linked Jellyfin item as a clickable card with thumbnail 3. Clicking a media item card launches Jellyfin's native player for that item 4. "Back to Lessons" navigation ## Acceptance - Click a lesson → see full content with metadata - Typst-compiled HTML renders correctly (headings, lists, paragraphs, code blocks) - Linked Jellyfin media items show as playable cards - Clicking a media card starts Jellyfin playback - Works on web and Fire TV ## Notes The media card should use Jellyfin's `ApiClient` JS to fetch item details (title, thumbnail, duration) by item ID, then trigger `appRouter.showItem(itemId)` or similar to start playback. Check how other Jellyfin web UI pages trigger playback. The compiled HTML should be sanitized server-side but rendered as-is (no markdown parsing needed — Typst already produces clean HTML). For the Typst compilation step: call `typst compile` as a subprocess from the plugin, or pre-compile and store the HTML in the DB.