UI updates to subscriptions

Improved translation coverage
pull/809/head
Tzahi12345 3 years ago
parent 840e12db71
commit 970e3834be

@ -439,7 +439,11 @@ async function getAllSubscriptions() {
}
async function getSubscription(subID) {
return await db_api.getRecord('subscriptions', {id: subID});
const sub = await db_api.getRecord('subscriptions', {id: subID});
// now with the download_queue, we may need to override 'downloading'
const current_downloads = await db_api.getRecords('download_queue', {running: true, sub_id: sub.id}, true);
if (!sub['downloading']) sub['downloading'] = current_downloads > 0;
return sub;
}
async function getSubscriptionByName(subName, user_uid = null) {

@ -9,13 +9,13 @@
<div class="col-12 mt-3">
<mat-checkbox (change)="downloadAllToggled()" [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
</div>
<div class="col-12" *ngIf="!download_all && editor_initialized">
<div class="col-12" *ngIf="editor_initialized">
<ng-container i18n="Download time range prefix">Download videos uploaded in the last</ng-container>
<mat-form-field color="accent" class="amount-select">
<input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)">
<input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)" [disabled]="download_all">
</mat-form-field>
<mat-form-field class="unit-select">
<mat-select color="accent" [(ngModel)]="timerange_unit" (ngModelChange)="timerangeChanged($event, true)">
<mat-select color="accent" [(ngModel)]="timerange_unit" (ngModelChange)="timerangeChanged($event, true)" [disabled]="download_all">
<mat-option *ngFor="let time_unit of time_units" [value]="time_unit + (timerange_amount === 1 ? '' : 's')">
{{time_unit + (timerange_amount === 1 ? '' : 's')}}
</mat-option>

@ -24,14 +24,14 @@
<div class="col-12">
<mat-checkbox [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
</div>
<div class="col-12" *ngIf="!download_all">
<div class="col-12">
<span i18n="Download time range prefix">Download videos uploaded in the last</span>
<div>
<mat-form-field color="accent" style="width: 100px; text-align: center;">
<input type="number" matInput [(ngModel)]="timerange_amount">
<input type="number" matInput [(ngModel)]="timerange_amount" [disabled]="download_all">
</mat-form-field>
<mat-form-field class="unit-select">
<mat-select color="accent" [(ngModel)]="timerange_unit">
<mat-select color="accent" [(ngModel)]="timerange_unit" [disabled]="download_all">
<mat-option *ngFor="let time_unit of time_units" [value]="time_unit + (timerange_amount === 1 ? '' : 's')">
{{time_unit + (timerange_amount === 1 ? '' : 's')}}
</mat-option>

@ -23,5 +23,5 @@
<button mat-button mat-dialog-close><ng-container i18n="Close subscription info button">Close</ng-container></button>
<button mat-stroked-button (click)="downloadArchive()" color="accent"><ng-container i18n="Export Archive button">Export Archive</ng-container></button>
<span class="spacer"></span>
<button mat-button (click)="unsubscribe()" color="warn"><ng-container i18n="Unsubscribe button">Unsubscribe</ng-container></button>
<button mat-button (click)="confirmUnsubscribe()" color="warn"><ng-container i18n="Unsubscribe button">Unsubscribe</ng-container></button>
</mat-dialog-actions>

@ -1,6 +1,7 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { PostsService } from 'app/posts.services';
import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
@Component({
selector: 'app-subscription-info-dialog',
@ -13,7 +14,8 @@ export class SubscriptionInfoDialogComponent implements OnInit {
unsubbedEmitter = null;
constructor(public dialogRef: MatDialogRef<SubscriptionInfoDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any, private postsService: PostsService) { }
@Inject(MAT_DIALOG_DATA) public data: any, private postsService: PostsService,
private dialog: MatDialog) { }
ngOnInit() {
if (this.data) {
@ -22,6 +24,22 @@ export class SubscriptionInfoDialogComponent implements OnInit {
}
}
confirmUnsubscribe() {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: {
dialogTitle: $localize`Unsubscribe from ${this.sub['name']}:subscription name:`,
dialogText: $localize`Would you like to unsubscribe from ${this.sub['name']}:subscription name:?`,
submitText: $localize`Unsubscribe`,
warnSubmitColor: true
}
});
dialogRef.afterClosed().subscribe(confirmed => {
if (confirmed) {
this.unsubscribe();
}
});
}
unsubscribe() {
this.postsService.unsubscribe(this.sub, true).subscribe(res => {
this.unsubbedEmitter.emit(true);
@ -30,7 +48,7 @@ export class SubscriptionInfoDialogComponent implements OnInit {
}
downloadArchive() {
this.postsService.downloadArchive(this.sub).subscribe(res => {
this.postsService.downloadArchive(null, this.sub.id).subscribe(res => {
const blob: Blob = res;
saveAs(blob, 'archive.txt');
});

@ -170,9 +170,9 @@ export class SettingsComponent implements OnInit {
deleteCategory(category: Category): void {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: {
dialogTitle: 'Delete category',
dialogText: `Would you like to delete ${category['name']}?`,
submitText: 'Delete',
dialogTitle: $localize`Delete category`,
dialogText: $localize`Would you like to delete ${category['name']}:category name:?`,
submitText: $localize`Delete`,
warnSubmitColor: true
}
});
@ -180,12 +180,11 @@ export class SettingsComponent implements OnInit {
if (confirmed) {
this.postsService.deleteCategory(category['uid']).subscribe(res => {
if (res['success']) {
// TODO: Make translatable
this.postsService.openSnackBar(`Successfully deleted ${category['name']}!`);
this.postsService.openSnackBar($localize`Successfully deleted ${category['name']}:category name:!`);
this.postsService.reloadCategories();
}
}, () => {
this.postsService.openSnackBar(`Failed to delete ${category['name']}!`);
this.postsService.openSnackBar($localize`Failed to delete ${category['name']}:category name:!`);
});
}
});

@ -10,9 +10,9 @@
<br/>
<div *ngIf="subscription">
<app-recent-videos [sub_id]="subscription.id" [usePaginator]="false"></app-recent-videos>
<app-recent-videos #recentVideos [sub_id]="subscription.id" [usePaginator]="false"></app-recent-videos>
</div>
<button class="edit-button" color="primary" (click)="editSubscription()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">edit</mat-icon></button>
<button class="watch-button" color="primary" (click)="watchSubscription()" mat-fab><mat-icon class="save-icon">video_library</mat-icon></button>
<button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
<button class="edit-button" color="primary" (click)="editSubscription()" [disabled]="downloading" matTooltip="Edit" i18n-matTooltip="Edit" mat-fab><mat-icon class="save-icon">edit</mat-icon></button>
<button class="watch-button" color="primary" (click)="watchSubscription()" matTooltip="Play all" i18n-matTooltip="Play all" mat-fab><mat-icon class="save-icon">video_library</mat-icon></button>
<button class="save-button" color="primary" (click)="downloadContent()" [disabled]="downloading" matTooltip="Download zip" i18n-matTooltip="Download zip" mat-fab><mat-icon class="save-icon">save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="50"></mat-spinner></button>
</div>

@ -54,6 +54,9 @@ export class SubscriptionComponent implements OnInit, OnDestroy {
this.subscription['downloading'] = res['subscription']['downloading'];
}
return;
} else if (res['subscription']['videos'].length > (this.subscription?.videos.length || 0)) {
// only when files are added so we don't reload files when one is deleted
this.postsService.files_changed.next(true);
}
this.subscription = res['subscription'];
});

@ -15,10 +15,10 @@
</div>
</a>
<div style="pointer-events: auto; color: unset" matListItemMeta>
<button mat-icon-button (click)="editSubscription(sub)">
<button matTooltip="Edit" i18n-matTooltip="Edit" mat-icon-button (click)="editSubscription(sub)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button (click)="showSubInfo(sub)">
<button matTooltip="Info" i18n-matTooltip="Info" mat-icon-button (click)="showSubInfo(sub)">
<mat-icon>info</mat-icon>
</button>
</div>
@ -39,10 +39,10 @@
</div>
</a>
<div style="pointer-events: auto; color: unset" matListItemMeta>
<button mat-icon-button (click)="editSubscription(sub)">
<button matTooltip="Edit" i18n-matTooltip="Edit" mat-icon-button (click)="editSubscription(sub)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button (click)="showSubInfo(sub)">
<button matTooltip="Info" i18n-matTooltip="Info" mat-icon-button (click)="showSubInfo(sub)">
<mat-icon>info</mat-icon>
</button>
</div>
@ -57,4 +57,4 @@
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<button class="add-subscription-button" (click)="openSubscribeDialog()" mat-fab><mat-icon>add</mat-icon></button>
<button class="add-subscription-button" (click)="openSubscribeDialog()" matTooltip="Add subscription" i18n-matTooltip="Add subscription" mat-fab><mat-icon>add</mat-icon></button>
Loading…
Cancel
Save