flood-for-transmission Svelte Themes

Flood For Transmission

A Flood (https://github.com/Flood-UI/flood) clone for Transmission

#transmission #flood #svelte #pwa
Download

Flood for Transmission

Flood for Transmission is an alternative Web UI for Transmission. It's a frontend web app that doesn't require any extra service running to communicate with Transmission. Even though it's a work-in-progress, it's definitely good enough to use.

Flood for Transmission is a clone of Flood, which is originally build for rTorrent. All design and feature credit goes out to the creators of that. The code however is not a copy at all, it's been build from the ground up to make it work with Transmission.

Feedback

If you have a specific issue or bug, please file a Github issue. Also feel free to bring up feature requests that way.

Other P2P clients

This project does not aim to support anything else than Transmission. If you're looking for other P2P client support check out Flood by jesec.

How this project is different from jesec's version:

  1. This project does not require any running process, which makes it super lightweight.
  2. It's dedicated to support Transmission as good as possible.
  3. It uses the recommended way from Transmission to load the UI, by setting an environment variable.

Screenshots

Curious what it looks like? Do check out the screenshots folder but here is also a small sneak peak:

Getting started

Pre-Requisites

  1. Transmission needs to be installed and running. When on Linux the transmission-daemon is enough to get this to work.
    • As of now it's not possible to run Flood for Transmission on a separate machine, and frankly there would be little need for it since this project doesn't require it's own process to be running.
  2. Usage of an evergreen browser such as Chrome, Firefox or Edge. This project does not aim to support older browsers.

Installation

  1. Download the latest release with: curl -OL https://github.com/johman10/flood-for-transmission/releases/download/latest/flood-for-transmission.zip
  2. Unpack with: unzip flood-for-transmission.zip. This should end up with a folder called flood-for-transmission in the current working directory.
  3. Remove the now redundant zip file: rm flood-for-transmission.zip
  4. Now tell Transmission to use Flood for Transmission, on Linux and Windows this can by done by using an environment variable, on Mac you will have to copy the extracted folder to the Tranmission app.
    • On Linux you can set the environment for systemd by running: systemctl edit transmission-daemon.service. In the opened file ensure it contains at least:
      [Service]
Environment=TRANSMISSION_WEB_HOME=/path/to/flood-for-transmission
      Any other configuration can be added as you wish.
    • On Windows (untested) you have to set an environment variable to do this, open the start menu and type "environment". Click on "Edit this system environment variables". In the newly opened window choose "new" and fill in the "Variable name" TRANSMISSION_WEB_HOME and the "Variable value" to C:\path\to\flood-for-transmission.
    • On Mac create a backup of the folder at /Applications/Transmission.app/Contents/Resources/public_html with cp /Applications/Transmission.app/Contents/Resources/public_html /Applications/Transmission.app/Contents/Resources/public_html.default. Then copy the latest release folder to /Applications/Transmission.app/Contents/Resources/public_html like so cp ~/Download/flood-for-transmission /Applications/Transmission.app/Contents/Resources/public_html. Whenever you update Tranmission you will have to follow this procedure again. Note: there might be a way to do this with environment variables as well, but as of now I don't know how to do it. If you know, please open an issue so that this can be updated.
  5. Restart Transmission
  6. Access transmission as you usually do, By default this would be by opening http://localhost:9091.

Note: If you run Flood for Transmission behind SSL and in Chrome you can also run this interface like any other app by installing it as a PWA. For more instructions on that see the Chrome docs.

[BETA] Customization

  1. All user interface defaults can be customized in /flood-for-transmission/public/config.json, cp config.json.defaults config.json to get started. The config.json.defaults file also illustrates the default configuration.
  • "DARK_MODE"
    • Type: String e.g. "auto" or "enabled" or "disabled"
  • "SWITCH_COLORS"
    • Type: Boolean e.g true or false
  • "NOTATION_24H"
    • Type: Boolean e.g true or false
  • "WRAP_HEADER"
    • Type: Boolean e.g. true or false
  • "COMMON_PATH"
    • Type: Array of Strings e.g. ["/downloads/expeliarmus", "/downloads/lumos"]
  • "COLUMNS"
    • Type: Array of Objects e.g. [{ label: "Name", width: 400, enabled: true }, { label: "Progress", width: 600 }, { label: "Ratio", width: 0, enabled: false }]
    • Comments:
      • Omitting a key from a column object will fall back to the default value
      • Omitting enabled will assume the value to be true, and still show the column
      • Note that you can control the order of the columns by the order of the array
  • "SORT_COLUMN"
    • Type: String e.g. "Ratio"
  • "SORT_DIRECTION"
    • Type: String "asc" or "desc"
  • "SHOW_DISK_USAGE"
    • Type: Boolean true or false
    • Will only show for Transmission 4 and higher

Updating

To update follow the following steps (feel free to write a cron job script for this):

  1. Remove the last version: rm -r flood-for-transmission
  2. Download the latest release with: curl -OL https://github.com/johman10/flood-for-transmission/releases/download/latest/flood-for-transmission.zip
  3. Unpack with: unzip flood-for-transmission.zip. This should end up with a folder called flood-for-transmission in the current working directory.
  4. Remove the now redundant zip file: rm flood-for-transmission.zip
  5. Restart Transmission.

Local Development

  1. Run npm install.
  2. Copy .env.template to .env and edit the values to represent your Transmission configuration.
  3. Run npm start.
  4. Access the UI in your browser. Defaults to localhost:8080.

If you're running Transmission on a different machine behind Nginx or similar you may have to allow for CORS request. You can do this by adding the code below to your Transmission location block.

if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'Authorization,X-Transmission-Session-Id,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
}
if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization,X-Transmission-Session-Id,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range,X-Transmission-Session-Id' always;
}

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes