Added support for custom arguments and custom output patch

src/app/main/main.component.css

@@ -115,4 +115,10 @@ mat-form-field.mat-form-field {
 
 .add-playlist-button {
     float: right;
+}
+
+.advanced-input {
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }

src/app/main/main.component.html

@@ -61,7 +61,36 @@
         </mat-card-actions>
     </mat-card>
 </div>
-<div *ngIf="downloads.length > 0 && !current_download" style="margin-top: 15px;" class="big demo-basic">
+<div *ngIf="allowAdvancedDownload" class="big demo-basic">
+    <form style="margin-left: 20px; margin-right: 20px;">
+        <mat-expansion-panel class="big">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Advanced
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div class="container" style="padding-bottom: 20px;">
+                <div class="row">
+                    <div class="col">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args">
+                            <mat-hint>No need to include URL, just everything after.</mat-hint>
+                        </mat-form-field>
+                    </div>
+                    <div class="col">
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
+                        <mat-form-field color="accent" class="advanced-input">
+                            <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput placeholder="Custom output">
+                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">This link</a> will be helpful. Path is relative to the config download path.</mat-hint>
+                        </mat-form-field>
+                    </div>
+                </div>
+            </div>
+        </mat-expansion-panel>
+    </form>
+</div>
+<div *ngIf="multiDownloadMode && downloads.length > 0 && !current_download" style="margin-top: 15px;" class="big demo-basic">
     <mat-card id="card" style="margin-right: 20px; margin-left: 20px;">
         <div class="container">
             <div *ngFor="let download of downloads; let i = index;" class="row">

src/app/main/main.component.ts

@@ -47,6 +47,10 @@ export class MainComponent implements OnInit {
   downloadingfile = false;
   audioOnly: boolean;
   multiDownloadMode = false;
+  customArgsEnabled = false;
+  customArgs = null;
+  customOutputEnabled = false;
+  customOutput = null;
   urlError = false;
   path = '';
   url = '';
@@ -61,6 +65,7 @@ export class MainComponent implements OnInit {
   baseStreamPath;
   audioFolderPath;
   videoFolderPath;
+  allowAdvancedDownload = false;
 
   cachedAvailableFormats = {};
 
@@ -209,6 +214,7 @@ export class MainComponent implements OnInit {
           result['YoutubeDLMaterial']['API']['youtube_API_key'];
       this.youtubeAPIKey = this.youtubeSearchEnabled ? result['YoutubeDLMaterial']['API']['youtube_API_key'] : null;
       this.allowQualitySelect = result['YoutubeDLMaterial']['Extra']['allow_quality_select'];
+      this.allowAdvancedDownload = result['YoutubeDLMaterial']['Advanced']['allow_advanced_download'];
 
       this.postsService.path = backendUrl;
       this.postsService.startPath = backendUrl;
@@ -223,6 +229,18 @@ export class MainComponent implements OnInit {
         this.youtubeSearch.initializeAPI(this.youtubeAPIKey);
         this.attachToInput();
       }
+
+      // set final cache items
+      if (this.allowAdvancedDownload) {
+        if (localStorage.getItem('customArgsEnabled') !== null) {
+          this.customArgsEnabled = localStorage.getItem('customArgsEnabled') === 'true';
+        }
+
+        if (localStorage.getItem('customOutputEnabled') !== null) {
+          this.customOutputEnabled = localStorage.getItem('customOutputEnabled') === 'true';
+        }
+      }
+
     }, error => {
       console.log(error);
     });
@@ -477,8 +495,12 @@ export class MainComponent implements OnInit {
             customQualityConfiguration = audio_formats[this.selectedQuality]['format_id'];
           }
         }
+
+        const customArgs = (this.customArgsEnabled ? this.customArgs : null);
+        const customOutput = (this.customOutputEnabled ? this.customOutput : null);
+
         this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -516,8 +538,11 @@ export class MainComponent implements OnInit {
           }
         }
 
+        const customArgs = (this.customArgsEnabled ? this.customArgs : null);
+        const customOutput = (this.customOutputEnabled ? this.customOutput : null);
+
         this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
-          customQualityConfiguration).subscribe(posts => {
+          customQualityConfiguration, customArgs, customOutput).subscribe(posts => {
           // update download object
           new_download.downloading = false;
           new_download.percent_complete = 100;
@@ -744,6 +769,20 @@ export class MainComponent implements OnInit {
     localStorage.setItem('multiDownloadMode', new_val.checked.toString());
   }
 
+  customArgsEnabledChanged(new_val) {
+    localStorage.setItem('customArgsEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customOutputEnabled) {
+      this.customOutputEnabled = false;
+    }
+  }
+
+  customOutputEnabledChanged(new_val) {
+    localStorage.setItem('customOutputEnabled', new_val.checked.toString());
+    if (new_val.checked === true && this.customArgsEnabled) {
+      this.customArgsEnabled = false;
+    }
+  }
+
   getAudioAndVideoFormats(formats): any[] {
     const audio_formats = {};
     const video_formats = {};

src/app/player/player.component.ts

@@ -76,7 +76,7 @@ export class PlayerComponent implements OnInit {
       for (let i = 0; i < this.fileNames.length; i++) {
         const fileName = this.fileNames[i];
         const baseLocation = (this.type === 'audio') ? this.audioFolderPath : this.videoFolderPath;
-        const fullLocation = this.baseStreamPath + baseLocation + fileName; // + (this.type === 'audio' ? '.mp3' : '.mp4');
+        const fullLocation = this.baseStreamPath + baseLocation + encodeURI(fileName); // + (this.type === 'audio' ? '.mp3' : '.mp4');
         const mediaObject: IMedia = {
           title: fileName,
           src: fullLocation,

src/app/posts.services.ts

@@ -43,16 +43,22 @@ export class PostsService {
         return this.http.get(this.startPath + 'audiofolder');
     }
 
-    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string) {
+    // tslint:disable-next-line: max-line-length
+    makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null) {
         return this.http.post(this.path + 'tomp3', {url: url,
                                                     maxBitrate: selectedQuality,
-                                                    customQualityConfiguration: customQualityConfiguration});
+                                                    customQualityConfiguration: customQualityConfiguration,
+                                                    customArgs: customArgs,
+                                                    customOutput: customOutput});
     }
 
-    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string) {
+    // tslint:disable-next-line: max-line-length
+    makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null) {
         return this.http.post(this.path + 'tomp4', {url: url,
                                                     selectedHeight: selectedQuality,
-                                                    customQualityConfiguration: customQualityConfiguration});
+                                                    customQualityConfiguration: customQualityConfiguration,
+                                                    customArgs: customArgs,
+                                                    customOutput: customOutput});
     }
 
     getFileStatusMp3(name: string) {