3 files changed, 12 insertions, 2 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index f681f79..bf76694 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -120,7 +120,7 @@
             <fa-icon *ngIf="download.value.status == 'finished'" [icon]="faCheckCircle" style="color: green;"></fa-icon>
             <fa-icon *ngIf="download.value.status == 'error'" [icon]="faTimesCircle" style="color: red;"></fa-icon>
           </div>
-          <span ngbTooltip="{{download.value.msg}}"><a *ngIf="!!download.value.filename; else noDownloadLink" href="download/{{download.value.filename}}" target="_blank">{{ download.value.title }}</a></span>
+          <span ngbTooltip="{{download.value.msg}}"><a *ngIf="!!download.value.filename; else noDownloadLink" href="download/{{download.value.filename | encodeURIComponent}}" target="_blank">{{ download.value.title }}</a></span>
           <ng-template #noDownloadLink>{{ download.value.title }}</ng-template>
         </td>
         <td>
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 0452ae7..6ad5978 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -7,7 +7,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CookieService } from 'ngx-cookie-service';
 
 import { AppComponent } from './app.component';
-import { EtaPipe, SpeedPipe } from './downloads.pipe';
+import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
 import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
 import { MeTubeSocket } from './metube-socket';
 
@@ -16,6 +16,7 @@ import { MeTubeSocket } from './metube-socket';
     AppComponent,
     EtaPipe,
     SpeedPipe,
+    EncodeURIComponent,
     MasterCheckboxComponent,
     SlaveCheckboxComponent
   ],
diff --git a/ui/src/app/downloads.pipe.ts b/ui/src/app/downloads.pipe.ts
index d4a1654..cb3bf92 100644
--- a/ui/src/app/downloads.pipe.ts
+++ b/ui/src/app/downloads.pipe.ts
@@ -35,3 +35,12 @@ export class SpeedPipe implements PipeTransform {
     return parseFloat((value / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
   }
 }
+
+@Pipe({
+  name: 'encodeURIComponent'
+})
+export class EncodeURIComponent implements PipeTransform {
+  transform(value: string, ...args: any[]): any {
+    return encodeURIComponent(value);
+  }
+}