The injected index.html loaded both files from cdn.jsdelivr.net at
{{Config.VersionString}}, default "main". A branch ref is not a version:
jsDelivr re-resolves it at request time, so browser-side changes reach
every install the day they land, with no release and no way to decline,
and the code in the browser drifts from the installed plugin version. It
also leaves the media bar broken on servers without internet access.
Embed the files in the assembly and serve them from the existing
/MediaBar/{file} route:
- slideshowpure.js/css become EmbeddedResource under the Inject namespace
- Inject/index.html templates an asset base URL instead of a bare ref
- VersionString defaults to "embedded", which resolves to ../MediaBar
(relative, so it works when Jellyfin is hosted under a base path)
Any other value is still treated as a git ref and fetched from jsDelivr.
IndexHtml() normalised VersionString in place ("latest" to "main", and
"main" to "10.11" on 10.11 builds). Those assignments mutate the live
configuration, so every home page load overwrote the value the
administrator saved, and concurrent requests raced over the field.
Compute the resolved version into a local instead.
The manifest resource stream was null-forgiven, so a request for any file
outside the embedded Inject.* set threw mid-action and surfaced as a 400
with a stack trace in the server log. Return NotFound instead, and dispose
the reader.
The background behind the home page is Jellyfin's own backdrop layer, and it
has no connection to what the bar is showing. It sits on unrelated library art,
and where the user has Jellyfin's backdrop rotator enabled it also cycles on its
own timer, so the page behind the hero drifts while the hero itself is correct.
PageBackdrop points that layer at the featured item and keeps it in step. It
reuses the exact URL the active slide already requested through
SlideCreator.buildImageUrl, so the browser serves the image from cache and no
extra request is made.
Two details worth calling out:
Jellyfin's rotator adds its own .backdropImage siblings into the same container
and cycles them, which paints over anything we set. While the bar owns the
screen we keep our layer the only one and make sure it stays last. This is done
with a MutationObserver on the container rather than a timer, so it reacts to
the rotator instead of polling for it.
It is scoped to the home page. VisibilityObserver already knows when the bar is
hidden, so leaving the page hands the backdrop straight back to Jellyfin and no
other page is affected.
Defaults on, alongside slideAnimationEnabled and enableTrailers. Set
CONFIG.syncPageBackdrop to false to leave the backdrop alone.
A flat 10 point demotion ranked an accessibility variant of a real
trailer below non-trailer junk like Behind the Scenes or Review.
Subtract 0.5 instead, so an alternate cut loses to an ordinary entry
of the same tier but still beats lower tier promo clips.
Also parse youtu.be short links and youtube.com embed links by
pathname, since neither carries a v query param.
RemoteTrailers arrives in metadata provider order, which is not
preference order. Taking index 0 unconditionally means the bar
regularly plays something other than the trailer: a promo clip, a
teaser, or an accessibility variant.
The clearest case is an American Sign Language cut. TMDb lists
"Official American Sign Language Trailer" first for A Minecraft Movie,
Mortal Kombat II and Superman, so those slides play a trailer with an
interpreter composited into the corner, drawn over the backdrop.
Index 0 is also not guaranteed to be a YouTube link. When it is not,
searchParams.get("v") returns null and the slide loses its trailer
even though a usable YouTube entry sits further down the list.
Entries are now ranked by name, preferring official, final and main
trailers over generic ones and teasers, with alternate cuts ranked
below everything else rather than dropped so an item that has nothing
else still plays something. Provider order breaks ties, so an item
whose first entry is already the best keeps it. Entries that yield no
video id are skipped instead of ending the search.
Across a 384 item library this changes the pick for 105 items and
loses the trailer for none. Avatar moves from "Back in Theatres" to
"Special Edition Official Trailer", Oppenheimer from "Review" to
"Official Trailer", Moana 2 from "Special Look" to "Official Trailer",
and the three titles above stop playing the sign language cut.
source-in is a -webkit-mask-composite value and is not valid for the
standard mask-composite property, which accepts only add, subtract,
intersect and exclude. Firefox drops the invalid declaration and falls
back to the initial value add, which unions the two mask layers instead
of intersecting them. The horizontal fade is lost and the 40% wide
backdrop hard cuts against the playing trailer.
Chromium is unaffected either way because it honours the
-webkit-mask-composite line that follows, which is left unchanged.
.video-container already uses the intersect and source-in pairing.
Right now the end time is locked to 24-hour. There is no option to switch
to 12 hour. Dropping the forced setting lets it match whatever the viewer's
device already uses including 12 hr with AM/PM along with the existing 24
hour format.
Bump slideshow version to v4.1.0 and add page-visibility handling for trailer playback. Introduces STATE flags (pageVisible, trailerPlaying) and a VisibilityObserver.handlePageVisibilityChange with a visibilitychange listener to pause trailers when the tab is hidden and resume them only when the page is visible and slideshow isn't paused. Stops the auto-advance timer while a trailer is playing and restarts/advances appropriately when trailers end; ensures trailerPlaying is reset when switching slides. Also adds defensive checks, console logs and error handling for player play/pause operations, and falls back to the slide timer if the page is not visible.
Skyler Shaw