Jellyfin custom favicon title, splash not working in v9.1.1

Troubleshooting
1

Creating a bug report/issue

I have searched the existing open and closed issues

Required Information

  • DietPi version 9.1.1
  • Distro version x86_64 PC
  • Kernel version Linux MobiServer 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 GNU/Linux
  • Architecture amd64
  • SBC model Native PC (x86_64)
  • Power supply used Regular mains
  • SD card used WD Blue HDD 1 TB server

Additional Information (if applicable)

  • Software title | Jellyfin in v9.1.1
    Install fine, running fine, no problem.

Steps to reproduce

I have customized my Jellyfin dietpi install via JF> Dash > General > Custom CSS.
Both banner-light.png and main.png are custom logo images.

/* Splash Logo change */

.pageTitleWithDefaultLogo {
background: url(assets/img/banner-light.png);
}

/* Override the default main image */
.pageTitleWithDefaultLogo {
background: url(assets/custom-logos/main.png) no-repeat center center / contain !important;
}

For favicon title, I used :

A. Edit the main.xxxxxxxxxx.bundle.js in the Jellyfin install directory.
Open it up and in the massive wall of text find

document.title=“Jellyfin” and document.title=e||“Jellyfin”}

Change the text from Jellyfin to whatever you want.

B. Then open up index.html in the same folder and find:

Jellyfin and change that as well.

Expected behaviour

The Jellyfin server is running at home behind NAT, as usual.
The internal IP access, IP:8097 web portal has the custom favicon, favocon title, splash and custom main image (top left), with the splash occasionally missing.

Another Jellyfin instance in AWS Lightsail (Ubuntu) also runs fine with custom favicon, title, splash and main image shown with web portal log in: no splash issues here.

Actual behaviour

However, with external duckdns.org DDNS access, with port 8097 forwarding, the server runs fine as usual. The favicon is there, but the favicon title briefly displays the favicon custom title, then reverts to default ‘Jellyfin.’
Also, the main image is still default Jellyfin, and no splash is seen.

Extra details

Since the Ubuntu cloud instance runs fine, with same configuration, and I know dietpi.com Jellyfin might have some customizations, I am posting here, believing this is a dietpi install issue, not necesasily a Jellyfin issue !

2

So it works when accessed via domain but not via IP, which is maybe a CORS problem?
Do you get any errors on the browser console when accessing via local IP?

3

No, things look fine with the local IP access.

So yes this might just be CORS…what is a fix ?

4

If you do not see a CORS error in the browser console than there is no problem with cross origin ressource sharing.
You would need to inspect the relevant elements with the dev tools of your browser to get more info why they are not showing up. It shows no errors at all in the console?

5

I see, noob here :stuck_out_tongue_winking_eye:

So if I am using duckDNS access in Chrome browser, and my custom logos don’t show correctly for Jellyfin portal in DietPi.com, what should I notice?

What chrome dev tools menu should I look at ?

6

Are these correct instructions ( got them from Skype AI CoPilot):

To confirm a CORS issue with DDNS access to a local server behind NAT using Chrome’s Developer Tools, you can follow these steps:

Open Chrome and navigate to the site you’re having issues with.

Right-click on the page and select “Inspect” to open Developer Tools.Go to the “Network” tab.

Trigger the action that leads to the CORS request.Look for the network request that corresponds to the action you triggered.

It should be in red if there’s an error.Click on the request and look at the “Headers” tab on the right panel.Under the “Response Headers” section, check for Access-Control-Allow-Origin.

If it’s missing or the value doesn’t match your request origin, it’s likely a CORS issue.

The “Console” tab will also display CORS errors with more details, such as the origin that is not allowed by the Access-Control-Allow-Origin header.

These steps should help you diagnose if the slow streaming or other issues you’re experiencing are due to CORS restrictions

javascript - Chrome dev tool error- Status in network tab is CORS ERROR while fetching image from Alibaba OSS - Stack Overflow.

7

Just open the dev tools and switch to the console in there, any errors are usually highlighted red. Maybe it’s CORS, maybe not.
Do you use a reverse proxy or do you access it via http://domain:port?

8

Thanks, will look at dev tools console once server is back on…

I use http://domain:port

9

@Jappe, thanks for engaging !

Well, the splash logo, favicon title fixed itself, after a couple more server reboots, I guess.

The dev tools console in Chrome is all green, so certainly no CORS problem.

I suppose clearing Jellyfin cache and restart, and clearing dietpi cache is not enough ?
sudo rm -rf /var/cache/jellyfin
sudo systemctl restart jellyfin
Not to forget clearing Chrome browser cache !

1 Like