Chapter titles break trackbar HTML class names, introduce unwanted icons

[theolaa]

Describe The Bug
The vertical chapter markers on the webplayer trackbar include chapter names in their element class, which can sometimes match up with Material icons (I think). This results in random icons appearing on the trackbar instead of chapter markers (see screenshots, as well as chapters 7 and 21 in the Logs section).

There are also a handful of chapter titles that include quotes ", and they royally mess up how those HTML elements are interpreted by the browser (see chapters 2, 8, 9, 23, and 32 in the Logs section). Doesn't seem to affect playback, but might affect Aria screen readers.

The fix may be as simple as doing some extra processing on the class name (e.g. substituting spaces for underscores or dashes, stripping quotes and apostrophes), but I'm nowhere near familiar enough to know if other systems rely on the class names as they are. To the best of my knowledge, this is where that extra processing would need to happen: https://github.com/jellyfin/jellyfin-web/blob/60dbc895fcf5d9584cd37d3a6d3a96f1d13be8ab/src/controllers/playback/video/index.js#L1847C10-L1847C11

Steps To Reproduce
In my case, my copy of The Hobbit: An Unexpected Journey (2012)'s chapters include "A map, a key and contract watched" which results in a key appearing on the trackbar, as well as "The last homely house" which results in a house appearing on the trackbar.

Chapters 2, 8, 9, 23, and 32 all have their chapter titles surrounded by quotes as well which didn't cause me any issues with playback, but judging by how it affects the resulting HTML it looks like it messes up Aria a little bit.

Expected Behavior
Random icons should not appear along the trackbar XD

Logs
Not a log per se, but looking at the HTML of the trackbar you can clearly see the problem. The chapter titles are included with spaces, meaning individual words will be interpreted as HTML classes. Thus, "key" and "house" are interpreted as their respective classes, and the icons are created.

Similarly, chapters like 2, 8, and 9 (among others) have nonsense tag attributes due to the "s in the chapter titles.

<span class="material-icons sliderMarker chapterMarker marker-1.-prologue: the fall of erebor watched" aria-hidden="true" style="left: -1px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-2.- watched" in="" a="" hole="" the="" ground="" there="" lived="" hobbit""="" aria-hidden="true" style="left: 79.8277px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-3.-very old friends watched" aria-hidden="true" style="left: 111.06px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-4.-mr. baggins watched" aria-hidden="true" style="left: 137.231px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-5.-an unexpected party watched" aria-hidden="true" style="left: 147.497px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-6.- watched" blunt="" the="" knives""="" aria-hidden="true" style="left: 183.357px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-7.-a map, a key and contract watched" aria-hidden="true" style="left: 220.806px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-8.- watched" misty="" mountains""="" aria-hidden="true" style="left: 284.861px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-9.- watched" ...the="" world="" ahead""="" aria-hidden="true" style="left: 326.07px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-10.-the battle of azanulbizar watched" aria-hidden="true" style="left: 367.568px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-11.-radagast the brown watched" aria-hidden="true" style="left: 419.477px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-12.-trollshaws watched" aria-hidden="true" style="left: 459.53px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-13.-roast mutton watched" aria-hidden="true" style="left: 473.7px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-14.-a troll-hoard watched" aria-hidden="true" style="left: 559.155px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-15.-the hill of sorcery watched" aria-hidden="true" style="left: 593.423px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-16.-warg-scouts watched" aria-hidden="true" style="left: 623.932px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-17.-rivendell watched" aria-hidden="true" style="left: 672.082px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-18.-a short rest watched" aria-hidden="true" style="left: 716.617px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-19.-moon runes watched" aria-hidden="true" style="left: 745.102px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-20.-the defiler watched" aria-hidden="true" style="left: 770.695px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-21.-the last homely house watched" aria-hidden="true" style="left: 783.853px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-22.-the white council unwatched" aria-hidden="true" style="left: 804.53px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-23.- unwatched" why="" the="" halfling?""="" aria-hidden="true" style="left: 873.501px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-24.-over hill unwatched" aria-hidden="true" style="left: 894.322px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-25.-under hill unwatched" aria-hidden="true" style="left: 942.616px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-26.-the great goblin unwatched" aria-hidden="true" style="left: 981.078px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-27.-riddles in the dark unwatched" aria-hidden="true" style="left: 1027.93px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-28.-biter and beater unwatched" aria-hidden="true" style="left: 1134.78px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-29.-the ring unwatched" aria-hidden="true" style="left: 1150.25px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-30.-escape from goblin town unwatched" aria-hidden="true" style="left: 1159.8px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-31.-the pity of bilbo unwatched" aria-hidden="true" style="left: 1194.35px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-32.- unwatched" home="" is="" behind...""="" aria-hidden="true" style="left: 1211.27px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-33.-out of the frying pan... unwatched" aria-hidden="true" style="left: 1233.97px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-34.-a good omen unwatched" aria-hidden="true" style="left: 1321.02px;"></span>
<span class="material-icons sliderMarker chapterMarker marker-35.-credits unwatched" aria-hidden="true" style="left: 1364.54px;"></span>

Screenshots

Icons seen on the trackbar


Chapter titles which include icon keywords

Chapter titles surrounded by quotes

System (please complete the following information):

• Platform: Windows 11
• Browser: Firefox 126.0
• Jellyfin Version: 10.9.2.0

Additional Context

[thornbill]

Well that is a mess 😕

[thegreatanton]

So I am having this exact same issue.

"Thornbill" closed, and attached my post to this thread.
#5569

I am willing to provide further logs, screenshots, or desired changes to my configuration (if needed).

Just let me know! What a strange bug...

[theolaa]

It sure is something, isn't it haha. Here's hoping the fix is pretty simple. I'd love to poke around and open a PR myself, but I have no idea how to set this project up for testing.