aiden
/
YoutubeDL-Material
mirror of https://github.com/Tzahi12345/YoutubeDL-Material
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI updates (#922)

Browse Source 
* Fixed download spinner in player component

* Downloads UI is more mobile friendly (#905)

* Code cleanup

* Fixed size of actions in home screen downloads

* Errored downloads now display their stage as "Error" in the UI

* Moved personal settings from about dialog to profile dialog

* Profile dialog can now be opened without logging in/without multi-user mode

* Fixed issue where archive dialog could be accessed from anywhere

* Misc internationalization improvements

* Combined download stage and download progress columns

* Added back loading spinner to download actions

* Adjusted thresholds for consolidating download action buttons

* Implemented virtual scrolling for notifications (helps if many notifications exist)

* Fixed minor console error
pull/929/head
Tzahi12345 3 years ago committed by GitHub
parent ba0de7f95c
commit 2c61260e0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 646 additions and 529 deletions
Show Stats Download Patch File Download Diff File

4
src/app/app.component.html
Unescape Escape View File

@ -17,11 +17,11 @@
</mat-menu> </mat-menu>
<button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button> <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
<mat-menu #menuSettings="matMenu"> <mat-menu #menuSettings="matMenu">
<button class="top-menu-button" (click)="openProfileDialog()" *ngIf="postsService.isLoggedIn" mat-menu-item> <button class="top-menu-button" (click)="openProfileDialog()" mat-menu-item>
<mat-icon>person</mat-icon> <mat-icon>person</mat-icon>
<span i18n="Profile menu label">Profile</span> <span i18n="Profile menu label">Profile</span>
</button> </button>
<button class="top-menu-button" (click)="openArchivesDialog()" mat-menu-item> <button *ngIf="!postsService.config?.Advanced.multi_user_mode || postsService.isLoggedIn" class="top-menu-button" (click)="openArchivesDialog()" mat-menu-item>
<mat-icon>topic</mat-icon> <mat-icon>topic</mat-icon>
<span i18n="Archives menu label">Archives</span> <span i18n="Archives menu label">Archives</span>
</button> </button>

2
src/app/app.module.ts
Unescape Escape View File

@ -34,6 +34,7 @@ import { MatBadgeModule } from '@angular/material/badge';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { ClipboardModule } from '@angular/cdk/clipboard'; import { ClipboardModule } from '@angular/cdk/clipboard';
import { TextFieldModule } from '@angular/cdk/text-field'; import { TextFieldModule } from '@angular/cdk/text-field';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
@ -189,6 +190,7 @@ registerLocaleData(es, 'es');
DragDropModule, DragDropModule,
ClipboardModule, ClipboardModule,
TextFieldModule, TextFieldModule,
ScrollingModule,
NgxFileDropModule, NgxFileDropModule,
AvatarModule, AvatarModule,
ContentLoaderModule, ContentLoaderModule,

58
src/app/components/downloads/downloads.component.html
Unescape Escape View File

@ -10,8 +10,8 @@
<!-- Title Column --> <!-- Title Column -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Title">Title</ng-container> </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header style="flex: 2"> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element"> <mat-cell *matCellDef="let element" style="flex: 2">
<span class="one-line" [matTooltip]="element.title ? element.title : null"> <span class="one-line" [matTooltip]="element.title ? element.title : null">
{{element.title}} {{element.title}}
</span> </span>
@ -31,41 +31,47 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Stage Column -->
<ng-container matColumnDef="step_index">
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Stage">Stage</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element"> {{STEP_INDEX_TO_LABEL[element.step_index]}} </mat-cell>
</ng-container>
<!-- Progress Column --> <!-- Progress Column -->
<ng-container matColumnDef="percent_complete"> <ng-container matColumnDef="percent_complete">
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Progress">Progress</ng-container> </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Progress">Progress</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element"> <mat-cell *matCellDef="let element">
<ng-container *ngIf="!element.error && element.step_index !== 2">
{{STEP_INDEX_TO_LABEL[element.step_index]}}
</ng-container>
<ng-container *ngIf="!element.error && element.step_index === 2">
<ng-container *ngIf="element.percent_complete"> <ng-container *ngIf="element.percent_complete">
{{+(element.percent_complete) > 100 ? '100' : element.percent_complete}}% {{+(element.percent_complete) > 100 ? '100' : element.percent_complete}}%
</ng-container> </ng-container>
<ng-container *ngIf="!element.percent_complete"> <ng-container *ngIf="!element.percent_complete">
N/A N/A
</ng-container> </ng-container>
</ng-container>
<ng-container *ngIf="element.error" i18n="Error">Error</ng-container>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Actions Column --> <!-- Actions Column -->
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell> <mat-header-cell *matHeaderCellDef [ngStyle]="{flex: actionsFlex}"> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
<mat-cell *matCellDef="let element"> <mat-cell *matCellDef="let element" [ngStyle]="{flex: actionsFlex}">
<div> <div *ngIf="!minimizeButtons">
<ng-container *ngIf="!element.finished"> <ng-container *ngFor="let downloadAction of downloadActions">
<button (click)="pauseDownload(element.uid)" *ngIf="!element.paused || !element.finished_step" [disabled]="element.paused && !element.finished_step" mat-icon-button matTooltip="Pause" i18n-matTooltip="Pause"><mat-spinner [diameter]="28" *ngIf="element.paused && !element.finished_step" class="icon-button-spinner"></mat-spinner><mat-icon>pause</mat-icon></button> <span class="button-span">
<button (click)="resumeDownload(element.uid)" *ngIf="element.paused && element.finished_step" mat-icon-button matTooltip="Resume" i18n-matTooltip="Resume"><mat-icon>play_arrow</mat-icon></button> <mat-spinner [diameter]="28" *ngIf="downloadAction.loading && downloadAction.loading(element)" class="icon-button-spinner"></mat-spinner>
<button *ngIf="false && !element.paused" (click)="cancelDownload(element.uid)" mat-icon-button matTooltip="Cancel" i18n-matTooltip="Cancel"><mat-icon>cancel</mat-icon></button> <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>
<ng-container *ngIf="element.finished"> </div>
<button *ngIf="!element.error" (click)="watchContent(element)" mat-icon-button matTooltip="Watch content" i18n-matTooltip="Watch content"><mat-icon>smart_display</mat-icon></button> <div *ngIf="minimizeButtons">
<button *ngIf="element.error" (click)="showError(element)" mat-icon-button matTooltip="Show error" i18n-matTooltip="Show error"><mat-icon>warning</mat-icon></button> <button [matMenuTriggerFor]="download_actions" mat-icon-button><mat-icon>more_vert</mat-icon></button>
<button (click)="restartDownload(element.uid)" mat-icon-button matTooltip="Restart" i18n-matTooltip="Restart"><mat-icon>restart_alt</mat-icon></button> <mat-menu #download_actions="matMenu">
</ng-container> <ng-container *ngFor="let downloadAction of downloadActions">
<button *ngIf="element.finished || element.paused" (click)="clearDownload(element.uid)" mat-icon-button matTooltip="Clear" i18n-matTooltip="Clear"><mat-icon>delete</mat-icon></button> <button *ngIf="downloadAction.show(element)" (click)="downloadAction.action(element)" [disabled]="downloadAction.loading && downloadAction.loading(element)" mat-menu-item>
<mat-icon>{{downloadAction.icon}}</mat-icon>
<span>{{downloadAction.tooltip}}</span>
</button>
</ng-container>
</mat-menu>
</div> </div>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -80,9 +86,9 @@
</mat-paginator> </mat-paginator>
</div> </div>
<div *ngIf="!uids" class="downloads-action-button-div"> <div *ngIf="!uids" class="downloads-action-button-div">
<button [disabled]="!running_download_exists" mat-stroked-button (click)="pauseAllDownloads()"><ng-container i18n="Pause all downloads">Pause all downloads</ng-container></button> <button class="downloads-action-button" [disabled]="!running_download_exists" mat-stroked-button (click)="pauseAllDownloads()"><ng-container i18n="Pause all downloads">Pause all downloads</ng-container></button>
<button style="margin-left: 10px;" [disabled]="!paused_download_exists" mat-stroked-button (click)="resumeAllDownloads()"><ng-container i18n="Resume all downloads">Resume all downloads</ng-container></button> <button class="downloads-action-button" [disabled]="!paused_download_exists" mat-stroked-button (click)="resumeAllDownloads()"><ng-container i18n="Resume all downloads">Resume all downloads</ng-container></button>
<button color="warn" style="margin-left: 10px;" mat-stroked-button (click)="clearDownloadsByType()"><ng-container i18n="Clear downloads">Clear downloads</ng-container></button> <button class="downloads-action-button" color="warn" mat-stroked-button (click)="clearDownloadsByType()"><ng-container i18n="Clear downloads">Clear downloads</ng-container></button>
</div> </div>
</div> </div>

14
src/app/components/downloads/downloads.component.scss
Unescape Escape View File

@ -10,15 +10,23 @@ 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 {
margin-top: 10px;
margin-left: 5px; margin-left: 5px;
} }
.downloads-action-button {
margin-top: 10px;
margin-right: 10px;
}
.rounded-top { .rounded-top {
border-radius: 16px 16px 0px 0px !important; border-radius: 16px 16px 0px 0px !important;
} }

139
src/app/components/downloads/downloads.component.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChild, Input, EventEmitter, HostListener } from '@angular/core';
import { PostsService } from 'app/posts.services'; import { PostsService } from 'app/posts.services';
import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations'; import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -13,31 +13,7 @@ import { Download } from 'api-types';
@Component({ @Component({
selector: 'app-downloads', selector: 'app-downloads',
templateUrl: './downloads.component.html', templateUrl: './downloads.component.html',
styleUrls: ['./downloads.component.scss'], styleUrls: ['./downloads.component.scss']
animations: [
// nice stagger effect when showing existing elements
trigger('list', [
transition(':enter', [
// child animation selector + stagger
query('@items',
stagger(100, animateChild()), { optional: true }
)
]),
]),
trigger('items', [
// cubic-bezier for a tiny bouncing feel
transition(':enter', [
style({ transform: 'scale(0.5)', opacity: 0 }),
animate('500ms cubic-bezier(.8,-0.6,0.2,1.5)',
style({ transform: 'scale(1)', opacity: 1 }))
]),
transition(':leave', [
style({ transform: 'scale(1)', opacity: 1, height: '*' }),
animate('1s cubic-bezier(.8,-0.6,0.2,1.5)',
style({ transform: 'scale(0.5)', opacity: 0, height: '0px', margin: '0px' }))
]),
])
],
}) })
export class DownloadsComponent implements OnInit, OnDestroy { export class DownloadsComponent implements OnInit, OnDestroy {
@ -62,13 +38,79 @@ export class DownloadsComponent implements OnInit, OnDestroy {
3: $localize`Complete` 3: $localize`Complete`
} }
displayedColumns: string[] = ['timestamp_start', 'title', 'step_index', 'sub_name', 'percent_complete', 'actions']; actionsFlex = 2;
minimizeButtons = false;
displayedColumnsBig: string[] = ['timestamp_start', 'title', 'sub_name', 'percent_complete', 'actions'];
displayedColumnsSmall: string[] = ['title', 'percent_complete', 'actions'];
displayedColumns: string[] = this.displayedColumnsBig;
dataSource = null; // new MatTableDataSource<Download>(); dataSource = null; // new MatTableDataSource<Download>();
// The purpose of this is to reduce code reuse for displaying these actions as icons or in a menu
downloadActions: DownloadAction[] = [
{
tooltip: $localize`Watch content`,
action: (download: Download) => this.watchContent(download),
show: (download: Download) => download.finished && !download.error,
icon: 'smart_display'
},
{
tooltip: $localize`Show error`,
action: (download: Download) => this.showError(download),
show: (download: Download) => download.finished && !!download.error,
icon: 'warning'
},
{
tooltip: $localize`Restart`,
action: (download: Download) => this.restartDownload(download),
show: (download: Download) => download.finished,
icon: 'restart_alt'
},
{
tooltip: $localize`Pause`,
action: (download: Download) => this.pauseDownload(download),
show: (download: Download) => !download.finished && (!download.paused || !download.finished_step),
icon: 'pause',
loading: (download: Download) => download.paused && !download.finished_step
},
{
tooltip: $localize`Resume`,
action: (download: Download) => this.resumeDownload(download),
show: (download: Download) => !download.finished && download.paused && download.finished_step,
icon: 'play_arrow'
},
{
tooltip: $localize`Resume`,
action: (download: Download) => this.resumeDownload(download),
show: (download: Download) => !download.finished && download.paused && download.finished_step,
icon: 'play_arrow'
},
{
tooltip: $localize`Cancel`,
action: (download: Download) => this.cancelDownload(download),
show: (download: Download) => false && !download.finished && !download.paused, // TODO: add possibility to cancel download
icon: 'cancel'
},
{
tooltip: $localize`Clear`,
action: (download: Download) => this.clearDownload(download),
show: (download: Download) => download.finished || download.paused,
icon: 'delete'
}
]
downloads_retrieved = false; downloads_retrieved = false;
innerWidth: number;
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@HostListener('window:resize', ['$event'])
onResize(): void {
this.innerWidth = window.innerWidth;
this.recalculateColumns();
}
sort_downloads = (a: Download, b: Download): number => { sort_downloads = (a: Download, b: Download): number => {
const result = b.timestamp_start - a.timestamp_start; const result = b.timestamp_start - a.timestamp_start;
return result; return result;
@ -77,6 +119,10 @@ export class DownloadsComponent implements OnInit, OnDestroy {
constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { } constructor(public postsService: PostsService, private router: Router, private dialog: MatDialog, private clipboard: Clipboard) { }
ngOnInit(): void { ngOnInit(): void {
// Remove sub name as it's not necessary for one-off downloads
if (this.uids) this.displayedColumnsBig = this.displayedColumnsBig.filter(col => col !== 'sub_name');
this.innerWidth = window.innerWidth;
this.recalculateColumns();
if (this.postsService.initialized) { if (this.postsService.initialized) {
this.getCurrentDownloadsRecurring(); this.getCurrentDownloadsRecurring();
} else { } else {
@ -164,8 +210,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
}); });
} }
pauseDownload(download_uid: string): void { pauseDownload(download: Download): void {
this.postsService.pauseDownload(download_uid).subscribe(res => { this.postsService.pauseDownload(download['uid']).subscribe(res => {
if (!res['success']) { if (!res['success']) {
this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`); this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`);
} }
@ -180,8 +226,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
}); });
} }
resumeDownload(download_uid: string): void { resumeDownload(download: Download): void {
this.postsService.resumeDownload(download_uid).subscribe(res => { this.postsService.resumeDownload(download['uid']).subscribe(res => {
if (!res['success']) { if (!res['success']) {
this.postsService.openSnackBar($localize`Failed to resume download! See server logs for more info.`); this.postsService.openSnackBar($localize`Failed to resume download! See server logs for more info.`);
} }
@ -196,8 +242,8 @@ export class DownloadsComponent implements OnInit, OnDestroy {
}); });
} }
restartDownload(download_uid: string): void { restartDownload(download: Download): void {
this.postsService.restartDownload(download_uid).subscribe(res => { this.postsService.restartDownload(download['uid']).subscribe(res => {
if (!res['success']) { if (!res['success']) {
this.postsService.openSnackBar($localize`Failed to restart download! See server logs for more info.`); this.postsService.openSnackBar($localize`Failed to restart download! See server logs for more info.`);
} else { } else {
@ -208,16 +254,16 @@ export class DownloadsComponent implements OnInit, OnDestroy {
}); });
} }
cancelDownload(download_uid: string): void { cancelDownload(download: Download): void {
this.postsService.cancelDownload(download_uid).subscribe(res => { this.postsService.cancelDownload(download['uid']).subscribe(res => {
if (!res['success']) { if (!res['success']) {
this.postsService.openSnackBar($localize`Failed to cancel download! See server logs for more info.`); this.postsService.openSnackBar($localize`Failed to cancel download! See server logs for more info.`);
} }
}); });
} }
clearDownload(download_uid: string): void { clearDownload(download: Download): void {
this.postsService.clearDownload(download_uid).subscribe(res => { this.postsService.clearDownload(download['uid']).subscribe(res => {
if (!res['success']) { if (!res['success']) {
this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`); this.postsService.openSnackBar($localize`Failed to pause download! See server logs for more info.`);
} }
@ -257,6 +303,7 @@ export class DownloadsComponent implements OnInit, OnDestroy {
} }
showError(download: Download): void { showError(download: Download): void {
console.log(download)
const copyToClipboardEmitter = new EventEmitter<boolean>(); const copyToClipboardEmitter = new EventEmitter<boolean>();
this.dialog.open(ConfirmDialogComponent, { this.dialog.open(ConfirmDialogComponent, {
data: { data: {
@ -276,4 +323,22 @@ export class DownloadsComponent implements OnInit, OnDestroy {
} }
}); });
} }
recalculateColumns() {
if (this.innerWidth < 650) this.displayedColumns = this.displayedColumnsSmall;
else this.displayedColumns = this.displayedColumnsBig;
this.actionsFlex = this.uids || this.innerWidth < 800 ? 1 : 2;
if (this.innerWidth < 800 && !this.uids || this.innerWidth < 1100 && this.uids) this.minimizeButtons = true;
else this.minimizeButtons = false;
}
} }
interface DownloadAction {
tooltip: string,
action: (download: Download) => void,
show: (download: Download) => boolean,
icon: string,
loading?: (download: Download) => boolean
}

60
src/app/components/notifications-list/notifications-list.component.html
Unescape Escape View File

@ -1,30 +1,32 @@
<div class="card-radius mat-elevation-z2" *ngFor="let notification of notifications; let i = index;"> <cdk-virtual-scroll-viewport itemSize="50" class="viewport" minBufferPx="1200" maxBufferPx="1200">
<mat-card class="notification-card card-radius"> <div #notification_parent class="notification-card-parent card-radius mat-elevation-z2" *cdkVirtualFor="let notification of notifications; let i = index;">
<mat-card-header> <mat-card class="notification-card card-radius">
<mat-card-subtitle> <mat-card-header>
<div> <mat-card-subtitle>
<span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span> <div>
</div> <span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
</mat-card-subtitle> </div>
<mat-card-title> </mat-card-subtitle>
<ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]"> <mat-card-title>
{{NOTIFICATION_PREFIX[notification.type]}} <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
{{NOTIFICATION_PREFIX[notification.type]}}
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
<div style="word-break: break-word">
{{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
</div>
</ng-container> </ng-container>
</mat-card-title> </mat-card-content>
</mat-card-header> <mat-card-actions class="notification-actions" *ngIf="notification.actions?.length > 0">
<mat-card-content> <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
<ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]"> <span *ngFor="let action of notification.actions">
<div style="word-break: break-word"> <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
{{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}} </span>
</div> </mat-card-actions>
</ng-container> <span *ngIf="!notification.read" class="dot"></span>
</mat-card-content> </mat-card>
<mat-card-actions *ngIf="notification.actions?.length > 0"> </div>
<button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button> </cdk-virtual-scroll-viewport>
<span *ngFor="let action of notification.actions">
<button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
</span>
</mat-card-actions>
<span *ngIf="!notification.read" class="dot"></span>
</mat-card>
</div>

15
src/app/components/notifications-list/notifications-list.component.scss
Unescape Escape View File

@ -13,12 +13,21 @@
font-size: 14px; font-size: 14px;
} }
.notification-card-parent {
margin: 5px;
}
.notification-card { .notification-card {
margin-top: 5px; margin-top: 5px;
} }
.notification-actions {
margin-top: auto;
}
.card-radius { .card-radius {
border-radius: 12px; border-radius: 12px;
height: 166px;
} }
.dot { .dot {
@ -30,4 +39,8 @@
position: absolute; position: absolute;
right: 8px; right: 8px;
top: 8px; top: 8px;
} }
.viewport {
height: 100%;
}

5
src/app/components/notifications/notifications.component.css
Unescape Escape View File

@ -4,7 +4,10 @@
} }
.notifications-list-parent { .notifications-list-parent {
max-height: 70vh;
overflow-y: auto; overflow-y: auto;
padding: 0px 10px 10px 10px; padding: 0px 10px 10px 10px;
}
.notifications-list {
display: block
} }

2
src/app/components/notifications/notifications.component.html
Unescape Escape View File

@ -4,7 +4,7 @@
<mat-chip-listbox [value]="selectedFilters" [multiple]="true" (change)="selectedFiltersChanged($event)"> <mat-chip-listbox [value]="selectedFilters" [multiple]="true" (change)="selectedFiltersChanged($event)">
<mat-chip-option *ngFor="let filter of notificationFilters | keyvalue: originalOrder" [value]="filter.key" [selected]="selectedFilters.includes(filter.key)" color="accent">{{filter.value.label}}</mat-chip-option> <mat-chip-option *ngFor="let filter of notificationFilters | keyvalue: originalOrder" [value]="filter.key" [selected]="selectedFilters.includes(filter.key)" color="accent">{{filter.value.label}}</mat-chip-option>
</mat-chip-listbox> </mat-chip-listbox>
<app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="filtered_notifications"></app-notifications-list> <app-notifications-list class="notifications-list" [style.height]="list_height" (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="filtered_notifications"></app-notifications-list>
</div> </div>
<button style="margin: 10px 0px 2px 10px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button> <button style="margin: 10px 0px 2px 10px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button>
</div> </div>

9
src/app/components/notifications/notifications.component.ts
Unescape Escape View File

@ -14,6 +14,7 @@ export class NotificationsComponent implements OnInit {
notifications: Notification[] = null; notifications: Notification[] = null;
filtered_notifications: Notification[] = null; filtered_notifications: Notification[] = null;
list_height = '65vh';
@Output() notificationCount = new EventEmitter<number>(); @Output() notificationCount = new EventEmitter<number>();
@ -110,6 +111,8 @@ export class NotificationsComponent implements OnInit {
filterNotifications(): void { filterNotifications(): void {
this.filtered_notifications = this.notifications.filter(notification => this.selectedFilters.length === 0 || this.selectedFilters.includes(notification.type)); this.filtered_notifications = this.notifications.filter(notification => this.selectedFilters.length === 0 || this.selectedFilters.includes(notification.type));
// We need to do this to get the virtual scroll component to have an appropriate height
this.calculateListHeight();
} }
selectedFiltersChanged(event: MatChipListboxChange): void { selectedFiltersChanged(event: MatChipListboxChange): void {
@ -117,6 +120,12 @@ export class NotificationsComponent implements OnInit {
this.filterNotifications(); this.filterNotifications();
} }
calculateListHeight() {
const avgHeight = 166;
const calcHeight = this.filtered_notifications.length * avgHeight;
this.list_height = calcHeight > window.innerHeight*0.65 ? '65vh' : `${calcHeight}px`;
}
originalOrder = (): number => { originalOrder = (): number => {
return 0; return 0;
} }

30
src/app/dialogs/about-dialog/about-dialog.component.html
Unescape Escape View File

@ -35,36 +35,6 @@
<p> <p>
<ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container> <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
</p> </p>
<mat-divider></mat-divider>
<div style="margin-top: 10px;">
<h5>Personal settings:</h5>
<mat-form-field>
<mat-label i18n="Sidepanel mode">Sidepanel mode</mat-label>
<mat-select [(ngModel)]="sidepanel_mode" (selectionChange)="sidePanelModeChanged($event.value)">
<mat-option value="over">
Over
</mat-option>
<mat-option value="side">
Side
</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-label i18n="File card size">File card size</mat-label>
<mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
<mat-option value="large">
Large
</mat-option>
<mat-option value="medium">
Medium
</mat-option>
<mat-option value="small">
Small
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div> </div>
</mat-dialog-content> </mat-dialog-content>

13
src/app/dialogs/about-dialog/about-dialog.component.ts
Unescape Escape View File

@ -16,8 +16,6 @@ export class AboutDialogComponent implements OnInit {
checking_for_updates = true; checking_for_updates = true;
current_version_tag = CURRENT_VERSION; current_version_tag = CURRENT_VERSION;
sidepanel_mode = this.postsService.sidepanel_mode;
card_size = this.postsService.card_size;
constructor(public postsService: PostsService) { } constructor(public postsService: PostsService) { }
@ -31,15 +29,4 @@ export class AboutDialogComponent implements OnInit {
this.latestGithubRelease = res; this.latestGithubRelease = res;
}); });
} }
sidePanelModeChanged(new_mode) {
localStorage.setItem('sidepanel_mode', new_mode);
this.postsService.sidepanel_mode = new_mode;
}
cardSizeOptionChanged(new_size) {
localStorage.setItem('card_size', new_size);
this.postsService.card_size = new_size;
}
} }

0
src/app/settings/locales_list.ts → src/app/dialogs/user-profile-dialog/locales_list.ts
Unescape Escape View File

45
src/app/dialogs/user-profile-dialog/user-profile-dialog.component.html
Unescape Escape View File

@ -13,19 +13,52 @@
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
</div> </div>
<mat-divider style="margin-bottom: 20px"></mat-divider>
</div> </div>
<mat-form-field color="accent">
<div *ngIf="!postsService.isLoggedIn || !postsService.user"> <mat-label><ng-container i18n="Language select label">Language</ng-container></mat-label>
<h5><mat-icon>warn</mat-icon><ng-container i18n="Not logged in notification">You are not logged in.</ng-container></h5> <mat-select (selectionChange)="localeSelectChanged($event.value)" [(value)]="initialLocale">
<button (click)="loginClicked()" mat-raised-button color="primary"><ng-container i18n="Login">Login</ng-container></button> <mat-option *ngFor="let locale of supported_locales" [value]="locale">
</div> <ng-container *ngIf="all_locales[locale]">
{{all_locales[locale]['nativeName']}}
</ng-container>
</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-label i18n="Sidepanel mode">Sidepanel mode</mat-label>
<mat-select [(ngModel)]="sidepanel_mode" (selectionChange)="sidePanelModeChanged($event.value)">
<mat-option i18n="Over" value="over">
Over
</mat-option>
<mat-option i18n="Side" value="side">
Side
</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-label i18n="File card size">File card size</mat-label>
<mat-select [(ngModel)]="card_size" (selectionChange)="cardSizeOptionChanged($event.value)">
<mat-option i18n="Large" value="large">
Large
</mat-option>
<mat-option i18n="Medium" value="medium">
Medium
</mat-option>
<mat-option i18n="Small" value="small">
Small
</mat-option>
</mat-select>
</mat-form-field>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<div style="width: 100%"> <div style="width: 100%">
<div style="position: relative"> <div style="position: relative">
<button mat-stroked-button mat-dialog-close color="primary"><ng-container i18n="Close">Close</ng-container></button> <button mat-stroked-button mat-dialog-close color="primary"><ng-container i18n="Close">Close</ng-container></button>
<button style="position: absolute; right: 0px;" (click)="logoutClicked()" mat-stroked-button color="warn"><ng-container i18n="Logout">Logout</ng-container></button> <button *ngIf="postsService.isLoggedIn" style="position: absolute; right: 0px;" (click)="logoutClicked()" mat-stroked-button color="warn"><ng-container i18n="Logout">Logout</ng-container></button>
</div> </div>
</div> </div>
</mat-dialog-actions> </mat-dialog-actions>

31
src/app/dialogs/user-profile-dialog/user-profile-dialog.component.ts
Unescape Escape View File

@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { PostsService } from 'app/posts.services'; import { PostsService } from 'app/posts.services';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
import { isoLangs } from './locales_list';
@Component({ @Component({
selector: 'app-user-profile-dialog', selector: 'app-user-profile-dialog',
@ -10,9 +11,24 @@ import { MatDialogRef } from '@angular/material/dialog';
}) })
export class UserProfileDialogComponent implements OnInit { export class UserProfileDialogComponent implements OnInit {
all_locales = isoLangs;
supported_locales = ['en', 'es', 'de', 'fr', 'nl', 'pt', 'it', 'ca', 'cs', 'nb', 'ru', 'zh', 'ko', 'id', 'en-GB'];
initialLocale = localStorage.getItem('locale');
sidepanel_mode = this.postsService.sidepanel_mode;
card_size = this.postsService.card_size;
constructor(public postsService: PostsService, private router: Router, public dialogRef: MatDialogRef<UserProfileDialogComponent>) { } constructor(public postsService: PostsService, private router: Router, public dialogRef: MatDialogRef<UserProfileDialogComponent>) { }
ngOnInit(): void { ngOnInit(): void {
this.postsService.getSupportedLocales().subscribe(res => {
if (res && res['supported_locales']) {
this.supported_locales = ['en', 'en-GB']; // required
this.supported_locales = this.supported_locales.concat(res['supported_locales']);
}
}, err => {
console.error(`Failed to retrieve list of supported languages! You may need to run: 'node src/postbuild.mjs'. Error below:`);
console.error(err);
});
} }
loginClicked() { loginClicked() {
@ -25,4 +41,19 @@ export class UserProfileDialogComponent implements OnInit {
this.dialogRef.close(); this.dialogRef.close();
} }
localeSelectChanged(new_val: string): void {
localStorage.setItem('locale', new_val);
this.postsService.openSnackBar($localize`Language successfully changed! Reload to update the page.`)
}
sidePanelModeChanged(new_mode) {
localStorage.setItem('sidepanel_mode', new_mode);
this.postsService.sidepanel_mode = new_mode;
}
cardSizeOptionChanged(new_size) {
localStorage.setItem('card_size', new_size);
this.postsService.card_size = new_size;
}
} }

2
src/app/main/main.component.html
Unescape Escape View File

@ -205,7 +205,7 @@
</div> </div>
<div style="display: flex; justify-content: center;" *ngIf="downloads && downloads.length > 0 && !autoplay"> <div style="display: flex; justify-content: center;" *ngIf="downloads && downloads.length > 0 && !autoplay">
<app-downloads style="width: 80%; margin-bottom: 10px" [uids]="download_uids"></app-downloads> <app-downloads style="width: 80%; min-width: 350px; margin-bottom: 10px" [uids]="download_uids"></app-downloads>
</div> </div>
<ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled"> <ng-container *ngIf="cachedFileManagerEnabled || fileManagerEnabled">

15
src/app/player/player.component.css
Unescape Escape View File

@ -37,11 +37,15 @@
} }
.spinner { .spinner {
bottom: 1px; bottom: -2px;
left: 2px; left: 6px;
position: absolute; position: absolute;
} }
.buttons {
position: relative;
}
.save-button { .save-button {
right: 25px; right: 25px;
position: fixed; position: fixed;
@ -85,13 +89,6 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
.spinner-div {
position: relative;
display: inline-block;
margin-right: 12px;
top: 8px;
}
.skip-ad-button { .skip-ad-button {
position: absolute; position: absolute;
right: 20px; right: 20px;

24
src/app/player/player.component.html
Unescape Escape View File

@ -22,20 +22,22 @@
</p> </p>
</ng-container> </ng-container>
<ng-container *ngIf="!db_file || !db_file['description']"> <ng-container *ngIf="!db_file || !db_file['description']">
<p style="text-align: center;"> <p i18n="No description" style="text-align: center;">
No description available. No description available.
</p> </p>
</ng-container> </ng-container>
</div> </div>
<div class="col-2"> <div class="col-2">
<ng-container *ngIf="db_playlist"> <span class="buttons" *ngIf="db_playlist">
<button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner></button> <button (click)="downloadContent()" [disabled]="downloading" mat-icon-button><mat-icon>save</mat-icon></button>
<mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner>
<button *ngIf="(!postsService.isLoggedIn || postsService.permissions.includes('sharing')) && !auto" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button> <button *ngIf="(!postsService.isLoggedIn || postsService.permissions.includes('sharing')) && !auto" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
</ng-container> </span>
<ng-container *ngIf="db_file"> <span class="buttons" *ngIf="db_file">
<button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>cloud_download</mat-icon><mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner></button> <button (click)="downloadFile()" [disabled]="downloading" mat-icon-button><mat-icon>cloud_download</mat-icon></button>
<mat-spinner *ngIf="downloading" class="spinner" [diameter]="35"></mat-spinner>
<button *ngIf="!postsService.isLoggedIn || postsService.permissions.includes('sharing')" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button> <button *ngIf="!postsService.isLoggedIn || postsService.permissions.includes('sharing')" (click)="openShareDialog()" mat-icon-button><mat-icon>share</mat-icon></button>
</ng-container> </span>
<ng-container *ngIf="db_file || playlist[currentIndex]"></ng-container> <ng-container *ngIf="db_file || playlist[currentIndex]"></ng-container>
<button (click)="openFileInfoDialog()" *ngIf="db_file || db_playlist" mat-icon-button><mat-icon>info</mat-icon></button> <button (click)="openFileInfoDialog()" *ngIf="db_file || db_playlist" mat-icon-button><mat-icon>info</mat-icon></button>
<button *ngIf="db_file && db_file.url.includes('twitch.tv')" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button> <button *ngIf="db_file && db_file.url.includes('twitch.tv')" (click)="drawer.toggle()" mat-icon-button><mat-icon>chat</mat-icon></button>
@ -56,14 +58,6 @@
<app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime" [sub]="subscription"></app-twitch-chat> <app-twitch-chat #twitchchat [db_file]="db_file" [current_timestamp]="api.currentTime" [sub]="subscription"></app-twitch-chat>
</ng-container> </ng-container>
</mat-drawer> </mat-drawer>
<!-- <div class="update-playlist-button-div" *ngIf="id && playlistChanged()">
<div class="spinner-div">
<mat-spinner *ngIf="playlist_updating" [diameter]="25"></mat-spinner>
</div>
<button color="primary" [disabled]="playlist_updating" (click)="updatePlaylist()" mat-raised-button><ng-container i18n="Playlist save changes button">Save changes</ng-container>&nbsp;<mat-icon>update</mat-icon></button>
</div> -->
</mat-drawer-container> </mat-drawer-container>
</div> </div>
</div> </div>

9
src/app/player/player.component.ts
Unescape Escape View File

@ -61,8 +61,6 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
url = null; url = null;
name = null; name = null;
innerWidth: number;
downloading = false; downloading = false;
save_volume_timer = null; save_volume_timer = null;
@ -70,14 +68,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('twitchchat') twitchChat: TwitchChatComponent; @ViewChild('twitchchat') twitchChat: TwitchChatComponent;
@HostListener('window:resize', ['$event'])
onResize(): void {
this.innerWidth = window.innerWidth;
}
ngOnInit(): void { ngOnInit(): void {
this.innerWidth = window.innerWidth;
this.playlist_id = this.route.snapshot.paramMap.get('playlist_id'); this.playlist_id = this.route.snapshot.paramMap.get('playlist_id');
this.uid = this.route.snapshot.paramMap.get('uid'); this.uid = this.route.snapshot.paramMap.get('uid');
this.sub_id = this.route.snapshot.paramMap.get('sub_id'); this.sub_id = this.route.snapshot.paramMap.get('sub_id');

2
src/app/posts.services.ts
Unescape Escape View File

@ -115,7 +115,7 @@ import {
RestartDownloadResponse, RestartDownloadResponse,
TaskType TaskType
} from '../api-types'; } from '../api-types';
import { isoLangs } from './settings/locales_list'; import { isoLangs } from './dialogs/user-profile-dialog/locales_list';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
import { MatDrawerMode } from '@angular/material/sidenav'; import { MatDrawerMode } from '@angular/material/sidenav';

17
src/app/settings/settings.component.html
Unescape Escape View File

@ -78,23 +78,6 @@
</div> </div>
</div> </div>
</div> </div>
<mat-divider></mat-divider>
<div *ngIf="new_config" class="container-fluid">
<div class="row">
<div class="col-12 mt-3">
<mat-form-field color="accent">
<mat-label><ng-container i18n="Language select label">Language</ng-container></mat-label>
<mat-select (selectionChange)="localeSelectChanged($event.value)" [(value)]="initialLocale">
<mat-option *ngFor="let locale of supported_locales" [value]="locale">
<ng-container *ngIf="all_locales[locale]">
{{all_locales[locale]['nativeName']}}
</ng-container>
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</ng-template> </ng-template>
</mat-tab> </mat-tab>
<!-- Downloader --> <!-- Downloader -->

20
src/app/settings/settings.component.ts
Unescape Escape View File

@ -1,6 +1,5 @@
import { Component, OnInit, EventEmitter } from '@angular/core'; import { Component, OnInit, EventEmitter } from '@angular/core';
import { PostsService } from 'app/posts.services'; import { PostsService } from 'app/posts.services';
import { isoLangs } from './locales_list';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import {DomSanitizer} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
@ -22,10 +21,6 @@ import { GenerateRssUrlComponent } from 'app/dialogs/generate-rss-url/generate-r
styleUrls: ['./settings.component.scss'] styleUrls: ['./settings.component.scss']
}) })
export class SettingsComponent implements OnInit { export class SettingsComponent implements OnInit {
all_locales = isoLangs;
supported_locales = ['en', 'es', 'de', 'fr', 'nl', 'pt', 'it', 'ca', 'cs', 'nb', 'ru', 'zh', 'ko', 'id', 'en-GB'];
initialLocale = localStorage.getItem('locale');
initial_config = null; initial_config = null;
new_config = null new_config = null
loading_config = false; loading_config = false;
@ -83,16 +78,6 @@ export class SettingsComponent implements OnInit {
const tab = this.route.snapshot.paramMap.get('tab'); const tab = this.route.snapshot.paramMap.get('tab');
this.tabIndex = tab && this.TAB_TO_INDEX[tab] ? this.TAB_TO_INDEX[tab] : 0; this.tabIndex = tab && this.TAB_TO_INDEX[tab] ? this.TAB_TO_INDEX[tab] : 0;
this.postsService.getSupportedLocales().subscribe(res => {
if (res && res['supported_locales']) {
this.supported_locales = ['en', 'en-GB']; // required
this.supported_locales = this.supported_locales.concat(res['supported_locales']);
}
}, err => {
console.error(`Failed to retrieve list of supported languages! You may need to run: 'node src/postbuild.mjs'. Error below:`);
console.error(err);
});
} }
getConfig(): void { getConfig(): void {
@ -207,11 +192,6 @@ export class SettingsComponent implements OnInit {
}); });
} }
localeSelectChanged(new_val: string): void {
localStorage.setItem('locale', new_val);
this.postsService.openSnackBar($localize`Language successfully changed! Reload to update the page.`)
}
generateBookmarklet(): void { generateBookmarklet(): void {
this.bookmarksite('YTDL-Material', this.generated_bookmarklet_code); this.bookmarksite('YTDL-Material', this.generated_bookmarklet_code);
} }

659
src/assets/i18n/messages.en.xlf
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save