https://github.com/bill-ahmed/qbit-matUI

A material WebUI for qBittorrent, written in Angular.
https://github.com/bill-ahmed/qbit-matUI

angular angular-material qbittorrent typescript

Last synced: 4 months ago
JSON representation

A material WebUI for qBittorrent, written in Angular.

• Host: GitHub
• URL: https://github.com/bill-ahmed/qbit-matUI
• Owner: bill-ahmed
• License: mit
• Created: 2020-03-08T15:16:10.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T14:30:30.000Z (almost 2 years ago)
• Last Synced: 2024-08-02T16:54:46.010Z (7 months ago)
• Topics: angular, angular-material, qbittorrent, typescript
• Language: TypeScript
• Homepage: https://qbit-material-webui-demo.herokuapp.com/
• Size: 14.3 MB
• Stars: 322
• Watchers: 6
• Forks: 27
• Open Issues: 38
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# qBit MatUI 
[![Qbit Material WebUI Build](https://github.com/bill-ahmed/qbit-matUI/actions/workflows/nodejs.yml/badge.svg?branch=master)](https://github.com/bill-ahmed/qbit-matUI/actions/workflows/nodejs.yml)



A material-themed UI for [qBittorrent](https://github.com/qbittorrent/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!

## Demo!

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

## Installation

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

### Automatic -- Docker Mods Support!

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

### Manual

1. Take a production-ready build from [releases](https://github.com/bill-ahmed/qbit-material-WebUI/releases), or [build it yourself](#build)

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!

## Development

This app relies on a couple files to work properly.

### General Config

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).

### HTTP Config

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

## Running the App

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.

### Front-end:

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)

## Build

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.