4 files changed, 17 insertions, 9 deletions
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'} });
+    }
+}