Managing a long list of Media Libraries (image-based books)

[kowkow]

Hello all,

I use Jellyfin partly for its intended use (media library), but also and mostly as a way to display and stream a selection of artbooks and folders reference images to my Android phone and tablet.

I am aware that JF does support .and .epub libraries for ebooks ; but most image-centric artbooks simply come as a bunch of ordered image files, and obviously a folder of reference images is also just a bunch of images. There are a few more reasons for me to not use PDFs for this ebook/artbook scenario but that's a bit besides the point as I wouldn't want to convert all my image-based books to PDF anyways. Therefore I am using the "Photos" Library type.

Since I need each book to be its own clearly separated entity, this leads me to add each individual artbook as an individual Photo Library. While this is a bit of an outside the box use of the JF media library paradigm it actually works very well in practice.

But this means that I have all individual books (= Libraries) shown directly under Home/My Media, without grouping. Therefore I need to scroll horizontally in order to navigate this long carousel list of Libraries (about 50 items or so). I would like to hear suggestions on how to alleviate this.

I could see a number of ways :

- On the UI side of things, having the "My media" carousel be split into two or more lines (either automatically splitting the line in half or more, or, limiting the length of a line to a fixed number of Libraries). Here's a mockup (note the duplcate <> arrows, needed for desktop use) :

   

- Or, having some sort of way to group Libraries into "Libraries of Libraries" (but this seems not doable since this would mean introducing a new data structure)

- Or, adding more refinements to the "Photos" Library type, with a way to group items based on their source folder.

- Or, being able to groupselect multiple items without having to click on each individually. Which would then allow to group pages as Collections.

Any ideas ?

(On a related note the way photos are being displayed currently is not quite usable once in zoomed view, as panning around a photo triggers a zoom out, and reaching near the left or right edge of the image goes to previous/next. IMHO It would be best to disable previous/next altogether when in zoomed view.)

[TheDreadPirate]

If your images are part of books, you COULD make your own CBZ files. CBZs are literally just zip files full of images. With the file names being the page numbers. Then you could use a books library.

[kowkow]

Hello,

That's definitely something I will try, as that could be an elegant solution. I suppose this wouldn't show a mosaic of all pages though ... I'll run some tests.

Thanks !

[kowkow]

Alrighty, I've tried it - it definitely works in the sense that it does allow me to display this content as Books, and I quite like how this media type has the option to display two pages/images at the same time during reading ; but in actual practice, having to prepare CBZs for all books and folders + the lack of a grid overview showing all pages/images (not needed for regular books, but quite important for artbooks) makes it an inferior solution to the Photo Library approach.

I am therefore back to square one (this was an excellent suggestion though).

Is it possible to split the Library list in two or more lines (as per my mockup), with Custom CSS perhaps ?

Also and FWIW, here's a bug for Double Page View : left page appears under right page when zoomed in.

   

[TheDreadPirate]

You can try this CSS we have in our documentation.

https://jellyfin.org/docs/general/client...-libraries

Code:

@media all and (min-width: 50em) {
  .homePage .emby-scroller {
    margin-right: 0;
  }
  .homePage .emby-scrollbuttons {
    display: none;
  }
  .homePage .itemsContainer {
    flex-wrap: wrap;
  }
}

I tried this on my test instance and it appears to work the way you described you wanted.

Dashboard > General > Custom CSS code.

[kowkow]

Oh, very nice ! This actually does a full-on grid view without any horizontal scrolling - which is obviously better than merely splitting the list in two. Excellent, thanks

Is this desktop only ? (I actually don't mind the horizontal scrolling on mobile, since it is appropriate for touchscreens ; but I am curious to know if such custom CSS can be made to work on both desktop and mobile).

[TheDreadPirate]

So you have a few options.

Dashboard > General > Custom CSS applies the CSS to all web based clients, including our mobile clients. Which is what we did. The server side CSS is enabled by default on clients.

You can also do per-device Custom CSS. Click on your profile icon in the top right > Display > Custom CSS code. Any CSS entered here only applies to this client. This would be instead of, or in addition to, the server side CSS in the Dashboard.

In that same Display menu, there is a setting to disable server side CSS. This would also be per-client. So you have custom CSS provided by the server that is used by default until you switch it off on the client with this check box.

[kowkow]

Right, that makes sense ; but even after trying a few permutations (having this code sent from the server, as well as having it as a user customization ; and having this one custom CSS only, or having it with other CSS edits) the grid just doesn't show up for me on Android (which is what I mean by Mobile).

Perhaps a bug or limitation then ?

Ha, scratch that - the grid display *does* trigger ... once the phone is in landscape mode. And indeed looking at the CSS, the 50em minimum width is what is causing this. Setting it to 25 does trigger a vertical grid ... even though it is just one single item wide hehe But that works, and it is still more natural than scrolling horizontally.

Anyways, most importantly this solves the issue on Desktop, which is were it was the most annoying because of the selection mode triggering constantly upon any mouse interaction with the carousel of Libraries. Grid display fully alleviates that, since vertical scrolling doesn't require any mouse clicks.

Is there a list of keyboard inputs available ?