feat: Add subtitle sync ui for easy alignment by armanckeser · Pull Request #6735 · jellyfin/jellyfin-web

armanckeser · 2025-04-10T00:26:28Z

Changes

Chrome reactive change

chrome_reactive.mp4

Firefox before and after (pressed playback and stopped for the actual subtitles to re-render)

WebOS Browser

Adds a dynamic subtitle sync rendering. Users can now stop where they would like a subtitle to start, align the time with the view and continue
Adds api from the html player and playback manager to get the subtitles.

Issues

#4364

jellyfin-bot · 2025-04-10T00:26:39Z

Cloudflare Pages deployment

Latest commit	`0e51ddc`
Status	✅ Deployed!
Preview URL	https://a2bfc78d.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

dmitrylyzo

This only works with "custom subtitle element" (doesn't work in Chrome) and obviously only for text (SRT) subtitles.
We probably should update the subtitles timeline on timeupdate.
IMO, the timeline is too close to the offset slider, which makes you think they are tied.
Too long for mobile.

armanckeser · 2025-04-10T13:28:44Z

Do you have recommendations for 1?

I am also open to some guidance on 2. I tried a bunch of things, but I feel like there is an efficient solution my lack of FE knowledge eludes me from.

dmitrylyzo · 2025-04-10T13:43:48Z

Do you have recommendations for 1?

When we use native API: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks
I think for SSA/ASS and PGS we should hide the timeline.

I am also open to some guidance on 2. I tried a bunch of things, but I feel like there is an efficient solution my lack of FE knowledge eludes me from.

Ideally, we should use PlaybackSubscriber.
But something like this could work:

jellyfin-web/src/controllers/lyrics.js

Lines 162 to 189 in c9ccec8

    
           function bindToPlayer(player) { 
        
               if (player === currentPlayer) { 
        
                   return; 
        
               } 
        
               releaseCurrentPlayer(); 
        
               currentPlayer = player; 
        
               if (!player) { 
        
                   return; 
        
               } 
        
               Events.on(player, 'timeupdate', onTimeUpdate); 
        
               Events.on(player, 'playbackstart', onPlaybackStart); 
        
               Events.on(player, 'playbackstop', onPlaybackStop); 
        
           } 
        
           function releaseCurrentPlayer() { 
        
               const player = currentPlayer; 
        
               if (player) { 
        
                   Events.off(player, 'timeupdate', onTimeUpdate); 
        
                   Events.off(player, 'playbackstart', onPlaybackStart); 
        
                   Events.off(player, 'playbackstop', onPlaybackStop); 
        
                   currentPlayer = null; 
        
               } 
        
           }

armanckeser

Hmm, does this mean that platforms like WebOS wouldn't be able to use this implementation? I presume WebOS uses a chromiom browser.

github-actions

ESLint doesn't pass. Please fix all ESLint issues.

armanckeser · 2025-04-11T01:22:14Z

Still have to think a bit about the realtime updates, the problem is getting a smooth timeline. Updating current implementation on every timeupdate results in the timeline moving choppily every second. I need to increase the resolution for the percentage calculations or add a css transition or something, but I am not sure yet

armanckeser · 2025-04-12T02:50:46Z

I tried to implement a smooth scroll, but I just give up. I think this provides the value I would like it to provide. And even though the playback rendering is a bit janky, probably better than not having it at all.

armanckeser · 2025-04-15T13:25:44Z

@dmitrylyzo thoughts?

Gauvino · 2025-04-15T13:55:52Z

Absolutely incredible

armanckeser · 2025-04-18T02:10:24Z

@dmitrylyzo Added screenshots from Firefox, Chrome, WebOS browser. Added realtime update ability and a video from Chrome showing that the changes are accurate with the realtime rendering. Changed the styling to better match Jellyfin Web style. I believe with SSA/ASS and PGS, the subtitle offset menu does not even show up (I tried with PGS and DVD SUB, neither showed the menu), but if it did, the timeline would be hidden.

armanckeser · 2025-04-27T02:14:24Z

@dmitrylyzo Would love to learn what types of tests or proof I could add to make this easier to review for the team.

dmitrylyzo

As before, I think the timeline is too close to the offset slider, which makes you think they are tied.
Close:

Split:
My biggest concern right now is intermediate refactoring. I prefer to do refactoring first and then add the feature. Ideally, we should make commits atomic. If no one has any objections to the current commit sequence, so be it.

armanckeser · 2025-04-28T14:14:35Z

As before, I think the timeline is too close to the offset slider, which makes you think they are tied.

Ah, thanks for the clarification. I thought you meant that the current time marker itself was too close to the button (which it was), but "split" looks much better

My biggest concern right now is intermediate refactoring. I prefer to do refactoring first and then add the feature. Ideally, we should make commits atomic. If no one has any objections to the current commit sequence, so be it.

I see. Let me try a stacked approach, I am thinking a PR (or commit?) to refactor the original into OffsetController and the SubtitleSync object, and another one to add the timeline view. Does that sound good to you?

sonarqubecloud · 2025-04-30T23:02:08Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

sonarqubecloud · 2025-08-14T00:22:22Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

sonarqubecloud · 2025-09-26T12:53:10Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

sonarqubecloud · 2026-04-10T15:45:49Z

Quality Gate passed

Issues
12 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

armanckeser · 2026-04-10T19:04:54Z

A bit sad that a year has passed since I opened this PR. I don't think it should take over a year to add a nice feature

jellyfin-bot · 2026-05-13T15:33:42Z

This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.

Extract offset state and interaction handling from SubtitleSync into a dedicated OffsetController class. Use real private methods, a currentOffset getter/setter, and a shared slider bubble helper. No user-facing behavior changes. Paves the way for the subtitle sync timeline feature. Add Armanc to CONTRIBUTORS.

Expose the current subtitle track events from the HTML video player and the playback manager in a normalized seconds-based format. This allows the subtitle sync UI to render a timeline of upcoming subtitle events.

Render a scrolling timeline of subtitle events around the current playback position below the offset slider, so users can visually align subtitles with the video. Dragging the offset shifts the subtitle blocks against a fixed time ruler, making the correct alignment easy to find. The timeline reuses pooled DOM nodes and updates their positions on each player time update, keeping it cheap enough to run during playback on mobile. It is only shown for text subtitle tracks whose events can be read back from the player.

sonarqubecloud · 2026-06-27T03:25:05Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

jellyfin-bot · 2026-06-30T14:38:02Z

This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.

armanckeser requested a review from a team as a code owner April 10, 2025 00:26

armanckeser deployed to Preview April 10, 2025 00:30 — with GitHub Actions View deployment

armanckeser had a problem deploying to Preview April 10, 2025 00:36 — with GitHub Actions Failure

armanckeser deployed to Preview April 10, 2025 01:19 — with GitHub Actions View deployment

dmitrylyzo reviewed Apr 10, 2025

View reviewed changes

Comment thread src/components/subtitlesync/subtitlesync.js Outdated

Comment thread src/components/subtitlesync/subtitlesync.js Outdated

Comment thread src/components/subtitlesync/subtitlesync.js Outdated

armanckeser commented Apr 10, 2025

View reviewed changes

github-actions Bot requested changes Apr 11, 2025

View reviewed changes

Comment thread src/components/subtitlesync/subtitlesync.js Outdated

armanckeser deployed to Preview April 11, 2025 01:21 — with GitHub Actions View deployment

armanckeser deployed to Preview April 12, 2025 02:50 — with GitHub Actions View deployment

armanckeser requested a review from dmitrylyzo April 12, 2025 02:50

armanckeser deployed to Preview April 12, 2025 02:58 — with GitHub Actions View deployment

armanckeser deployed to Preview April 12, 2025 12:47 — with GitHub Actions View deployment

armanckeser deployed to Preview April 18, 2025 00:53 — with GitHub Actions View deployment

armanckeser deployed to Preview April 26, 2025 23:15 — with GitHub Actions View deployment

dmitrylyzo reviewed Apr 28, 2025

View reviewed changes

Comment thread src/components/subtitlesync/subtitlesync.js Outdated

Comment thread src/components/subtitlesync/subtitlesync.js Outdated

armanckeser deployed to Preview April 30, 2025 23:05 — with GitHub Actions View deployment

armanckeser mentioned this pull request Jun 8, 2025

Add methods to expose current track events #6931

Open

armanckeser mentioned this pull request Jun 16, 2025

Separate and refactor SubtitleSync and OffsetController #6824

Open

armanckeser deployed to Preview July 11, 2025 00:26 — with GitHub Actions View deployment

soultaco83 pushed a commit to soultaco83/jellyfin-web-unstable that referenced this pull request Jul 13, 2025

Merge PR jellyfin#6735

59d8bfd

armanckeser deployed to Preview July 20, 2025 18:56 — with GitHub Actions View deployment

armanckeser deployed to Preview August 14, 2025 00:24 — with GitHub Actions View deployment

armanckeser deployed to Preview September 26, 2025 12:56 — with GitHub Actions View deployment

jellyfin-bot added the merge conflict Conflicts prevent merging label May 13, 2026

jellyfin-bot added the stale No activity for an extended length of time label May 14, 2026

This comment has been minimized.

Sign in to view

jellyfin-bot added stale No activity for an extended length of time and removed stale No activity for an extended length of time labels Jun 9, 2026

armanckeser force-pushed the armanc/add-subtitle-sync-ui branch from e95f674 to ec5b3ce Compare June 27, 2026 03:16

Armanc added 3 commits June 26, 2026 23:22

Add methods to expose current track events

6761bac

Expose the current subtitle track events from the HTML video player and the playback manager in a normalized seconds-based format. This allows the subtitle sync UI to render a timeline of upcoming subtitle events.

armanckeser force-pushed the armanc/add-subtitle-sync-ui branch from ec5b3ce to 1096cbd Compare June 27, 2026 03:24

jellyfin-bot added merge conflict Conflicts prevent merging and removed merge conflict Conflicts prevent merging labels Jun 27, 2026

jellyfin-bot added stale No activity for an extended length of time and removed stale No activity for an extended length of time labels Jul 3, 2026

armanckeser mentioned this pull request Jul 26, 2026

[Feature] Subtitle Sync alignment UI Moonfin-Client/Smart-TV#315

Open

Uh oh!

Uh oh!

Conversation

armanckeser commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jellyfin-bot commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Cloudflare Pages deployment

Uh oh!

dmitrylyzo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

armanckeser commented Apr 10, 2025

Uh oh!

dmitrylyzo commented Apr 10, 2025

Uh oh!

armanckeser left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

armanckeser commented Apr 11, 2025

Uh oh!

armanckeser commented Apr 12, 2025

Uh oh!

armanckeser commented Apr 15, 2025

Uh oh!

Gauvino commented Apr 15, 2025

Uh oh!

armanckeser commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

armanckeser commented Apr 27, 2025

Uh oh!

dmitrylyzo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

armanckeser commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud Bot commented Apr 30, 2025

Quality Gate passed

Uh oh!

sonarqubecloud Bot commented Aug 14, 2025

Quality Gate passed

Uh oh!

sonarqubecloud Bot commented Sep 26, 2025

Quality Gate passed

Uh oh!

sonarqubecloud Bot commented Apr 10, 2026

Quality Gate passed

Uh oh!

armanckeser commented Apr 10, 2026

Uh oh!

jellyfin-bot commented May 13, 2026

Uh oh!

This comment has been minimized.

sonarqubecloud Bot commented Jun 27, 2026

Quality Gate passed

Uh oh!

jellyfin-bot commented Jun 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

armanckeser commented Apr 10, 2025 •

edited

Loading

jellyfin-bot commented Apr 10, 2025 •

edited

Loading

dmitrylyzo left a comment •

edited

Loading

armanckeser commented Apr 18, 2025 •

edited

Loading

armanckeser commented Apr 28, 2025 •

edited

Loading