Skip to content

feat(transcript): browse and search without disrupting playback #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
trevormunoz merged 7 commits into from
Sep 10, 2026
Merged

feat(transcript): browse and search without disrupting playback #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
29882c7
feat(transcript): separate search match updates from activation
trevormunoz Sep 10, 2026
e6fe65b
feat(transcript): add reading mode, the Follow along control, and scr…
trevormunoz Sep 10, 2026
27dd4b8
feat(element): expose reading-mode configuration on the custom element
trevormunoz Sep 10, 2026
2c8011a
fix(transcript): address reading-mode review findings
trevormunoz Sep 10, 2026
27118e3
docs: document onmatchnavigate and reading-mode control visibility
trevormunoz Sep 10, 2026
dcd744b
fix(transcript): harden programmatic-scroll, snippet selection guard,…
trevormunoz Sep 10, 2026
66f4df6
fix(sync): make programmatic-scroll fallback a settle timer, not a fi…
trevormunoz Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 55 additions & 28 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 17 additions & 1 deletion docs/src/components/AVAnnotateDemo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,11 @@
<div
class="bg-gray-50 rounded-lg shadow-md border border-ink-200 max-h-[600px] flex flex-col overflow-clip"
>
<IIIFPlayer.Transcript {annotations}>
<IIIFPlayer.Transcript
{annotations}
searchSeekBehavior="activate"
scrollToSeek={false}
>
<IIIFPlayer.TranscriptSearch />
<IIIFPlayer.TranscriptSegments annotations={filteredAnnotations}>
{#snippet segment({
Expand Down Expand Up @@ -484,4 +488,16 @@
:global(.avannotate-demo [data-audio-control="time"]) {
@apply text-sm text-gray-600 font-medium;
}

:global(.avannotate-demo .follow-along-switch) {
@apply self-start inline-flex items-center gap-2 px-3 py-1 mb-2 rounded-full border border-ink-300 bg-white text-sm text-gray-700 transition-colors;
}

:global(.avannotate-demo .follow-along-switch[aria-checked="true"]) {
@apply bg-terracotta-500 border-terracotta-500 text-white;
}

:global(.avannotate-demo .jump-to-current) {
@apply self-start px-3 py-1 mb-2 rounded-full bg-terracotta-500 text-white text-sm transition-colors hover:bg-terracotta-600;
}
</style>
17 changes: 16 additions & 1 deletion docs/src/components/AutoTranscriptDemo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@
<div
class="bg-gray-50 rounded-lg shadow-md border border-ink-200 max-h-[600px] flex flex-col overflow-clip"
>
<IIIFPlayer.Transcript>
<IIIFPlayer.Transcript
searchSeekBehavior="activate"
scrollToSeek={false}
>
<IIIFPlayer.TranscriptSearch />
<IIIFPlayer.TranscriptSegments />
</IIIFPlayer.Transcript>
Expand Down Expand Up @@ -152,4 +155,16 @@
:global(.auto-transcript-demo [data-audio-control="time"]) {
@apply text-sm text-gray-600 font-medium;
}

:global(.auto-transcript-demo .follow-along-switch) {
@apply self-start inline-flex items-center gap-2 px-3 py-1 mb-2 rounded-full border border-ink-300 bg-white text-sm text-gray-700 transition-colors;
}

:global(.auto-transcript-demo .follow-along-switch[aria-checked="true"]) {
@apply bg-terracotta-500 border-terracotta-500 text-white;
}

:global(.auto-transcript-demo .jump-to-current) {
@apply self-start px-3 py-1 mb-2 rounded-full bg-terracotta-500 text-white text-sm transition-colors hover:bg-terracotta-600;
}
</style>
18 changes: 17 additions & 1 deletion docs/src/components/HTMLAnnotationsDemo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@
<div
class="bg-gray-50 rounded-lg shadow-md border border-ink-200 max-h-[600px] flex flex-col overflow-clip"
>
<IIIFPlayer.Transcript {annotations}>
<IIIFPlayer.Transcript
{annotations}
searchSeekBehavior="activate"
scrollToSeek={false}
>
<IIIFPlayer.TranscriptSearch />
<IIIFPlayer.TranscriptSegments>
{#snippet text({ annotation })}
Expand Down Expand Up @@ -142,4 +146,16 @@
:global(.html-annotations-demo [data-audio-control="time"]) {
@apply text-sm text-gray-600 font-medium;
}

:global(.html-annotations-demo .follow-along-switch) {
@apply self-start inline-flex items-center gap-2 px-3 py-1 mb-2 rounded-full border border-ink-300 bg-white text-sm text-gray-700 transition-colors;
}

:global(.html-annotations-demo .follow-along-switch[aria-checked="true"]) {
@apply bg-terracotta-500 border-terracotta-500 text-white;
}

:global(.html-annotations-demo .jump-to-current) {
@apply self-start px-3 py-1 mb-2 rounded-full bg-terracotta-500 text-white text-sm transition-colors hover:bg-terracotta-600;
}
</style>
20 changes: 19 additions & 1 deletion docs/src/components/IIIFTranscriptDemo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,11 @@
<div
class="bg-gray-50 rounded-lg shadow-md border border-ink-200 max-h-[600px] flex flex-col overflow-clip"
>
<IIIFPlayer.Transcript {annotations}>
<IIIFPlayer.Transcript
{annotations}
searchSeekBehavior="activate"
scrollToSeek={false}
>
<IIIFPlayer.TranscriptSearch />
<IIIFPlayer.TranscriptSegments />
</IIIFPlayer.Transcript>
Expand Down Expand Up @@ -176,4 +180,18 @@
:global(.iiif-transcript-demo [data-audio-control="time"]) {
@apply text-sm text-gray-600 font-medium;
}

/* Reading mode: the "Follow along" switch and "Jump to current" button
ship bare (semantics + state only) — this is the demo's own skin. */
:global(.iiif-transcript-demo .follow-along-switch) {
@apply self-start inline-flex items-center gap-2 px-3 py-1 mb-2 rounded-full border border-ink-300 bg-white text-sm text-gray-700 transition-colors;
}

:global(.iiif-transcript-demo .follow-along-switch[aria-checked="true"]) {
@apply bg-terracotta-500 border-terracotta-500 text-white;
}

:global(.iiif-transcript-demo .jump-to-current) {
@apply self-start px-3 py-1 mb-2 rounded-full bg-terracotta-500 text-white text-sm transition-colors hover:bg-terracotta-600;
}
</style>
Loading