The essential enhancement suite for Jellyfin, bundling advanced features and customizations into one convenient plugin.

--------------------------------------------------

• Jellyfin Enhanced
  • 🔧 Installation
    • 🐳 Docker Installation Workaround
  • ✨ Features
    • 🪼 Jellyseerr Search
      • Setup
      • Icon States
      • How It Works?
    • Jellyseerr Report Issue
  • 🌐 Internationalization & Translations
  • 🎨 Custom Styling
    • Pause Screen CSS
    • Quality Tags CSS
    • Genre Tags CSS
    • Language Tags CSS
    • Rating Tags CSS
    • Rating Tag OSD CSS
    • ARR Tag Links CSS
    • Enhanced Panel CSS
  • 🫚 Project Structure
    • File Structure
    • Component Breakdown
  • 🧪 Compatibility
  • 💡 FAQ & Troubleshooting
    • FAQ
    • Troubleshooting
    • Common Errors
  • 📸 Screenshots
  • 📄 License
• Enjoying Jellyfin Enhanced?

1. In Jellyfin, go to Dashboard > Plugins > Catalog > ⚙️
2. Click ➕ and give the repository a name (e.g., "Jellyfin Enhanced").
3. Set the Repository URL to:

https://raw.githubusercontent.com/n00bcodr/jellyfin-plugins/main/10.11/manifest.json

https://raw.githubusercontent.com/n00bcodr/jellyfin-plugins/main/10.10/manifest.json

4. Click Save.
5. Go to the Catalog tab, find Jellyfin Enhanced in the list, and click Install.
6. Restart your Jellyfin server to complete the installation.

--------------------------------------------------

• ⌨️ Advanced Keyboard Shortcuts: A comprehensive set of hotkeys for navigation, playback control, and more.
• 📝 Customizable Subtitles: Fine-tune the appearance of subtitles with presets for style, size, and font.
• ⏯️ Smart Playback: Auto-pause when you switch tabs and auto-resume when you return.
• ↪️ Auto-Skip Intros/Outros: Binge-watch seamlessly without interruption (requires Intro Skipper plugin).
• 🎲 Random Item Button: Discover something new in your library with a single click.
• 👁️ Remove from Continue Watching: Easily clean up your home screen.
• 🔍 Streaming Provider Lookup: See where else your media is available to stream across multiple regions.
• ✒️ Show Reviews from TMDB: Option to show TMDB reviews of an item in Jellyfin.
• 🖼️ Auto Picture-in-Picture: Automatically enter Picture-in-Picture mode when switching to another tab.
• 📁 Show File Sizes: Display the total file size of media on its detail page.
• 🗣️ Show Audio Languages: See available audio languages with country flags on the item detail page.
• 🎬 Custom Pause Screen: A beautifully designed, informative overlay when you pause a video. This feature is a modified version of the original script by BobHasNoSoul.
• 🏷️ Quality Tags: See media quality (4K, HDR, Atmos) at a glance directly on the posters. This is a modified and rewritten version of the original script by BobHasNoSoul.
• 🎭 Genre Tags: Identify genres instantly with themed icons on posters.
• 🌐 Language Tags: Displays available audio languages as flags on posters.
• ⭐ Rating Tags: See IMDb ratings at a glance directly on posters in your library.
• 🔗 .arr Links Integration: For administrators, quickly jump to the Sonarr, Radarr, or Bazarr page for any item.
• 🌍 Multi-language Support: The interface is available in multiple languages, with more on the way.
• 🖼️ Custom Splash Screen: A configurable splash screen that appears while Jellyfin is loading.

--------------------------------------------------

The Jellyfin Enhanced plugin can integrate with your Jellyseerr instance, allowing users to search for and request media directly from the Jellyfin search interface. Additionally, requested media can be automatically added to your Jellyfin watchlist (from KefinTweaks) once it becomes available in your library.

To enable the Jellyseerr integration, you must first configure it in the plugin settings:

1. Navigate to Dashboard > Plugins > Jellyfin Enhanced.
2. Go to the Jellyseerr Settings tab.
3. Check the Show Jellyseerr Results in Search box to enable the feature.
4. Enter your Jellyseerr URL(s), one per line. The plugin will use the first one that connects successfully. Should be the same Jellyseerr Instance. Intended for providing internal and external urls, ideally just internal URL should work.
5. Enter your Jellyseerr API Key. You can find this in Jellyseerr under Settings > General > API Key.
6. You can use the test button to see if your Jellyseerr instance is reachable.
7. (Optional) Enable "Add Requested Media to Watchlist" to automatically add items to Watchlist in Jellyfin once they're downloaded and added to your library.
8. (Optional) Enable "Sync Jellyseerr Watchlist to Jellyfin" to automatically sync your Jellyseerr watchlist items to Jellyfin Watchlist when they become available.
9. Click Save.

Important

For the integration to work, you must also enable "Enable Jellyfin Sign-In" in your Jellyseerr User Settings (/settings/users).


All users who need access to request content must be imported into Jellyseerr as Jellyfin users.

Users that have access	Users that don't have access (import them)

When on the search page, a Jellyseerr icon will appear to indicate the connection status. This is the first thing to check when troubleshooting issues.

Icon	State	Description
	Active	Jellyseerr is successfully connected, and the current Jellyfin user is correctly linked to a Jellyseerr user. Results from Jellyseerr will load along with Jellyfin and requests can be made.
	User Not Found	Jellyseerr is successfully connected, but the current Jellyfin user is not linked to a Jellyseerr account. Ensure the user has been imported into Jellyseerr from Jellyfin. Results will not load.
	Offline	The plugin could not connect to any of the configured Jellyseerr URLs. Check your plugin settings and ensure Jellyseerr is running and accessible. Results will not load.

To ensure security and prevent browser-related Cross-Origin Resource Sharing (CORS) errors, the Jellyfin Enhanced plugin does not communicate directly with the Jellyseerr API from your browser. Instead, it uses the Jellyfin server as a proxy. This method keeps your Jellyseerr API key safe on the server and avoids security issues.

In doing so, the plugin exposes a few proxy endpoints for its own use and for troubleshooting.

curl -X GET\
  "<JELLYFIN_ADDRESS>/JellyfinEnhanced/version"

curl -X GET\
  -H "X-Emby-Token: <JELLYFIN_API_KEY>"\
  "<JELLYFIN_ADDRESS>/JellyfinEnhanced/jellyseerr/status"

curl -X GET\
  -H "X-Emby-Token: <JELLYFIN_API_KEY>"\
  -H "X-Jellyfin-User-Id: <JELLYFIN_USER_ID>"\
  "<JELLYFIN_ADDRESS>/JellyfinEnhanced/jellyseerr/user-status"

curl -X GET\
  -H "X-Emby-Token: <JELLYFIN_API_KEY>"\
  -H "X-Jellyfin-User-Id: <JELLYFIN_USER_ID>"\
  "<JELLYFIN_ADDRESS>/JellyfinEnhanced/jellyseerr/search?query=Inception"

curl -X POST\
  -H "X-Emby-Token: <JELLYFIN_API_KEY>"\
  -H "X-Jellyfin-User-Id: <JELLYFIN_USER_ID>"\
  -H "Content-Type: application/json"\
  -d '{"mediaType": "movie", "mediaId": 27205}'\
  "<JELLYFIN_ADDRESS>/JellyfinEnhanced/jellyseerr/request"

--------------------------------------------------

Report issues (video, audio, subtitles, or other) directly to your configured Jellyseerr instance from any movie or TV item detail page in Jellyfin.

• Enable the Jellyseerr integration in the plugin settings and check the Show 'Report Issue' button on item detail pages option.
• Open a movie or TV show detail page and click the compact report icon in the item action icons to open the issue modal.
• Choose an issue type (Video / Audio / Subtitles / Other), enter a description, and for TV shows optionally select the affected season and episode. You can choose All seasons / All episodes when appropriate.
• Submit the report — the plugin will proxy the request through your Jellyfin server to Jellyseerr and use Jellyseerr's internal media id when creating the issue.

• The report button is hidden when Jellyseerr is unreachable or the current Jellyfin user is not linked to a Jellyseerr account.
• The button will not appear on collection/boxset pages and special seasons/episodes (season 0) are intentionally skipped.
• Season/episode selectors prefer local Jellyfin data so selections reflect what is actually present on your server.

The plugin detects the Jellyfin user profile language automatically. List of currently supported languages here.

Translations are now fetched directly from GitHub on first load, ensuring users always have access to the latest language updates without requiring a plugin update. The plugin automatically:

• Fetches the latest translations from the GitHub repository
• Caches translations per plugin version for 24 hours to reduce network requests
• Automatically clears outdated caches when the plugin is updated
• Falls back to bundled translations if GitHub is unavailable (offline mode, rate limits, etc.)
• Handles GitHub rate limiting gracefully

Is your language missing or incorrect? You can help translate Jellyfin Enhanced for the community!

• Find the Translation Files: Navigate to the Jellyfin.Plugin.JellyfinEnhanced/js/locales/ directory in this repository.
• Make a copy of en.json and rename it to your language's two-letter ISO 639-1 code (e.g., es.json for Spanish, pl.json for Polish).
• Translate: Open your new file and translate the English text on the right side of the colons (:).
• Submit a Pull Request: Once you're done, submit a pull request with your new translation file.

Once merged, your translations will be immediately available to all users on their next browser refresh (after cache expires)!

--------------------------------------------------

<div class="cardImageContainer" style="position: relative;">
    <div class="quality-overlay-container">
        <div class="quality-overlay-label resolution" data-quality="4K">4K</div>
        <div class="quality-overlay-label video-codec" data-quality="HDR">HDR</div>
        <div class="quality-overlay-label audio-codec" data-quality="ATMOS">ATMOS</div>
    </div>
</div>

<div class="cardImageContainer">
    <div class="genre-overlay-container">
        <div class="genre-tag" title="Action">
            <span class="material-icons">local_fire_department</span>
            <span class="genre-text">Action</span>
        </div>
        </div>
</div>

<div class="cardImageContainer">
    <div class="language-overlay-container">
        <img src="https://flagcdn.com/w20/gb.png" class="language-flag"
             data-lang="gb" data-lang-name="English" alt="English" loading="lazy">
        <img src="https://flagcdn.com/w20/fr.png" class="language-flag"
             data-lang="fr" data-lang-name="French" alt="French" loading="lazy">
        <img src="https://flagcdn.com/w20/es.png" class="language-flag"
             data-lang="es" data-lang-name="Spanish" alt="Spanish" loading="lazy">
    </div>
</div>

<div class="cardImageContainer">
    <div class="rating-overlay-container">
        <div class="rating-tag">
            <span class="material-icons rating-star-icon">star</span>
            <span>8.7</span>
        </div>
    </div>
</div>

<span id="je-osd-rating-container">
    <span class="je-star">star</span>
    <span class="je-text">8.7</span>
</span>

<a class="button-link emby-button arr-tag-link"
   href="#..."
   title="View all items with tag: JE Arr Tag: in-netflix"
   data-id="in-netflix"
   data-tag="JE Arr Tag: in-netflix"
   data-tag-name="in-netflix"
   data-tag-prefix="JE Arr Tag: ">
  <span class="arr-tag-link-icon" aria-hidden="true">🏷️</span>
  <span class="arr-tag-link-text"
        data-id="in-netflix"
        data-tag="JE Arr Tag: in-netflix"
        data-tag-name="in-netflix"
        data-tag-prefix="JE Arr Tag: ">
    JE Arr Tag: in-netflix
  </span>
 </a>

/* Hide the original label so it doesn't reserve width */
.itemExternalLinks a.arr-tag-link[data-tag-name="1 - n00bcodr"] .arr-tag-link-text {
  display: none !important;
}

/* Draw your custom label using a pseudo-element on the link */
.itemExternalLinks a.arr-tag-link[data-tag-name="1 - n00bcodr"]::after {
  content: " N00bCodr"; /* leading space keeps a gap after the icon */
}

.itemExternalLinks a.arr-tag-link[data-id="in-netflix"] { display: none !important; }
/* or */
.itemExternalLinks a.arr-tag-link[data-tag-name="in-netflix"] { display: none !important; }

/* Replace the icon */
.itemExternalLinks a.arr-tag-link .arr-tag-link-icon { display: none !important; }
.itemExternalLinks a.arr-tag-link::before {
  content: "🔖"; /* your icon */
  margin-right: .25rem;
}

.itemExternalLinks a.arr-tag-link {
  padding: 8px 8px;
  border-radius: 999px;
  background: rgb(255,255,255,.5);
  border: 2px solid rgb(255,255,255,.8);
}

.itemExternalLinks a.arr-tag-link[data-id="1 - n00bcodr"]  { background: #d81f26; color: #fff; }
.itemExternalLinks a.arr-tag-link[data-id="2 - jellyfish"] { background: #00a8e1; color: #fff; }
.itemExternalLinks a.arr-tag-link[data-id="3 - admin"] { background: #0c1a38; color: #8dd0ff; }

    /*
    * ===================================================================
    * Universal Style Override for the Jellyfin Enhanced Panel
    * ===================================================================
    */

    /* --- Main Panel & Backdrop --- */
    #jellyfin-enhanced-panel {
        background: rgba(25, 35, 45, 0.85) !important;
        border: 1px solid rgba(125, 150, 175, 0.3) !important;
        backdrop-filter: blur(20px) !important;
        color: #e6e6e6 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    }

    /* --- Panel Header --- */
    #jellyfin-enhanced-panel > div:first-child {
        background: rgba(0, 0, 0, 0.25) !important;
        border-bottom: 1px solid rgba(125, 150, 175, 0.3) !important;
    }

    /* --- Main Title ("Jellyfin Enhanced") --- */
    #jellyfin-enhanced-panel div[style*="-webkit-background-clip: text"] {
        background: linear-gradient(135deg, #00a4dc, #aa5cc3) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* --- Tab Buttons --- */
    #jellyfin-enhanced-panel .tab-button {
        background: rgba(0, 0, 0, 0.2) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        border-bottom: 3px solid transparent !important;
    }

    #jellyfin-enhanced-panel .tab-button:hover {
        background: rgba(0, 0, 0, 0.4) !important;
        color: #ffffff !important;
    }

    #jellyfin-enhanced-panel .tab-button.active {
        color: #ffffff !important;
        border-bottom-color: #00a4dc !important;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    /* --- Section Headers & <details> Summary --- */
    #jellyfin-enhanced-panel h3,
    #jellyfin-enhanced-panel details summary {
        color: #00a4dc !important;
    }

    /* --- Collapsible <details> Sections --- */
    #jellyfin-enhanced-panel details {
        background-color: rgba(0, 0, 0, 0.2) !important;
        border: 1px solid rgba(125, 150, 175, 0.2) !important;
    }

    /* --- Keyboard Key Styling (<kbd>) --- */
    #jellyfin-enhanced-panel kbd,
    .shortcut-key {
        background: #34495e !important;
        color: #ecf0f1 !important;
        border: 1px solid #2c3e50 !important;
        box-shadow: 0 2px 0 #2c3e50;
    }

    /* --- Toggles & Checkboxes --- */
    #jellyfin-enhanced-panel input[type="checkbox"] {
        accent-color: #aa5cc3 !important;
    }

    /* --- Panel Footer --- */
    #jellyfin-enhanced-panel .panel-footer {
        background: rgba(0, 0, 0, 0.25) !important;
        border-top: 1px solid rgba(125, 150, 175, 0.3) !important;
    }

    /* --- Buttons in Footer --- */
    #jellyfin-enhanced-panel .footer-buttons a,
    #jellyfin-enhanced-panel .footer-buttons button {
        background-color: rgba(255, 255, 255, 0.08) !important;
        transition: background-color 0.2s ease;
    }

    #jellyfin-enhanced-panel .footer-buttons a:hover,
    #jellyfin-enhanced-panel .footer-buttons button:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* --- Style for Toast Notifications --- */
    .jellyfin-enhanced-toast {
        background: linear-gradient(135deg, #00a4dc, #aa5cc3) !important;
        color: white !important;
        border: none !important;
        backdrop-filter: blur(10px) !important;
    }

--------------------------------------------------

The original monolithic plugin.js has been refactored into a modular, component-based structure to improve maintainability, readability, and scalability. The new architecture uses a single entry point (plugin.js) that dynamically loads all other feature components.

All client-side scripts are now located in the Jellyfin.Plugin.JellyfinEnhanced/js/ directory.

Jellyfin.Plugin.JellyfinEnhanced/
└── js/
    ├── locales/
    │   ├── da.json
    │   ├── de.json
    │   ├── en.json
    │   ├── es.json
    │   ├── fr.json
    │   ├── hu.json
    │   ├── it.json
    │   ├── pt.json
    │   ├── sv.json
    │   └── tr.json
    ├── enhanced/
    │   ├── config.js
    │   ├── events.js
    │   ├── features.js
    │   ├── osd-rating.js
    │   ├── playback.js
    │   ├── subtitles.js
    │   ├── themer.js
    │   └── ui.js
    ├── jellyseerr/
    │   ├── api.js
    │   ├── jellyseerr.js
    │   ├── modal.js
    │   └── ui.js
    ├── arr-links.js
    ├── arr-tag-links.js
    ├── elsewhere.js
    ├── genretags.js
    ├── languagetags.js
    ├── letterboxd-links.js
    ├── migrate.js
    ├── pausescreen.js
    ├── plugin.js
    ├── qualitytags.js
    ├── ratingtags.js
    ├── reviews.js
    └── splashscreen.js

• plugin.js: The main entry point. It loads the plugin configuration and translations, then dynamically injects all other component scripts.

• /enhanced/: Contains the core components of the "Jellyfin Enhanced" feature set.

  • config.js: Manages all settings, both from the plugin backend and the user's local storage. It initializes and holds shared variables and configurations that other components access.
  • events.js: The active hub of the plugin. It listens for user input (keyboard/mouse), browser events (tab switching), and DOM changes to trigger the appropriate functions from other components.
  • features.js: Contains the logic for non-playback enhancements like the random item button, file size display, audio language display, and "Remove from Continue Watching".
  • osd-rating.js: Displays IMDb ratings in the video player OSD controls next to the time display.
  • playback.js: Centralizes all functions that directly control the video player, such as changing speed, seeking, cycling through tracks, and auto-skip logic.
  • subtitles.js: Isolates all logic related to subtitle styling, including presets and the function that applies styles to the video player.
  • themer.js: Handles theme detection and applies appropriate styling to the Enhanced Panel based on the active Jellyfin theme.
  • ui.js: Responsible for creating, injecting, and managing all visual elements like the main settings panel, toast notifications, and various buttons.

• /jellyseerr/: This directory contains all components related to the Jellyseerr integration.

  • api.js: Handles all direct communication with the Jellyseerr proxy endpoints on the Jellyfin server.
  • jellyseerr.js: The main controller for the integration, orchestrating the other components and managing state.
  • modal.js: A dedicated component for creating and managing the advanced request modals.
  • ui.js: Manages all visual elements of the integration, like result cards, request buttons, and status icons.

• arr-links.js: Adds convenient links to Sonarr, Radarr, and Bazarr on item detail pages only for administrators.

• arr-tag-links.js: Displays synced *arr tags as clickable links on item detail pages, with advanced filtering options to show only specific tags or hide unwanted ones.

• elsewhere.js: Powers the "Jellyfin Elsewhere" feature for finding media on other streaming services.

• genretags.js: Manages the display of media genre information as tags directly on the posters.

• languagetags.js: Manages the display of audio language information as flag icons directly on the posters.

• letterboxd-links.js: Adds Letterboxd external links to movie item detail pages.

• migrate.js: Handles one-time migration of user settings from browser localStorage to server-side storage. This allows users who upgraded from earlier versions to seamlessly migrate their settings, shortcuts, elsewhere preferences, and bookmarks to the new server-based configuration system.

• pausescreen.js: Displays a custom, informative overlay when a video is paused.

• plugin.js: The main entry point. It loads the plugin configuration and translations, then dynamically injects all other component scripts.

• qualitytags.js: Manages the display of media quality information (like 4K, HDR, and Atmos) as tags directly on the posters.

• ratingtags.js: Manages the display of IMDb ratings as badges directly on the posters.

• reviews.js: Adds a section for TMDB user reviews on item detail pages.

• splashscreen.js: Manages the custom splash screen that appears when the application is loading.

--------------------------------------------------

• Official Jellyfin Web UI
• Official Jellyfin Android and iOS Apps
• Official Jellyfin Desktop Apps (Not tested, but ideally should work)

--------------------------------------------------

When reporting a bug or issue with the Jellyfin Enhanced plugin, providing logs is crucial for diagnosing the problem. There are three main types of logs that might be needed based on the issue:

1. Console Logs (Browser): These logs capture messages, errors, and warnings generated by the plugins scripts when running or trying to run in your browser.

   • When are they needed: Best for script not loading at all, issue with a feature, errors when clicking buttons, visual glitches, etc,
   • What to look for: Filter the console with "🪼Jellyfin Enhanced" and look for any errors.

2. Network Logs (Browser): These logs record all the network requests made by your browser tab. This includes requests made by Jellyfin Enhanced to the Jellyfin server. These record all the proxy calls to TMDB, and Jellyseerr also settings being updated and read from server storage.

   • When needed: Best for issues related to data not loading, features failing to communicate with the server (like Jellyseerr search/requests, saving settings, Elsewhere lookups), or slow performance potentially caused by network problems.
   • What to look for: Filter the log with "JellyfinEnhanced" and look for any errors in status codes.

3. Server Logs (Jellyfin Admin Dashboard > Logs): These logs are generated by the Jellyfin server itself and capture backend activity, including plugin operations, API requests, and potential server-side errors.

   • When needed: Best for issues related to plugin installation, server-side configuration problems (like Jellyseerr connection failures reported by the plugin settings page test button), permission errors (like failing to modify index.html), or crashes.
   • What to look for: Look for errors mentioning "JellyfinEnhanced" or "Jellyfin Enhanced" also look for errors int he log files by Jellyfin Enhanced (e.g. JellyfinEnhanced_yyyy-mm-dd.log)

Here is a list of common errors you might see in your Jellyfin server logs or your browser's developer console, and way forward.

--------------------------------------------------

Shortcuts	Settings
Pausescreen	Elsewhere

--------------------------------------------------

MIT License

--------------------------------------------------

--------------------------------------------------