Images not loading in Docker setup with Jellyfin

[stephanrenggli]

Bug report

Describe the bug
Due to the way images/thumbnails are loaded, they can not be loaded if an internal IP/DNS name is used to specify the Jellyfin server.

To Reproduce
Steps to reproduce the behavior:

1. Set up Jellyfin and EmbyStat via docker-compose
2. Run first run setup in EmbyStat and set up Jellyfin server via internal docker DNS name (ex. jellyfin:8086, this will resolve via internal docker DNS)
3. Load any page with images/thumbnails
4. Thumbnails don't load

Expected behavior
I would expect images/thumbnails to load correctly. However since Jellyfin is seen to be available at jellyfin:8086 and not a publicly available domain like jellyfin.mydomain.com resources can't be loaded.

Maybe EmbyStat could load all of these resources from Jellyfin first and then the Client loads the resources from EmbyStat and not via API from Jellyfin.

Example docker compose to achieve this setup:

version: "2.3"
services:

  jellyfin:
    container_name: jellyfin
    image: jellyfin/jellyfin:latest
    restart: always
    ports:
      - 8096:8096
    networks:
      - proxy

  embystat:
    container_name: embystat
    image: lscr.io/linuxserver/embystat
    restart: always
    ports:
      - 6555:6555
    networks:
      - proxy

Screenshots

Obviously jellyfin:8086 can't be resolved from my client because this is the docker internal DNS name.

System (please complete the following information):

• OS: Ubuntu -> Docker
• Browser: Chrome
• Version: 0.2.0-beta.27
• Media server type: Jellyfin

[rluetzner]

Maybe EmbyStat could load all of these resources from Jellyfin first and then the Client loads the resources from EmbyStat and not via API from Jellyfin.

There's another problem with this approach: none of the links work, because they direct to http://jellyfin:8096 instead of jellyfin.mydomain.com.

My idea would be an optional field where the public URL for Jellyfin can be entered. If none is given, one can default to the full server URL. The public URL would have to be inserted in any external links (images, movies or series).

If it helps prevent confusion, this might also be a Docker specific environment variable. It doesn't need to show up in the web UI settings, if it's documented well enough.

[rluetzner]

I'm not a frontend guy and know nothing about React, but what I propose seems easy enough so I could write some preliminary code. I'll try to do this later today.

[rluetzner]

I think I found the piece of code that needs to be changed, but I was not yet able to verify it. I think it's in EmbyStat.Web/ClientApp/src/shared/hooks/useMediaServerUrls.tsx : 10 in the function getFullMediaServerUrl.

[rluetzner]

I haven't entirely given up on this yet.
I've figured out that the place I mentioned in my last comment is indeed where it could be fixed. I was able to prove this by hardcoding the public address of my Jellyfin instance.

However, I've not yet been able to extend the config file. It's overwritten whenever the container restarts and I haven't quite figured out where that happens.

Additionally the project is a pain to build. I might have the wrong parameters, because I couldn't find proper build instructions anywhere, but building the React part takes almost an hour. 🤯

Could also be related to me building everything with Docker, but I really didn't want to install a bunch of dependencies on my system for what seems to be a one-time easy fix. I want to try Toolbox next and see if it makes (re)building faster.

[rluetzner]

Oh wow. I've actually got a lot to report.

First of all, I was able to lower the build time significantly by switching from a full Docker pipeline to using Distrobox (which is still container-based). Now it only took a few minutes to build and I was able to fix the remaining code issues pretty quickly.

I've got a working implementation for an additional setting in config.json named PublicAddress. This will only affect things if it is defined and can be used as an alias for the media server.

However, I figured out an even better and easier solution (IMO). The reason why I like this better is because the underlying problem is not with EmbyStat, but with the Docker setup. If the media server were hosted anywhere else, we could just use the public address for EmbyStat and everything would work as expected. I'm not sure if that warrants a special config setting if it can be solved otherwise.

I don't know how you're doing it @stephanrenggli , but I've got Jellyfin behind a reverse proxy, even in my home network. It is possible to alias a service defined in the same or in another docker-compose file. I'll document both cases here.

Media server is not behind a reverse proxy

ATTENTION!
While I'm pretty sure that this should work, I couldn't actually get it running.

This supposes that you access your media server with something like http://<ip>:<port>. It also expects that you defined the media server in the same compose file as embystat.

Add the following lines to the embystat service in the compose file:

links:
  # e.g. jellyfin:192.168.0.42
  - <media-server-service-name>:<ip>

Media server is behind a reverse proxy

In my case the reverse proxy is defined in another compose file. We can just do the same as above, but use external_links instead.

external_links:
  # e.g. traefik:jellyfin.example.com
  - <reverse-proxy-service-name>:<public-address>

[HeisenbergK]

I am facing the same issue. Any updates?