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

Added support for custom quality settings for video and audio files.

Browse Source 
Available formats are downloaded when a valid YT url is detected. These formats are then parsed and a best audio format is selected based on the results

After downloading a file with no file manager, file is now deleted. After file deletion, mp3/mp4 reload occurs

Updated view on main component to be more responsive, using bootstrap grid

Updated progress bar UI-wise to be more in line with the rest of the page
This commit is contained in:
Isaac Grynsztein
2020-02-17 00:32:31 -05:00
parent d54b2a73c8
commit 5f4a7a1e69
3 changed files with 297 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,11 +7,32 @@
<mat-card-content>
<div style="position: relative;">
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput (ngModelChange)="inputChanged($event)" [(ngModel)]="url" placeholder="URL" type="url" name="url" [formControl]="urlForm" required #urlinput>
<mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
<button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
</mat-form-field>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-9">
<mat-form-field class="example-full-width">
<input style="padding-right: 25px;" matInput (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" [formControl]="urlForm" required #urlinput>
<mat-error *ngIf="urlError || urlForm.invalid">Please enter a valid URL!</mat-error>
<button class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
</mat-form-field>
</div>
<div class="col-7 col-sm-3">
<mat-form-field style="display: inline-block; width: inherit; min-width: 120px;">
<mat-label>Quality</mat-label>
<mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedQuality">
<ng-container *ngFor="let option of qualityOptions[(audioOnly) ? 'audio' : 'video']">
<mat-option *ngIf="option.value === '' || url && cachedAvailableFormats[url] && cachedAvailableFormats[url] && cachedAvailableFormats[url][(audioOnly) ? 'audio' : 'video'][option.value]" [value]="option.value">
{{option.label}}
</mat-option>
</ng-container>
</mat-select>
<div class="spinner-div" *ngIf="formats_loading && !cachedAvailableFormats[url]">
<mat-spinner [diameter]="25"></mat-spinner>
</div>
</mat-form-field>
</div>
</div>
</div>
<span *ngIf="results_showing">
<span *ngFor="let result of results">
<mat-card style="height: 120px; border-radius: 0px">
@@ -29,7 +50,7 @@
</span>
</form>
<br/>
<mat-checkbox [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
<mat-checkbox (change)="videoModeChanged($event)" [(ngModel)]="audioOnly" style="float: left; margin-top: -12px">Only Audio</mat-checkbox>
</div>
</mat-card-content>
@@ -41,16 +62,18 @@
</div>
<br/>
<div class="centered big" id="bar_div" *ngIf="downloadingfile;else nofile">
<div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
<mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
<br/>
<div class="margined">
<div [ngClass]="(determinateProgress && percentDownloaded === 100)?'make-room-for-spinner':'equal-sizes'" style="display: inline-block; width: 100%; padding-left: 20px" *ngIf="determinateProgress;else indeterminateprogress">
<mat-progress-bar mode="determinate" value="{{percentDownloaded}}"></mat-progress-bar>
<br/>
</div>
<div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
<mat-spinner [diameter]="25"></mat-spinner>
</div>
<ng-template #indeterminateprogress>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</ng-template>
</div>
<div *ngIf="determinateProgress && percentDownloaded === 100" class="spinner">
<mat-spinner [diameter]="25"></mat-spinner>
</div>
<ng-template #indeterminateprogress>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</ng-template>
<br/>
</div>
<ng-template #nofile>