4 |
5 | A material-themed UI for [qBittorrent](https://github.com/qbittorrent/qBittorrent). This interface is more slimmed down, although still contains several features such as:
6 |
7 | * See torrent contents _before_ downloading
8 | * File system navigation (choose where to save a torrents, create sub-folders, etc.)
9 | * Bulk edit (pause, resume, delete, prioritize, and more)
10 | * Sorting by different metrics (name, size, date completed, etc.)
11 | * Manage local & qBittorrent preferences
12 | * A fully material-themed UI (Light & Dark themes)
13 | * ... and more!
14 |
15 | ## Demo!
16 | A live demo is available here: https://qbit-material-webui-demo.herokuapp.com/
17 |
18 |
19 | ## Installation
20 | This app is tested with **v4.4.5** and higher of qBittorrent, any lower version are not guaranteed to work.
21 |
22 | ### Automatic -- Docker Mods Support!
23 | Thanks to @marzzzello for adding support in LinuxServer.io's qBittorrent container: https://github.com/marzzzello/linuxserver-io-mod-qbit-matui
24 |
25 |
26 | ### Manual
27 | 1. Take a production-ready build from [releases](https://github.com/bill-ahmed/qbit-material-WebUI/releases), or [build it yourself](#build)
28 | 2. Extract the files into any folder
29 | 3. In qBittorrent, under Tools > Options > Web UI > Use alternative Web UI, set the file location as the folder you created in Step 2.
30 | 4. Done!
31 |
32 |
33 | ## Development
34 | This app relies on a couple files to work properly.
35 |
36 | ### General Config
37 | 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).
38 |
39 | ### HTTP Config
40 | If you wish to configure your endpoints and other data for dev/prod, do so in `src/assets/http_config.json`.
41 |
42 |
43 | ## Running the App
44 | In order to have the most accurate testing environment, we make use of a docker container running qBittorrent. Make
45 | sure you have both Docker and docker-compose installed.
46 |
47 | Checkout the instructions in the `dev/` folder on how to set it up.
48 |
49 |
50 | ### Front-end:
51 | 1. Run `npm run dev` for a dev server
52 | 2. Navigate to `http://localhost:8090/`
53 | 3. Username: `admin`; Password: `adminadmin`; This can be changed through the default Web UI.
54 |
55 | 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)
56 |
57 | ## Build
58 |
59 | 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.
60 |
61 | To get a build for the login page, run `ng build --project="login"`, and provide the `--prod` flag for a production build.
62 |
--------------------------------------------------------------------------------
/builds/images/home_page_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bill-ahmed/qbit-matUI/34610c40289ef8c107fad4e06c8d840c5069ae5b/builds/images/home_page_dark.png
--------------------------------------------------------------------------------
/builds/images/home_page_dark_shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bill-ahmed/qbit-matUI/34610c40289ef8c107fad4e06c8d840c5069ae5b/builds/images/home_page_dark_shadow.png
--------------------------------------------------------------------------------
/builds/images/login_page.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bill-ahmed/qbit-matUI/34610c40289ef8c107fad4e06c8d840c5069ae5b/builds/images/login_page.jpg
--------------------------------------------------------------------------------
/builds/images/torrent_contents.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bill-ahmed/qbit-matUI/34610c40289ef8c107fad4e06c8d840c5069ae5b/builds/images/torrent_contents.png
--------------------------------------------------------------------------------
/builds/images/torrent_contents_shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bill-ahmed/qbit-matUI/34610c40289ef8c107fad4e06c8d840c5069ae5b/builds/images/torrent_contents_shadow.png
--------------------------------------------------------------------------------
/dev/README.txt:
--------------------------------------------------------------------------------
1 | Running qBittorrent in a docker container during development. Allows for more complete and accurate testing, as opposed to the "mock server" originally used.
2 |
3 | The folder structure is as follows:
4 | - "config"
5 | - holds qbittorrent configuration files
6 | - "downloads"
7 | - where all the torrent downloads are saved
8 | - "www"
9 | - holds dev builds for both login and the main UI
10 |
11 |
12 | To setup the dev env:
13 | 1. Go to "dev" folder
14 | 2. Run: docker-compose up -d
15 | 3. Open up the default web ui and set desired username/password
16 | 4. Under Web UI settings, set the path to "/www"
17 | 5. Go to project root
18 | 6. Build a prod version of the login page: ng build --prod --project=login
19 | 7. Copy/paste the build files into ./dev/www/public
20 | 8. Run: npm run dev
21 | 9. Go to http://localhost:8090
22 |
23 | Note: If you make any changes to the source code, you will have to hard-reload the page each time (Ctrl + Shift + R on Windows).
24 |
--------------------------------------------------------------------------------
/dev/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "2.1"
2 | services:
3 | qbittorrent:
4 | image: linuxserver/qbittorrent:4.4.5
5 | container_name: qbit-matUI-dev-container
6 | environment:
7 | - PUID=1000
8 | - PGID=1000
9 | - TZ=America/New_York
10 | - WEBUI_PORT=8090
11 | volumes:
12 | - ./config:/config
13 | - ./downloads:/downloads
14 | - ./www:/www
15 | ports:
16 | - 6881:6881
17 | - 6881:6881/udp
18 | - 8090:8090
19 | restart: unless-stopped
20 |
--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | // Protractor configuration file, see link for more information
3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
4 |
5 | const { SpecReporter } = require('jasmine-spec-reporter');
6 |
7 | /**
8 | * @type { import("protractor").Config }
9 | */
10 | exports.config = {
11 | allScriptsTimeout: 11000,
12 | specs: [
13 | './src/**/*.e2e-spec.ts'
14 | ],
15 | capabilities: {
16 | browserName: 'chrome'
17 | },
18 | directConnect: true,
19 | baseUrl: 'http://localhost:4200/',
20 | framework: 'jasmine',
21 | jasmineNodeOpts: {
22 | showColors: true,
23 | defaultTimeoutInterval: 30000,
24 | print: function() {}
25 | },
26 | onPrepare() {
27 | require('ts-node').register({
28 | project: require('path').join(__dirname, './tsconfig.json')
29 | });
30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 | }
32 | };
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 | import { browser, logging } from 'protractor';
3 |
4 | describe('workspace-project App', () => {
5 | let page: AppPage;
6 |
7 | beforeEach(() => {
8 | page = new AppPage();
9 | });
10 |
11 | it('should display welcome message', () => {
12 | page.navigateTo();
13 | expect(page.getTitleText()).toEqual('qbit-WebUI app is running!');
14 | });
15 |
16 | afterEach(async () => {
17 | // Assert that there are no errors emitted from the browser
18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 | expect(logs).not.toContain(jasmine.objectContaining({
20 | level: logging.Level.SEVERE,
21 | } as logging.Entry));
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo(): PromiseAre you sure you want to delete the following?
8 |Also delete from disk
12 |Warning: you cannot undo this action
13 |Pick a location to move the files to. If none is chosen, the default shown will be used instead.
10 | 11 | 15 | 16 |Torrents selected: {{torrents.length}} (Show/Hide)
35 | 36 |New Limit:
8 |KiB/s
13 |Build: {{appVer}} .
7 |API: v{{apiVer}} .
8 |You are on {{qbit_mat_Ver}} .
17 |Default save path:
31 |Maximum active downloads:
56 |Maximum active uploads:
64 |Maximum active torrents:
72 |To-do...
7 |Upload limit:
8 |KiB/s (0 or -1 implies ∞)
12 |Download limit:
17 |KiB/s (0 or -1 implies ∞)
21 |Upload:
33 |KiB/s (0 or -1 implies ∞)
37 |Download:
42 |KiB/s (0 or -1 implies ∞)
46 |All-time upload:
11 |{{ units_helper.GetFileSizeString(inputData.alltime_ul) }}
12 |All-time download:
16 |{{ units_helper.GetFileSizeString(inputData.alltime_dl) }}
17 |All-time share ratio:
21 |{{ inputData.global_ratio }}
22 |Session waste:
26 |{{ units_helper.GetFileSizeString(inputData.total_wasted_session) }}
27 |Connected peers:
31 |{{ inputData.total_peer_connections }}
32 |Read cache hits:
40 |{{ inputData.read_cache_hits }}%
41 |Total buffer size:
45 |{{ units_helper.GetFileSizeString(inputData.total_buffers_size) }}
46 |Write cache overload:
54 |{{ inputData.write_cache_overload }}%
55 |Read cache overload:
59 |{{ inputData.read_cache_overload }}%
60 |Queued I/O jobs:
64 |{{ inputData.queued_io_jobs }}
65 |Average time in queue:
69 |{{ inputData.average_time_queue }}ms
70 |Total queued size:
74 |{{ units_helper.GetFileSizeString(inputData.total_queued_size) }}
75 |