Qbittorrent: Обсуждение разработки альтернативного веб-интерфейса

Отлично @FranciscoPombal . Чтобы упростить обращение к участникам этой темы, это оригинальные обсуждения разработчиков на Alt WebUI https://github.com/qbittorrent/qBittorrent/issues/7217 и https://github.com/qbittorrent/qBittorrent/pull/7610.

Я счастлив внести свой вклад в новую реализацию WebUI.

Собственно, в последнее время я просматривал https://github.com/qbittorrent/qBittorrent/wiki/Web-API-Documentation , чтобы спланировать, как реализовать новый WebUI.

Вот каковы мои цели на данный момент:

1. WebUI как SPA (одностраничное приложение)
2. Адаптивный дизайн (в настоящее время я пытаюсь открыть пользовательский интерфейс на своем телефоне и ищу торренты на вкладке поиска для загрузки)
3. Современный, но легкий дизайн
4. поддержка i18n
5. (Необязательно) Поддержка 0Auth2.0 - для этого потребуется некоторая внутренняя работа.

Дай мне знать, что ты думаешь.

Я надеюсь, что отзывчивый дизайн, если он будет представлен, не добавит ненужных зависимостей и не замедлит веб-интерфейс, как это происходит с Bootstrap.

Я хотел бы видеть _все_ параметры и настройки, представленные в webui, чтобы можно было полностью контролировать и настраивать headless / qbittorrent-nox в webui. Например, чтобы заблокировать qbittorrent-nox для tun0, мне пришлось установить версию qbittorent для рабочего стола Linux и графического интерфейса пользователя на виртуальной машине, заблокировать ее на tun0, затем проанализировать настройки блокировки и вставить их в мою конфигурацию qbittorrent-nox. Вряд ли это удобно.

Вообще говоря, целью должно быть полное удобство использования и настраиваемость в webui. Многие приложения в наши дни даже не беспокоятся о приложении, они просто выбирают бэкэнд с интерфейсом webui, поскольку нет переноса и работает на большинстве, если не на всех устройствах, которые люди уже используют (ПК, ноутбук, планшет, телефон, и т.д).

Я надеюсь, что отзывчивый дизайн, если он будет представлен, не добавит ненужных зависимостей и не замедлит веб-интерфейс, как это происходит с Bootstrap.

Да, конечно! Хуже дерьмового ui только медленный ui. Я бы предпочел быструю чушь медленному.

Я создал новый веб-интерфейс с помощью Vue + TypeScript. У него отзывчивый дизайн, и работает большинство основных функций, за исключением пользовательского интерфейса настроек.
Кто отваживается, как воин, может захотеть попробовать:
https://github.com/CzBiX/qb-web

Я упомянул кое-что недавно (https://github.com/qbittorrent/qBittorrent/issues/7217#issuecomment-328541796 :-), что может улучшить возможность более безопасного тестирования altWebUI (то есть возможность всегда иметь контроль программы, если нет сбоев), ядро ​​WebUI всегда работает (то есть по адресу http: // qBwebUI: port /), а altWebUI в фиксированном поддереве (например, http: // qBwebUI: port / altWebUI /), если включено через настройки, а не в текущей ситуации, когда одно (ядро) или другое (альт) работает исключительно.

Что вы думаете, ребята?

Я хотел бы видеть _все_ параметры и настройки, представленные в webui, чтобы можно было полностью контролировать и настраивать headless / qbittorrent-nox в webui. Например, чтобы заблокировать qbittorrent-nox для tun0, мне пришлось установить версию qbittorent для рабочего стола Linux и графического интерфейса пользователя на виртуальной машине, заблокировать ее на tun0, затем проанализировать настройки блокировки и вставить их в мою конфигурацию qbittorrent-nox. Вряд ли это удобно.

В версии 4.2.4 можно будет «привязать» qbittorrent к конкретному интерфейсу VPN, и утечек не будет. Это связано с недавними исправлениями в коде настройки сетевого интерфейса, а также исправлениями на стороне libtorrent (1.2.6).

Я упомянул кое-что недавно ( # 7217 (комментарий) :-), что может улучшить возможность более безопасного тестирования altWebUI (то есть иметь возможность всегда контролировать программу, если нет сбоев), всегда поддерживает ядро ​​WebUI работает (например, по адресу http: // qBwebUI: port /), а altWebUI в фиксированном поддереве (например, http: // qBwebUI: port / altWebUI /), если он включен в настройках, вместо текущей ситуации, которая одна (ядро) или другой (alt) работает исключительно.

Что вы думаете, ребята?

Я полностью поддерживаю такой подход.

Я кратко рассмотрел подход @CzBiX, и мне он кажется прекрасным. Я полагаю, что материальный дизайн - это то, с чем мы все знакомы. Реализация тоже кажется отличной.

@CzBiX Я

Я также думаю, если мы запустим прототип дизайна, например, в Figma. Я знаю, что это немного усложнит процесс, но оно того стоит.

@WolfganP Есть обходной путь для реализации вашей идеи.
И я предлагаю использовать альтернативный веб- интерфейс в качестве основного пользовательского интерфейса (в qb:port/ ) и использовать стандартный / официальный веб- интерфейс в качестве альтернативного пользовательского интерфейса (в qb:port/alt/ , когда альтернативный веб-интерфейс включен.

@bbogdanov Я плохо
Единственное, о чем я прошу, это то, что элементы управления пользовательского интерфейса должны быть уплотнены, а не слишком разработаны, чтобы занимать много места.

И я предлагаю использовать альтернативный веб- интерфейс в качестве основного пользовательского интерфейса (в qb:port/ ) и использовать стандартный / официальный веб- интерфейс в качестве альтернативного пользовательского интерфейса (в qb:port/alt/ , когда альтернативный веб-интерфейс включен.

Возможность использовать пользовательский интерфейс по умолчанию с префиксом /alt/ меня немного сбивает с толку.
Я думаю, было бы лучше обслуживать _все_ доступные пользовательские интерфейсы (включая один по умолчанию) с соответствующими префиксами и просто иметь возможность перенаправить путь по умолчанию ( qb:port/ или что-то еще) к одному из этих пользовательских интерфейсов.

И я предлагаю использовать альтернативный веб- интерфейс в качестве основного пользовательского интерфейса (в qb:port/ ) и использовать стандартный / официальный веб- интерфейс в качестве альтернативного пользовательского интерфейса (в qb:port/alt/ , когда альтернативный веб-интерфейс включен.

Кажется очень неудобным менять способ доступа к webif по умолчанию на основе флага. Имеет смысл, что он должен быть последовательным. По умолчанию webif _ всегда_ доступен по адресу qb:port/ а альтернативный webif _ всегда_ по адресу qb:port/alt/ .

@bbogdanov Я плохо
Единственное, о чем я прошу, это то, что элементы управления пользовательского интерфейса должны быть уплотнены, а не слишком разработаны, чтобы занимать много места.

Я большой поклонник того, чтобы максимально использовать имеющееся у вас пространство, если оно не слишком загромождено. Я НЕНАВИЖУ, когда вам нужно нырять в меню или листать страницы, чтобы сделать что-то, что можно было бы легко найти на главной странице. Я бы посоветовал по возможности избегать перехода (другие страницы, меню, всплывающие окна и т. Д.).

Я думаю, что было бы лучше обслуживать _все_ доступные пользовательские интерфейсы (включая один по умолчанию) с соответствующими префиксами и просто иметь возможность перенаправить путь по умолчанию ( qb:port/ или что-то еще) к одному из этих пользовательских интерфейсов.

Я не думаю, что значение по умолчанию должно когда-либо перенаправляться, переопределяться и т. Д. Я думаю, что лучше всегда иметь webif по умолчанию, доступный по согласованному URL-адресу, чтобы вы всегда могли перейти к нему, не вмешиваясь в настройки.

Я не думаю, что значение по умолчанию должно когда-либо перенаправляться, переопределяться и т. Д. Я думаю, что лучше всегда иметь webif по умолчанию, доступный по согласованному URL-адресу, чтобы вы всегда могли перейти к нему, не вмешиваясь в настройки.

Само собой разумеется, что пользовательский интерфейс по умолчанию всегда должен быть доступен по некоторому постоянному маршруту в качестве запасного варианта. Вопрос в том, должны ли мы иметь возможность выбирать, какой пользовательский интерфейс обслуживать без префикса или нет.

Как насчет webif по умолчанию всегда на qb:port/ и любых альтернативных webif на qb:port/name/ . Если у меня установлено 3 webif (CzBiX, ngseer, bacon), то я могу легко выбрать, какой из них с помощью qb:port/CzBiX/ , qb:port/ngseer/ или qb:port/bacon/ . Таким образом, у вас может быть неограниченное количество доступных альтернатив и простой способ доступа к ним.

У вас может быть каталог в пути конфигурации, где они хранятся. Если мой путь конфигурации - /qb/config/ , то сохраните их в /qb/config/webui/CzBiX , /qb/config/webui/ngseer , /qb/config/webui/bacon и т. Д.

Кроме того, webui может добавить функциональность, скажем, к логотипу qb, где, если вы щелкнете по нему, вы получите список всех установленных webui + default, которые вы можете выбрать, чтобы упростить переключение между разными.

Привет, ребята,

Прошло больше месяца с момента последнего сообщения по этой теме. Интересно, было ли принято окончательное решение?

@ бекон-чизбургер

К сожалению, на самом деле никто не работает над этим, так как есть более приоритетные вопросы, и все время растягивается. Кроме того, нельзя ли изменить WebUI на лету, просто изменив настройку? Или требуется перезагрузка?

Время от времени работаю над дизайном. Я использую для этого Figma, поэтому, если кто-то захочет вмешаться, я могу пригласить его в рабочее пространство.

Это то, что у меня есть на данный момент. Я воссоздаю текущий макет для настольной версии, а затем подумаю, нужны ли изменения в макете.

Мобильное представление - это проблема, и я думаю, что большая часть информации, которая существует в представлении рабочего стола, должна быть скрыта там, но мы увидим, что я все еще экспериментирую с этим.

@bbogdanov хорошая работа над материальным дизайном :-)
Да, мобильные представления сложны из-за всей информации на экране, которую предлагает вид рабочего стола. Самыми удобными макетами, которые я видел, был вид основного списка (с отображением всего нескольких значений для быстрой проверки общего статуса), а затем переход к стилю карточек для каждого из перечисленных торрентов со всей доступной информацией по элементу.

2. Адаптивный дизайн (в настоящее время я пытаюсь открыть пользовательский интерфейс на своем телефоне и ищу торренты на вкладке поиска для загрузки)

Я думаю, что это ключевой момент, так как загрузка примерно 100 торрентов занимает много времени.

У меня есть некоторые подвижки по взглядам. Некоторые из них - это одна и та же страница, но с другим дизайном.

Я думал, что настройки могут быть на другой странице, но, честно говоря, я думаю, что модальное окно - лучшее решение для этого приложения. Я думаю, что буду использовать тот же подход, что и для торрент-таблицы. Сверните панели для каждой группы настроек.

Дай мне знать, что ты думаешь.

Мне это нравится. По этой причине модальные окна хороши. Думаю, еще один хороший пример мобильного просмотра - nzb360 . Загружается очень быстро. Он использует боковые панели вместо модальных, но я думаю, что модальный подход не менее хорош.

Мне это тоже нравится, но для удобства использования я предлагаю немного дифференцировать фон в альтернативных строках при отображении списков (это помогает более точно нацеливать клики / касания на отображаемых элементах).

@bbogdanov мне нравится твой дизайн! И есть комментарий:
Слишком много пустого места, ИМО. Верхняя панель и ряды торрентов слишком высокие. То же самое и с мобильным просмотром информации о торрентах. Вы можете разместить гораздо больше информации, если уменьшите пустое пространство между информационными блоками.

@bbogdanov Мне нравятся твои последние скриншоты. Чистота, лаконичность и скорость - вот что я ценю больше всего, и похоже, что это то, что вы создали. Я с нетерпением жду возможности попробовать и ценю ту работу, которую вы (и другие) проделали в этой области в последнее время!

Я думаю, что этих рекомендаций на данный момент достаточно, и я могу начать писать код.

@pozemka Постараюсь уменьшить высоту при разработке.

@CzBiX Вы все еще на борту, увидев прототип дизайна?

@bbogdanov Выглядит неплохо. Однако я думаю, что некоторые элементы слишком велики, тогда как они могут быть немного меньше для большей экономии места. Например, высота строки в главном списке передачи. Я не говорю, что было бы лучше сделать _ все_ плотнее, но некоторые вещи _ могли бы быть плотнее IMO, не делая общий дизайн слишком тесным.

Я согласен. Какой-то компромисс между комфортом и компактностью. Что-то вроде GMail - не уверен, что этому DLS мы хотим следовать, но хотя бы пример.

Мои мысли такие же, как и выше, слишком много места для меня.
@bbogdanov Извините, я в последнее время занят, возможно, у меня будет время внести свой вклад только через месяц.

@CzBiX Не беспокойтесь. Я начну, и ты сможешь прыгнуть, когда у тебя будет время.

@FranciscoPombal Ребята, у вас есть какая-то чат-платформа, которую вы используете для общения? Я думаю, что проблема может стать огромной, если мы продолжим общаться здесь.

@bbogdanov Я использовал #qbittorrent в chat.freenode.net:6697 . Не уверен, есть ли там Gitter, Discourse или что-то еще.

@CzBiX Планируете ли вы продолжить работу над своим веб-интерфейсом? Я использую его в темном режиме и до сих пор люблю его! Хотите знать, собираетесь ли вы добавить настройки и / или RSS ??

@CzBiX Планируете ли вы продолжить работу над своим веб-интерфейсом? Я использую его в темном режиме и до сих пор люблю его! Хотите знать, собираетесь ли вы добавить настройки и / или RSS ??

План состоит в том, чтобы использовать его проект и построить все, чем я поделился, в качестве дизайна поверх его работ.
Имея это в виду, я буду работать над настройками и поиском, а затем мы сможем настроить главную страницу в соответствии с рекомендациями по дизайну.

Надеюсь, это ответ на ваш вопрос.

@bbogdanov Спасибо за обновление. Я был обеспокоен тем, что от CzBiX webui отказались. Что касается настроек, я прошу вас также включить все расширенные настройки. Это один из огромных недостатков, который был у нас, пользователей, не использующих графический интерфейс, - в веб-интерфейсе отсутствовали расширенные настройки, которые были доступны только через графический интерфейс. Пользователям не нужно устанавливать версию графического интерфейса (и среду рабочего стола для ее запуска), чтобы правильно ее настроить.

@bbogdanov Я бы хотел помочь с мобильным дизайном, пожалуйста - у вас есть репо, над которым вы работаете?

@bbogdanov Я бы хотел помочь с мобильным дизайном, пожалуйста - у вас есть репо, над которым вы работаете?

Я использую Figma для дизайна. Я могу добавить вас в проект, но для этого мне понадобится электронное письмо.

С точки зрения кода я не начинал разработку новых дизайнов. Сейчас я очень занят и думаю, что смогу начать кодировать для этого проекта через две недели.

@bbogdanov Я бы хотел помочь с мобильным дизайном, пожалуйста - у вас есть репо, над которым вы работаете?

Я использую Figma для дизайна. Я могу добавить вас в проект, но для этого мне понадобится электронное письмо.

С точки зрения кода я не начинал разработку новых дизайнов. Сейчас я очень занят и думаю, что смогу начать кодировать для этого проекта через две недели.

Потрясающе -

@bbogdanov UI выглядит очень хорошо. Просто интересно, у вас тоже есть мысли о поддержке RSS? Кстати, продолжайте делать отличную работу, если вы сможете сделать это реальным, это будет лучший webui для qbit.

@FranciscoPombal Вы можете поделиться тем, что произошло с документацией по веб-API? Вроде удалено.

@FranciscoPombal Вы можете поделиться тем, что произошло с документацией по веб-API? Вроде удалено.

https://github.com/qbittorrent/qBittorrent/wiki/WebUI-API- (qBittorrent-4.1)
все-еще существует...