Skip to content

Revamp startup UI for visual style and usability - #17154

Merged
crobibero merged 5 commits into
jellyfin:masterfrom
joshuaboniface:enhance-startup-ux
Jun 27, 2026
Merged

crobibero merged 5 commits into
jellyfin:masterfrom
joshuaboniface:enhance-startup-ux

Conversation

@joshuaboniface

@joshuaboniface joshuaboniface commented Jun 22, 2026 •

Copy link
Copy Markdown
Member

Changes
Two major changes to the Startup UI:

  1. Add styling and reformat the information in a way that should hopefully be much more clear. This includes a logo, styled group boxes, moving the "Logs" link to within the detail box (local-network-only), and a generic stage progress indicator in the public view ("Initializing server", "Loading migrations", "Running migration 1 of 6", etc.) to provide progress indications without leaking any data.
  2. Revamp the running log viewer. Puts this in a bounded box, properly sized to the screen, with internal scrolling. Reverses the order so "newest is at the bottom" for clarity, but also fix the reload mechanism so that scroll position is not lost as new entries are added.
  3. Add a final redirect timer, with the ability to cancel, allowing users the chance to review the output before redirecting if they so desire, and then a manual redirection button.

Code assistance
Claude Opus 4.8 was used to help with this refactor

Issues
N/A

Screenshots

Desktop on-network:
image

Final "ready" timer:

image

Continue if Cancel is hit:

image

Restyle the startup/migration holding page to match the Jellyfin dark theme,
with the inline wordmark logo, a gradient spinner and a recolored startup log
tree, and move the Morestachio template rendering into a reusable
StartupUiRenderer.

Add a curated, non-identifying "current activity" line to the always-visible
header (for example "Initializing server" or "Running migration X of Y"),
reported from the startup flow and the migration service so it never leaks
server details to unauthenticated clients. Move the log download into a
"Download logs" link in the log panel header, and show only the header, with
no log hints, to non-local clients.
Order the startup log oldest-to-newest inside a height-bounded panel that
scrolls internally and never extends past the bottom of the window. Refresh it
with a background fetch that swaps the log list in place instead of reloading
the whole page, preserving the user's scroll position and only following to the
bottom when they are already there. A full page reload now happens only on the
final transition to the running server or to the error state.
@jellyfin-bot

Copy link
Copy Markdown
Contributor

Jellyfin API (v 12.0.0)


Result


No differences. Specifications are equivalent

@joshuaboniface
joshuaboniface marked this pull request as ready for review June 22, 2026 05:12
This leaks additional information publicly, and is not really
necessary/useful.
@nielsvanvelzen

Copy link
Copy Markdown
Member

Can we make it not look like it was created by AI? 🙃

@joshuaboniface

joshuaboniface commented Jun 22, 2026 •

Copy link
Copy Markdown
Member Author

It's a barebones UX. What would you like it to look like instead? If you have concrete suggestions to improve it, please post them.

@nielsvanvelzen

Copy link
Copy Markdown
Member

It's a barebones UX. What would you like it to look like instead? If you have concrete suggestions to improve it, please post them.

We have a set design within the Jellyfin web UI, just go to the dashboard and you can copy the CSS from the cards shown there with their respective colors. No need to let an AI generate its default CSS look and feel. We're not supposed to be an AI slop product.

@andrewrabert

andrewrabert commented Jun 24, 2026 •

Copy link
Copy Markdown

Can we make it not look like it was created by AI? 🙃

Ignoring any difference of opinion we have prior - I am honestly, genuinely curious what visually looks like AI to you? I don't have much of an eye for design and humbly want to understand and trust your opinion on design here.

(I also agree with the suggestion to copy+paste the CSS from web btw)

… status

When the server finishes starting, show "Jellyfin started successfully" with a
5-second "Redirecting in N…" countdown and a Cancel button instead of reloading
immediately. Cancel stops the countdown and the background refresh so the
startup output can be reviewed, and offers a "Continue to Jellyfin" button to
reload manually. The buttons use the web client's emby-button styling.

Also drop the transitional "Applying migrations" activity: it only showed
briefly while the pending migration set was read, or for the whole step when
nothing was pending, so startup now goes from "Preparing migrations" straight
into "Running migration X of Y".
@theguymadmax theguymadmax moved this from Todo to Approved in Jellyfin v12 Jun 26, 2026

@crobibero crobibero left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The startup template has gotten a bit complex but we shouldn't need to update it regularly

@crobibero
crobibero merged commit ff36b1b into jellyfin:master Jun 27, 2026
19 checks passed
@github-project-automation github-project-automation Bot moved this from Approved to Done in Jellyfin v12 Jun 27, 2026
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

8 participants