fix broken PREFIX_URL feature

README.md

@@ -33,6 +33,20 @@ Certain values can be set via environment variables, using the `-e` parameter on
 * __DOWNLOAD_DIR__: path to where the downloads will be saved. Defaults to "/downloads" in the docker image, and "." otherwise.
 * __URL_PREFIX__: base path for the web server (for use when hosting behind a reverse proxy). Defaults to "/".
 
+## Running behind a reverse proxy
+
+Use the following nginx configuration to run MeTube behind a reverse proxy. The extra `proxy_set_headers` directives are there to make WebSockets work. Don't forget to set the URL_PREFIX environment variable to the correct value as well.
+
+```
+location /metube/ {
+        proxy_pass http://metube:8081;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+}
+```
+
 ## Build and run locally
 
 Make sure you have node.js installed.

app/main.py

@@ -22,6 +22,8 @@ class Config:
     def __init__(self):
         for k, v in self._DEFAULTS.items():
             setattr(self, k, os.environ[k] if k in os.environ else v)
+        if not self.URL_PREFIX.endswith('/'):
+            self.URL_PREFIX += '/'
 
 config = Config()
 
@@ -35,10 +37,8 @@ class ObjectSerializer(json.JSONEncoder):
 serializer = ObjectSerializer()
 app = web.Application()
 sio = socketio.AsyncServer()
-sio.attach(app)
+sio.attach(app, socketio_path=config.URL_PREFIX + 'socket.io')
 routes = web.RouteTableDef()
-if not config.URL_PREFIX.endswith('/'):
-    config.URL_PREFIX += '/'
 
 class Notifier(DownloadQueueNotifier):
     async def added(self, dl):

ui/src/app/app.component.html

@@ -27,8 +27,10 @@
     </div>
   </form>
 
-  <p *ngIf="downloads.loading">Loading...</p>
+  <div *ngIf="downloads.loading" class="alert alert-info" role="alert">
-  <div class="metube-section-header">Downloading</div>
+    Connecting to server...
+  </div>
+    <div class="metube-section-header">Downloading</div>
   <table class="table">
     <thead>
       <tr>

ui/src/app/app.module.ts

@@ -3,14 +3,12 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule } from '@angular/common/http';
-import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { AppComponent } from './app.component';
 import { EtaPipe, SpeedPipe } from './downloads.pipe';
 import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
-
+import { MeTubeSocket } from './metube-socket';
-const config: SocketIoConfig = { url: '', options: {} };
 
 @NgModule({
   declarations: [
@@ -25,10 +23,9 @@ const config: SocketIoConfig = { url: '', options: {} };
     FormsModule,
     NgbModule,
     HttpClientModule,
-    SocketIoModule.forRoot(config),
     FontAwesomeModule
   ],
-  providers: [],
+  providers: [MeTubeSocket],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

ui/src/app/downloads.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { of, Subject } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Socket } from 'ngx-socket-io';
+import { MeTubeSocket } from './metube-socket';
 
 export interface Status {
   status: string;
@@ -31,7 +31,7 @@ export class DownloadsService {
   queueChanged = new Subject();
   doneChanged = new Subject();
 
-  constructor(private http: HttpClient, private socket: Socket) {
+  constructor(private http: HttpClient, private socket: MeTubeSocket) {
     socket.fromEvent('all').subscribe((strdata: string) => {
       this.loading = false;
       let data: [[[string, Download]], [[string, Download]]] = JSON.parse(strdata);

ui/src/app/metube-socket.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+import { Socket } from 'ngx-socket-io';
+
+@Injectable()
+export class MeTubeSocket extends Socket {
+     constructor() {
+        super({ url: '', options: {path: document.location.pathname + 'socket.io'} });
+    }
+}