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

Added back loading spinner to download actions

Browse Source
This commit is contained in:
Tzahi12345
2023-05-22 23:43:33 -04:00
parent 3ab2420c7e
commit b8eb639a59
3 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/downloads/downloads.component.html
View File

@@ -56,14 +56,17 @@
<mat-cell *matCellDef="let element" [ngStyle]="{flex: actionsFlex}"> <mat-cell *matCellDef="let element" [ngStyle]="{flex: actionsFlex}">
<div *ngIf="!uids && innerWidth >= 800"> <div *ngIf="!uids && innerWidth >= 800">
<ng-container *ngFor="let downloadAction of downloadActions"> <ng-container *ngFor="let downloadAction of downloadActions">
<button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [matTooltip]="downloadAction.tooltip" mat-icon-button><mat-icon>{{downloadAction.icon}}</mat-icon></button> <span class="button-span">
<mat-spinner [diameter]="28" *ngIf="downloadAction.loading && downloadAction.loading(element)" class="icon-button-spinner"></mat-spinner>
<button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [disabled]="downloadAction.loading && downloadAction.loading(element)" [matTooltip]="downloadAction.tooltip" mat-icon-button><mat-icon>{{downloadAction.icon}}</mat-icon></button>
</span>
</ng-container> </ng-container>
</div> </div>
<div *ngIf="uids || innerWidth < 800"> <div *ngIf="uids || innerWidth < 800">
<button [matMenuTriggerFor]="download_actions" mat-icon-button><mat-icon>more_vert</mat-icon></button> <button [matMenuTriggerFor]="download_actions" mat-icon-button><mat-icon>more_vert</mat-icon></button>
<mat-menu #download_actions="matMenu"> <mat-menu #download_actions="matMenu">
<ng-container *ngFor="let downloadAction of downloadActions"> <ng-container *ngFor="let downloadAction of downloadActions">
<button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" mat-menu-item> <button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [disabled]="downloadAction.loading && downloadAction.loading(element)" mat-menu-item>
<mat-icon>{{downloadAction.icon}}</mat-icon> <mat-icon>{{downloadAction.icon}}</mat-icon>
<span>{{downloadAction.tooltip}}</span> <span>{{downloadAction.tooltip}}</span>
</button> </button>

8
src/app/components/downloads/downloads.component.scss
View File

@@ -10,8 +10,12 @@ mat-header-cell, mat-cell {
.icon-button-spinner { .icon-button-spinner {
position: absolute; position: absolute;
top: 7px; top: -13px;
left: 6px; left: 10px;
}
.button-span {
position: relative;;
} }
.downloads-action-button-div { .downloads-action-button-div {

6
src/app/components/downloads/downloads.component.ts
View File

@@ -68,7 +68,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
tooltip: $localize`Pause`, tooltip: $localize`Pause`,
action: (download: Download) => this.pauseDownload(download), action: (download: Download) => this.pauseDownload(download),
show: (download: Download) => !download.finished && (!download.paused || !download.finished_step), show: (download: Download) => !download.finished && (!download.paused || !download.finished_step),
icon: 'pause' icon: 'pause',
loading: (download: Download) => download.paused && !download.finished_step
}, },
{ {
tooltip: $localize`Resume`, tooltip: $localize`Resume`,
@@ -334,5 +335,6 @@ interface DownloadAction {
tooltip: string, tooltip: string,
action: (download: Download) => void, action: (download: Download) => void,
show: (download: Download) => boolean, show: (download: Download) => boolean,
icon: string icon: string,
loading?: (download: Download) => boolean
} }