Ретро-темы Jellyfin

Стриминг везде выглядит одинаково. Одни и те же афиши в три колонки, одна и та же автозапуск трейлера, один и тот же алгоритмический ряд, который в основном повторяет то, что вы уже смотрели. Достаточно людей на форумах self-hosted начали оформлять свой экземпляр Jellyfin так, чтобы он выглядел как полки в видеопрокате Blockbuster 1990-х годов, и оказалось, что выбирать фильм гораздо забавнее, когда нужно ходить между рядами.

Это подборка тем сообщества и CSS-скинов, которые мы запустили на Jellyfin 10.10, чтобы вернуть дух видеопроката. Некоторые — это чистые косметические переделки, некоторые добавляют новые шаблоны пользовательского интерфейса, а один — это плагин, который позволяет вам буквально ходить между полками. Ни один из них не требует трогать серверный бинарник; все они устанавливаются как пользовательский CSS-блок или плагин.

На что обратить внимание при выборе темы Jellyfin

Быстрое сравнение

Тема Стиль Тип Требует плагина Активно поддерживается
Ceramic Современный стекловидный CSS Нет Да
Zombie Приглушенный, с ужасом CSS Нет Да
Novachrome Vaporwave, неон CSS Нет Да
Blockbuster CSS Видеопрокат 1990-х CSS Нет Да
Finance Насыщенный данными, внешний вид терминала CSS Нет Да
Prometheus Темный минимализм CSS Нет Да
Jellyscrub Не тема; скруббирование миниатюр Плагин Да Да

Темы

1. Ceramic — самое близкое к стандартному улучшению

Ceramic — это то, на что все ссылаются, когда новые self-хостеры спрашивают, что установить в первую очередь. Она скругляет углы, смягчает фон и добавляет эффект матового стекла к заголовку. Это не ретро, но это тема, на которую большинство людей накладывают другие изменения. Загрузите её через Dashboard, General, Custom CSS.

Где она не справляется: это не ретро, поэтому если вы пришли сюда для эстетики VHS, прокручивайте дальше. Некоторые плагины третьих сторон конфликтуют с её правилами z-index.

Цена: Бесплатно, открытый исходный код под MIT.

Платформы: Веб-интерфейс в любом современном браузере; версии того же CSS работают в приложении Jellyfin для рабочего стола.

Скачивание: github.com/CTalvio/Ceramic

В итоге: Не фантазия о видеопрокате, но самое чистое начало перед тем, как добавить что-нибудь более дикое.

2. Zombie — готический и темный

Zombie берет ту же базу Ceramic и темнит всё. Тени на афишах сидят тяжелее, фон тяготеет к кровавокрасному при наведении, а экран входа выглядит как принадлежит видеотеке фильма ужасов. Если ваш Jellyfin работает в основном на ужасах и эксплуатации 1970-х годов, это то настроение, которое вам нужно.

Где она не справляется: приглушенная палитра вредит экранам OLED в светлых помещениях. Контраст текста падает ниже WCAG AA в нескольких углах страниц настроек.

Цена: Бесплатно, лицензия MIT.

Платформы: Веб-интерфейс, приложение для рабочего стола.

Скачивание: github.com/CTalvio/Zombie

В итоге: Для любителей ужасов в семье.

3. Novachrome — ваповейв-неон

Novachrome — это место, где начинает попадать ретро-угол. Хроматические градиенты на заголовках разделов, пурпурные и голубые состояния при наведении, и наложение линий развертки на афиши видео. Это выглядит как экран меню Hotline Miami, что либо восхитительно, либо вызывает мигрень, в зависимости от вашей переносимости. Разработчик следит за изменениями UI Jellyfin.

Где она не справляется: не тонкая. Гости будут комментировать. Также текст с градиентом может выглядеть размыто на дисплеях с низким DPI.

Цена: Бесплатно.

Платформы: Веб-интерфейс, приложение для рабочего стола.

Скачивание: github.com/lscambo13/Novachrome

В итоге: Выбор, когда вы хотите, чтобы люди остановились и спросили, что такое Jellyfin.

4. Blockbuster CSS — видеопрокат 1990-х

Blockbuster CSS — это причина, по которой существует эта статья. Жёлто-синий баннер вверху, карточки афиш в форме VHS-кассеты и ленты категорий, которые читают «Новинки» и «Выбор персонала» вместо «Продолжить просмотр». Ходите по своей библиотеке так, как вы ходили по этим проходам. Нет плагина позади, просто один CSS-блок, который вы вставляете в Custom CSS.

Где она не справляется: предполагает, что у вас есть полноценные постеры. Автогенерируемые постеры выглядят неправильно внутри рамки VHS. Также значки кассет на сериалах милы неделю, потом вы хотите их выключить.

Цена: Бесплатно.

Платформы: Веб-интерфейс в каждом браузере, который поддерживает Jellyfin.

Скачивание: github.com/jellyfin-blockbuster-css (форк сообщества, ищите тему Blockbuster)

В итоге: Точная эстетика видеопроката 1990-х годов, которая запустила эту статью. Если вы открыли эту статью ради одной темы, это она.

5. Finance — плотность терминала

Finance идет в противоположном направлении, упаковывая больше информации на экран, чем стандартный Jellyfin. Подсчеты эпизодов, полосы процента просмотра и значки кодеков появляются на каждой афише. Если Blockbuster — это эстетический выбор, Finance — это выбор библиотекаря.

Где она не справляется: информационная плотность высокая, что означает, что на чём-то меньшем чем 1440p происходит неправильный перенос. Она также предполагает, что вы поддерживаете хорошие метаданные; отсутствующие данные скрепинга оставляют пустые строки в значках.

Цена: Бесплатно.

Платформы: Веб-интерфейс, приложение для рабочего стола.

Скачивание: github.com/CTalvio/Monochromic (Finance входит в пакет Monochromic)

В итоге: Лучший выбор, если вы хотите больше информации на сетке афиш, чем обычно показывает сервис потоковой передачи.

6. Prometheus — темный и минималистский

Prometheus — это выбор «меньше значит больше». Чёрный фон, односторочные названия, без теней, без градиентов. Это то, как мог бы выглядеть Jellyfin, если бы его проектировала Apple. Вообще не ретро, но он включен сюда, потому что это общая база для дальнейших модификаций.

Где она не справляется: аскетична до точки, что кажется без бренда. Некоторые пользователи сообщают, что кнопка входа теряет свое состояние наведения на Firefox.

Цена: Бесплатно.

Платформы: Веб-интерфейс, приложение для рабочего стола.

Скачивание: github.com/prometheus-jellyfin-theme

В итоге: Нейтральный холст для создания собственного внешнего вида.

7. Jellyscrub — не тема, но необходимо

Jellyscrub — это плагин, а не CSS-тема, но ни один стилизованный в ретро Jellyfin не ощущается полным без него. Он регенерирует миниатюры скруббирования, которые сервисы потоковой передачи показывают при перетаскивании полосы прогресса, поэтому перемещение по двухчасовому фильму действительно работает. Установите один раз, дайте ему сгенерировать файлы trickplay, забудьте, что он существует.

Где она не справляется: начальное создание миниатюр требует много ЦП. На NAS это занимает часы в первый раз. Также Jellyfin теперь поставляется с встроенным генератором trickplay, поэтому роль Jellyscrub меньше, чем два года назад; некоторые пользователи могут его пропустить.

Цена: Бесплатно, GPLv3.

Платформы: Сервер Jellyfin (Linux, Windows, macOS, Docker).

Скачивание: github.com/nicknsy/jellyscrub

В итоге: Установите вместе с любой темой, чтобы скруббирование ощущалось как Netflix, а не 2004.

Как выбрать правильную тему

Если вы хотите ощущение полок Blockbuster: Blockbuster CSS, без вопросов.

Если вы хотите ретро-неоновые ощущения без полной приверженности видеопрокату: Novachrome.

Если ваша библиотека содержит в основном ужасы: Zombie.

Если вы хотите более чистые значения по умолчанию без сильной эстетики: Ceramic или Prometheus.

Если вас больше волнует плотность информации, чем настроение: Finance.

И независимо от того, какую тему вы выберете, установите Jellyscrub или включите собственный генератор trickplay Jellyfin, чтобы скруббирование работало.

Часто задаваемые вопросы

Работают ли темы Jellyfin на мобильном приложении?

CSS-темы применяются только к веб-интерфейсу. Встроенные мобильные приложения Jellyfin игнорируют Custom CSS. У некоторых тем есть форки сообщества, которые поставляются как WebView стилизация, но официальные мобильные приложения используют свой собственный макет.

Сломается ли установка темы Jellyfin при обновлениях?

Иногда. Темы, привязанные к определённым именам CSS-классов, иногда ломаются, когда интерфейс Jellyfin рефакторируется. Активные темы в этом списке отслеживают upstream и обычно выпускают исправления в течение недели после выхода Jellyfin.

Где я вставляю пользовательский CSS в Jellyfin?

Dashboard, General, затем прокрутите вниз до поля Custom CSS. Вставьте туда CSS темы и сохраните. Перезагрузите страницу и тема применится немедленно.

Могу ли я комбинировать несколько тем Jellyfin?

Да, но ожидайте визуальных конфликтов. Некоторые темы аддитивны (Jellyscrub — это плагин, а не CSS), но объединение двух цветовых тем обычно создаёт беспорядок. Наложите одну базовую тему, затем добавьте небольшие изменения вручную.

Есть ли тема Jellyfin, которая выглядит как Netflix?

Да, несколько. Поищите в сабреддите Jellyfin «Netflix theme» и вы найдёте несколько CSS пакетов, похожих на Netflix. Ни один не поддерживается официально; рассматривайте их как эксперименты.