mirrors/metube
1
0
Fork 0
mirror of https://github.com/alexta69/metube.git synced 2025-04-04 04:37:39 +03:00
Code Issues Projects Releases Packages Wiki Activity

Frontend: Implement file size display in Downloads interface (#322)

Browse source
This commit is contained in:
vkartk 2024-01-26 09:39:39 +05:30
parent d5e6c8bf98
commit 3f4240a526
3 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
ui/src/app/app.component.html
View file

@ -153,6 +153,7 @@
<button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearCompleted (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle"></fa-icon>&nbsp; Clear completed</button>
<button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearFailed (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle"></fa-icon>&nbsp; Clear failed</button>
</th>
<th scope="col" >File Size</th>
<th scope="col" style="width: 2rem;"></th>
<th scope="col" style="width: 2rem;"></th>
<th scope="col" style="width: 2rem;"></th>
@ -176,6 +177,8 @@
<span *ngIf="download.value.error"><br>Error: {{download.value.error}}</span>
</ng-template>
</td>
<td>
<span *ngIf="download.value.size">{{ download.value.size | fileSize }}</span>
<td>
<button *ngIf="download.value.status == 'error'" type="button" class="btn btn-link" (click)="retryDownload(download.key, download.value)"><fa-icon [icon]="faRedoAlt"></fa-icon></button>
</td>

3
ui/src/app/app.module.ts
View file

@ -7,7 +7,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { CookieService } from 'ngx-cookie-service';
import { AppComponent } from './app.component';
import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
import { EtaPipe, SpeedPipe, EncodeURIComponent, FileSizePipe } from './downloads.pipe';
import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
import { MeTubeSocket } from './metube-socket';
import { NgSelectModule } from '@ng-select/ng-select';
@ -18,6 +18,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
AppComponent,
EtaPipe,
SpeedPipe,
FileSizePipe,
EncodeURIComponent,
MasterCheckboxComponent,
SlaveCheckboxComponent

15
ui/src/app/downloads.pipe.ts
View file

@ -44,3 +44,18 @@ export class EncodeURIComponent implements PipeTransform {
return encodeURIComponent(value);
}
}
@Pipe({
name: 'fileSize'
})
export class FileSizePipe implements PipeTransform {
transform(value: number): string {
if (value === 0) return '0 Bytes';
const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const unitIndex = Math.floor(Math.log(value) / Math.log(1000)); // Use 1000 for common units
const unitValue = value / Math.pow(1000, unitIndex);
return `${unitValue.toFixed(2)} ${units[unitIndex]}`;
}
}