fix broken PREFIX_URL feature

6 files changed, 34 insertions, 12 deletions

diff --git a/README.md b/README.md
index 3f4e07d..e7b1555 100644
--- a/README.md
+++ b/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.

diff --git a/app/main.py b/app/main.py
index 7031055..8489e4f 100644
--- a/app/main.py
+++ b/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):

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index b05aee7..9e927ed 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -27,8 +27,10 @@
     </div>
   </form>
 
-  <p *ngIf="downloads.loading">Loading...</p>
-  <div class="metube-section-header">Downloading</div>
+  <div *ngIf="downloads.loading" class="alert alert-info" role="alert">
+    Connecting to server...
+  </div>
+    <div class="metube-section-header">Downloading</div>
   <table class="table">
     <thead>
       <tr>
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 126de30..5f70069 100644
--- a/ui/src/app/app.module.ts
+++ b/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';
-
-const config: SocketIoConfig = { url: '', options: {} };
+import { MeTubeSocket } from './metube-socket';
 
 @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 { }
diff --git a/ui/src/app/downloads.service.ts b/ui/src/app/downloads.service.ts
index 6e19a7a..823aa60 100644
--- a/ui/src/app/downloads.service.ts
+++ b/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);
diff --git a/ui/src/app/metube-socket.ts b/ui/src/app/metube-socket.ts
new file mode 100644
index 0000000..cfc8fea
--- /dev/null
+++ b/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'} });
+    }
+}