jellyfin / jellyfin-web

Web Client for Jellyfin

Jellyfin Web

Part of the Jellyfin Project

---

Jellyfin Web is the frontend used for most of the clients available for end users, such as desktop browsers, Android, and iOS. We welcome all contributions and pull requests! If you have a larger feature in mind please open an issue so we can discuss the implementation before you start. Translations can be improved very easily from our Weblate instance. Look through the following graphic to see if your native language could use some work!

Build Process

Dependencies

• Node.js
• npm (included in Node.js)

Getting Started

1. Clone or download this repository.

   git clone https://github.com/jellyfin/jellyfin-web.git
   cd jellyfin-web

2. Install build dependencies in the project directory.

   npm install

3. Run the web client with webpack for local development.

   npm start

4. Build the client with sourcemaps available.

   npm run build:development

Directory Structure

.
└── src
    ├── apps
    │   ├── dashboard     # Admin dashboard app layout and routes
    │   ├── experimental  # New experimental app layout and routes
    │   └── stable        # Classic (stable) app layout and routes
    ├── assets            # Static assets
    ├── components        # Higher order visual components and React components
    ├── controllers       # Legacy page views and controllers 🧹
    ├── elements          # Basic webcomponents and React wrappers 🧹
    ├── hooks             # Custom React hooks
    ├── legacy            # Polyfills for legacy browsers
    ├── libraries         # Third party libraries 🧹
    ├── plugins           # Client plugins
    ├── scripts           # Random assortment of visual components and utilities 🐉
    ├── strings           # Translation files
    ├── styles            # Common app Sass stylesheets
    ├── themes            # CSS themes
    ├── types             # Common TypeScript interfaces/types
    └── utils             # Utility functions

• 🧹 — Needs cleanup
• 🐉 — Serious mess (Here be dragons)

jellyfin-web's Issues

Translation support

I was working on translation of the Emby, now I would like to help translate Jellyfin. Would it be possible to set up some translation interface? Emby uses oneskyapp. Transifex is also popular for translation of open-source projects.

Add confirmation when overwriting image

When adding an additional image to a movie or TV episode, the selection defaults to "primary", and sometimes I forget to change it if I'm adding a different kind of image. This results in my primary image being overwritten with no way to undo it other than restoring from backup. It would be nice if it could prompt me for confirmation when uploading an image would overwrite an existing image.

Chromecast no longer found after update to the new app id

I was able to bisect my way to see that edde580 caused the chromecast not to show up in chrome/android in the "play on" dialogue.

I'll do tcpdumps, get logs etc - just tell me what you need :)

Live TV display in web GUI lacks pagination

This is minor but thought I'd report it.

The Live TV display of upcoming Movies and Shows in the web GUI lacks pagination and only the first page is shown. This can be reviewed by clicking on:

Live TV->Programs->Movies
or
Live TV->Programs->Shows

Expected behavior would be to show all items separated by page with page navigation at top, bottom or both.

Determine versioning policies

AFAICT there's no versioning in this repo, so it should closely track the main repo. Open to suggestions on how to accomplish this.

Dark overlay staying on

Hello!

First of all, thanks for all the great work done on Jellyfin! I've noticed an issue over the past few days since I started using this fork.

The modal popup overlay tends to stay on over the player in some situations. By overlay I mean the dark cover that appears when you perform an action in the player menu, like picking subtitle or displaying the 'stats for nerds'.

Example:

I've noticed this behaviour in both Safari and Chrome. In this case, I was watching a video for a few minutes, decided to pick English subtitles by clicking the "CC" button at the bottom. After i did that, the video started re-encoding, as it should, the series poster appeared and once the video started playing a few seconds later, the black overlay was there, as seen in the picture.

This dissapears after reload/reselecting the episode from home screen, which basically reloads the players/page.

I did some digging and found out which div causes the issue (it went away after I set "display: none" property on it, see screenshot below.

I hope it helps with debugging. Thanks in advance!

Player control doesn't show due to JS error

Describe the bug
Player control doesn't show due to JS error.

To Reproduce

1. Select music album and click play on

Expected behavior
A clear and concise description of what you expected to happen.

Logs

response status: 200, url: redacted
Active player: {"name":"Html Audio Player","id":"htmlaudioplayer","playerName":"Html Audio Player","playableMediaTypes":[true,false,false,false,false],"isLocalPlayer":true,"supportedCommands":["GoHome","GoToSettings","VolumeUp","VolumeDown","Mute","Unmute","ToggleMute","SetVolume","SetAudioStreamIndex","SetSubtitleStreamIndex","SetMaxStreamingBitrate","DisplayContent","GoToSearch","DisplayMessage","SetRepeatMode","PlayMediaSource","PlayTrailers","ToggleFullscreen"]} playbackmanager.js:379:114
TypeError: newValue is null[Learn More] index.html:32:25
... requests info here ...
validateFeature: playback registrationservices.js:73:41
TypeError: self.currentItem(...) is null[Learn More] playbackmanager.js:882:28

When first audio item finished playing another error appeared:

TypeError: streamInfo is undefined[Learn More] playbackmanager.js:874:54
onPlaybackStopped
http://REDACTED:8096/web/bower_components/emby-webcomponents/playback/playbackmanager.js:874:54
trigger/<
http://REDACTED:8096/web/bower_components/emby-apiclient/events.js:26:17
forEach self-hosted:262:13 trigger
http://REDACTED:8096/web/bower_components/emby-apiclient/events.js:25:51
onEndedInternal
http://REDACTED:8096/web/bower_components/emby-webcomponents/htmlvideoplayer/htmlmediahelper.js:180:9
onEnded
http://REDACTED:8096/web/bower_components/emby-webcomponents/htmlaudioplayer/plugin.js:88:13

Screenshots
You can see here the tab has active music playing, but multimedia control panel didn't appear.

System (please complete the following information):

• OS: Docker
• Browser: Firefox
• Jellyfin Version: Web 10.0.1.0

Remove seasonal themes

These rely upon external assets of dubious licensing. https://github.com/jellyfin/jellyfin/blob/master/MediaBrowser.WebDashboard/dashboard-ui/bower_components/emby-webcomponents/skinmanager.js#L121

Move all theme related color codes to theme .css files

For some reason, several UI colors are stored outside of the theme folders. Not only does this cause color clash, it makes it impossible to make custom themes without building from source.

For examples, see this, this, and this.

You can find these "emby green" spots in the source by searching for 52b54b, 82, 181, 75 (which is the same as the previous hex), 5EC157, 2bc253, and 54f054.

These codes might change if a branding pull is merged.

Add way to upload user themes

Title.

Library Filter Does Not Save At All

On the webapp (going to my jellyfin instance through a browser), when I use a filter on a library (filter by unplayed, specifically) it doesn't save its state. This issue existed in Emby, but didn't exist in the Android app. I'm going to try building the app again to see if I can reproduce this on the Jellyfin app.

EDIT: Can confirm that this issue exists with the app as well.

Changing library settings other than paths doesn't save

The title says it all.

Add better UI warning when media file is missing

In Jellyfin 10.0.0 and all previous versions back to Emby, there is no useful message displayed when attempting to play a media file, only an error similar to:

HLS Error: Type: networkError Details: fragLoadTimeOut Fatal: false htmlmediahelper.js:156:21

Jellyfin should attempt to detect and properly notify the user if a file is missing from disk when attempting to play it.

Remove remaining uneeded lang references

As part of #386 I also found a large number of unneeded lang file strings that are refereed to elsewhere.

The vast majority of these are still tied into JS that we dont need, but is referred to anyways. Since it requires additional effort, it has been left outside of the PR that removes the unreferenced strings.

Below is the complete list of strings I found that are referred to in code but we have no need for:

• ButtonLearnMoreAboutJellyfinConnect
• ButtonSendInvitation
• ErrorAddingJellyfinConnectAccount1
• ErrorAddingJellyfinConnectAccount2
• ErrorAddingJellyfinConnectAccount3
• ErrorMessageEmailInUse
• ErrorRemovingJellyfinConnectAccount
• FeatureRequiresJellyfinPremiere
• GuestUserNotFound
• HeaderAddLocalUser
• HeaderBecomeProjectSupporter
• HeaderBranding
• HeaderBrandingHelp
• HeaderFreeApps
• HeaderInvitationSent
• HeaderInvitations
• HeaderInviteUser
• HeaderInviteWithJellyfinConnect
• HeaderPendingInvitations
• HeaderSupportTheTeam
• HeaderSupporterBenefits
• HeaderTermsOfService
• HeaderWelcomeToJellyfin
• HowToConnectFromJellyfinApps
• Invitations
• InviteAnJellyfinConnectUser
• JellyfinIntroDownloadMessage
• JellyfinIntroDownloadMessageWithoutLink
• JellyfinIntroMessage
• LabelAddConnectSupporterHelp
• LabelConnectGuestUserName
• LabelConnectGuestUserNameHelp
• LabelConnectUserName
• LabelConnectUserNameHelp
• LabelEmail
• LabelEmailAddress
• LabelEnterConnectUserNameHelp
• LinkLearnMoreAboutSubscription
• MessageConnectAccountRequiredToInviteGuest
• MessageGuestSharingPermissionsHelp
• MessageJellyfinAccontRemoved
• MessageJellyfinAccountAdded
• MessagePendingJellyfinAccountAdded
• MessagePleaseAcceptTermsOfServiceBeforeContinuing
• MessagePluginRequiresSubscription
• MessagePremiumPluginRequiresMembership
• MessageProfileInfoSynced
• MessageThankYouForConnectSignUp
• MessageThankYouForConnectSignUpNoValidation
• MessageThankYouForSupporting
• MessageTrialExpired
• MessageTrialWillExpireIn
• RegisterWithPayPal
• TermsOfUseTermsOfUse
• TextEnjoyBonusFeatures
• XmlTvPremiere

Result is wrong for TMDB Query when Language set to "Chinese" and Country set to "Hong Kong"

Result is wrong for TMDB Query when Language set to "Chinese" and Country set to "Hong Kong"

The query from log shows the language option is only set to zh, instead of zh-HK. setting to zh will default it to be zh-CN which is for Mainland China (or PRC).
There is also a zh-TW in TMDB, that is for Taiwan.

https://emby.media/community/index.php?/topic/67141-tmdb-query-of-chinese-titles-appears-as-simplified-chinese/

Luke confirmed there needs to be changes to separate these 3 Countries.

Fix audio channel names and type in the selection UI

For example use the "marketing names" for all versions of Dolby and DTS. Also extract the actual track names from for example MKV files. So we can see English vs English - SDH if we named the tracks that.

sort paths in libraries

When adding paths to libraries, the folder list should be sorted.

Chromecast connection in UI is lost when switching pages

Expectation

Sender (app, server dashboard etc.) should be aware of its connection to Chromecast even after page reload.

It should be able to reconnect to an on-going casting session.

Reality

Refreshing the page or even going to the server dashboard causes the connection to be lost and cannot be regained by connecting again.

It still continues to stream, but the sender can no longer control it.

Steps to reproduce

1. Connect to CC via Chrome
2. Start a stream and make sure remote controls show up in Chrome
3. Go to server dashboard
4. CC icon is no longer active and re-connecting to CC has no effect.
   4a. NOTE: Chrome tab is still connected to CC.

Comments

It might be related to https://developers.google.com/cast/docs/reference/chrome/chrome.cast#.AutoJoinPolicy

Set clear rules for which browsers and platforms to support and which to not support

I've got the following base proposal subject to changes.

All options are divided in 4 groups:

• critical
• medium priority
• low priority
• don't bother priority

Besides that, support in development versions of the web portal may be prioritized using the number before the list entry where 1 is highest priority and n is the lowest priority in the list. So the critical browsers should always work on master, but on dev only chrome and safari might work for a certain feature.

Critical browsers to support:

1. Chrome
2. Safari
3. firefox
4. MS Edge

Medium priority browsers to support:
5. Chromium based browsers (Opera for example)
6. UC Browser (Is this even applicable to our target audience)

Low priority browsers:
7. IE 11
8. Gecko based browsers (IceWeasel for example)

Don't bother browsers:
n. IE <11

Is something like this useful to state or will it just get in the way of development?

Move to video.js as media player

Let's consider moving to video.js, it seems to be more-or-less a de facto html5 standard player now. It also seem to have more features (like mpeg-dash, webm-dash and cross-browser multiple audio tracks support) than the currently used solution which relies on browser support for multiple tracks and can either direct-play or use hls (forcing transcode to h264/mp3 even if you just want to remux a track in webm).

close now playing page on media stop

When the stop button is clicked from nowplaying.html the queue resets and the user is left on a blank page. It would be better if the user was sent back to where they were before they opened the queue.

Back button in the player redirects to previous page

The back button (left oriented arrow) in the video player in the upper left corner probably uses JavaScript to redirect to previous page.

This works well when the previously visited page was the episode list (show detail page), however it results in some undesired behaviour when it wasn't.

Example:

• Navigate to https://google.com
• Navigate to https://yourhost.tld/jellyfin/web/index.html#!/videoosd.html
• Click the back arrow button

Expected result: Returning to an episode list (show detail page)
Actual result: Returning to Google

Not really a huge deal, the videoosd.html page doesn't work when accessed directly anyway, however in some cases it's a top result when using the address bar autocomplete in browsers and it'd be convinient if the back button wen't to Jellyfin home page instead of redirecting the user completely outside the scope of Jellyfin itself.

Tested in latest Chrome stable :) Thanks for feedback!

sliders not looking right

Describe the bug
There are multiple CSS bugs and problems with sliders
For example, the thumb never goes all the way to the end. It does this more on the right than on the left.

To Reproduce

1. Open any video
2. Look at the volume slider
3. Turn the volume slider to 100
4. Observe space to the right that shouldn't be there.

Expected behavior
I expect the little thumb to cover the entire right and left end of the slider bar behind it.

Screenshots

(The bar is turned up to 100 on this image)

System (please complete the following information):

• OS: All
• Browser: All
• Jellyfin Version: 10.0.2

Editing Metadata for multiple items at once

When in the metadata manager, selecting multiple items in the left pane is possible, but edits are not made to multiple items. In the right pane, only the last item that was clicked is shown, and is the only one that gets any edits.

Review comments from #341

jellyfin/jellyfin#341

Web UI Should Use Client Time

Because I don't believe in setting localtime on my docker containers, I noticed that all the estimations about when things would be over was really odd. Then I realized, oh, it's using the server time.

So it should if possible use the client's time.

An option for scaling UI items in the home screen

Describe the feature you'd like
An option for scaling UI items in the home screen. Like Plex's slider (screenshot).

Additional context
It's useful when using the Web UI on large screens, like TVs.

Add display of chapter names to OSD

Some older Kodi skins used to have 01/20 - Chapter Name (for example) somewhere in the OSD (above the play bar). All my concert blurays have chapters with the song title. It is very convenient to skip through the files like that.

set default album thumbnail if no cover art is found

This applies to the itemdetails view for both mobile and desktop, which show an empty section where the cover art would normally be shown. Ideally it would display the same default thumbnail that shows up for other album views. The same fix could eventually be applied to all media types in itemdetails since I believe this is an issue for all of them.

related to #15

Refresh page after deleting a media element

When deleting a media file (tv show) from the web interface from the 'Tv Shows' cover view, the page should refresh to reflect the change. Currently if you delete a file you really have no way of knowing if it worked unless you manually refresh the page. Eventually it would be cool if the page would be handled like Plex does and the item would be deleted and then the others would shift to take it's place. This, of course, requires more than just a 'static' HTML page.

[meta] List of minor web UI enhancements

Spoke some with @joshuaboniface and he suggested that minor UI foibles and improvements all be tracked in one master issue with check boxes to track their progress. Should make it easier for UI folks to hop in and help so this is my attempt at compiling the existing minor UI bugfixes/improvements and adding some new ones.

This list does not include items presumed to be "difficult" or those that are known to require backend work.

• Make clicking on an item's name do something #300
• Dark overlay staying on #297
• Display time finished - as in more recent emby versions #261
• Add confirmation when overwriting image #247
• Dashboard should show default paths #122
• Set default admin panel theme to dark theme #308
• Change first install pages to use dark theme #322

Make it so themes are not hard coded

As a first step towards allowing user customizable themes, we should remove the hard coded theme setup in favor of folder enumeration.

The expected behavior of copying and renaming an existing theme in jellyfin/MediaBrowser.WebDashboard/dashboard-ui/bower_components/emby-webcomponents/themes/ is that the new folders name would result in an accompanying name in the theme selectors.

This is not the case.

Remove Sync/Transcode option from webui.

Related to jellyfin/jellyfin#183.

If sync isn't planned for jellyfin then please remove the sync buttons from the webUI so people don't try to use it.

Also the transcode button doesn't seem to work either, I'm not sure if that ones intentional or a bug, it would be nice if that worked for people with a lot of storage but lacking cpu power (E.g running on a nas) to do a non real-time transcode.

Edit: My media directory is R/O to jellyfin at the moment so that may have some bearing on this one.

Enable override of streched metadata

Some metadata images end up stretched, especially if they pull from a 4:3 source video. Would be nice to toggle the setting by series with manual overrides at series/season/episode level.

Example is below (should be 4:3, not 16:9):

Will likely require front and backend work, but since this is more or less a user facing thing, I've opened it here.

Tagging @dkanada since he wanted to be when this was opened.

Add .editorconfig

In general we need to come up with a set of style guidelines for our non-C# code and an editorconfig would be a good start.

missing thumbnail on album view for mobile screen size

The android client has always been missing a nice thumbnail on itemdetails for albums similar to movies and shows. I will look into this once I have audio playback functional again.

[Meta] List to track user customizable theme support

Just a "master" list to track known issues working towards user supplied themes.

• Make it so themes are not hard coded #68
• Move all theme related color codes to theme .css files #69
• Add way to upload user themes #70
• Remove seasonal themes #71

Picture-in-picture support on macOS

High Sierra and Mojave have a support for native PIP (works at least in Chrome and Safari). Youtube seems to have this implemented. This may work in video.js (#142) but I'm not 100% confident about that. It's also described in detail on Apple developers page and seems fairly easy to implemented :) Would be nice to have this, although it's mostly QoL. Thanks!

Ref: https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls

Use webpack for building and minifying.

This project really needs a proper bundler. Will see if any of my existing webpack template files will work.

We should also switch to yarn as a package manager.

2019-09-30:
We need to build the actual application bundle as well as just the dependency bundle and minify.

Restarting from the dashboard button results in UnhandledException

As the title say, when clicking the restart button, the process fails:

• Ubuntu 18.04, freshly installed Jellyfin.

server.txt
unhandled_5c9ffb66-5db6-4a8c-bae5-e85565bfce7b.txt

Unreadable text with light theme and dark backdrops

I am on 10.0.0.1 and I changed to the light theme for the dashboard and I am unable to read the text of almost anything.

Store filter state per library

Hi

It will be so nice if the filter state of a library is saved properly so the filters always enabled when when the user come back to the lib later.

• Enable a filter like seen or un seen, that is the upside down aztec pyramid thing

• Goto home page

• Click on the library again

• The filter setting is gone

Revamp initial setup dialog to be more useful

The current initial setup screen is a great idea, however the execution falls flat. There's a lot of things that can be improved on it, in almost every screen. This issue will track the required changes.

Sub-issues: jellyfin/jellyfin#192

My thoughts, per-page (numbered):

1. Display language page is perfect, no need to clutter this one up. Maybe add a "Is your language not here? See <page> to help translate Jellyfin" at the bottom.
2. "About yourself" page, I really hate this wording. Should be "initial user setup". Should change the field from "your first name" to "administrator username" - why yes, my first name is indeed "admin" thank you. Add a field to set an initial password as well, but allow this to be blank to have no password (as is currently the default). I think just a second dialog that allows a null value is better than a checkbox or anything, since it gently implies that there should be a PW -> encouraging sane defaults.
3. Media library setup page is fine, though maybe move this to the very end of the welcome screen rather than right in the middle.
4. Metadata language page seems fine, though since you configured your libraries in the last page, the ordering of this makes zero sense. Should ask for defaults first (related to the reordering mentioned above).
5. Configure Remote Access page has so many improvements that it got its own issue jellyfin/jellyfin#192
6. "You're done" page, is basically just a "use our apps" add. If library scan (number 3) is last, then this can just say "finish and go to dashboard" rather than have a separate page.

Feedback welcome.

Add save buttons and notifications of settings being saved to UI elements

If you look, you can find inconsistencies with the UI regarding save buttons. When adding a new library it has a save button but when editing a library it does not.

As far as I'm aware, all other settings lack a save button and have no visual feedback indicating the setting being changed was saved.

I'm not sure if there should even be auto save of settings, at least within the admin panel. Most admin settings can kick off long and/or destructive processes. I think it would be best for at least the admin side to only accept changes when a save button is pressed.

js linter in CI is needed

@jellyfin/core thoughts?

Login page inputs missing autofill attributes

Describe the bug
On a Jellyfin server login page, the password field incorrectly prompts Safari on iOS and MacOS to suggest new generated passwords rather than suggesting saved passwords. The user field should contain the HTML attribute autocomplete="username" and the password field should contain autocomplete="current-password".

To Reproduce
Steps to reproduce the behavior:

1. Go to login page for a Jellyfin server
2. Click on password field
3. Safari recommends a new generated password

Expected behavior
When selecting user field on login page, browser suggests stored user/password combos if applicable.

Screenshots

System (please complete the following information):

• OS: iOS 12, MacOS Mojave
• Browser: Safari
• Jellyfin Version: 10.0.2.0

Change Color of Switch Track

This may tie in to the theme/colour work that @sparky8251 is doing.

Essentially, right now with the new dark theme, the track for toggle switches is set to black (or nearly black). As a result, a switch just looks like a floating button.

I couldn't tell you where emby-toggle.css is being generated, but wherever it is, it ends up with this:

.mdl-switch__track {
    background: rgba(0, 0, 0, .2);
    height: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    cursor: pointer
}

That background should be changed to something lighter.

forgotpasswordpin submit retun page when entering pin

Album cover missing when view is smaller

Larger Size - The album cover is clearly visible.

Window Shrunk Slightly - No album cover, empty space instead.

Skip to next episode prompt is way too big and blocks ui

The idea is to make it smaller and less intrusive so that it can still be possible to control the playback and see the subtitles.
Blocked by #513