bill-ahmed / qbit-matui

A material WebUI for qBittorrent, written in Angular.

qBit MatUI

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!

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, 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!

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.

qbit-matui's Issues

Feature Requests

Great UI, I am loving it so far, but I would like to see these features implemented:

• Ability to sort by progress
• Ability to sort by download/upload speed
• Ability to start a download with a magnet link as opposed to only having a torrent file upload option

I also found the following issues, mostly just me nitpicking, but nonetheless:

• Under the files tree, clicking the arrow doesn't expand the tree, you have to actually click on the element to expand the tree
  

• Choose torrent file picker doesn't have any styling
  

Thanks!

More Torrent Information

See more detailed information such as number of files in a torrent, progress for each, size, etc.

[FEATURE] Set default sort order in settings

Is your feature request related to a problem? Please describe.
Unable to set default sort order. Currently all torrents are sorted by Completed On date, descending.

Describe the solution you'd like
A section in settings modal to configure the default sorting method, as well as ascending/descending

Additional context
N/A

Creating folders in file explorer allows invalid characters

Need a simple validation process before a file/folder is created to weed out invalid characters. Examples include the file path delimiter and other OS-specific special characters.

[BUG] Snackbar text color too dim

Describe the bug
Text color for snackbar notifications is too dim

To Reproduce
Steps to reproduce the behavior:

1. Trigger snackbar notification by delete/upload

Expected behavior
Message is clearly visible and white.

Actual behavior
Message appears to be darker than white.

Screenshots
N/A

Desktop (please complete the following information):

• Browser: Chrome
• Build: Windows
• Version: 1.7.0

Additional info
N/A

[BUG] Can't see Avatar drop-down in mobile view

Describe the bug
When in mobile view, the avatar that lets you change the theme, settings, and logout is hidden.

To Reproduce
Steps to reproduce the behavior:

1. Go to the web UI in a mobile screen
2. scroll the the very right in the header (beside the search bar)

Expected behavior
An Avatar icon is visible, along with drop-down menu to manage settings, themes & logout

Actual behavior
Only the logout button is visible

Screenshots

Desktop (please complete the following information):

• Browser: Chrome
• Version: qbit-matUI_Other_OS_1.4.1

Additional info
N/A

Internationalization

Is your feature request related to a problem? Please describe.
All content is currently in English.

Describe the solution you'd like
An option to change language to a number of popular languages other than English.

Additional context
This mechanism would be in the settings modal.

[FEATURE] Login Page

Is your feature request related to a problem? Please describe.
The default login page doesn't follow the material UI theme compared to the rest of the application

Describe the solution you'd like
A simple & clean material-themed login page.

Additional context
N/A

[BUG] Default number of rows not showing up as option in pagination

Describe the bug
When setting a custom default # of rows in the pagination settings, the option does not appear in the pagination drop-down

To Reproduce
Steps to reproduce the behavior:

1. Open settings modal
2. Under Web UI > Torrents, enable pagination and set "Default number of rows per page" to any non-standard number (eg. 15, 44, etc.)
3. In the bottom pagination, click the drop-down arrow for "Items per page"
4. Change it to any other number
5. Click the drop-down again

Expected behavior
The number set in Step. 2 appears in the drop-down

Actual behavior
Only standard defaults are shown (e.g. 10, 25, 50, etc.) after changing the number of rows per page once

Screenshots

Desktop (please complete the following information):

• Browser: Chrome
• Build: Windows
• Version: 1.7.0

Additional info
N/A

[BUG] Torrent table in mobile display cuts off header

Describe the bug
When in mobile view of the torrent table, the header background cuts off when scrolling to the right

To Reproduce
Steps to reproduce the behavior:

1. Open the UI on a mobile screen
2. On the torrent table, scroll down and to the right

Expected behavior
The header is consistent and has proper background

Actual behavior
Background of the header disappears after a point, and the text begins to overlap

Screenshots

Desktop (please complete the following information):

• Browser: Chrome
• Version: qbit-matUI_Other_OS_1.4.1

Additional info
N/A

ETA Not Dispalying Correctly

For torrents that are downloading, ETA keeps showing up as infinity.

Sorting by "Completed On"

A torrent that is downloading can have "Completed On" date of Unix epoch (01/01/1970, 00:00:00). Torrents like this should be shown at the top, b/c they will be the latest to finish (when sorting by decreasing Completed On).

[BUG] Selecting torrent after upload can be slow

Describe the bug
After uploading a torrent and selecting it for bulk actions, the application seems to slow down quite a bit.

To Reproduce
Steps to reproduce the behavior:

1. Upload a new torrent
2. Select it via the check-box on the left

Expected behavior
The torrent is immediately marked as selected.

Actual behavior
It can take a second or two for the change to appear

Screenshots
N/A

Desktop (please complete the following information):

• Browser: Google Chrome
• Build: Windows
• Version: 1.5.2

Additional info
This issue appears to only exist with new torrents. It is resolved by reloading the page, although that's not an ideal solution.

[FEATURE] Replace default Angular favicon

Is your feature request related to a problem? Please describe.
The Angular icon shown at the left of the tab should be replaced with something else.

Describe the solution you'd like
Replace with original qbittorrent favicon

Additional context
Icon shown on the left here:

[FEATURE] Option to switch to old web ui

Is your feature request related to a problem? Please describe.
Unable to swtich to old Web UI

Describe the solution you'd like
An option inside settings modal to allow switching to the old UI

Additional context
N/A

No styling for "Choose Files" button when uploading torrents

The "choose files" button inside upload torrents modal doesn't have any material styling.

File system tree explorer won't expand a folder when clicking on the right-chevron icon

When viewing more torrent information, inside the "Files" tab, the view more icon doesn't expand the folder. It should also capture all click events and prevent propogation.

[FEATURE] Reset all settings

Is your feature request related to a problem? Please describe.
Ability in settings modal to reset all Web UI settings to their defaults

Describe the solution you'd like
A button in Web UI settings that allows user to reset to default upon click.

Additional context
N/A

Download torrents via magnet link

Allow option to download torrents via a magnet link instead of uploading a file.

Not having any torrents shows infinite loading spinner

Describe the bug
When there are no torrents opened, the loading spinner keeps on spinning. No table or other data is rendered until the user has at least one torrent opened up inside qBittorrent.

To Reproduce
Steps to reproduce the behavior:

1. Remove all torrents from qBittorrent
2. Go to the Web UI

Expected behavior
User sees a message telling them that no torrents are opened.

Actual behavior
The loading spinner is continuously running, which gives the incorrect impression that something is loading.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Browser: Chrome
• Build: Other OS
• Version: 1.7.3

Additional info
N/A

Auto-detect file system delimiter

In some cases (such as when using the tree-explorer in more torrent info) the data will come in with Unix-style delimiters instead of Windows. Need a special case to account for these types of changes anywhere else.

[FEATURE] Snackbar notifications

Would like to see some snackbar notifications for important actions such as:

• successfully uploading torrent(s)
• deleting torrent(s)
• moving torrent(s)

Theming:
The snackbars would ideally be in different themed colours to indicate success/error. In the case of deleting torrent(s), the successful snackbar message should have a "warn" yellow theme.

Location:
All notifications should appear in the bottom-right of the page, so as not to distract/obstruct any of the main information.

Actionability:
All snackbars should be dismissible by the user, or after a default duration of 3 seconds.

Don't use TreeNode directly

The TreeNode object is frequently used to represent a file/folder. Use inheritance instead to create nodes that represent a file/folder.

Will also need an interface that TreeNode implements.

[BUG] Pagination can show duplicate values

Describe the bug
Setting custom # of rows per page that already exists shows duplicate.

To Reproduce
Steps to reproduce the behavior:

1. Go to Settings > Web UI > Torrents
2. Enable pagination
3. Set default rows per page to something that already exists (e.g. 10, 25, etc.)
4. Click save
5. In pagination bar, click the default rows per page so that drop-down menu appears
6. Choose any different option
7. Open the drop-down again

Expected behavior
All values in drop-down are unique and available

Actual behavior
Drop-down menu will show duplicates if user selected a default value (Step 3)

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Browser: [e.g. Google Chrome, Safari]
• Build: [Which OS is the web UI being served from? e.g. "Windows", "Ubuntu 18.04"]
• Version: [Which build of this UI? e.g. '1.2.0', '1.4.1']

Additional info
The number 10 appears twice:

Opening file explorer to default folder not working

If a value is inputted to the Download Location filed in Upload Torrent modal, the file explorer won't display correctly.

The folder that's opened won't show any children, despite having them. Also, the "Save Location" field in file explorer should show the current save location at all times, instead of "{ Unchanged }"

Autocomplete

Autocomplete functionality when searching for a torrent

Move Torrents

Allow setting new location of a downloaded/downloading torrent.

• Same file explorer as when adding a torrent
• Allow for moving in bulk

[BUG] Pagination not working when enabled in settings

Describe the bug
Pagination broken again.

To Reproduce
Steps to reproduce the behavior:

1. Enable pagination in settings

Expected behavior
Torrents are paginated

Actual behavior
Pagination doesn't work, and all torrents are shown at all times.

Screenshots
N/A

Desktop (please complete the following information):

• Browser: Chrome
• Build: Windows
• Version: 1.6.0

Additional info
N/A

[FEATURE] Organize Web UI settings

Is your feature request related to a problem? Please describe.
The Web UI settings in Settings modal is starting to get crowded, should group them into more logical pieces

Describe the solution you'd like
Group the various Web UI related settings into different tabs

Additional context
N/A

Clicking auto-complete result doesn't filter the torrents

When using the search bar, after clicking on a auto-complete option, the search is not triggered. The user has to press another key on the keyboard for the correct results to show up.

Add log out button

Hi,

I really like this webui. Would it be possible to add a logout button?

Thanks

Additional sorting metrics

Would like to also sort the torrent table by the following metrics:

• progress
• download/upload speed

Handle removed torrents diff

When torrents are removed, handle the changes instead of requesting maindata again (with rid = 0) & nuking the entire table.

We are given a hash in the format:

{
   rid: 5,
   torrents: [...]
    ...
    torrents_removed: [list of torrent hashes]
}

The torrents with hashes in torrents_removed should be handled within TorrentDataStoreService.

File Explorer - Create new folders

Create new folders & sub-folders inside file explorer view

[BUG] Download progress is cut-off when the progress is low

Describe the bug
When downloading a torrent that has very low progress, the percentage gets cut off and becomes difficult to read.

To Reproduce
Steps to reproduce the behavior:

1. Upload a new torrent
2. Pause the torrent when its percentage is < 20%

Expected behavior
The percentage is easily readable and visible.

Actual behavior
The percentage starts cutting off, especially when the progress is low

Screenshots

Desktop (please complete the following information):

• Browser: Google Chrome
• Build: Windows
• Version: 1.4.2

Additional info
N/A

[BUG] Deleted torrents still selected

Describe the bug
Torrents that have just been deleting (via bulk edit tool) still show up as selected.

To Reproduce
Steps to reproduce the behavior:

1. Select 1 or more torrents
2. Delete them

Expected behavior
Torrents are removed, and they are no longer shown as selected

Actual behavior
App still shows deleted torrents as being selected

Screenshots
N/A

Desktop (please complete the following information):

• Chrome
• Build: Windows
• Version: 1.6.0

Additional info
N/A

Auto-scroll to newly created folder

Is your feature request related to a problem? Please describe.
After creating a new folder in file explorer, user has to find it in the list of folders

Describe the solution you'd like
The file explorer window should auto-scroll to the newly created folder.

Additional context
N/A

[FEATURE] Make search bar less intrusive

Is your feature request related to a problem? Please describe.
The search bar seems to be taking up too much space at the moment.

Describe the solution you'd like
Reduce the size it takes up, and maybe move it into the header

Additional context
N/A

Search functionality inside file explorer modal

Is your feature request related to a problem? Please describe.
When there are a lot of folders inside the file explorer modal, it can be hard to find the right folder (have to scroll a lot)

Describe the solution you'd like
A search box inside the file explorer modal that searches inside the current directory

Additional context
Should include auto-complete

[FEATURE] Toggle snackbar notifications in settings

Is your feature request related to a problem? Please describe.
Currently there's no way to disable snackbar notifications

Describe the solution you'd like
A toggle in Web UI settings that lets you disable notifications.

Additional context
N/A

Open file explorer to inputted value if possible

When opening the file explorer during torrent upload, the initial view should show the folder that was passed in, if possible.

For example, if the save location reads "C:/Downloads/Folder_1/", then when clicking "Choose Save Location" the folder we see open should be "C/Downloads/Folder_1/". If such a folder doesn't exist, it should show the root folder instead.

[Maintenance] Create script to automate production builds

Current process of creating & organizing production builds is very manual...need a way to automate this.

[Investigate] mat-table appears to be getting slower for large number of torrents

Need to look into an alternative for the mat-table used in main torrent table. It doesn't seem to keep up with a large number of torrents.

Bulk Edit Overhaul

Move bulk edit actions into a toolbar instead of the current modal system. This would reduce friction for bulk-editing and managing torrents.

[FEATURE] Settings Page to modify local and global preferences

Is your feature request related to a problem? Please describe.
There is currently no means of modifying qBittorrent settings (setting global dlownload/upload limits, default save path, etc.). This makes modifying common settings tedious because the user has to open up the application to do so.

Describe the solution you'd like
A way to modify the qBittorrent and other local settings via a Settings Page. This page should be a modal with side-navigation & buttons/checkboxes/fields to modify the current settings.

The settings page will be accessed via a drop-down menu from a user avatar. This drop-down menu can also house other options such as toggling light/dark theme & logging out.

Additional context

[FEATURE] Explore torrent contents prior to download

Is your feature request related to a problem? Please describe.
When uploading a torrent file, there's no way to tell what files will be downloaded (how many there are, their sizes, etc.)

Describe the solution you'd like
Inside the upload file modal, have an option to display which torrents will be downloaded.

Additional context
The view can be similar to the torrent tree view used in "More Info" modal. May need to consider cases for uploading a single file vs. multiple files.

Auto-adjust refresh interval

Detect slow network connection to toggle how frequently network requests for new data are made

• can also allow for manual control

Themes -- Add functionality to introduce custom themes

Dark mode!

Drag and drop torrent files

Is your feature request related to a problem? Please describe.
Finding torrents via file upload might be tedious.

Describe the solution you'd like
Drag and drop option inside Upload Torrents modal that lets you drop/drop multiple torrent files directly.

Additional context
N/A

Queuing

Adjust priority/queue of torrents that are downloading