TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-03-25 22:20:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed margins on advanced mode UI and temporarily disabled youtube auth until youtube-dl fixes it

Browse Source 
advanced mode inputs now get saved in cookies

fixed bug in UI where delete button was missing by making it more mobile-friendly
This commit is contained in:
Isaac Grynsztein
2020-03-01 00:48:22 -05:00
parent f29a29bf2f
commit 0511996b26
2 changed files with 49 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/main/main.component.html
View File

@@ -72,27 +72,27 @@
<div class="container" style="padding-bottom: 20px;">
<div class="row">
<div class="col-12 col-sm-6">
<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" style="margin-bottom: 30px;" class="advanced-input">
<mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
<mat-form-field color="accent" style="margin-bottom: 42px;" 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-12 col-sm-6">
<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-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
<mat-form-field style="margin-bottom: 42px;" 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-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">Documentation</a>. Path is relative to the config download path. Don't include extension.</mat-hint>
</mat-form-field>
</div>
<div class="col-12 col-sm-6 mt-2">
<mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
<div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
<mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
<mat-form-field color="accent" class="advanced-input">
<input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username">
</mat-form-field>
</div>
<div class="col-12 col-sm-6 mt-2">
<mat-form-field color="accent" class="advanced-input">
<div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
<mat-form-field style="margin-top: 31px;" color="accent" class="advanced-input">
<input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password">
</mat-form-field>
</div>

43
src/app/main/main.component.ts
View File

@@ -41,6 +41,8 @@ export interface Download {
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
youtubeAuthDisabledOverride = true;
iOS = false;
determinateProgress = false;
@@ -82,7 +84,7 @@ export class MainComponent implements OnInit {
mp3s: any[] = [];
mp4s: any[] = [];
files_cols = (window.innerWidth <= 450) ? 2 : 4;
files_cols = null;
playlists = {'audio': [], 'video': []};
playlist_thumbnails = {};
downloading_content = {'audio': {}, 'video': {}};
@@ -247,6 +249,15 @@ export class MainComponent implements OnInit {
if (localStorage.getItem('youtubeAuthEnabled') !== null) {
this.youtubeAuthEnabled = localStorage.getItem('youtubeAuthEnabled') === 'true';
}
// set advanced inputs
const customArgs = localStorage.getItem('customArgs');
const customOutput = localStorage.getItem('customOutput');
const youtubeUsername = localStorage.getItem('youtubeUsername');
if (customArgs && customArgs !== 'null') { this.customArgs = customArgs };
if (customOutput && customOutput !== 'null') { this.customOutput = customOutput };
if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername };
}
if (this.autoStartDownload) {
@@ -263,6 +274,7 @@ export class MainComponent implements OnInit {
ngOnInit() {
this.iOS = this.platform.IOS;
// get checkboxes
if (localStorage.getItem('audioOnly') !== null) {
this.audioOnly = localStorage.getItem('audioOnly') === 'true';
}
@@ -279,6 +291,8 @@ export class MainComponent implements OnInit {
// set auto start flag to true
this.autoStartDownload = true;
}
this.setCols();
}
// file manager stuff
@@ -336,6 +350,18 @@ export class MainComponent implements OnInit {
});
}
public setCols() {
if (window.innerWidth <= 350) {
this.files_cols = 1;
} else if (window.innerWidth <= 500) {
this.files_cols = 2;
} else if (window.innerWidth <= 750) {
this.files_cols = 3
} else {
this.files_cols = 4;
}
}
public goToFile(name, isAudio) {
if (isAudio) {
this.downloadHelperMp3(name, false, false);
@@ -498,6 +524,19 @@ export class MainComponent implements OnInit {
const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
// set advanced inputs
if (this.allowAdvancedDownload) {
if (customArgs) {
localStorage.setItem('customArgs', customArgs);
}
if (customOutput) {
localStorage.setItem('customOutput', customOutput);
}
if (youtubeUsername) {
localStorage.setItem('youtubeUsername', youtubeUsername);
}
}
if (this.audioOnly) {
// create download object
const new_download: Download = {
@@ -776,7 +815,7 @@ export class MainComponent implements OnInit {
}
onResize(event) {
this.files_cols = (event.target.innerWidth <= 450) ? 2 : 4;
this.setCols();
}
videoModeChanged(new_val) {