A material-themed UI for qBittorrent. This interface is more slimmed down, although still contains several features such as:

• See torrent contents before downloading
• File system navigation (choose where to save a torrents, create sub-folders, etc.)
• Bulk edit (pause, resume, delete, prioritize, and more)
• Sorting by different metrics (name, size, date completed, etc.)
• Manage local & qBittorrent preferences
• A fully material-themed UI (Light & Dark themes)
• ... and more!

A live demo is available here: https://qbit-material-webui-demo.herokuapp.com/

This app is tested with v4.4.5 and higher of qBittorrent, any lower version are not guaranteed to work.

Thanks to @marzzzello for adding support in LinuxServer.io's qBittorrent container: https://github.com/marzzzello/linuxserver-io-mod-qbit-matui

1. Take a production-ready build from releases, or build it yourself
2. Extract the files into any folder
3. In qBittorrent, under Tools > Options > Web UI > Use alternative Web UI, set the file location as the folder you created in Step 2.
4. Done!

This app relies on a couple files to work properly.

Under src/assets/ there are two files: config.json and config.prod.json. This will store general configuration, such as the delimeter used when parsing file paths (Unix vs. Windows).

If you wish to configure your endpoints and other data for dev/prod, do so in src/assets/http_config.json.

In order to have the most accurate testing environment, we make use of a docker container running qBittorrent. Make sure you have both Docker and docker-compose installed.

Checkout the instructions in the dev/ folder on how to set it up.

1. Run npm run dev for a dev server
2. Navigate to http://localhost:8090/
3. Username: admin; Password: adminadmin; This can be changed through the default Web UI.

The app will re-compile everytime you save changes. To see the changes, you must hard-reload the web page (CTRL + SHIFT + R on Windows)

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

To get a build for the login page, run ng build --project="login", and provide the --prod flag for a production build.