Jellyfin Media Bar Enhanced Plugin

Media Bar Enhanced is a plugin for Jellyfin that introduces a customizable and interactive media bar to your dashboard view on Jellyfin web.

This plugin is a fork and enhancement of the original Media Bar by MakD, but can be installed as plugin for easier installation and management/configuration.

---

Table of Contents

• Jellyfin Media Bar Enhanced Plugin
  • Table of Contents
  • Overview
  • Features
    • New Features & Enhancements
    • Core Features
  • Installation
  • Client Compatibility
  • Configuration
    • General Settings
    • Custom Content
    • Advanced Settings
  • Build The Plugin By Yourself
  • Troubleshooting
    • Effects Not Showing
    • Docker Permission Issues
  • Contributing

---

Overview

Expand to get more impressions:

Desktop Layout

Normal mode like the original with additional trailer button


Trailer modal


Excerpt from the config: E.g. here you can simply add your items that should be displayed

Mobile Layout

If trailer on mobile is eenabled...

Normal mode like the original with additional trailer button


Trailer modal in portrait mode

Features

This plugin builds upon the original Media Bar with new capabilities and improvements:

New Features & Enhancements

• Video Backdrop Support: Play trailer as background video directly in the slideshow
• SponsorBlock Integration: Automatically skip intro/outro segments in YouTube trailers
• Enhanced Controls:
  • Keyboard shortcuts (Arrow keys to navigate, Space to pause, M to mute)
  • Option to always show navigation arrows
  • Standalone "Trailer" button (opens in a modal) if video backdrops are disabled
• Smarter Playback:
  • Option to wait for the trailer to end before advancing the slide.
  • Mute/Unmute controls
• Override Trailers: Manually specify a custom trailer URL for any item via the Custom Media IDs list
• Customization:
  • Custom Media IDs: Manually specify which items (Movies, Series, Collections/Boxsets) to display. Easily configurable via the plugin settings
  • Seasonal Content Mode: Define date-based lists for holidays and seasons (e.g., Halloween, Christmas)
  • Pagination dots turn into a counter (e.g., 1/20) if the limit is exceeded
    Have a look:

    
  • Option to disable the loading screen
  • Client Settings: Optionally allow users to set selected media bar settings from their client.
    Have a look:

    

Core Features

• Immersive Slideshow: Rotates through your media library
• Metadata Display: Shows title, rating, year, and plot summary
• Direct Play: Click "Play" to start watching immediately
• Details View: Click "Info" to jump to the item's detail page
• Add To Favorites: Click the heart to add the item to your favorites

Installation

This plugin is based on Jellyfin Version 10.11.x

1. Open your Jellyfin Dashboard.
2. Navigate to Plugins > Repositories.
3. Click the + button to add a new repository.
4. Enter a name for the repo and paste the following URL:

   https://raw.githubusercontent.com/CodeDevMLH/jellyfin-plugin-manifest/refs/heads/main/manifest.json
   

5. Click Save.
6. Go to the Catalog tab.
7. Find Media Bar Enhanced (Under General) and install it.
8. Restart your Jellyfin server.
9. Refresh your browser (Ctrl+F5) to load the new interface elements.

Client Compatibility

Because this plugin relies on injecting JavaScript and CSS into the web interface, it works best on clients that use the web wrapper.

Client Platform	Status	Notes
Web Browsers (Firefox, Chrome etc.)	✅	Direct JS injection
Jellyfin Media Player (Windows/Linux/macOS)	✅	Uses jellyfin web
Android App	✅	Uses a web wrapper
iOS App	✅	Uses a web wrapper
Android TV / Fire TV	❌	Not supported. Uses a native Java/Kotlin UI.
Roku	❌	Not supported. Uses a native UI.
Swiftfin (iOS/tvOS)	❌	Not supported. Uses a native Swift UI.
Kodi (via Jellyfin Addon)	❌	Not supported. Uses Kodi's native skinning engine.

Configuration

Configure the plugin via Dashboard > Plugins > Media Bar Enhanced.

Note

You must refresh your browser window (F5 or Ctrl+R) after saving changes for them to take effect.

General Settings

• Enable Media Bar Enhanced Plugin: Master switch to toggle the plugin.
• Enable Video Backdrops: Dynamically plays trailers in the background.
• Wait For Trailer To End: Prevents slide transition until the video finishes.
• Enable Mobile Video: specific setting to allow video playback on mobile devices (disabled by default to save data/battery).
• Show Trailer Button: Adds a button to open the trailer in a popup modal if video backdrops are disabled (e.g. on mobile if trailers are disabled there)

Custom Content

Define exactly what shows up in your bar.

• Enable Custom Media IDs: Restrict the slideshow to a specific list of IDs.
  • Manual Trailer Override: Add [YouTube_URL] after an ID to force a specific trailer.
  • Example ID: a1b2c3d4e5... [https://www.youtube.com/watch?v=VIDEO_ID]
  • Example Collection Name: Halloween Collection [https://...] | My Description (Note: Use | to separate description from name if using a name instead of an ID)
• Enable Seasonal Content Mode: Advanced date-based scheduling.
  • Format: DD.MM-DD.MM | Name | ID1, ID2, ID3
  • Example: 20.10-31.10 | Halloween | <ID_OF_HALLOWEEN_COLLECTION>
  • If the current date matches a range, those IDs are used. Otherwise, it defaults to standard behavior or the Custom Media IDs list.

How to get IDs: Check the URL of an item in the web interface: .../web/#/details?id=YOUR_ITEM_ID_HERE&...

Advanced Settings

• Slide Animations: Enable/disable the "Zoom In" effect.
• Use SponsorBlock: Skips non-content segments in YouTube trailers (if the data exists).
• Start Muted: Videos start without sound (user can unmute).
• Full Width Video: Stretches video to cover the entire width (good for desktop, crop on mobile).
• Enable Loading Screen: Enable/disable the loading indicator while the bar initializes.
• Always Show Arrows: Keeps navigation arrows visible instead of hiding them on mouse leave.
• Enable Keyboard Controls:
  • Left/Right: Change slide
  • Space: Pause/Play slideshow
  • M: Mute/Unmute video
• Content Limits: Fine-tune performance by limiting the number of items (Movies, TV Shows) fetched.

Build The Plugin By Yourself

If you want to build the plugin yourself:

1. Clone the repository.
2. Ensure you have the .NET SDK installed (NET 8 or 9 depending on your Jellyfin version).
3. Run the build command:

   dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish
   

4. The compiled DLL and resources will be in bin/Publish.

Troubleshooting

Effects Not Showing

1. Verify plugin installation:

   • Check that the plugin appears in the jellyfin admin panel
   • Ensure that the plugin is enabled and active

2. Clear browser cache:

   • Force refresh browser (Ctrl+F5)
   • Clear jellyfin web client cache (--> mostly you have to clear the whole browser cache)

Docker Permission Issues

If you encounter the message Access was denied when attempting to inject script into index.html. Automatic direct injection failed. Automatic direct insertion failed. The system will now attempt to use the File Transformation plugin. in the log or similar permission errors in Docker:

Option 1: Use File Transformation Plugin (Recommended)

Media Bar Enhanced now automatically detects and uses the File Transformation plugin (v2.5.0.0+) if it's installed. This eliminates permission issues by transforming content at runtime without modifying files on disk.

Installation Steps:

1. Install the File Transformation plugin from the Jellyfin plugin catalog
2. Restart Jellyfin
3. Media Bar Enhanced will automatically detect and use it (no configuration needed)
4. Check logs to confirm: Look for "Successfully registered transformation with File Transformation plugin"

Benefits:

• No file permission issues in Docker environments
• Works with read-only web directories
• Survives Jellyfin updates without re-injection
• No manual file modifications required

Option 2: Fix File Permissions

# Find the actual index.html location
docker exec -it jellyfin find / -name index.html

# Fix ownership (replace 'jellyfin' with your container name and adjust user:group if needed)
docker exec -it --user root jellyfin chown jellyfin:jellyfin /jellyfin/jellyfin-web/index.html

# Restart container
docker restart jellyfin

Option 3: Manual Volume Mapping

# Extract index.html from container
docker cp jellyfin:/jellyfin/jellyfin-web/index.html /path/to/jellyfin/config/index.html

# Add to docker-compose.yml volumes section:
volumes:
  - /path/to/jellyfin/config/index.html:/jellyfin/jellyfin-web/index.html

Contributing

Feel free to contribute to this project by creating pull requests or reporting issues.