Jellyfin Media Bar

[DejaVu]

Phenomenal job in bringing this feature to the front!
This has been something JellyFin should have had for years and I am pleased things are progressing and you guys are doing stella work with this.

However, not a gripe more of a request where possible.

Can we add some customisation in somewhere?
Perhaps to the overal size of the Bar - perhaps making it less intrusive and perhaps using up less screen real estate.
A tad more subtle with a few more options in the plugin settings perhaps.

I appreciate this is a lot of work because adjustments will need to be done for each screen layout.
Also, the overlap on the Favourites page is a bit disturbing - seems to cover all the favourites that have been saved.
Perhaps cease it from showing on there altogether?

[M0RPH3US]

Phenomenal job in bringing this feature to the front!
This has been something JellyFin should have had for years and I am pleased things are progressing and you guys are doing stella work with this.

However, not a gripe more of a request where possible.

Can we add some customisation in somewhere?
Perhaps to the overal size of the Bar - perhaps making it less intrusive and perhaps using up less screen real estate.
A tad more subtle with a few more options in the plugin settings perhaps.

I appreciate this is a lot of work because adjustments will need to be done for each screen layout.
Also, the overlap on the Favourites page is a bit disturbing - seems to cover all the favourites that have been saved.
Perhaps cease it from showing on there altogether?

Overlap in the favorite page solved in the private testing script. Will be released once deemed stable👍👍also you can customise this with simple css in the custom css bar of the jellyfin settings. All elements are customisable

---

I deleted my container, deleted the molested jellyfin image, then pulled a fresh image and deployed a new container.

From there, I was able to successfully install the file transformation and media bar plugins from the repository, and they worked perfectly.

However, the same issue as noted in my short video, above, still occurs even with fresh image/container. I validated that everything reset cleanly, and I deleted cache from Chrome, Edge and JMP, but the issue persists.

@Jamie Chapman I tried so hard to reproduce it but couldn't on my system. I'm unsure what's going wrong there😔🤕

[Jamie Chapman]

I deleted my container, deleted the molested jellyfin image, then pulled a fresh image and deployed a new container.

From there, I was able to successfully install the file transformation and media bar plugins from the repository, and they worked perfectly.

However, the same issue as noted in my short video, above, still occurs even with fresh image/container. I validated that everything reset cleanly, and I deleted cache from Chrome, Edge and JMP, but the issue persists.

@Jamie Chapman I tried so hard to reproduce it but couldn't on my system. I'm unsure what's going wrong there😔🤕

All good, I'll figure it out. It could be something with my theming and css from other plugins. Thanks for checking!

[Jamie Chapman]

I deleted my container, deleted the molested jellyfin image, then pulled a fresh image and deployed a new container.

From there, I was able to successfully install the file transformation and media bar plugins from the repository, and they worked perfectly.

However, the same issue as noted in my short video, above, still occurs even with fresh image/container. I validated that everything reset cleanly, and I deleted cache from Chrome, Edge and JMP, but the issue persists.

@Jamie Chapman I tried so hard to reproduce it but couldn't on my system. I'm unsure what's going wrong there😔🤕

All good, I'll figure it out. It could be something with my theming and css from other plugins. Thanks for checking!

That was it. I have the Skin Manager installed. Some of the css injections were screwing up the media bar. All set!

[itsrishi]

Hi M0RPH3US,

First of all, thanks for making this awesome plugin, it looks great! I just had two questions.

1. How can I change the logo that is used for the Custom Loader? Currently I'm using the following custom CSS to load my logo via a URL:

.adminDrawerLogo img { content: url(logo URL) !important; } imgLogoIcon { content: url(logo URL) !important; } .pageTitleWithLogo { background-image: url(logo URL) !important; }

2. Is there any way to change the font that is used in the Media Bar? I personally like the default Jellyfin theme and the font in the Media Bar doesn't match.

Note: I used the plugin method of install via repo.

Thanks in advance!

[ermejor]

¿Sabeis que la pestaña de favoritos queda inutilizada al quedar oculto su contenido por la media bar?

---

[Jolaru21]

Hola, lo reporté en el github del creador, estará solucionado en la siguiente actualización.

[Druidblack]

Good afternoon. You can make sure that when you start browsing the media menu, the logo and content description are hidden on the main page, leaving only the background of the image.

Now, scrolling through multimedia on the main page results in a lot of visual noise and the text of the content can merge with the text of the panel. On a PC, this is not so critical, but on a smartphone screen it causes discomfort.

[M0RPH3US]

Good afternoon. You can make sure that when you start browsing the media menu, the logo and content description are hidden on the main page, leaving only the background of the image.

Now, scrolling through multimedia on the main page results in a lot of visual noise and the text of the content can merge with the text of the panel. On a PC, this is not so critical, but on a smartphone screen it causes discomfort.

Hello. 

That is not how it is supposed to look, and should scroll out and in view with rest of the items. By any chance you also have the skin manager installed? What theme are you using?

[Druidblack]

Yes, I use the plugin "SkinManager2.0.2.0" in this plugin I use the theme "Ultrachromic"

After you said that the problem may be in the theme that I use. I decided to check it out. It turned out that in the "Ultrachromic" theme, the "Transparent Top Bar" option breaks the plug-in.

I tried to enable another theme from the plugin. As a result, the media bar appeared at the bottom of the screen and covered the library menu. Just for information.

After disabling the "Transparent Top Bar", the Ultrachromic theme stopped looking bad.

After experimenting with transparency, I found a way out of this situation.

I disabled the "Transparent Top Bar" and added the following code to the Custom CSS code:

Code:

.skinHeader-withBackground {
    background-color: transparent;
}

.force-scroll {
    overflow-y: auto;
    overflow-x: auto;
}

Now the top menu on the main page is transparent and does not interfere with the media bar. In this case, the color of the top menu does not change only in the settings menu. But it doesn't really interfere with the appearance.

I deleted it from the original theme code.

Code:

[color=#e8e6e3]/*Pages the have single unit height taskbar*/
@media all and (min-width: 100em){
  #indexPage,
  #moviesPage,
  #tvRecommendedPage,
  #musicRecommendedPage {
    margin-top: 68px;
    padding-top: 0px !important;
    overflow-y: scroll;
  }
}
/*Pages the have two unit height taskbar*/
@media all and (max-width: 100em){
  #indexPage,
  #moviesPage,
  #tvRecommendedPage,
  #musicRecommendedPage {
    margin-top: 130px;
    padding-top: 0.5em !important;
    overflow-y: scroll;
  }
}[/color]