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

downloads refactor half done - videos are now implement, but audo files are now

Browse Source 
Added downloads manager in the UI where downloads can be viewed/cleared
This commit is contained in:
Isaac Grynsztein
2020-04-20 18:39:55 -04:00
parent d887380fd1
commit 6fe7d20498
13 changed files with 644 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/download-item/download-item.component.html
View File

@@ -1,16 +1,21 @@
<div>
<mat-grid-list [rowHeight]="50" [cols]="24">
<mat-grid-tile [colspan]="2">
<h5 style="display: inline-block; margin-right: 5px; position: relative; top: 5px;">{{queueNumber}}.</h5>
</mat-grid-tile>
<mat-grid-tile [colspan]="6">
<div style="display: inline-block; text-align: center;"><ng-container i18n="Download ID">ID:</ng-container>&nbsp;{{url_id}}</div>
<mat-grid-tile [colspan]="7">
<div style="display: inline-block; text-align: center; width: 100%;"><span class="shorten"><ng-container i18n="Download ID">ID:</ng-container>&nbsp;{{url_id ? url_id : download.uid}}</span></div>
</mat-grid-tile>
<mat-grid-tile [colspan]="13">
<mat-progress-bar style="width: 80%" [value]="download.percent_complete" [mode]="(download.percent_complete === 0) ? 'indeterminate' : 'determinate'"></mat-progress-bar>
<mat-progress-bar [value]="(download.complete || download.error) ? 100 : download.percent_complete" [mode]="(!download.complete && download.percent_complete === 0 && !download.error) ? 'indeterminate' : 'determinate'"></mat-progress-bar>
<mat-icon *ngIf="download.complete" style="margin-left: 25px; cursor: default" matTooltip="The download is complete" matTooltip-i18n>done</mat-icon>
<mat-icon *ngIf="download.error" style="margin-left: 25px; cursor: default" matTooltip="An error has occurred" matTooltip-i18n>error</mat-icon>
</mat-grid-tile>
<mat-grid-tile [colspan]="3">
<button (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
<mat-grid-tile [colspan]="4">
<button style="margin-bottom: 2px;" (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
</mat-grid-tile>
</mat-grid-list>
<mat-expansion-panel class="ignore-margin" *ngIf="download.error">
<mat-expansion-panel-header>
Error
</mat-expansion-panel-header>
{{download.error}}
</mat-expansion-panel>
</div>

16
src/app/download-item/download-item.component.scss
View File

@@ -0,0 +1,16 @@
.shorten {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none;
}
.ignore-margin {
margin-left: -15px;
margin-right: -15px;
margin-bottom: -15px;
}

4
src/app/download-item/download-item.component.ts
View File

@@ -13,9 +13,11 @@ export class DownloadItemComponent implements OnInit {
uid: null,
type: 'audio',
percent_complete: 0,
complete: false,
url: 'http://youtube.com/watch?v=17848rufj',
downloading: true,
is_playlist: false
is_playlist: false,
error: false
};
@Output() cancelDownload = new EventEmitter<Download>();