qbit-matUI - GitLite

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #golang #android #machine-learning #rust #deep-learning #docker #awesome-list #vue #pytorch #ios #openai

qbit-matUI

(★ 349)

A material WebUI for qBittorrent, written in Angular.

File Explorer

Download Latest Version (.zip)

- - bug-report.md
  - feature-request.md
- - nodejs.yml
- - home_page_dark.png
  - home_page_dark_shadow.png
  - login_page.jpg
  - torrent_contents.png
  - torrent_contents_shadow.png
- docker-compose.yml
- README.txt
- - app.e2e-spec.ts
  - app.po.ts
- protractor.conf.js
- tsconfig.json
- .gitignore
- config.json
- index.js
- package-lock.json
- package.json
- sample_data.js
- utils.js
- - .browserslistrc
  - karma.conf.js
  - tsconfig.app.json
  - tsconfig.spec.json
  - tslint.json
- - config.unix.json
  - config.windows.json
- - build_prod.sh
- - app.component.css
  - app.component.html
  - app.component.spec.ts
  - app.component.ts
  - app.config.json
  - app.module.ts
  - drag-and-drop-files.directive.ts
- - config.json
  - config.prod.json
  - favicon.ico
  - http_config.json
- - environment.prod.ts
  - environment.ts
- - fonts.scss
- - Environment.ts
  - Helpers.ts
  - Interfaces.ts
- constants.ts
- index.html
- main.ts
- polyfills.ts
- styles.scss
- test.ts
- theme.scss
- variables.scss
.browserslistrc
.editorconfig
.gitignore
angular.json
CONTRIBUTING.md
json-typings.d.ts
karma.conf.js
LICENSE
package-lock.json
package.json
README.md
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# qBit MatUI <br/>[![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)

<img src="builds/images/home_page_dark.png" alt="Home Page"/>

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.