From 91cee0339a8b41014fc69a994e7eb719ad029d3a Mon Sep 17 00:00:00 2001
From: Alex <alexta69@gmail.com>
Date: Fri, 6 Dec 2019 14:16:19 +0200
Subject: fix broken PREFIX_URL feature

---
 README.md                       | 14 ++++++++++++++
 app/main.py                     |  6 +++---
 ui/src/app/app.component.html   |  6 ++++--
 ui/src/app/app.module.ts        |  7 ++-----
 ui/src/app/downloads.service.ts |  4 ++--
 ui/src/app/metube-socket.ts     |  9 +++++++++
 6 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 ui/src/app/metube-socket.ts

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'} });
+    }
+}
-- 
cgit